:root {
	--webdesignTop: 31%;
	--webdesignLeft: 32%;
	--placeTop: 31%;
	--placeLeft: 55%;
	--paused:  running; /*PAUSED OR RUNNING*/
    --display: block; /*BLOCK TO SHOW ANIMATION*/
}
.shown {
	display: none!important; /*IF THE ANIMATION HAS ALREADY RUN IN THIS SESSION, THIS HIDES ALL THE ANIMATED ELEMENTS*/
}
.opening {
	animation-delay: 5s;
    display: var(--display);
}
.opening section {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    animation: nodisplay 1s forwards;
    animation-delay: 4.5s;
    animation-play-state: var(--paused);
    display: var(--display);
}
[class*="skewed"] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  font-family: body;
}
.skewedLeft {
  transform: skewY(30deg);
  transform-origin: top right;
  background-color: var(--neutral);
  animation: moveToRight 2s linear forwards;
  animation-delay: 3s;
  animation-play-state: var(--paused);
}
.skewedRight {
    transform-origin: right bottom;
    transform: skewX(60deg);
    background-color: var(--neutral);
    animation: moveToLeft 2s linear forwards;
    animation-delay: 3s;
    animation-play-state: var(--paused);
    left: 2px;
}
.betterbusiness {
	position: absolute;
	top: 67%;
	right: 0;
	bottom: 0;
	left: 0;
	color: var(--comp);
	font-size: 3vw;
	text-align: center;
    animation: fade 1s forwards;
    animation-delay: 2s;
    animation-play-state: var(--paused);
    z-index: 5;
    font-family: subheading;
}
.betterbusiness span {
	color: var(--main);
}
.text { /*APPLIES TO BOTH WEBDESIGN AND PLACE*/
    position: absolute;
    font-size: 6vw;
    color: white;
    z-index: 10;
    font-family: heading;
    display: var(--display);
}
.webdesign {
    top: var(--webdesignTop);
    left: var(--webdesignLeft);
    animation: moveTextToLeft 3s forwards; 
    animation-delay: 2s; 
    animation-play-state: var(--paused);
}
.place {
    top: var(--placeTop);
    left: var(--placeLeft);
    animation: moveTextToRight 3s forwards; 
    animation-delay: 2s; 
    animation-play-state: var(--paused);
}
@keyframes moveToLeft {
	0% {
		left: 2px;
	}
	100% {
		left: -87%;
		display: block;
	}
}
@keyframes moveToRight {
	0% {
		left: 0;
	}
	100% {
		left: 200%;
		display: block;
		
	}
}
@keyframes moveTextToLeft {
	0% {
		left: var(--webdesignLeft);
	}
	100% {
		left: -40%;
		display: none;
	}
}
@keyframes moveTextToRight {
	0% {
		left: var(--placeLeft);
	}
	100% {
		left: 100%;
		display: none;
	}
}
@keyframes fade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 0;
		top: 100%;
	}
}
@keyframes nodisplay {
	0% {
		display: block;
	}
	100% {
		top: 180px;
		z-index: -200;
		display: none;
	}
}
@media only screen and (max-width: 1600px) {
	.skewedLeft {
	  transform: none;
	  transform-origin: unset;
	  animation: moveToRight 2s linear forwards;
	  animation-delay: 3s;
	  animation-play-state: var(--paused);
	}
	.skewedRight {
	    transform-origin: unset;
	    transform: none;
	    animation: moveToLeft 2s linear forwards;
	    animation-delay: 3s;
	    animation-play-state: var(--paused);
	    left: 2px;
	}
	@keyframes moveToLeft {
		0% {
			left: 2px;
		}
		100% {
			left: -100%;
			display: block;
		}
	}
	@keyframes moveToRight {
		0% {
			left: 0;
		}
		100% {
			left: 100%;
			display: block;
			
		}
	}	
	@keyframes moveTextToLeft {
		0% {
			left: var(--webdesignLeft);
		}
		100% {
			left: -60%;
			display: none;
		}
	}
}
@media only screen and (max-width:950px) {
	:root {
		--webdesignLeft: 15%;
		--placeLeft: 61%;
	}
	.place {
		animation: moveTextToRight 1.5s forwards; 
		animation-delay: 2s; 
		animation-play-state: var(--paused);
	}
	.text {
		font-size: 12vw;
	}
	.webdesign {
		left: var(--webdesignLeft);
	}
	.place {
		left: var(--placeLeft);
	}
	.betterbusiness {
		font-size: 8vw;
		top: 55%;
	}
}
@media only screen and (max-width: 560px) {
	:root {
		--webdesignLeft: 5%;
		--placeLeft: 63%;
	}
	.text {
		font-size: 15vw;
	}
}
@media only screen and (max-width: 460px) {
	:root {
		--webdesignTop: 10%;
		--placeTop: 10%;
	}
	.betterbusiness {
		top: 25%;
	}

}