/*------------------------------------------------------------------
    IMPORT FONTS
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700');
/*@import url(https://allfont.net/allfont.css?fonts=open-sans-extrabold);*/
@import url(bootstrap-select.css);
@import url(jquery-ui.css);
@import url(owl.carousel.min.css);
@import url(baguetteBox.min.css);
@import url(bootsnav.css);
@import url(swiper.css);
@import url(swiper.min.css);
@import url(baguetteBox.min.css);
@import url(custom.css);
@import url(responsive.css);

/********** Template CSS **********/

:root {
    --primary: #091E3E;
    --secondary: #85A633;
    --light: #EEF9FF;
    --dark: #091E3E;
    --gray: #D7D7D7;
    --gray2: #F8F8F8;
    --gray3: #D3D3D3;
    --bluslider:#14395F ;
}

.title-main-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 74px;
    /*text-shadow: 4px 4px 4px #aaa;*/
    font-weight: bold;
    line-height: 1.2;
    padding-top: 110px;
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
  }
  
    @media screen and (max-width: 482px){
        .title-main-agrotic{
            font-size:65px;
        }
    }
    
    @media screen and (max-width: 432px){
        .title-main-agrotic{
            font-size:47px;
        }
    }
    
    @media screen and (max-width: 290px){
        .title-main-agrotic{
            font-size:38px;
        }
    }
    
.title-main-agrotic-two {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 74px;
    /*text-shadow: 4px 4px 4px #aaa;*/
    font-weight: bold;
    line-height: 1.2;
    padding-top: 0px;
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
  }
  
    @media screen and (max-width: 482px){
        .title-main-agrotic-two{
            font-size:65px;
        }
    }
    
    @media screen and (max-width: 432px){
        .title-main-agrotic-two{
            font-size:47px;
        }
    }
    
    @media screen and (max-width: 290px){
        .title-main-agrotic-two{
            font-size:38px;
        }
    }

.display-tittle-login-two {
    font-family: 'Open Sans Extrabold', arial;
    /*font-size: 74px;*/
    font-size: 6rem !important;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 0px;
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
    z-index: 0;
    top:50px;
}

    @media (max-width: 575.98px) {
        .display-tittle-login-two {
            
            top:-40px;
        }
    }
    
    @media (min-width: 767.98px) {
        .display-tittle-login-two {
            
            top:50px;
        }
    }
    
    @media (min-width: 991.98px) {
        .display-tittle-login-two {
            margin-top: 130px;
            top:20px;
        }
    }


.title-main2-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 68px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    position: relative;
    color: var(--primary) !important;
  }
  
      @media screen and (max-width: 600px){
        .title-main2-agrotic{
            font-size:45px;
        }
    }
    
    @media screen and (max-width: 432px){
        .title-main2-agrotic{
            font-size:37px;
        }
    }
    
    @media screen and (max-width: 360px){
        .title-main2-agrotic{
            font-size:30px;
        }
    }

.title-main3-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    position: relative;
    color: var(--primary) !important;
  }
  
 /* @media screen and (max-width: 264px){ */
@media screen and (max-width: 450px){
    .title-main3-agrotic{
        font-size:40px;
    }
}
.sub-title-main-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    color: var(--primary) !important;
  }
  
  .sub-title-main-agrotic2 {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    color: var(--secondary) !important;
  }
  
    .sub-title-main-agrotic3 {
        font-family: 'Open Sans Extrabold', arial;
        font-size: 40px;
        font-weight: bold;
        line-height: 1.2;
        position: relative;
        color: #FFF !important;
      }
  
    /* @media screen and (max-width: 264px){ */
    @media screen and (max-width: 400px){
        .sub-title-main-agrotic{
            font-size:30px;
        }
    }

.sub-title2-main-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    color: var(--primary) !important;
  }
  
 .sub-title3-main-agrotic {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 25px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    color: var(--primary) !important;
  }
  
  
  
  .parrafo-agrotic {
    /*font-family: 'Open Sans Extrabold', arial;
    font-size: 31px;
    font-weight: bold;
    line-height: 1.2;
    position: relative;*/
    color: var(--primary) !important;
  }
  
  /* iconos redes sociales */
.text-icon-social{
    position: relative;
    top: 0px !important;
}
  
::-webkit-scrollbar {
    width: 14px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/*** Spinner ***/

.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Encabezado ***/

h1,
h2,
.fw-bold {
    font-weight: 800 !important;
}

h3,
h4,
.fw-semi-bold {
    font-weight: 700 !important;
}

h5,
h6,
.fw-medium {
    font-weight: 600 !important;
}


/*** Botones ***/

.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
    box-shadow: inset 0 0 0 50px transparent;
}

.btn-primary:hover {
    box-shadow: inset 0 0 0 0 var(--primary);
}

.btn-secondary:hover {
    box-shadow: inset 0 0 0 0 var(--secondary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 30px;
    height: 30px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}


/*** Barra de navegación ***/

.navbar-dark .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    position: relative;
    margin-left: 25px;
    padding: 35px 0;
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-dark .navbar-nav .nav-link {
    padding: 20px 0;
    color: var(--dark);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #FFFFFF;
    background-color: var(--secondary);
}

.navbar-dark .navbar-brand h1 {
    color: #FFFFFF;
}

.navbar-dark .navbar-toggler {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-dark {
        position: relative;
        background: #FFFFFF;
    }
    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .navbar-nav .nav-link.show,
    .sticky-top.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--dark);
    }
    .navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}

@media (min-width: 992px) {
    .navbar-dark {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid var(--primary)/*rgba(256, 256, 256, .1)*/;
        z-index: 999;
    }
    .sticky-top.navbar-dark {
        position: fixed;
        /* background: #FFFFFF;           Jhoseph      ***/
        background-color: var(--secondary);
    }
    .navbar-dark .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--primary);
        transition: .5s;
    }
    .navbar-dark .navbar-nav .nav-link:hover::before,
    .navbar-dark .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }
    .navbar-dark .navbar-nav .nav-link.nav-Contacto::before {
        display: none;
    }
    .sticky-top.navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}


/*** Carousel ***/

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .0);
    z-index: 15!important;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
        position: absolute;
    }
    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 500 !important;
        top: -26px;
        position: relative;
    }
    .carousel-caption h4 {
        font-size: 12px;
        font-weight: 500 !important;
        top: 2px;
        position: absolute;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}


/*** Sección titulo ***/

.section-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--secondary);
    border-radius: 2px;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -75px;
}

.section-title.section-title-sm::before {
    width: 90px;
    height: 3px;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0px;
    background: #FFFFFF;
    -webkit-animation: section-title-run 5s infinite linear;
    animation: section-title-run 5s infinite linear;
}

.section-titlee::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--secondary);
    border-radius: 2px;
}

.section-titlee::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0px;
    background: #FFFFFF;
    -webkit-animation: section-title-run 5s infinite linear;
    animation: section-title-run 5s infinite linear;
}

.section-title.section-title-sm::after {
    width: 4px;
    height: 3px;
}

.section-title.text-center::after {
    -webkit-animation: section-title-run-center 5s infinite linear;
    animation: section-title-run-center 5s infinite linear;
}

.section-title.section-title-sm::after {
    -webkit-animation: section-title-run-sm 5s infinite linear;
    animation: section-title-run-sm 5s infinite linear;
}

@-webkit-keyframes section-title-run {
    0% {
        left: 0;
    }
    50% {
        left: 145px;
    }
    100% {
        left: 0;
    }
}

@-webkit-keyframes section-title-run-center {
    0% {
        left: 50%;
        margin-left: -75px;
    }
    50% {
        left: 50%;
        margin-left: 45px;
    }
    100% {
        left: 50%;
        margin-left: -75px;
    }
}

@-webkit-keyframes section-title-run-sm {
    0% {
        left: 0;
    }
    50% {
        left: 85px;
    }
    100% {
        left: 0;
    }
}

.section-title-2::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--primary);
    border-radius: 2px;
}

.section-title-2.text-center::before {
    left: 50%;
    margin-left: -75px;
}

.section-title-2.section-title-2-sm::before {
    width: 90px;
    height: 3px;
}

.section-title-2::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0px;
    background: #FFFFFF;
    -webkit-animation: section-title-run 5s infinite linear;
    animation: section-title-run 5s infinite linear;
}

.section-title-2.section-title-2-sm::after {
    width: 4px;
    height: 3px;
}

.section-title-2.text-center::after {
    -webkit-animation: section-title-run-center 5s infinite linear;
    animation: section-title-run-center 5s infinite linear;
}

.section-title-2.section-title-2-sm::after {
    -webkit-animation: section-title-run-sm 5s infinite linear;
    animation: section-title-run-sm 5s infinite linear;
}

@-webkit-keyframes section-title-run {
    0% {
        left: 0;
    }
    50% {
        left: 145px;
    }
    100% {
        left: 0;
    }
}

@-webkit-keyframes section-title-run-center {
    0% {
        left: 50%;
        margin-left: -75px;
    }
    50% {
        left: 50%;
        margin-left: 45px;
    }
    100% {
        left: 50%;
        margin-left: -75px;
    }
}

@-webkit-keyframes section-title-run-sm {
    0% {
        left: 0;
    }
    50% {
        left: 85px;
    }
    100% {
        left: 0;
    }
}



/*** Servicios ***/

.service-item {
    position: relative;
    height: 300px;
    padding: 0 30px;
    transition: .5s;
}

.service-item .service-icon {
    margin-bottom: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 2px;
    transform: rotate(-45deg);
}

.service-item .service-icon i {
    transform: rotate(45deg);
}

.service-item a.btn {
    position: absolute;
    width: 60px;
    bottom: -48px;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
}

.service-item:hover a.btn {
    bottom: -24px;
    opacity: 1;
}


/*** Testimonios ***/

.testimonial-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: #DDDDDD;
    border-radius: 2px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}

.testimonial-carousel .owl-item.center {
    position: relative;
    z-index: 1;
}

.testimonial-carousel .owl-item .testimonial-item {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: #FFFFFF !important;
    box-shadow: 0 0 30px #DDDDDD;
}


/*** Equipo ***/

.team-item {
    transition: .5s;
}

.team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}

.team-social a.btn {
    position: relative;
    margin: 0 3px;
    margin-top: 100px;
    opacity: 0;
}

.team-item:hover {
    box-shadow: 0 0 30px #DDDDDD;
}

.team-item:hover .team-social {
    background: rgba(9, 30, 62, .7);
}

.team-item:hover .team-social a.btn:first-child {
    opacity: 1;
    margin-top: 0;
    transition: .3s 0s;
}

.team-item:hover .team-social a.btn:nth-child(2) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .05s;
}

.team-item:hover .team-social a.btn:nth-child(3) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .1s;
}

.team-item:hover .team-social a.btn:nth-child(4) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .15s;
}

.team-item .team-img img,
.blog-item .blog-img img {
    transition: .5s;
}

.team-item:hover .team-img img,
.blog-item:hover .blog-img img {
    transform: scale(1.15);
}


/*** Miscelaneas ***/

@media (min-width: 991.98px) {
    .facts {
        position: relative;
        margin-top: -75px;
        z-index: 1;
    }
}

.back-to-top {
    position: fixed;
    display: none;
    right: 0px;
    bottom: 45px;
    z-index: 99;
}

.bg-header {
    background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.bg-header-estadistica {
    background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/header-estadistica.jpg) center center no-repeat;
    background-size: cover;
}

.bg-header-not-found {
    background: linear-gradient(rgba(9, 30, 62, .0), rgba(9, 30, 62, .7)), url(../img/carousel-3.jpg) center center no-repeat;
    background-size: cover;
}

.bg-header-shop {
    background: url(../img/map/Fondo-verde-imagen-02.jpg) center center no-repeat;
    background-size: cover;
}

.bg-header-cart {
    background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/carrito-compras-online.jpg) center center no-repeat;
    background-size: cover;
}

.link-animated a {
    transition: .5s;
}

.link-animated a:hover {
    padding-left: 10px;
}

@media (min-width: 767.98px) {
    .footer-Acerca de {
        margin-bottom: -75px;
    }
}


/* login */

.login-body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh
}

.login-form {
    position: absolute;
    top: 65%;
    left: 50%;
    width: 350px;
    padding: 50px 45px 60px 45px;
    /*padding: 1px 50px 1px 50px;*/
    transform: translate(-50%, -50%);
    background: var(--gray);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    border-radius: 5px
}

/* @media (max-width: 575px) { */
@media (max-width: 768px) {
    .login-form {
        width: 282px;
        padding: 90px 15px 15px 15px
        
        z-index: 2;
        
    }
}

.login-form .logo-login img {
    width: 120px;
    height: 120px;
    position: absolute;
    top: -65px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: none;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .logo-login img{
        top: 0px!important;
    }
}


.login-form h2 {
    color: #fff;
    font-size: 30px;
    margin: 0;
    text-align: center;
    font-weight: 600;
    margin-bottom: 40px
}

.login-form .form-input {
    position: relative;
    margin: 20px 0
}

.login-form .form-input label {
    font-size: 18px;
    font-weight: 600;
    color: #fff
}

.login-form .form-input input {
    outline: none;
    /*height: 40px;*/
    height: 30px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background: transparent;
    font-size: 16px;
    border: none;
    color: var(--primary);
    border-bottom: 0px solid #fff
}

.login-form .form-input input::placeholder {
    color: var(--primary)
}

.login-form .form-input input[type="submit"] {
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: capitalize;
    line-height: 0;
    font-size: 18px;
    font-weight: 700;
    border-radius: 10px;
    transition: .4s
}

.login-form .form-input input[type="submit"]:hover {
    background: #000;
    background: var(--secondary)
}

.login-form .forget {
    display: block;
    margin-top: 30px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: navajowhite;
    text-align: center;
    margin-bottom: 5px
}

.login-form .forget:hover {
    color: #fff
}

.login-form .registration {
    display: block;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    margin-bottom: 5px
}

.login-form .registration:hover {
    color: #fff
}

.botton-error{
	-webkit-appearance:auto !important;
	color: var(--primary) !important;
    font-size: 25px !important;
    float: right;
    top: -10px;
    position: relative;
    height: 44px;
    border-radius: 9px;
    border: solid 2px var(--primary) !important;
    right: -10px;
}


/* titulos municipios */


/* hover imagenes */

.contenedor {
    overflow: hidden !important;
}

.contenedor:hover .imagen {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    transition: all 1s ease-out 0s
}

.contenedor:hover .imagen-faq {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 2s ease-out 0s
}


/* Marcador Mapa */

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background: var(--primary);
    color: #ffffff;
}

.mapa-centrado {
    /*border: 1px solid rgba(20, 163, 230, 0.9);
    box-shadow: 0 5px 10px rgba(20, 163, 230, 0.9);*/
    padding-top: 20px;
    
}


/* acordeon*/

#container-main {
    margin: 40px auto;
    width: 95%;
    min-width: 320px;
    max-width: 960px;
}

#container-main h1 {
    font-size: 40px;
    text-shadow: 4px 4px 5px #85A633;
}

#container-main a {
   color: var(--primary);
}

#container-main span {
    color: #fff;
    background-color: #123A5E;
    font-weight: bold;
}

.accordion-container {
    width: 100%;
    margin: 0 0 20px;
    clear: both;
}

.accordion-titulo {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 22px;
    font-weight: 300;
    background: #123A5E;
    color: #fff !important;
    text-decoration: none;
}

.accordion-titulo.open {
    background: #123A5E;
    color: #fff !important;
}

.accordion-titulo:hover {
    background: #85A633;
}

.accordion-titulo span.toggle-icon:before {
    content: "+";
}

.accordion-titulo.open span.toggle-icon:before {
    content: "-";
}

.accordion-titulo span.toggle-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 38px;
    font-weight: bold;
}

.accordion-content {
    display: none;
    padding: 20px;
    overflow: auto;
}

.accordion-content p {
    margin: 0;
}

.accordion-content img {
    /*display: block;
    float: left;*/
    margin: 0 15px 10px 0;
    /*width: 50%;*/
    height: auto;
}

@media (max-width: 767px) {
    .accordion-content {
        padding: 10px 0;
    }
}


/* Galeria */

.project-item a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .5);
    border-radius: 6px;
    opacity: 0;
    transition: .5s;
}

.project-item:hover a {
    opacity: 1;
}

.project-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.project-carousel .owl-dot {
    width: 35px;
    height: 35px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DEE2E6;
    border-radius: 35px;
    transition: .5s;
}

.project-carousel .owl-dot:hover,
.project-carousel .owl-dot.active {
    color: #FFFFFF;
    border-color: var(--primary);
    background: var(--primary);
}


/* Precio Carousel galeria */

.price-carousel .owl-nav {
    position: absolute;
    width: calc(100% + 45px);
    height: 45px;
    top: calc(50% - 22.5px);
    left: -22.5px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
}

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

.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover {
    background: var(--secondary);
}


/* Categorias productos */

.products-box {
    padding: 70px 0px;
}

