/* !ANIMATION */
/* ----------------------------------------------- */

@-webkit-keyframes opacity-pulse {
    0%   { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

@-webkit-keyframes diamonds-are-for-ever {
    0%   {  -webkit-transform: scale(0.01) rotate(45deg); }
    50%  {  -webkit-transform: scale(1) rotate(45deg); }
    100% {  -webkit-transform: scale(0.01) rotate(45deg); }
}

@-moz-keyframes diamonds-are-for-ever {
    0%   {  -moz-transform: scale(0.01) rotate(45deg); }
    50%  {  -moz-transform: scale(1) rotate(45deg); }
    100% {  -moz-transform: scale(0.01) rotate(45deg); }
}

@-ms-keyframes diamonds-are-for-ever {
    0%   {  -ms-transform: scale(0.01) rotate(45deg); }
    50%  {  -ms-transform: scale(1) rotate(45deg); }
    100% {  -ms-transform: scale(0.01) rotate(45deg); }
}

@keyframes diamonds-are-for-ever {
    0%   {  transform: scale(0.01) rotate(45deg); }
    50%  {  transform: scale(1) rotate(45deg); }
    100% {  transform: scale(0.01) rotate(45deg); }
}

.wrapper-loading .diamonds.animate .d {
    -webkit-animation: diamonds-are-for-ever 1.2s infinite;
    -moz-animation: diamonds-are-for-ever 1.2s infinite;
    -ms-animation: diamonds-are-for-ever 1.2s infinite;
    animation: diamonds-are-for-ever 1.2s infinite;
}

.wrapper-loading .diamonds.animate .d.i2 {
    -webkit-animation-delay: 75ms;
    -moz-animation-delay: 75ms;
    -ms-animation-delay: 75ms;
    animation-delay: 75ms;
}

.wrapper-loading .diamonds.animate .d.i3 {
    -webkit-animation-delay: 175ms;
    -moz-animation-delay: 175ms;
    -ms-animation-delay: 175ms;
    animation-delay: 175ms;
}

.wrapper-loading .diamonds.animate .d.i4 {
    -webkit-animation-delay: 275ms;
    -moz-animation-delay: 275ms;
    -ms-animation-delay: 275ms;
    animation-delay: 275ms;
}


/* !LOADING BOX  */
/* ----------------------------------------------- */

.wrapper-loading {
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    z-index: 9999;
    text-align: center;
    width: 100%;
    max-width: 168px;
    height: 146px;
    padding: 60px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    top: 45%;
    left: 50%;
    margin-left: -84px;
    margin-top: -104px;
    display: none;
}

.wrapper-loading .diamonds {
    width: 48px;
    margin: auto;
    text-align: center;
}

.wrapper-loading .diamonds .d {
    width: 10px;
    height: 10px;
    opacity: 1;
    display: inline-block;
    vertical-align: top;
    background-color: rgba(255,255,255,0.85);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wrapper-loading .diamonds .i4 {
    margin-top: -4px;
}