/* Use this class to add a red shadow on hover to elements */
.shadow-transform { 
	transition: transform 300ms cubic-bezier(.5,.01,.75,1);
}

.shadow-transform::after { 
	width: 100%;
	height: 100%;
	background-color: rgb(232, 46, 33, 1);
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px; 
	right: 0px;
	bottom: 0px;
	z-index: -5;
	transition: transform 300ms cubic-bezier(.5,.01,.75,1);

}

.shadow-transform:hover { 
	transform: translate(-15px, -15px);
}
.shadow-transform:hover::after { 
	transform: translate(30px, 30px);
}

.split { 
    background: linear-gradient(0deg, rgba(5,5,5,1) 0%, rgba(5,5,5,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}

/* Remove Footer */
#footer { 
    display: none; 
}


/*
//  Media Queries
//  The following styles are used to define additional responsive styles to give
//  more control over some of the elements than our default breakpoints allow.
*/

@media screen and (max-width: 1450px) {
    .primary-nav * .nav-item * a { 
        font-size: 0.9375rem;
        padding: .25rem!important;
    }
}

@media screen and (max-width: 1160px) {
    .primary-nav * .nav-item * a { 
        font-size: 0.875rem;
        padding: .25rem!important;
    }
    .secondary-nav * .nav-item * a { 
        font-size: .625rem;
        padding: .125rem!important;
    }
}

@media screen and (min-width: 815px) and (max-width: 920px) {
    .primary-nav * .nav-item * a { 
        font-size: .75rem;
        padding: .125rem!important;
    }
    .secondary-nav * .nav-item * a { 
        font-size: .55rem;
        padding: .125rem!important;
    }
    .utility {
        margin-bottom: 2rem!important;
    }
}