@charset "utf-8";


/* basics */

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,400italic,700);

body {
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	background-color: #dee2e9;
	color: #202021;
}

h1, h2 {
	font-size: 36px;
	color: #353a42;
}

h1 {
	/* Headline line 2 */
	font-weight: 700;
	line-height: 1.2;
}

h2 {
	/* Headline line 3 */
	font-weight: 300;
	line-height: 1.4;
	padding-bottom: 43px;
}

h2:after {
	left: 50%;
	margin-left: -15px;
	margin-bottom: 20px;
	content: "";
	height: 4px;
	width: 30px;
	border-radius: 2px;
	background-color: #297BC1;
	position: absolute;
	bottom: 0;
}

h3 {
	/* Headline line 1 */
	font-size: 14px;
	font-weight: 400;
	color: #8f8f8f;
}

.lp_entry > h4 {
	/* List company name */
	font-size: 18px;
	font-weight: 400;
	margin-top: 30px;
}

.lp_entry:first-child > h4 { margin-top: 0; }

h5 {
	/* List company industry */
	font-weight: 400;
	font-style: italic;
}

a {
	text-decoration: none;
	-webkit-transition: all, 250ms, cubic-bezier(0.55, 0, 0.1, 1);
	transition: all, 250ms, cubic-bezier(0.55, 0, 0.1, 1);
}

.fontWeight300 { font-weight: 300; }
.fontWeight400 { font-weight: 400; }
.fontWeight700 { font-weight: 700; }

main .mykContent a, main .mykContent a:visited, main .mykContent a:active { color: #467dbd; }
main .mykContent a:hover, main .mykContent a:focus { color: #2a3c5c; }

section.footer a, section.footer a:visited, section.footer a:active { color: #fff; }
section.footer a:hover, section.footer a:focus { color: #bbd7f9; }

.bgWhite { background-color: #fff; }
.bgDark { color: #fff; }
.textGrey, h5 { color: #686868; }
.listURL { font-weight: 400; }


/* framework */

.mykContent, main > section.footer {
	padding: 70px 100px 0 100px;
}

.mykContent.mykList {
	padding-top: 35px;
}

.mykContent p {
	text-align: justify;
}

header, div.headerBg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1;
}

div.headerBg {
	background-color: #1e3050;
	z-index: 0;
}

header, div.headerBg, footer {
	height: 380px;
}

main {
	margin: 0 auto;
	width: 700px;
	-webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.1);
	z-index: 1;
}

main > section {
	text-align: center;
}

main > section.header {
	overflow: auto;
	height: 354px;
	background-color: transparent;
	background-color: rgba(75, 118, 181, 0.19);
}

main > section.footer {
	overflow: hidden;
	height: 354px;
	background-color: transparent;
	background-color: rgba(75, 118, 181, 0.19);
}

main > div.whiteBlock {
	height: 27px;
	background-color: #fff;
}

footer {
	margin-top: -380px;
	z-index: 0;
}


/* header */

section.header .mykLogo {
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 334px;
	height: 64px;
	background-image: url(../img/KlaraNow.png);
	background-size: auto 62px;
	background-position: top center;
	background-repeat: no-repeat;
}

section.header .socialIcons {
	font-size: 14px;
	margin-top: 35px;
}


.ct-socials li {
	display: inline-block;
	height: 25px;
	width: 25px;
	margin-right: 7px;
	background-color: #fff;
	border-radius: 50%;
	padding: 0;
	text-align: center;
}
.ct-socials li a {
	display: block;
	color: #297BC1;
	line-height: 1.71429;
}
.ct-socials li:hover, .ct-socials li:focus, .ct-socials li:active {
	-webkit-box-shadow: 0px 0px 9px 0px rgba(255,255,255, 0.7);
	-moz-box-shadow: 0px 0px 9px 0px rgba(255,255,255, 0.7);
	box-shadow: 0px 0px 9px 0px rgba(255,255,255, 0.7);
}

.ct-socials li:hover, .ct-socials li:focus, .ct-socials li:active {
	background-color: #fff;
}


/* main */

section.mykContent .mykList p {
	margin-bottom: 30px;
}

.mykContent.mykList i {
	font-size: 14px;
	margin-right: 3px;
}

.lp_entry > h4 {
	display: none;
}
.lp_entry {
	max-height: 0px;
	opacity: 0;
	transition: all 2.6s ease 0s;
	visibility: hidden;
}

.lp_entry_visible > h4 {
	display: block;
}
.lp_entry_visible {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
}


/* footer */

.footerBlock {
	float: left;
	width: 49%;
}

a#footer_poweredBy {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 20px;
	margin-left: -77.5px;
	width: 155px;
	height: 72px;

	background-image: url(../img/footer-logo.png);
	background-size: 155px auto;
	background-repeat: no-repeat;

	z-index: 4;
}

div#footer_bg_gradient_bottom {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -200px;
	margin-bottom: -200px;
	width: 400px;
	height: 400px;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 60%);
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 60%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#00ffffff',GradientType=1 );
	/* Edit Gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60&0.2+0,0+60 */
	z-index: 3;
}


/* loadingspinner min */

div.loading_spinner_warp {
	display: block;
	visibility: hidden;
	position: relative;
	height: 42px;
	padding-bottom: 155px;
}

span.loading_spinner {
	position: absolute;
	top: 45px;
	left: 50%;
	margin-left: -21px;
}

span.loading_spinner {
	display: block;
	height: 42px;
	width: 42px;

	background-image: url(../img/loading-spinner-grey_1x.png);
	background-size: 42px 42px;
	background-position: top left;
	background-repeat: no-repeat;

	-webkit-animation-name: btn_loading_line;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: btn_loading_line;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
}
@-webkit-keyframes btn_loading_line {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(-360deg);
	}
}
@keyframes btn_loading_line {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(-360deg);
	}
}


/* retina */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)
{
	section.header .mykLogo { background-image: url(../img/mychoo-ch_myKompass-logo_2x.png); }
	a#footer_poweredBy { background-image: url(../img/footer-logo-2x.png); }
	span.loading_spinner { background-image: url(../img/loading-spinner-grey_2x.png); }
}


/* mobile */

@media only screen and (max-width : 700px) {

	html, body { height: 100%; }
	body { font-size: 14px; }
	h1 { font-size: 28px; line-height: 1.4; }
	h2 { font-size: 22px; }
	h4 { font-size: 16px; }

	.mykContent, main > section.footer {
		padding: 40px 20px 0 20px;
	}

	main {
		width: 100%;
	}

	.mykContent p {
		text-align: center;
	}

	section.header .socialIcons {
		margin-top: 20px;
	}

	main > section.header {
		height: 280px;
	}

	section.header .mykLogo {
		margin-top: 100px;
		width: 70%;
		height: 64px;
		background-size: 70% auto;
		background-position: top center;
		background-repeat: no-repeat;
	}

	.mykContent.mykList i {
		font-size: 12px;
	}

	main > section.footer {
		height: 394px;
	}

	footer {
		/* diff to section.footer +26px */
		height: 420px;
		margin-top: -420px;
	}

	.footerBlock {
		float: none;
		width: auto;
	}

	.footerBlock:first-child {
		margin-bottom: 30px;
	}

}