@charset "utf-8";

/* Import Roboto
font-family: 'Roboto', sans-serif;
100 thin - 300 light - 400 regular - 500 medium - 700 bold - 900 black */
/* 100 thin */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-thin_100.woff2') format('woff2'),
	     url('fonts/roboto/roboto-thin_100.woff') format('woff'),
	     url('fonts/roboto/roboto-thin_100.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-thinitalic_100.woff2') format('woff2'),
	     url('fonts/roboto/roboto-thinitalic_100.woff') format('woff'),
	     url('fonts/roboto/roboto-thinitalic_100.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

/* 300 light */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-light_300.woff2') format('woff2'),
	     url('fonts/roboto/roboto-light_300.woff') format('woff'),
	     url('fonts/roboto/roboto-light_300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-lightitalic_300.woff2') format('woff2'),
	     url('fonts/roboto/roboto-lightitalic_300.woff') format('woff'),
	     url('fonts/roboto/roboto-lightitalic_300.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* 400 regular */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-regular_400.woff2') format('woff2'),
	     url('fonts/roboto/roboto-regular_400.woff') format('woff'),
	     url('fonts/roboto/roboto-regular_400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-italic_400.woff2') format('woff2'),
	     url('fonts/roboto/roboto-italic_400.woff') format('woff'),
	     url('fonts/roboto/roboto-italic_400.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* 500 medium */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-medium_500.woff2') format('woff2'),
	     url('fonts/roboto/roboto-medium_500.woff') format('woff'),
	     url('fonts/roboto/roboto-medium_500.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-mediumitalic_500.woff2') format('woff2'),
	     url('fonts/roboto/roboto-mediumitalic_500.woff') format('woff'),
	     url('fonts/roboto/roboto-mediumitalic_500.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* 700 bold */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-bold_700.woff2') format('woff2'),
	     url('fonts/roboto/roboto-bold_700.woff') format('woff'),
	     url('fonts/roboto/roboto-bold_700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-bolditalic_700.woff2') format('woff2'),
	     url('fonts/roboto/roboto-bolditalic_700.woff') format('woff'),
	     url('fonts/roboto/roboto-bolditalic_700.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* 900 black */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-black_900.woff2') format('woff2'),
	     url('fonts/roboto/roboto-black_900.woff') format('woff'),
	     url('fonts/roboto/roboto-black_900.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('fonts/roboto/roboto-blackitalic_900.woff2') format('woff2'),
	     url('fonts/roboto/roboto-blackitalic_900.woff') format('woff'),
	     url('fonts/roboto/roboto-blackitalic_900.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}


/* Import Font Awesome */
@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/font-awesome/fontawesome-webfont.eot');
	src: url('fonts/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/font-awesome/fontawesome-webfont.woff2') format('woff2'), url('fonts/font-awesome/fontawesome-webfont.woff') format('woff'), url('fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'), url('fonts/font-awesome/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

body, html {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 300; /* light */
	min-height: 100%; /* body - important for disable scrolling with JS */
	overflow-x: hidden;
}

/* Remove blue border in FF from img links */
:focus {
	outline: 0;
}

.icon_bf::before {
	/* fa start */
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* fa end */
	font-size: inherit;
	line-height: inherit;
	color: #FFF;
	content: "\f2b4"; /* font awesome icon */
	margin: 0 10px 0 0;
}

/* Remove blue border when link touched */
/* Do not use for text input fields - or use value initial */
a, label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}


/* General */
* {
    box-sizing: border-box;
}

a {
	text-decoration: none;
}

.align_l {
	text-align: left;
}

.align_r {
	text-align: right;
}

.align_c {
	text-align: center;
}

.align_j {
	text-align: justify;
}

.align_last_l {
	text-align-last; left;
}

.valign_c {
	vertical-align: middle;
}

.loading {
    position: fixed;
    display: table;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(64,186,236);
    background-color: rgba(64,186,236,0.95);
}

.loading_wrapper {
	display: table-cell;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;	
	vertical-align: middle;
	text-align: center;
}

.loading_content {
	/* background-color: #FFF; */
    margin: 0 auto;
	display: inline-block;
    border-radius: 6px;
	padding: 35px;
    overflow: hidden;
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15), 0 6px 20px 0 rgba(0,0,0,0.15); */
}

.spinning_loader {
	display: inline-block;
	margin: 0 auto;
    width: 75px;
    height: 75px;
    border: 3px solid #f8f8f8;
    border-top: 3px solid #3599c2;
    border-radius: 50%;
}

.spinning_message_title {
	margin-top: 25px;
	font-size: 30px;
	font-weight: 300; /* light */
	color: #FFF;
}

.spinning_message {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 300; /* light */
	color: #FFF;
}

/* Spinning animation START */
.anim_spin_clockwise {
	-webkit-animation: spincw 1s linear infinite; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: spincw 1s linear infinite; /* Firefox < 16 */
	-ms-animation: spincw 1s linear infinite; /* Internet Explorer */
	-o-animation: spincw 1s linear infinite; /* Opera < 12.1 */
	animation: spincw 1s linear infinite;
}

@-webkit-keyframes spincw { /* Safari, Chrome and Opera > 12.1 */
	0% {-webkit-transform:rotate(0deg); transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg); transform:rotate(360deg);}
}
@-moz-keyframes spincw { /* Firefox < 16 */
	0% {-moz-transform:rotate(0deg); transform:rotate(0deg);}
	100% {-moz-transform:rotate(360deg); transform:rotate(360deg);}
}
@-o-keyframes spincw { /* Opera < 12.1 */
	0% {-o-transform:rotate(0deg); transform:rotate(0deg);}
	100% {-o-transform:rotate(360deg); transform:rotate(360deg);}
}
@keyframes spincw { /* Internet Explorer >IE10 + Standard CSS */
	0% {-ms-transform:rotate(0deg); transform:rotate(0deg);}
	100% {-ms-transform:rotate(360deg); transform:rotate(360deg);}
}
/* Spinning animation END */

.main {
	width: 100%;
	min-width: 900px;
	height: 100vh;
	overflow: hidden;
	user-select: none;
}

.top_wrapper {
	display: table;
	width: 100%;
	background-color: #383b3e;
	padding-top: 7px;
	padding-bottom: 7px;
	/* border-bottom: 2px solid #40BAEC; */
	color: #FFF;
}

.top_cell {
	display: table-cell;
	width: 50%;
	padding: 0 30px 0 30px;
	cursor: default;
}

.top_cell .tel {
	font-size: 14px;
	color: #868686;
}

.top_cell .tel.icon_bf::before {
	color: #868686;
	/* content: "\f095"; tel icon */
	content: "\f086"; /* talk icon */
	margin-right: 7px;
}

.top_cell .claim {
	font-size: 14px;
	letter-spacing: 4.2px;
	color: #868686;
	cursor: default;
}

.top_anim_wrapper {
	width: 100%;
	height: 2px;
	background-color: #383b3e;
}

.top_anim_border {
	width: 0%;
	height: 2px;
	margin: 0 auto; /* from middle to edge */
	background-color: #40BAEC;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;	
}

.top_anim_border_active {
	width: 100%;
}

.bottom_wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #b5c8d4;
}

