@import url('/css/normalize.css');
@import url('/css/data-layout.css');
@import url('/css/data-menu.css');

html.scroll,
html.scroll body{
    overflow:auto;
}

body.stats{
    padding-top:80px
}

.main{
    padding:20px;
    max-width:1400px;
    margin:0 auto;
}

.main .overflow{
    overflow-x:scroll;
    overflow-y: hidden;
}
@media screen and (min-width: 1600px) {
    .main .overflow{
        overflow: hidden;
    }
}

h2{
    display:block;
    margin:0 0 30px;
    padding:0;
    font-family:"Baloo 2", sans-serif;
    font-size:21px;
    line-height:21px;
}
@media screen and (min-width: 1024px) {
    h2{
        margin:0 0 30px;
        font-size:36px;
        line-height:36px;
    }
}
.graph{
    background:#FFF;
    font-size:0;
    padding:20px 20px 34px 20px;
    text-align:center;
    border-radius: 5px;
    border:1px solid #EEE;
    margin-bottom:20px;
}
.graph-recrues ul{
    border-bottom:1px solid #BBB;
    height:360px;
    margin-bottom:50px;
    display: inline-block;
}
.graph-recrues ul li{
    height:360px;
    width:50px;
    display:inline-block;
    text-align:center;
    position:relative;
    font-size:12px;
    line-height:20px;
    font-weight:bold;
}
.graph-recrues ul li>span{
    background:#BBB;
    position:absolute;
    bottom:0;
    width:30px;
    left:10px;
    border-radius:3px 3px 0 0;
    overflow:hidden;
}
.graph-recrues ul li>span>span{
    background:#35986A;
    color:#FFF;
    position:absolute;
    bottom:0;
    border-radius:3px 3px 0 0;
    width:30px;
    left:0;
}
.graph-recrues ul li b{
    font-size:13px;
    line-height:20px;
    color:#000;
    font-weight:bold;
    position:absolute;
    bottom:-36px;
    left:0;
    width:50px;
}
.graph-recrues ul li b span{
    font-size:11px;
    line-height:14px;
    color:#666;
    font-weight:normal;
    display:block;
}

.graph-pays ul{
    font-size:12px;
}
.graph-pays ul li{
    display:block;
    width:100%;
    position:relative;
    text-align:left;
    clear:both;
    margin-bottom:10px;
    padding-bottom:10px;
    overflow: hidden;
    border-bottom:1px solid #DDD;
}
.graph-pays ul li b{
    font-size:12px;
    font-weight:normal;
    color:#FFF;
    background-color:#222;
    padding:3px 6px 4px;
    line-height:12px;
    display:inline-block;
    border-radius:3px;
    vertical-align:middle;
}

.graph-pays ul li strong{
    font-size:21px;
    font-weight:bold;
    display:block;
    margin-bottom:8px;
}
.graph-pays ul li a{
    font-size:13px;
    margin:2px 4px 2px 0;
    font-weight:bold;
    display:block;
    padding:0px 0px 0px 31px;
    width:74px;
    text-align:left;
    text-decoration:none;
    line-height:25px;
    float:left;
    color:#333;
    background:#F6F6F6;
    border:1px solid #BBB;
    border-radius:3px;
    position:relative;
}
.graph-pays ul li a:hover{
    background:#DDD;
}
.graph-pays ul li a:before{
    position:absolute;
    content:"";
    display:block;
    width:21px;
    height:15px;
    background-image: url(/images/flags.svg);
    background-repeat: no-repeat;
    background-position: 0px 0;
    background-size: 252px 30px;
    background-color: #FFF;
    border:1px solid #FFF;
    top:4px;
    left:4px;
}
.graph-pays ul li.pays-QC a:before{
    background-position:0px 0;
}
.graph-pays ul li.pays-US a:before{
    background-position:-21px 0;
}
.graph-pays ul li.pays-CA a:before{
    background-position:-105px 0;
}
.graph-pays ul li.pays-MX a:before {
    background-position:-42px 0;
}
.graph-pays ul li.pays-BR a:before {
    background-position:-84px 0;
}
.graph-pays ul li.pays-FR a:before {
    background-position:-63px 0;
}
.graph-pays ul li.pays-TU a:before {
    background-position:-126px 0;
}
.graph-pays ul li.pays-AU a:before{
    background-position:-147px 0;
}
.graph-pays ul li.pays-CH a:before {
    background-position:-0px -15px;
}
.graph-pays ul li.pays-TW a:before {
    background-position:-21px -15px;
}