@charset "utf-8";
/* CSS Document - ver 1.7.kick VirusVisal */

html, body {
	color: #036;
	background: #ccc;
	font-family: 'Ubuntu', sans-serif;
	font-size: 1em;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
h1, h2, h3 {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	margin: 5px 0;
} 
h1{	color: #036; font-size: 3em; border-bottom: 5px solid #f09;}
h2{font-style:italic;}
h3.kick {color: #222; background: #05ce78; padding: 15px 0;}
a {text-decoration: none;}
ul {margin: 0;}
ul li {list-style: none;}
.clear {clear: both;}

/** ESTRUCTURA **/
.contenedor {max-width: 1200px; margin: auto;}
#comic article,#illustracion article,#zoo article,#video article {margin:20px;}

/** HEADER **/
header {background: url("img/header-bk.jpg") top repeat-x; margin-bottom: 30px;}
#head-box {display: block; padding: 20px; width: 100%;}
#main-avatar{
	background: url("img/virus-avatar.png") no-repeat center content-box;
	display: block;
	margin: 0 5px;
	position: absolute;
	width:200px; height: 200px;
	z-index: 10;
}
#virusvisal {
	color: #036;
	background: url("img/pixel-acua.png")repeat;
	font-size: 3em;
	font-weight: 700;
	font-style: italic;
}
/***redes y menu***/
#redes-sociales, #main-menu {position: relative; z-index: 20;}
#redes-sociales ul, #main-menu ul, ul.redes-s {display: block; text-align: right; padding: 0 !important;}
#redes-sociales ul li, ul.redes-s li {display: inline-block; margin: 0 10px;}
#main-menu ul li {display: inline-block; margin: 0 10px 20px;}
	/***/
#redes-sociales {margin: 30px 0 25px;}
#redes-sociales  ul li a, ul.redes-s li a{
	height: 40px; width: 40px; display: block;
}
a.patreon {background: url("img/redes/ico-patreon.png") center no-repeat;}
a.patreon:hover {background: url("img/redes/ico-patreonH.png") center no-repeat;}
a.twit {background: url("img/redes/ico-twit.png") center no-repeat;}
a.twit:hover {background: url("img/redes/ico-twitH.png") center no-repeat;}
a.instagram {background: url("img/redes/ico-instagram.png") center no-repeat;}
a.instagram:hover {background: url("img/redes/ico-instagramH.png") center no-repeat;}
a.twitch {background: url("img/redes/ico-twitch.png") center no-repeat;}
a.twitch:hover {background: url("img/redes/ico-twitchH.png") center no-repeat;}
a.coma {background: url("img/redes/ico-coma.png") center no-repeat;}
a.coma:hover {background: url("img/redes/ico-comaH.png") center no-repeat;}

#main-menu ul li a {
	background: #036;
	color:#fff;
	font-weight: 700;
	padding: 5px 10px; 
	text-align: center;   
}
#main-menu ul li a:hover {background: #f09;}
a.subir {
	background: url("img/pixel-rosa.png") repeat; 
	color: #fff;
	display: block;
	font-style: italic;
	margin: 15px 0;
	position:fixed;
	right:0;
	bottom:0;
	padding:25px;
}

/*COMIC*/
#comic article {border-bottom: 2px dashed #666;}
#comic h3 {text-align: center;}
#comic a.leer-mas, #pag-comic a.leer-mas, #pag-comic-black a.leer-mas {
	background: #f09; 
	color: #fff;
	display: block;
	font-style: italic;
	margin: 15px 0;
	padding: 5px 10px;
}
#comic a.leer-mas:hover {padding-left: 20px;}
#comic a {color: #f09;}
#comic .w3-third {margin-top: 25px;}
#comic .preview img {display: block; width: 100%;}

/* APOYO */
#yo a.leer-mas, #apoyo a.leer-mas {
	background: #f09; 
	color: #fff;
	font-style: italic;
	margin: 15px 0;
	padding: 5px 10px;
}
#informacion ul li {list-style: square;}

/*HTML DE COMIC*/
html#pag-comic, #pag-comic body {background: #fff !important;}
html#pag-comic-black, #pag-comic-black body {background: #000 !important;}
#pag-comic ul, #pag-comic-black ul {margin: auto;}
#pag-comic ul li, #pag-comic-black ul li {list-style: none; text-align: center; margin:0;}
#pag-comic a.volver, #pag-comic-black a.volver {position:fixed; right:0; bottom:0;padding:25px;}