body{
	margin:0px;
	padding:0px;
	background-color:#efefef;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue","Open Sans",Arial,sans-serif;
}
a{
	text-decoration:none;
	color:black;
}
.width-max-90{
	max-width:90%;
}
.width-full{
	width:100%;
}
.width-150{
	width:150px;
}
.text-center{
	text-align:center;
}
.block{
	display:block;
}
.margin-auto{
	margin:0 auto;
}
.main-menu{
	padding-bottom:15px;
}
.menu-icon{
	vertical-align: middle;
    display: inline-block;
}
.menu-icon img{
	width:200px;
	transition: transform .2s ease;
}
.menu-icon img:hover{
	transform: scale(0.90);
}
.menu-list{
	vertical-align:middle;
	display: inline-block;
	margin-left:5%;
}
.menu-list ul{
	width:100%;
	display:flex;
	list-style-type: none;
}
.menu-list li{
	display:inline-block;
	font-size:15px;
	text-transform:uppercase;
	font-family:Kozuka Gothic Pr6N;
	margin:0px 15px;
	padding: 10px;
	border-radius:5px;
	text-align:center;
	border-bottom:1px solid transparent;
}
.menu-list li:hover{
	box-shadow: 1px 2px 5px grey;
    border-bottom:1px solid black;
    cursor: pointer;
	transition-duration: 350ms;
}
.menu-list li img{
	width:50px;
	height:50px;
}
.text-align-center{
	text-align:center;
}
.margin-top-50{
	margin-top:50px;
}
.color-blue{
	color:blue;
}
.color-green{
	color:#70ad47;
	font-weight:600;
}
.span-icon{
	width:50px;
	vertical-align:middle;
}
.underscore-hover:hover{
	text-decoration: underline;
}
.container {
	min-height:100vh; 
	margin:0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
.content{
	width:80%;
	margin:0 auto;
	font-size:18px;
	text-align: justify;
	padding-top:50px;
	padding-bottom:80px;
}
.content-experiments{
	width:auto;
	margin:0 auto;
	font-size:18px;
	text-align: justify;
	padding-top:10px;
	padding-bottom:80px;
}
.logo-img a{
	margin:0px!important;
}
.logo-img img{
	display:table;
	width:100px;
	height:75px;
	border-radius:8px;
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
#overlay_span{
	line-height:75px;
	float:right;
	font-size:23px;
	cursor:pointer;
	display:none;
	color:black;
	margin-right:10%;
	transition: transform .2s ease;
}
#overlay_span:hover{
	transform: scale(0.85);
}
footer{
	clear:both;
	padding-top:30px;
	padding-bottom:30px;
	background-color:#cccccc;
}
footer p{
	width:60%;
	text-align:center;
	margin:0 auto;
	font-size:12px;
}

