/* Loading Container */
    
  .loading{
    position:                 absolute;
    top:                      50%;
    left:                     50%;
    height:                   1em;
    width:                    1em;
    margin-left:              -.5em;
    margin-top:               -.5em;

    -webkit-transform-origin: .5em .5em;
    -moz-transform-origin:    .5em .5em;
  }
  
/* Shared Properties for all the lines */
  
  .loading > span,
  .loading > span::before,
  .loading > span::after{
    display:                  block;
    position:                 absolute;
    width:                    .08em;
    height:                   .25em;
    top:                      0;
    -webkit-transform-origin: .05em .5em;
    -moz-transform-origin:    .05em .5em;
/*
	border-radius:            .1em;
    -moz-border-radius:       .1em;
    -webkit-border-radius:    .2em;
*/
  }
  @media (-webkit-min-device-pixel-ratio: 2) {
	 .loading > span,
	  .loading > span::before,
	  .loading > span::after{
	    width:                    .05em;
	    height:                   .17em;
	  }

  }
  
  .loading > span{
    left:         50%;
    margin-left:  -0.05em;
  }
  
  .loading > span::before, .loading > span::after{  content: " "; }

/* Rotate each of the 4 Spans */

  .loading > span.top{    -webkit-transform: rotate(0deg);    -moz-transform: rotate(0deg);   }
  .loading > span.right{  -webkit-transform: rotate(90deg);   -moz-transform: rotate(90deg);  }
  .loading > span.bottom{ -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg); }
  .loading > span.left{   -webkit-transform: rotate(270deg);  -moz-transform: rotate(270deg); }

/* These are the two lines that surround each of the 4 Span lines */
  
  .loading > span::before{-webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);  }
  .loading > span::after{ -webkit-transform: rotate(-30deg);  -moz-transform: rotate(-30deg); }
  
/* Set Colors */
  
  .loading > span.top           {  background-color: rgba(33,33,33,.99); }
  .loading > span.top::after    {  background-color: rgba(33,33,33,.90); }
  .loading > span.left::before  {  background-color: rgba(33,33,33,.80); }
  .loading > span.left          {  background-color: rgba(33,33,33,.70); }
  .loading > span.left::after   {  background-color: rgba(33,33,33,.60); }
  .loading > span.bottom::before{  background-color: rgba(33,33,33,.50); }
  .loading > span.bottom        {  background-color: rgba(33,33,33,.40); }
  .loading > span.bottom::after {  background-color: rgba(33,33,33,.35); }
  .loading > span.right::before {  background-color: rgba(33,33,33,.30); }
  .loading > span.right         {  background-color: rgba(33,33,33,.25); }
  .loading > span.right::after  {  background-color: rgba(33,33,33,.20); }
  .loading > span.top::before   {  background-color: rgba(33,33,33,.15); }
/*
  .loading > span.top           {  background-color: rgba(255,255,255,0.99); }
  .loading > span.top::after    {  background-color: rgba(255,255,255,0.90); }
  .loading > span.left::before  {  background-color: rgba(255,255,255,0.80); }
  .loading > span.left          {  background-color: rgba(255,255,255,0.70); }
  .loading > span.left::after   {  background-color: rgba(255,255,255,0.60); }
  .loading > span.bottom::before{  background-color: rgba(255,255,255,0.50); }
  .loading > span.bottom        {  background-color: rgba(255,255,255,0.40); }
  .loading > span.bottom::after {  background-color: rgba(255,255,255,0.35); }
  .loading > span.right::before {  background-color: rgba(255,255,255,0.30); }
  .loading > span.right         {  background-color: rgba(255,255,255,0.25); }
  .loading > span.right::after  {  background-color: rgba(255,255,255,0.20); }
  .loading > span.top::before   {  background-color: rgba(255,255,255,0.15); }
*/

