@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/
body {
     font-size: 14px;
     font-family: 'Lato', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}


button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #f9f9f9;
}

.theme_bg {
     background: #38c8a8;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


#red {
     color: #bc1939;
}

strong {
     font-weight: 700 !important;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}

ul.btn {
     float: right;
}

ul.btn li {
     display: inline-block;
     padding: 0 25px;
}

ul.btn li a {
     color: #fff;
     font-size: 16px;
}

ul.btn li:last-child {
     padding-right: 0;
}

/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/


/*-- navigation--*/

.navigation.navbar {
     padding-top: 17px !important;
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 0 10px;
     color: #1b1a1b;
     font-size: 17px;
     line-height: 20px;
     font-weight: 600;
     font-family: "Lora", serif;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #bc1939;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #bc1939;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.padd_right {
     padding-right: 10px;
}

.header {
     width: 100%;
     padding: 20px 30px;
     background: url(../images/header_bg.jpg);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     position: fixed;
     z-index: 999;
}

.navbar-brand {
     color: #000 !important;
     font-family: 'Emilys Candy', cursive;
}

.navbar-brand img {
     width: 23.5vh;
}

.nav-item {
     padding: 1vh;
}


/* banner area */
#banner img {
     margin-top: 5vh;
     width: 100%;
}


/* Mensaje del presidente intercoiffure latam */
#president-message {
     justify-content: center;
     margin-bottom: 10vh;
     margin-top: 10vh;
}

#president-message article{
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5vh;
}

#president-message article button{
     border: 1px #000 solid;
     padding: 2vh;
     border-radius: 4vh;
     background-color: #fff;
     font-family: "Lora", serif;
     animation: animate-button 2.5s infinite;
     font-size: 17px;
}

/* animacion del boton */
@keyframes animate-button{
     0%{
          border: 1px #000 solid;
          background-color: #fff;          
     }
     50%{
          border: 1px #fff solid;
          background-color: #000;
          color: #fff;
     }
     100%{
          border: 1px #000 solid;
          background-color: #fff;          
     }     
}

/* Popup del mensaje del presidente de intercoiffurelatam */
#message-modal .modal-dialog .modal-content .modal-body video{
     width: 100%;
}


/* Directiva section */
#directiva-section {
     padding: 2vh;
     gap: 2vh;
}

main.container-fluid h1 {
     font-size: 40px;
     color: #000;
     line-height: 55px;
     font-weight: 800;
     text-align: center;
     font-family: "Playfair", serif;
}

#directiva-section article {
     border: 1px lightgrey solid;
     padding: 0;
}

#directiva-section article div {
     padding: 1vh;
}

#directiva-section article div h3 {
     line-height: 25px;
     font-family: "Lora", serif;
     color: #000;
}

#directiva-section article div h6 {
     font-size: 17px;
     line-height: 27px;
     font-family: "Lora", serif;
     color: #000;
}


/* About us */
main #about-us {
     display: flex;
     justify-content: space-around;
     background-color: #bc1939;
}

main #about-us article {
     height: 70vh;
}

main #about-us article:nth-child(1) {
     background-color: #bc1939;
     background-image: url(../images/about-us.jpg);
     background-size: cover;
}

main #about-us article:nth-child(1)::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(188, 25, 57, 0.6);
}


main #about-us article:nth-child(2) {
     padding: 2vh;
}


main #about-us article:nth-child(2) h1 {
     color: #fff;
     font-family: "Playfair", serif;

}

main #about-us article:nth-child(2) p {
     color: #fff;
     font-family: "Lora", serif;
     line-height: 28px;
     font-weight: 500;
}

main #about-us article img {
     width: 100vh;
}

main #about-us article a {
     font-size: 17px;
     background-color: #000;
     color: #fff !important;
     padding: 2vh;
     transition: ease 0.5s;
     font-weight: 500;
     font-family: "Lora", serif;
}

main #about-us article a:hover,
main #about-us article a:focus {
     border-radius: 30px;
     background-color: #fff;
     color: #000 !important;
}

