


.overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10
}
.gradient-color {
    background: #5c006c;
    background: -webkit-linear-gradient(315deg, #5c006c, #9C27B0);
    background: linear-gradient(135deg, #5c006c, #9C27B0);
}

.title-link {
	position: relative;
	overflow: hidden;
	font-weight: 500;
	color: inherit;
	text-transform: uppercase;
	font-size: 1.5rem
}
.title-link::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-width: 2px 0;
	color: #ffffff;
	border-style: solid;
	left: 0;
	-webkit-transform: translate3d(-101%, 0, 0);
	transform: translate3d(-101%, 0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s
}
.title-link:hover::before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
.title-link span {
	display: inline-block;
	position: relative;
	-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
	transform: perspective(1000px) rotate3d(0, 1, 0, 0deg);
	-webkit-transition: color 0.5s, -webkit-transform 0.5s;
	transition: color 0.5s, -webkit-transform 0.5s;
	transition: transform 0.5s, color 0.5s;
	transition: transform 0.5s, color 0.5s, -webkit-transform 0.5s
}
.title-link:hover span {
	color: black;
	-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 360deg);
	transform: perspective(1000px) rotate3d(0, 1, 0, 360deg)
}
.title-link.blacky:hover span {
	color: #6a6a6a
}
.title-link span:nth-child(7), .title-link:hover span:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s
}
.title-link span:nth-child(6), .title-link:hover span:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s
}
.title-link span:nth-child(5), .title-link:hover span:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s
}
.title-link span:nth-child(4), .title-link:hover span:nth-child(4) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s
}
.title-link span:nth-child(3), .title-link:hover span:nth-child(5) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s
}
.title-link span:nth-child(2), .title-link:hover span:nth-child(6) {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s
}
.title-link span:first-child, .title-link:hover span:nth-child(7) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s
}


#main-header {
	position: relative;
	height: 100vh;
	max-height: 900px;
	min-height: 700px;
	background-size: cover;
	color: #ffffff;
	padding-top: 64px
}
#main-header .gradient-color {
	z-index: 0
}
#main-header .overlay {
	opacity: 0.9
}
#main-header .header-section {
	position: relative;
	height: 100%;
	color: inherit;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}
#main-header .owl-header {
	position: relative;
	width: 25%;
	z-index: 101
}
#main-header iframe {
	max-width: 100%;
	width: 600px;
	height: 600px
}
#main-header #ripples {
	position: absolute;
	left: 0;
	top: 45%;
	width: 100%;
	height: auto;
	z-index: 103
}
#main-header #ripples .arrows {
	position: relative;
	top: 40%;
	margin: 0 2rem
}
#main-header #ripples .arrows .scene-next {
	position: absolute;
	right: 0;
	top: 0
}
#main-header #ripples .arrows .scene-prev {
	position: absolute;
	top: 0;
	left: 0
}
#main-header #ripples .arrows i {
	font-size: 1.55rem
}
#main-header #ripples canvas {
	display: block;
	position: absolute;
	z-index: 100;
	min-height: 700px;
	max-width: 100vw;
	overflow: hidden
}
#main-header .slide-wrapper {
	display: none
}
#main-header .header-text {
	text-align: center;
	position: relative;
	padding-right: 4rem;
	width: 60%;
	margin-right: 10%;
	margin-top: -6rem;
	z-index: 101
}
#main-header .title-link {
	letter-spacing: 1rem;
	font-size: 8vw;
	z-index: 101
}
#main-header .description {
	color: inherit;
	padding: 0 2rem
}
#main-header .slogan {
	text-align: center;
	border: 2px solid #fff;
	border-radius: 30px;
	display: inline-block;
	padding: 0.2rem 3rem;
	word-spacing: 3px;
	font-size: 0.85rem;
	color: #fff;
	text-transform: uppercase;
	margin: 1rem;
	cursor: pointer
}

