@font-face {
    font-family: gothmmed;
    font-style: normal;
    src: url('../fonts/gotham/gothmmed.eot');
    src: url('../fonts/gotham/gothmmed.eot?#iefix') format('embedded-opentype'), url('../fonts/gotham/gothmmed.woff') format('woff'), url('../fonts/gotham/gothmmed.ttf') format('truetype'), url('../fonts/gotham/gothmmed.svg') format('svg');
    font-weight: normal;
}

@font-face {
    font-family: GothamLight;
    font-style: normal;
    src: url('../fonts/gotham/GothamLight.eot');
    src: url('../fonts/gotham/GothamLight.eot?#iefix') format('embedded-opentype'), url('../fonts/gotham/GothamLight.woff') format('woff'), url('../fonts/gotham/GothamLight.ttf') format('truetype'), url('../fonts/gotham/GothamLight.svg') format('svg');
    font-weight: normal;
}


@font-face {
    font-family: GothamBook;
    font-style: normal;
    src: url('../fonts/gotham/GothamBook.eot');
    src: url('../fonts/gotham/GothamBook.eot?#iefix') format('embedded-opentype'), url('../fonts/gotham/GothamBook.woff') format('woff'), url('../fonts/gotham/GothamBook.ttf') format('truetype'), url('../fonts/gotham/GothamBook.svg') format('svg');
    font-weight: normal;
}

* {
    box-sizing: border-box;
    font-family: GothamLight;
}

body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    font-family: gothmmed;
}

.main {
    width: 100%;
    float: left;
    position: relative;
    background: #F3F3F3;
}

.header {
    width: 100%;
    float: left;
}

.logo {
    width: 200px;
    margin: 30px auto;
}

    .logo img {
        width: 100%;
    }

.title {
    width: 100%;
    float: left;
    padding: 0;
    padding-bottom: 30px;
}

    .title h1 {
        text-align: center;
        color: #3d3d3d;
        text-transform: uppercase;
    }

    .header h3 {
        text-align: center;
    }

.img-main {
    width: 100%;
    float: left;
    padding: 30px 0;
}

.img-col {
    width: 25%;
    float: left;
    padding: 20px;
    position: relative;
}

    .img-col a {
        display: block;
        float: left;
        width: 100%;
        height: 250px;
        position: relative;
    }

        .img-col a.portrait {
            height: 500px;
        }

        .img-col a img {
            width: 100%;
            height: 100%;
        }

.download {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: 0.5s ease all;
}

.filter {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.download .img {
    width: 50px !important;
    height: 50px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 10px auto;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.img-col:hover .download {
    opacity: 1;
}


#back-to-top {
    position: fixed;
    bottom: 10px; 
    right: 10px;
    width: 40px;
    display: block;
    z-index: 100;
}

#back-to-top img {
    width: 100%;
}

@media (max-width: 1300px) {
    .img-col a {
        height: 220px;
    }

    
}


@media (max-width: 1200px) {
    .img-col {
        width: 33.333%;
    }
}

@media (max-width: 800px) {
    .img-col {
        width: 50%;
        padding: 10px;
    }
    .title h1 {
    text-align: center;
    color: #3d3d3d;
    text-transform: uppercase;
    font-size: 30px;
}
}

@media (max-width: 600px) {
    .img-col a {
    height: 180px;
}
    #back-to-top {
        width: 30px;
    }
    .title h1 {
    text-align: center;
    color: #3d3d3d;
    text-transform: uppercase;
    font-size: 20px;
}
}

@media (max-width: 400px) {
    .img-col {
        width: 100%;
        padding: 10px;
    }
    #back-to-top {
        width: 20px;
    }
}