.navbar_background{
    background-color: #f5f5f5;
    padding:10px;
}

.navbar_background--transparent{
    background-color: transparent;
}

.navbar__nav{
    margin:0px 10px;
}

.navbar__open-btn-icon{
    font-size:32px;
}

.navbar__open-btn{
    display:none;
    position: absolute;
    right: 48px;
    top: 25px;
    background-color: transparent;
}

.navbar__list{
    float:right;
    margin-top:15px;
}

.navbar__header{
    float:left;
}

.navbar__header--margined{
    margin:20px;
}

.navbar__item{
    display:inline-block;
    width:100px;
    text-align:center;
}

.navbar__item--long-text{
    vertical-align:bottom;
    margin-right: 34px;
}

.navbar__item--u-w--90{
    width:90px;
}

.navbar__link:link, .navbar__link:visited{
    font-size:15px;
    font-weight: 400;
	line-height: 30px;
	color: #808486;
	padding-top: 0;
	padding-bottom: 0;
    text-align: center;
    background: none;
    outline: none;
    text-decoration: none;
    display:block;
}

.navbar__link--long-text{
    white-space: nowrap;
}

.navbar__item--active .navbar__link{
    color: #ef7d00;
}

.navbar__link:hover, .navbar__link:active{
    color: #ef7d00;
    text-decoration: none;
}

.navbar__icon{
    display:block;
    font-weight:300;
    font-size:28px;
}

.navbar__icon--long-text{
    margin-left:24px;
}


.navbar-circle{
	height:12px;
	width:12px;
	border-radius: 50%;
	background-color: red;
	position: absolute;
	top:2px;
	left:17px;
	font-weight:300;
}

.navbar-circle span{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:10px;
	color:#fff;
}
/* 
@media (max-width: 1200px){
    .navbar__list--long{
        position: absolute;
        right: 0;
        margin-top:70px;
        z-index: 1000;
        box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.28);
        background-color: #f5f5f5;
        border-radius: 5px;
        margin-right:10px;
        padding:10px;
        max-height:0px;
        visibility:hidden;
        transition: all .3s;
        overflow:hidden;
       
    }
     
} */

@media (max-width: 1200px){
    .navbar__open-btn{
        display:block;
    }
    .navbar__list{
        position: absolute;
        right: 0;
        margin-top:70px;
        z-index: 1000;
        box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.28);
        background-color: #f5f5f5;
        border-radius: 5px;
        margin-right:10px;
        padding:10px;
        max-height:0px;
        visibility:hidden;
        transition: all .3s;
        overflow:hidden;
       
    }

    .navbar__list--m-right-5{
        margin-right:5px;
    }
    .navbar__item{
        display:block;
        margin-top: 10px;
    }
    .navbar__list .dropdown{
        position:static;
    }
    .navbar__list---visible{
        max-height:1000px;
        visibility:visible;
    }

    .navbar__item .dropdown__list{
        left: -70%;
        top: 32%;
    }

    .navbar__item .dropdown__list::before{
        left: 105%;
        top: 60px;
        transform: translate(-50%);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #fff;
    }
    

     /* .navbar{
        position:fixed;
        top:0;
        left:0;
        z-index:5;
        width:100%;
    } 

    .navbar_background{
         background-color: transparent; 
    } */

    .navbar__open-btn{
        background-color:white;
        box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.28);
        border-radius: 5px;
        padding:5px;
    }

    .navbar__list---visible + .navbar__open-btn{
        background-color:#ede8e8;
        box-shadow:0px 0px 3px 0px rgba(0, 0, 0, 0.28);
    }

    .logo{
        padding:10px;
    }

    .navbar__header--margined{
        margin:0px;
    }

    .navbar__item--long-text{
        vertical-align:initial;
        margin-right: 0px;
    }
    .navbar__link--long-text{
        white-space: unset;
    }
    .navbar__icon--long-text{
        margin-left:-7px;
    }
}

/*
TODO: MOVE TO A SEPRATE CSS FILE.
*/
.dropdown{
    position:relative;
}

.dropdown__list::before{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%);
}


.dropdown__list{
    left: 50%;
    transform: translate(-50%,-0%);
    position: absolute;
    background-color:#fff;
    z-index:1;
    box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.28) ;
    min-width:180px;
    border-radius: 3px;
    display:none;
    margin-top: 5px;
}


.dropdown__item:link, .dropdown__item:visited{
    display:block;
    padding:1px 15px;
    color:#ef7d00;
    margin:5px;
    transition:all .2s;
    font-weight: 400;
    text-decoration: none;
}


.dropdown__item:hover, .dropdown__item:active{
    display:block;
    padding:1px 15px;
    color:white;
    border-radius: 3px;
    background-color: #ef7d00;
    text-decoration: none;
}