/*....  NAV  ...............................................................*/

nav, nav:hover {
    width: 100%;
    z-index: 9993;
	transition: all 0.2s ease-in;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}


    .nav-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
	
	@media screen and (min-width: 768px) {
		.nav-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
		}	
	}
	
	nav .nav-title, nav:hover .nav-title  {
		display: none;
	}

	nav .nav-items, nav:hover .nav-items {
		display: grid;
	}
		

	.nav-container article .menu-container-title, .nav-container article .menu-container-title h4 {
        display: none;
    }

	
    .nav-container article .menu-container, nav-container article .menu-container:hover {
        background: none;
        color: var(--secondary) !important;
        font-size: .8rem !important;
        padding: 0 !important;
    }


    .nav-container article .menu-container h4 {
        text-transform: uppercase !important;
        font-weight: 500 !important;
        font-size: 1.3rem !important;
        padding-bottom: .5rem !important;
    }

    .nav-container article .menu-container div, .nav-container article .menu-container:hover div {
        opacity: 1;
		font-size: 1rem !important;
    }

    .nav-container article .menu-container div a {
        color: var(--primary) !important;
        font-size: 1rem !important;
        margin-right: 1.5rem;
        cursor: pointer;
		display: block;
		padding: .2rem 0;
    }

    .nav-container article .menu-container:hover div a:hover {
        color: rgba(255,255,255,1);
        text-decoration: underline;
    }
	
	

	
@media screen and (min-width: 1200px) {

	nav {
		position: absolute;
		left: 0;
		top: 130px;
		width: 100%;
		z-index: 9993;
		transition: all 0.2s ease-in;
	}

	nav:hover {
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%);
	}



    .nav-container {
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: auto;
    }
	
	nav .nav-title {
		display: grid;
		animation: shownav .4s ease-out;
	}
		nav:hover .nav-title {
			display: none;
		}
		
	nav .nav-items {
		display: none;
	}
		nav:hover .nav-items {
			display: grid;
			animation: shownav .4s ease-out;
		}
		
	@keyframes shownav {
		0% {
			opacity: 0;
			transform: translateY(1rem);
		}
		100% {
			opacity: 1;
			transform: translateY(0rem);
		}
	}

	.nav-container article .menu-container-title {
        background-color: rgba(0,43,75,.7) !important;
		color: var(--text-white) !important;
        font-size: .8rem !important;
        padding: 1rem !important;
        border-radius: 2px !important;
		display: block;
    }
	
	.nav-container article .menu-container-title h4 {
        text-transform: uppercase !important;
        font-weight: 500 !important;
        font-size: 1.1rem !important;
		display: block;
    }
	
    .nav-container article .menu-container {
        background: rgb(0,0,0,.5) !important;
        background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(90, 90, 90,.2 ) 3.5rem, rgba(90, 90, 90,0 ) 3.6rem) !important;
        color: var(--text-white) !important;
        font-size: .8rem !important;
        padding: .5rem !important;
        border-radius: 2px !important;
    }

    .nav-container article .menu-container:hover {
        background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(90, 90, 90,.2 ) 100%) !important;
    }

    .nav-container article .menu-container h4 {
        text-transform: uppercase !important;
        font-weight: 500 !important;
        font-size: 1.1rem !important;
        padding-bottom: .5rem !important;
    }

    .nav-container article .menu-container div {
        opacity: 0;
		padding: 0 0 0 1rem;
        border-left: 3px solid var(--secondary);
    }

    .nav-container article .menu-container:hover div {
        opacity: 1;
    }

    .nav-container article:nth-child(even) .menu-container:hover div {
        border-left: 3px solid var(--primary);
    }

    .nav-container article .menu-container div a {
        color: rgba(255,255,255,.7) !important;
        font-size: .9rem !important;
        margin-right: 1.5rem !important;
        cursor: pointer !important;
		display: inline-block !important;
		padding: 0 !important;
    }

    .nav-container article .menu-container:hover div a:hover {
        color: rgba(255,255,255,1) !important;
        text-decoration: none;
    }
}




@media screen and (min-width: 1400px) {

	nav {
		position: absolute;
		left: 0;
		top: 170px;
		width: 100%;
		z-index: 9993;
		transition: all 0.2s ease-in;
	}
	
	.nav-container article .menu-container {
        background: rgb(0,0,0,.5) !important;
        background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(90, 90, 90,.2 ) 3.5rem, rgba(90, 90, 90,0 ) 3.6rem) !important;
        color: var(--text-white) !important;
        font-size: .8rem !important;
        padding: 1rem !important;
        border-radius: 2px !important;
    }
	
}