@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
html{
	overflow-x: hidden;
}
h1,h2,h3,h4,h5,p{
	margin: 0 ;
	font-weight: 300;
}
ul{
	padding: 0;
}
li{
	list-style: none;
}

@media screen and (min-width: 550px) and (max-width: 880px){
	.hidden-br-550{
		display: none;
	}
}
@media screen and (min-width:1520px){
	.hidden-br-1520{
		display: none;
	}
}
@media screen and (min-width:450px){
	.hidden-br-450{
		display: none;
	}
}
@media screen and (min-width: 650px) and (max-width: 880px){
	.hidden-br-650{
		display: none;
	}
}
@media screen and (min-width: 1140px) {
	.hidden-br-1140{
		display: none;
	}
}
@media screen and (min-width: 573px) {
	.hidden-br-573{
		display: none;
	}
}
@media screen and (min-width: 881px){
	.hidden-box-55em{
		display: none;
	}
}



h1{
	font-size: 16px;
	color: transparent;
}


body{
	overflow-x: hidden;
	

	
	background: linear-gradient(to bottom, rgba(232,67,120,0.8), rgba(255,255,255,0.8),rgba(232,67,120,0.8)),url('img/back.png'),url('img/back2.png');
	background-size: contain;
	background-repeat: repeat;
	animation: fly 100s linear infinite;
	font-size: 1.1em;
	font-family: "Arial","Noto Sans TC" , sans-serif !important;
	font-weight: 300;
	margin: 0;
}




@media screen and (max-width: 55em){
	body{
		
		background-size: 130%;
	}
}

.line{
	width: 50vw;
}

.line img{
	position: fixed;
	right: 1%;
	top:60%;
	width: 130px;
	z-index: 99;
	height: 146px;
}
.line img:hover{
	animation: shake 1s linear infinite, flash 2s linear infinite;

}

@media screen and (max-width: 425px){
	.line img{
		position: fixed;
		right: 3%;
		top:70%;
		width: 60px;
		height: 68px;
	}
}
@media screen and (max-width: 880px) and (min-width: 426px){
	.line img{
		position: fixed;
		right: 3%;
		top:65%;
		width: 90px;
		height:102px;
	}
}


@media screen and (max-width: 90em) and (min-width: 881px){
	.line img{
		position: fixed;
		right: 2%;
		top:65%;
		width: 100px;
		height: 113px;
	}
}


@media screen and (max-width: 55em) and (max-height: 414px){
	.line img{
		position: fixed;
		right: 3%;
		top:40%;
		width: 60px;
		height: 68px;
	}
}

@media screen and (max-width: 90em) and (min-width: 881px) and (max-height: 414px){
	.line img{
		position: fixed;
		right: 2%;
		top:45%;
		width: 80px;
		height: 90px;
	}
}



header{
	padding: 5vh 10vw;
	text-align: center;
	background: url('img/gifts.png');
	background-position: bottom center;
	background-repeat: no-repeat;

}


header img{
	width: 35vw;
	height: auto;
	/*animation: spring 1.5s ;*/
}

header .boxes{
	width: 100%;
	text-align: left;
}
header .learn{

	width: 15vw;
}

header .img2{
	animation:  4s rock linear infinite;
}

header .imgflash {
	animation:  3s flashtwo  infinite;
}

header h2{
	text-align: center;
	color: white;
	font-size: 2em;
	text-shadow: 0 0 3px #ff7dc9, 0 0 5px #ff0000;
	
}
@media screen and (max-width: 55em){
	header{
		padding:0;
	}
	header img {
	    width: 90%;
	    height: auto;
	    padding-top: 2vh;

	}
	header h2 {
	    font-size: 1em;
	}
	header .learn{
		width: 35%;
		margin-left: 2%;
	}
}

@media screen and (max-width: 90em) and (min-width: 55em){
	header .learn{
		width: 25%;
		
	}
}





#sale{
	padding: 2vh 5vw;
	
}

#sale h2{
	text-align: center;
	color: white;
	font-size: 2em;
	text-shadow: 0 0 3px #ff7dc9, 0 0 5px #ff0000;

}

#sale .title{
	margin-top: 3vh;
}