.featured-products-box .owl-nav {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -20px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-prev {
    background: var(--primary);
    color: #ffffff;
    width: 38px;
    height: 38px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-next {
    background: var(--primary);
    color: #ffffff;
    width: 38px;
    height: 38px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-prev:hover,
.featured-products-box .owl-nav button.owl-next:hover {
    background: var(--secondary);
}

.special-menu {
    margin-bottom: 40px;
}

.filter-button-group {
    display: inline-block;
}

.filter-button-group button {
    background: var(--secondary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 5px 30px;
    font-size: 18px;
}

.filter-button-group button.active {
    background: var(--primary);
}

.products-single {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    border: 1px solid;
    border-color:#dcdcdc;
}

.products-single .box-img-hover {
    overflow: hidden;
    position: relative;
}

.box-img-hover img {
    margin: 0 auto;
    text-align: center;
    display: block;
}

.title-all {
    margin-bottom: 30px;
}

.title-all h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.title-all p {
    color: #999999;
    font-size: 16px;
}

.products-box {
    padding: 70px 0px;
}

.special-menu {
    margin-bottom: 40px;
}

.filter-button-group {
    display: inline-block;
}

.filter-button-group button {
    background: var(--secondary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 5px 30px;
    font-size: 18px;
}

.filter-button-group button.active {
    background: var(--primary);
}


.box-img-hover img {
    margin: 0 auto;
    text-align: center;
    display: block;
}

.type-lb {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 8;
}

.type-lb .sale {
    background: var(--secondary);
    color: #ffffff;
    padding: 2px 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.type-lb .new {
    background: var(--primary);
    color: #ffffff;
    padding: 2px 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.why-text {
    background: #f5f5f5;
    padding: 15px;
}

.why-text h4 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 15px;
}

.why-text h5 {
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    padding: 4px;
    display: inline-block;
    /*background: var(--secondary);damj*/
    color: #ffffff;
    font-weight: 600;
}

.mask-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.mask-icon ul {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
}

.mask-icon ul li {
    background: var(--secondary);
    ;
}

.mask-icon ul li a {
    color: #ffffff;
    padding: 5px 10px;
    display: block;
}

.mask-icon a.cart {
    background: var(--secondary);
    position: absolute;
    bottom: 0;
    left: 0px;
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
}

.mask-icon a.cart:hover {
    background: var(--primary);
    color: #ffffff;
}

.mask-icon ul li a:hover {
    background: var(--primary);
    color: #ffffff;
}

.products-single .mask-icon {
    background: rgba(1, 1, 1, 0.5);
    top: -100%;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0.5s;
    -moz-transition: all 0.3s ease-out 0.5s;
    -o-transition: all 0.3s ease-out 0.5s;
    -ms-transition: all 0.3s ease-out 0.5s;
    transition: all 0.3s ease-out 0.5s;
}

.products-single:hover .mask-icon {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.9s linear;
    -moz-animation: bounceY 0.9s linear;
    -ms-animation: bounceY 0.9s linear;
    animation: bounceY 0.9s linear;
}

@keyframes bounceY {
    0% {
        transform: translateY(-205px);
    }
    40% {
        transform: translateY(-100px);
    }
    65% {
        transform: translateY(-52px);
    }
    82% {
        transform: translateY(-25px);
    }
    92% {
        transform: translateY(-12px);
    }
    55%,
    75%,
    87%,
    97%,
    100% {
        transform: translateY(0px);
    }
}

@-moz-keyframes bounceY {
    0% {
        -moz-transform: translateY(-205px);
    }
    40% {
        -moz-transform: translateY(-100px);
    }
    65% {
        -moz-transform: translateY(-52px);
    }
    82% {
        -moz-transform: translateY(-25px);
    }
    92% {
        -moz-transform: translateY(-12px);
    }
    55%,
    75%,
    87%,
    97%,
    100% {
        -moz-transform: translateY(0px);
    }
}

@-webkit-keyframes bounceY {
    0% {
        -webkit-transform: translateY(-205px);
    }
    40% {
        -webkit-transform: translateY(-100px);
    }
    65% {
        -webkit-transform: translateY(-52px);
    }
    82% {
        -webkit-transform: translateY(-25px);
    }
    92% {
        -webkit-transform: translateY(-12px);
    }
    55%,
    75%,
    87%,
    97%,
    100% {
        -webkit-transform: translateY(0px);
    }
}


/* Fin categorias productos */


/* Styles folletos*/

.div-folleto {
    background-color: #123A5E;
    color: #85A633;
    font-weight: bold
}

.div-folleto-2 {
    background-color: #85A633;
    color: #fff;
    font-weight: bold
}

.titulo-folleto-main {
    color: #fff;
    font-weight: bold;
}

.titulo-folleto {
    color: #123A5E;
    font-weight: bold;
}

.texto-folleto {
    color: #fff;
}

section.info-folletos {
    background: linear-gradient(rgba(9, 30, 62, .5), rgba(9, 30, 62, .9)), url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 0px;
}

section.info-folletos-impacto {
    background: linear-gradient(rgba(9, 30, 62, .5), rgba(9, 30, 62, .9)), url(../img/carousel-6.jpg) center center no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 0px;
}

.embed-container {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-white-icon {
    color: #ffffff !important;
    font-size: 18px;
    padding-left: 2px;
}


/*Carrito de compras*/

.table-main table thead {
    background: #b0b435;
    color: #ffffff;
}

.table-main .table thead th {
    font-size: 18px;
}

.table-main table td.thumbnail-img {
    width: 120px;
}

.table-main table td {
    vertical-align: middle;
    font-size: 16px;
}


/* Inicio tienda new*/


.title-product-main-shop {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    position: relative;
    color: var(--primary) !important;
  }
  
@media screen and (max-width: 992px){
    .title-product-main-shop{
        font-size:24px;
    }
}
  
@media screen and (max-width: 756px){
    .title-product-main-shop{
        font-size:20px;
    }
}

@media screen and (max-width: 400px){
    .title-product-main-shop{
        font-size:16px;
    }
}

.bg-shop {
    background-image: url('../img/shop/Fondo-verde-imagen-obonuco-02.jpg');
    background-position: center center;
    background-attachment:inherit;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.all-title-box {
    background: url("../images/all-bg-title.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    background-attachment: fixed;
    padding: 70px 0px;
    position: relative;
}

.all-title-box::before {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.all-title-box h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    float: left;
    padding: 10px 0px;
}

.all-title-box .breadcrumb {
    background: #b0b435;
    margin: 0px;
    display: inline-block;
    border-radius: 0px;
    /*float: right;  sebitas*/
}

.all-title-box .breadcrumb li {
    display: inline-block;
    color: #000000;
    font-size: 16px;
}

.all-title-box .breadcrumb li a {
    color: #ffffff;
    font-size: 16px;
}

.all-title-box .breadcrumb-item+.breadcrumb-item::before {
    color: #000000;
}

.about-box-main {
    padding: 70px 0px;
}

.noo-sh-title {
    font-size: 28px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 30px;
}

.noo-sh-title-top {
    font-size: 28px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0px;
}

.about-box-main p {
    padding-bottom: 20px;
}

.service-block-inner {
    padding: 15px 20px;
    position: relative;
    margin-bottom: 30px;
}

.about-box-main a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border: none;
}

.about-box-main a.btn {
    padding: 12px 15px;
}

.service-block-inner::before {
    content: "";
    width: 100%;
    height: 5px;
    border-radius: 0px;
    background: #000000;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease 0s;
}

.service-block-inner::after {
    content: "";
    width: 100%;
    height: 0;
    border-radius: 0px;
    background: #b0b435;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.5s ease 0s;
}

.service-block-inner h3 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 600;
}

.service-block-inner p {
    margin: 0px;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 0px;
}

.service-block-inner:hover::after {
    height: 100%;
}

.service-block-inner:hover h3 {
    color: #ffffff;
    transition: all 0.5s ease 0s;
}

.service-block-inner:hover p {
    color: #ffffff;
    transition: all 0.5s ease 0s;
}

.our-team {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease 0s;
}

.our-team:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.our-team img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out 0s;
}

.our-team:hover img {
    opacity: 0.5;
}

.our-team .team-content {
    color: #000;
    opacity: 1;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #ffffff;
    padding-left: 55px;
    width: 100%;
    transition: all 0.3s ease 0s;
}

.our-team .title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 7px 0;
}

.our-team .post {
    display: block;
    font-size: 15px;
}

.our-team .social {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 35px;
    text-align: center;
    opacity: 0;
    position: absolute;
    bottom: 35px;
    right: 0px;
    transition: all 0.3s ease 0s;
}

.our-team:hover .social {
    opacity: 1;
}

.our-team .social li {
    display: block;
}

.our-team .social li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #000000;
    font-size: 17px;
    color: #fff;
    opacity: 0.9;
    position: relative;
    transform: translate(35px, -35px);
    transition: all 0.3s ease-in-out 0s
}

.our-team .social li a:hover {
    width: 35px;
    background: #b0b435;
    transition-delay: 0s;
}

.our-team .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #b0b435;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0;
}

.team-description {
    padding: 20px 0px;
}

.team-description p {
    font-size: 14px;
    margin: 0px;
}

.hover-team:hover .social {
    opacity: 1;
}

.hover-team:hover .social li:nth-child(1) a {
    transition-delay: 0.3s;
}

.hover-team:hover .social li:nth-child(2) a {
    transition-delay: 0.2s;
}

.hover-team:hover .social li:nth-child(3) a {
    transition-delay: 0.1s;
}

.hover-team:hover .social li:nth-child(4) a {
    transition-delay: 0.0s;
}

.hover-team:hover .social li a {
    transform: translate(0, 0)
}

.hover-team:hover img {
    opacity: 0.5;
}

.hover-team .team-content .title {
    border-bottom: 2px solid #b0b435;
}

.shop-box-inner {
    padding: 70px 0px;
}

.search-product {
    position: relative;
}

.search-product input[type="text"] {
    background: #d7d7d7;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: #ffffff;
    height: 55px;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 0 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    width: 100%;
    outline: 0;
}

.search-product .form-control::-moz-placeholder {
    color: #ffffff;
    opacity: 1;
}

.search-product button {
    background: var(--primary);
    color: #ffffff;
    font-size: 18px;
    position: absolute;
    right: 0px;
    padding: 12px 15px;
    top: 0;
    line-height: 27px;
    border: none;
    cursor: pointer;
    height: 100%;
}

.search-product button:hover {
    background: #b0b435;
}

.filter-sidebar-left {
    margin-bottom: 20px;
}

.title-left {
    font-size: 16px;
    border-bottom: 3px solid var(--primary);
    margin-bottom: 20px;
}

.title-left h3 {
    font-weight: 700;
}

.list-group-item {
    border: none;
    padding: 5px 20px;
    font-size: 14px;
}

.text-muted {
    padding: 10px 0px;
}

.list-group-item[data-toggle="collapse"]::after {
    width: 0;
    height: 0;
    position: absolute;
    top: calc(50% - 12px);
    right: 10px;
    content: '';
    -webkit-transition: top .2s, -webkit-transform .2s;
    transition: top .2s, -webkit-transform .2s;
    transition: transform .2s, top .2s;
    transition: transform .2s, top .2s, -webkit-transform .2s;
    font-family: FontAwesome;
    content: "\f105";
}

.list-group-tree .list-group-collapse .list-group {
    margin-left: 25px;
    border-left: 1px solid #ced4da;
}

.list-group-tree .list-group-item.active {
    color: #b0b435;
    background-color: #fff;
    font-weight: 700;
}

.list-group-tree .list-group-collapse .list-group>.list-group-item::before {
    position: absolute;
    top: 14px;
    left: 0;
    content: '';
    width: 8px;
    height: 1px;
    background-color: #ced4da;
}

.list-group-tree .list-group-item:hover {
    color: #b0b435;
    background-color: #fff;
    outline: 0;
    font-weight: 700;
}

.filter-price-left {
    margin-bottom: 20px;
}

#slider-range .ui-slider-handle {
    background-color: #b0b435;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 21px;
    top: -6px;
    transition: none 0s ease 0s;
    width: 21px;
    box-shadow: 0px 0px 6.65px 0.35px rgba(0, 0, 0, 0.15);
}

#slider-range .ui-slider-range {
    background-color: #b0b435;
    border-radius: 0;
}

#slider-range {
    background: var(--primary);
    border: medium none;
    border-radius: 50px;
    float: left;
    height: 10px;
    margin-top: 14px;
    width: 100%;
}

.price-box-slider p {
    clear: both;
    margin-top: 20px;
    display: inline-block;
    width: 100%;
}

.price-box-slider p input {
    margin-top: 5px;
}

.price-box-slider p button {
    border: none;
    color: #ffffff;
    float: right;
}

.brand-box {
    display: inline-block;
    width: 100%;
    height: 259px;
    position: relative;
}

.product-item-filter {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 5px 0;
}

.nice-select.wide {
    width: 75%;
}

.product-item-filter .toolbar-sorter-right span {
    line-height: 42px;
    padding-right: 15px;
    float: left;
}

.product-item-filter .toolbar-sorter-right {
    width: 65%;
}

.toolbar-sorter-right {
    float: left;
}

.toolbar-sorter-right .bootstrap-select.form-control:not([class*="col-"]) {
    width: 77%;
    float: right;
}

.toolbar-sorter-right .bootstrap-select.btn-group>.dropdown-toggle {
    padding: 0px;
    border-radius: 0px;
    border: none;
}

.toolbar-sorter-right .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    padding-left: 15px;
}

.toolbar-sorter-right .btn-light {
    background: var(--secondary);
    color: #ffffff;
}

.toolbar-sorter-right .btn-light:hover {
    background: #b0b435;
    border-radius: 0px;
    border: none;
}

.toolbar-sorter-right .show>.btn-light.dropdown-toggle {
    background-color: #b0b435;
}

.toolbar-sorter-right .bootstrap-select .dropdown-toggle:focus {
    background: #b0b435;
}

.toolbar-sorter-right .dropup .dropdown-toggle::after {
    position: absolute;
    right: 15px;
    top: 18px;
}

.product-item-filter p {
    float: right;
    line-height: 30px;
}

.product-item-filter .nav-tabs {
    border: none;
    float: right;
}

.nav>li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.product-item-filter li .nav-link {
    border: none;
    border-radius: 0px;
    color: #111111;
    font-size: 18px;
    padding: 4px 12px;
}

.product-item-filter li .nav-link.active {
    background: #b0b435;
    border: none;
    color: #ffffff;
}

.product-item-filter li .nav-link:hover {
    background: var(--primary);
    border: none;
    color: #ffffff;
}

.product-categori {
    margin-bottom: 30px;
}

.product-categorie-box {
    margin-top: 20px;
}

.tab-content,
.tab-pane {
    width: 100%;
}

.why-text.full-width h4 {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 15px;
}

.why-text.full-width h5 del {
    font-size: 13px;
    color: #666;
}

.why-text.full-width h5 {
    color: #000000;
    font-weight: 700;
}

.why-text.full-width p {
    padding-bottom: 20px;
}

.why-text.full-width a {
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
    border: none;
}

.list-view-box {
    margin-bottom: 30px;
}

.list-view-box:hover .mask-icon {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.9s linear;
    -moz-animation: bounceY 0.9s linear;
    -ms-animation: bounceY 0.9s linear;
    animation: bounceY 0.9s linear;
}

.cart-box-main {
    padding: 70px 0px;
}

.table-main table thead {
    background: var(--secondary);
    color: #ffffff;
}

.table-main .table thead th {
    font-size: 18px;
}

.table-main table td.thumbnail-img {
    width: 120px;
}

.table-main table td {
    vertical-align: middle;
    font-size: 16px;
}

.quantity-box input {
    width: 60px;
    border: 2px solid #000000;
    text-align: center;
}

.quantity-box input:focus {
    border-color: #b0b435;
}

.name-pr a {
    font-weight: 700;
    font-size: 18px;
    color: #000000;
}

.remove-pr {
    text-align: center;
}

.coupon-box .input-group .form-control {
    min-height: 50px;
    border-radius: 0px;
    font-weight: 400;
    border: 1px solid #e8e8e8;
    box-shadow: none !important;
}

.coupon-box .input-group .form-control::-moz-placeholder {
    color: #000000;
}

.coupon-box .input-group .input-group-append .btn-theme {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 0px;
    font-size: 16px;
    padding: 0px 20px;
}

.coupon-box .input-group .input-group-append .btn-theme:hover {
    background: var(--secondary);
}

.update-box input[type="submit"] {
    background: var(--secondary);
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    /*float: right; sebitas*/
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    line-height: 40px;
    margin-right: 15px;
    padding: 0 20px;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: inherit;
}

.update-box input[type="submit"]:hover {
    background: var(--primary);
}

.income-account input[type="submit"] {
    background: var(--primary);
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    /*float: left; sebitas*/
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    padding: 0 20px;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: inherit;
    margin-top: 5px;
}

.income-reg input[type="submit"]:hover {
    background: var(--primary);
}

.income-reg input[type="submit"] {
    background: var(--secondary);
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    /* float: left; sebitas */
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    padding: 0 20px;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: inherit;
    margin-top: 5px;
}

.income-account input[type="submit"]:hover {
    background: var(--primary);
}

.order-box h3 {
    font-size: 16px;
    color: #222222;
    font-weight: 700;
}

.order-box h4 {
    font-size: 16px;
    padding: 0px;
    line-height: 35px !important;
}

.order-box .font-weight-bold {
    font-size: 14px;
}

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px
}

.form-row>.col,
.form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px
}