/* Mensaje Hamburgo */
#presentacion-hamburgo {
     display: flex;
     justify-content: center;
     padding: 2vh !important;

}

#presentacion-hamburgo article {
     padding: 2vh;
     display: flex;
     justify-content: center;

}

#presentacion-hamburgo article video {
     width: 100%;
     margin: 0;
     padding: 0;
     max-height: 500px;
}

#presentacion-hamburgo article img {
     max-height: 500px;
}

/* gallery area */
#gallery-title {
     color: #fff;
     line-height: 55px;
     font-weight: 800;
     font-family: "Playfair", serif;
     background-color: #bc1939;
}

#gallery {
     background-color: #bc1939;
     padding: 4vh;
     gap: 4vh;
     justify-content: center;
}

#gallery .card {
     padding: 0;
}

#gallery .col-12 {
     display: flex;
     justify-content: center;
     padding: 2vh;
}

#gallery .col-12 a {
     font-size: 17px;
     background-color: #000;
     color: #fff !important;
     padding: 2vh;
     transition: ease 0.5s;
     font-weight: 500;
     font-family: "Lora", serif;
     width: 20%;
     text-align: center;
}

#gallery .col-12 a:hover,
#gallery .col-12 a:focus {
     border-radius: 30px;
     background-color: #fff;
     color: #000 !important;
}


/* Custmer area*/
.customer {
     padding: 90px 0px 90px 0px;
     background: #fff;
}

.customer .titlepage p {
     color: #000;
     line-height: 28px;
     font-weight: 500;
     font-size: 17px;
     padding-top: 20px;
     font-family: "Lora", serif;
}

.customer .titlepage h2 {
     font-family: "Playfair", serif;
     line-height: 55px;
     font-weight: 800;
     text-align: center;
}

.customer_Carousel .carousel-caption {
     position: inherit;
     padding: 0;
}

.customer_box {
     text-align: center;
}

.customer_Carousel .test_box h4 {
     font-size: 24px;
     color: #000;
     line-height: 20px;
     display: block;
     text-align: center;
     text-transform: uppercase;
     font-weight: 600;
     padding: 40px 0px 10px 0px;
     font-family: "Playfair", serif;
}

.customer_Carousel .test_box i {
     font-size: 17px;
     line-height: 28px;
     margin-bottom: -12px;
     padding-right: 20px;
}

.customer_Carousel .test_box p {
     font-size: 17px;
     line-height: 28px;
     color: #000;
     margin-bottom: 30px;
     font-family: "Lora", serif;
}

#myCarousel .carousel-indicators {
     display: none;
}

#myCarousel .carousel-control-next,
#myCarousel .carousel-control-prev {
     opacity: 1;
}

#myCarousel .carousel-control-next i,
#myCarousel .carousel-control-prev i {
     width: 60px;
     height: 60px;
     background: #bc1939;
     opacity: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
}

#myCarousel .carousel-control-next i:focus,
#myCarousel .carousel-control-next i:hover,
#myCarousel .carousel-control-prev i:focus,
#myCarousel .carousel-control-prev i:hover {
     background: #000;
     color: #fff;
}

/* Contact us area */
#contact-us {
     padding: 4vh;
     position: relative;
     background-image: url(../images/contact-us.jpg);
     background-size: cover;
     background-color: #bc1939;

}

#contact-us::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(188, 25, 57, 0.6);
}

#contact-us h1 {
     font-size: 40px;
     color: #fff;
     line-height: 55px;
     font-weight: 800;
     text-align: center;
     font-family: "Playfair", serif;

}

#contact-us form {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4vh;
}

#contact-us form fieldset {
     display: flex;
     flex-direction: column;
     justify-content: center;
}

#contact-us form fieldset input {
     padding: 0px 30px;
     background: #fff;
     color: #777977;
     font-size: 17px;
     font-weight: normal;
     border-radius: 30px;
     border: #ddd solid 1px;
     height: 60px;
}

