/*! NORMALIZE.CSS V8.0.1 | MIT LICENSE | GITHUB.COM/NECOLAS/NORMALIZE.CSS */




/* DOCUMENT */

/*
  1. CORRECT THE LINE HEIGHT IN ALL BROWSERS.
  2. PREVENT ADJUSTMENTS OF FONT SIZE AFTER ORIENTATION CHANGES IN IOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}




/* SECTIONS */

/*
  REMOVE THE MARGIN IN ALL BROWSERS.
*/

body {
  margin: 0;
}

/*
  RENDER THE `MAIN` ELEMENT CONSISTENTLY IN IE.
*/

main {
  display: block;
}

/*
  CORRECT THE FONT SIZE AND MARGIN ON `H1` ELEMENTS WITHIN `SECTION` AND `ARTICLE` CONTEXTS IN CHROME, FIREFOX, AND SAFARI.
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}




/* GROUPING CONTENT */

/*
  1. ADD THE CORRECT BOX SIZING IN FIREFOX.
  2. SHOW THE OVERFLOW IN EDGE AND IE.
*/

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/*
  1. CORRECT THE INHERITANCE AND SCALING OF FONT SIZE IN ALL BROWSERS.
  2. CORRECT THE ODD `EM` FONT SIZING IN ALL BROWSERS.
*/

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}




/* TEXT-LEVEL SEMANTICS */

/*
  THE GRAY BACKGROUND ON ACTIVE LINKS IN IE 10.
*/

a {
  background-color: transparent;
}

/*
  1. REMOVE THE BOTTOM BORDER IN CHROME 57-
  2. ADD THE CORRECT TEXT DECORATION IN CHROME, EDGE, IE, OPERA, AND SAFARI.
*/

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/*
ADD THE CORRECT FONT WEIGHT IN CHROME, EDGE, AND SAFARI.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. CORRECT THE INHERITANCE AND SCALING OF FONT SIZE IN ALL BROWSERS.
  2. CORRECT THE ODD `EM` FONT SIZING IN ALL BROWSERS.
*/

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
ADD THE CORRECT FONT SIZE IN ALL BROWSERS.
*/

small {
  font-size: 80%;
}

/*
  PREVENT `SUB` AND `SUP` ELEMENTS FROM AFFECTING THE LINE HEIGHT IN ALL BROWSERS.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}




/* EMBEDDED CONTENT */

/*
REMOVE THE BORDER ON IMAGES INSIDE LINKS IN IE 10.
*/

img {
  border-style: none;
}




/* FORMS */

/*
  1. CHANGE THE FONT STYLES IN ALL BROWSERS.
  2. REMOVE THE MARGIN IN FIREFOX AND SAFARI.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/*
  SHOW THE OVERFLOW IN IE.
  1. SHOW THE OVERFLOW IN EDGE.
*/

button,
input { /* 1 */
  overflow: visible;
}

/*
  REMOVE THE INHERITANCE OF TEXT TRANSFORM IN EDGE, FIREFOX, AND IE.
  1. REMOVE THE INHERITANCE OF TEXT TRANSFORM IN FIREFOX.
*/

button,
select { /* 1 */
  text-transform: none;
}

/*
  CORRECT THE INABILITY TO STYLE CLICKABLE TYPES IN IOS AND SAFARI.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  appearance: button;
  -webkit-appearance: button;
}

/*
  REMOVE THE INNER BORDER AND PADDING IN FIREFOX.
*/

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/*
  RESTORE THE FOCUS STYLES UNSET BY THE PREVIOUS RULE.
*/

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/*
  CORRECT THE PADDING IN FIREFOX.
*/

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/*
  1. CORRECT THE TEXT WRAPPING IN EDGE AND IE.
  2. CORRECT THE COLOR INHERITANCE FROM `FIELDSET` ELEMENTS IN IE.
  3. REMOVE THE PADDING SO DEVELOPERS ARE NOT CAUGHT OUT WHEN THEY ZERO OUT 'FIELDSET` ELEMENTS IN ALL BROWSERS.
*/

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/*
  ADD THE CORRECT VERTICAL ALIGNMENT IN CHROME, FIREFOX, AND OPERA.
*/

