@charset "utf-8";
/* CSS Document */


.style_img {
    position: relative !important;
    overflow: hidden;
    width: 85% !important;
    margin: 0 auto !important;
}

.modal-1__open-input,
#modal-1__close,
.modal-2__open-input,
#modal-2__close,
.modal-3__open-input,
#modal-3__close,
.modal-4__open-input,
#modal-4__close,
.modal-2_1__open-input,
#modal-2_1__close,
.modal-2_2__open-input,
#modal-2_2__close,
.modal-2_3__open-input,
#modal-2_3__close,
.modal-2_4__open-input,
#modal-2_4__close,
.modal-3_1__open-input,
#modal-3_1__close,
.modal-3_2__open-input,
#modal-3_2__close,
.modal-3_3__open-input,
#modal-3_3__close,
.modal-3_4__open-input,
#modal-3_4__close,
.modal-4_1__open-input,
#modal-4_1__close,
.modal-4_2__open-input,
#modal-4_2__close,
.modal-4_3__open-input,
#modal-4_3__close,
.modal-4_4__open-input,
#modal-4_4__close

{
    display: none !important;
}

.modal-1__open-label,
.modal-2__open-label, 
.modal-3__open-label,
.modal-4__open-label,
.modal-2_1__open-label,
.modal-2_2__open-label, 
.modal-2_3__open-label,
.modal-2_4__open-label,
.modal-3_1__open-label,
.modal-3_2__open-label, 
.modal-3_3__open-label,
.modal-3_4__open-label,
.modal-4_1__open-label,
.modal-4_2__open-label, 
.modal-4_3__open-label,
.modal-4_4__open-label
{
    cursor: pointer;
	display: block;
	position: absolute;
	top;12%;
	right: 12%;
	width: 24%;
	transition: opacity 0.3s ease;
}

.modal-1__open-label:hover,
.modal-2__open-label:hover,
.modal-3__open-label:hover,
.modal-4__open-label:hover, 
.modal-2_1__open-label:hover,
.modal-2_2__open-label:hover,
.modal-2_3__open-label:hover,
.modal-2_4__open-label:hover, 
.modal-3_1__open-label:hover,
.modal-3_2__open-label:hover,
.modal-3_3__open-label:hover,
.modal-3_4__open-label:hover, 
.modal-4_1__open-label:hover,
.modal-4_2__open-label:hover,
.modal-4_3__open-label:hover,
.modal-4_4__open-label:hover
{
    opacity: 0.8;
}

.modal-1,
.modal-2,
.modal-3,
.modal-4,
.modal-2_1,
.modal-2_2,
.modal-2_3,
.modal-2_4,
.modal-3_1,
.modal-3_2,
.modal-3_3,
.modal-3_4,
.modal-4_1,
.modal-4_2,
.modal-4_3,
.modal-4_4
{
	display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    box-sizing: border-box;
}

