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

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/OpenSansRegular.eot');
    src: url('../fonts/OpenSansRegular.eot') format('embedded-opentype'),
         url('../fonts/OpenSansRegular.woff2') format('woff2'),
         url('../fonts/OpenSansRegular.woff') format('woff'),
         url('../fonts/OpenSansRegular.ttf') format('truetype'),
         url('../fonts/OpenSansRegular.svg#OpenSansRegular') format('svg');
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSansLight.eot');
    src: url('../fonts/OpenSansLight.eot') format('embedded-opentype'),
         url('../fonts/OpenSansLight.woff2') format('woff2'),
         url('../fonts/OpenSansLight.woff') format('woff'),
         url('../fonts/OpenSansLight.ttf') format('truetype'),
         url('../fonts/OpenSansLight.svg#OpenSansLight') format('svg');
}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/OpenSansSemibold.eot');
    src: url('../fonts/OpenSansSemibold.eot') format('embedded-opentype'),
         url('../fonts/OpenSansSemibold.woff2') format('woff2'),
         url('../fonts/OpenSansSemibold.woff') format('woff'),
         url('../fonts/OpenSansSemibold.ttf') format('truetype'),
         url('../fonts/OpenSansSemibold.svg#OpenSansSemibold') format('svg');
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/open-sans.bold-webfont.eot');
    src: url('../fonts/open-sans.bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans.bold-webfont.woff2') format('woff2'),
         url('../fonts/open-sans.bold-webfont.woff') format('woff'),
         url('../fonts/open-sans.bold-webfont.ttf') format('truetype'),
         url('../fonts/open-sans.bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*           Font Smoothing      */






/*     General overwrite     */
body,
.wrapper {
    min-height: 100vh;
    position: relative;
	
	
}

body {
    background: rgba(203, 203, 210, 0.15);
}



a:focus, a:active,
button::-moz-focus-inner,
input::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    outline: 0;
}

.ui-slider-handle:focus,
.navbar-toggle,
input:focus {
    outline: 0 !important;
}

/*           Animations              */




.margin-top {
    margin-top: 50px;
}

.wrapper {
    position:relative;
    top: 0;
	height: 100vh;
	height:60.1em;
	width: -webkit-fill-available;
	width: -moz-available;
   
}

.sidebar {
    position:fixed;
    top: 0;
    bottom: 0;
    right:auto;
    left:0;
    width: 115px;
    display: block;
    z-index:2;
	background:#FFF;
    font-weight: 200;
    background-size: cover;
    background-position: center center;
	 box-shadow: 1px 2px 14px 5px #ccc;
}

.sidebar .sidebar-wrapper {
    position: relative;
    max-height: calc(100vh - 75px);
	 max-height: -moz-calc(100% - 75px);  
     max-height: -webkit-calc(100% - 75px); 
    min-height: 100%;
   
   
   
    z-index: 4;
	
   
}



.sidebar .logo {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar .logo {
    padding: 10px 15px;
	text-align:center;
	
   
}

/*--------------------------menu----------------------*/
     *,*:before,*:after {
	box-sizing: border-box;
}



  nav {
  
	position: relative;
	top: 20px;;
  left: 0;
	background: transparent;
}

nav ul {
	text-align: center;

}

nav ul li {
	position: relative;
		background-color:#F00;
   width:100%;
  cursor: pointer;
	
	text-transform: uppercase;
	transition:all .4s ease-out;
	-webkit-transition:all .4s ease-out;
}

nav ul li:after {
	
	position: absolute;
	background: #ffd300;
	color:black;
	top:0;
	left: 70px;
	width: 100%; height: 100%;
  opacity:0.5	;
  transform: perspective(400px) rotateY(90deg);
  -webkit-transform:perspective(400px) rotateY(90deg);
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	transition:all .4s ease-out;
	-webkit-transition:all .4s ease-out;
	 font-family: 'OpenSansRegular';
}


nav ul   .act1:nth-child(1):after { 
	content: "Home";
	line-height: 88px;
	
	
}
nav ul  .act2:nth-child(1):after{ 

	content: "We";
	line-height: 88px;
}
nav ul  .act3:nth-child(1):after { 
	content: "We Do";
	line-height: 88px;
}

nav ul .act4:nth-child(1):after { 
	content: "Work";
	line-height: 88px;
}
nav ul .act5:nth-child(1):after { 
	content: "Client";
	line-height: 88px;
}
nav ul  .act6:nth-child(1):after { 
	content: "Contact";
	line-height: 88px;
	
	
}

nav ul li:hover {
	transform: translateX(-70px);
	-webkit-transform:translateX(-70px);
}

nav ul li:hover:after {
  opacity: 1;
	transform: perspective(400px) rotateY(0deg) scale(1) ;
	-webkit-transform: perspective(400px) rotateY(0deg) scale(1) ;
}


nav ul li  {
	display: inline-block;
	padding: 30px 0;
	background: transparent;
}

nav ul li  { position: relative; }


#sidebarCollapse {
    width: 47px;
    height: 47px;
   
    cursor: pointer;
}

#sidebarCollapse span {
    
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
	-webkit-transition:all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
}

	
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
		-webkit-transform:none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
		
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
		
    }







/*--------------menu end-----------------------*/


.sidebar:after, .sidebar:before {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.sidebar:before {
   
    background:  #ffffff;
}

.sidebar:after {
    background: #ffffff;
   
        

    
}




.main-panel {
	   
    position: relative;
    z-index: 2;
    float: right;
	width:94%;
	 width: -webkit-calc(100% - 115px); 
	 width: -moz-calc(100% - 115px); 
    width: calc(100% - 115px);
	 
   
	
	background: -moz-linear-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%); /* ff3.6+ */
background: -webkit-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%); /* safari4+,chrome */
background: -webkit-linear-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%);/* opera 11.10+ */
background: -ms-linear-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%); /* ie10+ */
background: linear-gradient(115deg, rgba(52,182,209,1) 10%, rgba(255,211,0,1) 105%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#99DAFF',GradientType=1 ); /* ie6-9 */
	background-repeat:no-repeat;
	background-size:cover;
}

 .bg{background: none;}
.main-panel > .content {
    padding: 0px 0px;
    /*min-height: calc(100% - 123px);*/
}
footer{position:absolute;  bottom: 3%;}
.copyrt{ font-size: 11px; text-align:center; font-family: 'OpenSansRegular'; }
.social__icons{ text-align: center; padding: 12px 0px;}
.footer_logo{
text-align: center;
    padding: 17%;}

.socialicon {
	
	display: inline-block;
    width: 21px;
    
    height: 24px;
}
.socialicon-facebook {
	background:url(../img/facebook.png)  no-repeat;
}
.socialicon-twitter {
	background:url(../img/twitter.png) no-repeat;
}
.socialicon-youtube {
	background:url(../img/youtube.png)  no-repeat;
}

.socialicon-blog {
	background:url(../img/blogger.png)  no-repeat;
}
.socialicon-linkedin {
	background:url(../img/linkedin.png) no-repeat;
}
.socialicon-instagram{
	background:url(../img/instagram.png)  no-repeat;
}
.socialicon-pinterest {
	background:url(../img/pinterest.png) no-repeat;
}


.socialicon-facebook:hover {
	background:url(../img/facebook_hover.png)  no-repeat;
}
.socialicon-twitter:hover {
	background:url(../img/twitter_hover.png) no-repeat;
}
.socialicon-youtube:hover{
	background:url(../img/youtube_hover.png)  no-repeat;
}

.socialicon-blog:hover {
	background:url(../img/blogger_hover.png)  no-repeat;
}
.socialicon-linkedin:hover {
	background:url(../img/linkedin_hover.png) no-repeat;
}
.socialicon-instagram:hover{
	background:url(../img/instagram_hover.png)  no-repeat;
}
.socialicon-pinterest:hover {
	background:url(../img/pinterest_hover.png) no-repeat;
}






