.bodyPublic 				{ background-color:#f8f9fa; }
.bodyPublic .btn			{ font-size: 16px !important; padding: 0.4rem 3.5rem;}
.bodyPublic .btnSmall		{ font-size: 12px !important; padding: 0.1rem 3rem!important; text-transform: uppercase;}
.bodyPublic .btn.btnMobile	{padding-left: 1rem!important; padding-right: 1rem!important;}
h1							{ font-size: 2.3rem;}
h2							{ font-size: 1.8rem; font-weight: 600;}

#header .container			{ background-color:#fff;}
#header.public .btn			{ font-size: 13px !important;}
#footer.public 				{ position: relative;}
#footer.public .btn 		{ font-size: 13px !important; background-color: #51bcd1; color: #fff; text-align: left; border: 2px solid var(--secondary) !important;}
#footer.public .btn:hover 	{ border: 2px solid #fff !important; background: transparent;}


#register .progressBar .mt-step-number {
    height: 54px !important;
    width: 54px !important;
    padding: 4px !important;
    margin-bottom: 4px !important;
}
#register .progressBar .done .mt-step-title:before, 
#register .progressBar .done .mt-step-title:after 							{ top: -31px !important;}


.hero.bg-transparent  														{ color: var(--tertiary) !important;}
.hero.bg-transparent .form-control 											{ background-color : #f8f9fa; color:var(--tertiary) !important;}
.hero.bg-transparent .form-control::placeholder								{ color : var(--tertiary) !important; }
.hero.bg-transparent .btn-primary:hover										{ border-color:var(--primary); color:var(--primary) !important;}


#how-we-work .lottieAnimation.illustration lottie-player 					{ margin-top : -70px; }
#error-404.mainContent, 

#unsubscribe.mainContent, 
#login.mainContent, 
#activation.mainContent, 
#register.mainContent, 
#sitemap.mainContent,
#reset-password.mainContent,
#update-password.mainContent 												{ height:  max-content;}


@media screen and (max-width: 320px) {
	#surveylama_page.bodyPublic .btn										{ padding: 0.3rem 1.3rem; }
	#surveylama_page.bodyPublic h1											{ font-size: 1.4rem !important; }
	#surveylama_page.bodyPublic h2											{ font-size: 1.6rem !important; font-weight: 700;}
	#surveylama_page.bodyPublic h4											{ font-size: 1.1rem !important; font-weight: 600;}
	.trustpilot-widget 														{ padding-top: 0px; }

	#unsubscribe.mainContent,
	#login.mainContent, 
	#activation.mainContent, 
	#sitemap.mainContent, 
	#register.mainContent,
	#update-password.mainContent,
	#reset-password.mainContent 											{ height: auto ;}
	#register .progressBar .mt-step-number 									{ height: 40px !important; width: 40px !important; padding: 1px !important; margin-bottom: 0; font-size: 20px;}
}

@media screen and (min-width: 320px) and (max-width: 427px) {
	#surveylama_page.bodyPublic h1											{ font-size: 1.6rem !important;}
	#surveylama_page.bodyPublic h2											{ font-size: 1.6rem !important; font-weight: 700;}
	#surveylama_page.bodyPublic h4											{ font-size: 1.3rem !important; font-weight: 600;}

	#surveylama_page.bodyPublic .wiggleAnimation 							{ position: absolute;	z-index: -1; margin-left: 0%; width: 80%; margin-top: -10px;}
	#surveylama_page.bodyPublic .btn										{ padding: 0.3rem 1.3rem; }
	.trustpilot-widget 														{ padding-top: 0px;}

	#unsubscribe.mainContent,
	#login.mainContent, 
	#activation.mainContent, 
	#sitemap.mainContent, 
	#register.mainContent,
	#update-password.mainContent,
	#reset-password.mainContent 											{ height: auto ;}
	.d-xs-block																{ display : block !important;}
	.d-xs-none																{ display : none !important;}
	.hero.bg-transparent .card 												{ padding : 1rem !important; background-color : #fff !important; }
	.hero.bg-secondary .card 												{ padding : 1rem !important; background-color : transparent !important; }
	.hero .card																{ padding: 1rem!important; margin-left: -15px!important; margin-right: -15px!important; border-radius: 0;}
	.hero.bg-transparent													{ background-color :#fff !important;}
	#register .progressBar .mt-step-number 									{ height: 40px !important; width: 40px !important; padding: 1px !important; margin-bottom: 0; font-size: 20px;}
}


@media (min-width: 576px) and (max-width: 768px){
	.container, .container-sm { max-width: 100%;}
}


@media screen and (min-width: 428px) and (max-width: 768px) {
	#surveylama_page.bodyPublic h1											{ font-size: 1.6rem !important;}
	#surveylama_page.bodyPublic h2											{ font-size: 1.6rem !important; font-weight: 700;}
	#surveylama_page.bodyPublic h4											{ font-size: 1.3rem !important; font-weight: 600;}
	#surveylama_page.bodyPublic .wiggleContainer h1							{ font-size : 2.6rem !important; font-weight : 700;}
	#surveylama_page.bodyPublic .wiggleContainer h2							{ font-size : 1.6rem!important; font-weight : 600;}
	#surveylama_page.bodyPublic .wiggleAnimation 							{ position: absolute;	z-index: -1; margin-left: 0%; width: 80%; margin-top: -10px;}
	#unsubscribe.mainContent,
	#login.mainContent, 
	#activation.mainContent, 
	#sitemap.mainContent, 
	#register.mainContent,
	#update-password.mainContent,
	#reset-password.mainContent 											{ height: auto ;}

}

@media screen and (min-width: 768px) { 
	#how-we-work .splide__slide p.slideContent 								{ font-size: 1rem; height: 200px;}
	#how-we-work .splide__slide .title 										{ height: 60px;line-height: 30px;padding: 0;}
	.wiggleContainer														{ text-align: left; height: auto; min-height: 110px;}
	.wiggleAnimation														{ position: absolute;z-index: -1;margin-left: -5%;width: 60%;margin-top: -10px;}
	#index .hero .illustration,
	#lp1 .hero .illustration,
	#login .hero .illustration,
	#register .hero .illustration,	
	#update-password .hero .illustration,
	#reset-password .hero .illustration 									{ display : none !important;}
}

@media screen and (max-width: 991px) { 
	#mainMenu .nav-link 													{ width : 40% !important;margin-left: 5%;margin-bottom: 0px;}
	#mainMenu .nav-link.btn 												{ margin-bottom : 20px;}
}

@media (max-width: 575px){
	#mainMenu .nav-link 													{ width : 100% !important; margin-left: 0%;}
	.bodyPublic .btn 														{ padding: 0.5rem 2rem!important; }

	.hero .card																{ padding: 1rem 1rem!important; margin-left: -20px!important; margin-right: -20px!important; border-radius: 0 !important;}
	.hero.bg-secondary .card 												{ padding: 1rem 1rem!important; background-color : transparent !important; }
	#index .hero,
	#lp1 .hero,
	#login .hero,
	#register .hero,
	#update-password .hero,
	#reset-password .hero 													{ padding-top : 0 !important;}
}

@media (max-width: 768px){
	.bodyPublic																{ background-color : #fff !important;}

}


@media screen and (min-width: 768px) and (max-width: 991px){ 
	.container, .container-md, .container-sm 								{ max-width: 100%;}
	#surveylama_page.bodyPublic .wiggleAnimation							{ position: absolute; z-index: -1; margin-left: -10%; width: 100%; margin-top: -5px;}

}

@media screen and (min-width: 992px) { 


}
	
@media screen and (min-width: 1200px){
#unsubscribe.mainContent,
#login.mainContent, 
#activation.mainContent, 
#sitemap.mainContent, 
#register.mainContent,
#update-password.mainContent,
#reset-password.mainContent 												{min-height: calc(100vh - 313px);}
}	


@media screen and (max-height: 480px) {

}


@media screen and (max-height: 667px) {

}

@media screen and (min-height: 668px) {


}