@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100;200;300;400;500;600;700;800;900&display=swap');

.gsap-marker-start, .gsap-marker-scroller-end, .gsap-marker-scroller-start, .gsap-marker-end { display: none !important; }

/* 
font-family: 'DM Serif Display', serif;
font-family: 'Onest', sans-serif;
font-family: 'Saira Extra Condensed', sans-serif;



// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }





@media (min-width: 576px) {  }

@media (min-width: 768px) {  }

@media (min-width: 992px) {  }

@media (min-width: 1200px) {  }

@media (min-width: 1400px) {  }


*/

:root {
  --white: #fff;
  --almostwhite: #f0f0f0;
  --lightgrey: #F2F2F2;
  --pink: #F2ACBF;
  --lightblue: #7ED1F2;
  --red: #E9545A;
  --yellow: #F0C65E;
  --green: #7CB686;
  --darkblue: #4C97BE;
  --darkerblue: #253163;
  --purple: #8B74C0;
  --darkgrey: #4C4C4C; 
  --almostblack: #1a1a1a; 
}

html {  scroll-behavior: smooth; }
*,*::before,*::after {  box-sizing: border-box; font-family: 'Onest', sans-serif;  }



a {text-decoration: none; }
.white-text, .white-text a,.white-text a:hover { color: var(--white);}
body { width: 100%!important; min-height: 100vh;  font-family: 'Onest', sans-serif;  font-size: 1.25rem; display: flex; flex-direction: column; /*padding-top: 150px;*/ background-color: var(--lightgrey); margin: 0 !important;  }

main { overflow: hidden; background-color: var(--almostblack); z-index: 1; opacity: 1; transition: opacity ease-in 0.5s; }
main.preLoad { opacity: 0; }


::-moz-selection, .quote-Text::-moz-selection { 
  color: var(--white);
  background: var(--red);
  text-shadow: 4px 4px 0 var(--almostblack);
}

::selection, .quote-Text::selection {
  color: var(--white);
  background: var(--red);
  text-shadow: 4px 4px 0  var(--almostblack);
}

p::-moz-selection, ul.intro-list li::selection { 
  color: var(--white);
  background: var(--red);
  text-shadow: 4px 4px 0 var(--red);
}

p::selection, ul.intro-list li::selection {
  color: var(--white);
  background: var(--red);
  text-shadow: 4px 4px 0 var(--red);
}



/** BASIC HTML STRUCTURES **/
body.hide { overflow: hidden; }

section {min-height: 50vh; display: block; vertical-align: middle; width: 100%; position: relative; }

/* .container {  width: 100%;  max-width: 1800px; display: flex;   margin: 0 auto;  } */
/* section .container { max-width: 1400px;  min-height: 50vh; padding-top: 10vh; padding-bottom: 10vh; } */
  /* .row {   display: flex; min-height: 50vh; padding-left: 20px; padding-right: 20px; flex: 1;   align-items: center;    justify-content: center;  } */
  /* section .row { min-height: 50vh; } */
    /* .col {padding-left: 15px; padding-right: 15px; width: 100%; height: auto; flex: auto; position: relative; z-index: 1;  }
    .col.col-2 { flex: 2; }
    .col.col-3 { flex: 3; } */


/* @media (max-width: 768px) {
    .row {   display: block; }
    .col {padding-left: 30px; padding-right: 30px;}
}  */


.h30 { min-height: 30vh !important; }
.h40 { min-height: 40vh !important; }
.h50 { min-height: 50vh !important; }
.h60 { min-height: 60vh !important; }
.h70 { min-height: 70vh !important; }
.h80 { min-height: 80vh !important; }
.h90 { min-height: 90vh !important; }
.h100 { min-height: 100vh !important; }

.w70 { width: 70% !important; }
.w80 { width: 80% !important; }
.w90 { width: 90% !important; }
.w100 { width: 100% !important; }

/* .align-right { text-align: right !important; }
.align-center { text-align: center !important; } */

.clear { clear: both; }

/** stickerContainer ***/ 
.stickerContainer {  display: flex;  justify-content: flex-start;  align-items: baseline;}
.stickerContent {  position: sticky;  height: auto;  top: 50px;  bottom: auto;}

@media (max-width: 768px) {
  .stickerContainer, .stickerContent { position: relative !important; display: block; top: 0; }
}

 /** flex nav ***/ 
.flexNav {display: flex; }
@media (max-width: 768px) {
  .flexNav { display: block; }
}

