@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: 'roboto_condensedbold';
src: url('robotocondensed-bold-webfont.woff2') format('woff2'),
url('robotocondensed-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto_condensedbold_italic';
src: url('robotocondensed-bolditalic-webfont.woff2') format('woff2'),
url('robotocondensed-bolditalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto_condenseditalic';
src: url('robotocondensed-italic-webfont.woff2') format('woff2'),
url('robotocondensed-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Styles */
*{
margin: 0px;
padding: 0px;
}
html {
scroll-behavior: smooth;
}
body{
font-family: 'roboto_condensedregular';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 24px;
background: #000;
color: #fff;
}
h1{
font-family: 'roboto_condensedbold_italic';
font-weight: normal;
font-style: normal;
font-size: 2.5em;
line-height: 1.2em;
padding: 0;
margin: 0 0 .5em 0;
color: #ff0000;
text-transform: uppercase;
}
h2{
font-family: 'roboto_condensedbold';
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 1.2em;
padding: 0;
margin: 1em 0 .5em 0;
text-transform: uppercase;
}
h3{
font-family: 'roboto_condensedregular';
font-weight: normal;
font-style: normal;
font-size: 1.3em;
line-height: 1.2em;
padding: 0;
margin: 1em 0 .5em 0;
text-transform: uppercase;
}
h4{
font-family: 'roboto_condensedregular';
font-weight: normal;
font-style: normal;
font-size: 1.1em;
line-height: 1.2em;
padding: 0;
margin: 0 0 .5em 0;
color: #ff0000;
text-transform: uppercase;
}
h5{
font-family: 'roboto_condenseditalic';
font-weight: normal;
font-style: normal;
font-size: 2.2em;
line-height: 1.2em;
padding: 0;
margin: 0 0 .5em 0;
color: #fff;
}
p{
margin: .5em 0 1em 0;
}
p a {
color: #ff0000;
text-decoration: none;
}
p a:hover, a:focus, a:active{
color: #fff;
}
img{
width: 100%;
height: auto;
}
/* Navigation */
nav{
width: 100%;
margin:-2.5em auto 0 auto;
float: right;
text-align: right;
}
nav a{
color: #ff0000;
text-decoration: none;
text-transform: uppercase;
margin: 0 1em 0 0;
font-size: 1em;
line-height: 1em;
}
nav a:hover, a:focus, a:active
{
color: #fff;  
}
hr{
width: 100%;
display:block;
border:none;
height: 1px;
background-image: url("../images/dotted.png");
background-repeat: repeat-x;
margin: 3em 0;
}
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
float: right;
text-align: right;
width: 70%;
display: flex;
justify-content: flex-end;
}
ul li {
list-style-type:none;
display: inline;
float: left;
text-align: right;
}
.underline{
text-decoration: underline;
}
.show-menu {
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.cf:after {
content: ' ';
display: block;
clear: both;  
}
/* Layout */
header{
width: 70%;
height: 100px;
margin: auto;
padding: 3em 0 0 0;
}
#logobox{
width: 300px;
height: 88px;
padding: 1em 0;
line-height: 88px;
}
#logobox a{
background-image: url("../images/max-logo-01.svg");
background-repeat: no-repeat;
background-position: top left;
background-size: 100%;
display: block;
height: 88px;
line-height: 88px;
text-decoration: none;
transition: background-position ease .5s;    
}
#logobox a:hover{
background-image: url("../images/max-logo-01.svg");
background-repeat: no-repeat;
background-position: bottom left;
background-size: 100%;
display: block;
height: 88px;
line-height: 88px;
text-decoration: none;
transition: background-position ease .5s;
}
#content{
width: 70%;
min-height: 20em;
margin: auto;
padding: 4em 0 0 0;
}
.centercolumn{
width: 70%;
height: auto;
display: block;
margin: 2em auto;
}
.content-ul{
position: relative;
display: block;
width: 100%;
text-align: left;
height: auto;
}
.content-ul li{
width: 100%;
display: block;
margin: 0 0 .5em 0;
text-align: left;
font-family: 'roboto_condenseditalic';
}
.content-ul li::before{
content: "– ";
color: #FF0000;
}
.two_columns{
display: flex;
justify-content: space-between;
margin: 3em 0;
flex-wrap: no-wrap;
}
.two_columns > div{
flex-basis: 48%;
}
.three_columns{
width: 100%;
display: flex;
justify-content: space-between;
}
.three_columns > div{
flex-basis: 32%;
text-align: left;
padding: 0 0 2em 0;
}
.signet{
margin: 12vh auto;
height: 20em;
}
.three_columns-start{
width: 100%;
display: flex;
justify-content: space-between;
margin: 6em 0;
}
.three_columns-start > div{
flex-basis: 32.5%;
text-align: center;
padding: 0 0 2em 0;
}
.three_columns-start a{
text-decoration: none;
transition: background-color ease .5s;
}
.three_columns div:hover{
filter: grayscale(100%);
}
.three_columns div:hover > h3{
color: #666;
}
.three_columns-start div:hover{
text-decoration: none;
background-color: #ff0000;
transition: background-color ease .5s;
background-image: url("../images/plus-black.svg");
background-repeat: no-repeat;
background-position: bottom right;
background-size: 2.5em;
}
.three_columns-start div:hover .teaserimage{
filter: grayscale(100%);
transition: filter ;
}
.teaserimage {
width: 100%;
height: auto;
margin: 0 0 2em 0;
border:none;
}
footer{
width: 70%;
min-height: 14em;
border-top: solid 8em #000;
margin: auto;
display: flex;
flex-direction: row;
background-image: url("../images/max-signet.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size:34em;
justify-content: flex-start;
padding: 1em 0 0 0;
}
footer div {
flex-basis: 20%;
min-width: 12em;
}
footer a{
color: #666;
text-decoration: none;
display: block;
text-transform: uppercase;
font-size: .9em;
line-height: 2em;
}
footer a:hover, a:focus, a:active{
color: #ff0000;
}
footer a::before{
content: '// ';
}
footer p{
color: #666;
text-decoration: none;
display: block;
text-transform: uppercase;
font-size: .9em;
line-height: 2em;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/*Responsive Styles*/
@media screen and (max-width : 1440px){
body{
font-size: 18px;
line-height: 24px;
}
/* Navigation */
nav{
width: 100%;
margin:-2.5em auto 0 auto;
float: right;
text-align: right;
}
nav a{
color: #ff0000;
text-decoration: none;
text-transform: uppercase;
margin: 0 1em 0 0;
font-size: 1em;
line-height: 1em;
}
nav a:hover, a:focus, a:active
{
color: #fff;  
}
ul{
width: 90%;
}
/* Layout */
header{
width: 90%;
height: 100px;
margin: auto;
padding: 1em 0 0 0;
}
#logobox{
width: 300px;
height: 60px;
line-height: 60px;
padding: 1em 0;}
#logobox a{
background-image: url("../images/max-logo-01.svg");
background-repeat: no-repeat;
background-position: top left;
background-size: 60%;
display: block;
height: 60px;
line-height: 60px;
text-decoration: none;
transition: background-position ease .5s;    
}
#logobox a:hover{
background-image: url("../images/max-logo-01.svg");
background-repeat: no-repeat;
background-position: bottom left;
background-size: 60%;
display: block;
height: 60px;
line-height: 60px;
text-decoration: none;
transition: background-position ease .5s;
}
#content{
width: 90%;
min-height: 20em;
margin: auto;
padding: 2em 0 0 0;
}
h5{
font-family: 'roboto_condenseditalic';
font-weight: normal;
font-style: normal;
font-size: 1.4em;
line-height: 1.2em;
padding: 0;
margin: 0 0 .5em 0;
color: #fff;
}
footer{
width: 90%;
background-size: 22em;
}
.signet{
margin: 8vh auto;
height: 12em;
}
}
@media screen and (max-width : 800px){
body{
font-size: 18px;
line-height: 24px;
}
header{
width: 90%;
margin: auto;
}
#content{
width: 90%;
min-height: 20em;
margin: auto;
padding: 4em 0 0 0;
}
#logobox{
max-width: 90%;
}
.centercolumn{
width: 100%;
height: auto;
display: block;
margin: 2em auto;
}
.three_columns{
display: block;
}
.three_columns > div{
text-align: left;
padding: 0 0 2em 0;
}
.three_columns-start{
display: block;
}
.three_columns-start > div{
text-align: center;
padding: 0 0 2em 0;
}
.two_columns{
display: block;
}
.two_columns > div{
text-align: left;
padding: 0 0 2em 0;
}
footer{
width: 90%;
margin: auto;
min-height: 35em;
border-top: solid 8em #000;
display: block;
flex-direction: row;
background-image: url("../images/max-signet.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 22em;
padding: 1em 0 0 0;
}
footer div{
font-size: 1em;
line-height: 3em;
    }
footer div a{
font-size: 1.2em;
line-height: 3em;
}
nav{
margin: 1em 0 3em 0;
}
nav a{
margin: .75em 0;
display: block;
font-size: 1em;
line-height: 2em;
    }
nav a::before{
content: "+ ";
}
ul {
position: static;
margin: 1em 0;
display: none;
}
li {
margin: 0;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
text-align: right;
}
.show-menu > span{
font-size: 3em;
line-height: .25em;
display: block;
float: none;
font-family: 'roboto_condensedbold';
font-weight: normal;
font-style: normal;
}
}