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

@font-face {
  font-family: 'Walbaum-Roman';
  src: url('../fonts/Walbaum-Roman.eot?#iefix') format('embedded-opentype'),  url('../fonts/Walbaum-Roman.woff') format('woff'), url('../fonts/Walbaum-Roman.ttf')  format('truetype'), url('../fonts/Walbaum-Roman.svg#Walbaum-Roman') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Futura-Md';
  src: url('../fonts/Futura-Md.eot');
  src: local('☺'), url('../fonts/Futura-Md.woff') format('woff'), url('../fonts/Futura-Md.ttf') format('truetype'), url('../fonts/Futura-Md.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


@keyframes slideInFromLeft {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* header *{
	margin:auto;
	padding:0px;
} */

/*.home-contactanos *{
	margin:auto;
	padding:0px;
}*/

html, body {
    min-height:100%;
    height:100%;
}

@media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .warp-img-home, .warp-img-section, .panel-section, .sidebar-section { display:flex;    min-height:50%;    height:50%;    width:100%;} .warp-img-home > div, .warp-img-section > div, .panel-section > div, .sidebar-section > div{ margin:auto 0;}/* IE11 */
     }






body {
	font-family: 'Poppins', sans-serif;
	color:#727272;
	font-size:16px;
	background-color:#FFF;

}



body {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: .5s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



h1{


}

h2{


}


h3{

color: #F3784E;
font-size: 1rem;

}

h4{

}




a:hover{
	text-decoration: none;
}

p{
  font-family: 'Poppins', sans-serif;
  font-size: .875rem;
  line-height: 1.9rem;
}




.banner{
height: 38rem;
width: 100%;
padding-top: 10rem;
background-image: url(../img/slide-1.jpg);
background-color: #383B3D;
  background-position: top right;
  background-repeat: no-repeat;  
  background-attachment: static;
  background-size: contain;
}


.banner h1{
  color: #fff;
  font-size: 1.9375rem;
  font-weight: 600;
}

.banner a{
  color: #F57550;
  font-size: 1.125rem;
  display: block;
  margin-bottom: 1rem;
}

.home-categorias{
  margin-top: -8rem;
  padding-bottom: 8rem;
  background-color: #383B3D;
}



.item-categoria{
  background-color: #fff;
  text-transform: uppercase;  
  min-height: 15.25rem;  
  background-position: center center;
  background-repeat: no-repeat;  
  background-attachment: static;
  background-size: cover;
  transition: transform .2s;
}

.item-categoria:hover{
transform: scale(1.07);
}

.item-categoria .item-categoria-cont{
  position: relative;
  left: 2rem;
  top: 4.8rem;
}

.item-categoria h2{
  font-size: 1.25rem;
  color: #2B2B2B;
  font-weight: 600;
}

.owl-carousel .owl-slide {
  position: relative;
  height: 100vh;
  background-color: lightgray;
}


.owl-carousel .owl-slide-animated {
  transform: translateX(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.05s;
}

.owl-carousel .owl-slide-animated.is-transitioned {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}


.owl-carousel .owl-slide-title.is-transitioned {
  transition-delay: 0.2s;
}

.owl-carousel .owl-slide-subtitle.is-transitioned {
  transition-delay: 0.35s;
}

.owl-carousel .owl-slide-cta.is-transitioned {
  transition-delay: 0.5s;
}

.owl-carousel .owl-dots,
.owl-carousel .owl-nav {
  position: absolute;
}

.owl-carousel .owl-dots .owl-dot,
.owl-carousel .owl-nav [class*="owl-"]:focus {
  outline: none;
}

.owl-carousel .owl-dots .owl-dot span {
  background: transparent;
  border: 1px solid var(--main-black-color);
  transition: all 0.2s ease;
}

.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--main-black-color);
}

.owl-carousel .owl-nav {
  display: none;
  right: 1%;
  top: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.owl-carousel .owl-nav svg {
  opacity: 0.3;
  transition: opacity 0.3s;
}

.owl-carousel .owl-nav button:hover svg {
  opacity: 1;
}

.owl-carousel .owl-nav [class*="owl-"]:hover {
  background: transparent;
}



@media screen and (max-width: 575px) {
  .owl-carousel .owl-nav {
    top: 40%;
  }
  
  .owl-carousel .owl-nav svg {
    width: 24px;
    height: 24px;
  }
}



/*---- custom ---*/

.owl-theme .owl-nav [class*=owl-] {

    display: block;

}

.owl-slide-title{
 font-family: 'Poppins', sans-serif;
 font-weight: 700;
  font-size:  2.7rem;
  margin-bottom: .1rem;
  letter-spacing: 0.05rem
  line-height: .8rem;
  color: #fff;

}

.owl-slide-title span{
  display: none;
}


.owl-slide-subtitle{
font-family: 'Poppins', sans-serif;
font-size:  1em;
line-height: 1.1em;
  color: #fff;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  margin-bottom: 1rem;

}

.owl-slide-text{
  margin-left: 0em;
  position: relative;
  min-height: 100vh;
}

.slide-text{
  position: absolute;
  top: 35%;
  left: .5rem;
  width: 19rem;
}

.owl-slide-section{
 font-family: 'Poppins', sans-serif;
font-size:  .625em;
  color: #fff;
  letter-spacing: .23em;
  margin-bottom: 4em;
  top: 5em;
  position: absolute;

}


.owl-slide-section:before {
    background-color: #fff;
    content: "";
    margin-right: 1.5em;
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 2.2rem;
}

.owl-next img, .owl-prev img {
 -webkit-transition: all .25s ;
    -moz-transition: all .25s;
     -ms-transition: all .25s ;
      -o-transition: all .25s ;
         transition: all .25s ;
}

.owl-next img:hover, .owl-prev img:hover{
  opacity: .5;
}

.owl-slide p{
color: #fff;
font-size: 1rem;
opacity: .9;
margin-top: 1rem;
margin-bottom: 2rem;
}






.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

.btn {
	font-family: 'Gotham-Bold';
    padding: .575rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .45rem;
}



.btn-prin {
    color: #A26C3B;
    font-size: .75rem;
    transition: all .25s ease-in-out;
}

.btn-prin:hover{
  color: #A26C3B;
    opacity: .5;
}


.btn-primary:hover {
    color: #fff;
    background-color: #DC741D;
    border-color: #DC741D;
}


.btn-white {
	font-family: 'Gilroy-Bold';
    padding: 1rem 2rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #B3D233;
    background-color: #fff;
    border-color: #fff;
}


.btn-white:hover {
    color: #fff;
    background-color: #B3D233;
    border-color: #B3D233;
    text-decoration: none;
}

.btn-green {
  font-family: 'Poppins', sans-serif;
    padding: 1.3rem 4.5rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: 0rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #fff;
    background-color: #A26C3B;
    border-color: #A26C3B;
}


.btn-green:hover {
    color: #fff;
    background-color:#464749;
    border-color: #464749;
    text-decoration: none;
}

.btn-out-orange {
  font-family: 'Poppins', sans-serif;
    padding: .8rem 2.5rem;
    font-size: .75rem;
    line-height: 1.5;
    letter-spacing: .1rem;
    font-weight: 500;
    border-radius: 0rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #F57550;
    background-color: transparent;
    border-color: #F57550;
    border: solid 1px;
    width: 100%;

}



.orange{
color: #F57550;
}

.btn-out-orange:hover {
    color: #292929;
    background-color: #F57550;
    border-color:#F57550;
    text-decoration: none;
}

.btn-out-green {
  font-family: 'Gilroy-Bold';
    padding: .65rem 2rem;
    font-size: .9rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #B3D233;
    background-color: transparent;
    border-color: #B3D233;
    width: 100%;
}


.btn-out-green:hover {
    color: #fff;
    background-color: #B3D233;
    border-color:#B3D233;
    text-decoration: none;
}







footer .btn-klou{
  opacity: .4;
   transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
}

footer .btn-klou:hover{
opacity: 1;
}



/*---------------------- CONTACTO---------------------*/ 

.contacto ul{
  color: #fff;
  font-size: .9rem;
}

.contacto ul li a{
  color: #fff;

}

.contacto ul li a:hover{
  color: #F57550;

}

.form-control:disabled, .form-control[readonly] {
    background-color: transparent;
    opacity: 1;
}


form .form-control{
  color: #727272;
  font-size: .9rem;
  border: none;
  border-radius: 0;
  border-bottom: solid 1px #D8D8D8;
  padding-left: 0;
  margin-bottom: 0;
    background-color: transparent;
}

.contacto form .form-control{
  color: #fff;
  font-size: .9rem;
  border: none;
  border-radius: 0;
  border-bottom: solid 1px #5D5D5D;
  padding-left: 0;
  margin-bottom: 2rem;
    background-color: transparent;
}

.contacto  form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: .75rem;
    color: #fff;
    opacity: 1; /* Firefox */
}

form .form-group {
    margin-bottom: 1rem;
}


form .form-control-file{
  font-size: .9em;
}

form .form-control:focus {
  border:none;
  box-shadow: none;
  border-bottom: solid 1px #A4B8DE;
    background-color: transparent;
}

form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: .75rem;
    color: #727272;
    opacity: 1; /* Firefox */
}

form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-size: .75rem;
    color: #727272;
}

