@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&display=swap');

html { 
   scroll-behavior: smooth;
   height: 100%;
   overflow-x: hidden !important;
  }

body { 
   height: 100%;
   margin:0;
   padding:0; 
   background-color: #ffffff;
   color:#000000;
   font-family: 'Nanum Gothic', sans-serif;
  }

.ggwrapper { 
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   opacity:1;
   z-index: -1;
   background-color: #ffffff;
  }

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position:fixed;
  top: 0;
  left: 0;
}

a:link, a:visited, a:active {
   color:#ffffff;
  }
              
a:hover { 
   color:#949494; 
  }

#wrapper {
   width:100%;
   height:100%;
   font-size: 1.3em; 
  }  

h1 { 
   font-size: 2em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   letter-spacing:6px;
   text-align:center;
   color:#333333;
   line-height:auto;
  }

h2 {
   font-size: 1.4em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   line-height:auto;
  }

h4 {
   font-size: 1.4em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   line-height:auto;
  }

header { 
   height:100%;
  }

.social {
   position: fixed;
   top:40px;
   right:40px;
   z-index: 10;  
   -webkit-animation: fadein 2s;
   -moz-animation: fadein 2s;
   -ms-animation: fadein 2s;
   -o-animation: fadein 2s; 
   animation: fadein 2s;
  }

.social .fab {
   margin: 5px;
   padding: 14px;
   width: 20px;
   height: 20px;
   display: inline-block; 
   background:#db49c6;
   color:#ffffff;
   text-align: center;
   text-decoration: none;
   border-radius:25px;
   border:2px solid #fff;
  }

.social .fab:hover {
   background:#dcba72;
   color:#ffffff;
  }
             
.gg-button {
   margin: 2px 1px 4px 0;
   font-family: 'Work Sans', sans-serif;
   font-weight:700;
   color: #ffffff;
   text-decoration: none;
   padding: 10px 20px;
   text-align: center;
   font-size: 1.6em;
   line-height:1em;
  }

.gg-button:hover {
   color:#db49c6;
  }

.gg-button-read-more {
   background:#ffffff;
   color:#dcba72 !important;
   border:2px solid #dcba72;
   padding:10px 20px;
   text-decoration:none;
   font-weight:bold;
  }

.gg-button-read-more:hover {
   background:#ffffff;
   color:#db49c6 !important;
   border:2px solid #db49c6;
   padding:10px 20px;
   font-weight:bold;
  }

.albuminfo { 
   padding-top:0;
   text-align:center;
   color:#e4e4e4;
   font-size:0.9em;
   font-weight:300;
   font-family:'Nanum Gothic', sans-serif;
  }

.gg-album-order-button {
   margin: 2px 1px 4px 0;
   background:#dcba72;
   font-family:'Work Sans', sans-serif;
   font-weight:700;
   color: #ffffff;
   border:1px solid #ffffff;
   text-decoration: none;
   padding: 10px 15px;
   text-align: center;
   font-size: 1.4em;
   line-height:1em; 
  }

.gg-album-order-button:hover {
   background:rgba(0,0,0,0.5); 
   color:#949494;
   border:1px solid #949494;
  }

.gg-design {
   width:100%;
   max-width:1200px;
   margin:0 auto;
   text-align:center;
  }

.album-release { 
   color:#c3947d;
  }

.gg-logo {
   padding-top: 14em;
   width: 100%;
   max-width:420px;
   margin:0 auto;
   -webkit-animation: fadein 2s;
   -moz-animation: fadein 2s;
   -ms-animation: fadein 2s;
   -o-animation: fadein 2s; 
   animation: fadein 2s;
  }

.gg-logo img {
   width:50%;
   margin:0 auto;
  }

.tracklisting {
   background-color: #ffffff; 
   background-image: url('Globe-Girls-W-Hotel-Afternoon-Tea.jpg');

   height: 500px; 
   background-attachment: fixed;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
  }
 
.tracks h2 {
   font-size:1.5em;
   line-height:1.7em;
  }