#sale .title >h3{
	text-align: center;
	width: 85vw;
	font-size: 2em;
	color: #FFD900;
	padding: 0.5vh 0 2.5vh 0;
	margin:0 auto;
	background:#00A0E9  url('img/cakeback.png');
	border-radius: 20px 20px 0 0;
}
#sale .title .cake{
	background-position: top;
	padding: 5vh 0;
	width: 85vw;
	margin:0 auto;
	background: url('img/cake.png');
	background-repeat: repeat-x;
	background-size: contain;
	margin-top: -3vh;
}


#sale .wish{
	width: 83vw;
	position:relative;
	z-index:-1;
	background-color: #fff5f5a1;
	margin: auto;
	margin-top: -9vh;
	border-radius:0 0 50px 50px;
	display: flex;
	flex-direction: row;
	padding-bottom: 5vh;
}

#sale .wish .wishbox{
	width: 40vw;
	padding: 1vh 1vw;
	padding-top: 10vh;
}


#sale .wish .wishbox h3{
	margin: 5vh 0;
	color:#00A0E9;
	font-size: 1.8em;
	
}
#sale .wish .wishbox h3>span{
	background-color: #00A0E9;
    padding: 25px 10px;
    border-radius: 150px;
    width: 60px;
    font-size: 20px;
    text-align: center;
   
    height: 60px;
    margin-top: 1vh;
    color: white;

}
#sale .wish .wishbox table{
  border-collapse:separate; 
  border-spacing: 2.5em 1.5em;
}
#sale .wish .wishbox table tr .title{
	    width: 23vw;
    font-size: 1.8em;
    color: #E8465A;
    padding: 0 2vw;
}
#sale .wish .wishbox table tr .contents{
	width: 26vw;

}
#sale .wish .wishbox table tr .contents>span{
	color: #E8465A;
	font-weight: 600;
	font-size: 1.2em;
}

#sale .wish .wishbox table tr {
	margin: 2vh 0;
}
#sale .wish .wishbox .box h3>span{
	color:white;
}

#sale .wish .wishbox .box h4{
	text-align: center;
}
#sale .wish .wishbox .box h4>span{
	color:#E8465A;

	font-size: 2em;
}

#sale .wish .wishbox table td:first-child{
		border-right: 2px #E8465A solid;
	}

@media screen and (max-width: 55em){
	#sale {
	    padding: 2vh 0vw;
	}
	
	#sale .title >h3 {
	    text-align: center;
	    width: 95%;
	    font-size: 1.1em;
	    height: 4vh;
	    color: #FFD900;
	    padding-top: 2vh;
	    margin: 0 auto;
	    background: url(img/cake.png);
	    background-size: 100% 120%;
	}
	#sale .title .cake{
		background-position: top;
		padding: 5vh 0;
		width: 95%;
		margin:0 auto;
		background: url('img/cake.png');
		background-repeat: repeat-x;
		background-size: contain;
		margin-top: -4vh;
	}
	#sale .wish{
		width: 93%;
		position:relative;
		z-index:-1;
		background-color: #fff5f5a1;
		margin: auto;
		margin-top: -10vh;
		border-radius:0 0 50px 50px;
		display: flex;
		flex-direction: column;
		padding-bottom: 5vh;
	}
	#sale .wish .wishbox {
	    width: 98%;
	    padding: 1vh 1vw;
	    padding-top: 11vh;
	}
	#sale .wish >img{
		margin: 4vh auto;
	    width: 150px;
	    height: 150px;
	}
	#sale .wish .wishbox:nth-child(2) {
		 padding-top: 0vh;
	}


	#sale .wish .wishbox h3 {
	    margin:5vh 0 3vh 0; 
	    color: #00A0E9;
	    font-size: 1.05em;
	    
	}
	#sale .wish .wishbox table {
	    width: 98%;
	    border-spacing:0.5em 1.5em;
	}
	#sale .wish .wishbox table tr .title {
	    font-size: 1.1em;
	    vertical-align: top;
		text-align: right;

	}

	#sale .wish .wishbox table tr .contents {
	    font-size: 0.8em;
	    width: 62%;
	}
	
	
}

