.body-wrap {
	font-family: "Poppins";
	background-color: black;
	padding-left: 7%; padding-right: 7%;
}
.index-page .body-wrap {
    height: -webkit-fill-available;
    /*overflow-y: auto;*/
}
.removeMe {
	display: none !important;
}
.hideMeLow {
	visibility: hidden;
	opacity: 0;
	margin-top: 30px;
}
#loading-wrap span {
	color: white;
}
#loading-roll {
	width: 90px; height: 90px;
	margin: 0 auto;
	position: absolute;
	border: 2px solid #327038;
	border-radius: 50%;
	background: linear-gradient(117.62deg, #327038 0%, #FFFFFF 30.03%);
	animation: perpetual_rotate 1s infinite ease-out both;
}
@keyframes perpetual_rotate
{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

.no-email, .is-email {
	width: 100%;
	background-color: red;
	color: white;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
    font-size: 120%;
    font-weight: 900;
}
.is-email{
	background-color: blue;
	padding-top: 20px; padding-bottom: 20px;
}
.cursorPointer {
	cursor: pointer !important;
}
.up.arrow {
	background-image: url("./img/green_arrow-up.png");
}
.down.arrow {
	background-image: url("./img/red_arrow-down.png");
}

/* === WEB/PC CSS === */
@media screen and (min-width: 901px) {

	.mobile-only {
		display: none !important;
	}

	.no-scroll {
		overflow: hidden;
	}

	#loading-wrap {
		position: relative;
	    top: 18vw;
	}
	.intro {
		margin-top: 100px;
		text-align: center;
		position: relative;
		margin-bottom: 200px;
	}
	.intro h1 {
		color: white;
		font-size: 70px;
	}

	.intro p {
		color: white;
		font-size: 40px;
	}
	.intro button {
		margin-top: 30px;
		padding: 20px 35px;
		font-size: 30px;
	}

	.intro, .intro h1, .intro span, .intro button, #email-track, #summary, #tips {
		transition: all 1s ease-out;
	}
	.wrap {
		transition: all 0.5s ease-out;
	}
	.wrap.slide-up {
		transform: translateY(-115%);
	}

	.main {
		position: relative;
		display: flex;
		justify-content: center; /* <- horizontal centre */
		/*align-items: center;*/ /* <- vertical centre */
	}
	.box {
		text-align: center;
		color: white;
		border: 1px dashed rgba(255, 255, 255, 0.3);
		padding: 60px 70px;

		position: absolute;
		top: 4vw;
		transition: all 0.5s ease-out;
		display: flex;
		justify-content: center; /* <- horizontal centre */
		align-items: center; /* <- vertical centre */
	}
	.question.box {
		height: 30vw;
	}
	.question.box.done {
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
	}
	.question.box h1 {
		font-size: 70px;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	.question.box.smaller-font h1 {
		font-size: 40px;
	}
	.question.box.confirmations {
		overflow-y: scroll;
		align-items: unset;
		height: 35vw;
	}
	.question.box.confirmations button {
		padding-bottom: 20px;
	}
	.question.box .answer {
		display: flex;
		justify-content: center;
	}
	.question.box .answer input, .figure-and-edit input {
		position: relative;
		border: unset;
		background-color: transparent;
		border-bottom: 1px solid #FFFFFF;
		
		font-family: "Open Sans";
		font-size: 50px;
		/*font-weight: 400;*/
		line-height: 26px;

		color: #FFFFFF;
		padding-left: 35px;
		padding-bottom: 15px;
	}
	.question.box .answer input::placeholder, .figure-and-edit input::placeholder {
		color: rgba(255, 255, 255, 0.35);
	}
	.question.box .answer input:focus-visible, .figure-and-edit input:focus-visible, .modal-body input:focus-visible {
		outline: unset;
	}
	.question.box .answer button {
		cursor: pointer;
		font-family: "Poppins";
		background-color: transparent; border-color: transparent;
	}
	.figure-and-edit {
		font-size: 25px;
	}
	.figure-and-edit .btn-at-final {
		font-size: 15px;
		position: relative;
	}
	.figure-and-edit .btn-at-final i {
		position: absolute;
		top: -2.5px;
		left: 10px;
	}
	.figure-and-edit .btn-at-final:hover i {
		color: green;
	}
	.figure-and-edit input {
		padding-left: unset;
		padding-bottom: unset;
		font-size: 35px;
	}
	.question.box hr {
		width: 40%;
		margin: 20px auto;
	}
	.proceed-span {
		font-size: 30px;
		color: white;
		padding-top: 20px;
		display: block;
	}
	.proceed-span:hover {
		opacity: 0.5;
	}

	.solution.box {
		/*height: 35vw;*/
		margin-bottom: 200px;
	}
	.solution.box h1 {
		font-size: 40px;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	.solution.box ul {
		width: 90%;
	    text-align: justify;
	    margin: 0 auto;
	    font-size: 30px;
	}
	.solution.show-email {
		top: 10vw;
	}


	.index-page #email-track {
		position: absolute;
	    top: 2vw;
	    text-align: center;
	}

	#email-track p {
		color: white;
	}

	#email-track input {
		position: relative;
		border: unset;
		border-bottom: 1px solid #FFFFFF;
		padding: 10px 30px 10px 20px;
	    margin-top: 10px;
	    margin-right: 5px;
	}
	#email-track button {
	    border-radius: 10px;
	}
	#email-track .click-btn-text {
		font-size: 20px;
	    padding: 2.5px 15px;
	}

	.no-email {
		height: 200px;
	}



	.stats-page .body-wrap {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.stats-page .intro {
		margin-top: unset;
	}
	.stats-page #days-count {
		color: white;
		font-size: 50px;
	}

	.stats-page .stopWatch { margin: 0 auto; background-color: #39BB27; color: black; position: relative; z-index: 99;
		/*height: 150px;*/
		width: fit-content;
		padding: 0px 30px;
		font-family: Poppins;
		/*border: 1px solid white;*/
		display: flex; justify-content: center; align-items: center; transition: all 0.5s ease-out; }
	.stats-page .stopWatch .wrap { color: white; display: flex; justify-content: center; align-items: center; font-size: 70px; font-weight: bold; }
	.stats-page .stopWatch .wrap .time-box{
		width: 90px;
	}
	.stats-page .stopWatch .wrap .time { color: white; }
	.stats-page .chart-section {
		margin-bottom: 100px;
	}
	.stats-page .tips {
		margin: 0 auto;
        width: 70%;
        color: white;
        font-family: "Poppins";
	}


	.percentages-section {
		display: flex;
		align-items: center;
	}

	.eachArrowBox {
		width: 30%;
		text-align: center;
		margin: 0 auto;
		color: white;
	}
	.arrow-and-perc {
		/*display: flex;
	    align-items: center;
	    justify-content: center;*/
		display: -webkit-box;
	    -webkit-box-pack: center;
	    -webkit-box-align: center;
		color: white;
		font-size: 25px;
		font-weight: 700; /* font-weight: bolder; */
	}
	.arrow {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 30px;
		height: 30px;
		margin-right: 5px;
		/*background-color: white;*/
	}
	.arrow-as-img {
		width: 15px;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.eachBox .name {
		color: white;
		font-size: 30px;
		font-weight: 700; /* font-weight: bolder; */
		font-family: Montserrat;
	}

	.modal-body {
		text-align: center;
	}
	.modal-body input {
		border: unset;
		border-bottom: 1px solid rgba(0,0,0,0.8);
		padding-bottom: 5px;
		margin-top: 20px;
	}

	.modal-body button {
		width: 30%;
		margin: 20px auto 10px auto;
		display: block;
	}
}