#main-header .apperle-count-down-wrapper h4 {
	color: inherit
}
#main-header .apperle-count-down-wrapper #clockdiv {
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px
}
#main-header .apperle-count-down-wrapper #clockdiv > div {
	padding: 10px;
	margin: 5px 0;
	border-radius: 3px;
	background: #1994bf;
	display: inline-block
}
#main-header .apperle-count-down-wrapper #clockdiv div > span {
	padding: 15px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.24);
	display: inline-block
}
#main-header .apperle-count-down-wrapper .smalltext {
	padding-top: 5px;
	font-size: 16px
}

#main-header.parallax-main-header {
	background: #000000;
	overflow: hidden
}
#main-header.parallax-main-header .layer #svg {
	position: absolute;
	left: -700px;
	overflow: visible
}
#main-header.parallax-main-header #svg-container #svg {
	top: -100px;
	min-width: 3875px;
	min-height: 1631px
}
#main-header.parallax-main-header .layer2 #svg {
	top: -40%
}
#main-header.parallax-main-header .layer {
	width: 100%;
	height: 100%;
	position: relative
}
#main-header.parallax-main-header .header-layer {
	width: 100%;
	height: 100%;
	position: relative
}
#main-header.parallax-main-header .header-text {
	width: 100%;
	margin: 0;
	padding: 0;
	top: 55%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0
}
#main-header.parallax-main-header .header-text .description {
	max-width: 700px;
	margin: 0 auto;
	padding: 1rem 1.5rem
}
#main-header.parallax-main-header .title-link {
	display: inline-block;
	margin: 0 auto 1rem
}
#main-header.parallax-main-header .parallax {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	overflow: hidden
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(1) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(-200deg) translate3d(60px, -90px, 50px);
	transform: rotate(-200deg) translate3d(60px, -90px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(1) .parallax-animate {
	-webkit-animation: wave 25s 0.2s infinite linear;
	animation: wave 25s 0.2s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(2) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(-120deg) translate3d(20px, 200px, 50px);
	transform: rotate(-120deg) translate3d(20px, 200px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(2) .parallax-animate {
	-webkit-animation: wave 35s 0.4s infinite linear;
	animation: wave 35s 0.4s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(3) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(90deg) translate3d(30px, -80px, 50px);
	transform: rotate(90deg) translate3d(30px, -80px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(3) .parallax-animate {
	-webkit-animation: wave 15s 0.6s infinite linear;
	animation: wave 15s 0.6s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(4) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(320deg) translate3d(100px, 230px, 50px);
	transform: rotate(320deg) translate3d(100px, 230px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(4) .parallax-animate {
	-webkit-animation: wave 18s 0.3s infinite linear;
	animation: wave 18s 0.3s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(5) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(300deg) translate3d(-9px, -113px, 72px);
	transform: rotate(300deg) translate3d(-9px, -113px, 72px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(5) .parallax-animate {
	-webkit-animation: wave 19s 0.6s infinite linear;
	animation: wave 19s 0.6s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(6) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(-20deg) translate3d(20px, 140px, 50px);
	transform: rotate(-20deg) translate3d(20px, 140px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(6) .parallax-animate {
	-webkit-animation: wave 20s 0.8s infinite linear;
	animation: wave 20s 0.8s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(7) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(80deg) translate3d(60px, 180px, 50px);
	transform: rotate(80deg) translate3d(60px, 180px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(7) .parallax-animate {
	-webkit-animation: wave 21s 0.3s infinite linear;
	animation: wave 21s 0.3s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(8) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(40deg) translate3d(200px, 350px, 50px);
	transform: rotate(40deg) translate3d(200px, 350px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(8) .parallax-animate {
	-webkit-animation: wave 22s 0.14s infinite linear;
	animation: wave 22s 0.14s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(9) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(-120deg) translate3d(770px, 580px, 40px);
	transform: rotate(-120deg) translate3d(770px, 580px, 40px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(9) .parallax-animate {
	-webkit-animation: wave 23s 0.17s infinite linear;
	animation: wave 23s 0.17s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(10) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(10deg) translate3d(1200px, 120px, 50px);
	transform: rotate(10deg) translate3d(1200px, 120px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(10) .parallax-animate {
	-webkit-animation: wave 24s 0.19s infinite linear;
	animation: wave 24s 0.19s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(11) {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: rotate(10deg) translate3d(12px, 240px, 50px);
	transform: rotate(10deg) translate3d(12px, 240px, 50px)
}
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(11) .parallax-animate {
	-webkit-animation: wave 25s 0.2s infinite linear;
	animation: wave 25s 0.2s infinite linear;
	width: 100%;
	height: 100%
}
#main-header.parallax-main-header .parallax img {
	opacity: 0.7
}
@-webkit-keyframes wave {
	0% {
		-webkit-transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg);
		transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg)
	}
	100% {
		-webkit-transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg);
		transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg)
	}
}
@keyframes wave {
	0% {
		-webkit-transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg);
		transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg)
	}
	100% {
		-webkit-transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg);
		transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg)
	}
}

.blog #main-header {
	height: 300px;
	min-height: 300px
}
.blog #main-header .title {
	height: 100%;
	width: 100%;
	text-align: center;
	position: relative;
	background: url("../images/background/blog-bg.png") no-repeat center bottom;
	overflow: hidden
}
.blog #main-header h2 {
	position: relative;
	top: 40%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: inherit
}

@media screen and (min-width: 1400px) {
	#main-header .title-link {
		font-size: 4rem
	}
}

@media screen and (max-width: 992px) {
	
	#main-header {
    height: 60vh;
    max-height: 850px;
    min-height: 640px;
	}
	.intro-info2 {
    margin: 0px 10px;
}
	
	#main-header.parallax-main-header .header-text {
    top: 70%;
}
#main-header .title-link {
    font-size: 4vw;
    letter-spacing: 11px;
}
	#main-header:not(.parallax-main-header) {
		height: auto;
		min-height: inherit
	}
	#main-header:not(.parallax-main-header) .header-section {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-align-self: center;
		-ms-flex-item-align: center;
		align-self: center;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between
	}
	#main-header:not(.parallax-main-header) iframe {
		width: 400px;
		height: 450px
	}
	#main-header:not(.parallax-main-header) .header-text {
		width: 80%;
		margin: 0 auto;
		padding: 5rem 0
	}
	#main-header:not(.parallax-main-header) .owl-header {
		width: 100%;
		max-width: 200px;
		margin: 0 auto
	}
	#main-header #ripples {
		height: 100%;
		top: 0
	}
	.blog #main-header {
		height: 300px;
		min-height: 300px
	}
	
}
@media screen and (max-width: 600px){
.parallax img {
    width: 30%;
}
	
#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(2) {
    -webkit-transform: rotate(-120deg) translate3d(230px, 550px, 50px);
    transform: rotate(-120deg) translate3d(230px, 550px, 50px);
}	
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(3) {
    -webkit-transform: rotate(90deg) translate3d(-90px, 380px, 50px);
    transform: rotate(90deg) translate3d(-90px, 380px, 50px);
}
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(4) {
    -webkit-transform: rotate(320deg) translate3d(370px, 110px, 50px);
    transform: rotate(320deg) translate3d(370px, 110px, 50px);
}
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(5) {
    -webkit-transform: rotate(300deg) translate3d(-9px, 517px, 72px);
    transform: rotate(300deg) translate3d(-9px, 517px, 72px);
}
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(6) {
    -webkit-transform: rotate(-20deg) translate3d(20px, 110px, 50px);
    transform: rotate(-20deg) translate3d(20px, 110px, 50px);
}
	
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(7) {
    -webkit-transform: rotate(80deg) translate3d(50px, 110px, 50px);
    transform: rotate(80deg) translate3d(50px, 110px, 50px);
}
	#main-header.parallax-main-header .parallax .parallax-wrapper:nth-child(8) {
    -webkit-transform: rotate(40deg) translate3d(50px, 210px, 40px);
    transform: rotate(40deg) translate3d(50px, 210px, 40px);
}
	.intro-info2 h2 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 16px;
}
	
	
	
	.intro-info2 a {
padding: 10px 40px;
    border-radius: 50px;
    font-size: 18px;
    display: block;
    margin: 0px auto;
    margin-bottom: 10px;
}
}