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

@font-face{
    font-family: "yoshilettre";
    src : url("polices/Doctor_Soos_Light_1.1.ttf");
  }
 
 .wifeyoshi{
    background-image: linear-gradient(67deg, #FF0099 50%, #FF0099 50%, #FF0099 100%);
    background-size: 21.73px 51.19px;
    }

.babyyoshi{
    background-image: linear-gradient(67deg, #2da0ed 50%, #2da0ed 50%, #2da0ed 100%);
    background-size: 21.73px 51.19px;
}

.bowser{
    background-image: linear-gradient(67deg, #ed2d2d 50%, #ed2d2d 50%, #ed2d2d 100%);
    background-size: 21.73px 51.19px;
}

.waluigi{
    background-image: linear-gradient(67deg, #723bad 50%, #723bad 50%, #723bad 100%);
    background-size: 21.73px 51.19px;
}

h1{
    background-size: 11.31px 11.31px;
    text-align: center;
    font-family: mariolettre;
}

p{
    font-family: yoshilettre;
    font-size: 20px;
    color: white;
}

.textep{
    margin-top: 15%;
}

.fondcarte{
    background-color: #FF0099;
    padding: 0;
}

.fondcarte2{
    background-color: #2da0ed;
}

.fondcarte3{
    background-color: #ed2d2d;
}

.fondcarte4{
    background-color: #723bad;
}

html body{
    background-color: rgb(253, 203, 109);
}

.haut {

    word-wrap: break-word;
    width: 100%;
    height: 80px;
    font-size: 3rem !important;
    font-family: "mariolettre";  
}

.slide-right {
	-webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes slide-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }
  @keyframes slide-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
    }
  }

  .fondrose{
    background-color: #fe079d !important;
  }
  
  .fondbleu{
    background-color: #2da0ed !important;
  }

  .fondrouge{
    background-color: #ed2d2d !important;
  }

  .fondviolet{
    background-color: #723bad !important;
  }

.yoshia{
  width: 250px;
  margin-top: 80px;
  padding-top: 80px;
  padding-bottom: 80px;
}

.mx-auto{

} 


.yoshia{
	-webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/* NAVBAR */



.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: "mariolettre";	
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;
}
}


/* BOUTON */

.essaifin
{
  color: white;
  font-family: "mariolettre";
  border: solid;
  padding-right: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
  
}

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


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

.mx-auto
{
    width : 250px;
    height : 250px;

}

h1
{
    font-family: "mariolettre";
}

.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');
     
}
.page-footer p{
	font-family: doctor;
}