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

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

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

.container-magie p {
	margin:0px auto 10px auto;
	font-size: 16px;
}

.centrage {
	display:inline-block;
	width: 100%;
	background: #;
}
.col-1 {
	display:inline-block;
	float: left;
	text-align:left;
	width:70%;
	background: #;
}
.col-1 p {
	margin:0px auto 10px 20px;
}
.col-2 {
	display:inline-block;
	width:30%;
	height: 100%;
	text-align:center;
	background: #;
}

img {
	width: 60%;
	padding: 5%;
	background: #fff;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	border-radius:10px;
}

.bouton-clic {
	border:1px solid #D9D712;
	padding:5px;
	border-radius:10px;
	width:auto;
	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-clic:hover {
	border:1px solid #800CCE;
}
.clic-rouge {
	border:1px solid #D9D712;
	padding:5px 10px;
	border-radius:25px;
	width:auto;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	color:#fff;
	margin: 10px auto ;
	text-align: center;
	background: #AB0C0E;
	cursor: url('../../../assets/design/icones-site/select.cur'), pointer;
}
.clic-noire {
	border:1px solid #D9D712;
	padding:5px 10px;
	border-radius:25px;
	width:auto;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	color:#fff;
	margin: 10px auto ;
	text-align: center;
	background: #000;
	cursor: url('../../../assets/design/icones-site/select.cur'), pointer;
}

.bouton-clic p, .clic-rouge p, .clic-noire p {
	margin:0px auto;
}

.rouge
{
   color: #B1272D;
   font-size:20px;
}

.noire
{
   color: #000;
   font-size:20px;
}

b {
	font-size: 20px;
	font-weight: 200;
}
b2,b3 {
	font-size: 20px;
	font-weight: 200;
	text-decoration: underline;
}

.fond-rouge
{
   background: #AB0C0E;
   padding: 0px 3px 0px 3px;
   color:#fff;
}

.fond-noir
{
   background: #000;
   padding: 0px 3px 0px 3px;
   color:#fff;
}
.calcul {
margin: 10px auto;
text-align: center;
padding: 5px;
width: 80%;
background: #482;
border-radius:10px;
}

.calcul p {
	margin:0px auto 5px auto;
}
.calcul span p {
	margin:0px auto 5px auto;
	font-size: 13px;
	font-style: italic;
}


.dizaine
{
   background: #726;
   padding: 0px 3px 0px 3px;
   color:#fff;
}

.unite
{
   background: #E37200;
   padding: 0px 3px 0px 3px;
   color:#fff;
}
.choix {
	display:inline-block;
	position: relative;
	background: url("images/dos-carte.png") no-repeat center center;
	background-size: 190px 250px ;
	height: 250px;
	width:190px;
	padding: 0px;
}
ul {
	display:inline-block;
	width: 100%;
     font-size: 20px;
     font-weight: 800;
     text-align: center;
		padding: 0;
}

li {
     display:inline-block;
     list-style: none;
     width: 40px;
     height:40px;
     padding-top: 15px;
     margin-bottom: 10px;
     border: 5px solid #fff;
     border-radius:5px;
     color: #000;
     background: #E37200;
     box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
}

span li {
     display:inline-block;
     list-style: none;
     width: 40px;
     height:40px;
     padding-top: 15px;
     margin-bottom: 10px;
     border: 5px solid #fff;
     border-radius:5px;
     color: #000;
     background: #726;
     box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
}
li:hover {
     background: #fff;
     border: 5px solid #E37200;
}
span li:hover {
     background: #fff;
     border: 5px solid #726;
}
.c2{color:#fff;}
.c1{color: #7FA609;}

 @media (max-width: 700px) {
 	.col-1{
	float: none;
	width:100%;
	background: #;
}

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

 	.col-2 {
	float: none;
	width:100%;
}
img {
	width: 25%;
	padding: 2%;
	background: #fff;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	border-radius:10px;
	margin-top: 15px;
	}
}
 @media (max-width: 480px) {
 	.container-magie {
	padding: 0;
}
 	.container-magie p{
	font-size: 14px;
	line-height: 16px;
}
 	.col-1 {
	background: #;
	text-align: justify;;
}
 	.col-2 {
	display: none;
}
 	.col-2.extra {
	display:inline-block;;
}

.calcul {
width: auto;
}

b, b2,b3, .noire, .rouge {
	font-size: 16px;
	font-weight: 200;
}

img {
	width: 40%;
	padding: 2%;
	background: #fff;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	border-radius:10px;
	margin: 0px auto 15px auto;
	}
	
.col-1	img {
	width: 40%;
	padding: 2%;
	background: #fff;
	box-shadow:5px 10px 5px 0 rgba(0,0,0,0.3);
	border-radius:10px;
	margin: 0px auto 15px 30%;
	}
.bouton-clic {
	padding:5px 10px;
	border-radius:25px;
	width:auto;
	margin: 20px auto auto auto;
	border:1px solid #D9D712;
	font-size: 14px;
	line-height: 14px;
}
.bouton-clic:hover {
	border:1px solid #800CCE;
}
	
	
	 .houdini-480 {
     display: none;
     }
}

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