#globeswrapper {
    /* background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_2000.jpg');
    background-size: cover;
    background-position: center; */
    position: relative;
    width: 95%;
    height: 50vw;
    overflow: hidden;
    margin: 0 auto 2.5vw;
    background-color: #bf2028;
}

.globecontainer1, .globecontainer2, .globecontainer3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19vw;
    height: 19vw;
    border-radius: 50%;
    border: 3px solid #fff;
    opacity: 0;
    z-index: 7;
}

.g3 {
    animation: fadein;
    animation-duration: .1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    z-index: 10;
}

.g1-anim, .g2-anim, .g4-anim, .g5-anim, .g6-anim, .g7-anim, .g8-anim, .g9-anim {
    animation: fadein;
    animation-duration: .1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

.g1-anim {
    left: calc(50% - 22vw);
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
}

.g2-anim {
    left: calc(50% + 22vw);
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.tilt {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(10deg);
    z-index: 10;
}

.sphere {
    background-image: url('https://evanonearth.net/featured/images/o-ol.svg');
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: none;
    opacity: .6;
}

.long1, .long2, .long3, .long4, .long5, .long6 {
    transform: rotateY(0deg);
    -moz-animation: long1rotate;
    -webkit-animation: long1rotate;
    animation: long1rotate;
    -moz-animation-duration: 10s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: forwards;
   	-moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.long1 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.long2 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.long3 {
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
}

.long4 {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}

.long5 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.long6 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

.iata {
    font-family: "nimbus-sans-extended", Nimbus Sans Extended, sans-serif;
    font-size: 35px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    letter-spacing: -1px;
    line-height: 108px;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
}

.i1-anim {
    animation: fadeinout;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 3.4s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.i2-anim {
    animation: fadeinout;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 3.4s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.i3-anim {
    animation: fadeinout;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 3.4s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.film, .theatre, .action {
    font-family: "nimbus-sans-extended", Nimbus Sans Extended, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    letter-spacing: 0px;
    line-height: 22px;
    color: #fff;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 22px;
    opacity: 0;
}

.film-anim {
    animation: fadein .5s 7.2s linear forwards;
}

.theatre-anim {
    animation: fadein .5s 8.2s linear forwards;
}

.action-anim {
    animation: fadein .5s 9.2s linear forwards;
}

/* Media Queries */

	/* @media (max-width:500px) {
		#globeswrapper {
			background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_1000.jpg');
		}
	}
	@media (max-width:400px) {
		#globeswrapper {
			background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_700.jpg');
		}
	}
	@media (max-width:350px) {
		#globeswrapper {
			background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_500.jpg');
		}
	} */
	
	@media (max-width:500px) and (orientation: portrait) {
		#globeswrapper {
			height: 95vw;
		}
		.globecontainer3 {
			width: 50vw;
			height: 50vw;
		}
		.g1, .g2 {
			display: none;
		}
	}
	
	@media (orientation: landscape) {
		/* @media (max-width:1000px) {
			#globeswrapper {
				background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_2000.jpg');
			}
		}
		@media (max-width:800px) {
			#globeswrapper {
				background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_1500.jpg');
			}
		}
		@media (max-width:600px) {
			#globeswrapper {
				background-image: url('https://evanonearth.net/featured/images/ramakien7-vivblu_1000.jpg');
			}
		} */
	}

/* Animations */
	
	@-moz-keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}

	@-webkit-keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}

	@keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}
	
	@-moz-keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
	}

	@-webkit-keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
	}

	@keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
	}

	@-moz-keyframes fadeinout {
	0%   {opacity: 0;}
	1% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 0;}
	}

	@-webkit-keyframes fadeinout {
	0%   {opacity: 0;}
	1% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 0;}
	}

	keyframes fadeinout {
	0%   {opacity: 0;}
	1% {opacity: 1;}
	99% {opacity: 1;}
	100% {opacity: 0;}
	}
	
	@-moz-keyframes long1rotate {
	from {-moz-transform: rotateY(0deg);}
	to {-moz-transform: rotateY(360deg);}
	}

	@-webkit-keyframes long1rotate {
	from {-webkit-transform: rotateY(0deg);}
	to {-webkit-transform: rotateY(360deg);}
	}

	@-keyframes long1rotate {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
	}