.four.columns + .eight.columns,
.eight.columns + .four.columns{
    padding: 0 15px
}


/* =screen booking 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1198px){


.bs1 { display:inline-block; width: 410px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 240px; text-align: left;}

}


/* =ipad =1024 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px){

:root {
    --h1: 36px;
    --h2: 28px;
    --h3: 22px;
    --h4: 17px;
    --normal: 14px;
}    
    
.column, .columns{padding: 0 15px;}
.grid {margin: 0 10px;}


#navigation ul li a {
    margin: 0px 0px;
    font-size: 16px;
}    
    
.booking_support {font-size: 11px; float: right;color: black;}

.bs1 { display:inline-block; width: 400px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 240px; text-align: left;}

    
#features .feature h4 {font-size: var(--h4);} 
#features .feature p {font-size: var(--normal); line-height: 1;} 
#features .fa-2x {font-size: var(--h3);}    

/* home */

.special_offer{
    width: 100%;
    padding: 0 15px 10px 0;}

/* rooms intro */

.four.columns .four.room_intro.vertical{
    width: 100%;
    margin: 0 0 20px 0;}

.four.columns .four.room_intro.vertical{ 
    width: 100%;
    margin: 0 0 20px 0;}

/* location */
.location_services{
    padding: 50px 20px 20px 20px;    }


.table_container{
    width: 100%;
    margin: 20px 0 50px 0;    }

table{
    width: 100%;
    margin: 20px 0;}

div.pagination div.centered{
    width: 320px;
}


}


/* =ipad =768 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px){

.wis2-el.wis2-title.wis2-title--icon {}


.five.columns p,
ul#misc,
.nav ul{
    display: none;
}


.column, .columns{padding: 0 15px;}

    
.sidenav {
    height: 100%;
    padding: 0px;
    color: var(--color-text-main);
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
}
        
.sidenav .closebtn {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 56px;
    margin-left: 50px;
}
    
ul#mobile-menu li {display: block !important; width: 100%; font-weight: 500; padding: 5px 0; font-size: 17px; border-bottom: 1px solid rgba(0,0,0,.05);}
ul#mobile-menu li.menu-item-has-children ul {display: none;}
ul#mobile-menu li.menu-item-has-children::before {content:'▾'; float: right; color: var(--color-green-main);} 
ul#mobile-menu li.menu-item-has-children:hover ul {display: block;} 
ul#mobile-menu li.menu-item-has-children ul li {font-weight: normal; font-size: 14px; border-bottom: none;}
#header {display: none;}
#header-mobile {display: block;}
#header-mobile {position: absolute; top: 0; z-index: 10000; left: 0; width: 100%; color: white;
background: linear-gradient(rgba(0,0,0,.5) 40%, rgba(0,0,0,0))}
#header-mobile #header-widget {display: block;}
    
    
        #header-mobile .icon.left, #header-mobile .icon.right {text-align: center; margin: 10px; z-index: 99; }
        #header-mobile .icon.right i, #header-mobile .head-small {color: white !important; text-shadow: 2px 2px 8px rgba(0,0,0,.5);}
        #header-mobile .icon.left {float: left;}
        #header-mobile .icon.right {float: right; position: fixed; right: 0; cursor: pointer;}
        #header-mobile .logo {margin: 0px auto !important; top: 0px; position: relative; max-width: 200px; z-index: 1010;}
    
    
    
.metaicon_room i {font-size: 16px;}
.metaicon_room {text-align: center; background: none !important; width: auto; float: none;
    display:inline-block; padding: 2px 10px !important; font-size: 11px;}
.metaicon_room_single { padding: 0 10px !important; font-size: 13px;}


#arrangements_home {display: none;}

/* maps */
iframe{max-width: 768px;}

/* home */
.welcome{padding: 0 15px 10px 0;}

.amenities{padding: 30px 15px 0 0;}

.special_offer{
    padding: 0 15px 10px 0;}

.amenities ul li{
    width: 135px;
    height: 50px;
    margin: 0 10px 10px 0;}


