* { box-sizing: border-box; }

/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

*{ margin: 0; padding: 0;}

body {
  /*To hide the horizontal scroller appearing during the animation*/
  overflow-x: hidden;
  background: #9bbc35;
  position: relative;
  font-size: 1.2rem;
  height: 100%;
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1rem;
  }

}


html, 
body, 
#background { 
  min-height: 100vh;
}


header{
  background: #f6f8fb;
    background: -webkit-linear-gradient(top, #c9dbe9 0%, #f6f8fb 100%);
    background: -linear-gradient(top, #c9dbe9 0%, #f6f8fb 100%);
    background: -moz-linear-gradient(top, #c9dbe9 0%, #f6f8fb 100%);
  padding-bottom: 2rem;
  width: 100%;
}



.footer[role=contentinfo] {
  position: relative;
  clear: both;
  margin-top: 0;
  background: #2c2c2c;
  color: #bcbbbb;   
  min-height: 300px;
  margin-top: 4rem;
}

.footer[role=contentinfo] a:link, 
.footer[role=contentinfo] a:visited {
    color: #bcbbbb;
}

.footer[role=contentinfo] p.logos {
    overflow: auto;
    margin-bottom: 0;
}


.footer[role=contentinfo] a.esrc {
    float: left;
    display: block;
    width: 304px;
    height: 81px;
    overflow: hidden;
    text-indent: -3000em;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
    background: url(https://www.understandingsociety.ac.uk/sites/all/themes/understanding_society/images/esrc-logo.svg) no-repeat 50% 50%;
}


.footer[role=contentinfo] a.iser {
    float: left;
    display: block;
    width: 93px;
    height: 81px;
    overflow: hidden;
    text-indent: -3000em;
    margin-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    background: url(https://www.understandingsociety.ac.uk/sites/all/themes/understanding_society/images/iser-logo.svg) no-repeat 50% 50%;
}

.footer[role=contentinfo] a.uoe {
    float: left;
    display: block;
    width: 222px;
    height: 81px;
    overflow: hidden;
    text-indent: -3000em;
    margin-bottom: 1.5rem;
    background: url(https://www.understandingsociety.ac.uk/sites/all/themes/understanding_society/images/university-essex-logo.svg) no-repeat 50% 50%;
}


.footer[role=contentinfo] nav.social {
    position: absolute;
    top: 0;
    right: 0;
}

.footer[role=contentinfo] .fa-inverse {
    color: #2c2c2c;
}

.footer a {
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

@media (max-width: 992px) {
  .footer[role=contentinfo] nav.social {
    position: relative;
    float: left;
  }
}

@media (max-width: 768px) {
  .footer[role=contentinfo] a.esrc {
    width: 200px;
    height: 53px;
  }
  .footer[role=contentinfo] a.iser {
    width: 61px;
    height: 53px;
  }
  .footer[role=contentinfo] a.uoe {
    width: 145px;
    height: 53px;
  }
}



.wrapper {
  position: relative;
  margin-bottom: 50px;
}

@font-face {
  font-family: ChevinLight;
  src: url("../fonts/chevin-light-webfont.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/chevin-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/chevin-light-webfont.woff") format("woff"), url("../fonts/chevin-light-webfont.ttf") format("truetype"), url("../fonts/chevin-light-webfont.svg#svgFontName") format("svg");
  /* Legacy iOS */ }
@font-face {
  font-family: ChevinMedium;
  src: url("../fonts/chevin-medium-webfont.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/chevin-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/chevin-medium-webfont.woff") format("woff"), url("../fonts/chevin-medium-webfont.ttf") format("truetype"), url("../fonts/chevin-medium-webfont.svg#svgFontName") format("svg");
  /* Legacy iOS */ }



h1, h2, h3, h4, h5, h6
 {
  font-family: ChevinLight, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New"; }

h1{
  margin-bottom: 1.5rem;
}

.lead {
    font-size: 1.5rem;
}

.callout {
    padding: 1rem;
    border-left: 10px solid #619249;
    background: white;
    font-size: 1.3rem;
}

@media only screen and (max-width: 767px) {
  .lead {
    font-size: 1.15rem;
  }

}

.font-blue {
  color:  #1f5885;
}

ol.take-part {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 60px;
}
ol.take-part li {
  margin: 0 0 1.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol.take-part li::before {
  content: counter(my-awesome-counter);
    color: #f8d731;
    font-size: 1.5rem;
    font-weight: bold;
    position: absolute;
    --size: 40px;
    left: calc(-1 * var(--size) - 10px);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    top: 0;
    transform: rotate(-10deg);
    background: #328209;
    border-radius: 50%;
    text-align: center;
    box-shadow: 1px 1px 0 #194702;
}

#sky {
  min-height: 100px;
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 349px;
  z-index: -10;
  background-color: #f5f8fb;
}

#sky.home {
  bottom: auto;
  z-index: 0;
}

.link-no-underline {
  text-decoration: none;
}


.highlight {
    color: #000000;
    background: #cff801;
    font-weight: bold;
    padding: 5px;
}


.mobileshop .highlight {
    color: #000000;
    background: #e7e7e7;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
}

#result_tv_film .avatar {
  background: #2524249e;
  border-radius: 10px
}




.highlight-green {
    color: #7fe4cc;
}

.highlight-blue {
    color: #00e3e1;
}

.highlight-orange {
    color: #fedc80;
}

.highlight-pink {
    color: #fbabbc;
}



.bg-opaque-white{
  background: #ffffffd4;
}

.bg-mustard {
  background: #dabc70;
}

.bg-mustard-light {
  background: #f8eccf;
}

.bg-mustard-dark {
  background: #9c8240;
}

.bg-beige {
  background: #ddcda4;
}

.bg-beige-light {
  background: #f1e5d5;
}

.bg-beige-dark {
  background: #a4825b;
}

.bg-turquoise {
  background: #48b2bd;
}

.bg-turquoise-light {
  background: #c0e3e9;
}

.bg-turquoise-dark {
  background: #348da6;
}

.bg-grey {
  background: #837777;
}

.bg-grey-light {
  background: #f3f3f3;
}

.bg-blue {
  background: #c9dbe9;
}

.bg-blue-light {
  background: #f5f7fa;
}

.bg-dark-blue {
  background: #3e4e5b;
}

.bg-green {
      background: #9cbc35;
}

.bg-pink {
      background: #f9a09a;
}

.bg-pink-light {
      background: #ffebe9;
}

.bg-pink-dark {
      background: #a55953;
}

.bg-dark-grey {
  background: #837777;
}

.bg-black-grey {
  background: #373737;
}


.text-bubble {
  margin: auto;
  width: 60%;
  /* display: inline-block; */
  margin: auto;
  padding: 8px;
  color: black;
  background: #eff7fc;
  font-family: -webkit-body;
  border: 1px solid #0a516c;
  font-size: 20px;
  text-align: center;
  border-radius: 6px;

}

.wall {
  width: 2%;
  height: 100%;
}

#grass {
  bottom: 0;
  min-height: 350px;
  width: 100%;
  z-index: -100;
}



.floor {
  min-height:  100px;
}

.room-interior {
  display: inline-block;
  padding: 20px;
  width: 96%;
  position: relative;
  min-height: 650px;
}

@media only screen and (max-width: 767px) {
  .room-interior {
      padding: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .room-interior-sm-500 {
    min-height: 500px;
  }
}

@media only screen and (max-width: 767px) {
  .room-interior-sm-450 {
    min-height: 450px;
  }
}


.overview-text {
  padding: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .overview-text {
    padding: 0.75rem;
  }
}


.building-base {
  position: relative;
  min-height: 40px;
  background: #999999;
}

.building-base .bushes-left {
  bottom: 55px;
  left: 3%;
  width: 20%;
}

@media only screen and (max-width: 767px) {
  .building-base .bushes-left {
    bottom: 38px;
    left: 1%;
    width: 30%;
  }
}


.building-base .bushes-right {
  bottom: 55px;
  right: 3%;
  width: 20%;
}


@media only screen and (max-width: 767px) {
  .building-base .bushes-right {
    bottom: 38px;
    right: 1%;
    width: 30%;
  }
}

@media only screen and (max-width: 767px) {
  .w-sm-100 {
    width: 100% !important;
  }
}

.building-base-tiles {
  
  background: url(../images/bg-tiles.svg) repeat-x;
  min-height: 40px;
}

.bg-contain {
    background-size: contain;
}

.absolute {
    position: absolute;
}

#privacyModal .btn-link {
  vertical-align: unset;
  font-size: unset;
}


#privacyModal .btn-primary {
    background-color: #2c7dfd;
    border: 0;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    -webkit-transition: all .2s;
    transition: all .2s;
}


#privacyModal .btn-primary:focus, 
#privacyModal .btn-primary:hover, 
#privacyModal .btn-primary:active {
    border: 0;
    outline: 0 none;
    color: #fff;
    background-color: #0a58ca;
}


#privacyModal .btn-primary:hover {
    color: #fff;
    background-color: #0a58ca;
    border-color: transparent;
}






.bg-tablet{
  color: #e7e7e7;
    background: #3c3c3c;
    margin-bottom: 400px !important;
    border: 20px solid #252424;
    border-bottom: 0;
    border-radius: 20px;
}

.bg-tablet .modal-footer {
  background: #252424;
}


.bg-grass{
  background: #439a34;
  margin-bottom: 400px !important;
  border: none;
  padding: 15px;
  color: white;
}

.bg-grass .modal-content-inner{
  border: 2px solid #fff;
  padding: 10px;
}






.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}

.intro {
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}






nav .navbar-brand {
    position: relative;
    margin-right: 0;
    height: 120px;
    width: 287px;
    background: url(../images/ukhls-logo.svg) no-repeat;
    float: left;
    margin-bottom: 0;
    display: block;
    overflow: hidden;
    text-indent: -3000em;
}


@media (max-width: 767.98px) {
  nav .navbar-brand {
    height: 92px;
    width: 220px;
  }
}

.dropdown-menu {
    border: 1px solid #1f5884;

}

@media (max-width: 767.98px) {
  .dropdown-menu {
    border: 0;
  }
}

.navbar-toggler {
  color:  #1e5885;
  border:  1px solid #1e5885;
}


.navbar-toggler:focus {
    color: #fff;
    background: #1e5885;;
    box-shadow: 0 0 0 0.15rem;
}

nav .dropdown-menu li  a.dropdown-item div.school {
    background-image: url(../images/school.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
    display: inline-block;
    float: left;
    padding-left: 50px;
    height: 30px;
}

nav .dropdown-menu li  a.dropdown-item div.mobile {
    background-image: url(../images/mobile-shop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
    display: inline-block;
    float: left;
    padding-left: 50px;
    height: 30px;
}

nav .dropdown-menu li  a.dropdown-item div.cafe {
    background-image: url(../images/cafe.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
    display: inline-block;
    float: left;
    padding-left: 50px;
    height: 30px;
}

nav .dropdown-menu li  a.dropdown-item div.bank {
    background-image: url(../images/bank.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
    display: inline-block;
    float: left;
    padding-left: 50px;
    height: 30px;
}


nav .dropdown-menu li  a.dropdown-item div.gym {
    background-image: url(../images/gym.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
    display: inline-block;
    float: left;
    padding-left: 50px;
    height: 30px;
}





.dropdown-item {
    overflow: auto;
}



nav .navbar-nav .nav-link.active {
    font-weight: 600;
    background: #1f5884;
    color: #edf6fa;
}





/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 767px) {
  nav .navbar-nav {
  background-color: #fff;
      background-clip: padding-box;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: .25rem;
  }
  .navbar-nav .nav-link {
      padding-right: 10px;
      padding-left: 10px;
  }
}


.nav-link {
    color: #1e5885;
}

.nav-link:focus, .nav-link:hover {
    background: #1f5884;
    color: #edf6fa;
}

.dropdown-item.active, .dropdown-item:active {
    background: #1f5884;
    color: #edf6fa;
}



.dropdown-item:focus, .dropdown-item:hover {
    color: #ebf1f6;
    background-color: #1f5884;
}




.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}





#container {
    background: #9bbc35;
    padding-top: 50px;
    position: relative;
    padding-bottom: 80px;
}

.embed-responsive {
  max-width: 800px;
  margin: auto;
}


#sky {

    background-image: url(../images/bg-cityscape.svg);
    background-repeat: repeat-x;
    /*background-size: contain;*/
    background-position-x: center;
    background-position-y: bottom;

}

.hills {
   height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: #a2c8d5;
      background-image: url(../images/bg-hills.svg);
    background-repeat: repeat-x;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;
}

.hills.hills-home {
  top: 99px;

}

/* ---- grid ---- */

.grid {

  margin: 0 auto; /* centered */
  max-width: 1600px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

/* 5 columns, percentage width */

.grid-item,
.grid-sizer {
  width: 20%;
}

.grid-item {
  float: left;
  height: 320px;
   margin-bottom: 20px;
/*  background: #0D8;
  border-color: hsla(0, 0%, 0%, 0.7);*/
}


.grid-item:hover {
  transform: scale(1.1); 
    transition: all .2s ease-in-out;
    z-index: 1000;
}

.grid-item a {
  text-decoration: none;
}




#fds .grid-item {

opacity: 0;

}



@keyframes fdsseq { 
  100% { 

    opacity: 1; }
}
#fds .grid-item {
  animation: fdsseq .5s forwards;
}
#fds .grid-item:nth-child(1) {
  animation-delay: .1s;
}
#fds .grid-item:nth-child(2) {
  animation-delay: .2s;
}
#fds .grid-item:nth-child(3) {
  animation-delay: .3s;
}
#fds .grid-item:nth-child(4) {
  animation-delay: .4s;
}
#fds .grid-item:nth-child(5) {
  animation-delay: .5s;
}