.slider_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FFF;
}

.logostripe_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: table;
	z-index: 80; /* stay on top of content */
}

.logo_cell {
	display: table-cell;
	width: 50%;
	padding: 30px 60px 30px 57px; /* padding-left for logo only */
}

.logo_content {
	vertical-align: middle;
}

.button_content {
	vertical-align: middle;
}

.logo_content_wrapper {
	opacity: .60; /* anim initial state OFF */
	display: table;
	-webkit-transition: opacity .6s ease-out;
    -moz-transition: opacity .6s ease-out;
    transition: opacity .6s ease-out;	
}

.logo_content_wrapper > div {
	display: table-cell;
	vertical-align: middle;
}

.logo_img {
	opacity: 1; /* anim initial state OFF */
	width: 148px;
	height: 48px;
	display: inline-block;
	background-image: url(img/td-oa_logo_white_shadow_361x116.png);
	background-repeat: no-repeat;
	background-size: cover;
	/* image-rendering: optimizeQuality; */		/* Smoothing, less speed, pixeled in Firefox */
	/* image-rendering: -moz-crisp-edges; */    /* pixeled in Firefox */
	/* image-rendering: -o-crisp-edges; */      /* pixeled in Opera */
	image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
	image-rendering: bicubic; 					/* Chrome */
	image-rendering: high-quality; 				/* https://drafts.csswg.org/css-images-3/#the-image-rendering */
	image-rendering: optimize-contrast;         /* CSS3 Proposed */
	-ms-interpolation-mode: bicubic;   			/* IE7+ */
}

