@media all {
	nav a {
		display: block;
		text-decoration: none;
	}

	nav ul,
	nav li {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	nav a {
		display: block;
		text-decoration: none;
	}

	nav a:hover,
	nav a:visited {
		text-decoration: none;
	}
}

/* Ecrane mari (min-width: 980px) */
@media (min-width: 981px) {

	/*begin meniu rapid*/
	.meniurapid {
		/* margin-bottom: 7.2em; */
		padding: 0;
		font-family: sans-serif;
		/* we can change font style by using the font-familiy css tag */
		background: aqua;
		/* you can change the background color of body using background css tag */

	}

	.meniurapid ul {
		position: absolute;
		top: 0em;
		background: #fff;
		display: flex;
		width: 100%;
		height: 7.2em;
		justify-content: center;


	}

	/* Style the links inside the navigation bar */
	.meniurapid ul li {
		list-style: none;
		text-align: center;
		display: block;
		border-right: 1px solid rgba(0, 0, 0, 0.2);
		align-content: end;
	}

	.meniurapid ul li:last-child {
		border-right: none;
	}

	.meniurapid ul li a {
		text-decoration: none;
		/* width: auto; */
		/* min-width: 15em; */
		display: block;
		width: 11em;
	}

	/* Style the icon inside the navigation bar */
	.meniurapid ul li a .icon {
		width: 40px;
		/* changing the width of the icon */
		height: 40px;
		/* changing the height of the icon */
		text-align: center;

		overflow: hidden;
		margin: 0 auto 10px;

	}

	/* set the size, height, width of the icon*/
	.meniurapid ul li a .icon .fa {
		width: 100%;
		height: 100%;
		line-height: 40px;
		font-size: 34px;
		transition: 0.5s;
		/* adding the transition to make it more attractive */
		color: #3C3D37;
	}

	/* Change the color of icon on hover */
	.meniurapid ul li a .icon .fa:last-child {
		color: rgb(47, 0, 255);
	}

	/* style the color and transform of the icon on hover */
	.meniurapid ul li a:hover .icon .fa {
		transform: translateY(-100%);
		/* translate y to add the hover effect */
	}

	.meniurapid ul li a .name {
		position: relative;
		height: 3em;
		width: 100%;
		display: block;
		overflow: hidden;
		/*make ul li a .name overflow is hidden*/
	}

	/*style the font size and set transition of the navigation menu*/
	.meniurapid ul li a .name span {
		display: block;
		position: relative;
		color: #000;
		font-size: 1em;
		/* changing font size */
		line-height: 20px;
		transition: 0.5s;
		/* adding the transition to make it more attractive */

	}

	/*set and change position, top, width, left, height color of the 'class'.name span:before*/
	.meniurapid ul li a .name span:before {
		content: attr(data-text);
		position: absolute;
		top: -100%;
		width: 100%;
		left: 0;
		height: 1005;
		color: rgb(47, 0, 255);


	}

	/*style hover effect of ul li a .name span */
	.meniurapid ul li a:hover .name span {
		transform: translateY(2.7em);
	}


	.menu-rapid {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #01738C;
		color: white;
		transform: translateY(-100%);
		transition: transform 0.2s;
		list-style: none;
		padding-top: 5%;
		text-align: center;
	}

	.showMenu-rapid {
		transform: translateY(0);
	}

	.menu-rapid li {
		display: inline-block;
		font-size: 1em;
		width: 100%;
		text-align: center;
		line-height: 2em;
	}

	.menuLink-rapid {
		display: block;
		color: white;
		text-decoration: none;
	}

	.menuLink-rapid:hover {
		color: #C0996E;

	}

}

/* Ecrane medii (641px - 980px) */
@media (min-width: 641px) and (max-width: 980px) {

	/*begin meniu rapid*/
	.meniurapid {
		margin-bottom: 7em;
		padding: 0;
		font-family: sans-serif;
		/* we can change font style by using the font-familiy css tag */
		background: aqua;
		/* you can change the background color of body using background css tag */

	}

	.meniurapid ul {
		position: absolute;
		top: 0em;
		background: #fff;
		display: flex;
		width: 100%;
		height: 7.2em;
		justify-content: center;


	}

	.meniurapid ul li {
		align-content: center;
		/* max-width: 17rem; */
		width: 8em;
		list-style: none;
		text-align: center;
		display: block;
		border-right: 1px solid rgba(0, 0, 0, 0.2);
	}

	.meniurapid ul li:last-child {
		border-right: none;
	}


	.meniurapid ul li a {
		text-decoration: none;
		width: 7em;
		/* min-width: 12em; */
		display: block;
	}

	.meniurapid ul li a .icon {
		width: 5rem;
		height: 5rem;
		text-align: center;
		overflow: hidden;
		margin: 0 1rem 0.5em;
	}

	/* set the size, height, width of the icon*/
	.meniurapid ul li a .icon .fa {
		width: 100%;
		height: 100%;
		line-height: 40px;
		font-size: 34px;
		transition: 0.5s;
		/* adding the transition to make it more attractive */
		color: #3C3D37;
		align-content: center;
	}

	/* Change the color of icon on hover */
	.meniurapid ul li a .icon .fa:last-child {
		color: rgb(47, 0, 255);
	}

	/* style the color and transform of the icon on hover */
	.meniurapid ul li a:hover .icon .fa {
		transform: translateY(-100%);
		/* translate y to add the hover effect */
	}


	.meniurapid ul li a .name {
		/* margin-left: -2.5em; */
		/* font-size: 0.7em; */
		position: relative;
		height: 1.5em;
		width: 100%;
		display: block;
		overflow: hidden;
		top: -1em;
	}

	.meniurapid ul li a .name span {
		display: block;
		position: relative;
		color: #000;
		font-size: 0.7em;
		/* line-height: 20px; */
		transition: 0.5s;
	}

	/*set and change position, top, width, left, height color of the 'class'.name span:before*/
	.meniurapid ul li a .name span:before {
		content: attr(data-text);
		position: absolute;
		top: -100%;
		width: 100%;
		left: 0;
		height: 1005;
		color: rgb(47, 0, 255);


	}

	/*style hover effect of ul li a .name span */
	.meniurapid ul li a:hover .name span {
		transform: translateY(20px);
	}




}

/* Ecrane mici (max-width: 640px) */
@media (max-width: 640px) {
	.meniurapid {
		display: none;
	}
}