*{
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;

}

body{
    background: #fff;
    position: relative;
    padding-bottom: 25em;
    min-height: 250vh;
    font-family: 'Poppins', sans-serif;
}






/*banner principal*/
.bannerprincipal{
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #F5F5F5;
	background-size: cover;
	background-position: center;
	transition: all .1s ease-out;
	background-image: url(../img/wallpaper/1.jpeg);
	animation: bannerprincipal 28s infinite linear;
}
.bannerprincipal-content{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #FFF;
	background-color: rgba(0, 9, 16, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.bannerprincipal-content img{
	width: 500px;
}
.bannerprincipal-content a{
	text-decoration: none;
	color: #FFF;
	padding: 9px 20px;
	border: 1px solid #FFB100;
	text-transform: uppercase;
	transition: all .3s ease-in-out;
}
.bannerprincipal-content a:hover{
	background-color: #FFB100;
	color: #333;
}
@keyframes bannerprincipal{
	0%{
		background-image: url(../img/wallpaper/1.jpeg);
	}
	25%{
		background-image: url(../img/wallpaper/1.jpeg);
	}


	26%{
		background-image: url(../img/wallpaper/portada1.jpg);
	}
	50%{
		background-image: url(../img/wallpaper/portada1.jpg);
	}


	51%{
		background-image: url(../img/wallpaper/portada2.jpg);
	}
	75%{
		background-image: url(../img/wallpaper/portada2.jpg);
	}
	

	76%{
		background-image: url(../img/wallpaper/portada3.jpg);
	}
	100%{
		background-image: url(../img/wallpaper/portada3.jpg);
	}

}
/* END banner principal*/

















.bgscroll{
  background-color: #000;
}


.section-padding{
    padding: 100px 0;
}

.carousel-item{
    height: 100vh;
    min-height: 300px;
}

.carousel-caption{
    bottom: 0px;
    z-index: 2;
}


/*.carousel-caption h1{
    font-family: 'Poppins', sans-serif;
    font-size: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 20px;
}*/

.carousel-caption p{
    width: 60%;
    margin: auto;
}
.btn-warning{
    background-color:  #FFB100;
    font-family: 'Poppins', sans-serif;
}
.btncar{
  margin-bottom: 30px;
  font-family: 'Poppins', sans-serif;
}

.logotipo{
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  padding-top: 10px;
  font-family: 'Gotham', sans-serif;
}

span{
    color: #FFB100;
    font-family: 'Gotham', sans-serif;
}


.imglogo2{
  width: 700px;
  height: 600px;
  padding-top: 50px;
}

.carousel-inner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}



.bx{
  color: white;
}
.nav-link:hover{
  color: rgb(228, 225, 225);
}
nav{
  color: white;
}
.cool-link{
  color: white;
}
.cool-link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s;
    color: #fff;
}


.cool-link:hover::after{
    width: 100%;
    transition: width .3s;
    color: #fff;
}



.navbar li{
  color: white;
}

.navbar li a{
    font-size: 18px;
    font-family: 'Gotham', sans-serif;
    text-decoration: none;
    color: white;
    font-weight: 400;
}

.navbar-toggler:focus{
  box-shadow: none;
  color: white;
}




.bg .navbar-brand:focus,
.bg .navbar-brand:hover{
    color: white;
}
.bg .navbar-nav .navbar-link{
    color: white;
}

.w-100{
    height: 100vh;
} 

 


/* ===  responsive slider=== */
@media only screen and (min-width: 768px) and (max-width: 991px){
    .carousel-caption{
        bottom: 10px;
    }
    .carousel-caption p{
        width: 100%;
    }
    .carousel-caption a{
        padding: 13px 15px;
  }
    .carousel-caption img{
        width: 100%;
    }
}
@media only screen and (max-width: 767px){
    .navbar{
        text-align: center;
    }
    .logotipo{
      font-size: 14px;
    }
    .navbar li a{
      font-size: 12px;
      font-weight: 400;
    }
    
    
    .carousel-caption{
        bottom: 60px;
    }
 
    .carousel-caption p a{
        width: 100%;
        font-size: 12px;
    }
    .carousel-caption img{
      width: 100%;
      height: 50vh;
      padding-bottom: 10vh;
      align-items: center;
    }
    
}



