/******************** general content ********************/
:root{
  --font_size_d_header: 8rem;
  --font_size_d_header_2: 4rem;
  --font_size_d: 3rem;
  --font_size_d_h1: 5rem;
  --font_size_d_nav: 2rem;
  --font_size_d_nav_i: 3rem;
  --padding_d_nav: 1.5rem;
  --font_size_d_footer: 2rem;
  --font_size_d_footer_i: 4rem;
  --padding_d_footer: 2rem;
  
  --font_size_m: 5rem;
  --font_size_m_h1: 8rem;
  --font_size_language_m: 3rem; 
  /* colors */
  --header_text_color: #003d3e;
  --background_color: #fff;
  --main_text_color: #001414;
  --main_element_color: #4cdcde;
  --active_element_color: #00ced1;
  --highlight_element_color: #ff944c;
  --highlight_element_gradient_color: #99582d;
  --highlight_active_element_color: #ff6700;
  --nav_text_color: #006768;
  --nav_active_text_color: #001414;
  --nav_highlight_text_color: #ffffff;
  --footer_background_color: #fff;
  --footer_text_color: #006768;
  --footer_active_text_color: #001414;
  --image_d_shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
  --nav_d_shadow: 0px 0px 5px 0px rgba(0,20,20,1.0);
  --img_m_shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
  --basic_element_d_shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  --basic_element_m_shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  
  --infobox_background: #edfbfb;
  --infobox_h3_background: #6fe3e4;
  --infobox_h3_text: #000;
  --infobox_text: #000;
  
  --font_size_infobox_d: 2rem;
  --font_size_infobox_m: 4rem;
}

html, body {
    height: 100%;
    width: 100%:
}

nav{
	font-family: 'Work Sans', sans-serif;
	font-weight: bold;
}
  
body {
  /*font-family: 'PT Serif', serif;*/
  font-family: 'Work Sans', sans-serif;
  font-size: 100%;
  background-color: var(--background_color);
  color: var(--main_text_color);
  padding: 0; 
  margin: 0;
}

/******************** desktop content ********************/

p.d {
	font-size: var(--font_size_d);
	white-space: pre-line;
}

ul.d{
	font-size: var(--font_size_d);
	list-style-type: disc;
	margin-left: var(--font_size_d);
}

h1.d {
  padding-top: 75px; /* 1.5 x nav height*/
  font-size: var(--font_size_d_h1);
  font-weight: bold;
  white-space: pre-line;  
}

button.d{
  background-color: var(--highlight_element_color);
  transition: background-color 0.5s ease-out;
  box-shadow: var(--basic_element_d_shadow);
  font-size: var(--font_size_d);
  font-weight: bold;
  border: none;
  color: white;
  padding: 20px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-left: 20%;
  cursor: pointer;	
}

button.d:hover{
  background-color: var(--highlight_active_element_color);
}

.infobox_container_d{
  display: table;
  table-layout: fixed;
  border-spacing: 20px;
  margin-left: auto;
  margin-right: auto;
}

.infobox_container_d .box {
  display: table-cell;
  width: 300px; 
  height: 400px;
  position: relative;
  box-shadow: var(--basic_element_d_shadow);
  background: var(--infobox_background);
  font-size: var(--font_size_infobox_d);
  white-space: pre-line;
}

.infobox_container_d .box h3 {
    background: var(--infobox_h3_background);
    width: 300px;
    color: var(--infobox_h3_text);
    padding: 10px 5px;
    margin-top: 40px;
    font-size: 120%;
    text-align: center;
    font-weight: bold;
	white-space: pre-line;
}

.infobox_container_d .box p{
	margin-left: 30px;
	margin-right: 30px;
}

.infobox_container_d .ribbon {
  position: absolute;
  width:150px;
  background: linear-gradient(var(--highlight_element_color) 30%, var(--highlight_element_gradient_color) 100%);
  top: -15px;
  padding: 10px;
  margin-left: 140px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  border-radius: 0 0 5px 5px;
}
.infobox_container_d .ribbon:before {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 15px solid var(--highlight_element_gradient_color);
  border-left: 15px solid transparent;
}

header.d img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 200px; /*same as header height*/
  width: auto;
}

header.d span{
	font-size: var(--font_size_d);
}

img.d {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--font_size_d);
  margin-bottom: var(--font_size_d);
  width: 40%;
  height: auto;
  box-shadow: var(--image_d_shadow);
}

p.d, h1.d, ul.d{
	padding-left: 20%;
	padding-right: 20%;
}