.sidebar,
.main-panel {
	
 max-height: 100%;
    height: 100%;
    -webkit-transition-property: top,bottom;
    transition-property: top,bottom;
    -webkit-transition-duration: .2s,.2s;
    transition-duration: .2s,.2s;
    -webkit-transition-timing-function: linear,linear;
    transition-timing-function: linear,linear;
    -webkit-overflow-scrolling: touch;
}

/*      Navbar with icons            */










.navbar-toggle.navbar-default .navbar-toggle:hover,
.navbar-toggle.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}




/*------------------------------ vertical bootstrap slider----------------------------*/


.carousel-inner,.carousel,.item,.fill {
  height:100%;
  width:100%;
  background-position:center center;
  background-size:cover;
  margin-top: 6%;
}
.navbar-toggle .icon-bar {
    background-color: #000;
}
.slide-wrapper{display:inline;}
.slide-wrapper {padding:0px;}

/*------------------------------ vertical bootstrap slider----------------------------*/

.carousel-inner> .item.next ,  .carousel-inner > .item.active.right{ transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0);
-moz-transform: translateX(0); -o-transform: translateX(0);  top: 0;left:0;}
.carousel-inner > .item.prev ,.carousel-inner > .item.active.left{ transform: translateX(0); -webkit-transform: translateX(0);  -moz-transform: translateX(0);
-ms-transform: translateX(0); -o-transform: translateX(0); top: 0; left:0;}
.carousel-inner > .item.next.left , .carousel-inner > .item.prev.right , .carousel-inner > .item.active{transform:translateX(0); -webkit-transform:translateX(0);
-ms-transform:translateX(0);-moz-transform:translateX(0); -o-transform:translateX(0); top:0; left:0;}

