/* CSS Document ---------------------------------------------------

Created by:			.eyecatcher ag
For:				Parkhuus Restaurant
Date of creation:	02-03-2016 (tkn)
Last update:		tt-mm-jjjj

------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
body, html {font-size: 16px;}

/*GRUNDRASTER*/
main .content {width: auto; margin: 0 1em;}

section>.container{ width: 46em; padding: 4em 2em;}
div.fixed-background{ background-size: 150%;}
section img.bg-img{ height: 100%; }

.nav {width: 42em; margin: 0 auto;}
.nav a { margin: 0 .875em; padding: 1em 0em 0.25em; }

/* TYPO */
h2 {font-size: 2.25em !important;}
h4 {font-size: 1.125em;}

/*SPALTEN SYSTEM*/
.col4,
.col5,
.col2-5,
.col3-5,
.col4-5,
.col5-6,
.col6 {width: 50%;}
.col3-4 {width: 100%;}

/* TEASER BOX */
.teaser-box, .info-box{ width: 20.5em; min-height: 20.5em;}
.teaser-spacer{ width: 20.5em; }
.teaser-box .container,
.info-box .container,
.teaser-box.color .container,
.teaser-box.img .container { min-height: 20.5em; padding: 2em; position: relative !important;}
.teaser-box.shop .container { padding: 2.5em;}

/* EVENT BOX */
.event-box>.container {min-height: 0em;}
.event-box .event-details-block span {width: auto;}
.event-box .event-dates .date {padding: 0.75em 2em;}
.event-box .event-dates .date a {float: none;}


/* INSTAFEED */
section.instafeed #instagram-container .instagram-block .container .instagram-teaser { padding: 1.5em 1.5em; }
section.instafeed #instagram-container .instagram-block .container .instagram-teaser i { font-size: 2em;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser div { margin: .75em 0; font-size: 1em; font-weight: 400;}

/* FULL WIDTH TEASER */
section.full-width-teaser .container{ padding-top: 4em; padding-bottom: 4em;}

/* MAP SECTION */
section.map-section #map{ height: 35em; }

/* RESERVATION */
section.reservation .container #ot-reservation-widget form>div,
section.reservation .container #ot-reservation-widget form input[type=submit]{ width: 25%; margin: 0;}

/* MENU DOWNLOAD */
section.menu-download .container a.button{ width: 46%; margin: 0 2% 1em;}

/*FOOTER*/
section.footer .col2 .col2 {width:100%;}

/*SHOP*/
section.shop .col3 {width: 50%;}
section.shop .shop-step>span {padding: 0.75em .75em;}

section.shop .item {height: 30em;}

section.shop .order {width: 100%;}
section.shop .order table tr th,
section.shop .order table tr td {font-size: 1em;}

}


