@font-face {
    font-family: "yoshi";
	src: url('polices/lettreyoshi.ttf');
}

@font-face {
    font-family: "mario";
	src: url('polices/lettremario.ttf');
}

@font-face {
    font-family: "doctor";
	src: url('polices/Doctor_Soos_Light_1.1.ttf');
}

@media screen and (min-width: 768px) and (max-width: 1024px){

	.dim{
		margin-top: 55px;
		padding-left: 20px;
		padding-right: 20px;
}
}

.container-fluid {
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.titre, .vert{
    background-color: #12990e;
    color: white;
    margin-top: 80px;
    padding-top: 80px;
    padding-bottom: 80px;
    font-family: mario;
}

.texte h1{
    padding-top: 20px;
    font-family: mario;
    text-align: center;
}

.texte {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    font-family: doctor;
    font-size: 1.5em;
    text-align: justify;
    background-color: #12990e;
    color: white;
}

.presjeu{
		height: auto;
		padding-top: 1.3em;
		padding-left: 20px;
		padding-right: 20px;
}

.jeujacket{
	  padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
  }

.card {
    max-width: 100%;
    height: auto; 
		text-align: center;
		background-color: #12990e;
		margin-top: 20px;
		margin-bottom: 20px;
}

.card-body{
	padding-top: 0px;
}

.texte h1 {
    font-family: doctor;
}

h5 {
		font-size: 1.8em;
		color: white;
}

h2{
    text-align: center;
    font-family: mario;
}

.consolejeu {
    background-color: rgb(253, 203, 109);
    padding-bottom: 50px;
		padding-top: 50px;
}

.console {
    background-image: url('images/babyyoshi.gif'),url('images/switch2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 78%, auto 100%;
		height: 300px;
		position: relative;
}


/* bouton achat*/


.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(255,257,153,0.75);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
}

.modal{
  width:600px;
	height:auto;
  display:block;
  margin:50% 0 0 -300px;
  position:absolute;
  top:50%; left:50%;
  background:#fff;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal{
  margin-top:-200px;
	opacity:1;
}

.head{
  width:100%;
  height:70px;
  padding:1.5em 5%;
  overflow:hidden;
  background:#12990e;
}

.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
}

.btn-close::before, .btn-close::after{
  content:'';
  width:32px;
  height:6px;
  display:block;
  background:#fff;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
	padding:5%;
}

.jeuja p{
	font-family: mario;
	color: crimson;
	padding-top: 5%;
	font-size: 20px;
}



/* end bouton achat */

.bg-circle
   {
     display: inline-block;
     width: 60px;
     height: 60px;
     padding: 14px 4px;
     color: #ececec;
     text-align: center;
		 border-radius: 50%;
   }
   
   .bg-circle-outline
   {
     width: 50px;
     height: 50px;
     color:smoke;
     padding: 8px 2px;
     border: 2px solid;
     border-color: smoke;
     border-radius: 50%;
   }
   
   
   .bg-circle a, a:hover, .media a:focus
   {
     text-decoration: none !important;
     outline: none;
     color: #ececec;
   }

   .bg-circle-outline a, a:hover, .media a:focus
   {
     text-decoration: none !important;
     outline: none;
     color: #ececec;
   }
  
   .page-footer {
		 background-image: url('images/bgred.jpg');
		 font-family: yoshi;
     
}
.page-footer p{
	font-family: doctor;
}
	
 .btn
{
	color: white;
	background-color: crimson;
  font-family: "mario";
	font-size: 15px;
	padding-right: 25px;
	padding-left: 20px;
  padding-top: 20px;
	padding-bottom: 18px;
	text-align: center;
  
}

.buttoncenter
{
  margin-right: auto;
	margin-left: auto;
}

.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
  @keyframes heartbeat {
	from {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform-origin: center center;
			  transform-origin: center center;
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	10% {
	  -webkit-transform: scale(0.91);
			  transform: scale(0.91);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	17% {
	  -webkit-transform: scale(0.98);
			  transform: scale(0.98);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	33% {
	  -webkit-transform: scale(0.87);
			  transform: scale(0.87);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	45% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
}

@font-face{
    font-family: "mariofont";
    src : url("polices/lettremario.ttf");
  }
	.navbar-toggler{
    width: 47px;
    height: 34px;
    border:none;
}

.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: rgb(253, 203, 109);
    margin-bottom: 5px;
}

.nav-link
{
	font-family: "mariofont";	
	color: rgb(253, 203, 109);
}

.nav-link:hover
{
	color: #12990e;
}

.navbar
{
	background-image:url("images/bgred.jpg");
	padding-top: 0px;
	padding-bottom: 0px;
}

.navbar-toggler
{
	color: rgb(253, 203, 109);	
}

.container-fluid
{
	padding-left: 0px;
	padding-right: 0px;
}

.element:hover {
	cursor: pointer;
	}

	.translate {
		transition-property: top;
		-webkit-transition-property: top;
		transition-duration: .5s;
		transition-timing-function: ease-out;
		top: 0;
		position: relative;
		}
		
	.translate:hover {
		top: 30px;
        }
        
.img-circle
{
    padding-left: 30px;
}

.bounce-left {
	-webkit-animation: bounce-left 0.8s both;
	        animation: bounce-left 0.8s both;
}

@-webkit-keyframes bounce-left {
	0% {
	  -webkit-transform: translateX(-48px);
			  transform: translateX(-48px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	  opacity: 1;
	}
	24% {
	  opacity: 1;
	}
	40% {
	  -webkit-transform: translateX(-26px);
			  transform: translateX(-26px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	65% {
	  -webkit-transform: translateX(-13px);
			  transform: translateX(-13px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	82% {
	  -webkit-transform: translateX(-6.5px);
			  transform: translateX(-6.5px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	93% {
	  -webkit-transform: translateX(-4px);
			  transform: translateX(-4px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87%,
	98% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	100% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	  opacity: 1;
	}
  }
  @keyframes bounce-left {
	0% {
	  -webkit-transform: translateX(-48px);
			  transform: translateX(-48px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	  opacity: 1;
	}
	24% {
	  opacity: 1;
	}
	40% {
	  -webkit-transform: translateX(-26px);
			  transform: translateX(-26px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	65% {
	  -webkit-transform: translateX(-13px);
			  transform: translateX(-13px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	82% {
	  -webkit-transform: translateX(-6.5px);
			  transform: translateX(-6.5px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	93% {
	  -webkit-transform: translateX(-4px);
			  transform: translateX(-4px);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87%,
	98% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	100% {
	  -webkit-transform: translateX(0px);
			  transform: translateX(0px);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	  opacity: 1;
	}
}