@media screen and (max-width: 90em) and (min-width: 881px){
	#sale .wish .wishbox h3 {
	    font-size: 1.3em;
	}
	#sale .wish .wishbox table {
	    border-collapse: separate;
	    border-spacing: 0em 1em;
	}
	#sale .wish .wishbox table tr .title {
	    width: 23vw;
	    font-size: 1.5em;
	    color: #E8465A;
	    padding: 0 2vw;
	}
	#sale .wish .wishbox table tr .contents {
    	width: 30vw;
	    padding: 0 1vw;
	}

}






#video {
	padding: 2vh 5vw;
	display: flex;
	flex-direction: column;
}
#video .videoarea{
	display: flex;
	flex-direction: column;
	background-color: #E60012;
	width: 85vw;
	border-radius: 50px;
	margin: auto;
}
#video .videoarea .boxes{
	display: flex;
	flex-direction: row;
}

#video .videoarea .videobox{
	width: 45vw;
	text-align: center;

}

#video .videoarea .videobox img{
	width: 35vw;
	padding: 1vh 0;
}

#video .videoarea .videobox .contents{
	background-color: #ffffffeb;
	font-size: 1.2em;
}

#video .videoarea .videobox .contents h3>strong{
	font-size: 1.3em;
	color: #FFD900;
	text-shadow: 0 0 3px #ff2b59, 0 0 5px #ff0000;
	font-weight: 400;
}


#video .videoarea .videobox .contents iframe{
	width: 560px;
	height:315px;
	padding-top: 1vh;
}



#video .videoarea ul{
	display: flex;
	flex-direction: row;
	justify-content: center;

}
#video .videoarea ul li{
	color: white;
	font-size: 1.5em;
}

@media screen and (max-width: 55em){
	#video {
	    padding: 2vh 1vw;
	}
	#video .videoarea {
	    display: flex;
	    flex-direction: column;
	    width: 95%;
	    margin: auto;
	}
	#video .videoarea .boxes {
	    display: flex;
	    flex-direction: column;
	}
	#video .videoarea .videobox {
	    width: 100%;
	    text-align: center;
	    margin: auto;
	}
	#video .videoarea .videobox .contents iframe{
		width: 300px;
		height:169px;
		padding-top: 1vh;
	}
	#video .videoarea .videobox img {
	    width: 92%;
	    padding: 1vh 0;
	    padding-top: 2vh;
	}

	#video .videoarea .videobox .contents h3{
		font-size: 0.9em;
	}
	#video .videoarea .videobox .contents{
		padding-bottom: 5%;
	}
	#video .videoarea ul {
	    display: flex;
	    flex-direction: column;
	}
	#video .videoarea ul li {
	    color: white;
	    font-size: 1.2em;
	    text-align: center;
	}
}


@media screen and (max-width: 90em) and (min-width: 881px){
	#video .videoarea .videobox .contents iframe{
		width: 350px;
		height:197px;
		padding-top: 1vh;
	}
	#video .videoarea .videobox .contents h3{
		font-size: 0.9em;
	}
	#video .videoarea ul li{
		color: white;
		font-size: 1em;
	}
}







	


.img1{
	width: 100vw;
	text-align: center;
}

.imgbox{
	text-align: center;
}
.imgbox .imgflash2{
	width: 65vw;
	height: auto;
	padding-top: 3vh;
	animation:  3s flashtwo  infinite;
}


@media screen and (max-width:1299px){
	.img1{
		display: none;
	}
	.imgbox .imgflash2{
		width: 98%;
	}
}




#bestlist{
	padding: 1vh 5vw;
}
#bestlist>img{
	width: 90vw;
}
#bestlist ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: left;
	background-color: #fff9d5;
	width: 88vw;
	margin: auto;
	margin-top: -8vh;
	padding-top: 10vh;
	padding-bottom: 3vh;
	border-radius: 0 0 50px 50px;
}
#bestlist ul li{
	width: 20vw;
	padding: 2vh 4vw;
	text-align: center;
	display: flex;
	flex-direction: row;
	vertical-align:text-top;
	text-align: left;
}

#bestlist ul li .detail{
	padding: 0 1vw;
}
#bestlist ul li .name{
	font-size: 1.5em;
	color: #00A0E9;
}
#bestlist ul li .testkind{
	font-size: 1em;
	color: #00A0E9;	
}
#bestlist ul li>p{
	
	font-size: 1em;
}