.d-flex-product {
    display: flex !important;
    align-items: center
}

.order-boxs {
    display: flex;
    flex-direction: column;
    justify-content: right !important;
    width: auto;
    border: 0px solid transparent;
    text-align: right;
}

.gr-total h5 {
    font-weight: 700;
    color: #b0b435;
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    line-height: 35px !important;
}

.gr-total .h5 {
    margin: 0px;
    font-weight: 700;
    line-height: 35px;
}

.my-account-box-main {
    padding: 70px 0px;
}

.shopping-box a {
    font-size: 18px;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
}

.payment-icon {
    display: inline-block;
    padding: 10px 0px;
}

.payment-icon ul li {
    width: 20%;
    float: left;
    color: transparent;
}

.needs-validation label {
    font-size: 16px;
    margin-bottom: 0px;
    line-height: 24px;
}

.needs-validation .form-control {
    min-height: 40px;
    border-radius: 0px;
    border: 1px solid #e8e8e8;
    box-shadow: none !important;
    font-size: 14px;
}

.needs-validation .form-control:focus {
    border: 1px solid #b0b435 !important;
}

.review-form-box .form-control {
    min-height: 40px;
    border-radius: 0px;
    border: 1px solid #e8e8e8;
    box-shadow: none !important;
    font-size: 14px;
}

.hvr-hover::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #123A5E;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-hover:hover::after {
    -webkit-transform: scale(2);
    transform: scale(2);
    color: #ffffff;
}

.hvr-hover {
    overflow: hidden;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #b0b435;
    box-shadow: none;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: #b0b435;
    box-shadow: none;
}

.new-account-login h5 {
    font-size: 18px;
    color: #111111;
    font-weight: 600;
}

.new-account-login h5 a:hover {
    color: #b0b435;
}

.review-form-box button {
    padding: 10px 20px;
    color: var(--primary);
    font-size: 18px;
    border: none;
}

.wide.w-100 {
    min-height: 50px;
    border: 1px solid #e8e8e8;
}

.wide.w-100 option {
    min-height: 40px;
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

.odr-box a {
    font-size: 18px;
    color: #111111;
    font-weight: 700;
}

.account-box {
    text-align: center;
    background: #ffffff;
    padding: 30px;
    border: 1px solid #000000;
}

.bottom-box {
    border-top: 1px solid #eee;
    margin-bottom: 30px;
    margin-top: 30px;
    padding-top: 15px;
}

.bottom-box .account-box {
    min-height: 205px;
}

.account-box {
    border: 2px solid #000000;
    margin-top: 15px;
}

.my-account-page a {
    color: #000000;
}

.my-account-page a:hover {
    color: #b0b435;
}

.service-icon i {
    font-size: 34px;
}

.service-desc p {
    font-size: 16px;
}

.service-desc h4 {
    text-decoration: underline;
    font-size: 18px;
    font-weight: 700;
}

.service-icon a {
    background: rgba(0, 0, 0, 0.9);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}

.service-icon a {
    display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 15px 0px;
    width: 90px;
    height: 90px;
    line-height: 110px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.service-icon a::after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.service-icon a:hover::after {
    -webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}

.service-icon a:hover {
    background: rgba(251, 183, 20, 1);
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #b0b435, 0 0 0 10px rgba(0, 53, 68, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #b0b435, 0 0 0 10px rgba(0, 53, 68, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #b0b435, 0 0 0 10px rgba(0, 53, 68, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #b0b435, 0 0 0 10px rgba(0, 53, 68, 0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #b0b435, 0 0 0 10px rgba(0, 53, 68, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 53, 68, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(0, 53, 68, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

.add-pr a {
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
    border: none;
}

.wishlist-box-main {
    padding: 70px 0px;
}

.services-box-main {
    padding: 70px 0px;
}

.contact-box-main {
    padding: 70px 0px;
}

.contact-info-left {
    padding: 20px;
    background: url(../images/contact-bg.jpg) no-repeat center;
    background-size: cover;
}

.contact-info-left h2 {
    font-size: 22px;
    font-weight: 700;
}

.contact-info-left p {
    margin-bottom: 15px;
}

.contact-info-left ul li {
    margin-bottom: 12px;
}

.contact-info-left ul li p {
    font-size: 16px;
    color: #222222;
    font-weight: 300;
    padding-right: 16px;
    padding-left: 25px;
    line-height: 24px;
    position: relative;
}

.contact-info-left ul li p i {
    position: absolute;
    left: 0;
    top: 5px;
    padding-right: 6px;
    color: #b0b435;
}

.contact-info-left ul li p a:hover {
    color: #b0b435;
}

.contact-form-right {
    padding: 20px;
}

.contact-form-right h2 {
    font-size: 24px;
    font-weight: 700;
}

.contact-form-right p {
    margin-bottom: 15px;
}

.contact-form-right .form-group .form-control::-moz-placeholder {
    color: #999999;
}

.contact-form-right .form-group .form-control {
    border-radius: 0px;
    min-height: 40px;
}

.contact-form-right .form-group {
    margin-bottom: 30px;
    position: relative;
}

.contact-form-right .form-group .form-control:focus {
    border: 1px solid #b0b435;
    box-shadow: none;
}

.submit-button button {
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
    border: none;
}

.help-block.with-errors {
    position: absolute;
    right: 0;
    background: red;
    color: #fff;
    padding: 0px 15px;
}

.help-block ul li {
    color: #fff;
}

.shop-detail-box-main {
    padding: 70px 0px;
}

.single-product-slider .carousel-control-prev {
    bottom: auto;
    background: #111111;
    width: 6%;
    padding: 10px 0;
    background-image: none;
    top: 40%;
}

.single-product-slider .carousel-control-next {
    bottom: auto;
    background: #111111;
    width: 6%;
    padding: 10px 0;
    background-image: none;
    top: 40%;
}

.single-product-slider .carousel-indicators li img {
    opacity: 0.5;
}

.single-product-slider .carousel-indicators li.active img {
    opacity: 1;
}

.carousel-indicators {
    position: relative;
    bottom: 0;
    background-color: transparent;
}

.carousel-indicators li {
    width: 30%;
    height: 100%;
    cursor: pointer;
}

.single-product-details h2 {
    color: #000000;
    font-weight: 700;
    font-size: 24px;
}

.single-product-details h5 {
    color: #b0b435;
    font-weight: 700;
    font-size: 18px;
}

.single-product-details h5 del {
    font-size: 13px;
    color: #666;
}

.available-stock span {
    font-size: 15px;
}

.available-stock span a {
    color: #b0b435;
}

.single-product-details h4 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 20px;
}

.single-product-details p {
    font-size: 16px;
    margin-bottom: 20px;
}

.single-product-details ul {
    display: inline-block;
    width: 100%;
    border: 1px #000000 dashed;
    margin-bottom: 30px;
}

.single-product-details ul li {
    width: 50%;
    float: left;
    padding: 0px 15px;
}

.size-st .bootstrap-select>.dropdown-toggle.btn-light {
    background: #000000;
    border: none;
    border-radius: 0px;
    color: #ffffff;
}

.quantity-box input {
    width: 100%;
}

.price-box-bar {
    margin-bottom: 30px;
}

.price-box-bar a {
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
    border: none;
}

.add-to-btn .add-comp {
    float: left;
}

.add-to-btn .share-bar {
    float: right;
}

.add-comp a {
    padding: 10px 20px;
    font-weight: 700;
    color: #ffffff;
    border: none;
}



.share-bar a {
    background: #b0b435;
    color: #ffffff;
    padding: 5px 10px;
    display: inline-block;
    width: 34px;
    text-align: center;
}

.featured-products-box .owl-nav {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -20px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-prev {
    background: #000000;
    color: #ffffff;
    width: 38px;
    height: 38px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-next {
    background: #000000;
    color: #ffffff;
    width: 38px;
    height: 38px;
    text-align: center;
}

.featured-products-box .owl-nav button.owl-prev:hover,
.featured-products-box .owl-nav button.owl-next:hover {
    background: #b0b435;
}

.table-responsive .table td,
.table-responsive .table th {
    vertical-align: middle;
    white-space: nowrap;
}

.card-outline-secondary .card-body a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 25px;
    border: none;
}

.btn-price {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--primary);
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: 2px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

.btn-price:hover {
    background-color: var(--secondary);
}

@media (prefers-reduced-motion: reduce) {
    .btn-price {
        transition: none
    }
}


.img-fluid-2 {
    max-width: 100%;
    height: 200px;
}
 

/* Fin tienda new*/


/* Inicio mapa*/

.mapadiv {
    width: 50%;
    margin: auto;
    padding: auto;
}

@media (max-width: 768px) {
    .mapadiv {
        width: auto;
    }
}

.mapadiv path {
    cursor: pointer;
    stroke: #091E3E;
    stroke-width: 1px;
}

.mapadiv polygon {
    cursor: pointer;
    stroke: #091E3E;
    stroke-width: 1px;
}

.mapadiv path:hover {
    fill: var(--secondary);
}

.mapadiv polygon:hover {
    fill: var(--secondary);
}

.container-fluids,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    /*background-image: url("../img/map/fondo-mapa.png");*/
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    padding: 2rem;
}


/*Sub menu*/

.selectbox {
    width: auto;
    margin: auto;
}

.select {
    background: var(--secondary);
    width: 100%;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
    border-radius: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease all;
    margin-bottom: 30px;
    padding: 5px;
    position: relative;
    z-index: 100;
    border: 2px solid transparent;
}

.select.active,
.select:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16);
    border: 2px solid #213f8f;
}

.select.active:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-top: 15px solid #213f8f;
    border-right: 10px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 15px);
}

.select i {
    font-size: 30px;
    margin-left: 30px;
    color: #213f8f;
}

.titulo {
    margin-bottom: 10px;
    color: #000;
    font-weight: 600;
    font-size: 15px;
}

@media (max-width: 768px) {
    .titulo {
        font-size: 0.7em;
    }
}

.descripcion {
    font-size: 18px;
    color: #434343;
}

.opciones {
    background: #fff;
    border-radius: none;
    max-height: 400px;
    overflow: auto;
    z-index: 100;
    width: 100%;
    display: none;
}

.opciones.active {
    display: block;
    animation: fadeIn .3s forwards;
}

