:root {
  --c1 : #fff;
  --c2 : #fdc464;
  --c3 : #140735;
  --c4 : #ffffff;
  --c5 : #0171bc;
  --c6 : #29abe2;
  --c7 : #fbb03b;
}

html { scroll-behavior: smooth; }
body { margin:0 auto; background:url('../img/bg.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; min-height:100vh; font-family:'Roboto', sans-serif; box-sizing:border-box; }
* { box-sizing:border-box; }
section { min-height:100vh; }
section.half { min-height:50vh; }
section.quarter { min-height:25vh; }
section.h40 { min-height:40vh; }
.well { width:70%; margin:0 auto; text-align: center; }
.well p { text-align: center; }
.well q { font-weight:500; font-size:1.2em; display:block; color:var(--c5); }

.banners { background:rgba(255,255,255,0.9); box-sizing:border-box; overflow: hidden; max-width:100vw; border-bottom:1px solid #ddd; }
.banners img { display: block; width:70%; height: auto; margin:0 auto; border-radius:7px; }


.modal { text-align:justify;  }
.modal.active .modal-container { border-top:7px solid var(--c5); display:grid; align-content: start; height:fit-content; max-height:90vh;  overflow: hidden; overflow-y: auto; }

.box-container { padding:2em; grid-gap:1em;   grid-auto-rows: max-content;   width:70%; margin:0 auto; }
.box { box-sizing:content-box; display:grid; grid-template-columns:1fr; background:var(--c4); align-content: start; padding:1em; border-radius:7px; height:max-content; transition:.5s all;  }
.box:hover { box-shadow:5px 7px 5px 0px rgba(0,0,0,.3); }
.box h3 { font-size:1.5em; display:block; margin:0 auto; color:var(--c3); }
.box > .content { white-space: pre-line;  text-align: justify; line-height:1.5; }
.box > .content p { display:grid; grid-template-columns:1fr; grid-gap:0em; }
.box > .content p > strong, .box > .content p::before { display:block; color:var(--c5); }
.box > .content span.mdi:hover::before { color:var(--c5); }
.ggap { grid-gap:.5em; }

.donatecontent { text-align: justify; display:grid;  }
.donatecontent h2 { font-size:1.5em; color:var(--c5); }
.donatecontent strong { color:var(--c5); }
.donatecontent ul { list-style:circle; }
.donatecontent .g { margin-top:.5em; }


section.cpage {  max-width:90vw; max-height:90vh; overflow: hidden; overflow-y: auto; margin:0 auto; background:#fff; padding:2em; margin-top:100px; margin-bottom:50px; border-radius:7px; }
section.cpage > div {   }

section.box-container { min-height:auto; height:fit-content; }
.box-container.sameheight .box .content { max-height:300px; overflow: hidden; overflow-y: auto; padding-top:0px 0px; align-items: start; }

.socialicons { display:grid; grid-auto-flow: column;  align-content: center; justify-content: start; grid-gap:.5em; font-size:1.5em; }
.socialicons a { text-shadow:1px 1px 2px rgba(0,0,0,.2); transition:.5s all; }
.socialicons a:hover { text-shadow:1px 3px 3px rgba(0,0,0,.3); }

footer { background:var(--c3); color:var(--c4); display:grid; grid-template-columns:1fr auto; text-align: left; align-items: center; }
footer p { padding:.5em; }

a { cursor: pointer; text-decoration: none; color:inherit; }
.mainhp {  display:grid; grid-template-columns:1fr; min-height:100vh; align-items: center; justify-content:center;  }
.xrotator { display:grid; grid-template-columns:1fr 1fr; align-items: center; justify-content: center; width:90%; margin:0 auto; }
.photorevolver { animation:zoomInLeft 3s; position:relative; }
.photorevolver img { transition:1s all; max-width:300px; border-radius:7px; }
ul { list-style:none; padding:0px; margin:0px; }

.xrotator .titles li { animation:zoomIn 1s; }
.xrotator .titles li p { color:rgba(255,255,255,0.8); text-align: justify; padding:1em; font-size:1.2rem; }
.xrotator .titles li h3 { color:var(--c1); font-weight:lighter; text-align: left; padding:.4em; font-weight:500; text-transform: uppercase; font-size:3.5em; }
.xrotator .titles li h3 > small { display:block; color:var(--c2); text-transform:; font-size:.5em; }

.xrotator ul > li { display: none; text-align:center; }
.xrotator ul > li.active { display: block; }

.xrotator .photorevolver { margin-top:-300px; margin-left:150px; }
.xrotator .photorevolver li { display: block; position:absolute; z-index:0; transition:1s all; }
.xrotator .photorevolver li.active { animation:s1anim 1s; left:0px; z-index:1; transform:scale(1.7); transition:1s all; }
.xrotator .photorevolver li.s2 { animation:s2anim 1.2s; top: -75px; left: -250px;  transform: scale(.7); opacity: .5;  transition: 1s all;  }
.xrotator .photorevolver li.s3 { animation:s3anim 1.2s;  top: 100px; right:-50px;  transform: scale(.5); opacity: .5;  transition: 1s all; }

@keyframes s1anim {
    0% { top: 100px; left:50px; right: 0px; transform: scale(.5); opacity: .1; z-index:0; }
    100% { top:0px; left:0px; right:auto;   transform: scale(1.7); opacity: 1; z-index:1;  }
}

@keyframes s2anim {
    0% { top: 0px; left: 0px;  transform: scale(1); opacity: 1;  }
    100% { top: -75px; left: -250px;  transform: scale(.7); opacity: .5; }
}

@keyframes s3anim {
    0% { top: 100px; right:0px;  transform: scale(.1); opacity: 0; }
    100% { top: 100px; right: -50px; transform: scale(.5); opacity: .5;  }
}

header { animation:slideInDown 1s; padding:0px 1em; position:absolute; top:0px; left:0px; width:calc(100vw - 2em); border:0px solid #ddd; }
header.sticky { z-index:3; background:var(--c3); box-shadow:0px 3px 3px rgba(0,0,0,0.1); animation:slideInDown 1s; padding:0px 1em; position:sticky; top:0px; left:0px; width:calc(100vw - 2em); border:0px solid #ddd; display:none; }
header.sticky .nav a { color:var(--c4); }
header .brand { justify-content: center; align-items: center;}
header .brand img { max-height:100px;  }
header.sticky .brand img { max-height:70px;  }
header .nav { display:grid; grid-auto-flow: column; grid-gap:.7em; align-items: center; }
header .nav a { color:var(--c1); padding:.5em; font-size:1.2rem; text-align: center; white-space: nowrap; text-decoration: none; position: relative; cursor:pointer!important; }
header .nav a:hover:after { animation:zoomIn .2s; content:""; background:rgba(0,0,0,0.1); width:100%; height:10%; position: absolute; bottom:-12px; left:0; border-radius:100%;  }
header .nav a.mdi { font-size:1.5rem; color:var(--c1); display:block; }

.btn.spl { background:var(--c2); color:var(--c4)!important; border:2px solid var(--c4); margin-right:1em; position:relative; transform:scale(0.2); transition:1s all;  }
.btn.spl:hover { transform:scale(1); }
.btn.spl:hover:before { animation:zoomIn .2s; content:""; background:rgba(0,0,0,0.1); width:100%; height:10%; position: absolute; bottom:-12px; left:0; border-radius:100%;  }

.formbox { max-width:70%; margin:0 auto; min-height:500px; }
.formbox form { display:grid; grid-gap:1em; width:100%; }


.statusmarker.green { background:green!important; }


@media (max-width:780px) {

  .brand img { max-width:200px; height: auto;}
  header .nav { display:none; }
  header .nav.active { display:grid; grid-auto-flow: row; }

  .xrotator { display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-gap:1em; align-items: start; }
  .xrotator .photorevolver { transform:scale(.3); margin-top:0px; margin-left:0px; }
  .xrotator .photorevolver li.s3  { right:-200px; }
  section.h40 { padding:1em; text-align: justify; grid-gap:1em; }
  .well {  }
  .well p { text-align: justify; }
  .well q { text-align: center; }
  iframe { display: block; width:100%; margin:0 auto; }
.box-container { padding:1em; width:calc(100% - 2em); }
.box-container.sameheight .box .content { max-height:420px; }
  .well { width:unset; }
  .modal.active .modal-container {  width:calc(100% - 5em); padding-bottom:1em; align-content: start;  overflow: hidden; overflow-y: auto; }
  .modal.active.small .modal-container { width:calc(100% - 5em); }
}