body {
    font-family: "jubilat",sans-serif;/*"Adobe Caslon Pro"*/
    line-height: 1.5em;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    color: black;
    background-color: #F6F7F7;
}

h1 {
    font-size: 1.6em;
    color: black;
}

h2 {
    font-size: 1.4em;
    color: black;
}

/*
h2 {
    font-size: 1.2em;
    color: dodgerblue;
} */

h3 {
    text-transform: uppercase;
    border-left: 3px inset darkslategrey;
    padding-left: 7px;
    color: royalblue;
    font-weight: bold;
    line-height: 1.5em;
    font-size: 1rem;
    margin-bottom: 0;

}

.homepage p {
    margin-top: 0;
}

p span.level {
    text-transform: uppercase;
    border-left: 3px inset darkslategrey;
    padding-left: 7px;
    color: royalblue;
    font-weight: bold;
}

/* Skip navigation */

.invisible {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: -3000px;
    top: -3000px;
    display: inline;
}

/* Navigation */

#container {
    clear: both;
}

/* Logo */

.logo {
    float: right;
}

/* Form */

form {
    line-height: 2.3em;
    margin: 0 0 3em 0;
}

fieldset {
    border: 1px groove royalblue;
    padding: 0 1.5em 1.5em 1.5em;
}

legend {
    text-transform: uppercase;
}

label {
    float: left;
}

input, textarea {
    width: 100%;
    float: left;
    border: 1px solid rgb(91, 159, 164);
}

input {
    height: 2em;
}

textarea {
    height: 6em;
    margin-bottom: 1.5em;
}

textarea#ctrl_5 {
    height: 10em;
}

select {
    margin: 0 0 1.5em 3em;
}

.captcha_text {
    padding-left: 1em;
}

.submit {
    background-color: royalblue;
    width: 50.5%;
    margin: 1em 0 0 0;
    float: left;
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 0.8em 0 2em;
    letter-spacing: 1px;
}

.submit:hover {
    background-color: darkslategrey;

}

p.error {
    font-size: 1em;
    color: royalblue;
    margin-left: 1em;
    display: inline;
}


/* Footer */

#wrapper {
    border-bottom: 6px solid royalblue;
}

footer a:link {
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    border-bottom: 1px dotted white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: none;
}

footer a:visited {
    color: white;
}

