@charset "utf-8";

@font-face {
	font-family:strange;
	font-style:normal;
	src: url('../fonts/strange.ttf') format('TrueType')
}

@font-face {
	font-family:fragment;
	font-style:normal;
	src: url('../fonts/fragment.ttf') format('TrueType')
}

@font-face {
	font-family:hacked;
	font-style:normal;
	src: url('../fonts/hacked.ttf') format('TrueType')
}

body {
	background-color:#fff;
	font: 24px Helvetica;
	margin:0;
}

header {
	background-image: url(../img/logo1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
	background-color:#000;
	padding:5px;
	top:0;
	left:0;
	font-size:0.9em;
	display:flex;
}

div#logo {
	align-self: center;
	flex-basis: 80%;
	margin-left:1.5%;
}

#logo a img {
	width:100px;
	height:100px;
}

#main {
	min-height: 800px;
	display: flex;
	display: -webkit-flex;
	flex-direction:row;
	-webkit-flex-direction: row;
	margin-right:5%;
	margin-left:5%;
}


#artpeli {
	padding:0px;
	flex-basis:50%;
	-webkit-flex: 3 1 50%;
	display:flex;
	flex-direction: column;
	justify-content:center
}

#artseries {
	order:2;
	padding:0px;
	flex-basis:50%;
	-webkit-flex: 2 1 50%;
	display:flex;
	flex-direction: column;
	justify-content: center
}

p a {
	font-size:1.2em
}

p a:link {
	color:black;
	text-decoration:none
}

p a:hover {
	color:#D5FB00;
	text-decoration:none
}

p a:active {
	color:black;
	text-decoration:none
}

p a:visited {
	color:black;
	text-decoration:none
}


nav {
	display:flex;
	align-self:flex-end;
	flex-basis: 20%;
	padding-right:2.5%;
	padding-left: 2.5%
}

.dropbtn {
    background-color:transparent;
    color: white;
	margin:1px;
    padding: 2px;
    font-size: 15px;
    border: none;
    cursor: pointer;
	text-transform: uppercase;
	font-weight:bold;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
	font-size:0.6em;
	text-transform: uppercase;
	font-weight:bold
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
	color:gray
}

.dropdown-content a:link {
	color:black
}

.dropdown-content a:visited {
	color:black
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color:#D5FB00
}


#artpeli article {
	flex-basis:25%;
	display:flex;
	flex-direction: column;
}


.contart {
	flex-basis: 90%;
	order:2
}

.fotoart {
	flex-basis:10%;
	order:1;
	max-height: 170px;
	text-align:center;
	margin-top:1%;
	position: relative;
    display: block;
}

.fotoart img {
	height:160px;
	padding:3px;
	margin:1%;
	background:linear-gradient(#7a93a5, #23232d);
	box-shadow:-11px -7px 15px 0px black
}

.fotoart img:hover {
	cursor:none
}

.fotoart2 {
	display: none;
    position: absolute;
	left:227px;
	top:20px;
    max-height: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.fotoart2 img {
	display:block
}


.fotoart:active .fotoart2  {
	display: flex;
	transform:scale(2,2);
}

div#artwrapper {
	margin-top:1%;
	margin-bottom:1%;
	padding:0px;
	display:flex;
	order:2;
	flex-basis:80%;
	-webkit-flex: 3 1 80%;
	border:2px solid #e0dfd9;
	border-radius:5px;
	background-color:#ccc;
	-webkit-box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);
	box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);
	margin-right:3px
}

div#artwrapper.pelicul {
	margin-top:1%;
	margin-bottom:1%;
	margin-right:5%;
	margin-left:5%;
	padding:0px;
	display:flex;
	order:2;
	flex-basis:80%;
	-webkit-flex: 3 1 80%;
	border:2px solid #e0dfd9;
	border-radius:5px;
	background-color:#ccc;
	-webkit-box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);
	box-shadow: 17px 19px 20px -4px rgba(0,0,0,0.75);	
}

div.re {
	visibility:hidden
}

h4#res {
	font-family:strange;
	font-size:0.9em;
	cursor:pointer;
	color:#711212
}

h4#resen {
	font-family:strange;
	font-size:0.9em;
	cursor:pointer;
	color:#98750c
}

img.pelicu {
	transition:linear 2s
}

img.pelicu:hover {
	transform:scale(2,2);
	transition:linear 2s
}

button.pel::before {
	background-image: url(../img/pelicon.png);
	background-size:20px 20px;
	background-position:0px 3px;
	background-repeat:no-repeat;
	display:inline-block;
	width:20px;
	height:23px;
	content:"";
}

button.ser::before {
	background-image: url(../img/sericon.png);
	background-size:20px 20px;
	background-position:0px 3px;
	background-repeat:no-repeat;
	display:inline-block;
	width:20px;
	height:23px;
	content:"";
}

.dropdown img {
	width:40px;
	height:40px;
	display:none
}

#artpeli h3, #artseries h3 {
	font-weight:bold;
	text-align:center;
	font-size: 1em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#3d5a1d, #6bbd38);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;	
}

h3#peli {
	font-weight:bold;
	text-align:center;
	font-size: 1em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#673923, #d21818);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3#peli1 {
	font-weight:bold;
	text-align:center;
	font-size: 0.7em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#673923, #d21818);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3#peli2 {
	font-weight:bold;
	text-align:center;
	font-size: 0.7em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#673923, #d21818);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3#seri {
	font-weight:bold;
	text-align:center;
	font-size: 1em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#b4ca08, #909e19);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3#seri1 {
	font-weight:bold;
	text-align:center;
	font-size: 0.7em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#b4ca08, #909e19);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3#seri2 {
	font-weight:bold;
	text-align:center;
	font-size: 0.7em;
	font-family:strange;
	animation:titulo 5s linear infinite;
	background:-webkit-linear-gradient(#b4ca08, #909e19);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes titulo {
  100% {
    background-position: 0 45px;
  }
}

