@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);

/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
    font-family: 'untitled-font-1';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix')
            format('embedded-opentype'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff')
            format('woff'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf')
            format('truetype'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1')
            format('svg');
    font-weight: normal;
    font-style: normal;
}

/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

.l-left {
    float: left;
}

.l-right {
    float: right;
}

.end {
    margin-top: 30px;
    font-size: 3em;
    font-weight: bold;
    opacity: 0;
    transform: translateY(300px);
    transition: opacity, transform 1s;
    transition-delay: 1s;
}

/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
    margin: 0;
    padding: 0;
    font-family: 'Alegreya Sans', Arial, sans-serif;
    text-transform: uppercase;
}

html {
    font-size: 150%;
}

body {
    color: black;
    letter-spacing: 0.18em;
}

a {
    color: black;
}

ul,
li {
    list-style-type: none;
}

audio {
    width: 80%;
}

section {
    text-align: center;
}

h2 {
    font-size: 4em;
    margin-bottom: 20px;
}

h3 {
    font-weight: 300;
    font-size: 2.5em;
}