@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'; font-size:12pt; margin:0px; padding:0px} 
h1,h2,h3,h4,h5,h6 {margin:0px; border:0px solid red}
h1.abo {color:#fff; vertical-align:top; text-align:left; height:auto}
h1.hd{font-size:250%; color:#000; background-color:#990000; border-radius:5px; height:1.2em; vertical-align:middle; padding-bottom:0.3em; margin-right:5px; margin-bottom:5px; transition:height 1s, font-size 0.5s, padding-top 1s}
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}
table.main {width:100%; margin:0px; padding:0px; position:relative; z-index:10}
table.main h1.hd {color:#fff}
table.main tr.head td{height:3em; background-color:#ffffff; vertical-align:bottom; position:relative; text-align:center; border:0px solid red}
table.main tr.head td.logo {width:170px; transition: width 1s}
div.logo {
    position:relative;
    width:100%;
    font-family:'bebas';
    font-size:14pt;
    text-align:left;
    height:105px;
}
div.logo span.img {
    position:absolute;
    width:65px;
    height:65px;
    left:10px;
    display:inline-block;
    z-index:5;
    overflow:hidden;
    transition:height 1s, width 1s;
    border:0px solid red;
    
}
div.logo span.img img {
    position:relative;
    display:block;
    width:100%;
    left:0px;
    top:0px;
    transition:top 1s;
    border:0px solid green;
}
div.logo span.texto {
    position:absolute;
    display:inline-block;
    top:45%;
    left:42%;
}
div.logo span.texto span.sub{
    position:relative;
    font-size:250%;
    vertical-align:top;
    display:inline-block;
    z-index:6;
    transition:font-size 1s
    
}
div.logo span.texto span.sub+span.sub {
      font-size:100%
}


table.main tr.head td img {height:100px; display:inline-block;}
table.main tr.bodyhd td {position:relative; background-color:#990000; vertical-align:middle; text-align:center}
table.main tr.bodyhd td h1.hd {color:#fff; margin-top:0.2em}
table.main tr.bodyhd2 td {background-color:#fff; position:relative}
table.main tr.bodyhd2 td div {width:47%; vertical-align:top; display:inline-block; position:relative; transition:width 0.5s}
table.main tr.bodyhd2 td div.txt {transition:margin-left 1s, margin-right 1s}
table.main tr.bodyhd2 td div img {width:100%; position:relative; display:inline-block}
table.main tr.bodyhd2 td div h1.hd {color:#990000; height:auto; background-color:transparent}
table.main tr.bodyhd2 td div p {color:#000000}

table.main tr.bodyabo td {position:relative; z-index:0; background-image:url(imagenes/abodark.jpeg); background-size:cover; background-position:50% 50%; padding:5%}
table.main tr.bodyabo td h1.abo {position:relative; z-index:30}
table.main tr.bodyabo td div{width:47%; color:#fff; position:relative; display:inline-block; z-index:20}

table.main tr.bot td div {font-size:80%; color:#990000; text-align:center; margin-bottom:30px}
table.main tr.bot td div span {font-size:120%}


div.menu {position:absolute; top:4em; left:0px; z-index:20}
div.menu span.symbol {width:2em; padding:3px; text-align:center;display:block; font-size:180%; position:relative}
div.menu ul {position:relative; left:-215px; transition:left 0.5s; width:200px; background-color:#990000; border:0px solid red; margin:0px; padding:5px; padding-left:10px; padding-top:30px; border-radius:5px; text-align:left}
div.menu ul li {height:1.5em; cursor:pointer; display:block; border-radius:5px; padding:5px; padding-top:0.6em; font-weight:bold; color:#fff}
div.menu ul li:hover{background-color:#999; color:#000}
div.menu span.symbol:hover+ul, div.menu ul:hover {left:5px; top:9px}

@media screen /*telefonos*/
and (min-width:0px) 
and (max-width:480px) {
    table.main tr.head td.logo {width:150px}
    div.logo span.img {width:60px; height:60px; border:0px solid green}
    div.logo span.img img {top:-3px}
    div.logo span.texto span.sub {font-size:220%}
    h1.hd{font-size:110%; padding-top: 0.5em; padding-bottom:0em; height:2em}
    table.main tr.bodyabo td div {width:75%}
    table.main tr.bodyhd2 td div.img {width:95%}
    table.main tr.bodyhd2 td div.txt {width:90%; margin-left:20px; margin-right:20px;}
    table.main tr.bodyhd2 td div.txt h1 {font-size:180%}

    
}

@media screen /*Telefonotes*/
and (min-width:480px) 
and (max-width:768px) {
    h1.hd{font-size:140%; padding-top: 0.2em; padding-bottom:0em; height:1.7em}
    table.main tr.bodyabo td div {width:65%}
    table.main tr.bodyhd2 td div.img {width:30%}
    table.main tr.bodyhd2 td div.txt {width:67%}
    table.main tr.bodyhd2 td div.txt h1 {font-size:180%}
}

@media screen /*Tablets*/
and (min-width:769px) 
and (max-width:1000px) {
    h1.hd{font-size:230%; padding-bottom:0.3em; height:1.2em}
    table.main tr.bodyabo td div {width:55%}
}

@media screen /*Monitores*/
and (min-width:1001px) 
and (max-width:1200px) {
}

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