/** divider **/
.divider { width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 5vh; margin-bottom: 5vh; }
.divider::before { content: ""; height: 10vh; border: var(--almostblack) solid 2px; }
.white-text  .divider::before { content: ""; height: 10vh; border: #fff solid 2px; }


/** listExample **/

.listExample { list-style: none; padding: 0; margin: 0; }
.listExample li { border-bottom: 1px solid #dfdfdf; display: flex; align-items: center; vertical-align: middle;} 
.listExample li div { display: flex; padding: 15px; vertical-align: baseline; height: 100%; flex: 1; } 
.listExample li div p,
.listExample li div h1, .listExample li div h2,
.listExample li div h3, .listExample li div h4
{ margin: 20px 0; padding: 0;}
.listExample .flex2 { flex: 2; }

.listExample.noLines li { border: none;}

.colorsList li{ opacity: 1; transition: opacity 500ms ease }

.colorsList:hover li { opacity: .5;  transition: opacity 500ms ease }
.colorsList li:hover { opacity: 1; }


/** basic styles **/
/* .quote-Text { font-size: 23px; } */
.quote-Text, .quote-Text b, .quote-Text a, .quote-Text span, .quote-Text u, .quote-Text strong, .quote-Text em, .quote-Text i
{ font-family: 'DM Serif Display', Georgia, Times, "Times New Roman", serif !important;}

h1 { font-size: 45px; line-height: 110%; font-weight: 400; font-family: 'Onest', sans-serif;}
h2 { font-size: 33px; line-height: 110%; font-weight: 700; font-family: 'Onest', sans-serif;}
h3 { font-size: 23px; line-height: 110%; font-weight: 700; font-family: 'Onest', sans-serif;}
h4 { font-size: 18px; line-height: 110%; font-weight: 700; font-family: 'Onest', sans-serif;}

p { font-size: 16px; font-weight: 400; padding-top: 0; margin-top: 0; margin-bottom: 1.5rem;}
p b {font-weight: 800;}
p.intro-text, ul.intro-list li { font-size: 1.2rem; font-weight: 400; }

p a { color: #564382; text-decoration: underline;  overflow-wrap: break-word; }
p a:hover { color: #2d214a; text-decoration: underline; }

.bigText { font-size: 1.8rem; line-height: 100%; }
.largeText { font-size: 2.5rem; line-height: 100%; }
.extraLargeText { font-size: 3rem;  line-height: 100%;  }
.extraExtraLargeText { font-size: 3rem;  line-height: 90%;  }
.numberOnlyExtraExtraLargeText { font-size: 6rem;  line-height: 90%;  }
.floatigH1 { font-size: 6rem;  line-height: 90%;  }


.nov8Section { position: relative; z-index: 1; }
.nov8title { font-size: 5vh;  line-height: 100%;   font-family: 'Onest', sans-serif;  -webkit-text-stroke: .2vh var(--white); color: transparent; letter-spacing: 3vw;  }

p.extraLP { font-size: 25px; }
@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 33px; }
  h3 { font-size: 23px; }
  h4 { font-size: 18px; }
  p { font-size: 16px; }
  p.intro-text, ul.intro-list li { font-size: 1.2rem; }
  p.extraLP { font-size: 45px; }
  
  .bigText { font-size: 1.8rem;  }
  .largeText { font-size: 3rem;  }
  .extraLargeText { font-size: 4.4rem;  }
  .extraExtraLargeText { font-size: 5.4rem;  }

  .numberOnlyExtraExtraLargeText {  font-size: 9rem;   }

  .nov8title { font-size: 7vh;  }

  .floatigH1 { font-size: 9rem;  }
}
@media (min-width: 992px) {
  h1 { font-size: 48px; }
  h2 { font-size: 39px; }
  h3 { font-size: 29px; }
  h4 { font-size: 19px; }
  p { font-size: 16px; }
  p.intro-text, ul.intro-list li { font-size: 1.4rem; }
  p.extraLP { font-size: 55px; }
  
  .bigText { font-size: 2rem;  }
  .largeText { font-size: 4rem;  }
  .extraLargeText { font-size: 6.6rem;  }
  .extraExtraLargeText { font-size: 7.6rem;  }
  .numberOnlyExtraExtraLargeText {  font-size: 13rem;   }
  .nov8title { font-size: 10vh; -webkit-text-stroke: .3vh var(--white); }
  .floatigH1 { font-size: 11rem;  }
}
@media (min-width: 1200px) {
  h1 { font-size: 60px; }
  h2 { font-size: 45px; }
  h3 { font-size: 35px; }
  h4 { font-size: 25px; }
  p { font-size: 18px; }
  p.intro-text, ul.intro-list li { font-size: 1.55rem; }
  p.extraLP { font-size: 60px; }
  /* .quote-Text { font-size: 45px; } */

  .bigText { font-size: 3rem;  }
  .largeText { font-size: 5rem;  }
  .extraLargeText { font-size: 8.8rem; margin-top: 60px; margin-bottom: 60px; }
  .extraExtraLargeText { font-size: 10rem; }
  .numberOnlyExtraExtraLargeText {  font-size: 17rem;   }
  .nov8title { font-size: 15vh;  }
  .floatigH1 { font-size: 14rem;  }
}
@media (min-width: 1400px) {
  .floatigH1 { font-size: 16rem;  }
}

.pRelative { position: relative !important; }
/* .d-flex { display: flex; } */

/* .responsive {  width: 100%;  height: auto;} */

a.btnStandard { color: var(--white); overflow: hidden; font-weight: 600; position: relative; 
  padding: 13px 55px; margin: 15px auto; display: inline-block; min-width: 60%; text-align: center; 
  cursor: pointer;  font-size: 18px; border-radius: 999px; font-family: 'Onest', sans-serif; letter-spacing: 1px;
  transition: all 500ms ease; z-index: 1;
}
a.btnStandard .icon { width: 54.5px !important; height: 100%; display: inline-block; position: absolute; right: 0; top: 0; z-index: 1; color: var(--white); }
a.btnStandard .icon svg { width: 70% !important; height: 100%; fill: var(--white); rotate: -90deg; transition: all 500ms ease; }
a.btnStandard::before { content: ""; position: absolute; border-radius: 999px; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--red); z-index: -1; transition: all 500ms ease;  }
a.btnStandard::after { content: ""; position: absolute; border-radius: 999px; right: 0; top: 0; width: 54.5px; height: 100%; background-color: var(--red); z-index: 0; transition: all 500ms ease; }

a.btnStandard:hover { letter-spacing: 2px; padding-right: 110px;  } 
a.btnStandard:hover  .icon svg { rotate: 0deg; }
a.btnStandard:hover::before {  width: calc(100% - 54.5px); }

a.btnStandard.btnBlack, a.btnStandard.btnBlack .icon, a.btnStandard.btnBlack .icon svg  { color: var(--white) !important; fill: var(--white) !important; }
a.btnStandard.btnBlack::before, a.btnStandard.btnBlack::after { background-color: var(--almostblack) !important; }

a.btnStandard.darkGrey, a.btnStandard.btnBlack .icon, a.btnStandard.darkGrey .icon svg  { color: var(--white) !important; fill: var(--white) !important; }
a.btnStandard.darkGrey::before, a.btnStandard.darkGrey::after { background-color: var(--darkgrey) !important; }

a.btnStandard.btnWhite, a.btnStandard.btnBlack .icon, a.btnStandard.btnWhite .icon svg  { color: var(--darkblue) !important; fill: var(--darkblue) !important; }
a.btnStandard.btnWhite::before, a.btnStandard.btnWhite::after { background-color: var(--white) !important; }

a.btnStandard.btnYellow, a.btnStandard.btnBlack .icon, a.btnStandard.btnYellow .icon svg  { color: var(--almostblack) !important; fill: var(--almostblack) !important; }
a.btnStandard.btnYellow::before, a.btnStandard.btnYellow::after { background-color: var(--yellow) !important; }


@media (max-width:768px) {
  a.btnStandard { width: 80%; margin: 0 auto; align-self: center; display: flex; text-align: center; justify-content: center; }
}

@media (min-width: 768px) {
  a.btnStandard { font-size: 18px;} 
}
@media (min-width: 992px) {
  a.btnStandard { font-size: 19px;} 
}
@media (min-width: 1200px) {
  a.btnStandard { font-size: 19px;} 
}

/** MainHead **/ 
.textAnimatedBG { line-height: 100%;position: relative; cursor:default ; z-index: 4; }
.textAnimatedBG div { display: inline-block; position: relative; }
.textAnimatedBG span { height: 100%; display: inline-block; position: relative; border-radius: 0; }
.textAnimatedBG span::before { content: ""; display: block; position: absolute;width: 100%; height: 100%; z-index: -1;
  /* background: rgb(233,84,90);
  background: linear-gradient(180deg, rgba(233,84,90,1) 0%, rgba(240,198,94,1) 25%, rgba(124,182,134,1) 50%, rgba(76,151,190,1) 75%, rgba(139,116,192,1) 100%); */
  background:red url("../img/hover.png") fixed center center; background-size: cover;
  opacity:0;

  -webkit-transition: opacity 5000ms ease;  -moz-transition: opacity 5000ms ease;   -ms-transition: opacity 5000ms ease;   -o-transition: opacity 5000ms ease;  transition: opacity 5000ms ease;
}
.textAnimatedBG span:hover::before{
 opacity: 1;
 -webkit-transition: opacity 500ms ease;  -moz-transition: opacity 500ms ease;   -ms-transition: opacity 500ms ease;   -o-transition: opacity 500ms ease;  transition: opacity 500ms ease;
}

@media (max-width:768px) {
  .textAnimatedBG span { padding-top: 0px; padding-bottom: 5px; } 
}

/* COLORS */

/*
    .color0 { color: #F2F2F2; color: rgba(242, 242, 242, 1); }
    .color1 { color: #F2ACBF; color: rgba(242, 172, 191, 1); }
    .color2 { color: #7ED1F2; color: rgba(125, 209, 242, 1); }
    .color3 { color: #E9545A; color: rgba(233, 84, 90, 1); }
    .color4 { color: #F0C65E; color: rgba(240, 198, 94, 1); }
    .color5 { color: #7CB686; color: rgba(124, 182, 134, 1); }
    .color6 { color: #4C97BE; color: rgba(76, 151, 190, 1); }
    .color7 { color: #8B74C0; color: rgba(139, 116, 192, 1); }
    .color8 { color: #4c4c4c; color: rgba(76, 76, 76, 1); }


    .bgcolor0 { background-color: #F2F2F2 !important; }
    .bgcolor1 { background-color: #f2acbf !important; }
    .bgcolor2 { background-color: #7ED1F2 !important; }
    .bgcolor3 { background-color: #E9545A !important; }
    .bgcolor4 { background-color: #F0C65E !important; }
    .bgcolor5 { background-color: #7CB686 !important; }
    .bgcolor6 { background-color: #4C97BE !important; }
    .bgcolor7 { background-color: #8B74C0 !important; }
    .bgcolor8 { background-color: #4c4c4c !important; }
    .bgcolor9 { background-color: #1a1a1a !important; }
*/


.TXTlightgrey { color: var(--lightgrey) !important; }
.TXTpink { color: var(--pink) !important; }
.TXTlightblue { color: var(--lightblue) !important; }
.TXTred { color: var(--red) !important; }
.TXTyellow { color: var(--yellow) !important; }
.TXTgreen { color: var(--green) !important; }
.TXTdarkblue { color: var(--darkblue) !important; }
.TXTpurple { color: var(--purple) !important; }
.TXTdarkgrey { color: var(--darkgrey) !important; }
.TXTalmostblack { color: var(--almostblack) !important; }


.BGlightgrey { background-color: var(--lightgrey); }
.BGpink { background-color: var(--pink); }
.BGlightblue { background-color: var(--lightblue); }
.BGred { background-color: var(--red); }
.BGyellow { background-color: var(--yellow); }
.BGgreen { background-color: var(--green); }
.BGdarkblue { background-color: var(--darkblue); }
.BGpurple { background-color: var(--purple); }
.BGdarkgrey { background-color: var(--darkgrey); }
.BGalmostblack { background-color: var(--almostblack); }
.BGalmostwhite { background-color: var(--almostwhite); }
.BGwhite { background-color: var(--white); }

.gradientRadialRed { position: relative;
  background: rgb(233,84,90);
  background: radial-gradient(circle, rgba(233,84,90,1) 0%, rgba(126,209,242,1) 70%);
}
.gradientRadialRed::before  {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  height: 40%; width: 100%; 
  background: rgb(233,84,90);
  background: linear-gradient(180deg, rgba(233,84,90,1) 0%, rgba(233,84,90,0) 100%);
}

.gradientRadialRed::after  {
  content: ""; position: absolute; bottom: 0; left: 0; z-index: 1;
  height: 40%; width: 100%; 
  background: rgb(126,209,242);
  background: linear-gradient(180deg, rgba(233,84,90,0) 0%, rgba(233,84,90,1) 100%);
}

.gradientRadialRed .container { z-index: 2 !important; position: relative; }

.gradient { 
  background: rgb(233,84,90);
background: linear-gradient(180deg, rgba(233,84,90,1) 0%, rgba(240,198,94,1) 25%, rgba(124,182,134,1) 50%, rgba(76,151,190,1) 75%, rgba(139,116,192,1) 100%);
}

.gradientReverse { 
  background: rgb(233,84,90);
background: linear-gradient(180deg, rgba(139,116,192,1) 0%, rgba(76,151,190,1) 25%, rgba(124,182,134,1) 50%, rgba(240,198,94,1) 75%,  rgba(233,84,90,1) 100%);
}

.gradientLight { 
  background: rgb(240,240,240);
  background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(180,234,255,1) 53%);
}



 .gradientMoving { 

  background-size: 200% 200%;
  background-image: linear-gradient(-45deg, rgba(233,84,90,1) 0%, rgba(124,182,134,1) 25%, rgba(76,151,190,1) 51%, rgba(139,116,192,1) 100%);
  -webkit-animation: AnimateBG 10s ease infinite;
          animation: AnimateBG 10s ease infinite;

}


