html,
body {
	margin: 0;
    background: #fff;
}

#page-body {
	max-width: 100% !important;
	width: 100% !important;
}

#banner-area-wrapper {
	display: none !important;
}

@font-face {
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1479811/Inter-UI.var.ttf")
		format("truetype");
	font-family: "Work Sans";
	font-style: normal;
}
.title {
	position: relative;
	font-family: "Work Sans", sans-serif;
	text-transform: uppercase;
	font-size: 6vw;
	line-height: 4.6vw;
	-webkit-transform: scale(1, 2.25) rotatez(360deg);
	        transform: scale(1, 2.25) rotatez(360deg);
	text-align: center;
	color: black;
}


.fifty {
	width: 450px;
	display: inline-block;
}

.variable1 {
	position: relative;
	font-family: "Work Sans", sans-serif;
	text-transform: uppercase;
	font-size: 6vw;
	line-height: 4.6vw;
	-webkit-transform: scale(1, 2.25);
	        transform: scale(1, 2.25);
	text-align: center;
	color: black;
	font-stretch: ultra-condensed !important;
	/* transition: all 0.09s ease-in-out; */
	margin: 50px 0 250px 0;

	/* transform-origin: left top;
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg); */
}

.variable1 span, .variable span{
	transition: font-variation-settings 0.09s ease-in;
}

.variable {
	position: relative;
	font-family: "Work Sans", sans-serif;
	text-transform: uppercase;
	font-size: 10vw;
	line-height: 7.8vw;
	-webkit-transform: scale(1, 2.25);
	        transform: scale(1, 2.25);
	text-align: center;
	color: black;
	font-stretch: ultra-condensed !important;
	/* transition: all 0.09s ease-in-out; */

	/* transform-origin: left top;
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg); */
}

.subtext {
	font-family: "Work Sans", sans-serif;
	text-transform: uppercase;
	-webkit-transform: scale(1.15, 1);
	        transform: scale(1.15, 1);
	text-align: center;
	letter-spacing: 1px;
	margin: 0 300px;
}
.center {
	position: relative;
}

.marquee {
	height: 30px;
	width: 100%;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	overflow: hidden;
	position: relative;
	margin: 0;
}

/* Make the container relative */
.swap-on-hover {
	position: relative;
	width: 100vw;
}

/* Select the image and make it absolute to the container */
.swap-on-hover img {
	position: absolute;
	overflow: hidden;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);

	/* Sets the width and height for the images*/
}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
	z-index: 9999;
	transition: opacity 0.5s linear;
	cursor: pointer;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image {
	opacity: 0;
}
.marquee--inner {
	display: block;
	width: 300%;
	margin: 7px 0;
	position: absolute;
	-webkit-animation: marquee 20s linear infinite;
	        animation: marquee 20s linear infinite;
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
}

.marquee--inner:hover {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
}

@-webkit-keyframes marquee {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

@keyframes marquee {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

@media (max-width: 599px) {
	.mobile-only {
		display: block !important;
	}

	.desktop-only {
		display: none !important;
	}

	.subtext {
		margin: 0 50px;
	}
	.swap-on-hover__front-image,
	.swap-on-hover__back-image,
	.mob {
		width: 95% !important;
	}
	.marquee--inner {
		width: 600%;
		-webkit-animation: marquee 7s linear infinite;
		        animation: marquee 7s linear infinite;
		-webkit-transform: translateZ(0);
		        transform: translateZ(0);
	}
	.title {
		font-size: 10vw;
	}
}

@media (min-width: 599px) {
	.desktop-only {
		display: block !important;
	}
	.mobile-only {
		display: none !important;
	}
}

@media only screen and (max-width: 1225px) {
body.canvas-setting-full-width #page-body, body.canvas-setting-full-width #page-footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
}