@media only screen and (max-width: 1360px) {
    .nav .hero h1.ttl::first-line { font-size: 38px; font-family: Railway, serif; padding:0; margin:0; font-weight:normal; }
}

@media only screen and (max-width: 1200px) {
    .nav .hero{
        margin-top: 105px;
    }

    .nav .hero h1.ttl::first-line { font-size: 35px; font-family: Railway, serif; padding:0; margin:0; font-weight:normal; }
    .nav .hero h1.ttl { font-size: 30px; font-family: Railway, serif; padding:0; margin:0; font-weight:normal; line-height: 40px; }

    .pge .inner .content { overflow: scroll; }
}

@media only screen and (max-width: 1024px) {
    .mw { max-width: 1000px; }
    .nav .hero h1.ttl::first-line { font-size: 35px !important; font-family: Railway, serif; padding:0; margin:0; font-weight:normal; }
    .nav .hero h1.ttl { font-size: 35px !important; font-family: Railway, serif; padding:0; margin:0; font-weight:normal; line-height: 40px; }

    body.events .content .optmenu .w20.view { width:40%; }
    body.events .content .optmenu .w50.key { width: 60%; }
    body.events .content .optmenu .w30.filters { width: 100%; float:none; }
    body.events .content .optmenu .w30.filters .w50.category { width:40%; }
    body.events .content .optmenu .w30.filters .w50.search { width: 60%; }
}

