svg{
	width: 100%;
	height: 100%;
	position: absolute!important;
	left: 0%;
}

.topletter{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	color: #fff;
	font-size: 2.6vw;
	font-weight: bolder;
	text-align: center;
	font-family: sniglet;
	background-color: #E76BA8;
	padding: 1%;
}

.divider{
	position: absolute;
	width: 0.5vmin;
	height: 100%;
	top: 0%;
	left: 50%;
	/*background-color: #4F6A9A;*/
	transform: translateX(-50%);
}
.letter-word{
	position: absolute;
	top: 75%;
	left: 75%;
	transform: translate(-50%, -50%);
	color: #262626;
	font-size: 10vw;
	font-family: calibri;
}
@media (min-aspect-ratio:4/3){
	.letter-word{
		font-size: 13vh;
	}
}

.hl-a{
	color: #ED7D31;
	color: #434343;
}
.hl-b{
	color: #548135;
	color: #434343;
}
.hl-c{
	color: #625145;
	color: #434343;
}
.hl-d{
	color: #A77C52;
	color: #434343;
}

[class*=letter-left]{
	position: absolute;
	left: 25%;
	transform: translateX(-50%);
	height: 65%;
	bottom: 15%;
	z-index: 10;
}
[class*=ltSml]{
	height: 57%;
	bottom: 19%;
	display: none;
}
.newhere{
	height: 51%;
bottom: 21%;
}
.letter-right{
	position: absolute;
	left: 75%;
	transform: translateX(-50%);
	height: 70%;
	bottom: 15%;
}
.letter-img{
	width: 35%;
	position: absolute;
	bottom: 37.5%;
	left: 75%;
	transform: translateX(-50%);
}

#letter-svg{
	position: absolute;
	height: 65%;
	width: 35%;
	left: 75%;
	bottom: 15%;
	transform: translateX(-50%);
}

.line-anim-1{
	-webkit-animation: line-anim 2s linear forwards;
	animation: line-anim 2s linear forwards;
}
.line-anim-2{
	-webkit-animation: line-anim 2s linear 2s forwards;
	animation: line-anim 2s linear 2s forwards;
}
.line-anim-3{
	-webkit-animation: line-anim 2s linear 4s forwards;
	animation: line-anim 2s linear 4s forwards;
}
.line-anim-4{
	-webkit-animation: line-anim 2s linear 5s forwards;
	animation: line-anim 2s linear 5s forwards;
}
.letter-fade-in-a, .letter-fade-in-b, .letter-fade-in-c, .letter-fade-in-d, .letter-fade-in-e, .letter-fade-in-f, .letter-fade-in-g, .letter-fade-in-h{
	animation: appear 1s ease-in 6s both;
	-webkit-animation: appear 1s ease-in 6s both;
}
.letter-fade-out-a, .letter-fade-out-b, .letter-fade-out-c, .letter-fade-out-d, .letter-fade-out-e, .letter-fade-out-f, .letter-fade-out-g, .letter-fade-out-h{
	animation: disappear 1s ease-in 6s both;
	-webkit-animation: disappear 1s ease-in 6s both;
}
@-webkit-keyframes line-anim {
	100% {stroke-dashoffset: 0;}
}
@keyframes line-anim {
	100% {stroke-dashoffset: 0;}
}

.letter-fade-out2 {
	animation: disappear 1s linear 0s both;
	-webkit-animation: disappear 1s linear 0s both;
}
.object-fade-in {
	animation: appear 1s linear 1s both;
	-webkit-animation: appear 1s linear 1s both;
}
.zoom-fade-in {
	animation: zoom-fade-out 1s linear 1s reverse both;
	-webkit-animation: zoom-fade-out 1s linear 1s reverse both;
}
@-webkit-keyframes zoom-fade-out {
	0% {opacity: 1; transform: translate(-50%, -50%) scale(1);}
	100% {opacity: 0; transform: translate(-50%, -50%)  scale(0);}
}
@keyframes zoom-fade-out {
	0% {opacity: 1; transform: translate(-50%, -50%)  scale(1);}
	100% {opacity: 0; transform: translate(-50%, -50%)  scale(0);}
}
.letter-fade-in-a, .letter-fade-out-a{
	animation-delay: 3s;
}
.letter-fade-in-b, .letter-fade-out-b{
	animation-delay: 3s;
}
.letter-fade-in-c, .letter-fade-out-c{
	animation-delay: 4s;
}
.letter-fade-in-d, .letter-fade-out-d{
	animation-delay: 3s;
}
.letter-fade-in-e, .letter-fade-out-e{
	animation-delay: 4s;
}
.letter-fade-in-f, .letter-fade-out-f{
	animation-delay: 7s;
}

.opacity_0{
	opacity: 0;
}
.no-dash-a{
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
}
.no-dash-b{
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
}
.no-dash-c{
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	/*animation-duration: 4s !important;*/
}
.no-dash-d{
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
}
.no-dash-e{
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
}
.line-anim-css{
	transition: 2s linear;
	stroke-dashoffset: 0!important;
}
.speechbox.sp-1 {
    left: 39%;
    top: 3%;
    width: 44%;
    height: 33%;
    font-size: 3vw;
    color: #FFAB40;
}
.speechbg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
.speechbox > p {
    position: absolute;
    width: 84%;
    left: 8%;
    top: 40%;
    transform: translateY(-50%);
}
.divider-left{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 50%;
	height: 100%;
	z-index: 0;
	background-color: #9ADED9;
}
.divider-right{
	position: absolute;
	top: 0%;
	left: 50%;
	width: 50%;
	height: 100%;
	background-color: #87D8D2;
	z-index: 0;
}
.box-left{
	position: absolute;
	top: 17%;
	left: 8%;
	width: 33%;
	height: 71%;
	z-index: 0;
	background-color: #fff;
	border-radius: 2em;
}
.box-right{
	position: absolute;
	top: 17%;
	right: 8%;
	width: 33%;
	height: 71%;
	background-color: #fff;
	z-index: 0;
	border-radius: 2em;
}
.imagediv{
	position:absolute;
	top:10%;
	left:10%;
	background-color: blue;
}

.fade-in-1 {
	opacity:0;
	display:block;
	animation: dot-anim 5s linear 0s  forwards;
	-webkit-animation: dot-anim 1s linear 0s  forwards;
}
@-webkit-keyframes
dot-anim {
	0% {opacity: 0;}
	/* 20% {opacity: 1;}
	99% {opacity: 1;} */
	100% {opacity: 1;}
}
@keyframes
dot-anim {
	0% {opacity: 0;}
	20% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 1;}
}
.fade-in-2 {
	opacity:0;
	display:block;
	animation: dot-anim-2 5s linear   forwards;
	-webkit-animation: dot-anim-2 1s linear 0.5s forwards;
}
@-webkit-keyframes
dot-anim-2 {
	0% {opacity: 0;}
	/* 20% {opacity: 0;}
	40% {opacity: 1;}
	99% {opacity: 1;} */
	100% {opacity: 1;}
}
@keyframes
dot-anim-2 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	40% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 1;}
}
.hide-stroke{
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
}
.hide-stroke-2{
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
}
.hide-stroke-3{
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
}
.path-anim-1{
	-webkit-animation: line-anim 2s linear 2s forwards;
	animation: line-anim 2s linear 2s forwards;
}

@media (min-aspect-ratio:4/3){
	.topletter{
		font-size: 6vh;
	}
}