/**
 * Base styles
 **/

/* Fonts */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../fonts/anton-v23-latin-regular.woff2') format('woff2'),
		url('../fonts/anton-v23-latin-regular.woff') format('woff');
}

/* Background color */
.goooal-slider {
	background-color: #1b2f28;
}

/* Button colors */
.goooal-slider .cta-button-container a {
	color: #fff;
	background-color: #15D6C3;
}
.goooal-slider .cta-button-container a:hover {
	color: #fff;
	background-color: #0b6b61;
}

/* Typo */
.goooal-slider .typo-wrapper {
	position: absolute;
	color: #103028;
	font-family: 'Anton', sans-serif;
	text-align: center;
}

.goooal-slider .typo-background {
	position: absolute;
	left: 0;
	width: 0;
	overflow: hidden;
}

.goooal-slider .typo-wrapper-mobile {
	display: none;
}

.goooal-slider .typo-row-1,
.goooal-slider .typo-row-2 {
	opacity: 0;
}

/* Player */
.goooal-slider .player-wrapper {
	position: absolute;
	opacity: 0;
}

.goooal-slider .player,
.goooal-slider .player-line-l1,
.goooal-slider .player-line-l2,
.goooal-slider .player-line-l3,
.goooal-slider .player-line-r1,
.goooal-slider .player-line-r2,
.goooal-slider .player-line-r3 {
	position: absolute;
}

/* Eye-catcher */
.goooal-slider .eye-catcher {
	position: absolute;
	opacity: 0;
}

/**
 * Desktop styles
 **/
@media screen and (min-width: 1021px) {
	/* Background images */
	.goooal-slider {
		background-image: url('../images/background_desktop.jpg');
	}

	/* Typo */
	.goooal-slider .typo-wrapper {
		left: 20px;
		top: 245px;
		width: 540px;
		height: 133px;
		font-size: 2.9rem;
	}

	.goooal-slider .typo-background {
		top: -5px;
	}

	.goooal-slider .typo-background img {
		width: 540px;
		height: auto;
	}

	/* Player */
	.goooal-slider .player-wrapper {
		right: 30px;
		bottom: 10px;
		width: 547px;
		height: 503px;
	}

	.goooal-slider .player-line-l1 {
		left: 185px;
		top: 210px;
		width: 40px;
	}

	.goooal-slider .player-line-l2 {
		left: 180px;
		top: 210px;
		width: 80px;
	}

	.goooal-slider .player-line-l3 {
		left: 180px;
		top: 210px;
		width: 60px;
	}

	.goooal-slider .player-line-r1 {
		left: 270px;
		top: 110px;
		width: 35px;
	}

	.goooal-slider .player-line-r2 {
		left: 230px;
		top: 115px;
		width: 79px;
	}

	.goooal-slider .player-line-r3 {
		left: 190px;
		top: 120px;
		width: 120px;
	}

	/* Logo */
	.goooal-slider .logo {
		position: absolute;
		left: 70px;
		top: 60px;
		width: 400px;
	}

	/* Eye-catcher	*/
	.goooal-slider .eye-catcher {
		right: 90px;
		bottom: 90px;
		width: 100px;
		height: 100px;
	}
	
	/* Button position and size */
	.goooal-slider .cta-button-container {
		bottom: 40px;
	}
	.goooal-slider .cta-button-container a {
		padding: 20px 60px;
	}
}

/**
 * Tablet styles
 **/
