@font-face {
    font-family: futura;
    src: url(../fonts/FuturaStd-Book.otf)
}
@font-face {
    font-family: "Penumbra-Sans-Std";
    src: url("../fonts/PenumbraSansStd-Regular.otf");
    font-weight: normal
}
@font-face {
    font-family: "Penumbra-Sans-Std";
    src: url("../fonts/PenumbraSansStd-Bold.otf");
    font-weight: bold
}
@font-face {
    font-family: "Penumbra-Sans-Std";
    src: url("../fonts/PenumbraSansStd-Semibold.otf");
    font-weight: 200
}
header {
    background-color: #2869A1;
    height: 85px;
    min-height: 85px
}
header.navbar-dark {
    background-color: #F5E2BB;
    border-color: #F5E2BB;
    border-radius: 0;
}
header .container {
    height: 85px;
    width: 74%;
    margin: auto;
    max-width: 1366px;
    position: absolute;
    left: 0;
    right: 0
}
header .heading {
    color: #FFFFFF;
    height: 100%;
    background-color: #9E008C;
    border-radius: 5px;
}
header .register {
    padding: 10px
}
header .heading a {
    color: #F5E2BB;
}
header .heading.logo-heading {
    border-left: 1px solid white;
    margin-left: 10px
}
header .heading h4 {
    font-weight: bold;
    padding: 0;
    white-space: normal;
    margin: 5px 0;
}
header .row {
    height: 100%
}
header .row .col {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 100%;
    background-color: #2869A1
}
header .row .col.logo {
    padding: 0;
    width: 121px;
    height: 62px
}
header .row .col.register {
    background-color: #00B869;
    color: #FFFFFF;
    padding-left: 4%
}
.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #282828;
    margin: 6px 0;
    transition: 0.4s
}
.change .bar1 {
    -webkit-transform: rotate(-42deg) translate(-9px, 6px);
    transform: rotate(-42deg) translate(-9px, 6px)
}
.change .bar2 {
    opacity: 0
}
.change .bar3 {
    -webkit-transform: rotate(40deg) translate(-8px, -8px);
    transform: rotate(40deg) translate(-8px, -8px)
}
.change .bar1,
.change .bar3 {
    background-color: #CC0036
}
.navbar-toggle.my-nav-btn {
    margin-right: 0
}
.navbar-collapse.my-navbar {
    background-color: #FFEFBD;
    position: absolute;
    border: none;
    top: 74px !important;
    box-shadow: none;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}
.my-navbar ul {
    margin: 25.5px -15px
}
.my-navbar li {
    background-color: #F5E2BB;
    margin-bottom: 7px;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
}
.my-navbar li:last-child {
    margin-top: 12px
}
.my-navbar .nav li a {
    color: #282828;
    background-color: #F5E2BB;
    padding-top: 15px;
    padding-bottom: 10px
}
.my-navbar li.active a,
.my-navbar .nav li a:hover,
.my-navbar .nav li a:focus,
.my-navbar .nav li a:active {
    color: #9E008C;
    background-color: #F5E2BB;
    padding-top: 15px;
    padding-bottom: 10px;
    font-weight: bold;
}
@media (max-width: 479px) {
    header .heading h4 {
        white-space: normal;
        font-size: 12px;
    }
}
@media (min-width: 480px) and (max-width: 767px){
    header .heading h4 {
        padding: 0;
        white-space: normal;
        font-size: 15px;
        margin: 10px 0;
    }
}
@media (max-width: 767px) {
    header {
        height: 75px
    }
    header .container {
        margin-left: auto
    }
    header .row .col.logo {
        text-align: center;
        width: 100%
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    header .heading h4 {
        font-size: 16px;
        margin: 7px 0;
    }
    header{
        width: 960px;
    }
    header .navbar-collapse.my-navbar {
        display: none !important
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    header .heading h4 {
        font-size: 17px;
    }
    header .container {
        width: 79%
    }
    header .navbar-collapse.my-navbar {
        display: none !important
    }
}
@media (min-width: 1200px) {
    header .container {
        width: 957px
    }
    header .navbar-collapse.my-navbar {
        display: none !important
    }
}
@media (min-width: 1350px){
    header .heading h4 {
        margin: 10px 0;
    }
}