@font-face {
    font-family: 'myRekgivaItalic';
    src: url('../fonts/Rekgiva-Italic.woff2') format('woff2'),
        url('../fonts/Rekgiva-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myRekgiva';
    src: url('../fonts/Rekgiva-Regular.woff2') format('woff2'),
        url('../fonts/Rekgiva-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myNeueHaasGroteskMed';
    src: url('../fonts/NHaasGroteskTXStd-65Md.woff2') format('woff2'),
        url('../fonts/NHaasGroteskTXStd-65Md.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myNeueHaasGroteskMedItalic';
    src: url('../fonts/NHaasGroteskTXStd-66MdIt.woff2') format('woff2'),
        url('../fonts/NHaasGroteskTXStd-66MdIt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'myNeueHaasGroteskBold';
    src: url('../fonts/NHaasGroteskTXStd-75Bd.woff2') format('woff2'),
        url('../fonts/NHaasGroteskTXStd-75Bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.container{
	margin-left:auto;
	margin-right:auto;
}


body{
	color: #F2EEEB;
	background-color: #2A241A;
	background: linear-gradient(180deg,rgba(42, 36, 26, 1) 0%, rgba(57, 98, 124, 1) 25%, rgba(177, 146, 176, 1) 60%, rgba(240, 203, 188, 1) 75%, rgba(242, 238, 235, 1) 100%);
	overflow-x: hidden;
}

h1{
	font-family: myRekgiva;
}

h2{
	font-family: myRekgiva;
}

h3{
	font-family: myNeueHaasGroteskMedItalic;
	text-align: right;
}

h4{
	font-family: myNeueHaasGroteskMedItalic;
}

.blueHeadingFour{
	color: #39627C;
	cursor: pointer;
}

p{
	font-family: myNeueHaasGroteskMed;
}

header{
	height: 100vh;
	position: relative;
}

footer{
	height: 100vh;
	position: relative;
}

nav{
	margin-left: auto;

	position: sticky;
    top: 0;
    z-index: 1000;

    height: 0;
}

li a{
	font-family: myNeueHaasGroteskBold;
	text-transform: uppercase;
	text-decoration: none;
	color: #F2EEEB;
	text-align: right;
}

a{
	display: block;
	text-decoration: none;
	transition: color 1s;
}

a:hover{
	color: #F5B740;
	text-decoration: none;
	transition: color .5s;
}

nav a.active {
    color: #F5B740;
}

nav a.activeDark {
    color: #39627C;
}

.darkText{
	color: #2A241A;
}

.darkNav{
	color: #2A241A;
}

.darkNav:hover{
	color: #39627C;
}

.buttonText{
	font-family: myNeueHaasGroteskBold;
	text-transform: uppercase;
	text-decoration: none;
	color: #F2EEEB;
	text-align: center;
}

.buttonStyle{
	display: block;
	color: #2A241A;
	margin-right: auto;
	margin-left: auto;
	transition: 1s background-color;
	text-align: center;
}

.buttonStyle:hover{
	background-color: #F2EEEB;
	color: #2A241A;
	transition: .5s background-color;
}

.centerContent{
	text-align: center;
	align-content: center;
} 

.yellowItalic{
	font-family: myRekgivaItalic;
	color: #F5B740;
}

.blueItalic{
	font-family: myRekgivaItalic;
	color: #39627C;
}

#breathingExercise{
	display: none;
	position: relative;
	overflow: hidden;
	align-content: start;
	text-align: center;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}

.waveContainer{
	position: absolute;
	bottom: 0;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	z-index: -100;
}

/*.break-out {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}*/

.waveGroup{
	position: absolute;
	bottom: 0;
	width: 100vw;
}

.waveGroup.animate{
    transform-origin: bottom;
    animation: breathingWave 12s ease-in-out infinite;
}

.wave {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	background-position: center bottom;
}

.waveFill {
	height: 30vh;
	background: #A48DAA;
	background: linear-gradient(180deg, rgba(164, 141, 170, 1) 0%, rgba(57, 98, 124, 1) 45%, rgba(50, 71, 82, 1) 100%);
}

.background{
	background-size: cover;
	background-repeat: none;
	position: fixed;
	mix-blend-mode: lighten;
	opacity: 75%;
}


@keyframes breathingWave {

    0% {
        transform: scaleY(0.6);
    }

    33% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0.6);
    }

}


#burden-release {
	    font-family: myNeueHaasGroteskMed;
	    color: #2A241A;
	    background-color: #F2EEEB;
	    height: 25%;
	}

#burden-release:focus {
    outline: none;
    border-color: #39627C;
}

