.gpp_container												{ padding-bottom: 16px; line-height: 1px; }
.gpp_container:last-of-type							{ padding-bottom: 0; }
.gpp_container .gpp_title								{ font-weight: bold; font-size: 16px; line-height: 32px; border-top: 1px solid #969696; }
.gpp_box														{ position: relative; line-height: 1px; }
.gpp_box *													{ line-height: 1px; }
.gpp_box.gpp_box_25										{ width: 25%; padding: 12.5%; }
.gpp_box > div												{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; cursor: pointer; }
.gpp_box > div:hover > div:before					{ display: block; content: ""; position: absolute; z-index: 10; left: 0; top: 0; right: 0; bottom: 0; background: rgba( 0,0,0,0.5 ); }
.gpp_box > div:hover > div:after						{ display: block; content: "\f002"; position: absolute; z-index: 10; left: 0; top: 50%; right: 0; height: 30px; margin: -15px 0 0 0; line-height: 30px; text-align: center; font: 28px 'FontAwesome'; color: #ffffff; }
.gpp_box > div > div										{ position: absolute; z-index: 1; left: 2px; top: 2px; right: 2px; bottom: 2px; overflow: hidden; }
.gpp_box > div > div > picture						{ position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; }
.gpp_box > div > div > picture img					{ width: 100%; height: 100%; object-fit: cover; }
.gpp_box > div > div > div								{ position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; }
.gpp_box > div > div > div > div:nth-last-of-type(2)			{ position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 8px; background: rgba( 0,0,0,0.5 ) }
.gpp_box > div > div > div > div:nth-last-of-type(2) > div	{ font-size: 12px; font-weight: bold; color: #ffffff; line-height: 20px; }
.gpp_box > div > div > div > div:nth-last-of-type(1)			{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4px 8px; background: rgba( 0,0,0,0.5 ) }
.gpp_box > div > div > div > div:nth-last-of-type(1) > div	{ font-size: 16px; font-weight: bold; color: #ffffff; line-height: 20px; }


.gallery_container										{ margin: 0 -2px; }
.gallery_box												{ position: relative; line-height: 1px; }
.gallery_box *												{ line-height: 1px; }
.gallery_box picture										{ position: absolute; z-index: 1; left: 2px; top: 2px; right: 2px; bottom: 2px; cursor: pointer; }
.gallery_box picture img								{ width: 100%; height: 100%; object-fit: cover; }
.gallery_box picture:hover:before					{ display: block; content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: rgba( 0,0,0,0.5 ); }
.gallery_box picture:hover:after						{ display: block; content: "\f002"; position: absolute; z-index: 2; left: 0; top: 50%; right: 0; height: 30px; margin: -15px 0 0 0; line-height: 30px; text-align: center; font: 28px 'FontAwesome'; color: #ffffff; }

.gallery_box.gallery_box_16							{ width:  16.6666%; }
.gallery_box.gallery_box_33							{ width:  33.3333%; }
.gallery_box.gallery_box_100							{ width: 100%; }
.gallery_box.gallery_box_a > div > div,
.gallery_box.gallery_box_b > div > div,
.gallery_box.gallery_box_c > div > div								{ position: relative; }
.gallery_box.gallery_box_a > div > div:nth-of-type(1)			{ width:  50%; padding: 25%; }
.gallery_box.gallery_box_a > div > div:nth-of-type(2)			{ width:  50%; padding: 25%; }
.gallery_box.gallery_box_a > div > div:nth-of-type(3)			{ width: 100%; padding: 25%; }
.gallery_box.gallery_box_b > div > div:nth-of-type(1)			{ width: 100%; padding: 25%; }
.gallery_box.gallery_box_b > div > div:nth-of-type(2)			{ width:  50%; padding: 25%; }
.gallery_box.gallery_box_b > div > div:nth-of-type(3)			{ width:  50%; padding: 25%; }
.gallery_box.gallery_box_c > div > div:nth-of-type(1)			{ width: 100%; padding: 50%; }
.gallery_box.gallery_box_d > div > div:nth-of-type(1)			{ width: 100%; padding: 50%; }

.gallery_box.gallery_box_single										{ padding: 50%; }
.gallery_box.gallery_box_single > div								{ position: absolute; z-index: 1; left: 2px; top: 2px; right: 2px; bottom: 2px; cursor: pointer; }
.gallery_box.gallery_box_single > div:hover:before				{ display: block; content: ""; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: rgba( 0,0,0,0.5 ); }
.gallery_box.gallery_box_single > div:hover:after				{ display: block; content: "\f002"; position: absolute; z-index: 2; left: 0; top: 50%; right: 0; height: 30px; margin: -15px 0 0 0; line-height: 30px; text-align: center; font: 28px 'FontAwesome'; color: #ffffff; }
.gallery_box.gallery_box_single picture							{ left: 0; top: 0; right: 0; bottom: 0; }
.gallery_box.gallery_box_single picture:hover:before,
.gallery_box.gallery_box_single picture:hover:after			{ display: none; }
.gallery_box.gallery_box_single > div > div > div				{ position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; }
.gallery_box.gallery_box_single > div > div > div > div:nth-last-of-type(2)			{ position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 8px; background: rgba( 0,0,0,0.5 ) }
.gallery_box.gallery_box_single > div > div > div > div:nth-last-of-type(2) > div	{ font-size: 12px; font-weight: bold; color: #ffffff; line-height: 20px; }
.gallery_box.gallery_box_single > div > div > div > div:nth-last-of-type(1)			{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4px 8px; background: rgba( 0,0,0,0.5 ) }
.gallery_box.gallery_box_single > div > div > div > div:nth-last-of-type(1) > div	{ font-size: 16px; font-weight: bold; color: #ffffff; line-height: 20px; }


@media screen and (min-width: 641px) and (max-width: 959px){
.gpp_box.gpp_box_25										{ width: 50%; padding: 25%; }

.gallery_container > .gallery_box_25				{ width: 50%; }
.gallery_container > .gallery_box_33				{ width: 50%; }
.gallery_container > .gallery_box_16				{ width: 25%; }
}
@media screen and (max-width: 640px){
.gpp_box.gpp_box_25										{ width: 100%; padding: 50%; }

.gallery_container > .gallery_box_50				{ width: 100%; }
.gallery_container > .gallery_box_33				{ width: 100%; }
.gallery_container > .gallery_box_16				{ width: 50%; }
}