@charset "UTF-8";


/*
@font-face {
font-family: 'Metropolis';
src: url('../fonts/Metropolis-Regular.woff') format('woff');
font-weight: normal; font-style: normal;}

@font-face {
font-family: 'MetropolisExtraLight';
src: url('../fonts/Metropolis-ExtraLight.woff') format('woff');
font-weight: normal; font-style: normal;}
*/

@font-face {
font-family: 'MetropolisLight';
src: url('../fonts/Metropolis-Light.woff') format('woff');
font-weight: normal; font-style: normal;}

@font-face {
font-family: 'MetropolisThin';
src: url('../fonts/Metropolis-Thin.woff') format('woff');
font-weight: normal; font-style: normal;}

html {height:100%; width:100%;}


* {box-sizing: border-box;}	

img {width: 100%; height: auto;}


body {font-family: 'MetropolisThin', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 1.1em;
	line-height: 2.1rem;
	color: white;
	padding: 0px;
	margin: 0px;
	background-color: #5e5e5e;
}

.logo {
	width: 100px;
	padding-top: 80px;
	margin-left: 80px;}
	
.canvas_container {
	background-image: url("../images/startbild_dolomiten.jpg");
	min-height: 100vh;
	overflow: hidden;
	display: block;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;}
	
.canvas_container_contact {
	background-image: url("../images/canvas_sofa.jpg");
	min-height: 100vh;
	overflow: hidden;
	display: block;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;}
	
.canvas_container_legal {
	background-image: url("../images/canvas_grey.jpg");
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;}
 

.main_container {
	min-height: 100vh;
	overflow: hidden;
	display: block;
	position: relative;}

header {background-color: #777777;
	height: 140px;
	width: 100vw;}
	
.content {position: relative;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	}
	
.content_contact {position: relative;
	max-width: 318px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 160px;
	}

.content_text {position: relative;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 160px;}
	
.footer {
	width: 100%;
	height: 160px;
	display: block;
	text-align: center;
	position: absolute;
	bottom: 0;
	}
	
.footer_mob {
	width: 100%;
	height: 160px;
	display: none;
	text-align: center;
	position: absolute;
	bottom: 0;
	}

#headline_01 h1 {position: absolute;
	left: 60px;
	top: 380px;}

#headline_02 h1 {position: absolute;
	left: 60px;
	top: 420px;}




/* FONTS */

h1 {font-family: 'MetropolisThin';
	font-weight: normal;
	font-size: 2.1rem;
	line-height: 2.7rem;
	margin-bottom: 20px;
	padding: 0;}

h2 {font-family: 'MetropolisLight';
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 0;
	padding: 0;}

h3 {font-family: 'MetropolisThin';
	font-weight: normal;
	font-size: 1.1rem;
	line-height: 26px;
	margin: 0;
	padding: 0;}

p {line-height: 1.3em;}

.legal {padding: 10px 0 30px;}

.legal a {background-color: rgba(0, 0, 0, 0.2); padding: 0 2px;}

a {text-decoration: none; color: #ffffff}

.spacer_top {padding-top: 140px;}

.spacer_bottom {padding-bottom: 50px;}

h1.spacer_top.datenschutz_mob {display: none}

.footer h3 {padding-top: 80px;}

.font_background {background-color: rgba(0, 0, 0, 0.5); padding: 0 5px;}

.font_background_plus {background-color: rgba(0, 0, 0, 0.5); padding: 0 15px;}
.font_background_x_plus {background-color: rgba(0, 0, 0, 0.5); padding: 0 15px; display: inline-block;}
.font_background_x_plus_mob {background-color: rgba(0, 0, 0, 0.5); padding: 0 15px; display: none;}

.link_active {opacity: 0.4;}

.blackish {background-color: rgba(0, 0, 0, 0.2);}





/* BACK TO TOP */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 120px;
  right: 40px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); */
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(45, 45, 45, 0.63) url(../images/arrow_up.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 4;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  	visibility: visible;
	opacity: 0.8;}
	
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 1;}
  
.no-touch .cd-top:hover {
  background-color: rgba(255, 237, 0, 0.6);
  opacity: 1;}
  




/* RESPONSIVE */



 @media screen and (max-width: 350px) {
.canvas_container {	background-image: url("../images/startbild_dolomiten_mob.jpg");}
h2 {font-size: 1.2rem;}
.logo {padding-top: 40px; margin-left: 20px;}	 
.footer_mob h3 {padding-top: 54px;}	 
h1.spacer_top.datenschutz_mob {display: block;}
h1.spacer_top.datenschutz {display: none;}
.font_background_x_plus_mob {display: inline-block;}
.font_background_x_plus {display: none;}
.content_text {margin: 0 20px;}
.content_contact {margin-left: 20px;}
.footer {display: none;}
.footer_mob {display: block;}

.cd-top {right: 20px;}
 }



@media screen and (min-width: 351px) and (max-width: 840px) {  
.canvas_container {	background-image: url("../images/startbild_dolomiten_mob.jpg");}	 	
h2 {font-size: 1.2rem;}
.logo {padding-top: 80px; margin-left: 20px;}
.content_text {margin: 0 20px;}
}


 @media screen and (min-width: 841px) and (max-width: 940px){  	
.logo {margin-left: 40px;}
}