@charset "utf-8";
.text-lorem {
    background-color: gold;
}
/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Fundamentals
====================================== */
/* 
Typography:
font-family: 'Kanit', sans-serif;

Colors:
blue: #1F7FBE / rgba(31, 127, 190, 1)
purple: #823F91 / rgba(130, 63, 145, 1)
gray: #585858 / rgba(88, 88, 88, 1)

Flex:
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;

Grid:
display: grid;
gap: 20px;
grid-template-columns: 25% auto 25%; / grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
"footer-logo footer-menu footer-social";
height: 120px;
align-content: center;
align-items: center;
justify-content: center; 

*/

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&display=swap');


/* ===================================
    Reset
====================================== */
.loading {
    position: fixed;
    z-index: 999999;
    height: 100vh;
    width: 100vw;
    background: -webkit-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -moz-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -o-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: linear-gradient(90deg, #1D7FBE, #833D90); 
    overflow: hidden !important;
}
.loader {
    position: absolute;
    top: 47%;
    left: 47%;
    transform: translate(-48%, -48%);

    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-animation: rotation 1s linear infinite; /* Safari 4+ */
    -moz-animation:    rotation 1s linear infinite; /* Fx 5+ */
    -o-animation:      rotation 1s linear infinite; /* Opera 12+ */
    animation:         rotation 1s linear infinite; /* IE 10+, Fx 29+ */
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 100% !important;}
body {
     font-family: 'Kanit', sans-serif;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased; 
     font-size: 16px;
     font-weight: 300;
     line-height: auto;
     color:#585858; 
     overflow-x: hidden !important;
     /* background-color: #000000; */
}
body, html { height: 100%; -moz-osx-font-smoothing: grayscale;}

/* a, a:active, a:focus { color: #ED1C24; text-decoration: none;}
a:hover, a:active{color: #860f13; text-decoration: none; cursor: pointer;}
a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

/* footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none;}
footer a:hover, footer a:active{color: #ffffff; opacity:0.7; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; } */


footer a {
    text-decoration: none;
    box-shadow: inset 0 0 0 0 #ffffff;
    color: #ffffff;
    margin: 0 -.25rem;
    padding: 0 .25rem;
    transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
  }
  footer a:hover {
    box-shadow: inset 150px 0 0 0 #ffffff;
    color: #833D90;
  }

  
img {max-width:100%; height:auto; }

/* ===================================
    Menu
====================================== */
nav .main-logo {
    position: fixed;
    left: 15px;
    top: 10px;
    z-index: 2222;
}
/* nav .bar {
    position: fixed;
    z-index: 2;
    height: 70px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
} */
nav label{
    display:flex;
     flex-direction:column;
     width:50px;
     cursor:pointer;
   }
   
nav label span{
     /* background: #fff;
     border-radius:10px;
     height:4px;
     margin: 5px 0;
     transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6); */
     background: #ffffff;
    box-shadow: 0px 0px 10px #9a9a9a;
    border-radius:10px;
    height:4px;
    margin: 5px 0;
    transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* .nav-grupo-armenta nav label span{
    background: #dddddd;
    box-shadow: 0px 0px 10px #9a9a9a;
    border-radius:10px;
    height:4px;
    margin: 5px 0;
    transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
} */
   
   
nav span:nth-of-type(1){
     width:50%;
     
   }

nav span:nth-of-type(2){
     width:100%;
   }
   
   
   nav span:nth-of-type(3){
     width:75%;
    
   }
   
   
   nav input[type="checkbox"]{
     display:none;
   }
   
   
   nav input[type="checkbox"]:checked ~ span:nth-of-type(1){
     transform-origin:bottom;
     /* transform:rotatez(45deg) translate(8px,0px); */
     transform:rotatez(45deg) translate(5px,0px);
   }
   
   
nav input[type="checkbox"]:checked ~ span:nth-of-type(2){
     transform-origin:top;
     transform:rotatez(-45deg)
}
   
   
nav input[type="checkbox"]:checked ~ span:nth-of-type(3){
     transform-origin:bottom;
     width:50%;
     /* transform: translate(30px,-11px) rotatez(45deg); */
     transform: translate(22px,-7px) rotatez(45deg)
}



nav .burger {
    right: 0%;
    background-color: transparent;
    position: fixed !important;
    text-align: right;
    z-index: 101;
    color: #ffffff;
}

nav .menu {
    width: 50%;
    height: 100%;
    position: fixed;
    z-index: 100;
    right: -100%;
    list-style: none;
    background: linear-gradient(89.94deg, #1C7FBE 0.04%, #833C8F 99.95%);
    justify-content: center;
    align-items: center;
    display:flex;
    flex-direction: column;
    transition: right .6s;
    transition-timing-function: ease;
}
/* sm */ @media (max-width: 767px) {
    nav .menu {
        width: 100%;
    }
}

nav.open .menu {
    right: 0%;
    
}
.screen {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    z-index: 99;
    display: none;
}
nav.open .screen {
    display: block;
}

nav .menu a {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    text-decoration:none;
}
/* nav .menu a {
    color: white;
    font-size: 2rem;
    text-decoration:none;
} */

nav li {
    margin: 5px 0px;
}
/* sm */ @media (max-width: 767px) {
    nav li {
        margin: 15px 0px;
    }
}

nav li a.menu-link {
    text-decoration: none;
    box-shadow: inset 0 0 0 0 #ffffff;
    color: #ffffff;
    margin: 0 -.25rem;
    padding: 0 .45rem;
    transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
  }
nav li a.menu-link:hover {
    box-shadow: inset 250px 0 0 0 #ffffff;
    color: #833D90;
}

nav li.icons-rrss-white a {
    font-size: initial;
}

.menu-float-text {
    color: white;
    font-size: 1rem;
    position: absolute;
    top: 60px;
    left: -36px;
    z-index: 333333;
    transform: rotate(-90deg);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
}

.menu-float-hash {
    color: white;
    font-size: 1rem;
    position: absolute;
    bottom: 75px;
    right: -60px;
    z-index: 333333;
    transform: rotate(-90deg);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
}


/* ===================================
    Typography
====================================== */
/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Kanit', sans-serif; letter-spacing: 0; margin-bottom: .75em; font-weight: 600}
h1 {font-size:80px; line-height: 88px; font-weight: 400;}
h2 {font-size:40px; line-height:46px; font-weight: 500;}
h3 {font-size:35px; line-height:41px; font-weight: 500;}
h4 {font-size:30px; line-height:36px; font-weight: 500;}
h5 {font-size:24px; line-height:30px; font-weight: 400;}
h6 {font-size:20px; line-height:26px; font-weight: 400;}

/* .font-main {font-family: 'Kanit', sans-serif;} */
/* .font-alt {font-family: 'Kanit', sans-serif;} */

/* text color */
.text-main {color: #585858;}
.text-alt {color: #FFFFFF;}
.text-blue {color: #1D7EBE;}
.text-purple {color:#823F91;}
.text-dark-blue {color:#035AA6;}


/* titles */

.little-title-main {
    background: -webkit-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -moz-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -o-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: linear-gradient(90deg, #1D7FBE, #833D90); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 1.5em;
    line-height: 100%;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.title-main {
    background: -webkit-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -moz-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -o-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: linear-gradient(90deg, #1D7FBE, #833D90); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 6em;
    line-height: 100%;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.title-legal {
    background: -webkit-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -moz-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -o-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: linear-gradient(90deg, #1D7FBE, #833D90); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 3em;
    line-height: 100%;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

/* xl */ @media (max-width: 1399px) {
    .title-main {
        font-size: 5.5em;
        line-height: 100%;
    }
}
/* lg */ @media (max-width: 1199px) {
    .title-main {
        font-size: 5em;
        line-height: 100%;
    }
}
/* md */ @media (max-width: 991px) {
    .title-main {
        font-size: 4.5em;
        line-height: 100%;
    }
}
/* sm */ @media (max-width: 767px) {
    .title-main {
        font-size: 4em;
        line-height: 100%;
    }
}
/* xs */ @media (max-width: 575px) {
    .title-main {
        font-size: 3.5em;
        line-height: 100%;
    }
    .title-main.text-main-min {
        font-size: 3em;
        line-height: 100%;
    }
}
/* xxs */ @media (max-width: 430px) {
    .title-main {
        font-size: 3em;
        line-height: 100%;
    }
    .title-main.text-main-min {
        font-size: 2.5em;
        line-height: 100%;
    }
}

.title-alt {}

/* ===================================
    Background color
====================================== */
.bgh-one {background: linear-gradient(90deg, #1D7FBE 0%, #833D90 100%);}
.bgh-two {background: linear-gradient(90deg, #3C8B90 0%, #1DB4BE 100%);}
.bgh-three {background: linear-gradient(90deg, #303184 0%, #045AA6 100%);}
.bgh-four {background: linear-gradient(90deg, #522E89 0%, #1AA3BD 100%);}

.bgv-one {background: linear-gradient(180deg, #035AA6 0%, #0B467A 100%);}

.bg-one {background-color: #27BDBE;}
.bg-two {background-color: #303083;}


body {
    transition: background-color 1s ease;
}
/* panel styles */
.block-scrolling {
    /* min height incase content is higher than window height */
        /* min-height: 100vh;
        display: flex;
        justify-content: space-around; */
    /* outline: 10px solid hotpink; */
    /* turn above on to see the edge of panels */
}

/* colours */
.color-bg-scrolling-white {
    background-color: #ffffff;
}
.color-bg-scrolling-one {
    background-color: #27BDBE;
}
.color-bg-scrolling-two {
    background-color: #303083;
}
.color-bg-scrolling-three {
    background-color: #512D88;
}
.color-bg-scrolling-four {
    background-color: #035AA6;
}
.color-bg-scrolling-five {
    background-color: #17A8BF;
}
.color-bg-scrolling-six {
    background-color: #7A2DB1;
}


/* ===================================
    Buttons
====================================== */
.btn {
    display: inline-block;
    font-weight: 500;
    color: #585858;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid #ffffff;
    padding: 0.7rem 1rem;
    min-width: 230px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 100px;
    transition: color .25s ease-in-out,background-color .25s ease-in-out,border-color .25s ease-in-out,box-shadow .25s ease-in-out;
}
/* main button */
.btn.btn-main, .btn.btn-main:focus {background:transparent; color: #ffffff;}
.btn.btn-main:hover {background: #ffffff; border-color: #ffffff; color: #585858;}

/* main grad button */
.btn.btn-main-grad, .btn.btn-main-grad:focus {background:transparent; color: #1B7FBE; border: 2px solid #823F91;}
.btn.btn-main-grad:hover {background: #ffffff; border-color: #823F91; color: #585858;}

/* alt button */
.btn.btn-alt, .btn.btn-alt:focus {
    border-color: #ffffff;
    color: #ffffff;
    background-image: -webkit-linear-gradient(75deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: -moz-linear-gradient(75deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: -o-linear-gradient(75deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: linear-gradient(75deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-size: 250% ;
    background-position: left;
    transition: 300ms background-position ease-in-out;
}
.btn.btn-alt:hover {
    background-position: right; 
}

.bg-gray .btn-alt {
    border-color: #ECECEC;
}

.play-video {
    display: inline-block;
    width: 50px;
    height: 50px;
    /* border: 1px solid #ffffff; */
    border: 3px solid #ffffff;
    border-radius: 100px;
    border-color: #ffffff;
    color: #ffffff;
    background-image: -webkit-linear-gradient(90deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: -moz-linear-gradient(90deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: -o-linear-gradient(90deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-image: linear-gradient(90deg, #1D7FBE, #833D90, #833D90, #1D7FBE); 
    background-size: 300% ;
    background-position: left;
    transition: 300ms background-position ease-in-out;
}
.play-video:hover {
    background-position: right; 
}

.btn-video-servicios {
    position: absolute;
    z-index: 1;
    /* top: 50%;
    margin: 0 auto; */
}
/* ===================================
    Texts
====================================== */
.text-uppercase {
    text-transform: uppercase;
}
.text-nowrap {
    white-space: nowrap;
}

/* ===================================
    Banners
====================================== */
.banner-square {
    background: linear-gradient(90deg, #1D7FBE, transparent) #833D90;
    color: #ffffff;
}
.text-gradient {
    /* background: -webkit-linear-gradient(#eee, #333); */
    /* background: linear-gradient(90deg, #1D7FBE, transparent) #833D90; */
    background: -webkit-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -moz-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: -o-linear-gradient(90deg, #1D7FBE, #833D90); 
    background: linear-gradient(90deg, #1D7FBE, #833D90); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
/* ===================================
    brand pages
====================================== */
.noscroll {
    overflow: hidden;
}

.brands-head-block {
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 10px;
}
.brands-main-block {
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 30px;
}

/* lg */ @media (max-width: 1199px) {}
/* md */ @media (max-width: 991px) {
    .brands-main-block {
         display: grid;
         grid-template-columns: 100%;
         column-gap: 30px;
    }
}
/* sm */ @media (max-width: 767px) {
    .brands-head-block {
         display: grid;
         grid-template-columns: 30% auto;
         column-gap: 10px;
    }
}
/* xs */ @media (max-width: 575px) {
    .brands-head-block-logo {grid-area: brands-head-block-logo}
    .brands-head-block-text {grid-area: brands-head-block-text}
    .brands-head-block {
         display: grid;
         grid-template-columns: 100%;
         column-gap: 10px;
         grid-template-areas: 
         "brands-head-block-text"
         "brands-head-block-logo";
    }
}
/* xxs */ @media (max-width: 430px) {}

/* ===================================
    social media icons - menu
====================================== */
.icons-rrss-white > a {
    border: 1px solid #fff;
    border-radius: 100px;
    margin: 0px 5px;
}
.icons-rrss-white > a:hover {
    border: 1px solid #fff;
    border-radius: 100px;
    margin: 0px 5px;
    background-color: rgba(255, 255, 255, .5);
}
/* .icons-rrss-white .rrss-fb:hover {
    border: 1px solid #fff;
    border-radius: 100px;
}
.icons-rrss-white .rrss-ig:hover {
    border: 1px solid #fff;
    border-radius: 100px;
}
.icons-rrss-white .rrss-yt:hover {
    border: 1px solid #fff;
    border-radius: 100px;
}
.icons-rrss-white .rrss-in:hover {
    border: 1px solid #fff;
    border-radius: 100px;
} */
/* ===================================
    social media icons - brands-main grupo-armenta
====================================== */
.icons-rrss-white-brands-main > a {
    /* border: 1px solid transparent; */
    /* border-radius: 100px; */
    margin: 0px 0px;
    opacity: 0.8;
}
.icons-rrss-white-brands-main > a:hover {
    /* border: 1px solid #fff; */
    /* border-radius: 100px; */
    margin: 0px 0px;
    opacity: 1;
    /* background-color: rgba(255, 255, 255, .5); */
}
/* ===================================
    social media icons - brands
====================================== */
.icons-rrss-brands > a {
    border: 1px solid transparent;
    border-radius: 100px;
}

.icons-rrss-brands .rrss-fb:hover {
    border: 1px solid #045AA5;
    border-radius: 100px;
}
.icons-rrss-brands .rrss-ig:hover {
    border: 1px solid #17A8BF;
    border-radius: 100px;
}
.icons-rrss-brands .rrss-yt:hover {
    border: 1px solid #7A2DB1;
    border-radius: 100px;
}
.icons-rrss-brands .rrss-in:hover {
    border: 1px solid #303083;
    border-radius: 100px;
}

/* ===================================
    social media icons - footer
====================================== */
.icons-rrss-footer .rrss-circle-fb {
    border: 1px solid #045AA5;
    border-radius: 100px;
}
.icons-rrss-footer .rrss-circle-fb:hover {
    background-color: rgba(4, 90, 165, 0.2);
}
.icons-rrss-footer .rrss-circle-ig {
    border: 1px solid #17A8BF;
    border-radius: 100px;
}
.icons-rrss-footer .rrss-circle-ig:hover {
    background-color: rgba(23, 168, 191, 0.2);
}
.icons-rrss-footer .rrss-circle-yt {
    border: 1px solid #7A2DB1;
    border-radius: 100px;
}
.icons-rrss-footer .rrss-circle-yt:hover {
    background-color: rgba(122, 45, 177, 0.2);
}
.icons-rrss-footer .rrss-circle-in {
    border: 1px solid #303083;
    border-radius: 100px;
}
.icons-rrss-footer .rrss-circle-in:hover {
    background-color: rgba(48, 48, 131, 0.2);
}
/* ===================================
    cta
====================================== */
/* xs */ @media (max-width: 575px) {
    .cta-text h2 {
        font-size:30px;
    }
}

/* ===================================
    footer
====================================== */
footer {
    color: #fff;
}
/* xs */ @media (max-width: 575px) {
    footer .footer-menu {
        font-size: 14px;
    }
}
.line {
    border-top: 1px solid #ffffff;
  }

/* ===================================
    servicios - internas
====================================== */

.title-cintillo {
    font-size: 5rem;
}
/* xl */ @media (max-width: 1399px) {
    .title-cintillo {
        font-size: 5rem;
    }
}
/* lg */ @media (max-width: 1199px) {
    .title-cintillo {
        font-size: 4.5rem;
    }
}
/* md */ @media (max-width: 991px) {
    .title-cintillo {
        font-size: 4rem;
    }
}
/* sm */ @media (max-width: 767px) {
    .title-cintillo {
        font-size: 3.5rem;
    }
}
/* xs */ @media (max-width: 575px) {
    .title-cintillo {
        font-size: 3rem;
    }
}
/* xxs */ @media (max-width: 430px) {

}