.grecaptcha-badge { visibility: hidden; }

@font-face {
    font-family: 'metallophile_sp8_regular_italic';
    src: url('../fonts/metallophile_sp8_light_italic-webfont.woff2') format('woff2'),
         url('../fonts/metallophile_sp8_light_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'metallophile_sp8_regular';
    src: url('../fonts/metallophile_sp8_light-webfont.woff2') format('woff2'),
         url('../fonts/metallophile_sp8_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metallophile_sp8_light_medium_italic';
    src: url('../fonts/metallophile_sp8_medium_italic-webfont.woff2') format('woff2'),
         url('../fonts/metallophile_sp8_medium_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'metallophile_sp8_light_medium';
    src: url('../fonts/metallophile_sp8_medium-webfont.woff2') format('woff2'),
         url('../fonts/metallophile_sp8_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


  .ohnohoney{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
    
body{padding-top:230px;font-family: 'metallophile_sp8_light_medium', sans-serif; background:#f7f7f7; color:black; font-size: 20px; letter-spacing: -0.5px}
a {transition: all 0.2s}
a:hover, a:focus{text-decoration: none}
.mb20{margin-bottom: 20px;}
.mt30{margin-top: 30px;}
.mt60{margin-top: 60px;}
#botoneraGrande{position: absolute;background: #f7f7f7;width: 100%;z-index: 10000; top: 0px; left: 0; transition: .7s all}
#botoneraChica{position: fixed;background: #f7f7f7;width: 100%;z-index: 10001; top:-65px;left: 0;transition: .7s all;}
#botoneraGrande.ocultar{top:-250px;}
#botoneraChica.mostrar{top:0px;}

header p{font-size: 0.86em;text-align: center}

.navbar-nav {float: none; margin: 0}
nav{max-width: 290px;margin: 20px auto 20px;}
.navbar-nav > li{float: left;}
.nav > li > a:hover, .nav > li > a:focus, li.dropdown:hover a {background: none}
.nav > li > a, .navbar-nav > li > a {color:#ec662f; font-size: 1.00em;display: inline-block;padding: 12px 8px; }

li.dropdown a:hover, nav a:hover, nav a:focus{color:black;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background: none}
.dropdown-menu {box-shadow: none; border-radius: 0px; border:none;background: #ededed; }
.dropdown-menu > li > a {color: #ec662f; font-size: 1em; padding: 10px 20px}
.dropdown-menu > li > a:hover{color: #333}
.navbar-nav .open .dropdown-menu { background: #ededed;}
#botoneraGrande .dropdown-menu {background: transparent;}
#botoneraGrande li.dropdown  {width: 68px}
#botoneraChica li a img{width: 35px;margin-top: -14px;margin-bottom: -14px;}
#botoneraChica nav{margin-top: 0;margin-bottom: 0px;}
#botoneraChica nav li{width:18%;text-align: center;float: left;vertical-align: middle;}
#botoneraChica nav li a{padding-bottom: 10px;font-size: 0.8em; padding-top: 20px;}
#botoneraChica nav li .dropdown-menu {padding-top: 0;position: fixed;width: 100%; top:50px;padding-left: 17%;}
#botoneraChica nav li .dropdown-menu > li {display: block;float: none;width: 100%; text-align: left;}
#botoneraChica nav li .dropdown-menu > li a {font-size: 1em; padding-top: 10px;}

.video_reel{width: 100%; margin:0 auto 40px; height: 240px;}
.container_chico .video_reel{width: 100%; margin:0 auto; height: 170px}
.logo img{width: 80px; margin-bottom: 5px;}
.logo{margin-top: 40px;}
h2 {color:#ea5b2a; text-align: center; font-size: 1em;}

#about h3{color:#ea5b2a; font-size: 1em; text-align: center; line-height:1.25em;margin-top: 30px}
#about p {font-size: 1em; line-height: 1.15em;text-align: center}
#about img{max-width: 80%}
#work h2{margin: 60px 0 20px}
.project_hover {display: block;position: relative;width: 100%; height: 200px;}
.project_hover h2{position: absolute;opacity: 0; transition: all .2s;z-index:1000;width:100%; text-align: center; color: white;font-size:27px;top:0; bottom: 0px; margin:auto !important;height: 20px}
.project_hover:hover h2{opacity: 1}
.project_hover:before{display: block;content: ""; background: rgba(0,0,0,.4);opacity:0; width: 100%;    height: 100%; position: absolute;z-index: 500;transition: all .2s}
.project_hover:hover:before{opacity: 1}
.project_hover img{position: absolute;width: 100%;}
.proyectos {margin-left:-5px; margin-right: -5px;  }
.proyectos> div{padding: 0 5px; margin-bottom: 10px }
.proyecto_lightbox {width: 95%; max-width:990px; margin: auto;}
.container_chico p {font-size: 16px; line-height: 20px}
form label {color:#ea5b2a;display: block;font-weight: normal}
form input, form textarea{border-radius: 3px; border: 1px solid #ea5b2a; display: block;width: 100%;background: transparent;    padding: 15px;   margin-bottom: 6px;}
form textarea {height: 200px}
form button{color:#ea5b2a;background: transparent; border: 1px solid #ea5b2a; border-radius: 5px; padding: 10px 55px; display: block;margin-top: 60px; transition: all .2s}
form button:hover{background:#ea5b2a;color:white; }
p.small{ font-size: 0.6em;    color: #c3c3c3;}
p.small a{color:#666;}
footer{color:#ea5b2a;text-align: center; margin-bottom: 30px;margin-top: 60px;}
footer a {color:#ea5b2a;}
footer a:hover{color:black;}
footer .sociales{padding-top: 10px}
footer .sociales svg{width: 26px;margin:0 5px;}
footer .sociales a svg path{fill:#ea5b2a;transition: all .2s} 
footer .sociales a:hover svg path{fill:black;} 
footer small {font-size: 0.9em}
footer > small {font-size: 0.7em}
footer iframe {border:1px solid #ea5b2a;height: 250px; margin-bottom: 20px;}
.gotop{padding: 7px 10px; width:50px; height: 50px; border-radius:100%; background: rgba(0,0,0,0.15);transition: all .2s; display: block;position: fixed;right: 40px; bottom: 40px; }
.gotop:hover {background: rgb(255, 102, 38)}
.gotop span{color: white;}

@media (min-width: 425px){
    nav{max-width: 320px}
    #botoneraChica nav {max-width: 370px}
    .nav > li > a, .navbar-nav > li > a {padding: 12px 12px }
    #botoneraGrande li.dropdown  {width: 75px}
    #botoneraChica nav li .dropdown-menu{padding-left: 30%;}

}
@media (min-width: 768px){
    body{padding-top: 270px;}
    
    #about { margin:100px auto 50px}
    #about p{margin-top: 30px;}
    .video_reel {height: 330px}
    .container_chico .video_reel {height: 420px}
    .project_hover {height: 130px}
    .container_chico p {font-size: 18px; line-height: 24px}
    nav {margin-top: 20px;margin-bottom: 45px;}
    #about img{max-width: 65%}
    #botoneraGrande.ocultar{top: -270px}
    #botoneraGrande .dropdown-menu {background: #ededed;}
    #botoneraChica li a {font-size: 1em}
    #botoneraChica li a img{width: 50px;}
    #botoneraChica nav li{width:19%;}
    #botoneraGrande li.dropdown  {width:initial;}
    #botoneraChica nav li .dropdown-menu{padding-left: 0%;}
    #botoneraChica nav li .dropdown-menu {position: absolute; top: 100%; left: 0;}

  
}

@media (min-width: 992px){
    body{padding-top: 370px;}
    #about p{margin-top: 50px;}
    #about p+p {margin-top: 40px;}
    li.dropdown:hover .dropdown-menu {display: block;}
    .project_hover {height: 173px; }
    .logo{margin-top:70px}
    .logo img {width:130px;margin-bottom: 10px;}
    .video_reel {height: 450px}
    .container_chico .video_reel{height: 570px}
    footer iframe{height: 350px; margin-bottom: 30px;}
    #botoneraGrande.ocultar{top: -370px}
}

@media (min-width: 1200px) {
    body{font-size: 22px; }
    #about { margin:200px auto 100px; width: 1060px;}
    #about p{margin-top: 90px;}
    #about p+p {margin-top: 40px;}
    .project_hover {height: 210px; }
    nav {max-width: 343px;margin-top: 20px;margin-bottom: 70px;}
    .logo img {width: 115px;}
    .video_reel {height: 490px}
    footer iframe{height: 500px; margin-bottom: 40px;}
      
}

@media (min-width: 1700px){
    body{font-size: 30px; padding-top: 464px;}
    #about {width: 1260px;}
    #about img{max-width: 80%}
    .container {width: 1650px}
    .project_hover {height: 300px; }
    nav{max-width: 474px;margin-top: 50px;margin-bottom: 80px;}
    #botoneraChica nav {max-width: 800px}
    .nav > li > a, .navbar-nav > li > a {padding: 12px 16px}
    .logo img {width: 164px;}
    .video_reel {height: 700px}
    footer iframe{height: 650px;}
    #botoneraGrande.ocultar{top: -480px}
}