body {
    background:url('bg.jpg');
    background-color:black;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0 auto;
    text-align:center;
}

#container {
    max-width:1000px;
    margin:auto;
    background-color:rgba(0,0,0,.6);
    border:2px solid rgba(255,255,255,.3);
    box-shadow:0 0 12px #000;
}

header img {
    max-width:100%;
    margin:15px auto 50px auto;
}
.logo-short {
    display:none;
    box-shadow: 3px 3px 10px rgba(0,0,0,.6);
    margin-top:0;
}

nav > div {
    display:inline-block;
    position:relative;
}

.social {
    float:right;
}

.hvr {
    position:absolute;
    width:230px;
    height:149px;
    top:37px;
    left:13px;
    transition:background-color .3s ease-in-out;
    -webkit-transition:background-color .3s ease-in-out;
}

.hvr:hover {
    background-color:rgba(147,0,0,.5);
    cursor:pointer;
}

.social img {
    transition:transform .3s;
    -webkit-transition:-webkit-transform .3s;
}

.social img:hover {
    transform:rotate(360deg) scale(1.3,1.3);
    -webkit-transform:rotate(360deg) scale(1.3,1.3);
}

@media only screen and (max-width:496px) {
    .logo-short {
        display:block;
    }    
    .logo-large {
        display:none;
    }
}