@media screen and (max-width: 310px) {
    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 96%;
        float: left;
        margin: 1.5% 2% 1.5% 2%;
    }

    ul.level_1, .close-menu {
        display: none;
    }

    #header:target ul.level_1 {
        display: block;
    }

    #header:target .open-menu {
        display: none;
    }

    #header:target .close-menu {
        display: block;
    }

    div #header .open-menu  {
        background-color: royalblue;
        width: 100%;
        float: left;
        color: white;
        padding: 1.3em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header .close-menu {
        width: 100%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1.3em 0 .7em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .close-menu {
        width: 100%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 .5em 1em;
        margin-bottom: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mod_navigation {
        margin:0 0 0 0;
        padding: 0 0 0 0;
        width: 100%;
        clear: both;

    }

    .sticky .mod_navigation {
        padding: 0 0 0 0;
        width: 100%;
    }

    .mod_navigation ul {
        margin: 0;
        padding: 0 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .sticky .mod_navigation ul {
        padding: 0 0 0 0;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 1em 2em 0 1em;
        float: left;
        height: 1.8em;
        text-align: left;
        width: 100%;
        background-color: royalblue;
        border-top: 1px solid white;


    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 3.5em;
        font-size: 1em;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 4em;
        background-color: royalblue;
        font-size: 1.2em;
        z-index: 1;
        transition: all 0.4s ease;
    }

    .logo {
        position: relative;
        top: 50%;
        transform: translateY(10%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;
        padding: .7em 1.5% 0 1em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1.4em;

    }

    header a {
        color: white;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 96%;
        float: left;
        padding: 1.5% 2% 1.5% 2%;
        background-color: royalblue;
        color: white;
        border-bottom: 1px solid white;
    }

    footer .ce_text a {
        text-decoration: none;
        border-bottom: 1px dotted white;
    }

}

@media screen and (max-width: 400px) and (min-width: 311px) {

    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 96%;
        float: left;
        margin: 1.5% 2% 1.5% 2%;
    }

    ul.level_1, .close-menu {
        display: none;
    }

    #header:target ul.level_1 {
        display: block;
    }

    #header:target .open-menu {
        display: none;
    }

    #header:target .close-menu {
        display: block;
    }

    div #header .open-menu  {
        background-color: royalblue;
        width: 30%;
        float: left;
        color: white;
        padding: 1.5em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .open-menu  {
        background-color: royalblue;
        width: 30%;
        float: left;
        color: white;
        padding: 1em 0 .2em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 .2em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: .3em 0 .2em 1em;
        margin-bottom: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mod_navigation {
        margin:0 0 0 0;
        padding: .3em 0 0 0;
        width: 50%;
        clear: both;

    }

    .sticky .mod_navigation {
        padding: 0 0 0 0;
        width: 50%;
    }

    .mod_navigation ul {
        margin: 0;
        padding: 0 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .sticky .mod_navigation ul {
        padding: 0 0 0 0;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 1em 2em 0 1em;
        float: left;
        height: 1.8em;
        text-align: left;
        width: 100%;
        background-color: royalblue;
        border-top: 1px solid white;


    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 3.5em;
        font-size: 1em;
        z-index: 1;
    }

    /* Trasnform code fixes bug with iOS 9 on iPhone that makes the sticky header dissapear for a second on scroll down */ 

    header {
        width: 100%;
        height: 4em;
        background-color: royalblue;
        font-size: 1.2em;
        z-index: 1;
        transition: all 0.4s ease;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -o-transform: translate3d(0px, 0px, 0px);
        -moz-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    .logo {
        position: relative;
        top: 50%;
        transform: translateY(10%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;
        padding: .8em 1.5% 0 1em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1.4em;

    }

    header a {
        color: white;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 96%;
        float: left;
        padding: 1.5% 2% 1.5% 2%;
        background-color: royalblue;
        color: white;
        border-bottom: 1px solid white;
    }

    footer .ce_text a {
        text-decoration: none;
        border-bottom: 1px dotted white;
    }




}

@media screen and (max-width: 450px) and (min-width: 401px) {

    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 96%;
        float: left;
        margin: 1.5% 2% 1.5% 2%;
    }

    ul.level_1, .close-menu {
        display: none;
    }

    #header:target ul.level_1 {
        display: block;
    }

    #header:target .open-menu {
        display: none;
    }

    #header:target .close-menu {
        display: block;
    }

    div #header .open-menu  {
        background-color: royalblue;
        width: 30%;
        float: left;
        color: white;
        padding: 1.5em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .open-menu  {
        background-color: royalblue;
        width: 30%;
        float: left;
        color: white;
        padding: 1em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1.3em 0 .2em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 .2em 1em;
        margin-bottom: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mod_navigation {
        margin:0 0 0 0;
        padding: .3em 0 0 0;
        width: 50%;
        clear: both;

    }

    .sticky .mod_navigation {
        padding: 0 0 0 0;
        width: 50%;
    }

    .mod_navigation ul {
        margin: 0;
        padding: 0 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .sticky .mod_navigation ul {
        padding: 0 0 0 0;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 1em 2em 0 1em;
        float: left;
        height: 1.8em;
        text-align: left;
        width: 100%;
        background-color: royalblue;
        border-top: 1px solid white;


    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 3.5em;
        font-size: 1em;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 4em;
        background-color: royalblue;
        font-size: 1.2em;
        z-index: 1;
        transition: all 0.4s ease;
    }

    .logo {
        position: relative;
        top: 50%;
        transform: translateY(10%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;
        padding: .7em 1.5% 0 1em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1.4em;

    }

    header a {
        color: white;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 96%;
        float: left;
        padding: 1.5% 2% 1.5% 2%;
        background-color: royalblue;
        color: white;
        border-bottom: 1px solid white;
    }

    footer .ce_text a {
        text-decoration: none;
        border-bottom: 1px dotted white;
    }




}

@media screen and (max-width: 550px) and (min-width: 451px) {

    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 46%;
        float: left;
        margin: 1.5% 2% 1.5% 2%;
    }


    ul.level_1, .close-menu {
        display: none;
    }

    #header:target ul.level_1 {
        display: block;
    }

    #header:target .open-menu {
        display: none;
    }

    #header:target .close-menu {
        display: block;
    }

    div #header .open-menu  {
        background-color: royalblue;
        width: 30%;
        float: left;
        color: white;
        padding: 1em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1.5em 0 1.25em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .close-menu {
        width: 30%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 1em 1em;
        margin-bottom: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mod_navigation {
        margin:0 0 0 0;
        padding: .3em 0 0 0;
        width: 38%;

    }

    .sticky .mod_navigation {
        padding: 0 0 0 0;
        width: 38%;
    }

    .mod_navigation ul {
        margin: 0;
        padding: 0 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .sticky .mod_navigation ul {
        padding: 0 0 0 0;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 1em 2em 0 1em;
        float: left;
        height: 1.8em;
        text-align: left;
        width: 100%;
        background-color: royalblue;
        border-top: 1px solid white;


    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 3.5em;
        font-size: 1em;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 4em;
        background-color: royalblue;
        font-size: 1.2em;
        z-index: 1;
        transition: all 0.4s ease;
    }

    .logo {
        position: relative;
        top: 50%;
        transform: translateY(10%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;
        padding: .7em 1.5% 0 1em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1.4em;

    }

    header a {
        color: white;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 96%;
        float: left;
        padding: 1.5% 2% 1.5% 2%;
        background-color: royalblue;
        color: white;
        border-bottom: 1px solid white;
    }

    footer .ce_text a {
        text-decoration: none;
        border-bottom: 1px dotted white;
    }




}

@media screen and (min-width: 551px) and (max-width: 799px)  {
    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 46%;
        float: left;
        margin: 1.5% 2% 1.5% 2%;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 46%;
        float: left;
        padding: 1.5% 2% 1.5% 2%;
        background-color: royalblue;
        color: white;
    }

}

@media screen and (min-width: 551px) and (max-width: 1049px) {
    ul.level_1, .close-menu {
        display: none;
    }

    #header:target ul.level_1 {
        display: block;
    }

    #header:target .open-menu {
        display: none;
    }

    #header:target .close-menu {
        display: block;
    }

    div #header .open-menu  {
        background-color: royalblue;
        width: 60%;
        float: left;
        color: white;
        padding: 1em 0 1em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header .close-menu {
        width: 60%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 .5em 1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    div #header.sticky .close-menu {
        width: 60%;
        background-color: royalblue;
        float: left;
        color: white;
        padding: 1em 0 .5em 1em;
        margin-bottom: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .mod_navigation {
        margin:0 0 0 0;
        padding: 0 0 0 0;
        width: 35%;
       /* clear: both */ ;

    }

    .sticky .mod_navigation {
        margin:0 0 0 0;
        padding: 0 0 0 0;
        width: 35%;
        float: left;
        background-color: royalblue;
        /*clear: both*/ ;

    }

    .mod_navigation ul {
        margin: 0;
        padding: 4em 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .sticky .mod_navigation ul {
        margin: 0;
        padding: .7em 0 0 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 1em 2em 0 1em;
        float: left;
        height: 1.8em;
        text-align: left;
        width: 100%;
        background-color: royalblue;
        border-top: 1px solid white;


    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    #wrapper {
        border-bottom: none;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 3.5em;
        font-size: 1rem;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 4em;
        background-color: royalblue;
        z-index: 1;
        transition: all 0.4s ease;
        line-height: normal;
        font-size: 1.2em;
    }

    .logo {
        position: relative;
        top: 50%;
        transform: translateY(20%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;
        padding: 7px 1.5% 0 1.5%;
        margin-top: .2em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1.4em;


    }

    header a {
        color: white;
    }

    /* Footer */

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 47%;
        float: left;
        padding: 1.5% 1.5% 1.5% 1.5%;
        background-color: royalblue;
        color: white;
    }

}

    @media screen and (min-width: 800px) and (max-width: 1199px) {
    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 30%;
        float: left;
        margin: 1.5% 1.5% 1.5% 1.5%;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 30%;
        float: left;
        padding: 1.5% 1.5% 1.5% 1.5%;
        background-color: royalblue;
        color: white;
    }

}

