main#container.loading {
	background-image:none;
}

main#container.loading .box {
    width:27%;
	padding-bottom:27%;
}

@media screen and (max-width:779px) {
	main#container.loading .box {
		margin-top: 2%;
	}
	
	main#container.loading #cityscape:before {
		transform: translate(-50%,10%) !important;
	}
}

body:not(.home) main#container.loading::before {
  content:url(../content/media/animations/loader.svg);
  margin: 100px auto;
  position: relative;
  left:calc(50vw - 115px);
  top:20vh;
  position:fixed;
  z-index:22;
  width: 230px; height: 230px;
  transform-origin: 115px 115px;
  animation: 1.4s linear infinite loader-spin;
}

.cal-loader__plane { fill: #ff6b6c; }
.cal-loader__path { stroke: #FFFFFF; animation: 1.4s ease-in-out infinite loader-path; }

@keyframes loader-spin {
  to{
    transform: rotate(360deg);
  }
}
@keyframes loader-path {
  0%{
    stroke-dasharray:  0, 580, 0, 0, 0, 0, 0, 0, 0;
  }
  50%{
    stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;
  }
  100%{
    stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;
  }
}

body.gradient #container {
	background-color:transparent;

}

body.gradient #main-menu {
	display:none;
}

main#container.loading #cityscape:before {
	display:block;
	content:"\00A0";
	background-image: url("../content/media/logos/main_logo_white_large.png");
	background-repeat:no-repeat;
	background-position:center 35px;
	background-size:50% auto;
	width:100%;
	max-width:760px;
	left:50%;
	transform:translate(-50%,0%);
	height:220px !important;
	z-index:21;
	position:fixed;
}

main#container.loading #cityscape {
/*	background-image: url("../content/media/backgrounds/airports/dublin/city_web.png"); */
	width:100vw;
	background-position:4% center;
	background-size:cover;
	height:220px;
	left:0px;
	top:0px;
	position:fixed;
	z-index:3;
}

main#container {
	height:auto;
    overflow-y: auto;
	padding-bottom:200px;
}

body:not(.home) main#container {
	box-shadow:0px 0px 20px rgba(0,0,0,0.8);
}

main#container.loading #cityscape:after {
/*	background-image: url("../content/media/backgrounds/city_clouds.png"); */
	content:"\00A0";
	display:block;
	position:absolute;
	left:0px;
	top:20vh;
	width:100vw;
	height:80vh;
	background-size:contain;
	background-position:0px top;
	animation: 30s linear pan;
	-webkit-animation: 30s linear pan infinite;
	background-repeat:repeat-x;
	display:none;
}

#cityplane {
/*	background-image: url("../content/media/animations/plane.png"); */
	background-repeat:no-repeat;
	width:300px;
	height:0px;
	padding-bottom:100px;
	background-size:cover;
	position:absolute;
	left:0px;
	transform:translateX(-125px);
	transform-origin:20px 100px;
	bottom:10vh;
	animation: 7s linear loader-takeoff forwards;
	display:none;
}

@media screen and (min-width:780px) {
	#main-menu a.current img {
	  animation: shake 0.62s cubic-bezier(.36,.07,.19,.97) both;
	  backface-visibility: hidden;
	  perspective: 1000px;
	}
}

@keyframes shake {
  10%, 90% {
    transform: translateX(10px) scale(0.99);
  }
  
  50% {
    transform: translateX(10px) scale(1.2);
  }

  30%, 70% {
    transform: translateX(10px) scale(1.06);
  }
  
  40%, 60% {
    transform: translateX(10px) scale(1.1);
  }
}

@keyframes pan {
	0% {
		background-position:0px 0px;
	}
	100% {
		background-position:-2043px 0px;
	}
}

@keyframes loader-takeoff {
	0% {
		transform: translateX(-125px) translateY(0px) rotate(0deg);
	}

	27% {
		transform: translateX(4vw) translateY(0px) rotate(-5deg);
	}

	52% {
		transform: translateX(12vw) translateY(-100px) rotate(-12deg) scale(1.2);
	}
	
	100% {
		transform: translateX(32vw) translateY(-27vh) rotate(-15deg) scale(1.5);
	}
}

.animated-vector {
	-webkit-animation: test 84s infinite; /* Chrome, Safari, Opera */
    animation: test 84s infinite;
	backface-visibility: hidden;
	background-size:cover;	
}

/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    0% {background-position: -1500px 0px;}
    100% {background-position: 1500px 0px;}
}
/* Standard syntax */
@keyframes test {
	0% {background-position: -1500px 0px }
    100% {background-position: 1500px 0px }
}

body.gradient {
	background: rgb(1,128,129);
}

.locked:after {
    content: "\00A0";
    background-image: url(../content/media/nav-icons/padlock.png);
    background-size: contain;
    position: absolute;
    bottom: 2em;
    right: 2px;
    background-repeat: no-repeat;
    display: block;
    z-index: 22;
    width: 2em;
    height: 2em;
    opacity: 0.6;
}
}