body  {
		background-color :#003366;
		background-repeat :no-repeat;
		margin-left : 0px;
		margin-right : 0px;
		margin-top : 0px;
		margin-bottom : 0px;
		margin-height : 0px;
		margin-width : 0px;
		background-image : url();
		background-position : 0% 0%;
		background-attachment : fixed;
		}
		
		.gen  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : normal;
		color : #666666;
		text-align : justify;
		line-height : 18px;
		}
		
		.left  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : normal;
		color : #666666;
		text-align : left;
		line-height : 18px;
		}

		.lefthead  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 16px;
		font-weight : bold;
		color : #666666;
		text-align : left;
		line-height : 18px;
		}

		.dirhead  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 18px;
		font-weight : bold;
		color : #000000;
		text-align : left;
		line-height : 16px;
		}
				
		.midhead  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 16px;
		font-weight : bold;
		color : #666666;
		text-align : center;
		line-height : 18px;
		}
		
		.mid  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : normal;
		color : #000000;
		text-align : center;
		line-height : 18px;
		}

		.right  {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : normal;
		color : #666666;
		text-align : right;
		line-height : 18px;
		}
		
		.copy {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : normal;
		color : #009999;
		text-align : center;
		line-height : 18px;
		}

		.tips {
		font-family :Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		font-weight : bold;
		color : #000000;
		text-align : center;
		line-height : 18px;
		}

		a:link {
		font-family:Helvetica, Verdana, Sans Serif; 
		font-size : 12px; 
		color: #006699; 
		text-decoration: none; 
		font-weight : normal;
		text-align : left;
		line-height : 18px;
		}
		
		a:hover {
		font-family:Helvetica, Verdana, Sans Serif;
		font-size : 12px;		
		color: #000000;
		text-decoration:none; 
		font-weight : normal;
		text-align :left;
		line-height : 18px;
		}	
		
		a:visited {
		font-family:Helvetica, Verdana, Sans Serif;
		font-size : 12px;
		color: #003366;
		text-decoration:none;
		font-weight : normal;
		text-align : left;
		line-height : 18px;
		}

/* GALLERY ITEMS */
.fg-gallery:after {
    content: "";
    display: block;
    clear: both;
}
.gallery-items {
    cursor: pointer;
    float: left;
    overflow: hidden;
    height: 220px;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 2%;
}
/* GALLERY COLUMNS */
.cols-2 .gallery-items {
    width: 49%;
}
.cols-2 .gallery-items:nth-child(2n) {
    margin-right: 0;
}

.cols-3 .gallery-items {
    width: calc(96% / 3);
}
.cols-3 .gallery-items:nth-child(3n) {
    margin-right: 0;
}

.cols-4 .gallery-items {
    width: calc(94% / 4);
}
.cols-4 .gallery-items:nth-child(4n) {
    margin-right: 0;
}

.cols-5 .gallery-items {
    width: calc(92% / 5);
}
.cols-5 .gallery-items:nth-child(5n) {
    margin-right: 0;
}

.cols-6 .gallery-items {
    width: calc(90% / 6);
}
.cols-6 .gallery-items:nth-child(6n) {
    margin-right: 0;
}

.body-cover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.body-cover.active  {
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.7);
}

.body-cover.active img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    opacity: 0;
    visibility: hidden;
    -webkit-animation: scale .3s .3s ease forwards;
            animation: scale .3s .3s ease forwards;
    box-shadow: 0 0 180px 0 rgb(24, 24, 24);
    border-radius: 5px;
}
@-webkit-keyframes scale {
    to { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1) }
}
@keyframes scale {
    to { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1) }
}

/* arrows */
.gallery-arrow {
    position: fixed;
    top: 47%;
    width: 30px;
    height: 30px;
    z-index: 9999;
    cursor: pointer;
}
.gallery-arrow > svg {
    fill: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: scale(1);
            transform: scale(1);
}
.gallery-arrow:active svg {
    -webkit-transition-duration: .0s;
            transition-duration: .0s;
    -webkit-transform: scale(.9);
            transform: scale(.9);
}
.next-btn {
    right: 25px;
}
.prev-btn {
    left: 25px;
}
/* close button */
.close-btn {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
    z-index: 9999;
    cursor: pointer;
}
.close-btn svg {
    fill: #fff;
    width: 15px;
    height: 15px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
}
.close-btn:hover svg {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}