@media screen and (min-width: 1050px) and (max-width: 1199px) {
    div .open-menu, div .close-menu {
        display: none;
    }

    .mod_navigation {
        margin:0;
        padding: 1.2em 0 0 1.5%;
        width: 78%;
        height: 2em;
        float: left;

    }

    .mod_navigation ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 0 2em 0 0;
        float: left;
        height: 1.8em;
        text-align: left;

    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    .mod_navigation ul li a:hover {
        text-decoration: underline;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 55px;
        font-size: 1rem;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 100px;
        background-color: royalblue;
        z-index: 1;
        transition: all 0.4s ease;
        font-size: 1.2rem;
    }

    header a {
        color: white;
    }

    .logo {
        padding: 25px 1.5% 2px 1em;
        position: relative;
        top: 50%;
        transform: translateY(20%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1em;

    }



}


@media screen and (min-width: 1200px) {
    .first-column.mod_article, .second-column.mod_article, .third-column.mod_article, .fourth-column.mod_article, .fifth-column.mod_article {
        width: 17%;
        float: left;
        margin: 1.5% 1.5% 1.5% 1.5%;
    }

    div .open-menu, div .close-menu {
        display: none;
    }

    .mod_navigation {
        margin:0;
        padding: 1.2em 0 0 1.5%;
        width: 70%;
        height: 2em;
        float: left;

    }

    .mod_navigation ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .mod_navigation ul li {
        margin: 0;
        padding: 0 2em 0 0;
        float: left;
        height: 1.8em;
        text-align: left;

    }

    .mod_navigation ul li a:link, .mod_navigation ul li .active {
        display: block;
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
    }

    .mod_navigation ul li a:hover {
        text-decoration: underline;
    }

    header.sticky {
        top: 0;
        position: fixed;
        height: 55px;
        font-size: 1rem;
        z-index: 1;
    }

    header {
        width: 100%;
        height: 100px;
        background-color: royalblue;
        z-index: 1;
        transition: all 0.4s ease;
        font-size: 1.2rem;
    }

    .logo {
        padding: 25px 1.5% 2px 1em;
        position: relative;
        top: 50%;
        transform: translateY(20%);
        transition: all 0.4s ease;
        background-color: white;
        border-top-left-radius: 2em;

    }

    .sticky .logo {
        top: 0;
        transform: translateY(0%);
        padding: 0 1.5% 0 1em;

    }

    header a {
        color: white;
    }

    /* Regular page */

    .regularPage {
        width: 50%;
        float: right;
        margin: 0 25% 0 25%;
    }

    footer {
        clear: both;
    }

    footer .ce_text {
        width: 17%;
        float: left;
        padding: 1.5% 1.5% 1.5% 1.5%;
        background-color: royalblue;
        color: white;
    }

    footer .ce_text a:link {
        text-decoration: none;
    }

    footer .ce_text a:hover {
        text-decoration: none;
    }

    footer .ce_text .col-6 {
        display: none;
    }

}

/* Images */

/* Sets img well within the figure */

figure {
    display: block;
    margin: 0;
    padding: 0;

}

img {
    border: 0;
}

.image_container img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}


.mod_article .ce_text figure img {
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mod_article .ce_text figure img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;

}