/* Benidorm */
/* RESET
-------------------------------------------------- */
html, button, input, select, textarea {color: #fff;font-family: 'Source Sans Pro', sans-serif;}
body {line-height: 150%;color: #fff; background: #136946 url(../images/fondo.jpg); background-repeat: no-repeat;background-size: cover !important; background-position: center center !important; min-height: 100vh;font-family: 'Source Sans Pro', sans-serif; margin: 0; padding: 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #fff; margin: 1em 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {font-weight: 300;}

*{ box-sizing: border-box }
*:hover, *:hover > a{ text-decoration: none; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; }
.relative { position: relative; }



/* General */
.full-width { width: 100%; height: auto; padding: 3rem  0; overflow: hidden;}
	.full-width.nopadding {padding: 0 0; }
.flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.flex.full{width: 100vw;}
.fw100{ font-weight: 100;}
.fw300{ font-weight: 300;}
.fw400{ font-weight: 400;}
.fw500{ font-weight: 500;}
.fw600{ font-weight: 600;}
.fw700{ font-weight: 700;}
/* font-sizes */
.fs64{ font-size: calc(32px + (64 - 32) * ((100vw - 300px) / (1600 - 300)));}
.fs48{ font-size: calc(26px + (46 - 26) * ((100vw - 300px) / (1600 - 300)));}
.fs42{ font-size: calc(24px + (42 - 24) * ((100vw - 300px) / (1600 - 300)));}
.fs36{ font-size: calc(22px + (36 - 22) * ((100vw - 300px) / (1600 - 300)));}
.fs32{ font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (1600 - 300)));}
.fs28{ font-size: calc(16px + (28 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs26{ font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs24{ font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));}
.fs18{ font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));}


/* Botones */
.btn{ -webkit-border-radius: 30px; border-radius: 30px; -moz-border-radius: 30px;}
/* Colores */
.c-white{color: #fff;}
	.c-bg-white{background-color: #fff;}
.c-green{color: #136946;}
	.c-bg-green{background-color: #136946;}
.c-black{color: #000;}
	.c-bg-black{background-color: #000;}
	
.container{ width: 100%; height: 100%; margin: 0; padding: 0 15px;position: relative; overflow: hidden;}
.player{ width: 100%; max-width: 1100px; margin: 0px auto; display: inline-block; position: relative; overflow: hidden;}
address,.address{ font-size: 20px; text-align: center; font-style: normal; padding: 20px 0; margin: 0px auto; width: 100%; max-width: 1100px; overflow: hidden; height: auto;}
.top{ position: relative; background: url(../images/top.png) top center no-repeat; background-size:contain !important; padding: 1px 20px;  height: 80px; width: 100%; max-width: 1136px;overflow: hidden;}
	.top .left{ float: left; clear: none; font-style: italic;font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1100 - 320)));line-height: calc(30px + (50 - 30) * ((100vw - 320px) / (1100 - 320))); text-transform: uppercase;}
	.top .right{ float: right; clear: none; font-style: italic; width:40%;max-width: 250px; font-weight: 600; display: inline-block;font-size: calc(11px + (18 - 11) * ((100vw - 320px) / (1100 - 320)));height: calc(20px + (60 - 20) * ((100vw - 320px) / (1100 - 320)));line-height: 130%; display: block;}
	.top .right .flex{ height: 100%; width: 100%;}
	.box{max-width: 650px; margin: 20px auto; padding: 30px; text-align:center;}
		.box img{display: block; margin: 0px auto; max-width: 95%;}
		.box h2{ display: block; text-transform: uppercase;font-size: calc(20px + (36 - 20) * ((100vw - 320px) / (1100 - 320))); padding-bottom: 20px;}
		.box audio{padding: 15px; }	
.bar{ width: 100%; height: auto; float: left; clear: both; overflow: hidden; padding: 8px 15px; text-align: center; display: block; background-color: #00A359; font-size: 20px; margin-bottom: 20px}
	.bar a{ text-transform:uppercase; text-decoration: none }
footer{ max-width: 90%; overflow: hidden; display: block; text-align: center; margin: 0px auto; float: none; clear: both;}
@media (max-width: 767px) {
	.top{ background-size:150%  !important; padding: 5px 10px; height: 40px; margin-bottom: 10px}
	address,.address{ font-size: 12px;padding: 10px 0;}
	.box{margin: 15px auto; padding: 15px;}

}