@charset "UTF-8";
@import url('../fonts/neuron_angled/stylesheet.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

:root{
    --primary-color:#f4ac04;
    --secondary-color:#339ca2;
    --alt-color:#a20c14;
    --dark-color:#274241;
    --dark-color-alt:#364227;
    --light-color:#efefef;
    --light-color-alt:#f3f3df;
    --degrade:linear-gradient(-45deg, rgba(39,66,65,1) 0%, rgba(54,66,39,1) 100%);
    --degrade-alpha:linear-gradient(-45deg, rgba(39,66,65,0.8) 0%, rgba(54,66,39,0.8) 100%);
    --primary-font:"Neuron Angled SC",sans-serif;
    --secondary-font:"Roboto Slab",sans-serif;
    --zeta-font:var(--secondary-font);
    --zeta-theme-color-text:#b4b4b4;
}

::selection{
    background-color:var(--alt-color);
    color:#fff;
}

*{
    outline:0;
}

nav{
    top:-100%;
    transition:top 0.5s ease-in-out;
    background-color:var(--light-color-alt);
    box-shadow:none;
    border-bottom:3px solid var(--dark-color-alt);
}

nav.active{
    top:0;
}

nav > .nav-wrapper > .badge{
    font-family:var(--primary-font);
    text-decoration:none;

    & img{
        width:100%;
        max-width:300px;
    }
}

nav > .nav-wrapper > .badge > h2{
    margin-bottom:0;
    margin-left:var(--zeta-density-1);
    font-weight:600;
    line-height:1;
    color:var(--dark-color);
    letter-spacing:1px;
}

nav > .nav-wrapper > .modules > ul > li > a{
    padding:0 1rem;
    font-size:1.25rem;
    font-weight:700;
    font-family:var(--primary-font);
    color:var(--dark-color);
    letter-spacing:1px;
    position:relative;
}

nav > .nav-wrapper > .modules > ul > li > a::after{
    content:"";
    display:none;
    width:12px;
    height:12px;
    border-radius:3px;
    background-color:var(--secondary-color);
    transform:rotateZ(45deg);
    position:absolute;
    left:-5px;
    top:calc(50% - 6px);
}

nav > .nav-wrapper > .modules > ul > li.current > a::after{
    display:block;
}

nav > .nav-wrapper > .modules > ul > li > a:hover,
nav > .nav-wrapper > .modules > ul > li > a:focus,
nav > .nav-wrapper > .modules > ul > li > a:active{
    background-color:var(--dark-color);
    color:#fff;
}

nav>.nav-wrapper>.bridge>a.launch-navi span,
nav>.nav-wrapper>.bridge>a.launch-navi::after,
nav>.nav-wrapper>.bridge>a.launch-navi::before{
    background-color:var(--dark-color-alt);
}

h1,h2,h3,h4,h5{
    font-family:var(--primary-font);
}

figure{
    margin:0;
    padding:0;
}

p > a{
    color:var(--secondary-color);
    text-decoration:none;
}


map{
    min-height:500px;
    display:block;
    background-color:var(--light-color);
}

form fieldset label{
    color:var(--dark-color);
}

form fieldset label span{
    margin-left:0.25rem;
    width:8px;
    height:8px;
    display:inline-block;
    background-color:var(--primary-color);
    border-radius:2px;
    transform: rotateZ(45deg);
}

form input,
form select,
form textarea{
    height:60px;
    background-color:#fff;
    font-weight:500;
    border-color:var(--light-color);
    border-width:2px;
}

form textarea{
    padding:1rem;
}

form input.error,
form select.error,
form textarea.error{
    border-color:var(--alt-color);
}

.row,
.nav-wrapper{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    max-width:1400px;
}

.text-align{
    &.center{
        text-align:center;
    }
}

.fab{
    font:var(--fa-font-brands);
}

.radio{
    display:flex;
    align-items:center;
    justify-content:center;
    height:60px;
    border:2px solid var(--light-color);
    border-radius:8px;
    background-color:inherit;
    cursor:pointer;
    transition:border-color 0.3s ease-in-out;
}

.radio:hover{
    border-color:var(--secondary-color);
}

.radio label{
    margin:0;
    color:var(--dark-color-alt);
}

.radio.active{
    background-color:var(--alt-color);
    border-color:var(--alt-color);
}

.radio.active label{
    color:#fff;
}

.radio input[type="radio"]{
    display:none;
}

.radio:first-child{
    margin-left:0;
}

.radio:last-child{
    margin-right:0;
}

.right-align{
    text-align:right;
}

.bg-degrade{
    background:var(--dark-color);
    background:var(--degrade);
}

.bg-degrade-alpha{
    background:var(--degrade-alpha);
}

.bg-light-alt{
    background-color:var(--light-color-alt);
}

.bg-light-alt p{
    color:var(--dark-color-alt);
}

.button{
    padding:0 1rem;
    width:auto;
    height:70px;
    display:inline-flex;
    border-radius:5px;
    border:2px solid transparent;
    background-color:transparent;
    align-items:center;
    justify-content:center;
    flex-flow:row nowrap;
    font-size:1.25rem;
    font-family:var(--primary-font);
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.3s ease-in-out;
}

.button > span{
    margin-left:0.5rem;
    font-size:1.5rem;
}

.button.primary{
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    color:var(--dark-color);
}

.button.primary:hover,
.button.primary:focus,
.button.primary:active{
    background-color:var(--primary-color);
    color:#fff;
}


.button.primary.outline{
    background-color:transparent;
}

.button.primary.outline:hover,
.button.primary.outline:focus,
.button.primary.outline:active{
    background-color:var(--primary-color);
}

.button.dark-alt{
    background-color:var(--dark-color-alt);
    border-color:var(--dark-color-alt);
    color:#fff;
}

.button.dark{
    background-color:var(--dark-color);
    border-color:var(--dark-color);
    color:#fff;
}

.button.alt{
    background-color:var(--alt-color);
    border-color:var(--alt-color);
    color:#fff;
}

.button.alt:hover,
.button.alt:focus,
.button.alt:active{
    background-color:transparent;
    color:var(--alt-color);
}

.button.text-white{
    color:#fff;
}

.social a{
    margin:0.5rem;
    display:inline-flex;
    width:35px;
    height:35px;
    border:2px solid var(--primary-color);
    border-radius:5px;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    text-decoration:none;
    color:#fff;
    transform:rotateZ(45deg);
    transition:background-color 0.3s ease-in-out;
}

.social a:hover,
.social a:focus,
.social a:active{
    background-color:var(--primary-color);
}

.social a > span{
    transform:rotateZ(-45deg);
}

.title-center{
    text-align:center;
}

.title-center h2{
    width:auto;
    display:inline-block;
}

#sidenav{
    width:300px;
    height:100vh;
    border-left:3px solid var(--dark-color-alt);
    position:fixed;
    top:0;
    right:-100%;
    z-index:var(--zeta-index-2);
    transition:right 0.5s ease-in-out;
}

