.stpauls {
  max-width:1110px;
  height:622px;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  padding: 0;
}
.stpaulsOverlays {
  max-width:1100px;
  position: relative;
  padding: 0;
}


.interactive-bg {
  width:1100px;
  height:619px;
  background-image: url("http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/map/Protected_views_map.png");
  background-size: contain;
  z-index:-1;
}

.splash {
  width:1100px;
  height:622px;
  background-color: #1E426F;
}

.splashBG {
  width:1154px;
  height:550px;
  background-image: url("http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/map/StPauls_home_2x.png");
  background-size: contain;
  margin-top: 221px;
  margin-left: 70px;
  position: absolute;
}

.splash2 {
  z-index:1000;
  width:1100px;
  height:619px;
  background-color: #1E426F;
  opacity: 0.9;
  display:hidden;
}

.showdiv-kenwood, .showdiv-parliamenthill, .showdiv-primrosehill, .showdiv-richmondpark, .showdiv-westminsterpier, .showdiv-alexandrapalace, .showdiv-greenwichpark, .showdiv-blackheathpoint { 
  position:relative; 
  display: block;
  z-index: 2;
  cursor: pointer;
}

.hidediv-kenwood, .hidediv-parliamenthill, .hidediv-primrosehill, .hidediv-richmondpark, .hidediv-westminsterpier, .hidediv-alexandrapalace, .hidediv-greenwichpark, .hidediv-blackheathpoint { 
  position:absolute; 
  display: block;
  z-index: 1;
  cursor: pointer;
}

.showdiv-kenwood, .showdiv-parliamenthill, .showdiv-primrosehill, .showdiv-richmondpark, .showdiv-westminsterpier, .showdiv-alexandrapalace, .showdiv-greenwichpark, .showdiv-blackheathpoint, .hidediv-kenwood, .hidediv-parliamenthill, .hidediv-primrosehill, .hidediv-richmondpark, .hidediv-westminsterpier, .hidediv-alexandrapalace, .hidediv-greenwichpark, .hidediv-blackheathpoint { 
  height: 619px; 
  left: 0; 
  top: 0; 
  width: 1100px;
}

.showPhoto {
  position: absolute;
  
}


.labelPhoto {
    position:fixed; 
    display: none;
    height: 50px; left: 20px; top: 521px; width: 123px;
    background-color: #3DCDDC;
    color: #fff;
    font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
    font-size: 24px;
    font-weight: 200;
    padding: 5px 10px;
    line-height: 24px;
}

.hidediv-kenwood { 
  height: 40px; left: 20px; top: 25px; width: 150px;
}

.hidediv-parliamenthill { 
  height: 40px; left: 20px; top: 74px; width: 150px;
}

.hidediv-primrosehill { 
  height: 40px; left: 20px; top: 122px; width: 150px;
}

.hidediv-richmondpark { 
  height: 40px; left: 20px; top: 340px; width: 150px;
}

.hidediv-westminsterpier { 
  height: 40px; left: 20px; top: 390px; width: 150px;
}

.hidediv-alexandrapalace { 
  height: 50px; left: 335px; top: 20px; width: 150px;
}

.hidediv-greenwichpark { 
  height: 40px; left: 945px; top: 312px; width: 150px;
}

.hidediv-blackheathpoint{ 
  height: 40px; left: 945px; top: 358px; width: 150px;
}

.stpaulsCredit {
    font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
    font-size: 14px;
    font-weight: 200;
    padding-top:10px;
}

.distPhotoOverlay {
  margin-top:-68px;
  margin-left:20px;
  z-index: 3;
  display:none;
  width:230px;
  height: 38px;
  position: relative;
  float:left;
  background-color: #fff;
  color: #3e769b;
  font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
  font-size: 15px;
  color: #1E426F;
  font-weight: 300;
  letter-spacing: 0.03em;
  padding: 8px 8px 3px 8px;
}

.closePhotoOverlay {
  margin-top:-603px;
  z-index: 3;
  display:none;
  width:20px;
  height: 20px;
  position: relative;
  float:right;
  margin-right: 20px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/close.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.labelPhotoOverlay {
  margin-top:-600px;
  margin-left:20px;
  z-index: 3;
  display:none;
  width:200px;
  height: 50px;
  position: relative;
  float:left;
}

.splashLogoOverlay {
  margin-top:-583px;
  margin-left:35px;
  position: relative;
  float:left;
}

.splashLogoOverlayDesktop {
  width:382px;
  height: 82px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/Logo_desktop.png) no-repeat;
  background-size: contain;
}

.splashLogoOverlayMobile {
  width:300px;
  height: 63px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/Logo_mobile.png) no-repeat;
  background-size: contain;
}

.splashTextOverlay {
  margin-top:-490px;
  margin-left:8px;
  position: relative;
  float:left;
  color: #fff;
  font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
  font-size: 15px;
  font-weight: 200;
  padding: 5px 10px;
  line-height: 148%;
  letter-spacing: 0.03em;
  width:340px;
  text-align: center;
}

.splashBeginOverlay {
  margin-top:-82px;
  margin-left:105px;
  position: relative;
  float:left;
  color: #fff;
  font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 10px 10px;
  line-height: 24px;
  width:154px;
  height:42px;
  border-radius: 25px;
  background: #90d3fe;
  text-align: center;
}
.splashBeginOverlay:hover {
  background: #3e769b;
  cursor: pointer;
}

.splash2Overlay {
  background-color: #fff;
  text-align: center;
  margin-top: -418px;
  margin-left: 20px;
  position: relative;
  float: left;
  width: 320px;
  height: 221px;
  font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
  font-size: 15px;
  color: #1E426F;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 148%;
  display: hidden;
}

.leftArrow {
  margin-top:-60px;
  margin-left:20px;
  position: relative;
  float:left;
  width:40px;
  height:40px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/left_arrow.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.rightArrow {
  margin-top:-60px;
  margin-right:20px;
  position: relative;
  float:right;
  width:40px;
  height:40px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/right_arrow.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.splash2OverlayClose {
  float:right;
  margin:17px;
  width:15px;
  height:15px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/close_grey-24.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.splash2OverlayEye {
  margin-top: 53px;
  margin-bottom: 23px;
  margin-left: 129px;
  width:60px;
  height:60px;
  background: url(http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/icons/eye_icon.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.splash2OverlayText {
  margin-bottom: 57px;
}

@media (max-width: 320px) {

.splashBeginOverlay {
  margin-left:78px;
}

.splashBG {
  margin-top:246px;
  margin-left:74px;
  height:500px;
}

.splashLogoOverlay {
  margin-left:6px;
}

.splashTextOverlay {
  margin-left: -6px;
  width: 314px;
}

.splash2Overlay {
  width: 260px;
  margin-top: -370px;
}

.splash2OverlayEye {
  margin-left:96px;
}

}

@media (min-width: 640px) {

.splashBG {
  width:1154px;
  height:671px;
  background-image: url("http://i.cdn.turner.com/cnn/.element/interactive/2016/stpauls/map/StPauls_home_2x.png");
  background-size: contain;
  margin-top: 154px;
  margin-left: 0;
  position: absolute;
}

.showPhoto {
  position: absolute;
  left: 0;
}

.splashLogoOverlay {
  margin-left:40px;
}

.splashTextOverlay {
  text-align: left;
  margin-top:-472px;
  margin-left:30px;
}
.splashBeginOverlay {
  margin-left:40px;
  margin-top:-82px;
}

.splash2Overlay {
  margin-top: -418px;
  margin-left: 401px;
}

.leftArrow {
  display: none;
}

.rightArrow {
  display: none;
}

}