@charset 'UTF-8';

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

/*Sliding Text and Icon Menu Style*/
.sti-menu{
    width:100%;
    position:relative;
    margin:75px auto 75px auto;
    list-style: none;
}
.sti-menu li{
    float:left;
    
    height:300px;
    text-align: center;
}
.sti-menu li a{
    display:block;
    overflow:hidden;
    background:#f8f8f8;
    text-align:center;
    height:100%;
    font-weight: normal;
    position:relative;
    -moz-box-shadow:1px 1px 2px #ddd;
    -webkit-box-shadow:1px 1px 2px #ddd;
    -o-box-shadow:1px 1px 2px #ddd;
    -ms-box-shadow:1px 1px 2px #ddd;
    box-shadow:1px 1px 2px #ddd;
    padding: 0 10px;
}
.sti-menu li a h2{
    color:#000;
    font-family: 'Lovelo Black'; 
    letter-spacing: 10px;
    text-align: center;
    text-transform:uppercase;
    position:absolute;
    width: 100%;
    color: #5181BE !important;
    top:125px;
    left:0px;
    text-shadow: 0px 1px 1px #5181BE;
}
.sti-menu li a h3{
    font-family: 'roboto'; 
    font-size:16px;
    font-weight: 300;
    color: #111;
    position:absolute;
    top:180px;
    line-height: 21px;
    left:0px;
    width: 92%;
    padding:0px 4%; 
    text-align: center;
    color: #666666 !important;


}
.sti-icon{text-decoration: none !important;}
.sti-icon{
    width:100%;
    height:100px;
    font-family: 'icomoon';
    font-size: 75px;
    position:absolute;
    background-position:top center;
    background-repeat:no-repeat;
    background-color:transparent;
    text-align: center;
    color: #5181BE;
    left:0px;
    top:40px;
    text-decoration: none !important;
}
.sti-icon-analyze:before{
    content: "\e07b";
}
.sti-icon-design:before{
    content: "\e0c7";
}
.sti-icon-develop:before{
    content: "\e0a4";
}
.sti-icon-deploy:before{
    content: "\e0aa";
}
/*stimenu css ends here*/



/*nav_style css starts*/

.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}



a, li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.link{ color:#00F !important; font-size:12px; line-height:30px; height:30px;}


.blue_text{color:#5181be !important;}

.nav{ width:502px; float:right;}
.nav ul {

    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-weight: 400;
}

.nav li span {
    display: block;
}

.nav a {
    display: block;
    color: rgba(249, 249, 249, .9);
    text-decoration: none;
    -webkit-transition: color .5s, background .5s, height .5s;
    -moz-transition: color .5s, background .5s, height .5s;
    -o-transition: color .5s, background .5s, height .5s;
    -ms-transition: color .5s, background .5s, height .5s;
    transition: color .5s, background .5s, height .5s;
}

.nav i{
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

}



a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}



.no-touch .nav ul:hover a {
    color: rgba(249, 249, 249, .5);
}

.no-touch .nav ul:hover a:hover {
    color: rgba(249, 249, 249, 0.99);
}




@media (min-width: 50em) {


    .nav li {
        float: left;
        text-align: center;
        -webkit-transition: border .5s;
        -moz-transition: border .5s;
        -o-transition: border .5s;
        -ms-transition: border .5s;
        transition: border .5s;
        margin-left:20px;
        padding:29px 0px;
    }

    .nav a {
        display: block;
        width: auto;
    }


    
    .icon {
        padding-top: 1.4em;
    }

    .icon + span {
        margin-top: 2.1em;
        -webkit-transition: margin .5s;
        -moz-transition: margin .5s;
        -o-transition: margin .5s;
        -ms-transition: margin .5s;
        transition: margin .5s;
    }

    /* Animating the height of the element*/
    .nav a {
        
    }

    .no-touch .nav a:hover ,
    .nav a:active ,
    .nav a:focus {
        
    }   

    /* Making the text follow the height animation */
    .no-touch .nav a:hover .icon + span {
        margin-top: 3.2em;
        -webkit-transition: margin .5s;
        -moz-transition: margin .5s;
        -o-transition: margin .5s;
        -ms-transition: margin .5s;
        transition: margin .5s;
    }

    /* Positioning the icons and preparing for the animation*/
    .nav i {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        padding: 0.4em;
        width: auto !important;
        height: auto !important;
        border-radius: 50%;
        font-size: 1.8em;
        box-shadow: 0 0 0 30px transparent;
        background: rgba(255,255,255,0.1);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: box-shadow .6s ease-in-out;
        -moz-transition: box-shadow .6s ease-in-out;
        -o-transition: box-shadow .6s ease-in-out;
        -ms-transition: box-shadow .6s ease-in-out;
        transition: box-shadow .6s ease-in-out;
    }   
    
    /* Animate the box-shadow to create the effect */
    .no-touch .nav a:hover i,
    .no-touch .nav a:active i,
    .no-touch .nav a:focus i {      
        box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
        -webkit-transition: box-shadow .4s ease-in-out;
        -moz-transition: box-shadow .4s ease-in-out;
        -o-transition: box-shadow .4s ease-in-out;
        -ms-transition: box-shadow .4s ease-in-out;
        transition: box-shadow .4s ease-in-out;
    }
        
}

@media (min-width: 50em) and (max-width: 61.250em) {

    /* Size and font adjustments to make it fit into the screen
    .nav ul {
        font-size: 1.2em;
    }*/

}

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {      
    
    /* Instead of adding a border, we transition the background color */
    .no-touch .nav ul li:nth-child(6n+1) a:hover,
    .no-touch .nav ul li:nth-child(6n+1) a:active,
    .no-touch .nav ul li:nth-child(6n+1) a:focus {
        background: #b39ba9;
    }

    .no-touch .nav li:nth-child(6n+2) a:hover,
    .no-touch .nav li:nth-child(6n+2) a:active,
    .no-touch .nav li:nth-child(6n+2) a:focus {
        background: #a38697;
    }

    .no-touch .nav li:nth-child(6n+3) a:hover,
    .no-touch .nav li:nth-child(6n+3) a:active,
    .no-touch .nav li:nth-child(6n+3) a:focus {
        background: #947086;
    }

    .no-touch .nav li:nth-child(6n+4) a:hover,
    .no-touch .nav li:nth-child(6n+4) a:active,
    .no-touch .nav li:nth-child(6n+4) a:focus {
        background: #855d74;
    }

    .no-touch .nav li:nth-child(6n+5) a:hover,
    .no-touch .nav li:nth-child(6n+5) a:active,
    .no-touch .nav li:nth-child(6n+5) a:focus {
        background: #744862;
    }

    .no-touch .nav li:nth-child(6n+6) a:hover,
    .no-touch .nav li:nth-child(6n+6) a:active,
    .no-touch .nav li:nth-child(6n+6) a:focus {
        background: #673653;
    }

    .nav ul li {
        -webkit-transition: background 0.5s;
        -moz-transition: background 0.5s;
        -o-transition: background 0.5s;
        -ms-transition: background 0.5s;
        transition: background 0.5s;
    }   

}

/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {
    
    /* Creating the 2 column layout using floating elements once again */
    .nav li {
        display: block;
        float: left;
        width: 50%;
    }
    
    /* Adding some padding to make the elements look nicer*/
    .nav a {
        padding: 0.8em;     
    }

    /* Displaying the icons on the left, and the text on the right side using inlin-block*/
    .nav li span, 
    .nav li span.icon {
        display: inline-block;
    }

    .nav li span.icon {
        width: 50%;
    }

    .nav li .icon + span {
        font-size: 1em;
    }

    .icon + span {
        position: relative;
        top: -0.2em;
    }

    /* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
    .nav li i {
        display: inline-block;
        padding: 8% 9%;
        border: 4px solid transparent;
        border-radius: 50%;
        font-size: 1.5em;
        background: rgba(255,255,255,0.1);
        -webkit-transition: border .5s;
        -moz-transition: border .5s;
        -o-transition: border .5s;
        -ms-transition: border .5s;
        transition: border .5s;
    }

    /* Transition effect on the border color */
    .no-touch .nav li:hover i,
    .no-touch .nav li:active i,
    .no-touch .nav li:focus i {
        border: 4px solid rgba(255,255,255,0.1);
    }
    
}

/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
    
    .nav li span.icon {
        width: 50%;
    }

    .nav li .icon + span {
        font-size: 0.9em;
    }
}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
    display: none;  
    width: 100%;
    padding: 0.5em 0.5em 0.8em;
    font-weight: normal;
    text-align: left;
    color: rgb(7, 16, 15);
    font-size: 1.2em;
    background: none;   
    border: none;
    border-bottom: 4px solid rgb(221, 221, 221);
    cursor: pointer;
}