#fds .grid-item:nth-child(6) {
  animation-delay: .6s;
}




.moving-van{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: moveBus 9s ease-in-out forwards;
  animation-delay: 3s;
}

.moving-van2{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: -10%;
  animation: moveBus2 4s ease-in-out 8.5s forwards;

}

@keyframes moveBus{
  0% {
  left: 18%;
  }
  100% {
  left: 110%;
  }
}

@keyframes moveBus2{
  0% {
  left: -10%;
  }
  100% {
  left: 18%;
  }
}




.plane-left-image{
    position: absolute;
    margin-top: 0px;
    width: 100px;
    right: 0px;
    z-index: 10;
    bottom:  0;
}


@media only screen and (max-width: 767px) {
  .plane-left-image{
    width: 70px;
    right: -70px;
  }
}


.car-right-image {
    position: absolute;
    margin-top: -15px;
    width: 75px;
    left: -75px;
}

.car-right-image:hover {
    transform: rotate(-25deg);
transform-origin: 0% 0%;
  }



/*.moving-plane{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: 18%;
  animation: movePlane 9s ease-in-out forwards;
  animation-delay: 3s;
}

.moving-plane2{
  position: absolute;
  width: 100px;
  z-index: 10;
  left: -10%;
  animation: movePlane2 4s ease-in-out 8.5s forwards;

}*/
/*
@keyframes movePlane{
  0% {
  left: 18%;
  }
  100% {
  left: 110%;
  }
}

@keyframes movePlane2{
  0% {
  left: -10%;
  }
  100% {
  left: 18%;
  }
}
*/

