@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');
/* 
font-family: 'DM Serif Display', serif;
font-family: 'Onest', sans-serif;
*/
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: #fff ;}
body { overflow-x: hidden ; min-height: 100vh;  font-family: 'Onest', sans-serif;  font-size: 1.25rem; display: flex; flex-direction: column; /*padding-top: 150px;*/ background-color: #F2F2F2; margin: 0 !important;  }
@media (max-width: 750px) {
    body { align-items: center;  justify-content: center; padding-top: 0; }
}


::-moz-selection, .quote-Text::-moz-selection { 
  color: #fff;
  background: #E9545A;
  text-shadow: 4px 4px 0 #2e1010;
}

::selection, .quote-Text::selection {
  color: #fff;
  background: #E9545A;
  text-shadow: 4px 4px 0 #2e1010;
}

p::-moz-selection, ul.intro-list li::selection { 
  color: #fff;
  background: #E9545A;
  text-shadow: 4px 4px 0 #E9545A;
}

p::selection, ul.intro-list li::selection {
  color: #fff;
  background: #E9545A;
  text-shadow: 4px 4px 0 #E9545A;
}



/** BASIC HTML STRUCTURES **/
section {min-height: 50vh; display: block; vertical-align: middle; width: 100vw; position: relative; }

.container {  width: auto;  max-width: 1800px; display: block;   margin: 0 auto;  }
section .container { max-width: 1400px;  min-height: 50vh; padding-top: 10vh; padding-bottom: 10vh; }
  .row {   display: flex;   align-items: center;    justify-content: center; min-height: 50vh; padding-left: 20px; padding-right: 20px; }
    .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: 750px) {
    .row {   display: block; }
    .col {padding-left: 30px; padding-right: 30px;}
}

.h70 { min-height: 70vh !important; }
.h100 { min-height: 100vh !important; }

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

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

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

 /** flex nav ***/ 
.flexNav {display: flex; }
@media (max-width: 750px) {
  .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: #1a1a1a 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;
  -webkit-transition: opacity 500ms ease;  -moz-transition: opacity 500ms ease;   -ms-transition: opacity 500ms ease;   -o-transition: opacity 500ms ease;  transition: opacity 500ms ease }

.colorsList:hover li { opacity: .5;
  -webkit-transition: opacity 500ms ease;  -moz-transition: opacity 500ms ease;   -ms-transition: opacity 500ms ease;   -o-transition: opacity 500ms ease;  transition: opacity 500ms ease }
.colorsList li:hover { opacity: 1; }


/** basic styles **/

h1 { font-size: 48px; line-height: 110%; font-weight: 400; font-family: 'DM Serif Display', Georgia, Times, "Times New Roman", 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: 18px; font-weight: 400; }

p a { color: #564382; text-decoration: underline;  overflow-wrap: break-word; }
p a:hover { color: #2d214a; text-decoration: underline; }
.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;}

.extraLargeText { font-size: 3.8rem;  }
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: 18px; }
  p.extraLP { font-size: 45px; }
  .quote-Text { font-size: 23px; }
  .extraLargeText { font-size: 4.4rem;  }
}
@media (min-width:1024px) {
  h1 { font-size: 74px; }
  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: 19px; }
  p.extraLP { font-size: 55px; }
  .quote-Text { font-size: 29px; }
  .extraLargeText { font-size: 6.6rem;  }
}
@media (min-width:1280px) {
  h1 { font-size: 80px; }
  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: 25px; }
  p.extraLP { font-size: 60px; }
  .quote-Text { font-size: 45px; }
  .extraLargeText { font-size: 8.8rem; margin-top: 60px; margin-bottom: 60px; }
  .extraExtraLargeText { font-size: 12rem; }
}
.d-flex { display: flex; }

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

a.btnStandard { overflow: hidden; color: #fff;  border: #8B74C0 1px solid; font-weight: 600; background-color: #8B74C0;
  padding: 1.5vh 3.5vw; margin: 15px auto; display: block; text-align: center;  -webkit-transition: all 500ms ease;  -moz-transition: all 500ms ease;   -ms-transition: all 500ms ease;   -o-transition: all 500ms ease;  transition: all 500ms ease; cursor: pointer;  font-size: 18px; border-top-left-radius: 999px; border-bottom-right-radius: 999px; font-family: 'DM Serif Display', Georgia, Times, "Times New Roman", serif !important; letter-spacing: 1px; }
a.btnStandard:hover { color: #8B74C0; border-color: #8B74C0; background-color: #fff; border-top-left-radius: 0; border-bottom-right-radius: 0;  border-bottom-left-radius: 999px; border-top-right-radius: 999px; letter-spacing: 2px; -webkit-box-shadow: 0 0 10px 0 #8B74C0;
  box-shadow: 0 0 10px 0 #8B74C0; } 

a.btnStandard.bntReverseBlack { color: #1a1a1a; border: #1a1a1a 1px solid;  background-color: transparent; }
a.btnStandard.bntReverseBlack:hover { color: #8B74C0; border-color: #8B74C0; background-color: #f0f0f0;} 
a.btnStandard.bntReverse { color: #f0f0f0; border: #f0f0f0 1px solid;  background-color: transparent; }
a.btnStandard.bntReverse:hover { color: #8B74C0; border-color: #8B74C0; background-color: #f0f0f0;} 
@media (max-width:768px) {
  a.btnStandard { width: 100%; }
}

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

.MainHead { line-height: 100%;position: relative; cursor:default ; }
.MainHead div { display: inline-block; position: relative; }
.MainHead span { padding-top: 40px; padding-bottom: 20px; display: inline-block; position: relative; border-radius: 0; }
.MainHead 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;
}
.MainHead 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) {
  .MainHead 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; }

.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%);
}

 .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;

}


@-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%;
  }
}

/** dataList **/

.dataList { list-style: none; padding: 0; margin: 0; }
.dataList  li { border-bottom: 1px solid #4c4c4c; padding-top: 15px; padding-bottom: 15px; }
.dataList  li span { font-weight: bold; color: #F0C65E; 
   -webkit-transition: color 500ms ease;  -moz-transition: color 500ms ease;   -ms-transition: color 500ms ease;   -o-transition: color 500ms ease;  transition: color 500ms ease }
.dataList  li:hover span { color: #E9545A }
.dataList  li, .dataList  li span { font-size: 25px;} 
@media (min-width:768px) {
  .dataList  li, .dataList  li span { font-size: 45px;} 
}
@media (min-width:1024px) {
  .dataList  li, .dataList  li span { font-size: 55px;} 
}
@media (min-width:1280px) {
  .dataList  li, .dataList  li span { font-size: 60px;} 
}