/* - - - - - - - - - - - - - - -
CSS para pantallas medianas (Tablets)
Ultima modificación por:
Fecha:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */
            /***************** HEADER ******************/

            header {
                overflow: hidden;
                height: 100px;
                display: block;
                padding: 0px;
                z-index: 1;
                /* position: fixed; */
                width: 100%;
                z-index: 9;
                background-color: transparent;
            }

            header.opened {
                max-height: 1000px;
                height: max-content;
                width: 100%;
                padding-left: 0px;
                z-index: 999;
                background-color: #522862;
                transition: 1s;
                position: fixed;
                overflow-y: scroll;
            }

            #menu_btn {
                content: url(../../_images/_svg/menu_white.svg);
                position: absolute;
                z-index: 1;
                right: 30px;
                top: 30px;
                width: 30px;
                padding: 10px;
            }

            #menu_btn2 {
                content: url(../../_images/_svg/menu_purple.svg);
                position: absolute;
                z-index: 1;
                right: 30px;
                top: 30px;
                width: 30px;
                padding: 10px;
            }

            header.opened #menu_btn,
            header.opened #menu_btn2 {
                content: url(../../_images/_svg/close_white.svg);
                width: 70px;
                padding: 0;
                top: 20px;
                right: 18px;
                transition: 1s;
            }

            .align-header {
                margin: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-top: 100px;
            }

            .nav-header {
                width: 100%;
                display: block;
            }

            .menu-resp {
                display: block !important;
                font-family: 'Barlow-Bold';
                font-weight: 700;
                color: white;
                margin: 40px auto;
                text-align: center;
                font-size: 2em;
                letter-spacing: 0.235em;
            }

            .nav-header a {
                font-family: 'Barlow-Medium';
                font-weight: 500;
                font-size: 1.5em;
                color: white;
                margin: 25px auto;
                display: block;
                text-align: center;
                text-transform: uppercase;
                line-height: 35px;
            }

            .btn-resp {
                display: block !important;
                width: 200px;
                color: #522862 !important;
                font-size: 1.3em !important;
            }

            .logo_index,
            .logo_indexResp {
                display: block;
                position: static;
                width: 20vw;
            }

            .logo_index2 {
                display: none;
            }

            .align-header .redes {
                width: 25%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: absolute;
                top: 35px;
            }

            .align-header .redes img {
                cursor: pointer;
                width: 35px;
            }

            .purple a {
                padding: 0;
            }

            .purple .btn-white {
                padding: 20px!important;
            }

            .tel {
                margin: 50px 0 90px;
            }

            .purple a:hover {
                padding: 0;
            }
            /***************** HEADER (end) ******************/
            /***************** INICIO ******************/

            #clouds {
                top: -50px;
            }

            #left-b a {
                display: none;
            }

            .main-header {
                padding-bottom: 150px;
                padding-top: 100px;
            }

            .sec-banner {
                width: 100%;
                position: relative;
            }

            #ct-banner {
                padding-top: 30px;
            }

            #vector-b {
                width: 150vw;
                left: -100px;
            }

            #elem_left {
                top: 5em;
            }

            #frame_dog {
                top: 50%;
            }

            #colina {
                flex-direction: column;
            }

            #img-col {
                margin: auto;
            }

            #vect2 {
                bottom: 21vw;
            }

            #txt-col {
                width: 80%;
                margin-top: -50px;
            }

            #txt-col h1 {
                text-align: center;
            }

            .sec-proceso {
                margin-top: -100px;
            }

            #frames-proc {
                width: 90%;
            }

            .align-proc h1 {
                padding-left: 0;
                text-align: center;
            }

            .pr h3,
            .pr p {
                font-size: 1em;
            }

            #ct-proc a {
                margin: 20px auto 100px;
            }

            .fondo-pl,
            #pl-line,
            #pl-line2 {
                display: none;
            }

            #pl1 {
                
            }

            #foot1 {
                position: absolute;
                left: unset;
                top: 15vh;
                width: 10%;
                right: 80px;
            }

            #foot2 {
                position: absolute;
                top: 800px;
                right: 50px;
                width: 10%;
            }

            #plan_sub {
                width: 80%;
                margin: -70px auto 0;
            }

            #align-plan {
                flex-direction: column;
                position: relative;
                margin: auto;
                left: 0;
                top: 200px;
                padding-top: 50px;
            }

            .plan {
                width: 80%;
                margin: 50px auto;
            }

            #pl2 {
                position: relative;
                top: 50px;
                right: -30px;
            }

            #pl3 {
                position: relative;
                top: -150px;
                left: -100px;
            }

            .circle-pl {
                width: 350px;
                height: 350px;
                flex-direction: row-reverse;
            }

            #cat {
                left: 150px;
            }

            .sec-servicios {
                position: relative;
                margin-top: 250px;
            }

            #elem-title {
                flex-direction: column;
            }

            #e1 {
                position: absolute;
                height: 60%;
                top: -120%;
                left: 10%;
            }

            #foot3 {
                position: absolute;
                top: unset;
                bottom: 0;
            }

            #e2 {
                width: 70%;
                margin: auto;
            }

            #e3 {
                position: absolute;
                top: 0;
                right: 150px;
            }

            #clouds2 {
                position: absolute;
                top: -1850px;
            }

            #ct-servicios {
                width: 80%;
            }

            #frame4 {
                position: absolute;
                right: -50px;
                bottom: -110px;
            }

            .sec-inst {
                margin-top: 150px;
            }

            #fondo-i {
                background-size: cover;
            }

            #ct-inst {
                width: 80%;
            }

            #huellas-inst {
                z-index: -1;
                top: -70px;
                right: 30px;
            }

            #img-inst {
                position: relative;
                top: 0;
                left: -55px;
                width: 150%;
            }

            #v1 {
                position: absolute;
                left: -30px;
                width: 130%;
                top: 60px;
            }

            #ct2-inst {
                flex-direction: column;
                margin: 50px auto;
            }

            .instalacion {
                width: 50%;
                margin: 30px auto;
            }

            .sec-grd {
                position: relative;
            }

            #fondo-grd {
                width: 100%;
            }

            #pet-grd {
                left: 30px;
                width: 100%;
            }

            #align-grd {
                flex-direction: column;
                width: 90%;
            }

            .title-guardian {
                width: 100%;
                text-align: center;
            }

            .img-guardian {
                width: 100%;
                position: relative;
                top: 60px;
                right: 0;
                margin: auto;
            }

            #line-grd2,
            #line-grd1 {
                display: none;
            }

            #stars {
                position: absolute;
                top: 200px;
                right: 100px;
            }

            .sec-i {
                padding-top: 100px;
            }
            /***************** INICIO (end) ******************/
            /***************** FOOTER ******************/

            .formulario {
                width: 100%
            }

            #fondo_contact {
                background-size: cover;
                height: 1050px;
                background-position-x: 30%;
            }

            .ct-contacto {
                width: 100%;
            }

            .form {
                width: 80%;
                left: 0;
                top: 200px;
            }

            #formC {
                width: 70%;
            }

            .sec-footer {
                align-items: center;
            }

            #korimi-f {
                width: 30%;
            }

            .footer-cat {
                flex-direction: column;
                position: relative;
            }

            #align-footer {
                width: 90%;
                margin: auto;
            }

            .a {
                width: 45%;
            }

            #btn-footer {
                position: absolute;
                bottom: 250px;
            }

            #colina-f {
                width: 40%;
                position: absolute;
                bottom: 150px;
            }

            #derechos {
                width: 100%;
            }

            #cat-f {
                width: 100%;
                display: flex;
                justify-content: right;
                margin-top: -50px;
            }

            #cat-f img {
                position: relative;
                right: 0;
                bottom: 0;
                width: 50%;
                z-index: 1;
            }

            #pf1 {
                position: absolute;
                transform: rotate(285deg);
                width: 10vw;
                top: 160vw;
                left: 50px;
            }

            #pf2 {
                right: 100px;
                top: -60px;
                width: 100px;
                transform: rotate(324deg);
            }

            #pf3 {
                position: absolute;
                right: 60px;
                bottom: 30px;
                width: 90px;
                transform: rotate(12deg);
            }
            /***************** FOOTER (end) ******************/
            /***************** PLANES ******************/

            .sec-pl {
                padding-top: 150px;
            }

            #planes {
                flex-direction: column;
            }

            .pplan {
                width: 80%;
                margin: auto;
                margin-bottom: 200px;
            }

            .pplan p {
                font-size: 1em;
            }

            .pplan2 {
                width: 80%;
                margin: auto;
            }

            .descpl2 {
                font-size: 1em !important;
            }

            .pplan h2,
            .pplan2 h2 {
                font-size: 2em;
            }

            .ct-plan li {
                font-size: 1.2em;
            }

            .pplan2 p {
                font-size: 1.3em;
            }

            .pplan .btn-purple,
            .pplan2 .btn-white {
                width: 50%;
                font-size: 1.4em;
            }
            /***************** PLANES (end) ******************/
            /***************** SERVICIOS ******************/

            .align-s {
                flex-direction: column;
                padding-top: 100px;
            }

            #izq-s,
            #der-s {
                width: 100%;
            }

            #izq-s {
                margin-bottom: 100px;
            }

            #izq-s img {
                width: 15%;
            }

            #izq-s h1 {
                text-align: center;
                width: 80%;
                margin: 50px auto;
            }

            #izq-s br {
                display: none;
            }

            #izq-s a {
                width: 50%;
                margin: auto;
                font-size: 1.1em;
            }

            #canv {
                display: none;
            }

            #chih2 {
                width: 100%;
                top: 0;
                left: 0;
            }

            #title-s2 {
                width: 70%;
            }

            .service {
                flex-direction: column;
                margin-bottom: 100px;
            }

            .stext {
                width: 90%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .stext p {
                text-align: center;
            }

            .simg {
                width: 100%;
            }

            #f1,
            #f2 {
                width: 100%;
            }

            #simg1 {
                top: 0;
                left: 19%;
                width: 75%;
            }

            #servhom {
                flex-direction: column-reverse;
            }

            #simg2 {
                top: 0;
                width: 130%;
            }

            #rec {
                padding-top: 0;
                margin-top: -50px;
            }

            #simg3 {
                position: absolute;
                width: 100%;
                top: -30px;
                left: 0;
            }
            /***************** SERVICIOS (end) ******************/
            /***************** CONTACTO ******************/

            .map {
                margin-bottom: 20vh;
            }

            #contactt {
                width: 90%;
                margin: auto;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                position: relative;
                top: 55vh;
                z-index: 1;
            }
            /***************** CONTACTO (end) ******************/
            /***************** PROCESO ******************/

            .sec-p .align-pr,
            .sec2-p .align-pr {
                flex-direction: column;
            }

            .num {
                padding-bottom: 100px;
            }

            #num3 {
                padding-top: 150px;
            }

            #bird {
                position: relative;
                left: 40px;
            }
            /***************** PROCESO (end) ******************/

            .date-and-author {
                padding-right: 50px;
            }

            .share {
                padding-left: 50px;
            }
            /***************** BLOG ******************/

            .sec-blog {
                padding-top: 100px;
            }

            #categ {
                width: 10%;
                z-index: 10;
                top: 40px;
            }

            #categ.visible {
                width: 60%;
            }

            .slick-dots li.slick-active button:before {
                opacity: .75;
                color: transparent !important;
                background-color: white;
            }
            /* Detalle de blog*/

            .portada {
                height: 250px;
            }

            .sec-details {
                padding-top: 100px;
            }

            .content-blog {
                width: 60%;
            }
            /***************** BLOG (end) ******************/
            /* Aviso de privacidad*/

            .sec-txt {
                padding-top: 80px;
            }

            .align-txt h1 {
                width: 80%;
                text-align: center;
            }

            .align-txt h6 {
                width: 80%;
            }

            .align-txt p,
            .align-txt ul,
            .align-txt ol {
                width: 80%;
            }
            /****************** SITEMAP *******************/

            .sitemap {
                width: 90%;
                margin: auto;
                padding: 180px 0px 0px;
            }
            /***************** SITEMAP (end) ******************/

            /***************** PRODUCTOS ******************/
            .sec-prod {
                padding-top: 100px;
            }
            .categ_prod{
                width: 85%;
                justify-content: space-between;
            }
            .card_prod{
                width: 45%;
            }

            #prodbott {
                width: 60%;
            }
            #prod1 {
                width: 85%;
            }
            .mainpop {
                width: 80%;
            }

            .cd-popup-container {
                max-width: 80%
            }


            /***************** PRODUCTOS (end) ******************/