/* @font-face { font-family: 'Rounds-Bold'; src: url("../fonts/TTRounds-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal;} */
/* @font-face { font-family: 'Rounds-Regular'; src: url("../fonts/TTRounds-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal;} */
@font-face { font-family: 'Gotham-Bold'; src: url("../fonts/gotham-bold.ttf") format("truetype"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Gotham-Book'; src: url("../fonts/Gotham-Book.otf") format("truetype"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Gotham-Medium'; src: url("../fonts/Gotham-medium.otf") format("truetype"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Comfortaa-Regular'; src: url("../fonts/Comfortaa-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Comfortaa-SemiBold'; src: url("../fonts/Comfortaa-SemiBold.ttf") format("truetype"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Comfortaa-Bold'; src: url("../fonts/Comfortaa-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal;}
/* @font-face { font-family: 'Comfortaa-Variable'; src: url("../fonts/Comfortaa-Variable.ttf") format("truetype"); font-weight: normal; font-style: normal;} */


body {
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	/* font-family: Rounds-Bold, Arial; */
	font-family: Gotham-Book, Arial;
	color : #17354d;
	font-size:16px;
	margin:0;

	background-color:black;
}

#content {
	/* max-width: 1300px; */
	margin: 0 auto;
	background-color: white;
}
.hiddenDiv, .hiddenScreen {display: none!important;}

p.errorM {
    color: #f4738b;
    background-color: #fccdda;
    border: 1px solid #f4738b;
    line-height: 20px;
    padding: 10px;
    text-align: center;
	margin: 0 0 40px 0;
}
#formDiv p.errorM { margin: 15px 0 0px 0;}
.hWrapper {
	width:100%;
	background-color:white;
	box-shadow: 0px 5px 15px #9898986b;
    z-index: 10;
    position: relative;
}
.header {
	position: relative;
    width: 90%;
	max-width: 1300px;
    margin: 0 auto;
	height: 75px;
}
/* #h2W { */

/* } */
#header2, #header1 {
display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

div.hLogo img {width:90%; cursor: pointer;}

img.logo {	position: absolute; top: 0; bottom: 0; margin: auto 0; }

img {
	vertical-align: middle;
}
img.illustration {
	object-fit:contain;
	width:100%;
}
.wWrapper {
	width: 45%;
	padding: 10px 0;
	text-align: center;
}
.wWrapper.fullWidth { width: 100%;}
.wWrapper.fullWidth .writing{ text-align: center; color: white;}
.writing {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}
.green .writing {width:100%;}
.freeTrialDiv {
width: 75%;
margin: 10px auto;
max-width: 250px;
}
.freeTrialImg{
width: 100%;
    cursor: pointer;
    margin-top: 10px;
}

div#quotes {
    margin: 0 auto;
    width: 90%;
}

div#quotes .slick-track {
    display: flex;
    /* justify-content: center; */
    flex-direction: row;
    align-items: center;
}
span.quoteSignature {margin-left:20px;}
#custCommentWrapper {
	/* background-image: url("../img/texture-bg.png"); */
	background-color: #19ba65;
	text-align: center;
	padding: 20px 0;
}
#custCommentWrapper h2 {
	color: white;
	margin-top: 0;
}

#custComment {
	text-align:left;
	width: 90%;
	max-width: 1300px;
    margin: auto;
	/* font-family: Rounds-regular, Arial; */
	font-family: Gotham-Book, Arial;
    font-size: 15px;
}
#custComment h4 {
/* font-family: Rounds-bold, Arial; */
font-family: Gotham-Book, Arial;
margin: 0 0 5px;}
p#ready {font-size: 0.8em;
/* font-family: Rounds-regular, Arial;  */
font-family: Gotham-Book, Arial;
font-weight: bold;}

