@import "variables.css";

@media screen and (max-width:715px) {
	.dropdownmenu a {
    font-size: 18px;
    color: var(--text-principal);
    text-decoration: none;
  }
}

@media only screen and (min-width:716px) and (max-width:5000px) {

	.dropdownmenu {
		width: 1000px;
	}

	.dropdownmenu li {
		float: left;
		position: relative;
		width: auto;
	}

	.dropdownmenu a {
		font-size: 16px;
		color: var(--text-principal);
		display: block;
		padding: 10px 20px;
		text-align: left;
		text-decoration: none;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}

	.dropdownmenu li:hover a {
		background: var(--bg-wave);
		;
	}

	#submenu {
		left: 0;
		opacity: 0;
		position: absolute;
		top: 35px;
		visibility: hidden;
		z-index: 1;
		width: 250px;
	}

	li:hover ul#submenu {
		opacity: 1;
		top: 40px;
		visibility: visible;
	}

	#submenu li {
		float: none;

		min-width: 180px;
		text-align: left;
	}

	#submenu a:hover {
		background: var(--bg-wave);
	}

	#submenu a {
		background-color: var(--bg-wave);
		;
	}
}


.dropdownmenu ul {
	list-style: none;
	width: 100%;
}

.dropdownmenu ul,
.dropdownmenu li {
	margin: 0;
	padding: 0;
}