@charset "UTF-8";
/*------------------------datos fijos------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  line-height: initial;
  font-size: 100%;
  vertical-align: baseline; }

body {
  line-height: 20px;
  font-weight: 300;
  font-size: 15px;
  background-color: #ffffff; }

html {
  background-color: #ffffff; 
}


/* Slider principal */
.carousel-control-next-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.carousel-control-prev-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}

/* Slider productos*/
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide .cont-img{
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* flecha anterior */
.mySwiper .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    color: #333;
    content: 'prev';
    font-size: 35px;
    margin-top: -264px;
    margin-left: -11px;
}

/* flecha siguiente */
.mySwiper .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    color: #333;
    content: 'next';
    font-size: 35px;
    margin-top: -264px;
    margin-left: -11px;
}

.sin_p{ padding: 0;}
.sin_m{ margin: 0;}

/* Colores */
.color-gris{ color: #7a7a7a; }
.color-white{ color: #fff}
.color-white-i{ color: #fff !important}

/* Colores de fondo */
.bg-green{ background-color: #01b628;}
.bg-gray{ background-color: #5f5f5f;}
.bg-gray-claro{ background-color: #7a7a7a; }
.bg-red{ background-color: #db290e;}
.bg-yellow{ background-color: #f8b71b;}
.bg-clientes{ background-color: #eca821;}

/*** Menú ***/
.navbar{
    padding: 1.6em 0;
    background-color: #fff !important;
}

.navbar .nav-link{
    font-family: Roboto-Regular_2 !important;
    font-size: 16px;
    font-weight: 500;
}

.menu-fixed{
    z-index: 1000;
    position: -webkit-sticky;  
	position: sticky;
	top: 0; 
    background-color: #0E0E0EE6  !important;
    color: #fff !important;
    padding: 1.4em 0;
}

.navbar .w-nav{ width: 70%; }

.navbar .iconos > i{
    font-size: 18px;
}

.navbar .iconos > a{
    padding-left: 20px;
    text-decoration: none;
    font-size: 18px;
    color: #4b4b4b
}

.color-toggler{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/*** Linea negocio ***/
.linea-negocio{
    padding-top: 3%;
}

.linea-negocio .cont-titulo .separador-i{ width: 25%;}
.linea-negocio .cont-titulo .titulo{ width: 50%; }
.linea-negocio .cont-titulo .separador-d{ width: 25%;}

.linea-negocio .cont-titulo .separador-i, .linea-negocio .cont-titulo .separador-d{
    background-color: #000; 
    width: 100%; 
    height: 1px;
}

.linea-negocio .cont-titulo .titulo{
    font-size: 22px;
    font-weight: 500;
    line-height: 120%;
    color: #7a7a7a;
    font-family: Dosis-Bold_C;
}

.linea-negocio .cont-txt-1{
    padding-top: 2%;
}

.linea-negocio .cont-txt-1 h4, .productos h4{
    color: #7A7A7A;
    font-family: Ondo-Light;
    font-size: 16px;
    font-weight: 300;
    line-height: 130%;
}

/*** Productos ***/
.productos{
    padding-top: 5em; 
    padding-bottom: 7em;
}

.productos .swiper-slide h4{ 
    font-family: Dosis-Bold_C;
    font-size: 15px;
}

.productos .pb{ padding-bottom: 20px; }

.productos h3{
    color: #5C5E5F;
    font-family: Dosis-Bold_C;
    font-size: 19px;
}

.cuadro{
    margin-top: 50px;
    height: 130px;
    padding: 0 2em;
}

.productos p{
    font-family: Ondo-Light;
    font-size: 12px;
    text-align: center;
    font-weight: 300;
}

.productos .cont-img img{padding-top: 25px;}


/* Compromiso */
.compromiso .cont-compromiso{
    padding: 6em 2em;
}

.compromiso .cont-compromiso{
    background-image: url(../img/banner/pagina-web.png);
}

.compromiso .txt-der{
    position: relative; 
    bottom: -85px;
}

.compromiso .cont-compromiso h2{
    font-size: 65px;
    line-height: 95%;
    font-weight: 500 !important;
}

.compromiso .cont-compromiso h3{
    font-family: Ondo-Light;
    padding-top: 20px;
    font-size: 22px;
    line-height: 130%;
    font-weight: normal;
}

.compromiso .cont-compromiso .portafolio{
    font-size: 18px;
    text-decoration: none;
    color: #db290e;
    background-color: #fff;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 400;
}

.compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{
    font-family: Dosis-Medium_F;
    font-size: 22px;
    font-weight: 300;
    margin-top: 35px;
}

.compromiso .cont-compromiso h4 > a, .compromiso .cont-compromiso h4 > a:hover{
    text-decoration: none;
    color: #fff;
}

/* Politica integral */
.politica-integral{
    margin-top: 3em;
    background-color: #E1E1E1;
    padding: 5em 0;
}

.politica-integral p{
    font-size: 14px;
    line-height: 150%;
    color: #5C5C5C;
    font-family: Ondo-Light;
    margin-top: 3%;
    text-align: justify;
}

.politica-integral .cuadro{
    height: 52px;
    padding: 0;
}

.politica-integral .txt-politica{
    font-family: Dosis-Bold_C;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

/* Certificaciones */
.certificaciones{
    margin-top: 3em;
}

/* Comunicate */
.comunicate{
    margin-top: 3em;
    background-color: #212121;
    padding: 5em 0;
}

.comunicate input, .comunicate input::selection, .comunicate input::before, .comunicate input:active, .comunicate input:focus{
    font-family: Dosis-Medium_F;
    background-color: #212121;
    color:rgba(255, 255, 255, 0.705);
    border: none;
    border-radius: none !important;
    border-bottom: 1px solid #fff;
}

.comunicate p{
    font-family: Dosis-Medium_F;
    color:rgba(255, 255, 255, 0.705);
}

/*
.swal2-styled.swal2-confirm{
    background-color: #f27474 !important;
}
*/

.comunicate .form-check-input, .comunicate .form-check-input::selection, .comunicate .form-check-input:active, .comunicate .form-check-input:checked{
    background-color: rgb(151, 151, 151) !important;
}

.comunicate .form-check a, .comunicate .form-check a:hover, .comunicate .form-check a::before{
    color: #d8d8d8;
}

.comunicate textarea, .comunicate textarea::selection, .comunicate textarea::before, .comunicate textarea:active, .comunicate textarea:focus{
    font-family: Dosis-Medium_F;
    background-color: #212121;
    color: rgba(255, 255, 255, 0.705);
    border-radius: none;
    border: none;
    border-bottom: 1px solid #fff;
}

.comunicate label{color: rgba(255, 255, 255, 0.705);}
.comunicate label, .comunicate button{ font-family: Dosis-Medium_F; }
.comunicate button{letter-spacing: 2px;}

.comunicate .h-100px{ height: 100px; }

.comunicate .label{
    color: rgba(255, 255, 255, 0.705);
}

.comunicate ::placeholder { color: rgba(255, 255, 255, 0.705); }

.comunicate .btn-enviar{
    color: #fff;
    background-color: #7a7a7a;
    border: none;
    font-weight: 400;
    padding: 10px 15px;
    margin-top: 2em;
}

.comunicate .btn-enviar:hover{
    background-color: #a8a8a8;
}

/* Redes sociales */
.redes-sociales .facebook, .redes-sociales .youtube, .redes-sociales .instagram{
    height: 35em;
    width: auto;
}

.eapps-facebook-feed-inner{ height: 32em; }

.redes-sociales .youtube{
    background-color: #000;
}

.redes-sociales .instagram{
    background-image: url("../img/bg_instagram.jpg");
}

.redes-sociales .instagram i{
    color: #fff;
    font-size: 8em;
}

/* Clientes */
.clientes h2{
    font-family: Ondo-MediumItalic;
    font-size: 22px;
    font-weight: 400;
}

/* flecha anterior */
.mySwiper2 .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    color: #333;
    content: 'prev';
    font-size: 35px;
    margin-left: -30px;
    z-index: 100;
}

/* flecha siguiente */
.mySwiper2 .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    color: #333;
    content: 'next';
    font-size: 35px;
    margin-right: -30px;
}

.mySwiper2 img{
    width: 180px;
}

/*** Footer Orocam SAS ***/
.footer-orocam{
    background-color: #212121;
    padding: 5em 0;
}

.footer-orocam img{
    width: 100%;
}

.footer-orocam .iconos > a{
    text-decoration: none;
    color: #fff;
    padding-right: 30px;
    font-size: 20px;
}

.footer-orocam .menu-footer > a, .footer-orocam .menu-footer > a:hover{
    font-family: Roboto;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    padding-right: 10px;
    color: #fff;
}

.footer-orocam .cont-der{
    position: relative; 
    bottom: -80px;
}

.footer-orocam h3{
    font-size: 18px;
    font-family: Dosis-Bold_C;
}

.footer-orocam .cont-cent p{
    font-family: Ondo-LightItalic;
}

/*** Footer ***/
.footer a{
    text-decoration: none;
    margin-top: 5px;
    font-family: Ondo-Light;
    font-size: 15px;
    color: #fff;
    padding: 0.5em 0.3em;
    display: block;
    text-align: center;
}


@media(max-width: 1920px){
    .linea-negocio .cont-img-d .img-1 { width: 22%;}
    .linea-negocio .cont-img-d .img-2 { width: 42%;}

}

@media(max-width: 1580px){
    .linea-negocio .cont-titulo .separador-i{ width: 40%;}
    .linea-negocio .cont-titulo .titulo{ width: 30%; }
    .linea-negocio .cont-titulo .separador-d{ width: 40%;}

    .compromiso .cont-compromiso h2{ font-size: 60px;}
    .compromiso .cont-compromiso h3, .compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{ font-size: 20px;}
    .compromiso .cont-compromiso a{ font-size: 17px;}

    .politica-integral .txt-politica{ font-size: 13px;}

    .redes-sociales .facebook, .redes-sociales .youtube, .redes-sociales .instagram{ height: 30em; }
    .eapps-facebook-feed-inner{ height: 28em; }
}

@media(max-width: 1400px){
    .navbar .w-nav{ width: 80%; }

    .productos h4{ font-size: 13px;}
    .productos .pb{ padding-bottom: 16px; }
    .productos h3{ font-size: 17px;}

    .linea-negocio .cont-img-d img{ width: 200px;}
    .linea-negocio .cont-img-d .img-2{width: 55%;}

    .compromiso .cont-compromiso h2{ font-size: 55px;}
    .compromiso .cont-compromiso h3, .compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{ font-size: 18px;}
    .compromiso .txt-der{bottom: -70px;}

    .footer-orocam .menu-footer > a, .footer-orocam .menu-footer > a:hover{font-size: 17px;}

    .mySwiper2 img{ width: 170px; }
}   

@media(max-width: 1250px){
    .productos h4 br{ display: none; }

    .redes-sociales .facebook, .redes-sociales .youtube, .redes-sociales .instagram{ height: 25em;}
    .eapps-facebook-feed-inner{ height: 23em;}
}

@media(max-width: 1200px){
    .navbar .w-nav{ width: 90%; }

    .linea-negocio .cont-titulo .separador-i{ width: 35%;}
    .linea-negocio .cont-titulo .titulo{ width: 40%; }
    .linea-negocio .cont-titulo .separador-d{ width: 35%;}

    .linea-negocio .cont-titulo .titulo{ font-size: 22px; }
    .linea-negocio .cont-txt-1 h4{ font-size: 15px;}

    .clientes h2{ font-size: 20px;}

    .footer-orocam .menu-footer > a, .footer-orocam .menu-footer > a:hover{ font-size: 15px; padding-right: 5px;}
}

@media(max-width: 1100px){
    .mySwiper2 img{ width: 160px; }
}

@media(max-width: 991px){
    .navbar .w-nav{width: 90%;}

    .productos h4 br{ display: block; }
    .productos h4{ font-size: 14px;}
    .productos .pb{ padding-bottom: 18px; }
    
    .linea-negocio .cont-titulo .separador-i{ width: 25%;}
    .linea-negocio .cont-titulo .titulo{ width: 60%; }
    .linea-negocio .cont-titulo .separador-d{ width: 25%;}
    .linea-negocio{ padding-top: 6%; }

    .compromiso .cont-compromiso h2{ font-size: 50px;}
    .compromiso .cont-compromiso h3, .compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{font-size: 19px;}
    .compromiso .cont-compromiso{padding-top: 4em; padding-bottom: 7em;}

    .redes-sociales .facebook, .redes-sociales .youtube, .redes-sociales .instagram, .eapps-facebook-feed{ height: 18em;}
    .eapps-facebook-feed-inner{ height: 16em; }

    .footer-orocam img{ width: 20em; padding-bottom: 3em;}
    .footer-orocam{ padding-top: 4em; padding-bottom: 3em;}
    .footer-orocam .cont-der{ bottom: 0; padding-top: 2.5em;}
}

@media(max-width: 767px){
    .productos h4{ font-size: 15px;}
    
    .productos{
        padding-top: 2em; 
        padding-bottom: 4em;
    }

    .redes-sociales .instagram{background-image: url("../img/bg_instagram2.PNG") !important;}

    .compromiso .cont-compromiso h2{ font-size: 45px;}
    .compromiso .cont-compromiso{padding-left: 1.5em; padding-right: 1.5em;}

    .clientes h2{ font-size: 18px;}

    .mySwiper2 img{ width: 150px; }
}

@media(max-width: 640px){
    .mySwiper2 img{ width: 140px; }
}

@media(max-width: 540px){
    .linea-negocio{ padding-top: 10%; }

    .carousel-item img{
        width: auto !important;
        height: 350px;
    }

    .compromiso .cont-compromiso h2{ font-size: 40px;}
    .compromiso .cont-compromiso h3, .compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{ font-size: 17px;}
    .compromiso .cont-compromiso a{ font-size: 16px;}
    .compromiso .cont-compromiso .portafolio{ font-size: 16px;}

}

@media(max-width: 480px){
    .compromiso .cont-compromiso h2{ font-size: 35px;}
    .compromiso .cont-compromiso h3, .compromiso .cont-compromiso h4, .compromiso .cont-compromiso h4 > a{ font-size: 16px;}

}

@media(max-width: 360px){
    .compromiso .cont-compromiso h2{ font-size: 30px;}
}