/*X-Small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {

    ol,
    ul {
        padding-left: 0px !important;
    }

    .px-4 {
        padding-right: 2rem !important;
        padding-left: 2rem !important;
    }

    .media-content {
        font-family: 'Open Sans', sans-serif;
        font-weight: normal;
        font-size: 15px;
        line-height: 24px;
        text-align: left;
        color: #6f7579;
    }

    .navbar {
        flex-direction: row !important;
    }

    .navbar-collapse {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        align-items: center !important;
        position: absolute !important;
        background: #f1f1f1 !important;
        width: 100% !important;
        top: 4em !important;
        text-align: center !important;
        box-shadow: 0 4px 2px -2px #8080804d !important;
        z-index: 1000;
    }

    .navbar-toggler > .close {
        background-image: url(../images/close.svg);
        position: relative;
        display: inline-block;
        width: 2.5em;
        height: 2.5em;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        right: -10px;
        top: 0;
    }

    .top-section .container-fluid {
        padding: 0px !important;
    }

    .top-section {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
    }

    .top-section:after {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 20 !important;
        content: "" !important;
        background-image: linear-gradient(#00000000, #000000) !important;
        top: 0px !important;
    }

    .img-home {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    .image-caption {
        position: absolute !important;
        color: #FFF !important;
        width: 100% !important;
        height: auto !important;
        z-index: 30 !important;
        font-family: serif !important;
        bottom: 0 !important;
    }

    .image-caption h2,
    .image-caption h4 {
        font-size: 14px;
        padding: 0px 2em;
    }

    .navbar-toggler > .close {
        display: inline-block;
    }

    .navbar-toggler.collapsed > .close,
    .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        display: none;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none !important;
    }

    .navbar-light .navbar-brand {
        width: 150px;
        padding: 15px;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, 0.55);
        border: 0px;
    }

    .navbar-light {
        box-shadow: 0 10px 20px rgb(39 63 103 / 11%);
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, 0.55);
        border: 0px;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none !important;
    }

    .footer-menu li.footer-nav-item {
        display: inline-block;
        padding: 0px 10px;
        border-right: 1px solid #ccc;
        /* border-left: 1px solid #ccc; */
        margin-bottom: 1em;
    }

    .footer-menu li.footer-nav-item:nth-child(3) {
        display: inline-block;
        padding: 0px 15px;
        border-right: 0px;
    }

    .footer-menu li.footer-nav-item:nth-child(6) {
        display: inline-block;
        padding: 0px 15px;
        border-right: 0px;
    }

    .footer-nav-item {
        flex: 0 0 auto;
        width: 42%;
    }

    .copyright-text {
        text-align: center;
    }

    .three-blocks .col-lg-4::after {
        display: none;
    }

    .media-title {
        font-family: "Source Han Sans JP";
        font-weight: bold;
        font-size: 18px;
        line-height: 36px;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: left;
        color: #7f7f7f;
    }

    .breadcrumbs {
        font-family: Montserrat;
        font-weight: normal;
        font-size: 18px !important;
        letter-spacing: 0.08em;
        text-align: center;
        color: #fff;
    }


    .navbar-light .navbar-nav .nav-link.active {
        color: rgb(238 29 35) !important;
        font-weight: bold;
        border-bottom: 0px !important;
    }

    #menuToggle {
        display: block;
        position: relative;
        top: 50px;
        left: 50px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

    #menuToggle a:hover {
        color: tomato;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
	 * Just a quick hamburger
	 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /*
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
	 * But let's hide the middle one.
	 */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
	 * Ohyeah and the last one should go the other direction
	 */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
    #menu {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
	 * And let's slide it in from the left
	 */
    #menuToggle input:checked ~ ul {
        transform: none;
    }

    .three-blocks .col-lg-4 {
        position: relative;
        border-right: 0px !important;
    }

    .three-blocks .col-lg-4::after {
        display: none !important;
    }

    .section-title {
        font-size: 1.5em;
        margin: 0px 0 2em;
        text-align: center;
        position: relative;
        font-weight: 300;
        text-transform: uppercase;
        font-family: Montserrat, sans-serif;
    }

    .section-title-left {
        font-size: 1.2em;
        margin: 0px 0 0em;
        text-align: left;
        position: relative;
        font-weight: 400;
        /* text-transform: uppercase; */
    }

    h5,
    .h5 {
        font-size: 1.1rem;
        margin-top: 20px;
    }

    .section-title-left:after {
        content: '';
        position: absolute;
        background-color: black;
        width: 6%;
        height: 3px;
        top: 35px;
        left: 3%;
        transform: translate(-50%, -50%);
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 576px) and (max-width: 768px) {
    .navbar {
        flex-direction: row !important;
    }

    .navbar-toggler > .close {
        display: inline-block;
    }

    .navbar-toggler.collapsed > .close,
    .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        display: none;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, 0.55);
        border: 0px;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none !important;
    }

    .navbar-toggler > .close {
        background-image: url(../images/close.svg);
        position: relative;
        display: inline-block;
        width: 2.5em;
        height: 2.5em;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        right: -10px;
        top: 0;
    }

    .navbar-light .navbar-brand {
        width: 150px;
        padding: 15px;
    }




    .navbar-light .navbar-nav .nav-link.active {
        color: rgb(238 29 35) !important;
        font-weight: bold;
        border-bottom: 0px !important;
    }

    #menuToggle {
        display: block;
        position: relative;
        top: 50px;
        left: 50px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

    #menuToggle a:hover {
        color: tomato;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
	 * Just a quick hamburger
	 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /*
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
	 * But let's hide the middle one.
	 */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
	 * Ohyeah and the last one should go the other direction
	 */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
    #menu {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
	 * And let's slide it in from the left
	 */
    #menuToggle input:checked ~ ul {
        transform: none;
    }

    .navbar-collapse {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        align-items: center !important;
        position: absolute !important;
        background: #f1f1f1 !important;
        width: 100% !important;
        top: 4em;
        text-align: center !important;
        box-shadow: 0 4px 2px -2px #8080804d !important;
        z-index: 1000;
    }

    .navbar-light .navbar-nav .nav-link.active {
        color: rgb(238 29 35) !important;
        font-weight: bold;
        border-bottom: 0px !important;
    }

    #menuToggle {
        display: block;
        position: relative;
        top: 50px;
        left: 50px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

    #menuToggle a:hover {
        color: tomato;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
	 * Just a quick hamburger
	 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /*
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
	 * But let's hide the middle one.
	 */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
	 * Ohyeah and the last one should go the other direction
	 */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
    #menu {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
	 * And let's slide it in from the left
	 */
    #menuToggle input:checked ~ ul {
        transform: none;
    }

    .navbar {
        box-shadow: 0 10px 20px rgb(39 63 103 / 11%);
    }

    .top-section .container-fluid {
        padding: 0px !important;
    }

    .top-section {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
    }

    .top-section:after {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 20 !important;
        content: "" !important;
        background-image: linear-gradient(#00000000, #000000) !important;
        top: 0px !important;
    }

    .img-home {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    .image-caption {
        position: absolute !important;
        color: #FFF !important;
        width: 100% !important;
        height: auto !important;
        z-index: 30 !important;
        font-family: serif !important;
        bottom: 0 !important;
    }

    .image-caption h2,
    .image-caption h4 {
        font-size: 20px;
        padding: 0px 2em;
    }

    .three-blocks .col-lg-4 {
        position: relative;
        border-right: 0px !important;
    }

    .three-blocks .col-lg-4::after {
        display: none !important;
    }

    .section-title-left {
        font-size: 1.5em;
        margin: 0px 0 0em;
        text-align: left;
        position: relative;
        font-weight: 400;
        /* text-transform: uppercase; */
    }

    h5,
    .h5 {
        font-size: 1.1rem !important;
        margin-top: 20px !important;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 768px) and (max-width: 992px) {
    .navbar {
        flex-direction: row !important;
    }

    .navbar-toggler > .close {
        background-image: url('../images/close.svg');
        display: inline-block;
        width: 3.5em;
        height: 3.5em;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        position: relative;
        right: -15px;
        top: 0px;
    }

    .navbar-collapse {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        align-items: center !important;
        position: absolute !important;
        background: #f1f1f1 !important;
        width: 100% !important;
        top: 6.5em;
        text-align: center !important;
        box-shadow: 0 4px 2px -2px #8080804d !important;
        z-index: 1000;
    }

    .navbar-light .navbar-nav .nav-link.active {
        color: rgb(238 29 35) !important;
        font-weight: bold;
        border-bottom: 0px !important;
    }

    #menuToggle {
        display: block;
        position: relative;
        top: 50px;
        left: 50px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }

    #menuToggle a:hover {
        color: tomato;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    /*
	 * Just a quick hamburger
	 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /*
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
	 * But let's hide the middle one.
	 */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
	 * Ohyeah and the last one should go the other direction
	 */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
    #menu {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
	 * And let's slide it in from the left
	 */
    #menuToggle input:checked ~ ul {
        transform: none;
    }

    .three-blocks .col-lg-4 {
        position: relative;
        border-right: 0px !important;
    }

    .three-blocks .col-lg-4::after {
        display: none !important;
    }

    .top-section .container-fluid {
        padding: 0px !important;
    }

    .top-section {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
    }

    .top-section:after {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 20 !important;
        content: "" !important;
        background-image: linear-gradient(#00000000, #000000) !important;
        top: 0px !important;
    }

    .img-home {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    .image-caption {
        position: absolute !important;
        color: #FFF !important;
        width: 100% !important;
        height: auto !important;
        z-index: 30 !important;
        font-family: serif !important;
        bottom: 0 !important;
    }

    .image-caption h2,
    .image-caption h4 {
        font-size: 14px;
        padding: 0px 2em;
    }

    .section-title-left {
        font-size: 1.5em;
        margin: 0px 0 0em;
        text-align: left;
        position: relative;
        font-weight: 400;
        /* text-transform: uppercase; */
    }

    h5,
    .h5 {
        font-size: 1.1rem !important;
        margin-top: 20px !important;
    }

    .navbar-toggler > .close {
        display: inline-block;
    }

    .navbar-toggler.collapsed > .close,
    .navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        display: none;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, 0.55);
        border: 0px;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none !important;
    }
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {
    .top-section .container-fluid {
        padding: 0px;
    }

    .top-section {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .top-section:after {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 20;
        content: "";
        background-image: linear-gradient(#00000000, #000000);
        top: 0px;
    }

    .img-home {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .image-caption {
        position: absolute;
        color: #FFF;
        width: 100%;
        height: auto;
        z-index: 30;
        font-family: serif;
        bottom: 0;
    }

    .image-caption h2,
    .image-caption h4 {
        font-size: 14px;
        padding: 0px 2em;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (max-width: 1400px) {}