@charset "UTF-8";

/*------------------------------------*\
    1. RESET Y ESTRUCTURA BASE
\*------------------------------------*/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0}
a,u,ins{text-decoration:none}
img{border:none}
html{overflow-y:scroll;font-size:100%;line-height:1.5;background:#fff;color:#333}
body{min-height:100%;background:url(../imagenes-de-esquelas/bg.jpg) repeat}

/*------------------------------------*\
    2. GRIDS Y WRAPPER
\*------------------------------------*/
.wrapper{max-width:1080px;margin:0 auto;padding:1.5em 1em}
.grids{max-width:1120px;clear:both;margin:0 0 0 -2.679%;list-style:none}
[class^="grid-"]{float:left;margin:0 2.679% 0 0}
.grids [class^="grid-"]{margin:0 0 0 2.679%}
.grid-1{width:3.571%}.grid-2{width:9.821%}.grid-3{width:16.071%}.grid-4{width:22.321%}.grid-5{width:28.571%}.grid-6{width:34.821%}.grid-7{width:41.071%}.grid-8{width:47.321%}.grid-9{width:53.571%}.grid-10{width:59.821%}.grid-11{width:66.071%}.grid-12{width:72.321%}.grid-13{width:78.571%}.grid-14{width:84.821%}.grid-15{width:91.071%}.grid-16{width:97.321%;margin:0}

/*------------------------------------*\
    3. COMPONENTES VISUALES
\*------------------------------------*/
#overbox3{position:fixed;bottom:0;left:0;width:100%;z-index:999999}
#infobox3{margin:auto;height:58px;width:100%;text-align:center;background-color:#eee}
#infobox3 p{line-height:58px;font-size:12px}
#infobox3 p a{color:#025197;margin-right:5px;text-decoration:underline}

#logo{float:left;background:url(../img/logo.png) top center no-repeat;width:200px;height:100px;position:relative;z-index:120}
#logo img{display:block;position:absolute;left:-9999px}

#nav.main{float:right;text-align:center;margin:0.5em 0 0;padding:0.4em 0;font-family:'Oswald',Arial,sans-serif}
#nav.main li{display:inline}
#nav.main a{display:inline-block;padding:0.6em 1.2em;background-color:#EFEFEF;border-radius:10px;border:1px solid #bbb;border-bottom-width:2px;color:#666;text-transform:uppercase;font-size:1.1em;margin:0 0 0.6em}
#nav.main a.active{color:#fff;background-color:#025197;font-weight:bold}

h1,h2,h3,h4{font-family:'Oswald',Arial,sans-serif;color:#025197;text-shadow:1px 1px 0 #6D8901}
h1{font-size:2.5em;margin-bottom:0.75em}

#footer{border-radius:10px;background-color:#e9f2fc;padding:10px 0;text-align:center}
#footer p{margin:0;padding:10px 0;color:#999;font-size:small}

/*------------------------------------*\
    4. LISTA NUMERADA Y FORMULARIOS
\*------------------------------------*/
#lista2{counter-reset:li;list-style:none;font:15px 'Trebuchet MS','Lucida Sans',sans-serif;padding:0;margin-bottom:4em}
#lista2 li{position:relative;display:block;padding:.4em .4em .4em 2em;margin:.5em 0;background:#F1F1F1;border-radius:.3em;transition:all .3s ease-out;font-family:Arial,sans-serif;font-size:1.1em}
#lista2 li:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:-1em;color:#fff;background:#025197;height:2em;width:2em;line-height:2em;border:.3em solid #fff;border-radius:2em;text-align:center;font-weight:bold;transition:all .3s ease-out}
#lista2 li:hover:before{transform:rotate(360deg)}

.contact_form input, .plantilla_form input{border:1px solid #aaa;padding:8px;border-radius:2px}
button.submit{padding:9px 17px;font-family:Helvetica,Arial,sans-serif;font-weight:bold;cursor:pointer;background:#fff linear-gradient(#fff,#bbb);border-radius:10px}

/*------------------------------------*\
    5. RESPONSIVE (MEDIA QUERIES)
\*------------------------------------*/
@media (max-width: 960px){
    #logo{float:none;margin:0 auto 1em}
    #nav.main{float:none;margin:0 auto}
}
@media (max-width: 720px){
    body{-webkit-text-size-adjust:none}
    .wrapper,.grids,[class^="grid-"]{width:auto!important;margin:0!important;float:none!important;padding:10px!important}
}