fabrice CSS

/* FONTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
    font-family: 'aileron-regular';
    src: url('/res/fonts/aileron-regular.woff') format('woff'),
         url('/res/fonts/aileron-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aileron-light';
    src: url('/res/fonts/aileron-light.woff') format('woff'),
         url('/res/fonts/aileron-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aileron-thin';
    src: url('/res/fonts/aileron-thin.woff') format('woff'),
         url('/res/fonts/aileron-thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aileron-heavy';
    src: url('/res/fonts/aileron-heavy.woff') format('woff'),
         url('/res/fonts/aileron-heavy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}





/* NAVBAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#navbar_box {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;

    height: 80px;

    box-shadow: 0px 1px 10px grey; /* x, y, blur */

    overflow: hidden;
    z-index: 1000;
}

.navbar{
    background-color: white;
}



/*Branding*/
#brand_box {
    float:left;

    margin-top: 25px;
    margin-bottom: 25px;

    margin-left: 25px;
    margin-right: 25px;
}

.brandtext {
    font-family: aileron-heavy;
    font-size: 30px;
    color: black;

    text-align: center;
    text-decoration: none;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/*Menu*/
#textbutton_box {
    float: left;

    margin-top: 31px;
    margin-bottom: 31px;

    margin-left: 10px;
    margin-right: 10px;
}

.textbutton {
    font-family: aileron-thin;
    font-size: 18px;
    color: black;

    text-align: center;
    text-decoration: none;

    background:none;
    border:none;

    margin-right: 5px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.textbutton:hover {
    color: rgba(0, 0, 0, 0.5); !important;
}

.textbutton:focus {
    outline:0;
}/*hide blue button outlines*/



/*Social Links*/
#icon_box {
    float: right;

    margin-top: 25px;
    margin-bottom: 25px;

    margin-left: 25px;
    margin-right: 25px;
}


.icon {
    float: right; /*inverse order*/
    margin-right: 10px; /*space between*/

    display: block;
    width: 30px;
    height: 30px;
}



#facebook {
    background: url(/res/icons/facebook-black.svg);
    background-size: 30px 30px;
}
#twitter {
    background: url(/res/icons/twitter-black.svg);
    background-size: 30px 30px;
}
#instagram {
    background: url(/res/icons/instagram-black.svg);
    background-size: 30px 30px;
}
#snapchat {
    background: url(/res/icons/snapchat-black.svg);
    background-size: 30px 30px;
}
#youtube {
    background: url(/res/icons/youtube-black.svg);
    background-size: 30px 30px;
}
#spotify {
    background: url(/res/icons/spotify-black.svg);
    background-size: 30px 30px;
}
#soundcloud {
    background: url(/res/icons/soundcloud-black.svg);
    background-size: 30px 30px;
}


/*color on hover*/
#facebook:hover {
    background: url(/res/icons/facebook-color.svg);
    background-size: 30px 30px;
}
#twitter:hover {
    background: url(/res/icons/twitter-color.svg);
    background-size: 30px 30px;
}
#instagram:hover {
    background: url(/res/icons/instagram-color.svg);
    background-size: 30px 30px;
}
#snapchat:hover {
    background: url(/res/icons/snapchat-color.svg);
    background-size: 30px 30px;
}
#youtube:hover {
    background: url(/res/icons/youtube-color.svg);
    background-size: 30px 30px;
}
#spotify:hover {
    background: url(/res/icons/spotify-color.svg);
    background-size: 30px 30px;
}
#soundcloud:hover {
    background: url(/res/icons/soundcloud-color.svg);
    background-size: 30px 30px;
}





/* GRID
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}



/*larger than 400px*/
@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0; }
}



/*larger than 550px*/
@media (min-width: 550px) {
    .container {
        width: 80%;
    }

    .column, .columns {
        margin-left: 4%;
    }

    .column:first-child, .columns:first-child {
        margin-left: 0;

    }

    /*Columns*/
    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }

    .one-third.column               { width: 30.6666666667%; }
    .two-thirds.column              { width: 65.3333333333%; }

    .one-half.column                { width: 48%; }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns          { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns          { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns        { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns          { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns         { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

    .offset-by-one-third.column,
    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

    .offset-by-one-half.column,
    .offset-by-one-half.columns     { margin-left: 52%; }
}