@charset "utf-8";
/* CSS Document */

#cssmenu ul ul,#cssmenu ul ul ul{position:absolute;left:-9999px;z-index:1000}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0 0 -2px;padding:0;border:0;list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:150}#cssmenu:after,#cssmenu>ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}#cssmenu #menu-button,#cssmenu ul ul li.has-sub>a:before{display:none}#cssmenu>ul>li{float:left}#cssmenu.align-center>ul{font-size:0;text-align:center}#cssmenu.align-center>ul>li{display:inline-block;float:none}#cssmenu ul ul li.has-sub>a:after,#cssmenu ul ul li.has-sub>a:before{position:absolute;display:block;content:'\f105';font-family:FontAwesome}#cssmenu.align-center ul ul{text-align:left}#cssmenu.align-right>ul>li{float:right}#cssmenu>ul>li>a{text-decoration:none;transition:.5s}#cssmenu>ul>li:hover>a{transition:.5s}#cssmenu ul ul{margin-top:0}#cssmenu.align-right ul ul{text-align:right}#cssmenu ul ul li{transition:.25s;margin-bottom:11px;padding:0;width:200px;text-transform:capitalize!important;position:relative;height:30px}#cssmenu li:hover>ul{left:auto}#cssmenu.align-right li:hover>ul{left:auto;right:0}#cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%}#cssmenu ul ul li.last-item>a,#cssmenu ul ul li:last-child>a{border-bottom:0}#cssmenu ul ul li.has-sub>a:after{top:16px;right:7px;width:8px;height:2px}#cssmenu>ul>li.has-sub>a{padding-right:10px}#cssmenu>ul>li a{border:none}#cssmenu>ul ul li a{border:none;padding-bottom:10px!important}#cssmenu>ul>li a:hover{color:#08693f}#cssmenu>ul ul{margin-top:14px}#cssmenu>ul ul li a:hover{background:0 0;transition:.5s}#cssmenu ul{padding:0}#cssmenu ul ul{top:50px;opacity:0;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s}#cssmenu ul ul ul{margin-left:100%;top:0;opacity:1;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s;background:#492b2d;margin-top:0}#cssmenu>ul>li:hover>ul{left:auto;top:20px;opacity:1}#cssmenu ul ul li a{border-bottom:1px solid rgba(143,143,143,.5);border-bottom:none;padding:11px;text-transform:capitalize;font-size:12px;color:#fff;-webkit-transition:.35s;margin:0!important;-moz-transition:.35s;-ms-transition:.35s;-o-transition:.35s;transition:.35s}#cssmenu ul ul li.has-sub::after{right:10px;top:12px;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-transition:-webkit-transform .2s,right .2s}@media all and (max-width:900px){#cssmenu #menu-button,#cssmenu .submenu-button{position:absolute;right:0;display:block;cursor:pointer}#cssmenu,#cssmenu .submenu-button.submenu-opened{background:0 0}#cssmenu ul li a{color:#fff!important}#cssmenu .submenu-button.submenu-opened:before,#cssmenu ul,#cssmenu ul ul>li.has-sub>a:after,#cssmenu ul ul>li.has-sub>a:before,#cssmenu>ul>li.has-sub>a:after,#cssmenu>ul>li.has-sub>a:before{display:none}#cssmenu ul ul li{width:100%!important;margin-bottom:0}#cssmenu ul{width:100%;margin-top:0;padding:0 10px}#cssmenu.align-center>ul{text-align:left}#cssmenu ul li{width:100%}#cssmenu li:hover>ul>li,#cssmenu ul ul li{height:auto}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#cssmenu>ul>li{float:none;padding-bottom:17px!important;padding-top:8px}#cssmenu ul ul ul li a{padding-left:35px}#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}#cssmenu #menu-button:after,#cssmenu #menu-button:before{right:8px;width:30px;content:'';position:absolute}#cssmenu #menu-button{padding:17px;color:#ddd;font-size:12px;text-transform:uppercase;font-weight:700;width:46px;border-radius:4px}#cssmenu #menu-button:after{top:16px;display:block;height:8px;border-top:2px solid #ddd;border-bottom:2px solid #ddd}#cssmenu #menu-button:before{top:10px;display:block;height:2px;background:#ddd}#cssmenu ul ul .submenu-button{height:34px;width:34px}#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;content:''}#cssmenu ul ul .submenu-button:after{top:15px;right:13px}#cssmenu .submenu-button.submenu-opened:after{content:'\f068';font-family:FontAwesome;color:#fff}#cssmenu .submenu-button:before{position:absolute;top:19px;right:19px;display:block;height:8px;content:'\f067';font-family:FontAwesome;color:#fff}#cssmenu ul ul .submenu-button:before{top:12px;right:16px}#cssmenu .submenu-button::after,#cssmenu .submenu-button::before{top:11px}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{z-index:auto}#cssmenu{position:fixed;z-index:160;right:15px;width:91.5%;border-radius:2px}ul.socialMedia{float:left}#cssmenu>ul>li>a{padding-bottom:15px}#cssmenu ul ul{padding:0;opacity:1}#cssmenu ul ul li a{background:0 0;font-size:12px;padding-bottom:5px;padding-left:20px!important}#cssmenu .submenu-button{z-index:99;top:0;height:38px;border:none}#cssmenu>ul ul{top:0;margin-top:0}}@media (min-width:768px) and (max-width:1024px){.sliderC{margin-top:0}#cssmenu #menu-button{right:14px}.addressBox{height:120px}@media (min-width:603px) and (max-width:966px){#cssmenu>ul>li a{padding:10px 13px!important}.addressBox h6{font-size:13px}}}@media (max-width:760px){#cssmenu .submenu-button{width:50px}#cssmenu ul ul{background:#404040!important;top:0!important}#cssmenu ul ul li{width:100%!important}.spcificHeight{height:400px!important;overflow-y:scroll!important}#cssmenu>ul>li{padding:0;padding-bottom:0!important}#cssmenu>ul>li a{padding:10px!important}#cssmenu #menu-button{background:#dadada;border:1px solid #fff}#cssmenu #menu-button::before{background:#7b8284}#cssmenu #menu-button::after{border-bottom:2px solid #7b8284;border-top:2px solid #7b8284}}





/*wow aniamtion*/

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
{  font-family: "Rajdhani", sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


{  font-family: "Anton", sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


{  font-family: "Barlow", sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body{margin:0px 0px; padding:0px 0px;  font-family: "Poppins", sans-serif;
}
header{ position:absolute; top:0; left:0; right:0; margin:0px auto; font-family: "Rajdhani", sans-serif; z-index:50;}
.logo{overflow:hidden; margin:16px 0px;}
.logo img{ max-width:100%;}
 
#cssmenu{   padding:0px 0px 0px;  font-family: "Rajdhani", sans-serif;
  }

#cssmenu > ul > li{font-size:16px; text-transform:capitalize;   margin-left:20px; font-weight:bold;
}
#cssmenu > ul > li:first-child{ margin-left:0px;}

#cssmenu > ul > li:first-child{ padding-left:0px;}
#cssmenu > ul > li a{   padding:10px 15px 35px 15px; color:#fff; position:relative; }




#cssmenu > ul ul li a{ background:none;}
#cssmenu > ul > li.has-sub > a{ }

#cssmenu > ul > li a:hover{ color:#066ab3;}
#cssmenu > ul > li a.active{ color:#fff!important;}

#cssmenu > ul ul li { font-size:12px; text-transform:capitalize;}
.active-img{ position:absolute; bottom:0; left:0; text-align:center; overflow:hidden; width:100%; display:none;}
.active-img img{ text-align:center; max-width:100%;}

#cssmenu > ul > li a.active{  }



#cssmenu{  }


#cssmenu > ul ul li a{ border-bottom:1px solid #05312c;}

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: 1.5s;
 transition-property: opacity;
}