form .form-control::-ms-input-placeholder { /* Microsoft Edge */
  font-size: .75rem;
    color: #727272;
}


.form-check-label{
   font-size: .75rem;
   margin-top: .2rem;
    color: #727272;
}

.location-field{
  display:none;
  }




.klou {
  opacity: .6;
  z-index: 5000;
   transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
}

.klou:hover{
  opacity: 1;

}




ul{
  padding: 0;
  list-style: none;
}

.navbar {
  height: 5.875rem;
  padding: 0;
  background-color: #fff;
}


.navbar .brand-bg{
  height: 100%;
padding-top: 1.3rem;

background-color: #F57550;
}


.navbar-collapse {
  background-color: #fff;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 1000;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
    font-size: .9rem;
    margin-right: 1.1rem;
}




.dropdown-item {
    font-size: .81rem;
    padding: .4rem 1.5rem;
}

.marcas{
  background-color: #EEF1F3;
  padding-top: 3rem;
  padding-bottom: 3rem;
}



.section{
  background-color: #292929;
  padding-top:6.5625rem;
  padding-bottom: 12.375rem;
}

.section.soporte{
 
  padding-bottom: 8.375rem;
}

.section h1{
  font-size: 1.375rem;
  color:#fff;
}

.section h2{
  font-size: 1.125rem;
  color:#F57550;
}


