/**/

* {margin:0;padding:0;list-style:none;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
body, html {width: 100%;height: 100%; margin: 0 auto;font-family: 'Roboto', sans-serif; font-weight: 400; color: #033651;}

h1,h2,h3,h4,h5,h6 {font-family: inherit;font-weight: 900;line-height: 1.1;color: inherit;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block;}

em, i { font-style:normal; }
.cb { clear: both; }
img {width: 100%;display: block;}
/* COLOR */

.c0,.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8 {color: #9c2;}/*MORROM*/


/* HEADER */  

  header h1 {z-index: 100006;}
  header h1,
  header h1 a {
    display: block;
    position: absolute;
    width: 123px;
    height: 36px;
    z-index: 100005; 
  }

  header h1 a {
    background: url('../img/logo.png') no-repeat 0 center scroll;
    width: 100%;
    display: block;   
    text-indent: -9999px;
  }

  /* NAVEGAÇÃO */
    header nav .menu li:last-child:after,
    header nav .menu li:before {
      background-image: url('../img/ico_bullet.png');
      background-repeat: no-repeat;
      content: '';
      display: block;
      position: absolute;
      width: 5px;
      height: 5px;
    }

    header nav .menu li a {      
      text-transform: uppercase;
      text-align: center;
      display: block;
      font-weight: 100;
      width: 100%;
      color: #fff;
    }

    header nav .social {
      position: absolute;
      bottom: 100px;
      width: 100px;
      height: 17px;
      left: 50%;
      margin-left: -50px;
    }

    footer .social {
      position: relative;
      margin: 0 auto;
      width: 100px;
      height: 17px;
    }

    .social li {
      display: block;
      width: 17px;
      height: 17px;
      margin-right: 5px;
      float: left;
      text-indent: -9999px;
    }

    .social li a {
      display: block;
      width: 17px;
      height: 17px;      
    }

    nav .social .face {background: url('../img/ico_face.png') no-repeat scroll center center;}
    nav .social .vimeo {background: url('../img/ico_vimeo.png') no-repeat scroll center center;}
    nav .social .yt {background: url('../img/ico_yt.png') no-repeat scroll center center;}
    nav .social .in {background: url('../img/ico_in.png') no-repeat scroll center center;}

    footer .social .face {background: url('../img/ico_face_pb.png') no-repeat scroll center center;}
    footer .social .vimeo {background: url('../img/ico_vimeo_pb.png') no-repeat scroll center center;}
    footer .social .yt {background: url('../img/ico_yt_pb.png') no-repeat scroll center center;}
    footer .social .in {background: url('../img/ico_in_pb.png') no-repeat scroll center center;}

  /* btn_menu button */ 
    .btn_menu {
      display: block;      
      width: 100%;
      height: 50px;
      line-height: 20px;
      position: absolute;
      transition: all 600ms ease;
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -o-transition: all 600ms ease;
      -ms-transition: all 600ms ease;
      z-index: 100003;
    }

    .btn_menu span.hamburger {
      display: inline-block;
      position: absolute;
      top: 50%;
      bottom: auto;
      right: 0;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 23px;
      height: 3px;
      background-color: #aadd00;
    }      

    .btn_menu span.hamburger:before, .btn_menu span.hamburger:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #aadd00;
        right: 0;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: transform .3s, background .3s;
        -webkit-transition: -webkit-transform .3s, background .3s;
        -moz-transition: -moz-transform .3s, background .3s;
        -o-transition: -o-transform .3s, background .3s;
        -ms-transition: -ms-transform .3s, background .3s;
      }
     
    .btn_menu span.hamburger:before {
      -webkit-transform: translateY(-6px) rotate(0deg);
      -moz-transform: translateY(-6px) rotate(0deg);
      -ms-transform: translateY(-6px) rotate(0deg);
      -o-transform: translateY(-6px) rotate(0deg);
      transform: translateY(-6px) rotate(0deg);
      }
    .btn_menu span.hamburger:after {
      -webkit-transform: translateY(6px) rotate(0deg);
      -moz-transform: translateY(6px) rotate(0deg);
      -ms-transform: translateY(6px) rotate(0deg);
      -o-transform: translateY(6px) rotate(0deg);
      transform: translateY(6px) rotate(0deg);
      }

    .btn_menu:hover span:before { 
      -webkit-transform: translateY(-8px) rotate(0deg);
        -moz-transform: translateY(-8px) rotate(0deg);
        -ms-transform: translateY(-8px) rotate(0deg);
        -o-transform: translateY(-8px) rotate(0deg);
        transform: translateY(-8px) rotate(0deg);
      }
    .btn_menu:hover span:after { 
      -webkit-transform: translateY(8px) rotate(0deg);
        -moz-transform: translateY(8px) rotate(0deg);
        -ms-transform: translateY(8px) rotate(0deg);
        -o-transform: translateY(8px) rotate(0deg);
        transform: translateY(8px) rotate(0deg);
      }


    .btn_menu span.hamburger.ativo {
      background-color: transparent !important;
    }

    .btn_menu span.hamburger.ativo:before, .btn_menu span.hamburger.ativo:after { background-color: #aadd00; }

    .btn_menu span.hamburger.ativo:before {
      -webkit-transform: translateY(0) rotate(45deg);
      -moz-transform: translateY(0) rotate(45deg);
      -ms-transform: translateY(0) rotate(45deg);
      -o-transform: translateY(0) rotate(45deg);
      transform: translateY(0) rotate(45deg);
    }

    .btn_menu span.hamburger.ativo:after {
      -webkit-transform: translateY(0) rotate(-45deg);
      -moz-transform: translateY(0) rotate(-45deg);
      -ms-transform: translateY(0) rotate(-45deg);
      -o-transform: translateY(0) rotate(-45deg);
      transform: translateY(0) rotate(-45deg);
    }    

/* HOME */

  .destaque {
    position: relative;
    background-color: #292929;
    width: 100%;
  }

  .destaque h3.bg {
    color: #ad0;
    text-transform: uppercase;
  }

  .destaque .scroll {
    background: url('../img/ico_scroll.png') no-repeat center center;
    width: 94px;
    height: 62px;
    left: 50%;
    margin-left: -47px;
    position: absolute;
    bottom: 30px;
    display: block;
    text-indent: -9999px;

  }

  /* VIDEO */
    #home .descricao .txt {
      text-align: center;
      font-size: 18px;
      color: #303030;
      padding: 50px 15px;
      line-height: 25px;
      font-weight: 300;
    }

  /* DESCRIÇÃO */
    #home .roberto h3{font-weight: 300;}
    #home .roberto img {max-width: 320px;}

  /* VISAO */    
 
    .visao ul li {margin-top: 60px;padding: 0 20px;vertical-align: top;}
    .visao ul li img {max-width: 110px; margin: 0 auto;}

    .visao ul li p,
    .visao ul li h4 {
      text-align: center;
      font-weight: 300;
    }
    .visao ul li p {font-size: 18px;}
    .visao ul li h4 {font-size: 22px;text-transform: uppercase;margin: 30px 0;}

    .visao .planej h4 {color: #ad0;}
    .visao .producao h4 {color: #2685c6;}
    .visao .redesociais h4 {color: #7755a2;}
    .visao .seo h4 {color: #faa81a;}
    .visao .mensur h4 {color: #af2d3f;}

  /* CLIENTES */
    .clientes h3, #contato .form h3 {text-transform: uppercase;text-align: center;color: #ad0;font-size: 32px;font-weight: 300;margin: 80px auto 30px;}
    .clientes img {max-width: 242px;}

/* PORTFOLIO */
  #portfolio {background-color: #201f1f;}
  .filtro {background-color: #404040;padding: 20px 0;}
  .filtro a {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 20px 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 100;
  }

  .filtro a:hover {
    background-color: #292929;
  }

  /* TRABALHOS */

    .trabalhos img,
    .trabalhos .desc {
      position: relative;
      width: 100%;
      /*max-width: 320px;*/
      margin: 0 auto;
      display: block;
      z-index: 10;
    }

    .trabalhos .desc {
      position: relative;
      z-index: 100;
      text-align: center;
      text-transform: uppercase;
    }    

    .trabalhos .desc h4 {
      position: relative;
      margin-bottom: 15px;
      padding: 15px 0;
      font-weight: 300;
    }

    .trabalhos .desc h4:after,
    .trabalhos .desc p:after {
      content: '';
      position: absolute;
      display: block;
      width: 40px;
      height: 2px;
      left: 50%;
      margin-left: -20px;
      bottom: 0;
    }    

    .trabalhos .desc p {
      position: relative;
      font-weight: 100;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }

    .trabalhos .desc a {
      position: relative;
      display: block;
      width: 100%;
      text-align: center;
      font-weight: 300;
      text-decoration: none;
    }

/* CASES */
  .case_interna .projeto {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
  }
  .case_interna .owlcarousel img {display: block;}

  .case_interna .destaque h3 {
    position: relative;
    margin-bottom: 15px;    
    font-weight: 300;
    text-transform: uppercase;
    color: #ad0;
    text-align: center;
  }

  .case_interna .destaque h3:after {
    content: '';
    position: absolute;
    display: block;
    width: 40px;
    height: 2px;
    left: 50%;
    margin-left: -20px;
    bottom: 0;
  }

  .case_interna .destaque p {
    position: relative;
    font-size: 20px;
    font-weight: 100;
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
  }

  .case_interna .categ {
    background-color: #313131;
    margin-top: -15px;
    padding: 25px 20px;
  }

  .case_interna .categ li,
  .case_interna .ficha_tec li {
    margin-bottom: 15px;
  }

  .case_interna .categ li h5,
  .case_interna .ficha_tec li h5 {
    text-transform: uppercase;
    font-size: 22px;
  }

  .case_interna .categ li h5 {
    color: #ad0;
  }

  .case_interna .ficha_tec li h5 {
    color: #313131;
  }

  .case_interna .categ li p,
  .case_interna .ficha_tec li p {
    font-style: 18px;
  }

  .case_interna .categ li p {color: #fff;}
  .case_interna .ficha_tec li p {color: #333;}

  .case_interna .ficha_tec li h5,
  .case_interna .categ li h5,
  .case_interna .ficha_tec li p,
  .case_interna .categ li p {
    font-weight: 300;
    text-align: center;
  }

  .case_interna .descricao {padding: 40px 20px;}

  .case_interna .projeto,
  .case_interna .campanha {margin-bottom: 40px;margin-top: 40px;}

  .case_interna .descricao .c01 {margin-bottom: 40px;}

  .case_interna .descricao p,
  .case_interna .descricao02 p,
  .case_interna .descricao .ficha_tec p,
  .case_interna .descricao p {color: #0d0d0d;}

  .case_interna .projeto h4,
  .case_interna .campanha h4,
  .case_interna .ficha_tec h4,
  .case_interna .descricao h4 {margin-bottom: 25px; text-transform: uppercase;font-weight: 300;}

  .case_interna .projeto h4,
  #home .roberto h3,
  .case_interna .descricao h4,
  .case_interna .campanha h4,
  .case_interna .ficha_tec h4,
  .case_interna .descricao p {text-align: center;}


  .case_interna .ficha_tec h4,
  .case_interna .campanha h4 {margin: 10px 10px 20px;}
  
  .case_interna .ficha_tec {margin-bottom: 60px;}

/* CONTATO */
  #contato .form {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 20px;
  }

  #form_contato {margin: 40px;}

  #form_contato li {
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }

  #form_contato li label {padding-bottom: 15px;}
  #form_contato li label,
  #form_contato li input {height: 30px;}

  #form_contato li label,
  #form_contato li input,
  #form_contato li textarea {
    width: 100%;
    display: block;
  }

  #form_contato li input,
  #form_contato li textarea {
    border: 0;
    border-bottom: 1px solid #ececec;
  }

  #form_contato .btn,
  .case_interna .btn {
    font-weight: 300;
    text-transform: uppercase;
    color: #0d0d0d;
    border: 1px solid rgba(0,0,0,.2);
    padding: 10px 30px;
    background-color: #fff;
    width: 280px;
    display: block;
    margin: 20px auto;
    text-align: center;
    text-decoration: none;
  }

  #form_contato .btn:hover,
  .case_interna .btn:hover {
    background: #0d0d0d;
    color: #ffffff;
    border-color: #0d0d0d;
  }

  .contato {background-color: #333;}
  /*.contato ul {max-width: 785px;margin: 45px auto;}  */
  .contato li.end {margin-right: 35px;}

  .contato li {float: left;}
  .contato li,
  .contato li a {height: 80px;width: 100%;max-width: 250px;}
  .contato li a {display: block; color: #fff;}


  .contato li.tel a,
  .contato li.email a {padding: 35px 0 0 70px;}

  .contato li.end a {padding: 15px 0 0 70px;margin-right: 20px;}

  .contato li.end a {background: url(../img/ico_end.png) no-repeat 0 50% scroll;}
  .contato li.tel a {background: url(../img/ico_tel.png) no-repeat 0 50% scroll;}
  .contato li.email a {background: url(../img/ico_email.png) no-repeat 0 50% scroll;}

  #map {
    width: 100%;
    height: 500px;
  }

/* FOOTER */
  footer {padding: 40px 0;position: relative;width: 100%;background-color: #fff;margin-top: 80px;}
  footer a,  
  footer .copyright {
    color: #333;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    display: block;
  }
  footer .topo, footer .copyright {margin: 20px 0;}