@CHARSET "UTF-8";
/*
Theme Name: Strengthening Music in Society
Theme URI:
Author: The Publishing Bureau
Author URI: http://publishingbureau.co.uk
Description: Custom theme for epruma.eu
Version: 1
License: Proprietary
License URI:
*/

/*
300 light
400 regular
700 bold
900 black
*/

body {
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
}
a {
}
a:hover {
}
.light-blue {
    background-color: #2892D7 !important;
}
.dark-blue {
    background-color: #173753 !important;
    color: #FFF !important;
}

.bold {
    font-weight: bold !important;
}
a.button, button.button {
    background-color: #FFDB03;
    border: none;
    border-radius: 5px;
    color: #173753;
    font-size: 22px;
    font-weight: 900;
    line-height: 29px;
    padding: 10px;
}
a.button:hover {
    text-decoration: none;
}
a.button-dark-blue {
    background-color: #173753 !important;
    color: #FFF !important;
}
a.button-spaced, button.button-spaced {
    align-items: center;
    display: flex !important;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
}
a.button-w-100, button.button-w-100 {
    display: block;
    width: 100%;
}
.light {
    font-weight: 200 !important;
}
h1 {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 900;
}
h2 {
    color: #173753;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 900;
}
h3 {
    color: #173753;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
}
h4 {
    color: #173753;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 700;
}
h5 {
    color: #173753;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
}
h6 {
    color: #173753;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
}
.badge-bigger {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 6px;
    margin-right: 6px;
}
.badge-primary {
    background-color: #4CA9D9;
}
.badge-success {
    background-color: #3A3C8E;
}
.img-fluid {
    width: 100%;
}
.img-bordered {
    border: 1px solid #2892D7;
}
.title {
    color: #173753;
    font-size: 22px;
    font-weight: 900;
}
input[type="text"], input[type="email"], textarea, select:not(.nolayout) {
    background-color: #FFF;
    border: 4px solid #153653;
    border-radius: 5px !important;
    height: 49px;
    width: 100%;
}
input[type="text"].square, input[type="email"].square, textarea, select.square {
    border-radius: 0 !important;
}
#contact_form textarea {
    height: auto;
    min-height: 50px;
}
#contact_form input[type="submit"] {
    background-color: #FFDB03;
    border: none;
    border-radius: 5px !important;
    color: #173753;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
}
.email_back {
    /* Honeypot -- hidden form element */
    display: none !important;
}
ul.no_list_style {
    list-style: none;
    padding-left: 0;
}
.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video_wrapper >  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Navigation */
.navbar {
    -webkit-transition:padding 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.navbar.stuck {
    background-color: #FFF;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.navbar > .container {
    padding-left: 24px;
    padding-right: 24px;
}
.navbar .navbar-brand {
    background-image: url('assets/images/logo.png');
    background-size: cover;
    height: 70px;
    width: 175px;
}
.navbar.stuck .navbar-brand {
    /* background-image: url('assets/images/AEC_logo_blue.png'); */
}
.navbar .navbar-brand img {
    height: 60px;
    width: 150px;
}
.navbar-toggler {
    z-index: 999;
}
#navigation_menu {
    background-color: #173753;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}
#navigation_menu > div {
    padding: 15px;
}
.navbar .navbar-nav a {
    /* Menu items style */
    color: #FFF;
    font-size: 16px;
}
.navbar .navbar-nav .nav-item a:hover, .navbar .navbar-nav .nav-item.dropdown:hover a {
    /* Menu items style when hovered or when sub-menu is open */
    color: #FFDB03;
}
.navbar .navbar-nav .nav-item.active a {
    /* Menu item active style */
}
.navbar .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    /* Open sub menu when menu item is hovered */
    display: block;
}
.navbar .navbar-nav .nav-item.dropdown:hover {
    /* Menu item with drop down style when dropdown is open */
    background-color: #000;
}
.navbar .dropdown-menu {
    /* Dropdown style */
    border-top-left-radius: 0;
    background-color: #000;
    border: none;
    margin: 0;
}
.navbar .dropdown-menu .dropdown-item {
    /* Dropdown item style */
    color: #FFF !important;
    padding-left: 5px;
}
.navbar .dropdown-menu .dropdown-item:hover {
    /* Dropdown item hover style */
    background-color: inherit;
}
.navbar .social a {
    margin-right: 10px;
}

