/*
//  xlightbox by xers Nov 24, 2017
//  image & text class="xlightbox"
//  message box class="xlightbox-msg"
*/

a.xlightbox,
p.xlightbox,
div.xlightbox,
span.xlightbox {
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
}

a.xlightbox-txt {
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.xlightbox-msg + div {
  display: none !important;
}

#xlightbox-msg,
#xlightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background-color: rgba(0, 123, 194, 0.85);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  z-index: 9996;
}

#xlightbox-msg > div,
#xlightbox > img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: auto;
  z-index: 9998;
}

#xlightbox-msg > div {
  padding: 2em;
  background-color: #fff;
}

.closeAll {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;
}

.closeImg,
.closeMsg {
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  z-index: 9999;
}

.closeImg {
  position: fixed;
  top: 20px;
  right: 20px;
}

.closeMsg {
  position: absolute;
  top: -40px;
  right: 0;
}

.closeImg:before,
.closeMsg:before {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: #fff;
  /* background: #000; */
  position: absolute;
  left: 15px;
  top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.closeImg:after,
.closeMsg:after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: #fff;
  /* background: #000; */
  position: absolute;
  left: 15px;
  top: -5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.closeImg:hover:before,
.closeMsg:hover:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.closeImg:hover:after,
.closeMsg:hover:after  {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

@media screen and (orientation: portrait) {
  #xlightbox-img img,
  #xlightbox img {
    width: 98%;
    height: auto;
  }

  #xlightbox-msg > div {
    width: 98%;
    height: auto;
    padding: 15px;
  }

  #xlightbox-msg > div img {
    width: 100%;
    height: auto;
    margin-right: 10px;
  }

  .closeImg {
    position: fixed;
    top: 1%;
    right: 1%;
  }
}

@media screen and (orientation: landscape) {
  #xlightbox-msg > div,
  #xlightbox img {
    width: auto;
    max-height: 80%;
  }
}

@media screen and (max-width: 1680px) {
  #xlightbox-msg > div {
    padding: 30px;
  }
}

@media screen and (max-width: 1400px) {
  #xlightbox-msg > div {
    padding: 20px;
  }
}

/* lower 1024px = 64em res, Desktop Laptop and iPad pro */
@media screen and (max-width: 1024px), (max-device-width: 1024px) and (orientation: landscape) {
  #xlightbox-msg > div {
    width: 50% !important;
    height: auto;
  }
}

@media screen and (max-width: 768px),
(max-device-width: 768px) {
  #xlightbox-msg > div {
    width: 65% !important;
    height: auto;
  }
  #xlightbox-msg,
  #xlightbox {
    background-color: rgba(0, 0, 0, 0.85);
  }
  .closeImg:before,
  .closeImg:after,
  .closeMsg:before,
  .closeMsg:after {
    background: #fff;
    /* background: #000; */
  }
}

@media screen and (max-width: 667px),
(max-device-width: 667px) {
	#xlightbox-msg {
		width: 100% !important;
	}
  #xlightbox-msg > div {
    width: 98% !important;
    height: auto;
    margin: 0 0 15px;
  }

  #xlightbox-msg > div img {
    width: 100%;
    height: auto;
    margin: 0 0 15px;
  }
}

/* end xlightbox