.info-menu {
	position: fixed;
	height: 400px;
	bottom: calc(0em - 400px);
	z-index: 0;
	font-family: 'oceaniaregular';
    font-weight: normal;
    font-style: normal;
    left: 0;
    width: 100%;
    min-width: 640px;
    z-index: 3000;
}

#policies .logout {
	color: white;
    float: right;
    margin-bottom: 10px;
    clear: both;

}

#policies .logout p {
	margin: 0;
    margin-left: 15px;
}

#policies {

    position: absolute;
    right: 2em;
    bottom: 1em;
    margin: auto;
    max-height: 20px;
    text-align: center;

}

#info-help {
	position: absolute;
	left: 2em;
	top: 5em;
	bottom:	0;	
	margin:	auto;

}

#policies a {

	color: white;
}

.info-menu .water-path {
	position: absolute;
	top: 195px;
	left: 8000px;
	width: 100em;
	height: auto;
	z-index: -2;
	-webkit-transform: scale(15, 3);
	  transform: scale(15, 3);
}



.info-menu #info-icon-container {
	position: absolute;
	//float: left;
	width: 150px;
	height: 50px;
	top: -50px;
	left: 0;
	
}

.info-menu #icon-volume {
	position: absolute;
    left: 73px;
    top: -11px;
	width: 50px;
	height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('/static/ui/audio_on.png');
        //background-size: cover;
}

.info-menu #icon-volume.enabled {
       background-image: url('/static/ui/audio_off.png');
}

.info-menu #info-tab-tall {
	position: absolute;
    left: 22px;
    top: -6px;
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    width: 38px;
}


.info-menu #dive-deeper-container {
	position: absolute;
	width: 30vw;
	min-width: 300px;
	/*height: 200px;*/
	top: 5em;
	left: 0 ;
	right: 0;
	bottom: 0;

	margin: auto;
	padding: 20px;


}

.info-menu #dive-deeper-container p {
	color: white;
	text-align: left;
	line-height: 200%;
	font: 16px "oceaniaregular", Arial;
}





.info-menu #logo-dive-deeper {
	max-width: 300px;
	margin:auto;
	left: 0;
	right: 0;

}

.info-menu #logo-container {
	position: absolute;
    right: 1em;
    bottom: 7em;
    max-width: 10vw;
    min-width: 270px;
    height: 100px;

}

.info-menu  #logo-water-brothers, .info-menu #logo-thought-cafe, .info-menu #logo-bell-fund, .info-menu #logo-tvo {
	position: relative;
	float: right;
	height: 50%;
	margin: 15px;
}

.info-menu img {

	user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.info-menu  #globe-menu {
	position: absolute;
	width: 300px;
	height: 150px;
	
	top: 30%;
	left: 125px;

    -webkit-transform: scale(1.5, 1.5);
	transform: scale(1.5, 1.5);
	/*
	border-width: 1px;
	border-color: #FFF;
	border-style: solid;
	*/
}

