/* FONTS */
@font-face {
    font-family: "Gothic";
    src: url("../fonts/century-gothic.ttf");
}

@font-face {
    font-family: "Gothic-Bold";
    src: url("../fonts/klein/KleinText-ExtraBold.otf");
}


a.white:hover  { text-decoration: none; color: #fff;}

.green { color: #6a7120; }
.light-green { color: #f4f855; }
.blue { color: #4377a1; }
.light-blue { color: #8ef1fe; }
.white { color: #fff; }
.bolder { font-family: "Gothic-Bold" !important; font-weight: bolder;}
.italic { font-style: italic; }
.justify { text-align: justify; }
.center { text-align: center; }
.uppercase { text-transform: uppercase; }

/*SIZING*/
.w-30 {
    width: 30% !important;
}

/* ITEMS */
.background-button { border-radius: 10px; }
.background-blue { background-color: #487aa1; }
.background-green { background-color: #7c8629; }

.pointer { cursor: pointer }


/* BODY HTML */
body, html {
    margin: 0;
    height: 100%;
    display: block;
}

/* CONTENT */
.content {
    font-family: "Gothic";
}





@media (min-width:320px) { 
    
    .title { font-size: 1.8rem; }
    .subtitle { font-size: 1.5rem; }
    .text { font-size: 1rem; line-height: 1.5rem;}


    /* BANNER */
    .banner {
        background-image: url('../images/banner.jpg');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        height: 580px;
    }

    .banner img {
        width: 100%;
    }

    /* INSTITUCIONAL */
    .institucional {
        background-image: url('../images/background.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -30%;
        height: 870px;
    }

    .seal {
        position: absolute;
        right: 0%;
        top: 50%;
        width: 30%;
    }

    /*ICONS*/
    .icons {
        background-color: #4377a1;
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -22%;
        border-top-right-radius: 90px;
        border-top-left-radius: 90px;
    }
    .icons h3 {
        color: #fff;
    }

    .icons > p{
        margin-bottom: 35px;
    }

    /*LIST-ITEMS*/
    .list-row {
        background-image: url('../images/list-background.png');
        background-repeat: no-repeat;
        background-size: 35px;
        margin-top: 35px;
        margin-bottom:120px;
    }

    .list-row img {
        display: block;
        margin: auto;
    }

    .list-row h3, .list-row h5 {
        text-align: right;
    }

    .institucional .container {
        margin-top: 25px;
    }

    .icon-item {
        margin: 35px 0px;
    }

    .institucional .background-button > p{
        padding: 0px 25px;
    }

}

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { 
      
    /* BANNER */
      .banner {
        background-image: url('../images/banner.jpg');
        background-size: cover;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        height: 650px;
    }

    .banner img {
        width: 70%;
    }

     /* INSTITUCIONAL */
    .seal {
        position: absolute;
        right: 0%;
        top: 70%;
        width: 35%;
    }

    /*LIST-ITEMS*/
    .list-row h3, .list-row h5 {
        text-align: left;
    }
}

@media (min-width:801px) { 
    
    .seal {
        position: absolute;
        right: 0%;
        top: 50%;
        width: 20%;
    }
    
    .banner img {
        width: 40%;
    }

    .institucional > .container {
        margin-bottom: 20%;
    }

     
    .institucional {
        background-image: url('../images/background.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -14%;
        height: 1000px;
    }

}

@media (min-width:1025px) { 
    
    .institucional {
        background-image: url('../images/background.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -14%;
        height: 1000px;
    }


    /*ICONS*/
    .icons {
        background-image: url('../images/icons-background.png');
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: cover;
        height: 600px;
        margin-top: -35%;
    }

    /*LIST-ITEMS*/
    .list-row {
        background-image: url('../images/list-background.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin: 150px 0px;
    }

    .icons h3 {
        color: #4377a1;
    }

    .icons img {
        width: 50%;
        margin-bottom: 35px;
    }

    .banner img {
        width: 40%;
    }

    .seal {
        position: absolute;
        right: 0%;
        top: 70%;
        width: 25%;
    }

    .institucional > .container {
        margin-bottom: 15%;
    }

    .list-row img {
        display: block;
        float: right;
    }

    .institucional .background-button {
        width: 85%;
    }


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

    .title { font-size: 2.7rem; }
    .subtitle { font-size: 1.8rem; }
    .text { font-size: 1.2rem; line-height: 2rem;}

    .banner img {
        width: 60%;
    }

    .institucional > .container {
        margin-bottom: 20%;
    }

    .seal {
        position: absolute;
        right: 0%;
        top: 80%;
        width: 25%;
    }

    .institucional {
        background-image: url('../images/background.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: -14%;
        height: 1300px;
    }

    .icons {
        background-image: url('../images/icons-background.png');
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: cover;
        height: 740px;
        margin-top: -33%;
    }

    .icons img {
        /* width: auto; */
        margin-bottom: 35px;
    }

    .banner {
        background-image: url(../images/banner.jpg);
        background-size: cover;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        height: 800px;
    }


 }

/*DOWNLOAD*/
.download {
    background-image: url('../images/download-background.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/*FOOTER*/
.footer {
    background-image: url('../images/footer.png');
    background-repeat: no-repeat;
    background-size: cover;
}