cannabinieri_web_actix/templates/assets/css/nav.css

#nav {
	max-height: 0; }

.header {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
}

.logo a {
    display: block;
    position: sticky;
    z-index: 2;
}

.logo a img {
    display: block;
    height: 15vh;
    padding-top: 2vh;
    padding-left: 2vw;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5vw;
}

.navigation input:checked ~ .menu {
    right: 2vw;
	z-index: 397;
}

.menu {
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: -90vw;
    background: #fff;
    opacity: 90%;
    width: 70vw;
    height: 100%;
    padding-top: 11vh;
    z-index: 1;
    transition: .5s;
    margin: 0;
    padding-right: 5vw;
	font-family: 'IBMPlexMono', sans-serif;    
	
}

.menu li {
    list-style-type: none;
    width: 100%;
}

.menu li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 1.3vh 0 2vh 0;
    line-height: 1;
    font-size: 2.35vh !important;
    text-align: right;
    box-shadow: 0 .5vw 0 -0.35vw #D8D8D8;
    text-transform: uppercase;
    transition: .3s;
	font-family: 'IBMPlexMono', sans-serif;    
	position: relative;
	z-index: 200;
}


.hamburger {
    position: relative;
    /* width: 5vw; */
    height: .5vh;
    background: #000;
    cursor: pointer;
    z-index: 2;
    transition: .3s;
}

.hamburger:before,
.hamburger:after {
    content: "";
    position: absolute;
    height: 4px;
    right: 0;
    background: #000;
    transition: .3s;
}

.hamburger:before {
    top: -1vh;
    width: 5vw;
}

.hamburger:after {
    top: 1vh;
    width: 5vw;
}

.toggle_menu {
    position: absolute;
    width: 3.5vw;
    height: 5.5vh;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    top: unset;
    left: unset;
	z-index: 400;
	right: 5vw;
}

.navigation input:checked ~ .hamburger {
    background: transparent;
	z-index: 398;
}

.navigation input:checked ~ .hamburger::before {
    top: 0;
    transform: rotate(-45deg);
    width: 5vw;
	 background-image: linear-gradient(to bottom right, #fdfd96, #b0afd0, hsl(286,100%,91%));
}

.navigation input:checked ~ .hamburger::after {
    top: 0;
    transform: rotate(45deg);
    width: 5vw;
    
}

.dropdown {

	z-index: 201;

}

.dropdown:hover ~ .top{
	color: #d2c0e7 !important;
	transition: 1s ease; 
}


.dropdown:active ~ .top{
	color: #d2c0e7 !important;
	transition: 1s ease; 
}




.sub_1 {
	font-size: 3vh !important;
	box-shadow: none !important;
	cursor: pointer;
}

.sub_1:hover, .sub_1:active {
	color: #e59ebc;
	transition: 1s ease;
}


.sub_2{
	font-size: 3vh !important;
	cursor:pointer;
}

.sub_2:hover, .sub_2:active {
	color: #9be7c6;
	transition: 1s ease;
}

.dropdown {
	right: 0;
	top: unset;
	left: unset;
	height: 5vh;
	min-width: 20vw;
}

.down {
	display: none;
}

.dropdown:checked ~ .down {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
    .menu {
        width: unset;
    }

    .menu li a {
        font-size: 4vh;
    }
}

@media (min-width: 1024px) {

	.navigation input:checked ~ .menu {
		right: 0;
		top: 5vh;
	}

	.navigation {
		top: 5vh;
	}

}

@media (min-width: 1280px) {
	.navigation input:checked ~ .menu {
		right: 2vw;
	}
}