.modal-1__open-input:checked + label + input + .modal-1,
.modal-2__open-input:checked + label + input + .modal-2,
.modal-3__open-input:checked + label + input + .modal-3,
.modal-4__open-input:checked + label + input + .modal-4,
.modal-2_1__open-input:checked + label + input + .modal-2_1,
.modal-2_2__open-input:checked + label + input + .modal-2_2,
.modal-2_3__open-input:checked + label + input + .modal-2_3,
.modal-2_4__open-input:checked + label + input + .modal-2_4,
.modal-3_1__open-input:checked + label + input + .modal-3_1,
.modal-3_2__open-input:checked + label + input + .modal-3_2,
.modal-3_3__open-input:checked + label + input + .modal-3_3,
.modal-3_4__open-input:checked + label + input + .modal-3_4,
.modal-4_1__open-input:checked + label + input + .modal-4_1,
.modal-4_2__open-input:checked + label + input + .modal-4_2,
.modal-4_3__open-input:checked + label + input + .modal-4_3,
.modal-4_4__open-input:checked + label + input + .modal-4_4
{
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

.modal-1__content-wrap,
.modal-2__content-wrap,
.modal-3__content-wrap,
.modal-4__content-wrap,
.modal-2_1__content-wrap,
.modal-2_2__content-wrap,
.modal-2_3__content-wrap,
.modal-2_4__content-wrap,
.modal-3_1__content-wrap,
.modal-3_2__content-wrap,
.modal-3_3__content-wrap,
.modal-3_4__content-wrap,
.modal-4_1__content-wrap,
.modal-4_2__content-wrap,
.modal-4_3__content-wrap,
.modal-4_4__content-wrap
{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 35px 15px 15px;
    box-sizing: border-box;
    position: relative;
    z-index: 12;
}

.modal-1__close-label,
.modal-2__close-label,
.modal-3__close-label,
.modal-4__close-label,
.modal-2_1__close-label,
.modal-2_2__close-label,
.modal-2_3__close-label,
.modal-2_4__close-label,
.modal-3_1__close-label,
.modal-3_2__close-label,
.modal-3_3__close-label,
.modal-3_4__close-label,
.modal-4_1__close-label,
.modal-4_2__close-label,
.modal-4_3__close-label,
.modal-4_4__close-label
{
	position: absolute;
	top: 5%;
    right: 5%;
    color: #333333;
    text-align: center;
    font-size: 25px;
	z-index: 13;
}

.modal-1__content,
.modal-2__content,
.modal-3__content,
.modal-4__content,
.modal-2_1__content,
.modal-2_2__content,
.modal-2_3__content,
.modal-2_4__content,
.modal-3_1__content,
.modal-3_2__content,
.modal-3_3__content,
.modal-3_4__content,
.modal-4_1__content,
.modal-4_2__content,
.modal-4_3__content,
.modal-4_4__content
{
	width: 100%;
}

.modal-1__background,
.modal-2__background,
.modal-3__background,
.modal-4__background,
.modal-2_1__background,
.modal-2_2__background,
.modal-2_3__background,
.modal-2_4__background,
.modal-3_1__background,
.modal-3_2__background,
.modal-3_3__background,
.modal-3_4__background,
.modal-4_1__background,
.modal-4_2__background,
.modal-4_3__background,
.modal-4_4__background
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	background: transparent;
    z-index: 11;
	cursor: pointer;
}

.modal-1__content .style_temp img,
.modal-2__content .style_temp img,
.modal-3__content .style_temp img,
.modal-4__content .style_temp img,
.modal-2_1__content .style_temp img,
.modal-2_2__content .style_temp img,
.modal-2_3__content .style_temp img,
.modal-2_4__content .style_temp img,
.modal-3_1__content .style_temp img,
.modal-3_2__content .style_temp img,
.modal-3_3__content .style_temp img,
.modal-3_4__content .style_temp img,
.modal-4_1__content .style_temp img,
.modal-4_2__content .style_temp img,
.modal-4_3__content .style_temp img,
.modal-4_4__content .style_temp img
{
	width: 33% !important;
    margin-bottom: 3%;
	padding-top: 3%
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media only screen and (max-width: 768px) {
	
    .modal-1__close-label,
    .modal-2__close-label,
    .modal-3__close-label,
    .modal-4__close-label,
    .modal-2_1__close-label,
    .modal-2_2__close-label,
    .modal-2_3__close-label,
    .modal-2_4__close-label,
    .modal-3_1__close-label,
    .modal-3_2__close-label,
    .modal-3_3__close-label,
    .modal-3_4__close-label,
    .modal-4_1__close-label,
    .modal-4_2__close-label,
    .modal-4_3__close-label,
    .modal-4_4__close-label
	{
        top: 10px;
        right: 10px;
        font-size: 28px;
    }
	
    .modal-1__content-wrap,
    .modal-2__content-wrap,
    .modal-3__content-wrap,
    .modal-4__content-wrap,
    .modal-2_1__content-wrap,
    .modal-2_2__content-wrap,
    .modal-2_3__content-wrap,
    .modal-2_4__content-wrap,
    .modal-3_1__content-wrap,
    .modal-3_2__content-wrap,
    .modal-3_3__content-wrap,
    .modal-3_4__content-wrap,
    .modal-4_1__content-wrap,
    .modal-4_2__content-wrap,
    .modal-4_3__content-wrap,
    .modal-4_4__content-wrap
	{
        padding: 45px 12px 12px;
    }
	
}