/** dataList **/

.dataList { list-style: none; padding: 0; margin: 0; }
.dataList  li { border-bottom: 1px solid var(--darkgrey); padding-top: 15px; padding-bottom: 15px; }
.dataList  li span { font-weight: bold; color: var(--yellow); transition: color 500ms ease }
.dataList  li:hover span { color: var(--red) }
.dataList  li, .dataList  li span { font-size: 18px;} 
@media (min-width: 768px) {
  .dataList  li, .dataList  li span { font-size: 20px;} 
}
@media (min-width: 992px) {
  .dataList  li, .dataList  li span { font-size: 30px;} 
}
@media (min-width: 1200px) {
  .dataList  li, .dataList  li span { font-size: 40px;} 
}


/** header and navigation **/
.logo {  z-index: 99; position: relative;  transition: left ease 500ms;  }
.logo h2 a { font-family: 'Saira Extra Condensed', sans-serif !important; color: var(--white);  font-size: 1.5rem; line-height: 100% !important; }

.logo h2 a span {  transition: all 0.3s ease; width: auto; font-family: 'Saira Extra Condensed', sans-serif !important; }
.logo h2 a .standard { display: inline-block; width: auto; }
.logo h2 a .hovered { display: none;  width: 0px;  }
.logo h2 a .deadw { display: inline-block; }

.logo h2 a.a-logo-header { position: relative; }
.logo h2 a.a-logo-header::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.navDesktop {  display: flex !important; justify-content: center; align-items: center;  vertical-align: middle;  flex: 1; flex-wrap: wrap; }

@media (min-width: 576px) {  }

@media (min-width: 768px) {  }

@media (min-width: 992px) {
  .logo {  position: absolute; left: 0;  }
  .logo h2 a { font-size: 2rem; }
  .logo h2 a:hover .standard { display: none;  width: 0px;  }
  .logo h2 a:hover .hovered { display: inline-block; width: auto; letter-spacing: -1px;   }
  .logo h2 a:hover .deadw { display: inline-block; color: var(--red); letter-spacing: -1px; }
}

@media (min-width: 1200px) {
  .logo h2 a { font-size: 3rem; }
}

@media (min-width: 1400px) {  }



/** nav desktop menu */ 

.navDesktop .menu { display: flex; list-style: none; padding: 0; justify-content: space-around; flex: 1; }
.navDesktop .menu li { margin: 0 10px; }
.navDesktop .menu li a { color: var(--white); position: relative;  border: 1px solid transparent; padding: 10px 15px; border-radius: 9999px; transition: ease 500ms all;  }
.navDesktop .menu li a::before { content: ""; opacity: 1; width: 50%; height: 1px; background-color: var(--white); position: absolute; left: 50%; margin-left: -25%; bottom: -3px; transition: ease 500ms all;  }
.navDesktop .menu li a:hover::before { transform: scaleX(1.5); }
.navDesktop .menu li a:active::before, .navDesktop .menu li a.active::before { opacity: 0; }
.navDesktop .menu li a:active, .navDesktop .menu li a.active { border: 1px solid var(--white); }

.navDesktop .menu li a.active:hover { background-color: var(--white); border-color: var(--white); color: var(--almostblack); }

/** hamburger  menu */ 

.wrap-hamburger { display: flex; color: var(--white); z-index: 99; cursor: pointer; justify-content: center; align-items: center; line-height: 100%; transition: color ease 300ms; font-size: 1.1rem; font-weight: bold; }

.hamburger {   display: flex;  flex-direction: column;  cursor: pointer;  z-index: 99;  position: relative;  height: 33px;  align-self: center;  margin-left: 5px;   justify-content: center; }

.bar1, .bar2, .bar3 {   width: 60%;  height: 5px;  background-color: var(--white);  margin: 3px 0;  transition: all 0.3s ease;  border-radius: 9999px;  align-self: center; }

.bar2 {  width: 30px; transform: scaleY(.5); }

.wrap-hamburger:hover .bar2 { margin: 0; }

.hamburger.active .bar1 { width: 30px;  transform: rotate(-45deg) translate(-5px, 6px) scaleY(.2);  }
.hamburger.active .bar2 {  opacity: 0; margin: 0;}
.hamburger.active .bar3 { width: 30px; transform: rotate(45deg) translate(-5px, -6px); }

.wrap-hamburger:hover .hamburger.active .bar1 {  transform: rotate(-30deg) translate(-5px, 6px) scaleY(.2) } 
.wrap-hamburger:hover .hamburger.active .bar3 { transform: rotate(30deg) translate(-5px, -6px);  } 

/** overlay area **/ 

.OverlayArea { position: fixed; top: 0; left: 0; width: 0; display: flex; overflow: hidden; z-index: 9;  height: 100vh; padding: 0 !important; opacity: 0;  transition: 0.5s; overflow: hidden; }
.OverlayArea .container, .OverlayArea .container-fluid, .OverlayArea .row, .OverlayArea .col { height: 100%; }

.OverlayArea.active {   display: flex;  flex-direction: column;   padding: 20px;  width: 100%; opacity: 1; }


.hamburger.active .bar1, .hamburger.active .bar2, .hamburger.active .bar3 { background-color: var(--almostwhite) !important; }