.acForm {
    /* font-family: Rounds-regular,Arial; */
    font-family: Gotham-Book,Arial;
    font-size: 110%;
    /* width: 80%; */
    /* padding: 0.5vmin 15px; */
    /* margin: 0.5vmin 0; */
    /* box-sizing: border-box; */
    /* border: none; */
    /* background-color: #f078a5; */
    /* color: #320d8f; */
    /* border: 3px solid #320d8f; */
    /* border-left: none; */
    /* border-right: none; */
    /* border-top: none; */
}
#emailF1 {height: 30px; width: 55%; float: none;}
/* div.emailInput {float:left;} */
p.info {
    color: #17354d;
    font-size: 0.7em;
    /* font-family: Rounds-regular, Arial; */
    font-family: Gotham-Book, Arial;
    margin: 10px 0 0 0;
}
.tryBt {height: 30px; float: right;}
.freeTrialBt {
	margin: 10px 0 0;
    width: 100%;
    height: 36px;
    border-radius: 17px;
    font-size: 15px;
    /* border: 2px solid #19BA65; */
    cursor: pointer;}
div.star5 {background:url("../img/5stars20.png") no-repeat 0 0px;height:20px;line-height:20px;width:100px;display:block;float:left;margin:auto;margin-bottom:5px;}
div.grad1 {background-position:0 0px!important}
div.grad2 {background-position:0 -20px!important}
div.grad3 {background-position:0 -40px!important}
div.grad4 {background-position:0 -60px!important}
div.grad5 {background-position:0 -80px!important}

.signature {
	color: white;
    position: absolute;
    bottom: 0px;
    left: 70px;
	white-space: nowrap;
}
.commentTitle {
	clear:left;
}
.oneComment {
	position: relative;
	background-image: url(../img/text-bubble.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
	width: 265px!important;
    height: 205px!important;
    /* width: 276px!important; */
    /* height: 177px!important; */
    padding: 10px 10px 0px 10px;
	margin: auto;
}
.oneComment p {
    margin: 0;
    font-size: 0.9em;
    text-align: justify;
}
.section {
	/* background-image: url("../img/texture-bg.png"); */
	background-color: white;
	display: flex;
	flex-direction: row;
	/* justify-content: space-between; */
	justify-content: flex-end;
	align-items: center;
	position: relative;
}
.flexEnd { justify-content: flex-end;}
.flexStart { justify-content: flex-start;}
.spaceBetween { justify-content: space-between;}
.section.green{
	background-color: #08a9f9;
    min-height: 105px;
}
.section.orange{
	background-color: #bc20b8;
	color: white;
}
.section.orange .writing{
	text-align: center;
}

.section.nightblue{
	/* background-image: url("../img/sleepy-texture-bg.png"); */
	background-color: #ff9331;
	background-size: contain;
    background-position: bottom left;
	background-repeat: no-repeat;
	color: white;
}

#wW-3 {padding: 30px 0;}

#availableWrapper {
	width: 40%;
	text-align: center;
	position: absolute;
	bottom: 20px; right: 0; left: 0;
}

#availableOnDiv {
	color : white;
	margin: 0 auto;
}

img.availableOnImg {
    margin-left: 20px;
}

#wW-5 {position: relative;}
#safeWrapper {
    position: absolute;
    top: 6px;
    left: -90px;
}

#wW-6 {position: relative;}
#coppaWrapper {
    position: absolute;
    top: 6px;
    left: -90px;
}

.slick-next, .slick-prev {
	z-index: 20;
	width: 39px !important;
	height:36px !important;
	color: white !important;
	/* background: white !important; */
    border: 2px !important;
    border-radius: 20px !important;
    border-color: white !important;
	}
/* .slick-next {right:5px !important} */
/* .slick-prev {left:5px !important} */
.slick-prev:before, .slick-next:before {
  font-size: 40px !important;

}
slick-track {
  margin-left: auto;
  margin-right: auto
 }

.screen { position: relative}
/* other screen */

div.h2Button, div.hLogo{width:277px;}
.header div button { margin: 0;}
.header div button:first-child { margin-left: 10px;}

button {font-family: Comfortaa-Regular; font-size: 13px;}
span.btBold {
	/* font-family: Comfortaa-Bold; */
	font-weight: 800;}

input.myBt, button.myBt {
    width: auto;
    height: 36px;
    margin: 0 5px;
    padding: 0 16px;
    border: 2px solid #19BA65;
    color: #19BA65;
    background-color: white;
    border-radius: 17px;
    cursor: pointer;
	font-size: 15px;
}
#form1Bt {width: 38%}

