/* FONTS */
@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-book.eot");
    src: url("../fonts/univia-pro-book.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-book.woff2") format("woff2"), url("../fonts/univia-pro-book.woff") format("woff"), url("../fonts/univia-pro-book.ttf") format("truetype"), url("../fonts/univia-pro-book.svg#youworkforthem") format("svg");
    font-weight: 400;
    /* Originally 350 */
    font-style: normal;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-book-italic.eot");
    src: url("../fonts/univia-pro-book-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-book-italic.woff2") format("woff2"), url("../fonts/univia-pro-book-italic.woff") format("woff"), url("../fonts/univia-pro-book-italic.ttf") format("truetype"), url("../fonts/univia-pro-book-italic.svg#youworkforthem") format("svg");
    font-weight: 400;
    /* Originally 350 */
    font-style: italic;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-light.eot");
    src: url("../fonts/univia-pro-light.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-light.woff2") format("woff2"), url("../fonts/univia-pro-light.woff") format("woff"), url("../fonts/univia-pro-light.ttf") format("truetype"), url("../fonts/univia-pro-light.svg#youworkforthem") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-light-italic.eot");
    src: url("../fonts/univia-pro-light-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-light-italic.woff2") format("woff2"), url("../fonts/univia-pro-light-italic.woff") format("woff"), url("../fonts/univia-pro-light-italic.ttf") format("truetype"), url("../fonts/univia-pro-light-italic.svg#youworkforthem") format("svg");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-medium.eot");
    src: url("../fonts/univia-pro-medium.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-medium.woff2") format("woff2"), url("../fonts/univia-pro-medium.woff") format("woff"), url("../fonts/univia-pro-medium.ttf") format("truetype"), url("../fonts/univia-pro-medium.svg#youworkforthem") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-medium-italic.eot");
    src: url("../fonts/univia-pro-medium-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-medium-italic.woff2") format("woff2"), url("../fonts/univia-pro-medium-italic.woff") format("woff"), url("../fonts/univia-pro-medium-italic.ttf") format("truetype"), url("../fonts/univia-pro-medium-italic.svg#youworkforthem") format("svg");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-bold.eot");
    src: url("../fonts/univia-pro-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-bold.woff2") format("woff2"), url("../fonts/univia-pro-bold.woff") format("woff"), url("../fonts/univia-pro-bold.ttf") format("truetype"), url("../fonts/univia-pro-bold.svg#youworkforthem") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'UniviaPro';
    src: url("../fonts/univia-pro-bold-bold-italic.eot");
    src: url("../fonts/univia-pro-bold-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/univia-pro-bold-bold-italic.woff2") format("woff2"), url("../fonts/univia-pro-bold-bold-italic.woff") format("woff"), url("../fonts/univia-pro-bold-bold-italic.ttf") format("truetype"), url("../fonts/univia-pro-bold-bold-italic.svg#youworkforthem") format("svg");
    font-weight: 700;
    font-style: italic;
}



html {
    font-family: "UniviaPro", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 18px;

    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

}


bold,
strong {
    font-weight: 700;
}


a {
    color: #369;
}

a:hover {
    text-decoration: none;
}

article,
aside,
footer,
header,
nav,
main,
section {
    display: block;
}

h1, p, ul {
    margin: 0 0 1rem 0;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    box-sizing: border-box;
}

header {
    background: #fff;
    min-height: 100px;
    height: 10vh;
}

    header .logo {
        margin: 0 auto;
        width: 145px;
        padding-top: 35px;
    }




main {
    background: black;
    height: 80vh;
    min-height: 700px;
    display: flex;
    flex-wrap: wrap;
}



    main article {
        flex: 1;
        position: relative;
        min-width: 250px;
        min-height: 700px;
        overflow: hidden;

    }
       

        main article .background {
            position:absolute;
            z-index:1;
            top:65px;
            bottom:0;
            left:0;
            right:0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 1;  
            transition: opacity ease-in 200ms;
        }

        main article:hover .background {
            opacity: 0.7;
        }


        main article header {
            background: rgba(43,86,137,0.9);
            min-height: 65px;
            height: auto;
            display: table;
            width: 101%;
        }
                main article header h1 {
                    color: #fff;
                    font-weight: normal;
                    text-align: center;
                    font-size: 22px;
                    line-height: 27px;
                    display: table-cell;
                    vertical-align: middle;
                    margin: 0 auto;
                }



        main article .body {
            z-index:5;
            bottom: 0;
            min-height: 55%;
            position: absolute;
            background: rgba(26,45,68,0.8);
            text-align: center;
            padding: 1rem;
            width: 100%;
            box-sizing: border-box;
        }

            main article .body p {
                color: #fff;
                font-size: 16px;
                font-weight: 300;
                line-height: 24px;
                min-height:140px;
            }

ul.links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.links li {
        display: block;
        margin: 0 0.35rem 0.75rem;
    }

        ul.links li a {
            display: inline-block;
            padding: 0.75rem 1rem ;
            color: black;
            background: rgba(255,204,51,1);
            border: 1px solid rgba(255,204,51,1);
            text-decoration: none;
            font-size:16px;
            transition: all ease-in 150ms;
        }
            ul.links li a:hover {
                color: #fff;
                border-color: #fff;
                background: rgba(255,204,51,0);
            }


footer {
    background: #fff;
    height: 6vh;
    min-height:60px;
}
    footer .copyright {
        text-align: right;
        padding: 2rem 1rem;
        font-size: 0.8rem;
    }




@media only screen and (max-width: 75em) {
    main article {
        min-width: 33%;
        min-height: 500px;
    }
    
}




@media only screen and (max-width: 65em) {
        main article {
            min-width: 50%;
            min-height: 500px;
        }

            main article .body {
                bottom: 0;
                min-height: 50%;
            }

                main article .body p {
                    min-height: unset;
                    max-width: 400px;
                    margin: 0 auto 1rem;
                }



        ul.links {
            position: absolute;
            bottom: 1rem;
            width: calc(100% - 2rem);
        }

            ul.links li {
                display: inline-block;
            }

                ul.links li a {
                    padding: 0.5rem 0.75rem;
                    font-size: 14px;
                }
    }



    @media only screen and (max-width: 40em) {
        main article {
            min-width: 100%;
        }


            main article .body {
                min-height: unset;
            }



        ul.links {
            position: static;
            width: 100%;
        }
    }