footer{
  color: #292929;
  padding-top: 5.8rem;
}

footer ul li a{
  font-size: .9rem;
  line-height: 2rem;
  color: #292929;
  font-weight: 500;
}

footer ul li a:hover{
  color: #F57550;

}


.main-footer{
  padding-bottom: 6.2rem;
}

.mail{
  font-size: 1.125rem;
}


.contactanos{
  background-color: #F3784E;
  background-image: url(../img/fnd-contactanos.jpg);
  background-position: center right;
  background-repeat: no-repeat;  
  background-attachment: static;
  background-size: cover;
  padding-top: 6rem;
  padding-bottom: 5rem;
  color: #fff;

}

.contactanos p{
  font-size: 1.3125rem;
}

.contactanos a{
  color: #fff;
  font-weight: 600;
}

.contactanos a:hover{
  opacity: .7;
}


.item-categoria-producto p{
  margin-bottom: 0;
  line-height: 1.1rem;
}

.item-categoria-producto{
  font-weight: 500;
  padding-top: 2rem;
  text-align: center;
background-color: #fff;
min-height: 22.375rem;
 text-transform: uppercase;  
  background-position: bottom right;
  background-repeat: no-repeat;  
  background-attachment: static;
  background-size: cover;
  position: relative;

}

.producto-card-body{
  
}

.producto-card-body .detalle{
  bottom: 2rem;
  position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
color: #949A9E;
font-size: 0.8125rem;
text-transform: initial;
padding-left: 1rem; padding-right: 1rem;

}


.detalle-producto h1{
  font-size: 2.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.detalle-producto p{
  color: #fff;
  font-size: .9rem;
  line-height: 1.5rem;
  margin-bottom: 1.8rem;
}

.detalle-producto .accion a {
  font-size: .81rem;
  color: #F57550;
}

.detalle-producto .accion a:hover {
  opacity: .7;
}

.detalle-producto .modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }



.detalle-producto .modal-body {
  position:relative;
  padding:0px;
}


.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: none;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.modal-title{
  margin-top: 1rem;
  margin-left: 1.9rem;
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0;
    outline: 0;
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: none;
}



.detalle-producto .close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}

.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding:0;
    margin-bottom: 1rem;
    list-style: none;
    background-color: transparent;
    border-radius: .25rem;
}

.breadcrumb-item a{
  font-size: .8rem;
  color: #fff;
  opacity: .5;
}

.mt-10{
  margin-top: 5.5rem;
}

.view {
   width: 100%;
   height: 22.375rem;
   float: left;
   overflow: hidden;
   position: relative;

   /*cursor: default;*/
}



.view .mask, .view .content {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
  
.third-effect .mask {
  width:100%;
  height:22.375rem;
   opacity: 0;
   overflow:visible;
   background: rgba(243,120,78,.9);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

.third-effect:hover .mask {
   opacity: 1;
   background: rgba(243,120,78,.9);

}

.nosotros p{
  color: #fff;
}


.nosotros p.outline-destacado{
  border-color: #F57550;
  color: #F57550;
  border: solid 1px;
  padding: 1.5rem;
}


/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {


}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 

.item-categoria h2{
  font-size: 1.1rem;

}

.navbar-collapse {
  padding-top: 0rem;
  padding-bottom: 0rem;
}


}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 

 .item-categoria h2{
  font-size: 1.25rem;

}

}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {






}


/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1400px) {

 .home-categorias{
  margin-top: -6rem;
}

.banner h1{

  font-size: 2rem;
}


}