@charset "utf-8";
/* Place in your CSS file at the top of the document */


/* CSS Document */
*,
.box_sizing_border_box,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: #600907;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}


/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar,
html::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body,
html {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}


* {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-decoration: none
}

*:focus {
	outline: 0 !important;
	box-shadow: none !important;
}

@font-face {
	font-family: 'gothambook';
	src: url("../fonts/SVN-Gotham-Book.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

.f-gothambook {
	font-family: 'gothambook', sans-serif;
}

@font-face {
	font-family: 'blazeglory';
	src: url("../fonts/MTD-Blaze-Glory.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

.f-blazeglory {
	font-family: 'blazeglory', sans-serif;
}



body {
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	background: none;
	font-family: 'gothambook', Tahoma, sans-serif;
	position: relative;
}

body,
html {
	padding: 0;
	margin: 0;
	background: #101216;
	color: #fff;
}

ul {
	list-style: none;
	margin: 0
}

a {
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.wrapper {
	transform-origin: left top;
	position: absolute;
}

.wrapper {
	margin: 0 auto;
	width: 100%;
}

.wrapper {
	width: 1920px;
	max-width: 1920px;
}

.container1 {
	display: block;
	margin: 0 auto;
	width: 1200px;
	position: relative;
}

.frame {
	width: 960px;
	height: auto;
	position: relative;
	margin: 0 auto;
}

.desktop {
	display: block !important
}

.mobile {
	display: none !important
}

.opacity-5 {
	opacity: 0.5;
}

.zoom {
	transition: transform .2s;
	/* Animation */
}

.zoom:hover {
	transform: scale(1.1);
	/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom-50 {
	transition: transform .3s;
	/* Animation */
}

.zoom-50:hover {
	transform: scale(1.05);
	/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.brightness:hover {
	filter: brightness(1.2)
}

.section {
	position: relative;
	display: block;
	max-width: 100%;
	pointer-events: auto !important;
}

.section-background {
	position: absolute;
	display: block;
	width: 100%;
	margin: 0 auto;
	top: 0;
	left: 0;
}

.section-content {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	height: 100%;
}

@media (min-width: 2000px) {
	.wrapper {
		transform-origin: top center;
		position: relative;
	}

	html,
	body {
		margin: 0 auto;
	}
}

@media (min-width: 1440px) {
	.container {
		max-width: 1200px;
	}
}

@media (max-width: 640px) {
	.desktop {
		display: none !important
	}

	.mobile {
		display: block !important
	}

	.wrapper {
		width: 640px;
	}

	.container1 {
		width: 100%;
		max-width: 100%;
	}
}


@media (orientation: portrait) {
	.frame {
		max-width: calc(100% - 10px * 2)
	}

}

.cursor-pointer {
	cursor: pointer;
}



/*----------------------------Menu Top---------------------------------*/
.header {
	background: url(../images/bg-header.png) no-repeat;
	height: 101px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 1920px;
	transform-origin: left top;

}

.header .nav {
	margin-top: 16px;
}

.header .nav .nav-item {
	margin: 0 4px;
	width: 235px;
	height: 71px;
	background: url(../images/bg-btn-menu.png) no-repeat;
	background-size: 100% 100%;
}

.header .nav .nav-item .nav-link {
	font-size: 68px;
	background: #5F0020;
	background: linear-gradient(to bottom, #5F0020 0%, #F0412F 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 44px;
	font-family: 'blazeglory', sans-serif;
	text-transform: uppercase;
	font-weight: 500;

}

@media (max-width: 640px) {
	.header {
		width: 640px;
		height: 78px;
	}

	.header .nav {
		margin-top: 0;
	}

	.header .nav .nav-item {
		margin: 0 4px;
		width: 102px;
		height: 96px;
		background: none;
	}

	.header .nav .nav-item .nav-link {
		padding: 4px;
	}

	.header .nav .nav-item.login {
		margin: -14px 0 0 108px;
		width: 225px;
		height: 58px;
		background: url(../images/bg-btn-menu.png) no-repeat;
		background-size: 100% 100%;
	}

	.header .nav .nav-item.login .nav-link {
		font-size: 56px;
		background: #5F0020;
		background: linear-gradient(to bottom, #5F0020 0%, #F0412F 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		line-height: 40px;
		font-family: 'blazeglory', sans-serif;
		text-transform: uppercase;
		font-weight: 500;

	}
}


/*------------Section 1-------------*/
.section1 {
	width: 100%;
	height: 1122px;
	position: relative;
}

.section1 .logo {
	position: absolute;
	top: 118px;
	right: 516px;
}

.section1 .banhsn {
	position: absolute;
	top: 124px;
	left: 0;
	right: 0;
	text-align: center;
	animation: moveYDiv1 5s ease-in-out infinite;
}

.section1 .text-main {
	position: absolute;
	top: 530px;
	left: 0;
	right: 0;
	text-align: center;
}

.section1 .art1 {
	position: absolute;
	top: 150px;
	left: 164px;
	text-align: center;
	animation: moveYDiv1 8s ease-in-out infinite;
}

.section1 .art2 {
	position: absolute;
	top: 216px;
	right: 72px;
	text-align: center;
	animation: moveYDiv1 8s ease-in-out infinite;
}

@media (max-width: 640px) {
	.section1 {
		width: 100%;
		height: 1205px;
		position: relative;
	}

	.section1 .logo {
		position: absolute;
		top: 82px;
		right: 16px;
		max-width: 224px;
	}

	.section1 .text-main {
		top: 642px;
	}

}

/*------------Section 2-------------*/
.section2 {
	width: 100%;
	height: 1082px;
	position: relative;
}

.section2 .title {
	padding-top: 4px;
}

.section2 .bongbay1 {
	position: absolute;
	top: 226px;
	left: 0;
	right: 0;
	text-align: center;
	animation: moveYDiv1 6s ease-in-out infinite;
}

.section2 .bongbay2 {
	position: absolute;
	top: 162px;
	right: 0;
	text-align: center;
	animation: moveYDiv1 7s ease-in-out infinite;
}

.section2 .main-content {
	position: absolute;
	width: 500px;
	height: 846px;
	top: 158px;
	right: 460px;
	margin: 0 auto;
	text-align: center;
}

.section2 .main-content .banhsn img {
	animation: blink 0.5s ease-in-out infinite;
}

.section2 .main-content .btn-thapnen {
	margin: 32px auto;
}

.section2 .main-content .group-tl a {
	margin: 0 4px;
	width: 235px;
	height: 71px;
	background: url(../images/bg-btn-menu.png) no-repeat;
	background-size: 100% 100%;
	display: block;
	text-decoration: none;
}

.section2 .main-content .group-tl a span {
	font-size: 68px;
	background: #5F0020;
	background: linear-gradient(to bottom, #5F0020 0%, #F0412F 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 54px;
	font-family: 'blazeglory', sans-serif;
	font-weight: 500;
}


@media (max-width: 640px) {
	.section2 {
		width: 100%;
		height: 1081px;
		position: relative;
	}

	.section2 .title {
		max-width: 82%;
		margin: 0 auto;
	}

	.section2 .main-content {
		position: absolute;
		width: 640px;
		height: 846px;
		top: 136px;
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}
}

/*------------Section 3-------------*/
.section3 {
	width: 100%;
	height: 1064px;
	position: relative;
	overflow: hidden;
}

.section3 .title {
	padding-top: 24px;
}

.section3 .main-content {
	position: absolute;
	top: 338px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 658px;
	height: 496px;
}

.section3 .main-content .line2 {
	margin-top: -36px;
	margin-right: 60px;
}

.section3 .bongbay1 {
	position: absolute;
	bottom: 116px;
	left: 0;
	text-align: center;
	-webkit-animation: ani4 8s linear infinite;
	animation: ani4 8s linear infinite;
}


@media (max-width: 640px) {
	.section3 {
		width: 100%;
		height: 1147px;
		position: relative;
	}

	.section3 .main-content {
		position: absolute;
		top: 330px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 640px;
		height: 496px;
	}

	.section3 .main-content .line2 {
		margin-top: -16px;

	}
}


/*------------Section 4-------------*/
.section4 {
	width: 100%;
	height: 1121px;
	position: relative;
}

.section4 .title {
	padding-top: 12px;
}

.section4 .btn-group-nav a {
	margin: 0 4px;
	width: 259px;
	height: 71px;
	background: url(../images/bg-btn-quay.png) no-repeat;
	background-size: 100% 100%;
	display: block;
	text-decoration: none;
	text-align: center;
}

.section4 .btn-group-nav a span {
	font-size: 68px;
	background: #fff2a5;
	background: linear-gradient(to bottom, #fff2a5 0%, #fae081 50%, #f2b124 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 54px;
	font-family: 'blazeglory', sans-serif;
	font-weight: 500;
	text-align: center;
	text-transform: capitalize;
}

.section4 .frame-vq {
	position: relative;
	width: 648px;
	height: 648px;
	margin: 24px auto;

}

.section4 .frame-vq .vq {
	/* -webkit-animation: turn1 10s linear infinite;
	animation: turn1 10s linear infinite; */
	pointer-events: none;
}

.section4 .frame-vq .btn-quay {
	position: absolute;
	top: 174px;
	left: 2px;
	right: 0;
	background: url(../images/btn-quay.png) no-repeat;
	background-size: 100%;
	width: 231px;
	height: 280px;
	margin: 0 auto;
	text-align: center;


}

.section4 .frame-vq .btn-quay .number {
	position: absolute;
	top: 99px;
	left: 0;
	right: 0;
	width: 72px;
	margin: 0 auto;
	font-size: 42px;
	background: #CC9E36;
	background: linear-gradient(to bottom, #CC9E36 0%, #FFFF9F 54%, #CC9E36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 39px;
	/* font-family: 'blazeglory', sans-serif; */
	font-family: "Times New Roman", Times, serif;
}

.section4 .btn-quay-group {
	width: 700px;
	margin: 24px auto;
}

.section4 .btn-quay-group .btn-quay1,
.section4 .btn-quay-group .btn-quay10 {
	width: 259px;
	height: 71px;
	background: url(../images/bg-btn-quay.png) no-repeat;
	background-size: 100%;
	text-align: center;
	display: block;
	margin: 0 24px;
	font-size: 54px;
	color: #780000;
	text-decoration: none;
	line-height: 58px;
}

.section4 .btn-quay-group .btn-quay1 span,
.section4 .btn-quay-group .btn-quay10 span {
	font-size: 68px;
	background: #fff2a5;
	background: linear-gradient(to bottom, #fff2a5 0%, #fae081 50%, #f2b124 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 54px;
	font-family: 'blazeglory', sans-serif;
	font-weight: 500;
	text-align: center;
	text-transform: capitalize;
}


@media (max-width: 640px) {
	.section4 {
		width: 100%;
		height: 1142px;
		position: relative;
	}

	.section4 .frame-vq {
		position: relative;
		width: 640px;
		height: 640px;
		margin: 24px auto;

	}

	.section4 .btn-group-nav {
		flex-wrap: wrap;
	}

	.section4 .btn-group-nav a:last-child {
		margin-top: 10px;
	}
}

/*------------Section 5-------------*/
.section5 {
	width: 100%;
	height: 1016px;
	position: relative;
}

.section5 .title {
	padding-top: 12px;
}

.section5 .main-content {
	width: 1234px;
	margin: 0 auto;
}

.section5 .main-content .top2,
.section5 .main-content .top3 {
	width: 374px;
	height: 526px;
	background: url(../images/frame-top23.png) no-repeat;
	background-size: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.section5 .main-content .top2 .title,
.section5 .main-content .top3 .title {
	margin-top: 54px;
}

.section5 .main-content .top2 .top-items,
.section5 .main-content .top3 .top-items {
	width: 310px;
	height: 328px;
	margin: 4px auto;
}


.section5 .btn-nhanthuong {
	width: 259px;
	height: 71px;
	background: url(../images/bg-btn-quay.png) no-repeat;
	background-size: 100%;
	text-align: center;
	display: block;
	margin: 0 24px;
	font-size: 54px;
	color: #780000;
	text-decoration: none;
	line-height: 58px;
	margin: 16px auto;
}

.section5 .btn-nhanthuong span {
	font-size: 68px;
	background: #fff2a5;
	background: linear-gradient(to bottom, #fff2a5 0%, #fae081 50%, #f2b124 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 54px;
	font-family: 'blazeglory', sans-serif;
	font-weight: 500;
	text-align: center;
	text-transform: capitalize;
}


.section5 .main-content .top1 {
	width: 454px;
	height: 613px;
	background: url(../images/frame-top1.png) no-repeat;
	background-size: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.section5 .main-content .top1 .title {
	margin-top: 58px;
}

.section5 .main-content .top1 .top-items {
	width: 372px;
	height: 390px;
	margin: 4px auto;
}

.section5 .bongbay1 {
	position: absolute;
	bottom: 96px;
	left: 48px;
	text-align: center;
	-webkit-animation: ani4 8s linear infinite;
	animation: ani4 8s linear infinite;
}

.section5 .hopqua {
	position: absolute;
	bottom: 358px;
	right: 68px;
	text-align: center;
	-webkit-animation: ani1 10s linear infinite;
	animation: ani1 10s linear infinite;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto !important;
}

@media (max-width: 640px) {
	.section5 {
		width: 100%;
		height: 1048px;
		position: relative;
	}

	.section5 .main-content {
		width: 640px;
		margin: 0 auto;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100% !important;
	}
}

/*----------------------------Section 6 Footer---------------------------------*/
.section6 {
	height: 294px;
	margin-top: 0;
	background-color: #101216;

}

.footer {
	font-size: 18px;
}

.footer-content,

.vtc-logo {
	margin: 0 auto;
	text-align: center;
	padding-top: 4px;
}

.footer-text {
	padding: 15px;
	color: #fff;
	line-height: 34px;
}

.footer-text a {
	color: #c6cad9;
}

@media (max-width: 640px) {
	.footer {
		font-size: 18px;
	}

	.footer-text {
		line-height: 24px;
	}

	.section6 {
		height: 224px;
		margin-top: 0;
		background-color: #101216;
	}

	.footer-text {
		padding: 8px 15px 0 15px;

	}

	.vtc-logo {
		margin: 8px auto;
	}
}

/*----------------------------Popup---------------------------------*/
.modal-cs1 {
	width: 1123px;
	max-width: 1123px;
	height: 549px;

}

.modal-cs1 .modal-content {
	background: url(../images/bg-popup.png) no-repeat;
	background-size: 100%;
	width: 1123px;
	height: 549px;
}

.modal-cs1 .modal-content,
.modal-cs1 .modal-header {
	border: none;
}

.modal-cs1 .modal-header {
	padding: 0;

}

.modal-cs1 .modal-header .btn-close {
	position: absolute;
	top: -22px;
	right: -30px;
	width: 62px;
	height: 62px;
	opacity: 1;
}

.modal-cs1 .modal-body {
	font-size: 18px;
	color: #2c2c2c;
}

.modal-cs1 .modal-body .title {
	font-size: 115px;
	text-align: center;
	margin-top: -24px;
	font-family: 'blazeglory', sans-serif;
	color: #600907;
	text-transform: capitalize;
	margin-bottom: 0;
}

.modal-cs1 .modal-body .tbl-lichsu {
	width: 956px;
	height: 382px;
	max-height: 382px;
	overflow: auto;
	font-size: 24px;
	margin: -6px auto 0;
}

.modal-cs1 .modal-body .tbl-lichsu thead tr th {
	font-size: 80px;
	color: #fff;
	font-weight: 300;
	font-family: 'blazeglory', sans-serif;
	color: #600907;
	padding: 0 0 16px 0;
	line-height: 42px;
}

.modal-cs1 .modal-body .tbl-lichsu tbody tr td {
	font-size: 19px;
	color: #2c2c2c;
}

.modal-cs1 .modal-body .btn-nv,
.modal-cs1 .modal-body .btn-nv {
	width: 259px;
	height: 71px;
	background: url(../images/bg-btn-quay.png) no-repeat;
	background-size: 100%;
	text-align: center;
	display: block;
	margin: 0 auto;
	font-size: 54px;
	color: #780000;
	text-decoration: none;
	line-height: 58px;
}

.modal-cs1 .modal-body .btn-nv span,
.modal-cs1 .modal-body .btn-nv span {
	font-size: 68px;
	background: #fff2a5;
	background: linear-gradient(to bottom, #fff2a5 0%, #fae081 50%, #f2b124 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	line-height: 54px;
	font-family: 'blazeglory', sans-serif;
	font-weight: 500;
	text-align: center;
	text-transform: capitalize;
}

.modal-cs1 .modal-body .content-nv {
	width: 856px;
	height: 382px;
	max-height: 382px;
	overflow: auto;
	margin: 0 auto;
}

.modal-cs1 .modal-body .content-nv .items .description,
.modal-cs1 .modal-body .content-nv .items .btn-submit-nv {
	width: 50%;
	color: #2c2c2c;
	font-size: 18px;
}

.modal-cs1 .modal-body .content-nv .items .description h4 {
	font-family: 'blazeglory', sans-serif;
	font-size: 80px;
	color: #780000;
	margin-bottom: 0;
	margin-top: -24px;
}





@media (max-width: 640px) {
	.modal-cs1 {
		width: 360px;
		max-width: 360px;
		height: 255px;
		margin: 0 auto;
	}

	.modal-cs1 .modal-content {
		width: 360px;
		height: 255px;
		background: url(../images/bg-popup-m.png) no-repeat;
		background-size: 100%;
	}

	.modal-cs1 .modal-header .btn-close {
		position: absolute;
		top: -11px;
		right: -14px;
		width: 28px;
		height: 28px;
	}

	.modal-cs1 .modal-body .title {
		font-size: 46px;
		margin-top: -20px;
	}


	.modal-cs1 .modal-body .tbl-lichsu {
		max-height: 168px;
		width: 316px;
		font-size: 14px;
		padding: 0 8px;
	}

	.modal-cs1 .modal-body .tbl-lichsu thead tr th {
		font-size: 32px;
		font-weight: 300;
		text-align: center;
		padding: 0;
	}

	.modal-cs1 .modal-body .tbl-lichsu tbody tr td {
		font-size: 13px;
		font-weight: 300;
		padding: 0 8px;
	}

	.modal-cs1 .modal-body .content-nv {
		max-height: 168px;
		width: 316px;
		overflow: auto;
		margin: 0 auto;
		padding: 0 8px;
	}

	.modal-cs1 .modal-body .btn-nv,
	.modal-cs1 .modal-body .btn-nv {
		width: 142px;
		height: 39px;
		background: url(../images/bg-btn-quay.png) no-repeat;
		background-size: 100%;
		text-align: center;
		display: block;
		margin: 0 auto;
		color: #780000;
		text-decoration: none;
		line-height: 10px;
	}

	.modal-cs1 .modal-body .btn-nv span,
	.modal-cs1 .modal-body .btn-nv span {
		font-size: 40px;
		background: #fff2a5;
		background: linear-gradient(to bottom, #fff2a5 0%, #fae081 50%, #f2b124 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		line-height: 0;
		font-family: 'blazeglory', sans-serif;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
	}

	.modal-cs1 .modal-body .content-nv .items .description h4 {
		font-family: 'blazeglory', sans-serif;
		font-size: 38px;
		margin-top: 0;
	}

	.modal-cs1 .modal-body .content-nv .items .description,
	.modal-cs1 .modal-body .content-nv .items .btn-submit-nv {
		font-size: 13px;
	}
}

/*------------------Animation------------------*/
@keyframes blink {
	0% {
		opacity: 1;
		filter: brightness(1.1);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 1;
		filter: brightness(1.1);
	}

	100% {
		opacity: 1;
	}
}

@keyframes moveYDiv1 {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(20px);
	}

	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes moveYDiv1 {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(20px);
	}

	100% {
		transform: translateY(0px);
	}
}

@keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 1;
	}

	50% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.9);
		opacity: 1;
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 1;
	}

	50% {
		-webkit-transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(0.95);
		opacity: 1;
	}
}

.blink {
	animation: blink 0.5s ease-in-out infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
		filter: brightness(1.2);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 1;
		filter: brightness(1.2);
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes moveYDiv1 {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0px);
	}
}

@keyframes moveYDiv1 {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes moveYDiv {
	0% {
		transform: translateY(-5px);
	}

	50% {
		transform: translateY(5px);
	}

	100% {
		transform: translateY(-5px);
	}
}

@keyframes moveYDiv {
	0% {
		transform: translateY(-5px);
	}

	50% {
		transform: translateY(5px);
	}

	100% {
		transform: translateY(-5px);
	}
}

@keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes lightSpeedIn1 {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes lightSpeedIn1 {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes turn1 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

.pulse-reverse:hover,
.pulse-reverse:focus {
	-webkit-animation-name: pulse-reverse;
	animation-name: pulse-reverse;
	transition: all 0.2s ease-in-out;
	-webkit-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	filter: saturate(2);
}

@-webkit-keyframes pulse-reverse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse-reverse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes light-slide-x {
	0% {
		background-position: 500% 100%
	}

	to {
		background-position: -300% -300%
	}
}


@keyframes sparkle {
	0% {
		transform: scale(0.5) rotate(0deg);
		opacity: 0.1;
	}

	50% {
		transform: scale(1) rotate(90deg);
		opacity: 1;
		filter: brightness(200%);

	}

	100% {
		transform: scale(0.5) rotate(180deg);
		opacity: 0.1;
	}
}

/*----------------------------Light---------------------------------*/

.light {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 1;
	-webkit-animation: showsss 1s ease-in-out forwards;
	animation: showsss 1s ease-in-out forwards;
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;

}

@media only screen and (max-width: 960px) {
	.light {
		display: none
	}
}

.light img {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	display: block;
	background-size: cover
}

.light img:nth-child(1) {
	animation: light 20s infinite linear;
	-webkit-animation: light 20s infinite linear
}

.light img:nth-child(2) {
	animation: light 20s 10s infinite linear;
	-webkit-animation: light 20s 10s infinite linear;
	left: -20%;
	bottom: -50%;
}

@keyframes light {
	from {
		left: 0;
		bottom: -50%;
	}

	to {
		left: 0;
		bottom: 50%;
		opacity: .1
	}
}

@-webkit-keyframes light {
	from {
		left: -50%;
		bottom: -100%;
	}

	to {
		left: 50%;
		bottom: 200%;
	}
}

@-webkit-keyframes ani4 {
	0% {
		transform: translate(100px, 0px)
	}

	10% {
		transform: translate(70px, -20px)
	}

	20% {
		transform: translate(50px, -40px)
	}

	30% {
		transform: translate(20px, -50px)
	}

	40% {
		transform: translate(40px, -60px)
	}

	50% {
		transform: translate(60px, -40px)
	}

	60% {
		transform: translate(70px, -30px)
	}

	85% {
		transform: translate(90px, -20px)
	}

	100% {
		transform: translate(100px, 0px)
	}
}

@keyframes ani4 {
	0% {
		transform: translate(100px, 0px)
	}

	10% {
		transform: translate(70px, -20px)
	}

	20% {
		transform: translate(50px, -40px)
	}

	30% {
		transform: translate(20px, -50px)
	}

	40% {
		transform: translate(40px, -60px)
	}

	50% {
		transform: translate(60px, -40px)
	}

	60% {
		transform: translate(70px, -30px)
	}

	85% {
		transform: translate(90px, -20px)
	}

	100% {
		transform: translate(100px, 0px)
	}
}

@-webkit-keyframes ani1 {
	0% {
		transform: rotate(-5deg)
	}

	10% {
		transform: rotate(5deg)
	}

	20% {
		transform: rotate(-5deg)
	}

	30% {
		transform: rotate(5deg)
	}

	40% {
		transform: rotate(-5deg)
	}

	50% {
		transform: rotate(5deg)
	}

	60% {
		transform: rotate(-5deg)
	}

	70% {
		transform: rotate(5deg)
	}

	80% {
		transform: rotate(-5deg)
	}

	80%,
	100% {
		transform: rotate(0deg)
	}
}

@keyframes ani1 {
	0% {
		transform: rotate(-5deg)
	}

	10% {
		transform: rotate(5deg)
	}

	20% {
		transform: rotate(-5deg)
	}

	30% {
		transform: rotate(5deg)
	}

	40% {
		transform: rotate(-5deg)
	}

	50% {
		transform: rotate(5deg)
	}

	60% {
		transform: rotate(-5deg)
	}

	70% {
		transform: rotate(5deg)
	}

	80% {
		transform: rotate(-5deg)
	}

	80%,
	100% {
		transform: rotate(0deg)
	}
}