.nav{
  position: fixed;
  width: 100%;
  z-index: 800;
}
/*               Hotline nav styles            */
.hotlineColor{
	background-color: white;
	height:30px;
}

.hotline{
	float: right;
	margin-top: 6px; 
	padding-right: 10px;
}
.hotline img, .hotline p{
	display: inline-block;
}
.hotline img{
	width: 20px;
	margin-bottom: -5px;
}
.hotline p{
	font-size: 1em;
	margin-bottom: 0;
  line-height: 0;
}


/*               Navigation styles            */
	.menu{
		height: 55px;
		background-color: #00adef;
		padding: 8px;
		border-bottom: 2px solid white;
	}
	.matelas{
		position: absolute;
	  left: 5%;
	  top: -10px;
	  height: 95px;
	  padding: 35px 5px 0;
	  width: 400px;
	  text-align: center;
	  background-color: #ede837;
	  border: 3px solid white;
	}
	.matelasLogo{
		float: left;
	  width: 100%;
	  margin: 0 auto;
	}
	.matelasLogo img{
		width: 49%;
	  margin: 0 auto;
	}

	nav {
	  float: right;
	  width: calc(100% - 400px);
	  text-align: justify;
	  margin:10px 20px 0;
	  padding-left: 20%;
	}
	nav:after{
		content: "";
	  display: inline-block;
	  width: 100%;
	}
	nav a{
		display: inline;
	}
	nav a:link{
	  color: white;
	  font-weight: bolder;
	  text-transform: uppercase;
	  text-decoration: none;

	}

	nav a:hover{
		border-bottom: 2px solid white;
	}

	nav a:visited{
		color: white;
	}
	.black{
		color: black;
		text-decoration: none;
	}


/*               Footer styles            */


	footer{
	  clear: both;
	  background-color: #00adef;
	  padding: 1.5em 2em 1.5em 0;
	  position: relative;
	  width: 100%;
	  bottom: 0;
	  height: auto;
	}
	footer .left{
	  width: 65%;
	  display: inline-block;
	}
	footer img.viva{
	  float: left;
	  margin-right: 1em;  
	}
	footer img{
	  float: right;
	  text-align: right;
	}
	footer p {
	  font-size: 0.9em;
	  margin-bottom: 0;
	  color: white;
	}
	footer .right{
	  width: 35%;
	  float: right;
	  display: inline-block;
	}
	footer .right p{
	  clear: both;
	  text-align: right;
	}
	footer .right img{
		padding:0 2px;
	}
	footer span{
	  font-family: RobotoBold, Helvetica, Arial, sans-serif;
	}
	.textPadding{
		padding-top: 10px;
	}
	.designFM{
		opacity: 0.5;
	  padding: 15px 0; 
	  text-align: center;
	  clear: both;
	  width: 180px;
	}
	.designFM p{
	  float: left;
	}
	.wrapperFoot{
	  width: 200px;
	  margin: 0 auto;
	}


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

}
@media only screen and (max-width: 980px) and (min-width: 750px) {
	
	nav {
	  padding-left: 13%;
	}

	.menu{
		height: 45px;
		padding: 5px;
	}
	.matelas{
	  height: 85px;
	  width: 370px;
	}

	.matelasLogo img{
		margin-top: -10px;
	}

	.textPadding{
		padding-top: 0px;
	}

	footer .right img{
		width: 45px;
	}
}

@media only screen and (max-width: 750px) and (min-width: 600px){

	.menu{
		height: 45px;
		padding: 5px;
	}
	.matelas{
	  height: 85px;
	  width: 300px;
	}
	nav {
	  width: calc(100% - 320px);
	  padding-left: 5%;
	}

	footer p{
		font-size: 0.8em;
	}
	.textPadding{
		padding-top: 0px;
	}
	footer img.viva{
		width: 100px; 
	}
	.right img{
		width: 40px;
	}

}

@media only screen and (max-width: 600px) and (min-width: 300px){

	.menu{
		height: 45px;
		padding: 5px;
	}
	.matelas{
	  height: 85px;
	  width: 200px;
	}

  nav {
	  width: calc(100% - 220px);
	  padding-left: 10%;
	}

  footer .right{
 	 width:200px;
 	 margin: 10px auto 0;
 	 float: left;
 	 padding-top: 10px;
 	 text-align: left;
 	 border-top: 1px solid #fff;
	}
	footer{
		height: 210px;
		padding-left: 10px;
	}
	footer .left{
		width: 100%; 
	}
	footer p{
		font-size: 0.8em;
	}
	.textPadding{
		padding-top: 0;
		float: left;
	}
	footer img.viva{
		width: 100px;
	}
	.right img{
		width: 40px;
		text-align: left;
	}
	.right a{
		float: left;
	}
	.right p{
		float: left;
	}
	.wrapperFoot{
		display: none;
		margin: 0;
	}

}
@media only screen and (max-width: 450px) {
	.matelas{
		left: 0;
	  height: 85px;
	  width: 100px;
	  text-align: center;
	  padding: 20px 5px 0;
	}
	.matelasLogo img{
		float: left;
		width: 100%;
		padding: 3px 0;

	}
	nav {
	  width: calc(100% - 130px);
	  padding-left: 2%;
	}
	nav a{
		font-size: 0.8em;
		padding-right: 20px;
		border-right: 1px solid white;
	}
	nav a:last-child{
		border-right: none;
		padding-right: none;
	}
	  
}