* {
box-sizing: border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
color: inherit;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1rem 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* merriweather-300 - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.eot'); /* IE9 Compat Modes */
src: local('Merriweather Light'), local('Merriweather-Light'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-300italic - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 300;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-300italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-regular - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
src: local('Merriweather Regular'), local('Merriweather-Regular'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-700 - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('Merriweather Bold'), local('Merriweather-Bold'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-700italic - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Bold Italic'), local('Merriweather-BoldItalic'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-700italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-italic - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Italic'), local('Merriweather-Italic'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-900 - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.eot'); /* IE9 Compat Modes */
src: local('Merriweather Black'), local('Merriweather-Black'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-900italic - vietnamese_latin_latin-ext */
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 900;
src: url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Black Italic'), local('Merriweather-BlackItalic'),
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-v19-vietnamese_latin_latin-ext-900italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-300 - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-300italic - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: italic;
font-weight: 300;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans Light Italic'), local('MerriweatherSans-LightItalic'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-300italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-italic - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: italic;
font-weight: 400;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans Italic'), local('MerriweatherSans-Italic'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-regular - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans'), local('MerriweatherSans-Regular'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-700italic - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: italic;
font-weight: 700;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans Bold Italic'), local('MerriweatherSans-BoldItalic'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-700 - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 700;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-700.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-800 - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: normal;
font-weight: 800;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans ExtraBold'), local('MerriweatherSans-ExtraBold'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}
/* merriweather-sans-800italic - latin_latin-ext */
@font-face {
font-family: 'Merriweather Sans';
font-style: italic;
font-weight: 800;
src: url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.eot'); /* IE9 Compat Modes */
src: local('Merriweather Sans ExtraBold Italic'), local('MerriweatherSans-ExtraBoldItalic'),
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.woff2') format('woff2'), /* Super Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.woff') format('woff'), /* Modern Browsers */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/merriweather-sans-v9-latin_latin-ext-800italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}html {
font-size: 1rem;
-webkit-text-size-adjust: 100%;
width: 100%;
}
body {
background-color: #1f1911;
font-family: 'Merriweather Sans', sans-serif;
overflow-x: hidden !important;
}
svg {
fill: currentColor;
}
svg.definitions {
display: none;
}
#offcanvas_control {
display: none !important;
}
#offcanvas_control:checked ~ #layout > #content {
transform: translateX(0rem);
}
#layout {
margin: 0 auto;
display: grid;
grid-template-areas:
"navigation content";
grid-template-rows: 1fr;
grid-template-columns: 18rem 100%;
justify-items: stretch;
align-items: stretch;
min-height: 100vh;
max-width: 80rem;
box-shadow: 0 0 1cm #000;
}
#layout > nav {
grid-area: navigation;
z-index: 10;
}
#content {
grid-area: content;
background-color: #9fb;
transform: translateX(-18rem);
box-shadow: 0 0 1cm 0.1cm #000;
border-left: 2px solid rgba(0, 0, 0, 0.15);
border-right: 2px solid rgba(0, 0, 0, 0.15);
background: url('https://viet-restaurant.de/assets/img/bright_paper.min.png') top left repeat #f6f5f1;
will-change: transform;
z-index: 20;
transition: transform 0.4s ease-in-out;
line-height: 1.5rem;
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
justify-items: stretch;
align-items: stretch;
}
header {
grid-area: header;
padding: 1rem 0;
text-align: center;
}
main {
grid-area: main;
margin: 0 0.25cm;
max-width: 100vw;
overflow: hidden;
}
#veil_nav {
grid-area: navigation;
z-index: 15;
}
#offcanvas_control:checked ~ #layout > #veil_nav {
opacity: 0;
pointer-events: none;
}
#veil_content {
grid-area: content;
z-index: 25;
opacity: 0;
background-color: black;
will-change: transform, opacity;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
pointer-events: none;
transform: translateX(-18rem);
}
#offcanvas_control:checked ~ #layout > #veil_content {
opacity: 0.5;
transform: translateX(0rem);
pointer-events: unset;
}
#sticky {
position: fixed;
top: 0.5cm;
right: 0.5cm;
z-index: 100;
}
#sticky .navcontrol {
background: url('https://viet-restaurant.de/assets/img/bright_wood.min.jpg') top left repeat #e7dcbf;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.5), inset 0 2px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 1px rgba(0, 0, 0, 0.4);
display: block;
height: 1.25cm;
width: 1.25cm;
border-radius: 1cm;
padding: 0.15cm;
}
#sticky .navcontrol svg {
position: relative;
opacity: 0.5;
}
#offcanvas_control ~ * .nav_only_open {
display: none;
}
#offcanvas_control:checked ~ * .nav_only_closed {
display: none;
}
#offcanvas_control:checked ~ * .nav_only_open {
display: inherit;
}
.divider {
display: flex;
justify-content: center;
align-items: center;
margin: 1.5cm 1cm;
color: rgba(0, 0, 0, 0.5);
}
.divider:before,
.divider:after {
content: "";
flex: 1 1 auto;
background-color: rgba(0, 0, 0, 0.25);
height: 1px;
margin: 0 0.5cm;
}
.divider svg {
flex: 0 0 2.5rem;
width: 100%;
}
header:before {
content: "";
float: right;
width: 1.8cm;
height: 1.8cm;
}
footer {
grid-area: footer;
margin: 2rem 0.5rem 0.5rem 0.5rem;
padding: 0.5rem;
font-size: 0.85rem;
}
.centered {
text-align: center;
}#layout > nav {
border-left: 2px solid rgba(255, 255, 255, 0.05);
padding-left: 1.5rem;
background: url('https://viet-restaurant.de/assets/img/binding.min.png') top left repeat-y, url('https://viet-restaurant.de/assets/img/dark_leather.min.png') top left repeat;
background-color: #151106;
color: #ede3c6;
font-family: 'Merriweather', serif;
}
#veil_nav {
opacity: 0.5;
background-color: black;
will-change: opacity;
transition: opacity 0.4s ease-in-out;
}
nav .logo {
text-align: center;
padding-top: 1.2cm;
}
nav .logo svg {
display: inline-block;
width: 10rem;
height: auto;
padding: 1rem;
background: url('https://viet-restaurant.de/assets/img/bright_wood.min.jpg') top left repeat #e7dcbf;
color: #000;
border-radius: 0.3rem;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
nav .quickinfo {
text-align: center;
font-family: 'Merriweather Sans', sans-serif;
margin: 0.2cm 0 1cm 0;
opacity: 0.66;
}
nav .quickinfo > dt,
nav .quickinfo > dd {
display: inline-block;
}
nav .quickinfo dt svg {
height: 1rem;
width: auto;
vertical-align: bottom;
}
nav ul {
list-style: none;
}
nav ul.root {
padding-top: 0.5rem;
}
nav ul.root > li {
margin-left: 0.5rem;
padding-bottom: 1.5rem;
}
nav ul.root > li > .item,
nav ul.sub > li > .item {
display: block;
padding: 0.75rem;
font-weight: 100;
}
nav ul.root > li > a.item,
nav ul.sub > li > a.item {
will-change: box-shadow, background-color;
transition: all 0.4s ease-in-out;
}
nav ul.root > li > a.item:hover,
nav ul.sub > li > a.item:hover {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0.25cm 0.1cm rgba(255, 255, 255, 0.1);
}
nav ul.root > li > .item {
border-bottom: 1px solid rgba(253, 232, 167, 0.2);
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
nav ul.sub > li > .item {
font-size: 1rem;
margin-left: 1.25rem;
}
nav ul.sub ul.sub {
margin-left: 1.25rem;
}
nav ul.root > li > .item.active,
nav ul.sub > li > .item.active {
background: url('https://viet-restaurant.de/assets/img/bright_wood.min.jpg') top left repeat #e7dcbf;
color: #000;
font-weight: 400;
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
border-bottom: none;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
header .logo {
margin: 0 auto 0.5cm auto;
width: 2.5cm;
}
header .hero {
height: 4cm;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
margin: 1cm 0.2cm 0 0.2cm;
border-radius: 0.2cm;
}
header .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(244,239,227,1) 0%, rgba(244,239,227,0) 66%, rgba(244,239,227,0) 100%);
pointer-events: none;
}
header .hero + h1 {
position: relative;
top: -2rem;
text-shadow: 0 0 0.2cm #f4efe3, 0 0 0.2cm #f4efe3, 0 0 0.2cm #f4efe3;
}#content h1,
#content h2,
#content h3 {
font-family: 'Merriweather', serif;
text-align: center;
line-height: 1.5em;
}
#content h1 {
padding: 0.3cm 0.1cm;
font-size: 1.8rem;
}
#content h2 {
margin-top: 1cm;
padding: 0.2cm 0.1cm;
font-size: 1.5rem;
}
#content h3 {
margin-top: 0.5cm;
padding: 0.1cm 0.1cm;
font-size: 1.2rem;
}
#content h2 + h3 {
margin-top: -0.75cm;
font-style: italic;
}
main p {
margin: 1rem 0;
}
main ul.itemlist {
list-style: none;
}
main ul.itemlist > li {
display: grid;
grid-template-areas:
"id label"
"description description"
"price price";
grid-template-columns: auto 1fr;
justify-items: start;
align-items: start;
border-top: 0.05cm solid rgba(0, 0, 0, 0.05);
padding: 0.5cm 0;
line-height: 1.5rem;
}
main ul.itemlist > li:first-of-type {
border-top: none;
}
main ul.itemlist > li .id {
grid-area: id;
font-weight: 700;
background-color: rgba(0, 0, 0, 0.1);
padding: 0.1cm 0.2cm;
border-radius: 0.1cm;
margin-right: 0.3cm;
min-width: 3rem;
text-align: center;
}
main ul.itemlist > li .price {
grid-area: price;
font-weight: 700;
padding: 0.1cm 0;
justify-self: end;
}
main ul.itemlist > li dl.price {
display: grid;
grid-template-columns: repeat(4, auto);
justify-items: end;
align-items: start;
margin-top: 0.1cm;
}
main ul.itemlist > li dl.price > dt:after {
content:":";
}
main ul.itemlist > li dl.price > dt {
margin: 0 0.2cm 0 0.1cm;
}
main ul.itemlist > li dl.price > dd {
margin-right: 0.8cm;
}
main ul.itemlist > li dl.price > dd:last-of-type {
margin-right: 0;
}
main ul.itemlist > li .label {
grid-area: label;
padding: 0.1cm 0;
}
main ul.itemlist > li .description {
grid-area: description;
font-style: italic;
padding: 0.1cm 0.2cm;
}
main ul.itemlist > li .label ul.badges {
list-style: none;
display: inline-block;
font-size: 0.8rem;
}
main ul.itemlist > li .label ul.badges li {
display: inline-block;
vertical-align: top;
}
main ul.itemlist + .divider {
margin-top: 2cm;
margin-bottom: 2cm;
}
main span.badge {
display: inline-block;
border-radius: 2rem;
padding: 0 0.5rem;
min-width: 2.2rem;
text-align: center;
font-style: italic;
background-color: rgba(0, 0, 0, 0.5);;
color: #f6f5f1;
}
main ul.footnotes {
list-style: none;
font-size: 0.8rem;
font-style: italic;
margin: 0 0.5cm 1cm 0.5cm;
padding-top: 0.3cm;
border-top: 0.05cm solid rgba(0, 0, 0, 0.05);
}
main ul.footnotes li {
margin: 0.1cm 0.5cm;
display: inline-block;
}
main h2 {
margin-bottom: 0.5cm;
}
#content .menue h2 {
text-align: left;
margin: 0;
padding: 0;
}
#content .menue h3 {
text-align: left;
}
main p.error {
margin-top: 3cm;
font-size: 1.15rem;
text-align: center;
}
main .menue {
display: grid;
grid-template-areas:
"label id"
"min price"
"courses courses";
grid-template-columns: 1fr auto;
justify-items: start;
align-items: start;
margin-top: 1cm;
}
main .menue > .label {
grid-area: label;
}
main .menue > .id {
grid-area: id;
justify-self: end;
font-weight: 700;
background-color: rgba(0, 0, 0, 0.1);
padding: 0.1cm 0.2cm;
border-radius: 0.1cm;
}
main .menue > .min {
grid-area: min;
font-style: italic;
margin-left: 0.2cm;
}
main .menue > .price {
grid-area: price;
justify-self: end;
font-weight: 700;
padding: 0.1cm;
}
main .menue > .courses {
grid-area: courses;
justify-self: stretch;
margin-top: 0.5cm;
}
main .menue > .courses ul {
list-style: none;
}
main .menue > .courses li {
border-top: 0.05cm solid rgba(0, 0, 0, 0.05);
padding: 0.3cm 0.2cm;
line-height: 1.5rem;
}
main .menue > .courses li:first-of-type {
border-top: none;
}
main .photos {
margin: 0.5cm 0.2cm;
padding: 0.2cm;
}
main .photos ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
main .photos ul > li {
flex: 1 1 auto;
width: 15rem;
margin: 0.2cm;
}
main .photos a {
display: block;
}
main .photos img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.5);
}
main .photos .caption {
text-align: center;
font-size: 0.75rem;
margin: 0.3cm 0.5cm 0.15cm 0.5cm;
line-height: 1rem;
}
main .textblock {
margin: 0 auto;
text-align: justify;
max-width: 40rem;
padding: 0 0.25cm;
}
main .textblock .intro {
text-align: left;
}
main .textblock .outro {
text-align: right;
}
main .googleMapContainer {
margin: 0.5cm;
padding: 0.5cm;
background: url('https://viet-restaurant.de/assets/img/bright_wood.min.jpg') top left repeat #e7dcbf;
border-radius: 0.3rem;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}
main .googleMapContainer iframe {
border: 0;
width: 100%;
height: 12cm;
}
main .googleMapContainer .see-also {
font-size: 0.75rem;
opacity: 0.5;
}
main .googleMapContainer a:hover,
main .googleMapContainer a:active {
text-decoration: underline;
}
main .routeInfo {
margin-bottom: 1cm;
}
main .routeInfo ol {
padding-left: 2rem;
margin-top: 1rem;
}
main .routeInfo ol li {
margin-bottom: 1rem;
}
main .testimonials {
margin-top: 1cm;
}
main .testimonials li {
padding: 1cm 1cm;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
main .testimonials li:first-child {
border-top: 0px;
}
main .testimonials li:nth-child(even) {
text-align: right;
}
main .testimonials li .comment {
font-style: italic;
line-height: 2em;
font-weight: 100;
}
main .testimonials li .author {
margin-top: 0.4cm;
font-weight: bold;
}
body.imprint main dl {
margin: 0 0.15cm 1.5cm 0.15cm;
}
body.imprint main dl dt,
body.imprint main dl dd {
text-align: center;
}
body.imprint main dl dt {
margin-top: 0.75cm;
font-weight: bold;
}
body.imprint main dl dd {
margin-top: 0.15cm;
}
body.imprint main ul {
margin: 0.5cm 0.15cm 1.5cm 0.15cm;
list-style: none;
}
body.imprint main ul li {
text-align: center;
}
body.privacy main {
font-size: 0.85rem;
}
body.privacy main ul {
margin-left: 1cm;
}
footer .divider {
margin-bottom: 1cm;
}
footer .nav {
list-style: none;
display: flex;
margin: 2cm 0.5rem 0 0.5rem;
justify-content: center;
font-size: 0.7rem;
}
footer .nav li {
flex: 0 0 auto;
margin-left: 1rem;
}
footer .nav li:first-of-type {
margin-left: 0;
}
footer .nav li a {
display: block;
padding: 0.05cm 0.2cm 0cm 0.2cm;
border-top: 0.025cm solid rgba(0, 0, 0, 0.2);
border-bottom: 0.025cm solid rgba(0, 0, 0, 0.2);
}
footer .info {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
footer .info > dt {
font-weight: 700;
margin-top: 0.5cm;
padding: 0 0.5cm;
align-items: top;
border-bottom: 0.05cm solid rgba(0, 0, 0, 0.1);
}
footer .info > dt:first-of-type {
margin-top: 0;
}
footer .info > dd {
margin-top: 0.1cm;
}
footer .times {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: stretch;
}
footer .times > dt {
padding: 0 0.5cm;
text-align: right;
border-top: 0.025cm solid rgba(0, 0, 0, 0.1);
}
footer .times > dd {
padding: 0 0.5cm;
font-style: italic;
border-top: 0.025cm solid rgba(0, 0, 0, 0.1);
}
footer .times > dt:first-of-type,
footer .times > dd:first-of-type {
border-top: none;
}
#content > header > .notices {
background: url('https://viet-restaurant.de/assets/img/bright_wood.min.jpg') top left repeat #e7dcbf;
color: #333;
box-shadow: 0 0.1cm 0.5cm 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 0.3cm;
}
#content > header > .notices > div {
padding: 0.2cm 0.1cm;
position: relative;
}
#content > header > .notices > div svg.decoration {
position: absolute;
top: -0.5cm;
left: -0.5cm;
width: 3cm;
height: auto;
pointer-events: none;
}
#content > header > .notices > div svg.decoration + p {
padding: 0 0.8cm;
}
#content > header > .notices h3 {
margin: 0;
border-bottom: 0.05cm solid rgba(0, 0, 0, 0.15);
}
#content > header > .notices p {
margin: 0.2cm 0;
}
div.inline-blocks {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
div.inline-blocks > div {
margin: 0.1cm;
padding: 0.1cm 0.3cm;
flex: 1 0 1em;
}
div.inline-blocks h4 {
white-space: nowrap;
border-bottom: 0.05cm solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 35rem) {/* ********** layout ********** */
#content,
#veil_content {
transform: translateX(-15rem);
width: calc(100% - 3rem);
}
main {
margin: 0 0.4cm;
}
/* ********** main ********** */
main ul.itemlist > li {
grid-template-areas:
"id label price"
"description description price";
grid-template-columns: auto 1fr auto;
}
main ul.itemlist > li .price {
margin-left: 0.5cm;
}
main ul.itemlist > li dl.price {
grid-template-columns: auto auto;
}
main ul.itemlist > li dl.price > dd {
margin-right: 0;
}
main ul.footnotes li {
margin: 0.1cm auto;
display: block;
}
main .photos {
margin: 1cm 0.5cm;
padding: 0.3cm;
}
main .photos ul > li {
margin: 0.3cm;
}
main .textblock {
padding: 0 0.5cm;
}
main .photos .caption {
margin: 0.4cm 0.75cm 0.2cm 0.75cm;
}
body.imprint main dl {
margin: 0 0.5cm 1.5cm 0.5cm;
}
body.imprint main dl.info {
margin-top: 0.5cm;
display: grid;
grid-template-areas:
"label_address data_address"
"label_phone data_phone"
"label_email data_email"
"label_ustr data_ustr";
grid-template-columns: auto auto;
grid-row-gap: 0.5cm;
grid-column-gap: 0.5cm;
justify-items: stretch;
align-items: start;
}
body.imprint main dl.info > dt.address {
grid-area: label_address;
}
body.imprint main dl.info > dd.address {
grid-area: data_address;
}
body.imprint main dl.info > dt.phone {
grid-area: label_phone;
}
body.imprint main dl.info > dd.phone {
grid-area: data_phone;
}
body.imprint main dl.info > dt.email {
grid-area: label_email;
}
body.imprint main dl.info > dd.email {
grid-area: data_email;
}
body.imprint main dl.info > dt.ustr {
grid-area: label_ustr;
}
body.imprint main dl.info > dd.ustr {
grid-area: data_ustr;
}
body.imprint main dl.info dt {
margin-top: 0;
text-align: right;
}
body.imprint main dl.info dd {
margin-top: 0;
text-align: left;
}
/* ********** components ********** */
#content > header > .notices {
border-radius: 0.3em;
margin: 0 0.3cm;
}
}
@media (min-width: 45rem) {/* ********** footer ********** */
footer .info {
grid-template-columns: auto auto;
grid-row-gap: 1cm;
grid-column-gap: 0.5cm;
}
footer .info > dt {
font-weight: 700;
margin-top: 0;
padding: 0;
border-bottom: none;
justify-self: end;
}
footer .info > dd {
margin-top: 0;
justify-self: start;
}
footer .times {
grid-template-columns: auto 1fr;
}
footer .times > dt {
text-align: left;
}
/* ********** components ********** */
#content > header > .notices {
margin: 0 0.75cm;
}
}
@media (min-width: 63rem) {/* ********** layout ********** */
#sticky,
#veil_nav,
#veil_content {
display: none;
}
#layout {
grid-template-columns: 18rem 1fr;
height: auto;
min-height: 100vh;
}
#content {
transform: translateX(0);
width: auto;
}
main {
grid-area: main;
margin: 0 0.6cm;
}
/* ********** footer ********** */
footer .info {
width: 32rem;
grid-template-areas:
"phone_h mail_h"
"phone_c mail_c"
". ."
"openhours_h address_h"
"openhours_c address_c";
grid-template-rows: auto auto 1cm auto auto;
grid-template-columns: 1fr 1fr;
justify-items: center;
grid-row-gap: 0;
grid-column-gap: 1cm;
}
footer .info > dt,
footer .info > dd {
text-align: center;
justify-self: unset;
}
footer .info > dt {
padding: 0 0.5cm;
border-bottom: 0.05cm solid rgba(0, 0, 0, 0.1);
}
footer .info > dd {
margin-top: 0.1cm;
}
footer .info > dt.phone {
grid-area: phone_h;
}
footer .info > dd.phone {
grid-area: phone_c;
}
footer .info > dt.mail {
grid-area: mail_h;
}
footer .info > dd.mail {
grid-area: mail_c;
}
footer .info > dt.address {
grid-area: address_h;
}
footer .info > dd.address {
grid-area: address_c;
}
footer .info > dt.openhours {
grid-area: openhours_h;
}
footer .info > dd.openhours {
grid-area: openhours_c;
}
/* ********** components ********** */
#content > header > .notices {
margin: 0 1cm;
}
}
@media (min-width: 80rem) {/* ********** layout ********** */
body {
background: url('https://viet-restaurant.de/assets/img/dark_wood.min.png') top center repeat #1f1911;
}}