.home {
    background-image: url('assets/images/page_bg_xs_s.png');
    background-size: 100% 100%;
    padding-top: 30px;
}
.sub_page main, .default main {
    background-image: url('assets/images/page_bg_xs_s.png');
    background-size: 100% auto;
    padding-top: 15px;
}
footer {
    background-color: #2892D7;
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}
footer > div.container {
    max-width: 100%;
}
.footer__contact a {
    font-size: 30px;
}
footer a, footer a:hover {
    color: #FFF;
}
footer h2 {
    color: #FFF !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 29px;
    margin-top: 30px;
}
footer ul {
    list-style: none !important;
    margin-bottom: 0;
}
footer .footer__left {
    padding-bottom: 30px;
}
footer .footer__right {
    background-color: #173753;
}
footer .footer__social {
    margin-bottom: 30px;
}
footer .footer__social > div > div {
    display: flex;
    justify-content: space-between;
}
footer .footer__social a {
    font-size: 40px;
}
footer .footer__credits {
    background-color: #FFF;
    padding-bottom: 30px;
    padding-top: 30px;
}
footer .footer__credits img {
    margin-bottom: 15px;
    width: 50%;
}

.content {
    z-index: 999;
}
/* Home */
.home__header {
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
}
.home_header__slides {
    display: none;
}
.home__header img {
    height: 100%;
    width: auto;
}
.home__header__heading {
    position: absolute;
    bottom: 0;
    left: 0;
}
.home__header__heading h1 {
    color: #FFF;
    font-size: 35px;
    font-weight: 900;
    margin-bottom: 0;
    padding: 15px 30px;
}
.home__header__heading p, .home__introduction p {
    color: #FFF;
    font-size: 25px;
    margin-bottom: 0;
    padding: 15px 30px;
}
.home .content {
    padding-top: 15px;
    margin-bottom: 30px;
}
a.load_more_posts {
    background-color: #2191D7;
    border-radius: 3px;
    color: #FFF;
    display: block;
    font-size: 18px;
    font-weight: 900;
    padding: 10px;
    text-align: center;
}
.home__search {
    width: 100%;
}
.home__search input {
    border: 4px solid #173753;
    color: #173753;
    line-height: 39px;
    height: 49px;
    padding: 1px;
    padding-left: 10px;
    width: calc(100% - 48px);
}
.home__search button {
    background-color: #173753;
    border: none;
    color: #FFF;
    line-height: 49px;
    padding: 0;
    width: 48px;
}

#posts_grid {
    font-size: 0;
    margin-top: 30px;
    min-height: 250px;
}
.posts_grid__item {
    display: block;
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
}
.posts_grid__item > img {
    height: auto;
    width: 100%;
}
.posts_grid__item:hover > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
a.posts_grid__item > div {
    bottom: 0;
    align-items: center;
    color: #FFF;
    display: flex;
    left: 0;
    padding: 15px;
    position: absolute;
    width: 100%;
}
.posts_grid__item:hover > div {
    opacity: 1;
}
.posts_grid__item.no_image {
    background-color: #173753;
    padding-bottom: 25px;
    padding-top: 25px;
}
.posts_grid__item.no_image > img {
    margin: 30px 15px;
    width: calc(100% - 30px);
}
.posts_grid__item.red > div {
    /* #C10202 */
    background-color: rgba(193, 2, 2, 0.65);
}
.posts_grid__item.orange > div {
    /* #F56731 */
    background-color: rgba(245, 103, 49, 0.65);
}
.posts_grid__item.green > div {
    /* #53917C */
    background-color: rgba(83, 145, 124, 0.65);
}
.posts_grid__item.lime > div {
    /* #6FAC1A */
    background-color: rgba(111, 172, 26, 0.65);
}
.posts_grid__item.rouge > div {
    /* #A23B72 */
    background-color: rgba(162, 59, 114, 0.65);
}
.posts_grid__item.blue > div {
    /* #046E8F */
    background-color: rgba(4, 110, 143, 0.65);
}
.posts_grid__item.olive > div {
    /* #12664F */
    background-color: rgba(18, 102, 79, 0.65);
}
.posts_grid__item.burgundy > div {
    /* #611C35 */
    background-color: rgba(97, 28, 53, 0.65);
}

