#presents {
	width:100%;
	text-align: center;
	margin:3em 0 0;
	color:#fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.main {
	overflow-x:clip;
}

#main-logo {
	margin-top:-5vw;
}

.quote {
	position:absolute;
	width:min(40%,300px);
	text-shadow:0 0 10px var(--bgblue);
	top:21em;
}

	.quote .stars {
		width:100%;
		text-align: center;
		margin-bottom:0.5em;
	}

		.quote .stars img {
			display:inline-block;
			width:2rem;
			margin:0;
		}

	.quote h2 {
		font-size:4em;
		color:#fff;
		text-transform:uppercase;
		width:100%;
		text-align:center;
		line-height:1;
		margin-bottom:0.15em;
		letter-spacing: 0.05em;
	}

	.quote p {
		font-size:1.6em;
		width:100%;
		text-align:center;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		font-weight:bold;
	}

	#quote1 {
		left:0%;
	}

	#quote2 {
		right:0%;
	}

.ctas {
	left:0;
	width:100%;
	top:8em;
	position:absolute;
}


.cta {
	display:block;
	width:20%;
	color:#111;
	font-size:1.1em;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	padding:0.75em 1em;
	text-decoration: none;
	background-color:var(--gold2);
	border-radius:20em;
	margin:2.5%;
}

	#buy-btn {
		float:left;
	}

	#watch-btn {
		float:right;
	}

	.cta p {
		margin-bottom: 0;
	}

	.cta:hover {
		background-color:#fff;
	}

.sponsor {
	width:250px;
	max-width:100%;
	position:absolute;
	right:2.5%;
	top:6%;
}


@media screen and (max-width:1239px) {
  .quote h2 {
  	font-size:2.8vw;
  }
  .quote p {
  	font-size:1.3vw;
  }

  #quote1,
	#quote2{
		display:block;
		position: static;
		width:100%;
		margin-bottom:0.5em;
	}

	#quote1,
	#quote2 {
		margin-bottom:3em;
	}

	.quote h2 {
		font-size:7vw;
	}

		.quote:first-of-type {
			margin-top:2em;
		}

	.quote p {
		font-size:3vw;
	}
}

@media screen and (max-width:960px){
	#presents {
		margin-top:1.5em;
		font-size:2em;
		line-height: 1;
	}

	.sponsor {
		position: relative;
		margin:3em auto 0;
		display:block;
		right:unset;
		top:unset;
	}
}

@media screen and (max-width:899px){
	.ctas {
		top:3%;
		padding:0 5%;
	}

		.ctas a {
			width:200px;
		}

	#main-logo {
		margin-top:0;
	}

	.quote p {
		font-size:1.2rem;
	}
}


@media screen and (max-width:499px) {

	.main {
		margin-top:1.5rem;
	}

		.main > img {
			padding-top:3rem;
		}

	.ctas {
		grid-template-columns: 1fr;
	}

		.ctas a {
			width:100%;
			margin:0 0 1em 0;
		}
	
	#logo-small {
		margin-top:20%;
	}
}