body {
  &.popup_top_active {
		margin-top: 50px;
		header.header {
			top: 50px;
		}
	}
}

.modal_popup {
    display: none;
    &.type_top  {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        line-height: 50px;
		padding-right: 40px;
        background: #ffe2cc;
        color: #8f6850;
        z-index: 9999;
        opacity: 0;
        transition: all 0.25s;
        &.display_popup {
            opacity: 1;
            height: 50px;
            visibility: visible;
        }
        .close {
            position: absolute;
			right: 15px;
			font-size: 2.5rem;
			background: #fff;
			width: 35px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			border-radius: 50em;
			transform: translateY(-50%);
			top: 50%;
			cursor: pointer;
			transition: all 0.25s;
			&:hover,
			&:focus,
			&:active {
				transform: translateY(-50%) scale(0.9);
			}
        }
    }
}

.popup {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    &.is-visible {
        visibility: visible;
        .modal-overlay {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
        }
        .modal-transition {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .modal-overlay {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: hsla(0, 0%, 0%, 0.5);
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 0.3s, opacity 0.3s;
    }
    .modal-wrapper {
        position: fixed;
        z-index: 9999;
        top: 65px;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateX(-50%);
        width: 950px;
        background-color: #fff;
        box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
    }
    .modal-transition {
        transition: all 0.3s 0.12s;
        transform: translateY(-10%);
        opacity: 0;
    }
    .modal-header {
        position: relative;
        background-color: #fff;
        color: var(--primary);
        box-shadow: none;
        border-bottom: 1px solid #e8e8e8;
        font-size: 25px;
        padding: 35px 55px;
        &.hide_heading {
            visibility: hidden;
            height: 0;
            padding: 0;
            border: 0;
            .modal-close {
                background: #fff;
                color: #333;
                width: 65px;
                height: 65px;
                border-radius: 50em;
                transform: none;
                top: 25px;
                right: 25px;
                transition: all 0.25s;
                &:hover,
                &:focus,
                &:active {
                    transform: scale(0.96);
                }
            }
        }
    }
    .modal-body {
        padding: 0;
        position: relative;
        .col_1,
        .col_2,
        .col_3,
        .col_4,
        .col_5,
        .col_6,
        .col_7,
        .col_8,
        .col_9,
        .col_10 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }
        .col_1 {
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
            max-width: 10%;
        }
        .col_2 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
        .col_3 {
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
            max-width: 30%;
        }
        .col_4 {
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }
        .col_5 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
        .col_6 {
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%;
        }
        .col_7 {
            -ms-flex: 0 0 70%;
            flex: 0 0 70%;
            max-width: 70%;
        }
        .col_8 {
            -ms-flex: 0 0 80%;
            flex: 0 0 80%;
            max-width: 80%;
        }
        .col_9 {
            -ms-flex: 0 0 90%;
            flex: 0 0 90%;
            max-width: 90%;
        }
        .col_10 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
        h2 {
            margin: 0 0 20px;
        }
        h3, h4, h5 {
            margin: 0 0 20px;
        }
        .text {
            padding: 0;
            p {
                &:last-of-type {
                    margin: 0;
                }
            }
            .iframe_video_wrap {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 aspect ratio */
                height: 0;
                overflow: hidden;
                max-width: 100%;
                iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            &.contain {
                background-size: contain!important;
            }
        }
        .close_popup_wrapper {
            border-top: 1px solid rgba(0,0,0,0.1);
        }
        .close_popup {
            display: inline-block;
            margin-top: 25px;
            margin-bottom: 20px;
            padding: 0 35px;
            text-decoration: underline;
            cursor: pointer;
            &:hover,
            &:focus,
            &:active {
                text-decoration: none;
            }
        }
    }
    .modal-content {
        padding: 40px 55px;
        border: 0;
        > *:first-child {
            margin-top: 0;
        }
        > *:last-child {
            margin-bottom: 0;
        }
        &.popup_has_image {
            padding: 0;
            .img {
                left: 7.5px;
                &.is_order-2 {
                    right: 7.5px;
                }
            }
            .text {
                padding: 60px 45px;
                h1, h2, h3, h4, h5, h6 {
                    color: #000;
                }
            }
        }
        .close_popup_text {
            float: right;
            text-align: right;
            cursor: pointer;
            font-size: 1.3rem;
            margin-top: 25px;
            color: #999;
            display: inline-block;
            &:hover,
            &:focus,
            &:active {
                color: #000;
            }
        }
    }
    .modal-close {
        position: absolute;
        z-index: 1;
        visibility: visible;
        top: 50%;
        transform: translateY(-50%);
        right: 35px;
        padding: 0;
        color: #aaa;
        background: none;
        border: 0;
        font-size: 30px;
        cursor: pointer;
        &:hover {
            color: #777;
        }
    }
    .modal-heading {
        font-size: 1.125em;
        margin: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}