/* book */
.booking{
    height: auto;
    background: none;
    background-color: #f5f5f5;}

/* rooms intro */
.four.columns.vertical{
    margin: 50px auto 0 auto;
    text-align: center;}

.four.columns.vertical .room_intro,
.room_intro{
    float: none;
    width: 100%;
    margin: 0 auto 20px auto;   
    padding: 0px 5px 10px 5px;}


/* location */
.location_services{
    margin: 0 auto 50px auto;
    padding: 50px 20px 20px 20px;    
}


table{
    width: 100%;
    margin: 20px 0;
}

table a.button{
    float: none;
    width: 50px;
    font-size: 11px;
    margin: 10px auto;
    padding: 3px 0;
}

/* blog */

div.pagination div.centered{
    width: 320px;
}

.entry ul li,
.entry ol li{
    width: auto;
    height: auto;
    margin: 0 0 5px 0;
} 


}

/* =ipad =768 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px){
.flex-direction-nav {display: none;}
/* home */

.header_text {
  	position: fixed;
  	top: 0px;
  	left: 0px;
  	z-index:99;
    float: left;
    }
.logo {
    height: 80px !important;
    z-index:100 !important
    }
#navigation {
    position:fixed !important;
}
#header_distance {height: 140px;}


.nomobile {display:none!important;}
.onlymobile {display:block!important;}

.nav_select{
    display: relative  !important;
    width: 100%;
    margin: 0px 0 20px 0  !important;
    top: -20px  !important;
}

#footer-line-widgets-right, #footer-line-widgets-left {display: block;}
#footer-line-widgets-right h3 {
	display: block;
	text-align: center;
}
#footer-line-widgets-right .textwidget, #footer-line-widgets-left .textwidget{display: block;}
.wysija-submit {
	display: block !important;
	float: right;
	position: relative;
	top: -20px;
	}
.wysija-submit-field, .widget_wysija_cont, .wysija-msg .ajax, #msg-form-wysija-2, #form-wysija-2 {display: block !important;text-align: center;}
.wysija-input {display: block !important; width: 100% !important;}

.logo{
    margin: 20px auto -30px auto !important;top: -22px; position: relative;}

.review {display:none;}

.feature-title {text-transform: none; font-size: 15px; padding-bottom: 15px; }
 
    

.footer {padding: 10px !important;}

    
    .room-entry {column-count: 1 !important;}

}
/* =iphone =580
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 580px){
    
b, strong {letter-spacing: 0 !important;}
    
:root {
    --h1: 26px;
    --h2: 20px;
    --h3: 17px;
    --h4: 15px;
    --normal: 14px;
}

/* general */
.grid {margin: 0 10px;}
.grid-5-1, .grid-4-1, .grid-3-1,.grid-2-1, .grid-1-1 {grid-template-columns: repeat(1, 1fr);}
.grid-5-2, .grid-4-2, .grid-3-2,.grid-2-2 {grid-template-columns: repeat(2, 1fr);}
.grid-5-3, .grid-4-3, .grid-3-3 {grid-template-columns: repeat(3, 1fr);}
.grid-5-4, .grid-4-4 {grid-template-columns: repeat(4, 1fr);}
.grid-5-5 {grid-template-columns: repeat(5, 1fr);}    
    
.flex-direction-nav {display: none;}
.headerphoto {height: 400px; display:inline-block;overflow:hidden;}

b, strong {letter-spacing: normal !important;}
    
a.button, a.button2, a.buttongreen {padding: 5px 10px;}
    
#header-full, #header-full img, #header-half, #header-half img {height: 400px;}
    .centered {width: 80%;}

/* home */
#home-slideshow, #home-slideshow img {height: 450px; }
#home-slideshow #overlay {
    padding-bottom: 150px;
    transform: translate(-50%, 0);}

#booking-overlay   {padding: 10px; top: 0px;}
#booking-overlay .booking {padding: 10px;}
.wis2-el.wis2-input-group {padding: 5px!important;}
.wis2-panel.wis2-panel--horizontal {padding: 0 !important;}
.wis2-el.wis2-button-hld {padding: 5px !important;}
    
#welcome #message {padding: 20px; }    
img.direktion {height: 60px; width: 60px;}    

