/*****************/
/*Page Loading*/
/*****************/
.page-loading,
.page-loading svg,
.page-loading-bar{
  position:absolute;	
}

.page-loading{
  left:0;
  top:0;
  right:0;
  bottom:0;
  /*display:none;*/
}

.page-loading{
  left:0%;
  top:0;
  right:0;
  bottom:0;
  /*background: rgba(76, 76, 76, .9); */
  background: rgba(68, 68, 68, 1);
  overflow:hidden;
  cursor: default;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  z-index:1000;	
}

.loading-content-dialog{
  background: rgba(68, 68, 68, .5);
}

.main-loader{
  z-index:1001;	
}

.page-loading svg {
  transform:translate(-50%, -50%);
}

.page-loading svg,
.page-loading-bar{
  left:50%;
  top:50%;  
}

.page-loading-bar{    
  text-align:center; 
  white-space:nowrap;
  transform:translate(-50%, -50%);
}

.page-loading-bar-sep{   
  display:inline-block;  
}

.loading-bar-left{  
  background:rgb(242, 105, 37);
  animation: lb1 4s infinite;
  border-top-left-radius:1vw;
  border-bottom-left-radius:1vw;
}

.loading-bar-middle{  
  background:#222;  
  animation: lb2 4s infinite;
  animation-delay: 250ms;
}

.loading-bar-right{  
  background:#333;    
  animation: lb3 4s infinite;
  animation-delay: 350ms;
  border-top-right-radius:1vw;
  border-bottom-right-radius:1vw;
}

/********************/
/*content loader/
/********************/
.loading-content-dialog{
}

/********************/
/*svg colors/
/********************/
.page-loading svg > g:last-child path{
  fill:#ff671b;  
}

.page-loading svg > g:first-child path:nth-child(4){
  animation-delay: 150ms;
  animation: path1 4s infinite;
}

.page-loading svg > g:first-child path:nth-child(3),
.page-loading svg > g:first-child rect{  
  animation: path2 4s infinite;
  animation-delay: 250ms;
}

.page-loading svg > g:first-child path:nth-child(1){  
  animation: path3 4s infinite;
  animation-delay: 350ms;
}

.loading-dialog-wrapper{  
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background:#333;
}

.loading-dialog-wrapper > div{
  display:inline-block;  
  vertical-align:middle;
}

.cube1, .cube2 {  
  background-color: rgb(242, 105, 37);  
  position: absolute;
  animation: cubemove 2s infinite ease-in-out;
}

.cube2 {
  animation-delay: -1s;
}

/*content*/
.loading-content-dialog .cube1, 
.loading-content-dialog .cube2 {    
  animation: contentcubemove 2s infinite ease-in-out;
}


/*0 to 500px height*/
@media screen and (max-height: 500px) {

  .page-loading svg {
    height: 30vh;
    margin-top:-15vh;
  }  

  .page-loading-bar{   
    margin-top:2vh;
  }

  .page-loading-bar-sep{
    height:2vh;  
    width:24vh;    
  }

  .loading-dialog-wrapper{  
    padding:2vh 3vh;
    border-radius:.5vh;
    box-shadow: 0px 0px .5vh #ff671b;
  }  

  .spinner {
    height:7vh;
    width:7vh;
  }

  .loading-content-dialog .spinner {
    height:5vh;
    width:5vh;
  }
  
  .cube1, .cube2 {  
    width:2vh;
    height:2vh;    
    border-radius:.15vh;
  }

  .loading-content-dialog .cube1, 
  .loading-content-dialog .cube2 {  
    width:1.5vh;
    height:1.5vh;    
  }
  
  .page-loading-label{
    margin-left:2vh;
    font-size:5vh;
  }

  .loading-content-dialog .page-loading-label {
    font-size: 4vh;
  }
  
  @keyframes cubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(5vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(5vh) translateY(5vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(5vh) rotate(90deg) scale(0.5) }  
  }

  @keyframes contentcubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(4vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(4vh) translateY(4vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(4vh) rotate(90deg) scale(0.5) }  
  }

}

