/* Fonts--------------------- */

@font-face {

    font-family: 'Gracial-Bold';

    src: url('./fonts/AMSIPRO-B.TTF');

    font-style: normal;

    font-weight: bold;

  }

  @font-face {

    font-family: 'Gracial-Regular';

    src: url('./fonts/AMSIPRO-R.TTF');

    font-style: normal;

    font-weight: normal;

  }

  @font-face {

    font-family: 'Archivo-light';

    src: url('./fonts/CATCHLAND.OTF') format('truetype');

    font-style: normal;

    font-weight: light;

  }









  h1,h2,h3{

    font-family: 'Gracial-Bold';



  }

  a,p,li{

    font-family: 'Gracial-Regular';

  }

button{

    font-family: 'Gracial-Bold';

}

a{

    text-decoration: none!important;

    

}





.ww{

  max-width: 75%!important;

}

.text-darkblue{

  color: #0c2340;

}



/* ----------------------IMG--------------------- */



img{

    width: 100%;

}


iframe{
    height:100vh;
}




/* ----------------------header--------------------- */



/* Color of the links BEFORE scroll */

.navbar{

  background-color: transparent;

}

.navbar-scroll .nav-link,

.navbar-scroll .navbar-toggler-icon {

  color: #fff;

}

.navbar-toggler i {

  color: #fff;

}



.nav-link:focus, .nav-link:hover{

  color: #f5af2b!important;

}

/* Color of the links AFTER scroll */

.navbar-scrolled .nav-link,

.navbar-scrolled .navbar-toggler-icon {

  color: #4f4f4f;

}



/* Color of the navbar AFTER scroll */

.navbar-scrolled {

  background-color: #fff;

}

.navbar.scrolled{

  background:rgba(32, 32, 32, 0.413);

  transition: all .02s;

}



/* An optional height of the navbar AFTER scroll */

.navbar.navbar-scroll.navbar-scrolled {

  padding-top: 5px;

  padding-bottom: 5px;

}

