/* colours */
.black-box-opacity-5 {
    background: rgba(0,0,0,0.7);
}

.dark-grey-text, body {
	color:#353535;
}

.dark-grey-box, .menu-btn, .menu-btn.is-close::before, .menu-btn.is-close::after, .menu-btn.is-open::before, .menu-btn.is-open::after {
    background-color: #353535;
    color: #ffffff;
}

.dark-grey-box a {
    color: #ffffff;
}

.green-box {
    background-color: #78f18c;
    color: #05891b;
}

.light-grey-border {
    border: 1px solid #dedede;
}

.orange-text, a, h1, h2, h3 {
    color: #0d3880;
}

.orange-box, button {
    background-color: #0d3880; 
    color: #ffffff;
}

.red-box {
    background-color: #ff4a54;
    color: #700300;
}

.seperator {
    border-top: 1px solid #353535; 
}

.white-box {
    background-color: #ffffff;
    color:#353535;
}

.white-box-opacity-5 {
    background: rgba(255,255,255,0.7);
}

.white-shadow, .menu-btn, .menu-btn.is-close::before, .menu-btn.is-close::after, .menu-btn.is-open::before, .menu-btn.is-open::after, #mainNav {
    box-shadow: 0px 0px 4px rgba(255,255,255,0.7);
}

.white-text {
    color: #ffffff;
}

