﻿#loader-wrapper {
    display:table;
    color:#FFF;
	background: -webkit-linear-gradient(290deg, rgba(9,131,152,1) 0%, rgba(15,91,117,1) 100%);
    background: -o-linear-gradient(290deg, rgba(9,131,152,1) 0%, rgba(15,91,117,1) 100%);
    background: linear-gradient(20deg, rgba(9,131,152,1) 0%, rgba(15,91,117,1) 100%); /* ff3.6+ */ /* safari4+,chrome */ /* safari5.1+,chrome10+ */ /* opera 11.10+ */ /* ie10+ */ /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f5b75', endColorstr='#098398',GradientType=0 ); /* ie6-9 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000000;
	transition: .3s all;
}

	#loader-wrapper.hideme {
        opacity:0;
	    transform-origin: bottom;
		transform:translateY(100%) rotateX(-90deg);
	}

	#loader-inner-wrapper {
		display:table-cell;
        vertical-align:middle;
		/*
        position: relative;
  	    left: calc(50% - 500px);
  	    top: calc(50% - 120px);
        */
		/*border:1px solid #F00;*/
	}

.squares {width:40px; height:40px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); margin:0 auto 30px auto; -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); /*animation-name: rotate; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear;*/ /*border-radius: 40px; overflow: hidden;*/}
	.square {width:20px; height:20px; float:left; background:#FFF; opacity:0; animation-name: fade; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function:ease-in-out;}
		.square.one {}
		.square.two {animation-delay: .5s;}
		.square.three {animation-delay: 1s;}
		.square.four {animation-delay: 1.5s;}

p.loading {clear:both; opacity:.2; font-size: 16px; line-height: 8px; font-family:Arial, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', sans-serif; letter-spacing: normal; text-transform: uppercase; text-align:center;}
img.loader-logo {position:absolute; opacity:.2; bottom:20px; right:20px;}

@keyframes fade {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}

@keyframes rotate {
    0% {-ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Safari */ transform: rotate(360deg);}
}