/* CSS Document */

@media screen and (max-width: 40.5em) {
#root{ font: normal 11px/1.2em Verdana, Geneva, sans-serif; margin: 0; padding: 0}

#root h1{ font-size: 30px; width: 100%; }
#root h2{ font-size: 25px; width: 100%; margin-bottom: 30px;  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}

#root header form{ float: none; position: static; }
#root header form a{ position: absolute; top: 0;  }
#root header form a:nth-child(2){ display: none; }
#root header form a:nth-child(1){ right: 40px; }
#root header form a:nth-child(3){ right: -10px; top: 5px;}
.submenu_open img{ height: 30px !important; width: 35px; }


#root header form a img{ height: 40px; }
#root header form input{ }

#root main{ padding: 5px; position:relative; }

#root #resultados{ margin: 0; padding: 0; }
#root #resultados li{ width: 31%; vertical-align: top; margin: 1%; }
#root #resultados li img{ display: block; width: 100%; height: auto; margin: 0; border-radius: 10px; border: 1px solid #DDD; }
#root #paginador{ margin-top: 30px; }
#root #paginador li{ display: none; }
#root #paginador #prev, #root #paginador #next{ display: inline-block; width: 50%; margin: 0; border-radius: 0; height: auto; }
#root #paginador #prev a, #root #paginador #next a{ display: block; padding: 20px 0;  }
#root #paginador #prev a:active, #root #paginador #next a:active{ background: darkred; color: white; }

#root #form_alta{ width: 100%; padding: 10px; border-radius: 0; }
#root #form_alta input, #root #form_alta textarea{ font-size: 13px; color: #999 }
#root #form_alta input[type=submit]{ color: #999; font-weight: bold }
#root #form_alta input:focus, #root #form_alta textarea:focus{ background: lightyellow; color: darkred; }
#root #form_alta  hr{ margin: 20px 0}

#root main nav{ position: absolute; top: 185px; left:0; width: 100%; margin: 0; padding: 0; text-align:left; background: #06C; }
#root main h2 { height: 32px; overflow: hidden; }
#root main h2 em{ display: none; }
#root main nav a{ margin: 0; width: 24%; display: inline-block; vertical-align: top; font-size: 9px; padding: 9px 1px; text-align: center; border-right: 1px solid white; color: white; }
#root main nav a:active{ background:#039; }
#root main nav a:last-child{ border: none; }
#root main section figure{ width: 100%; height: 150px; margin: 0; margin-top: -30px; margin-bottom: 40px; }
#root main section figure img{ width: 100%; margin-top: -20%; }
#root main section figure ul{ display: none; }

#root main section h3{ font-size: 15px; margin: 10px 0; text-transform: uppercase; }
#root main section aside{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);  }
#root main section aside:target{ display: block; }
#root main section aside ul{ margin: 50px 20px; padding: 30px 10px 10px 10px; background: white; border-radius: 9px; border: 2px solid black; position:relative; }

#root .filas, #root article, #root .columnas{ width: 100%; margin: 0; padding: 0; }
#root .filas li{ width: 96%; padding: 8px 10px}
#root .columnas li{ width: 50%; padding: 8px 10px; vertical-align:top;}

#root .portfolio{ width: 100%; }
#root .portfolio img{ display: none; }
#root .portfolio p{ width: 100%; font-size: 0.9em; line-height:1.5em; }

.responsive_close{ display: block; overflow:hidden; padding: 0; z-index: 10; }
.responsive_close a{ display: block; padding: 0; overflow:hidden;  }

aside .responsive_close a{ position: absolute; top:-22px; right: -15px; text-indent: -200px; width: 50px; height: 50px; border-radius: 50%; background:url('../icons/modal_close.png') center no-repeat; background-size: 48px 48px; }

}