:root {
/* Colors */
--primary-color: #000;
--accent-color: #9E0000; /* For links, h1 & h2 headers */ 
--caption-text: #7A818C;
--caption-border: #B7B7B7;

/* Fonts */
--font-1: PT_Serif, Georgia, "Times New Roman", serif;
--font-2: Verdana, Arial, Helvetica, sans-serif;
--font-3: Arial, Helvetica, sans-serif;
--font-4: SourceSerifPro, Arial, Helvetica, sans-serif;
--font-5: Archivo, Arial, Helvetica, sans-serif;
--font-6: ClearSans, Arial, Helvetica, sans-serif; 
--font-7: Archivo-Narrow, Verdana, Arial, Helvetica, sans-serif; 

/* Images */
--l-r-max-width: 288px;
--l-r-width: 49%;
}

* {
box-sizing: border-box; } /* Makes sizing properties include border box */

table, td , img, div, h1, h2, h3, h4, h5, p { border: 0; padding: 0; margin: 0; }
td { vertical-align: top }

html {
margin: 0;
padding: 15px 0;
background: #A6A6CA;  /* #9CACC4 */
background-image: url('/images/background01.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover; }

body {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
color: var(--primary-color);
margin: 0 auto;
padding: 0;
border: 0 solid #000;
background: #fff; }


/* LINKS
========*/

a {
color: var(--accent-color);
text-decoration: none }

a:visited {
color: var(--accent-color);
text-decoration: none }

a:hover {
color: var(--accent-color);
text-decoration: underline }

h1 a, h1 a:hover, h1 a:visited {
color: var(--accent-color);
text-decoration: none; } 


/* BASIC SET-UP
===============*/

h1 {
font-family: CantataOne, Arial, Helvetica, sans-serif;
font-size: 2.3em;
line-height: 100%;
font-weight: normal;
letter-spacing: 0.75px;
color: var(--accent-color);
margin: 0;
padding: 0; }

h2 {
color: var(--primary-color); 
font-family: var(--font-2);
font-size: 1.2em;
letter-spacing: 0.01em;
font-weight: bold;
line-height: 130%;
margin: 0 0 0.7em 0;
padding: 0; } 

div.video h2 {
text-align: left; }

h3 {
color: var(--accent-color);
font-family: var(--font-4);
font-size: 1.25em;
font-weight: bold;
letter-spacing: 0.015em;
line-height: 130%;
margin: 0 0 0.35em 0; } /*  */

h4 {
color: var(--accent-color);
font-family: var(--font-3);
font-size: 1.1em;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 120%;
margin: 0 0 0.6em 0; }

p, li {
font-family: var(--font-1);	
font-size: 1em;
line-height: 150%;
margin: 0 0 0.85em 0; }



.container1 {
display: grid;
grid-template-areas: 
"h h h"
"m m s"
"v v v"
"f f f";
grid-gap: 0; 
margin: 0;
padding: 0; }
 
.header {
grid-area: h;
margin: 0;
padding: 10px 0 0 0;
border: 0 solid #000; }
  
.main {
grid-area: m; 
border: 0 solid green; } 

.side {
grid-area: s; 
border: 0 solid #000; } 

.video {
grid-area: v; 
border: 0 solid red; }

.footer {
grid-area: f;
margin: 0;
padding: 10px 0 0 0; 
border: 0 solid #000; } 

.footer p {
font-family: var(--font-2);
margin: 0 0 0.625em 0;}


div.title {
width: 60%;
float: left;		
margin: 0;
padding: 0; 
border: 0 solid red; }

div.title img {
float: left; 
margin-top: 3px; 
margin-right: 25px; 
padding: 0;}

div.description {
width: 40%;
float: left;	
margin: 0;
padding: 0;
border: 0 solid green; }

div.description p {
font-family: var(--font-5);
font-size: 1.065em;
letter-spacing: 0px;
line-height: 125%;
text-align: center;
font-weight: bold;
margin: 0; 
padding: 0; }


#index-bar {
width: 100%;	
margin: 0;
padding: 0;
display: flex;
align-items: center;
border: 0 solid blue;
overflow: hidden; }

#index-bar img {
float: left; }

#index-bar span p {
font-family: var(--font-2);
font-size: 1.1em;
margin: 0;
padding: 0;
white-space: nowrap; }

p.copyright-bot {
font-family: var(--font-2);
color: #66717A;
font-size: 0.7em;
text-align: center;
padding-bottom: 0.625em; }


/* NEW RULERS
============= */

/* Standard ruler is 21 */

hr, hr.ruler-21, hr.ruler-31, hr.ruler-31-partial, hr.ruler-21-hidden-at-wide, hr.ruler-21-hidden-at-wide-med, hr.ruler-31-hidden-at-wide, hr.ruler-31-hidden-at-wide-med {
width: 100%; 
height: 1px; 
background: #B7B7B7; 
border: 0; 
display: inline-block; }

hr, hr.ruler-21 {
margin: 6px 0 14px 0; }

hr.ruler-31, hr.ruler-31-hidden-at-wide, hr.ruler-31-hidden-at-wide-med {
margin: 10px 0 20px 0; }

hr.ruler-21-hidden-at-wide, hr.ruler-21-hidden-at-wide-med { margin: 6px 0 14px 0; }

hr.ruler-31-partial {
width: 30%;
margin: 10px 35% 20px 35%; }


/* Mail form 
============ */

input {
width: 95%;
height: 50px;
padding: 6px; }

textarea {
width: 95%;
height: 300px;
padding: 6px; }

input[type=submit], input[type=button] {
background-color: #9E0000;
border: none;
color: white;
padding: 12px 24px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
width: 100px; }

form p {
margin: 14px 0 6px 0;
line-height: 100%; }

html.mailform-thanks {
font-size: 100.01%;
margin: 0;
padding: 0 }

body.mailform-thanks {
width: 40%;
font-family: var(--font-2);
font-size: 16px;
color: #000;
border: 0 solid #000;
margin: 10px auto 10px auto;
padding: 40px 60px;
background: #fff; }

body.mailform-thanks h2 {
font-size: 1.4em;
line-height: 140%;
font-weight: bold;
margin: 0 0 10px 0 }

body.mailform-thanks p {
font-size: 1.1em;
line-height: 140%;
margin: 0 0 10px 0 }

/* END mail form 
================ */


/* IMAGE & DIV STYLES COMMON TO ALL MEDIA QUERIES 
=================================================*/

.f {
width: 100%;
display: block;
margin: 0 auto 10px auto; } /* Full always with a width of 100% */

.m, .m-m-f {
width: 100%;
max-width: 512px;
display: block;
margin: 0 auto 10px auto; } /* Main with a max-width of 512px */

.f-m-f {
width: 100%;
display: block;
margin: 0 auto 10px auto;
padding: 0; } /* Full, main, full */

.l {
width: var(--l-r-width);
max-width: var(--l-r-max-width);
float: left;
margin: 0 15px 6px 0; } /* Left */

.r-sa {
width: var(--l-r-width);
max-width: var(--l-r-max-width);
float: right;
margin: 0 0 6px 15px; }

.l-third {
width: 35%; 
float: left;
margin: 0 15px 6px 0; } /* Left - one third width */

.r {
max-width: var(--l-r-max-width);
width: var(--l-r-width); 
float: right;
margin: 0 0 6px 15px; } /* Right */

.r-sa {
max-width: var(--l-r-max-width);
width: var(--l-r-width); 
float: right;
margin: 0 0 6px 15px; }

.r-third {
width: 35%;
float: right;
margin: 0 0 6px 15px; } /* Right - one third width */

.v-sa {
width: 100%;
max-width: var(--l-r-max-width);
display: block;
margin: 0 auto 10px auto;} /* Vertical format stand-alone */

.v-sa-smaller {
width: 100%;
max-width: 225px;
display: block;
margin: 0 auto 10px auto;} /* Vertical format stand-alone narrower */

.v-sa-larger {
width: 100%;
max-width: 325px;
display: block;
margin: 0 auto 10px auto;} /* Vertical format stand-alone wider */

.v-l-l-sa {
width: var(--l-r-width); 
max-width: var(--l-r-max-width);
float: left;
margin: 0 15px 6px 0; } /* Vertical format left, left, stand-alone */

.v-r-r-sa {
width: var(--l-r-width);
max-width: var(--l-r-max-width);
float: right;
margin: 0 0 6px 15px; } /* Vertical format right, right, stand-alone */

.f img, .m img, .m-m-f img, .f-m-f img, .l img, .l-sa img, .l-third img, .r img, .r-sa img, .r-third img, .v-sa img, .v-sa-smaller img, .v-sa-larger img, .v-l-l-sa img, .v-r-r-sa img {
width: 100%;
max-width: 100%;
vertical-align: middle; /* Removes unwanted space between bottom of image and caption div */
margin: 0;
padding: 0; }

/* END IMAGE & DIV STYLES 
=========================*/
	
div.caption {
width: 100%;
border: 1px solid var(--caption-border);
margin: 0;
padding: 10px 10px 0 10px; } /* Caption div goes within the container div (full, main, left etc.) */

div.caption-to {
width: 100%;
border-top: 1px solid var(--caption-border);
margin: 0;
padding: 10px 10px 0 10px; } /* Top border only - for inside a box which has a border */

div.caption-nb {
width: 100%;
border: 0;
margin: 0;
padding: 10px 10px 0 10px; } /* No border - for captions in the main body. */

div.caption p, div.caption-to p, div.caption-nb p, p.caption-nb {
color: var(--caption-text);
font-family: var(--font-3);
font-size: 0.9em;
line-height: 140%;
margin: 0 0 10px 0;
padding: 0; }

	
/* VIDEO IFRAME (RESPONSIVE)
============================ */

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px; /* This is space for the controls bar on embedded YouTube videos */
height: 0;
overflow: hidden;
margin: 0 0 15px 0;
padding-left: 0;
padding-right: 0; }

.video-container-16-9 {
position: relative;
padding-bottom: 56.25%;
padding-top: 0; /* On own HTML5 player controls are over video */
height: 0;
overflow: hidden;
margin: 0 0 15px 0;
padding-left: 0;
padding-right: 0; }

.video-container-4-3 {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
overflow: hidden;
margin: 0 0 15px 0;
padding-left: 0;
padding-right: 0; }

.video-container-portrait {
position: relative;
padding-bottom: 177%;
padding-top: 0;
height: 0;
overflow: hidden;
margin: 0 auto 15px auto;
padding-left: 0;
padding-right: 0; }

.video-container iframe, .video-container-16-9 iframe, .video-container-4-3 iframe, .video-container-portrait iframe {
position: absolute;
top:0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none; }	

.video-controls {
font-size: 0.75em; 
font-family: var(--font-3);
text-align: right; 
margin: 0.35em 0 0.35em 0; 
padding: 0; }

#keyboard-control-box {
display: none; 
width: 75%; 
margin: 10px auto 10px auto; 
padding: 10px 5px 0 20px; 
border: 2px solid #B7B7B7; }



p.donation {
font-family: var(--font-1);	
font-size: 0.9em;
text-align: center;
line-height: 150%;
margin: 0 0 0.85em 0;
border: 0; }




/* ============ BEGIN MEDIA QUERIES ============ */


/* SIDEBAR TOP RULER (appears when page reformats) 
==================== */

@media only screen and (min-width: 1119px) {

hr.ruler-21-hidden-at-wide, hr.ruler-31-hidden-at-wide { 
display: none; }
}/* end this query */

@media only screen and (max-width: 1118px) {

hr.ruler-21-hidden-at-wide, hr.ruler-31-hidden-at-wide { 
display: block; }
}/* end this query */




/* WIDEST (VIDEO) 
================ */

@media only screen and (min-width: 1400px) {

body {
width: 1364px;
margin: 0 auto 0 auto;
padding: 10px 40px 0px 40px;
font-size: 1rem; /* Resizes all text */ }

.main {
width: 908px;
margin: 0;
padding: 0 30px 0 78px;
border-right: 1px solid #B7B7B7; } 

.side {
width: 376px;
margin: 0;
padding: 0 80px 0 30px;
border: 0 solid green; } 

.side p {
font-family: var(--font-6);
font-size: 0.95em;
font-weight: normal;
line-height: 140%;
margin: 0 0 0.6em 0; }

h2 {
font-size: 1.35em; } 



}/* end this query */


/* WIDER 
================*/

@media only screen and (max-width: 1399px) {

body {
width: 1086px;
margin: 0 auto 0 auto;
padding: 10px 40px 0 40px;
font-size: 1rem; /* Resizes all text */ }

.main {
width: 670px;
margin: 0;
padding: 0 30px 0 40px;
border-right: 1px solid #B7B7B7; } 

.side {
width: 336px;
margin: 0;
padding: 0 40px 0 30px;
border: 0 solid green; } 

.side p {
font-family: var(--font-6);
font-size: 0.95em;
font-weight: normal;
line-height: 140%;
margin: 0 0 0.6em 0; }

}/* end this query */


/* WIDE (LOSE PAGE BACKGROUND)
============================== */

@media only screen and (max-width: 1119px) {

html {
background: #fff;
padding: 0; } 

body {
width: 100%;
margin: 0;
padding: 10px 40px 0 40px;
font-size: 1.1rem; /* Resizes all text */ }

div.title img {
margin-top: 6px; }

.container1 {
display: grid;
grid-template-areas: 
"h"
"m"
"s"
"v"
"f";
grid-gap: 0;
margin: 0;
padding: 0; }

.header, .main, .side, .video, .footer {
width: 100%;
margin: 0;
padding: 0;
border: 0; } /* Turn off column divider on main */


.main {
width: 100%; /* Cancels previous fixed width for grid item */
margin: 0;
padding: 0 5em;
border-right: 0 solid #B7B7B7;
border: 0 solid purple;  } 

.side {
width: 100%; /* Cancels previous fixed width for grid item */
margin: 0;
padding: 0 5em;
border: 0 solid cyan; } 


}/* end this query */


/* SMALL PORTRAIT
========================*/

@media only screen and (max-width: 1000px) and (orientation: portrait) {

html {
margin: 0;
padding: 0; }

body {
width: 100%;
margin: 0;
padding: 1em 2em;
font-size: 1.1rem; /* Resizes all text */ }

.container1 {
display: grid;
grid-template-areas: 
"h"
"m"
"s"
"v"
"f";
grid-gap: 0;
margin: 0;
padding: 0; }

.header, .main, .side, .video, .footer {
width: 100%;
margin: 0;
padding: 0;
border: 0; } /* Turn off column divider on main */

div.title {
width: 100%;
float: none;
text-align: center;
margin-bottom: 0; }




/* IMAGE & DIV STYLES
===================== */

.m-m-f {
width: 100%;
margin: 0 0 10px 0; }

/* END IMAGE & DIV STYLES 
=========================*/

}/* end this query */







/* SMALL LANDSCAPE
============================== */

@media only screen and (max-width: 900px) and (orientation: landscape){

html {
margin: 0;
padding: 0.625rem; }

body {
width: 100%;
margin: 0 auto 0 auto;
padding: 0.625rem;
font-size: 1.075rem; /* Resizes all text */ }

.container1 {
display: grid;
grid-template-areas: 
"h"
"m"
"s"
"v"
"f";
grid-gap: 0;
margin: 0;
padding: 0; }

.header, .main, .side, .video, .footer {
width: 100%;
margin: 0;
padding: 0;
border: 0; } /* Turn off column divider on main */


.main {
width: 100%; /* Cancels previous fixed width for grid item */
margin: 0;
padding: 0;
border: 0 solid purple;  } 

.side {
width: 100%; /* Cancels previous fixed width for grid item */
margin: 0;
padding: 0;
border: 0 solid cyan; } 

}/* end this query */




/* MAIN TITLE ONLY
================== */

@media only screen and (max-width: 1080px) {

div.title {
width: 100%;
margin: 0;
padding: 0; 
border: 0 solid red; }

div.description {
width: 100%;
margin: 0;
padding: 0;
border: 0 solid green; }


}/* end this query */



/* SMALLEST
===========*/

@media only screen and (max-width: 600px) {

html {
margin: 0;
padding: 10px; }

body {
width: 100%;
margin: 0 auto 0 auto;
padding: 10px;
font-size: 1.075rem; /* Resizes all text */ }

h1 { 
font-size: 1.6em;
text-align: left;
margin: 0;
padding: 0; }

h2 {
font-family: var(--font-7);
font-size: 1.3em;
margin: 0 0 10px 0;
padding: 0; } 

div.description {
width: 100%; }

div.title img {
margin-top: 0; }

.footer p {
font-size: 0.9em;
margin: 0 0 0.625em 0;}

p.copyright-bot {
font-size: 0.7em; }



/* IMAGE & DIV STYLES
===================== */

.v-l-l-sa, .v-r-r-sa, .l-sa, .r-sa {
width: 100%;
max-width: var(--l-r-max-width)px;
display: block;
float: none;
margin: 0 auto 10px auto; } /* Vertical format left, left, stand-alone */

.m-m-f {
width: 100%;
margin: 0 0 10px 0; }

/* END IMAGE & DIV STYLES 
=========================*/

}/* end this query */






/* ============ END MEDIA QUERIES ============ */



/* WEB FONTS
============*/


@font-face {
font-family: WorkSans;
src: url(/webfonts/WorkSans-Regular.ttf); } 

@font-face {
font-family: WorkSans;
src: url(/webfonts/WorkSans-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: WorkSans;
src: url(/webfonts/WorkSans-Italic.ttf);
font-style: italic; }

@font-face {
font-family: WorkSans;
src: url(/webfonts/WorkSans-BoldItalic.ttf);
font-style: italic;
font-weight: bold; }

@font-face {
font-family: WorkSans-SemiBold;
src: url(/webfonts/WorkSans-SemiBold.ttf); } 

@font-face {
font-family: WorkSans-Medium;
src: url(/webfonts/WorkSans-Medium.ttf); } 

@font-face {
font-family: WorkSans-ExtraBold;
src: url(/webfonts/WorkSans-ExtraBold.ttf); }

@font-face {
font-family: ClearSans;
src: url(/webfonts/ClearSans-Regular.ttf); } 

@font-face {
font-family: ClearSans;
src: url(/webfonts/ClearSans-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: ClearSans;
src: url(/webfonts/ClearSans-Italic.ttf);
font-style: italic; }

@font-face {
font-family: ClearSans;
src: url(/webfonts/ClearSans-BoldItalic.ttf);
font-style: italic;
font-weight: bold; }

@font-face {
font-family: ClearSans-Medium;
src: url(/webfonts/ClearSans-Medium.ttf); } 

@font-face {
font-family: ClearSans-Medium;
src: url(/webfonts/ClearSans-MediumItalic.ttf);
font-style: italic; }

@font-face {
font-family: ClearSans-Light;
src: url(/webfonts/ClearSans-Light.ttf); } 

@font-face {
font-family: ClearSans-Thin;
src: url(/webfonts/ClearSans-Thin.ttf); } 

@font-face {
font-family: PublicSans;
src: url(/webfonts/PublicSans-Regular.ttf); } 

@font-face {
font-family: PublicSans;
src: url(/webfonts/PublicSans-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: PublicSans;
src: url(/webfonts/PublicSans-Italic.ttf);
font-style: italic; }

@font-face {
font-family: PublicSans;
src: url(/webfonts/PublicSans-BoldItalic.ttf);
font-style: italic;
font-weight: bold; }

@font-face {
font-family: SourceSerifPro;
src: url(/webfonts/SourceSerifPro-Regular.ttf); } 

@font-face {
font-family: SourceSerifPro;
src: url(/webfonts/SourceSerifPro-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: SourceSerifPro;
src: url(/webfonts/SourceSerifPro-Italic.ttf);
font-style: italic; }

@font-face {
font-family: SourceSerifPro;
src: url(/webfonts/SourceSerifPro-BoldItalic.ttf);
font-style: italic;
font-weight: bold; }

@font-face {
font-family: SourceSerif4;
src: url(/webfonts/SourceSerif4-Regular.ttf); } 

@font-face {
font-family: SourceSerif4;
src: url(/webfonts/SourceSerif4-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: SourceSerif4;
src: url(/webfonts/SourceSerif4-Italic.ttf);
font-style: italic; }

@font-face {
font-family: SourceSerif4;
src: url(/webfonts/SourceSerif4-BoldItalic.ttf);
font-style: italic;
font-weight: bold; }

@font-face {
font-family: PT_Serif;
src: url(/webfonts/PT_Serif-Web-Regular.ttf); } 

@font-face {
font-family: PT_Serif;
src: url(/webfonts/PT_Serif-Web-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: PT_Serif;
src: url(/webfonts/PT_Serif-Web-Italic.ttf);
font-style: italic; }

@font-face {
font-family: PT_Serif;
src: url(/webfonts/PT_Serif-Web-BoldItalic.ttf);
font-style: italic;
font-weight: bold;  }
  
@font-face {
font-family: PT_Sans-Web;
src: url(/webfonts/PT_Sans-Web-Regular.ttf); }   
  
@font-face {
font-family: PT_Sans-Web;
src: url(/webfonts/PT_Sans-Web-Bold.ttf);
font-weight: bold; }   

@font-face {
font-family: PT_Sans-Web;
src: url(/webfonts/PT_Sans-Web-Italic.ttf);
font-style: italic; } 

@font-face {
font-family: PT_Sans-Web;
src: url(/webfonts/PT_Sans-Web-BoldItalic.ttf);
font-style: italic;
font-weight: bold; } 

@font-face {
font-family: CantataOne;
src: url(/webfonts/CantataOne-Regular.ttf); } 

@font-face {
font-family: Archivo;
src: url(/webfonts/Archivo-Regular.ttf);
font-style: normal;
font-weight: normal; } 

@font-face {
font-family: Archivo;
src: url(/webfonts/Archivo-Bold.ttf);
font-weight: bold;
font-style: normal; }   

@font-face {
font-family: Archivo;
src: url(/webfonts/Archivo-Italic.ttf);
font-style: italic;
font-weight: normal; } 

@font-face {
font-family: Archivo;
src: url(/webfonts/Archivo-BoldItalic.ttf);
font-style: italic;
font-weight: bold; } 

@font-face {
font-family: Archivo-Medium;
src: url(/webfonts/Archivo-Medium.ttf);
font-style: normal;
font-weight: normal; } 

@font-face {
font-family: Archivo-Medium;
src: url(/webfonts/Archivo-MediumItalic.ttf);
font-style: italic;
font-weight: normal; } 

@font-face {
font-family: Archivo-SemiBold;
src: url(/webfonts/Archivo-SemiBold.ttf);
font-style: normal;
font-weight: normal; } 

@font-face {
font-family: Archivo-SemiBold;
src: url(/webfonts/Archivo-SemiBoldItalic.ttf);
font-style: italic;
font-weight: normal; } 

@font-face {
font-family: Archivo-Black;
src: url(/webfonts/ArchivoBlack.otf);
font-style: normal;
font-weight: normal; } 

@font-face {
font-family: Archivo-Narrow;
src: url(/webfonts/ArchivoNarrow-Regular.otf);
font-style: normal;
font-weight: normal; } 

@font-face {
font-family: Archivo-Narrow;
src: url(/webfonts/ArchivoNarrow-Bold.otf);
font-weight: bold;
font-style: normal; } 

@font-face {
font-family: Archivo-Narrow;
src: url(/webfonts/ArchivoNarrow-Italic.otf);
font-style: italic;
font-weight: normal; } 

@font-face {
font-family: Archivo-Narrow;
src: url(/webfonts/ArchivoNarrow-BoldItalic.otf);
font-style: italic;
font-weight: bold; } 


@font-face {
font-family: Lexend;
src: url(/webfonts/Lexend-Regular.ttf); } 

@font-face {
font-family: Lexend;
src: url(/webfonts/Lexend-Bold.ttf);
font-weight: bold; }

@font-face {
font-family: Lexend-Black;
src: url(/webfonts/Lexend-Black.ttf); } 

@font-face {
font-family: Lexend-ExtraBold;
src: url(/webfonts/Lexend-ExtraBold.ttf); } 

@font-face {
font-family: Lexend-Light;
src: url(/webfonts/Lexend-Light.ttf); } 

@font-face {
font-family: Lexend-Medium;
src: url(/webfonts/Lexend-Medium.ttf); } 

@font-face {
font-family: Lexend-ExtraLight;
src: url(/webfonts/Lexend-ExtraLight.ttf); } 

@font-face {
font-family: Lexend-SemiBold;
src: url(/webfonts/Lexend-SemiBold.ttf); } 

@font-face {
font-family: Lexend-Thin;
src: url(/webfonts/Lexend-Thin.ttf); } 


/* For float over full menu
===========================*/

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(255,255,255);
background-color: rgba(255, 255, 255, 1.0);
overflow-y: hidden;
transition: 0.3s; }

.overlay-content {
position: relative;
top: 10%;
width: 90%;
text-align: left;
margin: 30px auto 0 auto; }

.overlay-content p {
font-size: 1.2em; 
linespacing: 140%;
margin: 0 0 0.9em 0; }

.overlay a {
padding: 8px;
text-decoration: none;
transition: 0.3s; }

.overlay a:hover, .overlay a:focus {
color: #9E0000;
text-decoration: underline; } 

.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px; }

@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px; }

div.float-over-inner { width: 80%; border: 0px solid #000; margin: 0 auto 0 auto; border-radius: 25px;
padding: 20px; }

div.hamburger {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0; } 

/* END float over full menu */