#separador {
	height:100%;
	border:1px solid white;
	box-shadow: 1px 3px 12px white;
	margin-right:3px;
	margin-left:3px
}

.contart h4 {
	margin-right:3%;
	margin-bottom:3%;
	font-size:1em;
	background-color:black;
	max-height:100%;
	min-width:100%;
	color:white;
	text-align: center;
	font-family:hacked
}

.contart h4.pelis {
	margin-right:3%;
	margin-bottom:3%;
	font-size:1em;
	background-color:transparent;
	max-height:100%;
	min-width:100%;
	color:black;
	text-align: center;
	font-family:hacked
}

.contart h4.series {
	margin-right:3%;
	margin-bottom:3%;
	font-size:1em;
	background-color:transparent;
	max-height:100%;
	min-width:100%;
	color:black;
	text-align: center;
	font-family:hacked
}

.contart p {
	text-align: justify;
	font-size:0.6em;
	margin-right:4%;
	margin-left:4%;
	font-family:fragment
}

aside {
	margin-left:2%;
	margin-top:1%;
	margin-right:2%;
	margin-bottom:1%;
	padding:1%;
	border:1px solid 
	#dfdfdf;
	background-color:#fff;
	border-radius:7pt;
	order:3;
	flex-grow:1;
	flex-shrink:2;
	flex-basis:20%;
	-webkit-flex: 1 2 20%;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	-webkit-box-shadow: inset -2px 5px 33px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -2px 5px 33px 0px rgba(0,0,0,0.75);
box-shadow: inset -2px 5px 33px 0px rgba(0,0,0,0.75);
}

.contaside {
	display:flex;
	flex-direction:column;	
}

.contaside p {
	font-size:0.5em;
	flex-basis:95%;
	font-family:fragment
}

.contaside h4#robot {
	font-size:0.9em;
	flex-basis:5%;
	text-align:center;
	background-image: url(../img/mrrobot.jpg);
	background-size:contain;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family:hacked;
  margin:0;
  margin-bottom:20%
}

.contaside h4#got {
	font-size:0.9em;
	flex-basis:5%;
	text-align:center;
	background-image: url(../img/got.jpg);
	background-size:contain;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;	
  font-family:hacked;
  padding:0px;
  margin:0
}

@keyframes foto {
	0% {transform:translate(0px,0px)}
	
	25% {transform:translate(20px,0px)}
	
	50% {transform:translate(-20px,0px)}
	
	100% {transform:translate(0px,0px)}
}

img.seriess {
	
}

img.seriess:hover {
	animation:foto linear 1s;
}

@keyframes titulo1 {
  100% {
    background-position: 0 25px;
  }
}

span.puntos {
	color:#900606;
	font-style:italics
}

aside h3 {
	text-align:center;
	font-family:strange;
	font-size:0.7em;
	flex-basis:%;
	margin-bottom:25%;
	animation:titulo1 3s linear infinite;
	background:-webkit-linear-gradient(#3d5a1d, #6bbd38);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;	
}


#ultimre {
	flex-basis:25%;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	padding:0px;
	margin:0;
}

#ultimre article {
	margin:3px;
	text-align:justify
}

#otras {
	display:flex;
	flex-direction:column;
	flex-basis:25%;
	padding:0;
	align-items:flex-end;
}

#otras video {
	flex-basis:50%;
	height:100%;
	width:100%
}

footer {
	min-height:100px;
	background-color:#000;
	margin-top:1%;
	color:white;
	bottom:0;
	left:0;
	right:0;
	padding-top:1%;
	font-family:fragment
}

#foot {
	text-align:center;
	font-size:0.7em
}

a:hover {
	text-decoration:none;
	color:white
}

a:link {
	text-decoration:none;
	color:white
}

a:visited {
	text-decoration:none;
	color:white
}

a:active {
	text-decoration:none;
	color:white
}

@media all and (max-width:640px) {
	header {
		background-image:none;
		min-height:100px;
	}
	
	#main {
		flex-direction:column;
		-webkit-flex-direction:column
	}
	
	nav, aside {
		-webkit-order:0;
		order:0
	}
	
	#artwrapper {
		flex-direction:column;
		flex-wrap:wrap
	}
	
	nav {
		flex-direction:column;
		align-self:flex-start;
	}
	
	.dropbtn {
		font-size:13px
	}
	
	.dropdown-content {
		font-size:15px
	}
	
	#logo a img {
	width:80px;
	height:80px;
}

.fotoart img {
	height:200px
}

.fotoart img.pelicu {
	height:200px
}

article {
	flex-direction:column;
	flex-basis:10%;
}

div.fotoart {
	flex-basis:10%;
	order:1;
	max-height: 100px;
	text-align:center;
	margin-top:50%;
	margin-bottom:50%
}

@keyframes titulo {
	100% {background-position:0 90px}
}

div#ultimre, div#otras {
	visibility:hidden
}

.fotoart2 {
	left:100px;
}

.fotoart:active .fotoart2  {
	transform:scale(1,1);
}
button.ser {
	display:none
}

.dropdown img {
	display:inline;
	cursor:pointer;
}

button.pel {
	display:none
}
	nav, aside {
		min-height:50px;
		max-height:50px
	}
	
	footer {
		min-height:100px;
		font-size:0.8em
	}
}