:root {
    --matblue: #00ABB3;
    --white: #fff;
    --matblack: #151617;
    --matgrey: #3C4048;
    --grey: #B2B2B2;
    --matwhite: #EAEAEA;
}

@font-face {
    font-family: Opensans;
    src: url('../fonts/static/OpenSans-Bold.ttf');
}

*{
    
    list-style: none;
    text-decoration: none !important;
    font-family: Opensans;
    box-sizing: border-box !important;
}

header{
    width: 100%;
    height: 12vh;
    background: var(--matblack);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    padding: 0 100px !important;
}

.hamburger:focus,
.hamburger:active,
.hamburger-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
.line{
    transition: all 0.5s;
}
.middle-bar {
    margin: 5px auto !important;
}
/* State when navbar is opened (START) */
.hamburger .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.hamburger .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.hamburger .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

/* State when navbar is opened (END) */

/* State when navbar is collapsed (START) */
.hamburger.collapsed .top-bar {
    transform: rotate(0);
}

.hamburger.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
}

.hamburger.collapsed .bottom-bar {
    transform: rotate(0);
}

/* State when navbar is collapsed (END) */

.hamburger{
    display: none;
}

nav.nav-bar {
    z-index: 100 !important;
}

.nav-bar ul{
    display: flex !important;
}
.nav-bar ul li a {
    display: block !important;
    color: var(--white);
    font-size: 16px;
    padding: 10px 25px !important;
    border-radius: 50px;
    transition: 0.2s;
    margin: 0 5px !important;
}
.nav-bar ul li a:hover{
    color: var(--matblack);
    background-color: var(--matblue);

}
.nav-bar ul li a.active {
    color: var(--matblack);
    background-color: var(--matblue);
}


/* media queries  */

@media only screen and (max-width: 1320px){
    header{
        padding: 0 50px !important;
    }
}

@media only screen and (max-width: 1100px) {
    header {
        padding: 0 30px !important;
    }
  
}
@media only screen and (min-width: 901px) {
    #navb {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 !important;
            padding: 0 !important;
        }
  
}

@media only screen and (max-width: 900px) {
    .hamburger{
        display: block !important;
        cursor: pointer;
    }
    .hamburger .line{
        width: 30px;
        height: 3px;
        background: var(--white);
        margin: 6px 0;
    }
    .nav-bar{
        height: 0;
        position:absolute !important;
        top: 80px;
        left: 0;
        right: 0;
        width: 100vw;
        background: var(--matblack);
        transition: 0.5s;
        overflow: hidden;
    }
    .nav-bar.active{
        height: 450px;
    }
    .nav-bar ul{
        display: block !important;
        width: fit-content;
        margin: 80px auto 0  auto !important;
        text-align: center;
        transition: 0.5s;
        opacity: 0;
    }
    .nav-bar.active ul{
        opacity: 1;
    } 
    .nav-bar ul li a{
        margin: 12px !important;
    }
}

@media only screen and (min-width: 900px){

    .carousel-inner {
        height: 500px;
    }
    
    div#carouselExampleAutoplaying{
        height: 500px;
    }
}
@media only screen and (max-width: 900px){

    .carousel-inner {
        height: 259px;
    }
    
    div#carouselExampleAutoplaying{
        height: 259px;
    }
}