﻿.bg_load {
    position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	/*background: #EEE;*/

    z-index: 9999;  /*Sit on top */
    background-color: rgba(0,0,0, 0.7); /* Black w/opacity */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */    
}

.load-wrapper {
    /* Size and position */
	font-size: 25px; /* 1em */
    width: 1em;
	height: 1em;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -20px;

    /* Styles */
	border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px dashed rgba(138,189,195,0.5);
    box-shadow: 
        inset 0 0 2px rgba(255,255,255,0.3),
        0 0 0 0.7px rgba(255,255,255,0.3);
    animation: rota 3.5s linear infinite;

    /* Font styles */
    font-family: 'Racing Sans One', sans-serif;
    
    color: #444;
    text-align: center;
    /*text-transform: uppercase;*/
    text-shadow: 0 .02em rgba(255,255,255,0.9);
    line-height: 4em;
    z-index: 9999;
}

.load-wrapper:before,
.load-wrapper:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 1em rgba(255,255,255,0.3);
    border: 2em dashed;
}

.load-wrapper:before {
    border-color: rgba(138,189,195,0.2);
	top: 0; right: 0; bottom: 0; left: 0;
}

.load-wrapper:after {
	border-color: rgba(138,189,195,0.4);
    top: 1px; right: 1px; bottom: 1px; left: 1px; 
}

.load-wrapper .inner {
    width: 100%;
    height: 100%;
    animation: rota 3.5s linear reverse infinite;
}

.load-wrapper span {
    display: inline-block;
    animation: placeholder 1.5s ease-out infinite;
}

.load-wrapper span:nth-child(1)  { animation-name: loading-1;  }

@keyframes rota {
    to { transform: rotate(360deg); }
}

@keyframes loading-1 {
    14.28% { opacity: 0.3; }
}





.load-wrapper2 {
    /* Size and position */
	/*font-size: 25px;*/

    position: fixed;
    /*left: 33%;*/
    left: 10%;
    top: 15%;
    /*margin-top: -100px;*/
    /*margin-left: -20px;*/
    background-color: #FFFFFF;
    z-index: 99999;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 80vw;
}

/*.load-wrapper2:before,
.load-wrapper2:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 1em rgba(255,255,255,0.3);
    border: 2em dashed;
}

.load-wrapper2:before {
    border-color: rgba(138,189,195,0.2);
	top: 0; right: 0; bottom: 0; left: 0;
}

.load-wrapper2:after {
	border-color: rgba(138,189,195,0.4);
    top: 1px; right: 1px; bottom: 1px; left: 1px; 
}*/