@keyframes fadeIn {
    from {
        transform: translateY(-200px) scale(0.5);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

.contenido-opcion {
    width: 100%;
    display: flex;
    align-items: center;
    transition: .2s ease all;
}

.opciones .contenido-opcion {
    padding: 4px;
    margin: 10px;
}

.contenido-opcion svg {
    width: 20px;
    height: 30px;
    margin-right: 20px;
    margin-left: 15px;
}

.opciones .contenido-opcion:hover {
    background: #3F3D3D;
}

.opciones .contenido-opcion:hover .titulo,
.opciones .contenido-opcion:hover .descripcion {
    color: #fff;
}

@media screen and (max-width: 800px) {
    .selectbox {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .contenedor {
        position: sticky;
        width: 100%;
        justify-content: center !important;
    }
}


/*fin submenu*/


/* Para titulo municipio*/

.fondo-titulo-municipio {
    background-color: var(--primary);
}

.fondo-titulo-municipio h1 {
    color: #FFF;
}


/* Fin mapa*/


/* Interaccion mapa*/

.contenedores-reg {
    border-radius: 0.7rem;
    background-color: var(--secondary);
    box-shadow: 0px 15px 0px rgba(0, 0, 0, 0.25);
}

.contenedores-reg .max-w-full,
.contenedores-reg img,
.contenedores-reg iframe {
    object-position: 15%;
}

.contenedores-reg h2,
.contenedores-reg .h2 {
    font-size: 1.2rem;
    padding-bottom: 0.8rem;
    color: #fff;
    font-weight: bold;
}

.contenedores-reg .col-contenido {
    flex-basis: auto;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .contenedores-reg .col-contenido {
        font-size: small;
    }
    .contenedores-reg .col-contenido img {
        size: 0.5em;
    }
}

@media (max-width: 992px) {
    .contenedores-reg {
        display: inline;
        margin: 1rem;
    }
}

.contenedores-reg .form-control {
    background-color: #611f84;
    color: #fff;
}

.contenedores-reg ::placeholder {
    color: white;
}

@media (max-width: 912px) {
    .contenedores-reg ::placeholder {
        font-size: 0.7em;
    }
}

.contenedores-reg .form-control::-webkit-input-placeholder {
    text-align: left;
}

.contenedores-reg input,
.contenedores-reg textarea {
    font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
    text-align: start;
}

.contenedores-reg textarea {
    height: 9rem;
}

.list-group-items {
    background: var(--secondary);
    height: 2rem;
    color: #fff;
    border-radius: 10px !important;
    cursor: pointer !important;
    padding-left: 6px;
}


.list-group-items-two {
    background: var(--primary);
    height: 2rem;
    color: #fff;
    border-radius: 10px !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .list-group-items-two {
        font-size: small;
    }
}

@media (max-width: 768px) {
    .list-group-items-two {
        font-size: small;
        line-height: 0.6rem !important;
    }
}





.list-group-item:hover {
    cursor: pointer;
    background:  var(--secondary);
    color: #fff;
	background-image: url("../img/icons/flecha-derecha.svg");
    background-position: right;
    background-repeat: no-repeat;
	transition: 1.5s;
}

.list-group-item.active::after {
    
    content: '';
    position: absolute;
    left: 300px;
    width: 0;
    height: 0;
    /* esta es la parte importante */
    border: transparent solid 50px;
    /*border-left-color: red;*/
}

.fondo-titulo-iniciativas{
    background-color: #611f84;
    color: #fff;
    height: 2rem;
}

@media (max-width: 768px) {
    .list-group-items {
        font-size: small;
    }
}

.list-group-itemscont {
    background: var(--primary);
    height: 3rem;
    color: #fff;
}

@media (max-width: 768px) {
    .list-group-items {
        font-size: small;
        line-height: 0.6rem !important;
    }
}

.list-group {
    border-radius: 0%;
}

.loading {
    text-align: center;
    color: var(--primary);
}


/* Botón derecho*/

.st0 {
    fill: #2DB3BF
}

.st1 {
    fill: #e6e6e6
}

.boton-gobernar .st0 {
    fill: #ee4036 !important
}

.boton-gobernar .st1 {
    fill: #ffffff !important
}

.boton-gobernar .st2 {
    fill: #fdcf33 !important
}

.boton-gobernar .st3 {
    fill: #1eb1bf !important
}

.options-list {
    list-style: none;
    padding: 0;
    position: fixed;
    top: 50%;
    z-index: 9999
}

.options-list .options-item {
    background-color: #2DB3BF;
    height: 100%;
    line-height: 16px;
    padding: 4px
}

.options-list .options-item .options-link {
    display: block;
    height: 100%
}

.options-list .options-item .options-link img,
.options-list .options-item .options-link svg {
    height: 100%
}

.mnu-left {
    height: 56px;
    margin: 0;
    margin-top: -28px
}

.mnu-left .options-item {
    background-color: #F2F2F2;
    border-radius: 0 1rem 1rem 0;
    border: 1px solid #d9d9d9;
    box-shadow: 3px 3px 6px #d9d9d9;
    height: 100%;
    overflow: hidden;
    transition: width 0.5s;
    width: 64px
}

.mnu-left .options-item a {
    text-decoration: none
}

.mnu-left .options-item p {
    color: #2DB3BF;
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    margin: 0 0 0 8px;
    transition: opacity 0.5s 0.25s
}

.mnu-left .options-item p .minarino-text {
    color: #2DB3BF !important;
    font-weight: bold
}

.mnu-left .options-item svg {
    display: inline-block;
    vertical-align: middle
}

.mnu-left .options-item:hover {
    width: 216px
}

.mnu-left .options-item:hover p {
    color: #646464;
    opacity: 1
}


/*-- Fuente carusel --*/

.caja-carrusel {
    padding: 70px 0px;
    background: url(../images_copy/ins-bg.jpg) no-repeat center center;
    background-size: auto auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

.caja-carrusel::before {
    background: rgba(18, 58, 94, 0.9);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    content: "";
    position: absolute;
    z-index: 0;
}

.main-instagram.owl-carousel .owl-nav button.owl-prev {
    background: #123A5E;
    position: absolute;
    z-index: 1;
    display: block;
    height: 100%;
    width: 50px;
    line-height: 0px;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    top: 0;
    padding: 0;
    margin-top: 0;
    opacity: 1;
    left: 0px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.main-instagram.owl-carousel .owl-nav button.owl-next {
    background: #123A5E;
    position: absolute;
    z-index: 1;
    display: block;
    height: 100%;
    width: 50px;
    line-height: 0px;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    top: 0;
    padding: 0;
    margin-top: 0;
    opacity: 1;
    right: 0px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.main-instagram.owl-carousel .owl-nav button.owl-next:hover,
.main-instagram.owl-carousel .owl-nav button.owl-prev:hover {
    background: #85A633;
}

.caja-interna-carrusel {
    position: relative;
}

.hov-in {
    opacity: 0;
    background: rgba(20, 163, 230, 0.5);
    bottom: -100%;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-out 0.5s;
    -moz-transition: all 0.3s ease-out 0.5s;
    -o-transition: all 0.3s ease-out 0.5s;
    -ms-transition: all 0.3s ease-out 0.5s;
    transition: all 0.3s ease-out 0.5s;
    text-align: center;
    display: table;
}

.hov-in a {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.hov-in i {
    color: var(--primary);
    font-size: 48px;
    position: relative;
    z-index: 2;
}

.hov-in a i:hover {
    color: #ffffff;
}

.caja-interna-carrusel:hover .hov-in {
    bottom: 0;
    opacity: 1;
}


/*  carrito*/


/* */

.d-flex1 {
    display: -ms-flexbox !important;
    display: flex !important
}

.ml-auto1,
.mx-auto1 {
    margin-left: auto !important
}

.more-btn {
    color: var(--primary);
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Josefin Sans", sans-serif;
    background-color: rgba(0, 163, 232, 0.5);
    height: 50px;
    width: 80px;
    font-weight: bold;
}

.more-btn:hover {
    color: #fff
}

.project-item2 a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border-radius: 6px;
    opacity: 0;
    transition: .5s;
}

.project-item2:hover a {
    opacity: 1;
    color: var(--secondary)
}

.text-color-primary {
    color: var(--primary)
}

.text-color-secondary {
    color: var(--secondary)
}

.text-color-secondary2 {
    color: #FFF;
}

.text-background-primary {
    background-color: var(--primary);
    color: #FFF !important;
}

.text-background-secondary {
    background-color: var(--secondary);
}

/* noticias */


/* :: 4.0 Header Area CSS */

.header-area {
    position: relative;
    z-index: 1000;
    width: 100%;
}

.header-area .newsbox-main-menu {
    position: relative;
    width: 100%;
    height: 125px;
    padding: 0 5%;
}

@media only screen and (max-width: 767px) {
    .header-area .newsbox-main-menu {
        height: 90px;
    }
}

.header-area .newsbox-main-menu .classy-navbar {
    height: 125px;
    padding: 0;
}

@media only screen and (max-width: 767px) {
    .header-area .newsbox-main-menu .classy-navbar {
        height: 90px;
    }
}

.header-area .newsbox-main-menu .classy-navbar .nav-brand {
    max-width: 160px;
    margin-right: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .newsbox-main-menu .classy-navbar .nav-brand {
        max-width: 130px;
        margin-right: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .header-area .newsbox-main-menu .classy-navbar .nav-brand {
        max-width: 120px;
    }
}

.header-area .newsbox-main-menu .classy-navbar .classynav ul li a {
    font-weight: 600;
    text-transform: capitalize;
    font-size: 15px;
    padding: 0 10px;
    color: #404040;
}

.header-area .newsbox-main-menu .classy-navbar .classynav ul li a:hover,
.header-area .newsbox-main-menu .classy-navbar .classynav ul li a:focus {
    color: #ef1b48;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .newsbox-main-menu .classy-navbar .classynav ul li a {
        font-size: 13px;
        padding: 0 10px;
    }
}

.header-area .newsbox-main-menu .classy-navbar .classynav ul li ul li a {
    color: #404040;
    font-size: 14px;
}

.header-area .newsbox-main-menu .header-add-area {
    position: relative;
    z-index: 1;
    margin-left: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .newsbox-main-menu .header-add-area {
        margin-left: 20px;
        max-width: 250px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area .newsbox-main-menu .header-add-area {
        margin-left: 0;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .header-area .newsbox-main-menu .header-add-area {
        margin-left: 0;
        margin-top: 15px;
    }
}


/* :: 5.0 Breaking News Area CSS */

.bg-news {
    background-image: url('../img/news/fondo-superior-imagen-02.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.text-display-new {
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
}

.text-display-new-details {
    color: var(--primary);
    font-size: 16px;
    font-weight: lighter;
    line-height: 1.5em;
}

.icon-news-hoja1 {
    position: absolute;
    top: 40% !important;
    left: 8% !important;
    width: 230px;
    padding: 1px 50px 1px 50px;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.container-news {
    padding: 0px 50px 0px 150px;
}

.container-news-2 {
    padding: 0px 80px 0px 150px;
}

.container-news-details {
    padding: 0px 30px 0px 0px;
    position: relative;
    z-index: 7 !important;
    line-height: 1.5rem;
}
 
.container-tittle-news2 {
    margin-left: 300px;
}

.botton-news-more {
    border-radius: 10px;
    color: var(--light);
    background-color: var(--secondary);
    text-align: center;
    width: 230px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    border: none;
    margin-top: 10px;
}

.capa9 {
    z-index: 0 !important;
    margin-top: 6% !important;
    right: 0px;
    bottom: -2vmax;
    position: absolute;
    margin: 0%;
}

.capa10 {
    z-index: 0 !important;
    margin-top: 6% !important;
    right: 0px;
    top: 0vmax;
    position: absolute;
    margin: 0%;

}

.capa11 {
    z-index: 6 !important;
    margin-top: 48%!important;
    right: 0px;
    top: 0vmax;
    position: absolute;
    margin: 0%;
    width: 850px;
    height: 190px;
}
.capa11-1 {
    z-index: 6 !important;
    margin-top: 41%!important;
    right: 0px;
    top: 15vmax;
    position: absolute;
    margin: 0%;
    width: 650px;
    height: 190px;
    z-index: 0!important;
}

@media (max-width: 1199.98) {
    .capa11-1 {
    right: -50px;
    top: 5vmax;
    width: 650px;
   }
} 

@media (max-width: 991.98) {
    .capa11-1 {
    right: -50px;
    top: 10vmax;
    width: 650px;
   }
} 

@media (max-width: 767.98px) {
    .capa11-1 {
    right: -257px;
    top: 17vmax;
    width: 805px;
   }
} 

@media (max-width: 575.98px) {
    .capa11-1 {
    right: -344px;
    top: 18vmax;
    width: 900px;
   }
} 

@media (max-width: 400px) {
    .capa11-1 {
    right: -477px;
    top: 12vmax;
    width: 850px;
   }
} 



.capa12 {
    z-index: 14 !important;
    left: 8em;
    margin-top: -7%!important;
    bottom: 0vmax;
    position: relative;
    margin: 0%;
    width: 150px;
    height: 175px;
}

.capa13 {
    z-index: -1 !important;
    margin-top: -120px!important;
    right: 80px;
    bottom: 0vmax;
    position: relative;
    margin: 0%;
    width: 850px;
    height: 190px;
}

.capa14 {
    z-index: 14 !important;
    left: 0em;
    margin-top: -7%!important;
    bottom: 0vmax;
    position: relative;
    margin: 0%;
    width: 150px;
    height: 175px;
    float: right;
}
.capax {
    z-index: -1 !important;
    margin-top: 0px!important;
    right: 0px;
    bottom: 0vmax;
    position: relative;
    margin: 0%;
    width: 850px;
    height: 190px;
}

.capa-x2{
    z-index: 1!important  ;
}

.capaslider{
    z-index:-10;
}

.bg-news-sliders{
    background-color: var(--bluslider) ;
}


.div-folleto-news {
    background-color: #123A5E;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    z-index: 0;
    background: -webkit-repeating-linear-gradient(left, #081727, #412D2E );
    height: auto;
}


.breaking-news-area {
    position: relative;
    z-index: 1;
    padding: 35px 4%;
    background-color: #f0f4f8;
    margin: 0 20px 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .breaking-news-area {
        padding: 20px 1%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breaking-news-area {
        padding: 20px 1%;
    }
}

@media only screen and (max-width: 767px) {
    .breaking-news-area {
        padding: 20px 1%;
    }
}

.breaking-news-area .breaking-news-ticker {
    position: relative;
    z-index: 1;
}

.breaking-news-area .breaking-news-ticker .title {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 180px;
    flex: 0 0 180px;
    max-width: 180px;
    width: 180px;
    background-color: #ef1b48;
    height: 55px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .breaking-news-area .breaking-news-ticker .title {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
        flex: 0 0 150px;
        max-width: 150px;
        width: 150px;
    }
}

@media only screen and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .title {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70px;
        flex: 0 0 70px;
        max-width: 70px;
        width: 70px;
        height: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .title {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
        flex: 0 0 100px;
        max-width: 100px;
        width: 100px;
    }
}

.breaking-news-area .breaking-news-ticker .title h6 {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    line-height: 55px;
}

@media only screen and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .title h6 {
        line-height: 40px;
        font-size: 12px;
    }
}

.breaking-news-area .breaking-news-ticker .ticker {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 180px);
    flex: 0 0 calc(100% - 180px);
    max-width: calc(100% - 180px);
    width: calc(100% - 180px);
}

@media only screen and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .ticker {
        padding: 0 10px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 70px);
        flex: 0 0 calc(100% - 70px);
        max-width: calc(100% - 70px);
        width: calc(100% - 70px);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .ticker {
        padding: 0 10px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 100px);
        flex: 0 0 calc(100% - 100px);
        max-width: calc(100% - 100px);
        width: calc(100% - 100px);
    }
}

.breaking-news-area .breaking-news-ticker .ticker ul {
    width: 100%;
    position: relative;
    z-index: 1;
}

.breaking-news-area .breaking-news-ticker .ticker ul li {
    display: none;
    width: 100%;
}

.breaking-news-area .breaking-news-ticker .ticker ul li a {
    display: block;
    font-size: 16px;
    color: #404040;
    height: 38px;
    line-height: 38px;
}

@media only screen and (max-width: 767px) {
    .breaking-news-area .breaking-news-ticker .ticker ul li a {
        font-size: 12px;
    }
}

.breaking-news-area .breaking-news-ticker .ticker ul li a:hover,
.breaking-news-area .breaking-news-ticker .ticker ul li a:focus {
    color: #ef1b48;
}


/* :: 6.0 Hero Area CSS */

.hero-area {
    position: relative;
    z-index: 1;
    padding: 0 5px;
}


/* :: 7.0 Footer Area CSS */

.footer-area {
    position: relative;
    z-index: 1;
}

.footer-area .footer-logo {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
}

.footer-area .footer-logo a {
    display: inline-block;
    background-color: #ffffff;
    padding: 0 10px;
}

.footer-area .footer-logo::after {
    position: absolute;
    width: 100%;
    content: '';
    background-color: #d6dfe2;
    height: 2px;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -1px;
    z-index: -1;
}

.footer-area .footer-nav {
    position: relative;
    z-index: 1;
    margin-bottom: 60px;
    display: block;
}

.footer-area .footer-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footer-area .footer-nav li a {
    color: #404040;
    font-size: 16px;
    padding: 0 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-area .footer-nav li a {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .footer-nav li a {
        font-size: 14px;
        padding: 0 5px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer-area .footer-nav li a {
        font-size: 15px;
        padding: 0 20px;
    }
}

.footer-area .footer-nav li a:hover,
.footer-area .footer-nav li a:focus {
    color: #ef1b48;
}

.footer-area .footer-social-info {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 30px;
}

.footer-area .footer-social-info a {
    display: inline-block;
    padding: 0 15px;
    font-size: 14px;
    color: #404040;
}

.footer-area .copywrite-text {
    font-size: 12px;
    margin-bottom: 0;
    color: #a9a9a9;
    font-weight: 500;
    padding: 15px 0;
}

.footer-area .copywrite-text a {
    color: #a9a9a9;
    font-size: 12px;
    font-weight: 500;
}

.footer-area .copywrite-text a:hover,
.footer-area .copywrite-text a:focus {
    color: #ef1b48;
}


/* :: 8.0 Footer Add Area */

.big-add-area {
    position: relative;
    z-index: 1;
    padding: 0 4%;
}

.big-add-area img {
    width: 100%;
}


/* :: 9.0 Blog Area CSS */

.single-blog-post {
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-1 .blog-thumbnail {
    position: relative;
    z-index: 1;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-1 .blog-thumbnail img {
    width: 100%;
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
}

.single-blog-post.style-1 .blog-thumbnail.bg-overlay::after {
    z-index: 5;
}

.single-blog-post.style-1 .blog-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 50;
}

.single-blog-post.style-1 .blog-content .post-date {
    font-size: 14px;
    color: var(--primary);
    font-weight: 500;
    display: block;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-1 .blog-content .post-title {
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 0;
    color: var(--secondary);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-blog-post.style-1 .blog-content .post-title {
        font-size: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-blog-post.style-1 .blog-content .post-title {
        font-size: 16px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-blog-post.style-1 .blog-content .post-title {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .single-blog-post.style-1 .blog-content .post-title {
        font-size: 16px;
    }
}

.single-blog-post.style-1 .blog-content .post-title:hover,
.single-blog-post.style-1 .blog-content .post-title:focus {
    color: #ef1b48;
}

.single-blog-post.style-1:hover .blog-thumbnail img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.single-blog-post.style-2 .blog-thumbnail {
    margin-bottom: 20px;
}

.single-blog-post.style-2 .blog-thumbnail img {
    width: 100%;
}

.single-blog-post.style-2 .blog-content {
    position: relative;
    z-index: 1;
}

.single-blog-post.style-2 .blog-content .post-date {
    font-size: 12px;
    color: #636363;
    margin-bottom: 10px;
}

.single-blog-post.style-2 .blog-content .post-title {
    display: block;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 10px;
    color: #232323;
}

.single-blog-post.style-2 .blog-content .post-title:hover,
.single-blog-post.style-2 .blog-content .post-title:focus {
    color: #ef1b48;
}

.single-blog-post.style-2 .blog-content .post-author {
    display: block;
    font-size: 12px;
    color: #636363;
    font-weight: 500;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-2 .blog-content .post-author:hover,
.single-blog-post.style-2 .blog-content .post-author:focus {
    color: #ef1b48;
}

.single-blog-post.style-2:hover {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
}

.single-blog-post.style-2:hover .blog-content .post-title {
    color: #ef1b48;
}

.single-blog-post.style-3 .blog-thumbnail {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.single-blog-post.style-3 .blog-thumbnail img {
    width: 100%;
}

.single-blog-post.style-3 .blog-thumbnail .video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 63px;
    height: 63px;
    background-color: #ef1b48;
    color: #ffffff;
    font-size: 24px;
    line-height: 63px;
    display: block;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto 20px;
    z-index: 50;
}

.single-blog-post.style-3 .blog-thumbnail .video-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

.single-blog-post.style-3 .blog-content {
    position: relative;
    z-index: 1;
}

.single-blog-post.style-3 .blog-content .post-date {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-3 .blog-content .post-title {
    display: block;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 10px;
    color: #ffffff;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    line-height: 1.3;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-blog-post.style-3 .blog-content .post-title {
        font-size: 18px;
    }
}

.single-blog-post.style-3 .blog-content .post-title:hover,
.single-blog-post.style-3 .blog-content .post-title:focus {
    color: #ef1b48;
}

.single-blog-post.style-3 .blog-content .post-author {
    display: block;
    font-size: 12px;
    color: #ffffff;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    font-weight: 500;
}

.single-blog-post.style-3 .blog-content .post-author:hover,
.single-blog-post.style-3 .blog-content .post-author:focus {
    color: #ef1b48;
}

.single-blog-post.style-3:hover .blog-content .post-title {
    color: #ef1b48;
}

.single-blog-post.style-4 .blog-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
    max-width: 120px;
    width: 120px;
    margin-right: 15px;
}

.single-blog-post.style-4 .blog-thumbnail img {
    width: 100%;
}

.single-blog-post.style-4 .blog-content {
    position: relative;
    z-index: 1;
}

.single-blog-post.style-4 .blog-content .post-date {
    font-size: 12px;
    color: #636363;
    margin-bottom: 5px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-4 .blog-content .post-title {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0;
    color: #232323;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-4 .blog-content .post-title:hover,
.single-blog-post.style-4 .blog-content .post-title:focus {
    font-weight: 600;
    color: #ef1b48;
}

.single-blog-post.style-4:hover .blog-content .post-title {
    color: #ef1b48;
}

.single-blog-post.style-5 .blog-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    width: 45%;
    margin-right: 30px;
}

.single-blog-post.style-5 .blog-thumbnail img {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .single-blog-post.style-5 .blog-thumbnail {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
}

.single-blog-post.style-5 .blog-content {
    position: relative;
    z-index: 1;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(55% - 30px);
    flex: 0 0 calc(55% - 30px);
    max-width: calc(55% - 30px);
    width: calc(55% - 30px);
}

@media only screen and (max-width: 767px) {
    .single-blog-post.style-5 .blog-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

.single-blog-post.style-5 .blog-content .post-date {
    font-size: 12px;
    color: #636363;
    margin-bottom: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-5 .blog-content .post-title {
    display: block;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 10px;
    color: #232323;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-blog-post.style-5 .blog-content .post-title {
        font-size: 18px;
    }
}

.single-blog-post.style-5 .blog-content .post-title:hover,
.single-blog-post.style-5 .blog-content .post-title:focus {
    font-weight: 600;
    color: #ef1b48;
}

.single-blog-post.style-5 .blog-content .post-author {
    font-size: 12px;
    color: #636363;
    margin-bottom: 30px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    display: block;
}

.single-blog-post.style-5:hover .blog-content .post-title {
    color: #ef1b48;
}

.single-blog-post.style-6 .blog-thumbnail {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.single-blog-post.style-6 .blog-thumbnail img {
    width: 100%;
}

.single-blog-post.style-6 .blog-thumbnail .video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background-color: #ef1b48;
    color: #ffffff;
    font-size: 18px;
    line-height: 44px;
    display: block;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto 20px;
    z-index: 50;
}

.single-blog-post.style-6 .blog-thumbnail .video-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

.single-blog-post.style-6 .blog-content {
    position: relative;
    z-index: 1;
}

.single-blog-post.style-6 .blog-content .post-date {
    font-size: 12px;
    color: #a2a2a2;
    margin-bottom: 10px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-blog-post.style-6 .blog-content .post-title {
    display: block;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0;
    color: #232323;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    line-height: 1.3;
}

.single-blog-post.style-6 .blog-content .post-title:hover,
.single-blog-post.style-6 .blog-content .post-title:focus {
    font-weight: 600;
    color: #ef1b48;
}

.single-blog-post.style-6:hover .blog-content .post-title {
    color: #ef1b48;
}

.sidebar-area {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar-area {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 767px) {
    .sidebar-area {
        margin-top: 100px;
    }
}

.single-widget-area {
    position: relative;
    z-index: 1;
}

.single-widget-area.newsletter-widget {
    background-color: #f0f4f8;
    padding: 50px 20px;
    text-align: center;
}

.single-widget-area.newsletter-widget h4 {
    margin-bottom: 25px;
}

.single-widget-area.newsletter-widget form input {
    text-align: center;
    width: 100%;
    background-color: #d4dfe3;
    height: 54px;
    font-size: 12px;
    font-style: italic;
    color: #4c4c4c;
    border: none;
    margin-bottom: 15px;
}

.single-widget-area.newsletter-widget p {
    font-size: 12px;
    font-style: italic;
}

.single-widget-area.news-widget h4 {
    margin-bottom: 60px;
}

.intro-news-filter {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    height: 32px;
    background-color: #f0f4f8;
}

@media only screen and (max-width: 767px) {
    .intro-news-filter {
        height: 64px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .intro-news-filter {
        height: 32px;
    }
}

.intro-news-filter h6 {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 32px;
    color: #404040;
    text-transform: uppercase;
    padding-left: 15px;
}

.intro-news-filter .nav-tabs {
    border-bottom: none;
}

.intro-news-filter .nav-tabs .nav-link {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: block;
    padding: 0 15px;
    font-size: 12px;
    color: #8a8a8a;
    text-transform: uppercase;
    line-height: 32px;
    background-color: transparent;
}

.intro-news-filter .nav-tabs .nav-link.active {
    color: #ef1b48;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .intro-news-filter .nav-tabs .nav-link {
        padding: 0 8px;
    }
}

.catagory-featured-post {
    position: relative;
    z-index: 1;
    height: 500px;
    padding: 35px 4%;
    background-color: #f0f4f8;
    margin: 0 20px 20px;
}

.catagory-featured-post.bg-overlay::after {
    background-color: rgba(0, 0, 0, 0.65);
}

.catagory-featured-post .post-content .tag {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    height: 45px;
    min-width: 180px;
    background-color: #31ba7e;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 50px;
    text-align: center;
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
}

.catagory-featured-post .post-content .tag span {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
    text-transform: uppercase;
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
}

.catagory-featured-post .post-content a {
    display: block;
    color: #ffffff;
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .catagory-featured-post .post-content a {
        font-size: 48px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .catagory-featured-post .post-content a {
        font-size: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .catagory-featured-post .post-content a {
        font-size: 24px;
    }
}

.catagory-featured-post .post-content a:hover,
.catagory-featured-post .post-content a:focus {
    color: #ef1b48;
}

.catagory-featured-post .post-content p {
    color: #ffffff;
    font-size: 15px;
}

@media only screen and (max-width: 767px) {
    .catagory-featured-post .post-content p {
        font-size: 12px;
    }
}

.catagory-featured-post .post-content .post-date {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .catagory-featured-post .post-content .post-date {
        font-size: 12px;
    }
}

.post-details-title-area {
    position: relative;
    z-index: 1;
    height: 500px;
    padding: 35px 4%;
    background-color: #f0f4f8;
    margin: 0 20px 20px;
}

@media only screen and (max-width: 767px) {
    .post-details-title-area {
        height: 300px;
    }
}

.post-details-title-area.bg-overlay::after {
    background-color: rgba(0, 0, 0, 0.65);
}

.post-details-title-area .post-content .tag {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    height: 45px;
    min-width: 180px;
    background-color: #d66a0b;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 100px;
    text-align: center;
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
}

@media only screen and (max-width: 767px) {
    .post-details-title-area .post-content .tag {
        margin-bottom: 50px;
    }
}

.post-details-title-area .post-content .tag span {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
    text-transform: uppercase;
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
}

.post-details-title-area .post-content .post-title {
    display: block;
    color: #ffffff;
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .post-details-title-area .post-content .post-title {
        font-size: 48px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .post-details-title-area .post-content .post-title {
        font-size: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .post-details-title-area .post-content .post-title {
        font-size: 24px;
    }
}

.post-details-title-area .post-content p {
    color: #ffffff;
    font-size: 15px;
}

.post-details-title-area .post-content .post-date {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .post-details-title-area .post-content .post-date {
        font-size: 12px;
    }
}

.hero-contact-area {
    position: relative;
    z-index: 1;
    height: 500px;
    padding: 35px 4%;
    background-color: #f0f4f8;
    margin: 0 20px 20px;
}

.hero-contact-area.bg-overlay::after {
    background-color: rgba(0, 0, 0, 0.65);
}

@media only screen and (max-width: 767px) {
    .hero-contact-area {
        height: 300px;
    }
}

.hero-contact-area .post-content .tag {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    height: 45px;
    min-width: 180px;
    background-color: #0b87d6;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 100px;
    text-align: center;
    -webkit-transform: skewX(-30deg);
    transform: skewX(-30deg);
}

@media only screen and (max-width: 767px) {
    .hero-contact-area .post-content .tag {
        margin-bottom: 50px;
    }
}

.hero-contact-area .post-content .tag span {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 45px;
    text-transform: uppercase;
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
}

.hero-contact-area .post-content .post-title {
    display: block;
    color: #ffffff;
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 15px;
    font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-contact-area .post-content .post-title {
        font-size: 48px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-contact-area .post-content .post-title {
        font-size: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-contact-area .post-content .post-title {
        font-size: 24px;
    }
}

.hero-contact-area .post-content p {
    color: #ffffff;
    font-size: 15px;
}

.hero-contact-area .post-content .post-date {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .hero-contact-area .post-content .post-date {
        font-size: 12px;
    }
}

.post-details-content {
    position: relative;
    z-index: 1;
}

.post-details-content p {
    margin-bottom: 30px;
}

.comment_area {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 50px;
}

.comment_area .comment-content .comment-author {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 51px;
    flex: 0 0 51px;
    min-width: 51px;
    margin-right: 45px;
    height: 51px;
    border-radius: 50%;
}

@media only screen and (max-width: 767px) {
    .comment_area .comment-content .comment-author {
        margin-right: 15px;
    }
}

.comment_area .comment-content .comment-author img {
    border-radius: 50%;
}

.comment_area .comment-content .comment-meta {
    margin-bottom: 30px;
}

.comment_area .comment-content .comment-meta .post-author,
.comment_area .comment-content .comment-meta .post-date,
.comment_area .comment-content .comment-meta .reply {
    position: relative;
    z-index: 1;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 14px;
    color: #232323;
    margin-right: 30px;
}

@media only screen and (max-width: 767px) {
    .comment_area .comment-content .comment-meta .post-author,
    .comment_area .comment-content .comment-meta .post-date,
    .comment_area .comment-content .comment-meta .reply {
        font-size: 12px;
        margin-right: 15px;
    }
}

.comment_area .comment-content .comment-meta .post-author::after,
.comment_area .comment-content .comment-meta .post-date::after,
.comment_area .comment-content .comment-meta .reply::after {
    position: absolute;
    top: 0;
    right: -16px;
    content: '|';
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    .comment_area .comment-content .comment-meta .post-author::after,
    .comment_area .comment-content .comment-meta .post-date::after,
    .comment_area .comment-content .comment-meta .reply::after {
        right: -8px;
    }
}

.comment_area .comment-content .comment-meta .post-author:hover,
.comment_area .comment-content .comment-meta .post-date:hover,
.comment_area .comment-content .comment-meta .reply:hover {
    color: #ef1b48;
}

.comment_area .comment-content .comment-meta .reply {
    margin-right: 0;
}

.comment_area .comment-content .comment-meta .reply::after {
    display: none;
}

.comment_area .comment-content .comment-meta p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 2;
    font-weight: 500;
}

.comment_area .single_comment_area {
    margin-bottom: 30px;
}

.comment_area .single_comment_area:last-of-type {
    margin-bottom: 0;
}

.comment_area .children .single_comment_area {
    margin-left: 50px;
    margin-top: 30px;
}


/* :: 10.0 Video Area CSS */

.featured-video-area {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 430px;
}

.featured-video-area .video-btn {
    width: 63px;
    height: 63px;
    background-color: #ef1b48;
    color: #ffffff;
    font-size: 24px;
    line-height: 63px;
    display: block;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto 20px;
}

.featured-video-area .video-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

.featured-video-area .published-date {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    display: block;
}

.featured-video-area .video-title {
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 0;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .featured-video-area .video-title {
        font-size: 24px;
    }
}

.video-slideshow {
    position: relative;
    z-index: 5;
    border-top: 2px solid #ef1b48;
}

.video-slideshow::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    content: '';
    z-index: -1;
}

.video-slides {
    position: relative;
    z-index: 1;
}

.video-slides .owl-prev,
.video-slides .owl-next {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    margin-top: -20px;
    font-size: 18px;
    color: #ffffff;
    background-color: #ef1b48;
    left: -20px;
    text-align: center;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    line-height: 40px;
    opacity: 0;
    visibility: hidden;
}

@media only screen and (max-width: 767px) {
    .video-slides .owl-prev,
    .video-slides .owl-next {
        left: -10px;
    }
}

.video-slides .owl-prev:hover,
.video-slides .owl-next:hover {
    background-color: #000000;
    color: #ffffff;
}

.video-slides .owl-next {
    left: auto;
    right: -20px;
}

@media only screen and (max-width: 767px) {
    .video-slides .owl-next {
        right: -10px;
    }
}

.video-slides:hover .owl-next,
.video-slides:hover .owl-prev {
    opacity: 1;
    visibility: visible;
}


/* :: 11.0 Contact Area CSS */

.contact-content {
    position: relative;
    z-index: 2;
}

.contact-content .contact-social-info a {
    display: inline-block;
    margin-right: 20px;
    font-size: 14px;
    color: #000000;
}

.contact-content .contact-social-info a:hover,
.contact-content .contact-social-info a:focus {
    color: #ef1b48;
}

.contact-content .single-contact-info {
    position: relative;
    margin-bottom: 20px;
}

.contact-content .single-contact-info:last-child {
    margin-bottom: 0;
}

.contact-content .single-contact-info p {
    font-size: 15px;
    margin-bottom: 0;
}

.contact-content .single-contact-info .icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25px;
    flex: 0 0 25px;
    max-width: 25px;
    width: 25px;
}

.contact-form-area .form-control {
    position: relative;
    z-index: 2;
    height: 54px;
    width: 100%;
    background-color: #f0f4f8;
    font-size: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 0;
    padding: 15px 30px;
    font-weight: 500;
    color: #aeaeae;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.contact-form-area .form-control:focus {
    box-shadow: none;
}

.contact-form-area textarea.form-control {
    height: 250px;
}

.map-area {
    position: relative;
    z-index: 2;
}

.map-area iframe {
    width: 100%;
    height: 400px;
    border: none;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .map-area iframe {
        height: 300px;
    }
}


/* :: 12.0 Elements Area CSS */

.elements-title {
    position: relative;
    z-index: 1;
}

.elements-title h2 {
    font-size: 24px;
}


/* :: 12.1.0 Cool Facts CSS */

.single-cool-fact {
    position: relative;
    z-index: 1;
    text-align: center;
}

.single-cool-fact .scf-icon {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.single-cool-fact .scf-text h2 {
    font-size: 48px;
    margin-bottom: 25px;
    color: #2f2f2f;
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-cool-fact .scf-text h2 {
        font-size: 42px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-cool-fact .scf-text h2 {
        font-size: 36px;
    }
}

@media only screen and (max-width: 767px) {
    .single-cool-fact .scf-text h2 {
        font-size: 30px;
    }
}

.single-cool-fact .scf-text p {
    font-size: 15px;
    margin-bottom: 0;
    color: #858585;
    line-height: 1;
}


/* :: 12.2.0 Accordians Area CSS */

.single-accordion.panel {
    background-color: #ffffff;
    border: 0 solid transparent;
    border-radius: 4px;
    box-shadow: 0 0 0 transparent;
    margin-bottom: 15px;
}

.single-accordion:last-of-type {
    margin-bottom: 0;
}

.single-accordion h6 {
    margin-bottom: 0;
}

.single-accordion h6 a {
    background-color: #000000;
    border-radius: 0;
    color: #ffffff;
    display: block;
    margin: 0;
    padding: 20px 70px 20px 30px;
    position: relative;
    font-size: 14px;
    text-transform: capitalize;
    border: 1px solid #000000;
}

.single-accordion h6 a span {
    background: transparent;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    font-size: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 58px;
    height: 100%;
    color: #ffffff;
    line-height: 58px;
}

.single-accordion h6 a span.accor-open {
    opacity: 0;
}

.single-accordion h6 a.collapsed {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    background-color: transparent;
    color: #232323;
}

.single-accordion h6 a.collapsed span {
    color: #000000;
}

.single-accordion h6 a.collapsed span.accor-close {
    opacity: 0;
}

.single-accordion h6 a.collapsed span.accor-open {
    opacity: 1;
}

.single-accordion .accordion-content {
    border-top: 0 solid transparent;
    box-shadow: none;
}

.single-accordion .accordion-content p {
    padding: 20px 15px 5px;
    margin-bottom: 0;
}


/* :: 12.3.0 Skill Area CSS */

.single-skils-area {
    position: relative;
    z-index: 1;
    text-align: center;
}

.single-skils-area .circle {
    position: relative;
    z-index: 10;
    margin-bottom: 15px;
}

.single-skils-area .skills-text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.single-skils-area .skills-text span {
    font-size: 24px;
    color: #232323;
    font-weight: 500;
}

.single-skils-area p {
    font-size: 15px;
    color: #858585;
    line-height: 1;
    margin-bottom: 0;
}


/* :: 12.4.0 Tabs Area CSS */

.newsbox-tabs-content {
    position: relative;
    z-index: 1;
}

.newsbox-tabs-content .nav-tabs {
    border-bottom: none;
    margin-bottom: 15px;
}

.newsbox-tabs-content .nav-tabs .nav-link {
    background-color: transparent;
    border: 1px solid #000000;
    padding: 0 20px;
    height: 58px;
    line-height: 58px;
    color: #232323;
    margin: 0 2px;
    border-radius: 0;
    font-size: 14px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .newsbox-tabs-content .nav-tabs .nav-link {
        padding: 0 15px;
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .newsbox-tabs-content .nav-tabs .nav-link {
        padding: 0 15px;
        font-size: 12px;
        margin-bottom: 5px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .newsbox-tabs-content .nav-tabs .nav-link {
        padding: 0 15px;
    }
}

.newsbox-tabs-content .nav-tabs .nav-link.active {
    background-color: #000000;
    color: #ffffff;
}

.newsbox-tabs-content .newsbox-tab-text {
    position: relative;
    z-index: 1;
    padding-top: 10px;
}

.newsbox-tabs-content .newsbox-tab-text p {
    margin-bottom: 0;
}

.newsbox-tabs-content .tab-content h6 {
    font-size: 18px;
}


/* ====== The End ====== */


/* Style acerca de */

.contenedor-acerca-de {
    background: url(../img/acercade/header-backgorund.png) no-repeat center;
}

.bg-header-acercade {
    background-image: url(../img/acercade/header-backgorund.png);
    margin-bottom: 0px;
}

.img-background-fondo {
    position: relative;
    z-index: 1;
}

.img-abosolute-1 {
    width: 470px;
    height: 470px;
    margin-top: 220px;
    margin-left: 160px;
    position: absolute;
    z-index: 2;
}

@media (max-width: 575.98px) {
    .img-abosolute-1{
        width: 270px;
        height: auto;
        margin-top: 50%;
        margin-left: 10%;
    }
}

.icono-aling-right {
    position: relative;
    float: right;
    margin-right: 20px;
    margin-top: 112px;
    z-index:25;
}


.icono-aling-right-two {
    position: relative;
    float: right;
    margin-right: 20px;
    margin-top: 112px;
    z-index:25;
}

@media (max-width: 575.98px) {
    .icono-aling-right-two {
        margin-top: 0px;
    }
}

@media (min-width: 767.98px) {
    .icono-aling-right-two {
        margin-top: 50px;
    }
}

@media (min-width: 991.98px) {
    .icono-aling-right-two {
        margin-top: 130px;
    }
}

/* xxxxxxx 
@media (max-width: 575.98px) {
    img {
        width: 5vmax;
        
    }
}

*/

.image-acerca-de {
    margin: 0;
}
@media (max-width: 575.98px) {
    .image-acerca-de img {
    width: 15vmax;
    }
}


.div-align-right {
    float: right;
    padding-right: 140px;
    padding-bottom: 0px;
    margin-top: 100px;
}


@media (max-width: 575.98px) {
    .div-align-right{
        width: 100%;
        justify-content: center;
        z-index: 0;
    }
    .div-align-right h1 {
        font-size: medium;
        padding-top: 120%;
        text-align: center;
        width : 330px;
        padding-bottom: 45px;
        top:130px;
    }
     .div-align-right h3 {
        font-size: medium;
        text-align: left;
        width: 325px;
        top: 44px;
    } 
    
}

@media (max-width: 575.98px) {
    .div-align-right .image-right img{
        width: 30vmax;
        align-items: center;
        position: relative;
        top: -113px;
    }
    
}

.image-right {
    text-align: right;
    margin-top: 21px;
    margin-bottom: 30px;
    padding: 0px;
}

.text-right-acercade {
    text-align: right;
    width: 380px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1em;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    font-family: 'Open Sans Extrabold', arial;
    z-index: 9;
    position: relative;
    text-shadow: 2px 1px 2px #FFF;
}

@media (max-width: 575.98px) {
    .text-right-acercade{
        z-index: 9;
        position: relative;
        /*text-shadow: 5px 1px 5px #FFF;*/
        text-shadow: 2px 1px 2px #FFF;
    }
}

section.heading-acercade {
    background-image: url(../img/acercade/06.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}


@media (max-width: 575.98px) {
    section.heading-acercade{
        background-size: 30vmax
    }
}

.blockquote-acercade {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 40px;
    border: var(--primary) solid 2px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 380px;
    border-top-color: transparent;
    border-bottom: transparent;
    text-align: right;
    font-size: 20px;
    font-weight: lighter;
    z-index: 1 !important;
    position: relative
}

 @media (max-width: 575.98) {
    .blockquote-acercade h3{
        position: absolute;
        margin-top: 50%;
    }
}

 @media (max-width: 390) {
    .blockquote-acercade h3{
        position: absolute;
        margin-top: 20%;
        padding: 40px;
        width: 180px;
    }
}


.title-center-acercade {
    font-size: 40px;
    text-align: center;
    margin-top: 100px;
}



@media (max-width: 575.98px) {
    .title-center-acercade {
        font-size: 28px;
        margin-top: 0%;
        margin-bottom: 1em;
    }
}



.titulo-new-slider-acerca-de {
    font-size: 70px; text-shadow: 5px 1px 5px  var(--secondary) !important;
    font-family: 'Open Sans Extrabold', arial;
    font-weight: bold;
}

.titulo-new-slider2-acerca-de {
    font-size: 70px; text-shadow: 5px 1px 5px var(--secondary);
    color: var(--primary);
    font-family: 'Open Sans Extrabold', arial;
    font-weight: bold;
}

.titulo-new-slider3-acerca-de {
    font-size: 70px; text-shadow: 5px 4px 4px var(--secondary);
    color: #FFF;
}

@media (max-width: 575.98px) {
    .titulo-new-slider-acerca-de {
        font-family: 'Open Sans Extrabold', arial !important;
        font-size: 38px !important;
        font-weight: bold !important;
        margin-top: 0%;
        margin-bottom: 1em;
    }
    .titulo-new-slider2-acerca-de {
        font-family: 'Open Sans Extrabold', arial !important;
        font-size: 38px !important;
        font-weight: bold !important;
        margin-top: 0%;
        margin-bottom: 1em;
    }
    .titulo-new-slider3-acerca-de {
        font-family: 'Open Sans Extrabold', arial !important;
        font-size: 38px !important;
        font-weight: bold !important;
        margin-top: 0%;
        margin-bottom: 1em;
    }
}

.text-rigth-index{
    height: 50px;
    font-size: 13px;
    font-weight: bolder;
    color: var(--primary);
}

.rotate {
    animation: rotation 28s infinite linear;
    width: 423px;
    height: 420px;
    margin-top: 253px;
    margin-left: 184px;
    position: absolute;
    z-index: 1;
}


@media (max-width: 575.98px) {
    .rotate {
        margin-top: 50% !important;
        margin-left: 10% !important;
        width: 275px !important;
        height: auto;
    }
}



@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

/* Fin styles acerca de*/


/* inicio nuestro objeivo*/

.bg-primary-target {
    background-color: var(--bluslider);
}

.capa2 {
    z-index: 0 !important;
    left: -8em;
    bottom: 0vmax;
    position: absolute;
    margin: 0%;
}


@media (max-width: 575.98px) {
    .capa2 {
        display: none;
    }
    .capa3 {
        display: none;
    }
}


.capa3 {
    z-index: 14 !important;
    margin-top: -24%;
    right: 0;
    top: 0vmax;
    position: absolute;
    margin: 0%;
}

.capa3-1 {
    z-index: 14 !important;
    right: 0;
    top: -30vmax;
    position: absolute;
    margin: 0%;
}

.capaprueba {
    z-index: 14 !important;
    margin-top: -24%;
    right: 0;
    top: 0vmax;
    position: absolute;
    margin: 0%;
}


.capa4 {
    z-index: 14 !important;
    width: 570px;
    margin-top: -24%;
    left: 0px;
    top: 25vmax;
    position: absolute;
    margin: 0%;
}

.capa5 {
    z-index: 14 !important;
    left: 0;
    top: 0vmax;
    position: absolute;
    margin: 0%;
}

.capa6 {
    z-index: 14 !important;
    right: 0px;
    top: 0vmax;
    position: absolute;
    margin: 0%;
}

.card-beneficio {
    background-color: #D7D7D7;
    border-radius: 1em;
    z-index: 15;
}

.fondo-hojas1 {
    background-image: url(../img/acercade/04.png);
    z-index: 15;
    background-size: 20em;
    background-repeat: no-repeat;
    overflow: hidden;
}


/* seccion impacto */

.btn-primarys {
    color: var(--primary);
    font-size: 20px !important;
    font-weight: bold;
    background-color: #D7D7D7;
    /*box-shadow: inset 10 10 10 10px var(--secondary);*/
    box-shadow: 0 0 20px #9C9C9C;
    border-radius: 8px;
    cursor: no-drop !important;
}



@media (max-width: 575.98px) {
    .btn-primarys {
        font-family: 'Open Sans Extrabold', arial;
        font-size: 15px !important;
        font-weight: bold;
        width: auto;
    }
}



.text-rigth-impact {
    text-align: right;
    margin-top: 10px;
    color: var(--primary);
    font-weight: lighter;
    margin-right: 40px;
}

.text-left-impact {
    text-align: left;
    margin-top: 10px;
    color: var(--primary);
    font-weight: lighter;
    margin-left: 40px;
}


/* Sección etapas del proceso*/

.text-titulo-etapas {
    color: #FFF !important;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    font-family: 'Open Sans Extrabold', arial;
    line-height: 1.2;
    position: relative;
    z-index: 15;
}

.capa7 {
    z-index: 14 !important;
    left: -0em;
    bottom: 0vmax;
    position: absolute;
    margin: 0%;
}

@media (max-width: 575.98px) {
    .capa7 img {
        width: 5vmax;
    }
    .capa3-1 img {
        width: 5vmax;
    }
   .capa3 img {
        width: 5vmax;
    } 
   .capa4 img {
        width: 5vmax;
    } 
}

.bg-etapas-center {
    background-color: var(--secondary);
}

.bg-etapas-center-position-text{
    position: relative;
    z-index: 17 !important;
}

.text-titulo-etapas-2 {
    color: #FFF;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
}

.subtitulo-etapas {
    text-align: center;
    color: var(--primary);
    font-size: 18px;
    font-family: 'Open Sans Extrabold', arial;
    font-weight: bold;
    text-shadow: 1px 1px 8px #FFF;
}

.img-etapas-left {
    left: 100px;
    z-index: 17;
    position: absolute;
}

@media (max-width: 768px) {
    .img-etapas-left {
        width: 10rem !important;
        left: 2px !important;
    }
}

.img-etapas-right {
    right: 170px;
    z-index: 16;
    position: absolute;
}


@media (max-width: 768px) {
    .img-etapas-right {
        right: -170px;
        z-index: 17;
        width: 10rem;
    }
}



.height-div-etapas {
    height: 80px;
    border-color: #0b87d6;
}

.capa8 {
    z-index: 18 !important;
    right: 0px;
    bottom: 0vmax;
    position: absolute;
    margin: 0%;
    width: 28em;
}


@media (max-width: 768px) {
    .capa8 {
        width: 10em;
    }
}


/* Testomonios */

.text-titulo-testomonios {
    color: var(--primary);
    text-align: center;
    font-weight: bold;
    font-size: 50px;
}

.blockquote-testominios {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: var(--primary) solid 2px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: auto;
    border-top-color: transparent;
    border-bottom: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: lighter;
}


/*  pie de página*/

.bg-footer {
    background-color: #d7d7d7;
}

.text-footer {
    color: var(--primary);
    font-size: 13px;
    font-weight: lighter;
    line-height: 1em;
}

.fa-minus-left {
    position: relative;
    left: -25px;
    color: #fff;
}

.img-qr-footer {
    height: 70px;
    width: 70px;
    position: absolute;
    float: right;
    z-index: 19;
}


/* home */

.bg-home {
    background: url(../img/intro/Cuerpo.png) no-repeat;
    height: 100px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.icono-aling-right2 {
    position: relative;
    float: right;
    margin-right: 20px;
    margin-top: 0px;
}

.text-right-home {
    text-align: right;
    color: var(--primary);
    font-size: 13px;
    font-weight: bolder;
    line-height: 0.5em;
    padding: 3px;
}

.text-right-home-2 {
    margin-top: -20px;
}

.bg-main-section {
    background: url(../img/acercade/logoagrotic-1.png) no-repeat center center;
    margin: 100px;
    background-size: contain;
    position: relative;
    height: 200px;
    overflow: hidden;
    margin-left: 80px!important;
}

    
    @media screen and (max-width: 600px){
        .bg-main-section{
            margin: 100px;
            height: 200px;
            overflow: hidden;
            margin-left: 25px!important;
            top: -100px;
        }
    }
    
    
    @media screen and (max-width: 360px){
        .bg-main-section {
            margin: 60px;
            height: 100px;
            overflow: hidden;
            margin-left: 2px!important;
            top: -100px;
        }
    }

.bg-main-section-news {
    background: url(../img/acercade/Logo-agrotic-07.png) no-repeat center center;
    margin: 0px;
    background-size: contain;
    position: relative;
    height: 200px;
    overflow: hidden;
    margin-left: 80px!important;
}

.bg-square-bg-home {
    background: url(../img/intro/recuadro-gris-07.png) no-repeat center center;
    background-size: auto;
    position: relative;
    width: inherit;
    overflow: hidden;
    margin-top: -146px;
    z-index: -60;
    height: 90px;
    width: auto;
    margin-left: 190px;
    margin-right: 190px;
    border-radius: 10px;
    box-shadow: 0 0 24px #fff, 0 0 6px black
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bg-square-bg-home {
        background: url(../img/intro/recuadro-gris-07.png) no-repeat center center;
        flex: 0 0 auto;
        width: 80% !important;
        height: 579px!important;
        top: -475px;
        background-size: contain !important;
        left: -100px;
    }
}

@media only screen and (min-width: 992px) {
    .bg-square-bg-home {
        width: 82% !important;
        left: -97px;
    }
}

.bg-btn-main-home {
    background: url(../img/acercade/09.png) no-repeat center center;
    height: 100px;
    margin: 0px;
    padding: 0px;
    background-size: contain;
    margin-top: 250px;
    position: relative;
    overflow: hidden;
}

.img-optios-home {
    text-align: center;
    margin: 0px;
    position: relative;
    margin-top: -170px;
    padding: 0px;
    height: 170px;
    width: 170px;
}

.subtittles-home {
    color: var(--primary);
    text-align: center;
    font-size: 13px;
    padding-top: 0px;
    font-weight: bolder;
    margin: -23px;
}

.service-item-home {
    position: relative;
    height: 140px;
    padding: 0 0;
    transition: .5s;
}

.space-options-main-home {
    margin-top: 125px;
}

.footer-home{
    color: var(--secondary);
    font-size: 12px;
}

.footer-home-main{
    color: #fff!important;
    
}

/* Contactanos*/

.bg-contactanos {
    background-image: url(../img/contacs/contactos.png);
    background-position: center center;
    background-attachment: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 60px;
}

.bg-header-contact {
    background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/backgrounds/carousel-6.jpg) center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

.bg-gray {
    background-color: var(--gray);
}

.bg-gray2 {
    background-color: var(--gray2);
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
}

.bg-gray-primary {
    background-color: var(--primary);
}

.hr-shop{
    border: solid 3px; 
    color:#091E3E!important;
}

.bg-gray3 {
    background-color: var(--gray2);
    /*box-shadow: -1px -2px 8px -1px rgb(0 0 0 / 32%)*/
    box-shadow:0px 1px 8px 2px rgb(0 0 0 / 32%)
}


.bg-gray-secondary {
    background-color: var(--secondary);
}

btn-dark-primary {
    color: #fff;
    background-color: #091E3E;
    border-color: #091E3E;
}

btn-dark-secondary {
    color: #fff !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.text-h1 {
    margin: 0;
    padding-bottom: 6rem;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    font-size: 6rem;
    text-transform: uppercase;
    animation: glow 2s ease-in-out infinite alternate;
    text-align: center;
}

@keyframes glow {
    from {
        text-shadow: 0 0 20px #2d9da9;
    }
    to {
        text-shadow: 0 0 30px gold, 0 0 10px #fff;
    }
}


/* Noticias */

.display-tittle-news {
    font-size: 6rem !important;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 25px;
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
}

.img-news-right {
    z-index: 7;
    width: 100%;
    right: 0%;
    display: flex;
    position: relative;
}

.img-news-right-2 {
    z-index: -1;
    right: -15%!important;
    /*display: flex;*/
    position: relative;
    margin-top: -13% !important;
    bottom: -5vmax;
}

p.news-text {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.news-title-slider-2{
    font-weight: bold;
    font-size: 35px;
    top: 20px;
    left: 93px;
    color: #FFF;
    position: relative;
    z-index: 0;
    padding: 8px;
}

.news-text-slider-2{
    font-size: 14px;
    font-weight: lighter;
    line-height: 1.5em;
    left: 93px;
    color: #FFF;
    position: relative;
    z-index: 0;
}

h4.news-text {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

p.news-text-content {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 auto;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}


.sahadow-img-new {
    margin: 0;
    padding: 0;
}

.sahadow-img-new img {
    box-shadow: 10px 10px 20px 10px rgba(255, 255, 255, 0.9);
}



.title-main-novedades {
    font-family: 'Open Sans Extrabold', arial;
    font-size: 74px;
    /*text-shadow: 4px 4px 4px #aaa;*/
    font-weight: bold;
    line-height: 1.2;
    padding-top: 10px;
    text-align: center;
    position: relative;
    color: #091E3E;
    text-shadow: 0 0 3px #fff, 0 0 5px aliceblue;
  }
  
    @media screen and (max-width: 482px){
        .title-main-novedades{
            font-size:65px;
        }
    }
    
    @media screen and (max-width: 432px){
        .title-main-novedades{
            font-size:47px;
        }
    }
    
    @media screen and (max-width: 290px){
        .title-main-novedades{
            font-size:38px;
        }
    }






.icon-cards {
    position: relative;
    width: 60vw;
    height: 40vw;
    max-width: 380px;
    max-height: 250px;
    margin: 0;
    color: white;
    perspective: 1000px;
    transform-origin: center;
}

.icon-cards__content {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: translateZ(-30vw) rotateY(0);
    -webkit-animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.icon-cards__content.step-animation {
    -webkit-animation: carousel 8s infinite steps(1) forwards;
    animation: carousel 8s infinite steps(1) forwards;
}

.icon-cards__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60vw;
    height: 40vw;
    max-width: 380px;
    max-height: 250px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    transform-origin: center;
}

.icon-cards__item:nth-child(1) {
    background: var(--gray);
    transform: rotateY(0) translateZ(45vw);
}

.icon-cards__item:nth-child(2) {
    background: var(--gray);
    transform: rotateY(120deg) translateZ(45vw);
}

.icon-cards__item:nth-child(3) {
    background: var(--gray);
    transform: rotateY(240deg) translateZ(45vw);
}

@-webkit-keyframes carousel {
    0%,
    17.5% {
        transform: translateZ(-35vw) rotateY(0);
    }
    27.5%,
    45% {
        transform: translateZ(-35vw) rotateY(-120deg);
    }
    55%,
    72.5% {
        transform: translateZ(-35vw) rotateY(-240deg);
    }
    82.5%,
    100% {
        transform: translateZ(-35vw) rotateY(-360deg);
    }
}

@keyframes carousel {
    0%,
    17.5% {
        transform: translateZ(-35vw) rotateY(0);
    }
    27.5%,
    45% {
        transform: translateZ(-35vw) rotateY(-120deg);
    }
    55%,
    72.5% {
        transform: translateZ(-35vw) rotateY(-240deg);
    }
    82.5%,
    100% {
        transform: translateZ(-35vw) rotateY(-360deg);
    }
}

.bodyx {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--gray3)
}

.checkbox {
    position: relative;
    margin-top: 2rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary);
    transition: color 0.3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox:hover {
    color: var(--secondary);
}

.checkbox__checkbox {
    position: relative;
    top: 0;
    width: 1.0625rem;
    height: 1.0625rem;
    background: white;
    border: 1px solid currentColor;
    border-radius: 4px;
    vertical-align: middle;
    transition: background 0.1s ease;
    cursor: pointer;
}

.checkbox__checkbox::after {
    content: "";
    position: absolute;
    top: 30vmax;
    left: 5px;
    width: 5px;
    height: 11px;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all 0.3s ease;
    transition-delay: 0.15s;
}

.checkbox__label {
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
}

.checkbox>input:checked~.checkbox__checkbox {
    border-color: transparent;
    background: var(--secondary);
    -webkit-animation: jelly 0.6s ease;
    animation: jelly 0.6s ease;
}

.checkbox>input:checked~.checkbox__checkbox:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

@-webkit-keyframes jelly {
    from {
        transform: scale(1, 1);
    }
    30% {
        transform: scale(1.25, 0.75);
    }
    40% {
        transform: scale(0.75, 1.25);
    }
    50% {
        transform: scale(1.15, 0.85);
    }
    65% {
        transform: scale(0.95, 1.05);
    }
    75% {
        transform: scale(1.05, 0.95);
    }
    to {
        transform: scale(1, 1);
    }
}

@keyframes jelly {
    from {
        transform: scale(1, 1);
    }
    30% {
        transform: scale(1.25, 0.75);
    }
    40% {
        transform: scale(0.75, 1.25);
    }
    50% {
        transform: scale(1.15, 0.85);
    }
    65% {
        transform: scale(0.95, 1.05);
    }
    75% {
        transform: scale(1.05, 0.95);
    }
    to {
        transform: scale(1, 1);
    }
}

.bg-square-bg-news {
    background: url(../img/intro/recuadro-gris-07.png) no-repeat center center;
    background-size: auto;
    position: relative;
    width: inherit;
    overflow: hidden;
    margin-top: -146px;
    z-index: -60;
    height: 190px;
    width: auto;
    margin-left: 190px;
    margin-right: 190px;
    border-radius: 10px;
    box-shadow: 0 0 24px #fff, 0 0 6px black
}

.alert-info-news {
    color: #FFF;
    /*background-color: rgba(96, 226, 44, 0.5);*/
    /*box-shadow: 10px 10px 20px 10px rgba(138, 193, 228, 0.7);*/
    box-shadow: 10px 10px 20px 10px rgb(255 255 255 / 70%);
    top:0px;
    position: relative;
    width: 850px;
    padding: 8px;
    color: var(--primary);
    z-index: -25;
}

.sahadow-content-news {
    box-shadow: 1px -1px 7px 3px rgba(255, 255, 255, 0.9);
    background-color: transparent;
    border: 1px solid var(--primary) !important;
}

.avatar {
    background-repeat: no-repeat;
    background-size: contain;
    border-top-left-radius: 60px!important;

}




.banner{
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.container_img{
position: absolute;
width: 85%;
height: 100%;
top: -45%;
right: -30%;
transform: rotateZ(-14deg);
border-radius: 0 0 0 3em;
box-shadow: 0 0 0 2em #edfdfd;
background-image: 
    linear-gradient(
    to bottom,
    #39fee0,
    #51d7f9
);
}

.media_img{
    overflow: hidden;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2em 0 0 0;
    background: white;
    top: -2em;
    left: 2em;
} 

.media_img::before{
    content: '';
    position: absolute;
    display: block;
    transform: rotateZ(0deg);
    width: 120%;
    height: 120%;
    top: 10%;
    left: -10%;
    background-image: url('../admin/uploads/news/imagen-noticia5-02.png');
    background-position: center right;
    background-size: cover;
}

/* Login */

.display-tittle-login {
    font-family: 'Open Sans Extrabold', arial;
    /*font-size: 74px;*/
    font-size: 6rem !important;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 110px;
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
    z-index: 0;
}

.input-login {
    background-image: url('../img/login/Cuadro-texto-Usuario-03.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding: 10px;
    overflow: hidden;
}

.input-password {
    background-image: url('../img/login/Cuadro-texto-contrasena-04.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 20px !important;
    padding: 10px;
    overflow: hidden;
}

.input-login-text {
    padding-left: 60px !important;
    color: var(--primary);
}


/* Registrarse*/

.bg-registrer {
    background-image: url('../img/login/fondo-verde-imagen_Mesa-de-trabajo-1.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.icon-form-registrer {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 230px;
    padding: 1px 50px 1px 50px;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

/*@media (max-width: 575px) {*/
@media (max-width: 768px) {
    .icon-form-registrer  {
        top: 43%;
        left: 50%;
    }
}

@media (min-width: 992px) {
    .icon-form-registrer  {
        top: 50%;
        left: 42%;
    }
}

@media only screen and (min-width: 1200px) {
    .icon-form-registrer  {
        top: 36%;
        left: 44%;
    }
}

@media (max-width: 575.98px)
    .icon-form-registrer{
        top: 86%;
        left: 44%;
    }
}


.line-separator{
    width: 100%;
    text-align: center;
    border-bottom: solid 1px red;
}
.form-control-registrer {
    display: block;
    width: 100%;
    padding: .3rem .7rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    background-clip: padding-box;
    border: 4px solid var(--primary);
    appearance: none;
    border-radius: 5px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: var(--primary) !important;
}

@media only screen and (min-width: 330px) and (max-width: 359.98px) {
    .form-control-registrer{
        width: 80%;
    }
}


@media only screen and (min-width: 360px) and (max-width: 380px) {
    .form-control-registrer{
        width: 90%;
    }
}

@media only screen and (min-width: 381px) and (max-width: 450px) {
    .form-control-registrer{
        width: 95%;
    }
}

.subtittles-resgitrer {
    color: var(--primary);
    text-align: left;
    font-size: 13px;
    padding-top: 0px;
    font-weight: bolder;
    margin-top: 2px;
}

.bg-input-registrer {
    background-color: var(--gray2) !important;
}

.text-color-form {
    color: var(--primary);
}

.centrar-text-botton {
    display:flex;
    justify-content:center;
    align-items:center;
    line-height: 20px !important;
}

.botton-register{
    border-radius: 10px;
    color: var(--primary);
    background-color: var(--secondary);
    text-align: center;
    width: 300px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    border: none;
}

.botton-register:hover {
    color: #FFF;
    background-color: var(--primary);
}


/* mapa interactivo - estadísticas*/

.bg-map-interactive {
    background-image: url('../img/map/fondo-superior-imagen-02.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.titulo-information-map {
    font-size: 30px; text-shadow: 5px 4px 4px var(--primary);
    color: #FFF;
    top: -114px;
    position: relative;
}

.titulo-information-map-result {
    font-size: 30px; text-shadow: 1px 1px 1px var(--primary);
    color: var(--secondary);
    top: -114px;
    position: relative;
    font-weight:bold;
}

.show-details-municipalities-1 {
    padding: 0px 0px 0px 0px;
    background-color: rgba(0, 163, 232, 0.5);
    box-shadow: 10px 10px 20px 10px rgb(255 255 255 / 70%);
}

.show-details-municipalities-2 {
    padding: 30px 30px 30px 30px;
    /*background-color: rgba(96, 226, 44, 0.5);*/
    box-shadow: 10px 10px 20px 10px rgb(211 211 211 / 75%);
}

.show-details-municipalities-3 {
    padding: 30px 30px 30px 30px;
    /*background-color: rgba(96, 226, 44, 0.5);*/
    box-shadow: 10px 10px 20px 10px rgba(138, 193, 228, 0.7);
}

.bg-map-estadistics {
    background-image: url('../img/estadistics/fondo-verde-imagen_Mesa-de-trabajo-1.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.alert-info-municipality {
    color: #FFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.alert-info-municipality2 {
    color: #FFF;
    /*background-color: rgba(96, 226, 44, 0.5);*/
    /*box-shadow: 10px 10px 20px 10px rgba(138, 193, 228, 0.7);*/
    box-shadow: 10px 10px 20px 10px rgb(255 255 255 / 70%);
    top:60px;
    position: relative;
    width: 450px;
    padding: 8px;
    color: var(--primary);
    z-index: 1;
}

@media screen and (max-width: 576px){
    .alert-info-municipality2{
        width: 100%;
    }
}

.alert-info-municipality3 {
    color: #FFF;
    /*background-color: rgba(96, 226, 44, 0.5);*/
    /*box-shadow: 10px 10px 20px 10px rgba(138, 193, 228, 0.7);*/
    box-shadow: 10px 10px 20px 10px rgb(255 255 255 / 70%);
    top:60px;
    position: relative;
    width: 400px;
    z-index: 1;
    padding: 8px;
    color: var(--primary);
    float: right;
    margin-top: 7% !important;
    right: 30px;
    top: 0vmax;
}

@media screen and (max-width: 576px){
    .alert-info-municipality3{
        width: 230px;
        right: -6px;
        padding: 3px;
        top: 35px;
        font-size: 14px;
    }
}

@media screen and (min-width: 992px){
    .alert-info-municipality3{
        width: 430px !important;
        right: 45px !important;
        padding: 3px;
        top: 17px !important;
        font-size: 14px !important;
    }
}

@media screen and (min-width: 576px){
    .alert-info-municipality3{
        width: 100%;
        right: -6px;
        padding: 3px;
        top: 35px;
        font-size: 14px;
        margin-bottom: 31px;
    }
}


/* Contáctanos */

.icon-form-contactanos {
    position: relative;
    top: 30%;
    left: 50%;
    width: 230px;
    padding: 1px 50px 1px 50px;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

/*  City */
.bg-city {
    background-image: url('../img/city/Fondo-verde-imagen-02.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.capa20 {
    z-index: 14 !important;
    margin-top: -24%;
    right: 0px;
    bottom: -20vmax;
    position: absolute;
    margin: 0%;
}

.capa20-1 {
    z-index: 14 !important;
    margin-top: -24%;
    right: 0px;
    bottom: -10vmax;
    position: absolute;
    margin: 0%;
}

.bg-square-bg-city {
    max-width: 400px; 
    background-color: var(--primary);
    border-radius: 20px;
    height: 100px;
    padding-top: 20px;
}


/* Mapas nuevo diseño*/
.title-center-map {
    font-size: 60px;
    text-align: center;
    margin-top: 100px;
    font-weight: bold;
}

.capa-map-left {
    left: 0em;
    z-index: 14 !important;
    margin-top: -24%;
    right: 0px;
    top: 0vmax;
    position: absolute;
    margin: 0%;
}

.position-map
{
    z-index: 0 !important;
}

.capa21 {
    z-index: -1 !important;
    margin-top: -24%;
    right: 0px;
    bottom: -20vmax;
    position: absolute;
    margin: 0%;
    float: right;
}

.height-map{
    width: 815px !important;
    height: 781px !important;
}

.capa22 {
    z-index: -1 !important;
    right: 0;
    bottom: 0;
    position: absolute;
    margin: 0%;
    width: 28em;
    float: right;
}



/* contactanos */
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: none;
    color: var(--primary);
    font-size: 25px;
    /*background-color: #d1e7dd;
    margin-top: -13px;
    */
}


button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
    /*float: right; damj*/
}

.alert-success-contacts {
    color: var(--primary);
    background-color: #d1e7dd;
    border-color: #badbcc;
}


.display-tittles-gral {
    font-size: 6rem !important;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 110px;
    text-align: center;
    position: relative;
    /*color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px black;
    */
}


/** efectos especiales */
.btn-regresar{
    position: relative;
    width: 300px;
    height: 350px;
    margin: 20px;
    border-radius: 20px;
    transition: 0.5s;
    transition-delay: 0.5s;
    justify-content: center;
    align-items: center;
    box-shadow: #000;
    z-index: 15!important;
}
.btn-regresar:hover{
    width: 600px;
    transition-delay: 0s;
}



@media (max-width: 768px) {
    .media-text h1 {
        font-size: 1.2rem !important;
    }
    .media-text h2 {
        font-size: 1.1rem !important;
    }
    .media-text h3 {
        font-size: 1rem !important;
    }
    .media-text p {
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    .media-img{
        width: 100% !important;
        height: auto;
    }
}

@media (max-width: 768px) {
    .separador-proceso {
        width: 5px !important;
    }
}

.btn-regresar .circle {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-regresar .circle::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr);
    clip-path: circle(120px at center);
    transition: 0.5s;
}
.btn-regresar:hover .circle::before{
    clip-path: circle(400px at center);
}
.btn-regresar .circle .logo {
    position: relative;
    width: 300px;
    transition: 0.5;
    transition-delay: 0.5s;
}
.btn-regresar:hover .circle .logo{
    transform: scale(0);
    transition-delay: 0;
}
.contenido {
    position: relative;
    width: 50%;
    left: 20%;
    padding: 20px 20px 20px 40px;
    opacity: 0;
    transition: 0.5s;
    visibility: hidden;
    background-color: var(--primary);
    box-shadow: 10px 10px 20px 10px rgb(133 166 51 / 70%);
    border-radius: 15px;
    top: 25px;
}
.btn-regresar:hover .contenido {
    left:0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0.5s;
}
.contenido h2{
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 1.2em;
}

@media (max-width: 768px) {
    .contenido h2{
        color: #fff;
        text-transform: uppercase;
        font-size: 1.2em;
        line-height: 2em;
    }
}

.contenido p {
    color: #FFF;
    font-size: 1em;
    text-align: left;
    line-height: 1.7em;
}

.contenido a {
    position: relative;
    color: var(--secondary);
    background: transparent;
    padding: 8px 15px;
    border-radius: 0.5em;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
}

@media (max-width: 768px) {
    .contenido a {
        position: relative;
        color: #111;
        background: #fff;
        padding: 5px 10px;
        border-radius: 0.2em;
        display: inline-block;
        text-decoration: none;
        font-weight: 500;
    }
}

.btn-regresar .mapa-reg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    height: 300px;
    transition: 0.5s;
    transition-delay: 0;
}

@media (max-width: 768px) {
    .btn-regresar .mapa-reg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        height: 200px;
        transition: 0.5s;
        transition-delay: 0;
    }
}

.btn-regresar:hover .mapa-reg {
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.5s;
    left: 72%;
}
/* end efects especiales */


/* -------- Proyectos -------- */
.services {
    position: relative;
    overflow: hidden;
  }
  
  .services .section-heading h2 {
    padding-right: 30px;
  }
  
  .services::before {
    content: url(../img/proyectos/services-left.jpg);
    top: 120px;
    left: 0;
    position: absolute;
    width: 844px;
    height: 714px;
    z-index: -1;
  }
  
  .services::after {
    content: url(../img/proyectos/service-rigth.jpg);
    bottom: -150px;
    right: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    position: absolute;
    width: 103px;
    height: 614px;
    z-index: -1;
  }
  
  .services .service-item {
    border: 1px solid var(--secondary);
    border-radius: 23px;
    padding: 30px;
    background-color: #fff;
    margin-bottom: 30px;
    transition: all .4s;
  }
  
  .services .service-item h4 {
    font-size: 20px;
    color: #2a2a2a;
    margin-top: 20px;
    line-height: 30px;
    transition: all .4s;
  }
  
  .services .service-item:hover {
    border-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  }
  
  .services .service-item:hover h4 {
    color: green;
  }
  
  .section-heading {
    margin-bottom: 30px;
    }
  
  .section-heading .line-dec {
    width: 200px;
    height: 8px;
    margin-bottom: 20px;
    background: rgb(9,30,62);
    background: linear-gradient(90deg, rgba(9,30,62,1) 0%, rgba(133,166,51,1) 100%);
    }
    
    /* -------- Pqrsf -------- */
    
    .bg-primary-pqrsf {
        background-color: var(--secondary);
    }
    
    .bg-page-pqrsf {
        background-image: url('../img/pqrsf/fondo-PQRSF.gif');
        background-position: center center;
        background-attachment: inherit;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
        padding-top: 100px;
        padding-bottom: 20px;
    }
    
    
    .botton-register-pqrsf{
        border-radius: 10px;
        color: var(--primary);
        background-color: var(--primary);
        text-align: center;
        width: 300px;
        height: 50px;
        font-size: 30px;
        font-weight: bold;
        border: none;
    }
    
    /* PQRS */
    .pqrs_details {
        padding: 30px 0 20px 10px;
        box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.5)
    }
    
    .bg-gray3 {
        background-color: rgba(221, 221, 221, 0.5);
        box-shadow: 0 0px 20px rgba(255, 255, 255, 0.5);
    }

    /* pagina no encontrada */
    .bg-page-notfound {
        background-image: url('../img/notfound/fondo-pagina-no-encontrada.jpg');
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
    }

    .icon-notfound {
        position: relative;
        width: 70px;
        text-align: center;
        display: inline-block;
    }

    .display-title-nofound {
        font-size: 8rem !important;
        font-weight: bold;
        line-height: 1.2;
        padding-top: 8px;
        text-align: center;
        position: relative;
        color: var(--primary);
    }
    
    .display-title-updated {
        font-size: 4rem !important;
        font-weight: bold;
        line-height: 1.2;
        padding-top: 8px;
        text-align: center;
        position: relative;
        color: var(--primary);
    }

    .bg-gray-notfound {
        background-color: #FFF; //var(--gray);
        border-radius: 20px;
        text-align: center;
        font-weight: bold;
    }

    .subtitle-primary-nofound {
        color: var(--primary);
        font-size: 26px;
    }
    .text-primary-nofound {
        color: var(--primary);
        font-size: 11px;
        font-weight: lighter;
        padding-left: 100px;
        padding-right: 100px;
    }
  
  /*---------------------
  Blog Details proyects
    -----------------------*/
    
    .blog-details-proyects {
    	height: 350px;
    	display: flex;
    	align-items: center;
    }
    
    .img-blog-details{
    border: 1px solid var(--primary);
    }
    
    .back-ground-secondary {
        background-color: var(--secondary);
    }
    
    /*  estadistics */
    .btn-sm-square-search {
        width: 30px;
        height: 30px;
        text-align: center;
    }
    

    /*  tips */
    .bg-tips {
        background-image: url('../img/tips/Fondo_imagen-02.jpg');
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
        padding-top: 75px;
        padding-bottom: 20px;
    }
    
    .text-primary-tips {
        color: #FFf;
        font-weight: bolder;
        font-size: 22px;
        padding: 5px;
    }
    
    .bg-tips-shadown {
        /*background-color: rgba(9, 30, 62, 0.7);*/
        background-color: rgba(120, 148, 70, 0.75);
        box-shadow: 0 0px 20px rgba(255, 255, 255, 0.5);
        border-radius: 15px;
    }

/* video */

.video-container {
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    box-shadow: 0px 1px 7px 0px rgba(254, 254, 254, 0.7)
}

.video-container .video-mask {
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.video-container iframe {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

/* logo dane */
    @media (max-width: 500px) {
        .logo_dane-agrotic img {
            max-width: 50%;
        }
        .logo_dane-agrotic {
            margin-top: 30px;
            width: 100%;
        }
        .logo_dane-agrotic {
            margin-top: 0px;
            float: none !important;
        }
    }
    @media (max-width: 992px) {
        .logo_dane-agrotic img {
            max-width: 30%;
        }
        .logo_dane-agrotic {
            width: 100%;
        }
    }
    @media (min-width: 1367px) {
        .logo_dane-agrotic img {
            max-width: 30%;
        }
        .logo_dane-agrotic {
            width: 100%;
        }
    }
    
    @media (min-width: 992px) {
        .logo_dane-agrotic img {
            max-width: 25%;
        }
        .logo_dane-agrotic {
            width: 80%;
        }
    }
    
    @media (max-width: 767px) {
        .logo_dane-agrotic img {
            max-width: 30%;
        }
        .logo_dane-agrotic {
            width: 100%;
        }
    }
    
    .img-responsive,
    .thumbnail > img,
    .thumbnail a > img,
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
        vertical-align: middle;
    }

    /* Asosiaciones */
    .bg-asociaciones {
        background-image: url('../img/asociaciones/fondo_paisaje_federacion.png');
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
    }
    
    .sub-titulo-asociaition {
        font-size: 30px; text-shadow: 5px 4px 4px var(--primary);
        color: #FFF;
        top: 0px;
        position: relative;
        font-size: 2rem !important;
        font-weight: bold;
        text-align: center;
    }
    
   @media screen and (max-width: 390px){
        .sub-titulo-asociaition{
            font-size:22px !important;
        }
    }
    
    section.bg-asociaciones {
        /*background: linear-gradient(rgba(9, 30, 62, .5), rgba(9, 30, 62, .9)), url(../img/carousel-2.jpg) center center no-repeat;*/
        background: linear-gradient(rgba(133, 166, 51, .9), rgba(133, 166, 51, .5)), url(../img/asociaciones/fondo_paisaje_federacion.png) center center no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    section.bg-federation-two{
        background-image: url('../img/federacion/bg_3.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    p.text-content-asociation {
        display: -webkit-box;
        max-width: 100%;
        margin: 0 auto;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis
    }
    
    .alert-info-asociation {
        /*background-color: rgba(96, 226, 44, 0.5);*/
        box-shadow: 10px 10px 20px 10px rgb(255 255 255 / 70%);
        padding: 8px;
        color: var(--primary);
    }
    
    .alert-info-asociation2 {
        background-color: rgba(96, 226, 44, 0.5);*/
        box-shadow: 10px 10px 20px 10px rgba(138, 193, 228, 0.7);*/
        padding: 8px;
        color: var(--primary);
    }
    
    .alert-info-asociation3 {
        background-color: rgba(96, 226, 44, 0.1);
        box-shadow: 3px 3px 21px 6px rgba(255, 255, 255, 0.7);
        padding: 8px;
        color: var(--primary);
    }
    
    .logo-asociation {
        align-items: center !important;
        justify-content: center !important;
    }
    
    .botton-contact-asociation{
        border-radius: 10px;
        color: var(--primary);
        background-color: var(--secondary);
        text-align: center;
        width: 250px;
        height: 50px;
        font-size: 20px;
        font-weight: bold;
        border: none;
    }
    
    .bg-primary-contact {
        background-color: #091E3E !important;
        color: #FFF !important;
    }
     
    .bg-primary-contact2 {
        background-color: #091E3E !important;
        color: #FFF !important;
        border: solid 1px var(--secondary) !important;
    }
        
        
        
	.single-services {
		margin-top: 140px;
	}

	#tabs ul {
	margin: 0;
	padding: 0;
	}
	#tabs ul li {
	margin-bottom: 10px;
	display: inline-block;
	width: 100%;
	}
	#tabs ul li:last-child {
	margin-bottom: 0px;
	}
	#tabs ul li a {
		text-transform: capitalize;
		width: 100%;
		padding: 30px 30px;
		display: inline-block;
		background-color: #a4c639;
		font-size: 20px;
		color: #121212;
		letter-spacing: 0.5px;
		font-weight: 700;
		transition: all 0.3s;
	}
	#tabs ul li a i {
		float: right;
		margin-top: 5px;
	}
	#tabs ul .ui-tabs-active span {
	background: #faf5b2;
	border: #faf5b2;
	line-height: 90px;
	border-bottom: none;
	}
	#tabs ul .ui-tabs-active a {
	color: #fff;
	}
	#tabs ul .ui-tabs-active span {
	color: #1e1e1e;
	}
	.tabs-content {
		margin-left: 30px;
	text-align: left;
	display: inline-block;
	transition: all 0.3s;
	}
	.tabs-content img {
		max-width: 100%;
		overflow: hidden;
	}
	.tabs-content h4 {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: 0.25px;
		margin-bottom: 15px;
		margin-top: 30px;
	}
	.tabs-content p {
	font-size: 14px;
	color: #7a7a7a;
	margin-bottom: 0px;
	}

        
        
    /* Federation */
    .fondo-video-asociation{
         background: url(../img/asociaciones/Logo-Federacion-FEDEAGRONAR04.png) center center no-repeat;
    }

    .ftco-section {
        padding: 2em 0;
        position: relative; 
    }

    .ftco-no-pt {
        padding-top: 0 !important;
    }
    
    .ftco-no-pb {
        padding-bottom: 0 !important; 
    }
    
    [class^="icon-"], [class*=" icon-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
      
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

    .img-2 {
        position: relative;
    }
    
    @media (max-width: 767.98px) {
        .img-2 {
            height: 300px;
            margin-bottom: 40px; 
        }
    }
    
    .img-2 .icon {
        width: 100px;
        height: 100px;
        background: var(--secondary);
        -webkit-animation: pulse 2s infinite;
        animation: pulse 2s infinite;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%; 
    }
    .img-2 .icon span {
        color: #fff;
        font-size: 24px;
    }

    .wrap-about {
        position: relative; 
    }
    @media (min-width: 992px) {
        .wrap-about {
        padding-left: 6em; 
        } 
    }

    @media (min-width: 768px) {
        .wrap-about {
            padding-left: 3em; 
        } 
    }

    .wrap-about .heading-section-bold h2 {
        font-size: 40px;
        font-weight: 600;
        color: #000000; 
    }


    .subheading {
        font-size: 18px;
        display: block;
        margin-bottom: 5px;
        font-style: italic;
        color: var(--primary); 
    }
    
    .federtion-span {
        color: #fff;
        background-color: #123A5E;
        font-weight: bold;
    }

    .botton-asociation-more{
        border-radius: 10px;
        color: var(--light);
        background-color: var(--primary);
        text-align: center;
        width: 230px;
        height: 50px;
        font-size: 30px;
        font-weight: bold;
        border: none;
        margin-top: 10px;
    }

    .product {
        display: block;
        width: 100%;
        margin-bottom: 30px;
        position: relative;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: 1px solid var(--primary); 
    }
    
    @media (max-width: 991.98px) {
        .product {
            margin-bottom: 30px; 
        }
    }
    
    .product .img-prod {
        position: relative;
        display: block;
        overflow: hidden; 
    }
    
    .product .img-prod .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        opacity: 0;
        background: var(--secondary);
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease; 
    }
        
    .product .img-prod span.status {
        position: absolute;
        top: 0;
        left: 0;
        padding: 2px 10px;
        color: #fff;
        font-weight: 300;
        background: var(--secondary);
        font-size: 12px; 
    }
    .product .img-prod img {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease; 
    }
    .product .img-prod:hover img, .product .img-prod:focus img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); 
    }
    .product .img {
        display: block;
        height: 500px; 
    }
    
    .product .icon {
        width: 60px;
        height: 60px;
        background: #fff;
        opacity: 0;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .product .icon span {
        color: #000000; 
    }
    
    .product:hover .icon {
        opacity: 1; 
    }
    
    .product:hover .img-prod .overlay {
        opacity: 0; 
    }
    
    .product .text {
        background: #fff;
        position: relative;
        width: 100%; 
    }
    
    .product .text h3 {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: "Poppins", Arial, sans-serif; 
    }
    .product .text h3 a {
        color: #000000; 
    }

    .product .text p.price {
        margin-bottom: 0;
        color: var(--secondary);
        font-weight: 400; 
    }
    .product .text p.price span.price-dc {
            text-decoration: line-through;
            color: #b3b3b3; 
    }
        
    .product .text p.price span.price-sale {
            color: var(--secondary);
    }
    
    .product .text .pricing {
        width: 100%;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease; 
    }

    .product .text .bottom-area {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        opacity: 0;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease; 
    }
    
    .product .text .bottom-area a {
        color: #fff;
        width: 100%;
        background: var(--secondary);
        width: 40px;
        height: 40px;
        margin: 0 auto;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
    }

    .product .text .bottom-area .m-auto {
            margin: 0 auto; 
    }

    .product:hover {
        -webkit-box-shadow: 10px 7px 15px -5px rgba(100, 100, 200, 0.07) !important;
        -moz-box-shadow: 10px 7px 15px -5px rgba(100, 30, 0, 0.07) !important;
        box-shadow: 10px 7px 15px -5px rgba(140, 170, 90, 0.07) !important; 
    }
        
    .product:hover .pricing {
        opacity: 0; 
    }

    .product:hover .text .bottom-area {
        opacity: 1; 
    }
    
    .text-white-faq{
        text-shadow: 2px 1px 2px #FFF;
    }
    
    
    /*  Remanentes */
    .bg-remanentes {
        background-image: url('../img/remanente/remanente.png');
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px 0px 0px 0px;
        overflow: hidden;
    }


    #page-content {
        margin-top: 130px
    }
    
    #page-content h2 {
        font-weight: 300;
        font-size: 30px;
        color: #304254
    }
    
    @media (min-width:768px) and (max-width:1169px) {
        #page-content {
            margin-top: 163px
        }
    }
    
    @media (max-width:767px) {
        #page-content {
            margin-top: 81px
        }
    }

    .product-tab {
        background-color: #f3f6f8;
        position: relative;
        z-index: 10;
        overflow: hidden
    }
    
    .product-tab h2 {
        margin-top: 50px;
        margin-bottom: 30px
    }
    
    .product-tab h4 {
        font-size: 24px;
        color: #304254;
        font-weight: 300;
        margin: 0
    }
    
    .product-tab h4 span {
        background-color: var(--primary);
        margin-right: 15px;
        margin-top: -18px;
        text-align: center;
        width: 50px;
        display: inline-block;
        padding: 50px 0 20px;
        border-radius: 0 0 25px 25px;
        -moz-border-radius: 0 0 25px 25px;
        -webkit-border-radius: 0 0 25px 25px;
        color: #fff;
        font-size: 24px
    }
    
    .product-tab p {
        font-weight: 300;
        font-size: 14px;
        color: #869294;
        line-height: 30px;
        margin-top: 30px
    }
    
    .product-tab p.tel {
        font-family: 'Open Sans Extrabold', arial !important;
        font-size: 20px !important;
    }
    
    .product-tab p.tel span {
        font-size: 12px;
        display: block
    }
    
    .product-tab img {
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
        max-width: 750px;
        width: 100%
    }
    
    .resp-arrow {
        border-top-color: var(--secondary)
    }
    
    h3.resp-tab-active span.resp-arrow {
        border-bottom-color: var(--primary)
    }
    
@media (min-width:768px) and (max-width:2500px) {
    .product-tab h4 span {
        margin-top: 0
    }

    .product-tab .prod-tab-content {
        display: inline-block;
        width: 60%
    }

    .product-tab img {
        position: relative;
        z-index: 1;
        margin-top: 30px;
        float: right;
        width: 35%
    }
}

@media (max-width:767px) {
    .product-tab h4 span {
        margin-top: 0
    }

    .product-tab .prod-tab-content {
        display: inline-block;
        width: 100%
    }

    .product-tab img {
        position: relative;
        z-index: 1;
        margin-top: 20px;
        width: 100%
    }
}

.botton-more-remanents {
    border-radius: 10px;
    color: var(--light);
    background-color: var(--secondary);
    text-align: center;
    width: 180px;
    height: 40px;
    font-size: 28px;
    font-weight: bold;
    border: none;
    margin-top: 10px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.botton-more-remanents:hover {
    color: var(--primary);
}

.botton-more-remanents2 {
    border-radius: 10px;
    color: var(--light);
    background-color: var(--primary);
    text-align: center;
    width: 180px;
    height: 40px;
    font-size: 28px;
    font-weight: bold;
    border: none;
    margin-top: 10px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.botton-more-remanents2:hover {
    color: var(--secondary);
}

/* mercados campesinos */
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.why-text2 {
    background: #f5f5f5;
    padding: 15px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
}


.floating-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.floating-icon a {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #f00; /* Color de fondo del icono */
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}

.floating-icon svr {
  width: 30px;
  height: 30px;
  margin-top: 10px;
}


/* menú flotante*/
.btn-flotante {
	font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: var(--primary); /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	bottom: 44px;
	right: 58px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 999 !important;
}
.btn-flotante:hover {
	background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		/*bottom: 20px;
		right: 20px;*/
	}
} 


/*..... btn izquierdo */
.options-list1 {
    list-style: none;
    padding: 0;
    position: fixed;
    top: 50%;
    z-index: 9999
}

.options-list1 .options-item1 {
    background-color: #2DB3BF;
    height: 100%;
    line-height: 16px;
    padding: 4px
}

.options-list1 .options-item1 .options-link {
    display: block;
    height: 100%
}

.options-list1 .options-item1 .options-link img,
.options-list1 .options-item1 .options-link svg {
    height: 100%
}

.mnu-left1 {
    height: 56px;
    margin: 0;
    margin-top: -28px
}

.mnu-left1 .options-item1 {
    background-color: #F2F2F2;
    border-radius: 0 1rem 1rem 0;
    border: 1px solid #d9d9d9;
    box-shadow: 3px 3px 6px #d9d9d9;
    height: 100%;
    overflow: hidden;
    transition: width 0.5s;
    width: 50px
}

.mnu-left1 .options-item1 a {
    text-decoration: none
}

.mnu-left1 .options-item1 p {
    color: #var(--primary);
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    margin: 0 0 0 8px;
    transition: opacity 0.5s 0.25s
}

.mnu-left1 .options-item1 p .minarino-text {
    color: var(--primary) !important;
    font-weight: bold
}

.mnu-left1 .options-item1 svg {
    display: inline-block;
    vertical-align: middle
}

.mnu-left1 .options-item1:hover {
    width: auto
}

.mnu-left1 .options-item1:hover p {
    color: #646464;
    opacity: 1
}

 /* Fin menu flotante */
 
 /* */
 
 /* formulario registro*/
 .help-block-registro {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.text-muted-registro {
    color: #6c757d!important;
}

.small-font-registro {
    font-size: 12px;
}

.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}





.button-container {
    position: relative;
}

.button1 {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    margin-top: 10px;
    padding: 5px 8px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 50%;
    
    align-items: center;
    justify-content: center;

}

.button11:hover {
  background-color: #091E3E;
  
}

.button1-top {
    margin-bottom: 35px;
    border-radius: 50%;
}

.w3-container {
    padding: 0.01em 16px
}

.w3-red,
.w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important
}

.w3-green,
.w3-hover-green:hover {
    color: #fff !important;
    background-color: #4CAF50 !important
}

.w3-closebtn
 {
    -webkit-transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s;
    transition: background-color .3s, color .15s, box-shadow .3s, opacity 0.3s, filter 0.3s
}