body{padding-top:2%;width:100%;height:100%;color:#555;background-color:#fff;}html,body{height:100%;direction:ltr!important;}h1,h2,h3,h4,h5,h6{margin:0;text-transform:uppercase;}a{text-decoration:none;font-family:'DroidKufiBold';-webkit-transition:all 0.36s;transition:all 0.36s;}a:hover{color:#fff;text-decoration:none;}a:focus{outline:none;text-decoration:none;color:#fff;}p{line-height:2;direction:rtl;font-family:title100;text-align:justify;}ul,li{margin:0;padding:0;font-family:title100;padding-bottom:10px;text-align:right;}.f700{font-family:title700;}.f400{font-family:title400;}.f100{font-family:title100;}fieldset{border:0 none;margin:0 auto;padding:0;}.section-padding{padding:40px 0}.section-title{margin-bottom:10px;text-align:right;}.section-title h2{margin-bottom:10px;padding-bottom:15px;font-size:36px;position:relative;}.section-title h2:after{border-bottom:3px solid #e63b34;bottom:0;content:"";height:3px;right:0;margin:0 auto;position:absolute;right:0;width:10%;}.section-title h3{margin-bottom:10px;padding-bottom:15px;position:relative;}.section-title h3:after{border-bottom:3px solid #e63b34;bottom:0;content:"";height:3px;right:0;margin:0 auto;position:absolute;right:0;width:10%;}.section-title p{margin:auto;width:100%;}.breadcrumb-main{background:url(../img/bg/slide1.jpg);background-position:center center;background-size:cover;position:relative;height:350px;z-index:1;}.breadcrumb-main:after{background:rgba(0,0,0,0.6) none repeat scroll 0 0;position:absolute;content:"";height:100%;width:100%;left:0;top:0;z-index:-1;}.breadcrumb-title{padding-top:200px}.breadcrumb-title h2{font-weight:700;color:#fff;}.breadcrumb-title p,.breadcrumb-title p a{color:#fff}.button{font-family:'Open Sans',sans-serif;text-transform:uppercase;display:inline-block;padding:10px 10px;position:relative;font-weight:700;font-size:13px;color:#333;letter-spacing:1px;background:transparent;border:1px solid #FFF;-webkit-transition:0.36s;transition:0.36s;}.button:focus{color:#333}.button:hover{color:#fff;background:#333;}.owl-carousel .item{display:block;width:100%;height:auto;}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:#fff;}.loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-top-color:#3498db;z-index:1001;}.spinner-cube-grid.spinner{width:80px;height:80px;margin:0 auto;}.spinner-cube-grid .cube{width:33%;height:33%;background-color:#333;float:left;-webkit-animation:cubeGridScaleDelay 1.3s infinite ease-in-out;animation:cubeGridScaleDelay 1.3s infinite ease-in-out;}.spinner-cube-grid .cube:nth-child(1){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.spinner-cube-grid .cube:nth-child(2){-webkit-animation-delay:0.3s;animation-delay:0.3s;}.spinner-cube-grid .cube:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}.spinner-cube-grid .cube:nth-child(4){-webkit-animation-delay:0.1s;animation-delay:0.1s;}.spinner-cube-grid .cube:nth-child(5){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.spinner-cube-grid .cube:nth-child(6){-webkit-animation-delay:0.3s;animation-delay:0.3s;}.spinner-cube-grid .cube:nth-child(7){-webkit-animation-delay:0s;animation-delay:0s;}.spinner-cube-grid .cube:nth-child(8){-webkit-animation-delay:0.1s;animation-delay:0.1s;}.spinner-cube-grid .cube:nth-child(9){-webkit-animation-delay:0.2s;animation-delay:0.2s;}@keyframes cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1);}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1);}}.loaded .loader{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transition:all 1.3s ease-out;transition:all 1.3s ease-out;}.loaded #loader-wrapper{visibility:hidden;-webkit-transition:all 0.9s ease-out;transition:all 0.9s ease-out;}.header-area{height:100%;}.header-top-bar{background:#333 none repeat scroll 0 0;color:#fff;font-size:13px;font-weight:300;padding:10px 0;}.top-social-icon a{color:#fff;display:inline-block;margin-right:8px;-webkit-transition:0.36s;-o-transition:0.36s;transition:0.36s;}.top-social-icon a:hover{transform:scale(1.1);}.header-top-cart ul li a{color:#fff}.header-top-info i{margin-left:20px;margin-right:5px;}.shop-cart i{font-size:16px}.shop-cart>span{top:0;right:0;position:absolute;background:#fff none repeat scroll 0 0;border-radius:50%;color:#333;display:inline-block;font-size:10px;height:18px;letter-spacing:0;line-height:16px;text-align:center;width:18px;margin-top:-6px;}.home-slide-area,.home-slide-area div{height:100%}.home-slide-area div.home-display-table-cell,.home-slide-area div.home-display-table-cell div{height:auto}.single-slide-bg{position:relative;z-index:1;}.single-slide-bg:after{background:rgba(0,0,0,0.5);position:absolute;height:100%;width:100%;content:"";z-index:-1;left:0;top:0;}.home-display-table{width:100%;height:100%;display:table;}.home-display-table-cell{display:table-cell;vertical-align:middle;}.slide-bg1{background:url(../img/bg/slide1.jpg) scroll 0 0;background-size:cover;}.slide-bg2{background:url(../img/bg/slide2.jpg) scroll 0 0;background-size:cover;}.slide-bg3{background:url(../img/bg/slide3.jpg) scroll 0 0;background-size:cover;}#home-carousel .item p{color:#fff;font-size:25px;}#home-carousel .item h2{width:70%;color:#fff;font-size:60px;font-weight:300;margin:0 auto 30px;}#home-carousel .item h2 span{font-weight:900;}#home-carousel .item .button{color:#fff}#home-carousel .carousel-indicators>li{border-radius:0;}.carousel-fade .carousel-inner .item{-webkit-transition-property:opacity;transition-property:opacity;}.carousel-fade .carousel-inner .item,.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}.carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);}.carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev,.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.home-btn-bg{margin-right:10px;}.header-top-area{position:relative;background:#1d1d1d;box-shadow:0 0 1px 1px #1d1d1d;width:100%;z-index:999;-webkit-transition:all 0.36s ease-out;transition:all 0.36s ease-out;}.sticky-wrapper{position:absolute;width:100%;z-index:999;}.navbar-default{background:rgba(0,0,0,0) none repeat scroll 0 0;border:medium none;border-radius:0;margin-bottom:0;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;width:100%;}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background-color:transparent}.navbar-brand{color:#fff!important;font-family:'Titillium Web',sans-serif;font-size:28px;font-weight:700;padding:30px 0;-webkit-transition:0.36s;transition:0.36s;}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#fff}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#fff}.navbar-default .navbar-toggle .icon-bar{background-color:#333}.mainmenu li a{color:#fff!important;font-family:'Open Sans',sans-serif;text-transform:uppercase;font-weight:700;font-size:13px;padding:30px 15px;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.mainmenu ul li:last-child a{padding-right:0}.mainmenu ul.nav.navbar-nav li a:hover{color:#333!important}.navbar-default .navbar-toggle{background:#fff none repeat scroll 0 0}.is-sticky .header-top-area{background:#1d1d1d;box-shadow:0px 3px 4.7px 0.3px rgba(0,0,0,0.24);}.is-sticky .mainmenu li a{padding:20px 15px;color:#666!important;}.is-sticky .mainmenu ul.nav.navbar-nav li.active a{color:#333!important}.is-sticky .navbar-brand{color:#333!important;font-size:26px;padding:20px 0;}.about-text h3,.skills-progress h3{margin-bottom:20px}.about-text p{margin-bottom:15px}.about-text ul{margin-bottom:25px}.about-text ul li{font-size:13px;margin-bottom:10px;}.about-text li i{margin-right:5px;color:#333;}.video-area iframe{width:100%;height:310px;border:medium none;}.service-area{background:#f6f6f6 none repeat scroll 0 0;padding-bottom:50px;}.single-service{background:#fff;margin-bottom:30px;padding:50px 25px;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.single-service:hover{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08)}.single-service i{font-size:52px;color:#333;}.single-service h4{margin:20px 0 10px 0;font-size:20px;}.single-service p{font-size:16px}a.read-more i{font-size:13px;margin-right:5px;color:#999;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}a.read-more{color:#999;font-size:12px;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}a.read-more:hover i,a.read-more:hover{color:#333}.single-skill h3{margin-top:15px}.progressbar{position:relative;height:175px;width:175px;margin:0 auto;overflow:hidden;}.progressbar div{position:absolute;height:175px;width:175px;border-radius:50%;}.progressbar div span{position:absolute;font-size:25px;line-height:150px;height:150px;width:150px;left:12.5px;top:12.5px;border-radius:50%;background-color:white;}.progressbar .rotate{clip:rect(0 100px 200px 0);}.progressbar .left{clip:rect(0 100px 200px 0);opacity:1;}.progressbar .right{clip:rect(0 100px 200px 0);transform:rotate(180deg);opacity:0;}@keyframes toggle{0%{opacity:0;}100%{opacity:1;}}.portfolio-area{background:#f6f6f6 none repeat scroll 0 0}.single-work{overflow:hidden;position:relative;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.single-work:hover{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08)}.work-overlay{background:rgba(255,255,255,0.7) none repeat scroll 0 0;position:absolute;padding:20px;height:100%;width:100%;bottom:0;left:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transition:all 0.6s ease-in-out 0s;transition:all 0.6s ease-in-out 0s;}.single-work:hover .work-overlay{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}.work-title>h4{margin-top:60px}.work-title p{margin:0}.work-icon a{color:#666;display:inline-block;font-size:18px;margin:5px;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.work-icon a:hover{color:#333!important}.portfolio-btn a i{font-size:14px;margin-right:10px;}.count-area{background:url("../img/bg/count-bg.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.count-area:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.counter{;padding:30px;color:#fff;}.counter h2{margin:10px 0 5px 0;font-size:34px;color:#fff;}.counter p{margin:0;}.counter i{font-size:40px;}.single-team{-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.single-team:hover{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08)}.team-overlay{background:#f6f6f6;padding:20px;}.team-title{float:left}.team-title p{margin:0;font-size:12px;}.team-social-link{float:right;margin-top:10px;}.team-social-link a i{border:1px solid #555;display:inline-block;text-align:center;line-height:25px;font-size:12px;height:25px;width:25px;color:#555;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.team-social-link a i:hover{background:#333;border:1px solid #555;color:#fff;}.pricing-area{background:#f6f6f6}.single-pricing{padding:20px 0;background:#fff;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.single-pricing:hover{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08)}.price{padding:25px;-webkit-transition:all 0.6s ease 0s;transition:all 0.6s ease 0s;}.single-pricing h3{border-bottom:1px solid #ddd;display:inline-block;font-family:"Ubuntu",sans-serif;font-size:16px;font-weight:300;letter-spacing:3px;margin-bottom:10px;padding:0 0 10px;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.price h4{color:#666;font-size:52px;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.price span{font-size:14px;display:block;margin-top:10px;}.pricing-list{list-style:outside none none;text-align:center;padding:0 25px;}.pricing-list li{border-bottom:1px solid #eee;color:#161616;padding:15px 0;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.pricing-btn{padding:25px 0}.single-pricing.recommended{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08);-webkit-transform:scale(1.05);transform:scale(1.05);}.single-pricing.recommended .price h4,.single-pricing:hover .price h4{color:#333}.area1{background:url("../img/bg/slide1.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.area1:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area1 .item img{}.area1 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area1 .item h4,.area1 .item p{color:#fff}//-------------------- .area3 { background: url("../img/bg/back3.jpg"); background-position: center center; background-size: cover; position: relative; z-index: 1; }.area3:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area3 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area3 .item h4,.area3 .item p{color:#fff}.area3{background:url("../img/bg/back3.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.area3:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area3 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area3 .item h4,.area3 .item p{color:#fff}.area2{background:url("../img/bg/back2.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.area2:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area2 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area2 .item h4,.area2 .item p{color:#fff}.area4{background:url("../img/bg/back4.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.area4:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area4 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area4 .item h4,.area4 .item p{color:#fff}.area5{background:url("../img/bg/back5.jpg");background-position:center center;background-size:cover;position:relative;z-index:1;}.area5:after{background:rgba(0,0,0,0.8) none repeat scroll 0 0;position:absolute;height:100%;width:100%;content:"";left:0;top:0;z-index:-111;}.area5 .item h6{font-weight:400;margin:10px 0 20px;color:#fff;}.area5 .item h4,.area5 .item p{color:#fff}.cutomers-rating{margin-bottom:10px}.cutomers-rating i{color:#ffc207}#testimonial-carousel .carousel-indicators-slider,#testimonial-carousel2 .carousel-indicators-slider,#testimonial-carousel3 .carousel-indicators-slider{bottom:-40px;}#testimonial-carousel .carousel-indicators>li,#testimonial-carousel2 .carousel-indicators>li,#testimonial-carousel3 .carousel-indicators>li{border-radius:0;}.blog-area{background:#f6f6f6}.single-blog{background:#fff;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.single-blog:hover{box-shadow:0 20px 30px 0 rgba(0,0,0,0.08)}.single-blog img{padding:10px 10px 0 10px}.blog-content{padding:25px}.blog-content span{font-size:12px;color:#333;}.blog-content span i{color:#333}.blog-content a h2{font-size:20px;margin:5px 0 15px;}.blog-btn{margin-top:30px}.blog-btn a i{font-size:14px;margin-right:10px;}.shop-grid .shop-all{display:none;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}.shop-filter ul{list-style:outside none none;margin-bottom:10px;text-align:center;}.shop-filter ul li{margin:5px;cursor:pointer;font-size:12px;padding:10px 20px;display:inline-block;border:2px solid #f6f6f6;text-transform:uppercase;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.shop-filter ul li.active,.shop-filter ul li:hover{background:#333 none repeat scroll 0 0;border:2px solid #333;color:#fff;}.single-product{background:#f6f6f6;position:relative;overflow:hidden;margin-top:30px;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.single-product:hover{background:transparent;box-shadow:0 20px 30px 0 rgba(0,0,0,0.08);}.product-img{position:relative}.product-overlay{position:absolute;height:100%;width:100%;left:0;top:0;opacity:0;-webkit-transition:all 0.36s ease-in-out 0s;transition:all 0.36s ease-in-out 0s;}.single-product:hover .product-overlay{background:rgba(255,255,255,0.7);opacity:1;}.product-overlay>a.button{margin-top:43%}.product-info{padding:20px}.single-product img{padding:10px 10px 0 10px}.product-info h4{margin:5px 0}.product-rating li{padding:0}.product-rating i{color:#ffc321}.product-info p{margin:0}.shop-btn{margin-top:30px}.shop-btn a i{font-size:14px;margin-right:10px;}.partner-area{background:#f6f6f6}#partner-carousel .item img{display:block;margin:0 auto;width:auto;}.partner-carousel-table{display:table;height:150px;width:100%;}.partner-carousel-tablecell{display:table-cell;vertical-align:middle;}.form-control{background:rgba(0,0,0,0) none repeat scroll 0 0;border:1px solid #999;border-radius:0;box-shadow:none;height:45px;padding:10px;transition:all 0.36s ease 0s;}.form-control::-moz-placeholder{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}.form-control:hover,.form-control:focus{border-color:#333;box-shadow:none;}.success{text-align:center;margin:80px 0;font-size:18px;font-weight:700;}.footer-top-area{background:#f6f6f6 none repeat scroll 0 0}.footer-widget h4{margin-bottom:20px}.single-contact-info{margin-bottom:15px}.single-contact-info i{background:#333;text-align:center;margin-right:10px;line-height:40px;font-size:16px;height:40px;color:#fff;float:left;width:40px;}.single-contact-info p{font-size:12px}.single-latest-post{margin-bottom:10px;overflow:hidden;}.single-latest-post img{background:#f0f0f0 none repeat scroll 0 0;float:left;margin-right:10px;padding:3px;width:30%;}.single-latest-post a h2{font-size:12px;margin:5px 0;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.single-latest-post span{font-size:12px}.single-latest-post span i{margin-right:5px;font-size:14px;color:#333;}.single-latest-post:hover a h2{color:#333}.footer-widget ul li a{color:#666;display:block;margin-bottom:10px;-webkit-transition:all 0.36s ease 0s;transition:all 0.36s ease 0s;}.footer-widget ul li a i{color:#333;margin-right:5px;}.footer-widget ul li a:hover{color:#333}.details-single-project{margin:40px 0 20px}.about-single-project h3,.details-single-project h3{margin-bottom:20px;}.details-single-project li{color:#555;font-size:14px;padding:0 0 10px 0;}.details-single-project li a,.details-single-project li i{margin-right:10px;color:#333;}.related-projects{margin-top:50px;}.related-projects .single-work{margin-bottom:0;}.related-projects h3{margin-bottom:30px;text-align:left;}.text-back-area{width:100%;height:100%;background-image:url("../img/bg/1.jpg");background-size:cover;display:block;padding:20px;color:#fff;}.fff{color:#fff;}.margin-left{margin-left:10px;}#cd-menu-trigger{position:relative;right:0;top:0;height:100%;width:60px;background-color:#aa120d;float:right;-webkit-transform:translateZ(0);-webkit-transition:-webkit-transform .4s 0s,visibility 0s .4s;-moz-transition:-moz-transform .4s 0s,visibility 0s .4s;transition:transform .4s 0s,visibility 0s .4s;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}.my-gallery{}.my-gallery img{width:100%;height:auto;}.my-gallery figure{display:block;float:right;margin:5 5px 5px 5;}.my-gallery figcaption{display:none;}#map{width:100%;position:relative;}.mapPin{position:absolute;cursor:pointer;width:3%;}.rasElbar{top:21%;right:27%;}.balteem{top:10%;right:84%;}.gamasa{top:35%;right:49%;}.rasElbarData{width:50%;position:absolute;padding:1%;background:rgba(0,0,0,0.85);color:#fff;top:22%;right:30%;display:none;}.rasElbarData .dataTitle{color:#de432a;font-size:20px;}.rasElbarData li{list-style:circle!important;}.rasElbarData ul{padding-right:5%}.rasElbar:hover~.rasElbarData{display:block;}.balteemData{width:50%;position:absolute;padding:1%;background:rgba(0,0,0,0.85);color:#fff;top:13%;right:33%;display:none;}.balteemData .dataTitle{color:#de432a;font-size:20px;}.balteemData li{list-style:circle!important;}.balteemData ul{padding-right:5%}.balteem:hover~.balteemData{display:block;}.gamasaData{width:40%;position:absolute;padding:1%;background:rgba(0,0,0,0.85);color:#fff;top:47%;right:33%;display:none;}.gamasaData .dataTitle{color:#de432a;font-size:20px;}.gamasaData li{list-style:circle!important;}.gamasaData ul{padding-right:5%}.gamasa:hover~.gamasaData{display:block;}.fullScreen{position:fixed;bottom:60px;z-index:999;left:60px;border:1px solid #1d1d1d;background:#e63b34;color:#fff;}section{overflow:hidden;}#mapOnMobile{display:none;}.carousel-nav{position:relative;width:65%;margin:auto;}.prevbtn{position:absolute;width:25px!important;left:0;top:-23px;}.nextbtn{position:absolute;width:29px!important;right:0;top:-23px;}.carousel-indicators{position:relative!important;width:60%!important;margin:auto!important;bottom:0!important;left:0;padding:0;margin-top:24px!important;}@media screen and (max-width: 600px) {#mapOnMobile{display:block;}#map{display:none;}}@media screen and (max-width: 400px) {.carousel-indicators{display:none}.carousel-nav{display:none}.item{display:table;}.item .col-md-4{display:table-footer-group;}.item .col-md-8{display:table-header-group;}.item .section-title{margin-top:24px;}#home-carousel .f700{font-size:30px}.articleSocialMediaIcons{display:none}}@media (min-width: 992px) {.teamWidth{width:20%;}}.articleSocialMediaIcons{position:fixed;bottom:auto;z-index:1;background:#f2f2f2;padding:12px 9px;width:50px;transition:all .2s ease-in-out 0s;-webkit-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;z-index:999;top:32%;left:0;}.articleSocialMediaIcons::before{position:absolute;top:0;right:0;visibility:hidden;z-index:10;width:40px;height:100%;background:rgba(0,0,0,.5);content:'';opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:opacity .3s,-webkit-transform 0s .3s;transition:opacity .3s,transform 0s .3s;}.articleSocialMediaIcons .icon-fb{background:#3a5799;}.articleSocialMediaIcons a{display:block;width:32px;height:32px;border-radius:50%;margin-bottom:12px;text-align:center;color:#fff;}.articleSocialMediaIcons .icon-fb:before{content:"u";font-size:20px;line-height:1.7;}.articleSocialMediaIcons .icon-tw{background:#1fa2f0;}.articleSocialMediaIcons .icon-tw:before{content:"v";font-size:20px;line-height:1.7;}.articleSocialMediaIcons .icon-ggl{background:#d55142;}.articleSocialMediaIcons .icon-ggl:before{content:"w";font-size:20px;line-height:1.6;} footer .bottom{ height: 47px !important; } @font-face { font-family: 'droidkufibold'; src:url('../assets/fonts/droidkufi-bold.eot'); src:url('../assets/fonts/droidkufi-bold.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/droidkufi-bold.ttf') format('truetype'), url('../assets/fonts/droidkufi-bold.svg#ecoico') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DroidKufiLight'; src:url('../assets/fonts/droidkufi-regular.eot'); src:url('../assets/fonts/droidkufi-regular.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/droidkufi-regular.ttf') format('truetype'), url('../assets/fonts/droidkufi-regular.svg#ecoico') format('svg'); font-weight: normal; font-style: normal; } /* #background-video { width: 100%; height: 450px; position: relative; border-top:5px solid; border-bottom:5px solid; /*needed for safari*/ /*border-left:0; /*needed for safari*/ /*border-right:0; /*needed for safari*/ /* border-image: linear-gradient(to right, #dcbd2c 0%,#d5b003 100%)1; } #background-video iframe { width: 100%; height: 100%; display: none; } #background-video .play-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; line-height: 0; background: url(images/playbutton.png) center center no-repeat; background-size: 120px auto; } */ * { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper { background-color: #fff; } .dark-style { background-color: #202020; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: block; } h1, h2, h3, h4, h5, h6{ line-height:37px; } .header-container { margin: 0 auto; position: relative; text-align: center; } .ts-chevron { position: absolute; left: 0; top: 0; margin: 7px 5px 7px 10px; } .header-title { color: #d5b003; margin: 0 auto; text-align: center; font-size: 16px; line-height: 44px; font-weight: bold; text-transform: uppercase; display: inline-block; } @media (min-width: 768px) { .header-title { font-size: 20px; } } .header-menu { position: absolute; right: 0; top: 0; margin: 10px 10px 11px 5px; cursor: pointer; color: #666; } @media (min-width: 1025px) { .header-menu { display: none; margin: 14px 10px 11px 5px; } } .header-menu__icon { display: inline; } .header-menu__icon--close { display: none; } .header-dropdown { display: none; width: 100%; padding: 0 15px 5px; } .header-dropdown__part2 { padding-bottom: 10px; } .header-dropdown__part2 a { color: #202020; text-decoration: none; } .header-dropdown__part2 a:hover { color: #d5b003; } @media (min-width: 1025px) { .header-dropdown { display: inline; } .header-dropdown__part2 { display: none; } } .social-links { list-style: outside none none; height: 30px; } @media (min-width: 1025px) { .social-links { margin: 14px 10px 5px 5px; display: block; position: absolute; right: 0; top: 0; } } .social-links__item { display: inline-block; margin: 0 3px; text-align: center; } @media (min-width: 768px) { .social-links__item { margin: 0 5px; } } .social-links__item__icon { color: #666; width: 25px; } .social-links__item--twitter:hover .social-links__item__icon { color: #55acee; } .social-links__item--facebook:hover .social-links__item__icon { color: #3b5998; } .top-branding { width: 100%; padding: 8px 0; } @media (min-width: 768px) { .top-branding { position: absolute; z-index: 100; background-color: transparent; } } @media (min-width: 1025px) { .top-branding { padding: 15px 0; } } .top-branding--dark { background-color: #202020; } @media (min-width: 768px) { .top-branding--dark { z-index: 100; position: static; } } @media (min-width: 1025px) { .top-branding--dark { padding: 0px 0; } } .logo-box { margin: 0 auto; display: block; width: 185px; } @media (min-width: 1025px) { .logo-box { width: 250px; } } .logo-box__ts-logo-sm { display: block; } @media (min-width: 1025px) { .logo-box__ts-logo-sm { display: none; } } .logo-box__ts-logo { display: none; } @media (min-width: 1025px) { .logo-box__ts-logo { display: block; } } .top-social-links { display: block; position: absolute; right: 0; top: 0; list-style: outside none none; height: 30px; margin: 10px 6px 5px 5px; } @media (min-width: 768px) { .top-social-links { margin: 10px 10px 5px 5px; } } @media (min-width: 1025px) { .top-social-links { margin: 15px 15px 5px 5px; } } .top-social-links__item { display: inline-block; margin: 0 5px; text-align: center; } .top-social-links__item__icon { color: #fff; opacity: 0.8; width: 15px; } @media (min-width: 768px) { .top-social-links__item__icon { width: 25px; } } .top-social-links__item:hover .top-social-links__item__icon { color: #e6e6e6; } .top-container { width: 100%; position: relative; } .top-container--dark { margin-bottom: 0; background-color: #202020; } @media (min-width: 768px) { .top-container--dark { margin-bottom: 0; } } @media (min-width: 1025px) { .top-container--dark { margin-bottom: 0; } } .top-container__hero-img { width: 100%; } .top-container__hero-img--mobile { display: block; margin-bottom: 5px; } @media (min-width: 768px) { .top-container__hero-img--mobile { display: none; } } .top-container__hero-img--desktop { display: block; } .main-title-box { position: relative; margin: 15px; } @media (min-width: 1025px) { .main-title-box { margin: 0; position: absolute; bottom: 8%; width: 600px; left: 50%; transform: translate(-50%, 0); background-color: rgba(0, 0, 0, 0.4); } } @media (min-width: 1440px) { .main-title-box { width: 800px; } } @media (min-width: 2000px) { .main-title-box { width: 1100px; } } .main-title-box:before { border-left: 3px solid #eac102; border-top: 3px solid #eac102; content: " "; height: 30px; width: 30px; position: absolute; left: 0; top: 0; } @media (min-width: 768px) { .main-title-box:before { border-left: 5px solid #eac102; border-top: 5px solid #eac102; height: 40px; width: 40px; } } @media (min-width: 1025px) { .main-title-box:before { border-left: 10px solid #eac102; border-top: 10px solid #eac102; height: 50px; width: 50px; } } .main-title-box:after { border-right: 3px solid #eac102; border-top: 3px solid #eac102; content: " "; height: 30px; width: 30px; position: absolute; right: 0; top: 0; } @media (min-width: 768px) { .main-title-box:after { border-right: 5px solid #eac102; border-top: 5px solid #eac102; height: 40px; width: 40px; } } @media (min-width: 1025px) { .main-title-box:after { border-right: 10px solid #eac102; border-top: 10px solid #eac102; height: 50px; width: 50px; } } .main-title-box2 { position: relative; width: 100%; height: 100%; } .main-title-box2:before { border-left: 3px solid #eac102; border-bottom: 3px solid #eac102; content: " "; height: 30px; width: 30px; position: absolute; left: 0; bottom: 0; } @media (min-width: 768px) { .main-title-box2:before { border-left: 5px solid #eac102; border-bottom: 5px solid #eac102; height: 40px; width: 40px; } } @media (min-width: 1025px) { .main-title-box2:before { border-left: 10px solid #eac102; border-bottom: 10px solid #eac102; height: 50px; width: 50px; } } .main-title-box2:after { border-right: 3px solid #eac102; border-bottom: 3px solid #eac102; content: " "; height: 30px; width: 30px; position: absolute; right: 0; bottom: 0; } @media (min-width: 768px) { .main-title-box2:after { border-right: 5px solid #eac102; border-bottom: 5px solid #eac102; height: 40px; width: 40px; } } @media (min-width: 1025px) { .main-title-box2:after { border-right: 10px solid #eac102; border-bottom: 10px solid #eac102; height: 50px; width: 50px; } } .title-container { font-family: "Roboto", Helvetica, Arial, sans-serif; padding: 10px 15px; width: 100%; min-width: 300px; margin: 0 auto; color: #000; text-align: center; } @media (min-width: 768px) { .title-container { padding: 20px 15px; } } @media (min-width: 1025px) { .title-container { padding: 40px 15px 60px; text-align: center; } } @media (min-width: 1025px) { .title-container--main { padding: 25px; color: #f1f1f1; text-align: center; margin: 0 auto; } } .title-container--dark { background-color: #202020; color: #ffffff; padding-bottom: 25px; } @media (min-width: 768px) { .title-container--dark { padding-bottom: 30px; } } @media (min-width: 1025px) { .title-container--dark { padding-bottom: 60px; width:80%; } } .title-container__hed { font-weight: 400; font-size: 50px; line-height: 0.95em; text-transform: uppercase; color: #eac102; } .title-container__hed span.lrg { font-weight: 900; display: block; font-size: 1.65em; line-height: 0.9em; } .title-container__hed span.med { font-weight: 900; display: block; font-size: 1.4em; line-height: 0.95em; } @media (min-width: 768px) { .title-container__hed { font-size: 80px; } } @media (min-width: 1025px) { .title-container__hed { font-size: 100px; } } @media (min-width: 1440px) { .title-container__hed { font-size: 150px; } } @media (min-width: 2000px) { .title-container__hed { font-size: 200px; } } .title-container__hed--dark { padding-bottom: 0.5em; font-size: 36px; color: inherit; font-weight: 300; } .title-container__hed--dark span.highlight { font-size: 0.6em; line-height: 0.95em; color: #d5b003; font-weight: 900; display: inline; font-family:droidkufibold; } .title-container__hed--dark span.homelessness { font-size: 1em; line-height: 0.95em; font-weight: 300; display: inline; } @media (min-width: 768px) { .title-container__hed--dark { font-size: 80px; } .title-container__hed--dark span.highlight { display: block; } } @media (min-width: 1025px) { .title-container__hed--dark { font-size: 100px; } } .title-container__dek { font-weight: 400; font-size: 20px; padding-bottom: 1em; line-height: 1.2em; } @media (min-width: 768px) { .title-container__dek { font-size: 26px; } } @media (min-width: 1025px) { .title-container__dek { font-size: 28px; } } @media (min-width: 2000px) { .title-container__dek { font-size: 34px; } } .title-container__byline { font-size: 14px; color: #333; line-height: 30px; padding-bottom: 2.2em; font-weight: 300; text-align:right; } .title-container__byline--dark { color: #f1f1f1; } @media (min-width: 768px) { .title-container__byline { font-size: 15px; display: inline-block; padding-right: 20px; } } @media (min-width: 1025px) { .title-container__byline { font-size: 16px; text-align:justify; } } @media (min-width: 1440px) { .title-container__byline { font-size: 17px; } } .title-container__byline a { text-decoration: none; } .title-container__byline__author { color: #333; font-size: 16px; padding: 0 2px 0; white-space: nowrap; font-weight: 400; } .title-container__byline__author--dark { color: #f1f1f1; } @media (min-width: 768px) { .title-container__byline__author { font-size: 17px; } } @media (min-width: 1025px) { .title-container__byline__author { font-size: 18px; } } @media (min-width: 1440px) { .title-container__byline__author { font-size: 19px; } } .title-container__date { padding-top: 0.5em; color: #757575; line-height: 1em; font-size: 13px; font-weight: 300; } .title-container__date--dark { color: #e3e3e3; } @media (min-width: 768px) { .title-container__date { font-size: 14px; display: inline-block; } } @media (min-width: 1025px) { .title-container__date { font-size: 15px; } } @media (min-width: 1440px) { .title-container__date { font-size: 16px; } } .title-container-below { max-width: 700px; padding-top: 3px; padding-bottom: 30px; } @media (min-width: 768px) { .title-container-below { padding-bottom: 50px; } } @media (min-width: 1025px) { .title-container-below { padding-top: 30px; } } .text-container { max-width: 700px; margin: 0 auto; padding: 0 15px; font-size: 17px; line-height: 1.4em; font-family: "Playfair Display", Georgia, Times, serif; color: #404040; } .text-container p { padding-bottom: 1.4em; } .text-container a { color: #0065a4; text-decoration: none; cursor: pointer; } .text-container a:hover { text-decoration: none; } @media (min-width: 768px) { .text-container { font-size: 19px; } } @media (min-width: 1025px) { .text-container { font-size: 21px; } } .text-container--dark { font-size: 19px; } @media (min-width: 768px) { .text-container--dark { font-size: 21px; } } @media (min-width: 1025px) { .text-container--dark { font-size: 23px; } } .text-container__first-letter { float: left; font-family: "Roboto", Helvetica, Arial, sans-serif; color: #fff; font-size: 45px; line-height: 30px; padding: 8px 8px 10px; margin-top: 2px; margin-right: 8px; font-weight: bold; position: relative; background-color: #202020; } @media (min-width: 768px) { .text-container__first-letter { font-size: 70px; line-height: 55px; padding: 9px 9px 11px; margin-top: 3px; margin-right: 11px; } } @media (min-width: 1025px) { .text-container__first-letter { font-size: 75px; line-height: 60px; padding: 10px 10px 12px; margin-top: 5px; margin-right: 13px; } } .text-container__pullquote { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #d5b003; margin: 0.7em 0 1.2em; font-weight: 700; font-size: 26px; line-height: 1.2em; text-align: center; position: relative; padding: 15px 10px !important; } @media (min-width: 768px) { .text-container__pullquote { font-size: 30px; padding: 25px 15px !important; } } @media (min-width: 1025px) { .text-container__pullquote { font-size: 38px; padding: 35px 20px !important; } } .text-container__pullquote:before { border-left: 2px solid #d5b003; border-top: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; left: 0; top: 0; } @media (min-width: 768px) { .text-container__pullquote:before { border-left: 3px solid #d5b003; border-top: 3px solid #d5b003; height: 40px; width: 40px; } } @media (min-width: 1025px) { .text-container__pullquote:before { border-left: 4px solid #d5b003; border-top: 4px solid #d5b003; height: 50px; width: 50px; } } .text-container__pullquote:after { border-right: 2px solid #d5b003; border-top: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; right: 0; top: 0; } @media (min-width: 768px) { .text-container__pullquote:after { border-right: 3px solid #d5b003; border-top: 3px solid #d5b003; height: 40px; width: 40px; } } @media (min-width: 1025px) { .text-container__pullquote:after { border-right: 4px solid #d5b003; border-top: 4px solid #d5b003; height: 50px; width: 50px; } } .text-container__endnote { font-size: 0.8em; font-family: "Roboto", Helvetica, Arial, sans-serif; color: #666666; line-height: 1.2em; } .text-container__chapter-heading { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #d5b003; font-size: 20px; line-height: 1.4em; padding: 1em 0; } @media (min-width: 768px) { .text-container__chapter-heading { font-size: 24px; } } @media (min-width: 1025px) { .text-container__chapter-heading { font-size: 28px; } } .sectionbreak { margin: 0 auto 20px; width: 20px; height: 20px; border: 2px solid #d5b003; border-radius: 100%; position: relative; } .sectionbreak:after { content: " "; height: 30px; width: 4px; position: absolute; left: 6px; top: -5px; background-color: #fff; } @media (min-width: 768px) { .sectionbreak { margin: 10px auto 20px; width: 30px; height: 30px; border: 3px solid #d5b003; } .sectionbreak:after { content: " "; height: 40px; width: 6px; position: absolute; left: 9px; top: -5px; background-color: #fff; } } @media (min-width: 1025px) { .sectionbreak { margin: 15px auto 20px; width: 40px; height: 40px; border: 4px solid #d5b003; } .sectionbreak:after { content: " "; height: 50px; width: 8px; position: absolute; left: 12px; top: -5px; background-color: #fff; } } .pullquotecontainer { position: relative; } .pullquotecontainer:before { border-left: 2px solid #d5b003; border-bottom: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; left: 0; bottom: 0; } @media (min-width: 768px) { .pullquotecontainer:before { border-left: 3px solid #d5b003; border-bottom: 3px solid #d5b003; height: 40px; width: 40px; } } @media (min-width: 1025px) { .pullquotecontainer:before { border-left: 4px solid #d5b003; border-bottom: 4px solid #d5b003; height: 50px; width: 50px; } } .pullquotecontainer:after { border-right: 2px solid #d5b003; border-bottom: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; right: 0; bottom: 0; } @media (min-width: 768px) { .pullquotecontainer:after { border-right: 3px solid #d5b003; border-bottom: 3px solid #d5b003; height: 40px; width: 40px; } } @media (min-width: 1025px) { .pullquotecontainer:after { border-right: 4px solid #d5b003; border-bottom: 4px solid #d5b003; height: 50px; width: 50px; } } .body-container--intro { padding: 15px 0 10px; font-weight: bold; } @media (min-width: 768px) { .body-container--intro { padding: 20px 0 30px; } } @media (min-width: 1025px) { .body-container--intro { padding: 40px 0 50px; } } .contestant-outer-container { margin-bottom: 40px; } @media (min-width: 768px) { .contestant-outer-container { margin-bottom: 65px; } } @media (min-width: 1025px) { .contestant-outer-container { margin-bottom: 90px; } } .contestant-container { max-width: 70%; margin: 0 auto; padding: 0 20px 0; font-size: 17px; line-height: 1.4em; font-family: "Playfair Display", Georgia, Times, serif; color: #404040; position: relative; } .contestant-container p { margin: 0; } @media (min-width: 768px) { .contestant-container { font-size: 19px; } } @media (min-width: 1025px) { .contestant-container { font-size: 20px; } } .contestant-container--first { position: relative; margin-bottom: 10px; padding-top: 15px; } @media (min-width: 768px) { .contestant-container--first { margin-bottom: 5px; padding-top: 30px; } } @media (min-width: 1025px) { .contestant-container--first { margin-bottom: 3px; padding-top: 40px; } } .contestant-container--first:before { border-left: 2px solid #d5b003; border-top: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; left: 9px; top: 0; } @media (min-width: 768px) { .contestant-container--first:before { border-left: 3px solid #d5b003; border-top: 3px solid #d5b003; left: -5px; height: 40px; width: 40px; } } @media (min-width: 1025px) { .contestant-container--first:before { border-left: 4px solid #d5b003; border-top: 4px solid #d5b003; left: -15px; height: 50px; width: 50px; } } .contestant-container--first:after { border-right: 2px solid #d5b003; border-top: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; right: 9px; top: 0; } @media (min-width: 768px) { .contestant-container--first:after { border-right: 3px solid #d5b003; border-top: 3px solid #d5b003; right: -5px; height: 40px; width: 40px; } } @media (min-width: 1025px) { .contestant-container--first:after { border-right: 4px solid #d5b003; border-top: 4px solid #d5b003; right: -15px; height: 50px; width: 50px; } } .contestant-container--second { padding-bottom: 15px; } @media (min-width: 768px) { .contestant-container--second { padding-bottom: 30px; } } @media (min-width: 1025px) { .contestant-container--second { padding-bottom: 40px; } } .contestant-container--second:before { border-left: 2px solid #d5b003; border-bottom: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; left: 9px; bottom: 0; } @media (min-width: 768px) { .contestant-container--second:before { border-left: 3px solid #d5b003; border-bottom: 3px solid #d5b003; left: -5px; height: 40px; width: 40px; } } @media (min-width: 1025px) { .contestant-container--second:before { border-left: 4px solid #d5b003; border-bottom: 4px solid #d5b003; left: -15px; height: 50px; width: 50px; } } .contestant-container--second:after { border-right: 2px solid #d5b003; border-bottom: 2px solid #d5b003; content: " "; height: 30px; width: 30px; position: absolute; right: 9px; bottom: 0; } @media (min-width: 768px) { .contestant-container--second:after { border-right: 3px solid #d5b003; border-bottom: 3px solid #d5b003; right: -5px; height: 40px; width: 40px; } } @media (min-width: 1025px) { .contestant-container--second:after { border-right: 4px solid #d5b003; border-bottom: 4px solid #d5b003; right: -15px; height: 50px; width: 50px; } } .contestant-container__image { display: block; float: left; width: 115px; margin: 0 25px 10px 0; } @media (min-width: 768px) { .contestant-container__image { width: 200px; margin: 0 30px 25px 0; } } @media (min-width: 1025px) { .contestant-container__image { width: 250px; } } .contestant-container__inner-container__month { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #666666; font-size: 14px; line-height: 1em; padding: 0 0 0.6em; text-transform: uppercase; } @media (min-width: 768px) { .contestant-container__inner-container__month { font-size: 15px; } } @media (min-width: 1025px) { .contestant-container__inner-container__month { font-size: 16px; } } .contestant-container__inner-container__month__icon { padding-right: 3px; margin-bottom: -4px; } .contestant-container__inner-container__name { font-family: DroidKufiLight; text-align:center; color: #d5b003; font-size: 26px; line-height: 1.2em; padding: 0 0 0.2em; font-weight: bold; position: relative; z-index: 1; } @media (min-width: 768px) { .contestant-container__inner-container__name { font-size: 34px; line-height: 1em; padding: 0 0 0.3em; } } @media (min-width: 1025px) { .contestant-container__inner-container__name { font-size: 35px; line-height: 1em; text-align:center; } } .contestant-container__inner-container__intro { padding-bottom: 0.9em; font-family:DroidKufiLight; font-size:18px; } .contestant-container__quoteheading { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #d5b003; font-size: 16px; line-height: 1.2em; padding: 1.21em 0 0.5em; font-weight: bold; } @media (min-width: 768px) { .contestant-container__quoteheading { font-size: 18px; } } @media (min-width: 1025px) { .contestant-container__quoteheading { font-size: 20px; } } .contestant-container__quote { font-size: 15px; line-height: 1.3em; font-family: "Roboto", Helvetica, Arial, sans-serif; color: #404040; padding-bottom: 9px; } @media (min-width: 768px) { .contestant-container__quote { font-size: 17px; padding-bottom: 11px; } } @media (min-width: 1025px) { .contestant-container__quote { font-size: 19px; padding-bottom: 13px; } } .contestant-container__quote--final { padding-bottom: 0; } .contestant-photo-container { max-width: 1200px; margin: 0 0 10px; } @media (min-width: 768px) { .contestant-photo-container { margin: 0 auto 25px; } } @media (min-width: 1025px) { .contestant-photo-container { margin: 0 auto 30px; } } @media (min-width: 768px) { .contestant-photo-container--vertical { max-width: 650px; } } @media (min-width: 1025px) { .contestant-photo-container--vertical { max-width: 750px; } } .contestant-photo-container__photo { width: 70%; display: block; margin:auto; -webkit-filter: drop-shadow(5px 5px 5px #222 ); filter: drop-shadow(5px 5px 5px #222); } .contestant-photo-container__photo-title { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #333; font-size: 16px; line-height: 1.2em; padding-right: 5px; text-align: center; margin-top: -6px; font-weight: bold; } .contestant-photo-container__photo-title span { font-weight: 400; font-style: italic; font-size: 0.9em; padding-right: 2px; } @media (min-width: 768px) { .contestant-photo-container__photo-title { font-size: 17px; margin-top: -18px; } } @media (min-width: 1025px) { .contestant-photo-container__photo-title { font-size: 18px; margin-top: -28px; } } .image-container p { padding-bottom: 0; } .image-container__image { margin-bottom: 7px; display: block; width: 100%; } .image-container__caption { font-size: 15px; line-height: 1.3em; color: #666666; font-family: "Roboto", Helvetica, Arial, sans-serif; } .image-container__caption__credit { font-size: 0.8em; color: #939393; white-space: nowrap; } .image-container--body { max-width: 1024px; margin: 5px 0 30px; } .image-container--body__caption { padding: 0 15px; } @media (min-width: 1025px) { .image-container--body__caption { padding: 0; } } @media (min-width: 768px) { .image-container--body { margin: 15px auto 50px; } } .image-container--column { max-width: 670px; margin: 5px 0 30px; } @media (min-width: 768px) { .image-container--column { margin: 10px 0 40px; } } .image-container--inline { max-width: 150px; margin: 5px 0 20px 30px; float: right; } .image-container--inline__image { margin-bottom: 8px; } .image-container--inline__caption { font-size: 14px; } @media (min-width: 768px) { .image-container--inline { max-width: 220px; margin: 5px 0 20px 50px; } } .image-container--double { max-width: 670px; margin: 5px 0 30px; } .image-container--double__image { float: left; width: 50%; } .image-container--double__image--first { padding-right: 2px; } @media (min-width: 768px) { .image-container--double__image--first { padding-right: 4px; } } .image-container--double__image--second { padding-left: 2px; } @media (min-width: 768px) { .image-container--double__image--second { padding-left: 4px; } } @media (min-width: 768px) { .image-container--double { margin: 10px 0 40px; } } .video-container { margin: 5px 0 30px; max-width: 1015px; display: block; } @media (min-width: 768px) { .video-container { margin: 15px auto 50px; } } .video-container p { padding-bottom: 0; } .video-container__inner-video { padding-top: 56.25%; position: relative; margin-bottom: 7px; z-index: 1; } .video-container__inner-video__video { width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; } .video-container__caption { font-size: 15px; line-height: 1.3em; color: #666666; font-family: "Roboto", Helvetica, Arial, sans-serif; padding: 0 15px; } @media (min-width: 1025px) { .video-container__caption { padding: 0; } } .video-container__caption__credit { font-size: 0.8em; color: #939393; white-space: nowrap; } .advertisement { padding: 10px 0 12px; margin-bottom: 25px; } .advertisement__title { font-family: "Roboto", Helvetica, Arial, sans-serif; color: #666666; font-size: 12px; line-height: 1.1em; text-align: center; padding-bottom: 6px; } @media (min-width: 730px) { .advertisement { padding: 15px 0 18px; margin: 20px 0 40px; } } .advertisement__ad-container { max-width: 320px; margin: 0 auto; } @media (min-width: 730px) { .advertisement__ad-container { max-width: 730px; } } .advertisement__ad-container--mobile { display: block; } @media (min-width: 730px) { .advertisement__ad-container--mobile { display: none; } } .advertisement__ad-container--desktop { display: none; } @media (min-width: 730px) { .advertisement__ad-container--desktop { display: block; } } .credit-container { padding: 30px 10px; background-color: #333; } .credit-container__title { font-size: 11px; padding-bottom: 1px; color: #c6c6c6; line-height: 1.2em; } @media (min-width: 768px) { .credit-container__title { font-size: 13px; } } .credit-container__name { font-size: 14px; padding-bottom: 15px; line-height: 1.2em; } .credit-container__name--last { padding-bottom: 3px; font-size: 14px; line-height: 1.2em; } @media (min-width: 768px) { .credit-container__name--last { font-size: 16px; } } @media (min-width: 768px) { .credit-container__name { font-size: 16px; } } .parts-container { padding: 20px 0; background-color: #202020; color: #e3e3e3; font-family: "Roboto", Helvetica, Arial, sans-serif; } .parts-container a { color: #e3e3e3; } .parts-container__readnext { font-size: 18px; line-height: 1.3em; margin: 0 10px 20px; font-weight: 400; text-transform: uppercase; } .parts-container__part { padding: 0 15px 20px; vertical-align: top; } .parts-container__part:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media (min-width: 768px) { .parts-container__part { padding: 0 10px; display: inline-block; width: 32%; max-width: 300px; } } .parts-container__part:hover { color: #fff; } .parts-container__part:hover img { filter: brightness(105%); } .parts-container__part__image { width: 40%; float: left; } @media (min-width: 768px) { .parts-container__part__image { width: 100%; margin: 0; display: block; padding-bottom: 8px; } } .parts-container__part__label { margin: 0; font-size: 16px; padding-bottom: 0px; font-weight: bold; color: #be2a18; margin-bottom: 1em; display: none; } .parts-container__part__mobile-label { margin: 0; font-size: 16px; padding-bottom: 0px; font-weight: bold; color: #be2a18; margin-bottom: 1em; } .parts-container__part__title { font-size: 18px; font-weight: 700; padding-bottom: 5px; text-align: left; margin-left: 45%; } @media (min-width: 768px) { .parts-container__part__title { font-size: 19px; text-align: center; margin-left: 0; } } @media (min-width: 1025px) { .parts-container__part__title { font-size: 20px; } } .parts-container__part__description { margin: 0; font-size: 14px; padding-bottom: 10px; } @media (min-width: 768px) { .parts-container__part__description { font-size: 15px; } } @media (min-width: 1025px) { .parts-container__part__description { font-size: 16px; } } .menu-outercontainer { width: 100%; background-color: #202020; } @media (min-width: 768px) { .menu-outercontainer { margin: 0 auto; } } @media (min-width: 1025px) { .menu-outercontainer { margin: 0 auto; } } .menu-spaceholder { width: 100%; height: 90px; display: none; } .menu-spaceholder__placeholder { width: 100%; display: block; height: auto; border-bottom: 5px solid #fff; } @media (min-width: 768px) { .menu-spaceholder { height: 105px; border-bottom: 10px solid #fff; } } @media (min-width: 1025px) { .menu-spaceholder { width: 100%; height: auto; border-bottom: 20px solid #fff; } } .menu-container { width: 100%; max-width: 100%; right: 0; left: 0; margin: 0 auto; position: relative; z-index: 2; border-bottom: 5px solid #fff; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transition: max-width 0.5s; /* For Safari 3.1 to 6.0 */ transition: max-width 0.5s; } @media (min-width: 768px) { .menu-container { border-bottom: 0px solid #fff; } } @media (min-width: 1025px) { .menu-container { border-bottom: 0px solid #fff; } } .menu-container__slider-container { overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%; position: relative; background-color: #202020; } @media (min-width: 1025px) { .menu-container__slider-container { overflow-x: hidden; } } .menu-container__slider-container__slider { width: 767px; } @media (min-width: 768px) { .menu-container__slider-container__slider { width: 1024px; } } @media (min-width: 1025px) { .menu-container__slider-container__slider { width: 100%; margin: 0 17%; } } .menu-container__slider-container__slider__image { float: left; width: 9%; cursor: pointer; filter: grayscale(100%); transition: 0.4s; padding:5px; } .menu-container__slider-container__slider__image:hover { filter: grayscale(10%); } .special-container { background-color: #202020; padding: 30px 0; } @media (min-width: 768px) { .special-container { padding: 40px 0; } } @media (min-width: 1025px) { .special-container { padding: 50px 0; } } .side-cta { position: relative; width: 100%; height: 0px; display: none; } @media (min-width: 1025px) { .side-cta { display: block; } } @media (min-width: 1025px) { .side-cta__widget { padding: 10px; background-color: #202020; color: #fafafa; height: auto; width: 130px; position: absolute; right: 0; top: 0; margin-top: 150px; z-index: 100; } .side-cta__widget__image { display: block; width: 100%; margin-bottom: 8px; } .side-cta__widget__caption { font-size: 15px; line-height: 1.3em; font-family: "Roboto", Helvetica, Arial, sans-serif; text-align: center; } .side-cta__widget span { font-size: 0.8em; text-transform: uppercase; padding-right: 2px; font-weight: bold; } .side-cta__widget:hover { background-color: #d5b003; color: #202020; } } .related-widget-container { margin: 5px 0 30px; border-top: 2px solid #d5b003; border-bottom: 2px solid #d5b003; padding: 20px 0; } @media (min-width: 768px) { .related-widget-container { margin: 10px 0 40px; padding: 30px 0; border-top: 3px solid #d5b003; border-bottom: 3px solid #d5b003; } } @media (min-width: 1025px) { .related-widget-container { display: none; } } .related-widget-container__inner-container { max-width: 670px; padding: 10px; background-color: #202020; color: #fafafa; } @media (min-width: 768px) { .related-widget-container__inner-container { padding: 20px; } } .related-widget-container__inner-container p { padding-bottom: 0; } .related-widget-container__inner-container__image { display: block; width: 100%; margin-top: 12px; } .related-widget-container__inner-container__caption { font-size: 18px; line-height: 1.2em; text-decoration: none; font-family: "Roboto", Helvetica, Arial, sans-serif; text-align: center; } .related-widget-container__inner-container__caption span { font-size: 0.8em; text-transform: uppercase; padding-right: 3px; font-weight: bold; } @media (min-width: 768px) { .related-widget-container__inner-container__caption { font-size: 23px; } } .related-widget-container__inner-container:hover { background-color: #d5b003; color: #202020; } .related-widget-container__inner-container:hover a { text-decoration: none; } /*# sourceMappingURL=style.css.map */ @media (max-width: 991px){ .bgimg{ background-size: contain !important; height:300px !important; } .menu-container__slider-container__slider{ width:600px !important; margin-top:6%; } .testim{ margin-top:370% !important; } } /*ezz*/ .bgimg{ background-image: url(image/cover.jpg); background-position: top; background-size: cover; height: 900px; background-repeat: no-repeat; } p{ direction:rtl; font-family:DroidKufiLight; text-align:justify; } /*** Table Styles **/ .testim{ margin-top:40%; margin-bottom: -38%; } .table-fill { background: white; border-radius:3px; border-collapse: collapse; height: 320px; margin: auto; max-width: 500px; padding:5px; width: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); animation: float 5s infinite; font-family:DroidKufiLight; } th { color:#D5DDE5;; background:#1b1e24; border-bottom:4px solid #9ea7af; border-right: 1px solid #343a45; font-size:23px; font-weight: 100; padding:24px; text-align:left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align:middle; } th:first-child { border-top-left-radius:3px; } th:last-child { border-top-right-radius:3px; border-right:none; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color:#666B85; font-size:16px; font-weight:normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); } tr:hover td { background:#4E5066; color:#FFFFFF; border-top: 1px solid #22262e; } tr:first-child { border-top:none; } tr:last-child { border-bottom:none; } tr:nth-child(odd) td { background:#EBEBEB; } tr:nth-child(odd):hover td { background:#4E5066; } tr:last-child td:first-child { border-bottom-left-radius:3px; } tr:last-child td:last-child { border-bottom-right-radius:3px; } td { background:#FFFFFF; padding:20px; text-align:left; vertical-align:middle; font-weight:300; font-size:18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } td:last-child { border-right: 0px; } th.text-left { text-align: left; } th.text-center { text-align: center; } th.text-right { text-align: right; } td.text-left { text-align: left; } td.text-center { text-align: center; } td.text-right { text-align: right; } .h4, .h5, .h6, h4, h5, h6{ font-weight:bold !important; } /*testmonial*/ .testimonials { padding: 100px 0; } .testimonials h3 { margin-bottom: 20px; } .testimonials .card { border-bottom: 3px #d5b003 solid !important; transition: 0.5s; margin-top: 0px; background:#eaeaea; border-radius:10px; height:250px; } .testimonials .card i { background-color: #d5b003; color: #ffffff; width: 75px; height: 75px; line-height: 75px; margin: -40px auto 0 auto; border-radius:50%; } .card-text{ padding:25px; color:#202020; text-align:center; font-size:17px; } /*end testmonial*/ /*second test*/ .testim { width: 100%; /*position: absolute;*/ top: 50%; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); background: #202020; margin-top: 15%; } .testim .wrap { position: relative; width: 100%; max-width: 1020px; padding: 40px 20px; margin: auto; } .testim .arrow { display: block; position: absolute; color: #eee; cursor: pointer; font-size: 2em; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding: 5px; z-index: 22222222; } .testim .arrow:before { cursor: pointer; } .testim .arrow:hover { color: #d5b003; } .testim .arrow.left { left: 10px; } .testim .arrow.right { right: 10px; } .testim .dots { text-align: center; position: absolute; width: 100%; bottom: 60px; left: 0; display: block; z-index: 1; height: 12px; } .testim .dots .dot { list-style-type: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #eee; margin: 0 10px; cursor: pointer; -webkit-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; position: relative; } .testim .dots .dot.active, .testim .dots .dot:hover { background: #d5b003; border-color: #d5b003; } .testim .dots .dot.active { -webkit-animation: testim-scale .5s ease-in-out forwards; -moz-animation: testim-scale .5s ease-in-out forwards; -ms-animation: testim-scale .5s ease-in-out forwards; -o-animation: testim-scale .5s ease-in-out forwards; animation: testim-scale .5s ease-in-out forwards; } .testim .cont { position: relative; overflow: hidden; } .testim .cont > div { text-align: center; position: absolute; top: 0; left: 0; padding: 0 0 70px 0; opacity: 0; } .testim .cont > div.inactive { opacity: 1; } .testim .cont > div.active { position: relative; opacity: 1; } .testim .cont div .img img { display: block; width: 100px; height: 100px; margin: auto; border-radius: 50%; } .testim .cont div h2 { color: #d5b003; font-size: 2em; margin: 15px 0; font-family:droidkufibold; } .testim .cont div p { font-size: 1.40em; color: #eee; width: 80%; margin: auto; line-height:42px; text-align:center; } .testim .cont div.active .img img { -webkit-animation: testim-show .5s ease-in-out forwards; -moz-animation: testim-show .5s ease-in-out forwards; -ms-animation: testim-show .5s ease-in-out forwards; -o-animation: testim-show .5s ease-in-out forwards; animation: testim-show .5s ease-in-out forwards; } .testim .cont div.active h2 { -webkit-animation: testim-content-in .4s ease-in-out forwards; -moz-animation: testim-content-in .4s ease-in-out forwards; -ms-animation: testim-content-in .4s ease-in-out forwards; -o-animation: testim-content-in .4s ease-in-out forwards; animation: testim-content-in .4s ease-in-out forwards; } .testim .cont div.active p { -webkit-animation: testim-content-in .5s ease-in-out forwards; -moz-animation: testim-content-in .5s ease-in-out forwards; -ms-animation: testim-content-in .5s ease-in-out forwards; -o-animation: testim-content-in .5s ease-in-out forwards; animation: testim-content-in .5s ease-in-out forwards; } .testim .cont div.inactive .img img { -webkit-animation: testim-hide .5s ease-in-out forwards; -moz-animation: testim-hide .5s ease-in-out forwards; -ms-animation: testim-hide .5s ease-in-out forwards; -o-animation: testim-hide .5s ease-in-out forwards; animation: testim-hide .5s ease-in-out forwards; } .testim .cont div.inactive h2 { -webkit-animation: testim-content-out .4s ease-in-out forwards; -moz-animation: testim-content-out .4s ease-in-out forwards; -ms-animation: testim-content-out .4s ease-in-out forwards; -o-animation: testim-content-out .4s ease-in-out forwards; animation: testim-content-out .4s ease-in-out forwards; } .testim .cont div.inactive p { -webkit-animation: testim-content-out .5s ease-in-out forwards; -moz-animation: testim-content-out .5s ease-in-out forwards; -ms-animation: testim-content-out .5s ease-in-out forwards; -o-animation: testim-content-out .5s ease-in-out forwards; animation: testim-content-out .5s ease-in-out forwards; } @-webkit-keyframes testim-scale { 0% { -webkit-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -webkit-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -webkit-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -webkit-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-moz-keyframes testim-scale { 0% { -moz-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -moz-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -moz-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -moz-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-ms-keyframes testim-scale { 0% { -ms-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -ms-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -ms-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -ms-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @-o-keyframes testim-scale { 0% { -o-box-shadow: 0px 0px 0px 0px #eee; box-shadow: 0px 0px 0px 0px #eee; } 35% { -o-box-shadow: 0px 0px 10px 5px #eee; box-shadow: 0px 0px 10px 5px #eee; } 70% { -o-box-shadow: 0px 0px 10px 5px #ea830e; box-shadow: 0px 0px 10px 5px #ea830e; } 100% { -o-box-shadow: 0px 0px 0px 0px #ea830e; box-shadow: 0px 0px 0px 0px #ea830e; } } @keyframes testim-scale { 0% { box-shadow: 0px 0px 0px 0px #eee; } 35% { box-shadow: 0px 0px 10px 5px #eee; } 70% { box-shadow: 0px 0px 10px 5px #ea830e; } 100% { box-shadow: 0px 0px 0px 0px #ea830e; } } @-webkit-keyframes testim-content-in { from { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes testim-content-in { from { opacity: 0; -moz-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes testim-content-in { from { opacity: 0; -ms-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes testim-content-in { from { opacity: 0; -o-transform: translateY(100%); transform: translateY(100%); } to { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } } @keyframes testim-content-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes testim-content-out { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes testim-content-out { from { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -moz-transform: translateY(-100%); transform: translateY(-100%); } } @-ms-keyframes testim-content-out { from { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -ms-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes testim-content-out { from { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); transform: translateY(-100%); } } @keyframes testim-content-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } } @-webkit-keyframes testim-show { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes testim-show { from { opacity: 0; -moz-transform: scale(0); transform: scale(0); } to { opacity: 1; -moz-transform: scale(1); transform: scale(1); } } @-ms-keyframes testim-show { from { opacity: 0; -ms-transform: scale(0); transform: scale(0); } to { opacity: 1; -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes testim-show { from { opacity: 0; -o-transform: scale(0); transform: scale(0); } to { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes testim-show { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @-webkit-keyframes testim-hide { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-moz-keyframes testim-hide { from { opacity: 1; -moz-transform: scale(1); transform: scale(1); } to { opacity: 0; -moz-transform: scale(0); transform: scale(0); } } @-ms-keyframes testim-hide { from { opacity: 1; -ms-transform: scale(1); transform: scale(1); } to { opacity: 0; -ms-transform: scale(0); transform: scale(0); } } @-o-keyframes testim-hide { from { opacity: 1; -o-transform: scale(1); transform: scale(1); } to { opacity: 0; -o-transform: scale(0); transform: scale(0); } } @keyframes testim-hide { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } } /*end second test*/ #gallery { padding-top: 40px; } @media screen and (max-width: 991px){ #gallery{ padding: 60px 30px 0 30px; } #ezz{ margin-top:-85em !important; } } .youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { /*height: 72px; width: 72px;*/ left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("images/c-video.jpg") no-repeat; cursor: pointer; } .img-wrapper { position: relative; margin-top: 15px; img { width: 100%; } } .img-overlay { background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; i { color: #fff; font-size: 3em; } } #overlay { background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 999; // Removes blue highlight -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; img { margin: 0; width: 80%; height: auto; object-fit: contain; padding: 5%; @media screen and (min-width:768px) { width: 60%; } @media screen and (min-width:1200px) { width: 50%; } } } #nextButton { color: #fff; font-size: 2em; transition: opacity 0.8s; &:hover { opacity: 0.7; } @media screen and (min-width:768px) { font-size: 3em; } } #prevButton { color: #fff; font-size: 2em; transition: opacity 0.8s; &:hover { opacity: 0.7; } @media screen and (min-width:768px) { font-size: 3em; } } #exitButton { color: #fff; font-size: 2em; transition: opacity 0.8s; position: absolute; top: 15px; right: 15px; &:hover { opacity: 0.7; } @media screen and (min-width:768px) { font-size: 3em; } }