.gtglogo {
margin-top:-105%;
animation: ggshow 4.5s ease-in-out forwards;
}

@keyframes ggshow {
0%,83% {transform: scale(0);}
83% {transform: scale(0) rotateZ(0);}
97% {transform: scale(1.4)}
100% {transform: scale(1);filter: drop-shadow(5px 5px 3px rgba(248,134,177,0.5));} 
}


.gtgabout {
background-image:url(../images/goodtogo/gtgaboutbg.jpg);
background-attachment:fixed;
background-size:cover;
background-position:center center;
}



.gtgcontentbg {
background:#ede4d6a3;
backdrop-filter: blur(7px);
border-radius:50px;
box-shadow: 0 35px 68px 0 rgb(125 123 126 / 42%), inset 0 -4px 16px 0;
animation:updown 4s forwards;
animation-delay:3s;
}

@keyframes updown {
to {transform: translateY(-35vh);}
}


@media screen and (max-width:700px){
.gtgcontentbg {
margin: 0 10px;
animation:none;
}
}

.gtgcontbg {
margin-top:45vmin;
margin-left:10px;
margin-right:10px;
padding:20px;
z-index:0;
background:#ede4d6a3;
backdrop-filter: blur(7px);
border-radius:50px;
box-shadow: 0 35px 68px 0 rgb(125 123 126 / 42%), inset 0 -4px 16px 0;
}


.gtgepbg {
margin-left:10px;
margin-right:10px;
padding:20px;
z-index:0;
background:#ede4d6a3;
backdrop-filter: blur(7px);
border-radius:50px;
box-shadow: 0 35px 68px 0 rgb(125 123 126 / 42%), inset 0 -4px 16px 0;
}



.bg {
background-image:url(../images/home/hb01.jpg);
transition: background-image 7s ease;
    -webkit-background-size:100vw 100vh;
    -moz-background-size:100vw 100vh;
    -o-background-size: 100vw 100vh;
    background-position: bottom center;
    background-attachment: fixed;  
    background-size:100vw 100vh;
animation: bgchange 120s infinite;
}


@keyframes bgchange {
    0%, 20% {background-image:url(../images/home/hb01.jpg);}
    20%,40% {background-image:url(../images/home/hb02.jpg);}
    40%,60% {background-image:url(../images/home/hb03.jpg);}
    60%,80% {background-image:url(../images/home/hb04.jpg);}
    80% {background-image:url(../images/home/hb05.jpg);}
}


.skipnav {
  position: absolute;
  height: 100px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
 top: 0;
  left: -76px;
  background-color: white;
  padding: 3px;
  /*box-shadow: 0 0 0 1px #00B000, 0 0 0 8px white, 0 0 0 10px #00B000;*/
  color: black;
  z-index:100;
}

.skipnav:focus {
  height: auto;
  width: auto;
  overflow: hidden;
  clip: auto;
  top: 10px;
  left: 16px;
  outline: none;
}

li span {
font-size: 0px;
}

li a:focus span ,li a:hover span {
	position:relative;
	color:#f7f7bf;
	font-size: 14px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
}


.epframe {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.7));
}


.eptitle {
margin-top:-18%;
text-align:center;
font-size:20px;
font-weight:600;
color:white;
backdrop-filter: brightness(50%);
}

.eptitle span {
font-size:16px;
}


.eptitlegtg {
margin-top:-20%;
padding:5px;
text-align:center;
font-size:18px;
font-weight:600;
color:white;
backdrop-filter: brightness(0.5);
}

.epnote {
background:white;
border-radius:1px 1px 15px 15px;
padding:5px;
margin-top:-20px;
font-size:16px;
text-align:left;
color:#031765;
height:70px;
}

@media (min-width: 486px) and (max-width: 990px) {
.epnote {
background:white;
border-radius:1px 1px 15px 15px;
padding:5px;
margin-top:7%;
font-size:16px;
text-align:left;
color:#031765;
}
}





h2 u{
background-image: linear-gradient(orange, yellow);
background-size: 15%;
padding-left: 20px;
background-repeat: no-repeat;
text-decoration: none;
}

h2 span {
font-size:20px;
  background-image: linear-gradient(brown, brown);
  background-position: left bottom;
  background-size: 0 2.5px;
  background-repeat: no-repeat;
  filter: opacity(0.3);
  transition: background-size 0.15s;
}

h2 span:hover {
  background-size: 100% 3.5px;
  filter: opacity(1);
}

.s3contbg {
background:rgba(243,238,223,0.9);
padding:15px; 
border-radius:30px 0; 
margin:10% 15px 1% 15px;
}

.key {
font-size:0px;
}

a:focus .key , a:hover .key {
	position:relative;
	color:black;
	font-size: 16px;
        padding: 3px;
     	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
}


.diving {
max-width:150px;
animation:swim 10s infinite;
}

@keyframes swim {
 0% {
    transform: translateY(0px) rotate(0deg);
  }
 50% {
    transform: translateY(-40px) rotate(-30deg); 
  }
100% {
    transform: translateY(0px) rotate(0deg);
  }
}