:root{--success: #8de527; --danger: #ff0000; --error: #ff0000; --warning: #ffa500; --info: #71c3e9; --default: #999; --stateless: #ccc;}
::-webkit-input-placeholder {color: #d4d4d4;}
:-ms-input-placeholder {color: #d4d4d4;}
::placeholder {color: #d4d4d4;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {font-family: helvetica, sans-serif; font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))); line-height: 1.6; color: var(--default);}
body * {text-rendering: geometricPrecision;box-sizing: border-box;}
b {font-weight: 600}
a {text-decoration: none; color: #0fa0ea;}
hr{display: flex; flex: 1; width: 100%; height: 1px; border: none; background: #ccc; margin:20px 0;}
/*ol, ul {list-style: none;}*/
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {border-collapse: collapse; border-spacing: 0;}
.hidden {height: 0;position: absolute;width: 0; display: none !important;}
.ctr {text-align: center;}
:focus {outline-color: transparent; outline-style: none;}

/* FONTS */
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('/assets/fonts/poppins.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('/assets/fonts/poppins.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Bernier Distressed'; font-style: normal; font-weight: 400; src: local('Bernier Distressed'), url('/assets/fonts/bernier.woff2') format('woff2');}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('/assets/fonts/montserrat.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('/assets/fonts/montserrat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


html {
    font-size: 65.5%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
/*globales*/

.opacity{
    opacity: 50%;
}
/*end global*/
body {
    padding: 0;
    margin: 0;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

.logo {
    width: 120px;
    height: 50px;
    margin-bottom: 15px;
}
header {
    width: 70%;
    margin: 0 auto;
    padding: 2rem;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 8vh;
}

.selected{
    text-decoration: none;

    background-color: #f99a06;
    padding: 3px 6px 3px 6px;
    border-radius: 4rem; transition: 0.9s;

}



.ham {
    display: none;
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.ham span {
    display: block;
    background-color: #000;
    height: 3px;
    width: 28px;
    margin: 10px auto;
    border-radius: 2px;
}

.enlace-menu {
    display: flex;
    padding: 0;
}

.enlace-menu li {
    padding: 0 40px;
    list-style-type: none;
    cursor: pointer;


}

.word{
    color: #FFFFFF !important;
}

.enlace-menu li a {
    text-decoration: none;
    font-size: 1.8rem;
    color: #000;
    font-weight: 500;
    transition: 0.3s;
}


.main-us p{
    color: #999999;
}


.enlace-menu li:first-child {
    margin-left: 2rem;


}
@media (max-width: 900px) {

    .logo{
        width: 200px;
    }
    header {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        font-family: 'Montserrat', sans-serif;
    }
    .logo {
        padding-left: 50px;
    }

    .ham {
        display: block;
        position: absolute;
        top: 15px;
        right: 25px;
        transition: 0.2s 0.1s;
    }
    .ham:hover {
        transform: rotate(360deg);
    }

    nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 0  0 0;
    }

    .enlace-menu {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height:115vh;
        margin: 0;
        padding: 0;
        width: 100%;
        display: none;
        opacity: 0;
    }

    .enlace-menu li {
        width: 100%;
        text-align: center;
        padding: 20px;
        color: #fff;
        border-bottom: 1px solid #f6b967;
    }

    .enlace-menu li:hover {
        /*background: #f99a06;*/
        color: #ffffff;
    }
    .enlace-menu a:hover {
        text-shadow: #f99a06 1px 0px 0px;
    }


    @keyframes showMenu {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .enlace-menu.active{
        display: flex;
        animation: showMenu 350ms ease-in-out both;
    }
}

.br-1.animated {
    transform: rotate(-45deg) translate(-10px, 8px);
}

.br-2.animated {
    opacity: 0;
}

.br-3.animated {
    transform: rotate(45deg) translate(-10px, -8px);
}


.hero{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 2;
    margin: 0;
    margin-bottom: -10px;
}

.hero>.bg-first{
    width: 100%;
    height: auto;
}


.hero-en{

    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 2;
    margin: 0;
    margin-bottom: -10px;
}

.hero-en>.bg-first{
    width: 100%;
    height: auto;
}

/*media query icon*/

.main-us .hand{
    position: relative;
    left: 74px;
    top: -13px;
    width:12rem;

}

.main-us img{
    width: 100%;
    position: relative;
}
@media(min-width:1300px){

    .timestamp .date {
        margin-left: 9rem;

    }
}

.inf{
    font-weight: bold;
}


@media(min-width: 2000px){
    aside  p{
        font-size: 30px;
    }
}

.background-us{
    background-image: url("/assets/graphics/background-fondo.png");
    background-repeat: no-repeat;
    background-size: 100%;

}

.us h1{
    text-align: center;
    font-size:6rem;
    text-transform: uppercase;
    color:  #f99a06 ;
    padding-top: 5rem;
    padding-bottom: 2rem;
    margin: 0;
    font-family: 'Bernier Distressed';
}

.main-us{
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 2rem;

}



.main-us{
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 2rem;

}

.main{
    grid-column: 1/2;
}

.main{
    width: 100%;
    background-image: url(/assets/graphics/circulo-icono-new.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-size:contain;



}
.phase-content{
    width: 90%;
    margin: 2rem;
    box-shadow: 1px 4px 10px #999999;

}
.img-victor img{
    width: 100%;
    border-radius: 28%;
    vertical-align: top;
}

.img-victor{
    width: 100%;
    margin: 0 auto;

}
.philosophy{
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(2,1fr);

    margin: 0 auto;


    width:100%;
    align-items: center;

}
.phrase{
    padding: 2rem;
    text-align: justify;
}

@media(min-width: 768px){
    .enlace-menu li:first-child {

        width: 165px;

    }

    .phase-content{
        width: 97%;
    }
    .philosophy{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-content: space-between;
        margin: 0 auto;
        column-gap: 2rem;

        width: 100%;
        align-items: center;
    }

    .img-victor{
        width: 70%;
        margin-bottom: 0rem;

    }

}


.img-victor{
    grid-column: 1/2;
}


aside{
    max-width: 90%;
    grid-column: 2/4;
    font-size: 17px;

}
article {
    padding-top: 5rem;
    padding-bottom: 5rem;
}


@media(max-width:768px){
    .main-us{

        justify-content: center;
        align-items: center;
    }
    .main{
        grid-column: 2/4;
    }
    aside{
        max-width: 100%;
        grid-column: 1/4;

        padding: 2rem;


    }
    .footer-menu a {
        flex-direction: column;
        width: 100%;
        display: block;
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 16px;
    }

}

/*contenido nosotros*/

aside h3{
    font-size: 30px;
    font-family: "Bernier Distressed";
    margin: 20px 0;
}

aside li{

}



article h1{
    text-align: center;
    font-size:6rem ;
    text-transform: uppercase;
    color:  #f99a06 ;
    padding-top: 2rem;
    padding-bottom: 5rem;
    font-family: 'Bernier Distressed';
}

.commandment{
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(2,1fr);
    gap:1rem;
    /*width: 100%;*/
    background-color: #f99a06;
    padding: 150px 100px 150px 100px;
    color: #ffffff;
    border-radius: 5%;
    justify-content: center;



}


.container-text{
    padding: 15px;

    color: white;
    display: flex;
    font-size: 2rem;
    /*font-weight: bold;*/
    text-align: left;
    align-items: center;

}

.container-text > .text-left{
    padding-right: 15px;
    font-weight: bold;

    font-size: 4rem;


}



@media(max-width:768px){

    .commandment{
        display: flex;

        margin: 0 auto;

        gap:0;
        /*width: 100%;*/

        padding: 20px 10px ;
        color: #f99a06!important;
        /*border-radius: 10%;*/
        justify-content: center;
        background: #ffffff;
        /*opacity: 70%;*/
    }

    .commandment1{
        /*max-width: 100%;*/
        text-align: center;
    }

    .container-text{
        padding: 15px;

        color: #f99a06 !important;
        display: flex;
        font-size:11px;
        font-weight: bold;
        text-align: left;

    }

    .container-text > .text-left{
        padding-right: 15px;
        font-weight: bold;
        font-size: 10px;
        text-align: center;

    }

}

@media (min-width: 1600px) {
    .menu {

        width: 250px;
        height: 150px;

    }
    .commandment{
        display: flex;

        margin: 0 auto;

        gap:2rem;
        /*width: 50%;*/


        padding: 400px 50px ;
        color: #ffffff;
        /*border-radius: 50%;*/
        text-align: center;
        justify-content: center;


    }

    .commandment1{
        max-width: 50%;
        text-align: center;
    }

    .container-text{
        padding: 15px;

        color: white;
        display: flex;
        font-size:25px;
        font-weight: bold;
        text-align: left;

    }

    .container-text > .text-left{
        padding-right: 15px;
        font-weight: bold;
        font-size: 55px;
        text-align: center;

    }
}

@media(max-width:580px){


    .commandment1{
        max-width: 100%;

    }

    .commandment{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 1rem;
        justify-content: center;



    }
    .container-text{
        padding: 15px;

        color: white;
        display: flex;
        font-size:16px;
        font-weight: bold;
        text-align: left;


    }

    .container-text > .text-left{
        padding-right: 15px;
        font-weight: bold;
        font-size: 30px;


    }
}

.site-footer {
    height: 200px;
    min-height: 250px;
    width: 100%;
    background-color: #f99a06;
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    align-items: end;
    padding-bottom: 152px;

    margin-top: 5rem;


}
@media (width: 768px) {
    .site-footer {

        padding-bottom: 50px;

    }
}
.grid-footer {
    height: 78px;
}
@media(min-width:768px){

    .site-footer {
        height: 400px;
        min-height: 200px;
        width: 100%;
        background: transparent;
        background-image: url(/assets/graphics/backgroundfooter.png);
        background-size: 100% 100%;
        background-position: center;
        display: flex;
        justify-content: space-around;

        align-items: end;
        padding-bottom: 50px;

    }

    .commandment{
        width: 81%;
        padding: 10rem;
    }
}

.site-footer .logo-footer{
    width: 100px;
}
.site-footer h3 {
    color: rgb(255, 255, 255);
    font-size: 17px;
}
.grid-footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

.footer-menu a {
    display: block;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 16px;
    line-height: 2rem;
}
.footer-menu  h5{
    color: #FFFFFF !important;

}
.site-footer{
    height: 30rem;
}

.colz-icon{
    display: flex;
}
.colz-icon img{
    color: #fff;
    padding: 0.8rem;
    width:3.5rem;
    padding-left: 0px;
    background: transparent;
    transition: 0.3s;
    padding-top: 1rem;
}



.colz-icon img:hover{
    transform: scale(0.9);

}




/*iconos principa main*/




@media (max-width: 750px) {
    .main{
        display: none;
    }
}




@media(min-width: 1600px){


    .commandments{
        justify-content: center;
    }


    .business-main p{
        font-size: 26px;
    }
}

@media (min-width:2000px) {


    .employee p{

        font-size: 20rem;
    }
    .benefit-main p {
        font-size: 3rem;
    }

    input[type="text"], input[type="email"], input[type="text"], input[type="date"],[type="tel"]{

        padding: 2rem;
        font-size: 2rem;

    }
    .button,select {

        padding: 2rem;
        font-size: 2rem;

    }

    .us h1 {
        text-align: center;
        font-size: 15rem;

    }




    .timestamp .date {
        margin-left: 18rem;
        margin-bottom: 1rem;
    }
}

@media(min-width: 2500px){


    .main-us .main{
        display: none;

    }
    aside{
        margin: 0 auto;
        width: 80%;
        text-align:center;
        font-size: 2rem;
        grid-column: 1/4;
    }

    aside{
        text-align: justify;
    }

    article h1 {

        font-size: 12rem;

    }

    .commandment {
        /*width: 50%;*/
    }



}
@media (min-width:3000px) {

    .employee p{

        font-size: 20rem;
        padding-top: 20rem;
    }
    .employee span{
        font-size: 8rem;
    }

    .icon-benefits h1{
        font-size: 20rem;
    }

    .job-form p span{

        font-size: 20rem;
    }

    .job-form p {

        font-size: 10rem;
    }

    .job-form img{

        width: 50rem;
    }

    .commandment{
        /*width: 60%;*/
    }


}

@media (min-width:4000px) {

    .employee p{

        font-size: 35rem;
        padding-top: 20rem;
    }

    .commandment{
        /*width: 50%;*/
    }




    business {
        height: 105rem;
    }
}


@media(max-width: 768px){
    .main-us .main{
        display: none;

    }

    .commandment{



        padding: 20px 10px ;
        color: #ffffff;
        border-radius: 0% 0% 1% 1%;
        justify-content: center;

    }

    .container-text{

        font-size:22px;


    }

    .container-text > .text-left{

        font-size: 50px;


    }


    .site-footer {

        background-color: #f99a06;



    }


}

/*crear tab*/




.benefits {
    overflow: hidden;
    /*border-bottom: 2px solid #f99a06;*/
    /*background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.benefit::after {
    display:block;
    content: '';
    padding-bottom: 9px;
    border-bottom: 2px solid #fff;
    transform: scaleX(0);/*significa que en el eje x no se mostrara nada*/
    transition: transform 250ms ease-in-out;


}


.benefit:hover::after {
    transform: scaleX(1)
}


.benefit.active {
    border-bottom:2px solid #ffffff;
}


.tabcontent {
    display: none;


    border-top: none;
}

.tabcontent h3{
    text-align: center;
    padding: 3rem;
    font-size: 6rem;
    font-family: "Bernier Distressed";
}


.benefit img{
    overflow:hidden;
}

.benefit:hover img{
    -webkit-transform:scale(1.3);transform:scale(1.3);
}

/*transition*/

.contact h1{
    font-size: 6rem;
    color: #f99a00;
    text-align: center;
    font-family: "Bernier Distressed";
    margin-top:  50px;
}

.contact{
    width: 100%;
    margin: 0 auto;
}

.form{
    margin-bottom:  20px;

}
@media(min-width: 768px){
    .contact{
        width: 50%;

    }

    fieldset{

        padding: 10rem;


    }

}

legend{
    text-align: center;
    border: 1px solid #f99a06;
    width: 100%;
    background: #f99a06;
    color: #FFFFFF !important;

}

fieldset{
    border: 1px solid #f99a06;
    padding: 2rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 90%;
    margin: 0 auto;


}

/*Junta directiva*/

.content-directors{
    width: 100%;
    margin: 0 auto;
}

directors ul li {
    margin: 0;
}
ul.list > li {
    background: #fff;
    padding: 20px;
    margin-bottom: -15px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

ul.list > li div.txt {
    width: 100%;
    padding: 40px;
}
@media(min-width: 768px){
    ul.list > li div.txt {
        width: 70%;
        padding-left: 40px;
    }

    .content-directors{
        width: 80%;
        margin: 0 auto;
    }
    ul.list > li div {
        display: flex;
        flex-flow: column wrap;

    }
    .content-directors h2{

        text-align: left !important;
    }
}

ul.list > li div {
    display: flex;
    flex-flow: column wrap;
    margin-bottom: 2rem;
}
.circle {
    border-radius: 50%;
    border: 4px solid #f99a00;
}
#messages{

    color: #4F8A10;
    padding: 1rem;
    font-size: 23px;

}
/*class global*/

.error{

    color:#D8000C;
    border: 1px solid red !important;
    padding: 1rem !important;
    width: 100% !important;
    font-size: 16px;


    margin-bottom: 0.5rem;

}

.contact-error{
    padding: 5rem;
    width: 100%;
    margin-bottom: 50px;
    line-height: 50px;
}

.error-input{
    border:1px solid red!important;
}
.error-list {
    text-align: center;
}
.notice {
    color: green;
    border: 1px solid green;
    padding: 1rem;
    background: #c8ffc8;
    text-align: center;
}



.content-directors h1{
    font-family: "Bernier Distressed";
    text-align: center;
    margin: 5rem;
    font-size: 6rem;
    color: #f99a06;
}

.content-directors h2{
    font-family: "Bernier Distressed";
    color: #f99a06;

    font-size: 3rem;
    text-align: center;
}
a{
    color: #f99a06 !important;

}
a:link{
    color: #f99a06;
}


.menu {
    transform: rotateX(50deg);
    visibility: hidden;
    display: block;
    position: absolute;
    margin: auto;
    margin-left: -3%;

    width: 350px;
    height: 71px;
    border: 0.1px solid #f99a06 ;

    background-color:#FFF;
    border-radius:5%;
    opacity: 84%;
    margin-top: 25px;

}


@media(min-width:768px) {

    .triangle-menu {
        visibility: hidden;
        border: 1px solid #f99a06;
        border-top: none;
        width: 0;
        height: 0;
        margin: auto;
        margin-left: 44%;
        margin-top: -10% !important;

    }

    .toggle-menu {
        display: block;

    }

    .toggle-menu > i {
        font-size: 40px;
        color: #fff;
        margin: auto;
        padding: 0 20%;
    }

    .menu {
        transform: rotateX(50deg);
        visibility: hidden;
        display: block;
        position: absolute;
        margin: auto;
        margin-left: -3%;

        width: 150px;
        height: 71px;
        border-bottom: 0.1px solid #f99a06;
        border-left: 0.1px solid #f99a06;
        border-right: 0.1px solid #f99a06;
        box-shadow: 1px 1px 0px #c5c5c5;
        background-color: #FFF;
        border-radius: 10%;
        opacity: 84%;

    }

}
@media(min-width: 2000px){
    .menu {

        width: 250px;
        height: 150px;
        margin-left: -2%;

    }
}
.list-menu {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    list-style: none;
    padding: 20px 0;
    width: 100%;
    text-align: center;

}
.list-menu li {
    width: 100% !important;
    display: inline-block;
    font-size: 14px;
    padding: 20px;
    margin-left: -70px !important;
    margin-top: -20px;


}

.list-menu li a{
    color: #f99a06 !important;
}
.triangle-menu {
    visibility: hidden;
    border: 1px solid #f99a06;
    border-top: none;
    width: 0;
    height: 0;
    margin: auto;
    margin-left: 44%;
    margin-top: -5%;

}
.toggle-menu:hover .menu {
    visibility: visible;
    transform: rotateX(0deg);
    transition: all .3s ease;
}
.toggle-menu:hover .triangle-menu {
    visibility: visible;
}

.arrow{
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    top: 52px;
    width: 10px;
}


.dropdown {
    position: relative;
    display: inline-block;
    z-index: 3;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 123px;
    box-shadow: 0px 2px 5px 0px rgb(250, 155, 11);
    padding: 12px 16px;
    z-index: 1;
    border-radius: 0 0 5% 5%;
    left: -27px;

}

.dropdown-content-es {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 123px;
    box-shadow: 0px 2px 5px 0px rgb(250, 155, 11);
    padding: 12px 16px;
    z-index: 1;
    border-radius: 0 0 5% 5%;
    left: -21px;

}
.dropdown-content-es a {
    display: block;
    text-align: center;
    color: #be7504;
    border-radius: 0 0 50% 50%;
    cursor: pointer;
}
.dropdown-content-es a:hover {
    display: block;
    text-align: center;
    color: #be7504 !important;


}
.dropdown:hover .dropdown-content-es{
    display: block;
}


.dropdown-content a {
    display: block;
    text-align: center;
    color: #be7504;
    border-radius: 0 0 50% 50%;
    cursor: pointer;
}

.dropdown-content a:hover {
    display: block;
    text-align: center;
    color: #be7504 !important;


}

.dropdown:hover .dropdown-content {
    display: block;
}

.language{
    color: #000000 !important;

    border-left: 1px solid #000000;
    padding-left: 2rem;
}

.language:hover{
    color: #f99a06!important;
}
.txt p{
    margin: 5px;
}