/*------------------------------- vertical carousel indicators ------------------------------*/
.carousel-indicators{
position:absolute;
top:50%;
bottom:0;
margin:auto;

right:10px; left:auto;
width:auto;
}
.carousel-indicators li{display:block; margin-bottom:5px; border:1px solid #FFF; }
.carousel-indicators li.active{margin-bottom:5px; background:#FFF;}
/*-------- Animation slider ------*/

.animated{
	animation-duration:3s;
	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	-ms-animation-duration:3s;
	-o-animation-duration:3s;
	visibility:visible;
	opacity:1;
	transition:all 0.3s ease;
}
.carousel-img{   
	 display: inline-block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
	}
.item img{margin:auto;visibility:hidden; opacity:0; transition:all 2.50s ease; -webkit-transition:all 2.50s ease; -moz-transition:all 2.50s ease; -ms-transition:all 2.50s ease; -o-transition:all 2.50s ease;}
.item1 .carousel-img img , .item1.active .carousel-img img{max-height:100%;}

/*.item1.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease;
animation-duration:2s; -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-delay:0.3s ; -webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;-ms-animation-delay:0.3s; }*/


.item .carousel-desc{color:#fff; }
.item  h2{ font-size:55px;     font-family: 'open_sansbold'; animation-delay:1.50s;animation-duration:2s; text-transform:uppercase;  }
.item  p{animation-delay:2.50s;animation-duration:2s; width:100%; margin:auto;  font-size:18px;     font-family:'OpenSansRegular';}

/*.item2 .carousel-img img , .item2.active .carousel-img img{max-height:100%;}
.item2.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 0.3s ease; animation-duration:3s; animation-delay:0.3s}
.item2 h2 , item2.active h2{visibility:hidden; opacity:0; transition:all 5s ease; font-size:90px;     font-family: 'open_sansbold'}
.item2.active h2.animated{visibility:visible; opacity:1;  animation-delay:3s;}*/

.item .fill{padding:0px 30px; display:table; }
.item .inner-content{display: table-cell;vertical-align: middle;}
.item3 .col-md-6{ display:inline-block; vertical-align:middle; width:49%;}

.item3.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 2.50s ease; animation-duration:1s; animation-delay:2.50s}
.item3 h2 , item3.active h2{visibility:hidden; opacity:0; transition:all 1s ease;      font-family: 'open_sansbold';  font-size:55px; margin-top:0%;}
.item.item3 .carousel-desc{text-align:left;  margin-left:15%; margin-top:5%;}
.item3.active h2.animated{visibility:visible; opacity:1;  animation-delay:0.9s}


.item3 p , item3.active p{visibility:hidden; opacity:0; transition:all 1s ease; width:100%; font-size:18px;    font-family:'OpenSansRegular'; }
.item3.active p.animated{visibility:visible; opacity:1;  animation-delay:1.50s;}



.carousel-control-prev{margin-left: 10%;}
.carousel-control-prev img:hover{ background-image:url(../img/prev1_hover.png); background-repeat:no-repeat;}

	.carousel-control-next img:hover{ background-image:url(../img/next1_hover.png);  background-repeat:no-repeat;}

@media(max-width:991px)
{
	
	.item .carousel-desc , .item.item3 .carousel-desc{text-align:left; margin-left:0%; margin-top:0%;}
	.item .carousel-img{padding-left:0;}
	.item .carousel-img img, .item.active .carousel-img img{max-height:100%; }
	.item  h2{ margin-top:0px; font-size:40px; }
	
	.item img {margin:0;}
	.item3 .col-md-6{width:100%; text-align:left; padding-left:55px; padding-top: 5%; padding-bottom:4%;}
	.item .carousel-desc p{font-size:16px; width:100%; margin:0; padding-top: 2%; }
	
}
@media(max-width:768px)
{
	
	.item .carousel-desc , .item.item3 .carousel-desc{text-align:left; margin-left:0%; margin-top:0%;}
	.item3 .col-md-6{width:100%; text-align:left; padding-left:55px; padding-top: 5%; padding-bottom:4%;}
.item .carousel-img img, .item.active .carousel-img img{max-height:100%; width:70%;}
.item  h2{ margin-top:0px;}
.item .carousel-desc p{font-size:18px; width:100%; margin:0; padding-top: 2%; opacity:0; }

.carousel-inner, .carousel, .item, .fill {margin-top:0;}
.carousel-control-prev img{     margin-top: 10%; }
	.carousel-control-next img{    margin-top: 10%;}
	.carousel-control-prev{margin-left: 100px;}


}
@media(max-width:480px)
{
	
	.item .carousel-desc , .item.item3 .carousel-desc{text-align:left; margin-left:0%; margin-top:0%;}
	.item3 .col-md-6{width:100%; text-align:left; padding-left:0px; padding-top: 7%; padding-bottom:4%;}
.item  h2{font-size:19px; margin-top:0px;}
.item .carousel-desc p{width:100%;  font-size:12px;}
.item .carousel-img img, .item.active .carousel-img img{ width:100%;}
.carousel-inner, .carousel, .item, .fill {margin-top:0;}
.carousel-control-prev img{width:10%;     margin-top: 12%; background-size:contain;}
	.carousel-control-next img{width:10%;     margin-top: 12%; background-size:contain;}
	.carousel-control-prev{margin-left: 10%;}

}


/*********************************** WE CSS Strat******************************************/

.head1{font-family: 'open_sansbold';
       line-height:80px; 
       text-align:left;
	   font-size:60px; 
       margin:0 auto;
           padding-top: 54px;
       padding-left: 7%;  	
	   
		background: -moz-linear-gradient(115deg, #34b6d1 10%, #ffd300 14%); /* ff3.6+ */
background: -webkit-gradient(115deg, #34b6d1 10%, #ffd300 14%); /* safari4+,chrome */
background:  -webkit-linear-gradient(15deg, #34B6D1 8%, #FFD300 12%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(115deg, #34b6d1 10%, #ffd300 14% );/* opera 11.10+ */
background: -ms-linear-gradient(115deg, #34b6d1 10%, #ffd300 14%); /* ie10+ */
background: linear-gradient(115deg, #34b6d1 10%, #ffd300 14%) ; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#99DAFF',GradientType=1 ); /* ie6-9 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
	
.line{ border-bottom: 2px solid #ffd400;height: 0;margin: 0 auto;width: 105px;}
.we_wrap{ padding-bottom:130px;     padding-left: 3%;}
.we_wrap h4 {
  font-size: 25px;
font-family:'OpenSansSemibold';
  font-weight:bold;
  text-transform: uppercase;
  line-height: 1.284;
  text-align: left;
  margin-top:2%;
  z-index: 3;
      padding: 0 60px;
	 
}
h4{ margin-top: 5%;}
.we_wrap p{
  font-size: 18px;
font-family: 'OpenSansRegular';
  
  line-height: 1.665;
  text-align: left;
  font-style:normal;
  z-index: 10;
    padding: 0 60px;
	 padding-right: 11%;
}
.we_wrap img{margin-top: 5%; margin-bottom: 5%;   padding: 0 60px;}


.scrollup{
			width: 53px;
    height: 46px;
    text-indent: -9999px;
    opacity: 1;
    position: fixed;
    bottom: 30px;
    right: 20px;
    cursor: pointer;
    display: none;
    background: url(../img/top_arrow.png) no-repeat;}
	
	.scrollup:hover{background:url(../img/top_hover.png) no-repeat; background-size:contain;}
	
	
	
	.thumbnails{ background:url(../img/top_arrow2.png) no-repeat; 
    
	width: 53px;
    height: 46px;
    text-indent: -9999px;
   opacity: 1;
    position: fixed;
   
    right: 21px;
    cursor: pointer;
    bottom: 9%;
   
	}
	.thumbnails:hover{ background:url(../img/top_arrow_h.png) no-repeat; background-size:contain;} 

	/*----------------wedo---------------------------------------*/
	.mobile{display:none;}
	.desktop{display:block;}
.head2{font-family: 'open_sansbold';
       line-height:80px; 
       text-align:left;
	   font-size:60px; 
       margin:0 auto;
           padding-top: 54px;
       padding-left: 7%;  	
	   
		background: -moz-linear-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* ff3.6+ */
background: -webkit-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* safari4+,chrome */
background: -webkit-linear-gradient(15deg, #34B6D1 8%, #FFD300 16%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(115deg, #34b6d1 11%, #ffd300 18% );/* opera 11.10+ */
background: -ms-linear-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* ie10+ */
background: linear-gradient(115deg, #34b6d1 11%, #ffd300 18%) ; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#99DAFF',GradientType=1 ); /* ie6-9 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.we_wrap h3 {
  font-size: 20px;
font-family:'OpenSansSemibold';
  font-weight:bold;
 
  line-height: 1.284;
  text-align: left;
  margin-top:2%;
  z-index: 3;
      padding: 0 60px;
	  color:#000;
	 
}
.wedo_wrap{ width:100%;  max-width:1350px; }
.feat_one{  margin-top: 5%;}
.feat_one_inner{width:100%; text-align:center;}	
.feat_one_inner1{width:15%; float:left; text-align:center;}	
.feat_one_inner2{width:18%; float:left; text-align:center; }	
	
.feat_one_inner2 h4{
font-size: 25px;
font-family:'OpenSansSemibold';
  font-weight:bold;
  text-transform: uppercase;
  line-height: 1.284;
  text-align: left;
      padding: 0% 0px;
  z-index: 3;
  margin-top:9%;
  }
 .feat_one_inner2 p{
  font-size: 18px;
font-family: 'OpenSansRegular';
padding:0%;

  }
  
.well1{min-height: 159px;
  
    background-color: #ffd300;
   
     border-radius: 0px; 
   padding: 42px 28%;
	margin-top:3%;
} 	
.well1 p{
  font-size: 35px;
font-family: 'OpenSansRegular';

text-align:left; }

/*-----------card animation------------------*/
.container-fluid{margin-top:2%;}
			
.card-container {
	  -webkit-perspective: 800px;
   -moz-perspective: 800px;
     -o-perspective: 800px;
        perspective: 800px;
        margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
	-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.card-container.static:hover .card,
.card-container.static.hover .card {
	-webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}
/* flip speed goes here */
.card {
	 -webkit-transition: -webkit-transform .5s;
   -moz-transition: -moz-transform .5s;
     -o-transition: -o-transform .5s;
        transition: transform .5s;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
	     position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
        backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	
   
}
.back {
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
        backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
		
	background: -moz-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ff3.6+ */
background: -webkit-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* safari4+,chrome */
background: -webkit-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* opera 11.10+ */
background: -ms-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ie10+ */
background: linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);

}

/* front pane, placed above back */
.front {
	
	border:1px solid #b7b7b7;
	 
	}

/* back, initially hidden pane */
.back {
		-webkit-transform: rotateY( 180deg );
   -moz-transform: rotateY( 180deg );
     -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
        z-index: 3;
}

.back .btn-simple{
    position: absolute;
    left: 116px;
    bottom: 8px;
}
/*        Style       */


.card{
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
}
.card-container, .front, .back {
	width: 316px;
	height: 372px;
	float: left;
    margin: 1% 1%;
	
	
}
.card .user{
    text-align: center;
    margin: 28px auto;
}


.card .content{
   
    box-shadow: none;
    padding: 0px 14px 20px;
}

.card .back .content .main {
    height: 215px;
}
.card1{padding: 0% 5%;
    width: 39.5%;
    float: left;}

.card1 h3
{
  font-size: 40px;
font-family:'OpenSansSemibold';
  font-weight:bold;
 
  line-height: 1.284;
  text-align: left;
  margin-top:2%;
  z-index: 3;
      
	  text-transform:uppercase;
	  text-align:left;
}
.card1 p
{
 font-family: 'OpenSansRegular'; 
font-size:20px;
 line-height: 30px;
 color:#000;
}
.card h5{
    margin: 0px 0;
	text-transform:uppercase;
    line-height: 25px;
	font-size: 20px;
font-family:'OpenSansSemibold';
text-align:center;
color:#000;

}
.card p{
	font-family: 'OpenSansRegular'; 
font-size:15px;
 line-height: 25px;
}

.card .footer .btn-simple{
    margin-top: 31px;
}
.card .footer .back .btn-simple {
    margin-top: 0px;
}
.card .header {
    padding: 15px 20px;
    height: 80px;
}





.btn-simple{
    
    color: #000;
   font-size: 20px;
font-family:'OpenSansSemibold';
	border:1px solid #b7b7b7;
	border-radius:unset;
	padding: 11px 16px;
}
	
.back a img:hover {
	
		-webkit-background: transparent;
    
 color: #FFF;
	 background: -moz-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ff3.6+ */
background: -webkit-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* safari4+,chrome */
background: -webkit-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* opera 11.10+ */
background: -ms-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ie10+ */
background: linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#99DAFF',GradientType=1 ); /* ie6-9 */
	
}






.btn-simple:hover {
	border:none;
		-webkit-background: transparent;
    
    color: #FFF;
	 background: -moz-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ff3.6+ */
background: -webkit-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* safari4+,chrome */
background: -webkit-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);/* opera 11.10+ */
background: -ms-linear-gradient(145deg, #34b6d1 19%, #ffd300 89%); /* ie10+ */
background: linear-gradient(145deg, #34b6d1 19%, #ffd300 89%);

}
/*--button animation---*/
/*@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);

}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}*/
/*--button animation---*/


.Wrapper_card{width:100%; height:auto; margin-top:2%;}
.inner_card{margin: 30px 0 30px 0;
    width: 100%;
    
    padding: 0;
    position: relative;}


/*       Fix bug for IE      */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .front, .back{
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .back {
        visibility: hidden;
        -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
    }
    .front{
        z-index: 4;
    }
    .card-container:not(.manual-flip):hover .back,
    .card-container.manual-flip.hover .back{
        z-index: 5;
        visibility: visible;
    }
}

.we_wrap1 h3 {
  font-size: 22px;
font-family:'OpenSansSemibold';
  font-weight:bold;
 
  line-height: 1.284;
  text-align: left;
  
  z-index: 3;
      padding: 0 60px;
	  color:#000;
	 
}
.we_wrap1{margin-bottom: 12%;
    background-color: #ffd300;
    padding: 15px 60px;
    margin-top: 3%;}
	
	
.we_wrap1 ul{list-style:none;      padding: 0 60px;}
.we_wrap1 li{font-size: 18px;
    margin: 8px 0 8px 0;
    font-family: 'OpenSansRegular';
	padding: 0% 0%;
  
	display:inline-block;
	width: 17%;
	}
	
	
	
	
 .we_wrap1 ul li::before {
    content: "\2022";
    color:#000;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 25px;
}



	
	
/*---------------------------------contact-------------*/
.head{ font-family: 'open_sansbold'; color:#fff; font-size:60px; line-height:80px; text-align:left; margin:0 auto; padding-top:13px; padding-left: 6%; }

.where_wrap{  max-width:720px;margin: 89px 6%; width:94%;}
.where_left{ width:50%; float:left; margin-top:10px;} 
.where_left h2{  font-family: 'OpenSansRegular';font-size: 23px;text-transform:uppercase; float:left; font-weight:bold; margin:10px 0px; color:#FFF; }
.imgadd_div{ width:100%; float:left;}
.img_div{ float:left; padding-right:6px;}
.add_wrap{ float:left;}
.add_wrap p{ margin:0 0 5px;    font-family: 'OpenSansRegular'; color:#FFF; padding: 0 0 0px 22px;}
.add_wrap p a{color:#FFF; line-height:22px;}
.add_wrap p a:hover{ text-decoration:underline;}
.where_left_one { float:left; margin-top:10px; font-size:20px; } 
.where_left_one h3{ color:#FFF;   font-family: 'OpenSansRegular';;font-size:20px; line-height:22px;
 padding:0 0 0px 22px; float:left;font-weight:bold; margin-top:6px; margin-bottom: 5px;}
 
.where_right{width:41%; float:left;margin-top:10px; margin-left: 9%;}
.where_right h2{color:#FFF;    font-family: 'OpenSansRegular';font-size:23px;text-transform:uppercase; font-weight:bold; width:100%;  } 
.label_txt{    font-family: 'OpenSansRegular';font-size:16px; line-height:20px;color:#FFF; font-weight:normal; }

.extra h3{font-size:23px;}


/*.input-effect{ position:relative;}

*/
#submit-button{ margin:20px 0 0 0; border: 1px solid; border-radius:none; font-family: 'OpenSansRegular';font-size:16px; padding: 2% 8%;}


   
   #submit-button:hover,
#submit-button:focus {
  box-shadow: 0 0.5em 0.5em -0.4em black;
  transform: translateY(-0.25em);
}

  


.colin{position: relative;     margin-bottom: 35px;} /* necessary to give position: relative to parent. */


    
.effect-16{border: 0; padding: 0px 0; border-bottom: 1px solid #ffd300; background-color: transparent;}

.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}

.effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 6px; transition: 0.3s; z-index: -1; }
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -14px; font-size: 14px; color:#; transition: 0.3s;}
input:required, textarea:required {box-shadow: none; background:none;  }
input:required:focus, textarea:required:focus {outline: none; box-shadow: none; background:none; border-bottom: 1px solid #ffd300;}
input:required:hover {opacity: 1;}


/*********************************** WORK CSS Strat******************************************/
.head3{font-family: 'open_sansbold';
       line-height:80px; 
       text-align:left;
	   font-size:60px; 
       margin:0 auto;
           padding-top: 54px;
       padding-left: 7%;  	
	   
		background: -moz-linear-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* ff3.6+ */
background: -webkit-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* safari4+,chrome */
background: -webkit-linear-gradient(15deg, #34B6D1 9%, #FFD300 16%);/* safari5.1+,chrome10+ */
background: -o-linear-gradient(115deg, #34b6d1 11%, #ffd300 18% );/* opera 11.10+ */
background: -ms-linear-gradient(115deg, #34b6d1 11%, #ffd300 18%); /* ie10+ */
background: linear-gradient(115deg, #34b6d1 11%, #ffd300 18%) ; /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#99DAFF',GradientType=1 ); /* ie6-9 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.gallery_wrap{ width:100%; float:left;  margin:30px 0 50px 0;}

/* Portfolio */

.col-nw-4{ width: 31.333%;  position:relative; float:left;}
#portfolio ul#Grid li img{ width:100%;}
#portfolio {
	padding: 9px;
	overflow: hidden;
}
#portfolio ul.controls {
	padding: 0px 0 20px 7px;
	overflow: hidden;
	margin: 20px 6%;
	
}
#portfolio ul.controls li {
	float: left;
	color: #000; text-transform:uppercase;
font-family: 'OpenSansSemibold';
	font-size: 16px;
	padding: 9px 19px; margin:10px 10px 0 0;
	cursor: pointer; border:1px solid #ffdd20;
}
#portfolio ul.controls li:hover, #portfolio ul.controls li.active {
	
	color: #000; background:#ffdd20;
	
}
#portfolio ul#Grid {
	margin: 30px 0 30px 0; width:100%; float:left;
	padding: 0;
	position: relative;
}
#portfolio ul#Grid li {
	padding: 5px; width:33.333%; float:left;
	/*margin: 10px;*/
	display: none;
	position: relative;
}
#portfolio ul#Grid li a {
	display: block; outline:none;
	position: relative;
	color: #fff;
}
#portfolio ul#Grid li span.overlay {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	visibility: hidden;
	text-indent: -9999px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	background: #000;
}
#portfolio ul#Grid li:hover span.overlay {
	visibility: visible;
	opacity: 0.2;
	filter: alpha(opacity=20);
}
#portfolio ul#Grid a.link {
	padding: 0px 10px;
	height: 0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	z-index: 10;
	overflow: hidden;
	font-size: 22px;
	font-weight: 400;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #FFF;
	line-height: 30px;
	background: #1ABC9C;
}
#portfolio ul#Grid li:hover a.link {
	background: #1ABC9C;
	opacity: 0.9;
}
#portfolio ul#Grid a.link span {
	color: #f9f9f9;
	font-weight: 400;
	display: block;
	font-size: 14px;
	text-transform: none;
	line-height: 22px;
}
#portfolio ul#Grid a.link:after {
	border-color: rgba(63, 141, 191, 0);
	border-bottom-color: #1ABC9C;
	border-width: 10px;
	margin-left: -10px;
}
#portfolio ul#Grid a.link:before {
	border-color: rgba(63, 141, 191, 0);
	border-bottom-color: #1ABC9C;
	border-width: 16px;
	margin-left: -16px;
}
#portfolio ul#Grid li:hover a.link {
	padding: 10px 10px;
	height: auto;
	overflow: visible;
	text-decoration: none;
}

/******************************Fade out animation*********************************************/
/*https://www.jqueryscript.net/demo/Awesome-Image-Grid-Hover-Effects-with-jQuery-CSS3/*/
.gallery .one div.over {
  -webkit-animation: slideLeft 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.gallery .one div.out {
  -webkit-animation: slideLeftOut 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.gallery .two div.over {
  -webkit-animation: slideUp 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.gallery .two div.out {
  -webkit-animation: slideUpOut 300ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

.gallery .three div {
  left: 0;
  opacity: 0;
}

.gallery .three:hover div { opacity: 1; }

.gallery .five .out {
    left: 0;
    opacity: 0;
    -webkit-transform: scale(0.9);
}
.gallery .five:hover .out {
    opacity: 1;
    -webkit-transform: scale(1);
}
.gallery .four .out {
    left: 0;
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(0.2);
}
.gallery .four:hover .out {
    opacity: 1;
    -webkit-transform: rotate(0deg);
}




.gallery .out {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    color: #FFF;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(231, 76, 60, 0.7);
    top: 0;
    left: 0;
    transition: all 450ms ease-in-out;
    background: rgba(000,000,000,0.6);
    /*background: linear-gradient(135deg, rgba(169, 3, 41, 0.8) 0%, rgba(143, 2, 34, 0.8) 44%, rgba(109, 0, 25, 0.8) 100%);*/
}
.gallery .out span {
    display: inline-block;
    vertical-align: middle;
    padding: 30px;
    letter-spacing: 1px;
}
.gallery .out::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
   
}

.gallery .out h2{font-family: 'OpenSansSemibold'; font-size:24px; color:#fff; margin:15px 0 7px 0;}
.gallery .out p{ font-family: font-family: 'OpenSansRegular';font-size:14px; color:#fff;}
/*********************************** WORK CSS end******************************************/
/****************************************** PRODUCT PAGE CSS *****************************************************/
.product_wrap{ padding-top:66px;/*padding-bottom:60px;*/}

.product_wrap .gallery-content-center-full{ margin:20px auto 0;}
.product_one{}

.prod_inner_wrap{ max-width:1102px; width:100%;margin:0 auto; padding-bottom:80px;}

.prod_header{  max-width:1000px; width:90%;margin:0 auto; padding:70px 0 20px 0;}
.prod_logo{ width:30%; float:left; margin:auto; text-align:center;}
.prod_name{ width:70%; float:left;}
.youtube{ width:100%; margin:0 auto;}
.youtube iframe{ width:100%; height:570px;}
.prod_name h3{font-family: 'OpenSansSemibold'; font-size:40px; line-height:40px; color:#000000; margin:0 0 4px 0}
.prod_name h4{ font-family: 'OpenSansSemibold'; font-size:25px; line-height:40px; color:#000000;float:left; 
border-bottom:2px solid #ffd400; text-transform:uppercase;}

.prod_name h5{font-family: 'OpenSansSemibold'; font-size:20px; line-height:40px; color:#000000; margin:100px 0 4px 0}
.prod_name p{font-family: 'OpenSansRegular';font-size:14px; line-height:25px;color:#000000; float:left; width:100%;}
.prod_name p a{color:#000000; }
.prod_name p a:hover{ text-decoration:underline;}


.prod_img{ margin:auto; width:87%; text-align:center; padding-bottom:130px; margin: 0 auto;
   padding: 70px 5px 34px 5px;}
	.prod_video {
		
    width: 57%;
    float: left;
    margin: auto;
    height: auto;
	
	 height:496px;
}
	
.prod_text h2{text-align:left; font-family: 'OpenSansSemibold';font-size:40px; line-height:40px; color:#000000; text-transform:uppercase;}
.prod_text p{text-align:left; font-family: 'OpenSansRegular';font-size:20px; line-height:30px; color:#000000;}


.prod_text {
    width: 42.5%;
    float: left;
    margin: auto;
    padding: 0% 62px;
	text-align:left;
	}

.prod_bn{margin:auto; width:40%; text-align:center; padding-bottom:130px;padding-top:5%;}


		.back1{
			width:62px;
			height:62px;			
			
			opacity:1;
			position:absolute;
			
			right:51%; cursor:pointer;
			background:url('../img/prev1.png') no-repeat;
			background-position:center;
			    text-indent: -223px;
				line-height:374%;
				text-align:center;
				color:#000;
				    font-family: 'OpenSansRegular';
		}
		.back1:hover{background:url('../img/prev1_hover.png') no-repeat;}
		
		
		.next1 {
			width:62px;
			height:62px;			
			
			opacity:1;
			position:absolute;
			
		
			right:44%; cursor:pointer;
			background:url('../img/next1.png') no-repeat;
				background-position:center;
				
		}
		
		.next1 p{
		text-indent: -91px;
    margin-left: 272%;
    line-height: 374%;
	text-align:center;
	color:#000;
	    font-family: 'OpenSansRegular';
	}
		.next1:hover{background:url('../img/next1_hover.png') no-repeat;}
		
		/*.thumbnails{
			width:30px;
			height:30px;			
			text-indent:-9999px;
			opacity:1;
			position:fixed;
			bottom:95px;
			right:30px; cursor:pointer;
			background: url('../images/thumbnails.png') no-repeat;
		}
		.thumbnails:hover{background: url('../images/thumbnails.png') no-repeat;}*/

.col-lg-4  li{
    margin-bottom: 0%;
    display: block;
         overflow: hidden;
		 border: 1px solid #dbdbdb;
		  opacity:1;
		      position: relative;
		
		
			
}
.col-lg-4  .span2{
position: absolute;
    top: 37%;
    left: 41%;
}
.col-lg-4 li:hover .span2{ display:none;}
.col-lg-4  ul {padding: 0 0 0 0px; }

.row1{ margin: 1% 0;}
.z-depth-1{width:594.33px; }

.out .span1{
    display: inline-block;
    vertical-align: middle;
    padding: 30px;
    letter-spacing: 1px;
}
	

li  .out{    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    color: #FFF;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(231, 76, 60, 0.7);
    top: 0;
    left: 0;
    transition: all 450ms ease-in-out;
    background: rgba(9,115,184,0.6);
    /* background: linear-gradient(135deg, rgba(169, 3, 41, 0.8) 0%, rgba(143, 2, 34, 0.8) 44%, rgba(109, 0, 25, 0.8) 100%); */
}


.col-lg-4 .out::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.col-lg-4 .five .out {
    left: 0;
    opacity: 0;
    -webkit-transform: scale(0.9);
}
.col-lg-4 .five:hover .out {
    opacity: 1;
    -webkit-transform: scale(1);
}

.modal {
    background-color: #171616eb;
}
 video {
    width: 100%;
}
.video1 {
    width: 71%;
}
   
@media (min-width: 1300px) and (max-width: 1600px)  {
	.col-lg-4 .span1 img {
    width: 70%;
}
	.col-lg-4 .span2 img {
    width: 70%;
}
	.wrapper {height:40.4em;}
   video {
    width: 1050px;
}
   
	.card1 {
    padding: 0% 5%;
    width: 49.5%;
    float: left;
}

.card-container, .front, .back {
    width: 293px;
    height: 372px;
    float: left;
   
}
.card p { font-size: 14px;}
.we_wrap1 li {
    font-size: 17px;
    
    padding: 0% 1%;
    
    width: 19%;
}
.we_wrap1 ul li::before {
   
    width: 0.7em;
   
}
.item  h2{ margin-top:0px; font-size:40px; }
.prod_video img{width:100%;}
.prod_video {width: 50%; height:20%;}
	.prod_text { width: 50%;     padding: 0% 0px 0px 25px;}
.prod_video img{width:100%;}
.prod_text p {
    text-align: left;
    font-family: 'OpenSansRegular';
    font-size: 15px;
    line-height: 29px;
    color: #000000;
}
.prod_text .btn-simple {
    color: #000;
    font-size: 16px;
    font-family: 'OpenSansSemibold';
    border: 1px solid #b7b7b7;
    border-radius: unset;
    padding: 7px 15px;
}
.prod_text h2 {
    text-align: left;
    font-family: 'OpenSansSemibold';
    font-size: 36px;
    line-height: 23px;}
	.prod_bn {padding-top: 7%;}
	.col-lg-4 .span2 {
    position: absolute;
    top: 38%;
    left: 38%;
}
.thumbnails {
   
    bottom: 9%;
}
.modal-content {
    width: %;
    margin: 0 auto;
}
}
@media (min-width: 1025px) and (max-width: 1300px){
		.wrapper {height:40.4em;}
.we_wrap1 li {
    font-size: 15px;
    padding: 0% 0%;
    width: 19%;
    margin-left: 0%;
}
.we_wrap1 ul {
   
    padding: 0 9px;
}
.we_wrap1 h3 {
   
    padding: 0 9px;
}
.we_wrap1 ul li::before {
   
    margin-left: 0em;
    
}
.card-container, .front, .back {
    width: 257px;
    height: 372px;
    float: left;
    m
}
.card p {
  
    font-size: 13px;
    line-height: 24px;
}
.card .header {
    height: 81px;
}
.card h5 { font-size:18px;}
.card1 { width: 49.8%;}
.item  h2{ margin-top:0px; font-size:34px; }
.prod_video img{width:100%;}
.prod_video {width: 50%; height:20%;}
	.prod_text { width: 50%;     padding: 0% 0px 0px 25px;}
.prod_video img{width:100%;}
.prod_text p {
    text-align: left;
    font-family: 'OpenSansRegular';
    font-size: 14px;
    line-height: 25px;
    color: #000000;
}
.prod_text .btn-simple {
    color: #000;
    font-size: 16px;
    font-family: 'OpenSansSemibold';
    border: 1px solid #b7b7b7;
    border-radius: unset;
    padding: 7px 15px;
}
.prod_text h2 {
    text-align: left;
    font-family: 'OpenSansSemibold';
    font-size: 36px;
    line-height: 23px;}
	.prod_bn {padding-top: 7%;}
	.col-lg-4 .span2 {
    position: absolute;
    top: 36%;
    left: 36%;
}
.col-lg-4 .span2 img{
   width:70%;
}
.out .span1 img{width:70%;}
.thumbnails {
   
    bottom: 10%;
}
 video {
    width: 1020px;
}
.modal-content {
    width: 79%;
    margin: 0 auto;
}
}
@media (min-height: 949px) and (max-height: 950px){
	
	.thumbnails {
   
    bottom: 8%;
}
}
/*          Changes for small display      */
@media (max-width: 991px) {
	
	
  .main-panel {
        width: 100%;
		position:fixed;
		
    }
	.sidebar, .main-panel {overflow:auto;}
    .navbar-transparent {
        padding-top: 15px;
        background-color: rgba(0, 0, 0, 0.45);
    }
    body {
        position: relative;
    }
   .main-panel {
	  
          -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        right: 0;
        
    }
    
   
    .sidebar {
		
     left: 0 !important;
    right: auto;
   
        -webkit-transform: translate3d(-129px, 0, 0);
        -moz-transform: translate3d(-129px, 0, 0);
        -o-transform: translate3d(-129px, 0, 0);
        -ms-transform: translate3d(-129px, 0, 0);
        transform: translate3d(-129px, 0, 0);
        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
    
    
   
   
   
    .nav-open .sidebar {
        -webkit-transform: translate3d(0px, 0, 0);
        -moz-transform: translate3d(0px, 0, 0);
        -o-transform: translate3d(0px, 0, 0);
        -ms-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
   
   
   
  #bodyClick {
        height: 100%;
        width: calc(100% - 540px);
        position: fixed;
        opacity: 0;
        top: 0;
        right: 0;
        content: "";
        z-index: 9999;
        overflow-x: hidden;
    }
   
    
    
    
    
   
    .navbar-header .collapse, .navbar-toggle {
        display: block !important;
    }
	
 .well1 { padding: 30px 0%;}
 .prod_video img{width:100%;}
}

@media (min-width: 992px) {
  
    .navbar-nav p {
        line-height: normal;
        margin: 0;
    }

   
}
@media (max-width: 1600px)  {
	.head1{    background: linear-gradient(115deg, #34b6d1 11%, #ffd300 16%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.head2{ background: linear-gradient(115deg, #34b6d1 11%, #ffd300 23%);-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.head3{ background: linear-gradient(115deg, #34b6d1 11%, #ffd300 23%);-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.feat_one_inner1 {
    width: 17%;}
	.feat_one_inner2 {
    width: 16%;}
	 .well1 {padding: 34px 20%;}
	nav ul li {
    display: inline-block;
    padding: 25px 0;}
	.card .header {
   
    height: 84px;
}


nav ul   .act1:nth-child(1):after { 
	content: "Home";
	line-height: 80px;
	
	
}
nav ul  .act2:nth-child(1):after{ 

	content: "We";
	line-height: 80px;
}
nav ul  .act3:nth-child(1):after { 
	content: "We Do";
	line-height: 80px;
} 

nav ul .act4:nth-child(1):after { 
	content: "Work";
	line-height: 80px;
}
nav ul .act5:nth-child(1):after { 
	content: "Client";
	line-height: 80px;
}
nav ul  .act6:nth-child(1):after { 
	content: "Contact";
	line-height: 80px;
	
	
}
}

@media (max-width: 1024px) {
	.out .span1 img {
    width: 45%;
}
 .span2 img {
    width: 45%;
}

	 .nav-open .main-panel {
    right: 0;
        -webkit-transform: translate3d(115px, 0, 0);
        -moz-transform: translate3d(115px, 0, 0);
        -o-transform: translate3d(115px, 0, 0);
        -ms-transform: translate3d(115px, 0, 0);
        transform: translate3d(115px, 0, 0);
    }
	
	.main-panel > .content {
    padding: 30px 15px;
    min-height: calc(100% - 123px);
}
    .head1 {font-size: 40px;padding-top:0px; text-align:left; padding-left:24px; background: linear-gradient(115deg, #34b6d1 7%, #ffd300 13%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.head { font-size: 40px;padding-top:0px; text-align:left; }
	.head2 {font-size: 40px; padding-top:0px;  padding-left: 3%; background: linear-gradient(115deg, #34b6d1 8%, #ffd300 20%);   -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	
	.head3 { font-size: 40px; padding-top:0px;  background: linear-gradient(115deg, #34b6d1 9%, #ffd300 25%);
	
   
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gallery_wrap {
   
    margin: 0px 0 50px 0; 
}
	.where_wrap { margin: 20px 6%;}
	.we_wrap h4{padding:0px 0px;}
	.we_wrap h3{padding:0px 0px;}
	.we_wrap p{padding:0px 0px;}
	.we_wrap img {padding:0px 0px; }
	.feat_one_inner1 {
    width: 26%;}
	.feat_one_inner2 {
    width: 73%;}
	.well1 p {
    font-size: 30px; text-align:left; margin-left:5%;  }
	.well1 { padding: 30px 0%;}
	.card1 {  width: 100%; }
	
	.card-container, .front, .back { margin: 2% 2%;}
	.we_wrap1 ul li::before { width: 0.8em;}
	.we_wrap1 ul { padding: 0 0px;  margin-left: 42px;}
	.we_wrap1 li {
    font-size: 16px;
    margin: 5px 0 5px 0;
   
    padding: 0% 0%;
   
    width: 32%;
    margin-left: 6px;
}
.we_wrap1 h3 {
   
     padding: 0 0px; 
    
}

.prod_name {
	

	padding-left: 8%;
}

.card .header {
  
    height: 83px;
}

.gallery .out span {
    
    padding: 5px;}
	.feat_one_inner2 h4 {
    
    margin-top: 5%; 
}

.feat_one_inner {
   
    clear: both;
}
	
.prod_img {margin: auto;width: 90%; padding: 74px 5px 80px 5px;}
.prod_video {width: 50%; height:20%;}
	.prod_text { width: 50%;     padding: 0% 0px 0px 25px;}
.prod_video img{width:100%;}
.prod_text p {
    text-align: left;
    font-family: 'OpenSansRegular';
    font-size: 13px;
    line-height: 23px;
    color: #000000;
}
.prod_text .btn-simple {
    color: #000;
    font-size: 13px;
    font-family: 'OpenSansSemibold';
    border: 1px solid #b7b7b7;
    border-radius: unset;
    padding: 7px 15px;
}
.prod_text h2 {
    text-align: left;
    font-family: 'OpenSansSemibold';
    font-size: 29px;
    line-height: 4px;}	
	.prod_bn {padding-bottom: 186px;}
	.next1 {right: 42%;}
	
	.col-lg-4 .span2 {
    position: absolute;
    top: 36%;
    left: 28%;
	}
	.thumbnails { bottom: 8%;}
	 video {
    width: 100%;
}
	
}
@media (max-width: 1024px) and (orientation : landscape) {
	
	.wrapper {height:0em;}
	
	.thumbnails {
   
    bottom: 11%;
}
	.modal-dialog {
    width: 900px;
    margin: 150px auto;
}
.out .span1 img {
	
    width: 45%;
}
 .span2 img {
    width: 45%;
}
.col-md-4 {
    width: 32.9%;
}
	.feat_one_inner1 {
    width:15%;}
	.feat_one_inner2 {
    width: 18%; margin-top: 3%;}
	.feat_one_inner2 h4 {
    
     font-size: 20px;
}
.feat_one_inner2 p {
    font-size: 14px;}
	.card-container, .front, .back { margin: 6% 4%;}
	.main-panel > .content {
    padding: 0px 15px;
    min-height: calc(100% - 123px);}
	
	   .carousel-inner, .carousel, .item, .fill{ margin-top: 9%;}
		.item  h2{ margin-top:0px; font-size:30px; }
		.item .carousel-desc p{font-size:16px; width:100%; margin:0; padding-top: 2%; }
		.carousel-control-prev img{width:5%;     margin-top: 15%;}
	.carousel-control-next img{width:5%;     margin-top: 15%;}
	.carousel-control-prev{margin-left: 10%;
	}
	
	nav ul li { padding: 23px 0;}
	.feat_one_inner {
   
    clear:none;
}
.prod_img {margin: auto;width: 90%; padding: 74px 5px 250px 5px;}
.prod_video {width: 50%; height:20%;}
	.prod_text { width: 50%;     padding: 0% 0px 0px 25px;}
.prod_video img{width:100%;}
.prod_text p {
    text-align: left;
    font-family: 'OpenSansRegular';
    font-size: 13px;
    line-height: 23px;
    color: #000000;
}
.prod_text .btn-simple {
    color: #000;
    font-size: 13px;
    font-family: 'OpenSansSemibold';
    border: 1px solid #b7b7b7;
    border-radius: unset;
    padding: 7px 15px;
}
.prod_text h2 {
    text-align: left;
    font-family: 'OpenSansSemibold';
    font-size: 29px;
    line-height: 4px;}
	.col-lg-4 .span2 {
    position: absolute;
    top: 38%;
    left: 30%;
}
}
	
@media (max-width: 360px){
		.wrapper {
    height: 0em;
}
	.thumbnails {bottom: 8%;}
	nav {
    position: relative;
    top: 0px;}
	.sidebar li {
    padding: 16% 7%;
}
	.card h5{
	font-size: 18px;}
.card p {
    font-family: 'OpenSansRegular';
    font-size: 12px;
	line-height: 23px;}
	
	.we_wrap1 li{font-size: 13px;
    
	}
	.card .back .content .main {
    height: 204px;
}
.card .header {
   
    height: 83px;
}

.carousel-control-prev img{width:10%;     margin-top: 0%; background-size:contain;}
	.carousel-control-next img{width:10%;     margin-top: 0%; background-size:contain;}
	
	
	.carousel-control-prev img:hover{ width:10%;}

	.carousel-control-next img:hover{ width:10%;}
	
	.copyrt {display: block; font-size: 9px;}
	.footer_logo {display: block;}
	
	}
	

	
	
@media (max-width: 667px) {
	
	.wrapper {
    height: 0em;
}
	.video1 {
    width: 100%;
}
	.mobile{display:block;}
	.desktop{display:none;}
	
	.card .header {
   
    height: 82px;
}
	
	.main-panel > .content {
    padding: 10px 15px;
    min-height: calc(100% - 123px);
}
	
	.navbar-collapse .nav, .sidebar .nav {position: fixed;}
	.sidebar li { padding: 21% 7%;}


.sidebar li:hover p {margin-left: -13%; font-size: 11px;}
.sidebar .logo img{width:80%;}

.sidebar li img{width:30%;}
.head1 {font-size: 40px;padding-top:0px; text-align:left;  background: linear-gradient(115deg, #34b6d1 8%, #ffd300 27%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; padding-left: 11px;}
	.head2 {  font-size: 40px; background: linear-gradient(115deg, #34b6d1 9%, #ffd300 47%);   -webkit-background-clip: text; 	-webkit-text-fill-color: transparent; padding-top:0%;}
	.head3 { font-size: 40px;  padding-top:0px; background: linear-gradient(115deg, #34b6d1 23%, #ffd300 46%);
   
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.we_wrap h4 {padding: 0;font-size: 20px;     margin-top: 15px;}
.we_wrap p {
    padding: 0;
    font-size: 15px;
    margin-top: 0%;
}
.we_wrap h3 {padding: 0;  font-size: 18px; padding-top: 5%; }
.feat_one_inner1 { width: 100%;}
.feat_one_inner2 { width: 100%;}
.feat_one_inner2 h4 {text-align:center; margin-top:0%;}
.feat_one_inner2 p {text-align:center; margin-top:0%;}
	
.we_wrap img { max-width: 100%; padding: 0 0px;}
.well1 p {
    font-size: 15px; text-align:left;padding: 6% 11%;
    margin: 0 auto;}
.well1{padding: 8px 0%;}
   
nav ul   .act1:nth-child(1):after { 
	
	line-height: 50px;
	font-size:14px;
	
}
nav ul  .act2:nth-child(1):after{ 

	content: "We";
	line-height: 50px;
	font-size:14px;
}
nav ul  .act3:nth-child(1):after { 
	content: "We Do";
	line-height: 50px;
	font-size:14px;
}

nav ul .act4:nth-child(1):after { 
	content: "Work";
	line-height: 50px;
	font-size:14px;
}
nav ul .act5:nth-child(1):after { 
	content: "Client";
	line-height: 50px;
	font-size:14px;
}
nav ul  .act6:nth-child(1):after { 
	content: "Contact";
	line-height: 50px;
	font-size:14px;
	
	
}

.head {font-size: 40px;padding-top:0px; text-align:left; padding-left:0;}
.where_left{ width:100%; }
.where_left_one {margin-left: -5%; margin-top: 0px;}
.where_left_one h3 { font-size: 14px; line-height:17px;}
.where_left h2 {font-size: 20px;}
.add_wrap p {font-size: 14px;}
.where_right h2 {font-size: 20px;}
.where_right{ width:100%;     margin-left: 5%; }   
.where_wrap{  padding-bottom: 100px;  margin: 0px 0%;}
.card1 { width: 100%; }
.card-container, .front, .back {
    width:100%;
	margin:2% 0;}

.card1 p {
    font-family: 'OpenSansRegular';
    font-size: 16px;
}
.we_wrap1 {
 
    margin-left:0px;
	
    padding: 15px 16px;
   
}

.we_wrap1 ul{    padding: 0 17px; margin-left:0%;}
.we_wrap1 li{font-size: 16px;
  
    padding: 0% 0%;
    width: 100%;
	  line-height: 1.600;
	}
	
	.we_wrap1 h3 {
  font-size: 18px;
      padding: 0 17px;
	  margin-top:11%;
	  
}
.we_wrap1 ul li::before {
    
    
    width: 0.7em;
    margin-left: -0.4em;
    font-size: 19px;
}
.gallery_wrap {
  
    margin: 0px 0 42px 0;
}





#portfolio {
    padding: 0px; }
#portfolio ul#Grid li {
    width: 50%;
}
.prod_logo {
    width: 100%;
    text-align: left;
}
.prod_name {
    width: 100%;
	padding-left: 0%;
}
.prod_name h3 {
    margin: 15px 0 4px 0;
	font-size: 26px;
}
.prod_header {
    
    padding: 0px 0 20px 0;
}
.prod_name h4 {
   
   font-size: 16px;
    line-height: 25px;}
	
	.prod_video {
    width: 100%;}
	.prod_text {
    width: 100%;
	    padding: 0% 0px;
	}
	.prod_text p {font-size:16px;}
	.prod_bn {
   
    width: 100%;
   
    padding-bottom: 130px;
    padding-top: 12%;
}
.back1 {right:51%; font-size:10px; text-indent: -145px;
    line-height: 615%;width: 40px;height: 62px; background-size:contain;}
	
	.back1:hover { background: url(../img/prev1_hover.png) no-repeat; width:40px;height: 62px; background-size:contain; background-position:center;}
	.next1:hover { background: url(../img/next1_hover.png) no-repeat; width: 40px;height: 62px; background-size:contain; background-position:center;}
.next1 {right:37%; font-size:10px; width: 40px;height: 62px; background-size:contain;}
.next1 p {
    text-indent: -90px;
    margin-left: 306%;
    line-height: 588%;}
	
	
	 .sidebar {width:78px;}
	  .nav-open .main-panel {
    right: 0;
        -webkit-transform: translate3d(78px, 0, 0);
        -moz-transform: translate3d(78px, 0, 0);
        -o-transform: translate3d(78px, 0, 0);
        -ms-transform: translate3d(78px, 0, 0);
        transform: translate3d(78px, 0, 0);
    }
	
	.gallery .out p {
    font-size: 8px;
}
.gallery .out h2 {
    font-size: 8px;
}
.gallery .out span {
    
    padding: 5px;}
	
.prod_img {
    margin: auto;
    width: 100%;
	    padding: 4px 5px 45px 5px;
}

.out .span1 {
    padding: 0px;
}
	
.col-lg-4 .span2 img{
    width: 45%;
}
.out .span1 img{width: 45%;}
.modal-content {
    width: 100%;
    margin-left: 0%;
    margin-top: 60%;
}

.prod_text p {
    text-align: left;
    font-family: 'OpenSansRegular';
    font-size: 15px;
    line-height: 29px;
    color: #000000;
}
.prod_text .btn-simple {
    color: #000;
    font-size: 16px;
    font-family: 'OpenSansSemibold';
    border: 1px solid #b7b7b7;
    border-radius: unset;
    padding: 7px 15px;
}
.prod_text h2 {
    text-align: left;
    font-family: 'OpenSansSemibold';
    font-size: 36px;
    line-height: 23px;}
	.prod_bn {padding-top: 0%;}
	
#portfolio ul.controls li { font-size: 11px; padding: 9px 13px;}
#portfolio ul.controls { padding: 0px 0 30px 0px;}
.copyrt{ font-size: 9px;}
.col-lg-4 .span2 {
    position: absolute;
    top: 41%;
    left: 36%;
}
.thumbnails {
    
    bottom: 6%;
	right:15px;
    background-size: contain;
    width: 32px;
}
.scrollup  {bottom: 0px;right: 14px; width: 32px; background-size:contain;}

}


@media (max-width: 812px) and (orientation : landscape) {
	
	.we_wrap p {
    font-size: 15px;}
	
	.where_left_one {
    margin-left: 0%;
}
	
	.main-panel > .content {
    padding: 0px 0px;
    min-height: calc(100% - 123px);
}

.feat_one_inner1 { width: 15%;}

.feat_one_inner1 img{ width: 86%;}
.feat_one_inner2 { width: 18%;}
.feat_one_inner2 h4 {text-align:center; margin-top:0%; font-size: 16px;}
.feat_one_inner2 p {text-align:center; margin-top:0%; font-size: 12px;}


.item3 .col-md-6{  width:49%;text-align:left; padding-left:30px; padding-top:0%; padding-bottom:0%;}
	.item1 .carousel-img img , .item1.active .carousel-img img{max-height:50%; width:100%;}
	.item  h2{font-size:16px; margin-top:0px;}
.item .carousel-desc p{ font-size:12px; width:100%;  }
.carousel-control-prev img{  width:5%;   margin-top: 1%; }
	.carousel-control-next img{  width:5%;  margin-top: 1%;}
	.carousel-control-prev{margin-left:0px;}
	.carousel-inner, .carousel, .item, .fill {margin-top:1%;}
	
	.carousel-control-prev{margin-left: 10%;}

footer {
     position:relative; 
    bottom: 0%;
}
nav {
     position:none;
	 top:0;
}
.head1 {background: linear-gradient(115deg, #34b6d1 6%, #ffd300 14%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; padding-left: 17px;}
	.head2 { background: linear-gradient(115deg, #34b6d1 7%, #ffd300 22%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	
.head3{background: linear-gradient(115deg, #34b6d1 12%, #ffd300 26%); -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.prod_img {
    margin: auto;
    width: 86%;
	padding: 74px 5px 15px 5px;
}

	.well1 p {
    
    margin-left: 9%;
}
.thumbnails {
    bottom: 14%;
}
 .scrollup {    bottom: 3px;}
 .prod_name h3 { font-size: 32px;}
 .flex-control-paging li a {
    width: 6px;
    height: 6px;
}
.we_wrap1 h3 { margin-top: 6%;}	
.we_wrap1 li {
    font-size: 14px;
   
    width: 30%;
    line-height: 22px;
	margin: 5px 0 5px 0;
	    margin-left: 17px;
}
.card-container, .front, .back {
    margin: 2% 4%;
}

}

@media (max-width: 767px) and (orientation : landscape) {
	.feat_one_inner1 {  width: 12%;}
.feat_one_inner2 { width: 21%;}
.feat_one_inner2 p {  font-size: 10px;}
.feat_one_inner2 h4 {font-size: 13px;}
	
.card-container, .front, .back {
    margin: 6% 2%;
}	
.card-container, .front, .back {width: 277px;}
	
.card p {font-size: 13px;}
.we_wrap1 h3 { margin-top: 6%;}	
.we_wrap1 li {
    font-size: 14px;
   
    width: 30%;
    line-height: 22px;
	margin: 5px 0 5px 0;
	    margin-left: 17px;
}
	
}
@media (max-width: 570px) and (orientation : landscape) {
.card-container, .front, .back {
    margin: 3% 1%;
}	
.card-container, .front, .back {width: 252px;}
	
.card p {font-size: 12px;}	
.card h5 {font-size: 18px;}


.we_wrap1 h3 { margin-top: 6%;}
.we_wrap1 li {
    font-size: 13px;
   
    width: 30%;
    line-height: 22px;
	margin: 5px 0 8px 0;
	    margin-left: 13px;
}
	
}