.button-quizz{
	margin-top:15px;
	margin-bottom:15px;
	cursor:pointer;
	text-transform:uppercase;
	padding:10px 25px;
	border:1px solid green;
	border-radius:8px;
	text-align:center;
}
.button-quizz:hover{
	background-image:linear-gradient(180deg, white, #70ad47);
	box-shadow:1px 2px 5px black;
	transition-duration: 350ms;
	transform:scale(1.10);
}
.button-quizz:disabled{
	transform:none;
	box-shadow:none;
	background-image:none;
	cursor:default;
}
.active-tick{
	text-shadow:1px 2px 5px grey;
	font-weight:600;
}
.right-answer{
	font-weight:600;
	color:green;
}
.wrong-answer{
	color:#ff704d;
}
.quizz-input:checked + span {
	font-weight: bold;
}
.quizz-input{
	visibility:hidden;
}
.quizz-input:hover + span:hover{
	cursor:pointer;
	text-shadow:1px 2px 10px grey;
}
.wrap-image img{
	padding:10px;
	width:90%;
	text-align:center;
}
.iframe-wrapper{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
/*auth page */
.logged-user{
	padding:10px;
	margin-top:40px;
	margin-bottom:80px;
}
.login-form h3{
	text-align:center;
}
#login-table{
	width:400px;
	padding:15px;
	box-shadow:1px 2px 5px grey;
	margin:10px auto 10px auto;
	border-radius:8px;
}
#login-table input{
	width:90%;
	background-color:transparent;
	padding:10px;
	margin:10px;
	border:1px solid transparent;
	border-bottom:1px solid grey;
	border-radius:8px;
	outline:none;
}
#login-table input:hover,#login-table input:focus{
	box-shadow:1px 2px 3px grey;
	border:1px solid grey;
}
#login-table a:hover{
	font-weight:600;
}
.green-button{
	font-weight:600;
	padding:15px;
	color:black;
	border:none;
	border-radius:8px;
	cursor:pointer;
	background-image:linear-gradient(180deg, white, #70ad47);
}
.green-button:hover{
	background-image:linear-gradient(180deg, #70ad47, white);
	box-shadow:1px 2px 5px #70ad47;
}
.project-table{
	margin:auto;
	width:50%;
	color:white;
}
.project-table select option{
	color:black;
}

.animate{
  -webkit-animation: animate-zoom-auth 0.6s;
  animation: animate-zoom-auth 0.6s
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal input[type="date"]{
	background:#fff url("libraries/calendar-white.png")99% 50%;
	background-size:20px;
	background-repeat:no-repeat;	
	border:none;
	background-color:transparent;
	border:1px solid transparent;
	border-bottom:1px solid white;
}
.modal-content {
    margin: 0;
    display: block;
    max-width: 650px;
}
.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 600px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 1.5s;
    animation-name: zoom;
    animation-duration: 1.5s;
}
.close {
    position: absolute;
    top: 55px;
    right:15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
	text-shadow:1px 2px 5px black;
	z-index:99;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.project-form{
	height:auto;
	color:white;
	text-align:center;
	margin: 2% auto 15% auto;
	width:60%;
	position: relative;
	box-shadow:1px 2px 3px white;
	border-radius:5px;
	padding:10px;
}
.project-form h3,.project-form h4{
	border-bottom:3px double white;
	border-radius:5px;
	padding:5px;
	display: inline-block;
	word-break:break-all;
}
.gradient-black{
	background-color:black!important;
	color:white;
}
.gradient-black:hover{
	background-image:linear-gradient(180deg, black, white);
	box-shadow:1px 2px 5px black!important;
}
.project-button{
	width:150px;
	background-color:white;
	border:none;
	border-radius:5px;
	cursor:pointer;
	height:30px;
	font-weight:bold;
}
.project-button:hover{
	background-color:black;
	color:white;
	box-shadow:1px 2px 3px white;
}

.input_text{
	background-color:transparent;
	font-size:14px;
	outline:none;
	border: 1px solid transparent;
	border-bottom: 1px solid white;
	width:95%;
	margin:10px;
	color:white;
	height:35px;

}
.input_text:focus,
.input_text:hover{
	border: 1px solid white;
}
.alert {
	z-index:99;
	position:absolute;
	top:60px;
	left:120;
    padding:15px;
    background-color:#f44336;
    color:white;
    opacity:1;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
	-webkit-animation:alert_animate_top 1.0s;animation:alert_animate_top 1.0s;
	content:"";
	display:block;
	border-radius:5px;
	text-shadow:1px 3px 4px red;
	border:3px double white;
}
.alert.success {
	background-color:#4CAF50;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
	border-radius:5px;
	text-shadow:1px 3px 4px green;
	border:3px double green;
}
.alert.warning {
	background-color:#ff9800;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
	border-radius:5px;
	text-shadow:1px 3px 4px black;
	border:3px double white;
}
.alert:hover{
	cursor:not-allowed;
}

/*experimente page*/
.width-50-percent{
	width:50%;
}
.padding-15{
	padding:25px!important;
}
.tab {
  float: left;
  border-right:3px double #70ad47;
  width: 15%;
  height: 100%;
  padding:10px;
}

.tab button {
	text-transform:uppercase;
	text-align:right;
	text-justify: inter-word;
  display: block;
  color: black;
  padding: 8px 5px;
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  font-size:13px;
  background-color:transparent;
  border-radius:8px;
}
.tab button:hover{
	transform:scale(0.95);
}
.tab img{
	vertical-align:middle;
	margin-left:5px;
}
.tab button.active {
  box-shadow:1px 2px 5px #70ad47;
  font-weight:bold;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 70%;
  border-left: none;
  font-size:16px;
}
.border-bottom-double-green{
	border-bottom:3px double #70ad47;
}
.new_grid{
	border-radius:8px;
	box-shadow:1px 5px 8px grey;
	display:inline-table;
	width:250px;
	height:150px;
	margin:5px;
	background: linear-gradient(to right, rgb(255, 238, 238), rgb(221, 239, 187));
}
.new_grid:hover{
	cursor:pointer;
	box-shadow:1px 2px 15px #70ad47;
	transition: 0.2s;
	transform: scale(0.95);
}
.headline_Experiment{
	position:relative;
	top:10%;
	padding:10px;
	vertical-align:middle;
	text-align: center;
	text-shadow:1px 5px 5px grey;
	color:black;
	background-color: rgba(0,0,0,0.1);
}
.danger-symbols{
	width:100%;
}
.danger-symbols tr,td{
	text-align:center;
}
.danger-symbols td{
	height:120px;
	display:inline-block;
	padding:0px 15px;
}
.simscreen{
	width:840px;
	height:450px;
	background-color:black;
	border-radius:10px;
	border:4px double grey;
	box-shadow:1px 2px 5px grey;
	margin:10px;
	display:inline-table;
}
/*media query */
@media only screen and (min-width: 1200px){
	.container{
		max-width: 1200px;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1090px){
	
	.menu-icon{
		width:100%;
		text-align:center;
	}
	.menu-list{
		margin-left:0;
	}
	.tab{
		display:inline-flex;
		align-items: flex-end;
		width:95%;
		margin:0 auto;
		border-right:none;
	}
	button.tablinks{
		display:inline-grid;
	}
	.tablinks span{
		text-align:center!important;
		width:inherit!important;
		float:none!important;
		line-height:1!important;
	}
	.tablinks img{
		margin:0 auto;
	}
	.tabcontent{
		width:fit-content;
		padding-top:20px;
		float:none;
		clear:both;
		margin:0 auto;
	}
}
/*mobile style */
@media only screen and (max-width: 855px) and (orientation:landscape){
	#simulareLandscape{
		width:0px;
	}
	#simulare{
		margin:0px;
		padding:0px;
		width:auto;
	}
}
@media only screen and (max-width: 768px) and (orientation:portrait){
	#simulareLandscape{
		display:none!important;
	}
	#landscape-mod{
		text-align:center;
		display:block!important;
	}
}
@media only screen and (max-width: 768px){
	
	#login-table{
		width:90%;
	}
	.project-form{
        width:90%;
    }
    .project-table{
        width:70%;
    }
	footer p{
		width:90%;
	}
	.content{
		width:95%;
	}
	.menu-list{
		display:none;
	}
	.menu-icon img{
		width:100px;
	}
	#overlay_span{
		display:inline-block;
	}
	.tab{
		display:inline-flex;
		width:90%;
		margin:0 auto;
		border-right:none;
		align-items: stretch;
		flex-wrap: wrap;
		justify-content: center;
	}
	button.tablinks{
		display:inline-grid;
		width:30%;
	}
	.tablinks span{
		text-align:center!important;
		width:100%!important;
		float:none!important;
		line-height:1!important;
		margin: 0 auto;
		overflow: hidden;
	}
	.tablinks img{
		margin:0 auto;
	}
	.tabcontent{
		width:98%;
		padding-top:20px;
		float:none;
		clear:both;
		margin:0 auto;
	}
}

