/*
Theme Name: Move Child Theme
Template: theme360
Version: 1.0
Author: Respond Agency Ltd
Author URI: https://werespond.uk
Description: A Theme360 child theme for Move Sports Marketing
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'remo_plus_proultra_italic';
    src: url('assets/fonts/remopluspro-ultraitalic-webfont.woff2') format('woff2'),
         url('assets/fonts/remopluspro-ultraitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
/* Fonts */
  --fnt_font-family: 'Space Grotesk', sans-serif;
  --fnt_font-size: 19px;
  --fnt_line-height: 1.7em;
  --fnt_font-weight: 400;
  
  --cta_fnt_font-size: 1rem;
  --cta_fnt_line-height: 1.3rem;
  --cta_fnt_font-weight: 500;
  --cta_fnt_text-transform: none;
  
  --cta-txt_fnt_font-size: 0.9rem;
  --cta-txt_fnt_font-weight: 600;
  --cta-txt_fnt_text-transform: uppercase;

  --psh_fnt_font-size: 0.9rem;
  --psh_fnt_line-height: 1.2rem;
  --psh_fnt_font-weight: 600;
  
  --pre_fnt_font-size: 0.8rem;
  --pre_fnt_line-height: 1.2rem;
  --pre_fnt_font-weight: 500;
  --pre_fnt_letter-spacing: 0.15rem;
  
  --hed_fnt_font-weight: 400;
  --hed_fnt_letter-spacing: -0.05rem;
  
  --h1_fnt_font-size: 6rem;
  --h1_fnt_line-height: 6.4rem;
  
  --h2_fnt_font-size: 3.5rem;
  --h2_fnt_line-height: 3.9rem;

  --h3_fnt_font-size: 1.8rem;
  --h3_fnt_line-height: 2.2rem;

  --h4_fnt_font-size: 1.5rem;
  --h4_fnt_line-height: 1.9rem;

/* Colours */
  --clrshadow: 1px 4px 20px 1px rgba(46,128,255,0.15);
  --clrblack: #1b172d;
  --clrblack_alt: #32174b;
  --clrwhite: #fff;
  --clrwhite_alt: #eef0f9;
  --clrgrey: #eef0f9;
  --clrgrey_alt: #d8dbe9;
  /* Pink */
  --clr1: #ff47c1;
  --clr1_alt: #ff13cc;
  --clr1_txt: #fff;
  /* Purple */
  --clr2: #1b172d;
  --clr2_alt: #32174b;
  --clr2_txt: #fff;

/* Corners */
  --radius_sm: 0px;
  --radius_md: 3px;
  --radius_cta: 0;
  
/* Padding */
  --cntntpad: 80px;
  --cntntpad_slm: 40px;
  --ctapad: 12px 20px;
}

/* Less than Medium */		
@media screen and (max-width: 64em) { 
	:root {
	/* Fonts */
	  --fnt_font-size: 19px;
	  --fnt_line-height: 1.7em;
  
	  --cta_fnt_font-size: 0.9rem;
	  --cta_fnt_line-height: 1.2rem;
  
	  --h1_fnt_font-size: 3rem;
	  --h1_fnt_line-height: 3.4rem;
  
	  --h2_fnt_font-size: 2.2rem;
	  --h2_fnt_line-height: 2.6rem;

	  --h3_fnt_font-size: 1.6rem;
	  --h3_fnt_line-height: 2rem;

	  --h4_fnt_font-size: 1.4rem;
	  --h4_fnt_line-height: 1.8rem;

  
	/* Padding */
	  --cntntpad: 60px;
	  --cntntpad_slm: 40px;
	  --ctapad: 10px 18px;
	}
}


