/*! * Project specific styles - astrid-fournell.de * by Harald Cramer * Website running under GravCMS * -------------------------------------------------- * * *

* * * *

* *

* * * * -------------------------------------------------- */ /** general site-specific styles **/ /*Used in site header */ @font-face { font-family: Michroma; font-style: normal; font-weight: normal; /* font stored locally */ src: url(./fonts/Michroma.ttf); } /* used for other text */ @font-face { font-family: 'Helvetica Neue Regular'; font-style: normal; font-weight: normal; /* font stored locally */ src: url(./fonts/'HelveticaNeue Bold.ttf'); } /* used for signatures */ .pull-right { float: right !important; } html { font: 400 1em/1.3 'Helvetica Neue Regular'; } body { display: flex; height: 100%; flex-direction: column; } .wrapper { display: flex; flex-direction: column; height: 100%; min-height: 100vh; } h3 { font-size: 1.2rem; } header { color: #000; /* background-color: var(--bg-color); */ /* padding:0 2rem 2rem 0; position:relative; */ } .Header { /* background-color: var(--bg-color); */ text-align: left; } span#headbyline { margin: 0 0 0 30px; font-family: 'Michroma', Arial, sans-serif; font-size: 1.0rem; font-weight: bold; letter-spacing: 1px; color: rgb(151,27,30); /* red */ } /* Medium devices (tablets, 768px and up) */ @media (min-width: 786px) { h1#headtext { margin: 0; font-size: 2rem; letter-spacing: 3px; line-height: 1.265; text-shadow: 4px 4px 4px #888; } span#headbyline { margin: 0 0 0 68px; font-size: 1.125rem; letter-spacing: 3px; } } main { /* margin-top: 20px; */ } footer { clear: both; position: relative; height: 40px; /* margin-top: -40px; */ padding: 0.6rem 1.2rem; text-align: center; line-height: 1.265; color: var(--foot-color); background-color: rgb(180,180,180); /* border-top: 5px rgb(239,239,239) solid; */ /* dark white */ } hr { border-top: 1px solid var(--hr-top-color); border-bottom: 1px solid var(--hr-bot-color); } a { color: var(--a-color); text-decoration: none; border-bottom: 0; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: var(--ahov-color); text-decoration: underline; } abbr {cursor: help;} ###div.row div { margin: 0 1rem 0.5rem; /* background-color: var(--bg-raised-color); */ } /* Large devices (desktops, 769px and up) */ .Site-content { width: 85%; /* margin-top: 50px; */ background-color: var(--bg-color); } /* Medium devices (tablets, 768px and smaller) */ @media (max-width: 768px) { .Site-content { width: 100%; margin-top: 0; } } /* Media */ .Media {margin: 0 1rem;} @media (max-width: 576px) { .Media {display: block;} } .img-thumbnail { display: inline-block; height: auto; max-width: 100%; padding: 4px; line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } img { vertical-align: middle; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .shadowed { -webkit-box-shadow: 4px 8px 7px gray -moz-box-shadow: 4px 8px 7px gray; box-shadow: 4px 8px 7px gray; } .bordered { padding: 4px; background-color: #fff; border: 1px solid #ddd; } /* Extra small devices (portrait phones, less than 576px) */ .Image-round img { display: block; width: 150px; height: auto; -webkit-border-radius: 150px; border-radius: 150px; } .Image-round--tiny { width: 100px; -webkit-border-radius: 100px; border-radius: 100px; } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { .Image-round img { width: 240px; -webkit-border-radius: 240px; border-radius: 240px; } .Image-round--tiny { width: 120px; -webkit-border-radius: 120px; border-radius: 120px; } } .responsive { max-width: 100%; height: auto; } .Header-title { margin: 0.8rem auto 0.9rem auto; font-family: 'Michroma', Arial, sans-serif; font-weight: bold; font-size: 1.5rem; letter-spacing: 1px; line-height: 1.15; text-align: left; color: #BC1600; text-shadow: 3px 3px 2px rgba(112,106,112,1); } /* Header */ .PageHeader { padding: 1.5em 1.5em 0 1.5em; text-align: center; } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .PageHeader {padding: 1.5em 1.5em 0 1.5em;} } .PageHeader-titles { display: block; word-spacing: 0.08em; font-weight: 600; line-height: 1; color: rgb(151, 27, 30); text-align: center; padding: 0.1em 0; background-color: var(--bg-raised-color); } .PageHeader-title h1 {font-size: 2.5vw;} .PageHeader-title h2 {font-size: 2.0vw;} /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .Header--cozy .Header-title { margin: 0; font-size: 3.0vw; } .PageHeader-titles h1{font-size: 3.0vw;} .PageHeader-titles h2 {font-size: 2.5vw;} } /* Footer */ .Footer {padding: 0;} /* to be replaced? */ .Footer a { padding-bottom: 1px; border: 0; color: var(--a-color); } .Footer a:focus, .Footer a:active, .Footer a:hover { color: var(--ahov-color); text-decoration: underline; } /* Navigation menu */ nav li {margin-bottom: 0;} nav a:hover {color: white;} /* Large devices (desktops, 992px and up) */ @media screen and (max-width: 992px) { nav {padding: 0 10px;} nav li a {margin-bottom: 0 !important;} } /** Site-specific styles **/ /* Definition lists */ dl dt {font-weight: 600;} .dl-inline { overflow: hidden; padding: 0; margin: 0 } .dl-inline dt, .dl-inline dd { display: block; float: left; margin-top: 10px; } .dl-inline dt { width: 120px; clear: both; } dt img { height: 20px; width: 35px; border: thin solid; } /* Secondary text */ .text-muted {color: #6c757d !important;} /* dark gray */ /** Special elements **/ div.lead { max-width: 800px; margin: 30px auto 10px; } div.lead p { font-weight: 600; font-size: 1.2em; } div.lead li { font-weight: 500; font-size: 1.1em; } .slider-wrapper { max-width: 100%; margin: 0 auto; } .slider-overlay { /* position this overlay over the slider */ position: absolute; top: 65%; left: 56%; transform: none; } @media (min-width: 580px) { div#termin {display: none !important;} } @media (max-width: 580px) { .slider-overlay h2 {display: none !important;} } .slider-overlay a {color: yellow;} .accordion label { font-size: 1.2rem; font-weight: 600; } .tab__label::after, .acc-item-label::after { width: 1.2em; height: 1.2em; } .accordion .content h5, .accordion .content h6 { margin-top: 0.1rem; margin-bottom: 0.5rem; } .accordion .acc-content h4 { margin-top: 0.1rem; margin-bottom: 0.5rem; }