/*
Theme Name:Yala Events
Author:Mehdi Reghai
Description:Theme for Yala Events
Version:1.0
*/


/* General */

@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,600,800);

* {margin:0;padding:0;}
body{font-family:'Raleway',Arial,sans-serif;margin:0;padding:0;background:url('pattern.jpg') repeat;}
a:link,a:visited{text-decoration:none;color:#FFF;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
a:hover,a:active{text-decoration:none;color:#25A4D9;}
hr.clear{width:100%;visibility:hidden;}

/* Custom Scrollbar */

::-webkit-scrollbar{width:8px;padding:0.5%;}
::-webkit-scrollbar-track{background:#E6E6E6;}
::-webkit-scrollbar-thumb{background:#666666;}
::-webkit-scrollbar-thumb:window-inactive{background:#B1B1B1;}
	
/* Header */

header{margin:0;padding:0;}
header img{width:100%;display:block;}
header h1,header h2{text-indent:-9999px;position:absolute;}

/* Menu */
.top-logo { display: none;}
#menu{position:fixed;margin:0 auto;padding:15px 0;width:100%;background:#BE1A2E;z-index:1000;}
#menu .left{margin:10px 4%;}
#menu .left li{list-style:none;float:left;margin:9px 20px;font-weight:400;}
#menu .left li a{color:#FFF;text-decoration:none;}
#menu .left li a:hover{border-bottom:3px solid;padding-bottom:10px;}
#menu .right{margin:10px 5%;}
#menu .right li{list-style:none;float:right;margin:2px 10px 10px 10px;}
#menu .right li img{width:35px;}
#menu .right li img:hover{-webkit-transition:1s ease;-moz-transition:1s ease;-ms-transition:1s ease;-o-transition:1s ease;transition:1s ease;opacity:0.8;}
	
/* Content */

#firstline{background:#212121 url('./diagonale.png') no-repeat center;width:100%;height:600px;margin:0;padding:0;}
#firstline h3{font-weight:400;font-size:60px;line-height:70px;text-transform:uppercase;width:30%;color:#BE1A2E;padding:120px 0 0 5%;float:left;}
#firstline p{font-weight:300;font-size:20px;line-height:32px;color:#FFF;padding:220px 5% 0 0;width:30%;float:right;}

#secondline{width:100%;height:600px;margin:0;padding:0;}
#secondline .col1{float:left;width:50%;}
#secondline .col2{float:right;width:50%;}
#secondline h3{font-weight:400;font-size:40px;line-height:50px;text-transform:uppercase;color:#BE1A2E;padding:120px 0 0 10%;}
#secondline p{font-weight:400;font-size:20px;line-height:32px;color:#333;padding:30px 0 0 10%;width:60%;}
#secondline img{float:right;padding:50px 15% 0 0;width:80%;}

#thirdline {width:100%;margin:50px 0 0 0;padding:0;overflow:hidden; background: #E6E6E6;}
#thirdline img{width:100%;-webkit-filter:brightness(75%);}
#thirdline img:hover{width:100%;-webkit-filter:brightness(30%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease;}
#thirdline .tcontent{ width: 60%; float: right;}
#thirdline .tcontent h3{font-weight:800;font-size:25px;text-transform:uppercase;color:#333;margin:0;padding:65px 0 0 50px;}
#thirdline .tcontent p{font-weight:400;font-size:18px;line-height:26px;color:#333;padding:25px 0 0 50px;width:80%;}
#thirdline .tcontent ul{font-weight:400;font-size:17px;line-height:25px;color:#333;padding:25px 0 0 100px;width:65%;}
#thirdline .tcontent ul li{margin:0 0 5px 0;}

#thirdline .slider { width: 40%; float: left;}
#thirdline .slider li { height: 637px; width: 637px; position: relative; display: table-cell; text-align: center;}
#thirdline .slider li span{ position: relative; top: 46%; z-index: 9999; color:#FFF;padding:15px 25px;border:4px solid;font-weight:800;font-size:30px;text-transform:uppercase;}
#thirdline .slider li img { width: 100%; position: absolute; display: block;}


#fourthline{width:100%;height:600px;margin:-5px 0 0 0;padding:0;}
#fourthline .col1{float:left;width:50%;}
#fourthline .col2{float:right;width:50%;}
#fourthline h3{font-weight:400;font-size:40px;text-transform:uppercase;color:#BE1A2E;padding:15px 0 0 10%;}
#fourthline h4{font-weight:400;font-size:16px;text-transform:uppercase;color:#9E9E9E;padding:100px 0 0 10.4%;}
#fourthline h5{border-top:1px solid #9E9E9E;border-bottom:1px solid #9E9E9E;margin:30px 0 0 10.2%;padding:25px 0;width:70%;}
#fourthline h5 span{font-weight:800;margin:0 40px 0 2px;padding:0;text-transform:uppercase;color:#333;}
#fourthline h5 span a{color:#BE1A2E;}
#fourthline h5 span a:hover{-webkit-transition:1s ease;-moz-transition:1s ease;-ms-transition:1s ease;-o-transition:1s ease;transition:1s ease;color:#9E9E9E;}
#fourthline p{font-weight:400;font-size:20px;line-height:32px;color:#333;padding:35px 0 0 10%;width:60%;}
#fourthline p:first-of-type{font-weight:600;}

/* Footer */

footer{width:100%;margin:110px 0 0 0;padding:0;}
footer img{width:100%;display:block;}

/* Media Queries */

@media screen and (max-width:1680px) {    
	#secondline p{width:75%;}
	#secondline img{padding-right:5%;width:90%;}
	
}

@media screen and (max-width:875px) { 
#thirdline .tcontent { width: 100%; margin-bottom: 50px;}   
#thirdline .slider { width: 90%; margin: 30px auto; float: initial; } 

}


@media screen and (max-width:1440px) {
    #firstline{background:#212121 url('./diagonale-sm.png') no-repeat center;width:100%;height:460px;margin:0;padding:0;}
	#firstline h3{font-size:46px;line-height:58px;padding:80px 0 0 5.5%;}
	#firstline p{font-size:20px;line-height:34px;color:#FFF;padding:140px 5.5% 0 0;width:35%;float:right;}
	#secondline{height:570px;}
	#secondline h3{font-size:38px;line-height:50px;padding:130px 0 0 11%;}
	#secondline p{font-size:20px;line-height:32px;padding:20px 0 0 11%;width:75%;}
	#secondline img{padding:100px 5% 0 0;width:90%;}
	
	#fourthline h3{font-size:40px;padding:15px 0 0 12%;}
	#fourthline h4{font-size:16px;padding:100px 0 0 12.5%;}
	#fourthline h5{margin:25px 0 0 12%;width:75%;}
	#fourthline h5 span{margin:0 25px 0 2px;}
	#fourthline p{font-size:19px;line-height:32px;padding:30px 0 0 12%;width:75%;}
}

@media screen and (max-width:1366px) {
    #firstline{background:#212121 url('./diagonale-sm.png') no-repeat center;width:100%;height:460px;margin:0;padding:0;}
	#firstline h3{font-size:45px;line-height:56px;padding:80px 0 0 5.5%;}
	#firstline p{font-size:18px;line-height:32px;color:#FFF;padding:140px 5.5% 0 0;width:35%;float:right;}
	#secondline{height:570px;}
	#secondline h3{font-size:36px;line-height:46px;padding:130px 0 0 11%;}
	#secondline p{font-size:18px;line-height:30px;padding:20px 0 0 11%;width:75%;}
	#secondline img{padding:100px 5% 0 0;width:90%;}
	
	#fourthline h3{font-size:38px;padding:15px 0 0 12%;}
	#fourthline h4{font-size:16px;padding:100px 0 0 12.5%;}
	#fourthline h5{margin:25px 0 0 12%;width:75%;}
	#fourthline h5 span{margin:0 25px 0 2px;}
	#fourthline p{font-size:18px;line-height:30px;padding:30px 0 0 12%;width:75%;}
}

@media screen and (max-width:1280px) {
    #firstline{background:#212121 url('./diagonale-sm.png') no-repeat center;width:100%;height:460px;margin:0;padding:0;}
	#firstline h3{font-size:45px;line-height:56px;padding:80px 0 0 5.5%;}
	#firstline p{font-size:18px;line-height:32px;color:#FFF;padding:140px 5.5% 0 0;width:35%;float:right;}
	#secondline{height:530px;}
	#secondline h3{font-size:36px;line-height:46px;padding:130px 0 0 12%;}
	#secondline p{font-size:18px;line-height:30px;padding:20px 0 0 12%;width:85%;}
	#secondline img{padding:100px 5% 0 0;width:85%;}
	
	#fourthline h3{font-size:36px;padding:15px 0 0 12%;}
	#fourthline h4{font-size:16px;padding:100px 0 0 12.5%;}
	#fourthline h5{font-size:12px;margin:25px 0 0 12%;width:75%;}
	#fourthline h5 span{margin:0 25px 0 2px;}
	#fourthline p{font-size:17px;line-height:28px;padding:25px 0 0 12%;width:75%;}
}

@media only screen and (max-width:1024px) {
    #firstline{background:#212121;width:100%;height:400px;margin:0;padding:0;}
	#firstline h3{font-size:34px;line-height:46px;padding:80px 0 0 6%;}
	#firstline p{font-size:18px;line-height:28px;padding:110px 6% 0 0;width:45%;}
	#secondline{height:360px;}
	#secondline h3{font-size:30px;line-height:40px;padding:60px 0 0 12%;}
	#secondline p{font-size:16px;line-height:26px;padding:15px 0 0 12%;width:85%;}
	#secondline img{padding:50px 10% 0 0;}
	
	#fourthline{height:400px;}
	#fourthline h3{font-size:35px;padding:15px 0 0 12%;}
	#fourthline h4{font-size:15px;padding:80px 0 0 12.5%;}
	#fourthline h5{font-size:11px;margin:25px 0 0 12%;width:80%;}
	#fourthline h5 span{margin:0 25px 0 2px;}
	#fourthline p{font-size:16px;line-height:28px;padding:25px 0 0 12%;width:75%;}
}

@media only screen and (max-width:1000px) {
	header{height:100vh;background:url('header-mobile.png') no-repeat center #BE1A2E;background-size:contain;overflow:hidden;}
	header img{display:none;}
	#firstline h3{font-size:28px;line-height:34px;margin:50px;padding:0;width:80%;}
	#firstline p{font-size:18px;line-height:26px;margin:0 50px;padding:0;width:80%;float:left;}
	#secondline .col1,#secondline .col2{float:none;width:100%;margin:0;padding:0;}
	#secondline{height:auto;}
	#secondline h3{font-size:28px;line-height:34px;margin:50px;padding:0;}
	#secondline p{font-size:18px;line-height:26px;margin:0 50px;padding:0;width:80%;float:left;}
	#secondline img{margin:50px 25px 0 25px;padding:0;width:90%;float:none;}
	
	#fourthline{height:auto;padding-bottom:50px;}
	#fourthline .col1,#fourthline .col2{float:none;width:100%;}
	#fourthline h3,#fourthline h4,#fourthline h5,#fourthline p{padding-left:0;margin-left:50px;}
	#fourthline h3{font-size:28px;line-height:34px;}
	#fourthline p{font-size:18px;line-height:26px;}
	footer{display:none;}
}

@media only screen and (max-width:777px) {
	.top-logo { display: block; float: left;}
	#menu .left {display: none;}
	#menu .right { float: right}
	header { display: none;}
	#menu {position: inherit; overflow: hidden;}
	.slider{display: none;}
}

@media only screen and (max-width:500px) {
	#firstline h3{font-size:20px;line-height:26px;margin:30px;padding:0;width:85%;}
	#firstline p{font-size:16px;line-height:22px;margin:0 25px;padding:0;width:85%;float:left;}
	#secondline h3{font-size:20px;line-height:26px;margin:30px 25px;padding:0;}
	#secondline p{font-size:16px;line-height:22px;margin:0 25px;padding:0;width:85%;float:left;}
	#secondline img{margin:25px 12px 0 12px;padding:0;width:90%;float:none;}
	
	#fourthline{height:auto;padding-bottom:25px;}
	#fourthline h3,#fourthline h4,#fourthline h5,#fourthline p{padding-left:0;margin-left:25px;}
	#fourthline p{font-size:16px;line-height:22px;}
	#fourthline h3{font-size:20px;line-height:26px;}
	#fourthline h4{padding-top:0;margin-top:50px;}
	#fourthline h5 span{float:none;display:block;margin:5px 0;}
	footer{display:none;}
}