/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/

.site-header {
	padding: 2% 5%;
	top: 0;
	background-color: #fff;
	z-index: 20;
}

.site-header .etrainu-navigation ul {
	display: inline-block;
    list-style-type: none;
    margin: auto;
    text-align: center;
    padding: 0;
}

.site-header .etrainu-navigation li {
	padding: 10px;
    display: inline-block;
}

.site-branding {
    width: 300px;
    float: left;
    padding: 10px 0 10px 0;
    display: flex;
}

.site-branding .custom-logo {
	height: 100%;
	width: 100%;
}

.site-branding .custom-logo-link {
	align-items: center;
	display: flex;
    margin-right: 10px;
}

nav.etrainu-navigation {
    float: left;
}

.etrainu-navigation ul{
	display: flex;
	justify-content: space-between;
	list-style-type: none;
}

.etrainu-navigation li a{
	text-decoration: none;
	color: #085874;
}

.etrainu-navigation .menu-main-menu {
	padding-left: 0;
}

#masthead a:hover {
	opacity: 0.8;
}

#masthead .headerCart {
    display: block;
    float: right;
    margin: 2% 0;
}

#masthead .headerCart .cart-icon{
    margin-top: 10px;
    display: block;
    float: left;
}

#masthead .headerCart #cart-count {
	margin-top: 10px;
    display: block;
    float: left;
}

#masthead .headerCartIcon {
    padding: 0px 5px;
    width: 30px;
}

#masthead .headerCartIconMobile {
	padding: 0px 5px;
	width: 30px;
	display: none;
}

#masthead .headerCart a{
	color: #085874;
	text-decoration: none;
}

#masthead .headerCart .signIn {
	background-color: #6ebb1f;
    margin: 0 10px;
    border-radius: 7px;
    padding: 2px 10px;
    font-size: 0.90em;
    float: left;
}

#masthead .etrainu-navigation-mobile #menu-main-menu a {
    text-decoration: none;
    color: #085874;
}

#masthead .headerCart .signIn p{
	color: #ffffff;
	margin: auto;
	padding: 7px 15px;
}

#masthead .siteBrandingMobile {
	display: none;
}

#masthead .etrainu-navigation-mobile .burger-menu-close {
	cursor: pointer;
	align-self: flex-end;
}

#masthead .etrainu-navigation-mobile #menu-main-menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#masthead .etrainu-navigation-mobile #menu-main-menu a{
	text-decoration: none;
	color: #000;
}

#masthead .etrainu-navigation-mobile #menu-main-menu li{
	padding: 0.5rem 0;
}

#masthead .etrainu-navigation-mobile {
	width: 0;
	left: 0;
	top: 0;
	height: 100%;
	background-color: white;
	z-index: 10;
	position: fixed;
	overflow-x: hidden;
	transition: 0.3s;
	box-shadow: 0 0 10px #aaaaaa;
}

#masthead .etrainu-navigation-mobile .etrainu-navigation-mobile-content {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}


.admin-bar #masthead .etrainu-navigation-mobile {
	top: 46px;
}

#masthead .etrainu-navigation ul li:last-child {
	display: none;
}



@media only screen and (max-width: 768px) {
	.site-header {
		position: sticky;
		position: -webkit-sticky;
		padding: 15px 15px 0 15px;
	}
    
    .site-branding .custom-logo-link{
        margin: auto;
    }
    
    .site-branding{width: 100%;}

	header#masthead {
		flex-direction: column;
	}

	#masthead .etrainu-navigation {
		display: none;
	}

	#masthead .siteBrandingMobile {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin: 0;
	}
	#masthead .siteBrandingMobile .site-branding {
		display: flex;
        padding-left: 10px;
        width: 40%;
	}
	#masthead .siteBrandingMobile .headerCart {
		display: block;
	}
	#masthead .siteBrandingMobile .headerCart .headerCartIcon {
		display: none;
	}
	#masthead .siteBrandingMobile .headerCart .headerCartIconMobile {
		display: block;
        float: right;
	}
	#masthead .siteBrandingMobile .burger-menu {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#masthead .site-branding {
		display: none;
	}
	#masthead .headerCart{
        width: 10%;
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	#masthead .etrainu-navigation-mobile {
		display: none;
	}
}


@media only screen and (max-width: 600px) {
    #masthead .siteBrandingMobile .site-branding{
        width: 70%;
    }
}


@media only screen and (max-width: 1024px) {
    .site-header{
        padding: 15px 5%;
    }  
}


@media only screen and (min-width: 1200px) {
    .site-header{
        padding: 0 21.5%;
    }  
}