/* === PHONE/TABLET CSS === */
@media screen and (max-width: 900px) {

	.desktop-only {
		display: none !important;
	}

	.no-scroll {
		overflow-y: hidden;
	}
	.no-scroll-mobile {
		overflow: hidden;
	}

	#loading-wrap {
		position: relative;
	    top: 90vw;
	    font-size: 24px;
	    text-align: center;
	    width: 150px;
	}
	#loading-wrap #loading-roll {
		position: relative;
		margin-top: 10px;
	}
	.intro {
		margin-top: 200px;
		text-align: center;
		position: relative;
		margin-bottom: 140vw;
	}
	.intro h1 {
		color: white;
		font-size: 50px;
	}

	.intro p {
		color: white;
		font-size: 35px;
	}
	.intro button {
		margin-top: 10px;
		padding: 20px 35px;
		font-size: 25px;
	}

	.intro, .intro h1, .intro span, .intro button, #email-track, #summary, #tips {
		transition: all 1s ease-out;
	}
	.wrap {
		transition: all 0.5s ease-out;
	}
	.wrap.slide-up {
		transform: translateY(-125%);
	}

	.main {
		position: relative;
		display: flex;
		justify-content: center; /* <- horizontal centre */
		/*align-items: center;*/ /* <- vertical centre */
	}
	.box {
		text-align: center;
		color: white;
		border: 1px dashed rgba(255, 255, 255, 0.3);
		padding: 50px 40px;

		position: absolute;
		top: 50vw;
		transition: all 0.5s ease-out;
		display: flex;
		justify-content: center; /* <- horizontal centre */
		align-items: center; /* <- vertical centre */
		width: 100%;
	}
	.question.box {
		min-height: 100vw;
	}
	.question.box .inner-div {
		width: 95%;
	}
	.question.box.done {
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
	}
	.question.box h1 {
		font-size: 40px;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	.question.box.smaller-font h1 {
		font-size: 20px;
	}
	.question.box .answer {
		display: flex;
		justify-content: center;
	}
	.question.box .answer input {
		position: relative;
		border: unset;
		background-color: transparent;
		border-bottom: 1px solid #FFFFFF;
		
		font-family: "Open Sans";
		font-size: 20px;
		/*font-weight: 400;*/
		line-height: 20px;

		color: #FFFFFF;
		padding-left: 35px;
		padding-bottom: 15px;
	}
	.question.box .answer input::placeholder, .figure-and-edit input::placeholder {
		color: rgba(255, 255, 255, 0.35);
	}
	.question.box .answer input:focus-visible, .figure-and-edit input:focus-visible, .modal-body input:focus-visible {
		outline: unset;
	}
	.question.box .answer button {
		cursor: pointer;
		font-family: "Poppins";
		background-color: transparent; border-color: transparent;
	}
	.figure-and-edit .btn-at-final {
		font-size: 15px;
		position: relative;
	}
	.figure-and-edit .btn-at-final i {
		position: absolute;
		top: 0px;
		left: 10px;
	}
	.figure-and-edit .btn-at-final:hover i {
		color: green;
	}
	.figure-and-edit input {
		padding-left: unset;
		padding-bottom: unset;
	}
	.question.box hr {
		width: 40%;
		margin: 20px auto;
	}
	.proceed-span {
		font-size: 18px;
		color: white;
		padding-top: 20px;
		display: inline-block;
	}

	.solution.box {
		/*height: 35vw;*/
		margin-bottom: 200px;
		padding: 50px 20px;
	}
	.solution.box h1 {
		font-size: 30px;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	.solution.box ul {
		width: 100%;
	    text-align: left;
	    margin: 0 auto;
	    font-size: 25px;
	}
	.solution.show-email {
		top: 80vw;
	}


	.index-page #email-track {
		position: absolute;
	    top: 22.5vw;
	    text-align: center;
	}

	#email-track p {
		color: white;
		font-size: 18px;
	}

	#email-track input {
		position: relative;
		border: unset;
		border-bottom: 1px solid #FFFFFF;
		padding: 10px 30px 10px 20px;
        margin-top: 15px;
        margin-right: 5px;
        width: 90%;
        margin-bottom: 15px;
        font-size: 18px;
	}
	#email-track button {
	    border-radius: 10px;
	}
	#email-track .click-btn-text {
		font-size: 20px;
	    padding: 2.5px 15px;
	}

	.no-email {
		height: 300px;
	}

	.stats-page .body-wrap {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.stats-page .intro {
		margin-top: unset;
		margin-bottom: 100px;
	}

	.stats-page #days-count {
		color: white;
		font-size: 50px;
	}
	.stats-page .stopWatch { margin: 0 auto; background-color: #39BB27; color: black; position: relative; z-index: 99;
		/*height: 150px;*/
		width: fit-content;
		padding: 0px 30px;
		font-family: Poppins;
		/*border: 1px solid white;*/
		display: flex; justify-content: center; align-items: center; transition: all 0.5s ease-out; }
	.stats-page .stopWatch .wrap { color: white; display: flex; justify-content: center; align-items: center; font-size: 70px; font-weight: bold; }
	.stats-page .stopWatch .wrap .time-box{
		width: 90px;
	}
	.stats-page .stopWatch .wrap .time { color: white; }
	.stats-page .chart-section {
		margin-bottom: 100px;
	}
	.stats-page .tips {
		margin: 0 auto;
        width: 100%;
        color: white;
        font-family: "Poppins";
	}

	.eachArrowBox {
		width: 70%;
		text-align: center;
		margin: 0 auto 10px auto;
		color: white;
		display: flex;
		border-bottom: 1px solid white;
        padding-bottom: 10px;
	}
	.eachArrowBox:last-child {
		border-bottom: unset;
	}
	.arrow-and-perc {
		display: -webkit-box;
	    -webkit-box-pack: center;
	    -webkit-box-align: center;
		color: white;
		font-size: 25px;
		font-weight: 700;
		margin-left: 15px;
	}
	.arrow {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 30px;
		height: 30px;
		margin-right: 5px;
	}
	.arrow-as-img {
		width: 15px;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.eachBox .name {
		color: white;
		font-size: 30px;
		font-weight: 700;
		font-family: Montserrat;
	}

	#modalBody {
		height: 40vh;
		top: 15vh;
	}
	.modal-body {
		text-align: center;
		margin-top: 40px;
	}
	.modal-body input {
		border: unset;
		border-bottom: 1px solid rgba(0,0,0,0.8);
		padding-bottom: 5px;
		margin-top: 20px;
	}

	.modal-body button {
		width: 30%;
		margin: 20px auto 10px auto;
		display: block;
	}
}