img.imgCmd {
    float: right;
    width: 40px;
	cursor: pointer;
}
.mobileLoggedIn img:first-child {
    margin-left: 20px;
}
button.myBt.headerBt {float: right;}
input.myBt.blue, button.myBt.blue, button.freeTrialBt.blue {color: white; background-color: #19BA65; border: 2px solid #19BA65;}
button.freeTrialBt.yellow {color: #ffffff; background-color: #19BA65; border: 2px solid #19BA65;}
button.freeTrialBt.white {color: #17354d; background-color: white; border: 2px solid white;}
/* font-weight: 700; */
}
button.offerBt {border-radius: 14px;}

div.progress {background:url("../img/progress.png") no-repeat 0 0px;height:40px;line-height:40px;width:322px;display:block;float:left;}
div.step1 {background-position:0 0px!important}
div.step2 {background-position:0 -40px!important}
div.step3 {background-position:0 -80px!important}
div#footer2W {
    color: white;
    /* background-image: url(../img/texture-bg.png); */
    background-color: #19ba65;
}
#footer2 {
    min-height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: center;
	padding: 10px 5px;
    width: 90%;
	max-width: 1300px;
    margin: 0 auto;
}
#badges {width: 60%;}
img.footerLogo {width: 22%; margin: 5px; cursor: pointer;}
/* screen 2 Login */
div#terms a {color: white; text-decoration: none;}
div#terms a:first-child {
    margin-right: 30px;
}
div#screen-2-Login {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    /* padding: 50px 10px; */
    /* height: 648px;*/
}
.fullScreenWrapper {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* padding: 50px 10px; */
}
div#form2Img {
	/* width: 40%; */
	width: calc(50% - 170px);
    margin-right: -30px;
    text-align: right;
    margin-left: 30px;}
img.login-img {
	width: 100%;
    z-index: 10;
    position: relative;
    max-width: 530px;
}
div#form2Wrapper {
    width: 360px;
    text-align: center;
    min-width: 360px;
	margin-top: 40px;
}
div#f2SubW {
    border: 2px solid #19BA65;
    border-radius: 20px;
	padding: 10px 10px;
	min-height: 320px;
	position: relative;
}
div#f2SubW p.info {	position: absolute; bottom: 15px; left: 0; right: 0;}
p#f2P {
    text-align: left;
    width: 90%;
    margin: 20px auto;
}
button#btCreate, input#btCreate {
margin: 20px 0;
    width: 90%;
    height: 40px;
    border-radius: 20px;
    font-size: 17px;
}
input#emailF2 { width: 90%; height: 35px;}
p.haveAccount {
    cursor: pointer;
    text-decoration: underline;
}
div#benefits {/* width: 40%; */width: calc(50% - 170px);}
ul.argument { list-style: none; padding-left: 10px; max-width: 410px;    left: 0;
    right: 0;
    margin: auto;
}
ul.argument li {clear: left; margin:5px 0;}

img.benefit-img { margin: 0 15px 0 0; float: left; width: 70px; min-width: 70px;}
span.liP {
    display: block;
	font-family: Comfortaa-Regular, Arial;
}
div.liDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
	padding-right: 5vw;

}
/* subscription screen 3 */

div#screen-3-Selecting {
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;

    width: 90%;
    max-width: 90%;
}
.offerWrapper {
    padding-top: 70px;
}

.screenCommon {
	max-width:850px;
	margin: 0 auto;
    min-height: calc(100vh - 176px);
}
p#mailWarning {
	font-size: 0.8em;
    color: #00aaff;
    background-color: #def2ff;
    border: 1px solid #00aaff;
    line-height: 20px;
    display: none;
	position: absolute;
    top: 20px;
	padding: 5px 15px;
	width: 100%;
}
div#selectIntro {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	text-align: left;
}
img#introImg {
    width: 130px;
	margin: 0 10px;
}