#contact-us form fieldset textarea {
     padding: 0px 30px;
     margin-bottom: 30px;
     width: 100%;
     background: #fff;
     color: #777977;
     font-size: 17px;
     font-weight: normal;
     border-radius: 30px;
     border: #ddd solid 1px;
     padding-top: 60px;
     height: 160px;

}

#contact-us form fieldset button {
     font-size: 17px;
     transition: ease 0.5s;
     background-color: #000000;
     text-transform: uppercase;
     color: #fff;
     padding: 13px 0px;
     max-width: 190px;
     width: 100%;
     display: block;
     margin-top: 10px;
     border-radius: 30px;
     font-family: "Lora", serif;
}

#contact-us form fieldset button:hover {
     background-color: #fff;
     color: #000;
}


/* Footer area */

#footer {
     background-color: #fff;
     padding: 8vh;
}

#footer section article h2 {
     color: #000;
     font-family: "Playfair", serif;
     line-height: 55px;
     font-weight: 800;
     text-align: center;
}

#footer section article h6 {
     text-align: center;
}

#footer section article h6 a {

     color: #000;
     text-align: center !important;
     font-family: "Lora", serif;
}

#footer section article h6 a:hover {
     color: #bc1939;
}


/* Copyright area */
#copyright {
     background-color: #bc1939;
     padding: 4vh;
}

#copyright h6 {
     text-align: center;
     color: white;
}

/* Popup de galeria */
.modal-body {
     padding: 0 !important;
}

#bilbaolabs{
     color: white;
     text-decoration: none;
}

#bilbaolabs img{
     width: 4%;
     margin-bottom: 1vh;
}


/* Media Queries */

@media (max-width: 767px) {

     /* nav area */
     .navbar-brand img {
          width: 13vh;
     }

     .navigation {
          display: flex;
          justify-content: space-between !important;
     }

     /* Banner area */
     #banner img {
          margin-top: 10vh;
     }


     /* About us area */
     main #about-us article:nth-child(1) {
          height: 30vh;
     }

     main #about-us article:nth-child(2) {
          display: flex;
          flex-direction: column;
          height: 70vh;
     }

     main #about-us article:nth-child(2) h1 {
          font-size: 2rem;

     }

     main #about-us article:nth-child(2) a {
          width: 40%;
     }

     /* Nueva Coleccion */
     #presentacion-hamburgo h1 {
          font-size: 1.5rem;
          padding: 0;
          margin: 0;
     }

     /* Team area */
     main #team-section {
          padding: 2vh;
          display: flex;
          justify-content: center;
          gap: 4vh;

     }

     main h1 {
          font-size: 2rem;
     }


     #gallery {
          gap: 1vh;
          padding: 1vh;

     }

     #gallery .col-12 a {
          width: 50%;
     }

     /* footer */

     #footer .row {
          height: 90vh;
          display: flex;
          flex-direction: column;

     }

     #footer .row article {
          text-align: center;
     }

     #bilbaolabs img{
          width: 10%;
          margin-bottom: 1vh;
     }





}

@media (max-width:344px) {

     /* Banner */
     #banner img {
          margin-top: 13vh;
     }

     #directiva-section {
          padding: 2vh;
          gap: 2vh;
     }

     /* Directiva */
     main.container-fluid h1 {
          font-size: 30px;
     }

     /* About us area */
     main #about-us article:nth-child(2) {
          height: 70vh;
     }

     main #about-us article:nth-child(2) a {
          width: 50%;
     }

     /* Intro a la Galeria */
     #gallery-title {
          line-height: 25px;
          font-weight: 400;
     }

     #gallery {
          background-color: #bc1939;
          padding: 0vh;
          gap: 1vh;
          justify-content: center;
     }

     #gallery .card {
          padding: 0;
     }

     #gallery .col-12 {
          display: flex;
          justify-content: center;
          padding: 1vh;
          margin: 0;
     }

     #gallery .col-12 a {
          width: 50%;
     }



     /* Footer */
     footer .row article img {
          width: 30vh;
     }

}