.logo_content_wrapper:hover {
	opacity: 1; /* anim initial state OFF */
}

.logo_pagetitle {
	opacity: 1;
	font-weight: 100; /* thin */
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 20px;
	text-shadow: 0 0 5px rgba(0, 0, 0, .35);
	vertical-align: middle;
	padding-left: 50px;
	display: inline-block;
	text-transform: uppercase;
	color: #FFF;
	cursor: default;
}

.button_cta {
	font-weight: 500; /* medium */
	font-size: 15px;
	line-height: 15px;
	/* padding: 14px 24px 14px 24px; */
	padding: 14px 28px 14px 28px;
	/* border: 1px #FFF solid; */
	border: 2px #FFF solid;
	/* border-radius: 4px; */
	border-radius: 500px;
	display: inline-block;
	color: #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	/* slide-up animation START */
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .05) 50%, #FFFFFF 50%);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
	/* slide-up animation END */
}

.button_cta a {
	color: #FFFFFF;
	text-decoration: none; 
	/* Remove blue border when link touched */	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);	
}

.button_cta:hover, .button_cta a:hover {
	cursor: pointer;
	color: #383b3e;
	background-position: 0 +100%;
}

.button_cta:active {
	position:relative;
	top:1px;
}

.nav_container {
	position: absolute;
	top: 0;
	right: 0;
	height: calc(100% - 35px); /* max. review container height, minus top_wrapper height */
	display: table;
	z-index: 75; /* stay on top of slides */
}

.nav_content {
	display: table-cell;
	text-align: right;
	vertical-align: middle;
	padding: 112px 60px 112px 0;
}


/* slider START */
.slider_container_wrapper {
	display: table;
	width: 100%;
	background-color: #FFF;
}

.reviews_wrapper {
	opacity: 1; /* anim initial state OFF */
	position: relative;
	overflow: hidden;
	height: calc(100% - 35px); /* max. review container height, minus top_wrapper height */
	width: 100%;
	margin: 0 auto; /* center horizontally */
	z-index: 60; /* wrapper-frame containing review panels */
}

.reviews_wrapper .panel {
	position: absolute;
    height: 100%;
	width: 100%;
	display: block;
	overflow: hidden;
	opacity: 1.0;
	z-index: 40; /* default review panels in wrapper-frame */
	/* margin-top: 5px; /* adjust vertical align */
}

.reviews_wrapper .panel.active_review {
	z-index: 50; /* active review panel in wrapper-frame */
}

.reviews_wrapper .panel {
	opacity: 0; /* initial state, make all divs invisible on start */
}

.reviews_wrapper .panel:first-child {
	opacity: 1; /* initial state, make first div visible on start */
}

.panel_content_wrapper {
	display: table;
	width: 100%;
	height: 100%;
	/* background-image preparation */
	background-size: cover;
    background-repeat: no-repeat;	
}

.panel_content {
	display: table-cell;
	text-align: left;
	vertical-align: bottom;
	padding: 130px 65px 65px 65px;
}

