@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/*HEADER*/
.content-header{
    margin: 1em auto;
}
#contenr-nav {
    margin: 1em auto;
}
.nav-top{
     background-color: transparent;
}
.nav-top-bg {
    background-color: rgba(255,252,249,0.9);
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
border-radius: 100px;
width: 50px;
height: 50px;
padding: 0;
}
#btn-back-to-top svg{
     fill: #ffffff;
    height: 50px;
    width: auto;
}
a{
 text-decoration: none;
}
p{
    color: #000;
font-family: 'Lato', sans-serif;
font-size: 16px;
    line-height: 1.5 !important;
font-style: normal;
font-weight: 400;
}


h4{
    color: #000;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 20px; 
padding: 0;
    margin: 0;
    text-transform: uppercase;
}

#navbarHeader{
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    padding: 1em;
  background: none;
    top: 4em;
    border: 0;

}


#navbarHeader ul{
   display: table;
    padding: 1em;
      background: #ffffff;
    border-radius: 16px;
    width: 250px;

 

}
#navbarHeader li{
    border-bottom: 1px solid #000000;

}


#navbarHeader li a {
    color: #000000;
      
}
#navbarHeader li a:hover {
    color: #EA0000;
      
}

.active {
       color: #EA0000 !important;
}

.circulo-logo-header{
width: 55px;
height: 55px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #EA0000;
display: table;
    float: left;
    margin:0.4em 0.4em 0 0;
}

.circulo-logo-header:hover{
     border: solid 0.8em #D60202;
    background:#ffffff;
}
div.logobailarinas:hover ~ .circulo-logo-header{
     border: solid 0.8em #D60202;
    background:#ffffff;
    
}
.logobailarinas h1{
    font-family: Space Grotesk;
font-size: 25px;
font-weight: 400;
letter-spacing: 0em;
text-align: left;
    float: left;
color: #000000;
padding: 0.4em 0;
width: 70%;
display:table;
line-height: 1;
}
a.boton-pagina{
    font-family: Space Grotesk;
    font-size: 24px;
    text-transform: uppercase;
    padding:0 1em;
    border-bottom:  #F30000 3px solid;
    color: #000000;
    width: auto;
    text-align: right;
    float: right;
    line-height: 1.2;

}
.linea-negra-boton-pagina{
    position: absolute;
    display: block;
    right: -90%;
    top: 42%;
    height: 2px;
    width: 100%;
    background: #000000;
}
/*MENU GRAFICO INDEX
-----------------------*/
    .content-menu{
        width: 100%;
        height: 776px;
        margin: 0 auto;
    }
    .lineas-negras{
        fill:#1d1d1b
    }
    .circulos-rojos{
        fill:#d60202;
        animation-name: cambio-color;
        animation-duration: 1s;
         animation-iteration-count: infinite;
    }
#txt-mad hover{
    fill:#d60202;
}
#circulo-galicia{
        fill:#d60202;
        animation-name: cambio-color;
        animation-duration: 1s;
         animation-iteration-count: infinite;
    }

#circulo-barcelona{
        fill:#d60202;
        animation-name: cambio-color;
        animation-duration: 1.3s;
         animation-iteration-count: infinite;
    }
#circulo-madrid{
        fill:#d60202;
        animation-name: cambio-color;
        animation-duration: 1.6s;
         animation-iteration-count: infinite;
    }
.bg-gris{
    background: #F3F2F2;
}
.slide-menu-vertical img{
    margin-bottom: 0.4em;
}
.play-video{
    background: #D60202;
    border-radius: 100px;
    height: 130px;
    width: 130px;
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 29.189px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    text-transform: uppercase;
    padding: 6% 0;
    float: right;
}

footer ul{
justify-content:flex-end;
}
footer a.nav-link{
    font-family: Space Grotesk;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    padding: 0;
    margin: 0 0.5em;
    font-weight: 400;
    display: table;
    float: left;
    text-decoration: underline;
}
footer a.nav-link:hover{
    color: #d60202;
}
footer p{
    font-family: Space Grotesk;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-weight: 400;
    display: table;
    float: left;
    text-decoration: underline;
}
.circulo-footer{
display: block;
width: 30px;
height: 30px;
background: #D60202;
border-radius: 50px;
float: left;
margin: 0 1em 0 0;
}

/*TEXTO MARQUESINA*/
.marquee {
  width: 100%;
  height: 90px;
  overflow: hidden;
  margin-top: 1em;
}

.marquee li {
  font-size: 60px;
  font-family: Space Grotesk;
  font-weight: 500;
  color: #D60202;
}

.marquee__content {
  display: flex;
  list-style: none;
  animation: scrolling 20s linear infinite;
}

.marquee__item {
  flex-shrink: 0;
}

