/*
Theme Name: Heard - Football Needs Our Planet 
Theme URI: footballneedsourplanet.com
Author: XYLO Worldwide
Description: Football Needs Our Planet Microsite
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
Tags: custom-colors, custom-menu,

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */





/*----------------------- core ---------------------------*/

* {
margin:0px;
}

:root {
--cubic: all 0.33s cubic-bezier(0,.82,.44,1);
--cubique: all 0.55s cubic-bezier(.66,0,.22,1);
--cubi: all 0.11s cubic-bezier(.66,0,.11,1);
}
	

html {
scroll-behavior: smooth;
}


body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: "obviously", sans-serif;
font-weight: 400;
font-style: normal;
background-color:#AF82F9;
transition: var(--cubic);
color:white;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
min-width: 100vw;
font-size: 1.0em;
}

body {
background: url('football-5g-background-500px.gif');
}

a {
color:inherit;
}

h1 {
font-family: obviously-narrow, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 6.0em;
line-height: 1.0em;
margin-top:-40px;
margin-bottom: 30px;
text-transform: uppercase;
}


h2 {
font-family: obviously-wide, sans-serif;
font-weight: 400;
font-style: italic;
font-size: 3.0em;
line-height: 1.0em;
margin-top:20px;
margin-bottom: 0px;
}

h3 {
font-family: obviously-narrow, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 3.0em;
line-height: 1.0em;
margin-bottom: 30px;
text-transform: uppercase;
}

h4 {
font-family: obviously-narrow, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 2.4em;
line-height: 1.0em;
margin-bottom: 30px;
text-transform: uppercase;
}

h5 {
font-family: obviously-narrow, sans-serif;
font-weight: 500;
font-style: italic;
margin: 25px 0px;
letter-spacing: 33px;
font-size: 1.6em;
text-transform: uppercase;

}



p {
font-family: "figtree", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.25em;
line-height: 1.25em;	
margin-bottom: 10px;
}

p a {
color: white;
}


i {
font-size: 3.0em;
line-height: 1.0em;
margin: 30px 0px;
}




.anchor {
position: absolute;
left:0px;
top:0px;
}


section {
position: relative;
max-width: 1500px;
width: calc(100vw - 50px);
margin:50px 0px 50px 0px;
}




/*----------------------- stylesheet A-Z ---------------------------*/



.down { animation: bounce 2s infinite; }

@keyframes bounce { 
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}




footer {
position: relative;
max-width: 1500px;
width: calc(100vw - 50px);
margin: 50px 0px;
display: flex;
flex-direction: column;
align-items: center;
border-top: 4px solid white;
padding-top: 50px;
}



footer .footer-logos {
position: relative;
display: flex;
align-items: center;
}




footer .footer-logos img {
width:175px;
height: auto;
filter: invert(1);
margin:0px 33px;
}


footer .footer-legal {
display: flex;
position: relative;
margin: 50px 0px;
font-size: 0.8em;
flex-direction: column;
align-content: center;
align-items: center;
}

footer .footer-legal h2 {
font-family: obviously-wide, sans-serif;
font-weight: 500;
font-size: 1.4em;
line-height: 1.9em;
margin-top: 0px;
margin-bottom: 0px;
}



section .contact {
display: flex;	
}


section .contact .contact-img {
position: relative;
padding-right: 25px;
}

section .contact .contact-img img {
width:100%;
height: auto;

}

section .contact h1 {
font-size: 4.8em;
line-height: 1.0em;
margin-top: 0px;
margin-bottom: 0px;	
}

section .contact h1 a {
position: relative;
color: inherit;
}



section .hero {
height: calc(100vh - 0px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: -10px;
}




section .hero .oEmbed { 
position: relative; 
padding-bottom:0px;
overflow: hidden;
width: 100%;
height: auto;
background-color: black;
} 

section .hero .oEmbed img { 
height: 100%;
width: 100%;
object-fit: cover;
filter: opacity(0.55);
} 

section .hero .oEmbed .watch {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: 1;
}

section .hero .oEmbed .watch .watch-now {
position: relative;
display: flex;
height: 100%;
align-items: center;
align-content: center;
justify-content: center;
}



section .hero .oEmbed .watch .watch-now .yt-button {
font-family: obviously-narrow, sans-serif;
font-weight: 500;
font-style: italic;
font-size: 3.0em;
line-height: 1.0em;
text-transform: uppercase;
background-color: #af82f9;
color: white;
padding: 7px 20px 16px 20px;
transition: var(--cubic);
border: none;
border-radius: 5px;
cursor: pointer;
}

section .hero .oEmbed .watch .watch-now .yt-button:hover {
text-transform: uppercase;
color: black;
border: none;
border-radius: 2px;
cursor: pointer;
margin-left: 10px;
}



section .hero .oEmbed .watch .watch-now .yt-button i {
font-size: 1.0em;
padding-left: 15px;
margin:0px;
}


section .hero .oEmbed iframe,
section .hero .oEmbed object,
section .hero .oEmbed embed { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

section .resources {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -50px;
}


section .resources .grid {
position: relative;
display: grid;
grid-template-columns: auto auto;
gap: 50px;
align-items: stretch;	
}

section .resources .grid .resource-box {
position: relative;
display: flex;
border: 3px solid white;
padding: 25px;
align-items: flex-start;
justify-content: center;
flex-direction: row;
border-radius: 0px;
background-color:#327652;
}



section .resources .grid .resource-box::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: -20px;
top: 20px;
transition: var(--cubic);
background-color: white;
z-index: -1;
}

section .resources .grid .resource-box:hover::after {
left: 0px;
top: 0px;
}


section .resources .grid .resource-box h4 {
padding-right: 25px;
flex:3;
}


section .resources .grid .resource-box .resource-links {
flex:3;
}







/*----------------- iPhone Landscape (A - Z) (Lock Off) ----------------- */


@media only screen  and (min-device-width: 300px)  and (max-device-width: 430px)  and (orientation: landscape) { *{ display: none; } }


/*----------------- iPhone 12 Pro Landscape (A - Z) -------------------- */

@media only screen 
and (min-device-width: 300px) 
and (max-device-width: 430px) 
and (orientation: portrait) { 


h1 {  font-size: 4.0em; }
	
h2 {  font-size: 2.0em; }
	
h5 { letter-spacing: 11px; }	
	
	
footer .footer-legal h2 { font-size: 1.0em; line-height: 1.55em;  text-align: center;  margin-bottom: 15px; }
	
	
section .contact { flex-direction: column; margin-top: -50px;}
	
	
section .contact h1 { font-size: 2.2em; }
	
section .contact .contact-img { position: relative; padding-right: 0px; padding-bottom: 25px; }
	
	
section .hero { height: calc(100vh - 125px);  text-align: center; margin-bottom: -50px; }
	
section .hero .oEmbed {flex:1}
	
section .hero .oEmbed .watch .watch-now .yt-button { font-size: 2.0em; }	
	
section .resources .grid {  grid-template-columns: auto; }
	
section .resources .grid .resource-box h4 { padding-right: 25px;  flex: 2;}	

footer .footer-logos {  flex-direction: column; }
	
	
	
	
	
	
	
	
	
}