.trackcredit {
   text-align:center; 
   font-size:0.8em; 
   font-weight:300; 
   color:#555555;
  }

.trackcreditname {
   text-align:center; 
   font-size:0.5em; 
   font-weight:300; 
   color:#555555;
  }

.ggwelcome {
   padding:2em 0 !important;
   background:transparent;
   border-top: 4px solid #dcba72;
   border-bottom: 4px solid #dcba72;
   margin:0;
   text-align:center;
   width:100%;
   overflow:hidden;
  }

.gg-order-button {
   clear:both;
   position:absolute;
   left: 20px;
   right: 20px;
   bottom: 20px;
   text-align:center;
   font-family: 'Work Sans', sans-serif;
   font-weight:700; 
   font-size:0.7em;
   color:#ffffff;
   letter-spacing:4px;
  }

.gg-order-button a:link {
   font-family: 'Work Sans', sans-serif;
    color:#ffffff;
    text-shadow: 3px 0px 7px #db49c6, -3px 0px 7px #db49c6, 0px 4px 7px #db49c6;
  }

.gg-order-button a:link:hover {
    color:#ffffff !important;
    text-shadow: 3px 0px 7px #db49c6, -3px 0px 7px #db49c6, 0px 4px 7px #db49c6;
  }

.videobox {
  background-image:url('http://www.globegirls.co.uk/globegirls/video-curtain.png');
  background-repeat:repeat;
}



.video-outline {
   border:5px solid #3d4550;
   width:100%;
   margin:0 auto;
   text-align:center;
  }

.video-wrapper {
   position: relative;
   width: 100%;
   height: 0px;
   padding-top: 60%;
  }

.video-wrapper iframe {
   position: absolute;
   top:0;
   right:0; 
   bottom:0; 
   left:0;
   width:100%;
   height:100%;
  }

.tracknugger {
   display:inline-block;
   font-size:12px;
   font-family:'Nanum Gothic', sans-serif;
   font-weight:200;
   color:#555555;
  }

.tracktitle {
   text-align:center;
   font-family:'Nanum Gothic', sans-serif;
   font-weight:200;
   color:#333333;
  }

.album {
   width:100%;
   margin:0 auto;
   text-align:center;
  }

.album-cover {
   float:left;
   width:45%;
  }

.album-cover img {
   box-shadow:6px 6px 7px #ccc;
  }

.album-details {
   float:left;
   width:50%;
   text-align:center;
  }

.gg-main-heading {
   padding:10px;
   color:#fff;
   font-size:1em;
  }

.poster {
   width:30em;
   border:0;
}

.about-gg {
   width:100%;
   padding:40px 0;
   background-color:#d9d9d9;
  }

.gg-biography {
   width:100%;
   margin:0 auto;
   text-align:left;
  }

.gg-info { 
   text-align:left;
   color:#444;
   line-height:26px;
   font-size:0.9em;
  }

.gg-info p { 
   margin-bottom:35px;
  }


#footer {
   clear:both;
   width:100%;
   margin:0;
   padding:5px 0 15px 0;
   background-color: #ffffff;
   color:#333333;  
   text-align: center;
   font-size: 0.65em;
  }

#footer a {
   color:#333333;
   text-decoration:none;
  }

#footer a:hover {
   color:#949494;
   text-decoration:none;
  }

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@keyframes fadeInUp {
   from { transform: translate3d(0,40px,0) }
   to { transform: translate3d(0,0,0); opacity: 1; }
  }

@-webkit-keyframes fadeInUp {
   from { transform: translate3d(0,40px,0) }
   to { transform: translate3d(0,0,0); opacity: 1 }
  }

.animated {
   animation-duration: 1s;
   animation-fill-mode: both;
   -webkit-animation-duration: 1s;
   -webkit-animation-fill-mode: both
  }

.animatedFadeInUp {
   opacity: 0
  }

.fadeInUp {
   opacity: 0;
   animation-name: fadeInUp;
   -webkit-animation-name: fadeInUp;
  }