.margin-bottom-40 {
	margin-bottom: 40px !important;
}

.main {
	font-family: 'Poppins', sans-serif;
	color: #000;
	word-break: break-word;
}

.main * {
	box-sizing: border-box;
}

.main h1 {
	font-size: 24px;
	margin: 0;
	padding-bottom: 40px;
}

.main h2 {
	font-size: 20px;
	margin-top: 0;
}

@media only screen and (min-width: 1024px) {
	.main h1 {
		font-size: 42px;
		margin: 0;
		padding-bottom: 40px;
	}

	.main h2 {
		font-size: 36px;
		margin-top: 0;
	}
}

.main a {
	text-align: left;
}

.main .quiz-intro-container {
	border: 2px solid #1e9abe;
	border-radius: 5px;
	padding: 10px;
	color: #FFF;
	box-shadow: 4px 4px 15px 0px #C8C7C7;
}

.main .quiz {
	color: #FFF;
}

.main .quiz-intro-container .inner-container {
	background: rgba(0,163,213,1);
	background: -moz-linear-gradient(-45deg, rgba(0,163,213,1) 0%, rgba(127,208,233,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,163,213,1)), color-stop(100%, rgba(127,208,233,1)));
	background: -webkit-linear-gradient(-45deg, rgba(0,163,213,1) 0%, rgba(127,208,233,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(0,163,213,1) 0%, rgba(127,208,233,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(0,163,213,1) 0%, rgba(127,208,233,1) 100%);
	background: linear-gradient(135deg, rgba(0,163,213,1) 0%, rgba(127,208,233,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3d5', endColorstr='#7fd0e9', GradientType=1 );

	border-radius: 5px;

	padding: 20px 10px;
}

.block {
	display: block;
}

.bold {
	font-weight: 600 !important;
}

.font-size-16 {
	font-size: 16px;
}

.color.orange {
	color: #F15D36;
}

.color.mediumred {
	color: #f6515f;
}

.color.mediumblue {
	color: #37b7dc;
}

.ingress {
	font-size: 16px;
	/*padding-bottom: 40px;*/
}

.narrow {
	max-width: 600px;
	margin: auto;
}

.intro {
	padding-bottom: 20px;
}

.intro p {
	padding-bottom: 20px;
	margin: 0;
}

.intro .start-button {
	text-transform: uppercase;
	max-width: 250px;
	padding: 10px 20px;
	border-radius: 100px;
	background-color: #195180;
	margin: auto;
	cursor: pointer;
	display: inline-block;
	border: none;
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
	width: auto;
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.intro .start-button {
		padding: 20px 40px;
	}
}

.padding-top-40 {
	padding-top: 40px;
}

.padding-top-60 {
	padding-top: 60px;
}

.padding-bottom-40 {
	padding-bottom: 40px;
}

.main {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	text-align: center;
	padding: 10px;
	/*padding-bottom: 80px;*/
	box-sizing: border-box;
}

.main .navigation {
	position: absolute;
	top: 20px;
	left: 20px;
}

.main .navigation > a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	text-decoration: none;
	color: #000;
}

.main .navigation img {
	margin-right: 10px;
	border: none;
}

.contact {
	text-align: left;
	padding-top: 40px;
}

.avatar {
	width: 100%;
	max-width: 180px;
}

.main p.name {
	color: #000;
	font-size: 18px;
	margin: 0;

}

@media only screen and (min-width: 1024px) {
	.main p.name {
		font-size: 20px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

.main p.results {
	color: #111;
	font-size: 48px;
}

.main p.results span.wrong {
	color: #c0392b;
	display: block;
}

.main p.results span.right {
	color: #27ae60;
	display: block;
}

.thanks .text1,
.thanks .text2 {
	text-align: left;
}

.main .choice,
.main .generate {
	padding: 10px;
	padding-left: 20px;
	padding-right: 50px;
	color: #FFF;
	background-color: #5bd1ff;
	border-radius: 0;
	cursor: pointer;
	text-align: left;
	position: relative;
}

.relative {
	position: relative;
}

@media only screen and (min-width: 1024px) {
	.main .choice,
	.main .generate {
		padding: 20px;
		padding-left: 60px;
		padding-right: 80px;
		color: #FFF;
		background-color: #5bd1ff;
		border-radius: 0;
		cursor: pointer;
		text-align: left;
		position: relative;
	}
}

.main .choice.shade0 {
	background-color: #00a5d5;
}

.main .choice.shade0:hover > p {
	/*text-decoration: underline;*/
}

.main .choice.shade1 {
	background-color: #37b7dc;
}

.main .choice.shade1:hover > p {
	/*text-decoration: underline;*/
}

.main .choice.shade2 {
	background-color: #7fd1e9;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.main .choice.shade2:hover > p {
	/*text-decoration: underline;*/
}

.main .choice > p {
	display: inline-block;
	margin: 0;
}

.main .choice:hover > p {
	 /*color: #f26d4a;*/
}

.main .choice .arrow-right {
	width: 50px;
	height: 50px;
	display: inline-block;
	background-image: url( 'img/next-red-3.png' );
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 0px;
	top: calc( 50% - 25px );
}

@media only screen and (min-width: 1024px) {
	.main .choice .arrow-right {
		width: 74px;
		height: 74px;
		top: calc( 50% - 37px );
		right: 10px;
	}
}


.main .choice.shade0 .arrow-right {
	background-image: url( 'img/next-blue-1.png' );
}

.main .choice.shade1 .arrow-right {
	background-image: url( 'img/next-blue-2.png' );
}

.main .choice.shade2 .arrow-right {
	background-image: url( 'img/next-blue-3.png' );
}

.main .choice.shade0:hover .arrow-right {
	/*background-image: url( 'img/right-arrow-black.png' );*/
}

@media (max-width: 425px) {
	.main .choice, .main .generate {
		display: block;
		margin: 5px 0;
	}
}

.padding-20 {
	padding: 20px;
}

.quiz {
	font-weight: 500;
	background-color: transparent;
	width: 100%;
	box-sizing: border-box;
	/*border: 3px solid #FFF;*/
	border-radius: 5px;
	box-shadow: 4px 4px 15px 0px #C8C7C7;
}

.quiz * {
	box-sizing: border-box;
}

.quiz .question {
	width: 100%;
	padding: 10px;
	background-color: #FFF;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.blobs {
	max-width: 1024px;
	margin: 0 auto;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.blobs .blob {
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-color: #ccc;
	background-color: #FFF;
	margin: 5px;
	border-radius: 100%;
	display: inline-block;
}

.blobs .blob.active {
	background-color: #ccc;
}

@media only screen and (min-width: 1024px) {
	.blobs {
		padding: 40px;
	}

	.blobs .blob {
		width: 20px;
		height: 20px;
	}
}

.social-links {
	padding-top: 40px;
}

.social-links img {
	margin-left: 14px;
	margin-right: 14px;
	border: none;
}

@media only screen and (min-width: 1024px) {
	.main {
		padding: 40px;
	}

	.main .quiz-intro-container .inner-container {
		padding: 80px 40px;
	}
}

a {
	text-decoration: none;
	color: #37b7dc;
}

a:hover {
	color: #00a5d5;
}

#mc_embed_signup {
	background-color: transparent !important;
	font-family: 'Poppins', sans-serif !important;
	padding: 0 !important;
}

#mce-EMAIL {
	border-radius: 5px !important;
}

#mc_embed_signup_scroll h2 {
	text-align: center !important;
}

.margin-auto {
	margin: 0 auto !important;
}

.margin-bottom-20 {
	margin-bottom: 20px !important;
}

.max-width-300 {
	max-width: 300px !important;
}

.inline {
	display: inline !important;
}

.width-auto {
	width: auto !important;
}

/***********
	Init - dölj element från början
***********/
.quiz-wrapper .quiz,
.quiz-wrapper .blobs,
.quiz-wrapper .social-links,
.quiz-wrapper .results,
.quiz-wrapper .logo,
.quiz-wrapper .navigation {
	display: none;
}

.hidden {
	display: none;
}

.margin-bottom-10 {
	margin-bottom: 10px !important;
}

#mc_embed_signup input.email {
	border: 2px solid #fff !important;
	background: transparent !important;
	padding: 10px !important;
	font-size: 16px !important;
	color: #fff !important;
}

#mc_embed_signup input.email:focus {
	border: 2px solid #000 !important;
	background: transparent !important;
	outline: none;
}

.error {
	background: transparent !important;
  
    padding: 0 !important;
    color: #FF0000 !important;
    width: 100%;
	text-align: center;
	font-size: 12px;
	margin-top: 5px;
}

.smaller-text {
	font-size: 10px;
    display: block;
    position: relative;
    left: 20px;
    top: 0;
    width: calc(100% - 20px);
}

#CHECKBOX {
	position: absolute;
	width: 10px;
	height: 10px;
	left: 0;
	top: 0;
	margin: 0;
}