@font-face{
    font-family: "mariofont";
    src : url("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;
	}
  }