BODY { min-width: 240px; }

#header {
    border-bottom: 1px solid #ccc;
    background: #f5f5f5;
    margin: 0;
    width: 100%;
    min-height: auto;
    overflow: hidden;
    }

    #header .container {
        margin: 0 auto;
        max-width: 1200px;
        }

    #header.wide .container {
        margin: unset;
        max-width: unset;
        }

    #header .logo {
        text-indent: -9999px;
        background: url(../i/head-logo.png?v=2) top left no-repeat;
        background-size: 100%;
        margin: 20px 25px 20px 20px;
        width: 277px;
        height: 56px;
        float: left;
        }

    #header .social {
        margin: 38px 25px 38px 25px;
        float: right;
        }

        #header .social .icon {
            margin-left: 12px;
            display: inline-block;

            -webkit-transition: all 350ms ease;
            -moz-transition: all 350ms ease;
            -ms-transition: all 350ms ease;
            -o-transition: all 350ms ease;
            transition: all 350ms ease;
            }

        #header .social .icon:hover {
            -moz-opacity: .75;
            filter: alpha(opacity=75);
            opacity: .75;

            -webkit-transition: all 350ms ease;
            -moz-transition: all 350ms ease;
            -ms-transition: all 350ms ease;
            -o-transition: all 350ms ease;
            transition: all 350ms ease;
            }

        #header .social IMG {
            vertical-align: middle;
            }

        #header .social .icon.menu {
            vertical-align: middle;
            background-image: url(../i/menu-icon.png);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 21px;
            width: 21px;
            height: 21px;
            display: inline-block;

            -webkit-transition: none;
            -moz-transition: none;
            -ms-transition: none;
            -o-transition: none;
            transition: none;
            }

        #header .social .icon.menu.active {
            background-position: 0 -21px;
            }

.side-menu {
    font-size: 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 50px 0 rgba(0,0,0,.2);
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 400px;
    display: none;
    overflow: auto;
    z-index: 9999;
    }

    .side-menu HR {
        border: none;
        border-top: 1px solid #ccc;
        margin: 2em 1em 2em 0;
        }

    .side-menu H3 {
        color: #1c1a44;
        font-size: 1.5em;
        font-weight: bold;
        letter-spacing: .05em;
        text-align: left;
        margin: 1.25em 0 .5em 16px;
        }

    .side-menu UL {
        list-style: none;
        text-align: left;
        margin: 1em 0 1em 32px;
        }

        .side-menu UL LI {
            line-height: 1em;
            list-style: none;
            margin: 1em 0;
            }

            .side-menu UL LI A { color: #0066c0; }
            .side-menu UL LI A:hover { color: #c45500; }

    .side-menu .close {
        color: #1c1a44;
        font-family: Arial;
        font-size: 32px;
        text-decoration: none;
        position: absolute;
        top: 16px;
        right: 12px;

        -webkit-transition: color 200ms ease-in-out;
        -moz-transition: color 200ms ease-in-out;
        -ms-transition: color 200ms ease-in-out;
        -o-transition: color 200ms ease-in-out;
        transition: color 200ms ease-in-out;
        }

    .side-menu .close:hover {
        color: #413f66;

        -moz-transform: scale(1.25);
        -webkit-transform: scale(1.25);
        -o-transform: scale(1.25);
        -ms-transform: scale(1.25);
        transform: scale(1.25);
        }

@media screen and (max-width: 960px) {

    #header .logo { margin: 13px 0 10px 10px !important; }
    #header .social { margin: 28px 10px 0 0 !important; }

    .side-menu {
        padding: 0;
        width: 100%;
        }

}

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

    #header .logo {
        margin: 7vw 0 0 10px !important;
        width: 55%;
        height: 11vw;
        }

    #header .social {
        margin: 8vw 10px 10vw 5px !important;
        }

        #header .social .icon {
            margin-left: 5px;
            }

        #header .social .icon.menu {
            background-size: 7vw;
            width: 7vw;
            height: 7vw;
            }

        #header .social .icon.menu.active {
            background-position: 0 -7vw;
            }

            #header .social .icon IMG {
                width: 7vw;
                }

}