@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,500&display=swap');


.spin-country #inner {
   position: relative; 
   height: 160px;
}
.spin-country #sphere {
   position: absolute;
   left: 36%;
   top: 27%; 
   width: 130px;
   z-index: 2; 
}

.spin-country .scripture {
   position: absolute;
   left: 11%;
   top: 5%;
   z-index: 8;
   color: white;
   text-shadow: 5px 5px 12px #0a0a0a;
   font-family: 'Playfair Display', serif;
   font-size:30px;
   font-weight: 600;
}


.scripture.quote1 {
   position: absolute;
   left: -0.2%;
   top: -3%;
}
.scripture.quote2 {
   position: absolute;
   left: 25%;
   top: 20%;
}
.scripture.quote3 {
   position: absolute;
   left: 55%;
   top: 44%;
   font-style: italic;
   font-weight: 500;
   font-size: 22px;
}
.scripture.quote4 {
   position: absolute;
   left: 71%;
   top: 66%;
   font-size: 14px;
}
.scripture.quote4 a {
   color: #cec68c !important;
   font-style: italic;
}

#uverse-bak {
  position: relative;
   opacity: 0.6;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .spin-country #sphere {
    top: 20%;
    left: 15%;
  }
  
  .spin-country .scripture {
      font-size: 22px; 
  }
  .scripture.quote1 {
      top: 6%; 
      left: 7.8%;
  }
  
  .scripture.quote2 {
      top: 31%; 
      left: 27%;
  }
  
  .scripture.quote3 {
      top: 51%; 
      left: 54%;
  }
  
  .scripture.quote4 {
      top: 75%; 
      left: 71%;
  }
}

@media screen and (max-width: 595px) {
  .spin-country .scripture {
      font-size: 19px; 
  }
  .scripture.quote1 {
      top: 8.5%; 
      left: 3.8%;
  }
  
  .scripture.quote2 {
      top: 32%; 
      left: 16%;
  }
  
  .scripture.quote3 {
      top: 57%; 
      left: 37%;
  }
  
  .scripture.quote4 {
      top: 75%; 
      left: 56%;
      font-size: 18px; 
  }
  
  .spin-country #inner {
    height: 185px;
  }
  
  .spin-country #sphere {
    left: 5.5%;
    top: 17%;
  }
}