#features .feature h4 {font-size: 12px;} 
#features .feature p {font-size: 10px; line-height: 1;} 
#features .fa-2x {font-size: 24px;}
    
#infobox-corona {margin: 10px; border-radius: 5px; font-size: 12px;}
#dreig {width: 70px; height: 70px; border-radius: 10px;}
#dreig img {width: 60px; height: 60px;}
#corona-band {font-size: 13px; padding: 10px}
    
    .room_vertical {height: auto !important; margin-bottom: 25px !important;}
    
/* others */
#booking-wide {padding: 10px 20px; margin: 10px; width: auto; position: relative; top: -20px;}
#booking-room {margin: 10px;}

details {margin: 10px 0;}
details summary {padding: 10px 40px 10px 20px;} 
details summary:after {right: 20px;}
details p {margin: 0px 20px;}
    
ul.circle {font-size: var(--normal);}
    
.excerpt {display:none;}

#header-image {height: 300px;}

#blackline {display: none;}

.welcome img {
		display: block;
		width: 100%;
		margin-bottom: 20px;}
    
/* test: mobile-bottom-menu */
#test_mobile-bottom-menu {z-index: 10000000; position: fixed; bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: rgba(0,0,0,.3) 2px 2px 10px;
    background: rgba(0,0,0,0.95);
    border-radius: 100px;
    color: white;
    padding: 13px 26px;
}

#myBottomnav {
    z-index: 1000; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    background:white;  
    box-shadow: 0px 0px 20px rgba(0,0,0,.3); 
    transition: transform 0.3s ease-in-out;
    transform: translateY(300%) translatex(-50%);
    padding: 30px;
    overflow: auto;
    width: 100%;
}
    
#myBottomnav.open {transform: translatex(-50%) translatey(-50%);}
    
.bottomnav {
    height: 100%;
    padding: 0px;
    color: var(--color-text-main);
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    text-align: center;
}

ul#mobile-menu li {display: block !important; width: 100%; font-weight: 500; padding: 10px 0; font-size: 20px; border-bottom: 1px solid rgba(0,0,0,.05); text-align: center;}
ul#mobile-menu li.menu-item-has-children ul {display: none;}
ul#mobile-menu li.menu-item-has-children::before {content:'▾'; float: right; color: var(--color-green-main);} 
ul#mobile-menu li.menu-item-has-children:hover ul {display: block;} 
ul#mobile-menu li.menu-item-has-children ul li {font-weight: normal; font-size: 14px; border-bottom: none;}
    
    
/* room: testimonials */
#testimonials {height: 260px;}
.testimonial-title {font-size: 16px;}
.testimonial-rating {font-size: 18px; margin-top:15px; }

.slides img {object-fit: cover;}

#slider .slides li {padding: 0 !important;}


#slider {
	margin: 0px !important;
	color: #FFF;
	position: relative;
	top: 0px;}

ul#menu-footer-menu li, ul#menu-fussmenue li{
    margin: 0 0px 0px 10px;
    line-height: 1.0;
	display: inline !important;
	transition: all ease 0.18s;
	font-size: 11px !important;
}

.contact li {
    list-style: outside none none;
    padding:0px 10px 10px 0px; 
    display: table-cell;
    vertical-align: middle;    }


#footer-line-widgets-right {text-align: left;}

#meta_roominfo {height: auto;}

#prefooter, #prefooter h3, #prefooter h2 {text-align:center !important;}
#prefooter .contact {text-align: left !important;}

/* room */

#mainwrapper .grid.grid-4-4{overflow: scroll;}
#mainwrapper .grid.grid-4-4 #offer_single {min-width: 300px;}
    
.seven.columns.room-slider {padding: 0 !important;}
.carousel_container > #slider ul.slides img {height: 300px; object-fit: cover; overflow: hidden;}

    
iframe{max-width: 480px;}

.top p, 
ul#misc,
.nav ul{
    display: none;}

.top p.slide{
    display: block;}

#header-widget { font-size: 16px;}

.logo{
    margin: 20px auto -30px auto !important;
    top: -22px; position: relative;
    z-index:1;}

.amenities{
    padding: 10px 0 0 0;
    border-right: none;
}

