@charset "UTF-8";

:root{
    --primary-color:#00aeef;
    --secondary-color:#a6ce39;
    --dark-color:#0d1821;
    --light-color:#efe9e7;
    --alt-color:#474331;
    --high-color:#f2c14e;
    --contrast-color:#f2545b;
    --darkness-color:#0b141b;
    --primary-font:'CocoSharp',sans-serif;
    --zeta-font:'Rubik',sans-serif;
}

::selection{
    background-color:var(--secondary-color);
    color:var(--darkness-color);
}

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

h6{
    margin-bottom:1rem;
    padding:0.5rem 1rem;
    width:auto;
    display:inline-block;
    transform:rotateZ(-5deg);
    color:#fff;

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

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

    &.high{
        background-color:var(--high-color);
    }

    &.contrast{
        background-color:var(--contrast-color);
    }
}

p{
    font-optical-sizing:auto;
    font-weight:400;
    font-style:normal;

    & a{
        display:inline-block;
        color:var(--darkness-color);
        position:relative;
    
        &::before{
            content:"";
            display:block;
            width:100%;
            height:2px;
            background-color:var(--high-color);
            position:absolute;
            left:0;
            bottom:0;
            transition:background-color 0.3s ease-in-out;
        }
    
        &:hover,
        &:focus,
        &:active{
            &::before{
                background-color:var(--primary-color);
            }
        }
    }

    & b{
        font-weight:500;
    }
}

a{
    text-decoration:none;
}

figure{
    margin:0;
}

nav{
    top:-100%;
    transition:top 0.5s ease-in-out;

    &.active{
        top:0;
    }

    & > .nav-wrapper{
        & > .badge{
            & > img{
                height:85%;
            }
        }

        & > .modules{
            & > ul{
                & > li{
                    &.current{
                        & > a{
                            color:var(--dark-color);
                        }
                    }

                    & > a{
                        font-size:1rem;

                        &:hover,
                        &:focus,
                        &:active{
                            background-color:transparent;
                            color:var(--dark-color);
                        }
                        
                        & > span{
                            margin-right:0.25rem;
                            font-size:1.2rem;
                            line-height:0;
                        }
                    }
                }
            }
        }
    }
}

form{
    & input,select,textarea{
        padding:0 1rem;
        height:70px;
        background-color:var(--light-color);
        border-width:2px;
        border-color:var(--light-color);
        font-weight:500;
        color:var(--darkness-color);
        transition:border-color 0.3s ease-in-out;

        &::placeholder{
            font-weight:400;
            color:#666;
        }

        &:focus{
            border-color:var(--alt-color);
        }

        &.error{
            border-color:var(--contrast-color);
        }
    }

    & textarea{
        padding:1rem;
        height:150px;
        resize:none;
    }

    & fieldset{
        & label{
            font-weight:500;
            color:var(--darkness-color);
    
            & span{
                color:var(--contrast-color);
            }
        }
    }

}

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

.bg-color{
    &.primary{
        background-color:var(--primary-color);
    }

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

    &.dark{
        background-color:var(--dark-color);

        & a{
            color:#fff;
        }
    }

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

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

    &.high{
        background-color:var(--high-color);
    }

    &.contrast{
        background-color:var(--contrast-color);
    }

    &.darkness{
        background-color:var(--darkness-color);

        & a{
            color:#fff;
        }
    }
}

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

    &.secondary{
        color:var(--secondary-color);
    }

    &.alt{
        color:var(--alt-color);
    }

    &.high{
        color:var(--high-color);
    }

    &.contrast{
        color:var(--contrast-color);
    }

    &.darkness{
        color:var(--darkness-color);
    }
}

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

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

