/* All CSS should be added to this file - DO NOT add CSS elsewhere */

/* CSS Variables */
:root {
	--margin: 30px;
}

/* Font Faces */
@font-face {
    font-family: 'adidasFG';
    src: url('../fonts/FranklinGothicLTPro-Dm.eot');
    src: url('../fonts/FranklinGothicLTPro-Dm.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FranklinGothicLTPro-Dm.woff2') format('woff2'),
        url('../fonts/FranklinGothicLTPro-Dm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'adidasFG_C';
    src: url('../fonts/FranklinGothicLTPro-BkCm.eot');
    src: url('../fonts/FranklinGothicLTPro-BkCm.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FranklinGothicLTPro-BkCm.woff2') format('woff2'),
        url('../fonts/FranklinGothicLTPro-BkCm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'adidasFG_BC';
    src: url('../fonts/FranklinGothicLTPro-DmCm.eot');
    src: url('../fonts/FranklinGothicLTPro-DmCm.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FranklinGothicLTPro-DmCm.woff2') format('woff2'),
        url('../fonts/FranklinGothicLTPro-DmCm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Base Styles */
body {
	background-color: #0F151D;
	color: #fff;
	font-family: 'adidasFG_C', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'adidasFG_BC', sans-serif;
	color: #fff;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: .15rem;

	margin: 0 auto;
}
h1, h2, h3, h4, h5, h6, .footer-tags {

	font-size:30px;
	
}
h2 {

	margin-bottom:30px;
}
h3 {

	font-family: 'adidasFG_C', sans-serif;
}

h3, .link-label {
	letter-spacing: .05rem;

}
/* Layout */
.site-inner {
	padding: var(--margin);
}

.content {

	max-width: 1200px;
	margin:0 auto;
}

.section {

	margin-bottom:80px;
}

.site-footer {

	display:none;
}
/* Header */
#intro_header {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.header-background {
	width: 100%;
}

.header-background .desktop-image {
	width: 100%;
	height: auto;
	display: block;
}

.header-background .mobile-image {
	width: 100%;
	height: auto;
	display: none;
}

.header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.header-column {
	width: 33.333%;
	height: 100%;
	display: flex;
	align-items: center;
}

.header-column .inner {
	width: 100%;
}

.header-left {
	justify-content: center;
}

.header-left .inner {
	padding: 0 20%;
}

.header-right .inner {
	
}

.adidas-logo {
	width: 100%;
	max-width: 100%;
	display: block;
}

img.adidas-logo {
	width: 100%;
	height: auto;
}



.header-right {
    justify-content: center;
	text-align: center;

}


.header-right .inner {
width:100%;
padding-right:  var(--margin);
text-align: center;
}

.header-right h1 {
	margin: var(--margin);
	color: #fff;
	font-size: 4.5vw;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1.55vw;
    margin-left: -.1vw;
}

/* Intro Section */
#intro {
	padding: var(--margin) 0;
	line-height:1.6;
}

.intro-content {
	margin: 0 auto;
	text-align: center;
}

.intro-content h2 {
	margin-top: 60px;
	font-size: 30px;
	
}

/* Links Section */
#assets {
	padding: var(--margin) 0;
}


.link-row a, .messaging-container, .mainfooter {

	padding: 40px 0;
}

.links-container {
	margin: 0 auto;
}

.link-row {
	border-top: solid 1px #fff;
	
}

.link-row a {
	display: flex;
	text-decoration: none;
	color: #fff;
	align-items: center;
	position: relative;
}

.link-hover-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: 1px solid transparent;
}

.link-row a:hover .link-hover-border {
	border-top: 1px solid #fff;
}

.link-label {
	width: 30%;
	padding-right: 20px;
	font-family: 'adidasFG_C', sans-serif;
	text-transform: uppercase;

}

.link-description {
	flex: 1;
	max-width: 900px;
	text-align: left;
	padding-right: 60px;
}

.link-icon {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.link-icon img {
	width: 24px;
	height: 24px;
}

/* Motion Graphic Section */
#motion {
	padding: var(--margin) 0;
}

.motion-container {
	display: flex;
	gap: 100px;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
}

.motion-content {
	flex: 1;
}

.motion-video {
	width: 30%;
	position: relative;
}

