body{
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    font-family: "Currier New", "Currier", "MS Sans Serif", "Geneva", "Arial", "Helvetica";
    min-width: 350px;
}

a{
    text-decoration: none;
}

h2{
    color: #1A3245;
    padding-top: 15px;
}
header{
    position: fixed;
    background: #fcfcfc;
    width: calc(100% - 40px);
    padding: 0px 20px;
    border-bottom: 1px solid #ccc;
    min-width: 350px;
    z-index: 10;
}

header > div{
    position: relative;
    background: #fcfcfc;
    width: 100%;
    padding: 5px 0px 0px 0px;
    max-width: 1300px;
    margin: 0px auto;
}

header > div > img{
    padding-bottom: 8px;
}

header > div > img:nth-of-type(2){
    padding: 5px 0px 8px 0px;
}

header > div > img:nth-of-type(3){
    display: none;
}

nav{
    position: absolute;
    bottom: 15px;
    right: 20px;
    display: flex;
}

    nav span{
        font-weight: bolder;
        color: #1A3245;
        padding: 6px 15px;
        cursor: pointer;
        font-size: 20px;
    }

    nav img{    
        float: left;
        padding: 0px;
        margin: 4px 15px 0px 0px;
        cursor: pointer;
    }

    nav span:hover{
        color: #619BD3;
        text-decoration: underline;
    }

    nav span:last-of-type{    
        background: #1A3245;
        color: #fff;
        border-radius: 7px;
    }

    nav span:hover:last-of-type{ 
        background: #619BD3;
        text-decoration: none;
    }

.submenu{  
    position: absolute;
    top: 0px;
    right: 0px;
    background: #1A3245;
    color: #fff;
    width: 200px;
    border-radius: 0px 0px 0px 10px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
}

    .submenu img{
        float: left;
        padding: 0px 5px 2px 0px;
    }

    .submenu >a > span{
        float: left;
        display: inline-block;
        padding: 0px 5px;
        cursor: pointer;
    }

    .submenu > a{
        color: #fff;
    }

#banner{
    position: absolute;
    width: 100%;
    min-height: 500px;
    max-height: 800px;
    height: 100vh;
    background-image: url("/img/banner1.jpg");   
    background-repeat: no-repeat;
    background-position: left;    
    background-size: cover;
    opacity: 0.6;
}

#headers{
    position: absolute;
    width: 100%;
    min-height: 500px;
    max-height: 800px;
    height: 100vh;
}

    #headers div{
        position: absolute;
        display: inline-block;
        color: #fff;
        font-size: 4.5vmax;
    }
    #headers div:nth-of-type(1){
        bottom: 4vh;
        right: 3vw;
        text-align: right;
    }
    #headers div:nth-of-type(2){
        top: 140px;
        right: 3vw;
        text-align: right;
    }
    #headers div:nth-of-type(3){
        top: 140px;
        left: 3vw;
        text-align: left;
    }

    #headers div span{
        background: #1A3245;
        /*background: #619BD3;*/
    }

main{
    position: relative;
    background: #fff;
    width: calc(100% - 40px);
    padding: 0px 20px;
    min-width: 350px;
    /*max-width: 1300px;*/
    /*margin: auto;*/
    /*top: 100vh;*/
    top: 50px;
}

.content{
    position: relative;
    background: #fff;
    width: 100%;;
    max-width: 1300px;
    margin: 0px auto;
}

.flexC{
    display: flex;
    margin-bottom: 40px;
}

.fwrap{
    flex-wrap: wrap;
}

.titC{
    text-align: center;
    color: rgb(82, 81, 81);
    font-size: 20px;
    padding-top: 30px;
    margin-bottom: 40px;
}

.Full_div{
    max-width: 100%;
    padding: 20px;
    margin: 0px;
    left: -20px;
    background: #9ebfdb;
    color: #fcfcfc;
}