#burden-release::placeholder {
    font-family: myNeueHaasGroteskBold;
    color: #2A241A;
    letter-spacing: 1px;
    opacity: .75;
    text-align: left;
    vertical-align: top;
    resize: none;
}

.backgroundBlur{
	backdrop-filter: blur(10px);
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

#breathingExercise{
	position: relative;
}

.cycleTracker{
	/*position: absolute;*/
	z-index: 10;
	font-family: myNeueHaasGroteskBold;
	letter-spacing: 1px;
	bottom: 1.5rem;
}

.endBreath{
	display: none;
	z-index: 100;
}

label{
	font-family: myNeueHaasGroteskMed;
}

.hiddenText {
    display: block;
    overflow: hidden;

    max-height: 0;
    opacity: 0;

    transition:
        max-height 1s ease,
        opacity 1s ease;
}

.hiddenText.open {
    max-height: 500px; /* larger than your longest paragraph */
    opacity: 1;
}

.revealButton {
	display: block;
	color: #F2EEEB;
	cursor: pointer;
	transition: transform 0.3s ease;
	background-image: url("../images/plus.svg");
	background-repeat: no-repeat;
}

.revealButton.rotated {
	transform: rotate(45deg);
}

.revealButtonDK {
	display: block;
	color: #F2EEEB;
	cursor: pointer;
	transition: transform 0.3s ease;
	background-image: url("../images/plusDK.svg");
	background-repeat: no-repeat;
}

