/*
 *  Main navigation
 */

.navigation {
    background-color: #675aa6;
    font: 12pt 'proximaNovaRegular' !important;
}

/* Mobile menu font size */
@media (min-width: 768px) and (max-width: 991px) {
    .navigation {
        font-size: 10pt !important;
    }
}

.navigation nav.main ul li a:active {
    opacity: 1;
}

.navigation nav.main ul li i {
    min-height: 60px;
    padding-top: 21px;
    width: 60px;
    background-color: #f5f5f5;
    color: #675aa6;
}

/* Mobile only */
@media (max-width: 767px) {
    .navigation nav.main ul li a {
        height: 60px;
        padding: 21px 40px 0 15px;
    }
}

/* Tablet+ */
@media (min-width: 768px) {
    .navigation nav.main {
		background-color: #ffffff;
		top: 130px;
	}

    /* Remove orange background color */
    .navigation nav.main ul > li:hover {
        background-color: #f5f5f5 !important;
    }
    
    /* Hover color not showing bug */
    .navigation nav.main ul > li:not(.has-child) a:not(.active):hover {
        background-color: rgba(24,24,24,0.1);
    }
	
	.navigation nav.main ul li > a,
	.navigation nav.main ul li > a.active,
	.navigation nav.main ul li > a:hover {
		color: #675aa6;
		font-family: 'proximaNovaBold';
	}

    /* Left line color correction */
    .navigation nav.main ul li > a::before {
        background-color: #bbbbbb !important;
    }
	
    .navigation nav.main ul li > a.active,
    .navigation nav.main ul li > a.active:hover {
        color: #675aa6;
		opacity: 1;
	}

    .navigation nav.main ul li > .ion-chevron-down,
    .navigation nav.main ul li > .ion-chevron-up {
        color: #675aa6 !important;
    }
	
	.navigation nav.main ul li i {
		color: #675aa6;
	}

    .navigation nav.main ul li ul {
        background-color: #f5f5f5 !important;
        border-top: 1px solid #bbbbbb;
    }
}

/*
 *  Sub navigation
 */

nav.sub .heading {
    font: 12pt 'proximaNovaRegular' !important;
}

nav.sub ul li a {
    color: #616161;
    font: 10pt 'proximaNovaRegular' !important; /* mobile */
}

nav.sub ul li a:focus,
nav.sub ul li a:hover,
nav.sub ul li.active > a {
    color: #675aa6;
}

/* Remove animation effect */
nav.sub ul li a {
    transition: none !important;
}
nav.sub ul ul li a:focus,
nav.sub ul ul li a:hover {
    padding-left: 10px;
}
nav.sub ul li a:focus,
nav.sub ul li a:hover {
    padding-left: 0;
}