/* CSS Document ---------------------------------------------------

Created by:			.eyecatcher ag
For:				x
Date of creation:	10-07-2015 (lcr)
Last update:		09-03-2018 (mmr)

------------------------------------------------------------------*/

@import url(font-awesome.min.css);

@font-face{
    font-family:"Avenir LT";
    src:url("../fonts/1475524/f7924a2e-e8f5-4ac9-b0aa-167399cc2659.eot?#iefix");
    src:url("../fonts/1475524/f7924a2e-e8f5-4ac9-b0aa-167399cc2659.eot?#iefix") format("eot"),
    url("../fonts/1475524/69473750-4214-45b1-856b-06e8f8de2086.woff2") format("woff2"),
    url("../fonts/1475524/57cea7be-0fae-457e-83f0-b7375aabb3f9.woff") format("woff"),
    url("../fonts/1475524/52268057-f4bb-4b06-9ff8-a78b7acd62b1.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"Avenir LT";
    src:url("../fonts/1475530/e01c57cf-d060-46af-b133-26de5ee92e76.eot?#iefix");
    src:url("../fonts/1475530/e01c57cf-d060-46af-b133-26de5ee92e76.eot?#iefix") format("eot"),
    url("../fonts/1475530/bc7b5f69-276a-4189-b78f-13d5298def95.woff2") format("woff2"),
    url("../fonts/1475530/5a3d5b16-119c-4b2e-91e5-dfccedad7dbd.woff") format("woff"),
    url("../fonts/1475530/e280a85d-3822-44d1-8d41-59cc51ba173c.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face{
    font-family:"Avenir LT";
    src:url("../fonts/1475536/4b08ce72-f57c-4113-84ba-56062e307075.eot?#iefix");
    src:url("../fonts/1475536/4b08ce72-f57c-4113-84ba-56062e307075.eot?#iefix") format("eot"),
    url("../fonts/1475536/7839a002-2019-46e4-8db8-c8335356ceee.woff2") format("woff2"),
    url("../fonts/1475536/28433854-a1b7-4a30-b6a4-10c3a5c75494.woff") format("woff"),
    url("../fonts/1475536/edcbf576-7e55-423b-9ec9-cf526614a117.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face{
    font-family:"Avenir LT";
    src:url("../fonts/7ed39c78-4da5-42df-831b-798b2272d1ac.eot?#iefix");
    src:url("../fonts/7ed39c78-4da5-42df-831b-798b2272d1ac.eot?#iefix") format("eot"),
    url("../fonts/1475548/e9b44b79-923f-49b3-837c-290bc70628cc.woff2") format("woff2"),
    url("../fonts/1475548/fbd14ec6-aa86-4ccd-af83-931d5eb79910.woff") format("woff"),
    url("../fonts/1475548/0d230b6d-eb52-48b7-9c4b-c3f876465fe6.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family:"Avenir LT";
    src:url("../fonts/1475554/0da1fa4e-6413-4243-ba9e-526e8daa619e.eot?#iefix");
    src:url("../fonts/1475554/0da1fa4e-6413-4243-ba9e-526e8daa619e.eot?#iefix") format("eot"),
    url("../fonts/1475554/a033fa70-6bd0-4227-9552-cb620701ac6c.woff2") format("woff2"),
    url("../fonts/1475554/9021784c-9d15-4e50-9508-71eb110dc7d0.woff") format("woff"),
    url("../fonts/1475554/e521d9c7-7c7f-425f-bc59-f575ef464ec6.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

/*GRUNDRASTER
----------------------------------------------------------------- */

body, html, * {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body, html {width: 100%; font-family: "Avenir LT", Arial, Helvetica, sans-serif; color: #666; font-size: 20px; line-height: 1.4; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

div, img {display: block;}
img {border: 0; user-select: none; -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; -khtml-user-select: none;}

:focus {outline: none;}
::-moz-focus-inner {border: 0;}

.right {float: right;}
.left {float: left;}
.clearfix {clear: both;}
.hide {display: none;}

main, footer {width: 100%; max-width: 2000px; margin: 0 auto; border-left: 1px solid #eee; border-right: 1px solid #eee;}

.content {width: 100%; max-width: 960px; margin: 0 auto; padding: 0 2em;}

section {padding: 2em 0;}
section:first-of-type {padding-top: 4em;}
section:last-of-type {padding-bottom: 4em;}

footer {padding: 2.5em 0; background: #eee; color: #000;}


/*TYPO
----------------------------------------------------------------- */

h1 {font-size: 1.75em; font-weight: 500; color: #000; margin: 0.5em 0; position: relative;}
h1:before {content: ""; width: 1.5em; height: 5px; background: #d22340; position: absolute; top: -0.5em; left: 0;}
h2 {font-size: 1.75em; font-weight: 500; margin: 0 0 0.5em;}
h3 {font-size: 1.2em; font-weight: 500; color: #000; line-height: 1.2;}
h4 {font-size: 1.2em; font-weight: normal;}
h5 {font-size: 1em; font-weight: 900;}
h6 {font-size: 1em; font-weight: normal;}

p {font-size: 0.9em;}

a {color: #3f909b; outline: none; cursor: pointer; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s;}
a:hover {color: #d22340;}
a img {border: none;}
a.btn {margin: 1.5em 0; padding: 0.5em 1em; background: #d22340; color: #fff; text-decoration: none; display: inline-block;}
a.btn:hover {background: #a61c33;}
a.pdf:before {content: "\f1c1"; font-family: "FontAwesome"; margin-right: 0.25em; display:inline-block;}
a.video:before {content: "\f144"; font-family: "FontAwesome"; margin-right: 0.25em; display:inline-block;}

main ul {list-style: none; margin-left: 1.5em; position: relative;}
main ul li {margin-bottom: 0.75em;}
main ul li:before {content: "•"; color: #d22340; position: absolute; left: -1.5em;}
main ul li > ul {margin-left: 2.5em;}
main ul li > ul li {margin-bottom: 0;}
main ul li > ul li:before {content: "–"; color: #666;}


/*SPALTEN SYSTEM
----------------------------------------------------------------- */

.row {clear: both; margin-left: -15px; margin-right: -15px; overflow: auto; display: block;}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col2-3,
.col2-5,
.col3-4,
.col3-5,
.col4-5,
.col5-6 {min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; position: relative;}

.col1 {width: 100%;}
.col2 {width: 50%;}
.col3 {width: 33.3333%;}
.col4 {width: 25%;}
.col5 {width: 20%;}
.col6 {width: 16.6667%}
.col2-3 {width: 66.6666%;}
.col2-5 {width: 40%;}
.col3-4 {width: 75%;}
.col3-5 {width: 60%;}
.col4-5 {width: 80%;}
.col5-6 {width: 83.3335%;}


/*HEADER
------------------------------------------------------------------*/

header {width: 100%; padding: 1em 0; position: fixed; top: 0; left: 0; right: 0; background: #fff; border: 1px solid #eee; z-index: 100;}
header .content {max-width: 1280px; padding: 0; position: relative;}
header .logo {width: 350px; margin-top: 1.5em; float: left;}
header .logo img {width: 100%;}
header ul li {list-style: none;}

.lang {width: 100%;}
.lang:after {content: ""; clear: both; display: block;}
.lang ul {float: right;}
.lang a {font-size: 0.9em; font-weight: 500; text-decoration: underline;}
.lang a.active {display: none;}

nav {float: right;}
nav .main-nav {margin-top: 1.75em; display: block;}
nav .main-nav a {font-weight: bold; text-decoration: none;}
nav .main-nav a.active {color: #d22340;}
nav .main-nav ul li {list-style: none; float: left; margin-left: 1em;}
nav .main-nav .dropdown {position: relative; cursor: pointer;}
nav .main-nav .dropdown:hover > a {color: #d22340;}
nav .main-nav .dropdown-content {width: 100%; padding: 2.5em 0 0; position: absolute; top: 0; left: 0; z-index: 1; display: none;}
nav .main-nav .dropdown-content > a {padding: 0.75em 0.75em; font-size: 0.9em; font-weight: 500; background: #fff; border-bottom: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; display: block;}
nav .main-nav .dropdown:hover .dropdown-content {display: block;}

header .hamburger {display: none; width: 28px; height: 20px; position: absolute; right: 0; top: 1.25em; cursor: pointer;}
header .hamburger > span {width: 100%; height: 3px; background: #3f909b; position: absolute; left: 0;}
header .hamburger > span:nth-of-type(1) {top: 0;}
header .hamburger > span:nth-of-type(2) {top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
header .hamburger > span:nth-of-type(3) {bottom: 0;}


/*CONTENT
------------------------------------------------------------------*/

/*BANNER*/
/* wo Flyer */
.banner {width: 100%; height: 35em; background: url("../images/banner.jpg") no-repeat fixed center; background-size: cover;}
/* w Flyer */
/*.banner {width: 100%; background: url("../images/banner.jpg") no-repeat fixed center; background-size: cover;}*/

.banner .content {height: 100%; position: relative;}

/* wo Flyer */
.banner .title {min-width: 75%; max-width: 100%; padding: 0.75em; position: absolute; bottom: 1em; left: 0; background: #fff; font-size: 2.8em; line-height: 1.2; color: #3f909b;}
/* w Flyer */
/*.banner .title {min-width: 75%; max-width: 100%; padding: 0.75em; position: relative; left: 0; background: #fff; font-size: 2.8em; line-height: 1.2; color: #3f909b;}*/

.flyer {min-width: 75%; max-width: 960px; margin: 0px 0px 0px 0px; padding: 30px; position: relative; left: 0; background: #fff;}
.flyer img { max-width: 100%;}

/*TEASERS*/
.teaser {width: calc(50% + 1em); padding: 2em; background: #3f909b; color: #fff;}
.teaser.left {float: left; margin-left: -2em;}
.teaser.right {float: right; margin-right: -2em;}
.teaser.top {margin-bottom: 3em;}
.teaser.bottom {margin-top: 3em;}
.teaser a.btn {margin: 1em 0 0; background: #fff; color: #066179;}
.teaser a.btn:hover {background: #e6e6e6;}

/*ACCORDEONS*/
.acc {padding: 1.25em 1.5em; border-top: 1px solid #ccc;}
.acc:last-of-type {border-bottom: 1px solid #ccc;}
.acc h3 {color: #3f909b; position: relative; cursor: pointer;}
.acc h3:before {content: "\f196"; font-family: "FontAwesome"; position: absolute; left: -1.25em;}
.acc h3.open:before {content: "\f147";}
.acc-content {padding: 1em 0 0; display: none;}
.acc-content p {font-size: 1em;}

/*QUOTES*/
.quote {margin: 0 -2em; background: #3f909b; color: #fff;}
.quote:after {content: ""; clear: both; display: block;}
.quote > * {width: 50%; float: left;}
.quote h3 {font-size: 1.5em; color: #fff;}
.quote p {font-size: 1em;}
.quote .quote-content {padding: 2em;}
.quote .quote-img {overflow: hidden;}
.quote .quote-img img {width: 100%; height: auto;}

/*PROFILES*/
.profile {padding: 0.75em 0; border-top: 1px solid #ccc; color: #000;}
.profile:last-of-type {border-bottom: 1px solid #ccc;}
.profile:after {content: ""; clear: both; display: block;}
.profile.cont {border-top: 0; padding-top: 0;}
.profile img {margin-right: 1em; float: left;}
.profile .profile-content {float: left;}
.profile h4 {font-weight: bold; margin: 0.25em 0 0.75em;}
.profile a {font-size: 0.9em; font-weight: bold; display: block;}

/*GOOGLE MAPS*/
.googlemaps {padding: 2em 0 0;}
.googlemaps iframe {display: block;}

/*ADMIN*/
.admin header {position: static;}
.admin header .content:after {content: ""; clear: both; display: block;}
.admin header .logo {margin: 0;}

.admin [class^=ui], .admin .ui {font-size: 0.9em!important;}
.admin .row {margin: 0; clear: none; overflow: visible;}

/*POPUP*/
.popup {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.popup .close {position: sticky; top: 0;}
.popup .close:after {content: ""; clear: both; display: block;}
.popup .close i {margin: -1em -1em 0 0; float: right;}
.popup .content {width: 100%; max-width: 960px; height: 66.6667%; padding: 2em; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);overflow-y: scroll;}
.popup table * {text-align: left;}

/*PDF*/
.pdf-doc {padding: 0.625em 0; border-bottom: 1px solid #ccc; position: relative;}
.pdf-doc:first-of-type {border-top: 1px solid #ccc;}
.pdf-doc:before {content: "\f1c1"; font-family: "FontAwesome"; margin-right: 0.5em; display:inline-block; color: #3f909b;}
.pdf-doc .close {cursor: pointer;}
.pdf-doc .close:after {content: "\f00d"; font-family: "FontAwesome"; font-size: 0.75em; color: #666; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}


/*FORMULAR
------------------------------------------------------------------*/

/*INITIALIZER*/
form * {font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; padding: 0; margin: 0; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}

form {margin: 1em 0 2em 0;}
form p {margin: 1em 0;}
form a {color: #3f909b; text-decoration: underline;}

.field-wrap {padding: 0.5em 0 0 0; clear: both; overflow: auto; display: block;}
.field-wrap > label {width: 25%; padding: 0.7em 0; float: left; display: block; font-weight: bold;}
.field-wrap > label small {font-weight: normal;}
.ie7 .field-wrap {width: 100%; overflow: visible; clear: both;}

.input-wrap {width: 70%; display: block; float: right;}

:invalid {color: inherit;}

.text-small { font-size:0.9em }

/*INPUTS*/
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
textarea {width: 100%; padding: 0.5em; border: 0; border: 1px solid #999; background-color: transparent;}

textarea {height: auto; overflow: auto; resize: none;}

input[type="file"] {display: none;}
input[type="file"] + label {font-size: 0.9em; color: #fff; background: #999; margin: 0.5em 0 0 0; padding: 0.5em 1em; display: inline-block; cursor: pointer; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s;}
input[type="file"] + label:hover {background: #808080;}

input:focus, textarea:focus {border-color: #3f909b;}

form .small {width: 20% !important;}
form .medium {width: 79% !important;}


/*SELECT*/
select {width: 100%; height: 2.5em; margin: 0; padding: 0 0.5em; position: absolute; left: 0; border: 0; background: transparent; cursor: pointer;}
select::-ms-expand {display: none;}

option {padding: 0.5em;}

.select-wrap {height: 2.65em; padding: 0; position: relative; border: 1px solid #eee; border-bottom: 2px solid #ddd; background: transparent; overflow: hidden; display: block;}
.select-wrap .handle {font-family: "FontAwesome"; font-size: 1.2em; font-style: normal; font-weight: normal; line-height: 1; text-rendering: auto; color: inherit; height: 100%; padding: 0.5em 0 0 0.5em; position: absolute; top: 0; right: 10px; display: block;}
.select-wrap .handle::before {content: "\f107";}

.ie8 select, .ie9 select {height: 2.5em; padding: 0.5em;}
.ie8 .select-wrap .handle::before, .ie9 .select-wrap .handle::before {content: "";}
.ie7 select {width: 100%; margin-top: 0.5em; position: relative;}

.ie7 .select-wrap {border: 0; background: transparent;}


/*CHECKBOXES*/
input[type="checkbox"] {position: absolute; visibility: hidden;}
input[type="checkbox"] + label::before {content:''; font-family: "FontAwesome"; display: block; float: left; position: relative; clear: both; top: 0; left: 0; width: 1.5em; height: 1.5em; margin: 0 1em 0 0; border: 1px solid #999; font-size: 0.8em; line-height: 1.5em;}
input[type="checkbox"] + label {padding: 0.5em 0 0 0; clear: both; display: block; cursor: pointer;}
input[type="checkbox"]:checked + label::before {content: "\f00c"; color: inherit; text-align: center;}

input[type="checkbox"].inline + label {float: left; margin-right: 1em; clear: none;}

.ie8 input[type="checkbox"] + label,
.ie7 input[type="checkbox"] + label {background: none; margin: -0.4em 0 0 1.5em; padding: 0;}
.ie8 input[type="checkbox"],
.ie7 input[type="checkbox"] {position: relative; top: 0.8em; left: 0; margin: 0; padding: 0;}

.ie8 input[type="checkbox"].inline + label,
.ie7 input[type="checkbox"].inline + label {margin: 0.5em 1.5em 0 0.5em; float: left;}
.ie8 input[type="checkbox"].inline,
.ie7 input[type="checkbox"].inline {float: left;}


/*RADIO BUTTONS*/
input[type="radio"] {position: absolute; visibility: hidden;}
input[type="radio"] + label::before {content:''; font-family: "FontAwesome"; display: block; float: left; position: relative; clear: both; top: 0; left: 0; width: 1.25em; height: 1.25em; margin: 0 0.75em 0 0; border: 1px solid #999; cursor: pointer; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;}
input[type="radio"] + label {padding: 0.5em 1.5em 0 0; float: left; display: block; cursor: pointer;}
input[type="radio"]:checked + label::before {content: ""; box-shadow: inset 0 0 0 7px #fff; background: #666;}

input[type="radio"].inline + label {float: left; margin-right: 1em;  clear: none;}

.ie8 input[type="radio"] + label,
.ie7 input[type="radio"] + label {background: none; margin: -0.4em 0 0 1.5em; padding: 0;}
.ie8 input[type="radio"],
.ie7 input[type="radio"] {position: relative; left: 0; top: 0.8em; padding: 0; margin: 0;}

.ie8 input[type="radio"].inline + label,
.ie7 input[type="radio"].inline + label {margin: 0.75em 1.5em 0 0.5em; float: left;}
.ie8 input[type="radio"].inline,
.ie7 input[type="radio"].inline {float: left;}

/*SUBMIT*/
input[type="submit"],
input[type="button"] {margin: 1.5em 0; padding: 0.5em 1em; background: #d22340; border: 0; border-radius: 0; color: #fff; display: inline-block; float:right; cursor: pointer; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s;}
input[type="submit"]:hover,
input[type="button"]:hover {background: #a61c33;}

/*ERRORS*/
.alert {display: none; margin: 1em 0; padding: 1em;}
.alert.error {background-color: #fde8e9; border-color: #fde8e9; color: #ed1c27;}
.alert.success {background-color: #e0f1df; border-color: #e0f1df; color: #459641;}
.alert.warning {background-color: #fdecdb; border-color: #fdecdb; color: #f47e0b;}
.alert.info {background-color: #6a7779; border-color: #6a7779; color: #fff;}

input.error,
label.error,
.error textarea,
textarea.error,
.error input,
.error .select-wrap,
.error .select-wrap .handle,
.error label,
.error .input-wrap label,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {border-color: #ed1c27;}
input:required:invalid {box-shadow: none;}
input[type="file"].error + label {background-color: #ed1c27;}


/*===============================================================
BREAKPOINT 1600px
===============================================================*/

@media screen and (max-width: 1600px) {

    /*BANNER*/
    .banner {height: 30em;}

}


/*===============================================================
BREAKPOINT 1400px
===============================================================*/

@media screen and (max-width: 1400px) {

    body, html {font-size: 18px;}

    /*HEADER*/
    header {padding: 1em 2em;}

}


/*===============================================================
BREAKPOINT 1200px
===============================================================*/

@media screen and (max-width: 1200px) {

    /*HEADER*/
    header {padding: 1em 1.5em;}
    header .logo {margin-top: 0;}
    header .hamburger {display: block;}

    /*NAV*/
    nav {max-height: 80vh; padding: 1em 0 0; float: none; display: none; clear: both; overflow: auto;}
    nav .main-nav {margin: 0 0 0.5em;}
    nav .main-nav ul li {float: none; margin-left: 0; padding: 0.5em 0; border-bottom: 1px solid #eee;}
    nav .main-nav .dropdown-content {padding: 0.25em 0; position: static; display: block;}
    nav .main-nav .dropdown-content > a {padding: 0.25em 0; background: transparent; border: 0; display: block;}

}


/*===============================================================
BREAKPOINT 800px
===============================================================*/

@media screen and (max-width: 800px) {

    /*TYPO*/
    h1, h2, h3, h4, .title {hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}

    /*BANNER*/
    .banner {background-attachment: local;}
    .banner .title {width: 100%; bottom: 0; background: rgba(255, 255, 255, 0.75); font-size: 2.4em;}

    /*TEASERS*/
    .teaser {padding: 1.5em;}

}


/*===============================================================
BREAKPOINT 600px
===============================================================*/

@media screen and (max-width: 600px) {

    body, html {font-size: 16px;}

    /*HEADER*/
    header .logo {width: 250px; margin: 0;}
    header .hamburger {width: 25px; height: 16px; top: 0.75em;}
    header .hamburger > span {height: 2px;}

    /*NAV*/
    nav {padding: 1em 0 0; float: none; display: none;}
    nav .main-nav {margin: 0 0 0.5em;}
    nav .main-nav ul li {float: none; margin-left: 0; padding: 0.5em 0; border-bottom: 1px solid #eee;}
    nav .main-nav .dropdown-content {padding: 0.25em 0; position: static; display: block;}
    nav .main-nav .dropdown-content > a {padding: 0.25em 0; background: transparent; border: 0; display: block;}

    /*BANNER*/
    .banner {height: 25em;}
    .banner .title {font-size: 2em;}

    /*TEASERS*/
    .teaser {width: 100%; padding: 2em;}
    .teaser.left {float: none; margin-left: 0;}
    .teaser.right {float: none; margin-right: 0;}
    .teaser.top {margin-bottom: 2em;}
    .teaser.bottom {margin-top: 2em;}

    /*QUOTES*/
    .quote {width: 100%; margin: 0;}
    .quote > * {width: 100%; float: none;}

    /*PROFILES*/
    .profile img {margin: 0; float: none;}
    .profile .profile-content {padding: 1em 0 0; float: none;}
    .profile h4 {margin: 0.25em 0 0;}
    .profile a {padding: 0.5em 0 0;}

    /*GOOGLE MAPS*/
    .googlemaps {padding: 0;}

    /*FORM*/
    .field-wrap > label {width: 100%; float: none;}
    .input-wrap {width: 100%;}
    input[type="file"] + label {margin: 0 0 1em 0;}
    input[type="submit"] {width: 100%;}

}


/*===============================================================
BREAKPOINT 400px
===============================================================*/

@media screen and (max-width: 400px) {

    .content {padding: 0 1.5em;}

    /*TYPO*/
    h1 {font-size: 1.5em;}

    /*HEADER*/
    header .logo {width: 200px;}
    header .hamburger {top: 0.625em;}

    /*BANNER*/
    .banner {height: 20em;}
    .banner .title {font-size: 1.75em;}

    /*TEASERS*/
    .teaser {width: 100%; padding: 1.5em;}

}