.menuFullscreen { display: flex; list-style: none; padding: 0; justify-content: space-around; vertical-align: middle;   flex-flow: row wrap;     flex-direction: column;
  justify-content: space-evenly; height: 100%;  padding-top: 100px !important; }

.menuFullscreen li { margin: 0 10px; flex: 100%; flex-direction: row; flex: 2 auto; display: flex; justify-content: space-around; vertical-align: middle;   }

.menuFullscreen li a { color: var(--white); display: inline-block; text-align: center; vertical-align: middle; font-family: 'Onest', sans-serif; font-weight: 900; font-size: 3rem; }
/* .menuFullscreen li a.active { font-family: 'DM Serif Display', serif; font-style: italic;  } */
.menuFullscreen li a:hover { color: var(--yellow); font-family: 'DM Serif Display', serif; font-style: italic;  }

.OverlayArea .BlogMenu { padding-top: 100px !important; position: relative; }
.OverlayArea .BlogMenu .lines { width: 0; transition-duration: 2000ms;    transition-timing-function: ease; right:0;   transition-property: all;    transform: scaleX(0);    transform-origin: 0% 100%;}
.OverlayArea.active .BlogMenu .line1 { background-color: var(--yellow); position: absolute; top: 0; right: -4.5%; width: 4%; height: 100%; transition-delay: calc(50ms * 0);  transform: scaleX(1);   }
.OverlayArea.active .BlogMenu .line2 { background-color: var(--yellow); position: absolute; top: 0; right: -9%; width: 3%; height: 100%; transition-delay: calc(50ms * 5); transform: scaleX(1);  }
.OverlayArea.active .BlogMenu .line3 { background-color: var(--yellow); position: absolute; top: 0; right: -13%; width: 2%; height: 100%; transition-delay: calc(50ms * 10); transform: scaleX(1);  }
.OverlayArea.active .BlogMenu .line4 { background-color: var(--yellow); position: absolute; top: 0; right: -16%; width: .5%; height: 100%; transition-delay: calc(50ms * 15); transform: scaleX(1);  }
.OverlayArea.active .BlogMenu::before { position: absolute; top: 0; left: -25%; width: 26%; height: 100%; background-color: var(--yellow); content: ""; }


@media (min-width: 576px) { .menuFullscreen li a { font-size: 4rem; }  }

@media (min-width: 768px) { .menuFullscreen li a { font-size: 5rem; }  }

@media (min-width: 992px) { .menuFullscreen li a { font-size: 4rem; }  }

@media (min-width: 1200px) { .menuFullscreen li a { font-size: 5rem; }  }

@media (min-width: 1400px) { .menuFullscreen li a { font-size: 6rem; }  }


/** sroll scrolled header **/

header { display: flex; justify-content: space-between;  align-items: center;  padding: 0px;  background-color: transparent;   position: fixed;  z-index: 9;  width: 100%;  padding-top: 25px;  padding-bottom: 25px;
transition: ease all 500ms; width: 100% !important; }

header.scrolled {
  background-color: var(--almostwhite);
  -webkit-box-shadow: 0 15px 15px 0 rgba(0,0,0,.1); box-shadow: 0 15px 15px 0 rgba(0,0,0,.1);
}
header.internalPages {
  background-color: var(--almostwhite);
} 
header.scrolled .bar1, header.scrolled .bar2, header.scrolled .bar3,
header.internalPages .bar1, header.internalPages .bar2, header.internalPages .bar3
{
  background-color: var(--almostblack);
}

@media (min-width:768px) { /* move the logo */
  header { top: -100px; }
}

@media (min-width:992px) { /* move the logo */
  header.active .logo { position: absolute !important; left: 50%; }
}

header.active .logo h2 a, header.active .wrap-hamburger { color: var(--almostwhite) !important;  }
 
header.scrolled .logo h2 a, header.scrolled .logo h2 a, header.scrolled  .wrap-hamburger, header.scrolled .navDesktop .menu li a,
header.internalPages .logo h2 a, header.internalPages .logo h2 a, header.internalPages  .wrap-hamburger, header.internalPages .navDesktop .menu li a 
{ color: var(--almostblack); }

header.scrolled .navDesktop .menu li a::before,
header.internalPages .navDesktop .menu li a::before
{ background-color: var(--almostblack) ; }

header.scrolled .navDesktop .menu li a:active, header.scrolled  .navDesktop .menu li a.active,
header.internalPages .navDesktop .menu li a:active, header.internalPages  .navDesktop .menu li a.active 
{ border-color: var(--almostblack); }


header.scrolled  .navDesktop .menu li a.active:hover, header.internalPages  .navDesktop .menu li a.active:hover  {background-color: var(--almostblack); color: var(--white); border-color: var(--almostblack); }

body.hide header.scrolled  { top: 0px !important;}

/***** heroHome  ******/ 
.heroHome { position: relative; overflow: hidden; z-index: 1;  } 
.heroHome .container { z-index: 1; }
.heroHome .circle1 { fill: var(--green); filter: blur(90px); width: 600px; height: 600px; position: absolute; left: -10vw; top: -10vw; z-index: 0; opacity: .7; scale: 1 .8; rotate: 0deg; animation: floatGradientCircles 4s ease-in-out infinite;  }
.heroHome .circle2 { fill: var(--purple); filter: blur(90px); width: 900px; height: 900px; position: absolute; right: -10vw; top: -25vw; z-index: 0; opacity: .7; scale: .5 1; rotate: -45deg; animation: floatGradientCircles 4s ease-in-out infinite;  }
.heroHome .circle3 { fill: var(--darkerblue); filter: blur(150px); width: 800px; height: 800px; position: absolute; left: -4vw; bottom: -25vh; z-index: 0; opacity: .7; scale: 1 .5; rotate: -0deg;  animation: floatGradientCircles 8s ease-in-out infinite;  }
.heroHome .circle4 { fill: var(--yellow); filter: blur(150px); width: 800px; height: 800px; position: absolute; left: 5vw; top: -0vw; z-index: 0; opacity: .7; scale: .5 1; rotate: -20deg;  animation: floatGradientCircles 10s ease-in-out infinite;  }
.heroHome .circle5 { fill: var(--red); filter: blur(150px); width: 800px; height: 800px; position: absolute; left: 16vw; top: -0vw; z-index: 0; opacity: .5; scale: .5 1; rotate: 15deg;  animation: floatGradientCircles 15s ease-in-out infinite;  }
.heroHome .circle1, .heroHome .circle2, .heroHome .circle3, .heroHome .circle4, .heroHome .circle5 { display: none ; }

@media (min-width: 992px) { 
  .heroHome .circle1, .heroHome .circle2, .heroHome .circle3, .heroHome .circle4, .heroHome .circle5 { display: block !important; }
}
/** Area flag ***/

.areaFlag { position: relative; z-index: 1;  }
/* .areaFlag .container { overflow: hidden; } */
.areaFlag::before { content: ""; position: absolute; width: 100%; height: 0; top: -200px; left: 0; z-index: -2;

  border-top: 200px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 100vw solid var(--green);
}

.flag1 { position: absolute; top: 0; right: -20px; width: 25%; z-index: -1; display: none; }
.flag2 { position: absolute;  top: 0; right: -20px; width: 55%; z-index: -2; display: none; }

.areaFlagMobile { position: relative; z-index: 1; }
.flag1Mobile1 { position: absolute; top: 8%; right: -20px; width: 100%; z-index: -1; transform: scaleY(0.4); }
.flag2Mobile2 { position: absolute;  top: 30%; right: -20px; width: 150%; z-index: -2; transform: scaleY(0.7); }

.flagText { position: relative;  font-size: 6vh; line-height: 100%; margin-top: 150px; margin-bottom: 150px;   }

@media (min-width:576px) {
  .flag1Mobile1 { top: 5vw; right: -20%; width: 80vw; transform: scaleY(0.4); }
  .flag2Mobile2 { top: 16vw; right: -20%; width: 120vw; transform: scaleY(0.7); }
}