@media screen and (min-width: 768px) and (max-width: 1020.9px) {
	/* Background images */
	.goooal-slider {
		background-image: url('../images/background_tablet.jpg');
	}

	/* Typo */
	.goooal-slider .typo-wrapper {
		left: 3%;
		top: 200px;
		width: 360px;
		height: 89px;
		font-size: 2rem;
	}

	.goooal-slider .typo-background {
		top: -2px;
	}

	.goooal-slider .typo-background img {
		width: 360px;
		height: auto;
	}

	/* Player */
	.goooal-slider .player-wrapper {
		right: 5%;
		bottom: 70px;
		width: 410px;
		height: 377px;
	}

	.goooal-slider .player-line-l1 {
		left: 115px;
		top: 205px;
		width: 31px;
	}

	.goooal-slider .player-line-l2 {
		left: 100px;
		top: 215px;
		width: 62px;
	}

	.goooal-slider .player-line-l3 {
		left: 95px;
		top: 222px;
		width: 47px;
	}

	.goooal-slider .player-line-r1 {
		left: 179px;
		top: 78px;
		width: 30px;
	}

	.goooal-slider .player-line-r2 {
		left: 170px;
		top: 79px;
		width: 60px;
	}

	.goooal-slider .player-line-r3 {
		left: 140px;
		top: 83px;
		width: 95px;
	}

	/* Logo */
	.goooal-slider .logo {
		position: absolute;
		left: 9%;
		top: 70px;
		width: 260px;
	}

	/* Eye-catcher	*/
	.goooal-slider .eye-catcher {
		right: 7%;
		bottom: 80px;
		width: 110px;
		height: 110px;
	}

	/* Button position and size */
	.goooal-slider .cta-button-container {
		bottom: 40px;
	}
	.goooal-slider .cta-button-container a {
		padding: 20px 60px;
	}
}

/**
 * Mobile styles
 **/
@media screen and (max-width: 767.9px) {
	/* Background images */
	.goooal-slider {
		background-image: url('../images/background_mobile.jpg');
	}

	/* Typo */
	.goooal-slider .typo-wrapper {
		display: none;
	}	

	.goooal-slider .typo-wrapper-mobile {
		display: block;
		position: absolute;
		left: 50%;
		left: 0;
		top: 5%;
		width: 100%;
		text-align: center;
	}

	.goooal-slider .typo-wrapper-mobile img {
		display: inline;
		width: 80%;
	}

	/* Player */
	.goooal-slider .player-wrapper {
		left: 55%;
		bottom: 4%;
		transform: translate(-50%, 0);
		width: 73%;
		height: 73%;
		opacity: 1;
	}

	.goooal-slider .player-line-l1 {
		left: 0;
		top: 27%;
		width: 7%;
	}

	.goooal-slider .player-line-l2 {
		left: -16%;
		top: 31%;
		width: 16%;
	}

	.goooal-slider .player-line-l3 {
		left: -10%;
		top: 35%;
		width: 13%;
	}

	.goooal-slider .player-line-r1 {
		left: 62%;
		top: 9%;
		width: 7%;
	}

	.goooal-slider .player-line-r2 {
		left: 66%;
		top: 5%;
		width: 19%;
	}

	.goooal-slider .player-line-r3 {
		left: 64%;
		top: 8%;
		width: 28%;
	}

	/* Logo */
	.goooal-slider .logo {
		position: absolute;
		left: 50%;
		top: 36%;
		transform: translate(-50%, 0);
		width: 55%;
	}

	/* Eye-catcher	*/
	.goooal-slider .eye-catcher {
		right: 10%;
		bottom: 24%;
		width: 16%;
		height: auto;
	}
	
	/* Button position and size */
	.goooal-slider .cta-button-container {
		bottom: 40px;
	}
	.goooal-slider .cta-button-container a {
		padding: 12px 25px;
	}
}

/**
 * Animation
 */
.goooal-slider.slick-active .typo-background {
	animation: typo-background-animation .6s ease-in-out 0s 1 forwards;
}

.goooal-slider.slick-active .typo-row-1 {
	animation: typo-row-animation .5s ease-in-out .1s 1 forwards;
}

.goooal-slider.slick-active .typo-row-2 {
	animation: typo-row-animation .5s ease-in-out .3s 1 forwards;
}

