/* Slider */ .slick-slider * {outline: none;} .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } #hero .slick-list {height:100% !important; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } #hero .slick-slider .slick-track, #hero .slick-slider .slick-list { height:100% !important; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slide { outline: none } /* RESET */ /* ----------------------------------------- */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, object, button { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li {list-style:none;} caption, th { text-align:left } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } html{ box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } q:before, q:after { content:''} /*sup {vertical-align: super;} sub {vertical-align: sub;}*/ sup, sub { vertical-align:baseline; position: relative; top:-1em; font-size:0.5em;/**/ } sub { top: 1em; } .clear { clear:both; } .clearfix:after, .module:after { content: " "; display: table; clear: both; } #skiptocontent, .screen-reader-text {display:none;} /* Global reset-RESET */ /* The below restores some sensible defaults */ strong { font-weight:500; } em { font-style:italic !important; font-weight:inherit !important; } a img { border:none } /* Gets rid of IE's blue borders */ a { text-decoration:none; } a:active, a:focus, button {outline: none; border:none; -moz-outline-style: none;} @font-face { font-family: 'icons'; src: /*url('fonts/icomoon.woff2') format('woff2'),*/ url('fonts/icomoon.woff') format('woff'); font-weight: normal; font-style: normal; } ::selection { background:#7B6C48; color:#FFF; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #7B6C48; color:#FFF; /* Gecko Browsers */ } /*@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; src: url(fonts/OswaldLight.woff2) format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; src: url(fonts/OswaldMedium.woff2) format('woff2'); }*/ /* TYPE */ html { font-size:62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } @media all and (max-width: 767px) { /*html { font-size:87.5%; } */ } body {font-family: 'Oswald',sans-serif; font-family: trade-gothic-next-condensed, sans-serif; font-family: neuzeit-grotesk, sans-serif; font-family: objektiv-mk3, sans-serif; font-weight:400; font-weight:300; line-height:1.5; line-height:1.3; line-height:1.4; color:#000; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background:#FFF; overflow-x:hidden; } #content ul, #footer ul { margin-bottom:1.8rem; } #content li { margin:0 0 0.5em 0; list-style:none; } #skiptocontent { } .textcontent.quote blockquote p, h1, h2 {font-size: 3.2rem; margin: 0 0 0.5em 0; line-height:1.2; font-weight:400; font-weight:300; } h3 {font-size: 1.8rem; margin: 0 0 1em 0; line-height:1.2; font-weight:400; font-weight:300; } #maintitle h1 { margin: 0;} @media all and (min-width: 1200px) { #maintitle h1 {font-size: 3.6rem; font-size: 3.2rem; } } h1.heading, h2.heading { font-weight:700; font-weight:500; font-size: 3.2rem; color: #79726e; color: #7B6C48; margin: 1em auto 0.5em; text-align: center;} .textcontent h1.heading, .textcontent h2.heading { margin: 1em 0 0.5em; text-align: left;} p, li {font-size:2rem; font-size:1.8rem; /*max-width:36em;*/ } .textcontent p:not(.cta) a, .textcontent li a { color:#7B6C48; /*text-decoration: underline;*/ } .textcontent p:not(.cta) a:hover, .textcontent li a:hover { color:#000; text-decoration: underline;} .textcontent li strong, .textcontent p strong { font-weight: 500; font-weight:700; font-weight:500; } #content .textcontent ol li, #content .textcontent ul li { margin-left: 1.2em; list-style: disc; } #page_content blockquote {font-family:Georgia, serif; } .textcontent ol li { list-style: decimal; } .textcontent h1, .textcontent h2 { font-size: 2.8rem; /*color: #7A7D74;*/ } .textcontent.large_first_paragraph p:not(#translate):first-of-type, .large_first_paragraph p#translate+p {font-size: 2.2rem; /*color: #7A7D74;*/ } .textcontent p {font-size: 2.2rem; } .textcontent p strong { font-weight: bold; } .textcontent .textlogo { padding: 0; text-align: center; margin-bottom: 0.5em; } .textcontent .textlogo img { display: inline-block; height: 60px; width: auto;} @media all and (max-width: 599px) { .textcontent.large_first_paragraph p:not(#translate):first-of-type, .large_first_paragraph p#translate+p {font-size: 1.8rem; /*color: #7A7D74;*/ } .textcontent p {font-size:1.8rem; } span.break_mobile { display: block;} } @media all and (min-width: 1200px) { .textcontent h1, .textcontent h2 { font-size: 2.8rem; color: #7A7D74; } /*.textcontent*/.large_first_paragraph p:not(#translate):first-of-type, .large_first_paragraph p#translate+p {font-size: 2.2rem; color: #7A7D74; } } @media all and (min-width: 1800px) { .textcontent h1, .textcontent h2 { font-size: 3.4rem; } /*.textcontent*/.large_first_paragraph p:not(#translate):first-of-type, .large_first_paragraph p#translate+p {font-size: 2.5rem; } } .textcontent img { display: block; max-width: 100%; height: auto;} body.page-template-template-sections .textcontent p { font-size:2.6rem; } figcaption { font-size:1.5rem; color:#666; } p { margin-bottom:1em; } #content a { transition: all 0.2s ease; } p:not(.cta) { padding-right:0.5em; } p.cta { line-height: 1.2 !important; } p.cta a, p.cta span { border: 1px solid white; background:rgba(0,0,0,0.45); padding:0.666em 1em 0.75em ; display:inline-block; color:white; } p.cta a:hover, p.cta span:hover { color: black; background: white; /*mix-blend-mode: screen;*/} p.cta_inactive span { cursor:not-allowed;} p.cta_inactive span:hover { color: white; background: rgba(255,255,255,0.2); /*mix-blend-mode: screen;*/} .textcontent p.cta { margin: 1.2em 0; text-align:center; font-size:1.8rem; } .textcontent p.cta a { padding:1em 1em 1.1em ;margin:0 auto; border-color: black; color:black; background:white; font-weight:500; min-width:12em; text-align:center; } .textcontent p.cta a:hover,.textcontent p.cta a:active { color: white; background: #7b6c48; border-color: #7b6c48; mix-blend-mode:normal ;} p.cta a.wide { width: 100%; text-align: center; padding:0.5em 1em; } body.home #hero header #sr-res-root { margin: 20px auto;} body.home #hero header p.cta { margin-top: 20px; font-size: 2rem;} @media all and (max-width: 599px) { body.home #hero header p.cta { font-size: 1.8rem;} } body.home #hero header p.cta a { padding:0.75em 3em 0.8em ; background: white; border-radius:5px; color: #1D1D1B; font-weight:500; -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75); } body.home #hero header p.cta a:hover, body.home #hero header p.cta a:active { color: white; background: #c49a68; border-color: #c49a68; mix-blend-mode:normal ;} p.cta b { display: block; border-top:8px solid transparent; text-align: center; font-size: 1rem; font-weight: 400; color:white; -webkit-filter: drop-shadow(1px 1px 8px rgba(0,0,0,0.5)); filter: drop-shadow(1px 1px 8px rgba(0,0,0,0.5)); } p.cta b svg { height: 24px; transform: translateY(3px); margin-left: 0.75em;} ul.social::after { content: ""; display: table; clear: both; } ul.social li { display: inline-block; margin:0 0.2em 0 !important; position:relative; font-size:4.2rem; line-height: 1; width: 1em; height: 1em; } ul.social li a { display:block; color: white; border-radius: 100%; text-decoration:none; width:100%; height:100%; overflow:hidden; } ul.social li a { background: #7B6C48; color: white; } ul.social li a span { height: 0; width: 0; position: absolute; overflow: hidden; } ul.social::after { content:""; display:table; height:0; clear:left;} ul.social li a::after { font-family: 'icons'; font-weight:normal; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ul.social li a[href*="facebook"]::after { content:"\e901"; } ul.social li a[href*="twitter"]::after { content:"\e903"; } ul.social li a[href*="instagram"]::after { content:"\e902"; } ul.social li a[href*="facebook"]:hover {background-color: #3b5998 !important; } ul.social li a[href*="twitter"]:hover {background-color: #1da1f2 !important; } ul.social li a[href*="instagram"]:hover { background: linear-gradient(45deg, rgba(255,211,116,1) 0%, rgba(255,211,116,1) 12%, rgba(240,103,59,1) 34%, rgba(236,73,76,1) 55%, rgba(196,49,137,1) 75%, rgba(128,67,197,1) 91%, rgba(128,67,197,1) 100%) !important; } ul.social li a[href*="tripadvisor"]:hover {background-color:#00af87 !important; } ul.social li a[href*="youtube"]:hover {background-color:#ff0000 !important; } .more { color:#7A7D74; font-size: 1.6rem; } .expand::after { font-family: 'icons'; font-weight:normal; content:"\e909"; font-size:0.875em; padding-left: 0.5em; } html, body { height: 100%; } body { display: flex; flex-direction: column; } #all { flex: 1 0 auto; } #footer { flex-shrink: 0; } .fullwidth { width: 100% !important; grid-column: 1/-1 !important; } .wrapper { max-width: none; margin: 0 auto; } #masthead .wrapper, .hero .wrapper { } #masthead .wrapper { padding-right:0px !important; } #masthead .wrapper { max-width: none !important; } .wrapper { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap:40px; border: 40px solid transparent; } @media all and (max-width: 599px) { .wrapper { grid-template-columns: 1fr ; grid-gap:0; border: 20px solid transparent; border: none; } } @media all and (min-width: 600px) and (max-width: 899px) { .wrapper{ grid-template-columns: 1fr 1fr; grid-gap:20px; border: 20px solid transparent; } } @media all and (min-width: 900px) and (max-width: 1199px) { .wrapper{ grid-gap:20px; border: 20px solid transparent; } } .wrapper.nogrid {display: block; } .textcontent { margin:20px auto; max-width:900px; padding:0 40px; } .textcontent>p:last-child { margin: 0; } #page_content { padding: 20px; } #page_content .textcontent { margin:0 auto 20px auto; } #page_content .textcontent:first-child p:first-child{ font-size: 2.4rem; } @media all and (max-width:899px) { #page_content .textcontent:first-child p:first-child{ font-size: 2rem; } .textcontent { padding:0; } } @media all and (min-width:900px) { .textcontent .textcol { width:calc(50% - 20px); float: left; } .textcontent .textcol:first-child { margin-right: 40px; } .textcontent::after { display: table; clear: both; content: ""; } } #masthead { position:relative; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; height: 120px; transition: all 0.3s ease-in-out; } #masthead>div{ position:relative; border:40px solid transparent; border-top:none; border-bottom:none; height: 100%;} body:not(.scrolled) #masthead::before { display: block; content:""; opacity:1; pointer-events: none; display: block; content:""; opacity:1; pointer-events: none; width:100%; height: 166%; height: 180%; position: absolute; background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%); } body.scrolled #masthead { background: rgba(0,0,0,0.85); } body.visitoverlay #masthead { background: rgba(255,255,255,0.85); } body.mobilemenu #masthead { } #masthead #logo { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 50px; transition: all 0.3s ease-in-out; transition: font-size 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.3s ease-in-out; } #masthead #logo a { color: #C49A68; } #masthead #logo b { display: block; /*width:50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);*/ } #masthead #logo b::after { text-align: center; font-family:'icons'; content:'\e900'; font-weight: normal; position: absolute;font-size:4rem; bottom: 50%; left: 0; left:50%; transform: translate(-50%,50%); display: inline-block; /*text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: all 0.3s ease-in-out; */ } #masthead #logo span { font-size: 1rem; width: 0; height: 0; overflow: hidden;opacity: 0; pointer-events: none; position: absolute;} body.home:not(.scrolled) #masthead #logo, body.home.unscrolled #masthead #logo { opacity:0; } body.visitoverlay #masthead #logo, body.mobilemenu #masthead #logo, body.home.scrolled #masthead #logo { opacity:1 !important; } body.visitoverlay #masthead #logo a { color:#7B6C48; } body.mobilemenu #masthead #logo a { } body.home #masthead #logo { } body.scrolled #masthead #logo { } @media all and (max-width:1599px) { } @media all and (max-width:1499px) { #masthead #logo b::after { font-size:3.2rem; } } /*@media all and (max-width:1023px) { */ @media all and (max-width:1199px) { #masthead { height: 60px; height: 80px;} #masthead>div{ border-width: 20px; } #masthead #logo b::after { font-size:3.2rem; } } @media all and (max-width: 599px) { /*#masthead #logo b::after { font-size:6vw; }*/ #masthead #logo b::after { font-size:3rem; } } @media all and (max-width: 399px) { #masthead #logo b::after { font-size:2.4rem; } } @media all and (max-width: 339px) { #masthead #logo b::after { font-size:2.1rem; } } #openstatus { position:absolute; top:calc(50% + 25px); right:0; color:white; text-align:right; padding:0; transition: all 0.2s ease; } #openstatus span { font-weight: 500;} body.visitoverlay #openstatus, body.mobilemenu #openstatus, body.scrolled #openstatus { opacity:0; pointer-events:none;} #mobilemenu { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; background:#000; width: 100%; height: 100vh; z-index: 998; transform: translateX(-100%); /*display: flex; flex-direction: column; */ overflow: auto; } body.pageloaded #mobilemenu {transition: all 0.3s ease; } #mobilemenu nav { overflow: hidden; width:100%; bottom: 0; left: 0; overflow: auto; padding: 0; } #mobilemenu>div { } /*#mobilemenu>div {border: 2px dotted green; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; justify-self: flex-end; } #mobilemenu>div div { border: 3px dotted blue; justify-self: flex-end; padding: 20px;} */ #mobilemenu .buttonbox { text-align: center; } #mobilemenu .buttonbox h3 span { display: none; } #mobilemenu .buttonbox h3:first-child a::before { margin: 0; } #mobilemenu>div>div { padding: 20px 20px 0; } #mobilemenu ul.social { text-align:center; border:10px solid transparent; } html.mobilemenu, body.mobilemenu { height: 100%; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overflow: hidden } body.mobilemenu #mobilemenu { opacity: 1; transform: translateX(0); } body.mobilemenu #mobilemenu * { pointer-events: auto !important } body.mobilemenu #masthead::before { opacity: 0;} body.mobilemenu #mainnav p, body.mobilemenu #mainnav p * { color: white !important; } body.visitoverlay #hamburger, body.mobilemenu #showvisit { opacity: 0; pointer-events: none; } #mainnav ul { display: none; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #mainnav ul li { display: inline-block; padding-right: 2em; font-size: 2rem;} #mainnav ul li a {color: white; display: inline-block; position: relative;} #mainnav ul li a::after { content:""; display: inline-block; position:absolute; bottom:-2px; height: auto; border-bottom: 2px solid #FFF; width: 1px; opacity: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s ease; } #mainnav ul li a:hover::after { width: 100%; opacity: 1;} #mainnav ul li a.current::after { border-color: #C49A68; width: 100%; opacity: 1;} #mainnav ul li a.current { color: #C49A68; } /*@media all and (min-width:1024px) and (max-width:1599px) { */ @media all and (min-width:1350px) and (max-width:1599px) { #mainnav ul li { font-size: 1.8rem; padding-right: 1.8em; } } /*@media all and (min-width:1024px) and (max-width:1199px) { */ @media all and (min-width:1024px) and (max-width:1349px) { #mainnav ul li { font-size: 1.6rem; padding-right: 1.5em; } } @media all and (min-width:1600px) { #mainnav ul li { font-size: 2.2rem;} } #mainnav p#showvisit { width:40px; height:40px; color:white; position: absolute; top: 50%; right:0; transform: translateY(-50%); } #mainnav p#showvisit a { color:white; width:40px; height:40px; display: block;} #mainnav p#showvisit a::before { display:inline-block; content:"\e906"; font-family: icons; font-size: 4rem; position: absolute; top: 50%; right:0; transform: translateY(-50%); } #mainnav p#showvisit span{ position: absolute; width:0; height:0; overflow: hidden; pointer-events: none; } body.visitoverlay #mainnav p#showvisit a b, body.visitoverlay #mainnav p#showvisit a::before, body.visitoverlay #mainnav p#showvisit a::after { display: block; content:""; width: 100%; height: 0; border-top: 2px solid rgba(255,255,255,1); position: absolute; transition: all 0.3s ease; } body.visitoverlay #mainnav p#showvisit a b, body.visitoverlay #mainnav p#showvisit a::before, body.visitoverlay #mainnav p#showvisit a::after { border-color: rgba(0,0,0,1) !important; } body.visitoverlay #mainnav p#showvisit a::before { top: calc(50% - 1px); transform: rotate(45deg);} body.visitoverlay #mainnav p#showvisit a::after { top: calc(50% - 1px); transform: rotate(-45deg);} #mainnav p#hamburger {width:40px; height:40px; position: absolute; top: 50%; left:0; transform: translateY(-50%); } #mainnav p#hamburger a { color:white; width:40px; height:40px; display: block;} #mainnav p#hamburger a::after { transition: all 0.2s ease; } #mainnav p#hamburger span{ position: absolute; width:0; height:0; overflow: hidden; pointer-events: none; } #mainnav p#hamburger a b, #mainnav p#hamburger a::before, #mainnav p#hamburger a::after { display: block; content:""; width: 100%; height: 0; border-top: 2px solid rgba(255,255,255,1); position: absolute; transition: all 0.2s ease; } body.mobilemenu #mainnav p#hamburger a { color:black;} body.mobilemenu #mainnav p#hamburger a b, body.mobilemenu #mainnav p#hamburger a::before, body.mobilemenu #mainnav p#hamburger a::after { /*border-color: rgba(0,0,0,1) !important;*/ } #mainnav p#hamburger a b { top: calc(50% - 1px); } #mainnav p#hamburger a::before { top: calc(15% - 1px); } #mainnav p#hamburger a::after { top: calc(85% - 1px); } body.mobilemenu #mainnav p#hamburger a b { opacity:0; transform: scale(0.5,0.5);} body.mobilemenu #mainnav p#hamburger a::before { top: calc(50% - 1px); transform: rotate(45deg);} body.mobilemenu #mainnav p#hamburger a::after { top: calc(50% - 1px); transform: rotate(-45deg);} /* body.mobilemenu #mainnav p#hamburger a::after { content:"\e909"; font-size: 3.8rem; transform: translate(-0.2em,-0.033em) rotate(225deg);} */ @media all and (max-width:900px) { } /*@media all and (min-width:1024px) { */ @media all and (min-width:1200px) { #hamburger { display:none !important; } #mobilemenu { display:none !important; } #mainnav ul { display:block !important; } } #mobilemenu nav ul:not(.social) { border-top:80px solid transparent; } #mobilemenu nav ul li { border-left:none !important; border-right:none !important; } #mobilemenu nav ul li:first-child { border-top: 1px dotted #7B6C48; } #mobilemenu nav ul li { border-bottom: 1px dotted #7B6C48; font-weight:400; font-weight: 300; font-weight:500; font-size: 3rem; font-size: 2.8rem; /*text-transform:uppercase;*/ display:flex; justify-content:center; } #mobilemenu nav ul li a { text-align: center; display: block; width: 100%; padding: 0.33em 0 0.33em; padding: 0.666em 0 0.666em; color: white; } #mobilemenu nav ul li a:hover, #mobilemenu nav ul li a:active { background: rgba(123,108,72,0.5); background: rgba(123,108,72,0.42); } #mobilemenu nav ul li a span{ text-align: left; /*padding-left: 44px;*/ display: inline-block; width: 222px; margin: 0 auto; } @media all and (max-width:1023px) { #mobilemenu nav ul:not(.social) { border-top:60px solid transparent; border-top:80px solid transparent;} } @media all and (max-width:599px) { #mobilemenu nav ul li { font-size: 2.4rem; font-size: 2rem; font-size:1.8rem; } #mobilemenu nav ul li a span {width: 208px; /*padding-left: 40px;*/ } } @media all and (max-width:399px) { #mobilemenu nav ul li a span {width: 166px; /*padding-left: 32px;*/ } #mobilemenu nav ul li { font-size: 2.2rem; font-size:1.8rem; } } @media all and (max-width:339px) { #mobilemenu nav ul li a span {width: 146px; /*padding-left: 28px;*/ } } .hero { width: 100%; height: calc(100vh - 40px); height: 100vh; position: relative; color: white; } .hero img { width: 100%; height: 100%; object-fit: cover; } @media all and (max-width:499px) { /* .hero { height: calc(100vh - 40px); } .hero { height: calc(100vh - 60px); }*/ } @media all and (max-width:499px) { .hero { height: calc(100vh - 56px); } /* .hero { height:auto; } .hero::after { content:""; display: block; width: 100%; height: 0; padding-bottom:calc(177% - 54px); padding-bottom:calc(160% - 54px); } .hero img {position: absolute;}*/ } /*@media only screen and (max-device-width: 1024px) and (orientation: portrait) { .hero { height:auto; } .hero img {position: absolute;} .hero::after { content:""; display: block; width: 100%; height: 0; padding-bottom:calc(160% - 54px); } } @media only screen and (max-device-width: 1024px) and (orientation: landscape) { .hero { height:auto; } .hero img {position: absolute;} .hero::after { content:""; display: block; width: 100%; height: 0; padding-bottom:calc(56% - 54px); } } */ .hero header { position: absolute; top: 45%; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; font-size: 2.8rem; } .hero header::before { width:100%; display: block; content:""; pointer-events: none; transition: opacity 0.3s ease-in-out; color: #C49A68; position: absolute; left: 50%; transform: translateX(-50%); bottom:calc(100% + 5px); bottom:100%; text-align: center; font-family:'icons'; content:'\e900'; font-weight: normal; position: absolute; transition: all 0.3s ease-in-out; font-size:4rem; display: inline-block; } @media all and (max-width:899px) { .hero header::before{font-size: 9vw; } } @media all and (max-width:599px) { .hero header::before{font-size: 11vw; } } @media all and (min-width:900px) { .hero header::before{font-size: 6vw; } } @media all and (min-width:1200px) { .hero header::before{font-size: 5vw; } } @media all and (min-width:1500px) { .hero header::before{font-size: 4.2vw; font-size: 9.5rem; } } body.scrolled .hero header::before { opacity: 0;} .hero header ul li { opacity: 0; font-size:3.6rem; margin: 0.5em 0 0 !important; width: 100%; } @media all and (max-width:599px) { .hero header ul li { font-size: 6vw; } } .hero_image { width: 100%; height:66.6666vw; max-height:60vh; position: relative; } .hero_image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } #hero_single { position: relative; color: white; } #herocaption { width: 100%; position: absolute; bottom:0; left: 0; z-index: 10; } #herocaption .textcontent{ opacity: 0;} body.pageloaded #herocaption .textcontent{ transition: all 0.6s ease-out; } #herocaption.visible .textcontent{ opacity: 1; } #herocaption p{ font-size: 3.2rem; border-left:20px solid transparent;border-right:20px solid transparent; text-align:center; padding: 0; } @media all and (max-width:899px) { #herocaption p{ font-size: 2.4rem; } } @media all and (max-width:599px) { #herocaption p{ font-size: 2rem; } } @media all and (min-width:1600px) { #herocaption p{ font-size: 4rem; } } #herocaption::before { display: block; content:""; opacity:1; width:100%; height:200%; position: absolute; left:0; bottom:0; z-index: -1; background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%); } #hoosh { width: 180px; height:120px; display: block; position: absolute; left: 50%; transform:translateX(-50%); transition: all 0.6s ease-out; opacity:0; bottom:40px; } #hoosh::after {display: block; content:""; width: 40px; height: 40px; display: block; position: absolute; left: 50%; transform:translateX(-50%) rotate(45deg) ; border:4px solid white; border-top:none; border-left:none; bottom:40px; box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.66); } #hoosh.hooshloaded { bottom:0; opacity:1; }#visitoverlay { pointer-events: none; position: fixed; top: 0; left: 0; background:#FFF; width: 100%; height: 100%; z-index: 998; opacity: 0; transform: translateX(100%); /**/display:flex; flex-direction: column; } body.pageloaded #visitoverlay {transition: all 0.3s ease; } #visitimage { flex: 1; position: relative; } #visitimage #googlemap { width: 100%; height: 100%; position: absolute; } html.visitoverlay, body.visitoverlay { height: 100%; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overflow: hidden } p#showvisit a{ } body.visitoverlay #visitoverlay { opacity: 1; pointer-events: auto; transform: translateX(0); } body.visitoverlay #masthead::before { opacity: 0;} body.visitoverlay #mainnav p, body.visitoverlay #mainnav p * { color: black !important; } body.visitoverlay nav#mainnav>ul { opacity: 0; pointer-events: none; } #visitoverlay>div:first-child { border-top:80px solid transparent; } #loadvisit{ border:1px solid #7B6C48; border-left:none; border-right:none; display:grid; grid-template-columns:1fr 1fr; } #loadvisit div { padding: 20px 5px; text-align:center; background: white; } #loadvisit div p { padding: 0; margin:0; } #loadvisit div p a { color:black; } #visitimage .hero_image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100%; } #loadvisit div:first-child { border-right:1px solid #7B6C48; } @media all and (max-width: 359px) { #loadvisit p { font-size: 1.4rem; } #loadvisit div { grid-column: span 2; } #loadvisit div:first-child { border-right:none ; border-bottom:1px solid #7B6C48; } } @media all and (max-width: 767px) { #loadvisit { grid-template-columns: 50% 50%; } #loadvisit div h3:first-child, div.buttonbox h3:first-child, #loadvisit div p { font-size: 1.4rem; } } @media all and (min-width: 600px) { #loadvisit div { padding: 40px; } } @media all and (min-width: 768px) { #loadvisit { grid-template-columns:1fr 1fr 1fr 1fr; border:1px solid #7B6C48;border-left:none; border-right:none; /**/ position: relative;} #loadvisit div { padding: 40px; grid-column: span 2; } #loadvisit div:nth-child(2n+1) { padding-left: 60px; } #loadvisit div:nth-child(2n+2){ padding-right: 60px; } #loadvisit::before, #loadvisit::after { content:""; display: block; position: absolute; width: 100vw; height: 0; left: 50%; transform: translateX(-50%); } #loadvisit::before { top:-1px; border-top:1px solid #7B6C48; top:-1px; } #loadvisit::after { bottom:-1px; border-bottom:1px solid #7B6C48; } #loadvisit div h3:first-child, div.buttonbox h3:first-child, #loadvisit div p { font-size: 1.6rem; } } @media all and (min-width:1024px) { #visitoverlay>div:first-child { border-top:120px solid transparent; } } @media all and (min-width:1200px) { #footerinfo { grid-template-columns:1fr 1fr 1fr 1fr ; margin: 0 20px; } #loadvisit div { padding: 30px; grid-column: span 2; } /* #loadvisit div:nth-child(2n+1) { padding-left: 30px; } #loadvisit div:nth-child(2n+2){ padding-right: 30px; } */ #loadvisit div h3:first-child, div.buttonbox h3:first-child, #loadvisit div p { font-size: 1.6rem; } } @media all and (min-width:1400px) { #loadvisit { grid-template-columns:1fr 1fr 1fr 1fr ; } #loadvisit div { padding: 40px; grid-column: span 2; } /* #loadvisit div:nth-child(2n+1) { padding-left: 40px; } #loadvisit div:nth-child(2n+2){ padding-right: 40px; } */ #loadvisit div h3:first-child, div.buttonbox h3:first-child, #loadvisit div p { font-size: 1.8rem; } }#footer { position: relative; } /*#footer {background: rgba(123,108,72,0.1);}*/ #footerinfo { display:grid; margin: 0 auto; /*max-width: 1400px; */ grid-gap:0; border:1px solid #7B6C48; border-left:none; border-right:none; } #footerinfo div { padding: 20px 5px; text-align:center; background: white; } #footerinfo div p { padding: 0; } #footerinfo div p a { color:black; } #footerinfo div p a { display: inline-block; position: relative; } #footerinfo div:not(.backtotopholder) p a::after { content:""; display: inline-block; position:absolute; bottom:-1px; height: auto; border-bottom: 1px solid #000; width: 1px; opacity: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s ease; } #footerinfo div p a:hover::after { width: 100%; opacity: 1;} #footerinfo div h3:first-child, div.buttonbox h3:first-child { text-transform: uppercase; color: black; font-size: 1.6rem; font-weight: 300; font-weight:400; font-weight:500; text-align:center; } div.buttonbox h3:first-child a { color: black; } div.buttonbox h3:first-child a::before { font-family:'icons'; content:'\e905'; font-weight: normal; display:inline-block; transition: all 0.2s ease-in-out; font-size:4.2rem; box-sizing: content-box; margin-bottom: 10px; border: 2px solid #7B6C48; color:#7B6C48; border-radius:100%; width: 1em !important; height: 1em !important; line-height: 1 !important; text-align: center; vertical-align: middle; } div#call_info h3:first-child a::before { content:'\e904'; } div.buttonbox h3:first-child a span { display: block; } div.buttonbox h3:first-child a:hover::before {color:#FFF; background:#7B6C48; } div.buttonbox p { font-weight: 300; /*overflow: hidden; */} #footerinfo div:first-child { border-right:1px solid #7B6C48; } #footerinfo div#opening_times { grid-column: span 2; text-align: left; } #footerinfo div#footer_social { grid-column: span 2; } #footerinfo div p:last-child { margin-bottom: 0 !important; } @media all and (max-width: 359px) { #footerinfo p { font-size: 1.4rem; } div.buttonbox p { font-size: 1.4rem; } #footerinfo div { grid-column: span 2; } #footerinfo div:first-child { border-right:none ; border-bottom:1px solid #7B6C48; } } @media all and (max-width: 767px) { #footerinfo { grid-template-columns: 50% 50%; } #footerinfo div#opening_times { padding: 20px;} #footerinfo div#opening_times, #footerinfo div#footer_social { border-top:1px solid #7B6C48; } #footerinfo div h3:first-child, div.buttonbox h3:first-child, #footerinfo div p { font-size: 1.4rem; } } @media all and (min-width: 600px) { #footerinfo div#opening_times, #footerinfo div { padding: 40px; } } @media all and (min-width: 768px) { #footerinfo { grid-template-columns:1fr 1fr 1fr 1fr; border:1px solid #7B6C48;border-left:none; border-right:none; /**/ position: relative;} #footerinfo div { padding: 40px; grid-column: span 2; } #footerinfo div:nth-child(2n+1) { padding-left: 60px; } #footerinfo div:nth-child(2n+2){ padding-right: 60px; } #footerinfo div#opening_times { border-right:1px solid #7B6C48; } #footerinfo::before, #footerinfo::after { content:""; display: block; position: absolute; width: 100vw; height: 0; left: 50%; transform: translateX(-50%); } #footerinfo::before { top:-1px; border-top:1px solid #7B6C48; top:-1px; } #footerinfo::after { bottom:-1px; border-bottom:1px solid #7B6C48; } #footerinfo div#opening_times, #footerinfo div#footer_social { border-top:1px solid #7B6C48; } #footerinfo div h3:first-child, div.buttonbox h3:first-child, #footerinfo div p { font-size: 1.6rem; } } @media all and (min-width:1200px) { #footerinfo { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; margin: 0 20px; } #footerinfo div#opening_times, #footerinfo div { padding: 30px; grid-column: span 2; } #footerinfo div:nth-child(2n+1) { padding-left: 30px; } #footerinfo div:nth-child(2n+2){ padding-right: 30px; } #footerinfo div#opening_times { grid-column: span 2; } #footerinfo div#call_info { border-right:1px solid #7B6C48; } #footerinfo div#opening_times, #footerinfo div#footer_social { border-top:none; } #footerinfo div h3:first-child, div.buttonbox h3:first-child, #footerinfo div p { font-size: 1.6rem; } } @media all and (min-width:1400px) { #footerinfo { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; } #footerinfo div#opening_times, #footerinfo div { padding: 40px; grid-column: span 2; } #footerinfo div:nth-child(2n+1) { padding-left: 40px; } #footerinfo div:nth-child(2n+2){ padding-right: 40px; } #footerinfo div#opening_times { grid-column: span 2; } #footerinfo div#call_info { border-right:1px solid #7B6C48; } #footerinfo div#opening_times, #footerinfo div#footer_social { border-top:none; } #footerinfo div h3:first-child, div.buttonbox h3:first-child, #footerinfo div p { font-size: 1.8rem; } } @media all and (min-width:1400px) { /*#footerinfo { border:1px solid #7B6C48; }*/ } #footerinfo div#opening_times p { margin-bottom: 0.75em; } #footerinfo div#opening_times p span { float: right; text-align: right; } #footerlinks { background:black; text-align:center; } #footerlinks a { color:white; padding: 1em; display: block;} #footerlinks p { margin:0; font-size:1.6rem } #footer #yelp-reservations-widget, #footer #yelp-reservations-widget2 { display: none;margin: 0 auto ;} @media all and (min-width:600px) { #footer #yelp-reservations-widget { display: block;} } @media all and (max-width:599px) { #footer .wrapper.nogrid { border: 20px solid transparent; border-bottom: none; } #footer #yelp-reservations-widget2{ display: block;} } .backtotopholder { height:50px; position: absolute;/* top: 100%; top: calc(100% - 50px); */ bottom:0; width: 100%; pointer-events: none; max-width: 1500px; right:0%; } .backtotop { margin:0; color: #7A7D74; width: 100%; height:50px; position: relative; } .backtotop i { pointer-events:auto; transition: all 0.2s ease; display: block; text-align:center; font-style:normal; font-weight: normal; width:40px; height:40px; margin-right:10px; margin-bottom: 10px; line-height:40px; position: absolute; right:0; border-radius: 100%; background:rgba(123,108,72,0.87); color: #FFF; overflow: hidden; } .backtotop i::before { content: ""; display: block; width: 12px; height: 12px; border: 3px solid white; border-right: none; border-bottom: none; position: absolute; top: calc(50% - 6px); top:calc(50% + 2px); left: 50%; transform: translate(-50%,-50%) rotate(45deg); } @media all and (min-width: 600px) { .backtotop i:hover { background:rgba(123,108,72,1); color: #FFF; } } .backtotop.fixed { position: fixed; bottom:0; left: 0; z-index: 9999; } /**/ .backtotop { opacity: 0; pointer-events: none; } .backtotop.fixed, body.scrolledtobottom .backtotop { opacity: 1; pointer-events: auto; } article.card { text-align: center; position: relative; color: white; } article.card::before { display: block; content:""; opacity:0.8; width:100%; height: 80%; position: absolute; background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%); } article.card>span, article.card a { color: white; display: block; width: 100%; height: 0; padding-bottom: 150%; } article.card header { padding: 40px ; padding: 40px 30px ; position: absolute; z-index: 10;width: 100%; height: 100%; display: flex; flex-direction: column; } article.card header div {flex: 1; } article.card header div p { font-size:1.8vw; padding: 0;} article.card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position:center; z-index: -1;} article.card p.cta { margin: 0 0 ; font-size: 2.4rem; } article.card header { } article.card header div h3 {font-weight: 700;font-weight: 500; text-transform: uppercase; } @media all and (max-width:899px) { article.card header div h3 { font-size:2vw; } article.card header div p { font-size:3.2vw; } article.card p.cta { font-size:2vw; } } @media all and (max-width:599px) { article.card {border-top:10px solid #7B6C48; } article.card header div h3 { font-size:5vw; } article.card header div p { font-size:7vw; } article.card p.cta { font-size:5vw; } } @media all and (min-width:900px) { article.card header div h3 { font-size:1.2vw; } article.card header div p { font-size:1.8vw;} article.card p.cta { margin: 0 0 ; font-size: 1.2vw; } } @media all and (min-width:1200px) { article.card header div h3 { font-size:1.1vw; } article.card header div p { font-size:calc(((100vh - (5 * 40px)) / 4) * 0.14); font-size:1.5vw;} article.card p.cta { margin: 0 0 ; font-size: 1.1vw; } }.image_montage { display: grid; grid-gap: 0px; max-width: 1400px; margin: 20px auto; border: 20px solid transparent; } @media all and (max-width:899px) { .image_montage { border-left:none; border-right:none; } } .montage1 .image1 { } .montage1 div.large, .montage1 div.small { width: 100%; height:0; padding-bottom: 100%; position: relative;} .montage1 div.tall { width: 100%; height:0; padding-bottom: 200%; position: relative;} .montage1 img { width: 100%; height: 100%; object-fit: cover; } .image_montage .slick-slider, .image_montage .slick-list, .image_montage .slick-track { height: 100% } .montage_image { width: 100%;height: 100%;position: absolute;overflow: hidden;} .image_montage .slider { width: 100%; height: 100%; position: absolute; overflow: hidden; } .image_montage .slider .montage_image { position: relative; } .image_montage .slick-arrow { position: absolute; top: 50%; transform: transformY(-50%); background: none; border: none; color: rgba(0,0,0,0); width: 50px; height: 50px; cursor: pointer; z-index: 10;} .image_montage .slick-arrow::after{ content:""; display: inline-block; position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%) rotate(45deg) ; width: 30px; height: 30px; border: 2px solid white; } .image_montage .slick-prev { left: 10px; } .image_montage .slick-next { right:10px; } .image_montage .slick-prev::after{border-right: none; border-top: none; } .image_montage .slick-next::after{border-left: none; border-bottom: none; } @media all and (max-width: 1199px) { .image_montage { grid-template-columns: 1fr 1fr; } .montage1 div.image1 { grid-column:1 / span 2; grid-row:1 / span 2; } .montage1 div.image2 { grid-column:1 / span 1; grid-row:3 / span 1; } .montage1 div.image3 { grid-column:1 / span 1; grid-row:4 / span 1; } .montage1 div.image4 { grid-column:2 / span 1; grid-row:3 / span 2; } } @media all and (min-width: 1200px) { .image_montage { grid-template-columns: 1fr 1fr 1fr 1fr; } /* .montage1 div.image1 { grid-column:1 / span 2; grid-row:1 / span 2; } .montage1 div.image2 { grid-column:3 / span 1; grid-row:1 / span 1; } .montage1 div.image3 { grid-column:3 / span 1; grid-row:2 / span 1; } .montage1 div.image4 { grid-column:4 / span 1; grid-row:1 / span 2; }*/ .montage1 div.image1 { grid-column:3 / span 2; grid-row:1 / span 2; } .montage1 div.image2 { grid-column:1 / span 1; grid-row:1 / span 1; } .montage1 div.image3 { grid-column:1 / span 1; grid-row:2 / span 1; } .montage1 div.image4 { grid-column:2 / span 1; grid-row:1 / span 2; } }section.menu { border: 1px solid transparent; margin: 0 0 20px; /*overflow: hidden;*/ position: relative; } section.menu h2 span{ display: block; width:100%; margin: 0; line-height: 1.2; padding: 1em 0.5em; color:white; text-align: center; background: none; /*text-transform: uppercase;*/ font-size:2.2rem; transition: all 0.2s ease-in-out; position: relative; z-index: 10; text-transform:capitalize !important; font-weight:500; } section.menu h2 span::after { content:""; display: block; width: 12px; height:12px; border:2px solid white; border-left: none; border-top: none; position: absolute; top:calc(50% - 0.075em); right:18px; transform: translateY(-50%) rotate(45deg); transition: margin 0.2s ease-out; margin-top: -20px; opacity: 0; } section.menu.visible h2 span::after { opacity: 1; margin-top: 0; } section.menu.openmenu h2 span::after { border:2px solid white; border-right: none; border-bottom: none; top:calc(50% + 0.1em); } @media all and (max-width: 359px) { section.menu h2 span {font-size:2rem; } } section.menu h2::before {display: block; content:""; opacity:1; pointer-events: none; transition: all 0.2s ease-in-out; width:100%; height: 60%; position: absolute; left: 0; top: 0; z-index: -1; background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%); } section.menu.openmenu {border: 1px solid #7B6C48;} section.menu.openmenu h2 span { background: #7B6C48; position: relative; } section.menu.openmenu h2 span::before { opacity: 0; } section.menu h2 { width: 100%; height: 0; padding-bottom: 66.6666%; position: relative; margin: 0; transition: 0.2s all ease-out; } section.menu h2::after { display: block; content:""; background-position: center; background-size: cover; z-index:-2; position: absolute; top: 0; left: 0;width: 100%; height:100%; } @media all and (max-width: 599px) { body.page-id-9 section.menu h2 { padding-bottom: 36%; } body.page-id-9 section.menu h2::before { height:100%; } } section.menu.openmenu h2, body.page-id-9 section.menu.openmenu h2 { height: auto; padding-bottom: 0; } /*section.menu.openmenu h2::after { opacity: 0.6; pointer-events: none; }*/ section.menu h2 span { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } section.menu .menu_content { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } section.menu.openmenu .menu_content { -webkit-touch-callout: text; /* iOS Safari */ -webkit-user-select: text; /* Safari */ -khtml-user-select: text; /* Konqueror HTML */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* Internet Explorer/Edge */ user-select: text; } section.menu .menu_content { padding: 20px; } body.hasjs section.menu .menu_content { display: none;} section.menu .menu_content div:not(.amenu) h3 { display: none; } section.menu .menu_content div.amenu h3:first-child { font-weight:500; color: black; text-align: center; position: relative; margin: 30px 0 30px !important; } section.menu .menu_content div.amenu h3::after { display: inline-block; content:""; width: 40px; border-bottom: 1px solid black; bottom:-20px; position: absolute; left: 50%; transform:translateX(-50%); height: 0; } section.menu .menu_content ul:not(.menusubmenu) { } section.menu .menu_content ul:not(.menusubmenu) li, section.menu .menu_content p.menu_note { font-family: 'Frank Ruhl Libre', serif; font-family: 'Vollkorn', serif; line-height: 1.2; margin-bottom: 1em !important; } ul.menusubmenu { text-align: center; } ul.menusubmenu li { display: inline-block; /*text-transform: uppercase;*/ margin-bottom: 0.25em !important; } ul.menusubmenu li:not(:last-child)::after { content:"\2014"; display: inline-block; padding: 0 0.5em; } ul.menusubmenu { padding-bottom: 40px; margin-bottom: 20px; position: relative; } ul.menusubmenu::after { display: inline-block; content:""; width: 40px; border-bottom: 1px solid black; bottom:20px; position: absolute; left: 50%; transform:translateX(-50%); height: 0; } ul.menusubmenu li a { color: black; font-weight: 700;font-weight:500; font-weight:600; } ul.menusubmenu li a.open { color: #7B6C48; } section.menu .menu_content ul li {font-size:1.8rem; } section.menu .menu_content ul li em:not(.popup) {font-size:1.5rem; margin: 5px 0 0; } section.menu .menu_content ul:not(.menusubmenu) li:not(.last-child) { border-bottom:1px solid rgba(112,112,112,0.25); margin-bottom: 0.5em !important; padding:0.25em 0 0.5em 0 !important; } section.menu .menu_content p.menu_note { font-size:1.8rem; font-style:italic; text-align: center; } section.menu .menu_content ul.menusubmenu+p.menu_note { position:relative; top:-15px; opacity: 0; transition: all 0.5s ease 1s; left: -40px; } section.menu.openmenu .menu_content ul.menusubmenu+p.menu_note { opacity:1; left: 0; } @media all and (max-width: 399px) { /* section.menu .menu_content ul li {font-size:1.4rem; } section.menu .menu_content ul li em:not(.popup) {font-size:1.2rem;}*/ } section.menu .menu_content ul li p { font-weight:700 ;font-weight:500; font-weight:600; display: flex; width: 100%; padding-bottom: 0.25em; margin-bottom: 0.25em; padding-bottom: 0; margin-bottom: 0; /*border-bottom:1px solid rgba(112,112,112,0.25);*/ position: relative;} section.menu .menu_content ul li p>span {flex:1; display: flex; align-items:flex-end; justify-content: flex-end; text-align: right; padding-left: 1em; vertical-align: bottom;} section.menu .menu_content ul li strong { font-weight: 600; max-width: calc(100% - 95px); } section.menu .menu_content ul li strong span.nutrition { white-space: nowrap; padding-right: 0.5rem; } section.menu .menu_content ul li strong span:first-child { margin-right: 2rem;} @media all and (max-width: 399px) { section.menu .menu_content ul li strong span:first-child { margin-right: 1rem;} } section.menu .menu_content ul li em:not(.popup) { display: block; font-style: normal !important; font-weight: 400 !important; font-weight: 300 !important; font-weight: 400 !important; max-width: calc(66% + 3em); padding-right: 3em; } @media all and (max-width: 399px) { section.menu .menu_content ul li em:not(.popup) { max-width: none; padding-right: 2em; } } section.menu .menu_content ul li p em.popup { position: relative; width:auto; font-style: normal !important; cursor:pointer; } section.menu .menu_content ul li strong em.popup b { position: absolute; top: 0; left:100%; background: #7B6C48; display: inline-block; padding: 4px 8px; transform: translateY(-50%); width:2.4rem; height:2.4rem; line-height:2.4rem; width: 8px; height: 8px; background: #FFF; cursor: pointer; background-size: 8px 8px; background-repeat:no-repeat; background-position:center; background-image:url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><polygon points="16,7 9,7 9,0 7,0 7,7 0,7 0,9 7,9 7,16 9,16 9,9 16,9 "/></svg>'); transition: all 0.1s ease-in-out; } section.menu .menu_content ul li strong em.popup i{ font-style: italic;position: absolute; top: 0; border: 1px solid #7B6C48; padding:1em; font-size: 1em; line-height: 1.3; background: white; z-index: 90; -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); left: calc(100% + 16px); color: black !important; } section.menu .menu_content ul li strong em.popup i { opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; font-weight: 400; font-style: italic; font-size: 1.6rem; width:14em; font-size: 1.8rem; width:12em; } section.menu .menu_content ul li strong em.popup.active { color: #7B6C48; } section.menu .menu_content ul li strong em.popup.active i{ opacity: 1; pointer-events: auto; } section.menu .menu_content ul li strong em.popup.active b{ transform: translateY(-50%) rotate(45deg); } @media (hover: hover) { section.menu .menu_content ul li strong em.popup:hover b { transform: translateY(-50%) scale(1.3,1.3);} section.menu .menu_content ul li strong em.popup.active:hover b { transform: translateY(-50%) rotate(45deg) scale(1.3,1.3);} } @media all and (max-width: 599px) { section.menu .menu_content ul li strong em.popup i{ top: 2.5rem; left:3rem; transform: none; } section.menu .menu_content ul li strong em.popup i::before { border:1px solid #7B6C48; background: white; top: -1px; left:50%; transform: translate(-50%,-50%) rotate(45deg); left:30px; transform: translateY(-50%) rotate(45deg); content:""; display: block; width: 4px; height: 4px; position: absolute; border-bottom:none; border-right:none; } } @media all and (max-width: 399px) { section.menu .menu_content ul li strong em.popup i{ /*top: 2rem;*/ left:2rem; padding: 0.75em; } } #menuholder { max-width: 1400px; margin: 0 auto; } #menuholder .menucol { } @media all and (min-width: 1024px) { #menuholder { display: flex; justify-content: space-between; } #menuholder .menucol { width: calc(50% - 10px); } } section.menu .menu_content ul li abbr { text-decoration:none; display:inline-block; text-align:center; font-family: objektiv-mk3, sans-serif; margin:0 6px 0 0; top:-2px; position: relative; cursor:help; width:2.8em; line-height:2em; font-size:0.8rem; height: 2em;} section.menu .menu_content ul li abbr:first-child { } section.menu .menu_content ul li abbr::before { content:""; display: block; height:2.8em; width:2.8em; position: absolute; top: 50%; left: 50%; border-radius:100%; border:1px solid rgba(123,108,32,0.5); transform:translate(-50%,-50%); } @media (hover: hover) { section.menu .menu_content ul li abbr:hover::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; display: block; background: white; border:1px solid rgba(123,108,32,0.5); content: attr(title); text-align: center; pointer-events: none; line-height: 1; -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); font-weight: 500; background-repeat:no-repeat; background-position: center 5px; font-size: 1rem; padding: 38px 4px 5px; width: 9em; background-size: 28px 28px; background-position: center 7px; font-size:1.2rem; padding: 56px 6px 7px; width: 9em; background-size: 42px 42px; /*background-image:url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><g><g><g><path fill="rgba(123,108,72,1)" class="st0" d="M11.1,1.8c-2-0.1-3.6,1-3.8,3C7.1,6.3,6.6,7.7,5.6,9c-0.6,0.7-1,1.6-1.2,2.5c-0.5,2.4,1.5,4.7,4.1,4.7 c0.6,0,1.2-0.1,1.8-0.5c1.7-1,2.7-2.9,2.4-4.9c-0.2-1.2-0.1-2.3,0.3-3.4c0.3-0.7,0.5-1.5,0.8-2.3C14.3,3.8,12.8,1.9,11.1,1.8z M10.1,11.9c0,0.3-0.1,0.7-0.4,1c-0.2,0.2-0.4,0.3-0.6,0.4c0,0,0,0,0,0c-0.6,0-0.7-0.5-0.7-0.7l0,0c0-0.4,0.2-0.8,0.4-1 c0.2-0.2,0.4-0.3,0.7-0.3c0,0,0,0,0,0C9.8,11.2,10.1,11.3,10.1,11.9z M8.2,9c0.2-0.2,0.4-0.3,0.6-0.3c0.3,0,0.7,0.2,0.7,0.8v0 c0,0.4-0.2,0.8-0.5,1.1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0c-0.3,0-0.7-0.2-0.7-0.8C7.7,9.7,7.9,9.3,8.2,9z M8.2,11.9 c0,0.3-0.2,0.8-0.5,1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0c-0.3,0-0.6-0.1-0.7-0.7c0-0.3,0.1-0.7,0.4-1c0.2-0.2,0.4-0.3,0.7-0.4 c0.2,0,0.4,0.1,0.5,0.2C8.1,11.4,8.2,11.7,8.2,11.9z M6.5,9c0.2-0.2,0.4-0.3,0.6- 0.3c0.6,0,0.6,0.5,0.6,0.7l0,0 c0,0.4-0.2,0.8-0.5,1.1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0C6.4,10.8,6,10.7,6,10C6,9.7,6.2,9.3,6.5,9z M5.5,13.3 C5.5,13.3,5.5,13.3,5.5,13.3c-0.6,0-0.7-0.5-0.8-0.8c0-0.1,0-0.1,0-0.2l0,0l0-0.2c0.1-0.4,0.2-1,0.8-1c0.2,0,0.4,0,0.5,0.2 c0.2,0.2,0.3,0.6,0.3,0.9C6.3,13.1,5.9,13.3,5.5,13.3z M6.8,15.4C6.8,15.4,6.8,15.4,6.8,15.4c-0.2,0-0.4-0.1-0.6-0.3 c-0.3-0.3-0.5-0.7-0.5-1.1l0,0c0-0.6,0.4-0.7,0.7-0.7c0.5,0,1,0.7,1,1.3C7.5,15.3,7.1,15.4,6.8,15.4z M8.4,15.8 C8.4,15.8,8.4,15.8,8.4,15.8c-0.2,0-0.3-0.1-0.5-0.2c-0.2-0.1-0.2-0.4-0.2-0.6v0c0-0.4,0.2-0.8,0.4-1c0.2-0.2,0.4-0.3,0.6-0.3 c0,0,0,0,0,0c0.3,0,0.7,0.1,0.7,0.8C9.5,15.1,8.9,15.8,8.4,15.8z M11.1,14.2c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0 c-0.3,0-0.6-0.1-0.7-0.7l0,0c0-0.4,0.2-0.8,0.5-1.1c0.2-0.2,0.4-0.3,0.6- .3c0,0,0,0,0,0c0.4,0,0.7,0.3,0.7,0.8 C11.5,13.5,11.3,13.9,11.1,14.2z"/></g></g><path fill="rgba(123,108,72,1)" class="st0" d="M9,0.8c4.5,0,8.2,3.7,8.2,8.2s-3.7,8.2-8.2,8.2S0.8,13.5,0.8,9S4.5,0.8,9,0.8 M9,0C4,0,0,4,0,9s4,9,9,9 s9-4,9-9S14,0,9,0L9,0z"/></g></svg>');*/ /*background-image:url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve"><path fill="rgba(123,108,72,1)" class="st0" d="M14,1c7.2,0,13,5.8,13,13s-5.8,13-13,13S1,21.2,1,14S6.8,1,14,1 M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14 s14-6.3,14-14S21.7,0,14,0L14,0z"/><g> <g> <path fill="rgba(123,108,72,1)" class="st0" d="M17.1,2.4C13.8,2.2,11.4,4,11,7.2c-0.3,2.5-1.1,4.7-2.7,6.7c-1,1.2-1.5,2.6-1.8,4.1c-0.8,3.9,2.4,7.6,6.6,7.6 c0.9,0.1,1.9-0.2,2.9-0.7c2.7-1.5,4.3-4.7,3.8-7.8c-0.3-1.8-0.1-3.6,0.5-5.4c0.5-1.2,0.8-2.4,1.2-3.6C22.2,5.7,19.9,2.6,17.1,2.4z M15.6,18.6c0,0.5-0.2,1.1-0.7,1.6c-0.3,0.4-0.7,0.6-1,0.6c0,0,0,0,0,0c-1,0-1.1-0.9-1.1-1.1l0,0c0-0.6,0.3-1.2,0.7-1.6 c0.3-0.3,0.7-0.5,1-0.5c0,0,0,0,0,0C15,17.5,15.6,17.7,15.6,18.6z M12.5,14.1c0.3-0.3,0.6-0.4,0.9-0.4c0.5,0,1,0.2,1.1,1.2v0 c0,0.6-0.3,1.3-0.8,1.8c-0.3,0.3-0.6,0.4-0.9,0.4c0,0,0,0,0,0c-0.5,0-1.1-0.3-1.1-1.3C11.8,15.1,12.1,14.5,12.5,14.1z M12.5,18.6 c0,0.6-0.3,1.2-0.8,1.7c-0.3,0.3-0.7,0.5-1,0.5c0,0,0,0,0,0c-0.5,0-1-0.2-1.1-1.2c0-0.5,0.2-1.2,0.6-1.6c0.3-0.4,0.7-0.6,1-0.6 c0.3,0,0.6,0.1,0.8,0.3C12.3,17.9,12.5,18.2,12.5,18.6z M9.7,14c0.3-0.3,0.7-0.5,1-0.4c0.9,0.1,1,0.9,1,1.1l0,0 c0,0.6-0.3,1.3-0.8,1.8C10.7,16.8,10.3,17,10,17c0,0,0,0,0,0c-0.4,0-1.1-0.2-1.1-1.3C8.9,15.1,9.2,14.5,9.7,14z M8.2,20.9 C8.1,20.9,8.1,20.9,8.2,20.9c-1,0-1.1-0.8-1.2-1.3c0-0.1,0-0.2-0.1-0.3l0,0l0-0.3c0.1-0.7,0.3-1.6,1.3-1.6c0.3,0,0.6,0.1,0.8,0.3 C9.5,18,9.5,18.6,9.5,19C9.5,20.5,8.8,20.8,8.2,20.9z M10.3,24.3C10.3,24.3,10.3,24.3,10.3,24.3c-0.4,0-0.7-0.2-1-0.5 c-0.5-0.5-0.7-1.1-0.7-1.7l0,0c0.1-1,0.6-1.1,1.1-1.1c0.8,0,1.7,1.1,1.7,2.1C11.4,24.1,10.8,24.3,10.3,24.3z M12.8,24.9 C12.8,24.9,12.8,24.9,12.8,24.9c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.4-0.6-0.4-1v0c0-0.6,0.3-1.2,0.7-1.7c0.3-0.3,0.7-0.5,1-0.5 c0,0,0,0,0,0c0.5,0,1.1,0.2,1.1,1.2C14.5,23.7,13.6,24.9,12.8,24.9z M17.1,22.3c-0.3,0.3-0.7,0.5-1,0.5c0,0,0,0,0,0 c-0.4,0-1-0.2-1-1.1l0,0c0-0.6,0.3-1.3,0.7-1.7c0.3-0.3,0.7-0.5,1-0.5c0,0,0,0,0,0c0.7,0,1.1,0.4,1.1,1.3 C17.8,21.3,17.5,21.9,17.1,22.3z"/> </g></g></svg>');*/ background-image:url("images/nutrition/n.png"); } } @media (hover: none) { section.menu .menu_content ul li abbr { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } section.menu .menu_content ul li abbr:active::before { content:""; display: block; position: absolute; bottom:calc(100% + 12px); left:50%; width: 12px; height: 12px; border:1px solid rgba(123,108,32,0.5); transform:translateX(-50%) rotate(45deg); border: 1px solid #7B6C48; background: white; z-index: 999; border-top:none; border-left: none; -webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5); -moz-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5); box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.5); } section.menu .menu_content ul li abbr:active::after { position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%); z-index: 998; display: block; background: white; border:1px solid rgba(123,108,32,0.5); content: attr(title); text-align: center; pointer-events: none; line-height: 1; -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5); font-weight: 500; background-repeat:no-repeat; background-position: center 5px; background-position: center 7px; font-size:1.2rem; padding: 56px 6px 7px; width: 9em; background-size: 42px 42px; padding-bottom: 10px !important; /*background-image:url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><g><g><g><path fill="rgba(123,108,72,1)" class="st0" d="M11.1,1.8c-2-0.1-3.6,1-3.8,3C7.1,6.3,6.6,7.7,5.6,9c-0.6,0.7-1,1.6-1.2,2.5c-0.5,2.4,1.5,4.7,4.1,4.7 c0.6,0,1.2-0.1,1.8-0.5c1.7-1,2.7-2.9,2.4-4.9c-0.2-1.2-0.1-2.3,0.3-3.4c0.3-0.7,0.5-1.5,0.8-2.3C14.3,3.8,12.8,1.9,11.1,1.8z M10.1,11.9c0,0.3-0.1,0.7-0.4,1c-0.2,0.2-0.4,0.3-0.6,0.4c0,0,0,0,0,0c-0.6,0-0.7-0.5-0.7-0.7l0,0c0-0.4,0.2-0.8,0.4-1 c0.2-0.2,0.4-0.3,0.7-0.3c0,0,0,0,0,0C9.8,11.2,10.1,11.3,10.1,11.9z M8.2,9c0.2-0.2,0.4-0.3,0.6-0.3c0.3,0,0.7,0.2,0.7,0.8v0 c0,0.4-0.2,0.8-0.5,1.1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0c-0.3,0-0.7-0.2-0.7-0.8C7.7,9.7,7.9,9.3,8.2,9z M8.2,11.9 c0,0.3-0.2,0.8-0.5,1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0c-0.3,0-0.6-0.1-0.7-0.7c0-0.3,0.1-0.7,0.4-1c0.2-0.2,0.4-0.3,0.7-0.4 c0.2,0,0.4,0.1,0.5,0.2C8.1,11.4,8.2,11.7,8.2,11.9z M6.5,9c0.2-0.2,0.4-0.3,0.6- 0.3c0.6,0,0.6,0.5,0.6,0.7l0,0 c0,0.4-0.2,0.8-0.5,1.1c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0C6.4,10.8,6,10.7,6,10C6,9.7,6.2,9.3,6.5,9z M5.5,13.3 C5.5,13.3,5.5,13.3,5.5,13.3c-0.6,0-0.7-0.5-0.8-0.8c0-0.1,0-0.1,0-0.2l0,0l0-0.2c0.1-0.4,0.2-1,0.8-1c0.2,0,0.4,0,0.5,0.2 c0.2,0.2,0.3,0.6,0.3,0.9C6.3,13.1,5.9,13.3,5.5,13.3z M6.8,15.4C6.8,15.4,6.8,15.4,6.8,15.4c-0.2,0-0.4-0.1-0.6-0.3 c-0.3-0.3-0.5-0.7-0.5-1.1l0,0c0-0.6,0.4-0.7,0.7-0.7c0.5,0,1,0.7,1,1.3C7.5,15.3,7.1,15.4,6.8,15.4z M8.4,15.8 C8.4,15.8,8.4,15.8,8.4,15.8c-0.2,0-0.3-0.1-0.5-0.2c-0.2-0.1-0.2-0.4-0.2-0.6v0c0-0.4,0.2-0.8,0.4-1c0.2-0.2,0.4-0.3,0.6-0.3 c0,0,0,0,0,0c0.3,0,0.7,0.1,0.7,0.8C9.5,15.1,8.9,15.8,8.4,15.8z M11.1,14.2c-0.2,0.2-0.4,0.3-0.6,0.3c0,0,0,0,0,0 c-0.3,0-0.6-0.1-0.7-0.7l0,0c0-0.4,0.2-0.8,0.5-1.1c0.2-0.2,0.4-0.3,0.6- .3c0,0,0,0,0,0c0.4,0,0.7,0.3,0.7,0.8 C11.5,13.5,11.3,13.9,11.1,14.2z"/></g></g><path fill="rgba(123,108,72,1)" class="st0" d="M9,0.8c4.5,0,8.2,3.7,8.2,8.2s-3.7,8.2-8.2,8.2S0.8,13.5,0.8,9S4.5,0.8,9,0.8 M9,0C4,0,0,4,0,9s4,9,9,9 s9-4,9-9S14,0,9,0L9,0z"/></g></svg>');*/ /*background-image:url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve"><path fill="rgba(123,108,72,1)" class="st0" d="M14,1c7.2,0,13,5.8,13,13s-5.8,13-13,13S1,21.2,1,14S6.8,1,14,1 M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14 s14-6.3,14-14S21.7,0,14,0L14,0z"/><g> <g> <path fill="rgba(123,108,72,1)" class="st0" d="M17.1,2.4C13.8,2.2,11.4,4,11,7.2c-0.3,2.5-1.1,4.7-2.7,6.7c-1,1.2-1.5,2.6-1.8,4.1c-0.8,3.9,2.4,7.6,6.6,7.6 c0.9,0.1,1.9-0.2,2.9-0.7c2.7-1.5,4.3-4.7,3.8-7.8c-0.3-1.8-0.1-3.6,0.5-5.4c0.5-1.2,0.8-2.4,1.2-3.6C22.2,5.7,19.9,2.6,17.1,2.4z M15.6,18.6c0,0.5-0.2,1.1-0.7,1.6c-0.3,0.4-0.7,0.6-1,0.6c0,0,0,0,0,0c-1,0-1.1-0.9-1.1-1.1l0,0c0-0.6,0.3-1.2,0.7-1.6 c0.3-0.3,0.7-0.5,1-0.5c0,0,0,0,0,0C15,17.5,15.6,17.7,15.6,18.6z M12.5,14.1c0.3-0.3,0.6-0.4,0.9-0.4c0.5,0,1,0.2,1.1,1.2v0 c0,0.6-0.3,1.3-0.8,1.8c-0.3,0.3-0.6,0.4-0.9,0.4c0,0,0,0,0,0c-0.5,0-1.1-0.3-1.1-1.3C11.8,15.1,12.1,14.5,12.5,14.1z M12.5,18.6 c0,0.6-0.3,1.2-0.8,1.7c-0.3,0.3-0.7,0.5-1,0.5c0,0,0,0,0,0c-0.5,0-1-0.2-1.1-1.2c0-0.5,0.2-1.2,0.6-1.6c0.3-0.4,0.7-0.6,1-0.6 c0.3,0,0.6,0.1,0.8,0.3C12.3,17.9,12.5,18.2,12.5,18.6z M9.7,14c0.3-0.3,0.7-0.5,1-0.4c0.9,0.1,1,0.9,1,1.1l0,0 c0,0.6-0.3,1.3-0.8,1.8C10.7,16.8,10.3,17,10,17c0,0,0,0,0,0c-0.4,0-1.1-0.2-1.1-1.3C8.9,15.1,9.2,14.5,9.7,14z M8.2,20.9 C8.1,20.9,8.1,20.9,8.2,20.9c-1,0-1.1-0.8-1.2-1.3c0-0.1,0-0.2-0.1-0.3l0,0l0-0.3c0.1-0.7,0.3-1.6,1.3-1.6c0.3,0,0.6,0.1,0.8,0.3 C9.5,18,9.5,18.6,9.5,19C9.5,20.5,8.8,20.8,8.2,20.9z M10.3,24.3C10.3,24.3,10.3,24.3,10.3,24.3c-0.4,0-0.7-0.2-1-0.5 c-0.5-0.5-0.7-1.1-0.7-1.7l0,0c0.1-1,0.6-1.1,1.1-1.1c0.8,0,1.7,1.1,1.7,2.1C11.4,24.1,10.8,24.3,10.3,24.3z M12.8,24.9 C12.8,24.9,12.8,24.9,12.8,24.9c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.4-0.6-0.4-1v0c0-0.6,0.3-1.2,0.7-1.7c0.3-0.3,0.7-0.5,1-0.5 c0,0,0,0,0,0c0.5,0,1.1,0.2,1.1,1.2C14.5,23.7,13.6,24.9,12.8,24.9z M17.1,22.3c-0.3,0.3-0.7,0.5-1,0.5c0,0,0,0,0,0 c-0.4,0-1-0.2-1-1.1l0,0c0-0.6,0.3-1.3,0.7-1.7c0.3-0.3,0.7-0.5,1-0.5c0,0,0,0,0,0c0.7,0,1.1,0.4,1.1,1.3 C17.8,21.3,17.5,21.9,17.1,22.3z"/> </g></g></svg>');*/ background-image:url("images/nutrition/n.png"); } } @media all and (max-width: 399px) { /* section.menu .menu_content ul li abbr { font-size:1rem; } */ section.menu .menu_content ul li abbr:hover::after { font-size:1rem; padding: 40px 4px 6px; width: 9em; background-size: 28px 28px; background-position: center 6px; } }.logo_grid { max-width: 1400px; margin: 20px auto; border: 20px solid transparent; } .logo_grid ul { display: grid; grid-gap:20px; } .logo_grid li span { display: none;} .logo_grid h2 { text-align: center; font-size: 2.4rem; font-weight: 500; } .logo_grid li { grid-column: span 2; margin: 0;position: relative; padding: 0; } .logo_grid li::before { display: block; width: 100%; height: 0; padding-bottom: 100%; background: rgba(255,255,255,0); content: ""; } .logo_grid li img, .logo_grid li svg { display: block; position: absolute; width: 100%; height:100%; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%,-50%); } @media all and (max-width:599px) { .logo_grid { border-left:none; border-right:none; } .logo_grid ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .logo_grid h2 { font-size: 2rem; } } @media all and (min-width: 600px) and (max-width: 1199px) { .logo_grid ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } @media all and (min-width: 1200px) { .logo_grid ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; } .logo_grid ul.logos1 li:first-child { grid-column: 8 / span 2 !important; } .logo_grid ul.logos2 li:first-child { grid-column: 7 / span 2 !important; } .logo_grid ul.logos3 li:first-child { grid-column: 6 / span 2 !important; } .logo_grid ul.logos4 li:first-child { grid-column: 5 / span 2 !important; } .logo_grid ul.logos5 li:first-child { grid-column: 4 / span 2 !important; } .logo_grid ul.logos10 li:first-child { grid-column: 5 / span 2 !important; } .logo_grid ul.logos11 li:nth-child(5) { grid-column: 6 / span 2 !important; } .logo_grid ul.logos12 li:nth-child(9) { grid-column: 5 / span 2 !important; } }