/* Parallax Settings*/
body, html {
    height: 100%;
    max-width:100%;

	font-family: 'Merienda', cursive;
}

.parallax {
    /* The image used */
    background-image: url("../Pics/bg.jpg");

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:0px 0px;
    background-repeat: no-repeat;
    background-size: cover;
	padding:0px;
	margin:0px;
}

/* Different background images for Parallax Scrolling Effect */
.bg-pic-2{
    z-index:0;

    background-image: url("../Pics/bg1.png");

    
}
.bg-pic-3{
    background-image: url("../Pics/Shiny_Day.jpg");
}


/* Different Patterns for Parallax Background*/
.bg-ptrn-1{
	background-image: url("../patterns/bg2.png");
	

}
.bg-ptrn-2{
		background-image: url("../Pics/bg2.png");

    
}	

@media only screen and (max-width: 1200px) {
    
    .parallax{
        background-size:auto;
        

    }
    
    .bg-pic-2{
        height:100%;
    }
    
    .bg-ptrn-2{
        background:none;
    }
    
    .bg-pic-2{
        background:none;
    }
    
}


/* general settings */
body,html{

    font-size:14pt;
    margin:0;
    padding:0;

}

/* Navigation */
.logo{
	width:120px;
	height:50px;
	left:300px;
	position:absolute;
	top:0px;
	cursor: pointer;
}
.logo img{
  width:100%;
  height:100%;
  opacity:0;
  padding:5px;
  transition: opacity 0.1s;
}
@media only screen and (max-width:1240px){
	.logo{
		display:none;
	}
}
.nav{
    position:fixed;
    margin:0;
    padding:15px;
    top:0;
    left:0;
    width:100%;
    min-height:20px;
	z-index:3;
}
.nav{
	padding-top:40px;
	transition: 0.2s;
	background-color:transparent;
	color:white;
	
}
@media only screen and (max-width:1200px){
	.nav{
		margin-top:0px;
       color:black;
       background-color:#cd853f;
    
	}
}
.wrap-nav-span{
	float:right;
	margin-right:280px;
}
@media only screen and (max-width:1200px){
    .wrap-nav-span{
	float:right;
	margin-right:0px;
}
}
a{
    padding:10px;
    cursor:pointer;
    text-decoration:none;
    color:white;
	transition:color 0.3s;
}
a:hover{
    color:#cd853f;
	
}
@media only screen and (max-width:1200px){
    .nav-span{
        width:100%;
        
        display:inline-block;
        text-align:center;
        margin:5px;
    }
    
    
}
.banner{
    position:fixed;
    margin:0;
    padding:5px;
    bottom:0;
    background-color:#cd853f;
    color:white;
    text-align:center;
    font-weight:900;
    left:0;
    width:100%;
    min-height:20px;
	z-index:3;
}
@media only screen and (max-width:1200px){
    .banner{
        font-size:10pt;
    }
}
.nav-button{
    display:none;
    margin-right:80px;
    margin-top:-27px;
    height:70px;
    width:70px;
    font-size:30pt;
    background:transparent;
    border:none;
    cursor:pointer;
    position:absolute;

}
@media only screen and (max-width:1200px){
    .nav-button{
        display:block;
        color:white;
        margin-top:-35px;
    }
}
/* Colors */
.white{
	background-color:white;
}
.blue{
    background-color:#3399FF;
}
.red{
    background-color:red;
}
.orange{
	background-color:#FF6600;
}
.#cd853f{
    background-color:#cd853f;
}
.overcast{
	background-color:#F1F1F2;
}
.warm-gray{
	background-color:#BCBABE;
}

.glacier-blue{
	background-color:#1995AD;
}




.modalText{
    z-index:10;
    margin:0px auto;
    font-size:20pt;
    bottom:20px;
    text-align:center;
    background-color:white;
}