.sub_header {
    height: 370px;
    overflow: hidden;
    position: relative;
}
.sub_header > div {
    position: absolute;
    height: 100%;
    top: 0;
}
.sub_header__middle {
    width:100%;
}
.sub_header__featured_image {
    background-position: 50%;
    background-size: cover;
    height: 100%;
}
.sub_header_mobile  > .row.blue {
    background-color: #046E8F;
}
.sub_header_mobile  > .row.burgundy {
    background-color: #611C35;
}
.sub_header_mobile  > .row.green {
    background-color: #53917C;
}
.sub_header_mobile  > .row.light-blue a {
    color: #FFF !important;
}
.sub_header_mobile  > .row.lime {
    background-color: #6FAC1A;
}
.sub_header_mobile  > .row.olive {
    background-color: #12664F;
}
.sub_header_mobile  > .row.orange {
    background-color: #F56731;
}
.sub_header_mobile  > .row.red {
    background-color: #C10202;
}
.sub_header_mobile  > .row.rouge {
    background-color: #A23B72;
}
.sub_header_mobile h2, .sub_header_mobile h3 {
    color: #FFF !important;
}
.sub_header__video {
    height: 225px;
    position: absolute;
    left: 45vw;
    top: 40px;
    width: 345px;
    z-index: 999;
}

