838 lines
17 KiB
CSS
838 lines
17 KiB
CSS
:root {
|
|
--lavender-orchid: #a961a4;
|
|
--lavender-orchid90: #a961a4e0;
|
|
--royal-plum: #5d2169;
|
|
--royal-plum90: #5d2169e0;
|
|
--gentle-ecru: #f6eedb;
|
|
--sandstorm-taupe: #f1d8b5;
|
|
--poppler-aftermath: #e1d4b8; /* Netzlinien */
|
|
--vanilla-black: #1b0e14;
|
|
--banana-grey: #5b4c55;
|
|
--quite-white: #f9f6f8;
|
|
|
|
|
|
--netzlinien: var(--poppler-aftermath);
|
|
--black: var(--vanilla-black);
|
|
--grey: var(--banana-grey);
|
|
--white: var(--quite-white);
|
|
|
|
--filter-icon-lavender-orchid: brightness(0) saturate(100%) invert(44%) sepia(48%) saturate(668%) hue-rotate(246deg) brightness(86%) contrast(86%);
|
|
--filter-icon-royal-plum: brightness(0) saturate(100%) invert(15%) sepia(51%) saturate(2556%) hue-rotate(269deg) brightness(92%) contrast(94%);
|
|
--filter-icon-gentle-ecru: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7076%) hue-rotate(238deg) brightness(118%) contrast(87%);
|
|
--filter-icon-sandstorm-taupe: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(637%) hue-rotate(345deg) brightness(102%) contrast(89%);
|
|
--filter-icon-vanilla-black: brightness(0) saturate(100%) invert(5%) sepia(10%) saturate(2938%) hue-rotate(280deg) brightness(93%) contrast(96%);
|
|
--filter-icon-banana-grey: brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(863%) hue-rotate(271deg) brightness(93%) contrast(85%);
|
|
--filter-icon-quite-white: brightness(0) saturate(100%) invert(79%) sepia(6%) saturate(2873%) hue-rotate(205deg) brightness(130%) contrast(95%);
|
|
|
|
|
|
--bg-vanilla: var(--gentle-ecru) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23E4CBA1' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%2398886B'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E") fixed;
|
|
|
|
--wrapper-max: 1426px;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Gidole;
|
|
src: url("/fonts/Gidole-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Angelina;
|
|
src: url("/fonts/angelina.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: JustAnotherHand;
|
|
src: url("/fonts/JustAnotherHand.ttf");
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: uberhead;
|
|
src: url("/fonts/comfortaa-latin-300-normal.woff") format('woff');
|
|
font-weight: normal;
|
|
}
|
|
@font-face {
|
|
font-family: uberhead;
|
|
src: url("/fonts/comfortaa-latin-700-normal.woff") format('woff');
|
|
font-weight: bold;
|
|
}
|
|
|
|
html {
|
|
font-size: 1.3em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
img, picture, video, canvas, svg {
|
|
/*display: block; */
|
|
max-width: 100%;
|
|
font-size: 3rem;
|
|
font-family: Angelina;
|
|
|
|
}
|
|
|
|
.content img.icon,
|
|
img.icon
|
|
{
|
|
|
|
margin: 0 0 0 0 !important;
|
|
float: left;
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input, button, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
p, h1, h2, h3, h4, h5, h6 {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
h2, h3 {
|
|
font-family: uberhead, sans-serif;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
#root, #__next {
|
|
isolation: isolate;
|
|
}
|
|
|
|
* {
|
|
font-family: Gidole, sans-serif;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--bg-vanilla);
|
|
font-family: Gidole, sans-serif;
|
|
|
|
}
|
|
|
|
|
|
/* Funktion von skiplink ist mir noch unklar*/
|
|
.skiplink {
|
|
border: 0;
|
|
clip: rect(1px,1px,1px,1px);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
word-wrap: normal !important;
|
|
}
|
|
|
|
.skiplink:focus {
|
|
background-color: #eee;
|
|
clip: auto !important;
|
|
clip-path: none;
|
|
color: #444;
|
|
display: block;
|
|
font-size: 1rem;
|
|
height: auto;
|
|
left: 5px;
|
|
line-height: normal;
|
|
padding: 15px 23px 14px;
|
|
text-decoration: none;
|
|
top: 5px;
|
|
width: auto;
|
|
z-index: 100000;
|
|
}
|
|
|
|
|
|
#outerwrapper {
|
|
max-width: 97%;
|
|
margin: auto;
|
|
border: 1px solid var(--royal-plum);
|
|
}
|
|
|
|
/* START header */
|
|
|
|
header {
|
|
width: 100%;
|
|
height: calc(4vh + 10rem);
|
|
margin: 0px auto;
|
|
padding: 1rem;
|
|
object-fit: cover;
|
|
background: url(/images/cover-image.jpg) center center no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
img#logo_sm {
|
|
/* display: block; */
|
|
height: calc(3vh + 5rem);
|
|
margin-left: calc(33% - ((3vh + 5rem) * 2.5 ));
|
|
|
|
}
|
|
|
|
|
|
div#logo {
|
|
z-index: 1;
|
|
width: 75%;
|
|
max-width: var(--wrapper-max);
|
|
margin: auto;
|
|
}
|
|
|
|
header#hero {
|
|
height: 100vh;
|
|
max-width: 100%;
|
|
margin: auto;
|
|
padding: 2.5vh 3.5vw;
|
|
z-index: 1;
|
|
background: url(/images/cover-image.jpg) top center no-repeat;
|
|
background-size: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
header#hero h1 {
|
|
font-weight: 700;
|
|
color: var(--royal-plum);
|
|
font-size: calc(3vh + 2rem);
|
|
margin-bottom: 0.7em;
|
|
}
|
|
|
|
header#hero p {
|
|
margin-left: 13vw;
|
|
word-wrap: normal;
|
|
display: block;
|
|
width: 75%;
|
|
font-size: calc(0.5vw + 1rem);
|
|
background-color: var(--royal-plum);
|
|
color: var(--gentle-ecru);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
header#hero p strong {
|
|
color: var(--gentle-ecru);
|
|
}
|
|
|
|
|
|
header#hero img {
|
|
height: calc(8vh + 4rem);
|
|
padding-top: 0 !important;
|
|
|
|
}
|
|
/* ENDE header */
|
|
|
|
/* START Hamburger Menu */
|
|
|
|
#menu__toggle {
|
|
opacity: 0;
|
|
|
|
}
|
|
#menu__toggle:checked + .menu__btn > span {
|
|
transform: rotate(45deg);
|
|
}
|
|
#menu__toggle:checked + .menu__btn > span::before {
|
|
top: 0;
|
|
transform: rotate(0deg);
|
|
}
|
|
#menu__toggle:checked + .menu__btn > span::after {
|
|
top: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
#menu__toggle:checked ~ .menu__box {
|
|
left: 0 !important;
|
|
}
|
|
.menu__btn {
|
|
position: fixed;
|
|
top: 40px;
|
|
left: 3.5%;
|
|
width: 60px;
|
|
height: 60px;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
background-color: var(--lavender-orchid90);
|
|
border-radius: 30px;
|
|
|
|
}
|
|
|
|
|
|
.menu__btn > span,
|
|
.menu__btn > span::before,
|
|
.menu__btn > span::after {
|
|
display: block;
|
|
position: absolute;
|
|
width: 35px;
|
|
height: 2px;
|
|
background-color: var(--royal-plum);
|
|
transition-duration: .3s;
|
|
|
|
}
|
|
.menu__btn > span {
|
|
top: 29px;
|
|
left: 12px
|
|
}
|
|
.menu__btn > span::before {
|
|
content: '';
|
|
top: -10px;
|
|
}
|
|
.menu__btn > span::after {
|
|
content: '';
|
|
top: 10px;
|
|
}
|
|
.menu__box {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 300px;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 110px 35px;
|
|
list-style: none;
|
|
background-color: var(--lavender-orchid);
|
|
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
|
|
transition-duration: .3s;
|
|
z-index:1;
|
|
}
|
|
.menu__item {
|
|
display: block;
|
|
padding: 12px 24px;
|
|
color: var(--gentle-ecru);
|
|
font-family: Gidole, sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition-duration: .3s;
|
|
}
|
|
.menu__item.active {
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.menu__item:hover {
|
|
background-color: var(--royal-plum);
|
|
color: var(--gentle-ecru);
|
|
}
|
|
|
|
/* END Hamburger Menu */
|
|
|
|
/* START Sidebar Navigation */
|
|
aside {
|
|
background-color: var(--lavender-orchid);
|
|
/* min-width: 360px; */
|
|
margin-bottom: 0.5rem;
|
|
margin-right: 0.3rem;
|
|
position: sticky;
|
|
top: 5.5rem;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
aside > nav {
|
|
padding: 0.5rem;
|
|
margin-top: -5rem;
|
|
background-color: var(--lavender-orchid);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
aside > nav ul {
|
|
padding: 0;
|
|
}
|
|
|
|
aside > nav ul li {
|
|
list-style-type: none;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
aside > nav ul li a:link,
|
|
aside > nav ul li a:visited {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: var(--white);
|
|
border: 7px solid var(--lavender-orchid);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
aside > nav ul li a:hover,
|
|
aside > nav ul li a:focus {
|
|
border: 5px solid var(--royal-plum);
|
|
border-radius: 10px;
|
|
transform: translate(0.15em, 0.15em);
|
|
transition: transform 0.3s ease-out;
|
|
background-color: #ffffff20;
|
|
}
|
|
|
|
aside > nav ul li.active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
aside > nav ul li.active.home {
|
|
display: none !important;
|
|
}
|
|
|
|
.subnavi {
|
|
margin-left: 2rem;
|
|
font-size: 0.8em;
|
|
|
|
|
|
}
|
|
.subnavi li {
|
|
|
|
}
|
|
li.imp {
|
|
|
|
|
|
}
|
|
a.imp:before {
|
|
content:"➡ ";
|
|
}
|
|
|
|
/* ENDE Sidebar Navigation */
|
|
|
|
/* START Content */
|
|
.content {
|
|
/*padding: 2rem;*/
|
|
background-color: var(--gentle-ecru);
|
|
color: var(--black);
|
|
/* border: 2px solid var(--royal-plum); */
|
|
border-radius: 4px;
|
|
box-shadow: 10px 0px 20px var(--gentle-ecru),-10px -10px 20px var(--gentle-ecru);
|
|
}
|
|
|
|
.content img {
|
|
margin: 0.5rem 0 1rem 0;
|
|
}
|
|
|
|
|
|
.content h1,
|
|
.content section h1 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.content h2,
|
|
.content section h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.content h3,
|
|
.content section h3 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.content section {
|
|
margin-bottom: 0rem;
|
|
padding: 1vw;
|
|
|
|
}
|
|
.content section a:link,
|
|
.content section a:visited {
|
|
color: var(--lavender-orchid);
|
|
}
|
|
|
|
|
|
.content section:nth-of-type(even) {
|
|
background-color: var(--lavender-orchid);
|
|
color: var(--white);
|
|
box-shadow: 0px 3px 3px var(--lavender-orchid), 0px -3px 3px var(--lavender-orchid);
|
|
|
|
}
|
|
.content section:nth-of-type(even) a:link,
|
|
.content section:nth-of-type(even) a:visited {
|
|
color: var(--sandstorm-taupe);
|
|
}
|
|
|
|
.content section:nth-of-type(even) .contactinfo img.icon {
|
|
filter: var(--filter-icon-sandstorm-taupe);
|
|
}
|
|
.content section:nth-of-type(odd) .contactinfo img.icon {
|
|
filter: var(--filter-icon-lavender-orchid);
|
|
}
|
|
|
|
.content h2 a:link,
|
|
.content h2 a:visited {
|
|
color: var(--black);
|
|
text-decoration: none;
|
|
}
|
|
.content p a:link,
|
|
.content p a:visited {
|
|
color: var(--lavender-orchid);
|
|
}
|
|
|
|
|
|
.content p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.attention {
|
|
background-color: #ffffff20;
|
|
/*color: var(--royal-plum); */
|
|
margin: 1rem 0.1vw;
|
|
|
|
padding: 1rem 1.5vw;
|
|
border: 0.25rem var(--royal-plum) dashed;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
|
|
.produktinfo {
|
|
padding: 0.8rem;
|
|
border: 1px solid var(--black);
|
|
}
|
|
.content section:nth-of-type(even) .produktinfo {
|
|
border-color: var(--white);
|
|
}
|
|
|
|
.produktinfo img {
|
|
float: left;
|
|
width: 62%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.content .preis {
|
|
border: 4px dotted var(--white);
|
|
border-radius: 50% / 50%;
|
|
padding: 0.7rem;
|
|
transform: rotate(12deg);
|
|
float: right;
|
|
font-family: JustAnotherHand;
|
|
font-size: 3rem;
|
|
letter-spacing: 2px;
|
|
|
|
}
|
|
.content section:nth-of-type(odd) .preis {
|
|
border-color: var(--black);
|
|
}
|
|
|
|
.content section .preis a:link,
|
|
.content section .preis a:visited
|
|
{
|
|
text-decoration: none;
|
|
font-size: 0.8em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.content section table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
.content section td {
|
|
border-top: 1px solid var(--banana-grey);
|
|
border-bottom: 1px solid var(--banana-grey);
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.content #topline {
|
|
margin-bottom: 1rem;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#datestamp {
|
|
display: inline-block;
|
|
width: calc(100% - 3rem);
|
|
text-align: right;
|
|
}
|
|
#topline > a:link,
|
|
#topline > a:visited
|
|
{
|
|
color: var(--lavender-orchid);
|
|
text-decoration: none;
|
|
}
|
|
#topline > a:hover,
|
|
#topline > a:focus
|
|
{
|
|
color: var(--lavender-orchid);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* START Newsgrid */
|
|
|
|
|
|
#newsgrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
#newsgrid > article.newsitem:first-child {
|
|
grid-column: 1 / 3;
|
|
background-color: var(--gentle-ecru);
|
|
color: var(--royal-plum);
|
|
margin-bottom: 1.5rem;
|
|
padding: 2rem;
|
|
border: 0.25rem var(--royal-plum) dashed;
|
|
}
|
|
|
|
#newsgrid > article.newsitem {
|
|
padding: 0.8rem;
|
|
border: 1px solid var(--royal-plum);
|
|
}
|
|
|
|
|
|
/* ENDE Newsgrid */
|
|
|
|
.main_with_sidebar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: start;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.main_with_sidebar > :first-child {
|
|
flex-basis: 29%;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
main {
|
|
flex-basis: 69%;
|
|
flex-grow: 9999;
|
|
}
|
|
|
|
.wrapper {
|
|
width: 75%;
|
|
max-width: var(--wrapper-max);
|
|
padding: 0.5rem;
|
|
margin: auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
#contact-mainpage {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
padding: 2rem;
|
|
color: var(--gentle-ecru);
|
|
background-color: var(--lavender-orchid);
|
|
}
|
|
|
|
#contact-mainpage p a:link, #contact-mainpage p a:visited {
|
|
color: var(--gentle-ecru);
|
|
}
|
|
|
|
address {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* START Funding*/
|
|
#funding {
|
|
padding-top: 0.5rem;
|
|
border-style: solid;
|
|
border-color: var(--lavender-orchid);
|
|
border-width: 2px 0px 0px 0px;
|
|
|
|
|
|
font-size: 0.7rem;
|
|
min-height: 3.5rem;
|
|
color: var(--royal-plum);
|
|
background-color: var(--gentle-ecru);
|
|
|
|
}
|
|
#funding img {
|
|
height: 2.7rem;
|
|
float: left;
|
|
margin-right: 0.5rem;
|
|
padding-left: 0.8rem;
|
|
}
|
|
/* ENDE Funding */
|
|
|
|
/* START für Shortcode kontaktinfo */
|
|
.contactinfo img.icon {
|
|
float: left;
|
|
margin: 0;
|
|
margin-right: 0.5rem;
|
|
margin-top: 0.1rem;
|
|
height: 1.25rem;
|
|
filter: invert(80%);
|
|
|
|
}
|
|
.contactinfo {
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
/* ENDE für Shortcode kontaktinfo */
|
|
|
|
|
|
|
|
|
|
/* START Footer */
|
|
footer {
|
|
min-height: calc(4vh + 1rem);
|
|
padding: 2vh;
|
|
text-align: center;
|
|
color: var(--gentle-ecru);
|
|
background-color: var(--royal-plum);
|
|
font-size: 1rem;
|
|
|
|
}
|
|
footer .footer-grid {
|
|
display: inline-grid;
|
|
grid-template-columns: auto auto auto auto;
|
|
}
|
|
footer .footer-item {
|
|
padding: 0 1.2rem;
|
|
border-style: solid;
|
|
border-color: var(--gentle-ecru);
|
|
border-width: 0px 1px;
|
|
}
|
|
|
|
|
|
footer .footer-item:first-child {
|
|
border-width: 0px 1px 0px 0px !important;
|
|
}
|
|
footer .footer-item:last-child {
|
|
border-width: 0px 0px 0px 1px !important;
|
|
}
|
|
|
|
|
|
|
|
footer a:link,
|
|
footer a:visited {
|
|
display: inline;
|
|
text-decoration: none;
|
|
color: var(--gentle-ecru);
|
|
}
|
|
|
|
footer a:hover,
|
|
footer a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
/* ENDE Footer */
|
|
|
|
/* media-queries for small screen > 767px viewport */
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
#outerwrapper {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header {
|
|
max-height: calc(3.5vh + 4rem) !important;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
img#logo_sm {
|
|
/* display: block; */
|
|
height: calc(3vh + 3.5rem) !important;
|
|
margin-left: calc(50% - ((3vh + 3.5rem))) !important;
|
|
}
|
|
|
|
header#hero img {
|
|
margin-top: 0vh !important;
|
|
height: calc(7vh + 4rem) !important;
|
|
}
|
|
header#hero h1 {
|
|
font-size: calc(0vw + 2rem) !important;
|
|
}
|
|
|
|
.content {
|
|
padding: 0.5rem !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
footer {
|
|
height: auto !important;
|
|
}
|
|
footer .footer-grid {
|
|
display: inline-grid;
|
|
grid-template-columns: auto;
|
|
}
|
|
footer .footer-item {
|
|
padding: 0.3rem;
|
|
border-width: 0px 0px;
|
|
}
|
|
footer .footer-item:first-child {
|
|
border-width: 0px 0px 0px 0px !important;
|
|
}
|
|
footer .footer-item:last-child {
|
|
border-width: 0px 0px 0px 0px !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* media-queries for large screen > 1199px viewport */
|
|
|
|
|
|
@media screen and (max-width: 1281px) {
|
|
#outerwrapper {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header {
|
|
max-height: calc(3.5vh + 6rem);
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
img#logo_sm {
|
|
height: calc(3vh + 5.5rem);
|
|
margin-left: calc(50% - ((3vh + 5.5rem)));
|
|
}
|
|
|
|
div#logo {
|
|
width: 100%;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
header#hero {
|
|
max-height: 97vh !important;
|
|
background-size: cover;
|
|
}
|
|
|
|
header#hero h1 {
|
|
font-size: calc(2.2vw + 2rem);
|
|
margin-top: 3vh;
|
|
}
|
|
|
|
header#hero p {
|
|
margin-left: 2vw;
|
|
margin-top: 5vh;
|
|
width: 95%;
|
|
|
|
}
|
|
|
|
header#hero img {
|
|
margin-left: auto;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
|
|
aside > #sidebar-menu {
|
|
display: none;
|
|
}
|
|
|
|
.hamburger-menu {
|
|
display: inline;
|
|
}
|
|
|
|
.main_with_sidebar {
|
|
display:block;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 1281px) {
|
|
.hamburger-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|