@keyframes scrolling {
  0% { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
/*END TEXTO MARQUESINA*/
/*IMAGEN MARQUESINA CONTACTO*/
.marquee-2 {
  width: 100%;
  height: 386px;
  overflow: hidden;
  margin-top: 1em;
}

.marquee-2 li {
  font-size: 60px;
  font-family: Space Grotesk;
  font-weight: 500;
  color: #D60202;
}

.marquee-2__content {
  display: flex;
  list-style: none;
  animation: scrolling 50s linear infinite;
}

.marquee-2__item {
  flex-shrink: 0;
}

/*END IMAGEN MARQUESINA CONTACTO*/

/*TEXTO MARQUESINA CONTACTO*/
.marquee-3 {
  width: 100%;
  height: 90px;
  overflow: hidden;
  margin-top: 1em;
}

.marquee-3 li {
  font-size: 50px;
  font-family: Space Grotesk;
  font-weight: 500;
  color: #000000;
}
.marquee-3 li a {

  color: #000000;
}
.marquee-3 li a:hover {
    color: #F30000;
}
.marquee-3__content {
  display: flex;
  list-style: none;
  animation: scrolling 20s linear infinite;
}

.marquee-3__item {
  flex-shrink: 0;
}
/* TEXTO MARQUESINA CONTACTO*/
@keyframes cambio-color {
  0%   {fill: red;}
  100% {fill: black;}
}

    .txt-grafic-menu {
        font-family: 'Lato', sans-serif;
        font-size:24px;
        fill:#ffffff;
    }
    
        
    a.circulo1:hover ~ .texto1,  a.circulo2:hover ~ .texto2, a.circulo3:hover ~ .texto3,  a.circulo4:hover ~ .texto4{
        fill: #d60202;
    }
a.circulo1:hover ,  a.circulo2:hover , a.circulo3:hover{
    filter: drop-shadow(3px 3px 1px rgb(214 2 2 / 0.4));
}
.texto1{
    display: block;
    width: auto;
}   

   
    a.circulo1{
        cursor: pointer;
    }
.icono1, .icono2, .icono3, .icono4{
    position: absolute;
}
.icono1{
    left: 0;
    top: 10%;
}

.icono1 span, .icono2 span, .icono3 span, .icono4 span{
    display: none;
}
a.icono1 span, a.icono2 span, a.icono3 span, a.icono4 span{
    text-decoration: none !important;
}
.icono3:hover{
    left:0%;
    bottom: 10%;
}
.icono1:hover span, .icono2:hover span, .icono3:hover span, .icono4:hover span {
    color: #d60202;
    display: block;
    text-align: center;
    transition: all 1s;
    font-family: 'Lato', sans-serif;
    line-height: 1; 
    font-weight: 500;
    margin-bottom: .5em;
    
}

.icono2{
    right: 0;
    top: 0;
}
.icono3{
    left:0%;
    bottom: 14%;
}
.icono4{
    right:20%;
    top: 25%;
}
/*END MENU GRAFICO INDEX
-----------------------*/

/*ACORDEON*/
.accordion-item .accordion-button{
    background: #ffffff;
    border-radius: 0;
    margin: 0;
}
/*ARCHIVOS*/
header#archivos{
      position: relative;
  background-color: #ffffff;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
header#archivos video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
p.autor{
        color: #252525;
font-family: 'Lato', sans-serif;
font-size: 12px;
    line-height: 1.5 !important;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}



.accordion-button{
    background: #ffffff;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 42px !important;
    color: #000000 !important;
    
}
.accordion-header span{
    color: #D60202;
}
.btn-descargas{
    border-radius: 28px;
    border: 1px solid #000;
    color: #000;
font-family: Lato;
font-size: 20px;
font-style: normal;
font-weight: 400;
}
.btn-descargas:hover{

    border: 1px solid #636363;
    color: #636363;
}
.btn-enviar{
    border-radius: 28px;
    border: 1px solid #000;
    color: #000;
font-family: Lato;
font-size: 20px;
font-style: normal;
font-weight: 400;
padding: 0.3em 3em
}
.btn-enciar:hover{

    border: 1px solid #636363;
    color: #636363;
}
.acco-proyecto .accordion-button{
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 20px !important;
    color: #000000 !important;
    border-radius: 50px;
    width: 60%;
    padding: 0.3em 1em;
    text-align: left;
    border: 1px solid #000000;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #000000 !important;
}

/*flechas animadas*/
 .arrow {
	 opacity: 0;
	 position: absolute;
	 left: 50%;
	 top: 90%;
	 transform-origin: 50% 50%;
	 transform: translate3d(-50%, -50%, 0);
}
 .arrow-first {
	 animation: arrow-movement 2s ease-in-out infinite;
}
 .arrow-second {
	 animation: arrow-movement 2s 1s ease-in-out infinite;
}
 .arrow:before, .arrow:after {
	 background: #000;
	 content: '';
	 display: block;
	 height: 3px;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 30px;
}
 .arrow:before {
	 transform: rotate(45deg) translateX(-23%);
	 transform-origin: top left;
}
 .arrow:after {
	 transform: rotate(-45deg) translateX(23%);
	 transform-origin: top right;
}
 @keyframes arrow-movement {
	 0% {
		 opacity: 0;
		 top: 85%;
	}
	 70% {
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
	}
}
 
/*END flechas animadas*/

/*CAROUSEL VERTICAL*/
.carousel-indicators::-webkit-scrollbar {
    width: 8px;
}

.carousel-indicators::-webkit-scrollbar-track {
    -webkit-box-shadow: 0; 
    border-radius: 0px;
    background: #F3F2F2;
}

.carousel-indicators::-webkit-scrollbar-thumb {
  background-color: #D60202;
     border-radius: 10px;
  outline: 3px solid #F3F2F2;
}
.carousel-indicators {
  position: unset;
  overflow-y:scroll;
  flex-direction: column;
  width: 235px;
  margin: 0;
    height: 869px;
}
.carousel-indicators img {
  width: 160px;
height: auto;

}
.carousel-indicators [data-bs-target] {
  text-indent: 0;
  width: auto;
  height: auto;
  opacity: 1;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.carousel-indicators [data-bs-target].active {
  color: darkgoldenrod;
}
.carousel-inner img {
  max-width: 580px;
 height: auto;
  margin: auto;
}
h1.titulo-rojo{
    color: #D60202;
font-size: 52px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
line-height: 47px;
margin-bottom: 0;
padding-bottom: 0;
}
.content-form h1{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 42px;
    text-align: right;
    color: #000000;
}
.form-contacto{
    margin: 3em auto;
}
.sobre-clara h1{
    font-family: Space Grotesk;
font-size: 88px;
font-weight: 500;
text-align: left;
color: #000000;
line-height: 0.9;
}
.sobre-clara h2{
    font-family: Space Grotesk;
font-size: 43px;
font-weight: 500;
text-align: left;
color: #000000;
line-height: 1;
    text-transform: uppercase;
    margin-top: 0.5em;
}
.sobre-clara hr{
    margin: 5rem 0;
}
.sobre-clara a{
    color: #000000;
}
.sobre-clara a:hover {
    color: #d60202;
}
.form-control{
    border-radius:28px;
    border-color: #000000;
}
.margen-texto-contacto{
    margin-left: 2em;
}

@media screen and (min-width: 576px) {
  .carousel {
    font-size: 1.3em;
  }

}

/*END CAROUSEL VERTICAL*/

/*circulo-play con texto giratorio*/

#texto-animado{
 top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    -webkit-animation: animText 8s infinite linear;
    -moz-animation: animText 8s infinite linear;
    animation: animText 8s infinite linear;
}

@keyframes animText {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}



/*END circulo-play con texto giratorio*/
.btn-modal{
    background:#ffffff;
    border: 0; 
}
.btn-modal img{
    width: 100%;
}
.btn-modal after, .btn-modal before {
    border: 0;
}
/*TEXTO MARQUESINA TESTIMONIOS*/
.marquee-4 {
  width: 100%;
  height: 110px;
  overflow: hidden;
  margin-top: 1em;
}

.marquee-4 li {
  font-size: 100px;
  font-family: Space Grotesk;
  font-weight: 400;
  color: #D60202;
  text-transform: uppercase;
 line-height: 1;
}


.marquee-4__content {
  display: flex;
  list-style: none;
  animation: scrolling 20s linear infinite;
}

.marquee-4__item {
  flex-shrink: 0;
}
@media only screen and (max-width: 600px) {
    .circulo-logo-header {
    width: 40px;
    height: 40px;
    margin: 0.6em 0.4em 0 0;
}
    .circulo-logo-header:hover{
     border: solid 0.5em #D60202;
    background:#ffffff;
}
    #navbarHeader{
        margin-top: 3em;
    }
    a.boton-pagina{
        font-size: 16px;
    }
    .logobailarinas h1{
        font-size: 20px;
    }

    
.bg-archivos{
height: 370px;
}
      header#archivos {
    background: url("../img/imagen-progecto.jpg")white no-repeat top center;
    height: auto
  }

  header#archivos video {
    display: none;
  }
    .marquee, .marquee-4{
        height: 60px;
    }
   .marquee li, .marquee-4 li{
        font-size: 50px;
    }
    .acco-proyecto .accordion-button{
        width: 80%;
        margin: 0 auto;
    }
    audio{
        width: 600px !important;
    }
    .accordion-header{
        margin-bottom: 1em;
    }
    .carousel-inner img {
        max-width: 250px;
    }
    .carousel-indicators img {
    width: 95px;
}
    .carousel-indicators {
    width: 163px;
    height: 379px;
}
    audio{
        width: 90%!important;
    }
    .box{
        height: 300px;
        margin: 0 auto;
    }
    .sobre-clara h1{
        font-size: 65px;
    }
        footer ul{
margin-top: 1em;
        font-size: 14px;
        justify-content:flex-start;
}
    footer a.nav-link{
        font-size: 14px;
    }
}