body{
 margin: 0 !important;
}
.baseBg{
    width: 100vw;
    height: 100vh;
    background-color: #5a6fbfa2;
}
.loading{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    width: 30px;
    transform: translate(-100%,-50%);
}
.preloader_1{
    position:relative;
}
.preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s	 infinite ease-in-out;

}
.preloader_1 span:nth-child(2){
    left:11px;
    animation-delay: .2s;
}
.preloader_1 span:nth-child(3){
    left:22px;
    animation-delay: .4s;
}
.preloader_1 span:nth-child(4){
    left:33px;
    animation-delay: .6s;
}
.preloader_1 span:nth-child(5){
    left:44px;
    animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

#preloader_4{
 background:#2B315A;
 position:relative;
 width: 100%;
 height: 100vh;
}
#preloader_4 span{
 position:absolute;
 top: 50%;
 left: 50%;
 width:40px;
 height:40px;
 background:#3498db;
 opacity:0.5;
 border-radius:40px;
 -webkit-animation: preloader_4 1s infinite ease-in-out;
 -moz-animation: preloader_4 1s infinite ease-in-out;
 -ms-animation: preloader_4 1s infinite ease-in-out;
 animation: preloader_4 1s infinite ease-in-out;

}
#preloader_4 span:nth-child(2){
 left:calc(50% - 120px);
 -webkit-animation-delay: .2s;
 -moz-animation-delay: .2s;
 -ms-animation-delay: .2s;
 animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
 left:calc(50% - 80px);
 -webkit-animation-delay: .4s;
 -moz-animation-delay: .4s;
 -ms-animation-delay: .4s;
 animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
 left:calc(50% - 40px);
 -webkit-animation-delay: .6s;
 -moz-animation-delay: .6s;
 -ms-animation-delay: .6s;
 animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
 left:50%;
 -webkit-animation-delay: .8s;
 -moz-animation-delay: .8s;
 -ms-animation-delay: .8s;
 animation-delay: .8s;
}

@-webkit-keyframes preloader_4 {
 0% {opacity: 0.3; -webkit-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
 50% {opacity: 1; -webkit-transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
 100%  {opacity: 0.3; -webkit-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-moz-keyframes preloader_4 {
 0% {opacity: 0.3; -moz-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
 50% {opacity: 1; -moz-transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
 100%  {opacity: 0.3; -moz-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-ms-keyframes preloader_4 {
 0% {opacity: 0.3; -ms-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
 50% {opacity: 1; -ms-transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
 100%  {opacity: 0.3; -ms-transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@keyframes preloader_4 {
 0% {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
 50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
 100%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}