.icon-menu {
    position: relative;
    top: 3px;
    line-height: 0;
    font-size: 1.6em;
}

@media (max-width: 32.438em) {

    /* Unhiding the styled menu link */
    .nav .navtoogle{
        margin: 0;
        display: block;
    }
    
    /* Animating the height of the navigation when the button is clicked */
    
    /* When JavaScript is disabled, we hide the menu */
    .no-js .nav ul {
        max-height: 30em;
        overflow: hidden;
    }
    
    /* When JavaScript is enabled, we hide the menu */
    .js .nav ul {
        max-height: 0em;
        overflow: hidden;
    }
    
    /* Displaying the menu when the user has clicked on the button*/
    .js .nav .active + ul {     
        max-height: 30em;
        overflow: hidden;
        -webkit-transition: max-height .4s;
        -moz-transition: max-height .4s;
        -o-transition: max-height .4s;
        -ms-transition: max-height .4s;
        transition: max-height .4s;
    }

    /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
    
    .nav li span {
        display: inline-block;
        height: 100%;
    }

    .nav a {
        padding: 0.5em;     
    }
    
    .icon + span {
        margin-left: 1em;
        font-size: 0.8em;
    }
    
    /* Adding a left border of 8 px with a different color for each menu item*/
    .nav li:nth-child(6n+1) {
        border-left: 8px solid #b39ba9;
    }

    .nav li:nth-child(6n+2) {
        border-left: 8px solid #a38697;
    }

    .nav li:nth-child(6n+3) {
        border-left: 8px solid #947086;
    }

    .nav li:nth-child(6n+4) {
        border-left: 8px solid #855d74;
    }

    .nav li:nth-child(6n+5) {
        border-left: 8px solid #744862;
    }

    .nav li:nth-child(6n+6) {
        border-left: 8px solid #673653;
    }

    /* make the nav bigger on touch screens */
    .touch .nav a {
        padding: 0.8em;
    }
}

/*nav_style css ends*/


