@font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'AbrilFatface'; src: url('../fonts/AbrilFatface.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 48%; transform: rotate(45deg); } 50% { top: 48%; transform: none; } 100% { top: 38%; transform: none; } } @keyframes rotate_a2 { 0% { top: 48%; transform: rotate(-45deg); } 50% { top: 48%; transform: none; } 100% { top: 58%; transform: none; } } @keyframes rotate_b1 { 0% { top: 38%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 58%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(-45deg); } } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 140px 0px 0px 0px; background: #ffffff; margin: 0px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } h4.texterror { color: #ff0000 } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px } img { border: none } b { font-weight: 700 } i { display: block; font-size: 12px; line-height: 18px } a { color: #271633; text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 50%; padding: 10px; text-align: left; vertical-align: top } input[type=radio], input[type=radio], input[type=checkbox] { display: none } input[type=radio] + label, input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 20px 50px; text-align: left } input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #dfdfdf; border-radius: 50% } input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #dfdfdf } input[type=radio].error + label b, input[type=checkbox].error + label b { border-color: #ff0000 } input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #b1b1b1 } input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #b1b1b1 } select, textarea, input[type=date], input[type=time], input[type=number], input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px #dfdfdf; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: textfield } input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button { filter: opacity(0) } select.error, textarea.error, input[type=date].error, input[type=time].error, input[type=number].error, input[type=text].error { border-color: #ff0000 } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #ffffff; pointer-events: none; transition: 0.4s ease-in-out } select:focus, textarea:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=date]:not(:placeholder-shown), input[type=time]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: #b1b1b1; outline: none } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 5px 8px 5px 8px; color: #b1b1b1; font-size: 12px; line-height: 12px } select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain; -webkit-appearance: none } textarea { height: 200px; overflow: auto; resize: none } button { float: left; width: 100%; height: 80px; padding: 21px; background: #271633; border: none; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; cursor: pointer; transition: 0.4s ease-in-out } button:hover { background: #b06839 } div.preloader { position: fixed; z-index: 5000; left: 0%; top: 0%; width: 100%; height: 100%; background: #271633 } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; background: url(../images/layout/preloader.svg) no-repeat center; background-size: 80%; content: ''; transform: translate(-50%,-50%) } div.switch { position: absolute; z-index: 4000; right: 20px; top: 60px; width: 60px; height: 60px } div.switch div { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; filter: grayscale(1) brightness(3); transition: 0.4s ease-in-out; cursor: pointer } div.switch div:hover { background: #b0683940 } div.switch div:before { display: block; position: absolute; left: 30%; width: 40%; height: 4%; background: #b06839; content: ''; animation: rotate_a1 0.4s forwards } div.switch div:after { display: block; position: absolute; left: 30%; width: 25%; height: 4%; background: #b06839; content: ''; animation: rotate_a2 0.4s forwards } div.switch div.active:before { animation: rotate_b1 0.4s forwards } div.switch div.active:after { width: 40%; animation: rotate_b2 0.4s forwards } div.switch div span { display: block; position: absolute; right: 80px; top: 50%; color: #b06839; font-size: 18px; line-height: 18px; transform: translateY(-50%) } div.switch.fixed { position: fixed; top: 20px } div.switch.dark div, div.switch.fixed div { filter: grayscale(0) brightness(1) } nav { position: fixed; z-index: 3000; left: 0%; top: -100%; width: 100%; height: 100%; overflow: hidden; background: #271633f2; transition: 0.4s ease-in-out } nav.active { top: 0% } nav ul { position: absolute; left: calc(50% - 640px); top: 50%; width: 1280px; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(-50%) } nav ul li { display: block; position: relative; float: left; width: calc(16.6666% - 20px); margin: 10px; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } nav ul li:nth-child(1), nav ul li:nth-child(2), nav ul li:nth-child(3), nav ul li:nth-child(4) { width: calc(25% - 20px); transform: translateX(50%) } nav ul li.active { transform: none; filter: none } nav ul li a { display: block; position: relative; float: left; width: 100%; transition: 0.4s ease-in-out } nav ul li a:hover { transform: scale(1.05) } nav ul li a picture { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 75% 0% } nav ul li a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) } nav ul li a div { position: absolute; left: 0%; top: 50%; width: 100%; padding: 15px; transform: translateY(-50%) } nav ul li:nth-child(1) a div, nav ul li:nth-child(2) a div, nav ul li:nth-child(3) a div, nav ul li:nth-child(4) a div { padding: 25px } nav ul li a div h3 { float: left; width: calc(100% - 10px); margin: 5px; color: #ffffff; font-size: 14px; line-height: 24px; font-weight: 700; text-align: center } nav ul li:nth-child(1) a div h3, nav ul li:nth-child(2) a div h3, nav ul li:nth-child(3) a div h3, nav ul li:nth-child(4) a div h3 { font-size: 18px; line-height: 30px } nav ul li a div h4 { float: left; width: calc(100% - 10px); margin: 5px; color: #dfdfdf; font-size: 12px; line-height: 18px; text-align: center } nav ul li:nth-child(1) a div h4, nav ul li:nth-child(2) a div h4, nav ul li:nth-child(3) a div h4, nav ul li:nth-child(4) a div h4 { font-size: 14px; line-height: 24px } nav ul li a div h4:after { color: #b06839; font-weight: 700; content: ' | hier informieren' } header { position: absolute; z-index: 2000; left: 0px; top: 40px; width: 100%; padding: 10px } header:before { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; content: ''; transition: 0.4s ease-in-out } header a.home { display: block; position: absolute; left: 50%; top: 20px; width: 420px; height: 90px; background: url(../images/layout/logo_alchimistenklause.svg) no-repeat center; background-size: contain; transform: translateX(-50%); filter: grayscale(1) brightness(3); transition: 0.4s ease-in-out } header a.phone { display: block; position: relative; float: left; width: 60px; height: 60px; background: url(../images/layout/phone.svg) no-repeat center; background-size: 50%; margin: 10px; filter: grayscale(1) brightness(3); transition: 0.4s ease-in-out } header a.phone:hover { background-color: #b0683940 } header a.phone span { display: block; position: absolute; left: 80px; top: 50%; color: #b06839; font-size: 18px; line-height: 18px; white-space: nowrap; transform: translateY(-50%) } header.fixed { position: fixed; top: 0px } header.dark:before, header.fixed:before { background: #271633 } header.dark a.home, header.fixed a.home { width: 280px; height: 60px; filter: grayscale(0) brightness(1) } header.dark a.phone, header.fixed a.phone { filter: grayscale(0) brightness(1) } a.show_cookiemanager { z-index: 2000; width: 60px; height: 60px; padding: 6px; background: none; border-radius: 0%; filter: grayscale(1) brightness(3); transition: 0.4s ease-in-out } a.show_cookiemanager.fixed { filter: grayscale(0) brightness(1) } a.show_cookiemanager:hover { background: #b0683940 } a.show_cookiemanager svg path { fill: none; stroke: #b06839; stroke-width: 1 } div.scrolldown { position: fixed; z-index: 2000; right: 20px; bottom: 20px } div.scrolldown a { display: block; float: left; width: 60px; height: 60px; background: url(../images/layout/scrolldown.svg) no-repeat center; background-size: 50%; transition: 0.4s ease-in-out } div.scrolldown a:hover { background-color: #ffffff40 } div.scrolltop { display: none; position: fixed; z-index: 2000; right: 20px; bottom: 20px } div.scrolltop a { display: block; float: left; width: 60px; height: 60px; background: url(../images/layout/up.svg) no-repeat center; background-size: 50%; transition: 0.4s ease-in-out } div.scrolltop a:hover { background-color: #b0683940 } section.stripe { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 2000; left: 0%; top: 0%; width: 100%; padding: 5px calc(50% - 635px) 5px calc(50% - 635px); background: #b06839 } section.stripe h4 { float: left; padding: 3px 3px 3px 30px; background: url(../images/layout/hours_stripe.svg) no-repeat left center; background-size: contain; margin: 5px; color: #271633; font-size: 14px; line-height: 14px; text-transform: uppercase; white-space: nowrap } section.stripe span { float: left; margin: 5px } section.stripe span ul { float: left; padding: 0px; margin: 0px; list-style-type: none } section.stripe span ul li { display: block; float: left; padding: 3px; color: #271633; line-height: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; text-align: right } section.booking { position: fixed; z-index: 1000; left: 0%; bottom: 0%; width: 100%; transition: 0.4s ease-in-out } section.booking form[name="reservierung"] { float: right; width: 880px; padding: 20px 100px 20px 20px } section.booking form[name="reservierung"] div { position: relative; float: left; width: 28%; border-left: solid 2px #ffffff40; transition: 0.4s ease-in-out } section.booking form[name="reservierung"] div:nth-child(3), section.booking form[name="reservierung"] div:nth-child(4) { width: 22% } section.booking form[name="reservierung"] div:nth-child(5) { border: none } section.booking form[name="reservierung"] div:nth-child(2):before, section.booking form[name="reservierung"] div:nth-child(3):before, section.booking form[name="reservierung"] div:nth-child(4):before { display: block; position: absolute; z-index: 1; right: 15px; bottom: 6px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; content: ''; filter: grayscale(1) brightness(3); transition: 0.4s ease-in-out } section.booking form[name="reservierung"] div:nth-child(2):before { background-image: url(../images/layout/days.svg) } section.booking form[name="reservierung"] div:nth-child(3):before { background-image: url(../images/layout/hours.svg) } section.booking form[name="reservierung"] div:nth-child(4):before { background-image: url(../images/layout/guests.svg) } section.booking form[name="gutscheine"] { float: left; width: 400px; padding: 20px 20px 20px 100px } section.booking form[name="gutscheine"] div { float: left; width: 100% } section.booking form div label { display: block; float: left; width: 100%; height: 24px; padding: 0px 10px 0px 10px; color: #ffffff; transition: 0.4s ease-in-out } section.booking form div input[type=text], section.booking form div input[type=time], section.booking form div input[type=number] { height: 36px; padding: 0px 10px 0px 10px; background: none; border: none; color: #ffffff; font-size: 24px; line-height: 36px; letter-spacing: -0.05em } section.booking form div button { height: 60px; background: none; border: solid 2px #ffffff40; font-size: 14px; line-height: 14px; font-weight: 400; letter-spacing: 0em; text-indent: 0em } section.booking form div button:hover { background: #ffffff40; border-color: transparent } section.booking.fixed { background: #efefef } section.booking.fixed form[name="reservierung"] div { border-color: #b0683940 } section.booking.fixed form[name="reservierung"] div:nth-child(2):before, section.booking.fixed form[name="reservierung"] div:nth-child(3):before, section.booking.fixed form[name="reservierung"] div:nth-child(4):before{ filter: grayscale(0) brightness(1) } section.booking.fixed form div label, section.booking.fixed form div input[type=text], section.booking.fixed form div input[type=time], section.booking.fixed form div input[type=number] { color: #b06839 } section.booking.fixed form div button { border-color: #b0683940; color: #b06839 } section.booking.fixed form div button:hover { background: #b0683940; border-color: transparent } section.content { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow-x: hidden; background: #ffffff } section.content .column { float: left; padding: 20px } section.content .column.full { width: 100% } section.content .column.ultrawide { width: 75% } section.content .column.wide { width: 66.6666% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3333% } section.content .column.ultraslim { width: 25% } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .entry.active { transform: none; filter: none } section.content .column .entry h1, section.content .column .entry h2 { color: #b06839; font-size: 48px; line-height: 72px; font-weight: 700; font-family: 'AbrilFatface', Helvetica, Arial, sans-serif } section.sitemap { float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); background: #271633 } section.sitemap ul { float: left; width: calc(25% - 40px); padding: 10px; margin: 20px; list-style-type: none; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.sitemap ul.active { transform: none; filter: none } section.sitemap ul:first-child { float: right } section.sitemap ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } section.sitemap ul li a { display: block; float: left; width: 100%; padding: 11px 0px 11px 0px; color: #b06839; font-size: 18px; line-height: 18px } section.sitemap ul.small li a { padding: 6px 0px 6px 0px; font-size: 14px } section.sitemap ul li a.home { padding: 45px 0px 5px 30px; background: url(../images/layout/logo_alchimistenklause.svg) no-repeat left top; background-size: 200px; font-size: 14px; line-height: 14px } section.sitemap ul li a.hours { padding: 5px 0px 5px 30px; background: url(../images/layout/hours.svg) no-repeat left top; background-size: 24px; font-size: 12px; line-height: 14px } section.sitemap ul li a.hours h4 { font-size: 14px; line-height: 14px } section.sitemap ul li a.phone { padding: 6px 0px 6px 30px; background: url(../images/layout/phone.svg) no-repeat left center; background-size: 24px; font-size: 24px; line-height: 24px } section.sitemap ul li a.email { padding: 6px 0px 6px 30px; background: url(../images/layout/email.svg) no-repeat left center; background-size: 24px; font-size: 12px; line-height: 12px } section.sitemap ul li a.location { padding: 6px 0px 6px 30px; background: url(../images/layout/location.svg) no-repeat left center; background-size: 24px; font-size: 12px; line-height: 12px } section.sitemap ul li a.instagram { padding: 6px 0px 6px 30px; background: url(../images/layout/instagram.svg) no-repeat left center; background-size: 24px; font-size: 12px; line-height: 12px } section.sitemap ul li a.facebook { padding: 6px 0px 6px 30px; background: url(../images/layout/facebook.svg) no-repeat left center; background-size: 24px; font-size: 12px; line-height: 12px } section.sitemap div { float: left; width: calc(75% - 40px); padding: 20px; margin: 20px; color: #b06839; line-height: 18px; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.sitemap div.active { transform: none; filter: none } footer { float: left; width: 100%; padding: 40px calc(50% - 600px) 140px calc(50% - 600px); background: #b06839 } footer div { float: left; width: calc(100% - 40px); padding: 20px; margin: 20px; color: #271633; line-height: 18px; text-align: center; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } footer div.active { transform: none; filter: none } @media only screen and (max-width: 1279px) { body { padding: 90px 0px 0px 0px; font-size: 9px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } i { font-size: 7px; line-height: 12px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 10px 30px } input[type=radio] + label b, input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } select, textarea, input[type=date], input[type=time], input[type=number], input[type=text] { padding: 12px; border-width: 1px; font-size: 9px; line-height: 14px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=text] + label { left: 10px; top: 10px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { padding: 2px 8px 2px 8px; font-size: 7px; line-height: 7px } textarea { height: 240px } button { height: 60px; padding: 14px; font-size: 12px; line-height: 12px } div.preloader:before { width: 80px; height: 80px } div.switch { right: 10px; top: 50px; width: 30px; height: 30px } div.switch div span { display: none } div.switch.fixed { top: 10px } nav ul { left: calc(50% - 160px); width: 320px; padding: 5px } nav ul li { width: calc(50% - 10px) !important; margin: 5px; transform: none !important } nav ul li a picture { padding: 0% 0% 50% 0% } nav ul li:nth-child(1) a picture, nav ul li:nth-child(2) a picture, nav ul li:nth-child(3) a picture, nav ul li:nth-child(4) a picture { padding: 0% 0% 66.6666% 0% } nav ul li a div { padding: 7.5px !important } nav ul li a div h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px !important; line-height: 12px !important } nav ul li a div h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px !important; line-height: 9px !important } header { padding: 5px; outline-width: 1px } header a.home { top: 10px; width: 210px; height: 45px } header.dark a.home, header.fixed a.home { width: 140px; height: 30px } header a.phone { width: 30px; height: 30px; margin: 5px } header a.phone span { display: none } a.show_cookiemanager { left: 10px; bottom: 10px; width: 30px; height: 30px; padding: 3px } a.show_cookiemanager svg path { stroke-width: 0.5 } div.scrolldown { right: 10px; bottom: 10px } div.scrolldown a { width: 30px; height: 30px } div.scrolltop { right: 10px; bottom: 10px } div.scrolltop a { width: 30px; height: 30px } section.stripe { padding: 5px calc(50% - 155px) 5px calc(50% - 155px) } section.stripe h4 { padding: 3px 1px 3px 18px; margin: 0px; font-size: 9px; line-height: 9px } section.stripe span { margin: 0px } section.stripe span ul li { padding: 3px 1px 3px 1px; line-height: 9px; text-align: center } section.booking form[name="reservierung"] { width: 100%; padding: 10px } section.booking form[name="reservierung"] div { width: 37%; border-width: 1px } section.booking form[name="reservierung"] div:nth-child(3) { width: 26% } section.booking form[name="reservierung"] div:nth-child(4) { display: none } section.booking form[name="reservierung"] div:nth-child(2):before, section.booking form[name="reservierung"] div:nth-child(3):before, section.booking form[name="reservierung"] div:nth-child(4):before { right: 8px; bottom: 2px; width: 14px; height: 14px } section.booking form[name="gutscheine"] { width: 100%; padding: 0px 50px 10px 50px } section.booking form div label { height: 12px; padding: 0px 5px 0px 5px; font-size: 7px; line-height: 12px } section.booking form div input[type=text], section.booking form div input[type=time], section.booking form div input[type=number] { height: 18px; padding: 0px 5px 0px 5px; font-size: 12px; line-height: 18px } section.booking form div button { height: 30px; padding: 9.5px; border-width: 1px; font-size: 9px; line-height: 9px } section.content { padding: 10px calc(50% - 160px) 10px calc(50% - 160px) } section.content .column { padding: 10px } section.content .column.full, section.content .column.ultrawide, section.content .column.wide, section.content .column.medium, section.content .column.slim { width: 100% } section.content .column.ultraslim { width: 50% } section.content .column .entry { width: calc(100% - 20px); margin: 10px } section.content .column .entry h1, section.content .column .entry h2 { font-size: 24px; line-height: 36px } section.sitemap { padding: 20px calc(50% - 150px) 20px calc(50% - 150px) } section.sitemap ul { width: 50%; padding: 5px; margin: 0px } section.sitemap ul:first-child { float: left } section.sitemap ul li { width: calc(100% - 10px); margin: 5px } section.sitemap ul li a, section.sitemap ul.small li a { padding: 2px 0px 2px 0px; font-size: 9px; line-height: 9px } section.sitemap ul li a.home { padding: 27.5px 0px 2.5px 20px; background-size: 130px; font-size: 9px; line-height: 9px } section.sitemap ul li a.hours { padding: 2.5px 0px 2.5px 20px; background-size: 14px; font-size: 7px; line-height: 9px } section.sitemap ul li a.hours h4 { font-size: 9px; line-height: 9px } section.sitemap ul li a.phone { padding: 3.5px 0px 3.5px 20px; background-size: 14px; font-size: 14px; line-height: 14px } section.sitemap ul li a.location, section.sitemap ul li a.email, section.sitemap ul li a.instagram, section.sitemap ul li a.facebook { padding: 3.5px 0px 3.5px 20px; background-size: 14px; font-size: 7px; line-height: 7px } section.sitemap ul li a h4 { font-size: 9px; line-height: 12px } section.sitemap div { width: 50%; padding: 10px; margin: 0px; line-height: 12px } footer { padding: 20px calc(50% - 150px) 110px calc(50% - 150px) } footer div { width: 100%; padding: 10px; margin: 0px; line-height: 12px } }