@font-face {
  font-family: 'JMHTypewriter';
  src: url('../../../assets/css/fonts/JMHTypewriter/JMHTypewriter.eot?#iefix') format('embedded-opentype'),  url('../../../assets/css/fonts/JMHTypewriter/JMHTypewriter.woff') format('woff'), url('../../../assets/css/fonts/JMHTypewriter/JMHTypewriter.ttf')  format('truetype'), url('../../../assets/css/fonts/JMHTypewriter/JMHTypewriter.svg#JMHTypewriter') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	background:#005214 url(images/fond-magie.jpg) repeat;
	font-family:"JMHTypewriter", sans-serif;
	color:#fff;
	text-align:center;
	cursor: url('../../../assets/design/icones-site/arrow.cur'), default;
}



a,a:link,a:visited, a:hover {
	text-decoration:none;
	cursor: url('../../../assets/design/icones-site/select.cur'), pointer;
}
p {
	font-size: 16px;
}

span img {
	width:110%;
	margin:0 auto 20px -15px;
}
.container-magie {
	display:inline-block;
	width:100%;
	padding:0;
	text-align: center;
}

.container-magie p {
	margin:0px 20px 10px 20px;
	text-align: left;
}

.centrage {
	display:inline-block;
	width: auto;
	margin-top:5%;
}
.col-1 {
	display:inline-block;
	float: left;
	text-align: left;
	width:60%;
}

.col-1 p {
	margin:0px auto 10px 20px;
}

.col-2 {
	display:inline-block;
	width:40%;
	text-align: center;
}

.container-magie img {
	width:70%;
}


.reussite-cartes {
	display: inline-block;
	margin: 0 auto 20px auto;
	text-align: center;
}
.reussite-cartes img {
	width:45px;
	border-radius:5px;
	box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5);
	background:#fff url(images/fond-carte.png) no-repeat;
	background-size:cover;
	padding:5px;
	margin: -1px;
}

.bouton-continuer {
	border:1px solid #D9D712;
	padding:10px;
	border-radius:10px;
	width:300px;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	background: #482;
	color:#fff;
	font-size: 16px;
	margin: 15px auto auto;
	text-align: center;
}

.bouton-continuer:hover {
	border:1px solid #800CCE;
}

.carton {
	margin: 20px auto;
}

.carton img {
	width:60px;
	border-radius:5px;
	box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5);
	background:#fff url(images/fond-carte.png) no-repeat;
	background-size:cover;
	padding:3px;
}

.navigation {
	padding-top:20px;
}
.navigation.fin {
	padding-top:30px;
}

.navigation a {
	width:50px;
	height:50px;
	padding:15px;
	background:#482;
	border-radius:50%;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	color:#fff;
	font-size:16px;
	border:3px solid #D9D712;
	margin:auto 15px;
}
.navigation a:hover {
	border:3px solid #800CCE;
}

.retour {
	float:left;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	background:#482;
	border-radius:10px;
	border:1px solid #D9D712;
	color:#fff;
	padding: 2px 10px;
	font-size: 14px;
}
.retour:hover {
	border:1px solid #800CCE;
}

.result  {
	margin-bottom: 15px;
	text-align: center;
}

.result img {
	width:60px;
	border-radius:5px;
	box-shadow:3px 3px 5px 0 rgba(0,0,0,0.5);
	background:#fff url(images/fond-carte.png) no-repeat;
	background-size:cover;
	padding:3px;
}
.zorro-magie {
	display:none;
}
.youpi img {
	width:15%;
	margin: 2% auto 15px auto;
}
.youpi p {
	margin:0px auto 10px auto;
	font-size: 16px;
}
.zut img {
	width:50%;
}

@media (max-width: 991px) { 
.reussite-cartes img {
	width:45px;
}
}

@media (max-width: 767px) { 
		.retour {
		display:none;
	}
		.houdini-magie {
		display:none;
	}
	.zorro-magie {
		display:inline-block;
	}
}

@media (max-width: 480px) {
	p {
	font-size: 15px;
}
.container-magie img {
	margin-bottom:-10px;
}
	.container-magie p {
	margin:0px 5px 10px 7px;
	line-height: 17px;
	text-align: justify;
}	
	.col-1 {
	float: none;
	width:100%;
	margin-top: 20px;
}
.col-1 p {
	margin:0px 5px 10px 5px;
	text-align: justify;
}

.bouton-continuer {
	padding:10px;
	border-radius:25px;
	width:auto;
	margin: 20px auto auto auto;
	border:1px solid #D9D712;
	font-size: 14px;
	line-heigut: 14px;
}
.bouton-continuer:hover {
	border:1px solid #800CCE;
}
.carton {
	margin: 0px auto;
}
	.carton img {
		width:53px;
		margin: 0 1px 1px 0;
	}
	.result a img {
		width:53px;
		margin: 0 1px 1px 0;
	}

.navigation  {
	margin-bottom: 60px;
}
.navigation.fin {
	padding-top:20px;
}
.navigation a {
	width:50px;
	height:50px;
	padding:15px;
	background:#482;
	border-radius:50%;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	color:#fff;
	font-size:14px;
	border:3px solid #D9D712;
	margin:auto 15px;
}
.navigation a:hover {
	border:3px solid #800CCE;
}
	
.youpi img {
	width:50%;
	margin-top: 40px;
}
.youpi p {
	font-size: 18px;
	line-height: 22px;
}

.zut {
	padding-left: 30px;
}
.zut img {
	width:50%;
	margin: 0 auto;
}
	 .houdini-480 {
     display: none;
     }
}


  .zorro-480 {
     display: none;
}
 @media (max-width: 480px) {
     .zorro-480 {
         display: block;
    }
}