html, body {
    height: 100%;
    width: 100%;
}

div { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
    background: linear-gradient(90deg, #fce29b 50%, #fcb49b 50%);
}

.side-by-side {
	position: absolute;
	height: 100%;
	width: 50%;
	z-index: 20;
}

#left {
	left: 0;
	/*background-color: #FFF7AE;*/

}

#right {
	right: 0;
	/*background-color: #072E9B;*/
	
}

/* ----------
revise popsicle file so the stick is always in the same place no matter what
maybe popsicles are dif colors
revise JS so when we click on kuwait we are only adjusting kuwait popsicle
*/
#test .side-by-side { overflow: hidden; }
#test .side-by-side .popsicle {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
}
#test #right .popsicle { left: -50%; }
#test #left .popsicle { left: 50%; }

/* ---------- */

.text {
	font-family: Courier;
	font-weight: bold;
	font-size: 38px;
	width: 50%;
	text-align: center;
	margin-top: 20%;
	position: absolute;	
}

#nyc:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#kw:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#nyc {
	left: 0;
}

#kw {
	right: 0;
	color: white;
}

#natural {
	position: absolute;
	top: 0;
	left: 27%;
	/*right: 50%;*/
	bottom: 0;
	width: 45%;
	/*margin-left: 27%;*/
	z-index: 1;
	/*margin-top: -434px;*/
}