#bestlist ul li .detail h4{
	width: 12vw;
	font-size: 1em;
  	text-align-last: justify;	
	color: white;
	background-color: #E5004F;
	border-radius: 15px;
	padding: 0.5vh 1.5vw;
	margin: 0 auto 0 0;
}
#bestlist ul li>img{
	max-width: 10vw;
	width: auto;
	height: 10vh;
}

@media screen and (max-width: 55em){
	#bestlist {
	    padding: 0vh 2vw;
	}
	#bestlist>img {
	    width: 100%;
	}
	#bestlist ul {

	    width: 93vw;
	    margin: auto;
	    margin-top: -5vh;
	    padding-top: 5vh;
	

	}
	#bestlist ul li {
	    width: 50%;
	    padding: 0;
	    text-align: center;
	    display: flex;
	    flex-direction: column;
	    vertical-align: text-top;

	    margin: 1vh 0;
	}
	#bestlist ul li .testkind {
	    font-size: 0.75em;
	}
	#bestlist ul li .detail h4 {
	    width: 85%;
	    font-size: 0.8em;
	    text-align-last: justify;
	    color: white;
	    background-color: #E5004F;
	    border-radius: 15px;
	    padding: 0.5vh 2vw;
	    margin: 0 auto;
	}
	#bestlist ul li p{
		font-size: 0.8em;
		text-align: left;
	}

	#bestlist ul li>img{
		max-width: 15vw;
		width: auto;
		height: auto;
		margin: 0 auto;
	}
	#bestlist ul li >i{
		font-size: 1.2em;
		margin: auto;
	}	
	#bestlist ul li .box{
		margin: auto;
	}
	#bestlist ul li .box i{
		font-size: 3em;
		color: #ffbc00;
	} 
	#bestlist ul li .box span{
		font-size: 1.2em;
	}

}




@media screen and (max-width: 90em) and (min-width: 881px){
	#bestlist {
	    padding: 1vh 1vw;
	}
	#bestlist>img {
	    width: 98vw;
	}
	#bestlist ul {
		width: 95vw;
		margin: auto;
		margin-top: -8vh;
		padding-top: 10vh;
		padding-bottom: 3vh;
		border-radius: 0 0 50px 50px;
	}
	#bestlist ul li {
	    width: 29vw;
	    padding: 2vh 1vw;
	    text-align: center;
	    display: flex;
	    flex-direction: row;
	    vertical-align: text-top;
	    text-align: left;
	}
	#bestlist ul li .detail h4 {
	    width: 17vw;
	    font-size: 1em;
	    text-align-last: justify;
	    color: white;
	    background-color: #E5004F;
	    border-radius: 15px;
	    padding: 0.5vh 1.5vw;
	    margin: 0 auto;
	}
	#bestlist ul li .testkind {
	    font-size: 0.9em;
	}

}








#newclass{
	padding: 5vh 3vw;
	text-align: center;
}

#newclass h2{
	font-size: 2.5em;
	color: #FFF100;
	text-shadow: 0 0 3px #ff7dc9, 0 0 5px #ff0000;
}
#newclass >h3{
	font-size: 2em;
	color: #00A0E9;
}


#newclass .box{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

#newclass .box .tablebox{
	
	width: 50em;
	/*margin: 5vh 1vw 2vh 1vw;*/
}

#newclass .box .tablebox .imgbox{
	width: 46vw;
	position: relative;
}

#newclass .box .tablebox .imgbox img{
	width: 47vw;
	position: relative;

}
#newclass .box .tablebox .tabletitle{
	margin: auto;
	width: 45vw;
}
#newclass .box .tablebox .tabletitle h3{
	background-color: #00A0E9;
	border-radius: 15px 15px 0 0;
	width: 100%;
	z-index: 10;
	font-size: 2em;
	color: #FFF100;
	position: relative;
}
#newclass .box .tablebox .tabletitle img{
	width: 100%;
	z-index: -1;
    margin-top: -4vh;
}




#newclass .box .tablebox .imgbox h3{
	color:#FFF100;
	position: absolute;
    z-index: 10;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
}