header.d{
  background: linear-gradient(180deg, var(--main_element_color) 10%, var(--background_color) 90%);
  color: var(--header_text_color);
  height: 200px;
  width: 100%;
  top:0;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  line-height: 80px;/*same as height if single line header*/
  font-size: var(--font_size_d_header);
  font-weight: bold;
}

header.d p{
  font-size: var(--font_size_d_header_2);
}

.sticky {
  position: fixed;
  top: 0;
  left: 20%; /*same as padding*/
  width: 100%;
}

main.d div.language{
  text-align: right;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: var(--font_size_d_footer);
  color: var(--main_text_color);
}

main.d div.language a{
  font-size: var(--font_size_d_footer);
  color: var(--main_text_color);
  text-decoration: none;
}

.sticky + main.d {
  padding-top: 50px; /*same as nav height*/
}

nav.d {
  display: table;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  overflow: hidden;
  background-color: var(--main_element_color);  
  width: 60%;
  min-width: 500px;
  border-radius: 10px; /*same as highlight radius*/
  box-shadow: var(--nav_d_shadow);
  z-index:100;
}

nav.d a {
display: table-cell;
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.5s ease-out;
  color: var(--nav_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_nav);
}

nav.d a i {
  color: var(--nav_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_nav_i);
  padding-left: var(--padding_d_nav);
  padding-right: var(--padding_d_nav);
}

nav.d a:hover {
	background-color: var(--active_element_color);
}

nav.d a:hover i{
	display: none;
}

nav.d a span{
	display: none;
}

nav.d a:hover span{
	display: inline;
}

nav.d a.highlight {
  background-color: var(--highlight_element_color);
}

nav.d a.highlight:hover {
  background-color: var(--highlight_active_element_color);
}

nav.d a.highlight, nav.d a.highlight i {
  color: var(--nav_highlight_text_color);
}

nav.d a.active {
  background-color: var(--active_element_color); 
  color: var(--nav_active_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_nav);
}

nav.d a.active i {
  color: var(--nav_active_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_nav_i);
  padding-left: var(--padding_d_nav);
  padding-right: var(--padding_d_nav);
}

footer.d{
  bottom: 0;
  background: var(--footer_background_color);
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

footer.d a{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_footer);
  font-weight: regular;
  padding-left: var(--padding_d_footer);
  padding-right: var(--padding_d_footer);
}

footer.d a:hover, footer.d i:hover{
  color: var(--footer_active_text_color);
}

footer.d p{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_footer);
  font-weight: regular;
  padding-left: var(--padding_d_footer);
  padding-right: var(--padding_d_footer);
}

footer.d i{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: var(--font_size_d_footer_i);
  font-weight: regular;
  padding-left: var(--padding_d_footer);
  padding-right: var(--padding_d_footer);
}

footer.d p{
	border-bottom: 2px solid var(--footer_text_color);
}

iframe.d{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--font_size_d);
  margin-bottom: var(--font_size_d);
  width: 40%;
  height: 700px;
  box-shadow: var(--image_d_shadow);	
}

#mc_embed_signup_scroll.d{
	background: var(--infobox_background);
	border-radius: 5px;
	margin-left: 20%;
	margin-right: 40%;
	padding: 10px;
	width: 40%;
	font-size: var(--font_size_d);
}

.mc-field-group.d label{
	text-align: center;
	padding-top:10px;
	padding-bottom:20px;
	width: 10%;
}

.mc-field-group.d input{
	border-radius: 5px;
	width: 90%;
}

#mc-embedded-subscribe.d{
  background-color: var(--highlight_element_color);
  transition: background-color 0.5s ease-out;
  box-shadow: var(--basic_element_d_shadow);
  font-size: var(--font_size_d);
  font-weight: bold;
  border: none;
  color: white;
  padding: 20px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;	
}

#mc-embedded-subscribe.d:hover{
	background-color: var(--highlight_active_element_color);
}


/******************** mobile content ********************/

p.m {
	font-size: var(--font_size_m);
	margin-left: var(--font_size_m);
	margin-right: var(--font_size_m);
	white-space: pre-line;
}

h1.m {
  font-size: var(--font_size_m_h1);
  font-weight: bold;
  margin-left: var(--font_size_m);
  margin-right: var(--font_size_m);
  padding-top: var(--font_size_m);
  white-space: pre-line;
}

ul.m{
	font-size: var(--font_size_m);
	list-style-type: disc;
	margin-left: calc(1.5 * var(--font_size_m));
	margin-right: var(--font_size_m);
}

button.m{
  background-color: var(--highlight_element_color);
  box-shadow: var(--basic_element_m_shadow);
  font-size: var(--font_size_m);
  font-weight: bold;
  border: none;
  color: white;
  padding: 2vw 5vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-left: var(--font_size_m);
  cursor: pointer;	
}