/* fonts */
@font-face {
    font-family: 'blc';
    src: url('/fonts/blc.eot');
    src: url('/fonts/blc.eot?#iefix') format('embedded-opentype'),
         url('/fonts/blc.woff2') format('woff2'),
         url('/fonts/blc.woff') format('woff'),
         url('/fonts/blc.ttf') format('truetype'),
         url('/fonts/blc.svg#steelfishregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;

}

@font-face {
    font-family: 'bsc';
    src: url('/fonts/bsc.eot');
    src: url('/fonts/bsc.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bsc.woff2') format('woff2'),
         url('/fonts/bsc.woff') format('woff'),
         url('/fonts/bsc.ttf') format('truetype'),
         url('/fonts/bsc.svg#steelfishregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;

}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.big-text {
    font-size: 1.5em;
}

.center-text {
    text-align: center;
}

body, button {
	font-family:'blc',Arial, Helvetica, sans-serif;
	font-size: 20px;
    letter-spacing: -0.075em;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'bsc',Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0.5em 0em;
    margin: 8px 0px;
}

.small {
    font-size: 0.8em;
    font-weight:lighter;
}

.smallest, .legislative-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55em;
}

@-webkit-keyframes rotation {
    from {
	    -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
	}
    to {
	    -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* Responsive */
@media all and (min-width:0em){
    body {
        padding:0px;
        margin:0px;
        text-align:center;
    }
    
    .clear, .seperator {
        clear: both;
    }
    
    .container {
        position: relative;
        margin: auto;
        text-align: left;
        width: 100%;
    }
    
    .columns-0-5 {
        width: 30%;
    }
    
    .columns-0-5 img {
        width: 100%;
    }
    
    .columns-1, .columns-2 {
        width: 48%;
    }
    
    .columns-3 {
        width: 100%;
    }
    
    [data-action=loadModalBox] {
        cursor: pointer;
        text-decoration: underline;
    }
    
    [data-action=askForOffer] {
        cursor: pointer;
    }
    
    .float-left {
        float: left;
    }
    
    .float-left.margin-24 {
        margin: 0em 1.5em 1.5em 0em;
        margin: 0px 24px 24px 0px;
    }
    
    .margin-24 {
        margin: 1.5em;
        margin: 24px;
    }
    
    .margin-48 {
        margin: 3em;
        margin: 48px;
    }
    
    .max-width {
        width: 100%;
    }
        
    .padding-8, input, textarea {
        padding: 0.5em;
        padding: 8px;
    }
    
    .padding-12, button {
        padding: 0.75em;
        padding: 12px;
    }
    
    .padding-12-flanks {
        padding: 0em 0.75em;
        padding: 0px 12px;
    }
    
    .padding-24, .legislative-text {
        padding: 1.5em;
        padding: 24px;
    }
    
    /* header*/
    header {
        height: 6.25em;
        height: 100px;
        position: relative;
        z-index: 10;
    }
    
    header .logo {
        position: absolute;
        left: 0.5em;
        left: 8px;
        top: 0.75em;
        top: 12px;
    }
    
    header nav {
        position: absolute;        
        right: 0.5em;
        right: 8px;
        top: 5em;
        top: 80px;
    }
    
    header nav.is-close {
        height: 0em;
        height: 0px;
        opacity: 0;
        overflow: hidden;
        width: 0em;
        width: 0px;
    }
        
    header nav.is-open {
        height: auto;
        opacity: 1;
        width: auto;
    }
    
    header nav ul {
        list-style: none;
        margin: 0em;
        margin: 0px;
        padding: 0em;
        padding: 0px;
    }
    
    header .header-menu {
        position: absolute;
        right: 1em;
        right: 16px;
        top: 2em;
        top: 32px;
    }
    
    header .menu-container {
        position: fixed;
        width: 100%
    }
    
    /* header Menu BTN */ 
    header .menuBtnContainer {
        cursor: pointer;
        height: 2.25em;
        height: 36px;
    }
    
    header .menu-btn {        
        transition:all linear 0.2s;
    }
    
    header .menu-btn.is-close, header .menu-btn.is-close:before, header .menu-btn.is-close:after {
        height: 4px;
        margin-left: 10px;
        position: relative;
        width: 35px;
    }

    header .menu-btn.is-close:before, header .menu-btn.is-close:after  {
        content: "";
        left:-10px;
        position: absolute;
    }

    header .menu-btn.is-close:before {
        top:10px;
    }

    header .menu-btn.is-close:after {
        top:20px;
    }

    header .menu-btn.is-open {
        height: 2.5em;
        height: 40px;        
        margin-left: -1.5em;
        margin-left: -24px;
        position: relative;
        width: 10px;
    }

    header .menu-btn.is-open:before {
        content: "";
        left: -15px;
        height: 10px;
        position: absolute;
        top: 15px;
        width: 40px;
    }

    header .menu-btn.is-open {
        transform: rotate(45deg);
    }
    
    /* Claim */
    .claim {
        height: 17.5em;
        height: 280px;
        position: relative;       
        overflow: hidden;
        width: 100%;
        z-index: 0;
    }
    
    .claim .claim-image {
        position: absolute; 
        width: 100%;
        z-index: 0;
    }
        
    .claim .container {
        position: relative;
        z-index: 10;
    }
    
    .claim .claim-content {
        position: absolute;
        top: 15%;
        left: 0.5em;
        left: 8px;
        max-width:75%;
    }
    
    .claim .container {
        height: 100%;
    }
    
    /* Main Content */
    .main-content .article-images .article-item {
        float: left;
        margin: 0% 2% 0% 0%;
    }
    
    .main-content .main-content-image-max {
        height: 17.5em;
        height: 280px;
        overflow: hidden;
    }
    
    .main-content .main-content-image-max img, .claim .claim-image img {
        width: 100%;
    }
    
    /* Form */
    button {
        border: 0;
    }
    
    form .is-close {
        display: none;
    }
    
    form .is-open {
        display: block;
    }
    
    input[type=text], input[type=number],textarea {
        margin: 0.5em 0em;
        margin: 8px 0px;
        max-width: 80%;   
    }
    
    label, button {        
        cursor: pointer;
    }
    
    .product input[type=checkbox] ~ .amount {
		opacity:0.4;
		pointer-events: none;
	}
	
	.product input[type=checkbox]:checked ~ .amount {
		opacity:1;
		pointer-events: auto;
	}
    
    /* Produkt Angebote */
    #productOffers .product {
        float: left;
        margin: 0% 2% 2% 0%;
    }
    
    #productOffers .product:nth-child(2n+2) {
        margin: 0% 0% 2% 0%;
    }
    
    #productOffers .product .title {
        height: 5.75em;
        height: 92px;
        overflow: hidden;
    }
    
    #productOffers .product .image {
        height: 17.5em;
        height: 280px;
    }
    
    #productOffers .product .image img {
        max-height: 100%;
        max-width: 100%;
    }
    
    
    /* Impressum */
    .legaslative-container ul {
        list-style: none;
        margin: 0em;
        margin: 0px;
        padding: 0em;
        padding: 0px;
    }
    
    .legaslative-container ul li {
        float: left;
        margin: 0em 1em 2em 0em;
        margin: 0px 16px 32px 0px;
        padding: 0em 1em 0em 0em;
        padding: 0px 16px 0px 0px;
    }
    
    /* Modal Box */
    #modalbox {
        position: fixed;
        overflow: auto;
        text-align: left;
        transition: all linear 0.2s;
        z-index: 20;
    }
    
    #modalbox.is-close {        
        height: 0%;
        right: 0%;
        top: 0%;
        width: 0%;
    }
    
    
    #modalbox.is-open {        
        height: 80%;
        right: 5%;
        top: 10%;
        width: 90%;
    }
    
    #modalboxClose {
        cursor: pointer;
        position: fixed;
        text-align: center;
        top: 3%;
        width:100%;
        z-index: 20;
    }
    
    #modalboxClose:after {
        content:"\2718"
    }
    
    #modalboxClose.is-close {
        display: none;
    }
    
    #modalboxClose.is-open {
        display: block;
    }
    
    /* Overlay */
    #overlay {
        left: 0%;
        position: fixed;
        top: 0%;
        transition: all linear 0.2s;
        z-index: 10;
    }
    
    #overlay.is-close {
        height: 0%;
        width: 0%;
    }
    
    #overlay.is-open {
        height: 100%;
        width: 100%;
    }
    
    .overlay-active {
        overflow: hidden;
    }
    
    /* Loading */
    #load {
        text-align: center;
    }
    
    #load img {
        width: 5.75em;
        width: 92px;
        -webkit-animation: rotation 3s infinite linear;
        -moz-animation: rotation 3s infinite linear;
        animation: rotation 3s infinite linear;
    }
}