#newclass table{
	width: 45vw;
	text-align: left;
	margin:0 auto; 
	border-collapse: separate;
  	border-spacing: 0;
	margin-top: -6vh;

}

#newclass table tr th{
	text-align: center;
	border:#00A0E9 2px solid ;
	font-size: 1.2em;
	padding: 6vh 0 2vh 0;
	

}
#newclass table tr th:nth-child(1){
	width: 7vw;
	background-color: #C7E8FA;
	

}
#newclass table tr >.title{
	font-size: 1.2em;
	background-color: #C7E8FA;
}


#newclass table tr .title{
	text-align: center;
	border:#00A0E9 2px solid ;
}


#newclass table tr {
	height: 50px;
	border:#00A0E9 3px solid ;
}
#newclass table tr td{
	border:#00A0E9 2px solid ;
	}
#newclass table tr .contents{
	padding:0.5vh 1vw;
	font-size: 1em;
	width: 37%;
	background-color: white;
	text-align: left;
}

#newclass table tr .contents>span{
	color: red;
}

#newclass .second,#newclass .third{
	background-color: white;
}



@media screen and (max-width: 55em){
	#newclass h2 {
	    font-size: 1.6em;
	}
	#newclass >h3 {
	    font-size: 1.05em;
	}
	#newclass .box {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	#newclass .box .tablebox {
	    width: 100%;
	    margin-top: 5vh;
	}
	#newclass .box .tablebox .tabletitle {
	    margin: auto;
	    width: 100%;
	}
	#newclass table {
	    width: 100%;
	    text-align: left;
	    /* margin: 0 auto; */
	    border-collapse: separate;
	    border-spacing: 0;
	    margin-top: -8vh;
	}
}

@media screen and (max-width: 90em) and (min-width:881px){


}




@media screen and (max-width: 650px) {
	#newclass table tr .title{
		width: 17%;
	}
}







table tr .first{
	border-top-left-radius: 10px;
}

table tr .third{
	border-top-right-radius: 10px;
}

table tr .leftbottom{
	border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child{
	border-bottom-right-radius: 10px;
}




.box3{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    text-align: center;
    }    
    .box3 ul{
      width: 65vw;
      padding: 0vh 0vw;
      margin: 10vh auto;
      list-style-type: none;
    }
    .box3 ul li{
    width: 9vw;
    display: inline-block;
    font-weight: bold;
    font-size: 1.6em;
    padding: 1.5vh 0vw;
    margin: 1.5vh 0.5vw;
    background-color: #FDD000;
    color: #BF1920;
    border-radius: 50px;
    cursor: pointer;
    }
    .box3 ul li:hover{
    background-color: #BF1920;
    color: #FDD000;
    }
    @media screen and (max-width:1366px){
	    .box3 ul{
	      width: 90%;
	      padding: 0vh 0vw;
	      margin: 5vh auto;
	      list-style-type: none;
	    }
	    .box3 ul li{
	    width: 35vw;
	    font-size: 1.2em;
	    padding: 1.5vh 0vw;
	    margin: 1.5vh 1vw;
	    }
	    .box3 ul li:hover{
	    border: 1px solid #036EB8;
	    }
    }



    .footer ul {
  width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 1% 1% 158% 1%;
    }
.footer ul li {
    display: block;
    text-align: center;
    float: left;
    width: 45%;
    height: auto;
    padding: 10px;
    margin-right: 3px;
    background-color: #30339b;
    -webkit-border-radius: 25px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 3px;
  border-color: #fff;
  border-style: solid;
  font-size: 1.2em;
  font-weight: 2px;
    }
.footer ul li:hover {
  background-color: #2DA7E0;
    border-color: #fff;
    } 


footer {
  background-color: #6248db;
  position:relative;
  bottom: 0px;
  padding: 5vh 6vw;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.8;
  text-align: center;
}
footer h2 {
  text-align: center;
}
footer h3{
  margin: 0 0;
  font-size: 2.6vw;
}
footer h4{
  margin: 0 0;
  font-size: 1.6vw;
  border-bottom: 1px solid;
  border-top: 1px solid;
}
footer table,
.me{
  width:38vw;
  display: inline-block;
  text-align: left;
  margin: auto 2vw;
  vertical-align: top;
}
footer table td {
  padding: 0.2vh 1vw;
}
footer a:hover,
footer a{
  color: #fff;
}
footer i{
  font-size: 2vw;
  margin: 2vh 1vw;
}
@media (max-width:55em){
  footer table,
  .me{
  width:100%;
  margin: 0vh auto;
  padding-bottom: 0.5vh;
  font-size: 0.5em;
}
  footer {
  padding: 1vh 5vw;
  padding-bottom: 2vh;
}
footer table td{
  padding: auto 2px;
}
footer h2 {
  font-size:1em;
}
footer h3{
  margin: 0 0;
  font-size:1.6em;
  line-height: 1.8;
  font-weight:400;
  text-align: center;
}
footer h4{
  margin: 0 0;
  font-size:1.2em;
  line-height: 1.8;
  font-weight:400;
  text-align: center;
}
footer i{
  font-size: 6vw;
}
}


@media (min-width:881px){
	footer {
		font-size: 0.74em;
	}
}

#gotop {
	text-align: center;
	position: fixed;
	right: 20px;
	bottom: 60px;
	border-radius:50%;
	padding:20px 25px;
	font-size: 18px;
	background: rgba(0,0,0,0.7);
	border: 1px;
	color: white;
	cursor: pointer;
	z-index: 99
}

