@charset "utf-8";

/*
*CSS-Design
*Boutique Hotel Fährhaus
*/

/* Reset * * * * * * * * */


*{
	margin: 0;
	padding: 0;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing: border-box;
}

html{
font-size: 100%; /*Browserstandard: 16px */
}

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


/* Layout * * * * * * * * */


body{
font:400 18px/24px Play, arial, sans-serif;
height: 100vh;
margin:0;
}

.wrapper{
max-width:1200px;
margin: 0 auto;
overflow:hidden;
background:#055879;
}

#wrapper{
max-width:1200px;
margin: 0 auto;
}


#main{
max-width:1200px;
margin: 0 auto;
padding:0 10px;
color:#055879;
}


#main article{
background:#fafcff;
padding:35px 25px 20px 35px;
text-align:left;
}


#metanavigation{
background:#055879;	
text-align:right;
padding-right:50px;
}


header{
background: #fafcff; /* Weiss */
text-align: center;
padding: 5px 0 5px 0;
}

#mainnavigation{
background:#fafcff;
padding:10px 0 0 0;
}


#content{
font-size: 19px;
font-size:1.188rem;
line-height:25px;
padding: 40px 0 0 0;
color:#055879;
}

.contenttextrechts{
padding:20px 0 0 20px;
}

.contenttextlinks{
padding:20px 20px 0 0;
}

.slogan{
text-align:center;
}

#footer{
max-width:1200px;
margin: 0 auto;
overflow:hidden;
background:#055879;
}

/* RASTER (Spalten) * * * * * * * * */

.column{
float:left;
background:#fafcff;
padding:0px;
margin: 0px;
}

.column:first-child{
margin-left:0;
}

.column:last-child{
margin-right:0;
}

.row{
width:100%;
float:left;
margin-left:10px;
}

.full{width: 100%;}
.half{width: 49%;}
.thirdblue{width: 32%;
background-color:#055879;}
.two-thirds{width:66%;}
.fourth{width:23.5%;}
.three-fourth{width:74.5%;}


/* NAVIGATIONEN * * * * * * */

/* METANAVIGATION * * * * * * */

ul#navigationmeta{
float:right;
padding:4px 0;
}

ul#navigationmeta li{
display: inline;
margin:0 0 0 10px;
}


/* HAUPTNAVIGATION * * * * * * */

#mobile-menu-btn{
display:none;
}


ul#hauptnavigation{
float:right;
margin:50px 0 0 0;
}

ul#hauptnavigation li{ 
display: inline; 
margin:0 0 0 20px;
position:relative;
padding: 0 0 10px 10px;
}

ul#hauptnavigation li a{
color:#055879;
text-decoration: none;
text-transform: uppercase;
font-size: 19px;
font-size:1.188rem;
font-weight: 400;
font-family: play, arial, sans-serif;
padding:15px 0;
}

ul#hauptnavigation li a:hover{
color:#a5be00;
}




/*DROP-DOWN-MENÜ STARTSEITE * * * * * * */

ul#hauptnavigation ul{
display:none;
position:absolute;
top:25px;
background:#fafcff;
z-index:99999;
left:0;
}

#hauptnavigation li:hover ul{
display:block;
}

ul#hauptnavigation ul li{
margin:0;
text-align:left;
}

ul#hauptnavigation ul li a{
display:block;
text-transform:none;
font-size:18px;
font-size:1.125rem;
padding: 10px 35px 10px 15px;
 border-bottom: 1px solid #a5be00;
}

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



/* BUTTONS * * * * * * */

.button{
color:#fafcff;
text-decoration:none;
}

.big{
background:#a5be00;
font-size:22px;
font-size:1.375rem;
margin:33px 40px 30px 40px;
border-radius:8px;
padding:15px 0 40px 0;
    height: 30px;
    width: 150px;
    text-align:center;
float:right;
}

.big:hover{
color:#055879;
}

.small{
background:#427aa1;
font-size:17px;
font-size:1.063rem;
margin: 15px 0 10px 0;
border-radius: 2px;
box-shadow:2px 2px 2px #a5be00;
padding:4px 10px 4px 10px;
float:left;
}




/*TYPOGRAFIE * * * * * * */

h1, h2, h3, h4, h5{
font-family: Merienda, Georgia, serif;
font-style: italic;
color:#055879;
}

