#oeb2, #oeb3, #oeb4, #oeb5 {
    display:none;
}

#oeb1, #oeb2, #oeb3, #oeb4, #oeb5 {
    background:#fff;
    width:80%;
    padding:20px;
    margin:0 auto;
    margin-top:20px;
}

#oeb2               {grid-area:oeb2;}
#oeb3               {grid-area:oeb3;}
#oeb4               {grid-area:oeb4;}
#oeb5               {grid-area:oeb5;}

body {
    background-color: #411779;
    background-image: -webkit-linear-gradient( -30deg, #411779 0%, #411779 60%, #4c228d 60%, #4c228d 60%);
    background-image: linear-gradient( -30deg, #411779 0%, #411779 60%, #4c228d 60%, #4c228d 60%);
    background-repeat: no-repeat;
    margin:0px;
    font-family: 'Poppins', sans-serif;
    width:100%;
    height:100%;
    display: block;
}

html {
    width:100%;
    height:100%;
}



h1 {
    line-height: 35px;
}

#back_gradient {    
    display: grid;
    grid-template-columns: 100%;
    justify-self: stretch;
    background: rgb(0,0,0);
    background: url("../images/bg_black_grade.png") repeat-x;
    background-position: bottom;
    
}

#back_petals {
    width:100vw;
    height:100vh;
    background: url("../images/background_petals.png") no-repeat left center;    
}

#oeb_classification_tool {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-top:50px;
    grid-template-areas: 
    "oeb2"
    "oeb3"
    "oeb4"
    "oeb5"
    "oeb_classification_question"
    "oeb_classification_navigation"
    "branding";
    margin-top:0px;
}

#oeb_classification_navigation {
    display: grid;
    grid-template-columns: 160px 160px;
    grid-gap:1em;    
    margin:0 auto;
    justify-content: center; 
    margin-top:100px;
    grid-area: oeb_classification_question;

}

#oeb_classification_navigation button:hover, #oeb_classification_navigation button:focus {
    background: url("../images/petal_light_purple.svg") no-repeat;
    transform: translate(0, -20px);
    background-size: 100%;
}

.oeb_number_navigation {
    font-weight: bold;
    font-size:24px;
    margin:55px 0px 0px;
    color:#fff;
    display:block;
}

.oeb_band_navigation {
    font-size:14px;
    color:#fff;
}

.oel_band_large {
    font-weight: bold;
    font-size:24px;
}

.button {
    width:160px;
    height:220px;
    background: url("../images/petal_orange.svg") no-repeat;
    background-size: 100%;
    border:none;
    cursor:pointer;
    transition: transform ease 200ms;
    padding-top:25px;
}

.button:last-child {
    margin-right:0px;
}

.oeb_number_navigation {
    font-weight: bold;
    font-size:28px;
    margin:35px 0px 0px;
}

#oeb_classification_question {
    font-size:24px;
    color:#fff;
    width:100%;
    text-align: center;
    margin: 20px 0px 20px; 
    height:60px;
    grid-area: oeb_classification_question;
}

#branding {
    grid-area: branding;
    width:100%;
    text-align: center;
}
.strapline {
    display: block;
    margin:0 auto;
    margin-top:30px;
    width:90%;
    max-width: 300px;
}

.logo {
    display: block;
    margin:0 auto;
    margin-top:40px;
}

#content_labels {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin:0 auto;
    grid-column-gap:1em;
}

.oeb_classification_label {
    width:140px;
    height:168px;
    background: url("../images/petal_light_purple_top_border.svg") no-repeat;
    background-size: 140px;
}
.oeb_number {
    color:#fff;
    width:100%;
    float:left;
    text-align: center;
    font-weight: bolder;
}

.oeb_band {
    color:#fff;
    width:100%;
    float:left;
    text-align: center;
}

.oeb_number {
    font-weight: bold;
    font-size:25px;
    margin:65px 0px -5px;
}

.oeb_band {
    font-size:14px;
}

.owl_navgiation {
    color:#fff;
    font-size:21px;
    font-weight: bold;
}

.classification_level {
    width:140px;
    height:168px;
    background: url("../images/petal_orange_top.svg") no-repeat;
    background-size: 140px;
             
    color:#fff;
    text-align:center;
    padding-top:0px;
    margin:0px;   
}

@media all and (min-width: 374px) and (max-width: 769px) {

}

@media all and (min-width: 770px) and (max-width: 1023px) {
    
    #oeb_classification_navigation {
        grid-template-columns: 170px 170px 170px 170px;
        margin-top:100px;      
    }

    #content_labels {
        grid-template-columns: 1fr;
        grid-template-rows:auto; 
        grid-row-gap:0px;
        margin-right:-80px;
    }

    .strapline {
        width:350px;
    } 

    #oeb1, #oeb2, #oeb3, #oeb4, #oeb5 {
        width:770px;
        padding-top:100px;
        margin-top:-100px;
        grid-template-columns: 3fr 1fr;
    }

    #oeb_classification_tool {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;        
        grid-template-areas: 
        "oeb_classification_question"
        "oeb_classification_navigation"
        "oeb2"
        "oeb3"
        "oeb4"
        "oeb5"
        "branding";
    }    

}

@media all and (min-width: 1024px) and (max-width: 2560px) {
    
    #oeb_classification_navigation {
        grid-template-columns: 170px 170px 170px 170px;
        margin-top:100px;
    }

    #content_labels {
        grid-template-columns: 1fr;
        grid-template-rows:168px; 
        grid-row-gap:0px;
        margin-right:-80px;
    }
    
    .oeb_classification_label {
        vertical-align: bottom;
    }

    .strapline {
        width:350px;
    } 

    #oeb1, #oeb2, #oeb3, #oeb4, #oeb5 {
        width:900px;
        height:400px;
        padding-top:100px;
        margin-top:-100px;
        grid-template-columns: 3fr 1fr;
    }

    #oeb_classification_tool {
        display: grid;
        grid-template-areas: 
        "oeb_classification_question"
        "oeb_classification_navigation"
        "oeb2"
        "oeb3"
        "oeb4"
        "oeb5"
        "branding";
    }
}