@font-face {font-family: 'AlfaTitle'; src: url('fuentes/Vtks Money2.ttf') format('truetype');}
@font-face {font-family: 'Trajan'; src: url('fuentes/TrajanPro-Regular.otf') format('opentype');}

@font-face {font-family: 'Lithos'; src: url('fuentes/LithosPro-Regular.otf') format('opentype');}
@font-face {font-family: 'BlackKnightFLF'; src: url('fuentes/BlackKnightFLF.ttf') format('truetype');}
@font-face {font-family: 'M Ponderosa'; src: url('fuentes/MPonderosa.ttf') format('truetype')}

@keyframes mymove {50% {text-shadow: 0px 0px 25px #f00;}}
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

* { box-sizing: border-box; }

html, body {width: 100%; height: 100%;}
body {background: url('images/background.jpg'); color: #fff; font-size: 20px; max-height: 100%; overflow: hidden;}
header {position: absolute; top: 0; left: 0; width: 80%; height: 40px; text-align: left; color: white; display: inline-block; -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite;}
header a {text-decoration: none; color: #FFFFFF; transition: color 0.5s;}
header a:hover {color: red;}
nav {display: none;}
main {position: absolute; top: 50px; right: 0; bottom: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; padding: 3%; animation: fadeIn 5s 1;}
main a {font: 20px/24px 'Trajan'; color: red; text-decoration: none; transition: color 0.5s;}
main a:hover {color: #fc0; text-decoration: none;}
aside {position: absolute; left: 0; bottom: 0; text-align: center; z-index: 2; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}
aside a {display: block; text-align: center; color: #808080; opacity: 0.75; transition: color 1s, opacity 1s; text-decoration: none;}
aside a:hover {color: #f00; opacity: 1; text-decoration: none;}
h1 {text-align: center; font-family: 'AlfaTitle'; color: #f00;}
h2 {text-align: left; font-family: 'Trajan'; color: red;}
h3, h4, h5, h6 { font-family: 'Trajan';}
p {text-align: justify;}
select, option {font: 16px 'Trajan'; background-color: #000; color: #fff; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance:none;}

#mobile-menu {display: block; position: absolute; top: 0; right: 0; height: 40px; width: 55px;}
.maurice, .farias {font: 2.5rem/40px BlackKnightFLF;}
.akm {font: 2.5rem/40px 'M Ponderosa';}
.nuevalinea { display: table; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	main {top: 60px;}
	h1 {font-size: 40px;}
	h2 {font-size: 24px;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	header {font: 42px/50px 'AlfaTitle'; height: 50px;}
	main {top: 70px;}
	h1 {font-size: 50px;}
	h2 {font-size: 32px;}
	aside {width: 80px;}
	aside a {font-size: 2em;}
	.nuevalinea { display: inline; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	header {width: 40%; height: 60px;}
	nav {position: absolute; top: 0; right: 0; width: 60%; height: 60px; display: flex; justify-content: space-evenly; align-items: center;}
	nav a {text-align: center; color: #808080; outline: 0; opacity: 0.75; transition: color 1s, opacity 1s, text-shadow 1s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none;}
	nav a:active, nav a:focus, nav a:hover {outline: 0;}
	nav a i, nav a i:before {font-size: 2.5rem; display: block;}
	nav a div {font: 10px/10px 'Trajan';}
	nav a:hover {opacity: 1; color: #f00; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); text-decoration: none;}
	main {top: 60px; left: 80px; padding: 2rem; padding-left: 1rem;}
	aside {top: 60px;}
	aside a {font-size: 2rem;}
	h1 {font-size: 3rem;}
	#mobile-menu {display: none;}
	.maurice, .farias {font: 2.5rem/60px BlackKnightFLF;}
	.akm {font: 2.5rem/60px 'M Ponderosa';}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	body {font-size: 18px;}
	header {width: 35%;}
	header, nav {height: 90px;}
	nav {width: 65%;}
	nav a i, nav a i:before {font-size: 48px;}
	nav a div {font: 12px/10px 'Trajan';}
	main {top: 90px; left: 80px;}
	aside {top: 90px;}
	aside a {font-size: 2.5rem;}
	h1 {font: 4rem/90px 'AlfaTitle';}
	h2 {font: 1.75rem 'Trajan';}
	.maurice, .farias {font: 3rem/90px BlackKnightFLF;}
	.akm {font: 3rem/90px 'M Ponderosa';}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
	body {box-shadow: inset 0 0 300px 50px black;}
	header {width: 35%; height: 100px; max-height: 100px; }
	main {top: 100px; left: 80px; padding-left: 1rem; }
	nav {width: 65%; height: 100px;}
	nav a i, nav a i:before {font-size: 4rem;}
	nav a div {font-size: 16px; line-height: 16px;}
	aside {top: 100px; width: 80px; }
	aside a {font-size: 3rem; }
	h1 {font-size: 72px; line-height: 100px}
	h2 {font-size: 36px;}
	.maurice, .farias {font: 4.5rem/110px BlackKnightFLF;}
	.akm {font: 4.5rem/110px 'M Ponderosa';}
}



.mainout {animation: fadeOut 5s 1;}

.album_container {margin: 20px; display: inline-block; opacity: 0.4; cursor: pointer; text-align: center; transition: opacity 1s;}
.album_container:hover {opacity: 1;}
.album_title {text-align: center; font: 18px/24px 'Lithos';}
.album_details {vertical-align: top; text-align: center; font: 24px 'Lithos';}
.album_icon {margin: 10px; border-radius: 1em;}
.album_content {margin-left: 5%;}
.album_song {background: rgba(0,0,0,0.5); border-radius: 15px; display: block; width: 98%; padding: 10px; margin: 0 1% 40px 1%; box-shadow: 0px 0px 15px rgba(255,255,255,0.5); font: 18px/24px 'Lithos'; text-align: left;}
.album_song audio {width: 100%; margin-top: 10px;}

.novedades_item {background: rgba(0,0,0,0.5); border-radius: 30px; text-align: left; box-shadow: 0px 0px 15px rgba(255,255,255,0.5);}
.novedades_item img {width: 100%; vertical-align: middle; line-height: 100%; cursor: pointer;}

.lp_gallery_icon {display: inline-block; margin: 10px auto; opacity: 0.5; transition: opacity 0.5s; cursor: pointer;}
.lp_gallery_icon img {box-shadow: 0 0 10px #000; opacity: 0.5; transition: opacity 0.5s; cursor: pointer;}
.lp_gallery_icon:hover, .lp_gallery_icon img:hover {opacity: 1;}

.rojo {color: red;}

.fb_post {padding: 10px; margin: 10px; border: 1px solid #666; margin-bottom: 10px; font: 12pt Verdana, helvetica, sans-serif; text-align: justify; border-radius: 1em;}
.fb_post_link {background: #111;  border: 1px solid #aaa; border-collapse: collapse; margin-top: 10px; cursor: pointer;}
.fb_post a, .fb_post_link a {font: 12pt Verdana, helvetica, sans-serif;}
.fb_post_link_desc {padding: 10px; clear: right; cursor: pointer;}

.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#imgviewer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.5); z-index: 1000; visibility: hidden;}

@media screen and (orientation: portrait) {
	main {bottom: 50px; left: 0; padding: 1.5rem; }
	aside {top: calc(100vh - 50px); bottom: 0; width: 100%; height: 50px; transform: none; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;}
	aside a {display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2em;}
}