body {
	background-color: white; 
	padding: 0 0 0 0; 
	margin: 0 0 0 0;
}

header {
	text-align:center; 
	padding: 55px 0 0 0;
	max-width: 1100px; 
	margin: auto;
}

footer {
	background-color: rgb(50, 52, 96);
	text-align:center; 
	padding: 80px 0px 70px;
	margin: auto;
}

.link-bar {
	padding-top: 40px;
	padding-bottom: 40px;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.siteanim-container {
	margin-left: 13px;
	margin-right: 13px;
	margin-top: 10px;
	position:relative;
	padding-top:73.02%;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.overlay {
	top:0;
	left:0;
	width:100%;
	height:100%;
	position:absolute;
	cursor: pointer;
	z-index: 100;
}

.add-bgimage,
.add-loadinganim {
	background-color: white; 
	background-size: contain; 
	background-position: center;
	background-repeat: no-repeat;
}

.add-loadinganim {
	background-image: url("../images/loading/loadinganim.svg");
}

.siteanim {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	filter: drop-shadow(0px 5px 10px #0000004c)
}

.content-column {
	max-width: 1100px; 
	margin: auto;
	padding-left: 0px;
	padding-right: 0px;
}

.content-column-medium {
	max-width: 800px; 
	margin: auto;
}

.content-column-narrow {
	max-width: 640px; 
	margin: auto;
}

.content-medium {
	max-width: 800px; 
	margin: auto;
	text-align: center; 
}

.content-narrow {
	max-width: 640px; 
	margin: auto; 
	text-align: center; 
}

.content-narrower {
	max-width: 500px; 
	margin: auto; 
	text-align: center; 
}

#intro-column {
	padding: 0px 10px 20px;
}

#intro-text { 
	padding-bottom: 15px;
}

.intro-text2 {
	padding-top: 10px;
}

.text-subhead {
	color: #fff;
	font-size: 24px !important;
	text-align: center;
	font-weight: 100 !important;
	margin: 0px;
	padding: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
	line-height: 100% !important;
}

#stories-section {
	background-image: linear-gradient(rgb(225, 165, 18),rgba(228, 185, 81));
}

.column-withbgimage {
	background-size: auto; 
	background-position: left top; 
	background-repeat: no-repeat;
}

.title-image {
	align: left;
	display: block;
	margin-right: auto;
	float: none;
	margin-left: -15px;
	margin-bottom: 25px;
	max-width: 100%;
	height: auto;
}

#stories-column {
	padding-bottom: 70px; 
	background-image: url("../images/background/bg-stories.png");
}

#benefits-section {
	background-image: linear-gradient(rgb(207, 112, 24),rgb(255, 123, 0));
}

#benefits-column {
	padding-bottom: 70px; 
	background-image: url("../images/background/bg-benefits.png");
}

.section-text {
	text-align: left;
}

#signup-column { 
	padding: 40px 10px 40px;
}

#socials-column-round {
	padding: 30px 0 20px;
}

.spacing20px {
	padding-left: 20px;
}

.spacing10perc {
	padding-left: 10%;
}

.section-introcontainer { 
	display: flex; 
}

.section-intro {
	-ms-flex: 50%;
	flex: 50%;
	max-width: 60%;
	padding-left: 15px;
	padding-top:65px;
	padding-bottom:35px
}  
@media screen and (max-width: 600px) {
	.section-intro {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
		padding-right:15px;
	}
}

#img-notime {
	padding-top: 30px; 
	max-width: 60px; 
	margin:auto;
	opacity: 0.7;
}

h1 {
	padding: 40px 0 30px; 
	text-align: center;
	font-size: 48px; 
	font-family: Roboto; 
	font-weight: 300; 
}

#vizzuContainer {
	max-width: 445px;
	aspect-ratio: 445 / 212;
	margin: auto;
	position: relative;
}

#vizzuCanvas {
/*	width: 445px;
	height: 212px;
*/
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#bottom-logo {
	max-width: 200px;
	width: 100%;
	height: auto;
}

.text-normal, .input-box, .button {
	font-size: 16px; 
	font-family: Roboto; 
	font-weight: 400; 
	line-height: 200%;
}

.text-whitebg, .input-box {
	color: rgb(127, 127, 127);
}

.text-colorbg, .button { 
	color: rgb(255, 255, 255);
}

.header-text {
	padding-top: 10px !important;
	padding-bottom: 60px !important;
	margin: 0;
}

.text-big {
	font-family: Roboto; 
	font-size: 33px; 
	line-height: 130%;
	font-weight: 100;
}

.text-sup {
	font-family: Roboto; 
	font-size: 14px; 
	line-height: 200%;
}

.copyright {
	padding-top: 30px;
}

.text-bold {
	font-weight: 600;
}

.text-light {
	font-weight: 300;
}

.text-orange {
	color:rgb(255, 126, 0);
}

.text-blue {
	color: #323460;
}

@media screen and (min-width: 600px){
	.onSmallScreen { 
		display: none; 
	}
}

@media screen and (max-width: 600px){
	.onNormalScreen { 
		display: none; 
	}
}

a {
	color: #323460;
}

.input-box {
	padding: 2px 16px;
	margin: 0px 2px 6px;
	border: 1px solid rgb(192, 192, 192);
	border-radius: 18px;
}
@media screen and (max-width: 600px) {
	.input-box {
		width: 80%;
		margin: 0px 0px 6px;
	}
}
.button {
	padding: 2px 32px;
	margin: 0px 2px 6px;
	border: none;
	border-radius: 18px;
	background-color: rgb(255, 126, 0);
	text-align: center;
	outline:none;
}
.button:hover {
	transition: .5s;
	background-color: rgb(216, 98, 0);
}
.button:focus, .input-box:focus {
	transition: .3s;
	box-shadow: 0 0 6px rgb(192, 192, 192);
}
.button::-moz-focus-inner {
   border: 0;
}

#getintouch-button {
	position: fixed;
	bottom: 20px;
	right: 60px;
	float: right;
}

#getintouch-image:hover{
	transition: .3s;
	opacity: 0.75;
	outline:none;
}

.link-wo-outline:focus{
	transition: .3s;
	outline:none;
	opacity: 0.75;
}

.leadin-preview-wrapper{
	font-family: 'Roboto';
}

.leadin-input-wrapper{
	font-family: 'Roboto';
}

.leadin-thank-you-wrapper{
	font-family: 'Roboto';
}

.gdpr-options{
	font-family: 'Roboto';
}


.leadinModal-content{
	background-color: #fff !important;
}

#product-container {
	margin: auto;
	max-width: 892px;
	width: 100%;
	padding-bottom: 70px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

h4{
	font-weight: 300;
	font-family: 'Roboto';
}