.head-right{ float:right; display:flex; margin-top:15px;}
#cssmenu{}
.header-btn{ background:#0072b8; display:table; font-size:16px; color:#fff; padding:6px 10px;}
a{ text-decoration:none;}
.head-links a{ float:left; margin-left:20px;}

.top-whts{ margin-top:7px; color:#37ad09; font-size:20px; margin-left:30px;  display:inline;}

.sliderC{ background:#1f2024; width:100%;}


#intro1 { background:#1e1e20 url(../images/slider-bg.jpg) no-repeat  no-repeat 100% 100%;margin: 0 auto;
 width: 100%;   position: relative; height:100%;  background-attachment:fixed;  margin-top:50px; background-size:100%  auto;

}



.sliderC .carousel-caption {
  position: absolute;
  right:auto; bottom:auto; top:35%;
 left:5%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left;text-transform:uppercase;  font-family: "Anton", sans-serif;

}



.sliderC img{ width:100%;}

.sliderC h1{ font-size:39px; font-weight:normal; text-transform:uppercase; letter-spacing:5px; position:relative;
 padding-bottom:6px; margin-bottom:10px;}
.sliderC h2{ font-size:56px; letter-spacing:4px;font-weight:normal;  line-height:70px; }

.slider-image{ background:url(../images/banner-patern.png) bottom left no-repeat; padding:0px 0px 30px 30px; max-width:72%; margin-top:75px;}
.slider-image img{ max-width:100%; border:8px solid rgba(255, 255, 255, 0.4);}


/*.sliderC a{ background:#075e19; text-transform:uppercase; font-weight:bold; color:#fff; padding:8px 20px; display:table; margin-top:30px; z-index:15; font-family: "Rajdhani", sans-serif; }*/

.sliderC  h3{  font-family: "Barlow", sans-serif; letter-spacing:8px;
 }
  



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

{  font-family: "Manrope", sans-serif;
}


.about_us{ padding:80px 0px; font-family: "Manrope", sans-serif; }

.about-img-out{ position:relative; padding-left:100px;}
.abt-border-bx{ position:absolute; border:10px solid #e6e6e6; width:300px; height:350px; top:23%; left:0;}
.about-us-image{ overflow:hidden; position:relative; z-index:5;}
.about-us-image img{ width:100%;}

.about-us-image{ padding:0px 52px 52px 0px; background: url(../images/Decor-2.svg) bottom right no-repeat;}

.about_us h2{ position:relative; background:url(../images/about-corner.png) no-repeat left top;font-size:48px; font-weight:700;
 padding:20px 0px 0px 60px; margin:0px 0px 50px;}
 
 
 .abt-first{ border-left:3px solid #438451; font-size:16px; line-height:26px; padding:0px 0px 0px 30px; margin-bottom:30px;}
 
 .abt-txt{ line-height:24px; font-size:15px; color:#535252; font-family: "Manrope", sans-serif; margin-bottom:60px;}
 
 .about-right a{ border:2px solid #202020;padding: 16px 88px 16px 45px;font-size: 15px;
  font-weight: 500;
  text-transform: capitalize;
  font-style: normal;
  text-decoration: none; color: #202020; position:relative;
  line-height: 24px;}



 .about-right a::after {
  content: '';
  position: absolute; right:30px; top:24px; width:35px; height:1px;
  z-index: 1;
  transition: all .3s ease-out;
  background: #666;
    background-color: rgb(102, 102, 102);}




.clients-s{ padding:0px 0px 60px;}




#intro2 { background: url(../images/middlebg.jpg) no-repeat  no-repeat 100% 100%;margin: 0 auto;
 width: 100%;   position: relative; height:100%;  padding: 100px 0; background-attachment:fixed;  background-size:100%  auto; color:#FFFFFF;

}


.middle-bg{}


.middle-bg h2{ font-size:38px; line-height:36px; font-family: "Barlow", sans-serif; font-weight:200; margin-bottom:45px;  }

.middle-bg h3{ font-size:50px; font-family: "Anton", sans-serif; letter-spacing:2px; font-weight:500; margin-bottom:45px;}


.middle-bg h3 b{font-size:73px; font-family: "Anton", sans-serif; letter-spacing:4px; font-weight:500;}
.middle-bg a{ background:#fff; padding:10px 25px; color:#000000;font-family: "Rajdhani", sans-serif; font-size:21px; text-transform:uppercase; display:table; font-weight:600;}



#intro1 { 
	 background:url(../images/service-bg.jpg) ;
    margin: 0 auto; width: 100%; position: relative; height:100%; 
	 padding: 60px 0; background-attachment:fixed;  margin-top:0px; }
	 
	 

.service-C h2{ text-align:center; margin:10px auto; display:table; font-size:20px; font-weight:normal; text-transform:uppercase; position:relative; padding-left:30px; color:#000000; padding-top:14px; z-index:5; margin-bottom:35px;}
.service-C h2:before{ background:#ccf4ff; width:100px; height:50px; left:0; top:0; border-radius:8px; content:''; position:absolute; z-index:4;}

.service-C h2 span{ position:relative; z-index:10;font-family: "Manrope", sans-serif; color:#3d4250; letter-spacing:2px;}

.servicethump{ overflow:hidden; position:relative; margin-bottom:30px;transition:all .3s ease 0s} 
	 
.service-img{ overflow:hidden;}
.service-img img{ width:100%;}	 
	 
.service-title{ position:absolute; top:20px; left:20px; color:#FFFFFF;transition:all .3s ease 0s; text-align:left;} 
.service-title h3{ text-transform:uppercase; font-size:18px; font-weight:bold;transition:all .3s ease 0s}	
.overlay{ background:rgba(0, 0, 0, 0.5); position:absolute; top:0; bottom:0; left:0; right:0;transition:all .3s ease 0s} 
.servicethump .arrow-btn{ position:absolute; bottom:20px; left:20px;transition:all .3s ease 0s}	 



.box-content h3{ text-transform:uppercase; font-size:18px!important;}



/*********************** Demo - 1 *******************/
.box1 img,.box1:after,.box1:before{width:100%;transition:all .3s ease 0s}
.box1 .icon,.box2,.box3,.box4,.box5 .icon li a{text-align:center}
.box10:after,.box10:before,.box1:after,.box1:before,.box2 .inner-content:after,.box3:after,.box3:before,.box4:before,.box5:after,.box5:before,.box6:after,.box7:after,.box7:before{content:""}
.box1,.box11,.box12,.box13,.box14,.box16,.box17,.box18,.box2,.box20,.box21,.box3,.box4,.box5,.box5 .icon li a,.box6,.box7,.box8{overflow:hidden}
.box1 .title,.box10 .title,.box4 .title,.box7 .title{letter-spacing:1px}
.box3 .post,.box4 .post,.box5 .post,.box7 .post{font-style:italic}

.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mb-30{margin-bottom:30px}
.box1 .icon,.box1 .title{margin:0;position:absolute}
.box1{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative}
.box1:after,.box1:before{height:50%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;z-index:1;transform-origin:100% 0;transform:rotateZ(90deg)}
.box1:after{top:auto;bottom:0;transform-origin:0 100%}
.box1:hover:after,.box1:hover:before{transform:rotateZ(0)}
.box1 img{height:auto;transform:scale(1) rotate(0)}
.box1:hover img{filter:sepia(80%);transform:scale(1.3) rotate(10deg)}
.box1 .title{font-size:19px;font-weight:600;color:#fff;text-transform:uppercase;text-shadow:0 0 1px #004cbf;bottom:10px;left:10px;opacity:0;z-index:2;transform:scale(0);transition:all .5s ease .2s}
.box1:hover .title{opacity:1;transform:scale(1)}
.box1 .icon{padding:7px 5px;list-style:none;background:#004cbf;border-radius:0 0 0 10px;top:-100%;right:0;z-index:2;transition:all .3s ease .2s}
.box1:hover .icon{top:0}
.box1 .icon li{display:block;margin:10px 0}
.box1 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:10px;font-size:18px;color:#fff;transition:all .3s ease 0s}
.box2 .icon li a,.box3 .icon a:hover,.box4 .icon li a:hover,.box5 .icon li a,.box6 .icon li a{border-radius:50%}
.box1 .icon li a:hover{color:#fff;box-shadow:0 0 10px #000 inset,0 0 0 3px #fff}
@media only screen and (max-width:990px){.box1{margin-bottom:30px}
}


/*********************** Demo - 4 *******************/
.box4{position:relative}
.box4:before{width:0;height:200%;background:rgba(0,0,0,.5);position:absolute;top:0;left:-250px;bottom:0;transform:skewX(-36deg);transition:all .5s ease 0s}
.box4:hover:before{width:200%}
.box4 img{width:100%;height:auto}
.box4 .box-content{width:100%;height:100%;padding-top:20%;position:absolute;top:0;left:0;transform:scale(0);transition:all .3s ease 0s}
.box4 .icon,.box5 .icon{list-style:none;padding:0}
.box4:hover .box-content{transform:scale(1)}
.box4 .title{font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box4 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:20px}
.box4 .icon{margin:0}
.box4 .icon li{display:inline-block}
.box4 .icon li a{display:block;width:35px;height:35px;line-height:35px;font-size:20px;background:#fff;color:#aa8b54;margin-right:10px;transition:all .3s ease 0s}
.box5 .icon,.box5 .icon li{display:inline-block}
@media only screen and (max-width:990px){.box4{margin-bottom:30px}
}
@media only screen and (max-width:767px){.box4:before{left:-400px}
.box4:hover:before{width:300%}
}


.servicethump:hover .service-title{opacity:0;}












.more-btn{ border:1px solid #333333; padding:8px 20px; color:#333; font-size:14px;transition:all .3s ease 0s} 

.more-btn:hover{ background:#e1b567;transition:all .3s ease 0s; color:#333;}
.more-btn img{ margin-left:30px;}



@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@200..800&display=swap');


/*expert*/

.expert{ padding:60px 0px;  font-family: "Arsenal", sans-serif; background:#f2f2f2;
}
.expert h2{ font-size:70px; font-weight:bold; margin:0px 0px 10px;}
.expert h3{ font-size:30px; font-weight:500;margin:0px 0px 10px; margin-bottom:45px;}
.expert-img{ overflow:hidden;}
.expert-img img{ width:100%;}

.ecprt-txt{ margin-bottom:30px;}
.ecprt-txt p{ font-size:16px; line-height:24px;}

.export-right{ margin-left:35px;}

.export-right a{ border:1px solid #7f7f7f; padding:10px 30px 10px 30px; color:#333;}
.export-right a img{ margin-left:15px;}



/*projects*/


.projects .carousel-caption{ position:static; background:#000000; text-align:left; padding:25px;  font-family: "Barlow", sans-serif;}

.projects h3{ font-size:20px; font-weight:bold; margin:0px 0px 10px; text-transform:uppercase; font-weight:600;}

.projects h4{ font-size:14px; font-weight:400; padding:10px; border:1px solid #fff; display:table; text-transform:uppercase; margin:0px 0px;}


.projects{ background:#4b4b4b; padding:75px 0px; color:#FFFFFF; font-family: "Barlow", sans-serif;}
.projects h2{ text-transform:uppercase; font-weight:bold; font-size:30px; margin:0px 0px 15px;}

.project-txt{ width:70%;}
.project-txt p{ margin-bottom:0px; margin-top:15px;}


.process{ padding:70px 0px; text-align:center;}

.process-bx{ text-align:center;}

.process h2{}
.process-ic{ margin:0px auto; display:table; text-align:center; margin-bottom:20px;}
.process-bx h4{font-family: "Arsenal", sans-serif; font-size:20px; color:#525252;}

.process-bx h5{-webkit-text-stroke-color: #333; font-family: "Barlow", sans-serif;
  color: transparent !important;
  -webkit-text-stroke-width: 1px; font-size:70px;
}



.process h2{ text-align:center; margin:10px auto; display:table; font-size:20px; font-weight:normal; text-transform:uppercase; position:relative; padding-left:30px; color:#000000; padding-top:14px; z-index:5; display:table; margin-bottom:30px;}
.process h2:before{ background:#ccf4ff; width:100px; height:50px; left:0; top:0; border-radius:8px; content:''; position:absolute; z-index:4;}

.process h2 span{ position:relative; z-index:10;font-family: "Manrope", sans-serif; color:#3d4250; letter-spacing:2px;}
.process h3{font-family: "Barlow", sans-serif; font-weight:bold; color:#3d4250; font-size:35px; margin-bottom:35px;}




.testi-star i{ color: #f6a923!important;}

.testimonial{ background:#018e4f; padding:60px 0px; color:#FFFFFF; position:relative; overflow:hidden; min-height:400px;}

.testimonial h2{ display:table; font-size:14px; font-weight:normal; text-transform:uppercase; position:relative; padding-left:30px; color:#fff; padding-top:8px; z-index:5; margin-bottom:25px;}
.testimonial h2:before{ background:rgba(255, 255, 255, 0.2); width:70px; height:35px; left:0; top:0; border-radius:8px; content:''; position:absolute; z-index:4;}

.testimonial h2 span{ position:relative; z-index:10;font-family: "Manrope", sans-serif; color:#fff; letter-spacing:2px;}

.testimonial .carousel-caption{ position:static; text-align:left; font-family: "Manrope", sans-serif; line-height:30px; font-size:17px; font-weight:300; }

.testimonial  h3{ font-size:12px; line-height:30px; margin:30px 0px 0px;}

.testimonial  span{ font-size:19px;}

.testi-left-img{ position:absolute; left:0; top:0; bottom:0; max-width:50%}
.testi-left-img img{ width:100%;}
.testi-inner{ padding-left:100px; margin:10px 0px; position:relative; z-index:10;}
.testi-inner p{ font-size:15px;}
.testi-yellow{ background:#ffff; width:500px; height:500px; position:absolute;     right: -18%; z-index:2;
    bottom: -65%; border-radius:50%;}
	
	.qoue-ic{ position:absolute; left:0; right:0; margin:0px auto;  width:100px; height:100px; background:#00c9ff; color:#FFFFFF; font-size:50px; border-radius:50%; z-index:10; top:40%; text-align:center; line-height:100px;}





#intro3 { background:url(../images/video-bg.jpg); no-repeat  no-repeat 100% 100%;margin: 0 auto;
 width: 100%;   position: relative; height:100%;  background-attachment:fixed;  margin-top:0px; background-size:100%  auto;

}

.video-bg{ text-align:center; color:#e6e7eb; padding:150px 0px;}


.video-bg h2{ font-size:35px;}
.video-bg h3{ font-size:49px;}


/*.h-service{ cursor:pointer;}*/
.play-btn {
  width: 100px;
  height: 100px;

  border-radius: 50%;
  position: relative;
  display: block;
  margin: 100px auto;
/*  box-shadow: 0px 0px 25px 3px rgba(255, 0, 128, 0.8); */  margin:0px auto; margin-top:40px; background:#f5f5f5; 
border:5px solid rgba(255, 255, 255, 0.5);}


/* triangle */
.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-40%) translateY(-50%);
  transform: translateX(-40%) translateY(-50%);
  transform-origin: center center;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #000000;
  z-index: 100;
  -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* pulse wave */
.play-btn:before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .75);
  top: -25%;
  left: -25%;
  background: rgba(198, 16, 0, 0);
}

@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}

@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}


.green-strip{ text-align:center; padding:120px 0px; background:#0f6321 url(../images/green.jpg);}

.green-strip h3{ margin-bottom:0px; text-transform:uppercase; font-size:28px; font-weight:300;  color:#FFFFFF;}
.green-strip h3 a{ font-weight:bold; margin-left:25px; color:#FFFFFF;}
.green-strip h3 .fa{ margin-left:10px;}

	




footer{ color:#fff; background:#333; background-size:100% 100%; padding:60px 0px 0px;font-family: 'Arsenal', sans-serif;}

.copy-right{  padding:20px 0px; margin-top:60px; border-top:2px solid #8a8a8a;}
.copy-right p{ margin-bottom:0px;}
footer h3{ font-size:18px; margin:0px 0px 15px; margin-top:70px; font-family: "Poppins", sans-serif;}

.footer-logo{ margin-bottom:20px;}
.footer-txt{ max-width:90%;}

.a1 h3{ margin-top:0px;}
footer ul{ margin:0px 0px; padding:0px 0px; list-style:none;}
footer ul li{ margin-bottom:5px;}
footer ul li a{ font-size:14px; color:#FFFFFF; text-transform:capitalize; cursor:pointer;}

footer h4 { font-size:24px;margin-bottom:25px;}
footer h5{ padding:5px; border:1px solid #fff; display:table; border-radius:4px; text-align:center; font-size:14px;}

.share-c{ overflow:hidden; line-height:normal; margin:0px auto; padding:0px; list-style:none; margin-top:20px; display:block; }

.share-c li{ float:left; margin-right:6px;}

.share-c li:last-child{ margin-right:0px;}

.share-c li .fa{ font-size:15px;}

.share-c li:kast-child{ margin-right:0px;}

.share-c li a{ color:#fff;-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.share-c li a:hover{ color:#011f41
;-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

.share-c  h3{ display:table; margin:0px 0px; margin-right:15px; float:left; font-size:13px; text-transform:uppercase; font-weight:bold;margin-top:5px;}








.hom-about{ padding:100px 0px;font-family: 'Arsenal', sans-serif; background:#438451; color:#FFFFFF; padding:70px 0px; overflow:hidden;}
.hom-about h2{ background:#fff; padding:5px; color:#333; font-size:24px; text-transform:uppercase; display:table; text-transform:uppercase;}
.hom-about h3{ font-size:41px; font-weight:bold; color:#fff; margin:20px 0px;}
.hom-about p {
  font-size: 14px;
  line-height: 22px;
}
.hom-about h3 span{ font-size:62px; font-weight:900; font-family: "Rajdhani", sans-serif;}

.home-right{ margin-top:160px;}
.abt-middl-img{ overflow:hidden;  background:url(../images/plus-pattern.png) no-repeat bottom right; padding:40px 40px 40px 0px; position:relative;}



.abt-middl-img{}

.abt-middl-img img{ width:100%;border:10px  solid #fff;}

.about-top-img{ overflow:hidden; border:10px  solid #fff; position:absolute; top:35%; right:0; }
.about-top-img img{ max-width:100%;} 


.bottom-img{ overflow:hidden; border:10px  solid #fff;position:absolute; bottom:0; left:0;}
.bottom-img img{ max-width:100%;} 

.about-img-sec{ position:relative;padding:50px 62px 50px;}

.about-txt-hm{ margin-bottom:50px;}
.rd-btn {
color:#fff; font-weight:normal; padding:15px 20px; border-radius:4px; display:table; background:#1f1f1f;-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.2); display:inline; margin-right:10px; text-transform:uppercase;transition: all 0.6s ease-in-out 0s; border:none;
}
.rd-btn .fa{ margin-right:5px;}

.rd-btn:hover{ background:#ffb400;transition: all 0.6s ease-in-out 0s; color:#FFFFFF;}


.home-right{ margin-left:60px;}


.inner-banner{ overflow:hidden; position:relative; margin-bottom:40px;}
.inner-banner img{ width:100%;}



.vision-box{ overflow:hidden; position:relative;}
.vision-box img{ width:100%;}
.vs-content{ position:absolute; bottom:0; left:0; right:0; padding:30px; color:#FFFFFF;}
.vs-content i { margin-right:10px;}
.vs-content h3{ font-size:19px; margin:0px auto; margin-bottom:15px; text-align:center;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;}

.vs-section{ margin-top:60px; margin-bottom:60px;}

.vision-box:hover .vs-content h3{ color:#1495d4;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;}
.vs-content p{ line-height:19px; font-size:15px;}



.page-title{ position:absolute; left:0; right:0; margin:0px auto; text-align:center; color:#FFFFFF; top:40%;}

.page-title h1{ font-size:30px; font-weight:bold; margin:0px auto; text-transform:uppercase;}



/*contact-page*/






.contact-bx{ margin-bottom:30px; border-radius:10px; text-align:center; border:1px solid #e6f7f5;box-shadow: 0 8px 30px rgba(0,0,0,.06); padding:30px; color:#333;}
.contact-bx a{ color:#333;}
.contact-bx h3{ font-size:20px; font-weight:bold;}

.contact-bx .fa{ width:60px; height:60px; line-height:60px; background:#fff;  text-align:center; border-radius:50%; 
font-size:25px; margin-bottom:30px; color:#525fe1;}

.contact-bx ul{ line-height:22px; margin:0px auto; padding:0px 0px; list-style:none;}


.textBox{ height:50px; border:none; background:#f5f5f5; padding-left:10px; margin-bottom:20px; width:100%; border-radius:5px;}

.textArea{ height:150px; border:none; background:#f5f5f5; padding-left:10px; margin-bottom:10px;  width:100%;border-radius:5px;}

.submit-btn{ background:#45659b; padding:10px 30px; color:#FFF; border:none;border-radius:5px;}

.gmap{ margin-top:50px;}
.gmap iframe{ width:100%; height:300px; border:none;}

.bx-1{ background:#edeffc;}

.bx-2{ background:#fff2ee;}


.bx-3{ background:#fff6e8;}


.bx-4{ background:#edeffc;}




.srv-dtl{ margin-bottom:60px;}
.srv-dtl h2{ font-size:20px;}

.border-div{ border:1px solid rgba(255, 255, 255, 0.2); padding:30px;}
.srv-dtl-img{ overflow:hidden; margin-bottom:35px;}
.srv-dtl-img img{ width:100%;}

.dtl-2-img{ overflow:hidden;}
.dtl-2-img img{ width:100%;}

.spl-2{ margin-top:45px; margin-bottom:45px;}

.step-img{ overflow:hidden;}
.step-img img{ width:100%;}

.right-listing{ margin-bottom:30px;}
.right-menu { margin:0px 0px; list-style:none; padding:0px; font-size:14px;}
.right-menu li{ margin-bottom:2px; color:#999999;}
.right-menu li:last-child{ margin-bottom:0px;}
.right-menu li a{ background:#ffffff; padding:10px; display:block;color:#333;transition:.5s}
.right-menu li a:hover{transition:.5s; background:#075e19; color:#FFFFFF;}

.right-listing h5{ margin:0px 0px 10px; font-weight:bold; font-size:30px;}

.dwd-box{ position:relative; padding-left:60px; border-bottom:1px solid rgba(255, 255, 255, 0.2); padding-bottom:25px; margin-bottom:30px;}
.dwd-box a{ color:#FFFFFF;}
.dwd-box h6{ font-size:20px; color:#0072b8;}
.dwd-box h6 b{ font-size:30px; color:#FFFFFF;}
.dwd-box:before{ position:absolute; left:0; position:absolute; font-size:50px; top:0; font-family:FontAwesome;content:'\f1c1';}

.step-img{ margin-top:35px;}

.side-address ul{ margin:0px 0px 25px; padding:0px 0px; list-style:none;}

.prj-top{ background:#454545; padding:30px; margin-bottom:40px;}

.proj-dtl{ margin-bottom:60px;}
.prj-top h3 b{}

.prj-top h3 span{ color:#0072b8; font-size:22px;}

.proj-dtlt-bottm h3{ font-size:35px; margin:0px 0px 30px}

.prj-dtl-bx{ overflow:hidden; background:url(../images/banner-patern.png); padding:15px;}
.prj-dtl-bx img{ width:100%;}

.full-btn{ position:relative; z-index:10;}

.border-div {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px; background:#f2f2f2;
}


.inner-page p{ font-size:14px; line-height:25px;}

.right-listing h5{ font-size:20px; margin:0px 0px 15px;}

.inner-page .cloents-image{ text-align:center; padding:30px; border:1px solid #f4f4f4; margin-bottom:30px;}


.pro-bx{ margin-bottom:30px;}

.prj-img{ overflow:hidden;}

.prj-img img{ width:100%;}

.prj-txt{ background:#075e19; padding:20px; color:#FFFFFF; text-transform:uppercase;}
.prj-txt h3{ font-size:22px; margin:0px 0px 5px;}
.prj-txt h4{ font-size:17px; margin:0px 0px 0px; font-weight:300;}
.pro-bx:hover{}

.project-tabele{ margin:30px 0px;}
.project-tabele td{ padding:15px 10px;}

.inner-page .projects{ background:none; padding:0px 0px;}

.carousel-control-next, .carousel-control-prev{ width:6%!important;}


.pro-bx {
    position: relative;

    transition: all .5s ease 0s
}

.pro-bx:hover {
    box-shadow: 0 15px 33px rgba(0,0,0,.2);
    transform: translateY(-10px);
    transition: all .5s ease 0s
}
.whats-aap {
    position: fixed;
    overflow: hidden;
    bottom: 10px;
    right: 0px;
    text-align: center; z-index:100;
}

.whats-aap-ic {
    width: 100px;
    height: auto;
    margin: 0 auto;
    text-align:leftt;
    display: table
}

.whats-aap img {
    width: 50%;
    border-radius: 50%
}



/*novo slider*/


/*nivo -slider*/




.slider-area {
  position: relative; color:#FFF;




}

.custom-slider {position: relative;}

.layer-1 h2, .layer-2 h2 {

}
.layer-1 p, .layer-2 p { padding: 0;}
.layer-1 a, .layer-2 a {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #999;

  font-weight: 600;
  margin-top: 40px;
  padding: 12px 35px 8px;
  text-transform: uppercase;
}
.nivo-caption a {
  display: inline-block !important;
}
.layer-1 a:hover, .layer-2 a:hover {

  color: #fff;

}
.slider-area .nivo-directionNav {display: none;}
.nivo-controlNav {
  bottom: 0;
  left:0%;
  position: absolute; text-align:left;
  right: 0%;
  z-index: 9;  display:block; max-width:1270px; margin:0px auto;
}
.nivo-controlNav a {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  display: inline-block;
  height: 14px;
  margin: 0 3px;
  position: relative;
  text-indent: -9999px;

}
.nivo-controlNav a::before {
  background: #fff none repeat scroll 0 0;
  content: "";
  display: block;
  height: 6px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 3px;
  width: 6px;
}
.nivo-controlNav a.active { font-weight: normal;}
.nivo-controlNav a.active::before { opacity: 1;}
/*.slider-content .layer-1.layer-2 {

  margin-left:0%;
  margin-right: 8%;
  position: relative;
  width: 60%;
}*/
.layer-1.layer-3 p {  margin-right: 5%;}
.slider-area .slider-progress{
	background-color: rgba(50, 196, 209, .5);
}
.slider-area.style-2 .slider-progress {
  background-color: rgba(50, 196, 209, 0.2);
}
.slider-area.style-2  .nivo-directionNav {
  display: block;
}
.slider-area.style-2  .nivo-directionNav a {
  background: transparent none repeat scroll 0 0;
 
  color: #999999;
  cursor: pointer;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  right: 30px;
  text-align: center;
  text-transform: uppercase;
  top: 45%;
  width: 100px;
  z-index: 9;
  opacity: 0;
  transition: all 0.5s ease 0s;
}
.slider-area.style-2 :hover .nivo-directionNav a {
    opacity: 1;
    right: 0;
}
.slider-area.style-2 :hover .nivo-prevNav {
    opacity: 1;
    left: 0;
}
.slider-area.style-2  .nivo-directionNav a:hover {
    background: #000000;
    color: #fff;
 
}
.slider-area.style-2  .nivo-directionNav a:hover {
    background: #000000;
    color: #fff;
    border-color: transparent;
}
/* slider-area.style-2 .nivo-controlNav */
.slider-area.style-2  .nivo-controlNav a {
width:4px; height:25px;

border: 1px solid #FFF; background:#FFF;
display: block;
margin-bottom: 5px;
margin: 25px 0px;
}
.slider-area.style-2  .nivo-controlNav a::before {
  background: #000 ; width:4px; height:25px; top:0; left:0; border:none;
}
    
.nivo-controlNav a.active{ border:none!important;}



.nivo-controlNav{ text-align:left; padding-left:5%;}
.slider-area.style-2 .nivo-controlNav a{}

.nivo-controlNav a.active{ background:#ed1c24; }

.slideC{ position:relative;}

.nivo-controlNav{ bottom:35%;}

.slideC{ position:relative;  }

.nivo-controlNav{ bottom:30px;}

nivo-controlNav {
    bottom: 35%;
}
.nivo-controlNav {
    text-align: left;
    padding-left: 5%;
}
.nivo-controlNav {
    bottom: 0;
    left: auto;
    position: absolute;
    right: 9%;
    z-index: 9;
}
.nivo-controlNav {
    padding: 15px 0;
        padding-left: 0px;
    text-align: center;
}



.nivo-controlNav{ text-align:left; padding-left:5%;}
.slider-area.style-2 .nivo-controlNav a{}

.nivo-controlNav a.active{ background:#FFF;}

.slideC{ position:relative;}

.nivo-controlNav{ bottom:35%;}



a:hover{ text-decoration:none;}





.slider-content .layer-1 {
    margin-left: 0%; margin-top:30%;
    
}









.sld-cap{ text-align:center;}
.sld-cap h1{ font-size:96px;}
.nivo-caption{ color:#FFFFFF;}

.slider-content .layer-1 {
    margin-left: 0%;
    margin-top: 10%;
}

.nivo-caption{opacity:1!important;}


.nivo-directionNav{ display:none!important;}












.sld-cap{ text-align:left; color:#fff;}

.sliderC  h2{ font-size:30px; font-weight:400; text-transform:uppercase; margin:0px 0px 0px; background:#438451; padding:10px; color:#fff; display:table; line-height:30px;  
}



.sliderC  h3{ font-size:58px; text-transform:uppercase; }

.sliderC  h3 span{-webkit-text-stroke-color: #FFFBFB;color: transparent !important;-webkit-text-stroke-width: 1px; }
	
.sliderC  h4{ font-size:58px; text-transform:uppercase; margin-bottom:50px; }

.sliderC  h4 span{ -webkit-text-stroke-color: #FFFBFB;color: transparent !important;-webkit-text-stroke-width: 1px; }

.sliderC p{}


.slider-txt{ width:40%;}


.cap-inner .more-btn{ font-size:14px;  letter-spacing:7px; padding:15px 25px; background:#fff; color:#000000; font-weight:normal;}

a{ text-decoration:none;}

.cap-inner  a:hover{-webkit-transition: all .6s ease-in-out; background:#444444;}
.cap-inner img{ margin-left:10px; margin-right:2px;}
.cap-inner img{ width:auto;}


.cap-inner img{ position:static;}

.slider-content .layer-1 {
    margin-left: 0%;
    margin-top: 18%;
}

.cap-inner  a:hover img {
  transition: transform .7s ease-in-out;
}
.cap-inner  a:hover img {
  transform: rotate(360deg);
}




.counter-sec{ background:#3c3c3c; padding:65px 0px; color:#fff;}
.counter-bx{ text-align:center; padding:30px;}

.counter-ic{ width:150px;height:100px; padding:20px; overflow:hidden; display:table; margin:0px auto; margin-bottom:40px; background:#ffbe10;   border:2px solid rgba(255, 255, 255, 0.5); border-radius:6px;}




.counter-ic img{ width:50%; }
.counter-bx h2{ text-transform:uppercase; font-size:50px; margin:0px auto; margin-bottom:15px; font-weight:200;}
.counter-bx h2 b{font-weight:200;}


.counter-bx h3{ margin:0px auto; font-size:18px; }


.what-we-do{ padding:70px 0px; background:#f1f1f1;}

.what-txt{ padding:20px;}

.what-we-do h2{ margin:0px auto; font-size:24px; margin-bottom:50px; text-align:center;}
.what-we-do h2 b{ font-size:35px;}
.what-we-do  a{ border:1px solid #005802; padding:10px 20px; color:#005802; text-transform:uppercase; margin:10px auto; margin-top:20px; display:table; font-size:13px;}

.what-we-inn{ background:#fff; padding:30px; text-align:center;box-shadow: 0px 5px 25px rgba(0,0.10,0,0.10);}
.what-we-bx{ overflow:hidden;  padding:20px 0px 0px 20px; background:url(../images/pattern-1.png) top left no-repeat;}
.what-ic{ overflow:hidden; width:80px; margin:10px auto;}
.what-ic img{ width:100%;}
.what-we-inn h3{ font-size:20px;}
.what-we-inn  p{ font-size:14px;}

/*new*/


.carousel-caption01{ text-align:center;}

.sliderC h2{ margin:0px auto; font-size:20px;}
.sliderC h3 {
  font-size: 27px; margin-top:30px;}




.about-sec{ background:url(../images/about-bg2.png); padding:80px 0px; font-family: 'Bebas Neue', sans-serif;  }
.about-sec h2{ text-transform:uppercase; color:#9ccb49; font-size:36px; letter-spacing:2px; letter-spacing:6px;}
.about-sec h3{ text-transform:uppercase; color:#05b8a7; font-size:40px; font-weight:bold; line-height:60px;letter-spacing:6px; }

.about-sec h3 span{ font-size:50px; font-weight:normal; color:#006ab5;}
.about-sec h3 b{ color:#FFFFFF; font-weight:normal;}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

.about-txtt{text-transform:none; margin-bottom:20px; display:block; overflow:hidden;}
.about-sec p{ font-size:13px; font-weight:300; line-height:25px; color:#FFFFFF; font-family: 'Poppins', sans-serif;
}

p{font-family: 'Poppins', sans-serif;}

.about-sec  a{ background:#fff; color:#333; padding:19px 30px; border-radius:4px; font-weight:bold; text-transform:uppercase; letter-spacing:2PX;}

.about-rt-img{ float:right; width:70%; border:20px solid rgba(255, 255, 255, 0.5);}
.about-rt-img img{ width:100%;}
.about-rt-img-2{ position:absolute; bottom:0; left:0; z-index:5;}
.about-right{ position:relative; display:block; overflow:hidden; padding-bottom:100px; }

.img-2-inner{position:relative; padding:15px; margin-top:50px; max-width:250px;}


.img-2-inner:after{ background:#ffffff; position:absolute; top:0; right:0; content:''; width:90%; height:90%;}
.img-2-inner img{ z-index:5; position:relative; max-width:100%;}
a{ text-decoration:none;}
.rt-padding{ margin-left:00px;}
.about-left{ margin-top:80px;}

.about-right{ position:relative; padding:30px 30px 30px 0px;}

.about-rt-img img{ position:relative; z-index:1;}
.abt-top-pattern{ position:absolute; top:0; right:0;}
.abt-bottom{ position:absolute; bottom:0; right:0;}

.about-sec h3 {
  text-transform: none;
  color: #05b8a7;
  font-size: 33px;
  font-weight: 200;
  line-height: 43px;
  letter-spacing: 0;
  margin-bottom: 25px;
}

.hom-about h3 span {
  font-size: 35px;
  font-weight: 700;
  font-family: "Rajdhani", sans-serif;
  
  -webkit-text-stroke-color: #FFFBFB;
  color: transparent !important;
  -webkit-text-stroke-width: 1px;
}


.footer-logo{ overflow:hidden;}
.footer-logo img{ width:75%;}

footer p{ font-size:13px;}


	
.h-service{ overflow:hidden; position:relative;}
.h-service img{ width:100%;}	


.h-service h3{ position:absolute; font-size:25px; font-weight:bold; margin:30px; top:30px; left:30px;}

.h-service .konw-btn{ position:absolute; font-size:25px; font-weight:bold; margin:30px; bottom:0; z-index:5; left:0; font-size:16px; font-weight:bold; color:#FFFFFF;}

.h-service .konw-btn img{ margin-right:10px;}

.h-service h3 b{ font-size:30px;}
.konw-btn img{ width:auto;}


.home-serviceC{ background:url(../images/service-bg.jpg);padding:100px 0px;}
.home-serviceC h2{  margin:0px 0px 50px; font-size:50px;-webkit-text-stroke-color: #000; text-align:center;
  color: transparent !important;
  -webkit-text-stroke-width: 1px;
}



/*hover*/

/*********************** Demo - 1 *******************/
.box1 img,.box1:after,.box1:before{width:100%;transition:all .3s ease 0s}
.box1 .icon,.box2,.box3,.box4,.box5 .icon li a{text-align:center}
.box10:after,.box10:before,.box1:after,.box1:before,.box2 .inner-content:after,.box3:after,.box3:before,.box4:before,.box5:after,.box5:before,.box6:after,.box7:after,.box7:before{content:""}
.box1,.box11,.box12,.box13,.box14,.box16,.box17,.box18,.box2,.box20,.box21,.box3,.box4,.box5,.box5 .icon li a,.box6,.box7,.box8{overflow:hidden}
.box1 .title,.box10 .title,.box4 .title,.box7 .title{letter-spacing:1px}
.box3 .post,.box4 .post,.box5 .post,.box7 .post{font-style:italic}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mb-30{margin-bottom:30px}
.box1 .icon,.box1 .title{margin:0;position:absolute}
.box1{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative}
.box1:after,.box1:before{height:50%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;z-index:1;transform-origin:100% 0;transform:rotateZ(90deg)}
.box1:after{top:auto;bottom:0;transform-origin:0 100%}
.box1:hover:after,.box1:hover:before{transform:rotateZ(0)}
.box1 img{height:auto;transform:scale(1) rotate(0)}
.box1:hover img{filter:sepia(80%);transform:scale(1.3) rotate(10deg)}
.box1 .title{font-size:19px;font-weight:600;color:#fff;text-transform:uppercase;text-shadow:0 0 1px #004cbf;bottom:10px;left:10px;opacity:0;z-index:2;transform:scale(0);transition:all .5s ease .2s}
.box1:hover .title{opacity:1;transform:scale(1)}
.box1 .icon{padding:7px 5px;list-style:none;background:#004cbf;border-radius:0 0 0 10px;top:-100%;right:0;z-index:2;transition:all .3s ease .2s}
.box1:hover .icon{top:0}
.box1 .icon li{display:block;margin:10px 0}
.box1 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:10px;font-size:18px;color:#fff;transition:all .3s ease 0s}
.box2 .icon li a,.box3 .icon a:hover,.box4 .icon li a:hover,.box5 .icon li a,.box6 .icon li a{border-radius:50%}
.box1 .icon li a:hover{color:#fff;box-shadow:0 0 10px #000 inset,0 0 0 3px #fff}
@media only screen and (max-width:990px){.box1{margin-bottom:30px}
}
/*********************** Demo - 2 *******************/
.box2{position:relative}
.box2 img{width:100%;height:auto}
.box2 .box-content{width:100%;height:100%;position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}
.box2 .box-content:after,.box2 .box-content:before,.box2:after,.box2:before{content:"";width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);transition:all .5s ease 0s}
.box2:before{background:linear-gradient(45deg,rgba(0,0,0,.2) 49%,transparent 50%);left:-100%}
.box2:after{background:linear-gradient(45deg,transparent 49%,rgba(0,0,0,.2) 50%);left:160%}
.box2 .box-content:after,.box2 .box-content:before{width:65%;height:65%;background:linear-gradient(45deg,rgba(0,0,0,.3) 49%,transparent 50%);left:-100%;transition-delay:.1s}
.box1 .box-content:after{background:linear-gradient(45deg,transparent 49%,rgba(0,0,0,.3) 50%);left:160%}
.box2:hover .box-content:after,.box2:hover .box-content:before,.box2:hover:after,.box2:hover:before{left:50%}
.box2 .inner-content{width:50%;height:50%;color:#fff;padding:40px 0;position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%) scale(0);transition:all .3s ease .2s}
.box2 .inner-content:after{width:100%;height:100%;background:rgba(255,79,79,.8);position:absolute;top:50%;left:50%;z-index:-1;transform:translate(-50%,-50%) rotate(45deg)}
.box2:hover .inner-content{transform:translate(-50%,-50%) scale(1);transition:all .3s ease 0s}
.box2 .title{font-size:18px;font-weight:700;text-transform:uppercase;margin-bottom:5px}
.box2 .post{display:block;font-size:14px;text-transform:capitalize;margin-bottom:7px}
.box10 .title,.box11 .title,.box4 .title,.box5 .title,.box6 .box-content,.box7 .title{text-transform:uppercase}
.box2 .icon{padding:0;margin:0;list-style:none;transform:rotateY(360deg) scale(0);transition:all .3s ease 0s}
.box2:hover .icon{transform:rotateY(0) scale(1)}
.box2 .icon li{display:inline-block;margin:0 3px}
.box2 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:16px;color:#505050;transition:all .3s ease 0s}
.box2 .icon li a:hover{box-shadow:0 0 0 5px rgba(0,0,0,.5);background:#fff;color:#ff4f4f}
@media only screen and (max-width:990px){.box2{margin-bottom:30px}
}
@media only screen and (max-width:320px){.box2 .inner-content{padding:25px 0}
.box2 .title{font-size:16px}
}
/*********************** Demo - 3 *******************/
.box3{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative}
.box3 .box-content,.box3:after,.box3:before{position:absolute;left:7%;right:7%;transition:all .3s}
.box3:after,.box3:before{display:block;background:rgba(0,0,0,.3);top:10%;bottom:10%;z-index:1;transform:scale(0,1)}
.box3:after{top:10.8%;bottom:10.8%;transform:scale(1,0)}
.box3:hover:after,.box3:hover:before{transform:scale(1);animation:animate 1.5s}
.box3:hover:before{border-top:3px solid #fff;border-bottom:3px solid #fff}
.box:hover:after{border-left:3px solid #fff;border-right:3px solid #fff}
.box img{width:100%;height:auto;transition:all .3s}
.box3:hover img{transform:scale(1.2);filter:blur(5px);-moz-filter:blur(5px);-webkit-filter:blur(5px)}
.box3 .box-content{padding:30px 10px;top:10%;bottom:10%;opacity:0;z-index:2}
.box3:hover .box-content{box-shadow:0 0 0 35px rgba(255,255,255,.3);opacity:1;transition:all .3s}
.box3 .title{font-size:24px;font-weight:600;color:#88c425;margin:0 0 5px}
.box3 .post{display:block;margin:0 0 5px;font-size:14px;color:rgba(255,255,255,.8)}
.box3 .description{font-size:14px;color:#fff;margin:0 0 20px}
.box3 .icon{padding:0;margin:0;list-style:none}
.box3 .icon li{display:inline-block;margin:0 10px 0 0}
.box3 .icon li a{display:block;width:30px;height:30px;line-height:30px;color:#fff;background:#88c425;transition:all .5s}
.box3 .icon a:hover{text-decoration:none;animation:animate-hover .5s;transition:all .3s}
@keyframes animate{0%,100%{opacity:1}
}
@keyframes animate-hover{0%{box-shadow:0 0 0 10px rgba(255,255,255,.3)}
50%{box-shadow:0 0 0 5px rgba(255,255,255,.3)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
}
.box10,.box11,.box12,.box14,.box4,.box5,.box6,.box7,.box9{box-shadow:0 0 3px rgba(0,0,0,.3)}
@media only screen and (max-width:990px){.box3{margin-bottom:30px}
.box3 .box-content{padding:10px}
.box3 .description{margin-bottom:10px}
}
@media only screen and (max-width:479px){.box3 .title{margin:0}
}

/*********************** Demo - 4 *******************/
.box4{position:relative}
.box4:before{width:0;height:200%;background:rgba(0,0,0,.5);position:absolute;top:0;left:-250px;bottom:0;transform:skewX(-36deg);transition:all .5s ease 0s}
.box4:hover:before{width:200%}
.box4 img{width:100%;height:auto}
.box4 .box-content{width:100%;height:100%;padding-top:20%;position:absolute;top:0;left:0;transform:scale(0);transition:all .3s ease 0s}
.box4 .icon,.box5 .icon{list-style:none;padding:0}
.box4:hover .box-content{transform:scale(1)}
.box4 .title{font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box4 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:20px}
.box4 .icon{margin:0}
.box4 .icon li{display:inline-block}
.box4 .icon li a{display:block;width:35px;height:35px;line-height:35px;font-size:20px;background:#fff;color:#ee4266;margin-right:10px;transition:all .3s ease 0s}
.box5 .icon,.box5 .icon li{display:inline-block}
@media only screen and (max-width:990px){.box4{margin-bottom:30px}
}
@media only screen and (max-width:767px){.box4:before{left:-400px}
.box4:hover:before{width:300%}
}

/*********************** Demo - 5 *******************/
.box5{background:#444;position:relative}
.box5:after,.box5:before{width:50px;height:50px;border-radius:50%;background:#10a5b8;position:absolute;top:-80px;left:15px;opacity:0;z-index:1;transition:all .35s ease}
.box5:after{top:auto;left:auto;bottom:-80px;right:15px}
.box5:hover:after,.box5:hover:before{opacity:.75;transform:scale(8);transition-delay:.15s}
.box5 img{width:100%;height:auto;transition:all .35s ease-out 0s}
.box5:hover img{opacity:.4}
.box5 .icon{margin:0;position:absolute;bottom:15px;right:15px;z-index:2;transform:scale(0);transition:all .35s ease-out}
.box5:hover .icon{transform:scale(1);transition-delay:.15s}
.box5 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:18px;color:#444;margin-right:10px;position:relative;transition:all .5s ease 0s}
.box5 .icon li a:hover{background:#444;color:#fff}
.box5 .box-content{padding:20px 15px;position:absolute;top:0;left:0;z-index:1}
.box5 .title{font-size:20px;font-weight:800;color:#fff;margin:0 0 5px;opacity:0;transform:translate(-20px,-20px);transition:all .35s ease-out}
.box5:hover .title{opacity:1;transform:translate(0,0);transition-delay:.15s}
.box5 .post{display:inline-block;font-size:16px;color:#fff;opacity:0;transform:translate(-20px,-20px);transition:all .35s ease-out}
.box5:hover .post{opacity:1;transform:translate(0,0);transition-delay:.15s}
.box6 .title,.box6 img,.box6:after{transition:all .35s ease 0s}
@media only screen and (max-width:990px){.box5{margin-bottom:30px}
}
/*********************** Demo - 6 *******************/
.box6{background:#000;position:relative}
.box6:after{background:rgba(0,0,0,.7);position:absolute;top:0;left:-30%;bottom:0;right:70%;transform:skew(20deg) translateX(-75%)}
.box6:hover:after{transform:skew(20deg) translateX(0)}
.box6 img{width:100%;height:auto}
.box6:hover img{opacity:.5}
.box6 .box-content{padding:20px;text-align:right;position:absolute;top:0;right:0;z-index:1}
.box6 .icon,.box7 .icon{padding:0;list-style:none}
.box10 .icon li a,.box11,.box12,.box13,.box14,.box6 .icon li a,.box7,.box7 .icon li a,.box8,.box8 .icon li a{text-align:center}
.box6 .title{font-size:20px;font-weight:900;color:#fff;margin:0 0 10px;transform:scale(0)}
.box6:hover .title{transform:scale(1)}
.box6 .icon li,.box6 .post{opacity:0;transform:translateX(40px);transition:all .35s ease 0s}
.box6 .post{display:block;font-size:14px;color:#fff;margin-bottom:5px}
.box6 .icon{display:inline-block;margin:0}
.box6:hover .icon li,.box6:hover .post{opacity:1;transform:translateX(0)}
.box6:hover .icon li:first-child{transition-delay:.1s}
.box6:hover .icon li:nth-child(2){transition-delay:.2s}
.box6 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:18px;color:#605f5f;margin-bottom:5px;transition:all .35s ease}
.box6 .icon li a:hover{background:#605f5f;color:#fff}
@media only screen and (max-width:990px){.box6{margin-bottom:30px}
}

/*********************** Demo - 7 *******************/
.box7{position:relative}
.box7:after,.box7:before{width:100%;height:100%;background:rgba(11,33,47,.9);position:absolute;top:0;left:0;opacity:0;transition:all .5s ease 0s}
.box7:after{background:rgba(255,255,255,.3);border:2px solid #0dab76;top:0;left:170%;opacity:1;z-index:1;transform:skewX(45deg);transition:all 1s ease 0s}
.box7:hover:before{opacity:1}
.box7:hover:after{left:-170%}
.box7 img{width:100%;height:auto}
.box7 .box-content{width:100%;position:absolute;bottom:-100%;left:0;transition:all .5s ease 0s}
.box7:hover .box-content{bottom:30%}
.box7 .title{display:block;font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box7 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:10px}
.box7 .icon{margin:0}
.box7 .icon li{display:inline-block}
.box7 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:50%;background:#0dab76;font-size:18px;color:#fff;margin-right:10px;transition:all .5s ease 0s}
.box8 .icon li,.box8 .title{display:inline-block}
.box7 .icon li a:hover{transform:rotate(360deg)}
@media only screen and (max-width:990px){.box{margin-bottom:30px}
}

/*********************** Demo - 8 *******************/
.box8 .icon,.box8 .title{margin:0;position:absolute}
.box8{box-shadow:0 0 3px rgba(0,0,0,.3);position:relative}
.box8 img{width:100%;height:auto}
.box8 .box-content{width:100%;height:100%;background:rgba(0,0,0,.6);opacity:0;position:absolute;top:0;left:0;transform:perspective(400px) rotateX(-90deg);transform-origin:center top 0;transition:all .5s ease 0s}
.box8 .icon li a,.box8 .title{background:#ef4050;font-size:20px;color:#fff}
.box8:hover .box-content{opacity:1;transform:perspective(400px) rotateX(0)}
.box8 .title{padding:5px 7px;border-radius:5px;font-weight:600;bottom:20px;left:20px;transition:all .9s ease 0s}
.box8 .icon li a,.box9 .box-content,.box9 .icon li,.box9 img{transition:all .35s ease 0s}
.box8:hover .title{bottom:-40px}
.box8 .icon{list-style:none;padding:0;top:42%;left:0;right:0}
.box8 .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;margin-right:7px}
.box9 .icon,.box9 .title{width:100%;font-size:22px}
.box8 .icon li a:hover{background:#fff;color:#000}
@media only screen and (max-width:990px){.box8{margin-bottom:20px}
}

/*********************** Demo - 9 *******************/
.box9{background:#000;text-align:center;position:relative}
.box9 img{width:100%;height:auto}
.box9:hover img{opacity:.5}
.box9 .box-content{padding:30px 10px 30px 0;background:rgba(0,0,0,.65);position:absolute;top:0;left:0;bottom:0;right:0;opacity:0}
.box9:hover .box-content{top:10px;left:10px;bottom:10px;right:10px;opacity:1}
.box9 .title{font-weight:700;color:#fff;line-height:17px;margin:5px 0;position:absolute;bottom:55%}
.box10 .icon li a,.box9 .icon li a{line-height:35px;border-radius:50%}
.box9 .icon{list-style:none;padding:0;margin:0;position:absolute;top:50%}
.box9 .icon li{display:inline-block;opacity:0;transform:translateY(40px)}
.box9:hover .icon li{opacity:1;transform:translateY(0)}
.box9:hover .icon li:first-child{transition-delay:.1s}
.box9:hover .icon li:nth-child(2){transition-delay:.2s}
.box9 .icon li a{display:block;width:35px;height:35px;background:#f39c12;font-size:20px;color:#000;margin-right:5px;transition:all .35s ease 0s}
.box9 .icon a:hover{background:#fff}
@media only screen and (max-width:990px){.box9{margin-bottom:20px}
}
/*********************** Demo - 10 *******************/
.box10{background:#000;overflow:hidden;position:relative}
.box10:after,.box10:before{border-width:0 180px 140px;border-style:solid;border-color:transparent transparent #0d5f45;position:absolute;bottom:0;left:50%;z-index:1;transform:translate(-55%,100%);transition:all .5s 0s cubic-bezier(.6,-.28,.735,.045)}
.box10:after{border-width:150px 250px;border-color:transparent #18ab69 #18ab69 #008148;top:25%;transform:translate(-60%,100%)}
.box10:hover:before{transition:all .4s 0s cubic-bezier(.175,.885,.32,1.275);transform:translate(-55%,0);transition-delay:.2s}
.box10:hover:after{transition:all .4s 0s cubic-bezier(.175,.885,.32,1.275);transform:translate(-60%,0);transition-delay:0s}
.box10 img{width:100%;height:auto;opacity:1;transform:scale(1.1) translateY(3%);transition:all .5s ease 0s}
.box10:hover img{transform:scale(1.1) translateY(-3%);opacity:.4}
.box10 .box-content{padding:20px 0 0 20px;position:absolute;top:0;left:0;opacity:0;z-index:2;transform:translateY(20%);transition:all .5s ease 0s}
.box10:hover .box-content{opacity:1;transform:translate(0);transition-delay:.1s}
.box10 .title{font-size:23px;font-weight:800;color:#fff}
.box10 .icon{padding:0;margin:0;list-style:none}
.box10 .icon li{display:inline-block}
.box10 .icon li a{display:block;width:35px;height:35px;background:#18ab69;font-size:18px;color:#fff;margin-right:10px;transition:all .3s ease 0s}
.box11 .icon li,.box11 .icon li a,.box11 .title,.box12 .icon li,.box12 .title{display:inline-block}
.box10 .icon li a:hover{transform:rotate(360deg)}
@media only screen and (max-width:990px){.box10{margin-bottom:20px}
}
@media only screen and (max-width:767px) and (min-width:600px){.box10:before{border-width:0 250px 240px}
.box10:after{border-width:260px 460px}
}
@media only screen and (max-width:599px) and (min-width:430px){.box:before{border-width:0 220px 120px}
.box10:after{border-width:260px 460px}
}
/*********************** Demo - 11 *******************/
.box11{background:#000;color:#fff;position:relative}
.box11:after,.box11:before{position:absolute;content:""}
.box11:before{width:100%;height:100%;background:#83437d;opacity:.5;top:100%;left:0;z-index:1;transition:all .35s ease-in .3s}
.box11:hover:before{top:0;transition:all .35s ease-out 0s}
.box11:after{bottom:100%;left:50%;border-width:200px 200px 0;border-style:solid;border-color:#83437d transparent transparent;opacity:.9;transform:translateX(-50%);transition:all .35s ease-out 0s}
.box11:hover .post,.box11:hover .title{transform:translate(0,-50%)}
.box11:hover:after{bottom:25%;transition:all .35s ease-in .2s}
.box11 img{width:100%;height:auto}
.box11:hover img{opacity:.5}
.box11 .icon,.box11 .post,.box11 .title{width:100%;position:absolute;left:0;opacity:0;transition:all .35s ease .5s}
.box11 .box-content{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}
.box11 .title{padding:0 30px;margin:0;font-weight:300;top:45%}
.box11 .post,.box14 .post{text-transform:capitalize}
.box11 .post{font-size:15px;top:57%}
.box11 .icon{padding:0;margin:0;list-style:none;bottom:5px}
.box11 .icon li a{width:40px;height:40px;line-height:40px;padding:0 5px;font-size:20px;color:#fff;opacity:.7;transition:all .35s ease .5s}
.box11 .icon li a:hover{opacity:1;transition:all .35s ease}
.box11:hover .icon,.box11:hover .post,.box11:hover .title{opacity:1}
@media only screen and (max-width:990px){.box11{margin-bottom:20px}
}
@media only screen and (max-width:767px){.box11:after{border-width:500px 500px 0}
}

/*********************** Demo - 12 *******************/
.box12{position:relative}
.box12 .box-content,.box12:after{position:absolute;transition:all .3s ease 0s}
.box12:after{content:"";width:65%;background:rgba(28,28,28,.8);padding-bottom:65%;opacity:0;top:50%;left:50%;transform:rotate(0) translate(-50%,-50%);transform-origin:0 0 0}
.box12:hover:after{transform:rotate(-45deg) translate(-50%,-50%);opacity:1}
.box12 img{width:100%;height:auto}
.box12 .box-content{width:100%;top:35%;left:0;opacity:0;z-index:1}
.box12:hover .box-content{opacity:1}
.box12 .title{padding:10px 0;color:#fff;margin:0;border-top:2px solid #fff;border-bottom:2px solid #fff}
.box12 .icon{padding:0;margin:12px 0 0;list-style:none}
.box12 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:50%;border:1px solid #fff;font-size:18px;color:#fff;margin-right:10px;transition:all .3s ease 0s}
.box12 .icon li a:hover{border-radius:0}
@media only screen and (max-width:990px){.box12{margin-bottom:20px}
}
/*********************** Demo - 13 *******************/
.box13{position:relative;transition:all .2s ease-out 0s}
.box13 .box-content,.box13:after{position:absolute;left:20px;right:20px}
.box13:after{content:"";display:block;background:#463f9f;top:20px;bottom:20px;opacity:0;transform:rotate3d(-1,1,0,100deg);transition:all .4s ease-in-out 0s}
.box13:hover:after{opacity:.9;transform:rotate3d(0,0,0,0deg)}
.box13 img{width:100%;height:auto}
.box13 .box-content{top:45%;opacity:0;z-index:1;-webkit-transform:translate(10%,-30%);transform:translate(10%,-30%);transition:all .2s ease-out 0s}
.box13:hover .box-content{opacity:1;transform:translate(0,-50%);transition-delay:.2s}
.box13 .title{display:block;font-size:22px;font-weight:700;color:#39b54a;margin:0 0 10px}
.box13 .post{display:block;font-size:15px;color:#f7f7b9;margin-bottom:20px}
.box13 .social{padding:0;margin:0;list-style:none}
.box13 .social li{display:inline-block}
.box13 .social li a{display:block;width:35px;height:35px;background:#f7f7b9;border-radius:50%;font-size:17px;color:#1b1462;line-height:35px;margin-right:5px;transition:all .4s ease-in-out 0s}
.box14 .icon li,.box14 .post{display:inline-block}
.box13 .social li a:hover{color:#f7f7b9;background:#39b54a}
@media only screen and (max-width:990px){.box13{margin-bottom:30px}
}

/*********************** Demo - 14 *******************/
.box14{position:relative}
.box15,.box17,.box18{box-shadow:0 0 5px #7e7d7d;text-align:center}
.box14:before{content:"";width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;opacity:1;transition:all .35s ease 0s}
.box14:hover:before{opacity:1}
.box14 img{width:100%;height:auto}
.box14 .box-content{width:90%;height:90%;position:absolute;top:5%;left:5%}
.box14 .box-content:after,.box14 .box-content:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;opacity:1;transition:all .7s ease 0s}
.box14 .box-content:before{border-bottom:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);transform:scale(0,1);transform-origin:0 0 0}
.box14 .box-content:after{border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);transform:scale(1,0);transform-origin:100% 0 0}
.box14:hover .box-content:after,.box14:hover .box-content:before{opacity:1;transform:scale(1);transition-delay:.15s}
.box14 .title{font-size:21px;font-weight:700;color:#fff;margin:15px 0;opacity:1;transform:translate3d(0,-50px,0);transition:transform .5s ease 0s}
.box14:hover .title{opacity:1;transform:translate3d(0,0,0)}
.box14 .post{font-size:14px;color:#fff;padding:10px;background:#d79719;opacity:0;border-radius:0 19px;transform:translate3d(0,-50px,0);transition:all .7s ease 0s}
.box14 .icon,.box15 .icon{padding:0;list-style:none}
.box14:hover .post{opacity:1;transform:translate3d(0,0,0);transition-delay:.15s}
.box14 .icon{width:100%;margin:0;position:absolute;bottom:-10px;left:0;opacity:0;z-index:1;transition:all .7s ease 0s}
.box14:hover .icon{bottom:20px;opacity:1;transition-delay:.15s}
.box14 .icon li a{display:block;width:40px;height:40px;line-height:40px;border:1px solid #fff;border-radius:0 16px;font-size:14px;color:#fff;margin-right:5px;transition:all .4s ease 0s}
.box14 .icon li a:hover{background:#d79719;border-color:#d79719}
@media only screen and (max-width:990px){.box14{margin-bottom:30px}
}

/*********************** Demo - 15 *******************/
.box15{position:relative}
.box15 img{width:100%;height:auto}
.box15 .box-content{width:100%;height:100%;position:absolute;top:0;left:0;transition:all .5s ease 0s}
.box15:hover .box-content{background-color:rgba(255,242,242,.8)}
.box15 .box-content:after,.box15 .box-content:before{content:"";width:50px;height:50px;position:absolute;opacity:0;transform:scale(1.5);transition:all .6s ease .3s}
.box15 .box-content:before{border-left:1px solid #040404;border-top:1px solid #040404;top:19px;left:19px}
.box15 .box-content:after{border-bottom:1px solid #040404;border-right:1px solid #040404;bottom:19px;right:19px}
.box15:hover .box-content:after,.box15:hover .box-content:before{opacity:1;transform:scale(1)}
.box15 .title{font-size:22px;color:#000;margin:0;position:relative;top:0;opacity:0;transition:all 1s ease 10ms}
.box15:hover .title{top:39%;opacity:1;transition:all .5s cubic-bezier(1,-.53,.405,1.425) 10ms}
.box15 .title:after{content:"";width:0;height:1px;background:#040404;position:absolute;bottom:-8px;left:0;right:0;margin:0 auto;transition:all 1s ease 0s}
.box15:hover .title:after{width:80%;transition:all 1s ease .8s}
.box15 .icon{width:100%;margin:0 auto;position:absolute;bottom:0;opacity:0;transition-duration:.6s;transition-timing-function:cubic-bezier(1,-.53,.405,1.425);transition-delay:.1s}
.box15:hover .icon{bottom:39%;opacity:1}
.box15 .icon li{display:inline-block}
.box15 .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:18px;color:#000;border:1px solid #000;margin-right:5px;transition:all .3s ease-in-out 0s}
.box15 .icon li a:hover{background:#000;color:#fff}
@media only screen and (max-width:990px){.box15{margin-bottom:30px}
}

/*********************** Demo - 16 *******************/
.box16{text-align:center;color:#fff;position:relative}
.box16 .box-content,.box16:after{width:100%;position:absolute;left:0}
.box16:after{content:"";height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.08) 69%,rgba(0,0,0,.76) 100%);top:0;transition:all .5s ease 0s}
.box16 .post,.box16 .title{transform:translateY(145px);transition:all .4s cubic-bezier(.13,.62,.81,.91) 0s}
.box16:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,.01) 0,rgba(0,0,0,.09) 11%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.19) 20%,rgba(0,0,0,.29) 28%,rgba(0,0,0,.29) 29%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.46) 43%,rgba(0,0,0,.53) 47%,rgba(0,0,0,.75) 69%,rgba(0,0,0,.87) 84%,rgba(0,0,0,.98) 99%,rgba(0,0,0,.94) 100%)}
.box16 img{width:100%;height:auto}
.box16 .box-content{padding:20px;margin-bottom:20px;bottom:0;z-index:1}
.box16 .title{font-size:22px;font-weight:700;text-transform:uppercase;margin:0 0 10px}
.box16 .post{display:block;padding:8px 0;font-size:15px}
.box16 .social li a,.box17 .icon li a{border-radius:50%;font-size:20px;color:#fff}
.box16:hover .post,.box16:hover .title{transform:translateY(0)}
.box16 .social{list-style:none;padding:0 0 5px;margin:40px 0 25px;opacity:0;position:relative;transform:perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);transition:all .6s cubic-bezier(0,0,.58,1) 0s}
.box16:hover .social{opacity:1;transform:perspective(500px) rotateX(0) rotateY(0) rotateZ(0)}
.box16 .social:before{content:"";width:50px;height:2px;background:#fff;margin:0 auto;position:absolute;top:-23px;left:0;right:0}
.box16 .social li{display:inline-block}
.box16 .social li a{display:block;width:40px;height:40px;line-height:40px;background:#6d3795;margin-right:10px;transition:all .3s ease 0s}
.box17 .icon li,.box17 .icon li a{display:inline-block}
.box16 .social li a:hover{background:#bea041}
.box16 .social li:last-child a{margin-right:0}
@media only screen and (max-width:990px){.box16{margin-bottom:30px}
}

/*********************** Demo - 17 *******************/
.box17{position:relative}
.box17:after{content:"";width:100%;height:100%;background:rgba(2,162,221,.9);position:absolute;top:0;left:0;opacity:0;transition:all .5s ease 0s}
.box17:hover:after{opacity:1}
.box17 img{width:100%;height:auto;transition:all 1.5s ease 0s}
.box17 .box-content,.box17 .icon li a{position:absolute;transition:all .6s ease 0s}
.box17:hover img{transform:scale(1.2)}
.box17 .icon{width:100%;height:100%;list-style:none;padding:0;margin:0 auto;position:absolute;top:0;left:0;z-index:1}
.box17 .icon li a{width:45px;height:45px;line-height:45px;margin:0 auto;top:50%;border:1px solid #fff;opacity:0}
.box17:hover .icon li a{top:30%;opacity:1}
.box17 .icon li a:hover{background:#fff;color:#02a2dd}
.box17 .icon li:first-child a{left:-90%;right:0}
.box17:hover .icon li:first-child a{left:-55px}
.box17 .icon li:last-child a{right:-90%;left:0}
.box17:hover .icon li:last-child a{right:-55px}
.box17 .box-content{width:100%;padding:20px 10px;background:rgba(0,0,0,.1);bottom:-100px;left:0;z-index:1}
.box17:hover .box-content{bottom:0}
.box17 .title{font-size:18px;font-weight:700;color:#fff;margin-top:0}
.box17 .post{display:block;font-size:14px;color:#fff}
@media only screen and (max-width:990px){.box17{margin-bottom:30px}
}

/*********************** Demo - 18 *******************/
.box18{background:#3c3c3c;position:relative;-webkit-transition:all .35s ease;transition:all .35s ease}
.box18:after,.box18:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:#3c3c3c;border-left:3px solid #fff;border-right:3px solid #fff;opacity:.9;z-index:1;-webkit-transition:all .35s ease;transition:all .35s ease}
.box18 img,.box19 img{height:auto;width:100%}
.box18:before{-webkit-transform:skew(45deg) translateX(-155%);transform:skew(45deg) translateX(-155%)}
.box18:hover:before{-webkit-transform:skew(45deg) translateX(-55%);transform:skew(45deg) translateX(-55%)}
.box18:after{-webkit-transform:skew(45deg) translateX(155%);transform:skew(45deg) translateX(155%)}
.box18:hover:after{-webkit-transform:skew(45deg) translateX(55%);transform:skew(45deg) translateX(55%)}
.box18 img{-webkit-transition:all .35s ease;transition:all .35s ease}
.box18:hover img{opacity:.5}
.box18 .box-content{position:absolute;top:50%;left:50%;-webkit-box-shadow:0 0 10px #3c3c3c;box-shadow:0 0 10px #3c3c3c;opacity:0;z-index:2;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5);-webkit-transition:all .35s ease;transition:all .35s ease}
.box19,.box20,.box21{box-shadow:0 0 5px #a3a3a3}
.box18:hover .box-content{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:1}
.box18 .post,.box18 .title{font-size:18px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:#3c3c3c;border:2px solid #fff;color:#fff;padding:15px 20px;margin:0}
.box18 .post,.box19 .title,.box20 .post,.box20 .title{text-transform:capitalize}
.box18 .post{display:block;font-size:14px;font-weight:400;padding:5px 10px;margin-top:15px}
@media only screen and (max-width:990px){.box18{margin-bottom:30px}
}

/*********************** Demo - 19 *******************/
.box19{text-align:center;position:relative}
.box19 .box-content{width:100%;height:100%;background:0 0;padding-top:25%;position:absolute;top:0;left:0;transition:all .3s ease 0s}
.box19 .icon,.box19 .title{transition:all .2s ease 0s}
.box19:hover .box-content{background:rgba(0,0,0,.5)}
.box19 .title{font-size:24px;color:#fff;transform:scale(0)}
.box19:hover .title{transform:scale(1)}
.box19 .icon{list-style:none;padding:0;margin:0;opacity:0}
.box19:hover .icon{opacity:1}
.box19 .icon li{display:inline-block}
.box19 .icon li:first-child a,.box19 .icon li:last-child a{display:block;width:50px;height:50px;line-height:50px;font-size:24px;color:#fff;border:1px solid #fff;position:relative}
.box19 .icon li a{top:-150px}
.box19:hover .icon li a{top:0}
.box19:hover .icon li a:hover{background:#a46789;border-color:#a46789}
.box19 .icon li:first-child a{transition:all .6s cubic-bezier(.175,.885,.32,1.275) 0s}
.box19 .icon li:last-child a{transition:all .6s cubic-bezier(.175,.885,.32,1.275) .1s}
@media only screen and (max-width:990px){.box19{margin-bottom:30px}
}
@media only screen and (max-width:360px){.box19 .box-content{padding-top:20%}
}

/*********************** Demo - 20 *******************/
.box20{position:relative}
.box20:after,.box20:before{position:absolute;content:""}
.box20:before{width:80%;height:220%;background:#ff402a;top:-50%;left:-100%;z-index:1;transform:rotate(25deg);transform-origin:center top 0;transition:all .5s ease 0s}
.box20:hover:before{left:10%}
.box20:after{width:55%;height:175%;background-color:rgba(0,0,0,.8);bottom:-1000%;left:53%;transform:rotate(-33deg);transform-origin:center bottom 0;transition:all .8s ease 0s}
.box20 .box-content,.box20 .icon{width:100%;padding:0 20px;position:absolute;left:0;z-index:2;transition:all 1.1s ease 0s}
.box20:hover:after{bottom:-70%}
.box20 img{width:100%;height:auto}
.box20 .box-content{top:-100%;color:#fff}
.box20:hover .box-content{top:30px}
.box20 .title{font-size:24px;margin:0}
.box20 .icon li a,.box20 .post{display:inline-block;font-size:14px}
.box20 .post{margin-top:5px}
.box20 .icon{list-style:none;margin:0;bottom:-100%}
.box20:hover .icon{bottom:25px}
.box20 .icon li{display:inline-block}
.box20 .icon li a{width:35px;height:35px;line-height:35px;background:#444;border-radius:50%;margin:0 3px;color:#fff;text-align:center;transition:all .5s ease 0s}
.box20 .icon li a:hover{background:#fff;color:#ff402a}
@media only screen and (max-width:990px){.box20{margin-bottom:30px}
}
@media only screen and (max-width:479px){.box20 .title{font-size:20px}
}

/*********************** Demo - 21 *******************/
.box21{text-align:center;position:relative}
.box21:after,.box21:before{content:"";width:2px;height:2px;border-radius:50%;background:rgba(0,0,0,.35);position:absolute;top:50%;left:50%;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.box21:hover:after,.box21:hover:before{-webkit-transform:scale(400);-moz-transform:scale(400);-ms-transform:scale(400);-o-transform:scale(400);transform:scale(400)}
.box21:before{-o-transition:all .5s linear .3s;-moz-transition:all .5s linear .3s;-ms-transition:all .5s linear .3s;-webkit-transition:all .5s linear .3s;transition:all .5s linear .3s}
.box21:hover:before{-moz-transition-delay:0s;-webkit-transition-delay:0s;-o-transition-delay:0s;-ms-transition-delay:0s;transition-delay:0s}
.box21:after{-o-transition:all .5s linear .6s;-moz-transition:all .5s linear .6s;-ms-transition:all .5s linear .6s;-webkit-transition:all .5s linear .6s;transition:all .5s linear .6s}
.box21:hover:after{-moz-transition-delay:.2s;-webkit-transition-delay:.2s;-o-transition-delay:.2s;-ms-transition-delay:.2s;transition-delay:.2s}
.box21 img{width:100%;height:auto}
.box21 .box-content{width:100%;height:100%;position:absolute;top:0;left:0;background:0 0;color:#fff;padding-top:25px;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-ms-transition:all .3s linear 0s;-o-transition:all .3s linear 0s;-webkit-transition:all .3s linear 0s;-moz-transition:all .3s linear 0s;transition:all .3s linear 0s;z-index:1}
.box21:hover .box-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-moz-transition-delay:.4s;-webkit-transition-delay:.4s;-o-transition-delay:.4s;-ms-transition-delay:.4s;transition-delay:.4s}
.box21 .title{font-size:17px;font-weight:700;text-transform:uppercase;border-bottom:1px solid #fff;padding-bottom:20px;margin-top:20px}
.box21 .description{font-size:14px;font-style:italic;padding:0 10px;margin:15px 0}
.box21 .read-more{display:block;width:120px;background:#fed000;border-radius:2px;font-size:14px;color:#000;text-transform:capitalize;padding:10px 0;margin:0 auto}
@media only screen and (max-width:990px){.box21{margin-bottom:30px}
}
@media only screen and (max-width:479px){.box21 .box-content{padding-top:0}
}
@media only screen and (max-width:359px){.box21 .title{padding-bottom:10px}
}


.box14 .icon li{ border:none;}
.box14 .icon li a{ width:auto; height:auto;}
.box14 .icon li a img{ float:left; margin-right:10px; width:auto; border:none; margin-top:7px;}
.box14 .icon li a{ border:none;}

.h-service h3{ left:20px;}



.h-service{ margin:0px 15px;}


.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 3em;
  text-align: left;
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  padding: 15% 0 10px 0;
  text-align: left;
}

.hovereffect .overlay:before {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
}

.hovereffect:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect:hover .overlay:before,
.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}










.inner-content{ z-index:15;  }


.box14:before{ z-index:1;}
.box14 .title{ z-index:3;}
.konw-btn span{ display:table; float:left; margin-right:5px;}
.box14 .icon li a {
    width: 125px;
    height: auto;
}
.box14 .box-content:after, .box14 .box-content:before{ z-index:6;}
.box14 .icon li a:hover{ background:none!important;}






/*over-always*/

.box14::before {opacity:1;}


.inner-page .srvs-block{ margin-bottom:30px;}










.testimonial-Box{ padding:20px; background:#f4f4f4; margin-bottom:5px; border-radius:10px; padding-top:45px}
.testimonial-Box h3{ font-size:18px; margin:10px 0px; text-transform:uppercase;}
.testimonial-Box h4{ font-size:14px; margin:10px 0px; opacity:0.5}

.testi-star{ margin:10px 0px 0px; list-style:none; padding:0px 0px; overflow:hidden}
.testi-star li a{ color:#f6a923; font-size:14px;}
.testi-star li{ margin-right:10px; float:left;}

.pagination{ margin:20px 0px;}

.testimonial-Box{ position:relative; padding-left:90px;}

.testimonial-Box:before {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    height: 8px;
    content: '\f10d';
    font-family: FontAwesome;
    width: 50px;
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
}

.form-innner {
    margin-bottom: 30px;
    border-radius: 10px;
    border: 1px solid #e6f7f5;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
    padding: 30px;
    color: #333; font-size:13px;
}


.form-innner textarea{ height:95px; border-radius:0px;}
.form-innner input{ height:45px; border-radius:0px;}


.form-titl{}

.form-titl h4{ font-size:20px; font-weight:bold; margin: 50px 0px 30px 0px; padding-bottom:10px; text-transform:uppercase; border-bottom:1px  dotted #fba419;}


.form-innner button{ padding:15px 25px;    background: #438451; text-transform:uppercase; overflow:hidden; margin-top:25px; font-size:14px; letter-spacing:1px; font-weight:bold;}

.service-deteil-slider{ overflow:hidden; margin-bottom:30px;}
.service-deteil-slider img{ width:100%;}

.service-deteil-slider .carousel{ margin-bottom:30px;}


.attractions{ padding:30px; background:#fff;}
.attractions ul{ margin:0px 0px; padding:0px 0px; list-style:none;}
.attractions ul li{ margin-bottom:20px; border-bottom:1px solid #f5f5f5; padding-bottom:20px;}

.attractions h3{ font-size:25px; margin:0px 0px 35px 0px; text-transform:uppercase; padding:15px 25px; background:#ffbe10;  font-weight:200; display:table;}


.contact-us{ padding:35px; color:#fff; background:#018e4f; margin-top:5px;}
.contact-us a{ color:#fff;}

.contact-us h3{ font-size:15px; font-weight:400; margin:0px 0px 25px;}
.contact-us h3 b{ font-weight:200; font-size:25px;}
.contact-us a{ color:#FFFFFF; font-size:25px;}
.contact-us i{ margin-right:20px;}


.evtC{ overflow:hidden;}
.evtC img{ width:100%;}




/*image-over*/

.grid {
  position: relative;
  margin: 0 auto;
  padding: 1em 0 4em;
  max-width: 1000px;
  list-style: none;
  text-align: center;
}

/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
/*  min-width: 320px;
 max-width: 480px;
  max-height: 360px;
  width: 48%;*/
  background: #3085a3;
  text-align: center;
  cursor: pointer; 
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;

}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
  max-width: none;
  width: -webkit-calc(100% + 50px);
  width: calc(100% + 50px);
  opacity: 0.7;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px,0, 0);
  transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
  text-align: left;
}

figure.effect-lily figcaption > div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  height: 50%;
}

figure.effect-lily h2,
figure.effect-lily p {
  -webkit-transform: translate3d(0,40px,0);
  transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-lily p {
  color: rgba(255,255,255,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
  opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
  background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: #484c61;
  -webkit-transition: -webkit-transform 0.35s, color 0.35s;
  transition: transform 0.35s, color 0.35s;
  -webkit-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  opacity: 0;
  -webkit-transform: translate3d(0,10px,0);
  transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
  color: #fff;
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
  transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Roxy *****/
/*---------------*/

figure.effect-roxy {
  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
  background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
  max-width: none;
  width: -webkit-calc(100% + 60px);
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50px,0,0);
  transform: translate3d(-50px,0,0);
}

figure.effect-roxy figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-20px,0,0);
  transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
  padding: 3em;
  text-align: left;
}

figure.effect-roxy h2 {
  padding: 30% 0 10px 0;
}

figure.effect-roxy p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
  background: #9e5406;
}

figure.effect-bubba img {
  opacity: 0.7;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
  opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1,0);
  transform: scale(1,0);
}

figure.effect-bubba h2 {
  padding-top: 30%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,-20px,0);
  transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
  padding: 20px 2.5em;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,20px,0);
  transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

figure.effect-romeo img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,0,300px);
  transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
  opacity: 0.6;



  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 1px;
  background: #fff;
  content: '';
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
  opacity: 0.5;
  -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
  transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
  opacity: 0.5;
  -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
  transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-romeo h2 {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
  transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
  padding: 0.25em 2em;
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
  transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
  transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
  -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
  transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
  background: #18a367;
}

figure.effect-layla img {
  height: 390px;
}

figure.effect-layla figcaption {
  padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
  position: absolute;
  content: '';
  opacity: 0;
}

figure.effect-layla figcaption::before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1,0);
  transform: scale(1,0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

figure.effect-layla h2 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-layla p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  -webkit-transform: translate3d(0,-10px,0);
  transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
  -webkit-transform: translate3d(0,-30px,0);
  transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
  background: #4a3753;
}

figure.effect-honey img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.5;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #fff;
  content: '';
  -webkit-transform: translate3d(0,10px,0);
  transform: translate3d(0,10px,0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0,-30px,0);
  transform: translate3d(0,-30px,0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-30px,0);
  transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
  background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
  background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
  opacity: 0.9;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;opacity:0.5;
}

figure.effect-oscar figcaption {
  padding: 3em;
  background-color: rgba(58,52,42,0.7);
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
}

figure.effect-oscar h2 {
  margin: 20% 0 10px 0;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0);
  transform: scale(0);
}

figure.effect-oscar:hover h2 {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-oscar:hover figcaption {
  background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
  opacity: 0.4;
}

/*---------------*/
/***** Marley *****/
/*---------------*/

figure.effect-marley figcaption {
  text-align: right;
}

figure.effect-marley h2,
figure.effect-marley p {
  position: absolute;
  right: 30px;
  left: 30px;
  padding: 10px 0;
}


figure.effect-marley p {
  bottom: 30px;
  line-height: 1.5;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

figure.effect-marley h2 {
  top: 30px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,20px,0);
  transform: translate3d(0,20px,0);
}

figure.effect-marley:hover h2 {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-marley h2::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fff;
  content: '';
  -webkit-transform: translate3d(0,40px,0);
  transform: translate3d(0,40px,0);
}

figure.effect-marley h2::after,
figure.effect-marley p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
  background-color: #17819c;
}

figure.effect-ruby img {
  opacity: 0.7;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

figure.effect-ruby:hover img {
  opacity: 0.5;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-ruby h2 {
  margin-top: 20%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,20px,0);
  transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
  margin: 1em 0 0;
  padding: 3em;
  border: 1px solid #fff;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,20px,0) scale(1.1);
  transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1);
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
  background: #2e5d5a;
}

figure.effect-milo img {
  max-width: none;
  width: -webkit-calc(100% + 60px);
  width: calc(100% + 60px);
  opacity: 1;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px,0,0) scale(1.12);
  transform: translate3d(-30px,0,0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo:hover img {
  opacity: 0.5;
  -webkit-transform: translate3d(0,0,0) scale(1);
  transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1em 1.2em;
}

figure.effect-milo p {
  padding: 0 10px 0 0;
  width: 50%;
  border-right: 1px solid #fff;
  text-align: right;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Dexter *****/
/*---------------*/

figure.effect-dexter {
  background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
  background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
}

figure.effect-dexter img {
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-dexter:hover img {
  opacity: 0.4;
}

figure.effect-dexter figcaption::after {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  height: -webkit-calc(50% - 30px);
  height: calc(50% - 30px);
  border: 7px solid #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

figure.effect-dexter:hover figcaption::after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-dexter figcaption {
  padding: 3em;
  text-align: left;
}

figure.effect-dexter p {
  position: absolute;
  right: 60px;
  bottom: 60px;
  left: 60px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100px,0);
  transform: translate3d(0,-100px,0);
}

figure.effect-dexter:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
  background: #42b078;
}

figure.effect-sarah img {
  max-width: none;
  width: -webkit-calc(100% + 20px);
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-sarah:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
  text-align: left;
}

figure.effect-sarah h2 {
  position: relative;
  overflow: hidden;
  padding: 0.5em 0;
}

figure.effect-sarah h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah p {
  padding: 1em 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
  top: auto;
  bottom: 0;
  padding: 1em;
  height: 3.75em;
  background: #fff;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
  float: left;
}

figure.effect-zoe p.icon-links a {
  float: right;
  color: #3c4a50;
  font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
  color: #252d31;
}

figure.effect-zoe p.description {
  position: absolute;
  bottom: 8em;
  padding: 2em;
  color: #fff;
  text-transform: none;
  font-size: 90%;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0,200%,0);
  transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
  display: inline-block;
  padding: 8px 10px;
  font-family: 'feathericons';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
  content: '\e000';
}

.icon-paper-clip::before {
  content: '\e001';
}

.icon-heart::before {
  content: '\e024';
}

figure.effect-zoe h2 {
  display: inline-block;
}

figure.effect-zoe:hover p.description {
  opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-zoe img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
}

figure.effect-chico:hover img {
  opacity: 0.5;
  -webkit-transform: scale(1);
  transform: scale(1);
}

figure.effect-chico figcaption {
  padding: 3em;
}

figure.effect-chico figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h2 {
  padding: 20% 0 20px 0;
}

figure.effect-chico p {
  margin: 0 auto;
  max-width: 200px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.h-service h3{ top:50px!important}

.gallery-dtl{ margin-bottom:45px;}


.evtC h2{ font-size:15px;color:#fff}
.evtC h2 b{ font-size:25px;}

.konw-btn img{ max-width:20px;}


@media screen and (max-width: 50em) {
  .content {
    padding: 0 10px;
    text-align: center;
  }
  .grid figure {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}


@media (min-width: 1300px) {
    .container {
        max-width: 1290px;
    }
}




@media all and (max-width: 768px) {
    
    .about-img{margin-right:0px;}
    
    .team-main-title h3 {
  font-size: 16px !important;
}
    
.round-image{ overflow:hidden; width:300px; height:300px; }



#intro h2{font-size:20px;}
    
    
.homeSocial{display:none;}    
    
.power{float:none;}    
    
.up-form .textArea{ margin-top:4px; height:120px;}

.join-c h3{ font-size:20px;}
.app-dwd{ margin-top:30px;}
.contact-top{ background:#791212; color:#FFFFFF;}
.contact-top ul{ margin-bottom:30px;}
.ph-n li a{ color:#FFFFFF;}
.textBox{ margin-bottom:15px;}

.contact-img{ display:none;}
.cl-5{ width:50%;}
  .pageTitle { margin:30px 0px 20px;} 
  .pageTitle h1{ font-size:20px; margin:0px 0px;}
  .grp-img{ margin-bottom:30px;}
	
	.menu-button {
    background: rgba(0, 0, 0, 0) url("../images/menu-btn.png") no-repeat scroll 0 0;
    cursor: pointer;
    float: right;
    height: 21px;
    position: relative;
    width: 38px;
    z-index: 1000;
}
#cssmenu > ul > li{ margin-left:0px;}
#cssmenu > ul > li a{ padding:8px!important;}
#cssmenu > ul > li{ padding:0px!important;}
#cssmenu > ul > li a.active{ border:none;}

#cssmenu #menu-button{ top:-4px;}
#cssmenu ul{ margin-top:38px;}

#cssmenu > ul ul{ margin-top:0px;}
#cssmenu ul ul li a{ font-size:12px; text-transform:capitalize;}

#cssmenu{ top:5px;}
#cssmenu #menu-button{ background:none;}



#cssmenu #menu-button::before{ background:#ff000a;}

#cssmenu #menu-button::after{ border-top:2px solid #ff000a; border-bottom:2px solid #ff000a;}

#cssmenu ul{ margin-top:35px!important; }
#cssmenu ul ul{ margin-top:0px!important;background:#a7bf23;}
#cssmenu ul{ padding:0px; border-bottom-right-radius:2px; border-bottom-left-radius:2px;}

#cssmenu ul{ background:#404040;}
		#cssmenu li a{ border-top:1px solid #373636!important;}

	#cssmenu li ul   a{ border-bottom:1px solid #373636!important; border-top:none!important;}

    #cssmenu > ul > li a {
        font-size: 14px;
        padding: 12px !important;
    }

#cssmenu .submenu-button{ width:50px; height:50px;}

.fix-height{}
#cssmenu > ul > li:first-child {  background:none!important;}

#cssmenu > ul > li a.active{ border-left:5px solid #f039a7; color:#f039a7!important;}
#cssmenu > ul > li a{ padding-left:18px!important;}
#cssmenu > ul  ul li a{ padding-left:35px!important; position:relative;}

#cssmenu > ul  ul li a:before{ content:'\f105'; font-family:FontAwesome; position:absolute; left:25px; color:#FFF;}

#cssmenu ul{ margin-top:39px!important;}
#cssmenu ul{  width:102%;}
#cssmenu ul ul li{ border-bottom:none;}

#cssmenu ul ul li{ line-height:22px;}

#cssmenu{ margin-top:2px!important;}
#cssmenu > ul > li{ font-size:12px!important;}
#cssmenu ul ul{ padding-top:0px!important;}
#cssmenu > ul > li a.active{ border-left:0px;}
#cssmenu > ul > li a.active{color:#b5b5b5!important;}


#cssmenu > ul > li a:hover{color:#930033;}


#cssmenu{ z-index:1;}

.menu-button{ margin-top:0px!important;}
#cssmenu{ padding:10px 0px!important;}

 #cssmenu{ top:30px;}
 
 .carousel-indicators{ z-index:-1;}
 
 
 .logo{ }
 .top-contact{padding:8px; padding-left:40px; margin-top:7px;}
 .top-contact::before{ left:8px; background:url(../images/ph.png); width:20px; height:20px; background-size:100%;}
 .right-al{ float:left!important;}
 
 .top-contact{ font-size:13px; color:#000000; background:none;}
 
#cssmenu{ top:3px;} 
 
 .carousel-caption h1{ font-size:12px;}
 .carousel-caption h2{ font-size:16px; margin-bottom:10px;}
 .carousel-caption a{ padding:8px; font-size:11px;}
 .carousel-caption{ bottom:30px;}
 #intro{ padding:50px 0px 30px;}
 .intro-boder-box{ margin-bottom:20px;}
 .home-about-2{ background:#fff;}
 
 
 
 
 body{ overflow-x:hidden}
 .section-title h2 b { font-size:65px;}
.section-title h2 span {
    font-size: 25px;
}

.home-video h3 {
    font-size: 27px;
    line-height: 25px;
}


.play-btn {
    width: 70px;
    height: 70px;}
	
	
.sliderC h3 {
    font-size: 60px;}
	
	
	.about-us h2 {
    font-size: 34px;}
		
	.about-us h3 {
    font-size: 31px;}
	
	
	
    .logo {
        width: 44px; margin-top:5px;
    }	
	
.sliderC h1{ margin-bottom:0px;}	
.sliderC h2 { line-height:normal;}
	
.sliderC h3 { font-size:14px; letter-spacing:0px;}
.sliderC .carousel-caption { top:25%;}
.sliderC  a{ display:none;}
	.about_us{ padding:40px 0px;}
	
.about-img-out {
    position: relative;
    padding-left: 20px; margin-bottom:90px;
}	
	
	.about-us-image{ background:none; padding:0px;}
	.about_us h2 { font-size:27px;}

	.clients-s{ padding-bottom:0px;}
	
	.hom-about{ padding:40px 0px;}


.bottom-img, .about-top-img { display:none;}	
.about-img-sec{ padding:0px; background:none;}
.abt-middl-img{ background:none; padding:0px ;}
.home-right{ margin:30px 0px 0px 0px;}

.home-right h3{ font-size:25px;}
.hom-about h3 span {
    font-size:35px;}
.hom-about p {
    font-size: 15px;
    line-height: 25px;
}

    #intro2 {
        background-size: 400% }
.middle-bg h2 {
    font-size: 24px;}
.middle-bg h3 {
    font-size: 25px;}
	
	
	.middle-bg h3 b {
    font-size: 35px;}
	
	
	#intro1{ padding:40px 0px;}
	
.expert h2{ font-size:42px;}	
	
	.expert h3 {
    font-size: 22px;
    font-weight: 500;
    margin: 0px 0px 10px;
    margin-bottom: 20px;
}


.export-right { margin:30px 0px 0px;
}
	.projects { padding:40px 0px;}
	.project-txt {
    width: 100%;
}
	.process h3 { font-size:25px;}
.process-bx{ margin-bottom:45px;}

.testi-inner{ padding-left:0px;}

.testi-left-img{ width:100%;    max-width: 100%;}

    .testi-inner {
        padding-left: 0px;
        margin-top: 236px;
    }
	
	
.process {
    padding: 40px 0px;
    text-align: center;}
	
	.qoue-ic{ display:none;}
	
	
	.video-bg{ padding:80px 0px;}
	
.video-bg h2 {
    font-size: 22px;
}	
	
	.video-bg h3 {
    font-size: 28px;
}	
.green-strip{ padding:60px 0px;}

.green-strip h3{ font-size:18px;}

footer h3{ margin-top:30px;}	


.page-title h1 {
    font-size: 18px;}
	
.inner-page  .about_us {
        padding: 00px 0px;
    }


.cloents-image{ overflow:hidden;}
.cloents-image img{ width:100%;}
.address-C{ background:#075e19;}
.cts11{ margin-top:30px;}
.footer-formC h2{ font-size:17px;}
.formH{ width:95%; padding:20px;}


.sliderC h2{margin: 0px auto;
  font-size: 13px;
  text-align: ;
  letter-spacing: 2px;
}
.what-we-do h2{ font-size:15px;}
.what-we-do h2 b {
  font-size: 27px;
}

.about-sec h2 {
  text-transform: uppercase;
  color: #9ccb49;
  font-size: 25px;}
  
  .abt-bottom{ display:none;}
  
.home-serviceC { padding:50px 0px;}

.home-serviceC h2 {
  margin: 0px 0px 50px;
  font-size: 29px;}
  
  
  .h-service{ margin-bottom:35px;}
    .hom-about p {
    font-size: 13px;
    line-height: 25px;
  }
  
  
  
   #intro2 {
    background-size: 509%;
  } 
  
  
    .testi-inner {
    padding-left: 0px;
    margin-top: 304px;
  }
  
  .abt-border-bx{ display:none;}
  .about-img-out {
    position: relative;
    padding-left: 20px;
    margin-bottom: 0;
  }
  
  .about-right {
  position: relative;
  padding: 0px;
}


.grid {
 
  padding: 0px;
}


.sliderC h2{ padding:3px;}
.sliderC h4 {
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 50px;
}


.sliderC h3 {
  margin-top: 12px;
}
  .sliderC h3 {
    font-size: 15px;
  }

.cap-inner .more-btn  { display:none!important;}

.slider-content .layer-1 {
  margin-left: 0%;
  margin-top: 9%;
}

.about-sec{ padding:30px 0px;}
.about-left {
  margin-top: 0px;
}


 .about-right {
    position: relative;
    padding: 0px;
    margin-top: 53px;
  }
  
  .img-2-inner{ display:none}
  
  
  .about-rt-img {
  float: right;
  width: 95%;
  border: 20px solid rgba(255, 255, 255, 0.5);
}
  
    .hom-about h3 span {
    font-size: 27px;
  }
  .middle-bg h3 b {
    font-size: 25px;
    letter-spacing: 0;
  }

#intro2{ padding:40px 0px;}

.process h3 {
    font-size: 17px;
  }



}