@media (min-width:640px) {
  .flag1Mobile1 { top: -5vw; right: -20%; width: 80vw; transform: scaleY(0.4); }
  .flag2Mobile2 { top: 5vw; right: -20%; width: 120vw; transform: scaleY(0.7); }
}

@media (min-width: 768px) {
  .flag1Mobile1, .flag2Mobile2 { display: none;  }
  .flag1 {  top: 0vw; right: -20px; width: 43vw; display: block; }
  .flag2 { top: -8vw; right: -20px; width: 90vw;  display: block;   }
  .flagText { position: absolute; top: 5%; right: 25px; font-size:6vh;  } 
}
@media (min-width: 992px) {
  .flag1Mobile1, .flag2Mobile2 { display: none;  }
  .flag1 {  top: 0vw; right: -20px; width: 35vw; display: block; }
  .flag2 { top: -8vw; right: -20px; width: 75vw;  display: block;   }
  .flagText { position: absolute; top: 5%; right: 25px; font-size:7vh;  }  
}
@media (min-width: 1200px) {
  .flag1Mobile1, .flag2Mobile2 { display: none;  }
  .flag1 {  top: -3vw; right: -20px; width: 43vw;  max-width: 30vw; display: block; }
  .flag2 { top: -10vw; right: -20px; width: 90vw; max-width: 65vw;  display: block; }
  .flagText { position: absolute; top: 5%; right: 25px; font-size:9vh;  }  
}

.bloodPatternBg {  width: 200vh; max-width: initial; position: absolute; z-index: -1; top: -50vh; right: -20vw;  }

@media (min-width: 768px) {
  .bloodPatternBg { width: 200vh; top: -30vh; right: -10vw;  }
}
@media (min-width: 992px) {
  .bloodPatternBg { width: 120vw; top: -20vh; right: -5vw;  }
}
@media (min-width: 1200px) {
  .bloodPatternBg { width: 120vw; top: -20vh; right: -5vw;  }
}
@media (min-width:1400px) {
  .bloodPatternBg { width: 100vw; top: -20vh; right: -15vw;   }
}


.bloodCards {  background-color: #B30303; position: relative; max-width: 200px; width: 80%;  border: none; display: block;  max-width: 400px;  }
.bloodCards .dataPoint { font-weight: bold; font-family: 'Onest', sans-serif; }
.bloodCards.card001 .svgBloodShaped { display: none; position: absolute;   top: -60%;   left: -40%;  width: 150%;  z-index: -1;  transform: rotate(-120deg); }
.bloodCards.card002 .svgBloodShaped { display: none; position: absolute;   top: -30%;  left: -45%;  width: 150%;  z-index: -1;  transform: rotate(39deg); }
.bloodCards.card003 .svgBloodShaped {  display: none; position: absolute;   top: -45%;  left: -40%;  width: 150%;  z-index: -1;  transform: rotate(180deg); }

@media (min-width: 425px) { 
  .bloodCards { width: 50%;  }
}

@media (min-width: 576px) { 
  .bloodCards { width: 50%;  }
  /* .bloodCards.card001 .svgBloodShaped { top: -65%;   left: -35%;  width: 120%;  z-index: -1;  transform: rotate(-127deg); }
  .bloodCards.card002 .svgBloodShaped { top: -30%;  left: -28%;  width: 100%;  z-index: -1;  transform: rotate(39deg); }
  .bloodCards.card003 .svgBloodShaped {  top: -38%;  left: -40%;  width: 120%;  z-index: -1;  transform: rotate(180deg); } */
}
@media (min-width: 768px) {
  .bloodCards { margin-top: 5vh;  margin-bottom: 5vh;  width: 100%;  background-color: transparent; }
  .bloodCards.card001 .svgBloodShaped { display: block;  top: -55%;   left: -30%;  width: 110%;  z-index: -1;  transform: rotate(-127deg); }
  .bloodCards.card002 .svgBloodShaped { display: block;   top: -40%;  left: -30%;  width: 110%;  z-index: -1;  transform: rotate(39deg); }
  .bloodCards.card003 .svgBloodShaped {  display: block;   top: -45%;  left: -40%;  width: 120%;  z-index: -1;  transform: rotate(180deg); }
}
@media (min-width: 992px) {
  .bloodCards { max-width: 300px; width: 100%; }
  .bloodCards.card001 .svgBloodShaped {top: -74%;   left: -41%;  width: 150%;  z-index: -1;  transform: rotate(-127deg); }
  .bloodCards.card002 .svgBloodShaped {   top: -41%;  left: -44%;  width: 150%;  z-index: -1;  transform: rotate(39deg); }
  .bloodCards.card003 .svgBloodShaped {  top: -38%;  left: -50%;  width: 150%;  z-index: -1;  transform: rotate(180deg); }
}
@media (min-width: 1200px) {
  .bloodCards { max-width: 400px; width: 100%; }
  .bloodCards.card001 .svgBloodShaped {  top: -74%;   left: -41%;  width: 150%;  z-index: -1;  transform: rotate(-127deg); }
  .bloodCards.card002 .svgBloodShaped {  top: -41%;  left: -44%;  width: 150%;  z-index: -1;  transform: rotate(39deg); }
  .bloodCards.card003 .svgBloodShaped { top: -38%;  left: -50%;  width: 150%;  z-index: -1;  transform: rotate(180deg); }
}


/** Pink blue lines **/
.movingTextSection { min-height: auto; overflow: hidden;  }
.wraphscroll { width: 100%; display: block; height: auto; float: left; min-height: auto; z-index: 2; position: relative; }
.hscroll {   white-space: nowrap; margin: 0; }

.pinkBlueTopLines { position: relative !important; z-index: 2; background-color: var(--almostwhite);  }
.pinkBlueTopLines .pinkbluebar { position: absolute; top: -9vw; width: 100%; height: auto; transform: scaleY(1); }
/* .pinkBlueTopLines .semi-circle {  width: 5vw;  height: 2.5vw;  background-color: var(--almostwhite);  border-radius: 0 0 10rem 10rem; -webkit-box-shadow: 0 40px 15px 0 rgba(0,0,0,.3); 
  box-shadow: 0 2.1vw 15px 0 rgba(0,0,0,.3);
  position: absolute; left: 50%; bottom: -2.5vw; transform: scalex(30) scaleY(20); z-index: -1;
   display: none;
} */

@media (min-width: 768px) {
  .pinkBlueTopLines .pinkbluebar {  top: -8.5vw;  transform: scaleY(.8); }
  /* .pinkBlueTopLines .semi-circle {left: 50%; bottom: -2.5vw; transform: scalex(30) scaleY(10); z-index: -1;  box-shadow: 0 1.5vw 5px 0 rgba(0,0,0,.3); display: block;  }  */
}
@media (min-width: 992px) {
  /* .pinkBlueTopLines .semi-circle {left: 50%; bottom: -2.5vw; transform: scalex(30) scaleY(8); z-index: -1;  box-shadow: 0 2.1vw 15px 0 rgba(0,0,0,.3);  }  */
}
@media (min-width: 1200px) {
  .pinkBlueTopLines .pinkbluebar {  top: -7vw;  transform: scaleY(.5); }
  .pinkBlueTopLines .semi-circle {  width: 5vw;  height: 2.5vw;  background-color: var(--almostwhite);  border-radius: 0 0 10rem 10rem;
    /* box-shadow: 0 .5.5vw 7px 0 rgba(0,0,0,.3); */
    box-shadow: 0 2.1vw 15px 0 rgba(0,0,0,.3);
    position: absolute; left: 50%; bottom: -2.5vw; transform: scalex(30) scaleY(6); z-index: -1;
  }
  
}

@media (min-width:1400px) {
  .pinkBlueTopLines .pinkbluebar {  top: -7vw;  transform: scaleY(.5); }
  /* .pinkBlueTopLines .semi-circle { left: 50%; bottom: -2.5vw; transform: scalex(30) scaleY(6);  box-shadow: 0 .3vw 4x 0 rgba(0,0,0,.3);   }  */
}

.sourceBtn {  color: var(--darkblue) !important; border: none; text-align: left; color: var(--darkgrey); background-color: var(--white); font-weight: bold;font-family: 'Onest', sans-serif; position: relative; }
.sourceBtn.collapsed {  color: var(--almostblack) !important; }
.sourceBtn:hover  { color: var(--darkblue) !important; }
.sourceBtn.collapsed:before {content: "+"; margin-right: 25px; }
.sourceBtn:before {content: "-"; margin-right: 25px; }

#collapseSource { margin-top: 15px; }

/** areaMApHome **/

.areaMApHome { position: relative; z-index: 1; }
.areaMApHome .container { z-index: 1; }
.areaMApHome .circle1 { fill: var(--lightblue); filter: blur(90px); width: 600px; height: 600px; position: absolute; left: -10vw; top: -25vw; z-index: 0; opacity: 1; scale: .7 1; rotate: 45deg; animation: floatFlag 10s ease-in-out infinite;  }
.areaMApHome .circle2 { fill: var(--lightblue); filter: blur(90px); width: 900px; height: 900px; position: absolute; right: -10vw; top: -25vw; z-index: 0; opacity: 1; scale: .7 1; rotate: -45deg; animation: floatFlag 10s ease-in-out infinite;  }
.areaMApHome .circle3 { fill: var(--lightblue); filter: blur(90px); width: 900px; height: 900px; position: absolute; left: -4vw; bottom: -12vh; z-index: 0; opacity: 1; scale: .7 1.5; rotate: 15deg;  animation: floatFlag 5s ease-in-out infinite;  }

.areaMApHome .circle1, .areaMApHome .circle2, .areaMApHome .circle3 { display: none ; }
@media (min-width: 992px) { 
  .areaMApHome .circle1, .areaMApHome .circle2, .areaMApHome .circle3  { display: block !important; }
}
/** bottomGradientBar */

.bottomGradientBar::before { content: ""; position: absolute;  bottom: 0; background-color: var(--red); width: 100vw; height: 50%; z-index: 0;
  background: rgb(26,26,26);   background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,1) 100%);
}
.bottomGradientBar .container { z-index: 1;}