/*SCHEMA*/
.ice{
	background-color:#A1D6E2;
}
.sky{
	background-color:#CAEBF2;
}
.carbon{
	background-color:#A9A9A9;
}
.watermelon{
	background-color:#FF3B3F;
}
.neutral{
	background-color:#EFEFEF;
}

/* Page Body + Containers*/
.container{
    width:100%;
    height:auto;
    padding:0;
    margin:0;
	margin-top:-26px;
}
.wrap-p{
	width:70%;
	margin:0px auto;
	padding:50px;
	
}
.wrap-p p{
	float:left;

	padding:0px;
	margin:10px;
}
.wrap-p-right{
	width:70%;
	margin:0px auto;
	padding:20px;
}
.wrap-p-right p{
	
	float:right;
	width:100%;
	text-align:right;
	padding:0px;
	margin-top:20px;
	margin-bottom:40px;
}
.large{
	font-size:50px;
	font-family:'Merienda', cursive;
	
}
.huge{
	font-size:80px;
	font-family:'Merienda', cursive;
}
.sub-huge{
	font-size:50px;
	font-family:'Merienda', cursive;
}
@media only screen and (max-width:800px){
	.wrap-p-right p{
		text-align:center;
		font-size:20pt;
		
	}
	.large{
	    text-align:center;
	}
	.wrap-p p{
	    text-align:center;
	    font-size:20pt;
	    float:none;
	}
	.sub-huge{
	    font-size:32px;
	}
	.huge{
	    font-size:100px;
	}
}
.headline-container{
	margin-top:50px;
	background-color:transparent;
	padding-bottom:30px;
	
}
.hl1{
    margin:0;

    width:100%;
    text-align:center;
    font-size:25pt;
	background-color:transparent;
}
.text-container{
	background-color: transparent;
	width:100%;
	height:100%;
	text-align:center;
	margin:0px;
	  display: flex;
	  justify-content: center;
	  flex-direction: column;
	padding:0px;



}
.text-container p{
	width:100%;
	color:#F2F2F2;
	
}
.kontakt{
    width:300px;
    margin:0px auto;
    
    margin-top:120px;
}

@media only screen and (max-width:640px){
    .kontakt{
        width:250px;
    }
}
label{
    padding-bottom:5px;
    font-weight:900;
}

@media only screen and (max-width:1200px){
    .logo{
        display:none;
    }
}

input[type=text]{
    margin-top:14px;
    padding-top:4px;
    padding-bottom:4px;
    width:100%;
    background-color:transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid 2px black;
    font-size:12pt;
    color:black;
}

input[type=submit]{
    border:solid black 2px;
    background-color:transparent;
    cursor:pointer;
    color:black;
    font-size:12pt;
    padding:10px;
}
input[type=submit]:hover{
    border:solid #cd853f 2px;
    background-color:transparent;
    color:#cd853f;
}

textarea{
    margin-top:8px;
    padding-top:4px;
    padding-bottom:4px;
    width:100%;
    background-color:transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid 2px black;
    font-size:12pt;
    color:black;
    font-family: 'Merienda', cursive;
}
.margin-auto-3{
    margin:0px auto;
    width:300px;
    height:580px;
}
.text-2{
    width:100%;
    height:100%;
    display:inline-block;
    font-size:16pt;
    text-align:justify;
}
.bottom-banner{
    background-color:#cd853f;
    color:white;
    width:100%;
    font-style:bold;
  
    text-align:center;
  padding-top:20px;
  padding-bottom:20px;
}
.go-down{
	border-radius:50px;
	width:70px;
	height:70px;
	margin:0px auto;
	background-color:transparent;
	border:none;
	transform:rotate(180deg);
	color:white;
	font-size:20pt;
	cursor:pointer;
	
	transition:0.4s;
}
.go-down:hover{

	color:3399FF;
}


/*Responsive Containers*/
.quote{
    width:300px;
    font-size:42pt;
    font-family:'Merienda', cursive;
    text-align:center !important;
    width:500px;
    margin:0px auto;

}
.wrap-all{
	width:70%;
	margin:0px auto;
    margin-top:100px;
    text-align:center;

}

