a, menu, .img-logo, .info-container, .borrar, .imgs-center-bass, .bass, .frontales, .file{ 
	  	-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.ocult, .galery, .info-dogor, .info-flytrap, .info-naga, .info-puntudo, .sounds{
		-webkit-transition: opacity 0.7s;
		-moz-transition: opacity 0.7s;
		-ms-transition: opacity 0.7s;
		-o-transition: opacity 0.7s;
		transition: opacity 0.7s;
	}
	@font-face {
		font-family: 'dearjoe4regular';
		src: url('dj4trial-webfont.eot');
		src: url('dj4trial-webfont.eot?#iefix') format('embedded-opentype'),
			 url('dj4trial-webfont.woff') format('woff'),
			 url('dj4trial-webfont.ttf') format('truetype'),
			 url('dj4trial-webfont.svg#dearjoe4regular') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'coameiregular';
		src: url('coamei_r-webfont.eot');
		src: url('coamei_r-webfont.eot?#iefix') format('embedded-opentype'),
			 url('coamei_r-webfont.woff') format('woff'),
			 url('coamei_r-webfont.ttf') format('truetype'),
			 url('coamei_r-webfont.svg#coameiregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'coameibold';
		src: url('coamei_b-webfont.eot');
		src: url('coamei_b-webfont.eot?#iefix') format('embedded-opentype'),
			 url('coamei_b-webfont.woff') format('woff'),
			 url('coamei_b-webfont.ttf') format('truetype'),
			 url('coamei_b-webfont.svg#coameibold') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	@media all and (min-width:1440px) and (max-aspect-ratio: 16/7){
		.info{
			font-size:1.2em !important;
		}
	}
	@media all and (max-width:1340px) {
		.menu{
			font-size:1.5em !important;
		}
	}
	@media all and (max-width:1100px) {
		.menu, .texto{
			font-size:1.3em !important;
		}	
		.info{
			font-size:0.9em !important;
		}
		
	}
	@media all and (max-width:980px) {
		.menu{
			font-size:1.1em !important;
		}
	}
	@media screen and (min-aspect-ratio: 1300/720) and (max-width:1300px){
		.info-container{
			width:33% !important;
			padding:0 2% 0 2% !important;
		}
		.sounds{
			bottom:115px !important;
		}
		.progress{
			bottom:102px !important;
		}
		
	}
	



	html,body{
		position:relative;
		margin:0;
		border:none;
		padding:0;
		height:100%;
		width:100%;
		font-family:coameiregular;
		background-color:#000;
		font-size:10px;
		color:#FFF;
		overflow:hidden;
	}
	a{
		text-decoration:none;
		color:#FFFFFF;
	}
	a:hover{
		color:#b28711;
	}
	a img{
		position:absolute;	
	}
	.borrar{
		opacity:1;
	}
	.borrar:hover{
		opacity:0;
	}
	.img-fondo{
		position:absolute;
		z-index:0;
		opacity:0.95;
	}	
	.info-container{
		position:absolute;
		left:0;
		width:27.5%;
		top:0;
		background-color:#000;
		height:400%;
		padding:0 3% 0 3%;
		z-index:20;
	}
	.info{
		position:relative;
		width:100%;
		background-color:#000;
		height:25%;
		overflow:hidden;
	}
	.info-dogor, .info-puntudo, .info-naga, .info-flytrap{
		position:absolute;
		display:none;
	}
	.info .title{
		border-top:1px #b28711 solid;
		padding:8px 2% 0 0;
		margin-top:28%;
		font-family:coameibold;
		width:100%;
		text-align:left;
		color:#b28711;
		font-size:2.4em;
		
	}
	.info .descrip{
		border-bottom:1px #b28711 solid;
		
		position:relative;
		width:100%;
		font-size:1.3em;
		text-align:justify;
	}
	.descrip{
		margin:10px 0 0 0;
		padding:0 0 8px 0;
	}
	.info .caract{
		position:relative;
		float:left;
		list-style-type:disc;
		width:45%;
		padding:5% 2% 5% 2%;
		margin:0;
	}
	.info .caract-down{
		width:90%;
		padding:2.5% 2% 5% 2%;
		list-style-type:disc;
		margin:0;
		clear:left;
	}
	.info .caracr-down .int{
		list-style-type:none;
		margin-left:5%;
	}
	.caract-down, .caract{
		font-size:1.3em;
	}
	.bass{
		position:absolute;
		width:62.5%;
		height:93%;
		bottom:-15.3%;
		margin:0 2% 0 35.5%;
	}
	.flecha{
		position:absolute;
		top:34%;
		cursor:pointer;
		z-index:150;
	}
	.adelante{
		left:52%;
	}
	.atras{
		left:10%;
	}
	.flecha img{
		position:absolute;
	}
	.imgs-center-bass{
		position:relative;
		height:90%;
		width:400%;
		z-index:15;
	}
	.img-center{
		position:relative;
		text-align:left;
		height:100%;
		width:25%;
		float:left;
	}
	.cont-ocult{
		position:absolute;
		width:65%;
		height:100%;
		bottom:0;
	}
	.ocult{
		text-align:center;
		position:absolute;
		width:100%;
		height:63%;
		display:none;
	}
	.ocult img{
		height:100%;
	}
	.tira{
		position:absolute;
		bottom:16%;
		height:20%;
		width:65%;
		padding-top:0.8%;
		text-align:center;
		border-top:1px solid #b28711;
	}
	.frontales{
		cursor:pointer;
		height:100%;
		display:inline;
		z-index:200;
		margin-left:20px;
	}
	.frontales img{
		height:100%;
	}
	.frontales:hover{
		-webkit-filter: drop-shadow(2px 2px 3px  rgba(0,0,0,0.8));
		border-bottom:1px #b28711 solid;
	}
	.primeras2{
		margin-top:-5%;
		margin-left:5%;
	}
	.galery{
		width:32%;
		position:absolute;
		right:5%;
		top:0;
		display:none;
		max-width:250px;
	}
	.galery a{
		position:relative;
		float:left;
		width:31.33%;
		background-color:#FFF;
		margin:1%;
		overflow:hidden;
		text-align:center;
		max-width:75px;
		max-height:75px;
	}
	.galery>a>div{
		height:100%;
		width:100%;
	}
	.galery>a>div>span{
		display: inline-block;
    	vertical-align: middle;  /* vertical alignment of the inline element */
    	height: 100%;
	}
	.galery a div img{
		border-top:0px #555 solid;
		border-left:0px #555 solid;
		max-width:100%;
		max-height:100%;
		position:static;
		vertical-align: middle;
	}
	.galery a:hover{
		outline:2px #FFF solid;
	}
	.sounds{
		position:absolute;
		width:24%;
		right:5%;
		bottom:155px;
		display:none;
	}
	.sounds .title{
		position:relative;
		height:11%;
		margin:1%;
		width:100%;
		text-align:left;
		color:#b28711;
		font-family:coameibold;
		font-size:1.9vh;
	}
	.sounds .files{
		position:relative;
		background-color:#CCC;
		width:98%;
		margin:1% 1% 0 1%;
		height:75%;
		overflow:visible;
		font-size:1.35em;
	}
	.files{
		display:table;
	}
	.sounds .controls{
		position:absolute;
		background-color:#111;
		width:98%;
		height:28px;
		margin:0 1% 1% 1%;
	}
	.galery div a{
		text-align:left;
	}
	.play{
		padding:6px;
    	height: 70%;
	}
	.play-img{
		position:absolute;
		height: 60%;
		cursor:pointer;
	}
	.progress{
		position:absolute;
		right:6.5%;
		bottom:142px;
		height:5px;
		width:18.5%;
		z-index:50;
	}
	 .canvas{
		background-color:#FFF;
		height:100%;
		width:100%;
		cursor:pointer;
	}
	.file{
		height:30%;
		position:relative;
		width:100%;
		padding:5% 3%;
		color:#000;
		cursor:pointer;
	}
	.file:hover{
		color:#b28711;
	}