.carousel{

  background-image: url(./img/fondo-rojo.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}

.carousel-item {

    height: 100vh;

    min-height: 400px;

}

 .w-xl-50{

  width: 50%;

  display: block;

  margin: auto;

 }

.carousel-item img {

    height: 100%;

    object-fit: cover;

}

.button{

    background-color: transparent;

    color: #fff;

    border: 1px solid #fff;

    padding: .7rem 2rem;

    margin-top: 1rem;

    transition: all .7s;

}

.button:hover{

  background-color: #fff;

  color: #fff;

  padding: 1rem 2rem;

  margin-top: 1rem;

  transition: all .7s;

}

.carousel-caption {

  right: 10%!important;

  bottom: 40vh!important;

  left: 10%!important;

  animation: fadeInRight;

  animation-duration: 2s;

}

.b-tittle h3{

font-size: 1rem;

color: #fff;

background-color: #f5af2b;

padding: 1rem;

word-wrap: break-word;

width: auto;

display: inline-block;

border-radius: 10rem;

}

.b-tittle h2{

  font-size: 3rem;

}



.tittle{

  padding-left: 20%!important;

  padding-top: 10rem;

  padding-bottom: 10rem;

}

.tittle h3{

font-size: 1rem;

color: #fff;

background-color: #f5af2b;

padding: 1rem;

word-wrap: break-word;

width: auto;

display: inline-block;

border-radius: 10rem;

}



.tittle p{

    font-size: 3rem;

}

.img-chile{

  margin-bottom: -22%;

  position: relative;

  width: 30%;

}

.background-color-grey{

background-image: url(./img/back-chilli.jpg);

background-repeat: no-repeat;

background-size: cover;

background-position: center;

color: #fff;


}

.background-n{

  background-image: url(./img/fondo-n.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;


  }

.background-color-black{

background-color:#dc182a;

  

}

.background-color-lgrey{

  background-color: rgb(235, 235, 235);

  background-position: center;

  background-repeat: no-repeat;

    

  }.background-color-white{

    background-color: rgb(255, 255, 255);

    }

.text-box{

  position: absolute;

  bottom: 0%;

  color: #fff;

  padding: 2rem;

}

.carousel-caption h1{

  font-size: 5rem;

}

.carousel-caption p{

  font-size: 1.2rem;

  letter-spacing: .1rem;

  margin: 0;

}

.carousel-caption span{

  color:#f5af2b;

  font-size: 6rem;

}

.img-bg{

  background-image: url(./img/MAPA-02.png);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  overflow: hidden;

  cursor: pointer;

}

.text-box-contact{

  position: relative;

  color: #fff;

}

.bloque-gris{

  width: 20%;

  margin-right: -5rem;

  z-index: 1000;

}



footer{

  background-color: #e74d13;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}



.footer a{

  color: #fff;

  line-height: 1rem;

  

}

.footer p{

  color: #fff;

  line-height: 1.5rem;

  

}

.footer a:hover{

  color: #242645;

  line-height: 1rem;

  cursor: pointer;

  padding: 1rem;

  transition: all .7s;

}

.footer h3{

  color: #fff;

  font-size: 1rem;

  padding-bottom: 1rem;

}

.footer li{

  color: #fff;

}

.footer i{

  color: #242645;

}



form{

  position: relative;

  float: right;

  width: 100%;

  z-index: 10;

  margin-bottom: 5%;

  padding: 3rem;

  color: #fff;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

textarea{

  width: 100%;

  border: none;

  padding: 1rem;

  margin-bottom: 1rem;

  border-radius: 20px;

  background-color: #c9370a;

  color: #000;

}

textarea::placeholder{

  color: #000;

}

input{

  width: 46%;

  border: none;

  padding: 1rem;

  margin-bottom: 1rem!important;

  border-radius: 20px;

  background-color: #c9370a;



}

.contacto-b{

color: #fff;

background-color: #e74d13;

width: auto;

border-radius: 10rem;

}

.contacto-b:hover{

  background-color: transparent;

  border-radius: 10rem;

  }



input::placeholder {

  color: #000;

  opacity: 1; /* Firefox */

}

.botonenviar{

  width: auto;

  color: #fff;

  background-color: transparent;

  font-size: 1.7rem;

  border-radius: 5rem;

  border: none;

  margin-top: 2rem;

  cursor: pointer;

  transition: all .8s;

}

.botonenviar:hover{

  color: #fff;

  font-size: 1.5rem;

  border: none;

  margin-top: 2rem;

  cursor: pointer;

  transition: all .8s;

}

.carousel-cell p{

  color: #fff;

}

.circle{

  width: 20%;

  right: -50px;

}

.circle-l{

  width: 20%;

  left: -50px;

}

.w-xl-50{

  width: 50%;

}

.carousel-cell{

  width: 50%;

}

.carousel-cell-2{

  width: 100%;

}

.carousel-cell-33{

  width: 100%;

}

.carousel-cell-4{

  width: 100%;

}



.carousel-cell-3{

  width: 30%;

}



.flickity-prev-next-button.next {

  right: -16px!important;

}

.flickity-prev-next-button.previous {

  left: -16px!important;

}



.nav-pills .nav-link {

  border: none !important;

  color: #000!important;

  border-radius: 6rem!important;

  font-family: 'Gracial-Regular';

  font-size: 1rem;

  padding: .4 .3rem;

  padding-top: .2rem;

  

}

.nav-item{

  margin-right: 1rem;

}

.nav-item:hover{

  border-bottom: 1px solid #fff;

  transition: all .2s;

}



#pills-tabContent{

  background-image: url(./img/ondas.jpg);

  background-position: center;

  background-size: cover;

}





.nav-link:focus{

  outline: none;

}



.nav-pills .nav-link.active, .nav-pills .show>.nav-link {

  color: #fff!important;

  border: none;

  transition: all 1s;

  background-color: #ba2224!important;

}

.tab-content{

  color: #fff;

}

.mySwiper{

  margin-top: 2%;

}

.swiper-wrapper{

  align-items: center!important;

}

.swiper-button-next{

  left: 0!important;

  right: 0!important;

  color: #000!important;

}

.swiper-button-prev{

  left: 0!important;

  right: 0!important;

  color: #000!important;

}

.swiper-button-next::after{

  font-size: 15px!important;

}

.swiper-button-prev::after{

  font-size: 15px!important;

}

.swiper-slide p{

  writing-mode: vertical-rl;

  text-orientation: mixed;

  position: absolute;

  top: 2%;

  color: #fff;

}
.swiper-slide img{
  width: 50%;
    display: block;
    margin: auto;
}

.back-img{

  background-image: url(./img/IMG-CONTACTO.jpg);

  background-position: center;

  background-size: cover;

}

.tick {

  font-size:1rem; white-space:nowrap; font-family:arial,sans-serif;

}



.tick-flip,.tick-text-inline {

  font-size:2.5em;

}



.tick-label {

  margin-top:1em;font-size:1em;

}



.tick-char {

  width:1.5em;

}



.tick-text-inline {

  display:inline-block;text-align:center;min-width:1em;

}



.tick-text-inline+.tick-text-inline {

  margin-left:-.325em;

}



.tick-group {

  margin:0 .5em;text-align:center;

}



body {

   background-color: rgb(255, 255, 255) !important; 

}



.tick-text-inline {

   color: rgb(90, 93, 99) !important; 

}



.tick-label {

   color: rgb(90, 93, 99) !important; 

}



.tick-flip-panel {

   color: rgb(255, 255, 255) !important; 

}



.tick-flip {

   font-family: !important; 

}



.tick-flip-panel-text-wrapper {

   line-height: 1.45 !important; 

}



.tick-flip-panel {

   background-color: rgb(59, 61, 59) !important; 

}



.tick-flip {

   border-radius:0.12em !important; 

}

.col-products h2{

font-size: 3rem;

margin-bottom: 3rem;

}

.col-products ul{

  padding-left: 0;

  font-size: 1.2rem;

}

.block-darkblue{

  background-color: #04172f;

  border-radius: 10px;

  padding: 3rem!important;

  color: #fff;

  margin-top: 3rem;

}

.redes {

  width: auto;

  position: fixed;

  right: 1%;

  bottom: 2%;

  z-index: 1000;

  color: #fff;

  font-size: 3rem;

  background-color: #00d221;

  padding: 2rem;

  border-radius: 10rem;

  margin: 0;

}

.redes ul{

  margin: 0;

  padding: 0;

}

.redes li{

  margin: 0;

  padding: 0;

  line-height: 0;

}

.redes a{

  color: #fff;

  font-size: 2rem;

  text-decoration: none;

}

.redes a:hover{

color: #ba2224;

}



.marquee {

  margin: 0 auto;

  white-space: nowrap;

  overflow: hidden;

  position: relative;

  background-color: #f5af2b;

  color: #fff;

  padding: 3rem;

  

}



.marquee span {

  display: inline-block;

  padding-left: 100%;

  margin-right: 3rem;

  animation: marquee 20s linear infinite;

}



.marquee2 span {

  animation-delay: 2.5s;

}



@keyframes marquee {

  0% {

    transform: translate(0, 0);

  }

  100% {

    transform: translate(-100%, 0);

  }

}

button:focus:not(:focus-visible) {

  outline: 0;

  box-shadow: unset;

}

.navbar-toggler {

  padding: .25rem .75rem;

  font-size: 1.25rem;

  line-height: 1;

  background-color: transparent;

  border: 1px solid transparent;

  border-radius: .25rem;

  transition: box-shadow .15s ease-in-out;

  text-align: start;

}

@media only screen and (max-width: 576px) {

  .navbar-collapse{

    background-color: #e74d13;

  }

  .ww{

    max-width: 90%!important;

  }

  .bloque-gris{

    width: 100%;

    margin-top: 2rem;

    margin-right: 0;

  }

  .tittle p {

    font-size: 1.5rem;

  }

  .background-n {

    background-image: url(./img/fondo-n.jpg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: auto;

    height: auto;

  }

  .tittle {

    padding-left: 1rem!important;

    padding-top: 3rem;

    padding-bottom: 10rem;

    text-align: center;

  }



.carousel-caption span {

    color: #f5af2b;

    font-size: 2.5rem;

}





  .circle{

    display: none;

  }

  .cubes{

    margin-left: 0;

  }

  .circle-l{

    display: none;

  }

.navbar-brand img{

  display: block;

  margin: auto;

}

.col-products h2{

  font-size: 1.3rem;

  margin-bottom: 1rem;

  }

  .col-products ul{

    padding-left: 0;

    font-size: 1rem;

  }



.carousel-caption h1{

  font-size: 2.5rem;

}

.carousel-caption br{

  display: none;

}

.tittle h1 {

  font-size: 2rem;

  text-align: left;

}

.text-box-contact {

  position: relative;

  color: #fff;

  text-align: center;

}

.text-box-contact h1 {

  font-size: 2rem;

}

.tittle span {

  left: 2px;

}

.w-xl-50{

  width: 100%;

}

.carousel-cell{

  width: 100%;

}

.carousel-cell-3{

  width: 100%;

}

.tittle{

  padding-bottom: 0rem;

}

form {

  position: relative;

  float: none;

  width: 100%;

  z-index: 10;

  margin-bottom: 5%;

  padding: 1rem;

}

.block-darkblue{

  background-color: #04172f;

  border-radius: 10px;

  padding: 2rem!important;

  color: #fff;

  margin-bottom: 3rem;

}

.img-chile {

  position: relative;

  width: 30%;

  display: block;

  margin: auto;

}

.w-xl-50{

  width: 100%;

 }

}