@media screen and (max-width:550px){
	#gotop {
	    text-align: center;
	    position: fixed;
	    right: 10px;
	    bottom: 60px;
	    border-radius: 50%;
	    padding: 10px 15px;
	    font-size: 15px;
	    background: rgba(0,0,0,0.7);
	    border: 1px;
	    color: white;
	    cursor: pointer;
	    z-index: 99;
	}
}
@media screen and (max-width:880px) and (min-width: 551px){

	#gotop {
	    text-align: center;
	    position: fixed;
	    right: 10px;
	    bottom: 60px;
	    border-radius: 50%;
	    padding: 15px 20px;
	    font-size: 20px;
	    background: rgba(0,0,0,0.7);
	    border: 1px;
	    color: white;
	    cursor: pointer;
	    z-index: 99;
	}
}




/*
@media screen and (max-width: 375px)
{
	#gotop {
	  
	    right: 10px;
	    bottom: 60px;
	    border-radius: 50%;
	    padding: 2vh 5vw;
	    font-size: 13px;
	    background: rgba(0,0,0,0.7);
	    border: 1px;
	    color: white;
	    cursor: pointer;
	    z-index: 99;
	}
}

@media screen and (max-width: 450px) and (min-width: 376px){
	#gotop {
	   
	    right: 10px;
	    bottom: 60px;
	    padding: 2vh 5vw;
	    font-size: 18px;
	}
}
@media screen and (max-width: 800px) and (min-width: 451px){

}
*/




@keyframes fly{

  0% {background-position: 0% 100%; }

  50%{background-position: 0% 50%;}

  100% {background-position:  0px 0px; } 

}

@keyframes spring {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-3px, -4px) rotate(-1deg); }
  20% { transform: translate(-5px, 0px) rotate(1deg); }
  30% { transform: translate(5px, 4px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-2px, 4px) rotate(-1deg);}
  60% { transform: translate(-5px, 2px) rotate(0deg); }
  70% { transform: translate(5px, 1px) rotate(-1deg); }
  80% { transform: translate(-2px, -2px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg);}
}

@keyframes flash{
	0%{filter: contrast(100%);}
	25%{filter: contrast(150%);}
	50%{filter: contrast(200%);}
	75%{filter: contrast(150%);}
	100%{filter: contrast(100%);}
}

@keyframes flashtwo{
	0%{filter: contrast(100%);}
	25%{filter: contrast(200%);}
	50%{filter: contrast(100%);}
	75%{filter: contrast(200%);}
	100%{filter: contrast(100%);}

}


@keyframes rock{
	0% {transform: rotate(0);}


	25% {
	
		transform: rotate(-5deg) translateX(6%);
	}

	

	75% {
		
		transform: rotate(5deg) translateX(-6%);
	}
	
	100% {transform: rotate(0);}
}