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

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

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

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

html {
    font-size:115%;
}

body {
    line-height: 1.5em;
    min-width: 250px;
    color: #424242;
    font-family: Raleway, sans-serif;
}

section {
    overflow: auto;
    padding: 20px 0;
}

h1, h2 {
    line-height: 1.5em;
    margin: 0.5em 0;
    font-family: 'Poiret One';
}

h1 {
    font-size: 2.8rem;
    margin: 0;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    font-weight: 100;
}

p {
    margin: 0;
    padding: 20px;
}

a,
a:hover,
a:active {
    color: #ec407a;
}

.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}

#site-header {
    position: relative;
    overflow: auto;
    height: 275px;
    background-color: #fff;
    background-image: url('../images/wallpaper640.jpg');
    background-repeat: no-repeat;
    background-size: auto 426px;
    background-position: top center;
}

#site-header h1 {
    margin: 0;
    padding: 0 20px 0 60px;
    line-height: 100px;
    text-align: right;
    background-color: rgba(255,255,255, 0.4);
    background-image: url('../images/logo.png');
    background-position: 15px center;
    background-repeat: no-repeat;
}

#site-header div {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10em;
    padding: 0.2em;
    margin: 20px;
    background-color: #ec407a;
    color: #fff;
}

#site-header span {
    line-height: 1em;
    font-size: 1.95em;
    font-weight: 200;
}

#concept {
    text-align: center;
}

#indicator {
    background-color: #eeeeee;
}

#indicator aside {
    font-size: 0.85em;
}

#usage {

}

#usage ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#usage li {
    padding: 20px;
    box-sizing: border-box;
}
#usage li > p {
    border-radius: 10px;
    background-color: #eeeeee;
    text-align: center;
}

#usage li > p:before {
    content: '';
    display: block;
    height: 175px;
    background-color: #eeeeee;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 20px;
}
#usage #eurosima > p:before {
    background-image: url('../images/logo-eurosima.png');
}
#usage #section > p:before {
    background-image: url('../images/logo-section.png');
}

#site-footer {
    font-size: 0.8em;
    overflow: auto;
    background-color: #424242;
    color: #eeeeee;
    padding: 10px;
}

#site-footer p {
    padding: 10px;
    text-align: center;
}
#site-footer a {
    color: inherit;
}

@media screen and (min-width: 640px) {
    
    html {
        font-size: 125%;
    }

    #site-header {
        height: 350px;
        background-image: url('../images/wallpaper1920.jpg');
        background-size: cover;
    }

    #site-header div {
        font-size: 1.3em;
    }
}

@media screen and (min-width: 800px) {
    #usage ul:after {
        content: '';
        clear: both;
    }

    #usage li {
        width: 50%;
        float: left;
    }
    #usage li:nth-child(n+1) {
        padding-right: 10px;
    }
    #usage li:nth-child(n+2) {
        padding-left: 10px;
    }
}

@media screen and (min-width: 1200px) {

    #site-header {
        height: 500px;
    }

    #site-header div {
        font-size: 1.5em;
    }
}