h1{
font-size:42px;
font-size:2.625rem;
line-height:44px;
font-weight: 700;
text-shadow:1px 1px #cddee4;
margin-bottom:8px;
}

h2{
font-size:25px;
font-size:1.563rem;
line-height:35px;
font-weight: 700;
margin-bottom:8px;
}

h3{	
font-size:22px;
font-size:1.375rem;
line-height:32px;
margin-bottom:8px;
}

h4{	
font-size:20px;
font-size:1.25rem;
line-height:30px;
font-weight:400;
margin-bottom:10px;
}

h5{	
font-size: 20px;
font-size:1.25rem;
line-height:26px;
font-style:normal;
font-weight:400;
margin-bottom:10px;
}

h6{
font-size:22px;
font-size:1.375rem;
font-size:1.188rem;
font-family: play, arial, sans-serif;
line-height:26px;
font-style:normal;
font-weight:400;
margin-bottom:10px;
}

p{
font-family: play, arial, sans-serif;
margin-bottom:12px;
margin:15px 10px 20px 10px;
font-size:20px;
font-size:1.25rem;
}

/* FOOTER * * * * * * */

/* RULE * * * * * * */

.rule1{
font-size:16px;
font-size:1rem;
color:#fafcff;
line-height:18px;
font-style:normal;
font-weight:400;
}

/*FOOTER UL * * * * * * */

#footerlinks{
    color:#fafcff;
text-align:center;
margin-top:30px;
}

ul#footercenter{
margin-top:30px;
text-align:center;
color:#fafcff;
}

ul#footerrechts{
margin-top:30px;
text-align:center;
color:#fafcff;
}

ul#footercenternavi li{
display:grid;
margin-top:10px;
}

ul#footerrechts li{ 
display: grid;
text-align:center;
margin-top:10px;
}

ul#footerrechts li a{
color:#fafcff;
  font-family:play, arial, "sans-serif";
    font-size:16px;
    font-size:1rem;
}

ul#footerrechts li a:hover{
color:#a5be00;
}




/* WEITERE ELEMENTE * * * * * * */

hr{
background:#055879;
border:0;
height:1px;
width: 100%;
float:right;
margin:40px 0 40px 0;
}

.top{
color:#a5be00;
font-size:16px;
    font-size:1rem;
font-weight:700;
text-transform:uppercase;
}


/* MEDIA QUERIES * * * * * * * * */


@media only screen and (min-width: 980px) and (max-width: 1279px) {
header{
}
}

@media only screen and (min-width: 720px) and (max-width: 979px) {
header{
}
.wrapper{
width:100%;
}

.full, .half, .two-thirds, .third, .fourth, .three-fourth, #main, .sidebar{
width: 98%;
margin: 15px 1% !important;
}

a#mobile-menu-btn{
	display: block;
	background: #055879;
	color: #fafcff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 2px 0;
	margin: 1px auto;
    font-family:play, arial, sans-serif;
    font-size:19px;
font-size:1.188rem;
}

#hauptnavigation{
display:none;
}

/*HAUPTMENU KLEINER BILDSCHIRM 720 bis 979 * * * * * * * * */


ul#hauptnavigation{
display:none;
width:100%;
position:relative;
}
ul#hauptnavigation{
margin:0;
width:100%;
z-index:99999;
position:relative;
}


ul#hauptnavigation li{ 
display: block;
background:#fafcff;
float:none;
margin:0 0 0 0px;
position:relative;
padding: 0 1px 1px 1px;
}

ul#hauptnavigation li a{
display:block;
color:#fafcff;
background:#055879;
text-decoration: none;
font-size: 18px;
font-size:1.125rem;
font-weight: 400;
font-family: play, arial, sans-serif;
padding:2px 15px 4px 15px;
    }


/*HAUPTMENU DROP-DOWN KLEINER BILDSCHIRM 720 bis 979 * * * * * * */

ul#hauptnavigation ul{
display:none;
background:#fafcff;
}

ul#hauptnavigation ul{
margin:0;
width:100%;
}

#hauptnavigation li:hover ul{
display:block;
}

ul#hauptnavigation ul li{
margin:2px;
display:block;
float:none;
}