.wrap-cols{
	width:250px;
	margin:0px auto;
	display:inline-block;
    transition:0.3s;
    
}
.wrap-cols-effect:hover{
    transform: scale(1.05);
    cursor:pointer;

}
.wrap-cols-2{
    padding-top:10px;
    padding-bottom:10px;
	width:250px;
	margin:0px auto;
	display:inline-block;
	margin-left:8px;
	margin-bottom:8px;
	margin-top:8px;
	border:solid #cd853f 2px;
	border-radius:5px;


}

.icon-col{
	height:100px;
	width:100%;
	text-align:center;
}
.icon-pic{
	width:80px;

}
.icon-pic-2{

    padding-top:10px;
	width:200px;
	height:80px;

}
.text-col{
	height:200px;
	width:100%;
	text-align:center;
}
.text-col-2{

	height:400px;
	width:95%;
	text-align:center;
	border:solid #cd853f 2px;
}

.marketing-links{
    color:black;
    background-color:transparent;
    border-radius:2px;
    padding:10px;
    border:solid #cd853f 2px;
    font-size:15px;
    cursor:pointer;
    transition:background-color 0.2s;
}
.marketing-links:hover{
    color:white;
    background-color:#cd853f;
    
}

/*Jump Links / Nav */
.jump-link{
	color:black;
	padding:0;
	margin:0;
}

/*Modal Image Container*/

.wrap-modal-bg{
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:5;
    text-align:center;
    padding-left:0;
    margin-left:0;

}

.wrap-modal{

    width:100%;
    text-align:center;
    
}
.modal{
    margin-top:150px;
    width:100%;
    height:650px;
    position:absolute;

}
.plan{
    width:400px;
}

.close-modal{
    border:none;
    font-size:32pt;
    color:white;
    background-color:transparent;
    cursor:pointer;
    position:absolute;
    right:100px;
    top:100px;
    font-weight:900;
    transition:transform 0.4s;
}
.close-modal:hover{
    transform:rotate(90deg);
    
}
.modal img{
    border:solid white 3px;
    left:0;
    width:1000px;
    height:650px;
}

@media only screen and (max-width:1200px){
    .modal img{
        width:420px;

        height:300px;
        
    }
    .modal{
        margin-top:60px;
    
    }
    .close-modal{
        top:50;
        right:0;
    }
}
@media only screen and (max-width:1200px){
        .modal{
        margin-top:150px;
    
    }
    .modal img{
        width:320px;
        height:200px;
        max-width:300px;
        max-height:200px;
        min-width:300px;
        min-height:200px;
    }
        .close-modal{
        top:70;
        right:0;
    }

}



@media only screen and (max-width:640px){
    .buchung{
        width:85%;
    }
}
.buchung input[type=text]{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid black 2px;
    font-size:12pt;
}
.buchung input[type=text]:focus{
    border-bottom-color:#cd853f;
}
.buchung textarea{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:solid black 2px;
    font-size:12pt;
    max-width:400px;
    font-family:"Open Sans";
}
.buchung input[type=submit]{
    background-color:#cd853f;
    width:150px;
    height:50px;
    color:white;
    font-size:12pt;
    cursor:pointer;
    border:none;
    border: solid #cd853f 2px ;
    transition:0.3s;
}
.buchung input[type=submit]:hover{
   
    background-color:white;
    color:#cd853f;
}
.buchung textarea:focus{
    border-bottom-color:#cd853f;
    
}
.buchung label{
    float:right;
    margin-top:10px;
    margin-bottom:10px;
}

/*Table Styles*/
table {
    border-collapse: collapse;
    width: 70%;
    margin-top:50px;
    margin:0px auto;
}

th, td {
    text-align: left;
    padding: 20px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #cd853f;
    color: white;
}


@media only screen and (max-width:1200px){
    .plan{
        display:none;
    }

}