.redGradientBar.bottomGradientBar:before { height: 30%;  background: rgb(233, 84, 90, 0);  background: linear-gradient(180deg, rgba(126, 209, 242, 0) 0%, rgba(233, 84, 90, 1) 100%)  }

/** OUR MISSION **/

.ourMissionMain { z-index: 1;}

.floatigH1 { width: 100%; position: absolute; top: -8vw; left: 5px; }

.missionFlagArea { position: relative;  }
.missionFlagWrap { position: relative; bottom: -184px;  overflow-y: hidden; width: 600px; height: 620px; display: block; transform: scale(.6); margin-top: -429px; }
.missionFlagWrap img { width: 73%; position: absolute;  right: 0; bottom: 0%; margin-left: -25%; z-index: 0; z-index: 2; animation: floatFlag 15s ease-in-out infinite;  }

.missionFlagWrap .squareFlag { width: 296px; height: 195px; display: block; background-color: var(--lightblue);  overflow: hidden; 
position: absolute; bottom: 2px; left: 42px; z-index: 0;  }

.missionFlagWrap .triangl1Flag{ z-index: 1;  display: block;
width: 0;height: 0;border-style: solid;
border-width: 100px 150px 0 0;
border-color: var(--almostblack) transparent transparent transparent;
position: absolute; bottom: 100px; left: 40px;
}

.missionFlagWrap .triangl2Flag{ z-index: 1;  display: block;
  width: 0;height: 0;border-style: solid;
  border-width: 0 150px 100px 0;
  border-color: transparent var(--almostblack)  transparent transparent;
  position: absolute; bottom: 100px; right: 260px;
}

.missionFlagWrap .triangl3Flag{ z-index: 5;  display: block;
  width: 0;height: 0;border-style: solid;
  border-width: 0 0 100px 150px;
  border-color: transparent transparent var(--white) transparent;
  position: absolute; bottom: 0; right: 260px;
}
  
.missionFlagWrap .triangl4Flag{ z-index: 5;  display: block;
  width: 0;height: 0;border-style: solid;
  border-width:  100px 0 0 150px;
  border-color: transparent transparent transparent var(--white)  ;
  position: absolute; bottom: 0; left: 40px;
}
@media (min-width: 768px) {
  .missionFlagWrap { position: absolute; transform: scale(.9); bottom: -121px; top: initial; right: -25vw; } 
}

@media (min-width: 992px) {
  .missionFlagWrap { position: absolute; transform: scale(.9); bottom: -121px; top: initial; right: -15vw; } 
}

@media (min-width: 1200px) { 
  .missionFlagWrap { position: absolute; transform: scale(1.5); bottom: 5px; top: initial; right: -10vw; } 
}

@media (min-width: 1400px) {
  .missionFlagWrap { position: absolute; transform: scale(1.5); bottom: 5px; top: initial; right: 0; } 
}


.missionFloatingPerson { position: relative; }
.missionFloatingPerson .floatingPerson1 { position: relative;  width: 70%; margin: 5vh auto 2vh auto;  }
.missionFloatingPerson .floatingPerson2 { position: relative;  width: 70%; margin: 5vh auto 2vh auto;  }

#paradeWrap {  min-height: auto; width: 100vw; overflow: hidden;  }
#parade { justify-content: space-between;   align-items: flex-end; min-height: auto; width: 100vw; } 
#parade .g-person { max-width: 450px; width: 25vw; margin: 0 -7vw;}
#parade .g-person3, #parade .g-person4, #parade .g-person8 { z-index: 2; }
#parade .g-person5 { max-width: 450px; width: 20vw; margin-left: -10vw; }

@media (min-width: 768px) { 
  .missionFloatingPerson .wrapPerson1 {  margin-bottom: 35vh; }
  .missionFloatingPerson .floatingPerson1 { position: absolute; top: 50vw; left: 0vw; width: 55vw; animation: floatFlag 15s ease-in-out infinite; z-index: 0; }
  .missionFloatingPerson .floatingPerson2 { position: absolute; top: 8vh; right: -10vw; width: 55vw; animation: floatFlag 15s ease-in-out infinite; z-index: 0; }
  #parade .g-person1 { animation: movingParade 10s ease-in-out infinite;  }
  #parade .g-person2 { animation: movingParade 8s ease-in-out infinite;  }
  #parade .g-person3 { animation: movingParade 4s ease-in-out infinite; }
  #parade .g-person4 { animation: movingParade 10s ease-in-out infinite;  }
  #parade .g-person5 { animation: movingParade 15s ease-in-out infinite; }
  #parade .g-person6 { animation: movingParade 8s ease-in-out infinite;  }
  #parade .g-person7 { animation: movingParade 12s ease-in-out infinite;  }
  #parade .g-person8 { animation: movingParade 4s ease-in-out infinite; }
}

@media (min-width: 992px) {
  .missionFloatingPerson .floatingPerson1 { position: absolute; top: 40vw; left: -0vw; width: 65vw; }
  .missionFloatingPerson .floatingPerson2 { position: absolute; top: 8vw; right: -10vw; width: 55vw; }
}

@media (min-width: 1200px) {
  .missionFloatingPerson .floatingPerson1 { position: absolute; top: 25vw; left: -2vw; width: 60vw; }
  .missionFloatingPerson .floatingPerson2 { position: absolute; top: 8vw; right: -10vw; width: 60vw; }
}

