.conteiner{
	margin-top: 20px;
	background-color: #2e4053;
	border-radius: 10px;
	margin-left: 20%;
	width: 60%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
}

a.skip, a.skip:hover, a.skip:visited {
  position: absolute;
  top: -500px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

a.skip:active, a.skip:focus{
  position: static;
  width: auto;
  height: auto;
}

.medium{
	border-top: 5px solid #172A27;
}

.conteiner > h1{
	margin-left: 30px;
	color: #d9d9d9;
}

.conteneur{
	margin: 40px 40px 30px 40px;
	display: flex;
	flex-direction: column;
	align-content: center;
}

.image{
	margin: 0px 40px 0px 40px ;
	width: 90%;
	height: 400px;
	border: 1px solid #fff;
	background-image: url("../imgs/outils_de_voyance.jpg");
	background-size: cover;
}

.amour{
	margin: 0px 40px 0px 40px ;
	width: 90%;
	height: 400px;
	border: 1px solid #fff;
	background-image: url("../imgs/amour.jpg");
	background-size: cover;
}

.argent{
	margin: 0px 40px 0px 40px ;
	width: 90%;
	height: 400px;
	border: 1px solid #fff;
	background-image: url("../imgs/argent.jpg");
	background-size: cover;
}

.talisman{
	margin: 0px 40px 0px 40px ;
	width: 90%;
	height: 400px;
	border: 1px solid #fff;
	background-image: url("../imgs/talisman.jpg");
	background-size: cover;
}

.desc{
	width: 90%;
	color: white;
	text-align: center;
	margin-left: 5%;
}

#maincontent{
  text-align: center;
}

.juste{
	color: white;
}

.description{
	color: white;
	text-align: justify;
}

.bloc {
	padding: 0 5% 0 5%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .conteiner{
  	width: 100%;
  	margin: 0px;
  }
  .desc{
  	text-align: justify;
  }
  .image{
  	width: 90%;
  	height: 200px;
  	margin: 0px 0px 0px 5%;
  	border-width: 1px;
  	margin-bottom: 10px;
  }
  .conteiner > h1{
		width: 90%;
		margin-left: 5%;
		text-align: justify;
		font-size: 21px;
  }
  .medium{
		border-top: 3px solid #172A27;
  }
  .conteneur{
  	width: 90%;
		margin: 0px 0px 0px 5%;
  }
  .amour{
		margin: 0px 5% 0px 5%;
		width: 90%;
		height: 200px;
	}
  .argent{
		margin: 0px 5% 0px 5%;
		width: 90%;
		height: 200px;
	}
	.talisman {
		margin: 0px 5% 0px 5%;
		width: 90%;
		height: 200px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

@media screen and (max-width:1000px) {

  .conteiner{
  	width: 100%;
  	margin: 20px 0px 0px 0px;
  }
}