@media (max-width: 2000px) {

    .img1{ background:url(../img/bg1.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5); background-size:100%;}
    .img2{background:url(../img/bg2.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img3{background:url(../img/bg3.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img4{background:url(../img/bg4.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}

}

@media (max-width: 1600px) {

    .img1{ background:url(../img/bg1.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5); background-size:100%;}
    .img2{background:url(../img/bg2.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img3{background:url(../img/bg3.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img4{background:url(../img/bg4.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}

    .span_act {
        clear: both;
        display: block;
        margin: 0;
        position: absolute;
        text-align: center;
        top: 642px !important;
        width: 100%;
    }
}

@media (min-width: 1200px) {

    /*.team ul{width:900px; margin: 0 auto;}*/
    .team ul{width:100%; margin: 0 auto;}

}

@media (max-width: 1200px) {

    .team ul{ margin: 0 auto;}

    .img1{ background:url(../img/bg1.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5); background-size:100%;}
    .img2{background:url(../img/bg2.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img3{background:url(../img/bg3.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img4{background:url(../img/bg4.jpg) no-repeat center 0px ;  background-color:(255,255,255, 0.5);  background-size:100%;}

    .span_act {
        clear: both;
        display: block;
        margin: 0;
        position: absolute;
        text-align: center;
        top: 510px !important;
        width: 100%;
    }
}

.lsf {
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    -o-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}
.lsf-icon:before {
    content:attr(title);
    margin-right:0.3em;
    font-size:130%;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    -o-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}







body {
    font-size: 16px;
    font-family: 'Oswald', sans-serif;


}



header, nav, section, article, aside, footer {
    display:block;
}

p a{ font-size:14px; line-height:21px; outline: none !important;}
h1, h2, h3,h4, h5, h6{ font-weight:300;}
input {

    box-shadow: none !important;
    border-radius: 0!important;

}
.clear{clear:both;}
.button-white{background: none; color: #FFF; padding: 12px 12px; border: #FFF solid 2px; text-transform: uppercase;  font-size: 20px; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; cursor:pointer;}
.button-white:hover{color: #FFF; text-decoration: none; background: #5181be;}
.button{color: #5181be; padding: 12px 12px; border: #5181be solid 2px; text-transform: uppercase;  font-size: 20px; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out;}
.button:hover, .button.active{color: #FFF; text-decoration: none; background: #5181be;}
.body-overlay{background:rgba(255,255,255,.9); position: fixed; width: 100%; height: 100%; z-index: -1;}

#splash-intro h2{ text-transform:uppercase; font-size:80px;}

.top_float{width:100%; background:#5181be;}
header{ height: auto;  position: relative;    z-index: 99999;}
header .menu-holder{ width:1170px; margin:0 auto; z-index: 995;}

.sticky-nav{padding: 0px 0px; position: fixed; z-index: 996; height:78px; background-color:#fff; width: 100%; top: -1px; left: 0px; display: none; box-shadow: 1px 1px 5px #999999;}
.logo-holder{width: auto; height: 40px; float: left; line-height:78px;}

.logo-holder a img{ opacity:1;}

.sticky-menu{width: auto; min-width: 10px; float: right; text-align: right; padding-top: 10px;}
.sticky-menu li{ float: left;  margin-right: 20px;  padding: 20px 0;  text-transform: uppercase; list-style:none;}
.sticky-menu li a{ color: #FFFFFF; }
.sticky-menu li:last-child{margin-right: 0px;}
.sticky-menu li a{color: #B4B4B4; text-transform: uppercase;  font-weight: 400; font-size: 16px; text-decoration: none !important;}
.sticky-menu li a:hover, .sticky-menu li a.active{color: #5181be; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; }
nav li a{ text-transform: uppercase;}




@media screen and (max-width: 950px){
    header{min-height: 10px;}
    .non-sticky-menu{display: none !important;}
    .sticky-nav{display: block !important;}
    header{ background:none !important;}


    .img1{ background:url(../img/bg1.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5); background-size:100%;}
    .img2{background:url(../img/bg2.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img3{background:url(../img/bg3.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img4{background:url(../img/bg4.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}

    .span_act {
        clear: both;
        display: block;
        margin: 0;
        position: absolute;
        text-align: center;
        top: 460px !important ;
        width: 32% !important;
        right: 0px !important;
    }

    div.slideshow .slid span {
        background: none repeat scroll 0 0 #5181BE;
        display: inline-block;
        height: 12px;
        width: 20px !important;
    }
    div.slideshow .slid span.active  {
        background: none repeat scroll 0 0 #fff;
        display: inline-block;
        height: 12px;
        width: 20px !important ;
    }

}

/* styles for desktop */
.tinynav { display: none; margin-right:10px;}

/* styles for mobile */
@media (max-width: 782px) {
    .tinynav { display: block; float:right; }
    #sticky-menu{ display: none }
    .non-sticky-menu{display: none !important;}
    header{ background:none !important;}
    .map-wrap .contact-email, .map-wrap .contact-number {
        background: none repeat scroll 0 0 rgba(81, 129, 190, 0.8);
        color: #FFFFFF;
        font-size: 25px !important;
        left: 5% !important;
        padding: 10px;
        position: absolute;
        z-index: 1;

    }

    .img1{ background:url(../img/bg1.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5); background-size:100%;}
    .img2{background:url(../img/bg2.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img3{background:url(../img/bg3.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}
    .img4{background:url(../img/bg4.jpg) no-repeat center 78px ;  background-color:(255,255,255, 0.5);  background-size:100%;}


}
@media (max-width: 550px) {
    .tinynav { width:80px; }
    .non-sticky-menu{display: none !important;}
    header{ background:none !important;}

}






.page-section{min-height: 800px; height: auto; padding-top: 20px;}
.page-heading{text-align: center;}
.section-heading{ color: #5181be;    font-size: 80px; text-align: center; font-weight:normal; text-transform: uppercase; letter-spacing: 0px; margin-top: 25px; }
.page-heading .section-heading{margin-top: 53px;display: inline-block; padding: 10px 10px; border: #5181be solid 1px;}
.page-heading .section-heading span{ color: #FFF; background: #5181be; padding: 0px 20px;}
.sub-title
{
    margin-top: 10px;
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}
@media screen and (max-width: 615px){
    .section-heading{font-size: 50px; line-height: 50px;}
}
@media screen and (max-width: 425px){
    .section-heading{font-size: 40px; line-height: 55px;}
}

@media screen and (max-width: 350px){
    .section-heading{font-size: 30px; line-height: 30px;}
}

.promo-txt{margin-top: 20px; position: relative; margin-bottom: 27px;  padding-bottom: 13px; border-bottom: #333 solid 1px; text-align: center; }
.promo-txt p{ font-size: 30px; line-height: 37px; text-transform:uppercase; font-weight: 100; color: #333; padding: 0px 10px; font-family:Oswald-light !important; }

.promo-txt .bottom-arrow {
    background: url("../images/dow_arrow.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -16px;
    display: inline-block;
    height: 16px;
    left: 50%;
    position: absolute;
    width: 29px;
    z-index: 1;
}








/*---------------------
INTRO / HOME PAGE
-----------------------*/
/* #splash-intro{height: 778px; position: relative; color: #FFF;} */
.slider-overlay{background: rgba(0,0,0,.5); position: absolute; width: 100%; height: 100%; z-index: -1;}
.site-title{ font-size: 81px; font-weight: normal; line-height: 109px; color: #FFF; margin-top: 150px; /*text-align: center;*/ border-bottom: 2px solid #FFF;}
#splash-intro h2{margin-bottom: 25px; }

@media screen and (max-width: 785px){
    #splash-intro .span12{padding: 0px 20px;}
}

@media screen and (max-width: 655px){
    #splash-intro{height: 800px;}
}

@media screen and (max-width: 550px){
    .site-title{font-size: 80px; line-height: 87px;}
}

@media screen and (max-width: 450px){
    .site-title{font-size: 50px; line-height: 57px;}
    #splash-intro h2{font-size: 28px; margin-top:200px !important; }
    #splash-intro p { font-size:18px;} 
}


.statistics
{
    height: auto;
    padding-top: 60px;
    background: #5181be;
    padding-bottom: 60px;
    text-align: center;
    color: #FFF;

}
.statistics .section-heading{color: #FFF;}
.statistics .sub-title{margin-bottom: 30px; color: #a38697;}
.statistics .stat{margin-top: 40px; margin-bottom: 90px;}
.statistics .stat .stat-img
{   
    height: 120px;

}
.statistics .stat .stat-img img
{
    margin-top: 10px;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
}
.statistics .stat:hover > .stat-img > img{margin-top: 0px;}
.statistics .stat-number{ font-size: 48px; margin-top: 30px; margin-bottom: 25px;}
.statistics .stat-des{ font-size: 24px;}
@media screen and (max-width: 590px){
    .statistics{height: 350px; padding-top: 80px;}
    .statistics h1{letter-spacing: 1px; font-size: 30px;}
}

@media screen and (max-width: 370px){
    .statistics h1{letter-spacing: 1px; font-size: 26px;}
    .statistics .button-white{font-size: 16px;}
}



/*---------------------
ABOUT PAGE
-----------------------*/
.about-txt{ margin-top: 60px; font-family: 'roboto', sans-serif !important;  font-weight:300 !important; }
.people{padding-bottom: 80px;}
.hexagon img{
    max-height: 300px;
    margin-left: 0%;
}
.team{margin-top: 0px; margin-bottom: 46px;}
.team ul{
    padding: 0;
    text-align:center;
    position: relative;
    list-style: none;
    margin-top: 30px;
}

.team ul li{
    display: inline-block;
    position: relative;

    animation: thumbs 1.4s linear;
    -moz-animation: thumbs 1.4s linear; /* Firefox */
    -webkit-animation: thumbs 1.4s linear; /* Safari and Chrome */
    -o-animation: thumbs 1.4s linear; /* Opera */
}
@media (max-width: 1200px) {
    header .menu-holder{ width:auto !important; margin:0 auto; z-index: 995;}
    .clients-wrap .span22 {
        margin: 0 !important;
        text-align: center;
    }


/*.img1{ background:url(../images/slides/bg1.jpg) no-repeat top center;  }
.img2{background:url(../images/slides/bg2.jpg) no-repeat top center; }
.img3{background:url(../images/slides/bg3.jpg) no-repeat top center;  }
.img4{background:url(../images/slides/bg4.jpg) no-repeat top center; }*/


}
@media (min-width: 1200px) {
    .team ul li:nth-child(1){margin-left: 10px;}
    .team ul li:nth-child(4){margin-left: 0px;}
    .team ul li:nth-child(10){margin-left: 354px;}
    .team ul li{margin-bottom: -30px;}

/*  
.img1{ background:url(../images/slides/bg1.jpg) no-repeat top center;  display:block;  }
.img2{background:url(../images/slides/bg2.jpg) no-repeat top center;   display:block; }
.img3{background:url(../images/slides/bg3.jpg) no-repeat top center;  display:block;   }
.img4{background:url(../images/slides/bg4.jpg) no-repeat top center; display:block; }*/
}




.hexagon.staf1{
    background: url(../images/thumbs/prassna.jpg) no-repeat center center;
}
.hexagon.staf2{
    background: url(../images/thumbs/rahul.jpg) no-repeat center center;
}
.hexagon.staf3{
    background: url(../images/thumbs/rohit.jpg) no-repeat center center;
}
.hexagon.staf4{
    background: url(../images/thumbs/hari.jpg) no-repeat center center;
}
.hexagon.staf5{
    background: url(../images/thumbs/prashant.jpg) no-repeat center center;
}

.hexagon:hover{
    background-position: -40px center;
}

.hexagon .title{
    position: absolute;
    color: white;
    top: 60px;
    text-align: center;
    z-index: 40000;
    width: 216px;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 20px;
    text-transform: uppercase;

    letter-spacing: 2px;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
}

.hexagon .title i{padding-top: 5px; font-size: 14px;  letter-spacing: 0px; font-weight: 600;}

.hexagon.about .title{
    top: 115px;
}

.hexagon.contact:hover{
    background: #ebebeb;
}
.hexagon .title.contact{
    opacity: 1;
    filter: alpha(opacity=100);
    top: 95px;
}
.hexagon.contact:hover .title.contact{
    opacity: 0;
    filter: alpha(opacity=0);
    margin-left: 20px;
}

.hexagon.contact img{
    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;

}



.hexagon i{
    font-size: 13px;
    font-style: normal;
    font-weight: 100;
    display: block;
    line-height: 16px;
}

.hexagon:hover div{
    opacity: 1;
    filter: alpha(opacity=100);
}

.hexagon {
    background: Black;
    width: 216px;
    height: 250px;
    position: relative;
    float: left;
    text-align: center;
    overflow: hidden;
    margin: 10px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}

.hexagon:hover{
/*      border-radius:220px;
margin-bottom: 27px;
height: 216px;
*/  }

.hexagon .overlay{
    width: 216px;
    height: 250px;
    position: absolute;
    opacity: .15;
    filter: alpha(opacity=15);
    top: 0;
    left: 0;
    z-index: 99;
    background: #5181be;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.hexagon:hover .overlay{
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.hexagon span {
    position: absolute;
    display: block;
    transition: all 0.3s ease;
    border-left: 108px solid white;
    border-right: 108px solid white;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 200;
}



.hexagon .top {
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0;
    border-bottom: 65px solid transparent;
}
.hexagon .bottom{
    opacity: 1;
    filter: alpha(opacity=100);
    bottom: 0;
    border-top: 65px solid transparent;

}

.testimonial-wrap{padding-top: 60px; background: #5181be; padding-bottom: 85px;}
.testimonial-wrap .section-heading{color: #FFF;}
.testimonial-wrap .sub-title{margin-bottom: 30px; color: #a38697;}
.testimonial{text-align: center; color: #F8F8F8; margin-bottom: 60px;}
.testimonial .testimonial-txt{}
.testimonial .client-name
{
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 5px;
    color: #a38697;
    border-top: #a38697 solid 1px;
}

.testimonial .company{font-size: 15px; font-weight: 100; color: #a38697;}




/*---------------------
SERVICES PAGE
-----------------------*/

.clients-wrap{padding-top: 60px; background: #5181be; margin-top: 80px; padding-bottom: 145px;}
.clients-wrap .section-heading{color: #FFF;}
.clients-wrap .sub-title{margin-bottom: 30px; color: #a38697;}
@media screen and (max-width: 750px){
    .clients-wrap .span2{text-align: center;}
}

.clients-wrap .span22{text-align: center;}







/*---------------------
PORTFOLIO PAGE
-----------------------*/
#portfolio{}
.portfolio-filters{text-align: center; margin-top: 75px; margin-bottom: 30px;}

@media screen and (max-width: 590px){

    .portfolio-filters a{display: inline-block; margin-bottom: 5px;}
}

.scale-in{ 
    transform: none;
}
.scale-out{ 
    transform: scale(0);
}

#fancybox-overlay {
    background: #5181be !important;
}



/*---------------------
BLOG PAGE
-----------------------*/
#blog_grid{}
.blog-grid-wrap{margin-top: 60px; margin-bottom: 110px; height: auto; min-height: 20px; clear: both; overflow: hidden;}
.blog-item { width: 390px;  border: #FFF solid 2px;}
@media screen and (min-width: 1300px){
    .blog-item { width: 24.7%; margin-bottom: 0px;}
}
@media screen and (max-width: 380px){
    .blog-item { width: 250px; margin-bottom: 0px;}
}

.blog-item .blog-img-holder img{width: 100%;}
.blog-content-wrap{background: #5181be; color: #FFF; padding: 20px 20px; }
.blog-content-wrap h4{margin-top: 0px; padding-top: 0px;}
.blog-content-wrap h4 a
{
    margin-bottom: 5px;
    color: #FFF;
    letter-spacing: 1px;
    line-height: 22px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.blog-content-wrap h4 a:hover{text-shadow:0px 0px 5px #FFF; text-decoration: none;}
.blog-content-wrap .blog-date
{
    font-size: 15px;
    font-weight: 100;
    color: #a38697;
    border-bottom: #a38697 solid 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.blog-content-wrap .button-white 
{
    padding: 8px 12px;
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
}
.blog-content-wrap .button-white:hover
{color: #5181be ; background: #FFF;}

.social-wrap{padding-top: 60px; margin-top: 80px; padding-bottom: 145px; background:url(../images/slides/contact_bg.jpg) center center; background-size:100%;}
.social-wrap .section-heading{color: #FFF;}
.social-wrap .sub-title{margin-bottom: 30px; color: #efefef;}
@media screen and (max-width: 750px){
    .social-wrap .span2{text-align: center;}
}
.social-icons{text-align: center; margin-top: 35px; margin-bottom: 25px;}
.social-icon{text-decoration: none !important;}
.social-icon:before
{   
    font-size: 30px;
    color: #FFF;
    text-decoration: none !important;
    padding: 20px 25px;
    border: #FFF solid 2px;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    margin-right: 20px;
}
.social-icon:hover:before
{
    color: #5181be;
    background: #FFF;
    text-decoration: none;
}
.social-icons .social-icon:last-child{}
.social-icon-facebook{ 
    background:url("../images/testimonials/facebook_2.png") repeat scroll 0 0 #FFFFFF; width:124px; height:124px; margin:0px 10px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
}

.social-icon-facebook:hover
{ 
    background:url("../images/testimonials/facebook_1.png") repeat scroll 0 0 ; width:124px; height:124px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out; 
}

.social-icon-twitter
{ 
    background:url("../images/testimonials/twitter_1.png") repeat scroll 0 0 #FFFFFF; width:124px; height:124px; margin:0px 10px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
}

.social-icon-twitter:hover
{ 
    background:url("../images/testimonials/twitter_2.png") repeat scroll 0 0 ; width:124px; height:124px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
}

.social-icon-youtube
{ 
    background:url("../images/testimonials/youtube_1.png") repeat scroll 0 0 #FFFFFF; width:124px; height:124px; margin:0px 10px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
}

.social-icon-youtube:hover
{ 
    background:url("../images/testimonials/youtube_2.png") repeat scroll 0 0 ; width:124px; height:124px; display:inline-block; transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out; 
}

.social-icon-facebook:before
{ 

}
.social-icon-twitter:before
{

}
.social-icon-googleplus:before
{
    content: "\e165";
}
.social-icon-dribble:before
{
    content: "\e180";
}
.social-icon-pintrest:before
{
    content: "\e1a5";
}
.social-icon-linkedin:before
{
    content: "\e19e";
}
.newsletter
{
    height: 310px;
    padding-top: 130px;
    padding-bottom: 7px;
    background: url(../images/newsletter_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: #FFF;

}
.newsletter h1{letter-spacing: 10px;}
.newsletter p{margin-bottom: 30px;}
.newsletter .subcr-email
{
    border-radius:0px;
    color: #FFF;
    width: 30%;
    padding: 14px 12px 10px 12px; 
    border: #FFF solid 2px !important; 
    text-transform: uppercase; 
    font-size: 20px; 
    transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    background: none;
    margin-top: 10px;
    -webkit-box-shadow: 0px !important;
}

.newsletter .button-white{background: none;}
.newsletter .button-white:hover{background: #5181be;}
@-moz-document url-prefix(){
    .newsletter .button-white{padding: 9px 12px;}
}
.newsletter .subcr-email:focus{color: #FFF; background: #5181be;}
@media screen and (max-width: 590px){

    .newsletter h1{letter-spacing: 1px; font-size: 30px;}
}




.map-wrap{position: relative; width: 100%; height: 380px; margin-top: 58px;}
.map-wrap .contact-email, .map-wrap .contact-number{position: absolute; line-height:44px; left: 15%; background: rgba(81, 129, 190,.8); z-index: 1; color: #FFF; font-size: 36px; padding:0px;}
.map-wrap .contact-email{top: 150px;}
.map-wrap .contact-number{top: 195px;}
.map-overlay{background: rgba(81, 129, 190,.7); position: absolute; width: 100%; height: 400px; z-index: 1;}

.contact-form{margin-bottom: 80px; margin-top: 90px;}
#contactForm input, #contactForm textarea
{
    border-radius:0px;
    color: #5181be;
    padding: 14px 12px 10px 12px; 
    border: #5181be solid 2px !important; 

    font-size: 20px; 
    transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    background: none;
    margin-top: 10px;
    -webkit-box-shadow: 0px !important;

}

#contactForm .txt-input{height: 50px;}
#contactForm textarea{ height: 188px;resize:none;}
@-moz-document url-prefix(){
    #contactForm textarea{ height: 195px;resize:none;}
}
#contactForm .button:hover{background: #5181be; color: #FFF; text-shadow:0px;}



footer{width:100%; background:#5181be; padding-top:0px; color:#a38697; border-bottom:#efefef solid 1px;}
.foot-link{text-align:center; padding-bottom:50px;}
.foot-link .heading{color:#a38697; font-size: 20px; letter-spacing: 1px; }
.foot-link span{color:#a38697; text-transform:uppercase; font-size:12px; }
.foot-link span + .clear{margin-bottom: 20px;}
.foot-link a{color:#a38697; font-size:40px; text-decoration: none !important;}
.foot-link a:hover{color:#FFF; text-decoration:none;}

.credits{width:100%; background:#5181be; padding:25px 0px; color:#efefef; text-align:center; text-transform:uppercase; font-size:12px;}


.row{margin-left:0px;}
.da-link{ cursor:pointer;}

.video_div{ width:60%; margin:0 auto; height:80%;}

/*.video1 {
display: none;
height: 315px;
left: 50%;
margin-left: -280px;
margin-top: -170px;
position: absolute;
top: 50%;
width: 560px;
z-index: 9999;
}*/
.video1 {
    display: none;
    position: fixed;
    z-index: 99999999;
    top: 15%;
    right: 20%;
    width: 60% !important;
    height: 60% !important;
}
.overlay_popup{ display:none; position:fixed; background:#000; opacity:0.7; z-index:999999; top:0px; left:0px; right:0px; bottom:0px; width:100%;}
.close1{ font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; width:20px; position:absolute; top:-20px; right:-20px; height:20px; color:#fff; cursor:pointer;}
h4.cbp-ig-title.about-txt {
    display: none;
}
.av-container {
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    padding: 20px 0;
}
.av-content-description {
    font-family: 'roboto', sans-serif !important;
    font-weight: 300;
}
@media screen and (max-width: 768px){
    .av-container{flex-wrap: wrap; 
    }
}

/* new css */

.portfolio-menu {
    text-align: center;
    margin: 30px auto;
}
.portfolio-menu ul li {
    display: inline-block;
    margin: 0 5px;
    list-style: none;
    border:1px solid transparent;
    padding: 10px 15px;
    cursor: pointer;
    transition: all .5 ease;
    -webkit-transition: all .5 ease;
    -moz-transition: all .5 ease;
    -ms-transition: all .5 ease;
    -o-transition: all .5 ease;
    font-family: Oswald-light !important;
    font-weight: 600;
}

.portfolio-menu ul {
    padding:0;
}
.portfolio-menu ul li:hover {
    background: #fff;
    color: #5181be;
    border: 1px solid #5181be;
}

.portfolio-menu ul li.active {
    background: #fff;
    color: #5181be;
    border: 1px solid #5181be;
}
.topMenuIcon{
    position: fixed;
    top: 25px;
    right: 4%;
    z-index: 999;
    cursor: pointer;
}
.topLogo{
    position: fixed;
    top:25px;
    left:4%;
    z-index: 999;
    cursor: pointer;
}
.topMenuIcon .menuIconBar{
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
}
.topHeader .topMenuIcon .menuIconBar{
    background-color: #5181be;
}
.tinynav {
    position: absolute;
    top: 20px;
    width: 100%;
}    
.tinynav > a {
    float: right;
    height: 40px;
    width: 40px;
    margin-right:30px;
    cursor:pointer;
}
.tinynav > ul {
    background: #fff none repeat scroll 0 0;
    width: 100%;
    display:none;
    position:absolute;
    top:57px;
    right:0px;
}
.tinynav ul li {
    position:relative;
    border-bottom:1px solid #ccc;
    list-style:none;
    text-align:center; padding:0px;

}


.tinynav ul li a{ cursor:pointer; display:block; padding:10px 0px;}
.tinynav ul li a:hover{color:#5181be;}
.kmw-offc-adress {
    margin: 12px 0 0 0;
    display: flex;
    justify-content: space-around;
}
.kmw-offc-adress p {
    font-size: 24px;
}
.kmw-offc-adress span {
    font-weight: 600;
    margin-bottom: 8px;
    /* border: solid; */
    display: inline-block;
}
.change .bar1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
}
.topSlider .sliderCaption{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.topSlider .sliderCaption h2{
    color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 4.5vw;
    font-weight: normal;
    line-height: 5.3rem;
    text-transform: uppercase;
}
.topSlider .sliderCaption a.btn{
    border:2px solid #fff;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    color: #fff;
    font-size: 18px;
    box-shadow: none;
    background: transparent;
    text-transform: uppercase;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
}
.topSlider .sliderCaption a.btn:hover{
    background: #fff;
    color: #5181be;
}
.topSlider .owl-dots{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%);
}
.topSlider .slick-slide img {
    display: block;
    height: 90vh;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
}
.topSlider .slick-dots{
    bottom: 30px
}
.topSlider .slick-dots li{
    background: #5584bf;
    width: 200px;
    height: 9px;
}
.topSlider .slick-dots li.slick-active{
    background: #fff;
}
.topSlider .slick-dots li button{
    text-indent: -999px
}
.topSlider .owl-dots .owl-dot{
    width: 200px;
    height: 10px;
    background: white;
    margin: 0px 4px;
}
.topSlider .owl-dots .owl-dot:focus{
    outline: none
}
.topSlider .owl-dots .owl-dot.active{
    background: #5181be
}
header .topLogo{
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
}
header.fixed .sticky-nav{
    display: block!important;
    -webkit-animation: slide-down 1s;
            animation: slide-down 1s;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
}
header.fixed .topLogo,
header.topHeader .topLogo{
    opacity: 0;

}
header.fixed .topMenuIcon{
    display: none;
}
#video2{

}
.VideoContainer {
    background-color: rgba(0,0,0,.8);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
}
.VideoContainer button{
    position: absolute;
    z-index: 3;
    top: 14%;
    right: 9%;
    cursor: pointer;
    border: 0;
    background: 0 0;
}
.VideoContainer button:focus{
    outline: none
}
.video-container__content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    max-width: 90%;
    transform: translateX(-50%) translateY(-50%);
}
.video #myvid{
    height: 100%;
    width: 90%;
    margin: auto;
}
.video #myvid iframe,
.video #myvid2 iframe{
    height: 60vh;
}
.topSlider .owl-carousel .owl-item img{
    height: 95vh;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
}
.brandLogos{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 15px;
}
.brandLogos .bLogo {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 50px;
}
.brandLogos .bLogo a{
    cursor: default
}
.brandLogos .bLogo a img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
}
.brandLogos .bLogo:hover a img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
#clients{
    padding-bottom: 100px
}
#clients .page-heading{
    margin-left: 0px;
}
.bannerCont{
    position: relative
}
.cbp-rfgrid li div div h4 {
    color: #fff;
    position: absolute;
    top: 2%;
    left: 5%;

}
#youtubeSan,
#youtubeSos,
#youtube3{
    height: 600px!important
}
@-webkit-keyframes slide-down{
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slide-down{
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

/*style 2 css starts*/
.da-slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0px;
    display:block;
    padding:0px;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}
.da-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family:  'Oswald',sans-serif;
    text-align: left;
    
}





.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position:relative;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{

    opacity: 1;
}
.da-slider-fb .da-slide .da-img{
    opacity: 1;
}
.da-slide h2{
    border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 81px;
    font-weight: normal;
    line-height: 120%;
    margin-top: 15%;
    font-family: 'Oswald',sans-serif;

}
.da-slide p{
    margin-bottom:25px;
    color: #fff;
    font-size: 24px;
    line-height: 26px;
    overflow: hidden;
    text-transform:uppercase;
    font-family:  'Oswald',sans-serif;
    font-weight: 400;

}
.da-slide .da-img{
    text-align: center;
    width: 30%;
    top: 70px;
    height: 256px;
    line-height: 320px;
    left: 110%; /*60%*/
}
.da-slide .da-link{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 20px;
    
    padding: 12px;
    text-transform: uppercase;
    transition: all 0.5s ease-out 0s;
}
.da-slide .da-link:hover{
    background:#5181BE;
    text-decoration:none;
}
.da-dots{
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    z-index: 999999;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-dots span{
    display: inline-block;
    position: relative;
    width: 225px;
    height: 12px;
    border-radius:0;
    background: #5181BE;
    margin: 3px;
    cursor: pointer;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
    content: '';
    width: 225px;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 0;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-arrows span{
    position: absolute;
    top: 50%;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #e4b42d;
    cursor: pointer;
    z-index: 2000;
    opacity: 0;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
    -webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
    -moz-transition: opacity 0.4s ease-in-out-out 0.2s;
    -o-transition: opacity 0.4s ease-in-out-out 0.2s;
    -ms-transition: opacity 0.4s ease-in-out-out 0.2s;
    transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
    opacity: 1;
}
.da-arrows span:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background: transparent url(../images/arrows.png) no-repeat top left;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
    background-position: top right;
}
.da-arrows span.da-arrows-prev{
    left: 15px;
}
.da-arrows span.da-arrows-next{
    right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
    left: 10%;
    opacity: 1;
    width:80%;
}
.da-slide-current .da-img{
    left: 60%;
    opacity: 1;
}
/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright h2{
    -webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
    -webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link{
    -webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
    -moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
    -o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
    -ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
    animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img{
    -webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
    -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link{
    -webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
    -moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
    -o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
    -ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
    animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img{
    -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

@keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
    -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
    -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link{
    -webkit-animation: toRightAnim3 0.4s ease-in-out both;
    -moz-animation: toRightAnim3 0.4s ease-in-out both;
    -o-animation: toRightAnim3 0.4s ease-in-out both;
    -ms-animation: toRightAnim3 0.4s ease-in-out both;
    animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img{
    -webkit-animation: toRightAnim4 0.6s ease-in-out both;
    -moz-animation: toRightAnim4 0.6s ease-in-out both;
    -o-animation: toRightAnim4 0.6s ease-in-out both;
    -ms-animation: toRightAnim4 0.6s ease-in-out both;
    animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
    0%{ left: 60%;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
    0%{ left: 60%;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
    0%{ left: 60%;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
    0%{ left: 60%;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
    0%{ left: 60%;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
    -webkit-animation: toLeftAnim1 0.6s ease-in-out both;
    -moz-animation: toLeftAnim1 0.6s ease-in-out both;
    -o-animation: toLeftAnim1 0.6s ease-in-out both;
    -ms-animation: toLeftAnim1 0.6s ease-in-out both;
    animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
    -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link{
    -webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
    -moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
    -o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
    -ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
    animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img{
    -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
    0%{ left: 60%;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
    0%{ left: 60%;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
    0%{ left: 60%;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
    0%{ left: 60%;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
    0%{ left: 60%;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

/*style 2 ends*/

/*demo.css starts*/



q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
section, header{
    display: block;
}
/* General Demo Style */
body{
    overflow-x:hidden;
    
}
a{
    color: #333;
    text-decoration: none;
}

.clr{
    clear: both;
}
.container > header{
    padding: 20px 30px 10px 30px;
    margin: 0px 20px 10px 20px;
    position: relative;
    display: block;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 35px;
    line-height: 35px;
    position: relative;
    font-weight: 400;
    color: #936975;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
    color: #b19099;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2{
    font-size: 16px;
    font-style: italic;
    color: #593741;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Header Style */
.codrops-top{
    line-height: 24px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    z-index: 9999;
    position: relative;
    box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
    padding: 0px 10px;
    letter-spacing: 1px;
    color: #333;
    text-shadow: 0px 1px 1px #fff;
    display: block;
    float: left;
}
.codrops-top a:hover{
    background: #fff;
}
.codrops-top span.right{
    float: right;
}
.codrops-top span.right a{
    float: left;
    display: block;
}

p.codrops-demos{
    text-align:center;
    display: block;
    padding: 14px;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
    border: 1px solid #b19099;
    padding: 4px 10px 3px;
    font-size: 13px;
    line-height: 18px;
    margin: 0px 3px;
    font-weight: 800;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #b19099;
    background: -moz-linear-gradient(top, #b19099 0%, #936975 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b19099), color-stop(100%,#936975));
    background: -webkit-linear-gradient(top, #b19099 0%,#936975 100%);
    background: -o-linear-gradient(top, #b19099 0%,#936975 100%);
    background: -ms-linear-gradient(top, #b19099 0%,#936975 100%);
    background: linear-gradient(top, #b19099 0%,#936975 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b19099', endColorstr='#936975',GradientType=0 );
}
p.codrops-demos a:hover{
    background: #b19099;
}
p.codrops-demos a:active{
    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    -moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    color: #443132;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}
#testSlide3 {
    display: inline-block;
    border: 1px solid #b19099;
    padding: 4px 10px 3px;
    margin: 0px 3px;
    color: #fff;
    background: #111;
}

.slide-img-sidimg{ position:absolute; display:block; right:0px; bottom:0px;}

/* Media Queries */
@media screen and (max-width: 767px) {
    .container > header{
        text-align: center;
    }
    p.codrops-demos {
        position: relative;
        top: auto;
        left: auto;
    }
    

    div.slideshow .slid h2 {border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 35px !important;
    font-weight: normal;
    line-height: 120%;
     width:80%; margin:20% auto 0 auto !important; text-transform:uppercase; }
    div.slideshow .slid p { color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 25px;
    overflow: hidden;
    text-transform: uppercase;  width:80%; margin:1% auto 0 auto;}
    
div.slideshow .slid {
  display: block;
  height: 510px !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
 }
 
 .span_act {
  clear: both;
  display: block;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 325px !important;
  width: 32% !important;
  right: 0px !important;
}

div.slideshow .slid span {
  background: none repeat scroll 0 0 #5181BE;
  display: inline-block;
  height: 12px;
  width: 15px !important;
}
div.slideshow .slid span.active  {
  background: none repeat scroll 0 0 #fff;
  display: inline-block;
  height: 12px;
  width: 15px !important;
}
#splash-intro {
  height: 360px !important;
}
    
}

@media screen and (max-width: 1199px) {

div.slideshow .slid h2 {border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 50px;
    font-weight: normal;
    line-height: 120%;
     width:80%; margin:20% auto 0 auto; text-transform:uppercase;}
    div.slideshow .slid p { color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 25px;
    overflow: hidden;
    text-transform: uppercase;  width:80%; margin:1% auto 0 auto;}
    
#splash-intro {
  height: 560px !important;
}


}
@media screen and (max-width: 479px) {
 div.slideshow .slid h2 {border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 30px !important;
    font-weight: normal;
    line-height: 120%;
     width:80%; margin:30% auto 0 auto !important; text-transform:uppercase; }
    div.slideshow .slid p { display:none; color: #FFFFFF;
    font-family: 'Oswald',sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 25px;
    overflow: hidden;
    text-transform: uppercase;  width:80%; margin:1% auto 0 auto;}
    
     .span_act {
  clear: both;
  display: block;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 225px !important;
  width: 32% !important;
  right: 0px !important;
}

#splash-intro {
  height: 200px !important;
}




    
}



@media (min-width: 320px) and (max-width: 359px) { 

.slide-img-sidimg{ width:100px; display:block; position:absolute; right:0px; bottom:252px;}
.slide-img-sidimg > img{ width:100%;}

}

@media (min-width: 360px) and (max-width: 479px) {


.slide-img-sidimg{ width:100px; display:block; position:absolute; right:0px; bottom:229px;}
.slide-img-sidimg > img{ width:100%;}

}

@media (min-width: 480px) and (max-width: 639px) {


.slide-img-sidimg{ width:150px; display:block; position:absolute; right:0px; bottom:162px;}
.slide-img-sidimg > img{ width:100%;}

}

@media (min-width: 640px) and (max-width: 767px) {


.slide-img-sidimg{ width:200px; display:block; position:absolute; right:0px; bottom:72px;}
.slide-img-sidimg > img{ width:100%;}

}

/*demo css ends here*/