.content.post {
    background-color: #FFF;
    margin-bottom: 30px;
    padding-bottom: 15px;
    padding-top: 15px;
}
.content.post h1 {
    color: #173753;
    font-size: 30px;
    font-weight: 900;
    line-height: 50px;
}
.content.post h2, .content.post .h2 {
    color: #173753;
    font-size: 24px;
    font-weight: 900;
    margin-top: 20px;
}
.content.post .h2 {
    display: inline-block;
}
.content.post .post__categories_tags {
    line-height: 11px;
}
.content.post .post__categories_tags a {
    color: #404042;
    font-size: 11px;
}
.content.post .post__recent_posts > div {
    background-color: #2892D7;
}
.content.post .post__recent_posts__post_link {
    padding-left: 15px;
    padding-right: 15px;
}
.content.post .post__recent_posts .post__recent_posts__heading {
    background-image: url('assets/images/recent_posts_bg.png');
    background-repeat: no-repeat;
    background-size: 90% 100%;
    color: #173753;
}
.content.post .post__recent_posts h2 {
    color: #FFF;
    line-height: 50px;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.post__recent_posts__post_link a {
    color: #FFF;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
}
.post__recent_posts__post_link a:hover {
    text-decoration: none;
}
.post__recent_posts__post_link:not(:last-child) a {
    border-bottom: 1px solid #FFF;
}
.post__recent_posts__post_link a span {
    display: block;
    font-weight: 900;
}
.post__social a {
    color: #2892D7;
    font-size: 22px;
    margin: 0 5px;
}
.post__translations.post__translations__multi > div {
    display: flex;
    justify-content: space-between;
}
.post__translations > div:not(.post__translations__multi) > a {
    margin-right: 15px;
}
.post__translations > div > a {
    background-color: #2892D7;
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    font-size: 16px;
    line-height: 34px;
    width: 34px;
    text-align: center;
}

.posts_grid__workgroup_introduction {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 14px;
}
.posts_grid__workgroup_introduction ul {
    padding-left: 18px;
}
.workgroup__categories a {
    color: #404042;
    font-size: 11px;
}

.default__menu a {
    background-color: #2892D7;
    border-radius: 10px;
    color: #FFF;
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 50px;
    text-align: center;
}
.default__menu a.selected, .default__menu a:hover {
    background-color: #FFDB03;
    color: #173753;
    text-decoration: none;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .posts_grid__item {
        width: 240px;
    }
}

@media (max-width: 767px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 1;
    }
    .skew {
        background-color: #2892D7;
        clear: left;
        display: inline-block;
        float: left;
        transform: skew(-15deg);
    }
    .skew > * {
        transform: skew(15deg);
        margin: 0;
        margin-left: 15px;
    }
    .skew.blue {
        background-color: #046E8F;
    }
    .skew.burgundy {
        background-color: #611C35;
    }
    .skew.green {
        background-color: #53917C;
    }
    .skew.lime {
        background-color: #6FAC1A;
    }
    .skew.olive {
        background-color: #12664F;
    }
    .skew.orange {
        background-color: #F56731;
    }
    .skew.red {
        background-color: #C10202;
    }
    .skew.rouge {
        background-color: #A23B72;
    }

    .navbar .navbar-brand {
        margin-left: 10px;
        height: 80px;
        width: 200px;
    }
    .navbar .navbar-brand.logo_blue {
        background-image: url('assets/images/AEC_logo_blue.png');
    }

    #navigation_menu {
        background-color: transparent;
        position: fixed;
        right: -50px;
        top: 0;
        width: auto;
        transform: skew(5deg);
    }
    #navigation_menu > div {
        background-color: #173753;
        padding-top: 30px;
    }
    #navigation_menu > div > ul {
        margin-left: 60px;
        padding-right: 100px;
        transform: skew(-5deg);
    }

    /*
    #navigation_menu {
        background-color: transparent;
        overflow: hidden;
    }
    #navigation_menu > div {
        overflow: hidden;
        padding-top: 0;
    }
    #navigation_menu > div > div {
        background-color: #173753;
        margin-left: 450px;
        padding-bottom: 20px;
        padding-left: 50px;
        padding-top: 75px;
        transform: skew(5deg);
        width: 550px;
    }
    #navigation_menu > div > div > ul {
        transform: skew(-5deg);
    }
    */

    .home {
        background-image: url('assets/images/page_bg.png');
        margin-top: -30px;
        padding-top: 60px;
        position: relative;
        z-index: 999;
    }

    .home__header {
        position: relative;
    }
    .home__header img {
        position: absolute;
        left: 0
        top: 0;
    }
    .home__header .home__header__heading {
        bottom: 100px;
        left: calc(50% - 320px);
        max-width: 550px;
    }
    .home__header__heading h1 {
        font-size: 50px;
    }
    .home__header__heading p, .home__introduction p {
        font-size: 30px;
    }
    .home .content {
        padding-top: 100px;
        position: relative;
        top: -30px;
    }

    .sub_page main {
        padding-top: 45px;
    }

    .posts_grid__item {
        width: 330px;
    }

    .sub_header__middle {
        left: calc((100% - 720px) / 2);
        width: 720px;
    }
    /*  */
    .sub_header__left {
        background-color: #6DAEDB;
        width: calc((100% - 720px) / 2);
    }
    .sub_header__right {
        right: calc((100% - 720px) / 2 - 720px);
        width: 720px;
    }
    .sub_header__featured_image {
        background-position: 100%;
    }
    .sub_header__right .sub_header__featured_image {
        /* Flip */
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

        /* Blur */
        /* -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px); */
    }
    .sub_header__middle .sub_header__featured_image > div {
        align-items: flex-start;
        background-repeat: no-repeat;
        background-position: -35px 0;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        position: relative;
    }
    .sub_header__right .sub_header__right__yellow {
        background-color: #173753;
        height: 100%;
        position: relative;
        transform: skew(-15deg);
        width: 100%;
    }
    .sub_header__heading1 {
        /* bottom: 80px; */
        /* left: 30px; */
        /* position: absolute; */
    }
    .sub_header__heading1__workgroup {
        bottom: 30px;
    }
    .sub_header__heading1 > h1 {
        line-height: 50px;
        padding: 0 20px;
    }
    .sub_header__heading1__workgroup > h1 {
        max-width: 35vw;
        padding-bottom: 15px;
        padding-top: 15px;
    }
    .sub_header__heading2 {
        /* bottom: 40px;
        left: 30px;
        position: absolute; */
    }
    .sub_header__heading2 > h2 {
        color: #FFF;
        font-weight: 700;
        line-height: 40px;
        padding: 0 20px;
    }
    .sub_header__heading3 {
        /* bottom: 0;
        left: 30px;
        position: absolute; */
    }
    .sub_header__heading3 > h3 {
        color: #FFF;
        line-height: 40px;
        padding: 0 20px;
    }
    .sub_header__heading3 > h3 > a {
        color: #FFF !important;
    }
}