.motion-video:before {
	content: "";
	display: block;
	padding-top: 100%; /* Creates a square aspect ratio */
}

.motion-video a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	border-radius: 10px;
}

.motion-video video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Makes video fill the container while maintaining aspect ratio */
	display: block;
	border-radius: 10px;
}

/* Messaging Section */
#messaging {
	padding: var(--margin) 0;
}

#messaging h2 {
	max-width: 1200px;
	margin: 0 auto 40px;
}

.messaging-container {
	display: flex;
	flex-wrap: wrap;
	gap: 100px;
	max-width: 1200px;
	margin: 0 auto;
	border-top: solid 1px #fff;
}

.messaging-item {
	width: calc(50% - 50px); /* 50% width minus half of gap */
}

.messaging-item h3 {
	margin-bottom: 15px;
	font-size: 24px;
}

.messaging-item p {
	line-height: 1.6;
}

/* Footer */
.mainfooter {
	border-top: 1px solid #fff;
	margin-top: 120px;
}
.mainfooter h2 {

	margin-left: 0;
    width: auto;
    margin-right: 80px;
	margin-bottom:0;
	margin-top: 0;
}
.footer-container {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

.footer-social {
	width: 50%;
	text-align: left;
	display: flex;
	align-items: center;
}

.footer-tags {
	font-family: 'adidasFG_C', sans-serif;
}

.footer-contact {
	margin-left: auto;
	text-align: right;
}

.contact-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #fff;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.contact-link:hover {
	opacity: 1;
}

.contact-link span {
	margin-right: 10px;
}

.contact-link img {
	width: 15px;
	height: 15px;
}

/* Responsive Styles */
@media (max-width: 900px) {
	/* Header Responsive */
	#intro_header {
		height: 100vh;
		max-height: 600px;
		min-height:570px;
	}
	
	.header-background .desktop-image {
		display: none;
	}
	
	.header-background .mobile-image {
		display: block;
		height: 100vh;
		object-fit: cover;
		max-height: 600px;
		min-height:570px;
	}
	
	.header-overlay {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding:  0;
		height: 100%;
	}
	
	.header-column {
		width: 100%;
		margin-bottom: 0;
	}
	
	.header-middle {
		display: none;
	}
	
	.header-right {
		order: 1;
		justify-content: center;
		margin-bottom: auto;
		height: auto;
	}
	
	.header-right .inner {
		align-self: flex-start;
		margin-top: 0;
		padding:0;
	}
	
	.header-left {
		order: 3;
		padding: 0;
		justify-content: center;
		margin-top: auto;
		height: auto;
	}
	
	.header-left .inner {
		align-self: flex-end;
		margin-bottom: 0;
	}
	
	.adidas-logo {
		width: 50%;
		max-width: 240px;
	}
	img.adidas-logo {
	
		margin: 0 auto;
	}
	.header-right h1 {
		text-align: center;
		margin: 0;
		font-size: 13vw;
        letter-spacing: 4vw;
		margin-left: 4vw;
	}

.footer-social h2 {

margin:0;

}
	
h1, h2, h3, h4, h5, h6, .footer-tags, .intro-content h2  {
      font-size: 24px;
}

.section {

	margin-bottom:40px;
}

	/* Content Responsive */
	.link-row a {
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}
	
	.link-label, .link-description {
		width: calc(100% - 40px);
	}
	
	.link-label {
		margin-bottom: 15px;
	}
	
	.link-icon {
		position: absolute;
		top: 40px; /* Match the parent's padding */
		right: 0;
		width: 24px;
	}
	
	.motion-container {
		flex-direction: column;
		gap: 40px;
	}
	
	.motion-content {
		width: 100%;
	}
	
	.motion-video {
		width: 80%;
		margin: 0 auto;
	}
	
	.messaging-container {
		gap: 40px;
	}
	
	.messaging-item {
		width: 100%;
	}
	
	.footer-container {
		flex-direction: column;
	}
	
	.footer-social {
		width: 100%;
		justify-content: space-between;
	}
	
	.footer-tags {
		margin-left: 0;
		text-align: right;
	}
	
	.footer-contact {
		width: 100%;
		margin: 100px auto;
		text-align: center;
		order: 2;
	}
	
	.contact-link {
		justify-content: center;
	}
}