@font-face {font-family:"Arvo-Regular";src: url("Arvo-Regular.ttf")}
@font-face {font-family:"Arvo-Bold";src: url("Arvo-Bold.ttf")}

body  {background-image: url(fond_boos3.jpg)}
.gallery-items { font-size: 0; }

.gallery-item {             /* make changes here */
  display: inline-block;
  vertical-align: top;
  -webkit-transition: height 500ms ease;
  -o-transition: height 500ms ease;
  transition: height 500ms ease;
}

a:link, .lk  {text-decoration: none;
         text-align: center; 
         font-family: "Arvo-Regular";
         color: black;}

.thum   {
width: 110px;
height: 100px;
display:inline-block;
	border:none;
	box-shadow:0 3px 6px rgba(0,0,0,0.5);
	border-radius:4px;
	margin: 6px 6px 3px; /* 3px = margin under thumbnail */
	position:relative;
	text-decoration: none;	

}

.big  {max-width:75%;height:auto;
	border:none;
-webkit-box-shadow: 10px 12px 43px 3px rgba(77,74,77,1);
-moz-box-shadow: 10px 12px 43px 3px rgba(77,74,77,1);
box-shadow: 10px 12px 43px 3px rgba(77,74,77,1);
	border-radius:40px;
	margin: 6px 6px 3px; /* 3px = margin under thumbnail */
	position:relative;
	text-decoration: none;
	}

.title {
	background-color: #303030;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /* content: attr(title);   css for text under images */
    display: inline-block;
    font-size: 10px;
    max-width: 100px;
    padding: 2px 10px;
    position: relative;
    text-align: center;

}

.gallery-expander {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 500ms ease;
  -o-transition: max-height 500ms ease;
  transition: max-height 500ms ease;
}

.gallery-contents { position: relative; }

.gallery-contents:after {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;
  width: 0;
  height: 0;
  content: '';
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  -webkit-transition: border-bottom-width 500ms ease;
  -o-transition: border-bottom-width 500ms ease;
  transition: border-bottom-width 500ms ease;
}

.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.gallery-item {
  text-align: left;
  margin: 0 10px;
  padding: 10px 0;
}


.gallery-item .thumbnail > img {
  position: absolute;
  margin-top: 5px;
  max-width: 55px;

}

.gallery-item .title {
  text-align: center;
  margin-top: 0px;
  padding-bottom: 3px; /* padding for title */
}

.gallery-contents:after { border-bottom-color: #FFDD79; }

.gallery-expander { background: #FFDD79; }

.gallery-expander-contents {
  margin: 0 auto;
  width: 1000px;
  padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {

.gallery-expander-contents { width: 100%;}
}

.gallery-expander-contents:after {
  clear: both;
  display: table;
  content: '';
}

.gallery-expander-contents > div.col {
  float: left;

}
@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {

.gallery-expander-contents > div.col {
  float: none;
  padding: 25px 20px 0;
  width: auto;
}
}

.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {

.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}

.gallery-expander-contents div.close {
  position: absolute;
  top: 10px;
  right: 100px;
  font-size: 50pt;
}

.gallery-expander-contents div.title {
  font-weight: 500;
  color: black;
}

.gallery-expander-contents div.contents {
  margin-top: 10px;
  padding: 10px 0;
}

.gallery-expander-contents div.image > img {
  width: 100%;
  display: block;
}