.centerImage{
	margin-left: auto;
	margin-right: auto;
	display: block;
	box-shadow:1px 2px 10px grey;
}
.homeButton{
	font-size:1.3em;
	padding:10px;
	border-bottom:3px double #0099ff;
}
.logo{
	width:50px;
	vertical-align:middle;
}
.menuLink{
	vertical-align:middle;
	margin-left:15px;
}
.menuLink:hover{
	text-shadow:1px 2px 5px black;
	transition: 0.5s;
}
.main_grid{
	margin:auto;
	padding:5px;
	text-align:center;
}
.simscreentext{
	box-shadow:1px 2px 5px grey;
	visibility:hidden;
	width:25%;
	display:inline-table;
}
/********************keyframes *****************/
.bounceInDown{
	animation-name: bounceInDown;
	animation-duration: 1s;
    animation-fill-mode: both;
}
.fadeInLeft{
	animation-name: fadeInLeft;
	animation-duration: 1s;
}
.fadeInDown{
	animation-name: fadeInDown;
	animation-duration: 1s;
}
.swing{
	animation-name: swing;
	animation-duration: 1s;
}
.zoom-in-zoom-out{
	animation: zoom-in-zoom-out 2s ease infinite;
}
.animate-rotate{
	animation-name:rotate;
	-webkit-animation-name:rotate;
	-moz-animation-name:rotate;
	animation-duration:2s;
	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
	-moz-animation-iteration-count:1;
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	-moz-animation-timing-function:ease-in-out
}
.w3-animate-fading{animation:fading 2s infinite}
.w3-animate-fading-fast{animation:fading 1s infinite}
.w3-animate-zoom {
	
	filter: blur(5px);
  -webkit-filter: blur(5px);
  animation:animatezoom 1.2s;
 
}
.w3-animate-left{position:relative;animation:animateleft 0.8s}
.shake{
	animation: shake 1s;
	animation-iteration-count: 1;
}
.shake-infinite{
	animation: shake 1.5s;
	animation-iteration-count: infinite;
}
.firework,
.firework::before,
.firework::after
{
	z-index:100;
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 3s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
    ;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework:nth-child(2) {
  --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;  
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}

.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}
.bounce-up {
		animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-name: bounce-up;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    }
