@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 800;
  src: local('Barlow Semi Condensed ExtraBold Italic'), local('BarlowSemiCondensed-ExtraBoldItalic'), url(../fonts/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIPBlsoo5m2fA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 900;
  src: local('Barlow Semi Condensed Black Italic'), local('BarlowSemiCondensed-BlackItalic'), url(../fonts/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIrB1soo5m2fA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 900;
  src: local('Barlow Semi Condensed Black Italic'), local('BarlowSemiCondensed-BlackItalic'), url(../fonts/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIrB1spo5m2fA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: italic;
  font-weight: 900;
  src: local('Barlow Semi Condensed Black Italic'), local('BarlowSemiCondensed-BlackItalic'), url(../fonts/wlpkgxjLBV1hqnzfr-F8sEYMB0Yybp0mudRXfbIrB1sno5k.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --darkBackground: #181818;
  --darkgray: #3a3a3a;
  --midgray: #343a40;
  --taggray: #a6a5a5;
  --lightgray: #f0f0f0;
  --white: #fff;

  --headerFont: "Barlow Semi Condensed", Arial, sans-serif;
  --headerFontWeight: 900;
  --headerFontStyle: italic;
  --headerFontForm: uppercase;
  --headerFontSpacing: .2px;
  --headerFontHeight: 1;

  --bodyFont:'Lato', sans-serif;
  --bodyFontSpacing: 0.4px;
}

html, body{
    background-color: var(--darkBackground);
    font-family: var(--bodyFont);
    letter-spacing: var(--bodyFontSpacing);
    font-size: 13pt;
    line-height: 23pt;
    opacity: 1;
    animation: fadeIn 1s;
    transition: opacity 1s; 
    padding: 0;
    margin: 0;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
h1, h2, h3, h4, h5, h6, .hello, .caseelement button, .introelement button, .backbutton, .urlButton{
  font-family: var(--headerFont);
  font-weight: var(--headerFontWeight);
  text-transform: var(--headerFontForm);
  font-style: var(--headerFontStyle);
  letter-spacing: var(--headerFontSpacing);
  line-height: var(--headerFontHeight);  
  margin: 0;
}
.urlButton{
  border: 3px solid var(--darkBackground);
  border-radius: 3px;
  padding: 10px;
  background: none;
  cursor: pointer;
}
nav{
  position: absolute;
  right: 20px;
  top: 40px;
}
nav button{
  font-family: var(--bodyFont);
  letter-spacing: var(--bodyFontSpacing);
  color: var(--white);
  text-decoration: none;
  padding: 11px;
  font-size: 13pt;
  background: none;
  border: none;
  cursor: pointer;
}
nav img{
  width: 20px;
  padding:0 11px ;
}

.backbutton {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--white);
  padding: 15px;
  border: 3px solid var(--white);
  border-radius: 3px;
  cursor: pointer;
  z-index: 1;
  display: none;
}

.flex{
  display: flex;
}
.contentFlex a{
  width: 45%;
  padding: 10px;
}
.contentFlex a img{
  width: 100%;
}

.hello{
  position: absolute;
  font-size: 50pt;
  height: 250px;
  top: 26%;
  margin-left: 20%;
  color: var(--white);
}
.hello #typewriterContent{
  display: contents;
}

#cases{
  position: absolute;
  top: 75vh;
  left: 0;
  right: 0;
}
.caseelement{
  left: 10px;
  right: 10px;
  margin: 30px;
  padding: 140px 80px;
  border-radius: 5px;
  background-color: var(--darkgray);
  color: var(--white);
  background-position: center;
  background-size: cover;
}
.caseelement h6{
  opacity: 0.4;
}
.caseelement h2{
  font-size: 25pt;
}
.caseelement p{
  width: 36%;
}
.caseelement button, .introelement button{
    background: rgba(255, 255, 255, 0);
    border: 3px solid var(--white);
    border-radius: 3px;
    padding: 15px;
    color:var(--white);
    cursor: pointer;
    transition: 0.3s;
}

.caseelement button:hover, .introelement button:hover{
    background-color: rgba(255, 255, 255, 1);
    color: var(--darkBackground);
}
.hidden {
  opacity: 0;
}

.visible {
  opacity: 1;
  transition: opacity 1s ease-out;
}

#slideSource.fade {
  opacity: 0 !important;
}
.introelement{
  text-align: center;
  color: var(--white);
  padding: 100px
}
.introelement p{
  padding: 0 25%;
}
.header{
  height: 60vh;
}
.header, .content{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.introelement h1{
  font-size: 40pt;
} 
.content h2{
  font-size: 30pt;
}
.content{
  padding: 100px 19.5%;
}
.content p{
  padding-bottom: 30px;
}

.whiteContentField{
  background-color: var(--white);
  color: var(--darkBackground);
}
.lightGrayContentField{
  background-color: var(--lightgray);
  color: var(--darkBackground);
}
.whiteContentField a{
  color: var(--darkBackground);
}
.darkgrayContentField{
  background-color: var(--darkgray);
  color: var(--white);
}
.custom__DerkPhaseOne{
  background: rgb(113,181,155);
  background: linear-gradient(161deg, rgba(113,181,155,1) 0%, rgba(42,81,146,1) 100%);
  color: var(--white);
}
.custom__DerkPhaseTwo{
  background-image: url(../images/derkPlatform/clouds.jpg);
  background-position: center;
  background-size: cover;
}
.custom__Reacollege{
  background: #00969c;
  color: #fff;
}
.custom__chores{
  background: rgb(4,254,221);
  background: linear-gradient(208deg, rgba(4,254,221,1) 13%, rgba(129,7,254,1) 100%);
  color: #fff;
}
.custom__workout{
  background: rgb(32,41,106);
  background: linear-gradient(13deg, rgba(32,41,106,1) 50%, rgba(242,56,99,1) 50%);
  color: #fff;
}
.tag{
  display: inline-block;
  font-size: 8pt;
  padding: 3px 5px;
  margin: 5px;
  border: var(--taggray) 1px solid;
  border-radius: 5px;
  color: var(--taggray);
}
.tag img{
  float: left;
  width: 30px;
}
.progress-container {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 8px;
  background: none;
}

.progress-bar {
  height: 8px;
  background: var(--lightgray);
  width: 0%;
}
.progressbar__derk{
  background: #2DD261;
}
.progressbar__rea{
  background: #00969c;
}
.progressbar__chores{
  background: #0a39ff;
}
.progressbar__workout{
  background: #f23863;
}
.progressbar__grancept{
  background: #7637fd;
}
.progressbar__adminwindow{
  background: #3e78cc;
}
.progressbar__small{
  background-color: #a6a5a5;
}
.brandLogo{
  height: 50px;
  float: left;
  margin-left: -60px;
  margin-top: -125px;
}
.flex p{
  padding: 0 15px;
}









.modal {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  max-width: 30%;
  margin: 0 auto;
  padding: 30px;
  background: var(--darkgray);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  color: #fff;
  z-index: 4;
}
.modal-close-btn{
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.modal img{
  float: left;
  height: 25px;
  margin: 10px;
}
.modal a{
  color: #fff;
}
.modal-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
}
.overlay {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.705);
}
.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.download{
  font-family: var(--bodyFont);
  letter-spacing: var(--bodyFontSpacing);
  font-size: 13pt;
  line-height: 23pt;
  background: none;
  cursor: pointer;
  border: 3px solid var(--white);
  padding: 10px 15px;
  color: var(--white);
  border-radius: 3px;
  margin: 15px 5px;
  background-image: url(../images/download.svg);
  background-position: 10px center;
  background-size: 20px;
  background-repeat: no-repeat;
  padding-left: 38px;
}