@import '../libraries/sly/sly.layer.css';
@import '../libraries/sly/sly.unstyle.css';

@font-face {
    font-family: 'Avenir';
    src: url('../font/Avenir.ttc');
}
@font-face {
    font-family: 'KozGoPro';
    src: url('../font/KozGoPro-Regular.otf');
}

* { box-sizing: border-box;}
html, body { height:100%; }
body {
    padding:0; margin:0;
    font-family: KozGoPro; color: #222;
}

#background {
    height:100%; overflow: auto;
    background-image: url('../images/bg-landing.jpg');
    background-size: cover;
    background-position: left bottom;
}

#centered { width:100%; max-width:800px; padding:5px 5px 5% 5px;}
#logo { display:block; margin:0 auto; width:100%; max-width:420px; }
#content {
    background-color: white;
    width:100%; max-width:320px;
    margin:40px auto 0; padding:20px 5px;
    text-align: center;
}

#content > h1 {
    border-bottom:2px solid #ddd;
    display: inline-block;
    font-family: Avenir; font-size:20px;
    line-height:40px; text-transform: uppercase;
}

#languages > li > a {
    font-weight:bold; font-size:18px;
    color:#A12816; line-height:45px;
    cursor:pointer;
}
#languages > li > a:hover { color:#b1af6a; }

@media (max-width:500px) {
    #logo { max-width:250px; }
    #content { max-width:200px; margin:10px auto 0; padding:5px}
    #content > h1 { font-size:15px }
    #languages > li > a { font-size:14px; line-height:35px;}
}