@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: space-evenly;
	}

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

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

	/* Style the icon inside the navigation bar */
	.meniurapid ul li a .icon {
		width: 45px;
		/* 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(3em);
	}

	  
  .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: 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;


	}

	.meniurapid ul li {
		align-content: center;
		/* max-width: 17rem; */
		width: 6em;
		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: 6em;
		/* min-width: 12em; */
		display: block;
	}

	.meniurapid ul li a .icon {
		width: 4rem;
		height: 5rem;
		text-align: center;
		overflow: hidden;
		margin: 0 0.6rem 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: .8em;
		width: 100%;
		display: block;
		overflow: hidden;
	}

	.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(10px);
	}




}

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