@media screen and (max-width: 767px) {
body, html{font-size: 14px;}
body{background-attachment: scroll;}

section>.container{ width: 100%; max-width: 24em; padding: 2em;}
div.fixed-background{ background-attachment: scroll; background-size: 850px}
div.fixed-background.home{  background-position: center 11em;}
div.fixed-background.offer{  background-position: center 22em;}

/* TYPO */
h2, h1 {font-size: 1.8em !important; margin-bottom: .5em;}
h3 {font-size: 0.8em; margin-bottom: 1em;}
h4 {font-size: 1em; margin-bottom: 1em; font-weight: 400;}
p {font-weight: 400;}
.teaser-box p, .info-box p {font-size: 1em; margin-bottom: 1em; font-weight: 400;}

li{margin: .25em 0 .25em 1em;}
.teaser-box li, .info-box li {font-size: 1em; font-weight: 400;}


/*SPALTEN SYSTEM*/
.col3,
.col2-3 {width: 50%;}

#sticky-wrapper{height: auto !important;}
.nav, .is-sticky .nav {width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; position: fixed; z-index: 998; top: 0 !important; opacity: 0; pointer-events: none; background: #fff; border-radius: 0;}
.nav.open {opacity: 1; pointer-events: auto;}
.nav .nav-container {padding: 5em 0 0;}
.nav a, .is-sticky .nav a{ width: 100%; margin: 0; padding: 1em 2em ; display: block; box-sizing: border-box; border-bottom: 0; color:#000;}
.nav a:hover, .is-sticky .nav a:hover{ color: #c55265; border-bottom: 0px;}
.nav a.active, .is-sticky .nav a.active{ color: #c55265; border-bottom: 0px;}

.hamburger {display: block;}

.lang{ top: 1em; }

/* HEADER */
section.header {height: auto; min-height: 20em;}
section.header.home {min-height: 32em;}
section.header .container {padding: 2em 2em 4em;}
section.header .container .logo{ margin: 3em 0 0.5em; height: 3em;}
section.header .container .video-hover{ width: 100%; position: relative; bottom: auto; left: auto; transform: translateX(0);-ms-transform: translateX(0);-webkit-transform: translateX(0); }
section.header .container #vid { height: 2em; margin: 1em; }
section.header .container a.button { margin: 0 0 2em; }
section.header .container h1,
section.header.home .container h1 {margin: .5em 0;}
section.header .thumbnails {width: 60%; bottom: 0.25em;}
section.header .thumbnails a{ width: 33%; padding: 0 0.25em; transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0); position: relative;}
section.header .thumbnails a img{ width: 100%;}

/* VIDEO PLAYER */
section .player .closePlayer{font-size: 1.25em;}

/* TEASER BOX */
section.single-section{height: auto;}
section.single-section .teaser-box {top: 0; transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0);}
section.single-section>.container { padding: 2em 2em 8em; }
section.teaser-section>.container { padding: 2em; }

.teaser-box{ width: 100%; min-height: 16em; }
.teaser-spacer{ display: none; }
.teaser-box .container { min-height: 16em; padding: 1.5em;}
.teaser-box.shop .container { padding: 1.5em;}

.teaser-box.color .container, .teaser-box.img .container { top: auto; bottom: auto; position: relative; padding: 1.5em;}
.teaser-box.shop a.button {position: relative; bottom: auto;}

/* INFO BOX */
.cover-header{transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); margin-bottom: 0em;}
section.info-section>.container{padding: 2em;}

.info-box {width: 90%; min-height: 12em; margin: 0;}
.info-row:after {content:" "; display: block; clear:both;}

.info-box .container { min-height: 12em; padding: 1.5em;}
.info-box a.button {margin: 0;}
.info-box h4:last-child {margin: 0;}

.info-box.img {min-height: 1em; margin: 0}
.info-box.event-box.img {height: 16em; margin: 0; position: relative;}
.info-box.event-box.img img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}

.info-box.img.right, .info-box.img.left {transform: translate(0);-ms-transform: translate(0);-webkit-transform: translate(0);}
.info-box.text.right, .info-box.text.left {transform: translateY(-4em);-ms-transform: translateY(-4em);-webkit-transform: translateY(-4em);}

/* EVENT BOX */
.event-box>.container {min-height: 0em; padding: 1.5em;}
.event-box .event-dates .date {padding: 0.75em 1.5em;}

/* INSTAFEED */
section.instafeed #instagram-container {max-width: 35em; margin: auto;}
section.instafeed #instagram-container .instagram-block { width: 50%; }
section.instafeed #instagram-container .instagram-block .container .instagram-teaser { padding: 2.5em 1.5em; }
section.instafeed #instagram-container .instagram-block .container .instagram-teaser i { font-size: 2em;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser div { margin: 1em 0;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser span.button { display: none;}
section.instafeed #instagram-container .instagram-block .container a p {padding: 1em 1em; }

/* FULL WIDTH TEASER */
section.full-width-teaser .container{ padding-top: 2em; padding-bottom: 2em;}
section.full-width-teaser .container p {font-size: 1em; margin: 0 0 1em;}

/* MAP SECTION */
section.map-section #map{ height: 20em; }
section.map-section>.container { position: relative; top: auto; width: 100%; max-width: 24em; padding: 2em;}
section.map-section .container .teaser-box{ position: relative; top: auto; right: auto; width: 100%; margin-right: 0; transform: translateY(-5em); -ms-transform: translateY(-5em); -webkit-transform: translateY(-5em); margin-bottom: -5em; height: auto; min-height: 16em;}
section.map-section .container .teaser-box .container{ height: auto; min-height: 16em;}

/* RESERVATION */
section.reservation .container {padding: 2em;}
section.reservation .container #ot-reservation-widget form>div,
section.reservation .container #ot-reservation-widget form>div>a,
section.reservation .container #ot-reservation-widget form input[type=submit]{ width: 100%; margin: 0;}

/* MENU DOWNLOAD */
section.menu-download{}
section.menu-download .container{ width: 100%; padding: 6em 0 2em 0;}
section.menu-download .container a.button{ width: 80%; margin: 0 auto 1em; float: none;}

/*SHOP*/
section.shop.cover-header{transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); margin-bottom: 0em;}
section.shop .col3 {width: 50%;}
section.shop .row {margin-left: -4px; margin-right: -4px;}
section.shop .col3, section.shop .shop-step {padding-left: 4px; padding-right: 4px;}
section.shop .shop-step {width: 15%; margin-bottom: .5em;}
section.shop .shop-step.active {width: 70%;}
section.shop .shop-step>span {padding: 0.75em .5em;}
section.shop .shop-step span span {display: none;}
section.shop .shop-step.active span span {display: inline-block;}

section.shop .item {height: 16em;}
section.shop .item .container {padding: 1em;}
section.shop .item h2 {font-size: 1.125em !important; margin: 1em 0 .375em;}
section.shop .item p {display: none;}
section.shop .item span.price {font-size: .75em;}
section.shop .item span.tag {font-size: 0.75em;}

section.shop .item .select-wrap select{ padding: 0 1.5em 0 60%}
section.shop .item .select-wrap .handle{ right: 1em; padding: .5em 0 0 1em;}
section.shop .item .select-wrap .selectLabel{ left: 1em; padding: .625em 1em 0 0;}
section.shop .item .select-wrap .selectLabel i{ display: inline-block; margin-right: 0em;}
section.shop .item .select-wrap .selectLabel span{ display: none;}

section.shop .order table tr th:nth-child(2),
section.shop .order table tr td:nth-child(2) {display: none;}
section.shop .order table tr td .chf {display: none;}

section.shop .order .backButton {margin: 2em 0 1em;}
section.shop .order input[type="submit"] {width: 100%;}

/*FORMULAR*/
.field-wrap > label {width: 100%; padding: 0.2em 0;}
.input-wrap {width:100%;}


}



@media screen and (max-width: 560px) {

/*SPALTEN SYSTEM*/

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col2-3,
.col2-5,
.col3-4,
.col3-5,
.col4-5,
.col5-6 {width: 100%;}


section.header .thumbnails {width: 100%;}
section.header.home {min-height: 32em;}
section.footer .container {max-width: 24em;}


section.instafeed #instagram-container .instagram-block {overflow: visible; padding: 50% 0 0 0;}

}