/* ==========================================================================
   1. GLOBAL STYLES
   ========================================================================== */

/* ====== Tener las fuentes disponibles. Le pones un nombre para usar tu internamente en este fichero "BebasNeue" y en la URL la situas donde este en tus archivos. La URL debe ser absoluta. ======= */
@font-face {
  font-family: "BebasNeue";
  src: url("../fonts/BebasNeue-Regular.woff2");
}
@font-face {
  font-family: "Magneto";
  src: url("../fonts/Magneto-Bold.woff2");
}


/* ====== Define el fondo de la página ======= */
body {
  background: url(../images/imagesv2/fondo.png) no-repeat center center;
  background-size: cover;

   }

/* ====== No hay scroll ni vertical ni horizontal ======= */
html{

}

/* ====== Define el tamaño de letra, el color y el tipo de letra a utilizar en todas las fuentes que sean p ======= */
p{
  font-size: 70px;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

a{
  text-decoration: none;
}

/* ====== Define el tamaño de letra, el color y el tipo de letra a utilizar en todas las fuentes que sean subtitulo ======= */

.titulo{
 border: 1px hidden black;
 position: relative;
}
.titulo a{
  font-size: 17vw;
  padding:0;
  color: white;
  font-family: "Magneto", sans-serif;

}

.subtitulo{
 border: 1px hidden black;
 margin-top: -5%;
 position: relative;
}


.subtitulo a{
  font-size: 4vw;
  padding-top:0;
  color: white;
  font-family: "BebasNeue", sans-serif;
}

.pie{
   border: 1px hidden black;
   margin-bottom: 0%;
   position: relative;
}

.pie a{
  font-size: 1vw;
  padding-top:0;
  color: white;
}
.logo{
  position: relative;
  width:75%;
  float:right;
  margin-right: 11%;
  top:3%;
  padding:0;
  border: 1px hidden black;
}
.iconos-left{
	border: 1px hidden black;
	position:relative;
	height: 50px;
	width: 13%;
	left:0%;
}
.logo-img{
	width: 100%;
	margin-top:-25%;

}

.textoOpciones{
  font-size: 3vw;
  color: white;
  padding: 3%;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.textoOpciones:hover{
  font-size: 4vw;
  text-decoration: underline;
  cursor: pointer;
}

.container{
  position: relative;
  padding-bottom: 56.25%;
  height: 0px;
  border: 1px hidden black;

}

.container iframe {
  position: absolute; top: 5%; left: 22.5%; width: 55%; height: 55%;
}


.modal-contacto {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalMusica {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalVideos {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 25%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalConciertos {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalRedes {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 20%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.font-contacto{
  font-size: 3vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-music{
  font-size: 3vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-music:hover{
  font-size: 4vw;
  text-decoration: underline;
}

.font-entradas{
  font-size: 4vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-entradas:hover{
  font-size: 5vw;
  text-decoration: underline;
}

.modal-content {
  margin-top: -2.5%;
  margin-left: 12.5%;
  display: relative;
  width: 75%;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}




/* ==========================================================================
   16. RESPONSIVE STYLES
   ========================================================================== */
/*
   Screens less than 1200px
   ------------------------ */
@media (max-width: 1200px) {
   }

/*
   Screens less than 992px
   ----------------------- */
@media (max-width: 992px) {
  }

/*
   Screens less than 768px
   ----------------------- */
@media (max-width: 768px) {
   }

/*
   Screens less than 480px
   ----------------------- */
@media (max-width: 480px) {

body {
  background: url(../images/imagesv2/fondo-pequeño.png) no-repeat center center;
  background-size: auto;

   }
p{
  font-size: 30px;
  color: white;
  margin-top:40%;
  margin-bottom: 10%;
  font-family: "BebasNeue", sans-serif;
}

/* ====== Define el tamaño de letra, el color y el tipo de letra a utilizar en todas las fuentes que sean subtitulo ======= */

.titulo{
 border: 1px hidden black;
 margin-top: 30%;
 position: relative;
}
.titulo a{
  font-size: 21vw;
  padding:0;
  color: white;
  font-family: "Magneto", sans-serif;

}

.subtitulo{
 border: 1px hidden black;
 margin-top: -7%;
 margin-left:20%;
 width:60%;
 position: relative;
}


.subtitulo a{
  font-size: 6vw;
  padding-top:0;
  color: white;
  font-family: "BebasNeue", sans-serif;
}

.pie{
   border: 1px hidden black;
   margin-bottom: 0%;
   position: relative;
}

.pie a{
  font-size: 2vw;
  padding-bottom:0;
  color: white;
}
.logo{
  position: relative;
  width:20%;
  height:100%;
  float:right;
  margin-right: 5%;
  margin-top:5%;
  padding:0;
  border: 1px hidden black;
}

.textoOpciones{
  font-size: 5vw;
  color: white;
  float:right!important;
  padding: 0%;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.textoOpciones:hover{
  font-size: 6vw;
  text-decoration: underline;
  cursor: pointer;
}

.iconos-left{
	border: 1px hidden black;
	position:relative;
	height: 50px;
	width: 34%;
	left:0%;
}
.logo-img{
	width: 100%;
	margin-top:-12.5%;

}

.container{
  position: relative;
  padding-bottom: 56.25%;
  height: 0px;
  border: 1px hidden black;

}

.container iframe {
  position: absolute; top: 15%; left: 10%; width: 80%; height: 80%;
}


.modal-contacto {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalMusica {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalVideos {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalConciertos {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 200px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modalRedes {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.font-contacto{
  font-size: 7vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-music{
  font-size: 7vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-music:hover{
  font-size: 8vw;
  text-decoration: underline;
}

.font-entradas{
  font-size: 7vw;
  color: white;
  margin-top:2%;
  margin-bottom: 2%;
  font-family: "BebasNeue", sans-serif;
}

.font-entradas:hover{
  font-size: 8vw;
  text-decoration: underline;
}

.modal-content {
  margin-top: -2.5%;
  margin-left: 12.5%;
  display: relative;
  width: 75%;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;

   }