/*
  ========================================
  Layout for Desktop
  ========================================
*/

@keyframes blink {
	0% {
		opacity: 0;
	}

	49% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

a {
	color: white;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.74, 0.06, 0.69, 1);
}

a:visited {
	color: none;
	text-decoration: none;
}

a:hover {
	color: #99c0e6;
}

.content {
	opacity: 0;
}

.active {
	transform: translate3d(0px, 0, 0);
	opacity: 1;
}

@media screen and (min-width: 1000px) {

	/*
	  ========================================
	  Animation
	  ========================================
	*/
	* {
		transition: all 0.5s cubic-bezier(0.74, 0.06, 0.69, 1);
		/*transform: translate3d(0px, 60px, 0);*/
		/*opacity: 0;*/
	}
	.oversized {
		animation: blink 1s infinite;
	}

	/*
	  ========================================
	  Typography
	  ========================================
	*/

	.banner h1 {
		font-size: 20vw;
	}

	.container {
		margin: 0 auto;
		padding-left: 30px;
		padding-right: 30px;
		width: 1400px; /* 100%? */
	}

	.video-placeholder {
		width: 697px;
		height: 425px;
		/*background: black;*/
	}

	.col-1,
	.col-2,
	.col-3 {
		display: inline-block;
		vertical-align: top;
		margin-right: 92px;
	}

	header {
		margin-top: 30px;
		margin-bottom: 147px;
	}

	header img {
		height: 100px;
		margin: 0 43px;
	}

	section {
		position: relative;
		width: 100%;
	}

	section h1,
	section .text-block {
		margin: 0;
	}

	section img {
		width: none;
		max-width: none;
	}

	/*
	  ========================================
	  Section 1
	  ========================================
	*/

	.section-1 {
		height: 921px;
	}

	.section-1 h1 {
		position: absolute;
		left: 170px;
		top: 90px;
	}

	.section-1 .video-placeholder {
		position: absolute;
		left: 70px;
		top: 247px;
	}


	.portrait-l {
		position: absolute;
		z-index: -1;
		right: 55px;
		top: 284px;
		width: 402px;
		height: 604px;
	}

	.portrait-s {
		position: absolute;
		z-index: 3;
		right: 223px;
		top: 80px;
		width: 400px;
		height: 374px;
	}

	.section-1 .text-block {
		position: absolute;
		z-index: 1;
		right: 344px;
		top: 730px;
	}

	/*
	  ========================================
	  Section 2
	  ========================================
	*/

	.section-2 {
		height: 911px;
		margin-top: 161px;
	}

	.section-2 h1 {
		position: absolute;
		right: 296px;
		top: 0px;
	}

	.section-2 .video-placeholder {
		position: absolute;
		right: 73px;
		top: 142px;
		width: 791px;
		height: 531px;
	}

	.section-2 .thumbnail {
		width: 262px;
		height: 192px;
		position: absolute;
		top: 113px;
		left: 153px;
		z-index: 2;
	}

	.section-2 .image-block {
		position: absolute;
		left: 60px;
		top: 258px;
		margin-top: 0px;
		z-index: 3;
	}

	.section-2 .text-block {
		position: absolute;
		left: 127px;
		top: 807px;
		z-index: 4;
	}

	/*
	  ========================================
	  Section 3
	  ========================================
	*/

	.section-3 {
		margin-top: 138px;
	}

	.section-3 .caption {
		margin: 0;
	}

	.section-3 .video-placeholder {
		margin-top: 138px;
		width: 100%;
		height: 720px;
	}

	.profile {
		margin-top: 95px;
		height: 880px;
	}

	.profile ul {
		position: absolute;
		z-index: 3;
	}

	.profile-l {
		position: absolute;
		right: 246px;
		width: 600px;
		height: 666px;
	}

	.profile-s {
		position: absolute;
		left: 236px;
		top: 447px;
		width: 433px;
		height: 433px;
	}

	.profile ul {
		position: absolute;
		top: 77px;
		left: 113px;
	}

	.season {
		height: 1296px;
	}

	.season ul {
		position: absolute;
		top: 80px;
		right: 240px;
		z-index: 3;
	}

	.season-l {
		position: absolute;
		top: 160px;
		right: 365px;
		width: 585px;
		height: 703px;
		z-index: 1;
	}

	.season-s {
		position: absolute;
		top: 713px;
		right: 107px;
		width: 439px;
		height: 583px;
		z-index: 2;
	}

	.awards {
		margin-top: 100px;
		height: 1548px;
	}

	.awards ul {
		position: absolute;
		top: 75px;
		left: 257px;
		z-index: 3;
	}

	.awards-l {
		position: absolute;
		top: 260px;
		right: 284px;
		width: 672px;
		height: 899px;
	}

	.awards-s {
		position: absolute;
		top: 887px;
		left: 139px;
		width: 501px;
		height: 661px;
	}

	/*
	  ========================================
	  Section 4
	  ========================================
	*/

	.section-4 {
		margin-top: 275px;
		height: 1037px;
	}

	.section-4 h1 {
		position: absolute;
		right: 235px;
	}

	.section-4 .video-placeholder {
		position: absolute;
		top: 155px;
		width: 100%;
		height: 720px;
	}

	/*
	  ========================================
	  Section 5
	  ========================================
	*/
	
	.banner {
		position: relative;
		width: 100%;
		max-width: 100%;
	}

	.banner img {
		visibility: visible;
		width: 100%;
		/*display: none;*/
	}

	#banner-xi {
		background: none;
		margin-bottom: -25px;
	}

	#banner-xi img {
		animation: zoom-in-out 2s infinite steps(4, end);
	}

	@keyframes zoom-in-out {
		0% {
			transform: scale3d(1, 1, 1);
		}
		/*25% {
			transform: scale3d(0.75, 0.75, 0.75);	
		}
		50% {
			transform: scale3d(0.5, 0.5, 0.5);
		}*/
		75% {
			transform: scale3d(0.25, 0.25, 0.25);
		}
		100% {
			transform: scale3d(0, 0, 0);
		}
	}

	#banner-hero {
		background: none;
	}

	#banner-hero-back {
		background: none;
	}

	.grid-shoes {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 75px 0px;
	}

	.grid-shoes > * {
		width: 600px;
		height: 680px;
		flex-basis: 600px;
		margin: 35px;
	}

	/*
	  ========================================
	  Gallery
	  ========================================
	*/	

	.gallery {
		height: 1357px;
		margin-top: 116px;
	}

	.gallery img,
	.gallery .text-block {
		position: absolute;
	}	

	.gallery .text-block {
		z-index: 4;
	}
	
	.gallery-1 {
		width: 857px;
		height: 572px;
		top: 0px;
		left: 112px;
		z-index: 1;
	}

	.gallery-2 {
		width: 574px;
		height: 419px;
		top: 346px;
		right: 48px;
		z-index: 3;
	}

	.gallery-3 {
		width: 874px;
		height: 466px;
		left: 34px;
		bottom: 113px;
		z-index: 2;
	}

	.gallery ul:nth-of-type(1) {
		top: 598px;
		left: 200px;
	}

	.gallery ul:nth-of-type(2) {
		top: 996px;
		right: 328px;
	}

	/*
	  ========================================
	  Footer
	  ========================================
	*/

	footer {
		background-position: 50% 40%;
	}

	footer > * {
		padding-left: 60px;
	}
	
}