@media only screen and (max-width: 812px) {
    .mw {
        max-width: 768px;
        padding: 0 5px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .content .tabbox .tabs .tab {
        line-height: 35px;
        padding: 35px 5px;
    }

    .hdr .logo {
        float: none;
        width: 100%;
        height: 108px;

        background: url(../img/ICMA_LogoCoated.svg) no-repeat;
        /*background: url(../img/ICMA_Pridelogo-updated.jpg) no-repeat;*/
        background-size: contain;
        flex-basis: 50%;
    }
    .hdr .menu { width: 50%; height: auto; text-align:left; }
    .hdr .menu a { line-height: 50px; padding: 0 10px; }
    .hdr .links {
        height: auto;
        padding-right:0;
        flex-basis: 50%;
        min-width: unset;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding-bottom: 15px;
    }
    .hdr .links a { line-height: 50px; height: 50px; padding: 0 10px; }
    .hdr .links .logincotainer > div {
        display: flex;
        align-items: center;
    }
    .hdr .links .logincotainer a.search {
        margin-left: 0;
    }
    .hdr .links .logincotainer > div #SearchForm_SearchForm {
        height: unset;
        float: none;
        line-height: unset;
    }
    .hdr .links .logincotainer > div #SearchForm_SearchForm input[type="text"] {
        border: 1px solid #0f273f;
        padding: 5px 15px;
        font-family: 'Segoe UI', sans-serif;
        max-width: 100%;
    }
    .hdr .links .logincotainer > div #SearchForm_SearchForm input[type="text"]::placeholder {
        font-family: 'Segoe UI', sans-serif;
    }

    .nav .mobile {
        display: block;
        background: #003466;
    }

    .nav .mobile span{
        display: block;
    }

    .nav .menu { visibility:hidden; position: fixed; top: 0; left: 0; background-color: white; bottom: 0; right: 0; z-index: 100; overflow: auto; }
    .nav .menu.mobileshow { display: block !important; visibility:visible; }
    .nav .mobileclose { display:block; z-index: 500;}

    .nav .menu ul.primary { width: 150px; float: left; }
    .nav .menu .primary a { color: #014066; width: auto;}
    .nav .menu ul.primary li {
        float: none;
        width: 100%;
        display: block;
        border-right: 1px solid #EEE;
        padding: 0 0 0 5px;
        text-align: center;
        background-repeat: no-repeat;
        background-position-x: calc(100% - 5px);
        background-position-y: center;

        display: flex;
        justify-content: space-between;

    }

    .nav .menu ul.primary li .arrow{
        flex-basis: 15px;
        background: url(../img/scroller-a-arrow.png);
        background-repeat: no-repeat;
        background-position: center right;
        margin: 5px;
    }

    .nav .menuitems ul.items > li.group{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .nav .menuitems ul.items > li.group h3{
        flex-basis: calc(100% - 10px);
    }

    .nav .menuitems ul.items > li.group .arrow{
        flex-basis: 10px;
        background: url(../img/nav-arrow-down.png);
        background-repeat: no-repeat;
        background-position: center 5px;
    }

    .nav .menuitems ul.items > li.group .items.children{
        flex-basis: 100%;
    }

    .nav .menuitems { width: calc(100% - 150px); float: left; position: relative; top: unset; left: unset; }
    .nav .menuitems .w20 { width: 50%; margin-bottom: 20px; padding-right: 10px;}
    .nav .menuitems .w20:nth-last-child(1) { width:100%; }

    .newscontainer { padding:0 20px; }
    .newsissues .w50 { float:none; width:100%; margin-bottom:20px;  }

    .eventscontainer { padding: 0 20px; }
    .pge .eventscontainer .w50 { float: none; width: 100%; margin-bottom: 20px; }
    .pge .eventscontainer .w50:nth-child(1) { padding-right: 0; }
    .pge .eventscontainer .w50:nth-child(2) { padding-left: 0; }

    .pge .heroscroll {
        min-height: unset;
        padding: 15px;
        padding-bottom: 40px;
        margin-top: -150px;
    }

    body.events .display .items .item { width: calc(100% / 3); flex: 0 calc(100% / 3); }


    .ftr .w25.links, .ftr .w75.contacts, .ftr .w40.links, .ftr .w60.contacts { width:100%; float:none; }
    .ftr .w20, .ftr .w30, .ftr .w60    { width: 50%;}

    .cpy { padding: 20px 20px; }

    .pge .eventscontainer .scroller {width: 100% !important;}
    .pge .eventscontainer .fr.scrollbtns { position: inherit !important; top: unset !important; clear: both !important; right: unset !important; height: auto !important; width: 100% !important; float: none !important;}
    .pge .eventscontainer .fr.scrollbtns .btn {top: unset !important; position: relative !important;}

    .pge .inner .content table td {
        padding: 10px 10px;
        vertical-align: top;
    }

    .cpy .cpy-inner{
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        max-width: 100%;
    }

    .cpy .cpy-inner div{
        flex-basis: 100%;
        width: 100%;
    }

    .cpy .cpy-social {
        display: flex;
        align-items: center;
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .cpy .cpy-social a:first-child{
        flex-basis: 100%;
    }

    .cpy .cpy-social a{
        padding-bottom: 10px;
        margin-left: 0px !important;
    }

    .iframe_container{
        height: auto !important;
    }

    .nav .hero h1.ttl{
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .flexGridOneThird{
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 550px) {
    .hdr .logo,
    .hdr .links {
        flex-basis: 100%;
    }
    .hdr .links {
        justify-content: center;
    }

    .pge .heroscroll .scroller{
        display: flex;
        flex-wrap: wrap;
    }

    .pge .heroscroll .scroller .item{
        float: none;
        flex-basis: 50%;
        height: auto;
    }

    .pge .heroscroll .scroller .item h2{
        font-size: 18px;
        padding: 0;
        min-height: auto;
    }

    .pge .heroscroll .scroller .item .img{
        width: 70%;
        height: 110px;
    }

    .pge .inner .content{
        padding: 30px 5px;
    }
    .cpy { font-size:12px; padding-bottom: 90px !important;}

    .flexGridOneThird{
        display: grid;
        grid-gap: 25px;
        grid-template-columns: 1fr;
    }

}
@media only screen and (max-width: 414px) {
    .hdr .menu { float: none;  width: 100%;  text-align: center; padding-left: 0; }
    .hdr .links { float: none; width: 100%; padding-right: 0; text-align: center; }
    .hdr .links .fr { float:unset; display:inline-block; }

    .nav .hero { margin-top:10px; }
    .nav .hero h1.ttl { font-size: 30px; }

    .nav .hero h1.ttl{
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .pge .newscontainer .newsissues { padding-right: 0; }
    .pge .newscontainer .quicklinks { width: 100%; top: unset; right: unset; bottom: unset; position: relative; margin-bottom:40px; }
    .pge .newscontainer .items { padding-right:0;  }

    .pge .countcontainer .w50 .fr { padding-right: 20px; text-align:right; }
    .pge .countcontainer .w50 .fl { padding-left: 20px; }

    body.events .content .optmenu .w20.view { width: 100%; float: none; }
    body.events .content .optmenu .w50.key { width: 100%; float: none; }
    body.events .content .optmenu .w30.filters .w50.category { width: 100%; float: none; margin-bottom:15px; }
    body.events .content .optmenu .w30.filters .w50.search { width: 100%; float:none; }
    body.events .display .items .item { width: 100%; flex: 0 100%; }

    .ftr { padding:20px;  }

    .ftr .w60.contacts .w25 { width:50%; margin-bottom:20px; }

    .nav .menuitems .w20 { width: 100%; padding-right:0; }

    .ftr a.btn { line-height:normal; padding:10px 20px !important; }

    .heroscroll .slick-dots li.btn { width: 50px;}
    .SidebarBanner .slick-slide .readmore {text-align: center; display: inline-block; width: 100%;}
    .SidebarBanner .slick-slide .readmore img {margin: auto;}
}

@media only screen and (max-width: 375px)
{
    .nav .hero { padding: 0 20px; }

    .slick-dots li.btn, .slick-dots li.btn button { width:20px; }

    .eventscontainer .ttl { margin-bottom:30px; }
    .eventscontainer .ttl .fl { width:100%; float:none; }

}