@charset "utf-8";
/* CSS Document */

/* HERO section heading and subheading "Spectral Extra Bold" */
@font-face {
font-family: 'spectral';
src: url('fonts/spectral/spectral-extrabold-webfont.eot') format('eot');
src: url('fonts/spectral/spectral-extrabold-webfont.eot?#iefix') format('embedded-opentype');
src: url('fonts/spectral/spectral-extrabold-webfont.woff') format('woff');
src: url('fonts/spectral/spectral-extrabold-webfont.woff2') format('woff2'),
url('fonts/spectral/spectral-extrabold-webfont.ttf') format('truetype'),
url('fonts/spectral/spectral-extrabold-webfont.svg#spectralextrabold') format('svg');
	font-weight:normal; font-style: normal;
}


html {
    font-size: 20px;
}

h1 {font-family: "spectral";
	font-size: 4.3vw;
    line-height: 4.9vw;
	/* display: inline-block; */
  	max-width: 100%;
	color: #000;
	
}


h2.subheading {font-family: "Lato" , sans-serif;
	font-size: 1.3vw;
	font-weight: 500;
    /*line-height: 4.6vw;*/
	display: inline-block;
	width: auto;
	color: #fff;
	background: linear-gradient(120deg, #000 5%, transparent 100%);
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	margin: 0 0 0 0;
	}

.pink-text {color: #ff5a87;}
.green-text {color: #00d2b9;}
.purple-text {color: #9655ff;}
.yellow-text {color: #ebeb05;}

.highlight-pink {
    background: linear-gradient(120deg, #ff5a87 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-black {
    background: linear-gradient(120deg, #000000 100%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 85%;
    background-position: 0 50%;

}

.highlight-green {
    background: linear-gradient(120deg, #00d2b9 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-purple {
    background: linear-gradient(120deg, #9655ff 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

.highlight-yellow {
    background: linear-gradient(120deg, #ebeb05 80%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 75%;
    background-position: 0 50%;

}

/* Removes linear gradient for text/background contrast ratio */
@media (prefers-reduced-motion: reduce) {
    .highlight-green { background: #00d2b9; /* Solid background */ }
	.highlight-pink { background: #ff5a87; /* Solid background */ }
	.highlight-black { background: #000; /* Solid background */ }
	.highlight-yellow { background: #ebeb05; /* Solid background */ }
	.highlight-purple { background: #9655ff; /* Solid background */ }
	.subheading	{ background: #000; /* Solid background */ }
}

@media (max-width: 100vw){
}

/* Responsive h1 hero, subheading, and image settings */

/* For small mobile devices */
@media (min-width: 320px) and (max-width: 480px) {
	h1 {
	font-size: 9.3vw;
    line-height: 10.7vw;
	/* display: inline-block; */
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 3.3vw;
  font-weight: 600;
  line-height: 9.6vw;
  display: inline-block;
  width: 95%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 5rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -417px !important;
}
}

/* For small - medium  mobile devices */
@media (min-width: 481px) and (max-width: 576px) {
	h1 {
	font-size: 11.3vw;
    line-height: 12.8vw;
	/* display: inline-block; */
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 3.3vw;
  font-weight: 600;
  line-height: 9.6vw;
  display: inline-block;
  width: 95%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -350px !important;
}
}

/* For medium mobile and tablet devices */
@media (min-width: 577px) and (max-width: 768px) {
	h1 {
	font-size: 9.3vw;
    line-height: 10.6vw;
	/* display: inline-block; */
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 2.6vw;
  font-weight: 600;
  line-height: 6.6vw;
  display: inline-block;
  width: 85%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -213px !important;
}
}

@media (min-width: 769px) and (max-width: 992px) {
	h1 {
	font-size: 8.3vw;
    line-height: 9.4vw;
	/* display: inline-block; */
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: 6.6vw;
  display: inline-block;
  width: 85%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -150px !important;
}
}


/* For medium mobile and tablet devices */
@media (min-width: 993px) and (max-width: 1200px) {
	h1 {
	font-size: 8.3vw;
    line-height: 8.9vw;
	/* display: inline-block; */
  	max-width: 100%;	
	}	
  h2.subheading {
  font-family: "Lato" , sans-serif;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: 5.6vw;
  display: inline-block;
  width: 65%;
  color: #fff;
  background: linear-gradient(120deg, #000 5%, transparent 100%);
  padding: 0 0 0 0.3em;
  margin: 0 0 0 0;
}
	
  .hero .hero-content, .hero .hero-alternative-content {
  position: relative;
  padding-top: 4rem;
  background-image: var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 0 !important;
}
}