.grid-inner {
      height: 230px;

}

.grid-bank {
      height: 230px;
    background-image: url(../images/bank.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;

}


.grid-gym {
      height: 230px;
    background-image: url(../images/gym.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;

}

.grid-restaurant {
      height: 230px;
    background-image: url(../images/cafe.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;

}

.grid-school {
      height: 230px;
    background-image: url(../images/school.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;

}


.grid-mobile-shop {
      height: 230px;
    background-image: url(../images/mobile-shop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;

}







#clouds{
  padding: 0;
  /*padding-bottom: 0;*/
  background: #c9dbe9;
  background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

/*Time to finalise the cloud shape*/
.cloud {
  display: none; /*temporary while building*/
  width: 200px; height: 60px;
  background: #fff;
  
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  
  position: relative; 
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute; 
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;
  
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
  left: 200px;
  
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6; /*opacity proportional to the size*/
  
  /*Speed will also be proportional to the size and opacity*/
  /*More the speed. Less the time in 's' = seconds*/
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}

.x3 {
  left: -250px; top: -200px;
  
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

.x4 {
  left: 470px; top: -250px;
  
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0.75; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}

.x5 {
  left: -150px; top: -150px;
  
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}


#road {
    background: #8d8d8d;
    background-repeat: repeat-x;
    width: 100%;
    border-top:1px solid white;
    border-bottom:1px solid white;
    position: absolute;
    bottom: 0;
    min-height: 45px;
}

#sign {
    background: url(../images/bg-sign.png);
    background-repeat: no-repeat;
    width: 200px;
    position: absolute;
    bottom: -65px;
    min-height: 100px;
    right: 75px;
    display: inline-block;
}

.sign-inner {
    padding: 8px;
    color: white;

}

.fab {
    margin-right: 8px;
}

.site-header {
  position: absolute;
    height: 100px;
    background: #5aaac65c;
    width: 100%;
    z-index: 1000;
}

.image-hotspot-plus:before {
        content: "\f055";
        font-family: FontAwesome;
}


.image-hotspot {
    position: absolute;
    font-size: 2.5em;
    height: 1.1666667em;
    width: 1.1666667em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: .7em;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: #fff;
    padding: 0;
    border: 1px solid transparent;
    z-index: 1000;
    margin: 0;
    cursor: pointer;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 30%);
    }


.image-hotspot.active.legacy-positioning, 
.image-hotspot:hover {
    transform: scale(1.2);
}


.modal-header{
  border-bottom: 0;

} 

.modal-footer {
  border-top: 0;
}




.modal-footer.mobileshop-tv-control {

  background: #8d8d8d url(../images/mobileshop/bg-mobileshop-tv-control.svg);
    background-repeat: no-repeat;
    min-height: 30px;


  
}

#downloads .inner {
  background: #108b82;
  color: white;
  font-weight: bold;
}

#downloads .inner a {
  color: white;
  text-decoration: none;
}

#downloads .col {
    display: flex;
}

#downloads.row>* {
    padding-bottom: calc(var(--bs-gutter-x) * 1);
}

/*video*/

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 767px) {
  .grid-item,
  .grid-sizer {
    width: 100% !important;
  }

  .image-hotspot {
    font-size: 2em;
  }



  .building-base-tiles {
    min-height: 20px;
  }




}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .grid-item,
  .grid-sizer {
    width: 50% !important;
  }

}



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .grid-item,
  .grid-sizer {
    width: 30% !important;
  }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

  .grid-item,
  .grid-sizer {
    width: 20% !important;
  }
}



.zoom {
  transition: transform .2s;
}

.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.05); 
  cursor: pointer;
}