/* ===================== FIXED POINT ======================================== */
/*.fixpoint{ background-attachment: fixed; }*/
/*body{ background-image: url(/images/pimage1.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: 0px 65px; background-attachment: fixed; transition: background-image 2s linear; }*/
/* ===================== HEADER ============================================= */
#header{ position: fixed; width: 100%; height: 65px; left: 0px; top: 0px; background-color: #FFFFFF; z-index: 100; transition: none; }
#header-content{ position: relative; width: 100%; max-width: 1000px; min-width: 300px; margin: 0 auto; }
#header-title{ width: 50%; margin-top: 20px; transition: none; }
/* ===================== NAV BARS =========================================== */
#header-nav{ display: none; }
#index0-nav{ position: absolute; left: 0px; bottom: 0px; z-index: 55; background-color: #004C0F; }
*.nav{ width: 100%; height: 40px; background-color: #006113; color: #FFFFFF; border-bottom: 2px solid #FFFFFF; }
*.nav ul{ display: table; list-style: none; height: 35px; margin: 0px auto; }
*.nav ul li{ float: left; text-align: justify; padding: 0 20px; font-size: 1.2em; font-family: Verdana, Arial, Helvetica, sans-serif; }
*.nav img{ width: 45px; margin: -15px auto 0px auto; }
/* ===================== NAV MENU =========================================== */
#btn-menu{ position: absolute; right: 20px; top: 5px; width: 40px; height: 40px; cursor: pointer; transition: none; }
#btn-menu img{ width: 100%; height: 100%; }
/* ===================== SECTIONS =========================================== */
#section-cover{ position: absolute; left: 0px; top: 0px; width: 100%; min-width: 200px; }
.section{ display: block; position: relative; height: 100vh; font-size: 1em; }
.section article{ background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.8); padding: 20px; margin: 20px 10px; border-radius: 20px; }
#index0{ margin-top: 120px; max-height: 460px; }
#index0 article{ width: 100%; min-width: 300px; max-width: 600px; top: 100px; margin: 0 20px; font-weight: bold; }
#index1{ background-color: #FFFFFF; max-height: 600px; }
#index1-d{ width: 100%; height: 200px; padding-top: 20px; background-color: #006113; color: #FFFFFF; }
*.index1-p{ width: 100%; max-width: 1000px; min-width: 300px; margin: 0 auto; padding: 5px; font-size: 1.1em; text-align: justify; }
#index1 article{ width: 100%; min-width: 300px; max-width: 1000px; margin: 50px auto; padding: 5px; font-size: 1.1em; text-align: justify; }
#index2{ background-color: #FFFFFF; }
#index2 article{ width: 100%; min-width: 300px; max-width: 1000px; margin: 50px auto; padding: 5px; font-size: 1.1em; text-align: justify; }
/* ===================== BIOs =============================================== */
#bios{ width: 100%; min-width: 300px; max-width: 1000px; margin: 0 auto; }
*.bios{ max-width: 250px; float: left; margin: 0; padding: 5px; }
*.bios img{ width: 150px; height: 150px; }
/* ===================== FOOTER ============================================= */
#footer{ height: 120px; }

/* ===================== RESPONSIVE SETTINGS ================================ */
@media screen and (min-width : 20em) and (max-height : 23em) {  }
@media screen and (min-width: 20em) and (min-height : 24em) {  }
/* ===== == = === 20em (320px) === = == ========== */
@media screen and (min-width : 320px) {
}
/* ===== == = === 30em (480px) === = == ========== */
@media screen and (min-width : 30em) and (min-height : 24em) {
}
/* ===== == = === 37.5em (600px) === = == ======== */
@media screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ========== */
@media screen and (min-width : 48em) {
  #header{ height: 120px; transition: height 400ms ease-in; }
  #btn-menu{ top: 10px; transition: top 400ms ease-out; }
  #header-title{ font-size: 3em; margin-top: 50px; transition: margin-top 500ms ease-in; }
}
/* ===== == = === 56.25em (900px) ================ */
@media screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) =============== */
@media screen and (min-width : 68.75em) {
}
/* ===== == = === 81.25em (1300px) =============== */
@media screen and (min-width : 81.25em) {
}