@media (min-width: 1400px) { 
  .missionFloatingPerson .floatingPerson1 { position: absolute; top: 19vw; left: 6vw; width: 55vw; max-width: 865px; }
  .missionFloatingPerson .floatingPerson2 { position: absolute; top: -15vw; right: -10vw; width: 64vw; max-width: 1150px; }
  #parade { justify-self: stretch; width: 100vw; overflow: hidden;

  }
  #parade .g-person { max-width: 300px; width: 20vw; margin: 0 -0; margin-bottom: -15px;  }
  #parade .g-person2 { z-index: 3; }
  #parade .g-person1 {  margin-right: -0vw; }
  #parade .g-person3 {  margin-left: -0vw; }
  #parade .g-person5 { margin-left: -5vw; }
  #parade .g-person6 { margin-left: -5vw; }
  #parade .g-person7 { margin-left: -5vw; }
  #parade .g-person8 { margin-right: 4vw;    margin-left: -7vw; }
  #parade .g-person4 { margin-left: -12vw; }
  
}

#educational h3, #educational p { z-index: 2; position: relative; }
#educational .heart1 { position: absolute; z-index: 1; width: 20vw; top: -7vw; right: 5vw; animation: movingParade 20s ease-in-out infinite; filter: blur(4px); }
#educational .heart2 { position: absolute; z-index: 1; width: 15vw; top: 20vw; left: -7.5vw; animation: movingParade 10s ease-in-out infinite;}
#educational .heart3 { position: absolute; z-index: 1; width: 50vw; bottom: -7vw; left: 5vw; animation: floatFlag 20s ease-in-out infinite;  filter: blur(4px); }


@media (min-width: 768px) {
  #educational .heart1 { width: 20vw; top: -7vw; right: 5vw; }
  #educational .heart2 { width: 15vw; top: 10vw; left: 5vw; }
  #educational .heart3 { width: 50vw; bottom: -20vw; left: 5vw; }
}

@media (min-width: 992px) {
  #educational .heart1 { width: 20vw; top: -7vw; right: 5vw; }
  #educational .heart2 { width: 15vw; top: 10vw; left: 5vw; }
  #educational .heart3 { width: 40vw; bottom: -15vw; left: 5vw; }
}

@media (min-width: 1200px) {
  #educational .heart1 { width: 20vw; top: -7vw; right: 5vw; }
  #educational .heart2 { width: 15vw; top: 10vw; left: -7vw; }
  #educational .heart3 { width: 40vw; bottom: -15vw; left: 5vw; }
}

@media (min-width: 1400px) {
  #educational .heart1 { width: 20vw; top: -7vw; right: 5vw;  animation: movingParade 5s ease-in-out infinite;  filter: blur(15px); }
  #educational .heart2 { width: 15vw; top: 7vw; left: -5vw; }
  #educational .heart3 { width: 30vw; bottom: -5vw; left: 5vw; animation: floatFlag 20s ease-in-out infinite;  filter: blur(15px); }
}



/** blogRepeater ***/
.blogArea .g-5, .blogAreaHome .g-5 { --bs-gutter-x: 4rem !important; --bs-gutter-y:4rem !important; }
.blogArea { position: relative; }
.blogArea .container { z-index: 1; }

.blogArea hr { border-color: var(--almostblack); }

.blogWrap {  }

.blogRepeater { background-color: var(--white);  display: flex; border-radius: 29px; transition: all ease 500ms; border: none;  position: relative; max-width: 90%; margin-left: auto; margin-right: auto;}

/* .blogRepeater::before { content: ""; position: absolute; top: 0; left: 0; border-radius: 29px; width: 100%;  height: 100%; background-color: var(--white);  transition: all ease 500ms; } */
.blogRepeater figure { border-radius: 29px 29px 0px 0px; overflow: hidden; transition: all ease 500ms;  width: 100%;  }
.blogRepeater .blogRepeaterPhoto { object-fit: cover; width: 100%; height: 150px; object-position: 50% 50%; transition: all ease 500ms; }

.blogRepeater a .icon { overflow: hidden; width: 50px; height: 50px; display: inline-block;  position: relative;  transition: all ease 500ms;  }
.blogRepeater a .icon svg { position: absolute; right: 16px; bottom: -42px; rotate: 45deg; width: 110px;  transition: all ease 500ms; fill: var(--darkerblue); }


.blogRepeater .card-body p { height: 80px;  }
.blogRepeater .card-body a { color: var(--darkerblue); transition: all ease 500ms; }


/* .blogRepeater:hover figure {  box-shadow: 0 15px 15px 0 rgba(0,0,0,.3); } */
.blogRepeater:hover .blogRepeaterPhoto { object-fit: cover; object-position: 0% 0%; scale: 1.3; }
.blogRepeater:hover {  box-shadow: 0 50px 50px 0 rgba(0,0,0,.2); }
.blogRepeater:hover .card-body a { color: var(--darkerblue); letter-spacing: 3px; }

.blogRepeater:hover a .icon {  width:  110px; height: 50px; }
.blogRepeater:hover a .icon svg { rotate: 0deg; bottom: -53px; right: 0;  fill: var(--darkerblue);}


@media (min-width: 576px) {  }

@media (min-width: 768px) {
  .blogArea .g-5, .blogAreaHome .g-5 { --bs-gutter-x: 4rem !important; --bs-gutter-y:2rem !important; }
  .blogRepeater { max-width: 100%; width: 100%; }
}

@media (min-width: 992px) { 
  .blogArea .g-5, .blogAreaHome .g-5 { --bs-gutter-x: 7rem !important; --bs-gutter-y: 12rem !important; }
  .blogRepeater { padding-top: 15vw; max-width: 100%; width: 100%; }
  .blogRepeater figure { border-radius: 29px 29px 0px 0px; overflow: hidden; transition: all ease 500ms; position: absolute; top: 0;  z-index: 0; width: 100%;  }
  .blogRepeater .blogRepeaterPhoto  { height: 15vw; }

  .blogRepeater.blogReverse  { padding-top: 0;  padding-bottom: 15vw; }
  .blogRepeater.blogReverse figure {border-radius:  0px 0px 29px 29px; position: absolute; top: inherit; bottom: -15px; width: 100%; }
  /* .blogRepeater.blogReverse::before { top: inherit; bottom: 0px;  height: 100%; } */

  .blogRepeater .blogRepeaterPhoto { object-position: 0% 0%; }
  .blogRepeater:hover .blogRepeaterPhoto { object-position: 0% 50%; }

  .blogRepeater .card-body { z-index: 1; padding-top: 2rem; }
  .blogAreaHome .blogWrap   .col { margin-top: 0;}
}

@media (min-width: 1200px) {  }

@media (min-width: 1400px) {  }

/** blog poost */
.blogPostDetailHeader {background: rgb(240,240,240);
  background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);}
.blogPostDetail { }
.blogPostDetail figure {  border-radius: 29px; overflow: hidden; transition: all ease 500ms; position: relative; z-index: 0; }
.blogPostDetail .blogRepeaterPhoto { object-fit: cover; width: 100%; height: 20vh;  object-position: 0% 0%; transition: all ease 500ms; }
.blogPostDetail hgroup { margin-bottom: 4rem; }
.blogPostDetail hgroup h1 { font-weight: 900; }
@media (min-width: 768px) {
  .blogPostDetail .blogRepeaterPhoto { height: 40vh; }
  .blogPostDetail .wrapHgroup { margin-top: -20vw; position: relative;  }
  .blogPostDetail hgroup { position: relative; z-index: 1; }
  .blogPostDetail hgroup::before { content: ""; background-color: var(--almostwhite); border-radius: 29px; position: absolute; top: -15%; left: -6%; width: 112%; height: 130%; z-index: -1; }
}

@media (min-width: 992px) {
  .blogPostDetail .blogRepeaterPhoto { height: 45vh; }
  .blogPostDetail .wrapHgroup { margin-top: -20vw; position: relative;  }
  .blogPostDetail hgroup { position: relative; z-index: 1; }
  .blogPostDetail hgroup::before { content: ""; background-color: var(--almostwhite); border-radius: 29px; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; z-index: -1; }
}

