body { font-family: 'Roboto', sans-serif;  }
a { text-decoration: none; }

/* logo animated light */
.logo-box { height: 47px; width: 180px; left: 5%; top: 20px; position: absolute;  overflow:hidden; z-index:100; }

.index footer img {width: 128px; }

  .logo-box .txt-box,
  .logo-box .social-txt-box { height: 19px; position: absolute; top: 15px; transition: left 0.7s; }
  .logo-box .d-box { height: 47px; width: 42px; left: 0; top: 5px; z-index:2; }
  .logo-box .txt-box {  width: 190px;  left: 45px; animation-name: txt; animation-duration: 3s;}
  .logo-box .txt-box img,
  .logo-box .social-txt-box img { height: 19px; width: auto;  }

  .logo-box .social-txt-box {  width: 200px;  left: -200px; animation-name: social; animation-duration: 3s; }

  @keyframes social {
    0% { left: -200px; }
    40% { left: 45px; }
    60% { left: 45px; }
    100% { left: -200px; }
  }
  @keyframes txt {
    0% { left:45px; }
    40% { left: -200px; }
    60% { left: -200px; }
    100% { left: 45px; }
  }
  .logo-box:hover > .txt-box { left: -200px; }
  .logo-box:hover > .social-txt-box { left: 45px; }

.hello { margin:0 5%; width: 90%;  }
.hello img { width: 100%; height: auto; margin-top: 15%; transition: margin-top 1s;}