progress {
  vertical-align: baseline;
}

/*
  REMOVE THE DEFAULT VERTICAL SCROLLBAR IN IE 10+.
*/

textarea {
  overflow: auto;
}

/*
  1. ADD THE CORRECT BOX SIZING IN IE 10.
  2. REMOVE THE PADDING IN IE 10.
*/

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/*
  CORRECT THE CURSOR STYLE OF INCREMENT AND DECREMENT BUTTONS IN CHROME.
*/

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/*
  1. CORRECT THE ODD APPEARANCE IN CHROME AND SAFARI.
  2. CORRECT THE OUTLINE STYLE IN SAFARI.
*/

[type='search'] {
  appearance: textfield;
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
  REMOVE THE INNER PADDING IN CHROME AND SAFARI ON MACOS.
*/

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. CORRECT THE INABILITY TO STYLE CLICKABLE TYPES IN IOS AND SAFARI.
  2. CHANGE FONT PROPERTIES TO `INHERIT` IN SAFARI.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}




/* INTERACTIVE */

/*
  ADD THE CORRECT DISPLAY IN EDGE, IE 10+, AND FIREFOX.
*/

details {
  display: block;
}

/*
  ADD THE CORRECT DISPLAY IN ALL BROWSERS.
*/

summary {
  display: list-item;
}




/* MISC */

/*
  ADD THE CORRECT DISPLAY IN IE 10+.
*/

template {
  display: none;
}

/*
  ADD THE CORRECT DISPLAY IN IE 10.
*/

[hidden] {
  display: none;
}




/* DEFAULTS */

@font-face {
  font-family: 'gruppo-regular';
  src: url('/fonts/gruppo-regular.ttf') format('ttf'),
       url('/fonts/gruppo-regular.woff') format('woff'),
       url('/fonts/gruppo-regular.woff2') format('woff2');
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
}




/* SMARTPHONES, PORTRAIT IPHONE, PORTRAIT 480X320 PHONES (ANDROID) */
@media only screen and (min-width:320px) {




}




/* SMARTPHONES, ANDROID PHONES, LANDSCAPE IPHONE */ 
@media only screen and (min-width:480px) {




}




/* PORTRAIT TABLETS, PORTRAIT IPAD, E-READERS (NOOK/KINDLE), LANDSCAPE 800X480 PHONES (ANDROID) */
@media only screen and (min-width:600px) {




}




/* TABLET, LANDSCAPE IPAD, LO-RES LAPTOPS ANDS DESKTOPS */
@media only screen and (min-width:801px) {




}




/* BIG LANDSCAPE TABLETS, LAPTOPS, AND DESKTOPS */
@media only screen and (min-width:1025px) {




}




/* HI-RES LAPTOPS AND DESKTOPS */
@media only screen and (min-width:1281px) {

/* CHECKBOXES */
#main:has(#clickAbout:checked) {
  grid-template-rows: repeat(8,1fr) 45em;
  transition: ease-in-out .5s;
}

#clickAbout:checked ~ #about {
  grid-template-rows: 45em;
  z-index: 2;
  opacity: 1;
  transition: .5s ease-in-out .5s;
}

#clickAbout {
  position: absolute;
  top: 150px;
  left: 30px;
  z-index: 3;
  height: 1em;
  width: 3em;
  cursor: pointer;
  opacity: 1;
}




#main:has(#clickContact:checked) {
  grid-template-rows: repeat(8,1fr) 40em;
  transition: ease-in-out .5s;
}

#clickContact:checked ~ #contact {
  grid-template-rows: 3em 37em;
  z-index: 2;
  opacity: 1;
  transition: .5s ease-in-out .5s;
}