/*GLOBE BUTTON */
.info-menu  .globe-button, .info-menu .menu-button {
	border-radius: 100%;
	border-width: 2.5px;
	border-color: #FFF;
	border-style: solid;

  position: absolute;
  margin-left: 20px;
  top: 40%;
  color: white;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.info-menu  .globe-button {
	width: 50px;
	height: 50px;
	margin-top: -10px;
	background: #004958;
}
.info-menu  #globe-continent {
	position: absolute;
	width: 180%;
	height:180%;
	top: -17.5px;
	left: -1.5px;
	user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* MENU BUTTONS */

.info-menu  .menu-button {
	width: 30px;
	height: 30px;
}
.info-menu  .menu-button-fill {
	position: absolute;
	display: block;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	background: white;
	
	clip: rect(30px, 30px, 30px, 0px);
	
}
@-webkit-keyframes bounce {
    0% { clip: rect(30px, 30px, 30px, 0px); }
    100% { clip: rect(0px, 30px, 30px, 0px); }
 }
@keyframes bounce {
    0% { clip: rect(30px, 30px, 30px, 0px); }
    100% { clip: rect(0px, 30px, 30px, 0px); }  
	}   
@-moz-keyframes bounce {
    0% { clip: rect(30px, 30px, 30px, 0px); }
    100% { clip: rect(0px, 30px, 30px, 0px); }
}
.info-menu  .menu-button-outline-light {
	position: absolute; /* Enable clipping */
	display: block;
	width: 40px;
	height: 40px;
	left: -8px;
	top: -8px;
	border-radius: 100%;
	border-width: 3px;
	border-color: #FFF;
	border-style: solid;
	opacity: 0;
}
.info-menu .menu-button-outline-dark {
	position: absolute;
	top: -10px;
	left: -10px;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
		
	transform: rotate(-90deg);
}
.info-menu  .globe {
  display: none;
}


/* CONTAINERS */

.info-menu .menu {
	border-width: 1px;
	border-color: #FFF;
	border-style: solid;
  position: absolute;
  left: 10%;
  margin-left: -80px;
  padding-top: 20px;
  padding-left: 80px;
  width: 500px;
  height: 400px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}


/* MENU BUTTON ANIMATIONS */
.info-menu .globe:unchecked ~ .menu-button {
   opacity: 0;
}

.info-menu .menu-button:nth-child(3) {
  -webkit-transition-duration: 180ms;
          transition-duration: 180ms;
}
.info-menu .menu-button:nth-child(4) {
  -webkit-transition-duration: 180ms;
          transition-duration: 180ms;
}
.info-menu .menu-button:nth-child(5) {
  -webkit-transition-duration: 180ms;
          transition-duration: 180ms;
}
.info-menu .menu-button:nth-child(6) {
  -webkit-transition-duration: 180ms;
          transition-duration: 180ms;
}

/* GLOBE BUTTON ANIMATIONS */
.info-menu .globe-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.info-menu .globe-button:hover {
  -webkit-transform: scale(1.3, 1.3) translate3d(0, 0, 0);
          transform: scale(1.3, 1.3) translate3d(0, 0, 0);
}

.info-menu .globe:checked + .globe-button {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
          transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.info-menu .globe:checked ~ .menu-button {
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
          transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.info-menu .globe:checked ~ .menu-button:nth-child(3) {
  -webkit-transition-duration: 350ms;
          transition-duration: 350ms;
  -webkit-transform: translate3d(70px, 0, 0);
          transform: translate3d(70px, 0, 0);
}
.info-menu .globe:checked ~ .menu-button:nth-child(4) {
  -webkit-transition-duration: 450ms;
          transition-duration: 450ms;
  -webkit-transform: translate3d(120px, 0, 0);
          transform: translate3d(120px, 0, 0);
}
.info-menu .globe:checked ~ .menu-button:nth-child(5) {
  -webkit-transition-duration: 550ms;
          transition-duration: 550ms;
  -webkit-transform: translate3d(170px, 0, 0);
          transform: translate3d(170px, 0, 0);
}
.info-menu .globe:checked ~ .menu-button:nth-child(6) {
  -webkit-transition-duration: 650ms;
          transition-duration: 650ms;
  -webkit-transform: translate3d(220px, 0, 0);
          transform: translate3d(220px, 0, 0);
}



/* MENU HOVERZZZZ */

.info-menu .globe:checked ~ .menu-button:hover > .menu-button-outline-light {
	opacity: 0.3;
}

.info-menu .globe:checked ~ .menu-button:nth-child(3):hover {
-webkit-transform: scale(1.2, 1.2) translate3d(58px, 0, 0); /* -7 offset */
          transform: scale(1.2, 1.2) translate3d(58px, 0, 0);
}

.info-menu .info-menu .globe:checked ~ .menu-button:nth-child(4):hover {
-webkit-transform: scale(1.2, 1.2) translate3d(100px, 0, 0); /* -20 offset */
          transform: scale(1.2, 1.2) translate3d(100px, 0, 0);
}

.info-menu .globe:checked ~ .menu-button:nth-child(5):hover {
-webkit-transform: scale(1.2, 1.2) translate3d(141px, 0, 0); /* -29 offset */
          transform: scale(1.2, 1.2) translate3d(141px, 0, 0);
}

.info-menu .globe:checked ~ .menu-button:nth-child(6):hover {
-webkit-transform: scale(1.2, 1.2) translate3d(184px, 0, 0); /* -36 offset */
          transform: scale(1.2, 1.2) translate3d(184px, 0, 0);
}


/* MENU CLICK FILL */

.info-menu .globe:checked ~ .menu-button:active > .menu-button-fill {
	    -webkit-animation: bounce 3s ; 
-moz-animation: bounce 3s ;       
animation: bounce 3s ; 
}

.info-menu .globe:checked ~ .menu-button:active > .menu-button-outline-dark {
	animation: dash 4s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }

}

.info-menu #info-check {
	display: none;
}

.info-menu #info-tab-tall {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  -webkit-transition-duration: 400ms;
	  transition-duration: 400ms;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;          
}

.info-menu #info-tab-tall:hover  {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
	  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}