.ring-wave{
	-webkit-animation: ringwave 2.5s; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: ringwave 2.5s;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-webkit-keyframes ringwave {
    0%   {width: 500px; height:500px;   left:0px; opacity:1.0; border: 3px solid #fff;}
    10%  {width: 520px; height:520px;   left:-10px; opacity:0.9; border: 1px solid #fff;}
    20%  {width: 540px; height:540px;   left:-20px; opacity:0.7; border: 1px solid #fff;}
    30%  {width: 560px; height:560px;   left:-30px; opacity:0.7; border: 1px solid #fff;}
    40%  {width: 580px; height:580px;   left:-40px; opacity:0.5; border: 1px solid #fff;} 
	50%  {width: 600px; height:600px;   left:-50px; opacity:0.4; border: 1px solid #fff;}
    60%  {width: 620px; height:620px;   left:-60px; opacity:0.3; border: 1px solid #fff;}
    70%  {width: 640px; height:640px;   left:-70px; opacity:0.2; border: 1px solid #fff;}
    80%  {width: 660px; height:660px;   left:-80px; opacity:0.1; border: 1px solid #fff;}
    90%  {width: 680px;  height:680px;  left:-90px; opacity:0.0; border: 1px solid #fff;}
	100% {width: 700px;  height:700px;  left:-100px; opacity:0.0; border: 1px solid #fff;}
}

.pointer-hand-alert{
	-webkit-animation: pointer-alert 0.6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: pointer-alert 0.6s;
	-webkit-animation-timing-function: linear;
    animation-direction: alternate;
	animation-iteration-count: infinite;
}

@-webkit-keyframes pointer-alert {
    0%   {top: 0px;}
	100% {top: -15px;}
}

@keyframes pointer-alert {
    0%   {top: 0px;}
	100% {top: -15px;}
}

.tab-pointer-hand{
	-webkit-animation: tab-pointer 0.6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: tab-pointer 0.6s;
	-webkit-animation-timing-function: linear;
    animation-direction: alternate;
	animation-iteration-count: infinite;
}

@-webkit-keyframes tab-pointer {
    0%   {left: 0px;}
	100% {left: 5px;}
}

@keyframes tab-pointer {
    0%   {left: 0px;}
	100% {left: 5px;}
}

#sdgAndMeStart{
	height:100%;
	width:100%;
}

#startBackground{
	height:100%;
	width:100%;
	background: steelblue;
}

#sdgImgContainer, #ringContainer{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	background:#FFF;
	height:500px;
	width:500px;
	border-radius:100%;
	z-index:2;	
}

#sdgImgContainer{
	z-index:3;	
}

#sdgImgContainer:hover{
	cursor:pointer;
}

#ringContainer{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	background:transparent;
	height:500px;
	width:500px;
	z-index:2;
}

.rings{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	height:500px;
	width:500px;
	z-index:1;
	background:transparent;
	border: 2px solid #FFF;
	border-radius:100%;
	opacity:0.3;
}

#sdgImageStart{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	height: 335px;
	z-index:29;
}

#goalStackContainer{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	background:#FFF;
	height:500px;
	width:500px;
	border-radius:100%;
	z-index:0;
}

.goal-anim-container{
	position: absolute;
    top: 20%;
    left: 20%;
    margin: auto;
    background: #FFEB3B;
    height: 120px;
    width: 120px;
    border-radius: 100%;
	z-index:0;
}

.goal-anim{
	position: absolute;
    top: 12%;
    left: 25%;
    margin: auto;
    font-size: 75px;
	color:#fff;
}

.start-goal-caption{
	color:#FFF;
	font-size: 18px;
	position:absolute;
	top: 290px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	text-align:center;
	width:80%;
	display:none;
}

#introBtnContainer{
	position: absolute;
	text-align:center;
	position:absolute;
	left:13%;
	bottom:45%;
}

#startBtnContainer{
	position: absolute;
	text-align:center;
	position:absolute;
	right:13%;
	bottom:45%;
}

#sdgIntroPointerContainer{
	position:absolute;
	left:9%;
	bottom:45%;
	width:30%;
	color:#fff;
	font-size:60px
	;opacity:0.3;
}

#sdgIntroBtn, #sdgStartBtn{
	border-radius:6px;
	color:#fff;
	border: 2px solid #fff;
	padding: 5px 40px 5px 40px;
	background:transparent;
	font-size: 25px;
	opacity:0.8;
}

#sdgIntroBtn:hover, #sdgStartBtn:hover{ 
	background:#FFF;
	cursor:pointer;
}

.rotate{
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	-webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    transition: all 1.3s;
}

.anti-rotate{
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-webkit-transition: all 5.3s;
    -moz-transition: all 5.3s;
    transition: all 5.3s;
}

.start-icon{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	font-size: 65px;
	color:#fff;
	height:100px;
	width:100px;
	text-align:center;
}

.sdg-intro-title, .sdg-intro-text{
	color:#fff;
	display:inherit;
	width:100%;
}

.sdg-intro-title{
	font-size: 40px;
}

.sdg-intro-text{
	width:60%;
	font-size: 20px;
}