/******************/
/*** Navigation ***/
/******************/

.navbar-brand {
	width: 200px;
    max-width: 100%;
    height: auto;
}

.navbar-toggler {
	margin-right: 10px;
    border: 0;
    font-size: 1.5rem;
}

.navbar-toggler-icon {
    width: 1em;
    height: 1em;
}

.navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 350px) {

	.navbar-brand {
		width: 240px;
	}

}

@media (min-width: 440px) {

	.navbar-brand {
		width: 340px;
	}

    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }

}

@media (min-width: 768px) {

	.navbar-brand {
		width: 360px;
	}

}

@media (min-width: 992px) {

	.navbar-brand {
		width: 450px;
	}

}

/******************/

nav.navbar {
	background-color: #0F1115;
	padding-bottom: 0 !important;
	transition: all 0.3s ease;
}

nav.navbar .container {
	height: 120px;
}

nav.navbar.shrink .container {
	height: 60px;
}

nav.navbar.shrink {
	padding: 0.3rem 1rem;
	font-size: 80%;
}

nav.navbar .logo img {
	min-height: 120px;
	transition: min-height 0.7s ease;
}

nav.navbar.shrink .logo img {
	min-height: 80px;
	transition: min-height 0.7s ease;
}

nav.navbar button.btn {
	font-size: 2rem;
}

nav.navbar button.btn:hover {
	color: #F5F7FA;
}

nav.navbar a.nav-link {
	font-size: 1.3rem;
	padding: 1.5rem 1rem;
	color: #F5F7FA;
	transition: padding 0.3s ease, font-size 0.3s ease;
}

nav.navbar.shrink a.nav-link {
	font-size: 1.1rem;
}

nav.navbar a.nav-link:hover, a.nav-link.active {
	color: #777;
}

nav.navbar .nav-item.active a {
	color: #F5F7FA;
}

.custom-icon {
    color: #F5F7FA;
}

/*** Offcanvas  **********/

.offcanvas {
	background-color: #fff;
    width: 100% !important;
}

.offcanvas-header {
	color: #777;
}

.offcanvas-body {

}

.offcanvas .nav-link {
	color: #777;
	font-size: 1em;
	padding: 4px 0;
}

.offcanvas .nav-link:hover,.offcanvas .nav-link.active, .offcanvas .nav-item.active a {
	color: #126b93;
}

/******************************/

@media(min-width: 768px) {

	nav.navbar .container {
		height: 100px;
	}

	nav.navbar.shrink .container {
		height: 80px;
	}

	nav.navbar .logo img {
		max-height: 180px;
	}

	nav.navbar.shrink .logo img {
		max-height: 120px;
	}

    .offcanvas {
        width: 50% !important;
    }

}

@media(min-width: 1200px) {

    .offcanvas {
        width: 400px !important;
    }


}