/*cards*/
.card{
  box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
  cursor: default;
  transition: all 400ms ease;
  background-position: center;
  background-size: cover;
}

.card:hover{
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-3%);
}


.card img{
    width: 100%;
    height: 400px;
}




/*card-buttom*/
/*.button-container {
    position: relative;
    width: 150px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    overflow: hidden;
    transition: 0.5s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #000;
    font-family: 'Poppins', sans-serif;
  }
  
  .button-container button {
    width: 101%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    background: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    border: none;
    color: #000;
    cursor: pointer;
    animation: anim2 0.7s steps(22) forwards;
    padding-top: 3px;
  }
  
  .button-container button:hover {
    animation: anim1 0.7s steps(22) forwards;
  }
  
  .mask {
    position: absolute;
    color: #fff;
    text-align: center;
    width: 101%;
    font-family: 'Poppins', sans-serif;
    font-weight: lighter;
    font-size: 22px;
    margin-top: 3px;
    overflow: hidden;
  }
  
  @keyframes anim1 {
    from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
    to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }
  
  @keyframes anim2 {
    from {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
    to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
  }*/

  /*BARBERS*/
.h51{
    font-size: 18px;
    font-family: 'Gotham', sans-serif;

}
.h21{
    font-weight: 600;
    font-size: 32px;
    font-family: 'Gotham', sans-serif;
}

.barbers i{
  color: #000;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 7px;
}

.fond{
    position:absolute;
    padding-top:85px;
    top:0;
    left:0; 
    right:0;
    bottom:0;
    background-color:#65C6BB;
}

  .carreaux_presentation_light{
    width: 100%; 
    height: 400px;
    background-size: cover;
    overflow: hidden;
    position: relative;
    background-position: center;
}
  .carreaux_presentation_light .shadow_swhow_mini
  {
    background-color:rgba(19,30,33,0.4);
    position: absolute;
    z-index: 1000;
    top:0;left:0;right:0;bottom:0;
    
  }
  .carreaux_presentation_light:hover .shadow_swhow_mini
  {
    background-color:rgba(16,23,41,0);
  }
  .carreaux_presentation_light .deroul_titre
  {
    position: absolute;
    text-transform: uppercase;
    font-family: 'Roboto';
    padding: 7px;
    z-index: 1000;
    top:60%;left:-80%;
    color: #000;
    font-weight: 500;
    font-size: 14px; width: 80%;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
  
  }
  .carreaux_presentation_light:hover .deroul_titre
  {
    background-color:#B7950B; left:0px;
    
  }
  .carreaux_presentation_light .deroul_soustitre
  {
    position: absolute;
    font-family: 'Roboto';
    padding: 5px;
    z-index: 1000;
    top:60%;right:-85%;
    margin-top: 25px;
    color:#000;
    font-weight: 500;
    font-size: 14px; width: 80%;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
  }
  .carreaux_presentation_light:hover .deroul_soustitre
  {
    background-color: #FFB100;right:0px;
  }



  /*HISTORY*/

.history p{
    margin-top: 30px;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}
.history h3{
    margin-top: 15px;
    font-size: 43px;
    font-weight: 900;
    font-family: 'Cormorant SC', serif;
}






/*CONTACT*/

.ubicacion h3{
    margin-top: 15px;
    font-size: 35px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    
}
.contact p{
    text-align: left;
    margin-top: 50px;
    line-height: 2;
    font-family: 'Poppins', sans-serif;
}
.ubicacion .map{
  height: 480px;
}















/*BANNER*/
.banner{
    margin: 0;
    padding: 0;
    width: 100%;
}