.button{
    padding:0 2rem;
    width:auto;
    height:70px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    font-family:var(--primary-font);
    font-weight:700;
    font-size:1rem;
    text-transform:uppercase;
    text-decoration:none;
    position:relative;
    z-index:1;
    overflow:hidden;

    &::after{
        content:"";
        width:100%;
        height:100%;
        display:block;
        border-radius:50%;
        position:absolute;
        left:-100%;
        top:0;
        transition:all 0.3s ease-in-out;
        z-index:-1;
    }

    &::before{
        content:"";
        width:100%;
        height:3px;
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        z-index:2;
        transition:background-color 0.3s ease-in-out;
    }

    &:hover,
    &:focus,
    &:active{
        &::after{
            border-radius:0;
            left:0;
        }
    }

    &.w-100{
        width:100%;
    }

    &.primary{
        background-color:var(--primary-color);
        color:#fff;

        &::after{
            background-color:var(--dark-color);
        }

        &::before{
            background-color:var(--primary-color);
        }

        &.outline{
            border-color:var(--primary-color);

            &:hover,
            &:focus,
            &:active{
                &::after{
                    background-color:rgb(0, 174, 239,0.5);
                }
            }
        }
    }

    &.secondary{
        background-color:var(--secondary-color);
        color:#fff;

        &::after{
            background-color:var(--dark-color);
        }

        &::before{
            background-color:var(--secondary-color);
        }

        &.outline{
            border-color:var(--secondary-color);

            &:hover,
            &:focus,
            &:active{
                &::after{
                    background-color:rgba(166, 206, 57,0.5);
                }
            }
        }
    }

    &.alt{
        background-color:var(--alt-color);
        color:#fff;

        &::after{
            background-color:var(--dark-color);
        }

        &::before{
            background-color:var(--alt-color);
        }

        &.outline{
            border-color:var(--alt-color);

            &:hover,
            &:focus,
            &:active{
                &::after{
                    background-color:rgba(71,67,49,0.5);
                }
            }
        }
    }

    &.high{
        background-color:var(--high-color);
        color:#fff;

        &::after{
            background-color:var(--dark-color);
        }

        &::before{
            background-color:var(--high-color);
        }

        &.outline{
            border-color:var(--high-color);

            &:hover,
            &:focus,
            &:active{
                &::after{
                    background-color:rgba(242, 193, 78,0.5);
                }
            }
        }
    }

    &.contrast{
        background-color:var(--contrast-color);
        color:#fff;

        &::after{
            background-color:var(--dark-color);
        }

        &::before{
            background-color:var(--contrast-color);
        }

        &.outline{
            border-color:var(--contrast-color);

            &:hover,
            &:focus,
            &:active{
                &::after{
                    background-color:rgba(242, 84, 91,0.5);
                }
            }
        }
    }

    &.outline{
        background-color:transparent;
        border-width:2px;
        border-style:solid;
        
        &::after{
            background-color:transparent;
        }
        
        &::before{
            display:none;
        }
    }

    & > span{
        margin-left:0.5rem;
        font-size:1.2rem;
        line-height:0;
    }   
}

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

    & > img{
        object-fit:cover;
        object-position:center;
        width:100%;
        height:100%;
    }
}

.wrapper{
    width:100%;
    height:100%;
    background-color:rgba(98,88,52,0.75);
}

.separator{
    margin:1rem 0;
    width:50px;
    height:3px;
    display:inline-block;
}

.radio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:70px;
    background-color:var(--light-color);
    border-radius:3px;
    cursor:pointer;
    border:2px solid var(--light-color);
    transition:border-color 0.5s ease-in-out;

    &:hover,
    &:focus,
    &:active{
        border-color:var(--contrast-color);
    }

    &:first-child{
        margin-left:0;
    }

    &:last-child{
        margin-right:0;
    }

    &.active{
        background-color:var(--contrast-color);
        border-color:var(--contrast-color);

        & label{
            color:#fff;
        }
    }

    & label{
        margin:0;
        color:var(--darkness-color);
        font-weight:600;
        cursor:pointer;
    }

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

.box{
    padding:1.5rem;
    border:1px solid var(--light-color);
    border-radius:5px;
    text-align:center;

    & figure{
        margin:0 auto 1.5rem auto;
        width:80px;
        height:80px;
        border-radius:50%;
    }

    & h5{
        color:var(--darkness-color);
    }

    & h6{
        margin:0;
    }

    &.donate{
        padding:3rem 1.5rem;

        & h3{
            margin-top:1.5rem;
            margin-bottom:0;
            font-family:var(--zeta-font);
        }

        & ul{
            list-style-type:none;
        }
    }

    &.profile{
        padding:3rem 1.5rem;

        & figure{
            margin:1.5rem auto;
            width:120px;
            height:120px;
        }

        & p{
            margin-bottom:0;
        }
    }

    &.service{
        padding:3rem 1.5rem;

        & h6{
            margin-bottom:1rem;
        }

        & p{
            margin-bottom:0;
        }
    }
}

