/* Smartphones (portrait and landscape) ----------- */ .roomreservationbtn_container { margin: 0px auto 45px; min-width: unset; width: unset; } .roomArea { padding: 2em 0 4em 0; } .schafSliderInfo, .vogelhausSliderInfo, .baumhausSliderInfo, .roomInfo { text-align: left; } @media only screen and (min-width : 320px) and (max-width : 768px) { body#hausbesuch, body#restaurant, body#meierei, body#pogusch, .startpage header, .button1, .button2, .button3, .button4, .button5, .button6 { background: none transparent !important; } } @media only screen and (min-width : 320px) /*and (max-width : 640px)*/ { /* NEWS */ #news-popup { width: 94%; bottom: 0%; margin-left: 0; left: 0; } #mobileContainer { margin: 0 10px 10px 10px; /*background: url(/media/schummler-mobile.png) center top repeat-y;*/ } #mobileContainer header { margin-bottom: 0 !important; } #mobileContainer header #logo { width: 100%; max-width: 768px; margin: 0 auto !important; height: 135px !important; } #mobileContainer header #logo a { display: block; height: 135px !important; background: url(/media/mobile/logo.png) center center no-repeat; } #mobileContainer div#pageImage { margin-bottom: 45px; width: 100%; max-width: 768px; margin-left: auto; margin-right: auto; text-align: center; } #mobileContainer div#pageImage img { max-width: 375px; } #mobileContainer nav#menu { /*width: 345px;*/ background-color: #ffffff; width: 100%; max-width: 768px; margin: 0 auto; padding-bottom: 10px; padding-top: 0; position: fixed; left: 0; z-index: 1000; } #mobileContainer nav#menu li { width: 33.33333%; padding: 18px 0 0 0; font-size: 0.625em; } #mobileContainer nav#menu li a { font-size: 1em; text-transform: uppercase; line-height: 140%; letter-spacing: 1.75px; } #mobileContainer nav#menu li a.active { border-bottom: 1px solid ; font-weight: 500; } #mobileContainer nav#menu ul li:last-child a:last-of-type { padding-left: 0.5em; padding-right: 0.5em; } #mobileContainer nav#menu ul li:first-child { margin-left: 0px; } #mobileContainer section { width: 100%; max-width: 768px; margin: 0 auto; } #mobileContainer article { } .startpage #mobileContainer article:last-of-type { padding-left: 35px; padding-top: 100px; } #mobileContainer footer { width: 100%; max-width: 768px; margin: 0 auto; border: 0 none !important; } #mobileContainer footer p { text-align: center !important; letter-spacing: 0.4px; } #mobileContainer footer p a:nth-child(2) img { padding-left: 1em; padding-right: 1em; } .startpage #mobileContainer header #logo { padding-top: 70px; } #mobileContainer div.button1More p.moreP { text-align: center !important; } #mobileContainer div.button1More button.readMore { margin: 30px 0 30px 0; } /* GLOBAL */ #mobileContainer p, #mobileContainer .gutscheine { text-align: left !important; font-size: 1em !important; font-family: "Lab Grotesque"; letter-spacing: 0.17px; line-height: 150%; } #mobileContainer article p { padding-bottom: 1em; } #mobileContainer h1 { margin-bottom: 115px; font-size: 2em; letter-spacing: -0.37px; line-height: 120%; } .startpage #mobileContainer .mainVisible h1 { margin-left: 0; } #mobileContainer h2 { padding-right: 2em; font-size: 1.375em; font-family: "ScotchModern-Regular"; letter-spacing: 0px; line-height: 140%; } #mobileContainer div#bottomLinks p { } #mobileContainer p.dt { width: 70%; float: left !important; padding-top: 50px; margin: 75px 0 50px 0 !important;} #mobileContainer p.topLink { width: 30%; float: right !important; text-align: right !important; margin: 75px 0 50px 0 !important; letter-spacing: 0.4px; } p.topLink a { display: inline-block; padding: 50px 0 0 0; background: url(/media/arrow-up.png) no-repeat center center; } button:focus { border: 0 none; outline: 0 none; } #mobileContainer .button1, #mobileContainer .button2, #mobileContainer .button3 { background: none; } /* HOME */ .home #div#logo { width: 100%; max-width: 768px; margin: 0 auto !important; } .home #mobileContainer section { width: auto; margin: 0 auto; } .home div#bottomLinks { width: 100%; max-width: 768px; margin: 0 auto !important; } .home nav#vertMenu { width: 100%; max-width: 768px; margin-left: auto; margin-right: auto; } nav#vertMenu li { list-style: none; width: 100% !important; max-width: 768px; margin-bottom: 10px; } nav#vertMenu a { display: block; width: 100%; max-width: 768px; padding-top: 266px; height: 38px; font-weight: 500; font-size: 0.875em; letter-spacing: 3.07px; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; } #mobileContainer a#hausbesuch { background: url(/images/mobileHome/hausbesuch.png) no-repeat center center; background-size: 375px 300px; } #mobileContainer a#restaurant { background: url(/images/mobileHome/steirereck.jpg) no-repeat center center; } #mobileContainer a#meierei { background: url(/images/mobileHome/meierei.jpg) no-repeat center center; } #mobileContainer a#pogusch { background: url(/images/mobileHome/pogusch.jpg) no-repeat center center; } /* SUBSEITEN */ #mobileContainer p.byebye { padding-left: 70px; padding-top: 60px; } #mobileContainer p.social a img { margin-right: 1em; } #mobileContainer article.varContent { padding-top: 70px; } #mobileContainer div.buttons { padding-left: 105px; } #mobileContainer div.buttons button { font-size: 1em; font-family: "Lab Grotesque"; letter-spacing: 0.17px; line-height: 150%; text-decoration: underline; } #mobileContainer div.speisekarte { margin-bottom: 82px; margin-left: 51px; } #mobileContainer div.gutscheine { margin-top: 38px; margin-bottom: 97px; } #mobileContainer div.anfahrt { margin-top: 38px; } #mobileContainer div.reservierung { margin-top: 38px; margin-bottom: 65px; } #mobileContainer div.reservierung div { margin-bottom: 55px !important; } #mobileContainer #reservierung-btn { text-align: center; } #mobileContainer #reservierung-btn div { text-align: center; margin: 0 auto; } #mobileContainer #reservierung-btn div iframe { height: 40px !important; } #mobileContainer div.reservierung p, #mobileContainer div.gutscheine p { margin-left: 35px; margin-right: 35px; } #mobileContainer div.gutscheine h2 { margin-bottom: 43px; padding-right: 3em; } #mobileContainer ul.gutscheine { margin-left: 51px; margin-right: 30px; font-size: 1em; letter-spacing: 0.17px; line-height: 150%; } #mobileContainer ul.gutscheine li { padding-bottom: 10px; list-style: disc outside; } #mobileContainer ul.disc { list-style: disc outside; margin-left: 16px; font-size: 1em; letter-spacing: 0.17px; line-height: 150%; } #mobileContainer .gutscheine form { width: auto !important; } .gutscheine #mobileContainer section article:first-of-type form p { margin-left: 0; margin-right: 0; } #mobileContainer p.map iframe { display: block; margin: 0 auto 50px auto; } #mobileContainer div.map { margin-left: 70px; } #mobileContainer div.anfahrt p.noGap { padding-bottom: 0 !important; } #mobileContainer .dsgvo { margin-left: 0; width: 90%; } #mobileContainer div.formular { margin: 95px 0px 95px 0; } #mobileContainer input[type="text"], #mobileContainer input[type="email"] { display: inline-block !important; width: 254px; margin-top: 0 !important; margin-bottom: 0 !important; } #mobileContainer input[type="text"].small {width: 27px; margin-right: 15px !important; } #mobileContainer input[type="radio"], #mobileContainer label { display: inline-block; } #mobileContainer input[type="text"].read { width: 115px; margin: 0 0 0 15px !important; } .gutscheine #mobileContainer section article:first-of-type p { margin-left: 35px; margin-right: 20px; } #mobileContainer ul.gutscheine + div { margin-left: 0px !important } #mobileContainer input.zip { width: 55px; } #mobileContainer input.city { width: 165px; } .mobileImg img { width: 100%; } .mobileSwiper-button-next { background: url(/media/mobileArrowRight.png) center center no-repeat !important; } .mobileSwiper-button-prev { background: url(/media/mobileArrowLeft.png) center center no-repeat !important; } } /* Smartphones (landscape) ----------- @media only screen and (min-device-width : 320px) and (max-device-width : 640px) and (orientation:landscape) { } */ /* Smartphones (portrait) ----------- @media only screen and (min-device-width : 320px) and (max-device-width : 640px) and (orientation:portrait) { }*/