@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;

}

p { font-size :16px;}


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

}

.container-magie {
	display:inline-block;
	width:100%;
}

.container-magie span p {
	margin-top: -5px;
	font-style: italic;
	font-size: 14px;
}

.container-magie > span img {
	display: inline-block;
	height: 50%;
	margin-top: 5%;
	margin-bottom: 15px;
	border-radius:10px;
	box-shadow:15px 15px 15px 0 rgba(0,0,0,0.3);
}

.centrage {
	display:inline-block;
	width: auto;
	margin-top: 6%;
	background: #;
}
.centrage-2 {
	display:inline-block;
	width: auto;
	margin-top: 0;
	background: #;
}
.centrage-2 p{
	margin-top: 0;
}

.col-1 {
	display:inline-block;
	float: left;
	text-align:left;
	width:70%;
	background: #;
	padding: 0;
	margin: 0;
}

.col-1 p {
	margin:0px auto 10px auto;
}
.col-1 span p {
	font-style: italic;
	font-size: 20px;
}
b {
	font-size: 20px;
	font-weight: 600;
}

#intro {
	display: block;
	height: 50px;
	text-align: left;
	padding-top: 0;
}

#hal {
	display:inline-block;
	width:150px;
	height: 120px;
	background: url("images/hal.png") no-repeat top center;
	background-size: 100% 100%;
	font-size: 35px;
	color: #fff;
	text-align: center;
	padding-top: 70px;
	cursor: url('../../../assets/design/icones-site/select.cur'), pointer;
}

#texte-hal {
	display:block;
	width:150px;
	height: 120px;
	cursor: url('../../../assets/design/icones-site/select.cur'), pointer;

}

#hal-2 {
	width:210px;
	height: 220px;
	background: url("images/hal.png") no-repeat top center;
	background-size: 100% 100%;
	font-size: 22px;
	line-height: 20px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	padding-top: 50px;
	margin: 5% auto 15px auto;
	cursor: url('../../../assets/design/icones-site/arrow.cur'), default;
}

#texte-hal-2 {
	padding: 30px;
	cursor: url('../../../assets/design/icones-site/arrow.cur'), default;
}

#cartes-container {
	text-align: left;
	display: block;
	background:#005214;
}
#cartes-container span p {
	font-style: italic;
	font-size: 16px;
}

ul {
     width: 100%;
     height: 100%;
     margin: 0 0;
     padding: 0;
}

li {
     list-style: none;
     float: left;
     width: 4%;
     min-width: 22px;
     height: 5%;
     padding: 2px 5px;
     margin: 0;
     display: block;
     border: 1px dotted #000;
     color: #fff;
     text-align: center;
     background: #482;
     font-size: 14px;
}

li span {
     color: #D9D712;
     display: block;
     font-size: 12px;
}

#conclusion {
	display: block;
}

.bouton-continuer {
	display: block;
	border:1px solid #D9D712;
	padding:10px;
	border-radius:10px;
	width:350px;
	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;
}

@media (max-width: 600px) {
	.container-magie {
	padding: 0px;
}
	.container-magie p {
	margin:0px auto 5px auto;
	line-height: 18px;
	font-size: 14px;
}
	.container-magie > span img {
	margin-top: 15%;
	width: 60%;
	
	}
.centrage {
	margin-top: 0;
}
	
	p, .fin p {
		line-height:15px;
	}
	b {
	font-size: 16px;
}
	
	#intro {
	height: auto;
}
	.col-1 {
	float: none;
	width:100%;
	padding: 0px;
}
#hal {
	margin: 15px auto 15px auto;
}

#hal-2 {
	margin: 15% auto 15px auto;
}

ul {
     width: 100%;
     margin-top: 20px;
}
li {
     list-style: none;
     width: 30px;
     padding: 2px 5px;
     margin: 0;
     display: block;
     border: 1px dotted #000;
     color: #fff;
     font-size: 18px;
}

li span {
     color: #D9D712;
     font-size: 16px;
}

#conclusion {
	margin-top: 10px;
}

.bouton-continuer {
	padding:5px 10px;
	border-radius:25px;
	width:auto;
	margin: 20px auto auto auto;
	border:1px solid #D9D712;
	font-size: 14px;
	line-height: 14px;
}
.bouton-continuer:hover {
	border:1px solid #800CCE;
}
	 .houdini-600 {
     display: none;
     }

}


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