/*500px to 1000px height*/
@media screen and (min-height: 500px) and (max-height: 1000px) {

  .page-loading svg {
    height: 20vh;
    margin-top:-10vh;
  }  

  .page-loading-bar{   
    margin-top:1vh;
  }

  .page-loading-bar-sep{
    height:1.25vh;  
    width:16vh;    
  }

  .loading-dialog-wrapper{  
    padding:1.5vh 2vh;
    border-radius:.25vh;
    box-shadow: 0px 0px .25vh #ff671b;
  }  

  .spinner {
    height:4.5vh;
    width:4.5vh;
  }
  
  .loading-content-dialog .spinner {
    height:2.5vh;
    width:2vh;
  }

  .cube1, .cube2 {  
    width:1.5vh;
    height:1.5vh;    
    border-radius:.1vh;
  }

  .loading-content-dialog .cube1, 
  .loading-content-dialog .cube2 {  
    width:1vh;
    height:1vh;    
  }
  
  .page-loading-label{
    margin-left:2vh;
    font-size:2.5vh;
  }

  .loading-content-dialog .page-loading-label {
    font-size: 2.5vh;
  }
  
  
  @keyframes cubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(3vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(3vh) translateY(3vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(3vh) rotate(90deg) scale(0.5) }  
  }

  @keyframes contentcubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(1.5vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(1.5vh) translateY(1.5vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(1.5vh) rotate(90deg) scale(0.5) }  
  }

}

/*1000px + height*/
@media screen and (min-height: 1000px) {

  .page-loading svg {
    height: 15vh;
    margin-top:-7.5vh;
  }  

  .page-loading-bar{   
    margin-top:.75vh;
  }

  .page-loading-bar-sep{
    height:.75vh;  
    width:12vh;    
  }

  .loading-dialog-wrapper{  
    padding:1vh 1.5vh;
    border-radius:.25vh;
    box-shadow: 0px 0px .25vh #ff671b;
  }  

  .spinner {
    height:2.75vh;
    width:2vh;
  }
  
  .loading-content-dialog .spinner {
    height:1.5vh;
    width:.5vh;
  }

  .cube1, .cube2 {  
    width:.75vh;
    height:.75vh;    
    border-radius:.05vh;
  }
  
  .loading-content-dialog .cube1, 
  .loading-content-dialog .cube2 {  
    width:.5vh;
    height:.5vh;    
  }

  .page-loading-label{
    margin-left:2vh;
    font-size:1.5vh;
  }
  
  .loading-content-dialog .page-loading-label {
    font-size: 1.25vh;
  }

  @keyframes cubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(2vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(2vh) translateY(2vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(2vh) rotate(90deg) scale(0.5) }  
  }

  @keyframes contentcubemove {
    0% { -webkit-transform: translateX(0vh) rotate(0deg) scale(1) }
    25% { -webkit-transform: translateX(1vh) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(1vh) translateY(1vh) rotate(180deg) scale(1) }
    75% { -webkit-transform: translateX(0vh) translateY(1vh) rotate(90deg) scale(0.5) }  
  }
  
}

/********************/
/*Animation/
/********************/
@keyframes lb1 {
  0%{
    transform:translateX(100vw);
  }
  50%{
    transform:translateX(0);
  }
  80%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-100vw);
  }
}

@keyframes lb2 {
  0%{
    transform:translateX(100vw);
  }
  50%{
    transform:translateX(0);
  }
  80%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-100vw);
  }
}

@keyframes lb3 {
  0%{
    transform:translateX(100vw);
  }
  50%{
    transform:translateX(0);
  }
  80%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-100vw);
  }
} 

/*path*/

@keyframes path1 {
  0%{
    fill:#f2f2f2;
    opacity:.8;
  }
  50%{
    fill:#222;
    opacity:1;
  }
  80%{
    fill:#222;
    opacity:1;
  }
  100%{
    fill:#f2f2f2;
    opacity:.8;
  }
}

@keyframes path2 {
  0%{
    fill:#f2f2f2;
    opacity:.8;
  }
  50%{
    fill:#222;
    opacity:1;
  }
  80%{
    fill:#222;
    opacity:1;
  }
  100%{
    fill:#f2f2f2;
    opacity:.8;
  }
}

@keyframes path3 {
  0%{
    fill:#f2f2f2;
    opacity:.8;
  }
  50%{
    fill:#222;
    opacity:1;
  }
  80%{
    fill:#222;
    opacity:1;
  }
  100%{
    fill:#f2f2f2;
    opacity:.8;
  }
}