@font-face {font-family: 'icomoon'; src:url('fuentes/icomoon.eot?xtqe9s'); src:url('fuentes/icomoon.eot?#iefixxtqe9s') format('embedded-opentype'), url('fuentes/icomoon.woff?xtqe9s') format('woff'), url('fuentes/icomoon.ttf?xtqe9s') format('truetype'), url('fuentes/icomoon.svg?xtqe9s#icomoon') format('svg'); font-weight: normal; font-style: normal;}

@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');}

html, body {width: 100%; height: 100%;}

body {box-shadow: inset 0 0 300px 50px black; background: url('images/background.jpg'); color: #fff; font-size: 16px; font-family: 'Trajan'; max-height: 100%; overflow: hidden;}

header {position: absolute; top: 0; left: 0; width: 33%; height: 150px; font: 110px/110px 'AlfaTitle'; text-align: center; color: #fff; display: inline-block; -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite;}

header:after {content: "ALFA KUN";}



@-webkit-keyframes mymove {50% {text-shadow: 0px 0px 25px #f00;}}

@keyframes mymove {50% {text-shadow: 0px 0px 25px #f00;}}



main {position: absolute; top: 150px; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; overflow-y: auto; overflow-x: hidden; padding: 0 2% 3% 80px; animation: fadeIn 5s 1;}

@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

.mainout {animation: fadeOut 5s 1;}

@keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

nav {position: absolute; top: 0; right: 0; width: 66%; height: 150px; display: inline-block; text-align: center;}

nav a {text-align: center; color: #808080; outline: 0; opacity: 0.5; transition: color 1s, opacity 1s, text-shadow 1s; display: inline-block; width: 12%; margin: 5px 2%;}

nav a:active, nav a:focus, nav a:hover {outline: 0;}

nav a i, nav a i:before {font-size: 96px; display: block !important;}

nav a div {font: 16px/16px 'Trajan'; display: inline-block;}

nav a:hover {opacity: 1; color: #f00; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); text-decoration: none;}

aside {position: absolute; top: 60%; transform: translateY(-50%); left: 0; width: 80px; text-align: center; z-index: 2;}

aside a {display: block; font-size: 48px; margin: 16px auto; text-align: center; color: #808080; opacity: 0.5; transition: color 1s, opacity 1s;}

aside a:hover {color: #f00; opacity: 1; text-decoration: none;}

h1 {text-align: center; font: 72px/100px 'AlfaTitle'; margin-top: -20px; color: #f00;}

h2 {text-align: left; font: 36px 'Trajan'; color: red;}

p, ul, ol, li {font: 12pt Verdana, helvetica, sans-serif; text-align: left;}

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;}

main a {font: 18px/24px 'Trajan'; color: red; text-decoration: none; transition: color 0.5s;}

main a:hover {color: #fc0; text-decoration: none;}



.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; max-height: 240px; padding: 15px; text-align: left; margin: 0 5% 40px 5%; box-shadow: 0px 0px 15px rgba(255,255,255,0.5); font: 12pt Verdana;}

.novedades_item .videoimg {vertical-align: middle; line-height: 100%; cursor: pointer;}

.novedades_item div {height: 210px; overflow-x: hidden;}



.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 (max-width: 1050px) {

	header {font: 90px/90px 'AlfaTitle';}

	header, nav {height: 100px;}

	nav a i, nav a i:before {font-size: 80px;}

	nav a div {font: 12px/12px 'Trajan';}

	main {top: 120px; padding: 0 2% 3% 8%;}

	h1 {font-size: 60px;}

	.novedades_item div {height: 150px;}

}



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

	header {font: 60px/60px 'AlfaTitle'; width: 30%; height: 60px;}

	nav {width: 70%; height: 60px;}

	nav a {margin: 7px 1%;}

	nav a i, nav a i:before {font-size: 48px;}

	nav a div {font: 10px/10px 'Trajan';}

	main {top: 80px; padding: 0 2% 3% 9%;}

	h1 {font-size: 50px;}

	aside a {font-size: 2em; margin: 8px auto;}

}



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

	header {font: 42px/42px 'AlfaTitle'; width: 30%; height: 50px;}

	nav {width: 70%; height: 50px;}

	nav a {margin: 10px 1%;}

	nav a div {display: none;}

	main {top: 70px; padding: 0 2% 3% 12%;}

	h1 {font-size: 50px;}

	h2 {font-size: 32px;}

	aside {width: 12%;}

	aside a {font-size: 2em; margin: 5px auto;}

	.novedades_item {max-height: 480px;}

}



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

	header {font: 36px/50px 'AlfaTitle'; height: 50px;}

	nav {height: 50px;}

	nav a i, nav a i:before {font-size: 36px;}

	main {top: 60px;}

	h1 {font-size: 40px;}

	h2 {font-size: 24px;}

	p {font-size: 10pt;}

}



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

	header {font: 30px/30px 'AlfaTitle'; height: 40px; text-align: center;}

	header, nav {height: 40px;}

	nav a i, nav a i:before {font-size: 30px;}

	main {top: 50px;}

}



@media screen and (orientation: portrait) {

	header {width: 25%;}

	nav {width: 75%;}

	header:after {content: "AKM";}

	main {bottom: 50px; padding: 0 3% 3% 3%;}

	aside {top: inherit; bottom: 0; width: 100%; height: 50px; transform: none;}

	aside a {display: inline-block; font-size: 2em; width: 18%; margin: 3px 0;}

}