﻿
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 03 - LOADING */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 5000; margin-top: 0px; top: 0px; left: 0px; overflow: hidden;}

.loading-center { width: 100%; height: 100%; position: relative; }

.loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); -ms-transform: rotate(-135deg); }

.object { -moz-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; position: absolute; border-top: 5px solid #ff6600; border-bottom: 5px solid transparent; border-left: 5px solid #ff6600; border-right: 5px solid transparent; -webkit-animation: animate 2s infinite; -o-animation: animate 2s infinite; animation: animate 2s infinite; -moz-animation: animate 2s infinite; -ms-animation: animate 2s infinite; }

.object_one { left: 75px; top: 75px; width: 50px; height: 50px; }

.object_two { left: 65px; top: 65px; width: 70px; height: 70px; -webkit-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; }

.object_three { left: 55px; top: 55px; width: 90px; height: 90px; -webkit-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; }

.object_four { left: 45px; top: 45px; width: 110px; height: 110px; -webkit-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; }

@-webkit-keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    transform: rotate(360deg) scale(0.8); } }

@-moz-keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    transform: rotate(360deg) scale(0.8);
    -moz-transform: rotate(360deg) scale(0.8); } }

@-o-keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    -o-transform: rotate(360deg) scale(0.8);
    transform: rotate(360deg) scale(0.8); } }

@keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8);
    -webkit-transform: rotate(360deg) scale(0.8);
    -moz-transform: rotate(360deg) scale(0.8);
      -o-transform: rotate(360deg) scale(0.8);
      transform: rotate(360deg) scale(0.8); } }

.loading.orange .object { border-top: 5px solid #ff6600; border-left: 5px solid #ff6600; }

.loading.blue .object { border-top: 5px solid #23b0e8; border-left: 5px solid #23b0e8; }

.loading.blue-2 .object { border-top: 5px solid #1593d0; border-left: 5px solid #1593d0; }

.loading.dr-blue .object { border-top: 5px solid #2D3E50; border-left: 5px solid #2D3E50; }

.loading.dr-blue-2 .object { border-top: 5px solid #022c54; border-left: 5px solid #022c54; }

.loading.green .object { border-top: 5px solid #66BB6A; border-left: 5px solid #66BB6A; }

.loading.sea .object { border-top: 5px solid #00e5ff; border-left: 5px solid #00e5ff; }

.loading.red .object { border-top: 5px solid #ef4836; border-left: 5px solid #ef4836; }

.loading.red-3 .object { border-top: 5px solid #d73240; border-left: 5px solid #d73240; }