/* -- Overrides -- */
	.large-container {
		max-width: 1600px;
		padding: 0 100px;
		box-sizing: border-box;
		margin: auto;
	}
	
	.large-container .pure-u-1 {
		padding: 0;
	}
	
	header.clr2-bg {
		position: absolute;
		width: 100%;
		background: none !important;
		padding: 30px 0;
	}
	
	.header-container .logo img {
		width: 170px;
	}
	
	section#row-1 {
		padding: 250px 0 200px
	}
	
	section#row-1.banner {
		min-height: 100vh;
		position: relative;
		box-sizing: border-box;
	}
	
	section#row-1.banner:after {
		min-height: 500px;
		content: "";
		display: block;
		width: 1px;
	}
	
	section#row-1.banner .large-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
	}
	
	section#row-1.banner .content-container {
		box-sizing: border-box;
		max-width: 1100px;
	}
	
	.banner.bg-img {
		position: relative;
		overflow: hidden;
	}
	
		.banner.bg-img .bg-img-false {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			background-size: cover;
			height: 120%;
			width: 120%;
			z-index: 0;
			transition: background-position 0.1s ease-out;
		}
		
		.banner.bg-img *, header {
			position: relative;
			z-index: 2;
		}
	
	h1, h2, h3, h4, h5, h6 {
		font-family: "remo_plus_proultra_italic", "Space Grotesk", sans-serif;
		text-transform: uppercase;
	}
	
	/* Override Primary CTA */
	a.cta.sm {
    padding: 8px 17px;
    min-width: 0;
    font-size: 1rem;
	}

	a.cta.primary, a.cta.secprimaryondary:link, a.cta.primary:active, a.cta.primary:visited {
		background: var(--clr1);
		border: solid 3px var(--clr1);
		color: var(--clr1_txt);
		font-family: "remo_plus_proultra_italic", "Space Grotesk", sans-serif;
		text-transform: uppercase;
		position: relative;
		left: 0;
		 clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
	}

		a.cta.primary:hover {
			background: var(--clr1_alt);
			border-color: var(--clr1_alt);
			left: 5px;
		}
		
	.clr2-bg a.cta.primary, .clr2-bg a.cta.primary:link, .clr2-bg a.cta.primary:visited, .clr2-bg a.cta.primary:active {
		background: var(--clrwhite);
		border-color: var(--clrwhite);
		color: var(--clr1);
	}
	
		.clr2-bg a.cta.primary:hover {
			background: var(--clrwhite_alt);
			border-color: var(--clrwhite_alt);
			color: var(--clr1);
		}
		
	/* Override Secondary CTA */
	a.cta.secondary, a.cta.secondary:link, a.cta.secondary:active, a.cta.secondary:visited {
		background: var(--clr2);
		border: solid 3px var(--clr2);
		color: var(--clr2_txt);
	}

		a.cta.secondary:hover {
			background: var(--clr2_alt);
			border-color: var(--clr2_alt);
		}
		
	.clr2-bg a.cta.secondary, .clr2-bg a.cta.secondary:link, .clr2-bg a.cta.secondary:visited, .clr2-bg a.cta.secondary:active {
		background: var(--clrwhite);
		border-color: var(--clrwhite);
		color: var(--clrblack);
	}
	
		.clr2-bg a.cta.secondary:hover {
			background: var(--clrwhite_alt);
			border-color: var(--clrwhite_alt);
			color: var(--clrblack);
		}
		
	/* Features */
	.features svg {
		color: var(--clr1);
	}
			
			
	/* Media Container */
	section.media {
		font-size: 0;
		line-height: 0;
	}
	
	.full-width-container .pure-u-1 {
		padding: 0;
	}
			
			
	/* Footer */
	footer .contact {
		font-size: 1.5rem;
	}
	
		footer .contact a:link, footer .contact a:active, footer .contact a:visited {
			color: var(--clr2);
			text-decoration: none;
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
			position: relative;
			bottom: 0;
			padding-bottom: 0;
		}
		
			footer .contact a:hover {
				bottom: 8px;
				padding-bottom: 8px;
			}
		
			footer .contact a svg {
				color: var(--clr1);
			}

/* Less than Medium */		
@media screen and (max-width: 64em) {
	section#row-1 {
		padding: 175px 0 125px;
	}
	
	.large-container {
		max-width: 1600px;
		padding: 0 30px;
		box-sizing: border-box;
		margin: auto;
	}
	
	section#row-1.banner .content-container {
		max-width: 1300px;
		padding: 0;
		box-sizing: border-box;
	}
}

/* Less than Small */	
@media screen and (max-width: 48em) { 

}