.special_offer{
    padding: 0 0 10px 0;
}

.amenities ul li{
    width: 125px;
    height: 15px;
    margin: 0 10px 10px 0;
}

/* room intro */
.four.columns.vertical .room_intro,
.room_intro{
    float: none;
    width: 100%;
    margin: 0px;   
    padding: 0px 0px 10px 0px;}
.room_intro p {font-size: 13px;}
.room_intro h3 {font-size: 20px; margin-bottom:15px;}
.metaicon_room i {font-size: 16px; color: #7cb518}
.metaicon_room {text-align: center; background: none !important; width: auto; float: none;
    display:inline-block; padding: 2px 10px !important; font-size: 11px !important;}
#meta_room {margin-bottom: 10px;}
.metaicon_room_single { padding: 0 10px !important; font-size: 12px;}

/* room */

ul#featured_list{
    overflow: none;
    max-width: 100%;
}

ul#featured_list li{
    padding-left: 10px;
    text-indent: -27px;
}


div.pagination div.centered{
    width: 380px;}

/* location */
.location_services{
    padding: 50px 20px 20px 20px;    }

dl dd{
    width: 250px;}

/* contact */
.contact_form input{
    width: 80%;
    clear: both;}

.contact_form textarea{
    clear: both;}

/* footer */
.footer h4{
    margin: 20px 0 10px 0;}

.slide_description{top: 50%; }
.slide_description h2{font-size: 28px; line-height: 0.8;}
.slide_description p{font-size: 12px; line-height: 1.1;}

#footer_mobile {
	display: block !important;
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    z-index:999;
    border-top: 1px solid rgba(100,100,100,0.5);}
#footer_mobile a.footer_phone {
	width: 100%;
    background: #fab700;
    display:block;
    padding: 10px 30px;
    font-size: 20px;
    text-align: center;}
#footer_mobile a.footer_phone:hover{
	color: #000;
	background: #fac700;}
	
.booking_support {font-size: 11px; float: right;color: black;background: #f3ce56; width: 100%; padding: 0px 10px;}

.bs1 { display:block; width: auto;text-align: right;}
.bs2 { display:block; width: auto; text-align: right;} 
 
.features .feature h3 {font-size: 14px !important; }
.features .icon-preview {margin: 0 auto; width: 126px;display: inline-block;padding: 5px 0px;}
.feature {padding-top: 0px;}
.features h1 { text-transform: uppercase; font-size: 22px; font-weight: bold;}
.features .feature { width: 130px;display:inline-block}
.features {text-align: center; width: 100%;}
.feature.last {margin-right: 6px !important;}
.features .feature-content { font-size: 11px; display: none !important;}

.slide_description{top: 50%; }
.slide_description h2{font-size: 24px; line-height: 0.9;}
.slide_description p{font-size: 14px !important; line-height: 1.0;}

.widget_ci-hero.widget-padded .widget-wrap {padding: 30px 0;}

/* maps */
iframe{max-width: 320px;}

.top p,  ul#misc, .nav ul{ display: none;}
.top p.slide{display: block;}

/* home */
.amenities ul li{
    width: 110px;
    height: 50px;
    margin: 0 5px 50px 0;}

/* room intro */
.four.columns.vertical .room_intro,
.room_intro{
    float: left;
    width: 100%;
    margin: 0;   
    padding: 0px 3px 0px 3px;}
.room_intro h3 {font-size: 17px; margin-bottom:10px;}
.room_intro img {margin-bottom:20px}
.room_intro p {margin-bottom:0px}
.box {padding: 0; margin: 0;}
#abstand {height: 0px;}
.logo{
    margin: 20px auto -30px auto !important;
    top: -22px; position: relative;
    z-index:1;}

/*pagination links */
div.pagination a{
    width: 16px;
    margin: 0px 5px 0 0;
    padding: 4px 0;
}

div.pagination span{
    width: 16px;
    height: 16px;
}

/* location */
.service{width: 100%;}

dl dd{width: 100%;}
dl dt{display: none;}

/* contact */
.contact_form input{
    clear: both;
    width: 220px;
}

.contact_form textarea{clear: both;width: 260px}

}