/* CSS Document */

body, html {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:url(../img/bg.jpg) no-repeat center center;
  background-size:cover;
  font-family: 'Roboto';
  font-weight: 300;
}

/* ############################################################## */
/* ############################ PURE CSS Lightbox ############### */
/* ############################################################## */

#ud_gallery {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  witdth-max: 1920px;
  height: 80%;
  background: #222222;
  padding: 10px;
  float: left;
  justify-content: space-between;
  overflow: scroll;
  border-radius: 10px;
 }
.h1 {
  font-weight: 400;
}

.spacer1 {
  width: 100%;
  height: 1px;
  background-color: #4294ff;
  margin-bottom: 1px;
}
.spacer2 {
  width: 100%;
  height: 1px;
  background-color: #1ddb00;
  margin-bottom: 1px;
}
.spacer3 {
  width: 100%;
  height: 1px;
  background-color: #ffc21a;
  margin-bottom: 1px;
}
.spacer4 {
  width: 100%;
  height: 1px;
  background-color: #fa9600;
  margin-bottom: 1px;
}
.spacer5 {
  width: 100%;
  height: 2px;
  background-color: #fa0000;
}

 .ud_text {
   text-align: justify;
   color: #fff;
 }

 #ud_gallery .ud_img {
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width: auto;
   height: 160px;
   float: left;
   margin: 0 10px 10px 0;
   transition: all 300ms;
 }

 #ud_gallery .ud_img:hover {
   opacity: 0.6;
 }

 #ud_gallery .ud_img:last-child {
   margin: 0 0 0 0;
 }

 #ud_gallery .ud_img a img {
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width: auto;
   height: 160px;
   vertical-align: bottom;
 }

 .ud_img_big {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 95%;
   height: auto;
   max-width: 1700px;
   transform: translate(-50%,-50%) scale(0,0);
   background: #333333;
   padding: 10px;
   opacity: 0;
   transition: all 300ms ease-in-out;
 }

 .ud_ov {
   margin: 0;
   padding: 0;
   text-align: center;
   text-decoration: none;
   color: #fff;
   vertical-align: baseline;
   opacity: 0.6;
 }

 .ud_img_big img {
   width: 100%;
   height: auto;
   max-width: 1680px;
   max-height: 95%;
 }

 .ud_img_big nav {
   width: 100%;
   color: #fff;
 }

 nav p {
   float: left;
   margin: 0 0 13px 0;
   padding: 0;
 }

 nav a {
   float: right;
   margin: 0;
   padding: 0;
   display: inline-block;
   text-decoration: none;
   color: #fff;
 }

 .ud_img_big:target {
   opacity: 1;
   transform: translate(-50%,-50%) scale(1,1);
 }