.owl-carousel{
    &.owl-theme{
        & .owl-dots{
            & button{
                width:auto;

                & > span{
                    width:15px;
                    height:15px;
                    border-radius:0;
                    background-color:var(--light-color);
                    border:3px solid var(--light-color);
                    transition:all 0.3s ease-in-out;
                }

                &:hover{
                    & > span{
                        border-color:var(--contrast-color);
                        background-color:inherit;
                    }
                }

                &.active{
                    & > span{
                        background-color:var(--contrast-color);
                        border-color:var(--contrast-color);
                    }
                }
            }
        }
    }
}

.window{
    & h3{
        margin-bottom:0;
        font-weight:800;
        text-transform:uppercase;
        color:var(--darkness-color);
    }
}

.row:not(.fluid){
    margin-left:auto;
    margin-right:auto;
    max-width:1400px;
}

#owlTestimonials{
    & .item{
        padding:0.5rem;
    }
}

#barTop{
    & p{
        margin-bottom:0;
        margin-right:0.8rem;
        display:inline-flex;
        flex-wrap:nowrap;
        align-items:center;
        font-size:0.8rem;
        color:#fff;

        &:last-child{
            margin-right:0;
        }

        & span{
            margin-right:0.35rem;
            font-size:0.9rem;
            color:var(--high-color);
            line-height:0;
        }
    }

    & .social{
        display:flex;
        align-items:center;
        justify-content:end;

        & a{
            margin:0 1rem;
            font-size:1rem;
            text-decoration:none;
            color:#fff;
            transition:color 0.3s ease-in-out;

            &:first-child{
                margin-left:0;

                &:hover,
                &:focus,
                &:active{
                    color:var(--primary-color);
                }
            }

            &:nth-child(2){
                &:hover,
                &:focus,
                &:active{
                    color:var(--contrast-color);
                }
            }

            &:last-child{
                margin-right:0;

                &:hover,
                &:focus,
                &:active{
                    color:var(--secondary-color);
                }
            }
        }
    }
}

#barMenu{
    height:auto;

    & div:last-child{
        display:flex;
        align-items:center;

        & menu{
            margin:0 0 0 auto;
            padding:0;
            width:auto;
            height:35px;
            display:block;
            font-size:0;
            list-style-type:none;
    
            & li{
                height:inherit;
                display:inline-block;

                & a{
                    padding:0 0.75rem;
                    height:inherit;
                    display:inline-flex;
                    align-items:center;
                    font-size:1rem;
                    font-weight:400;
                    text-decoration:none;
                    color:#fff;
                    position:relative;
                    overflow:hidden;

                    &::after{
                        content:"";
                        width:30px;
                        height:3px;
                        display:block;
                        position:absolute;
                        bottom:3px;
                        left:-30px;
                        transition:left 0.5s ease-in-out;
                    }

                    &:hover,
                    &:focus,
                    &:active{
                        &::after{
                            left:calc(100% - 30px - 0.75rem);
                        }
                    }

                    & span{
                        margin-right:0.35rem;
                        font-size:1.2rem;
                        color:var(--secondary-color);
                        line-height:0;
                    }
                }

                &.current{
                    & a{
                        &::after{
                            left:calc(100% - 30px - 0.75rem);
                        }
                    }
                }

                &:first-child{
                    & a{
                        &::after{
                            background-color:var(--primary-color);
                        }
                    }
                }

                &:nth-child(2){
                    & a{
                        &::after{
                            background-color:var(--high-color);
                        }
                    }
                }

                &:nth-child(3){
                    & a{
                        &::after{
                            background-color:var(--secondary-color);
                        }
                    }
                }

                &:nth-child(4){
                    & a{
                        &::after{
                            background-color:var(--contrast-color);
                        }
                    }
                }

                &:nth-child(5){
                    & a{
                        &::after{
                            background-color:var(--alt-color);
                        }
                    }
                }
            }
        }

        & .button{
            height:80px;
            margin-left:1rem;
            border-radius:0;
        }
    }
}

