/**
 * wrapper width break point
 */
@media screen and (max-width: 1000px) {

}

/**
 * medium break point
 */
@media screen and (max-width: 56.250em) { /** 900px **/
    footer .social {
        text-align: center;
    }

    footer .social img {
        float: none;
    }

    footer .arts-council {
        text-align: center;
    }

    footer .arts-council img {
        float: none;
    }

    header .site-search {
        overflow: hidden;
        float: none;
        height: 80px;
    }

		header .site-search-holder{
			float: none;
			padding: 0.5em 0 0 1em;
		}

    header .ecc-logo,
    header .nav-icon,
    header .header-login-button {
        height: 80px;
    }

    .gallery-icon {
        padding: 12px;
    }

    footer .content-block {
        flex-wrap: wrap;
    }

    footer .content-block {
        flex-wrap: wrap;
    }

    footer .content-block .other-ramm-sites {
        width: 100%;
    }

    footer .content-block .other-links {
        width: 70%;
    }

    footer .content-block .support-links {
        width: 30%;
    }

}

/**
 * horizontal medium break point
 */
@media screen and (max-width: 56.250em) and (orientation:landscape) {

}

/**
 * medium-small break point
 */
@media screen and (max-width: 42em) {
    header .header-content {
        padding-top: 1.2rem;
    }

    header .site-search {
        width: 100%;
        /* max-height: 0; */
        transition: max-height 0.6s linear;
    }

    header.site-search.is-shown {
        max-height: 90px;
    }

    header .ecc-logo {
        height: auto;
				padding-left: 0;
    }

    header .nav-icon {
        height: auto;
    }

    header .header-login-button {
        height: auto;
    }

    header .header-login-button button {
        margin-top: 5px;
    }

    nav.main-nav {
        height: 100vh;
        overflow-y: auto;
    }

    nav.main-nav.is-shown {
        /* max-height: calc(100vh - 165px); */
    }

    nav.main-nav .show-sub-nav {
        display: block;
    }

    nav.main-nav .sp-column-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    nav.main-nav .nav-column {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: #dc2b90;
        transition: left 0.8s ease-out;
        overflow-y: auto;
    }

    nav.main-nav .nav-column.is-active {
        left: 0 !important;
    }

    nav.main-nav .nav-column-2 {
        left: 100%;
        z-index: 2;
    }

    nav.main-nav .nav-column-3 {
        left: 200%;
        z-index: 3;
    }

    nav.main-nav .nav-column-4 {
        left: 300%;
        z-index: 4;
    }

    nav.main-nav ul {
        padding-right: 0;
    }

    nav.main-nav ul li.back-item {
        display: list-item;
    }

    nav.main-nav .nav-column-2 a,
    nav.main-nav .nav-column-3 a,
    nav.main-nav .nav-column-4 a {
        padding-left: 19px;
    }

    nav.main-nav ul li.back-item a {
        padding-left: .6em;
        font-size: 20px;
    }

    .ramm-popup {
        width: 80%;
    }

    footer .top-contents .ramm-logo {
        width: 100%;
        text-align: center;
        padding-bottom: 1.2rem;
    }

    footer .top-contents .sidebar-content {
        clear: left;
        width: 100%;
        height: auto;
    }

    footer .top-contents .sidebar-content ul {
        text-align: center;
        width: 100%;
    }

    footer .top-contents .sidebar-content ul li {
        float: none;
        display: inline-block;
        padding: 0 6px;
    }

    footer .content-block .other-ramm-sites .site-list .site {
        padding-right: 0.8rem;
    }

    footer .content-block .other-ramm-sites .site-list .site:last-of-type {
        padding-right: 0;
    }

    footer .content-block .other-ramm-sites {
        padding-right: 1.2rem;
    }
}

/**
 * small break point
 */
@media screen and (max-width: 31.250em) { /** 500px **/
    .ramm-popup {
        width: 90%;
    }

    footer .content-block .other-ramm-sites {
        order: 1;
    }

    footer .content-block .other-links {
        width: 100%;
        order: 3;
    }

    footer .content-block .support-links {
        width: 100%;
        order: 2;
    }

    footer .content-block .other-ramm-sites .site-list {
        flex-wrap: wrap;
    }

    footer .content-block .other-ramm-sites .site-list .site {
        width: 50%;
        padding-bottom: 1.2rem;
        padding-right: 1.2rem;
        height: 90px;
    }

    footer .content-block .other-ramm-sites .site-list .site a {
        display: block;
        height: 100%;
    }

    footer .content-block .other-ramm-sites .site-list .site img {
        max-height: 100%;
        width: auto !important;
    }

    footer .content-block .other-ramm-sites .site-list .site:last-of-type {
        padding-right: 1.2rem;
    }
}