#clickContact {
  position: absolute;
  top: 150px;
  left: 90px;
  z-index: 3;
  height: 1em;
  width: 3em;
  cursor: pointer;
  opacity: 1;
}




#main:has(#clickBlog:checked) {
  grid-template-rows: repeat(8,1fr) 45em;
  transition: ease-in-out .5s;
}

#clickBlog:checked ~ #blog {
  grid-template-rows: 3em 42em;
  z-index: 2;
  opacity: 1;
  transition: .5s ease-in-out .5s;
}

#clickBlog {
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 3;
  height: 1em;
  width: 3em;
  cursor: pointer;
  opacity: 1;
}




#main:has(#clickDonate:checked) {
  grid-template-rows: repeat(8,1fr) 30em;
  transition: ease-in-out .5s;
}

#clickDonate:checked ~ #donate {
  grid-template-rows: 3em 27em;
  z-index: 2;
  opacity: 1;
  transition: .5s ease-in-out .5s;
}

#clickDonate {
  position: absolute;
  top: 150px;
  left: 210px;
  z-index: 3;
  height: 1em;
  width: 3em;
  cursor: pointer;
  opacity: 1;
}




/* HEADER */
#navMenu {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 1fr;
  font-family: gruppo-regular;
  position: fixed;
  width: 100%;
  height: 3em;
  z-index: 3;
}

#navMenuL {
  grid-area: 1/1/2/2;
  background-color: #212121;
}

#navMenuL ul {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
}

#navMenuL li {
  display: inline;
  list-style-type: none;
  width: 100%;
}

#navMenuL li a {
  display: flex;
  background-color: #212121;
  font-size: 1.25em;
  color: #15ADB2;
  width: 100%;
  height: 100%;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

#navMenuL li a:hover {
  background-color: #15ADB2;
  color: #FFFFFF;
  transition: .75s;
}

#navMenuR {
  grid-area: 1/3/2/4;
  background-color: #212121;
}

#navMenuR ul {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
}

#navMenuR li {
  display: inline;
  list-style-type: none;
  width: 100%;
}

#navMenuR li a {
  display: flex;
  background-color: #212121;
  font-size: 1.25em;
  color: #15ADB2;
  width: 100%;
  height: 100%;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

#navMenuR li a:hover {
  background-color: #15ADB2;
  color: #FFFFFF;
  transition: .75s;
}

#navLogoContainer {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: 1fr;
  width: 100%;
  position: fixed;
  z-index: 1;
}

#navLogo {
  grid-area: 1/2/2/3;
  display: flex;
  margin: 0 1em 0 1em;
  padding: 1em;
  align-items: center;
}

#navLogo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}




/* MAIN */
#main {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: repeat(8,1fr) 0em;
  background-color: #212121;
  font-family: gruppo-regular;
  color: #000000;
}

#banner {
  display: flex;
  grid-area: 1/1/9/7;
}

#banner img {
  width: 100%;
  height: 100vh;
  object-fit: fill;
}

#tag {
  display: flex;
  grid-area: 4/1/6/7;
  color: #FFFFFF;
  font-size: 5em;
  justify-content: center;
  align-items: center;
}

#anchor {
  grid-area: 5/1/5/7;
}




/* ABOUT */
#about {
  grid-area: 8/2/10/6;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 0em; /* 45em */
  font-family: gruppo-regular;
  color: #000000;
  z-index: 0; /* 2 */
  opacity: 0; /* 1 */
  overflow: hidden;
}

#aboutL {
  grid-area: 1/1/2/2;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-width: 0 .05em 0 0;
  border-color: #000000;
  border-style: solid;
  border-radius: 1em 0 0 1em;
  padding: 1.5em;
  overflow: auto;
}

#aboutL h1 {
  font-size: 2.4em;
  text-align: left;
}

#aboutL p {
  font-size: 1.5em;
  text-align: justify;
}

#aboutR {
  grid-area: 1/2/2/3;
  display: flex;
  background-color: #FFFFFF;
  border-radius: 0 1em 1em 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}




