#mae-sub-header {
display: flex;
flex-wrap: wrap; background-repeat: no-repeat;
background-position: top right;
color: #fff;
position: relative;
height: auto;
padding: 48px 0;
margin-bottom: 50px;
}
#mae-sub-header::before {
content: '';
width: calc( 100% + 160px );
top: 0;
right: -80px;
position: absolute;
background-color: #1a1a46;
height: 100%;
z-index: -1;
background-position: 100% 0;
background-size: cover;
background-repeat: no-repeat;
}
.mae-sub-header-text {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
text-align: center;
text-transform: uppercase;
padding: 0 25px;
}
.mae-sub-header-text h1 {
font-weight: bold;
color: #fff;
margin-bottom: 10px;
}
.mae-sub-header-text p {
font-size: 20px;
font-weight: 300;
word-break: break-word;
}
.mae-sub-header-image {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.description-content {
width: 65%;
float: left;
}
.side-content {
width: calc(100% - 65% - 35px);
float: right;
}
.spacing-content {
margin-right: 35px;
margin-bottom: 35px;
margin-top: 20px;
}
.navigation.post-navigation {
clear: both;
}
@media screen and (max-width:980px) {
.mae-sub-header-text, .mae-sub-header-image {
flex-basis: auto;
flex: auto;
margin: auto;
}
#mae-sub-header::before {
background-size: cover;
}
.mae-sub-header-image {
margin-top: 40px;
max-width: 600px;
text-align: center;
}
.description-content {
width: 100%;
margin: 0 auto 35px;
float: none;
}
.side-content {
width: 100%;
float: none;
}
}