/* Set Animation */
  
  .loading {
    -webkit-animation-name:             rotatingLoader;
    -webkit-animation-duration:         .5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease;
  }
  
  @-webkit-keyframes rotatingLoader{
    0%{     -webkit-transform: rotate(0deg);   }
    8.32%{  -webkit-transform: rotate(0deg);   }
    
    8.33%{  -webkit-transform: rotate(30deg);  }
    16.65%{ -webkit-transform: rotate(30deg);  }
  
    16.66%{ -webkit-transform: rotate(60deg);  }
    24.99%{ -webkit-transform: rotate(60deg);  }
  
    25%{    -webkit-transform: rotate(90deg);  }
    33.32%{ -webkit-transform: rotate(90deg);  }
    
    33.33%{ -webkit-transform: rotate(120deg); }
    41.65%{ -webkit-transform: rotate(120deg); }
    
    41.66%{ -webkit-transform: rotate(150deg); }
    49.99%{ -webkit-transform: rotate(150deg); }
    
    50%{    -webkit-transform: rotate(180deg); }
    58.32%{ -webkit-transform: rotate(180deg); }
    
    58.33%{ -webkit-transform: rotate(210deg); }
    66.65%{ -webkit-transform: rotate(210deg); }
    
    66.66%{ -webkit-transform: rotate(240deg); }
    74.99%{ -webkit-transform: rotate(240deg); }
    
    75%{    -webkit-transform: rotate(270deg); }
    83.32%{ -webkit-transform: rotate(270deg); }
    
    83.33%{ -webkit-transform: rotate(300deg); }
    91.65%{ -webkit-transform: rotate(300deg); }
    
    91.66%{ -webkit-transform: rotate(330deg); }
    100%{   -webkit-transform: rotate(330deg); }
  }
  
/* This Animation only works in Mozilla during hover */

  .loading:hover{
    -moz-transform:           rotate(360deg);
    -moz-transition:          all 1s linear;
  }
  

  div[data-type="spinner"],
  div[data-type="place-spinner"] {
  	display: none;
  	opacity: 0;
    position:                 fixed;
    display:                  block;
    width:                    70px;
/*
    left:                     50%;
    top:					  50%;
    margin-left: -35px;
    margin-top: -50px;
*/
    left:                     calc(50% - 35px);
	top:					  calc(50% - 35px);
    height: 				  70px;
    font-size:                28px;
    border-radius: 8px;
    background: transparent;
	overflow: hidden;
	background: transparent;
  	/*
background-image: -moz-radial-gradient(80px 40px, circle cover, #202020, #000000);
    background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(32,32,32,.3),rgba(0,0,0,.5));
    background-image: -o-radial-gradient(80px 40px, circle cover, #202020, #000000);
    background-image: -ms-radial-gradient(80px 40px, circle cover, #202020, #000000);
    background-image: radial-gradient(50% 100%, circle cover, #202020, #000000);
*/
    z-index: 100000000000;
/*     box-shadow: 0 0 3px rgba(0,0,0,.4); */

  }
  div[data-type="place-spinner"] {
	position:                 absolute;
    left:                    30px;
	font-size: 19px;
  }
  .pop.in {
	-webkit-transform: scale(1);
	-webkit-animation-name: popin;
	-webkit-animation-duration: 500ms;
	-moz-transform: scale(1);
	-moz-animation-name: popin;
	-moz-animation-duration: 500ms;
	transform: scale(1);
	animation-name: popin;
	animation-duration: 500ms;
    opacity: 1;
}
  .pop.fade{
	-webkit-animation-name: popfade;
	-webkit-animation-duration: 500ms;
	-moz-animation-name: popfade;
	-moz-animation-duration: 500ms;
	animation-name: popfade;
	animation-duration: 500ms;
    opacity: 1;
}
  
 @-webkit-keyframes popin {
    0% {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
    50% {
        -webkit-transform:scale(1.2);
        opacity: 1;
    }
    100% {
        -webkit-transform:scale(1);
        opacity: 1;
    }
}
@-moz-keyframes popin {
    0% {
        -moz-transform: scale(.2);
        opacity: 0;
    }
    50% {
        -moz-transform:scale(1.2);
        opacity: 1;
    }
    100% {
        -moz-transform:scale(1);
        opacity: 1;
    }
}
@keyframes popin {
    0% {
        transform: scale(.2);
        opacity: 0;
    }
    50% {
        transform:scale(1.2);
        opacity: 1;
    }
    100% {
        transform:scale(1);
        opacity: 1;
    }
}
 @-webkit-keyframes popfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes popfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes popfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}