@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Muli:300,400,800');

/* ===========================================================================================================================================================
   ====== SHOW =============================================================================================================================================== 
   =========================================================================================================================================================== */

img {width: 100%;}

.landingshow {
	position: relative;
	margin: 0% 0%;
	padding: 0%;
	width: 100%;
	height: auto;
	display: inline-block;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0);
	background-image: url(https://sayhikc.com/images/hikc_loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
}

/* ===== PLATE 1 =============================================================================================================================================== */

.plate01 {
	position: relative;
	top: 0%;
	left: 0%;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 1;
	-webkit-animation-name: fadr1;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	animation-name: fadr1;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes fadr1 {
	0%    	{opacity: 1;left: 0%;}
	20%		{opacity: 1;left: 0%;}
	25%		{opacity: 0;left: 100%;}
	45%		{opacity: 0;left: 100%;}
	50%		{opacity: 0;left: 100%;}
	70%		{opacity: 0;left: 100%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: -100%;}
	100%	{opacity: 1;left: 0%;}
}
@keyframes fadr1 {
	0%    	{opacity: 1;left: 0%;}
	20%		{opacity: 1;left: 0%;}
	25%		{opacity: 0;left: 100%;}
	45%		{opacity: 0;left: 100%;}
	50%		{opacity: 0;left: 100%;}
	70%		{opacity: 0;left: 100%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: -100%;}
	100%	{opacity: 1;left: 0%;}
}

img {
	position: relative;
	margin: auto;
	width: 100%;
	height: auto;
}

/* ===== PLATE 2 =============================================================================================================================================== */

.plate02 {
	position: absolute;
	top: 0%;
	left: 0%;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 1;
	-webkit-animation-name: fadr2;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	animation-name: fadr2;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes fadr2 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 1;left: 0%;}
	45%		{opacity: 1;left: 0%;}
	50%		{opacity: 0;left: 100%;}
	70%		{opacity: 0;left: 100%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: 100%;}
	100%	{opacity: 0;left: 100%;}
}
@keyframes fadr2 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 1;left: 0%;}
	45%		{opacity: 1;left: 0%;}
	50%		{opacity: 0;left: 100%;}
	70%		{opacity: 0;left: 100%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: 100%;}
	100%	{opacity: 0;left: 100%;}
}

.plate02 a {
	position: absolute;
	margin: auto;
	width: auto;
	height: auto;
	left: 18%;
	top: 72%;
	background-color: #cc3333;
	padding: 1% 3%;
	color: #FFF;
	text-transform: uppercase;
	z-index: 99999;
	font-weight: 900;
	font-size: 120%;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	transition: 0.3s;
}
.plate02 a:hover {
	background-color: #ffff33;
	color: #cc3333;
	cursor: pointer;
}


/* ===== PLATE 3 =============================================================================================================================================== */

.plate03 {
	position: absolute;
	top: 0%;
	left: 0%;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 1;
	-webkit-animation-name: fadr3;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	animation-name: fadr3;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes fadr3 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 0;left: -100%;}
	45%		{opacity: 0;left: -100%;}
	50%		{opacity: 1;left: 0%;}
	70%		{opacity: 1;left: 0%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: 100%;}
	100%	{opacity: 0;left: 100%;}
}
@keyframes fadr3 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 0;left: -100%;}
	45%		{opacity: 0;left: -100%;}
	50%		{opacity: 1;left: 0%;}
	70%		{opacity: 1;left: 0%;}
	75%  	{opacity: 0;left: 100%;}
	95%  	{opacity: 0;left: 100%;}
	100%	{opacity: 0;left: 100%;}
}



/* ===== PLATE 4 =============================================================================================================================================== */

.plate04 {
	position: absolute;
	top: 0%;
	left: 0%;
	margin: auto;
	width: 100%;
	height: auto;
	opacity: 1;
	-webkit-animation-name: fadr4;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	animation-name: fadr4;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes fadr4 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 0;left: -100%;}
	45%		{opacity: 0;left: -100%;}
	50%		{opacity: 0;left: -100%;}
	70%		{opacity: 0;left: -100%;}
	75%  	{opacity: 1;left: 0%;}
	95%  	{opacity: 1;left: 0%;}
	100%	{opacity: 0;left: 100%;}
}
@keyframes fadr4 {
	0%    	{opacity: 0;left: -100%;}
	20%		{opacity: 0;left: -100%;}
	25%		{opacity: 0;left: -100%;}
	45%		{opacity: 0;left: -100%;}
	50%		{opacity: 0;left: -100%;}
	70%		{opacity: 0;left: -100%;}
	75%  	{opacity: 1;left: 0%;}
	95%  	{opacity: 1;left: 0%;}
	100%	{opacity: 0;left: 100%;}
}



.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX {}

	@media only screen and (min-width : 414px) and (max-width : 768px) {
	
	.landingshow {
		margin: 70px 0% 0% 0%;
	}
	.plate02 a {
	font-size: 80%;
	font-weight: 800;
	}
}

	@media only screen and (min-width : 1px) and (max-width : 414px) {
	
	.landingshow {
		margin: 70px 0% 0% 0%;
	}
	.plate02 a {
	left: 0%;
	width: 100%;
	padding: 2% 0% 0% 0%;
	bottom: 0%;
	font-size: 70%;
	font-weight: 800;
	}
}