div#offerWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.offerDiv {
    position: relative;
    padding: 20px 30px;
    color: #19BA65;
    background-color: #fff;
	border:2px solid #19BA65;
    border-radius: 16px;
    margin: 50px 0;
    text-align: center;
    width: 80%;
    max-width: 300px;
}
h2.offerTitle {
    font-size: 40px;
    margin: 0;
}
p.offerDescription {
    font-size: 20px;
		color: #17354d;
}
span.price {
    font-size: 38px;
    font-family: Gotham-Medium, Arial;
		color: #19BA65;
}
span.info {font-size: 13px;}
span.bold {font-weight: 900;}
#monthPromo, #annualPromo {
    position: absolute;
    top: -23px;
    right: 30px;
    width: 17%;
    background-color: #19BA65;
    color: white;
    /* margin: -19px 0; */
    padding: 5px;
    font-size: 12px;
}
#bvStar {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 16%;
}

/* subscriber screen 4 */
/* subscriber screen 5 */
#screen-4-Subscriber {
    background-image: url(../img/screen-4-subscriber-desk-min.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    /* padding-bottom: 180px; */
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: center;
}
#screen-5-Registred {
    background-image: url(../img/screen-5-registred-desk-img-1-min.png), url(../img/screen-5-registred-desk-img-2-min.png);
    background-position: bottom left, bottom right;
    background-repeat: no-repeat;
	background-size: 40%;
    /* background-size: contain; */
    /* padding-bottom: 140px; */
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: center;
}

.statusWrapper {text-align: center; padding: 7vh 0;}

p.exclamation {
    font-size: 85px;
    font-family: Gotham-Medium;
    margin: 10px 0 0;
	line-height: 1;
}
p.status {
    font-size: 35px;
    font-family: Gotham-Medium;
    line-height: 1;
    margin: 0;
}
p.text {
    font-size: 19px;
}
button.statusBt {
    height: 44px;
    min-width: 200px;
    font-size: 18px;
    border-radius: 22px;
	padding: 0 30px;
}

.oneBottomImage img {width: 100%}

/* @media screen and (max-width: 620px) { */
@media screen and (max-width: 960px) {
	.onlyBigScreen, .obs {display:none;}
	div#formDiv {
		text-align: center;
	}
	#emailInput {
		width: 90%;
		float: none;
	}
	input#emailF1 {
		width: 97%;
		height: 40px;
	}
	#btTry, .tryBt {
		display: block;
		margin: 20px auto 10px!important;
		float: none;
	}
	#btTry, .tryBt {
    width: 52%!important;
    height: 36px!important;
    border-radius: 17px!important;
    min-width: 260px;
}
}

/* @media screen and (min-width: 621px) { */
@media screen and (min-width: 961px) {
	.onlySmallScreen, .oss {display:none;}
}

@media (max-device-height: 800px) and (max-device-width: 800px){
.cleeng-checkout-container-overlay {
	padding-bottom: 250px !important;
}
}

@media screen and (max-width: 745px) {
	div#terms a {
		font-size: 14px;
		line-height: 30px;
		display: block;
	}
