@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot?-n712m6');
  src:url('fonts/icomoon.eot?#iefix-n712m6') format('embedded-opentype'),
    url('fonts/icomoon.woff?-n712m6') format('woff'),
    url('fonts/icomoon.ttf?-n712m6') format('truetype'),
    url('fonts/icomoon.svg?-n712m6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}

.icon-play:before {
  content: "\e912";
}

.icon-switch:before {
  content: "\e9b6";
}

.icon-menu:before {
  content: "\e9bd";
}

.icon-download2:before {
  content: "\e9c5";
}

.icon-plus:before {
  content: "\ea0a";
}

.icon-minus:before {
  content: "\ea0b";
}

.icon-cancel-circle:before {
  content: "\ea0d";
}

.icon-cross:before {
  content: "\ea0f";
}

.icon-checkmark:before {
  content: "\ea10";
}

.icon-checkmark2:before {
  content: "\ea11";
}

.icon-play2:before {
  content: "\ea15";
}

.icon-arrow-up:before {
  content: "\ea32";
}

.icon-arrow-down:before {
  content: "\ea36";
}

.icon-arrow-up2:before {
  content: "\ea3a";
}

.icon-arrow-down2:before {
  content: "\ea3e";
}

.icon-circle-up:before {
  content: "\ea41";
}

.icon-circle-right:before {
  content: "\ea42";
}

.icon-circle-down:before {
  content: "\ea43";
}

.icon-circle-left:before {
  content: "\ea44";
}

.icon-google-plus2:before {
  content: "\ea89";
}

.icon-facebook2:before {
  content: "\ea8d";
}

.icon-instagram:before {
  content: "\ea90";
}

.icon-twitter:before {
  content: "\ea91";
}

.icon-twitter2:before {
  content: "\ea92";
}

.icon-twitter3:before {
  content: "\ea93";
}

.icon-feed2:before {
  content: "\ea94";
}

.icon-feed3:before {
  content: "\ea95";
}

.icon-feed4:before {
  content: "\ea96";
}

.icon-youtube4:before {
  content: "\ea9a";
}

.icon-github:before {
  content: "\eab1";
}

.icon-pinterest:before {
  content: "\ead0";
}

.icon-pinterest2:before {
  content: "\ead1";
}

.icon-chrome:before {
  content: "\eae5";
}

.icon-firefox:before {
  content: "\eae6";
}

.icon-IE:before {
  content: "\eae7";
}

.icon-opera:before {
  content: "\eae8";
}

.icon-safari:before {
  content: "\eae9";
}

/*************************************
            style general
**************************************/
body,html{font-family: 'Roboto Condensed', sans-serif;  width: 100%; height: 100%;}
.align-right{text-align: right;}
strong, .bold{font-weight: bold;}
.italic{font-style: italic;}
.notDesktop{display: none!important;}
.rowTop{margin-top: 20px;}
.rowTB{padding: 30px 0;}
.border{width: 150px; height: 10px; margin: 20px 0; background-color: #f1ee08;}
.border2{width: 150px; height: 10px; margin: 20px auto; background-color: #f1ee08;}
.border3{width: 150px; height: 10px; margin: 20px 0 20px auto; background-color: #f1ee08;}
.Aligner {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
}

.background-video{
    overflow: hidden;
    position: relative;
}
.background-video video{
    width: 150%;
    height: 150%;
    position: fixed;
    z-index: -100;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.background-mobile{
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -100;
}
@media screen and (max-width:991px){
    .background-video{
        display: none;
    }
}
.notPadding{padding: 0!important; margin: 0!important;}

@media screen and (max-width: 650px){
	.border{width: 150px; height: 10px; margin: 20px auto; background-color: #f1ee08;}
}

@keyframes nombre_animacion{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}

@-webkit-keyframes nombre_animacion{
    0%{
        top: -100%;
    }
    100%{
        top: 0px;
    }
}



/*************************************************
      header
*************************************************/

header{
  background-color: rgba(255,255,255,1);
  position: fixed;
  width: 100%;
  z-index: 99999!important;
  border-bottom: 1px solid #ccc;
}

.logo{
  width: 20%;
  padding: 15px 0 0 20px;
  float: left;
  text-align: center;
}
.logo img{
  width: 100%; max-width: 122px!important; height: auto!important;
}
.logo h1{
  font-size: 30px;
  color: #333;
  padding: 10px 0 0;
 }

/*************************************************
    menu
*************************************************/

.menu_bar{
  display: none;
}

nav.menu{
  float: right;
  width: 75%;
  z-index: 9999!important;
}


nav.menu ul{
  text-align: right;
  list-style: none;
  overflow: hidden;/* limpiar float */ 
}

nav.menu ul li{
  display: inline-block;
}
nav.menu ul li a{
  font-family: 'Montserrat', sans-serif; 
  display: block;  
  padding: 20px 20px;
  font-size: 16px;
  color: #4d4d4d;  
  text-transform: uppercase;
  text-decoration: none;

}

nav.menu ul li a:hover{
  background-color: #f1ee08!important;
  color: #000!important;
  font-weight: bold!important;
}

.actives{
  background-color: #f1ee08!important;
  color: #000!important;
  font-weight: bold!important;
}
@media screen and (max-width: 800px){

/*
estilos para el header
 */

header{
  position: fixed;
  width: 100%;
}

.logo{
  position: fixed;
  right: 0;
  left: 0;
  top: 0px;

  margin-right: auto;
  margin-left: auto;
  width: 60%;
  float: none;
  text-align: center;
  padding-top: 10px!important;
}
.logo h1{
  font-size: 40px;
  color: #ffffff;
  padding: 20px 0 0;
 }
 .logo img{width: 95%; }

 /*
estilos para el menu
 */

.menu_bar{
  text-align: right;
  z-index: 9999;
  display:block;
}

.bt-menu {
    display:block;
    padding:10px 15px;
    color:#000;
    text-decoration:none;
    font-weight: bold;
    font-size:25px;
  }

nav.menu{
  background-color: rgba(255,255,255,1);
  position: fixed;
  right: -100%;
  float: none;
  width: 60%;
  height: 100%;
  overflow-y: scroll;
}

nav.menu ul{
  text-align: left;
  list-style: none;
  overflow: hidden;/* limpiar float */ 
}

nav.menu ul li{
  display:block;
  padding: 0px 0;
}
nav.menu ul li a{
  display: block; /*esto es para poder darle espacio en todos los lados*/ 
  padding: 20px 20px;
  font-size: 16px;
  color: #4d4d4d;
  text-transform: uppercase;
  text-decoration: none;

}

.menu_bar span {
    font-size:30px;
  }

}
.clear{clear: both;}  /*otra opcion para limpiar los float*/

/*************************************
        BACKGROUND VIDEO HOME STYLES
**************************************/
.cover{background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 9; position: absolute; top: 0; left: 0; }
.section1,.section5 {
	height: 100%;
	width: 100%;
  position: relative;
  overflow-y: hidden;
  color: white;
}

.section1 video,.section5 video {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -100;
}

/*************************************
            section 1
**************************************/
.section1{width: 100%; height: 100%; position: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.cont-section1{width: 100%; z-index: 8888; text-align: center; max-width: 780px; margin:0 auto;}
.cont-section1 h1{font-size: 180px; font-family: 'Roboto', sans-serif; color: #ffffff; font-weight: bold;}
.cont-section1 h4{font-size: 76px; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 8px; color: #ffffff; font-weight: normal;}

@media screen and (max-width: 650px){
.section1{width: 100%; height: 100%;  position: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.cont-section1{width: 100%; z-index: 7777; text-align: center; max-width: 780px; margin:0 auto;}
.cont-section1 h1{font-size: 60px; color: #ffffff; font-weight: bold;}
.cont-section1 h4{font-size: 18px; letter-spacing: 8px; color: #ffffff; font-weight: normal;}
}

/*************************************
            section 2
**************************************/
.section2{width: 100%; overflow: hidden; height: 100%; background-color: #f5f5f5;}
.cont-section2{width: 100%; overflow: hidden;}
.bg-zorbek{width: 100%; height: 100%; overflow: hidden;}
.bg-zorbek img{width: 100%; height: 100%;}
.myhouse{width: 90%; max-width: 500px; margin:0 auto; }
.myhouse h2{font-size: 100px; text-align: left; line-height: 100px;}
.myhouse h2 span{font-weight: bold; font-size: 80px;}
.myhouse p{font-size: 20px;  line-height: 24px;}
.bgsilver{background-color: #b8b7b8;}

@media screen and (max-width: 1024px){
.section2{width: 100%; overflow: hidden; height: auto; background-color: #f5f5f5;}
.cont-section2{width: 100%; overflow: hidden;}
.bg-zorbek{width: 100%; height: 100%; overflow: hidden;}
.bg-zorbek img{width: 100%; height: 100%;}
.myhouse{width: 90%; max-width: 500px; margin:0 auto; }
.myhouse h2{font-size: 70px; text-align:left; line-height: 80px;}
.myhouse h2 span{font-weight: bold; font-size: 70px;}
.myhouse p{font-size: 20px; line-height: 24px;}
.bgsilver{background-color: #b8b7b8;}
}

@media screen and (max-width: 650px){
.section2{width: 100%; overflow: hidden; height: auto; background-color: #f5f5f5;}
.cont-section2{width: 100%; overflow: hidden;}
.bg-zorbek{width: 100%; height: 100%; overflow: hidden;}
.bg-zorbek img{width: 100%; height: 100%;}
.myhouse{width: 80%; padding: 30px 0; max-width: 500px; margin:0 auto; }
.myhouse h2{font-size: 40px; text-align:center; line-height: 40px;}
.myhouse h2 span{font-weight: bold; font-size: 40px;}
.myhouse p{font-size: 15px; text-align: center; line-height: 22px;}
.bgsilver{background-color: #b8b7b8;}
}

/*************************************
            section 3
**************************************/
.section3{width: 100%; height: 100%; background-color: #ffffff;}
.cont-section3{width: 100%; max-width: 1280px; margin: 0 auto;}
.bigIdeas{width: 90%; max-width: 500px; margin:0 auto; }
.bigIdeas h2{font-size: 70px; text-align: left; line-height: 100px;}
.bigIdeas h2 span{font-weight: bold; font-size: 100px;}
.bigIdeas p{font-size: 20px; line-height: 24px;}
.img-ideal{width: 100%; margin-top: -50px; text-align: center;}
.img-ideal img{width: 100%; max-width: 359px;}

@media screen and (max-width: 1024px){
.section3{width: 100%; height: auto; padding: 70px 0; background-color: #ffffff;}
.cont-section3{width: 100%;}
.bigIdeas{width: 90%; max-width: 500px; margin:0 auto; }
.bigIdeas h2{font-size: 70px; text-align: left; line-height: 70px;}
.bigIdeas h2 span{font-weight: bold; font-size: 70px;}
.bigIdeas p{font-size: 20px; line-height: 24px;}

.img-ideal{width: 100%; margin-top: -20px; text-align: center;}
.img-ideal img{width: 50%; max-width: 359px;}
}

@media screen and (max-width: 650px){
.section3{width: 100%; height: auto; padding: 70px 0; background-color: #ffffff;}
.cont-section3{width: 100%;}
.bigIdeas{width: 85%; max-width: 500px; margin:0 auto; }
.bigIdeas h2{font-size: 40px; text-align: center; line-height: 40px;}
.bigIdeas h2 span{font-weight: bold; font-size: 40px;}
.bigIdeas p{font-size: 15px; text-align: center; line-height: 24px;}

.img-ideal{width: 90%; margin: 20px auto 0!important; text-align: center; text-align: center;}
.img-ideal img{width: 80%!important; margin: 0 auto; max-width: 259px;}
}



/*************************************
            section 4
**************************************/
.section4{width: 100%; height: 100%; background-color: #ffffff;}
.cont-section4{width: 100%; max-width: 1280px; margin: 0 auto;}
.code{width: 90%; max-width: 500px; margin:0 auto; }
.code h2{font-size: 70px; text-align: left; line-height: 100px;}
.code h2 span{font-weight: bold; font-size: 100px;}
.code p{font-size: 20px; line-height: 24px;}

.img-code{width: 100%; margin-top: -50px; text-align: center;}
.img-code img{width: 100%; max-width: 300px;}

@media screen and (max-width: 1024px){
.section4{width: 100%; height: 100%; background-color: #ffffff;}
.cont-section4{width: 100%;}
.code{width: 90%; max-width: 500px; margin:0 auto; }
.code h2{font-size: 70px; text-align: left; line-height: 100px;}
.code h2 span{font-weight: bold; font-size: 80px;}
.code p{font-size: 20px; line-height: 24px;}

.img-code{width: 100%; margin-top: -50px; text-align: center;}
.img-code img{width: 100%; max-width: 300px;}
}

@media screen and (max-width: 650px){
.empty{display: none;}
.section4{width: 100%; height: auto; padding: 20px 0; background-color: #ffffff;}
.cont-section4{width: 100%;}
.code{width: 85%; max-width: 500px; margin:0 auto; }
.code h2{font-size: 44px; text-align: center; line-height: 44px;}
.code h2 span{font-weight: bold; font-size: 44px;}
.code p{font-size: 15px;text-align: center; line-height: 22px;}

.img-code{width: 100%; margin: 20px auto; text-align: center;}
.img-code img{width: 60%; max-width: 300px;}
}

/*************************************
            section 5
**************************************/
.section5{width: 100%; height: 100%; position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.cont-section5{width: 100%; z-index: 9999; text-align: center; max-width:980px; margin:0 auto;}
.cont-section5 h2{font-size: 55px; line-height: 65px; text-align: left; color: #ffffff; font-weight: bold;}
.cont-section5 h5{font-size: 30px; line-height: 32px; text-align: left; color: #ffffff; font-weight: normal;}
.cont-section5 a{display: inline-block; padding:20px 30px; text-decoration: none; font-size: 40px; font-weight: bold; text-align: center; background-color: #f1ee08; color: #000000;}


@media screen and (max-width: 650px){
.section5{width: 100%; height: auto; padding: 30px 0;  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}


.cont-section5{width:90%; z-index: 9999; text-align: center; max-width:980px; margin:0 auto;}
.cont-section5 h2{font-size: 34px; line-height:38px; text-align: center; color: #ffffff; font-weight: bold;}
.cont-section5 h5{font-size: 22px; line-height: 26px; text-align: center; padding: 15px 0; color: #ffffff; font-weight: normal;}
.cont-section5 a{display: inline-block; margin-top: 20px; padding:20px 30px; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; background-color: #f1ee08; color: #000000;}

}
/*************************************
           footer
**************************************/
.footer{width: 100%; background-color: #ffffff; border-top: 10px solid #f1ee08; padding: 30px 0;}
.cont-footer{width: 100%; max-width: 1280px; margin: 0 auto;}
.cont-footer h3{font-size: 20px; font-weight: bold; padding-bottom: 15px;}
.cont-footer p{font-size: 14px; line-height: 20px;}
.cont-footer a img{width: 100%; max-width: 86px; margin-top:0px;}
.cont-footer a {color: #000000;}
.alignCenter{text-align: center;}
.link-facebook{text-decoration: none!important;}
.NotpaddingRight{padding-right: 0!important;}

@media screen and (max-width: 1024px){
.footer{width: 100%; background-color: #ffffff; border-top: 10px solid #f1ee08; padding: 30px 0;}
.cont-footer{width: 90%; max-width: 1280px; margin: 0 auto;}
.cont-footer h3{font-size: 20px; font-weight: bold; padding-bottom: 15px;}
.cont-footer p{font-size: 14px; line-height: 20px;}
.cont-footer a img{width: 90%; margin-top: 15px;}
.cont-footer a {color: #000000;}
}


@media screen and (max-width: 650px){
.footer{width: 100%; background-color: #ffffff; border-top: 10px solid #f1ee08; padding: 30px 0;}
.cont-footer{width: 90%; max-width: 1280px; margin: 0 auto;}
.cont-footer h3{font-size: 20px; font-weight: bold; padding-bottom: 15px;}
.cont-footer p{font-size: 14px; padding-bottom: 20px; line-height: 20px;}
.cont-footer a img{width: 60%; margin-top: 0px;}
.cont-footer a {color: #000000;}
}

/*************************************
           Our work
**************************************/
.section-ourwork-1{width: 100%; height: 100%; background-color: #ffffff;}
.cont-ourwork-1{width: 100%; max-width: 980px; margin: 0 auto;}
.cont-ourwork-1 h1{font-size: 44px; padding: 40px 0 0; text-align: center;}
.cont-ourwork-1 h5{font-size: 24px; text-align: center; padding-bottom: 15px; line-height: 40px;}

@media screen and (max-width: 650px){
.section-ourwork-1{width: 100%; height: auto; padding: 40px 0; background-color: #ffffff;}
.cont-ourwork-1{width: 90%; max-width: 980px; margin: 0 auto;}
.cont-ourwork-1 h1{font-size: 34px; padding: 40px 0 0; text-align: center;}
.cont-ourwork-1 h5{font-size: 18px; text-align: center; padding-bottom: 15px; line-height: 30px;}
}

.section-ourwork-2{width: 100%; height: 100%; background-color: #ffffff;}
.cont-ourwork-2{width: 100%; background: url(../img/bg-ourwork.jpg) no-repeat center fixed;background-size: 100%; height: 100%; margin: 0 auto;}
.left-content{width: 90%; margin: 0 auto;}
.windth600{width: 100%; max-width: 600px;}
.left-content .border2{margin: 0 auto 0 0;}
.left-content h1{font-size: 50px; text-shadow: 2px 2px #000000; font-weight: bold; color: #ffffff; padding: 40px 0; text-align: left;}
.left-content h5{font-size: 24px; text-shadow: 2px 2px #000000; color: #ffffff; text-align: left; padding: 15px 0; line-height: 40px;}

@media screen and (max-width: 650px){
.section-ourwork-2{width: 100%; height:auto; background-color: #ffffff;}
.cont-ourwork-2{width: 100%; background: url(../img/bg-ourwork.jpg) no-repeat center relative; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; height: auto; padding: 40px 0; margin: 0 auto;}
.left-content{width: 90%; margin: 0 auto;}
.windth600{width: 100%; max-width: 600px;}
.left-content .border2{margin: 0 auto 0 0;}
.left-content h1{font-size: 24px; text-shadow: 2px 2px #000000; font-weight: bold; color: #ffffff; padding: 40px 0; text-align: left;}
.left-content h5{font-size: 16px; text-shadow: 2px 2px #000000; color: #ffffff; text-align: left; padding: 15px 0; line-height: 22px;}

}

.section-ourwork-3{width: 100%; height: 100%;}
.cont-ourwork-3{width: 100%; max-width: 980px; margin: 0 auto;}
.cont-ourwork-3 h3{text-align: center; font-size: 28px; line-height: 30px; font-weight: normal;}
.cont-ourwork-3 h4{text-align: center; font-size: 32px; line-height: 38px; font-weight: bold;}
.video-footer{text-align: center; padding: 30px 0;}

@media screen and (max-width: 650px){
.section-ourwork-3{width: 100%; height:auto; padding: 30px 0;}
.cont-ourwork-3{width: 100%; max-width: 980px; margin: 0 auto;}
.cont-ourwork-3 h3{text-align: center; font-size: 19px; line-height: 22px; font-weight: normal;}
.cont-ourwork-3 h4{text-align: center; font-size: 24px; line-height: 30px; font-weight: bold;}
.video-footer{text-align: center; padding: 30px 0;}
}


.section-OurWork{width: 100%; height: auto; padding: 40px 0; background-color: #ffffff;}
.cont-ourwork{width: 100%; text-align: center; max-width: 900px; margin: 0 auto;}
.ourwork-pic{padding: 30px 0;}
.section-OurWork h1{font-size: 44px; padding: 40px 0 0; text-align: center;}
.section-OurWork h5{font-size: 24px; padding-bottom: 15px; line-height: 30px;}
.cont-blog-left {width: 100%; padding: 20px 0px;}
.cont-blog-left h2{text-align: left; font-size: 44px; line-height: 50px; font-weight: bold;}
.cont-blog-left h3{font-size: 22px; text-align: left; padding-bottom: 25px; font-weight: bold;}
.cont-blog-left p{font-size: 18px; text-align: left; line-height: 26px;}
.cont-blog-left img,.cont-blog-right img{max-width: 100%;}

.cont-blog-right {width: 100%; padding: 20px 0px;}
.cont-blog-right h2{text-align: right; font-size: 44px; line-height: 50px; font-weight: bold;}
.cont-blog-right h3{font-size: 22px; text-align: right; padding-bottom: 25px; font-weight: bold;}
.cont-blog-right p{font-size: 18px; text-align: right; line-height: 26px;}

@media screen and (max-width: 650px){
.section-OurWork{width: 100%; padding: 40px 0; background-color: #ffffff;}
.cont-ourwork{width: 90%; text-align: center; max-width: 800px; margin: 0 auto;}
.ourwork-pic{padding: 30px 0;}
.ourwork-pic img{width: 100%;}
.section-OurWork h1{font-size: 34px; padding: 40px 0 0; text-align: center;}
.section-OurWork h5{font-size: 16px; padding-bottom: 15px; line-height: 20px;}
.cont-blog-left {width: 100%; padding: 20px 0;}
.cont-blog-left h2{text-align: center; font-size: 34px; line-height: 50px; font-weight: bold;}
.cont-blog-left h3{font-size: 24px; text-align: center; padding-bottom: 25px; font-weight: bold;}
.cont-blog-left p{font-size: 16px; padding-bottom: 20px; text-align: center; line-height: 26px;}
.cont-blog-left img,.cont-blog-right img{max-width: 100%;}

.cont-blog-right {width: 100%; padding: 20px 0;}
.cont-blog-right h2{text-align: center; font-size: 34px; line-height: 50px; font-weight: bold;}
.cont-blog-right h3{font-size: 16px; text-align: center; padding-bottom: 25px; font-weight: bold;}
.cont-blog-right p{font-size:16px; padding-bottom: 20px; text-align:center; line-height: 26px;}
.border3{margin: 0 auto 20px;}
.hidden-movil{display: none;}
}


/*************************************
            workcycle
**************************************/
.workcycle{width: 100%; height: 100%;}
.cont_workcycle{width: 90%; margin: 0 auto; text-align: center;}
.cont_workcycle h2{text-align: center; font-size: 44px; line-height: 50px; font-weight: bold;}
.cont_workcycle h3{text-align: center; font-size: 28px; line-height: 30px; font-weight: normal;}
.cont_workcycle h4{text-align: center; font-size: 32px; line-height: 38px; font-weight: bold;}
.all-work{width: 100%; max-width: 700px; margin: 20px auto;}
.all-work img{max-width: 60%;}
.video-footer{text-align: center; padding: 30px 0;}

@media screen and (max-width: 650px){
.workcycle{width: 100%; height: auto; padding: 30px 0;}
.cont_workcycle{width: 90%; margin: 0 auto; text-align: center;}
.cont_workcycle h2{text-align: center; font-size: 44px; line-height: 50px; font-weight: bold;}
.cont_workcycle h3{text-align: center; font-size: 28px; line-height: 30px; font-weight: normal;}
.cont_workcycle h4{text-align: center; font-size: 32px; line-height: 38px; font-weight: bold;}
.all-work{width: 100%; max-width: 700px; margin: 20px auto;}
.all-work img{margin: 15px 0;}
.video-footer{text-align: center; padding: 30px 0;}
.video-footer video{max-width: 100%;}
}

/*************************************
          services
**************************************/
.section-services{width: 100%; height: 100%; background-color: #ffffff;}
.cont-services{width: 100%; text-align: center; max-width: 800px; margin: 0 auto;}
.ourwork-pic{padding: 30px 0;}
.section-services h1{font-size: 44px; padding: 40px 0 0; text-align: center;}
.section-services h5{font-size: 24px; padding-bottom: 15px; line-height: 30px;}

.phone{width: 100%; height: 100%;}
.cont-phone{width: 100%; max-width: 990px; margin: 0 auto;}
.cont-phone h1{ background-color: #fff!important; font-weight: bold; width: 400px; text-align: left; letter-spacing: 2px; font-size: 80px; line-height: 90px;}
.cont-phone h1 span{padding: 0 5px!important;}
.cont-phone h2{ font-weight: bold; width: 400px; text-align: left; letter-spacing: 2px; font-size: 90px; line-height: 90px;}
.yellow{background-color: #fff600!important;}

.sectiongray {width: 100%; height: 100%; background-color:#e8e8e8;}
.cont-gray{width: 100%; max-width: 1100px; height: 558px; margin: 0 auto; background: url(../img/bg4.png) no-repeat center left;}
.cont-gray h3{font-size: 70px; line-height: 80px;}

@media screen and (max-width: 650px){
.section-services{width: 100%; height: auto; padding: 40px 0; background-color: #ffffff;}
.cont-services{width: 90%; text-align: center; max-width: 800px; margin: 0 auto;}
.ourwork-pic{padding: 30px 0;}
.section-services h1{font-size: 28px; padding: 40px 0 0; text-align: center;}
.section-services h5{font-size: 16px; padding-bottom: 15px; line-height: 20px;}

.phone{width: 100%; height: auto;}
.cont-phone{width:90%; padding: 20px 0; text-align: center;}
.cont-phone h1{font-weight: bold; width: 100%; text-align: center; padding-bottom: 30px; letter-spacing: 2px; font-size: 34px; line-height: 37px;}
.cont-phone img{max-width: 70%;}

.sectiongray {width: 100%; height: auto; padding: 0px 0; background-color:#e8e8e8;}
.cont-gray{width: 90%; max-width: 1100px; padding: 40px 0; height: auto; margin: 0 auto; background: url(../img/bg4.png) no-repeat center left;}
.cont-gray h3{font-size: 34px; text-align: center; line-height: 40px;}
}

/*************************************
          our services
**************************************/
.ourservices{width: 100%; height: 100%; background-color: #ffffff;}
.cont-ourservices{width: 100%; text-align: center; max-width: 1280px; margin: 0 auto;}
.cont-ourservices h1{font-size: 44px; padding: 40px 0 0; text-align: center;}
.cont-ourservices ul{padding: 20px 0;}
.cont-ourservices ul li{display: inline-block; width: 18%; vertical-align: top; text-align: center; padding: 0 0px;}
.cont-ourservices ul li img{max-width: 110px;}
.cont-ourservices ul li h4{font-size: 18px; padding: 20px 0; font-weight: bold; line-height: 22px;}
.cont-ourservices ul li h4 span{font-weight: lighter;}

@media screen and (max-width: 650px){
.ourservices{width: 100%; height: auto; padding: 40px 0; background-color: #ffffff;}
.cont-ourservices{width: 90%; text-align: center; max-width: 1100px; margin: 0 auto;}
.cont-ourservices h1{font-size: 34px; padding: 20px 0 0; text-align: center;}
.cont-ourservices ul{padding: 20px 0;}
.cont-ourservices ul li{display:block; width: 100%; vertical-align: top; text-align: center; padding: 0 10px;}
.cont-ourservices ul li img{max-width: 120px;}
.cont-ourservices ul li h4{font-size: 24px; padding: 20px 0; font-weight: bold; line-height: 30px;}
.cont-ourservices ul li h4 span{font-weight: lighter;}
}

/*************************************
            section7
**************************************/
.section7{width: 100%; height: 100%; padding: 0px 0; background:#000 url(../img/bg5.png) no-repeat center left; background-size: 45% 100%;}
.cont-section7{width: 100%; text-align: center; margin: 0 auto; max-width: 980px;}
.cont-section7 h2{font-weight: bold; text-align: left; color: #fff; font-size: 30px; padding: 20px 0;}
.cont-section7 p{font-size: 26px; padding: 0 0 20px; text-align: left; font-weight: normal; line-height: 34px; color: #fff;}
.cont-section7 p.center{text-align: center;}

.button{padding: 20px 40px; margin: 20px auto; display: inline-block; font-size: 20px; text-decoration: none; border-radius: 30px; font-weight: bold; background-color: #fff600; color: #000; text-align: center;}
.cover-banana{position: fixed; display: none; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.9);}

@media screen and (max-width: 650px){
.section7{width: 100%; height: auto; padding: 20px 0; background:#000 none no-repeat center left;}
.cont-section7{width: 90%; text-align: center; margin: 0 auto; max-width: 980px;}
.cont-section7 h2{font-weight: bold; text-align: center; color: #fff; font-size: 26px; padding: 20px 0;}
.cont-section7 p{font-size: 16px; padding: 0 0 20px; text-align: left; font-weight: normal; line-height: 22px; color: #fff;}
.cont-section7 p.center{text-align: center;}

.button{padding: 20px 40px; margin: 20px auto; display: inline-block; font-size: 20px; text-decoration: none; border-radius: 30px; font-weight: bold; background-color: #fff600; color: #000; text-align: center;}
.cover-banana{position: fixed; display: none; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.9);}
}


/*************************************
            contact
**************************************/
.contact{width: 100%; height: 100%; position: relative;}
.cont-contact{width: 90%;margin:0 auto; text-align: center;}
.cont-contact h2{font-size: 35px; font-weight: bold; color: #000; text-align: center!important; line-height: 40px; padding-bottom: 0px;}
.form{width: 100%; text-align: left!important; max-width: 450px; margin: 0 auto;}
.form h3{font-size: 35px; color: #ffffff; line-height: 40px; padding: 40px 0 30px;}
.form label{color: #fff; font-size: 16px;}
.form input{width: 100%; height: 45px; margin: 10px 0; padding: 5px 10px; box-sizing: border-box;}
.form textarea{width: 100%; margin: 10px 0; height: 100px;  padding: 10px 10px; box-sizing: border-box; min-height: 100px; max-height: 100px;}
.button-submit{width:100%; text-align: right;}
button.btn-submit{width: 100%; max-width: 190px; font-weight: bold; cursor:pointer; border:none; font-size: 18px; text-align: center; color: #000; background-color: #fcff00; padding: 15px; box-sizing: border-box;}
button.btn-submit:hover{background-color: #ccce05;}

@media screen and (max-width: 650px){
.contact{width: 100%; height: auto; padding: 40px 0; position: relative;}
.cont-contact{width: 90%;margin:0 auto; text-align: center;}
.cont-contact h2{font-size: 35px; font-weight: bold; color: #333; text-align: center!important; line-height: 40px; padding-bottom: 0px;}
.form{width: 100%; text-align: left!important; max-width: 450px; margin: 0 auto;}
.form h3{font-size: 35px; color: #333; line-height: 40px; padding-bottom: 30px;}
.form label{color: #333; font-size: 16px;}
.form input{width: 100%; height: 45px; margin: 10px 0; padding: 5px 10px; box-sizing: border-box;}
.form textarea{width: 100%; margin: 10px 0; height: 100px;  padding: 10px 10px; box-sizing: border-box; min-height: 100px; max-height: 100px;}
.button-submit{width:100%; text-align: right;}
button.btn-submit{width: 100%; max-width: 190px; font-weight: bold; cursor:pointer; border:none; font-size: 18px; text-align: center; color: #000; background-color: #fcff00; padding: 15px; box-sizing: border-box;}
button.btn-submit:hover{background-color: #ccce05;}
}

.error, .msg-error{color: #ff0000; text-shadow: 1px  1px #000; font-size: 13px; font-weight: bold; font-style: italic; padding-bottom: 15px;}