/* Desktop animation */
@media screen and (min-width: 1021px) {
	.goooal-slider.slick-active .player-wrapper {
		animation: player-animation .5s ease-in-out .5s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l1 {
		animation: player-line-l1-desktop-animation .2s ease-in .74s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l2 {
		animation: player-line-l2-desktop-animation .2s ease-in .72s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l3 {
		animation: player-line-l3-desktop-animation .2s ease-in .7s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r1 {
		animation: player-line-r1-desktop-animation .2s ease-in .74s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r2 {
		animation: player-line-r2-desktop-animation .2s ease-in-out .72s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r3 {
		animation: player-line-r3-desktop-animation .2s ease-in-out .7s 1 forwards;
	}

	.goooal-slider.slick-active .eye-catcher {
		animation: eye-catcher-animation .5s ease-in-out 1.25s 1 forwards;
	}
}

/* Tablet animation */
@media screen and (min-width: 768px) and (max-width: 1020.9px) {
	.goooal-slider.slick-active .player-wrapper {
		animation: player-animation .5s ease-in-out .5s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l1 {
		animation: player-line-l1-tablet-animation .2s ease-in .74s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l2 {
		animation: player-line-l2-tablet-animation .2s ease-in .72s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-l3 {
		animation: player-line-l3-tablet-animation .2s ease-in .7s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r1 {
		animation: player-line-r1-tablet-animation .2s ease-in .74s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r2 {
		animation: player-line-r2-tablet-animation .2s ease-in-out .72s 1 forwards;
	}

	.goooal-slider.slick-active .player-line-r3 {
		animation: player-line-r3-tablet-animation .2s ease-in-out .7s 1 forwards;
	}

	.goooal-slider.slick-active .eye-catcher {
		animation: eye-catcher-animation .5s ease-in-out 1.25s 1 forwards;
	}
}

/* Mobile animation */
@media screen and (max-width: 767.9px) {
	.goooal-slider.slick-active .typo-wrapper-mobile {
		animation: typo-mobile-animation .5s ease-in-out .1s 1 forwards;
	}

	.goooal-slider.slick-active .eye-catcher {
		animation: eye-catcher-animation .5s ease-in-out .5s 1 forwards;
	}
}

@keyframes typo-background-animation {
	0% { width: 0; }
	100% { width: 100%; }
}

@keyframes typo-row-animation {
	0% { transform: scale(.9); opacity: 0; }
	50% { transform: scale(1.1); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes typo-mobile-animation {
	0% { transform: scale(1); }
	33% { transform: scale(1.05); }
	66% { transform: scale(.95); }
	100% { transform: scale(1); }
}

@keyframes player-animation {
	0% { transform: translate(8%, -5%) scale(.8); opacity: 0; }
	100% { transform: translate(0) scale(1); opacity: 1; }
}

@keyframes player-line-l1-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-140px, -59px); }
}

@keyframes player-line-l2-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-220px, -42px); }
}

@keyframes player-line-l3-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-189px, -26px); }
}

@keyframes player-line-r1-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(105px, -65px); }
}

@keyframes player-line-r2-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(158px, -79px); }
}

@keyframes player-line-r3-desktop-animation {
	0% { transform: translate(0); }
	100% { transform: translate(192px, -70px); }
}

@keyframes player-line-l1-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-75px, -25px); }
}

@keyframes player-line-l2-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-120px, -15px); }
}

@keyframes player-line-l3-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(-95px, -7px); }
}

@keyframes player-line-r1-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(96px, -58px); }
}

@keyframes player-line-r2-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(115px, -64px); }
}

@keyframes player-line-r3-tablet-animation {
	0% { transform: translate(0); }
	100% { transform: translate(140px, -53px); }
}

 @keyframes eye-catcher-animation {
	0% { transform: scale(0); opacity: 0; }
	50% { transform: scale(1.1); opacity: 1; }
	75% { transform: scale(.9); }
	100% { transform: scale(1); opacity: 1; }
}