.news{
    display: inline-block;
    width: calc(25% - 30px);
    min-height: 100%;
    margin: 5px 14px;
    background: #f9f9f9;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    text-overflow: "";
    border: 1px solid #dddddd;
    border-right: 2px solid #b6b6b6;
    border-bottom: 2px solid #bbbbbb;
}

    .news > div:first-of-type{
        line-height: 1.4;
        overflow: hidden;
        text-overflow: "";
        overflow-inline: hidden;
        height: 170px;
    }

    .news img{
        min-width: 100%;
        min-height: 100%;
        border-radius: 10px 10px 0px 0px;
        height: auto;
        width: 100%;
    }

    .news:hover img{
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    .news > div:last-of-type{
        padding: 0px 10px 0px 10px;
        margin: 0px;
        display: inline-block;
    }

    .news span:first-of-type{
        font-size: 10px;
        color: #999;
        margin: 0px 0px 5px 0px;
    }

    .news span:last-of-type{
        font-size: 14px;
        color: #333;
        display: inline-block;
        min-height: 200px;
        padding-top: 10px;
        text-align: justify;
    }

    .news p{
        margin: 16px 0px 10px 0px;
    }

    .news button, .afilia button{
        height: 30px;
        border: 0px none;
        border-radius: 5px;
        background: #619BD3;
        color: #fff;
        cursor: pointer;
    }

    .news:hover button{
        background-color: #1A3245;
    }

    .news button:hover{
        background-color: #1A3245;
    }


.events{
    display: inline-block;
    width: calc(33% - 37px);
    min-height: 330px;
    min-width: 330px;
    margin: 5px 14px;
    padding: 20px 5px 10px 5px;
    background: #fcfcfc;
    border: 1px solid #619BD3;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: "";
    font-size: 14px;
    color: #333;
}
    
    .events > div:first-of-type{
        padding: 0px 10px 0px 10px;
        margin: 0px;
        display: inline-block;
    }

    .events span{
        display: inline-block;
    }

    .events .title{
        font-size: 20px;
        font-weight: bold;
        color: #4a80b3;
    }
    
    .events > hr{
        margin-block-end: 0px;
    }

    .events .dates{ 
        font-size: 10px;
        color: #999;
        margin: 0px 0px 5px 0px;
    }

    .events .tagsE{
        display: inline-block;
        font-weight: bolder;
        margin: 10px 0px 0px 0px;
        width: 80px;
    }
    
    .events .desc{
        margin: 15px 0px 10px 0px;
        text-align: justify;
    }
    
.recursos{
    display: inline-block;
    width: calc(33% - 40px);
    min-height: 200px;
    margin: 5px 14px;
    padding: 20px 5px 80px 5px;
    border: 0px solid #619BD3;
    overflow: hidden;
    text-overflow: "";
    font-size: 14px;
    color: #fcfcfc;
}

    .recursos > span{
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        margin: 10px 0px;
        color: #1A3245;
    }

.afilia{
    background: #1A3245; 
    padding: 0px 20px; 
    height: 450px; 
    background-image: url('/img/afiliate.jpg'); 
    background-position: right; 
    background-repeat: no-repeat; 
    background-size: auto;
}

    .afilia > div{
        background: #1A3245; 
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); 
        height: calc(100% - 40px); 
        padding: 20px 10% 20px 20px; 
        margin-left: -20px;
        width: 50%; 
        min-width: 600px;
    }

    .afilia h2{
        color: #ffffff;
    }
    
    .afilia button{
        background: #e0e0e0;
        color: #1A3245;
    }
        .afilia button:hover{
            cursor: pointer;
            background: #fff;
            font-weight: bold;
        }

footer{
    position: relative;
    background: #e6e6e6;
    width: calc(100% - 40px);
    padding: 0px 20px;
    min-width: 350px;
    top: 50px;
    border-top: 5px solid #1A3245;
}

    footer > img:first-of-type{
        float: right;
        padding: 40px 30px;
    }

    footer > div:first-of-type{
        min-height: 215px;
        padding: 20px 10px;
        font-size: 10pt;
        color: #333333;
        width: 300px;
    }

    footer > div:first-of-type > div{    
        display: flex;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    footer > div:first-of-type > div > div{    
        margin-left: calc(15% - 15px);    
        margin-right: calc(15% - 15px);
    }

.footerAPP{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    margin: 0px;
    padding: 5px 0px 2px 0px;
    border-top: 2px solid #cccccc;
    background: #20263D;
    font-size: 8pt;
    text-align: center;
    color: #cccccc;
    min-width: 350px;    
}

    .footerAPP b{
        color: #fff;
    }


@media screen and (max-width: 1150px){
    .news:last-of-type{
        display: none;
    }

    .news{
        width: calc(33% - 30px);
    }
    
    .events{
        width: calc(50% - 40px);
    }
}

@media screen and (max-width: 850px){
    .news:last-of-type{
        display: inline-block;
    }
    .news{
        width: calc(50% - 37px);
    }

    .flexC{
        flex-wrap: wrap;
    }

    .afilia > div{
        width: calc(60% - 40px);
        clip-path: none;
        min-width: 360px;
        padding: 20px 20px;
        padding-right: 50px;
    }

    .afilia > div > div{
        margin-top: 20px;
    }
    
    .recursos{
        width: calc(33% - 40px);
    }

        .recursos img{
            width: 160px;
        }
    
    nav{
        background: #e3e3e3;
        flex-wrap: wrap;
        padding: 8px 20px;
        width: 100%;
        left: -20px;
        position: static;
        margin-left: -20px;
    }

    .menuOK{
        display: flex;
    }

    .menuNO{
        display: none;
    }

        nav a:first-of-type{
            display: none;
        }

        nav span{
            width: 100%;
        }

        nav span:last-of-type{
            text-align: center;
        }

    header > div > img:nth-of-type(3){
        display: block;
        float: right;
        padding: 40px 0px 10px 0px;
    }
}

@media screen and (max-width: 800px){
    .events{
        width: calc(100% - 40px);
        min-height: 300px;
    }

    .events:last-of-type{
        display: none;
    }
}

@media screen and (max-width: 630px){
    .news:last-of-type{
        display: none;
    }

    .news{
        width: calc(100% - 30px);
        display: block;
    }

    .afilia > div{
        width: 100%;
        min-width: 310px;
        padding: 20px 20px;
    }
    
    .recursos{
        width: calc(80% - 40px);
    }

        .recursos img{
            width: initial;
        }
}

@media screen and (min-height: 800px){
    /*
    main{
        top: 800px;
    }
    */
    
}