/* Optional: For 6 quick nav items or less above 1440px use this CSS. And be sure to update the count for 6 or less items in the slick script located in homepage custom code. This is to display the left and right quick nav sides flush with no navigation arrow gaps */
/* @media (min-width: 1441px) {.quickNav .slick-list, .quickNav .slick-track { margin: 0 !important; }} */
.quickNav {
overflow: hidden; text-align: center;
}
.quickNavInner1,
.quickNavInner2,
.quickNavInner3,
.quickNavInner4,
.quickNavInner5,
.quickNavInner6 {
opacity: 0;
}
.quickNavInner1 {
animation: slideIn .25s ease-in 1 forwards;
}
.quickNavInner2 {
animation: slideIn .25s ease-in .10s 1 forwards;
}
.quickNavInner3 {
animation: slideIn .25s ease-in .25s 1 forwards;
}
.quickNavInner4 {
animation: slideIn .25s ease-in .40s 1 forwards;
}
.quickNavInner5 {
animation: slideIn .25s ease-in .55s 1 forwards;
}
.quickNavInner6 {
animation: slideIn .25s ease-in .70s 1 forwards;
}
@keyframes slideIn {
from {
opacity: 0; transform: translateY(10px);
}
to {
opacity: 1; transform: translateY(0);
}
}
.quickNav .slick-track {
display: flex;
}
.quickNav .quickNavItem a {
display: block; padding: 30px 10px; transition: all 250ms ease-in-out; height: 100%; position: relative;
}
.quickNav .quickNavItem a:hover {
background-color: var(--cta-color);
}
.quickNav .quickNavItem {
height: auto !important;
}
.quickNavIcon {
margin-left: auto; margin-right: auto; margin-bottom: 15px;
}
.quickNavItem,
.quickNavIcon .hse,
.quickNav .quickNavItem a h3 {
transition: all .2s ease-in-out;
}
.quickNavIcon .hse {
color: var(--cta-color); font-size: 45px;
}
.quickNav .quickNavItem a:hover .hse {
color: var(--main-color);
}
.quickNav h3 {
text-transform: uppercase;
}
.quickNav .quickNavItem a:hover h3 {
color: var(--main-color);
}
.quickNav .slick-prev:before,
.quickNav .slick-next:before {
color: #fff; font-family: "FontAwesome"; transition: all .2s ease-in-out;
}
.quickNav .slick-prev:before {
content: "\f104";
}
.quickNav .slick-next:before {
content: "\f105";
}
.quickNav {
display: none;
}
@media (max-width: 1199px) {
.quickNav h3 {
font-size: 16px;
}
}
@media (min-width: 992px) {
.quickNav .quickNavItem: hover {
background-color: var(--cta-hover);
}
}
@media (min-width: 540px) {
.quickNav .slick-list {
margin: 0 75px;
}
.quickNav .slick-prev,
.quickNav .slick-next {
width: 75px;
}
}
@media (max-width: 539px) {
.quickNav .slick-list {
margin: 0 55px;
}
.quickNav .slick-prev,
.quickNav .slick-next {
width: 55px;
}
}