/* BLOG */




/* CONTACT */
#contact {
  grid-area: 8/2/10/6;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0em 0em; /* 3em 37em */
  font-family: gruppo-regular;
  color: #000000;
  z-index: 0; /* 2 */
  opacity: 0; /* 1 */
  overflow: hidden;
}

#contactHeader {
  grid-area: 1/1/2/2;
  display: flex;
  background-color: #212121;
  border-radius: 1em 1em 0 0;
  justify-content: center;
  align-items: center;
}

#contactHeader h1 {
  font-size: 2em;
  color: #15ADB2;
}

#contactBody {
  grid-area: 2/1/3/2;
  display: flex;
  flex-flow: column;
  background-color: #FFFFFF;
  border-radius: 0 0 1em 1em;
  padding: 3em;
  font-size: 1.5em;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contactFormInput {
  border: .2em inset;
  border-radius: .3em;
  font-family: arial;
  font-size: .5em;
  padding: .1em;
  text-align: center;
}

#contactFormSubmit {
  background-color: #212121;
  border: none;
  border-radius: .5em;
  font-size: .8em;
  color: #15ADB2;
  padding: .5em
}

#contactFormSubmit:hover {
  background-color: #15ADB2;
  color: #FFFFFF;
  transition: .75s;
  cursor: pointer;
}

#contactBody span {
  font-family: arial;
  font-size: .5em;
  text-align: center;
}

#contactBody a {
  color: #15ADB2;
  text-decoration: none;
}

#contactBody a:hover {
  color: #15ADB2;
  text-decoration: overline;
}




/* DONATE */
#donate {
  grid-area: 8/2/10/6;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0em 0em; /* 3em 42em */
  font-family: gruppo-regular;
  color: #000000;
  z-index: 0; /* 2 */
  opacity: 0; /* 1 */
  overflow: hidden;
}

#donateHeader {
  grid-area: 1/1/2/2;
  display: flex;
  background-color: #212121;
  border-radius: 1em 1em 0 0;
  justify-content: center;
  align-items: center;
}

#donateHeader h1 {
  font-size: 2em;
  color: #15ADB2;
}

#donateBody {
  grid-area: 2/1/3/2;
  display: flex;
  flex-flow: column;
  background-color: #FFFFFF;
  border-radius: 0 0 1em 1em;
  padding: 3em;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#donateBody p {
  font-size: 1.5em;
  text-align: justify;
}

#donateButton {
  width: 20%;
}

#donateBody span {
  font-size: 1em;
  text-align: center;
}




/* FOOTER */
#footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2,1fr);
  background-color: #212121;
  padding: .7em 0 .5em 0;
}
  
#footerLinks {
  grid-area: 1/1/2/2;
  display: flex;
  padding: 0 0 .5em 0;
  justify-content: center;
  align-items: center;
}

#footerLinks a {
  font-family: arial;
  color: #666666;
  font-size: .8em;
  text-decoration: none;
}

#footerLinks a:hover {
  font-family: arial;
  font-size: .8em;
  color: #15ADB2;
  text-decoration: none;
}

#footerLinks span {
  font-family: arial;
  color: #666666;
  font-size: .8em;
}

#footerCopyright {
  grid-area: 2/1/3/2;
  display: flex;
  font-family: arial;
  color: #666666;
  font-size: .8em;
  justify-content: center;
  align-items: center;
}




/* CUSTOM PAGES */
#customPageBody {
  background-color: #FFFFFF;
}

#customPageMessage {
  font-family: gruppo-regular;
  font-size: 3em;
  color: #000000;
  text-align: center;
}

#customPageRedirect {
  font-family: gruppo-regular;
  font-size: 1em;
  color: #000000;
  text-align: center;
}

#customPageRedirect span a{
  color: #15ADB2;
  text-decoration: none;
}

#customPageRedirect span a:hover{
  text-decoration: overline;
}




}