ul#hauptnavigation ul li a{
display:block;
text-transform:none;
  color:#fafcff;
    background:#427aa1;
    text-align:center;
font-size:18px;
font-size:1.125rem;
}

    }

@media only screen and (max-width: 719px){
header{
}
.wrapper{
width:100%;
}

      .product_info {
          display: -webkit-flex;
          display: -ms-flexbox;                       // Internet Explorer 10
          display: flex;
          -webkit-flex-direction: row;
          -ms-flex-direction: row;
          flex-direction: row;
          flex-wrap: wrap;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          }


#product1{
order:1;
}

#product1_bild{
order:2;
}

#product3{
order:1;
}

#product3_bild{
order:2;
}




.full, .half, .two-thirds, .third, .fourth, .three-fourth, #main, .sidebar{
width: 98%;
margin: 15px 1% !important;
}


a#mobile-menu-btn{
	display: block;
	background: #055879;
	color: #fafcff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 2px 0;
	margin: 1px auto;
    font-family:play, arial, sans-serif;
    font-size:20px;
font-size:1.25rem;
}

#hauptnavigation{
display:none;
}

/!HAUPTMENU KLEINER BILDSCHIRM max 719px * * * * * * * * */

ul#hauptnavigation{
display:none;
width:100%;
position:relative;
}

ul#hauptnavigation{
margin:0;
width:100%;
z-index:99999;
position:relative;
}


ul#hauptnavigation li{ 
display: block;
background:#fafcff;
float:none;
margin:0 0 0 0px;
position:relative;
padding: 0 1px 1px 1px;
}

ul#hauptnavigation li a{
display:block;
color:#fafcff;
background:#056979;
text-decoration: none;
font-size: 19px;
font-size:1.188rem;
font-weight: 400;
font-family: play, arial, sans-serif;
padding:2px 15px 4px 15px;
    }


/*HAUPTMENU DROP-DOWN KLEINER BILDSCHIRM max 719px * * * * * * */

ul#hauptnavigation ul{
display:block;
background:#fafcff;
position:static;
}

ul#hauptnavigation ul{
margin:0;
width:20vh;
}

#hauptnavigation li:hover ul{
display:block;
}

ul#hauptnavigation ul li{
margin:2px;
display:block;
float:none;
}

ul#hauptnavigation ul li a{
display:block;
text-transform:none;  
color:#fafcff;
background:#427aa1;
font-size:19px;
font-size:1.25rem;
}

}




/*SLIDERSLIDER * * * * * * * * */


.slideshow{
width:100%;
height:50vh;
box-shadow:0px 0px 10px gray;
position: relative;
}

.slide{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow:hidden;
opacity: 0;
transition: opacity 2s;
}

.slide-bild{
width:100%;
}

.slide-textbereich{
position:absolute;
left:0;
bottom:0;
right:0;
bottom:65%;
background-color:rgba(5,88,121, 0.3);
color:#fafcff;
text-align:center;
font-family:merienda, georgia, serif;
padding: 0 15% 0 15%;
}

.slide-ueberschrift{
font-size:42px;
font-size:2,625rem;
line-height:44px;
margin:25px 0 20px 0;
color:#fafcff;
}


.slide-beschreibung{
font-size:25px;
font-size:1.563rem;
line-height:35px;
margin:0;
color:#fafcff;
}


.pfeil{
position:absolute;
top:0;
bottom:0;
font-size:50px;
font-weight:bold;
display:flex;
justify-content:center;
align-items:center;
width:8%;
color:rgba(255, 255, 255, 0.5);
user-select:none;
cursor:pointer;
}

.pfeil:hover{
color:white;
}

.pfeil-links{
left:0;
}

.pfeil-rechts{
right:0;
}

.indikatorenliste{
position:absolute;
top:90%;
left:0;
right:0;
bottom: 10px;
list-style-type:none;
font-size: 40px;
display:flex;
justify-content: center;
margin:0;
padding:0;
color:#ffbe17;
}


.indikator{
padding:0 10px;
user-select:none;
cursor:pointer;
opacity:0.3;
transition: opacity 2s;
}

.aktiv{
opacity: 1;
}


/* DRUCKFORMATIERUNG * * * * * * */
@media print{
#metanavigation, #hautpnavigation, #hauptnavigationunterseiten, #footer{
display:none;
}
}