.cd-header h1, .cd-header p { text-align: center; font-weight: 300;}
.cd-header h1 { font-size: 29px; margin: 20px 0; }
.cd-header h1 span { color: #4037FF; }
.cd-header p { font-style: italic; font-size: 17px; color: #3e3e3e;}
.cd-content h2 { line-height: 33px; font-size: 28px;}
.cd-content a { padding: 10px 60px; color:#ddd; border: 1px solid #ddd; border-radius: 25px; margin-top: 30px; font-size: 15px;}

/* Inner page control */
.our-works { background: url('../img/our-works-bg.png') no-repeat #1F8C80; background-size: 100% auto; }
.our-capacity { background: url('../img/our-capacity-bg.png') no-repeat #000; background-size: 100% auto; }
.contact { background: url('../img/contact-us-bg.png') no-repeat #FF5900; background-size: 100% auto; }
.doodles .page-title { margin-bottom: 10%; }
.doodles .content { background: none; }
.doodles .content img { width:100%; height: auto; }
.doodles .page-title p {  width: 90%; margin:0 auto; text-align:center; font-size: 19px; left:0;  }

.doodles-container { overflow: hidden; }
.doodles-container a { width: 50%; float: left; overflow: hidden; position: relative; margin-bottom:-3px; }
.doodles-container a img { height: auto; width:100%; }
.doodles-container .play { position: absolute; height: 15%; width: 15%; bottom:-17%; left: 3%; transition: bottom 0.6s; }
.doodles-container .play img { height: auto; width: 100%; }
.doodles-container a:hover > .play { bottom:3%; }


.header-box { position: relative; overflow:hidden; min-height: 100px; }

.header-box nav {  right:4%; width: 340px; bottom: 50px; position: absolute;  }
.header-box nav ul {   }
.header-box nav ul li { display:inline; }
.header-box nav ul li a  { text-decoration: none; padding:10px 20px;  }

.header-box nav ul li a,
.header-box nav ul {  color:#fff;}

.page-title {  margin-top: 15%; position: relative; margin-bottom:21%; }
.page-title h1, .page-title p { left: 4%; position:relative; font-size: 145px; font-weight: 100; color:#fff; width: 100px;}
.page-title p { font-size: 40px; padding-left:4px;  }

.dark-header .page-title h1,
.dark-header .page-title p { color: #555; }

.dark-header .header-box nav ul,
.dark-header .header-box nav ul a { color: #000; }

/* For headers that need LIGHT logo and nav */
.light-header .light-logo  {     }
.light-header .dark-logo {  display:none;  }

/* For headers that need DARK logo and nav */
.dark-header .light-logo { display:none;  }
.dark-header .dark-logo {  }

.content { background: #fff url('../img/our-works-bg2.png') -210px -390px no-repeat; background-size:70% auto;   min-height: 800px; padding: 30px 4%; position: relative; }

.our-capacity .content { background: url('../img/our-capacity-bg2.png') #fff -453px 65px no-repeat;
    background-size: 82% auto;}
.our-capacity .content2 { background: #eaeaea; padding:20px 0;}
.capacity-box {   background: #fff;   }
.capacity-box .txt { margin: 20px auto; width: 90%; color:#585858;  }
.capacity-box h2 {  font-size: 45px;  border-bottom:1px solid #ddd; padding:90px 0 30px; }
.capacity-box p {  font-size:14px; line-height: 23px; padding:40px 0 60px; width: 85%; }
.content h2 { font-size: 45px; width: 40%;  color:#868686; position: absolute; bottom:170px; right:4%; }

.content3  { background: #fff; text-align:center; }
.content3 .txt {width: 70%; margin:0 auto; padding: 70px 0;  }
.content3 .txt h2 { font-size:34px; padding:0 0 40px 0; }
.content3 .txt p { line-height: 23px; }



.works-container { background: #eaeaea; }
.works-column { margin: 0 auto; overflow: hidden; }
.works-box { width: 33.33%; float: left;  border-bottom:1px solid #cbcbcb; margin-bottom:20px;  }
.img-container { overflow:hidden; height: 300px; }
.img-container img { width: 100%; }
.works-box a { text-decoration: none;  background:#fff; display: block;}
.works-box a:hover > .view { right:20px; transition: right, 0.6s; }
.works-box a::after > .view { right: -120px; transition: right, 0.6s; }
.works-box .txt {  padding:10px 20px; min-height: 120px; color:#adadad; border-right:1px solid #cbcbcb; transition: color, 1s; position:relative; overflow-x:hidden;  }
.works-box .txt .view { background: #4037FF; padding: 6px 22px; border-radius: 25px; color:#fff; font-size:11px; position: absolute; right: -120px; bottom:10px;  transition: right, 0.6s;}
.works-box .txt .cs { background: red; }
.works-box .txt:hover { color:#000; }
.works-box h2 { font-size: 25px; margin-top:8px; }
.works-box h3 { font-size: 11px; margin:4px 0; color:#fff; color:red;     }
.works-box p { font-size: 12px; margin-top:4px; line-height: 20px;}

/* Portfolio control */
.port { background-color:#fff; }
.port .page-title { margin-bottom:18%; margin-top: 19%; }
.port .page-title h1 { font-size:110px; }
.bb-radio { background:url('../img/bb-radio-1.png') #fff no-repeat center top;}
.bebe-cakes { background:url('../img/bebe-cakes-1.png') #fff no-repeat center top;}
.bet7 { background:url('../img/bet7-1.png') #000 no-repeat center top;}
.fastcash { background:url('../img/fastcash-1.png') #000 no-repeat center top;}
.cocacola { background:url('../img/copa1.png') #000 no-repeat center top;}
.dcc-web { background:url('../img/dcc-web-1.png') #000 no-repeat center top;}

/* light - Default */
.port-sec-content { padding: 80px 10% 120px; text-align: center;  background:#fff;  }
.port-sec-content h2 { font-size: 27px; padding: 10px 0; }
.port-sec-content p { font-size:12px; line-height: 20px;}

/* dark section with text */
.dark { color:#fff; background-color: #000; }

.port-img-full img { height: auto; width:100%; }
.port-img-full, .port-img-semi { position: relative; overflow: hidden; margin-bottom:-3px; }
.port-img-semi img { height: auto; width:50%; float: left; }

.port-btn { margin:0 auto; text-align: center; background: #f9f9f9; padding: 70px 0; }
.port-btn a { background:#4037ff; padding: 15px 80px; font-size: 14px; text-align: center; color: #fff; text-decoration:none; border-radius: 45px; transition: background 1s, letter-spacing 1s; }
.port-btn a:hover { background: #000; letter-spacing: 3px; }

.visit-project-btn {  margin: 50px 0; }
.visit-project-btn a { color:#fff;  text-decoration: none; background: red; padding: 12px 80px;  border-radius: 45px; letter-spacing:0; transition: letter-spacing 1s, background 1s; }
.visit-project-btn a:hover { letter-spacing: 3px; background: #000; }

footer {  background: #f3f3f3; text-align: center; padding: 20px 10%;}
footer p { font-size: 15px; font-style: italic; color:#a2a2a2; line-height: 31px;}
footer img { width: 89px; height: auto; margin-bottom:-9px; padding:0 20px;}

@media only screen and (max-width: 1133px) {
    .works-column { width:90%; padding-top:40px; }
    .works-box { width:50%; }
}


@media (max-width:1070px ){
  .hello img {margin-top: 28%; transition: margin-top 1s; }
}

@media (max-width:980px ){
  .hello img {margin-top: 38%; transition: margin-top 1s; }
  .content { background: #fff url('../img/our-works-bg2.png') -180px -270px no-repeat; background-size:77% auto; }
}

@media (max-width:837px ){
  .cd-content { text-align:center; }
  .hello img {margin-top: 12%; transition: margin-top 1s; }
  .cd-fixed-background p {line-height: 0.6;
    font-size: 16px;
    margin-bottom: 47px;}
    .works-box { width:100%; }
}

@media only screen and (max-width: 740px) {
  .content h2 { right: 0; width:79%; left: 4%;}

}

@media (max-width:600px ){
  .hello img {margin-top: 78%; transition: margin-top 1s; }
  .img-container {  height: 266px; }
  .works-box .txt { border-right:none; min-height: 170px; }
  .content { background: #fff url(../img/our-works-bg2.png) -130px -210px no-repeat;
    background-size: 95% auto; min-height: 670px; }
  .header-box nav { float: none; bottom: 0; left: 4%;}
  .header-box nav ul li a  { text-decoration: none; padding:10px 8px; font-size:13px;  }
  .page-title { margin-top: 25%; margin-bottom: 42%;}
  .page-title h1, .port .page-title h1 { font-size:85px;}
  .port-img-semi img { height: auto; width:100%; float: left; }
  .our-works, .our-capacity, .contact {
    background-position: -180px -34px; background-size: 200% auto;

}
.doodles .content { min-height: 0; }
}