/* 768 px */
@media all and (min-width:48em){
    
    .columns-0-5 {
        width: 7em;
        width: 112px;
    }
    
    .columns-1 {
        width: 15.5em;
        width: 248px;
    }
    
    input.result {
        width: 15.5em !important;
        width: 248px !important;
    }
    
    .columns-2 {
        width: 35.5em;
        width: 508px;
    }
    
    .columns-3 {
        width: 48em;
        width: 768px;
    }
    
    .padding-12-flanks {
        padding: 0em;
        padding: 0px;
    }
    
    /* header*/
    header .right, header nav {
        right: 0em;
        right: 0px;
    }
    
    /* Claim */
    .claim {
        height: 25em;
        height: 400px;
    }
        
    .claim .claim-content {
        top: auto;
        bottom: 2em;
        bottom: 32px;
        left: 0em;
        left: 0px;
    }
    
    /* Main Content */
    .main-content .article-images .article-item {
        margin: 0em 0.75em 0em 0em;
        margin: 0px 12px 0px 0px;
    }
    
    .main-content .article-images .article-item:last-child {
        margin: 0em;
        margin: 0px;
    }

    
    .main-content .main-content-image-max img {
        margin-top: -2.5em;
        margin-top: -40px; 
    }
    
    /* Produkt Angebote */
    #productOffers .product, #productOffers .product:nth-child(2n +2) {
        float: left;
        margin: 0em 0.75em 0.75em 0em;
        margin: 0px 12px 12px 0px;
    }
    
    #productOffers .product:nth-child(3n+3) {
        margin: 0em 0em 0.75em 0em;
        margin: 0px 0px 12px 0px;
    }
    
    /* Forms */
    .forms--content input, .forms--content textarea {
        width: 43.75em;
        width: 700px;
    }
}


/* 960 px */
@media all and (min-width:60em){
    
    .columns-0-5 {
        width: 9.375em;
        width: 150px;
    }
    
    .columns-1 {
        width: 19.5em;
        width: 312px;
    }
    
    input.result {
        width: 15.5em !important;
        width: 248px !important;
    }
    
    .columns-2 {
        width: 39.75em;
        width: 636px;
    }
    
    .columns-3 {
        width: 60em;
        width: 960px;
    }
    
    /* Claim */
    .claim {
        height: 32.5em;
        height: 520px;
    }
    
    /* Forms */
    .forms--content input, .forms--content textarea {
        width: 51.75em;
        width: 828px;
    }
    
    /* Modal Box */
    
    #modalbox.is-open {        
        height: 80%;
        right: 15%;
        top: 10%;
        width: 70%;
    }
}