/* Medium devices: portrait */
@media (min-width: 768px) and (orientation:portrait) {
    a.button, button.button {
        font-size: 14px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 36px;
        line-height: 44px !important;
    }
    .navbar .navbar-brand {
        margin-left: 25px;
    }
    footer > div.container {
        max-width: 992px;
    }
    footer h2 {
        margin-bottom: 30px;
    }
    footer .footer__left {
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto 100%;
        padding-bottom: 50px;
        padding-top: 40px;
    }
    footer .footer__right {
        background-color: transparent;
        padding-left: 15px;
    }
    footer .footer__right .row {
        background-color: #FFF;
        height: 100%;
    }
    footer .footer__right .footer__social {
        background-color: #173753;
        height: 100%;
        margin-bottom: 0;
        margin-left: -10px;
        padding-top: 40px;
        transform: skew(-1.5deg);
    }
    footer .footer__right .footer__social > div {
        transform: skew(1.5deg);
        padding-right: 30px;
    }
    footer .footer__social a {
        font-size: 30px;
    }
    footer .footer__credits {
        background-color: #FFF;
        color: #0E2B8E;
        margin-left: -20px;
        padding-left: 20px;
        padding-top: 70px;
        transform: skew(3deg);
    }
    footer .footer__credits > div {
        transform: skew(-3deg);
    }
    .home__header .home__header__heading {
        max-width: 100%;
    }
    .home__header .home__header__heading {
        left: calc(50% - 450px);
    }

    .posts_grid__item {
        width: 295px;
    }

    .sub_header__middle {
        left: calc((100% - 960px) / 2);
        width: 1192px;
    }
    .sub_header__left {
        width: calc((100% - 960px) / 2);
    }
    .sub_header__right {
        right: calc((100% - 960px) / 2 - 960px);
        width: 960px;
    }
    .sub_header__featured_image {
    }
    .sub_header__middle .sub_header__featured_image > div {
        background-position: -55px 0;
    }
    .sub_header__middle .sub_header__featured_image > div > div {
        margin-left: 30px;
        margin-right: 300px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #navigation_menu > div > ul {
        padding-right: 170px;
    }

    footer > div.container {
        max-width: 1200px;
    }
    .home__header .home__header__heading {
        left: calc(50% - 540px);
    }
    .home .content {
        padding-top: 100px;
        position: relative;
        top: -50px;
    }

    .posts_grid__item {
        width: 354px;
    }

    .sub_header__middle {
        left: calc((100% - 1140px) / 2);
    }
    .sub_header__left {
        width: calc((100% - 1140px) / 2);
    }
    .sub_header__right {
        right: calc((100% - 1140px) / 2 - 1140px);
        width: 1140px;
    }
    .sub_header__featured_image {
    }
}

/* Extra Extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
    #navigation_menu > div > ul {
        padding-right: calc(100vw / 3);
    }

    .home .content {
        padding-top: 100px;
        position: relative;
        top: -95px;
    }
}

/* Touch screen, no mouse */
@media (hover: none) {
}

/* Desktop screen, with mouse */
@media (hover: hover) {
}

/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .posts_grid__item > div {
        height: 100%;
        opacity: 0;
        padding: 0 15px;
        top: 0;
    }
    .posts_grid__item:hover > div {
        opacity: 1;
    }
}

/* Hamburger button animation */
.navbar-toggler {
    background-color: #FFF;
    border: none;
    height: 46px;
    border-radius: 0;
}
.navbar-toggler:focus {
    outline: none;
}
.navbar-toggler .icon-bar {
    background-color: #000;
    transform: rotate(0deg) translate(0px, 0px);
    transition: ease all .2s;
}
.bg-dark .navbar-toggler .icon-bar {
    background-color: #FFF;
}
.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}
.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler[aria-expanded="true"] .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 4px);
    transition: ease all .2s;
}

.navbar-toggler[aria-expanded="true"] .icon-bar:nth-child(2) {
    width: 0;
    transition: ease all .2s;
}

.navbar-toggler[aria-expanded="true"] .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    transition: ease all .2s;
}