.header{
    background-color:#fff;
    position:fixed;
    top:0;
    z-index:999;
    width:100%;
    height:auto;
}
.header-navbar{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:15px 24px;
    position:relative;
    z-index:3;
}
.header-navbar-bar{
    width:36px;
    margin-bottom:20px;
    position:relative;
    z-index:10;
}
.header-navbar-bar__item{
    position:absolute;
    height:4px;
    width:100%;
    background-color:#333;
    top:0;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.header-navbar-bar__item:nth-child(2){
    top:8px;
}
.header-navbar-bar__item:nth-child(3){
    top:16px;
}
.header-navbar > input{
    display:none;
}
.header-navbar > input:checked ~ .header-navbar__menu{
    left:0;
    -webkit-transition:left 0.3s;
    transition:left 0.3s;
}
.header-navbar > input:checked ~ .header-navbar-bar .header-navbar-bar__item{
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.header-navbar > input:checked ~ .header-navbar-bar .header-navbar-bar__item:nth-child(2){
    display:none;
}
.header-navbar > input:checked ~ .header-navbar-bar .header-navbar-bar__item:first-of-type{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    top:8px;
}
.header-navbar > input:checked ~ .header-navbar-bar .header-navbar-bar__item:last-of-type{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:8px;
}
.header-navbar__logo{
    width:110px;
}
.header-navbar__menu{
    position:absolute;
    left:-100%;
    top:0;
    -webkit-transition:left 0.3s;
    transition:left 0.3s;
    background-color:#cadbdf;
    width:100%;
    overflow:hidden;
    padding-top:5em;
    padding-left:36px;
    padding-bottom:50px;
}
.header-navbar__menu input{
    display:none;
}
.header-navbar__menu input:checked + ul.sub-menu{
    max-height:520px;
    -webkit-transition:max-height 0.3s;
    transition:max-height 0.3s;
}
.header-navbar__menu > ul > li{
    margin-bottom:15px;
    /*text-transform: capitalize;*/
    position:relative;
}
.header-navbar__menu > ul > li > a,
.header-navbar__menu > ul > li > label{
    cursor:pointer;
    font:normal normal bold 30px/44px "Montserrat-Bold";
    letter-spacing:0;
    color:#00303e;
    text-decoration:none;
    font-family:"Montserrat-Bold", serif;
    display:inline-block;
}
.header-navbar__menu > ul > li > a > img,
.header-navbar__menu > ul > li > label > img{
    width:30px;
}
.header-navbar__menu .sub-menu{
    max-height:0;
    overflow:hidden;
    padding-left:23px;
    -webkit-transition:max-height 0.3s;
    transition:max-height 0.3s;
}
.header-navbar__menu .sub-menu > li{
    margin-bottom:18px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.header-navbar__menu .sub-menu > li:first-of-type a{
    color:#7f6677;
}
.header-navbar__menu .sub-menu > li:last-of-type a{
    color:#865792;
}
.header-navbar__menu .sub-menu > li:nth-child(2) a{
    color:#50849a;
}
.header-navbar__menu .sub-menu > li:nth-child(3) a{
    color:#4466af;
}
.header-navbar__menu .sub-menu > li:nth-child(4) a{
    color:#f4993d;
}
.header-navbar__menu .sub-menu > li > a{
    font:normal normal bold 25px/30px "Montserrat-Bold";
    letter-spacing:0;
    font-family:"Montserrat-Bold", serif;
    text-decoration:none;
    display:inline-block;
}
.header-navbar__menu .sub-menu > li > img{
    margin-right:5px;
    width:8%;
}
.header-banner{
    position:relative;
}
.header-banner__title{
    color:#fff;
    width:100%;
    padding-left:27px;
    padding-right:48px;
    top:-54px;
}
.header-banner__desc{
    padding-left:61px;
    padding-right:108px;
    width:100%;
    top:-50px;
}
/*
========== MEDIA QUERRIES ==========
 */

@media only screen and (min-width:750px){
    .header-navbar-bar{
        display:none;
    }
    .header-navbar__menu{
        position:unset;
        background-color:transparent;
        padding:0;
        width:auto;
    }
    .header-navbar__menu > ul{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
    }
    .header-navbar__menu input:checked + ul.sub-menu{
        max-height:0;
    }
    .header-navbar__menu > ul > li{
        margin-bottom:0;
        margin-right:40px;
    }
    .header-navbar__menu > ul > li > a,
    .header-navbar__menu > ul > li > label{
        font-size:20px;
        line-height:1;
    }
    .header-navbar__menu > ul > li > a > img,
    .header-navbar__menu > ul > li > label > img{
        width:40px;
        display:none;
    }
    .header-navbar__menu > ul > li:hover > ul.sub-menu{
        max-height:520px;
        padding-top:15px;
        -webkit-transition:all 0.5s;
        transition:all 0.5s;
    }
    .header-navbar__menu .sub-menu{
        position:fixed;
        width:250px;
        overflow:hidden;
        background-color:#fff;
        padding-left:20px;
        -webkit-transition:all 0.5s;
        transition:all 0.5s;
    }
    .header-navbar__menu .sub-menu > li > a{
        font-size:20px;
        line-height:1;
    }
    .header-navbar__menu .sub-menu > li > img{
        width:8%;
    }
    .header-banner__image{
        width:100%;
        position:relative;
        left:-33%;
    }
    .header-banner__content{
        width:100%;
        top:98px;
        position:absolute;
    }
    .header-banner__title{
        padding-left:600px;
        left:0;
        top:0;
    }
    .header-banner__desc{
        top:0;
        padding-left:1080px;
        padding-right:30px;
        margin-top:70px;
    }
}
@media only screen and (min-width:850px)
{
    .header-navbar__menu > ul > li > a > img,
    .header-navbar__menu > ul > li > label > img{
        display:flex;
    }
}
@media only screen and (min-width:1920px){
    .header-banner__title{
        padding-left:700px;
    }
    .header-banner__desc{
        padding-left:1350px;
    }
}