@font-face {
  font-family:'opensans';
  src: url(fonts/opensans.otf);
}
@font-face {
  font-family:'bebas';
  src: url(fonts/BebasNeue-Regular.otf);
}
@font-face {
  font-family:'bebaslight';
  src: url(fonts/BebasNeue-Light.otf);
}
@font-face {
  font-family:'slimjim';
  src: url(fonts/SlimJim.ttf);
}


body {font-family:'opensans'; margin:0px; padding:0px}
p, big {margin:0px; padding:0px; margin-left:5px; padding-bottom:0.75em;width:auto; height:auto; position:relative}
p span.img{display:inline-block; width:92%; margin:0px; padding:0px; margin-left:0px; margin-right:0%; border:6px ridge green; border-radius:15px; position:relative; vertical-align:top; overflow:hidden; text-align:center; font-size:8pt; margin-bottom:0.75em; background-color:#eee}
p span.img img{display:block; width:100%; margin:0px; padding:0px; position:relative}
big {margin-left:-2px; padding-bottom:0em; font-weight:bold; font-size:14pt; display:inline-block; border:0px solid red}
h1,h2,h3,h4,h5,h5,h6 {margin:0px; padding:0px}
div {margin:0px; padding:5px; padding-left:1%; padding-right:1%; display:block; width:96%; border:0px solid green;position:relative;}
div.titulo {background-color:#acf; min-height:80px; height:150px}
div.titulo div{font-size:28pt; color:#444; text-shadow:2px 2px 4px #666; padding-top:0px; padding-bottom:0px; display:inline-block; border:0px solid green; width:auto; vertical-align:top; position:relative; height:auto}
div.titulo div span{font-size:12pt; color:#666; text-shadow:none; display:block; margin-left:10px}
div.titulo div span+span{font-size:10pt; color:#000; text-shadow:none; margin-left:20px}
div.titulo div+div{float:right; width:25%; height:100%; font-size:12pt; text-shadow:none; text-align:right}
div.titulo div+div img {height:90%; display:inline-block; position:relative; top:5%; right:0%; border:0px solid red; padding:0px; margin:0px; margin-right:0px; margin-left:auto}
div.menu {background-color:#999; min-height:20px; height:auto; padding:0px; padding-top:5px; padding-left:1%; padding-right:1%}
div.menu a {display:inline-block; border-radius:5px; background-color:#ccc; text-decoration:none; color:#444; padding:4px; margin-right:5px; margin-bottom:5px}
div.menu a:hover, div.menu a.on {color:#f00; background-color:#ff9; text-shadow: 1px 1px 3px #444; box-shadow:2px 2px 4px #444}
div.menu a.on {background-color:#fff}
div.interact {min-height:100px; height:auto; transition:height 1s;
    background-image:url("imagenes/logotown_ancho2.jpeg"); 
    background-size:cover; 
    background-position:left center; 
    background-repeat:repeat-x;
    border:0px solid green;
}
div.interact div.box {
    background-color:#fff;
    opacity:0.8;
    border-radius:20px;
    box-shadow:3px 3px 8px #444;
    max-width:50%;
    min-height:80px;
    height:auto;
    margin:20px;
    margin-left:40px;
    z-index:1;
}
ul, ol {border:0px solid green; border-radius:10px}

table.contenido {background-color:#ffc; height:auto; min-height:150px; width:98%; position:relative; padding:0px; margin:0px}
table.contenido tr td {margin:0px; padding:5px; padding-left:1%; padding-right:1%; vertical-align:top; border:0px solid green}
table.contenido tr td+td {background-color:#ccc; width:25%; font-size:10pt; overflow:hidden; color:black; border-left:4px solid #fc6}
table.padron {background-color:#ccc; width:95%; border-left:1px solid #999; border-top:1px solid #999}
table.padron tr td{text-align:right; border-right:1px solid #666; border-bottom:1px solid #666; width:4em}
table.padron tr td.flex,table.padron tr td.flex~td {width:auto; padding:5px}
table.padron tr td~td {text-align:left; width:auto}
table.padron tr td+td+td+td+td{cursor:pointer}
table.padron tr td+td+td+td+td+td{width:4em; cursor:text}
table.padron tr td span.fbk{font-size:10pt; color:#088}
table.padron tr td span.fbk b {color:#080; font-size:110%}
table.padron tr td span.fbk b.idx {color:#f63; font-size:90%}
table.padron tr td span.fbk b.error2 {color:#f00}
table.padron tr td span.fbk b.error1 {color:#800}
table.contenido input[type="button"] {border-radius:10px; padding:5px; width:80px; background-color:#080; font-size:12pt; color:white; font-weight:bold; margin-top:10px}
table.contenido input.boton2[type="button"] {background-color:#f00; color:#fff}
table.contenido input.boton3[type="button"] {background-color:#f60; color:#000}
table.contenido input#autoenvia {width:auto; display:inline-block; margin-bottom:5px}

table.padron tr td span.fbk b.negro {color:#000}
table.captur {width:100%}
table.captur tr td {margin:0px; padding:0px; border:0px solid red}
table.captur tr td div.campo,table.captur tr td div.mcampo {font-size:12pt; position:relative; padding-top:5px; border:0px solid cyan; display:inline-block; width:auto}
table.captur tr td div.campo span,table.captur tr td div.mcampo span {font-size:8pt; position:relative; top:-2px; color:#008; display:inline-block}
table.captur tr td div.campo span+span,table.captur tr td div.mcampo span+span {color:#840}
table.captur tr td div.campo input[type="text"]{border:1px solid #444; border-radius:5px; position:relative; left:0px; bottom:0px; font-size:10pt; padding:5px; margin-right:20px; display:inline-block; width:auto}
table.captur tr td div.campo textarea {width:100%; height:5em; display:inline-block; position:relative; margin:5px}
table.captur tr td div.mcampo input[type="text"]{border:1px solid #444; border-radius:5px; position:relative; left:0px; bottom:0px; font-size:10pt; margin-bottom:5px; padding:5px; margin-right:5px; width:3em}
table.captur tr td div.campo input[type="button"] {border-radius:10px; padding:10px; width:100px; background-color:#080; font-size:14pt; color:white; font-weight:bold}
table.captur tr td div.campo input.boton2[type="button"] {background-color:#f00; color:#fff}
table.captur tr td div.campo input.boton3[type="button"] {background-color:#f60; color:#000}

table.captur tr td div.campo input.camiao[type="button"]{border-radius:10px; padding:10px; width:100px; background-color:#800}
div.inferior {background-color:#666; min-height:100px; height:auto; column-count:3; column-rule:1px solid white; color:white; font-size:10pt}
div.inferior p::first-letter {font-family:serif; color:#6cf; font-size:150%}
div.bajolateral {background-color:#ccc; height:0px; padding:0px; padding-left:1%; padding-right:1%;column-count:2; column-rule:1px solid white; color:black; font-size:10pt; overflow:hidden}
div.bajolateral p {overflow:hidden; height:0px; width:0px;}
div.datos {position:absolute; visibility:hidden; height:0px; width:0px; overflow:hidden}


@media screen /*telefonos*/
and (min-width:0px) 
and (max-width:480px) {
    table.contenido tr td {width:auto; border:0px solid blue}
    table.contenido tr td+td , table.contenido tr td+td p , table.contenido tr td+td big {width:0px; height:0px; overflow:hidden; border-left:0px solid #fc6; padding:0px; margin:0px; border:0px solid red}
    div.bajolateral {height:auto; padding:5px; column-count:2; border-top:4px solid #fc6}
    div.bajolateral p {width:auto; height:auto}
    div.titulo {height:80px}
    div.titulo div{font-size:24pt}
    div.titulo div+div{width:20%}
    div.inferior, div.bajolateral {font-size:9pt}
    table.captur tr td div.campo input[type="text"]{width:20em}    
}

@media screen /*Telefonotes*/
and (min-width:480px) 
and (max-width:768px) {
    table.contenido tr td+td {font-size:9pt}
    div.titulo {height:100px}
    table.captur tr td div.campo input[type="text"]{width:22em}    
}

@media screen /*Tablets*/
and (min-width:769px) 
and (max-width:1000px) {
    div.titulo {height:120px}
    table.captur tr td div.campo input[type="text"]{width:30em}    
}

@media screen /*Monitores*/
and (min-width:1001px) 
and (max-width:1200px) {
    table.captur tr td div.campo input[type="text"]{width:35em}    
    div.titulo {height:130px}
}

@media screen /*Monitores Grandes*/
and (min-width:1201px) {
    table.captur tr td div.campo input[type="text"]{width:40em}    
}