/*Body colour animation*/
.body_darken {
	animation: darken 4s;
	-moz-animation: darken 4s;
	-webkit-animation: darken 4s;
	animation-fill-mode: forwards;
}

.body_lighten {
	animation: lighten 4s;
	-moz-animation: lighten 4s;
	-webkit-animation: lighten 4s;
	animation-fill-mode: forwards;
}

@keyframes darken {
	0%   {background-color:#A8BCE0; color:#000000;}
    100% {background-color:#2F4D83; color:#aaaaaa;}
}

@keyframes lighten {
	0%   {background-color:#2F4D83; color:#aaaaaa;}
    100% {background-color:#A8BCE0; color:#000000;}
}

/*Page colour animation*/
.page_darken {
	animation: darken_page 4s;
	-moz-animation: darken_page 4s;
	-webkit-animation: darken_page 4s;
	animation-fill-mode: forwards;
}

.page_lighten {
	animation: lighten_page 4s;
	-moz-animation: lighten_page 4s;
	-webkit-animation: lighten_page 4s;
	animation-fill-mode: forwards;
}

@keyframes darken_page {
	0%   {background-color:#dddddd; color:#222222;}
    100% {background-color:#555a65; color:#F5FBEF;}
}

@keyframes lighten_page {
	0%   {background-color:#555a65; color:#F5FBEF;}
    100% {background-color:#dddddd; color:#222222;}
}

/*SUN!*/
.sun_darken {
	animation: sun_darken 2s;
	-moz-animation: sun_darken 2s;
	-webkit-animation: sun_darken 2s;
	animation-fill-mode: forwards;
}

@keyframes sun_darken {
    0%   {left: calc(50vw - 375px);}
    100% {left: calc(100vw + 750px);}
    /*100% {left: 100vw;}*/
}

.sun_lighten {
	animation: sun_lighten 2s;
	-moz-animation: sun_lighten 2s;
	-webkit-animation: sun_lighten 2s;
	animation-fill-mode: forwards;
}

@keyframes sun_lighten {
    /*0%   {left: -750px;}*/
    0%	 {left: calc(-50vw - 375px);}
    100% {left: calc(50vw - 375px);}
}

/*MOOON*/
.moon_darken {
	animation: moon_darken 2s;
	-moz-animation: moon_darken 2s;
	-webkit-animation: moon_darken 2s;
	animation-fill-mode: forwards;
}

@keyframes moon_darken {
    0%   {left: calc(-50vw - 375px);}
    100% {left: calc(50vw - 375px);}
}

.moon_lighten {
	animation: moon_lighten 2s;
	-moz-animation: moon_lighten 2s;
	-webkit-animation: moon_lighten 2s;
	animation-fill-mode: forwards;
}

@keyframes moon_lighten {
    0%   {left: calc(50vw - 375px);}
    100% {left: calc(100vw + 750px);}
    /*100% {left: 100vw}*/
}