@font-face {
  font-family:'opensans';
  src: url(fonts/opensans.otf);
}
@font-face {
  font-family:'opensansx';
  src: url(fonts/OpenSans-ExtraBold.ttf);
}
@font-face {
  font-family:'opensansb';
  src: url(fonts/OpenSans-Bold.ttf);
}
@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'; font-size:12pt; margin:0px; padding:1%; position:relative;} 
p.p b, p.t b, p.ta b {font-family:monospace}
p.p i, p.t i, p.ta i {font-family:monospace; color:#048; font-weight:bold}
p.p u, p.t u , p.ta u{font-family:monospace; color:#800; font-weight:bold}
p.p, p.t, p.ta {position:relative; box-shadow:0px 0px 5px #444; padding:10px; padding-top:0px;  margin:1%; margin-right:20px; margin-bottom:20px; margin-top:0px; border-radius:10px; background-color:#def; margin-left:2%}
p.t, p.ta {box-shadow:none; background-color:transparent; margin:0px; padding:0px; margin-top:0px; margin-bottom:10px; margin-left:2%}

p.t span.img {width:50%; float:right; position:relative; overflow:hidden; border-radius:10px; box-shadow:2px 2px 8px #444; margin-right:5%; margin-left:2%}
p.t span.img img {width:94%; position:relative; display:inline-block; text-align:center; border-radius:10px; margin-left:3%; margin-right:3%; margin-top:3%}
p.t span.img span.txt {position:relative; font-size:90%; color:#444; text-align:center; font-style:italic; display:block; width:90%}


p.p span.intro{border:1px solid #08f; background-color:#ff9; font-size:24pt; color:#800; text-align:center; border-radius:15px; box-shadow:3px 3px 7px #666; left:-0.5em; top:-0.5em; padding:0.25em;  padding-top:0.125em; padding-bottom:0.125em; position:relative}
p.p span.txt {position:relative; width:68%; display: inline-block; vertical-align:top; margin-right:2%; text-align:justify; transition:width 1s}
p.p span.txt span.p {display:block}
p.p  span.txt span.p:first-letter {color:#800; font-size:250%}
p.p span.img {width:28%; text-align:center; display:inline-block; border:1px solid #666; border-radius:10px; box-shadow:2px 2px 5px #444; vertical-align:top; transition:width 1s; background-color:#eee}
p.p span.img img, p.p span.img iframe {position:relative; width:100%; height:auto; display:inline-block; border-radius:10px; vertical-align:middle}
p.p span.img img+i, p.p span.img iframe+i {margin:5%; position:relative; width:100%%; display:block; font-weight:normal; font-size: 80%; color:#444;}
p.p a {color:#00f; text-decoration:none}
p.p a:hover {color:#f00; background-color:#ff9}

big {font-size:120%}
h1,h2,h3,h4,h5,h6 {font-family:'opensans'; margin:0px; border:0px solid red}
h1.abo {color:#fff; vertical-align:top; text-align:left; height:auto; font-weight:bold; font-size:24pt; margin-bottom:20px; transition:font-size 1s}
h1.hd{font-size:170%; color:#000; background-color:#008090; border-radius:5px; height:1.2em; vertical-align:middle; transition:height 1s, font-size 0.5s, padding-top 1s, font-size 1s; padding-bottom:0.3em; font-weight:bold}
h1{color:#09f; text-shadow:2px 2px 4px #999; font-family:'opensansb'; font-size:250%; position:relative; z-index:0; height:1.5em}
h1 span{position:relative; top:0px; left:0px; color:#444; z-index:1; display:block}
h1 span+span{position:relative; top:-1.35em; left:0.04em; color:#09f; z-index:2; display:block}
h2{font-size:200%; color:#444; margin-left:5px}
h3{font-size:170%; color:#666; margin-left:10px}
h4{font-size:150%; color:#008; margin-left:15px}
h5{font-size:130%; color:#080; margin-left:20px}
h6{font-size:120%; color:#800; margin-left:25px}
h6.rss{font-size:80%; font-family:monospace; color:#008; margin:0px; padding:0px; padding-left:25px; position:relative; font-weight:normal; font-style:italic; display:inline-block; border:0px solid red; top:-0.5em}
table.main {width:100%; margin:0px; padding:0px; position:relative; z-index:10}
table.main h1.hd {color:#fff; margin:2px}
table.main tr.head td{height:150px; background-color:#ffffff; vertical-align:top; position:relative; text-align:center; border:0px solid red; padding:0px; padding-right:2%}
table.main tr.head td div.banner {border-radius:10px; background-image:url("../imagenes/bannermulti.jpg");background-size:1280px 150px ; background-repeat:repeat-x; background-position:0px 100%; height:150px; position:relative; display:block;  border:0px solid green; transition:background-size 1s, background-position 1s}
table.main tr.head td div.banner span#txtx {font-family:'opensansb'; display:inline-block; position:relative; font-size:0pt; text-shadow:0px 0px 8px #000000;   color:#ff9; width:75%; line-height:100%; transition:font-size 1s, opacity 0.5s}
table.main tr.head td div.banner+div.bannertexto{height:0; width:0px; position:relative; overflow:hidden; margin:0px; padding:0px; border:0px solid transparent}
table.main tr.head td div.bannerIdle:hover {background-position:100% 100%} 
table.main tr.head td.logo {width:170px; transition: width 1s; padding:0px;}
div.logo {
    position:absolute;
    bottom:0px;
    right:0px;
    width:100%;
    font-family:'opensans';
    font-weight:bold;
    font-size:14pt;
    height:auto;
    padding:5px;
    text-align:center;
    border:0px solid green;
}
div.logo span.img {
    position:absolute;
    right:5px;
    bottom:10px;
    width:100px;
    height:auto;
    display:inline-block;
    z-index:5;
    overflow:hidden;
    transition:height 1s, width 1s, left 1s, top 1s;
    border:0px solid blue;
    
}
div.logo span.img img {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    transition:top 1s;
    border:0px solid purple;
}
div.logo span.texto {
    position:absolute;
    display:inline-block;
    top:-200px;
    right:20%;
    border:0px solid #ff9900;
    text-align:center;
}
div.logo span.texto span.sub{
    position:relative;
    font-size:240%;
    vertical-align:top;
    display:inline-block;
    z-index:6;
    transition:font-size 1s;
    border:0px solid #f96;
    font-family:'opensansb'
    
}
div.logo span.texto span.sub+span.sub {
      font-size:100%
}


table.main tr.bodyhd td {position:relative; background-color:#008090; vertical-align:middle; text-align:center; height:auto}
table.main tr.bodyhd td h1.hd {color:#fff; height:auto; margin:0px; padding:0px}
table.main tr.bodyhd2 td, table.main tr.bodyhd3 td  {background-color:#fff; position:relative; border:0px solid blue;border-bottom:3px ridge #999;padding-top:5px}
table.main tr.bodyhd2 td div,table.main tr.bodyhd3 td div  {padding-left:1%; width:45%; vertical-align:top; display:inline-block; position:relative; transition:width 0.5s}

table.main tr.bodyhd2 td div ol, table.main tr.bodyhd3 td div ol {margin-left:20px; border:0px solid red; background:#eee; border-radius:10px; padding:5px; padding-left:2em; width:85%}
table.main tr.bodyhd2 td div ol li::marker, table.main tr.bodyhd3 td div ol li::marker {font-family:'opensansx'; color:#840}
table.main tr.bodyhd2 td div ol li, table.main tr.bodyhd3 td div ol li {font-family:'opensans'; color:#444; text-align:justify}
table.main tr.bodyhd2 td div ol li img, table.main tr.bodyhd3 td div ol li img {width:30%; float:right; margin:5px; margin-left:20px; transition:width 1s}
table.main tr.bodyhd2 td div ol li b, table.main tr.bodyhd3 td div ol li b{font-family:'opensansb'; color:#000}
table.main tr.bodyhd2 td div.txt,table.main tr.bodyhd2 td div.txt2, table.main tr.bodyhd3 td div.txt, table.main tr.bodyhd3 td div.txt2 {transition:margin-left 1s, margin-right 1s}
table.main tr.bodyhd2 td div img, table.main tr.bodyhd3 td div img {width:100%; position:relative; display:inline-block; border-radius:10px}
table.main tr.bodyhd2 td div h1.hd, table.main tr.bodyhd3 td div h1.hd  {color:#008090; height:auto; background-color:transparent; margin:0px; padding:0px}
table.main tr.bodyhd2 td div p.t, table.main tr.bodyhd3 td div p.t, table.main tr.bodyabo td div p.t, table.main tr.bodyhd2 td div p.ta, table.main tr.bodyhd3 td div p.ta, table.main tr.bodyabo td div p.ta  {color:#000000; text-align:justify}
table.main tr.bodyhd2 td div p.t:first-letter , table.main tr.bodyhd3 td div p.t:first-letter, table.main tr.bodyabo td div p.t:first-letter, table.main tr.bodyhd2 td div p.ta:first-letter , table.main tr.bodyhd3 td div p.ta:first-letter, table.main tr.bodyabo td div p.ta:first-letter   {font-size:250%; color:#800}

table.main tr.bodyhd2 td div.txt2 div.img, table.main tr.bodyhd3 td div.txt2 div.img {float:left; margin-right:10px; background-color:#eee; padding:15px; border-radius:10px; box-shadow:2px 2px 5px #444; margin-bottom:10px}
table.main tr.bodyhd2 td div.txt2 div.img img, table.main tr.bodyhd3 td div.txt2 div.img img {border-radius:10px}
table.main tr.bodyhd2 td div.txt2, table.main tr.bodyhd3 td div.txt2 {width:95%}
table.main tr.bodyhd2 td div.txt2 div.img  span.txt, table.main tr.bodyhd3 td div.txt2 div.img span.txt {text-align:center; font-family:'opensans'; font-style:italic; color:#444; display:block; font-size:90%}
table.main tr.bodyhd2 td div.txt2 i, table.main tr.bodyhd3 td div.txt2 i {font-size:85%; font-weight:normal; color:#060}
table.main tr.bodyhd2 td div.txt2 small, table.main tr.bodyhd3 td div.txt2 small {font-size:85%; font-weight:normal; color:#444}



table.main tr.bodyabo td {position:relative; z-index:0;  padding:0px; color:#000; text-shadow:0px 0px 0px #99f; font-weight:normal}
table.main tr.bodyabo td h1.abo {position:relative; z-index:30; color:#000; text-shadow:0px 0px 0px #fff; font-family:'opensansb'; font-size:250%}
table.main tr.bodyabo td div{width:94%;  margin:1%; position:relative; display:inline-block; z-index:20; background-color:transparent; opacity:0.85; padding:1%; border:10px solid #999; border-radius:20px}

table.main tr.bodyabo td p.p span.qryout {width:90%; border:0px solid transparent; font-family:monospace; font-size:90%; display:block}
table.main tr.bodyabo td p.p input[type="button"] {background-color:#0f4; padding:3px; font-size:100%; font-family:'opensansx'; border-radius:10px}

table.main tr.bodyabo td div span.txt,table.main tr.bodyabo td div span.txt2, table.main tr.bodyabo td div span.txt3  {position:relative; padding:0px; padding-top:-10px}
table.main tr.bodyabo td div span.txt,table.main tr.bodyabo td div span.txt2, table.main tr.bodyabo td div span.txt3 {display:inline-block; width:55%; margin-bottom:20px; vertical-align:top; transition: font-size 1s}
table.main tr.bodyabo td div span.img,table.main tr.bodyabo td div span.img2{position:relative; display:inline-block; margin:0px; margin-left:10px; border:3px solid #06c; border-radius:10px; box-shadow:3px 3px 6px #444; width:40%; height:auto; padding:0px; margin-bottom:20px; vertical-align:top; transition: width 1s, height 1s}
table.main tr.bodyabo td div span.img img, table.main tr.bodyabo td div span.img2 img {position:relative; display:inline-block; width:100%; height:auto; border-radius:7px; margin:0px; padding:0px; border:0px solid red; vertical-align:middle}


table.main tr.bodyabo td div span.txt2{width:80%}
table.main tr.bodyabo td div span.img2{width:15%}
table.main tr.bodyabo td div span.txt3 {width:95%}
table.main tr.bodyabo td div span.txt3 p.t ,table.main tr.bodyabo td div span.txt3 p.ta{text-align:justify}
table.main tr.bodyabo td div span.txt3 span.img {float:right; width:30%; background-color:transparent; text-align:center; font-style:italic; transition:width 1s, height:1s}
table.main tr.bodyabo td div span.txt3 span.img img {border-radius:0px}
table.main tr.bodyabo td div span.txt3:hover span.img {width:95%}


table.main tr.bot td {border:1px solid white; padding-top:10px}
table.main tr.bot td div, div.bot {font-size:80%; color:#444; text-align:center; margin-bottom:30px}
table.main tr.bot td div span {font-size:120%}


div.menu {position:absolute; bottom:30px; left:0px; z-index:20; border:0px solid #080; width:15px; height:15px}
div.menu span.symbol {width:1.5em; height:1.5em; margin:0px; padding:0px; text-align:center;display:block; font-size:180%; position:relative; border:0px solid red}
div.menu ul {position:relative; left:-240px; top:-10px; transition:left 0.5s; width:200px; background-color:#008090; border:0px solid red; margin:0px; padding:5px; padding-left:10px; padding-top:10px; border-radius:15px; box-shadow:5px 5px 10px #222;  text-align:left; font-size:14pt}
div.menu ul li {border:0px solid green}
div.menu ul li, a {height:1.5em; cursor:pointer; display:block; border-radius:5px; padding:5px; padding-top:0.6em; font-weight:bold; color:#00f}
div.menu ul li:hover, a:hover{background-color:#ccc; color:#f00}
a {height:auto; display:inline; text-decoration:none}

p.t a, p.ta a, ol li a, p.p a {color:#00f; font-family:'opensans'}
p.t a:hover, p.ta a:hover, ol li a:hover, p.p a:hover {background-color:transparent; color:#f00; text-decoration:underline; font-family:'opensansb'}
p.p input[type="text"] {border-radius:10px; padding:3px}

p.ta {background-color:#ddd; border-radius:10px; padding:10px}
p.ta a {color:#f00}


div.menu span.symbol:hover+ul, div.menu ul:hover {left:15px}

span.campo {border:1px solid #666; border-radius:10px; position:relative; margin:5px; padding:5px; padding-right:1em; background-color:#fff; display:inline-block; vertical-align:top; padding-bottom:-1.0em; height:auto; margin-bottom:0.5em}
span.campo span.titulo {background-color:#fff; position:absolute; top:-0.8em; left:1em; font-size:80%;padding:1px; display:inline-block}
span.campo span.titulo+span {position:relative; display:inline-block; width:auto; margin-top:4px; text-align:center}
span.campo span.titulo+span input[type="text"] {border:0px solid #fff; font-family:monospace; font-size:100%; position:relative; background-color:#eee; border-radius:10px}
span.campo span.titulo+span input[type="button"] {border:1px solid #444; margin:0px; margin-left:0.6em; margin-bottom:5px; font-size:150%; position:relative; border-radius:10px; box-shadow:2px 2px 5px #444; background-color:#0f0}
span.campo span.titulo+span input[type="button"]:active {left:2px; top:2px;  box-shadow:1px 1px 2px #444; border:2px solid #f00; margin-bottom:3px; background-color:#f00; color:#fff}
span.campo span.titulo+span+br+span.hinter, span.campo span.titulo+span+br+span.hinter2 {font-size:0px; color:#444; display:inline-block; padding:0px; padding-left:0.5em; padding-right:0.5em; position:relative; vertical-align:bottom; text-align:center; text-shadow:0px 0px 0px #fff; overflow:hidden; width:0em; text-align: center;  transition:font-size 0.25s, width 0.25s, height 0.25s}
span.campo span.titulo+span+br+span.hinter2 {font-size:80%}

span.campo span.titulo+span input+span, span.campo span.titulo+span textarea+span {border:1px solid black; border-radius:10px; padding:0.5em; padding-top:0.1em; padding-bottom:0.1em; margin:0px; margin-left:2px; font-size:9pt; font-family:"opensans"; font-weight:bold; text-shadow:0px 0px 0px #fff; cursor:pointer}

span.campo span.titulo+span input+span.on, span.campo span.titulo+span textarea+span.on {font-size:11pt; background-color:#f00; color:#fff}

table.main tr.bodyabo td div.fbk {border:1px solid #999; margin:0px; padding:10px; display:inline-block; margin-bottom:5px; width:auto; text-shadow:0px 0px 0px #fff; color:black}
table.main tr.bodyabo td div.fbk small {color:blue}


@media screen /*telefonos*/
and (min-width:0px) 
and (max-width:480px) {
    table.main tr.head td.logo {width:150px}
    div.logo span.texto span.sub {font-size:220%}
    h1{font-size:200%; border:0px solid green}
    h1.hd{font-size:160%; padding-top: 0em; padding-bottom:0em; height:2em}
    table.main tr.head td h1.hd {font-size:80%; padding-top: 0.4em; padding-bottom:0em;}
    h1.abo{font-size:16pt}
    table.main tr.bodyabo td div {width:90%}
    table.main tr.bodyabo td h1.abo{font-size:200%}
    table.main tr.bodyabo td div span.txt {font-size:70%; width:45%}
    table.main tr.bodyabo td div span.img {width:47%}
    table.main tr.bodyabo td div span.txt3 {font-size:80%}
    table.main tr.bodyabo td div span.txt3 span.img {width:35%}
    
    table.main tr.bodyhd2 td div.img, table.main tr.bodyhd3 td div.img {width:90%}
    table.main tr.bodyhd2 td div.txt, table.main tr.bodyhd3 td div.txt {width:90%; margin-left:20px; margin-right:20px;}
    table.main tr.bodyhd2 td div.txt h1, table.main tr.bodyhd3 td div.txt h1 {font-size:180%}
    table.main tr.bodyhd3 td div img {margin-left:5px}
    p span.txt {width:50%}
    p span.img {width:45%}
    p {margin:3%; margin-top:0px}
    p.p {margin-left:3%; margin-top:0px}
    table.main tr.bodyabo td div span.txt2{width:60%}
    table.main tr.bodyabo td div span.img2{width:30%}
    table.main tr.bodyhd2 td div.txt2,table.main tr.bodyhd3 td div.txt2{font-size:90%}
    table.main tr.bodyhd2 td div ol li img, table.main tr.bodyhd3 td div ol li img {width:95%; float:none; margin:5px;}
    p.t span.img {width:90%; margin-bottom:3%}

    
}

@media screen /*Telefonotes*/
and (min-width:480px) 
and (max-width:768px) {
    h1.hd{font-size:130%; height:1.7em; padding-top: 0em; padding-bottom:0em;}
    h1.abo{font-size:18pt}
    table.main tr.head td h1.hd {font-size:100%; padding-top: 0.4em; padding-bottom:0em;}
    table.main tr.bodyabo td div {width:91%}
    table.main tr.bodyabo td div span.txt {font-size:90%; width:45%}
    table.main tr.bodyabo td div span.img {width:48%}
    table.main tr.bodyhd2 td div.img, table.main tr.bodyhd3 td div.img {width:40%}
    table.main tr.bodyhd2 td div.txt, table.main tr.bodyhd3 td div.txt {width:50%}
    table.main tr.bodyhd2 td div.txt h1, table.main tr.bodyhd3 td div.txt h1  {font-size:180%}
    p span.txt {width:55%}
    p span.img {width:40%}
    p {margin:2%; margin-top:0px}
    p.p {margin-left:2%; margin-top:0px}
    table.main tr.bodyabo td div span.txt2{width:75%}
    table.main tr.bodyabo td div span.img2{width:20%}
    table.main tr.bodyhd2 td div ol li img, table.main tr.bodyhd3 td div ol li img {width:50%; float:right; margin:5px; margin-left:20px}
}

@media screen /*Tablets*/
and (min-width:769px) 
and (max-width:1000px) {
    h1.hd{font-size:190%; height:1.2em}
    table.main tr.bodyabo td div {width:92%}
    table.main tr.bodyabo td div span.txt {font-size:95%; width:45%}
    table.main tr.bodyabo td div span.img {width:45%}
    p {margin:2%; margin-top:0px}
    table.main tr.bodyabo td div span.txt2{width:75%}
    table.main tr.bodyabo td div span.img2{width:20%}
    table.main tr.bodyhd2 td div ol li img, table.main tr.bodyhd3 td div ol li img {width:40%; float:right; margin:5px; margin-left:20px}
}

@media screen /*Monitores*/
and (min-width:1001px) 
and (max-width:1200px) {
    h1.hd{font-size:150%; height:1.2em}
    table.main tr.bodyabo td div {width:93%}
    table.main tr.bodyabo td div span.txt {font-size:95%; width:45%}
    table.main tr.bodyabo td div span.img {width:45%}
    table.main tr.bodyhd2 td div ol li img, table.main tr.bodyhd3 td div ol li img {width:40%; float:right; margin:5px; margin-left:20px}
}

@media screen /*Monitores Grandes*/
and (min-width:1201px) {
}