.locations {
  width: 100%;
  height: 100vh;
  z-index: 0;
  position:relative;
}

.locations .bg,
.locations .cover {
  display: block;
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  z-index: -1;
}

.locations .bg .cover {
  opacity: 0;
  -webkit-transition: opacity .5s linear 0s;
  -o-transition: opacity .5s linear 0s;
  transition: opacity .5s linear 0s;
}

.locations .bg .cover:nth-child(1),
.locations .bg.img1 .cover:nth-child(2),
.locations .bg.img2 .cover:nth-child(3),
.locations .bg.img3 .cover:nth-child(4),
.locations .bg.img4 .cover:nth-child(5) {
  opacity: 1;
}


.locations::after {
  content:'';
  display:table;
  clear: both;
}

.location {
  position: relative;
  width: 25%;
  height: 100%;
  float: left;
  border-right: 2px solid white;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: background .5s;
  -o-transition: background .5s;
  transition: background .5s;
}

.location-1-1 {
  width: 100%;
}

.location-1-2 {
  width: 50%;
}

.location-1-3 {
  width: 33.3334%;
}

.location-1-4 {
  width: 25%;
}

.location a {
  text-decoration: none;
  color: white;
}

.notouch .location a:hover {
  text-decoration: none;
}

.location .selflink, .location .backlink {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  color: transparent;
  background-color: transparent;
}

.location .selflink {
  z-index: 2;
}

.location-active .selflink,
.location:target .selflink {
  visibility:hidden;
}

.location .backlink {
  z-index: -1;
}

.location .info img {
  width: 1px;
  height: 1px;
  opacity: 0;
}

.location h1 {
  font-size: 5rem;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 100;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  -o-transition: transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  width: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.notouch .location:hover h1 {
  -webkit-transform: translateY(-.4em);
      -ms-transform: translateY(-.4em);
          transform: translateY(-.4em);
}

.notouch .location:target:hover h1,
.notouch .location-active:hover h1 {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.location .info {
  line-height: 1.8;
  letter-spacing: -.2px;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .8s;
  -o-transition: max-height .8s;
  transition: max-height .8s;
  width: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.location .info:before {
  content:'';
  display:block;
  height: 0;
  padding-top: 2em;
}

.location-active .info,
.location:target .info {
  max-height: 100vh;
}

.location:target,
.location.location-active {
  background: rgba(76,122,114, 0.7);
}

.location:last-child {
  border: none;
}

.gallery-shown {
  display: block;
  /*padding-left: 30px;*/
  position: relative;
}

.gallery-shown::before {
  content: '';
  /*content: "\f230";*/
  /*display:block;
  position: absolute;
  left: 0;
  
  width: 24px;
  height: 24px;*/
  
  /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMid' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ecamera%3C/title%3E%3Cpath fill='white' d='M21 5h-3.5l-1.7-2.6c0-.2-.5-.4-.8-.4H9c-.3 0-.6.2-.8.4L6.5 5H3C1.3 5 0 6.3 0 8v11c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V8c0-1.7-1.3-3-3-3zm1 14c0 .6-.5 1-1 1H3c-.6 0-1-.5-1-1V8c0-.6.5-1 1-1h4c.3 0 .6-.2.8-.4L9.5 4h5l1.7 2.6c.2.2.5.4.8.4h4c.5 0 1 .5 1 1v11z'/%3E%3Cpath fill='white' d='M12 8c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z'/%3E%3C/svg%3E");*/
  /*background: url("data:image/svg+xml,%3Csvg xmlns=' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264.018 264.018" style="enable-background:new 0 0 264.018 264.018;" xml:space="preserve"> <g> <path d="M132.009,0c-42.66,0-77.366,34.706-77.366,77.366c0,11.634,2.52,22.815,7.488,33.24c0.1,0.223,0.205,0.442,0.317,0.661 l58.454,113.179c2.146,4.154,6.431,6.764,11.106,6.764c4.676,0,8.961-2.609,11.106-6.764l58.438-113.148 c0.101-0.195,0.195-0.392,0.285-0.591c5.001-10.455,7.536-21.67,7.536-33.341C209.375,34.706,174.669,0,132.009,0z 		 M132.009,117.861c-22.329,0-40.495-18.166-40.495-40.495c0-22.328,18.166-40.494,40.495-40.494s40.495,18.166,40.495,40.494 C172.504,99.695,154.338,117.861,132.009,117.861z"/><path d="M161.81,249.018h-59.602c-4.143,0-7.5,3.357-7.5,7.5c0,4.143,3.357,7.5,7.5,7.5h59.602c4.143,0,7.5-3.357,7.5-7.5 	C169.31,252.375,165.952,249.018,161.81,249.018z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>");*/
}

.gallery-hidden {
  visibility: hidden;
}

.hb-wrapper .hb-image-container div div.hb-loader {
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,0.3);
  border: none;
  border-radius:0;
  margin: -20px 0 0 -20px;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@media all and (max-width: 1280px) {
  .location h1 {
    font-size: 3rem;
  }
}

@media all and (max-width: 860px) {
  .hide-mobile {
    display: none;
  }

  .location h1 {
    font-size: 3.5rem;
  }

  .locations {
    position:relative;
    height: auto;
  }
    
  .location {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid white;
    padding: 3.5rem;
  }
}