@charset "UTF-8";
/* --- reset --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,varb,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}/*html5 display-role reset for older browsers*/
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* --- reset --- */
html{overflow-y:scroll;}
/* --- typo --- */
strong{font-weight:bold;}
a:link{outline:none;text-decoration:none;}
a:hover{text-decoration:none;}
a:active,a:focus{outline:none;}
a{cursor:pointer;}
html{-webkit-font-smoothing:antialiased; height:100%;}
/* --- layout --- */
@font-face {
    font-family: 'ABeeZee';
	src: url("../source/ABeeZee-Regular.otf") format("opentype");	
    font-weight: normal;
    font-style: normal;
}


body{font-family: "ABeeZee"; line-height: 1.3; height:100%; background-color: #FFF;}
#header{height: 120px; position: absolute; top: 0; width:100%;  background: -prefix-linear-gradient(top, rgba(18,20,25,1), rgba(18,20,25,0)); background: linear-gradient(to bottom, rgba(18,20,25,1), rgba(18,20,25,0)); z-index: 99; -webkit-backface-visibility: hidden;}
#headerButton{position:absolute; right: 200px; top: 14px;}
#headerButton > .buttonContainer { width:0px;}
.buttonHeader{display:inline-block; color:#FFF; padding: 12px 32px 12px 32px; font-size: 18p; border: 2px solid #FFF; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out;}
.buttonHeader:hover{background:#FFF; color:#000; border: 2px solid #FFF;}
#header .logo{float:left; margin-top:4px; -webkit-backface-visibility: hidden;}
#logoContainer{width: 1400px; margin:auto;}
#header ul{position:absolute; left: 30px; height:32px; top:22px;}
.closeButton{position:absolute; left: 30px; height:32px; top:22px; width:38px; height:24px; background: url('../images/menu_symb.png');  margin-top:5px;  text-indent: 100%; white-space: nowrap; overflow: hidden;}
#header ul li{float: left; padding-right: 30px; display:block; line-height:32px; color:#FFF; font-size:20px; text-transform: uppercase; }
#header ul li:last-child { padding-right: 0px;}
#header ul a{display:block; opacity: 1.0; filter: alpha(opacity=100); transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition:opacity .20s ease-in-out; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#header .menu{width:38px; height:24px; background: url('../images/menu_symb.png'); margin-top:5px;}
#header .spacer{display:block; width:1px; height:46px; margin-top:-6px; background:#FFF;}
#header > ul > li > a:hover {opacity: 0.5; filter: alpha(opacity=50);}
.spacerHeader{padding-top:80px; display:block;}

.progressList{ width: 1400px; margin: auto; padding-bottom:30px; padding-top: 10px;}
.progressList li{clear:left; color:#0A213D; font-size:28px; padding: 16px 0px 16px 0px; line-height:80px;}
.progressList > li > span{float:left; width: 80px;
	height: 80px;
	background: #6C0;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin-right: 28px;}
.contactImage{display: block; width: 80px; height: 80px; background: url('../images/contact.png'); background-repeat:no-repeat; background-position:center; padding-top:4px;}
.readyImage{display: block; width: 80px; height: 80px; background: url('../images/ready.png'); background-repeat:no-repeat; background-position:center; padding-top:4px;}
.workImage{display: block; width: 80px; height: 80px; background: url('../images/work.png'); background-repeat:no-repeat; background-position:center; padding-top:4px;}
.priceImage{display: block; width: 80px; height: 80px; background: url('../images/price.png'); background-repeat:no-repeat; background-position:center; padding-top:4px;}
	
.featureList{width: 1400px; margin: auto; padding-bottom:30px; padding-top: 10px;}
.featureList li{clear:left; color:#0A213D; font-size:24px; padding: 16px 0px 16px 0px;}
.featureList > li > span{float:left; width: 30px; height: 23px; background: url('../images/feature.png'); margin-right: 12px;}

@keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-moz-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-webkit-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}
@-ms-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
@-o-keyframes fadein {from { opacity: 0; }to{ opacity: 1; }}

.titleImageHome{width:100%; height:100vh; margin-top:-20px; background: linear-gradient(
      rgba(0, 101, 156, 0.6), 
      rgba(0, 101, 156, 0.6)
    ), url('../images/titleImage.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;}
.titleImageFotobox{width:100%; height:800px; background: url('../images/fotoboxTitleImage.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;}

#donbosco{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/unterkunft.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#alstandel{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/cstes2023/unterkunft/6.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }


#austragung{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/umgebung.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }


#gelaende{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/gelaende.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#review23{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2023.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#review24{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2024.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }


#review22{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2022.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#review19{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2019.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#review17{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2017.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

.blue{width:100%; color:#FFF; text-align:center; padding-top: 20px; padding-bottom: 60px;  background: linear-gradient(
      rgba(0, 142, 218, 1), 
      rgba(0, 142, 218, 1)
    ); box-shadow: 0px 10px 15px grey;}
.grey{width:100%; color:#FFF; background: linear-gradient(
      rgba(64, 64, 64, 1), 
      rgba(64, 64, 64, 1)
    );}
.white{width:100%; padding-top: 20px; padding-bottom: 70px; box-shadow: 0px 10px 15px #666; position:relative;}
.orange{width:100%; background-color:#FFA50C; font-weight:bold; color:#000; text-align:center; padding-top: 120px; padding-bottom: 70px;}

#essen{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/essen.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

#fahrzeuge{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/fahrzeuge.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }


#review18{width:100%; color:#FFF; padding-top: 40px; padding-bottom: 40px; background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url('../images/review2018.jpg'); background-size: cover; background-position:center; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }

.blue{width:100%; color:#FFF; text-align:center; padding-top: 20px; padding-bottom: 60px;  background: linear-gradient(
      rgba(0, 142, 218, 1), 
      rgba(0, 142, 218, 1)
    ); box-shadow: 0px 10px 15px grey;}
.grey{width:100%; color:#FFF; background: linear-gradient(
      rgba(64, 64, 64, 1), 
      rgba(64, 64, 64, 1)
    );}
.white{width:100%; padding-top: 20px; padding-bottom: 70px; box-shadow: 0px 10px 15px #666; position:relative;}
.orange{width:100%; background-color:#FFA50C; font-weight:bold; color:#000; text-align:center; padding-top: 120px; padding-bottom: 70px;}


#menuWrapper{height:100vh; width:100%; background-color: #272727;}
#menu{height:100vh; width:100%; background-color: #272727;}
#menu > a{display:block;color:#FFF; font-size:28px; padding: 16px 0px 16px 100px; border-bottom: 1px solid #008eda;}
#menu > a:last-of-type{border-bottom: none;}
#menu > a:hover{color:#008eda;}

.continueDiv{position: absolute; width: 100%; text-align:center; top: 85vh; transform: translateY(-50%);}

h1{position: absolute; width: 100%; text-align:center; top: 25vh; transform: translateY(-50%); color:#FFF; font-size:90px; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; text-transform: uppercase;}
h2{width: 1400px; margin:auto; padding-top:60px; padding-bottom:30px; font-size:50px; text-align: center;}
#review h2, .grey h2 {color:#FFF;padding-bottom:60px;}
h3{width: 1400px; margin:auto; padding-bottom:10px; padding-top:20px; font-size:28px;}
h4{width: 1400px; margin:auto; padding-bottom:10px; padding-top:20px; font-size:28px;}
p{width: 1400px; margin:auto; padding-bottom:20px; font-size: 20px; text-align:justify;}
p:last-of-type{padding-bottom:60px;}
.note{font-size: 12px;}
.spacer { width: 1400px;  margin:auto; margin-top:20px; margin-bottom:20px; height:1px; background:#F00; display:block; }


.button{display:inline-block; background:#FFF; color:#000; padding: 12px 32px 12px 32px; font-size: 18p; border: 2px solid #000; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out;}
.buttonSmall{display:inline-block; background:#FFF; color:#000; padding: 3px 26px 3px 26px; font-size: 18p; border: 2px solid #000; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out;}
.button:hover, .buttonSmall:hover{background:#1D69D9; color:#FFF; border: 2px solid #1D69D9;}

.grey .button{ background:none; color:#FFF; border: 2px solid #FFF;}
.grey .button:hover{background:#FFF; color:#000; border: 2px solid #FFF;}

.gallery{ margin:auto; width: 140px; padding-top:80px; }

.fullwidhtContainer{width:100%; background:#A7AFBA; }
.p .fotobox2{display:inline-block; width:200px; height:200px; background: url('../images/Fotobox2.png'); background-size: cover; background-position:top; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;}
.blue p, .orange p{text-align:center;}
.fullwidhtContainer p{padding-bottom:32px; padding-top:32px;}

.clear{clear:both; display: block;}

.ulWrapper{width:1400px; margin:auto;}

#footer{width:100%; background-color: #272727; position:absolute;
bottom:0px;}
#footer p{width: 100%; color:#818181; text-align:center; padding-bottom: 20px;}
#footer ul{width:100%;}
#footer ul:first-of-type{text-align: center; font-size:18px; padding-top: 20px; text-transform: uppercase;}
#footer ul:first-of-type li{display:inline-block; height:34px; margin-right: 30px;}
#footer ul:first-of-type li:last-of-type{margin-right:0px;}
#footer ul:first-of-type li span{display:inline-block; line-height:34px;}
#footer a{color:#FFF; text-decoration:none; transition: color .20s ease-in-out; -moz-transition: color .20s ease-in-out; -webkit-transition:color .20s ease-in-out;}
#footer a:hover{color:#008eda;}

.footerSpacer{padding-bottom:140px;}

#footer ul:last-of-type{text-align: center; font-size:20px; padding-top: 40px; padding-bottom: 20px; text-transform: uppercase;}
#footer ul:last-of-type li{display:inline-block; margin-right: 15px;}
#footer ul:last-of-type li:last-of-type{margin-right:0px;}
#footer ul:last-of-type span{background-color:#008eda; width:1px; height:14px; display: inline-block; margin-left:15px;}

#wrapper{min-height:100%; width:100%; position:relative;}

form input {
    background-color: #CCC;
    color: #121419;
	margin-top:6px;
    padding: 8px;
    font-size: 18px;
    font-family: 'ABeeZee';
	width: 400px;
    border: 1px solid #888;
    transition: background-color .20s ease-in-out;
    -moz-transition: background-color .20s ease-in-out;
    -webkit-transition: background-color .20s ease-in-out;
    margin-bottom: 20px;
}
form input:last-of-type {
    width: 160px;
}
form textarea{background-color:#CCC; width:1382px; height: 320px; color:#121419; padding: 8px; margin-top:6px; font-size: 18px; font-family: font-family: 'ABeeZee'; border: 1px solid #888;
transition: background-color .20s ease-in-out; -moz-transition: background-color .20s ease-in-out; -webkit-transition: background-color .20s ease-in-out;  margin-bottom: 20px; resize: none;} 
form select{background-color:#CCC; color:#121419; padding: 8px; font-size: 18px; font-family: "ABeeZee"; width: 260px; border: 1px solid #888;
transition: background-color .20s ease-in-out; -moz-transition: background-color .20s ease-in-out; -webkit-transition: background-color .20s ease-in-out; margin-bottom: 20px;}
form input:hover,form input:focus,form textarea:hover,form textarea:focus, form select:focus,form select:hover{border: 1px solid #3D4D63; color:#121419; background-color:#FFF; outline: none;}

.factLeft{float:left; width:33%; display:block;}
.center{text-align:center;}
.height{line-height:1.6; padding-top:60px;}
.factLeft img{padding-bottom:30px;}
.clear{float:none; display:block;}
.highlighted{font-size:28px;}

#countdown{text-align:center; width: 100%; position:absolute; top: 55vh; transform: translateY(-50%); font-size:64px;}
.ctdCenter{width:1000px; margin:auto;}
.ctdCenter > span{float:left; width:33%; display:block; color:#FFF; line-height:1.4;}
.ctdCenter > span > span:first-of-type{ background: rgba(0,0,0,0.5); border: 4px solid #FFF; padding: 24px 14px 24px 14px; }
.ctdCenter > span > span:last-of-type{ font-size:32px;}

.red:hover{border: 2px solid #F00; background-color:#F00;}
.tableDesc{color:#FFF;}
td{ padding: 8px 14px 8px 14px; }
.tableEntry td:last-of-type{ padding: 8px 0px 8px 14px; }
tr:first-of-type > td{ padding: 6px 6px 6px 6px; }
.tableEntry{border-bottom: 2px solid #000; }

@media all and (max-width: 1920px) {
.titleImageFotobox{height:710px;}
}

@media all and (max-width: 1600px) {
#logoContainer,h2,h3,h4,p,.spacer,.article .imgDiv,.infos,.ulWrapper,.progressList,.featureList{width:1000px;}
h1{font-size:120px;}
.infos li{ height:260px; }
.infos a{ font-size:22px;}
.titleImageFotobox{height:480px;}


form textarea{width:982px;} 
}

@media all and (max-width: 1024px) {
#logoContainer,h2,h3,h4,p,.spacer,.article .imgDiv,.infos,.ulWrapper,.progressList,.featureList, .ctdCenter{width:96%;}
.titleImageFotobox{height:400px;}
form textarea{width:96%;} 
}

@media all and (max-width: 900px) {
#header ul{right: 40px;}
#header ul li{padding-right: 26px; }

h1{font-size:60px;}
h2{font-size:32px; font-weight:bold;}

#countdown{font-size:64px;}
.ctdCenter > span{line-height:1.8;}

.infos li{ width: 96%; margin-left:0px; height:260px; }
.infos a{ font-size:22px;}

#navWrapper,#menuWrapper { height: inherit; min-height: 50vw;}
#menuWrapper{min-height:100vw;}
#nav,#menu { height: auto; }
#nav > a,#menu > a{display: block;}
#nav > a > div,#menu > a > div{float:none; height:56vw; max-height:300px; width:100%; position:relative;}
#nav > a > div > div,#menu > a > div > div{opacity: 0.50; filter: alpha(opacity=50);}

.titleImageFotobox{height:280px;}

form textarea{width:95%;} 
form input{width:95%;}
form select{max-width: 98%;}

}

@media all and (max-width: 720px) {
#header .logo{height:60px; padding-top: 6px;}
#header ul li{padding-right: 20px; }
#nav > a > div,#menu > a > div{max-height:260px;}
.progressList li{font-size:20px; padding: 16px 0px 16px 0px; line-height:80px;}
.progressList li span{margin-right: 10px;}

.titleImageFotobox{height:200px;}

#countdown{font-size:40px;}
.ctdCenter > span > span:last-of-type{ font-size:24px;}

}


@media all and (max-width: 520px) {
#header .facebook,#header .youtube,#header .email{display:none;}
.closeButton{right: 60px;}
#footer ul:first-of-type {text-align:inherit; margin:auto; width: 90%;}
#footer ul:first-of-type li {display:inherit; padding-bottom:10px;}
#footer ul:last-of-type {text-align:inherit; margin:auto; width: 90%; padding-top: 20px;}
.footerSpacer{padding-bottom:210px;}

.titleImageFotobox{height:160px;}

.factLeft{float:none; width:100%; padding-bottom:80px;}
.orange{padding-top: 100px; padding-bottom: 0px;}
}