@font-face{
    font-family: "DinaChaumont";
    src: url("DinaChaumont.otf") format("opentype");
}
@font-face{
    font-family: "ChaumontScript";
    src: url("ChaumontScript.otf") format("opentype");
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
h1,h2,h3,h4{
    text-align: center;
    font-family: "ChaumontScript";
}
p{
    text-align: justify;
}
#all{
    font-family: "DinaChaumont";
}
[class*="link"]{
    color: #fff;
    font-style: italic;
}
.trans img{
    width: 100%;
}

/* =====================================================
                    WELCOME PAGE
======================================================*/
.img-prez{
    position: absolute;
    z-index: -1;
}
.welcome{
    z-index: 0;
    height: 100%;
    background: url("../img/bg.webp") center no-repeat;
    background-color: #111111C0;
    color: white;
    text-align: center;
}
.welcome-onit{
    background-color: #111111C0;
    height: 100%;
    display: flex;
    align-items: center;
}
.welcome h2{
    margin-bottom: 50px;
}
.welcome img{
    width: 100%;
    max-width: 300px;
    box-shadow: -20px 20px 30px #111 ;
}
.welcome-flag{
    padding: 10px;
}

/* =====================================================
                        HEADER
======================================================*/
.vitrine{
    width: 100%;
    background: url(../img/bg.webp) no-repeat center;
    color: #fff;
}
.vitrine-glass{
    background-color: #111111c0;
}
.vitrine img{
    width: 100%;
}
.vitrine-div{
    padding: 50px;
}
.vitrine-pedestal{
    text-align: center;
}
.vitrine-div img{
    width: 100%;
    max-width: 400px;
}
.vitrine-text{
    display: flex;
    flex-direction:column;
    justify-content: center;
    color: white;
    padding-left: 25px;
}
.vitrine-title{
    text-align: left;
}
.band{
    font-family: "ChaumontScript";
    text-align: center;
    background-color: #111111ca;
}
.band-link{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    max-height: 50px;
    padding: 0px;
    color: #fff;
    text-decoration: none;
    font-style: normal;
}
.band-link text{
    bottom: -1px;
}
.band-link img{
    margin: 0 5px;
    width: 50px;
}
.band-link:hover{
    background-color: #313131ca;
}
.btn{
    color: #fff;
    border: none;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.btn:hover{
    border: none;
}
.dropdown-menu{
    font-family: "DinaChaumont";
    background-color: #11111178;
}
.dropdown-item{
    color: #fff;
    min-width: 150px;
}
.dropdown-item:hover{
    background-color: #313131ca;
    color: #fff;
}
.band-lng{
    padding: 8px;
}

/* =====================================================
                        HOME
======================================================*/
.sponsors{
    margin-top: 50px;
}
#s1{
    margin-bottom: 50px;
}
.sponsors-element{
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sponsors-element img{
    max-width: 120px;
}
.wmun{
    background: #007d45;
    color: #fff;
}
.wmun-icon{
    text-align: center;
    padding-bottom: 20px;
}
.wmun-icon img{
    width: 70px;
}
.price{
    background: #007d45;
    color: #fff;
}
.price h2{
    padding: 50px 0 42px;
}
.price-icon{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 20px;

}
.price-icon img{
    width: 70px;
}
.price-text{
    text-align: justify;
    padding-bottom: 20px;
}
.key{
    margin-top: 100px;
}
.key h2{
    padding-bottom: 50px;
}
.key-element{
    text-align: center;
    max-width: 400px;
    margin: 12px auto;
    padding: 15px;
    background: #d4d4d4;
    box-shadow: -2px 2px 5px #b4b4b4;
}
.key-element p{
    text-align: justify;
}
.key-element img{
    width: 100%;
    margin-bottom: 15px;
    box-shadow: -2px 2px 5px #888;
}
.key-text{
    text-align: center;
    font-family: "ChaumontScript";
}
.calendar{
    margin-top: 100px;
    text-align: center;
}
/* =====================================================
                        TEAM
======================================================*/
.kami{
    text-align: center;
    margin-bottom: 100px;
}
.kami-box{
    align-items: center;
    align-content: center;
}
.kami img, .staff-indiv img{
    width: 100%;
    max-width: 200px;
    box-shadow: -2px 2px 5px #888;
}
.kami-text{
    padding: 2%;
    display: grid;
    align-items: center;
}
.kami h3{
    font-style: italic;
}
.team{
    background: #007d45;
    color: #fff;
}
.team h2, .staff h2{
    margin-bottom: 50px;
}
.team img{
    width: 100%;
    max-width: 200px;
    box-shadow: -2px 2px 5px #00331c;
}
.team-student, .staff-indiv{
    text-align: center;
    margin-bottom: 30px;
}
.team-name, .staff-name{
    width: 100%;
    text-align: inherit;
    margin: 10px 0 0;
    font-family: "ChaumontScript";
}
.team-role, .staff-role{
    width: 100%;
    text-align: inherit;
    font-style: italic;
    margin-bottom: 0;
}
.staff{
    margin-top: 100px;
}

/* =====================================================
                       SCHOOL
======================================================*/
.historic{
    margin-top: 50px;
}
.h-box{
    margin-bottom: 20px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.historic img{
    width: 100%;
    box-shadow: -2px 2px 5px #888;
}
.historic .help{
    color: #007d45;
    font-style: italic;
}
.historic a.help{
    font-style: normal;
}

.carousel{
    margin: 100px auto;
    padding: 0;
}
.carousel-text{
    text-align: center;
}
.carousel-inner{
    box-shadow: -5px 5px 5px #888;
}
.school{
    background: #007d45;
    color: #fff;
    padding-top: 50px;
}
.school h3{
    margin-top: 30px;
    text-align: left;
}
.school li{
    margin-bottom: 5px;
}


/* =====================================================
                        CITY
======================================================*/
.city img{
    width: 100%;
    box-shadow: -2px 2px 5px #888;
    margin-top: 10px;
}
.city{
    margin-top: 50px;
}
.city-legend{
    color: #007d45;
    font-weight: bold;
    padding-top: 5px;
}
.graphic-box{
    padding-top: 20px;
}
.city h3{
    margin-top: 30px;
}
.precision{
    text-align: center;
}
.precision a{
    color: #007d45;
}

/* =====================================================
                       NEWSPAPER
======================================================*/
.newspaper{
    margin-top: 50px;
}
.newspaper p{
    margin-top: 20px;
    text-align: center;
}
.newspaper img{
    margin-left: 10px;
    height:3rem;
}
.np{
    color: white;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15rem;
    border: solid white 10px;
}
.np:hover{
    cursor:zoom-in;
    color: #ddd;
}
#np1{
    background: url("../img/temp.webp") center no-repeat;
}
#np2{
    background: url("../img/temp.webp") center no-repeat;
}
#np3{
    background: url("../img/temp.webp") center no-repeat;
}
#np4{
    background: url("../img/temp.webp") center no-repeat;
}
#np5{
    background: url("../img/temp.webp") center no-repeat;
}