@media (min-width: 1200px) {
  .blogPostDetail .blogRepeaterPhoto { height: 60vh; filter: blur(5px); scale: 1.1; }
  .blogPostDetail .wrapHgroup { margin-top: -20vw; position: relative;  }
  .blogPostDetail hgroup { position: relative; z-index: 1; }
  .blogPostDetail hgroup::before { content: ""; background-color: var(--almostwhite); border-radius: 29px; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; z-index: -1; }
}

@media (min-width: 1400px) { 
  .blogPostDetail .blogRepeaterPhoto { height: 60vh; filter: blur(5px); scale: 1.1; }
  .blogPostDetail .wrapHgroup { margin-top: -10vw; position: relative;  }
  .blogPostDetail hgroup { position: relative; z-index: 1; }
  .blogPostDetail hgroup::before { content: ""; background-color: var(--almostwhite); border-radius: 29px; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; z-index: -1; }
}

.blogAreaHome { position: relative; width: 100%;  z-index: 2; margin-bottom: 9vw; }
.blogAreaHome .container, .blogAreaHome .container-fluid { z-index: 1;}
.blogAreaHome::before { content: ""; background-color: var(--darkgrey); background-image: url("../img/drakgreytexture.jpg"); background-size: cover;  width: 100%; height: 100%;  position: absolute;  top: 0;  left: 0;}

.blogHomeTitle { color: var(--white); font-weight: 900; line-height: 82%; }
.blogHomeTitle span {  -webkit-text-stroke: .2vh var(--white); color: transparent; letter-spacing: -2px;  }

.blogHomeTitleh4 { width: 100%; text-align: center; display: flex; align-items: center; }
.blogHomeTitleh4 .icon { display: flex; margin-right: 2vw; }
.blogHomeTitleh4 .icon img { width: 10vw; }


@media (min-width: 768px) { 
  .blogHomeTitleh4 { width: ; }
  .blogAreaHome::before {   transform: skew(0deg, 3deg);  scale: 1.11; }
}

@media (min-width: 992px) { 
  .blogAreaHome { margin-bottom: 8vw; }
  .blogHomeTitleh4 .icon { display: inline-block; float: left; }
}

@media (min-width: 1200px) { 
  .blogAreaHome { margin-bottom: 6vw; }
  .blogAreaHome::before { transform: skew(0deg, 3deg);  scale: 1.11;}
}

/** SLIDES **/
.slider-wrap { position: relative; z-index: 4; }
.slider-container {
    width: 80%;
    height: 50vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.inner-slider {
    width: auto;
    display: flex;
    gap: 2vw;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

/*** FORM ***/
#footer { position: relative;  overflow: hidden; min-height: 180vh; background: var(--yellow) url(../img/bg-yellow.jpg) no-repeat; background-position: bottom; background-attachment: fixed; background-size: cover; z-index: 0; }

.areaForm { background-color: var(--almostblack); position: relative; z-index: 2; }
.areaForm::before { background-color: var(--almostblack); position: absolute; bottom: 0; left: -50vw; width: 200vw; height: 100%; content: ""; z-index: 1; }
.areaForm .col { position: relative; z-index: 2; }
.areaForm .footer-shadown {     position: absolute;  width: 120vw;  max-width: inherit;  left: -25vw;  bottom: -10vw; }
.wrapQuoteFooter { z-index: 1; position: fixed; bottom: 0; left: 0; right: 0;}

form .form-control { border-radius: 70px; padding: 0.9rem; color: var(--almostblack); border-color: var(--almostblack) !important; outline: 0 !important; }
form .form-control:focus {  box-shadow: 0 0 0 0.25rem rgba(253, 221, 13, 0.25); }
form .btnStandard { width: 100%; }
@media (min-width: 992px) { 
  #footer { min-height: 150vh;  }
  form .btnStandard { width: auto; }
}

#footer .wrapQuoteFooter { animation: 1s ease-out 0s 1 slideInFromBottom; }

/** map page **/

body#mapPage { background-color:var(--red);  }

.areaPlanet { background-color:var(--red); overflow: hidden; position: relative;  min-height: 100vh;   }

/* SHADOW */

#myearth {  width: 100%; height: 60%; }
#myearth::after {
  content: "";
  position: absolute;
  height: 22%;
  bottom: 4%;
  left: 13%;
  right: 13%;
  background: radial-gradient(ellipse at center, rgba(5,57,89,0.7) 0%,rgba(5,57,89,0.55) 20%,rgba(5,57,89,0.2) 40%,rgba(5,57,89,0.1) 50%,rgba(5,57,89,0.02) 60%,rgba(5,57,89,0) 70%,rgba(5,57,89,0) 100%);
}


    .displayContent {  position: absolute; bottom: 0; left: 0; width: 100%; height: auto;  display: block; transition: opacity ease 500ms; opacity: 1; }
    .displayContent.modalLeft { top: 0; bottom: inherit; }
    .displayContent.modalRight { top: 60vh; bottom: inherit; }
    .displayContent.closed {  opacity: 0; position: absolute; bottom: 0; left: 0; width: 0px; height: 0px; overflow: hidden;  display: none; padding: 0px !important;  }	

          .clickable-overlay {
              background-color: var(--white);
              color:var(--darkblue);
              border: 1px solid var(--darkgrey);
              font-size: 1.5rem;
              pointer-events: all; /* makes div element clickable */
              cursor: pointer;	
              padding: 16px 18px;
              transition: all ease 200ms;
              -webkit-box-shadow: 0 20px 20px 0 rgba(0,0,0,0);
              box-shadow: 0 20px 20px 0 rgba(0,0,0,0);
              border-radius: 999px;
          }

          .clickable-overlay:hover {
              padding: 16px 25px;
              color:var(--darkerblue);
              margin-left: -7px;
              transition: all ease 200ms;
              -webkit-box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
              box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
          }

          .clickable-overlay:active {
            padding: 16px 25px;
            color:var(--red);
            margin-left: -7px;
            transition: all ease 15ms;
            -webkit-box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
            box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
        }


@media (min-width: 576px) {  }

@media (min-width: 768px) {  }

@media (min-width: 992px) { 
  .areaPlanet { min-height: 100vh; }
  #myearth {  width: 100%; height: auto; }
  .displayContent.closed { height: 100vh; opacity: 0; }
  .displayContent {  position: absolute; bottom: inherit;  width: 25vw; height: 100vh;  display: block; transition: opacity ease 500ms; opacity: 1; }
  .displayContent.modalLeft { position: absolute; top: 0; left: 0; }
  .displayContent.modalRight { position: absolute; top: 0; right: 0; left: inherit; text-align: right !important; }
}

@media (min-width: 1200px) {  }

@media (min-width: 1400px) {  }
        

/* PAGE TRANSITIONS */

.transition-1 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  bottom: 0;
  z-index: 101;
  background-color: var(--darkgrey);

  transition: 0.5s ease-in;
}

.transition-2 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  bottom: 0;
  z-index: 101;
  background-color: var(--yellow);

  transition: 0.5s ease-in;
}

.transition-3 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  bottom: 0;
  z-index: 101;
  background-color: var(--almostwhite);
  
  transition: 0.5s ease-in;
}

.transition-1.transition.is-active {
  translate: 100%;
  transition: 0.5s ease-out;
}

.transition-2.transition.is-active {
  translate: 100%;
  transition: .9s ease-out;
}

.transition-3.transition.is-active {
  translate: 100%;
  transition: 1.2s ease-out;
}


/*** ANIMATIONS ***/

@keyframes floatFlag {
	0% {
		transform: translatey(10px);
	}
	50% {
		transform: translatey(100px);
	}
	100% {
		transform: translatey(10px);
	}
}

@keyframes floatGradientCircles {
	0% {
		transform: translatey(-300px); opacity: 0;
	}
	50% {
		transform: translatey(300px); opacity: 1;
	}
	100% {
		transform: translatey(-300px); opacity: 0;
	}
}



@keyframes movingParade {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(10px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes floatwithShadow {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}


@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(90%);
  }
  100% {
    transform: translateY(0%);
  }
}