.lightbox-nav {
  position: relative;
  margin-bottom: 0px; /* the font-size of .btn-xs */
  height: auto;
  text-align: center;
  font-size: 0; /* prevent the otherwise inherited font-size and line-height from adding extra space to the bottom of this div */
}

.lightbox-nav .btn-group {
  vertical-align: top;
}

.lightbox-nav .close {
  /* absolutely position this in order to center the nav buttons */
  position: absolute;
  top: 0;
  right: 0;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    color: transparent;
    height: 20px;
    position: absolute;
    right: 15px !important;
    top: 5px !important;
    width: 20px;
    background-image: url(../modules/frontend/images/map/close1.svg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 5px;
    margin: 0;
    opacity: 1;
}
button.close:hover {
    background-image: url(../modules/frontend/images/map/close2.svg) !important;
    opacity: 1;
}

.lightbox-image-container {
  position: relative;
  text-align: center; /* center the image */
}
.lightbox-image-container > img {
    border-radius: 0px 0px 5px 5px;
}
/* the caption overlays the top left corner of the image */
.lightbox-image-caption {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0.5em 0.9em; /* the left and right margins are offset by 0.4em for the span box-shadow */
  color: #000;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  text-shadow: 0.1em 0.1em 0.2em rgba(255, 255, 255, 0.5);
}

.lightbox-image-caption span {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  background-color: rgba(255, 255, 255, 0.75);
  /* pad the left and right of each line of text */
  box-shadow: 0.4em 0 0 rgba(255, 255, 255, 0.75),
    -0.4em 0 0 rgba(255, 255, 255, 0.75);
}

.dialogTitle {
    font-size: 20px;
    text-transform: uppercase;
    padding: 0px 30px !important
    font-weight: normal;
    color: #009CA6;
    text-align: left;
}


.leftbuttoncontainer {
    position: absolute;
    width: 20%;
    height: 100%;
	left: 0;
    background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00ffffff',GradientType=1 );
    opacity: 0;
    transition: .15s all linear;
    border-radius: 0px 0px 5px 5px;
}
.leftbuttoncontainer:hover {
    opacity: 1;
	cursor: pointer;
}
.leftbuttoncontainer > a.btn.btn-xs.btn-default {
    opacity: 1;
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 30px;
    top: 50%;
    margin: -15px 0 0 0;
    display: block;
    width: 50%;
    position: relative;
    float: left;
}

.rightbuttoncontainer {
    position: absolute;
    width: 20%;
    height: 100%;
	right: 0;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
    opacity: 0;
    transition: .15s all linear;
    border-radius: 0px 0px 5px 5px;
}
.rightbuttoncontainer:hover {
    opacity: 1;
	cursor: pointer;
}
.rightbuttoncontainer > a.btn.btn-xs.btn-default {
    opacity: 1;
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 30px;
    top: 50%;
    margin: -15px 0 0 0;
    display: block;
    width: 50%;
    position: relative;
    float: right;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(51,51,51,0.6);
}