.review_content {
	display: inline-block;
	max-width: 650px;
	padding: 15px 25px;
	/* background-color: rgba(0,0,0,0); */
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35));
	border-left: 2px solid #40BAEC;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

.review_content:hover {
	background-color: rgba(0,0,0,.55);
}

.panel_content .review_title {
	font-size: 16px;
	font-weight: 400;
	color: #FFF;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.panel_content .review_subtitle {
	font-size: 15px;
	font-weight: 300;
	color: #FFF;
	margin-bottom: 5px;
}

.panel_content .review_link a {
	font-size: 15px;
	text-decoration: none;
	color: #40BAEC;
	margin-bottom: 10px;
}

.panel_content .review_tags > span {
	/* padding: 3px 6px; */
	padding: 3px 9px;
	/* border-radius: 4px; */
	border-radius: 500px;
	display: inline-block;
	color: #FFF;
	background-color: #40BAEC;
	font-size: 12px;
	font-weight: 400;
	margin-top: 10px;
	margin-right: 10px;
}

.reviews_select_wrapper {
}

.reviews_select {
	opacity: 1; /* anim initial state OFF */
	margin: 0 auto;
	display: table;
  	border-collapse: separate;
  	border-spacing: 0 10px;
	width: 20px;
}

.reviews_select .review {
	display: table-row;
	text-align: center;
	vertical-align: middle;
}

.reviews_select .review div {
	margin: 0 auto;
	/* background-color: #40BAEC; */
	border: 2px solid #FFF;
	width: 20px;
	height: 20px;
	border-radius: 50%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;	
}

.reviews_select .review span {
}

.reviews_select .review:hover {
	cursor: pointer;
}

.reviews_select .active_review_btn div {
	background-color: #40BAEC;
}

.reviews_select .active_review_btn_off {
}

/* slide specific contents */
.review1 .panel_content_wrapper {
	background-image: url(img/bg_review1_hbg.jpg);
    background-position: 47.62% 64.66%;
}

.review2 .panel_content_wrapper {
	background-image: url(img/bg_review2_sat_hh.jpg);
    background-position: 83% 48.22%;
}

.review3 .panel_content_wrapper {
	background-image: url(img/bg_review3_sd_photok.jpg);
    background-position: 68% 26.11%;
}

.review4 .panel_content_wrapper {
	background-image: url(img/bg_review4_fr_stars.jpg);
    background-position: 73.8% 51.22%;
}

.review5 .panel_content_wrapper {
	background-image: url(img/bg_review5_hbg_vcard.jpg);
    background-position: 71.37% 59.66%;
}

.review6 .panel_content_wrapper {
	background-image: url(img/bg_review6_sd_tankg_3.jpg);
    background-position: 51.87% 47.55%;
}

.review7 .panel_content_wrapper {
	background-image: url(img/bg_review7_sd_wasserfl.jpg);
    background-position: 58.13% 50.33%;
}

.review8 .panel_content_wrapper {
	background-image: url(img/bg_review8_ups_karte.jpg);
    background-position: 36.31% 62.22%;
}

.review9 .panel_content_wrapper {
	background-image: url(img/bg_review9_ba_web.jpg);
    background-position: 46% 51.66%;
}

.review10 .panel_content_wrapper {
	background-image: url(img/bg_review10_d3fm_sfv.jpg);
    background-position: 44% 47%;
}

.review11 .panel_content_wrapper {
	background-image: url(img/bg_review11_hbg_leucht.jpg);
    background-position: 41.4% 43.8%;
}

.review12 .panel_content_wrapper {
	background-image: url(img/bg_review12_hbg_fb_2.jpg);
    background-position: 65.18% 58.88%;
}

.review13 .panel_content_wrapper {
	background-image: url(img/bg_review13_web_app.jpg);
    background-position: 50% 50%;
}

.review14 .panel_content_wrapper {
	background-image: url(img/bg_review14_col_messewand.jpg);
    background-position: 20% 53%;
}

/* slider END */