@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Regular.woff);
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Medium.woff);
    font-weight: bold;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Bold.woff);
    font-weight: bolder;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Light.woff);
    font-weight: lighter;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Italic.woff);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-MediumItalic.woff);
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-BoldItalic.woff);
    font-weight: bolder;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-LightItalic.woff);
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: 'RobotoCondensed';
    src: url(fonts/Roboto-Condensed.woff);
    font-weight: normal;
}
@font-face {
    font-family: 'RobotoCondensed';
    src: url(fonts/Roboto-BoldCondensed.woff);
    font-weight: bold;
}

body, html {
    width:100%;
    height:100%;
}
body {
    font-family: Roboto, sans-serif;
    font-size: 13px;
    color:#fff;
    zoom:80%;
    background-color: #3F69AB;
}
#bg {
    width:100%;
    height:100%;
    position: fixed;
    background: url(bg.png) 0 0 no-repeat transparent;
    background-size: cover;
}
#root {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 100%;
    padding-bottom: 72px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#header { 
    width:100%;
    overflow: hidden;
}
#logo { 
    font-size: 7em;
    float: left;
    font-weight: bold;
    width: 50%;
    margin: 0.4em 0 0.8em 0;
    font-family: RobotoCondensed;
}
#slogan {
    font-size: 3em;
    width: 50%;
    text-align: left;
    float: left;
    margin: 1.2em 0;
    font-family: RobotoCondensed;
}
#slogan:first-letter {
    padding-right: 5px; 
}

#content {
    width: 100%;
    overflow: hidden;
    margin-bottom: 6em;
    margin-top: 3em;
}
#content > figure {
    width: 28%;
    float: left;
    margin: 0 8% 2% 0;
}
#content > figure.last {
    margin-right:0;
}
#content > figure > img {
    margin-bottom: 2em;
}
#content > figure > h1 {
    font-size: 2.1em;
    font-weight: bold;
    font-family: RobotoCondensed;
    margin-bottom: 1em;
}
#content > figure > p {
    font-size: 1.2em;
    padding-right: 15%;
}

#contacts {
    width: 100%;
    overflow: hidden;
    margin-bottom: 2em;
    font-size: 1.1em;
}
#contacts > * {
    margin-bottom: 1em;
}
#contacts > div {
    text-align: right;
    float:left;
    width:30%;
    font-weight: bold;
    text-transform: uppercase;
}
#contacts > address {
    text-align: left;
    float:left;
    width:70%;
}

#footer {
    position: relative;
    margin-top: -72px;
    height: 72px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    padding: 29px;
    font-size: 11px;
    font-family: Roboto;
    font-weight: lighter;
}