@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Alkatra&family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root                   {
    --main-text:        #1E936C;
    --border-color:     #16664B;
}

html                    {
    margin:             0;
}
body                    {
    font-family:        Poppins, Lato, sans-serif;
    text-align:         center;
    background-image:   url("/images/site/background-green.png");
    background-size:    cover;
}
main                    {
    width:              100%;
    max-width:          1200px;
    margin:             0 auto;
}
p                       {
    text-align:         justify;
}
.foot                   {
    font-size:          10pt;
    text-align:         center;
    margin:             16px 0 40px;
}
.foot>a                 {
    color:              inherit;
}
.gradient               {
    color:              white;
    background:         rgb(151,151,154);
    background:         linear-gradient(25deg, rgba(151,151,154,1) 0%, rgba(74,78,139,0.9416141456582633) 50%, rgba(0,107,51,1) 100%); 
}
#head                   {
    text-align:         right;
    height:             min(21vw,96px);
    padding-right:      18px;
    font-size:          min(28pt,5vw);
    background:         snow;
    color:              var(--main-text);
    position:           relative;
}
#headlogo               {
    float:              left;
    height:             min(20vw, 96px);
}
#headtext               {
    padding-top:        8px;
    text-align:         center;
    font-size:          min(3.3vw, 16pt);
    color:              var(--main-text);
}
#headtext>span          {
    font-family:        Alkatra,cursive;
    font-size:          13pt;
    margin-top:         0;
}
#headbar                {
    margin-top:         0;
    text-align:         center;
    font-size:          min(3.3vw, 16pt);
    background:         snow;
    color:              var(--main-text);
}
#headcontact            {
    height:             auto;
    position:           absolute;
    max-width:          min(40vw, 350px);
    top:                50%;
    transform:          translateY(-50%);
    right:              18px;
}
#headwa                 {
    height:             min(42px,8vw);
    margin-top:         2px;
}
.headlink               {
    color:              var(--main-text);
    font-size:          11pt;
    text-decoration:    none;
    vertical-align:     middle;
    margin:             4px;
    height:             8px;
}
    
#menubar                {
    width:              100%;
    display:            flex;
    flex-direction:     row;
    align-items:        stretch;
    text-align:         center;
    max-width:          900px;
    margin:             auto;
}
.menu                   {
    flex:               1;
    background:         #C2EC59;
    color:              darkgreen;
    border:             solid thin green;
    text-decoration:    none;
}
.menu:hover             {
    background:         #77CB51;
}    
.menuselect             {
    background:         var(--main-text);
    color:              white;
}
#contactBox             {
     position:          absolute;
     display:           none;
     width:             16%;
     min-width:         160px;
     background:        snow;
     border:            solid medium var(--border-color);
     border-radius:     12px;
}
ul                      {
    text-align:         left;
    padding:            12px 0 12px 40px;
}
.homePanel  {
    display:            inline-block;
    width:              100%;
    max-width:          500px;
    vertical-align:     top;
    margin:             auto min(1vw, 10px);
    box-sizing:         border-box;
}
.homePanel>video        {
    width:              100%;
    margin-top:         32px;
}
video                   {
    border:             solid medium var(--border-color);
    border-radius:      15px;
    box-sizing:         border-box;
}
.cta            {
    font-family:        Kalam, cursive;
    color:              red;
    font-size:          22pt;
    font-weight:        bold;
    text-align:         center;
    cursor:             pointer;
}
.button     		{
    display:            inline-block;
    font-family:        Kalam, cursive;
    font-weight:    	bold;
    background:         #04AA6D;
    color:              white;
    width:              auto;
    border-radius:      10px;
    padding:        	4px 12px;
    font-size:          22pt;
    cursor:     	pointer;
}
.button:disabled	{
    background:		darkgrey;
}
form            	{
    width:              98%;
    box-sizing:         border-box;
    border:             solid medium #04AA6D;
    border-radius:      15px;
    margin:             0 4px;
    padding:            16px;
}
input           	{
    font-size:      	16pt;
    width:          	85%;
    margin:         	4px auto;
}
input[type=submit]  {
    background:     #04AA6D;
    color:          white;
    width:          75%;
    border-radius:  10px;
}
input[type=submit]:disabled {
    background:     lightgrey;
    color:          grey;
}
.label          {
    text-align:     right;
}
.spam           {
    width:          90%;
    margin:         12px auto;
    font-size:      10pt;
}
.question       {
    text-align:     center;
    color:          white;
    width:          90%;
    margin:         8px auto 4px;
    padding:        1px 0 12px 0;
}
.question>p     {
    text-align:     center;
    font-size:      14pt;
    line-height:    15pt;
}
.question>a     {
    color:          white;
    font-weight:    bold;
}
.blog       {
    text-align:     justify;
    font-size:      14pt;
}
li          {
    font-weight:    bold;
    margin-top:     6px;
}
.li          {
    font-weight:    bold;
    margin-top:     6px;
}
.publisherCover	   {
    width:	   	100%;
    max-width:		300px;
    margin:		16px 10px;
    cursor:		pointer;
}
.youtube-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay            {
    background:         lightgrey;
    border:             solid medium #04AA6D;
    border-radius:      15px;
    padding:            12px 8px;
    display:            none;
    position:           fixed;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-height:         90vh;
}
#downloadbutton {
    position:       absolute;
    right:          5vw;
    width:      max(180px, 22vw);
    max-width:      400px;
    top:            50%;
    transform:      translateY(-50%);
    opacity:        0.8;
    cursor:     pointer;
}
.narrowOnly         {
    display:        none;
}
@media screen and (max-width: 900px) {
    .wideOnly       {
        display:    none;
    }
    .narrowOnly         {
        display:        block;
    }
}
.narrowHead         {
    display:        none;
}
@media screen and (max-width: 1200px) {
    .wideHead       {
        display:    none;
    }
    .narrowHead         {
        display:        block;
    }
}