#sidenav.active{
    right:0;
}

#sidenav > .sidenav-trigger{
    height:50px;
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    border-radius:0;
    border-bottom-left-radius:5px;
}

#sidenav > .sidenav-trigger > span{
    margin-left:0;
    font-size:1.5rem;
}

#sidenav > figure{
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

#sidenav > figure > img{
    opacity:0.08;
}

#sidenav .solar{
    padding:2rem;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    overflow-y:auto;
}

#sidenav .solar .brand{
    text-align:center;
}

#sidenav .solar .brand h2{
    margin-bottom:0;
    color:var(--dark-color);
    letter-spacing:1px;
}

#sidenav .solar ul{
    margin:2rem 0;
    padding:0;
    list-style-type:none;
}

#sidenav .solar ul li a{
    height:110px;
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items:center;
    border:2px solid var(--dark-color);
    border-radius:5px;
    text-decoration:none;
    font-size:1rem;
    font-weight:500;
    color:var(--dark-color);
    transition:all 0.3s ease-in-out;
}

#sidenav .solar ul li a > figure > img{
    transition:filter 0.3s ease-in-out;
}

#sidenav .solar ul li a:hover,
#sidenav .solar ul li a:focus,
#sidenav .solar ul li a:active{
    background-color:var(--dark-color);
    color:#fff;
}

#sidenav .solar ul li.current a{
    border-color:var(--alt-color);
    background-color:var(--alt-color);
    color:#fff;
}

#sidenav .solar ul li a:hover > figure > img,
#sidenav .solar ul li a:focus > figure > img,
#sidenav .solar ul li a:active > figure > img,
#sidenav .solar ul li.current a > figure > img{
    filter:invert();
}

#sidenav .solar .social a{
    width:45px;
    height:45px;
    background-color:var(--primary-color);
    font-size:1.2rem;
    color:#fff;
}

#sidenav p{
    margin-top:2rem;
    font-weight:500;
}

#topBar{
    background-color:var(--dark-color);
}

#topBar #infoBar p{
    margin-bottom:0;
    color:#fff;
}

#topBar #infoBar p span{
    margin-right:0.25rem;
    font-size:1.1rem;
    color:var(--primary-color);
}

#topBar #menuBar{
    background-color:var(--dark-color-alt);
}

#topBar #menuBar .logo{
    height:var(--navigation-h-3);
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
}