.revealButtonDK.rotated {
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.rotated {
	transform: rotate(90deg);

}

.clickableP{
	cursor: pointer;
}

/*@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    visibility: visible;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.radioOption {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.5s ease-out both;
}

.radioOption:nth-child(1) {
  animation-delay: 0s;
}

.radioOption:nth-child(2) {
  animation-delay: 0.5s;
}

.radioOption:nth-child(3) {
  animation-delay: 1s;
}*/

input[type="checkbox"] {
  display: inline-block;
  appearance: none;
  border: 2px solid #F2EEEB;
  cursor: pointer;
  vertical-align: top;

  transition: background-color 1s;
}

input[type="checkbox"]:checked {
  background-color: #F5B740;
}

input[type="checkbox"]:checked::after {
  content: "";
  color: white;
}

input[type="radio"] {
  display: inline-block;
  appearance: none;
  border: 2px solid #F2EEEB;
  border-radius: 50%;
  cursor: pointer;
  vertical-align: top;

  transition: background-color 1s;
}

input[type="radio"]:checked {
  background-color: #F5B740;
}

input[type="radio"]:checked::after {
  content: "";
  color: white;
}

label {
  cursor: pointer;
  vertical-align: top;
}

.right-align{
		text-align: right;
		right: 0;
	}

.questionOptions{
	display: flex;
}

.references{
	background-image: url("../images/book.svg");
	background-repeat: no-repeat;
	position: absolute;
}

.resources{
	background-image: url("../images/info.svg");
	background-repeat: no-repeat;
	position: absolute;
	
}

.share{
	background-image: url("../images/share.svg");
	background-repeat: no-repeat;
	position: absolute;
	
}

.popUpBox{
	background-color: #F2EEEB;
	filter: drop-shadow(2px 2px 5px rgba(42, 36, 26, 0.1));
	position: absolute;

	display: none;
}

.links{
	color: #39627C;
	font-family: myNeueHaasGroteskMed;
	text-decoration: underline;
}

.x{
	background-image: url("../images/x.svg");
	position: absolute;
}

.line{
	background-color: #2A241A;
}

.hiddenText{
	margin-bottom: 0;
}

button{
	background-color: rgba(0, 0, 0, 0);
}

.formComplete{
	display: none;          

	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 100000;

	color: #2A241A;

	background: #F2E4DE;
	background: linear-gradient(180deg,rgba(242, 228, 222, 1) 0%, rgba(242, 238, 235, 1) 100%);
	background-repeat: no-repeat;
	
	text-align: center;
	padding-top: 15vh;
}

/*body.stop-bootstrap-animation .fade, 
body.stop-bootstrap-animation .collapsing {
    transition: none !important;
}*/

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		/*width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	.background{
		background-image: url("../images/flowersM.webp");
		height: 100vh;
		width: 100vw;
		background-size: cover;
		z-index: -100;
	}

	.lockUp{
		top: 42vh;
		position: absolute;
		height: 30%;
		width: 100%;
	}

	.menuExpand{
		display: none;
		padding-right: 5%;
		padding-top: 30%;
	}


	.navButton{
	    width: 10vw;
	    height: 10vw;
	    /*background-color: #0f0;*/
	    background-image: url("../images/navIcon.svg");
	    background-size: contain; 
	    background-repeat: no-repeat;
	    background-position: center;
	    position: fixed;
	    top: 1.25%;
	    right: 2.5%;

	    opacity: 0;
	    /*visibility: hidden;*/
	    transition: opacity 0.5s;
	    z-index: 9999 !important;
	
	}

	.navButton::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-image: url("../images/navIconDark.svg");
	    background-size: contain;
	    background-repeat: no-repeat;
	    
	    opacity: 0; 
	    transition: opacity 1s ease; /* This is your 1s fade */
	}

	.navButton.darkNavIcon::after {
	    opacity: 1;
	}


	.navButton.show{
	    opacity: 1;
	    visibility: visible;
	    /*transition: opacity 1s;*/
	}

	#intro{
		scroll-margin-top: 30%;
	}

	nav.menuExpand {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /*z-index: 999;*/
    }

    .mobileNavBackground {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: -1; 
        transition: all 1s;
    }

    .lightMobileNavBackground{
    	background-color: rgba(242,238,235, 0.5);
    }

	.buttonText{
		font-size: 3.1vw;
		letter-spacing: 0.31vw;
	}

	nav{
		font-size: 3.125vw;
		letter-spacing: 0.31vw;
		line-height: 6.25vw;
		/*position: fixed;*/
	}

	h1{
		font-size: 27vw;
		line-height: 18vw;
	}

	h2{
		font-size: 12vw;       
		line-height: 10.7vw;    
	}

	h3{
		font-size: 3.2vw; 
		line-height: 3.2vw;    
		letter-spacing: 0.27vw; 
		/*margin-top: -11%;*/
		margin-top: -10vw;
	}
		
	h4{
		font-size: 4vw;
		color: #F5B740;

	}

	p{
		font-size: 3.25vw;   
		line-height: 6.25vw; 
		letter-spacing: 0.31vw;
		/*width: 39.87730061%;*/
	}

	.smallType{
		font-size: 2vw;
	}

	section{
		padding-top: 35%;
		padding-bottom: 35%;
	}

	footer{
		/*position: relative;*/
		height: 100vh;
	}



	.wave{
		background-image: url("../images/waveM.webp");
		width: 100vw;
		height: 25vh;
	}

	#burden-release{
		border: .4vw solid #2A241A;
	}

	#burden-release::placeholder {
		font-size: 3.25vw;
		padding: 1.875vw;
	}

	.buttonStyle{
		border-radius: 4.69vw;
		height: 9.375vw;
		padding: 1.875vw;
		border: .4vw solid #2A241A;
	}

	.special{
		/*padding-top: 25%;*/
		font-size: 2vw;

		position: absolute;
		bottom: 1%;
	}



	#breathingExercise{
		height: 100vh;
		padding: 0;
	}

	.mobileSize{
		font-size: 10vw;
	}

	input[type="radio"] {
		width: 3.5vw !important;
	  	height: 3.5vw !important;
	  	margin-top: 1.175vw; 
	}

	input[type="checkbox"] {
		width: 3.5vw !important;
		margin-top: 1.175vw; 
	  	height: 3.5vw !important;
	}

	input[type="checkbox"]::before {
		width: 1.56vw;
		height: 1.56vw;
	}

	label{
		font-size: 3.25vw;
		line-height: 6.25vw;
		letter-spacing: 0.078vw;
		width: 90%;

	}

	#burden-release{
		font-size: 3.75vw;
		padding: 4.69vw;
		height: 30vh;
	}

	.revealButton{
		text-align: right;
	}

	.references{
		height: 4vh;
		width: 4vw;
		bottom: 6vh;
		left: 0vh;
	}

	.resources{
		height: 4vh;
		width: 4vw;
		bottom: 6vh;
		left: 3.5vh;
	}

	.share{
		height: 4vh;
		width: 4vw;
		bottom: 6vh;
		left: 6.5vh;
	}

	.popUpBox{
		padding: 6%;
		bottom: 15%;
		border: .4vw solid #2A241A;
	}

	.x{
		background-image: url("../images/x.svg");
		height: 3vw;
		width: 3vw;

		top: 3vw;
		right: 3vw;
	}

	.revealButton{
		height: 3.5vw;
		width: 3.5vw;
	}

	.revealButtonDK{
		height: 3.5vw;
		width: 3.5vw;
		/*transition: transition 1s;*/
	}

	.line{
		height: .4vw;
	}

	.formComplete h2{
		font-size: 12vw;       
		line-height: 10.7vw;    
	}

	.formComplete p{
		font-size: 3.25vw;   
		line-height: 6.25vw; 
		letter-spacing: 0.31vw;
		/*width: 39.87730061%;*/
	}

	.formComplete .buttonStyle{
		border-radius: 4.69vw;
		height: 9.375vw;
		padding: 1.875vw;
		border: .4vw solid #2A241A;
	}

	.formComplete .buttonText{
		font-size: 3.1vw;
		letter-spacing: 0.31vw;
	}
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 991px){
	.container{
		/*width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	.background{
		background-image: url("../images/flowersT.webp");
		height: 100vh;
		width: 100vw;
		background-size: cover;
		z-index: -100;
	}

	.sectionFullViewPort{
		height: 100vh;
	}

	section{
		height: 75vh;
		/*align-content: center;*/
	}

	.questionViewPorts{
		height: 75vh;
		display: flex;
	    justify-content: center;
	    /*align-items: center;*/
	}

	.introduction{
		padding-top: 45%;
	}

	.buttonText{
		font-size: 1.6vw;
		letter-spacing: 0.31vw;
	}

	nav{
		font-size: 1.6vw;
		letter-spacing: 0.31vw;
		line-height: 3.6vw;
		/*position: fixed;*/
	}

	.lockUp{
		top: 36vh;
		position: absolute;
		height: 30%;
		width: 100%;
	}

	h1{
		font-size: 27vw;
		line-height: 18vw;
	}

	h2{
		font-size: 6vw;       
		line-height: 6vw;    
	}

	h3{
		font-size: 3.2vw; 
		line-height: 3.2vw;    
		letter-spacing: 0.27vw; 
		/*margin-top: -11%;*/
		margin-top: -10vw;
	}
		
	h4{
		font-size: 2vh;
		color: #F5B740;

	}

	p{
		font-size: 1.6vw;   
		line-height: 3vw; 
		letter-spacing: 0.15vw;
		/*width: 39.87730061%;*/
	}

	.smallType{
		font-size: 1.25vw;
	}

	.wave{
		background-image: url("../images/waveT.webp");
		width: 100vw;
		height: 25vh;
	}

	.buttonStyle{
		border-radius: 4.69vw;
		height: 5vw;
		padding: 1.1vw;
		border: .2vw solid #2A241A;
	}

	#burden-release{
		border: .2vw solid #2A241A;
	}

	#burden-release::placeholder {
		font-size: 1.6vw;
	}

	.special{
		font-size: 1.25vw;
		position: absolute;
		bottom: 2.5%;
	}

	textarea{
		padding: 2.5vw;
	}

	input[type="radio"] {
		width: 1.5vw !important;
	  	height: 1.5vw !important;
	  	margin-top: .72vw; 
	}

	input[type="checkbox"] {
		width: 1.5vw !important;
		margin-top: .72vw; 
	  	height: 1.5vw !important;
	}

	input[type="checkbox"]::before {
		width: 1.56vw;
		height: 1.56vw;
	}

	label{
		font-size: 1.6vw;   
		line-height: 3vw; 
		letter-spacing: 0.15vw;
		width: 90%;

	}

	.references{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 0vh;
	}

	.resources{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 5vh;
	}

	.share{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 10vh;
	}

	.popUpBox{
		padding: 4%;
		bottom: 17%;
		border: .2vw solid #2A241A;
	}

	.x{
		background-image: url("../images/x.svg");
		height: 1.5vw;
		width: 1.5vw;

		top: 1.5vw;
		right: 1.5vw;
	}

	.revealButton{
		height: 2vw;
		width: 2vw;
	}

	.paddingLetGo{
		height: auto !important;
		padding-bottom: 4%;
	}

	.revealButtonDK{
		height: 2vw;
		width: 2vw;
	}

	.line{
		height: .2vw;
	}

	.formComplete h2{
		font-size: 6vw;       
		line-height: 6vw;    
	}

	.formComplete p{
		font-size: 1.6vw;   
		line-height: 3vw; 
		letter-spacing: 0.15vw;
		/*width: 39.87730061%;*/
	}

	.formComplete .buttonStyle{
		border-radius: 4.69vw;
		height: 5vw;
		padding: 1.1vw;
		border: .2vw solid #2A241A;
	}

	.formComplete .buttonText{
		font-size: 1.6vw;
		letter-spacing: 0.31vw;
	}

}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 992px){
	.container{
		/*width:978px;*/
		/*width:95.5%;*/
		position: relative;
	}

	.sectionFullViewPort{
		height: 100vh;
	}

	section{
		height: 75vh;
		/*align-content: center;*/
	}

	.background{
		background-image: url("../images/flowersD.webp");
		height: 100vh;
		width: 100vw;
	}	
	
	.lockUp{
		top: 30vh;
		position: absolute;
		height: 46vh;

	}

	h1{
		font-size: 20.56vw;
		line-height: 13.68vw;
		position: absolute;
		top: 0;
		left: 0;
	}

	h2{
		font-size: 4.17vw;
		line-height: 4.17vw;
	}

	h3{
		font-size: 3.13vw;
		line-height: 3.13vw;
		letter-spacing: 0.14vw;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	h4{
		font-size: 1.67vw;
		color: #F5B740;

	}

	p{
		font-size: 0.97vw;
		line-height: 1.67vw;
		letter-spacing: 0.07vw;
		/*width: 39.87730061%;*/
	}

	#reclaimPower, #stressLoop, #selfCare{
		scroll-margin-top: 30vh;
	}

	#letGo{
		scroll-margin-top: 9vh;
	}

	.smallType{
		font-size: .69vw;

	}

	.buttonText{
		font-size: 0.97vw;
		letter-spacing: .15vw;
	}

	nav{
		font-size: 0.97vw;
		letter-spacing: .15vw;
		line-height: 2vw;
	}

	label{
		font-size: 0.97vw;
		line-height: 1.67vw;
		letter-spacing: 0.07vw;
	}

	.introduction{
		padding-top: 25%;
	}

	.special{
		font-size: .69vw;
		position: absolute;
		bottom: 1.5rem;
	}

	.questionViewPorts{
		height: 75vh;
		display: flex;
	    justify-content: center;
	    /*align-items: center;*/
	}

	#burden-release{
		font-size: 0.97vw;
		padding: 2.08vw;
		border: .15vw solid #2A241A;
	}

	.wave{
		background-image: url("../images/waveD.webp");
		width: 100vw;
		height: 25vh;
		background-size: 100% 100%;
	}

	.revealButton{
		font-size: 2.08vw; 
		/*transition: translate 1s;*/
	}

	#burden-release::placeholder {
		font-size: 0.97vw;
	}


	input[type="radio"] {
		width: 1vw !important;
	  	height: 1vw !important;
	  	margin-top: .3vw; 
	}

	input[type="checkbox"] {
		width: 1vw !important;
		margin-top: .3vw; 
	  	height: 1vw !important;
	}

	input[type="checkbox"]::before {
		width: 1vw;
		height: 1vw;
	}

	.buttonStyle{
		border-radius: 50vw;
        height: 3vw;
        padding: .7%;
		border: .15vw solid #2A241A;
	}

	.references{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 0vh;
	}

	.resources{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 5vh;
	}

	.share{
		height: 3vh;
		width: 3vw;
		bottom: 10vh;
		left: 10vh;
	}

	.popUpBox{
		padding: 2%;
		bottom: 16%;
		border: .15vw solid #2A241A;

	}

	.x{
		height: 1vw;
		width: 1vw;

		top: 1vw;
		right: 1vw;
	}

	.revealButton{
		height: 2vw;
		width: 2vw;
	}

	.paddingLetGo{
		height: auto !important;
		padding-bottom: 5%;
	}

	.revealButtonDK{
		height: 2vw;
		width: 2vw;
	}

	.line{
		height: .15vw;
	}

	.formComplete h2{
		font-size: 4.17vw;
		line-height: 4.17vw;
	}

	.formComplete p{
		font-size: 0.97vw;
		line-height: 1.67vw;
		letter-spacing: 0.07vw;
		/*width: 39.87730061%;*/
	}

	.formComplete .buttonStyle{
		border-radius: 50vw;
        height: 3vw;
        padding: .7%;
		border: .15vw solid #2A241A;
	}

	.formComplete .buttonText{
		font-size: 0.97vw;
		letter-spacing: .15vw;
	}

}