h4 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.4rem;
  font-weight: 300;
  position: relative;
}

video {
  max-width: 100%;
  height:auto;
}

#vertical-buttons { display:none; }
#horizontal-buttons { display:flex; }

.popover { pointer-events:none;top: -150px!important;max-width:/*calc(100vh/3)*/430px;left: -70px!important; }
.popover-body { padding:0; }
.popover-body img { border-radius:.3rem; }
.popover-body video { border-radius:.3rem; }
.arrow { left:calc(412px/2)!important;}

.back-button { color: #fff;font-size: 43px; }
.back-button:hover { color: #d19ba8; }

.row { flex-wrap: nowrap !important; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.informational-text { font-size:21px!important; }
.mobile-preview { display:none; }

@media screen and (max-width: 1900px) {
  .row { transform: scale(0.7); }
  .popover { pointer-events:none;top: -50px!important;max-width:/*calc(100vh/3)*/300px;/*left: -120px!important;*/left: 0px!important; }
  .arrow { left:calc(282px/2)!important;}
}

@media screen and (max-width: 1100px) {
	.mobile-preview { display:block; }
	.row.info-container { width:90vw !important;margin-top: calc(100vw *0.56);margin-bottom:50px; }
	#vertical-buttons { display:block;transform: scale(0.6); }
	#horizontal-buttons { display:none; }
	.informational-text { font-size:17px!important; }
	/*.back-button { margin-bottom: 50px!important;margin-top:30px!important;font-size:50px!important; }*/
	#artemis-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	#iris-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	#athena-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	.back-button { font-size: 23px; }
}

@media screen and (max-height: 700px) {
	.mobile-preview { display:block; }
	#artemis-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	#iris-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	#athena-info { left:0!important;top:30px!important;transform: scale(1)!important; }
	.back-button { font-size: 23px; }
	
}



h4:before {
  content: "«";
  position: absolute;
  left: 50%;
  top: 2rem;
  transform: translateX(-50%) rotate(270deg);
}

h2 {
  position: relative;
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  /*font-size: 5rem;*/
  color: transparent;
  text-transform: uppercase;
  transform:scale(1);
  transition:transform 0.5s;
}

h2:hover {
	transform:scale(1.5);
}

h2:hover span:nth-child(1) {
  transform: translateY(-1rem);
}

h2:hover span:nth-child(2) {
  transform: translateY(1rem);
}

h2:hover span:nth-child(3) {
  opacity: 1;
  transition: opacity 700ms ease;
}

h2:hover div p {
  opacity: 0;
}

h2 span:nth-child(1), h2 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  color: /*#031231*/black;
  transition: 0.5s;
  overflow: hidden;
}
h2 span:nth-child(1) {
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
}
h2 span:nth-child(2) {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
h2 span:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 350ms ease;
  font-size: 1.8rem;
  color: #fff;
  background: #8ac249 /*rgb(255,45,85)*/;
  width: 97.5%;
  padding-left: 5px;
  text-align: center;
  font-family: var(--font-primary);
  /*letter-spacing: 0.5rem;
  word-spacing: 1rem;*/
  line-height: 100%;
}