p.offerDescription { font-size: 19px;}
button.offerBt { font-size: 14px; width: 100%;}
div#form2Wrapper { width: 95%!important; min-width:unset;}
#f2SubW h2 { font-size: 1.3em;}
p#f2P { width: 95%; font-size: 14px;}
}
@media screen and (max-width: 960px) {
	body {
		/* font-size: 1.7vw; */
	}
	.header { width: 80%;}
	p#mailWarning {position: unset;}
	.offerWrapper { padding-top: 0;}

	p.exclamation {font-size: 60px}
	p.status {font-size:26px}
	p.text {font-size: 16px;}

	#screen-5-Registred, #screen-4-Subscriber { background-image: none; flex-direction: column;}
	.statusWrapper { padding: 20px 0; margin: 0 10%;}
	img#registredMobBtImg, img#subscriberMobBtImg { width: 100%;}

	#wW-3 {/* padding-bottom: 60px;*/ padding: 0 0 60px 0;}
	img.availableOnImg {max-width: 300px;}
	img.illustration { object-fit: cover;/*  height: 49vw ;*/ object-position: top;}
	#img-3 {width: 75%; padding-top: 5vw;}
	#img-3 img {object-fit: cover; height: inherit;}
	.section { flex-direction : column;}
	#availableWrapper {	width: 100%;}
	.section div.imgDiv {order : 1; width: 100%;}
	.section div.wWrapper {order: 2; width: 50%; min-width: 460px;}
	.section.green div.wWrapper { width: 100%;}
	div#quotes {width: 80%;}
	.availableOnImg { width: 46%;}
	#safeWrapper { text-align: right; top: 17px; right: 58px;}
	#safeImg {width: 50px}
	#coppaWrapper { text-align: right; top: 17px; right: 58px;}
	#coppaImg {width: 50px}
	.freeTrialDiv {width: 52%; min-width: 260px;}

	#footer2 { padding: 0.4vw 5px; width:80%;}
	#badges { width: 55%; max-width: 300px;}
	img.footerLogo {width: 40%; margin: 0.5vw;}

	div#screen-2-Login {
		/* flex-direction: column; */
		/* justify-content: space-between; */
		/* align-items: center; */
		/* padding: 50px 10px; */
	}
	div.fullScreenWrapper {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 50px 10px;
	}
	div#form2Img {width: 75%; margin: 0;}
	div#form2Wrapper {width: 80%; margin-top: 20px;}

	div#benefits { display: none;}
	div.progress { display: none;}
	button.signUp {display: none;}
	.desktopLoggedIn {display: none;}

	div#selectIntro {
		flex-direction: column-reverse;
		text-align: center;
	}
	div#offerWrapper { flex-direction: column;}
	div.h2Button, div.hLogo { width: 200px;}
	div.offerDiv { width: 80%;}
	div#monthOfferDiv { margin-top: 0;}
	#custComment {width:95%;}
}

@media screen and (min-width: 431px) and (max-width: 960px) {
	.section div.wWrapper {order: 2; width: 50%; min-width: 460px;}
}

@media screen and (max-width: 430px) {
	.section div.wWrapper {order: 2; width: 100%; min-width: unset;}
	button#registredBt { font-size: 15px;}
}


@media screen and (min-width: 961px) {
	.writing h2 {margin-top:5px};
	.imgDiv {width: 50%;}
	.imgDiv.left::before { content: " "; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 80%,white 100%);
	}
	.imgDiv.right::before { content: " "; position: absolute; top: 0; bottom: 0; right: 0; width: 50%;
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 80%,white 100%);
	}
/* screen 4 and 5 */
	.mobBtImg {display: none;}

	div#screen-2-Login .fullScreenWrapper{justify-content: center;}

	#wW-1 {/*width: 49%;*/ width:420px; margin-left: 5vw;}
	#wW-1 .writing {/*width: 49%;*/ width:420px; margin:0;}
	#img-1 {width: 50%;}
	#img-1::before {width: 50%; background: linear-gradient(to left, rgba(255, 255, 255, 0) 80%,white 100%);}
	#wW-2 {/* width: 40%; */ width:327px; margin-right: 5vw;}
	#wW-2 .writing {/* width: 40%; width:327px;*/ width:unset;}
	#img-2 {width: 50%;}
	#img-2::before {width: 50%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 80%,white 100%);}
	#wW-3, #availableWrapper {width: 430px; margin-left: 5vw;}
	#wW-3 .writing {width: unset; margin: 0 auto;}
	#img-3 {width: 50%;}
	#img-3 img {width: 90%; margin: 5vw 0;}
	#img-3::before {content:""; width: 50%; background: inherit;}
	#wW-4 {/* width: 40%; */ width: 320px; margin-right: 5vw;}
	#wW-4 .writing {/* width: 40%; */ width: unset; margin-right: 0 auto;}
	#img-4 {width: 48%;}
	#img-4::before {width: 48%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 80%,white 100%);}
	#wW-5 {/*width: 40%;*/width: 380px; margin-left: 5vw}
	#wW-5 .writing {width: unset; margin: 0 auto}
	#img-5 {width: 50%;}
	#img-5::before {width: 50%; background: linear-gradient(to left, rgba(255, 255, 255, 0) 80%,#ff9331 100%);}
	#wW-6 {/*width: 40%;*/  width: 332px; margin-right:5vw;}
	#wW-6 .writing {/* width: 40%; */ width: unset; margin-right: 0 auto;}
	#img-6 {width: 55%;}
	#img-6::before {width: 55%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 80%,white 100%);}

	.mobileLoggedIn {display: none;}


}