#topBar #menuBar .logo figure{
    width:auto;

    & img{
        width:100%;
        max-width:300px;
    }
}

#topBar #menuBar .logo h2{
    margin-bottom:0;
    margin-left:var(--zeta-density-1);
    line-height:1;
    font-weight:500;
    color:#fff;
}

#topBar #menuBar ul{
    height:var(--navigation-h-3);
    margin:0;
    padding:0;
    list-style-type:none;
    display:inline-block;
}

#topBar #menuBar ul li{
    display:block;
    height:inherit;
    display:inline-block;
}

#topBar #menuBar ul li a{
    padding:0 1rem;
    width:auto;
    height:inherit;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--primary-font);
    font-size:1.25rem;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    letter-spacing:1px;
}

#topBar #menuBar ul li a::after{
    content:"";
    display:none;
    width:12px;
    height:12px;
    border-radius:3px;
    background-color:var(--primary-color);
    transform:rotateZ(45deg);
    position:absolute;
    left:-8px;
    top:calc(50% - 6px);
}

#topBar #menuBar ul li.current a::after{
    display:block;
}

#topBar #menuBar .button{
    margin-right:var(--zeta-density-1);
    width:50px;
    height:50px;
    border:2px solid var(--primary-color);
    transform:rotateZ(45deg);
    color:#fff;
    display:none;
    transition:background-color 0.3s ease-in-out;
}

#topBar #menuBar .button:hover,
#topBar #menuBar .button:focus,
#topBar #menuBar .button:active{
    background-color:var(--primary-color);
}

#topBar #menuBar .button span{
    margin-left:0;
    transform:rotateZ(-45deg);
    font-size:1.5rem;
}

section ul{
    margin:0;
    padding:0 0 0 1rem;
    list-style-type:none;
}

section ul li{
    margin:0.25rem 0;
    padding-left:0.5rem;
    display:block;
    position:relative;
}

section ul li::after{
    content:'';
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:3px;
    background-color:var(--primary-color);
    transform:rotateZ(45deg);
    position:absolute;
    left:-1rem;
    top:5px;
}

section h6,
.window h6{
    margin:0.5rem 0 0.25rem 0;
    color:var(--secondary-color);
}

section h2,
.window h2{
    padding-left:20px;
    font-weight:700;
    color:var(--dark-color-alt);
    position:relative;
    letter-spacing:1px;
}

section h2::after,
.window h2::after{
    content:"";
    display:block;
    width:12px;
    height:12px;
    border-radius:3px;
    background-color:var(--primary-color);
    transform:rotateZ(45deg);
    position:absolute;
    left:0;
    top:calc(50% - 6px);
}

section.bg-degrade h6{
    color:var(--secondary-color);
}

section.bg-degrade h2{
    color:#fff;
}

section.bg-degrade ul li{
    color:var(--zeta-theme-color-text);
}

section p b{
    font-weight:400;
    font-size:1.2rem;
}

.banner.bg-degrade figure img{
    filter:invert();
}

.background{
    width:100%;
    height:100%;
    overflow:hidden;
}

.background > img{
    object-fit:cover;
    object-position:center;
    width:100%;
    height:100%;
    transition:all 0.3s ease-in-out;
}

.box-data{
    padding:30px 10px 30px 110px;
    border:2px solid var(--light-color);
    border-radius:5px;
    position:relative;
    background-color:#fff;
    transition:box-shadow 0.3s ease-in-out;
}

.box-data:hover,
.box-data:focus,
.box-data:active{
    box-shadow:10px 17.321px 50px 0px rgba(0, 0, 0, 0.1);
}