img.m {
  width: 100%;
  height: auto;
  margin-top: var(--font_size_m);
  margin-bottom: var(--font_size_m);
  box-shadow: var(--img_m_shadow);
}

.infobox_container_m{
  display: table;
  table-layout: fixed;
  width: 95%;
  margin-left:auto;
  margin-right:auto;
}

.infobox_container_m .box {
  display: table-element;
  width: 100%; 
  height: 60vw;
  position: relative;
  box-shadow: var(--basic_element_m_shadow);
  background: var(--infobox_background);
  font-size: var(--font_size_infobox_m);
}

.infobox_container_m .box h3 {
    background: var(--infobox_h3_background);
    width: 100%;
    color: var(--infobox_h3_text);
    padding-top: 8vw;
	padding-bottom: 2vw;
    margin-top: 5vw;
    font-size: 120%;
    text-align: center;
    font-weight: bold;
	white-space: pre-line;
}

.infobox_container_m .box p{
	margin-left: 1vw;
	margin-right: 1vw;
	white-space: pre-line;
}

.infobox_container_m .ribbon {
  position: absolute;
  width:25%;
  background: linear-gradient(var(--highlight_element_color) 30%, var(--highlight_element_gradient_color) 100%);
  top: -1.5vw;
  padding: 1vw;
  margin-left: 70%;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  border-radius: 0 0 5px 5px;
}
.infobox_container_m .ribbon:before {
  content: "";
  position: absolute;
  left: -1.5vw;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 1.5vw solid var(--highlight_element_gradient_color);
  border-left: 1.5vw solid transparent;
}

header.m img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}

header.m{
  background: linear-gradient(180deg, var(--main_element_color) 10%, var(--background_color) 90%);
  color: var(--header_text_color);
  height: 30vw;
  width: 100%;
  top:0;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  font-size: 15vw;
  font-weight: bold;
}

header.m p{
  font-size: 5vw;
}

footer.m{
  background: var(--footer_background_color);
  width: 100%;
  padding-top: 2%;
  padding-bottom: 20%;
  text-align: center;
  vertical-align: middle;
}

footer.m a{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: 3vw;
  font-weight: regular;
  padding-left: 3vw;
  padding-right: 3vw;
}

footer.m p{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: 3vw;
  font-weight: regular;
  padding-left: 3vw;
  padding-right: 3vw;
}

footer.m i{
  color: var(--footer_text_color);
  text-decoration: none;
  font-size: 8vw;
  font-weight: regular;
  padding-left: 3vw;
  padding-right: 3vw;
}

footer.m p{
	border-bottom: 0.5vw solid var(--footer_text_color);
}

main.m div.language{
  text-align: right;
  padding-left: 3vw;
  padding-right: 4vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
  font-weight: bold;
  font-size: var(--font_size_language_m);
  color: var(--main_text_color);
}

main.m div.language a{
  font-size: var(--font_size_language_m);
  color: var(--main_text_color);
  text-decoration: none;
}

nav.m {
  display: table;
  table-layout: fixed;
  height: 10%;
  overflow: hidden;
  background-color: var(--main_element_color);  
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index:100;
}
nav.m a {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: var(--nav_text_color);
  text-decoration: none;
  font-size: 3vw;
}

nav.m a i {
  color: var(--nav_text_color);
  text-decoration: none;
  font-size: 7vw;
}

nav.m a.highlight {
  background-color: var(--highlight_element_color);
}

nav.m a.highlight, nav.m a.highlight i {
  color: var(--nav_highlight_text_color);
}

nav.m a.active {
	background-color: var(--active_element_color); 
}

nav.m a.active {
  color: var(--nav_active_text_color);
  text-decoration: none;
  font-size: 3vw;
}

nav.m a.active i {
  color: var(--nav_active_text_color);
  text-decoration: none;
  font-size: 7vw;
}

iframe.m{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--font_size_d);
  margin-bottom: var(--font_size_d);
  width: 100%;
  height: 80vw;
  box-shadow: var(--image_d_shadow);	
}

#mc_embed_signup_scroll.m{
	background: var(--infobox_background);
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	font-size: var(--font_size_m);
}

.mc-field-group.m label{
	text-align: center;
	padding-top:10px;
	padding-bottom:20px;
	width: 10%;
}

.mc-field-group.m input{
	border-radius: 5px;
	width: 90%;
}

#mc-embedded-subscribe.m{
  background-color: var(--highlight_element_color);
  box-shadow: var(--basic_element_m_shadow);
  font-size: var(--font_size_m);
  font-weight: bold;
  border: none;
  color: white;
  padding: 2vw 5vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-left: 10%;
  cursor: pointer;	
}