/* =====================================================
                       ARCHIVE
======================================================*/
.bookshelf{
    text-align: center;
    align-content: center;
    min-height: 100px;
    margin-top: 50px;
}
.bookshelf-text{
    text-align: center;
    margin-bottom: 0;
}
.bookshelf-selector{
    margin-top: 20px;
}
.bookshelf-selector img{
    width: 100%;
    box-shadow: -5px 5px 5px #888;
    transition: 0.2s 0.1s;
}
.bookshelf-selector img:hover{
    box-shadow: -7px 7px 5px #888;
}
.bookshelf-selector img:active{
    transform: scale(0.99);
}
.book{
    padding-top: 100px;
}
.book img{
    width: 100%;
    margin-bottom: 10px;
    box-shadow: -2px 2px 5px #888;
}
.book-logo img{
    box-shadow: none;
}
.book-page{
    display: grid;
    flex-direction: column;
    align-items: end;
    margin-top: 50px;
}
.book-title{
    text-align: center;
    font-weight: bold;
}
.book-comite{
    color: #007d45;
    font-family: "ChaumontScript";
    font-weight: normal;
}
.book-line{
    display: grid;
    flex-direction: column;
    align-items: end;
}
.book-s{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.book-sponsor img{
    width: 100%;
    box-shadow: none;
}

/* =====================================================
                      DOCUMENTS
======================================================*/
.document-btn{
    margin: 30px 0;
}
.document-text{
    margin: 5px 0 10px;
    text-align: center;
}

/* =====================================================
                       ACCOUNT
======================================================*/
.signin{
    margin-top: 100px;
    text-align: center;
}
.signin-text{
    color: #007d45;
    text-align: center;
}
.signin input{
    min-width: 220px;
}
.signin-btn{
    border: solid 1px #007d45;
    border-radius: 0.7em;
    background-color: #ffffff;
    cursor: pointer;
    color: #212121;
    padding: 0.2rem 0.4rem;
}
.signin-btn:active {
    background-color: #eeeeee;
    transform: scale(1);
}
.signin #attrib{
    margin: 20px 0 0;
    text-align: center;
}
.signup{
    margin-top: 100px;
}
.signup p{
    text-align: center;
}
.signup a{
    color: #007d45;
}

/* =====================================================
                        DOCS
======================================================*/
.download{
    color:#004525;
    text-align: center;
}
.download [class*=top]{
    background-color: #007d45;
    color: white;
    padding: 10px;
}
.download .title,.download-button,.date,.lng{
    padding: 5px;
}
.download .lng img{
    width: 100%;
    max-width: 40px;
}
.download .odd{
    background-color: #d4d4d4;
}
.download button{
    background-color: transparent;
    border: none;
    text-decoration: underline;
}
.dol svg{
    width: 15px;
    margin-left: 5px;
}

/* =====================================================
                        FOOTER
======================================================*/
footer{
    background-color: #111;
    color: white;
    margin-top: 100px;
    padding: 30px 0px;
}
footer h4{
    text-align: left;
}
footer ul{
    list-style: none;
    padding: 0;
    margin: 40px auto ;
}
footer li{
    text-align: left;
    margin-bottom: 5px;
}
.footer-links img{
    height: 20px;
    margin-right: 10px;
}
.footer-iframe{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;    
}
.footer-iframe img{
    width: 100%;
    max-width: 300px;
}

/* =====================================================
                 MUN DOWNLOAD BUTTON
======================================================*/
.mun-wrap {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mun-wrap .mun-button{
    position: relative;
    width: 250px;
    height: 80px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    background: linear-gradient(45deg, #007d45, #00521f);
    overflow: hidden;
}
.mun-wrap .mun-button, .mun-icon, .mun-text {
    transition: all 0.3s;
}
.mun-wrap .mun-button .mun-text {
    transform: translateX(30px);
    color: white;
    font-weight: 600;
}
.mun-wrap .mun-button .mun-icon {
    position: absolute;
    transform: translateX(165px);
    height: 100%;
    width: 79px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mun-wrap .mun-button .svg{
    width: 20px;
    fill: white;
}
.mun-wrap .mun-button:hover {
    background: linear-gradient(45deg, #007d45, #00521f);
}
.mun-wrap .mun-button:hover .mun-text {
    color: transparent;
}
.mun-wrap .mun-button:hover .mun-icon {
    width: 148px;
    transform: translateX(47px);
    text-align: center;
}
.mun-button:active {
    transform: scale(0.98);
}