.parallax-completo{
    width: 100%;
    height: 425px;
    background-image: url(../img/wallpaper/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}
.texto-banner{
    padding: 18px;
    width: 1100px;
    text-align: center;
    color: #fff;
}
.texto-banner p{
  font-family: 'Poppins', sans-serif;
}

.banner .texto-banner h2{
    font-weight: 700;
    font-size: 60px;
    font-family: 'Gotham', sans-serif;
}
.banner .texto-banner h5{
  font-weight: 500;
  font-size: 18px;
  font-family: 'Gotham', sans-serif;
}

@media only screen and (min-width: 768px) and (max-width: 991px){
  
}
  
@media only screen and (max-width: 767px){
  .texto-banner{
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .texto-banner p{
    font-size: 15px;
  }
  .texto-banner h5{
    font-size: 18px;
    font-weight: 600;
  }
  .texto-banner a{

    margin-bottom: 20px;
  }
  .texto-banner h2{
    font-size: 35px;
  }
}

.promo2{
  align-items: center;
  justify-content: center;
}
.promo2 p{

  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.promo2 h3{
  font-size: 28px;
  font-weight: 500;
}
.promo2 h2{
  font-size: 50px;
  font-weight: 900;
  font-family: 'Gotham', serif;
}



.promo{
  
  background-image: url(../img/wallpaper/portada3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 390px;
  color: #fff;
}
.promo h4{
  font-size: 18px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}
.promo h2{
  font-family: 'Gotham', sans-serif;
  font-size: 50px;
  font-weight: 700;
}
.promo h3{
  font-family: 'Gotham', sans-serif;
  font-size: 28px;
}
.promo p {
  font-size: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px){
  
}
  
@media only screen and (max-width: 767px){
  .promo{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .promo p{
    font-size: 10px;
  }
  .promo h2{
    font-size: 38px;
    font-weight: 800;
  }
  .promo h3{
    font-size: 25px;
  }
  .promo h4{
    font-size: 18px;
  }
}





/*FOOTER*/
footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem 8%;
    background-color: #0e0e0e;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo{
    height: 80px;
    margin-bottom: 1rem;
}

.social-icons-container, .footer-menu-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.social-icon{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 1px solid #f2f2f2;
    background-image: url(../img/icons/FacebookBlanco.png);
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;
    margin:1rem;
}

.social-icon:hover{
    background-color: #121212;
    filter: invert(1);
}

.social-icon:nth-of-type(2){
    background-image: url(../img/icons/InstagramBlanco.png);
    width: 55px;
    height: 55px;
}
.social-icon:nth-of-type(3){
    background-image: url(../img/icons/TiktokBlanco.png);
}
.social-icon:nth-of-type(4){
    background-image: url(../img/icons/LinkedinBlanco.png);
}


.footer-menu-container{
    list-style-type: none;
    color: #f2f2f2;
    font-size: 15px;
}

.menu-item{
    margin: 1rem 1.5rem;
    cursor: pointer;
    opacity: 0.6;
}
.menu-item a{
  text-decoration: none;
  color: #f2f2f2;
}
.menu-item:hover{
    opacity: 1;
}

.copyright{
    color: #f2f2f2;
    opacity: 0.3;
    text-align: center;
}

        /*CONTACT*/

.background-portada{
   padding: 0;
   margin: 0;
   width: 100%;
}

.portada2{
  width: 100%;
  height: 40vh;
  background-image: url(../img/wallpaper/portada3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.h22{
  font-weight: 600;
  font-size: 32px;
  font-family: 'Gotham', sans-serif;
}
.h32{
  font-weight: 500;
  font-size: 25px;
}

.contacto1 p{
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.h52{
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}


/*cookies*/
.pcookies{
  margin-top: 100px;
  font-family: 'Poppins', sans-serif;
}
.pcookies h4{
  font-weight: 600;
  font-size: 26px;
  font-family: 'Poppins', sans-serif;
}
.pcookies h3{
  font-weight: 800;
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
}
.pcookies p{
    font-family: 'Poppins', sans-serif;
}

/*priv*/
.pprivacidad{
  margin-top: 100px;
  font-family: 'Poppins', sans-serif;
}
.pprivacidad h4{
  font-weight: 600;
  font-size: 26px;
  font-family: 'Poppins', sans-serif;
}
.pprivacidad h3{
  font-weight: 800;
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
}
.pprivacidad p{
  font-family: 'Poppins', sans-serif;
}
/*legal*/
.alegal{
  margin-top: 100px;
  font-family: 'Poppins', sans-serif;
}
.alegal h4{
  font-weight: 600;
  font-size: 26px;
  font-family: 'Poppins', sans-serif;
}
.alegal h3{
  font-weight: 800;
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
}
.alegal p{
  font-family: 'Poppins', sans-serif;
}
.alegal h5{
  font-weight: 600;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
}