#lastParallax{
    &.parallax{
        height:auto;
    }

    & .parallax-obj{
        & > img{
            filter:brightness(35%);
        }
    }

    & .solar{
        display:flex;
        align-items:center;

        & figure{
            position:relative;

            & img{
                margin-top:var(--zeta-density-3);
                max-width:95%;
                position:relative;
                bottom:0;
            }
        }
    }

    & h2{
        margin-bottom:0;
        text-transform:uppercase;
        color:#fff;
    }

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

header{
    & h1,h2{
        font-size:calc(2.325rem + 1.8vw);
        text-transform:uppercase;
        color:#fff;
    }

    & p{
        margin-bottom:1.5rem;
        font-size:1rem;
        font-weight:400;
        color:#fff;
    }
}

section{
    & h3{
        color:var(--dark-color);
        font-size:calc(1.325rem + 1.3vw);
        font-weight:800;
        text-transform:uppercase;
    }

    & ul{
        margin:1.5rem 0;
        list-style-type:square;

        & li{
            margin:0.5rem 0;
            font-size:1rem;
            font-weight:400;
            color:var(--dark-color);

            &::marker{
                width:5px;
                height:5px;
                font-size:1.5rem;
                color:var(--contrast-color);
            }

            &:first-child{
                margin-top:0;
            }

            &:last-child{
                margin-bottom:0;
            }
        }
    }

    &.white{
        background-color:#fff;
    }

    &.darkness{
        & h3{
            color:#fff;
        }

        & p{
            color:rgba(255,255,255,0.7);
        }
    }
}

map{
    width:100%;
    height:500px;
    display:block;
    background-color:#efefef;
}

footer{
    background-image:url(../img/footer-bg.png);
    background-repeat:repeat;
    background-size:contain;

    & h4{
        margin-bottom:0;
        color:#fff;
    }

    & p{
        color:rgba(255,255,255,0.7);
        
        &:last-child{
            margin-bottom:0;
        }
    }

    & #info{
        & p{
            & > span{
                margin-right:0.25rem;
                color:#fff;
            }
        }

        & .col:first-child{
            & figure{
                text-align:center;
            }

            & p{
                margin-top:1.5rem;
            }
        }

        & ul{
            padding:0;
            list-style-type:none;

            & li{
                & a{
                    padding:0.25rem 0;
                    display:inline-block;
                    color:rgba(255,255,255,0.7);
                    transition:color 0.3s ease-in-out;

                    &:hover,
                    &:focus,
                    &:active{
                        color:#fff;
                    }
                }
            }
        }

        & .button{
            margin-top:1rem;
        }

        & .last-article{
            & figure{
                border-radius:5px;
            }
            & a{
                font-size:1rem;
                font-weight:500;
                line-height:1rem;
                transition:color 0.3s ease-in-out;

                &:hover,
                &:focus,
                &:active{
                    color:var(--high-color);
                }
            }
        }
    }

    & #copy{
        & p{
            text-align:center;
            color:var(--light-color);
        }
    }
}

@media(max-width:991px){
    #barTop{
        text-align:center;

        & .social{
            margin-top:0.75rem;
            justify-content:center;
        }
    }

    #barMenu{
        & div:last-child{
            & menu{
                display:none;
            }

            & .button{
                margin-left:auto;
            }
        }
    }
}

@media(max-width:767px){
    #lastParallax{
        & .solar{
            & figure{
                & img{
                    margin-top:0;
                    max-width:75%;
                    position:relative;
                    bottom:0;
                }
            }
        }
    }
}

@media(max-width:575px){
    #barTop{
        & p{
            display:block;

            & span{
                margin:1rem 0;
                display:block;
                font-size:1.25rem;
            }
        }
    }

    #barMenu{
        & div:last-child{
            & .button{
                display:none;
            }
        }
    }
}