@keyframes bounceInDown{
	
	0%, 60%, 75%, 90%, 100% {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		-webkit-transform: translate3d(0, -3000px, 0);
		opacity: 0;
		transform: translate3d(0, -3000px, 0);
	}
	60% {
		-webkit-transform: translate3d(0, 25px, 0);
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}
@-webkit-keyframes animate-zoom-auth {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
@keyframes animate-zoom-auth {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
@-webkit-keyframes alert_animate_top{
	from{top: -400px;opacity:0} 
	to{top:60px;opacity:1}
}
@keyframes alert_animate_top{
	from{top:-300px;opacity:0} 
	to{top:60px;opacity:1}
}

@keyframes rotate{
	from{
		transform: rotate(0);
		-webkit-transform:rotate(0);
		-moz-transform:rotate(0)
		}
	to{
		transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg)
		}
}

@keyframes fading{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

@keyframes animatezoom{from{transform:scale(1)} to{transform:scale(1.8)}}

@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes fadeInDown{
	0% {
    -webkit-transform: translate3d(0, -100%, 0);
    opacity: 0;
    transform: translate3d(0, -100%, 0);
	}

	100% {
    -webkit-transform: translateZ(0);
    opacity: 1;
    transform: translateZ(0);
	}
}
@keyframes fadeInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
		transform: translateZ(0);
	}
}
@keyframes swing {
	20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
	}
	40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
	}
	60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
	}
	80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
	}
	100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
	}
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes bounce-up {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-100px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}