.box-data figure{
    width:110px;
    height:110px;
    border-radius:5px;
    border:2px solid var(--light-color);
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:-10px;
    left:-10px;
    background-image:url(../img/dot-pattern.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-color:inherit;
}

.box-data h5{
    color:var(--dark-color);
}

.box-data p{
    word-wrap: break-word;
}

.box-article .box-article-bg{
    position:relative;
    height:250px;
    transition:all 0.3s ease-in-out;
}

.box-article .box-article-bg a{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(39,66,65,0.8);
    font-size:3rem;
    color:#fff;
    text-decoration:none;
    z-index:1;
    transition:all 0.3s ease-in-out;
}

.box-article .box-article-bg a span{
    transform:scale(1.5);
    transition:all 0.3s ease-in-out;
}

.box-article .box-article-bg figure .corner{
    width:40px;
    height:40px;
    position:absolute;
    z-index:2;
}

.box-article .box-article-bg figure .corner:first-child{
    top:0;
    left:0;
    border-top:3px solid var(--primary-color);
    border-left:3px solid var(--primary-color);
}

.box-article .box-article-bg figure .corner:nth-child(2){
    top:0;
    right:0;
    border-top:3px solid var(--primary-color);
    border-right:3px solid var(--primary-color);
}

.box-article .box-article-bg figure .corner:nth-child(3){
    bottom:0;
    left:0;
    border-bottom:3px solid var(--primary-color);
    border-left:3px solid var(--primary-color);
}

.box-article .box-article-bg figure .corner:nth-child(4){
    bottom:0;
    right:0;
    border-bottom:3px solid var(--primary-color);
    border-right:3px solid var(--primary-color);
}

.box-article .box-article-body{
    padding-top:1rem;
}

.box-article .box-article-body h6 span{
    margin-right:0.5rem;
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:3px;
    background-color: var(--primary-color);
    transform:rotateZ(45deg);
}

.box-article .box-article-body a{
    margin-bottom:1rem;
    display:block;
    font-size:1.25rem;
    font-weight:500;
    color:var(--dark-color-alt);
    text-decoration:none;
    transition:color 0.3s ease-in;
}

.box-article .box-article-body a:hover,
.box-article .box-article-body a:focus,
.box-article .box-article-body a:active{
    color:var(--dark-color);
}

.box-article .box-article-foot p{
    margin-bottom:0;
    font-weight:500;
    text-transform:uppercase;
}

.box-article .box-article-foot p span{
    margin-right:0.2rem;
    display:inline-block;
    width:35%;
    height:3px;
    background-color:var(--primary-color);
}

.box-article .box-article-foot .button{
    width:100%;
    height:50px;
}

.box-article:hover .box-article-bg{
    box-shadow:5px 8.66px 40px 0px rgba(20, 20, 20, 0.75);
}

.box-article:hover .box-article-bg > figure > img,
.box-article:focus .box-article-bg > figure > img,
.box-article:active .box-article-bg > figure > img{
    transform:scale(1.2);
}

.box-article:hover .box-article-bg a,
.box-article:focus .box-article-bg a,
.box-article:active .box-article-bg a{
    opacity:1;
    visibility:visible;
}

.box-article:hover .box-article-bg a span,
.box-article:focus .box-article-bg a span,
.box-article:active .box-article-bg a span{
    transform:scale(1);
}

.window{
    background-image:url(../img/bg-mayan-mask.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}

.window .solar{
    padding:2rem;
}

.window .title-center{
    margin-bottom:1rem;
}

.window p{
    text-align:justify;
}

footer{
    background-color:var(--dark-color);
    border-top:3px solid var(--secondary-color);
}

footer .logo{
    display:flex;
    flex-flow: row nowrap;
    align-items:center;
}

footer .logo figure{
    width:auto;

    & img{
        width:100%;
        max-width:300px;
    }
}

footer .logo h2{
    margin-bottom:0;
    margin-left:var(--zeta-density-1);
    font-weight:500;
    color:#fff;
}

footer ul{
    margin:0;
    padding:0;
    list-style-type:none;
    display:flex;
    flex:0 1 auto;
    flex-flow:row nowrap;
}

footer ul li{
    width:16.666666666666668%;
    display:block;
    text-align:center;
}

footer ul li a{
    padding:var(--zeta-density-1);
    font-family:var(--primary-font);
    font-size:1.25rem;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    color:#fff;
    display:inline-block;
    position:relative;
    letter-spacing:1px;
}

footer ul li a:active{
    color:var(--primary-color);
}

footer ul li a::after{
    content:"";
    display:none;
    width:12px;
    height:12px;
    border-radius:3px;
    background-color:var(--primary-color);
    transform:rotateZ(45deg);
    position:absolute;
    left:-15px;
    top:calc(50% - 6px);
}

footer ul li.current a::after{
    display:block;
}

footer hr{
    margin:0;
    background-color:rgba(255,255,255,0.3);
}

footer p{
    margin-bottom:0;
    color:#fff;
}

#carouselIso{
    & .item{
        text-align:center;

        & img{
            display:inline-block;
            width:130px;
        }
    }
}

@media(max-width:1199px){
    #topBar #menuBar ul{
        display:none;
    }

    #topBar #menuBar .button{
        display:inline-flex;
    }
}

@media(max-width:991px){
    #topBar #infoBar,
    #topBar #infoBar .right-align{
        text-align:center;
    }

    .banner .right-align{
        text-align:left;
    }
    
    .banner .button{
        margin-top:var(--zeta-density-1);
    }

    footer .logo{
        margin-bottom:var(--zeta-density-2);
        justify-content:center;
    }

    footer p,
    footer .social{
        text-align:center;
    }

    footer p{
        margin-bottom:var(--zeta-density-2);
    }
}

@media(max-width:767px){
    footer ul{
        flex-direction:column;
    }
    footer ul li{
        width:auto;
    }
}