.adDisplay{display:none !important;}
@font-face{
font-family:"ICM";
src:url("../../top21.woff");
font-display: swap;
}

/* PANTALLAS CHICAS 
*/



@media screen and (max-width:767px) {

body{font-size:1.2em}
.pc{display:none !important}
#bg, #tag{display:none !important;}

#btsn{padding:1px !important; margin:2px }
.menu2{width:15% !important}
.parte, .articulo{width:80% !important}

.botones{
   width:32px;
   height: 32px;
   border:solid 1px silver;
   margin-bottom:2px !important;
   margin-top:1px !important;
   border-radius:3px;
   display:inline-block;
   padding:0px !important;
}

#fs{width:3em !important;height:3em !important; vspace:10px !important; text-align:center; }

#ic{display:inline !important; font-family:"ICM"; font-size:1.5em; padding:10px; background:white; border-radius:3px;line-height:2;}
img{max-width:100% !important; }
.articulo img{border-radius:5px; vspace:10px}
#lista{padding:3px; }

.main{width:95%;  text-align:center; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:0px; font-size:1em;min-height:150%; background:#eeeeee; background:rgba(255, 255, 255, 0.1); }
}

/* PANTALLAS GRANDES
*/
@media screen and (min-width:767px) {
 
#fs{width:64px ; height:64px ; text-align:center;}
#ic{display:none}
#tag{font-family:"Arial"; display:block}
.articulo img, .articulo iframe{min-width:580px; max-width:580px !important; display:block; border-radius:10px; margin-bottom:10px}
#lista {margin:10% !important}
.mb{display:none !important}

.main{width:75%;  text-align:center; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:0px; font-size:1em;min-height:150%; background:#eeeeee; background:rgba(255, 255, 255, 0.1); }

}

/*  COMUN A TODAS LAS PANTALLAS
*/
 

* html body {
  overflow-y:auto;
  overflow-x: hidden;
  b-ackground: rgba(240, 250, 250, 0.5) !important;
}
html{xbackground:url("../img/bg_2022.jpg")}
body{
   scroll:auto;
  overflow-x:hidden;
  overflow-y:auto;
font-family:"Arial";
font-size:1em;
margin:0px;
-background:linear-gradient(to left, #eff,#fff) !important;

}

.menu2{
   position:absolute;
   top:0px;
   z-index:2;
   border-right:solid 0px dimgray;
   width:22%;
   height:2284px;
   margin:0px 0px 10px 0px;
   align:center;
   line-height:200%;
   over-flow:auto;
   transition: width 160ms;
   padding:3px;
   font-size:0.9em;
   font-weight:bold;
   text-align:center;

  padding-top:0px;
  scro-ll:auto;
font-family:Monaco,"Lucida Sans Typewriter","Lucida Typewriter","Courier New",Courier,monospace;
border-top:solid 5px #2d438a;
}

html>body .menu2 {position:fixed;text-align:center; padding-right:3px}
html>body .parte{
  width:70%;
  margin:2%;
  min-height:3824px;
  float:right;
  overflow:auto;
  padding-top:30px;
}

#blog{color:#555; font-family:Arial}
#lista{width:95% !important; text-align:left; line-height:1.7}
.cuadro{background:#2d438a; color:#fff; font-size:1em}
.cuadro>a{background:#2d438a;}

#fresultado{
  width:100%;
  min-height:240px;
  margin-top:10px;
  border:solid 3px black;
}

h1,h2,h3{top:50px;clear:left}

li {line-height: 170%;list-style-type: circle;margin-left:-10px; list-style-position: outside;}


hr { height: 1px; border: 0; color: #ffffff; background-color: #ffffff;}

A:link {text-decoration : none; color:#222; tesxt-shadow: 1px 0px 10px #fff}
A:visited {text-decoration : none; color:#222; tesxt-shadow: 1px 0px 10px #ff0;}
A:active {color:orange;}

.menu2 a{display:block; text-decoration:none; font-family:helvetica; text-transform: uppercase}
.menu2 A:link {font-family:Arial; text-decoration : none; color:#222; padding:3px;}
.menu2 A:visited {font-weight:thin;text-decoration : none; color:#222; padding:3px;}
.menu2 A:Hover {color:#F55; border-radius:3px}
.menu2 A:active { color:#f00;}

.post img{max-width:90%}
form {line-height: 170%}

input[type="text"], textarea {

  background: rgba(160, 180, 200, 0.4); 

}
.f{font-size:1.2em; padding:6px; width:85%; margin-left:auto;margin-right:auto; text-align:left; border:solid 1px #ddd; border-radius:3px}

.btn{border:solid 1px rgba(170, 170, 170, 0.2); padding:5px; cursor:pointer; font-size:0.9em;margin:4px;border-radius:3px; }

pre{text-align:left; width:250 !important};
pre{
  white-space: pre-wrap;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -o-pre-wrap; /* Opera 7+ */
}
form button {background:#777777;}

.cuadro{
  float:left;
  margin:3px;
  border-radius:5px;
  text-align:center;
  width:8em;
  height:3.7em;
  vertical-align: center;
padding-top:6px;
  padding:3px;
  overflow:hidden;
  position:relative;
  font-size:0.9em;
  }

.cuadro,.cuadroe{font-family:Arial !important;font-size:0.9em}
.cuadro a{text-decoration:none;display:block;margin:25px;color:#fff;vertical-align: middle; border-radius:5px;}
.cuadro:hover{background:#ffc; color:#f00; border-radius:5px;}
.cuadro a:visited{color:black}

#video:hover{height:100%; width:80%; }
#resultado {margin-left:auto; margin-right:auto; padding:10; background:#333; text-align:center}
#links{width:44%;float:left}
/* .f ,.btn{  background:rgba(0, 120, 250, 0.3);color:#000}
*/



#ic{display:none}

#bg{
position:fixed; 
 z-index:-1;
 top:0; 
 left:0;
 width:100%;
 height:100%;
filter:blur(0px);
display:none;
transform: rotateY(180deg);
 }

fieldset{width:95%;text-align:center;border:solid 1px #fff ;color:white !important; padding:3px; overflow:hidden; margin-left:auto; margin-right:auto}

#hr{ width:100%; position:fixed; top:0; left:0; height:10px; z-index:99;text-align:center; display:block;  clear: both;}

#bar{border-radius:3 !important; font-size:1em; font-face:Arial;  clear: both; padding:4px}
#bar>a:hover{background:white; color:black !important}
#bar>a{color:#fff; font-size:1em;border-radius:5% !IMPORTANT; padding:4px; }


#display{width:95%}
li{line-height:2; color:#222}
li:nth-child(2){color:#d00 !important ;color:red; }
li:nth-child(3){color:#f84 !important; }
li:nth-child(4){color:#0a0 !important}
textarea{background:ivory; color:#888;width:90%; min-height:300px; margin-left:auto; margin-right:auto}
  #blog{padding-top:20px;}
  
  video, iframe{frameborder:0;width:80%; min-height:240px;  border:0px solid black; backg-round:#ccf ;color:white; display:block} 
video{max-height:420px;}
#sdisplay{border-left:solid 1px orange}

li{line-height:2; color:#222; list-style-type: square;}

audio{width:98% !important; border-radius:3px}
mimg:hover{filter:grayscale(0%)}
mimg{filter:grayscale(100%)}


#a-{display:none}

/*
#a::before {
    content: " # ";
    color:indigo;

} 
 
#i::before {
    content: " * ";
    color:Red;
}
#v::before {
    content: " > ";
    color:darkcyan;
}

#t::before {
    content: " = ";
    color:darkyellow;
}
#frase::before {
    content: " § ";
    color:black;
} 
#l::before {
    content:" @ ";
    color:red;
} 
*/
fieldset{overflow:hidden;border-radius:5px}
fieldset:hover{height:auto}

#fs{border-radius:5%;  width:64px; height:64px; hspace:1px; padding:0px; margin:auto;}

.articulo{overflow-x: auto; width:70%; float:right; margin-top:3px; padding:2%; background:#fff }

#alert{background:#ffe; border-left:solid 3px ; padding:5px; border-top-right-radius:8px; border-bottom-right-radius:8px}


/* COLORES 
*/

.btn, .cuadro, .menu2, fieldset{   background: rgba(160, 180, 170, 0.4);}

#hr, #fs, #bar,  #audiofeed{color:#fff;   background:#549; } 

#tiempo::-webkit-slider-thumb, #tiempo::-moz-range-thumb{color:#fff;   background:#223} 
#fs:hover; #ic:hover{background:#223}
 #hr:hover{  background: #ddd}

#ic{background: rgba(250, 250, 250, 0.8);} 

h3, #ic, #alert, a:hover {color:#223}

 #hr:hover{
  animation-name: cambiarColor;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes cambiarColor {
  0% {
    background-color: tomato;
  }
  50% {
    background-color: #2d438a;
  }
}

a[target = '_blank']::before{
content:"";
color:#ffc;
}
#audiofeed{
position: fixed;
left: 0;
right:0;
bottom: 0;
width: 100%;
b-ackground:rgba(10, 10, 20, 0.9);
text-align: center;
z-index:99;
filter:invert(.1);
}
#audiofeed a{color:white; text-transform: uppercase}
#ctl{font-family:courier; text-align:center; font-size:1em; border-radius:50%;  background:rgba(50, 50, 50, 0.8); color:white; cursor: pointer;}

#resultado{display:none}

#controles{display:block; margin:3px}
#controles a{font-family:Arial; text-align:center; font-size:1em; width:48px; color:white; padding:5px; margin:8px; display:inline/block; }
#controles a:hover{color:#f44 !important}

#titular{font-family:Arial}

#clip{;filter: invert(1); opacity: 0.8;}


#tiempo, #tiempo:hover {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: rgba(250, 250, 250, 0.8);
  margin:0px;
border-radius:0px;
  border-top: solid 1px #555;
 bac--kground:#fff;
  }
#tiempo::-webkit-slider-thumb, #tiempo::-moz-range-thumb {
  height: 15px;
  width: 20px;
  -webkit-appearance: none;
  appearance: none;
  border: 0px;
  border-radius:0px;
}

/* Para el podcast rotar imagen */
@keyframes rotate360 {
     to { transform: rotate(360deg); }
}
#disco {border-radius:50%; ani--mation: 0.25s rotate360 infinite linear;  cursor: pointer;}
/* TODO: Add -vendor-prefixes for different browsers */

/* botones de play pausa */
.ctl {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px !important;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}
.ctl.paused {
  border-style: double;
  border-width: 0px 0 0px 60px;
}
.ctl:hover {
  border-color: transparent transparent transparent #404040;
}