body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 12px;
  color: #000000;
  background-color: #FFF;
}

.page {
  position: relative;
}

a {
  transition: all 50ms linear;
}

/*********************************************************************
** Header
*********************************************************************/

.header {
  margin: 0;
  height: 65px;
  display: block;
  position: relative;
/* border: 0 solid #ff0000; */
}

.header > .logo-l {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: 77px;
  height: 82px;
  background: url('images/logo-l.png');
}

.header > .logo-r {
  position: absolute;
  top: 10px;
  left: 87px;
  display: block;
  width: 173px;
  height: 52px;
  background: url('images/logo-r.png');
}

.slogan {
  position: absolute;
  left: 270px;
  top: 40px;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 16px;
  white-space: nowrap;
}

/*********************************************************************
** Menu
*********************************************************************/

.menu {
  margin-top: -14px;
  font-size: 160%;
  overflow: auto;
}

.menu > ul {
  white-space: nowrap;
  list-style-type: none;
  overflow: hidden;
  padding: 0 0 0 70px; 
  margin: 10px 0 0 0;
  background-color: #ffb867;
}

.menu > ul > li {
  float: left;
  display: block;
  border-right: 1px solid #bbb;
}

.menu > ul > li:last-child {
  border-right: none;
}

.menu > ul > li a {
  display: block;
  color: #101010;
  text-align: center; 
  text-decoration: none; 
  padding: 6px 20px;
}

.menu > ul > li a:hover {
  background-color: #9eaac1;
}

.active {
  font-weight: bold;
}

/*********************************************************************
** Main text
*********************************************************************/

.main {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 130%;
  margin: 20px 20px 10px 20px;
}

.centered {
  text-align: center; 
}

/*********************************************************************
** Navigation
*********************************************************************/

.nav-container {
  display: flex;
  justify-content: center;
  padding: 0 0 15px 0;
}

.nav-float {
  float: left;
  height: 32px;
  position: relative;
  line-height: 32px;
  vertical-align: middle;
  padding: 0 4px;
 
}

.nav-spc {
  position: absolute;
  right: 0;
  padding: 0 20px;
  line-height: 32px;
  vertical-align: middle;
}

ul.nav {
  margin: 0;
  width: 32px;
  padding-left: 0;
}

ul.nav  li {
  margin: 0;
  list-style: none;
  top: 0;
}

ul.nav  li, ul.nav  a {
  height: 32px;
  display: block;
}

.first {
  background: url('images/nav_icons.png') 0 0;
}

.prev {
  background: url('images/nav_icons.png') -33px 0;
}

.next {
  background: url('images/nav_icons.png') -66px 0;
}

.last {
  background: url('images/nav_icons.png') -99px 0;
}

.first-disabled {
  background: url('images/nav_icons.png') 0 -66px;
}

.prev-disabled {
  background: url('images/nav_icons.png') -33px -66px;
}

.next-disabled {
  background: url('images/nav_icons.png') -66px -66px;
}

.last-disabled {
  background: url('images/nav_icons.png') -99px -66px;
}

li.first a:hover {
  background: url('images/nav_icons.png') 0 -33px;
  transition: none;
}

li.prev a:hover {
  background: url('images/nav_icons.png') -33px -33px;
  transition: none;
}

li.next a:hover {
  background: url('images/nav_icons.png') -66px -33px;
  transition: none;
}

li.last a:hover {
  background: url('images/nav_icons.png') -99px -33px;
  transition: none;
}

/*********************************************************************
** Footer
*********************************************************************/

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  border-top: solid 3px #ffb867;
  background-color: transparent;
  z-index: -1;
}

.footer p {
  text-align: center;
}  

/*********************************************************************
** Gallery on main page
*********************************************************************/

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.column {
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}

/*********************************************************************
** Gallery
*********************************************************************/

.responsive {
  box-sizing: border-box;
  padding: 0 6px; 
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 900px) {
  .responsive {
    width: 33.33332%;
  }
}

@media only screen and (max-width: 650px) {
  .responsive {
    width: 49.99999%;
  }
}

@media only screen and (max-width: 400px) {
  .responsive {
    width: 100%;
  }
}

div.gallery {
  margin: 3px;
}

div.gallery img:hover {
  -webkit-transform: scale(1.03, 1.03);
  -moz-transform: scale(1.03, 1.03);
  -ms-transform: scale(1.03, 1.03);
  -o-transform: scale(1.03, 1.03);
  transform: scale(1.03, 1.03);
}

div.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 5px 0 25px 0;
  text-align: center;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*********************************************************************
** Detail Slideshow
*********************************************************************/

.modal{
  background: #3A3A3A;
  background: rgba(0, 0, 0, .8);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal-close {
  font-size: 45px;
  line-height: 60px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -20%);
  z-index: 100;
}

.modal-close a {
  color: #3A3A3A;
  padding: 5px 20px;
}

.modal-close a:hover {
  color: #ffb867;
}

.modal-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: .25em; 
  overflow: hidden;
  text-align: center;
  width: 90%;
  z-index: 103;
}

.modal-int {
  position: relative;
  background: #fff;
  padding: 10px 10px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 90%; 
}

.modal-int img {
  max-width: 90%;
  max-height: 100%;
  vertical-align: middle;
}

.modal-int p {
  margin: 10px 0 5px 0;
  text-align: center;
  color: Black;
  font-size: 18px;
  font-family: 'Poiret One';
}

* .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.modal-body > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%; 
  height: 26px; 
  padding: 0 31px;
  z-index: 200;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.modal-body > .arrows a {
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 3px -3px 0 1px #3A3A3A;
  -moz-transition: box-shadow 50ms, margin 50ms;
  -o-transition: box-shadow 50ms, margin 50ms;
  -webkit-transition: box-shadow 50ms, margin 50ms;
  transition: box-shadow 50ms, margin 50ms;
}
.modal-body > .arrows a:hover {
  box-shadow: inset 3px -3px 0 2px #ffb867;
}
.modal-body > .arrows a:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.modal-body > .arrows > .arrow_left {
  position: absolute;
  display: block;
  left: 55px;
  top: -18px;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.modal-body > .arrows > .arrow_right {
  position: absolute;
  display: block;
  right: 55px;
  top: 18px;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.thumbnail-container {
  display: block;
  max-width: 95%;
  margin: 0 auto;
  text-align: center;
}

.thumbnail-container a {
  text-decoration: none;
}

.thumbnail {
  width: 180px; 
  height: auto;
  position: relative;
  margin: 3px;
  border-radius: 5px;
}

.thumbnail:hover {
  -webkit-transform: scale(1.03, 1.03);
  -moz-transform: scale(1.03, 1.03);
  -ms-transform: scale(1.03, 1.03);
  -o-transform: scale(1.03, 1.03);
  transform: scale(1.03, 1.03);
}