header #hamb{
    float: right;
    font-size: 1.3em;
    text-transform: uppercase;
    color: #00a8f4;
    font-weight: bold;
    cursor: pointer;
    height: 30px;
    width: 30px;
    margin: 17px 0 0 15px;
    display: none;
}

header #hamb strong{
    margin: -9px 0 0 38px;
    display: block;
}

header #hamb span,
header #hamb span:before,
header #hamb span:after{
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 30px;
    background: #00a8f4;
    position: absolute;
    display: block;
    content: '';
}

header #hamb span:before{
    top: -8px; 
}

header #hamb span:after{
    bottom: -8px;
}

header #hamb span,
header #hamb span:before,
header #hamb span:after{
    transition: all 500ms ease-in-out;
}

header #hamb.active span{
    background-color: transparent;
}

header #hamb.active strong{
    visibility: hidden;
}

header #hamb.active span:before,
header #hamb.active span:after{
    top: 0;
}

header #hamb.active span:before{
    transform: rotate(45deg);
}

header #hamb.active span:after{
    transform: rotate(-45deg);
}

/* Responsive design
------------------------------------------- */
@media (max-width: 1150px){
    .wrap{
        width: 100%;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #example .col-align-center img,
    #where .wrap img{
        width: 100%;
    }
    
    header nav ul li a{
        margin-left: 10px;
    }
    
    #expert .wrap{
        background-position: -10% bottom;
    }
}

@media (max-width: 1100px){
    #cover-home{
        display: none;
    }
    
    header nav.home ul li a{
        color: #5ba6d6;
    }
    
    #example blockquote p.author{
        width: 30%;
    }
    
    #example blockquote div.content{
        width: 70%;
    }
    
    #who h3,
    #development h3,
    #example h3,
    #guide-bar h3,
    #study h3,
    #company h3,
    #operation h3,
    #where h3,
    #content.landing h2{
        font-size: 1.8em;
    }
    
    #content.landing h1{
        font-size: 1.5em;
    }
    
    #statistics table td strong{
        font-size: 1.5em;
    }
    
    #statistics table td{
        font-size: 1.3em;
    }
    
    #expert .wrap{
        background-position: -50% bottom;
    }
    
    #operation img.left{
        width: 475px;
        margin: 30px 30px 30px 0px;
    }
}

@media (max-width: 1000px){
    #home .wrap .box{
        margin-right: 0;
    }
    
    #guide-bar h3{
        font-size: 1.5em;
    }
    
    #guide-bar.blue h4{
        font-size: 1.2em;
        margin: 5px 0 20px;
    }
    
    #expert{
        height: auto;
    }
    
    #expert .wrap{
        background: none;
        padding: 40px 0 !important;
        height: auto;
    }
    
    #expert .wrap .box{
        float: none;
        margin: 0 auto;
    }
    
    #expert h1{
        font-size: 2em;
    }
    
    #expert p{
        font-size: 1.5em;
        margin: 20px 0;
    }
}

@media (max-width: 950px){
    #home .wrap{
        background: url('../img/background_home_mickael-transparent.png') center top no-repeat;
        padding: 130px 0 75px 0 !important;
    }
    
    #home .wrap .box{
        float: none;
        margin: 0 auto;
    }
    
    #home,
    #home .wrap{
        height: auto;
    }
    
    #home h1{
        font-size: 2em;
    }
    
    #home p{
        font-size: 1.5em;
        margin: 20px 0;
    }
    
    #press,
    #quality,
    #development{
        
        display: none;
    }
    
    #operation img.left{
        width: 400px;
    }
}

@media (max-width: 900px){
    #who{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    #who .wrap, #who .wrap.shown{
        background: none;
    }
    
    #who .wrap .col-50{
        width: 100%;
        margin: 0;
    }
    
    #study img.right,
    #company img.right{
        margin: 15px auto;
        float: none;
        display: block;
    }
    
    #operation img.left{
        margin: 0 auto 30px auto;
        float: none;
        display: block;
        width: auto;
    }
    
    #actuality .button{
        padding: 12px 15%;
    }
    
    #example div.container{
        width: 100%;
    }
    
    #guide-bar .wrap-form.col-50{
        width: 90%;
    }
}

@media (max-width: 850px){
    #content article,
    #content aside,
    #content div.container-list,
    #advices .item, #videos .item{
        float: none;
        width: 100%;
    }
    
    #advices .item, #videos .item{
        padding: 0;
    }
    
    #content aside .box-content img.cover{
        width: 50%;
        float: left;
        margin-right: 20px;
    }
    
    #content article{
        padding: 20px 10px;
    }
    
    #home .wrap .box{
        width: 550px;
    }
    
    /*#home .wrap .box .press{
        display: none;
    }*/

    #home .wrap .box .press2{
        display: none;
    }
    
    #home .wrap .box div.guide{
        padding: 0;
    }
}

@media (max-width: 750px){
    #company img.left{
        margin: 15px auto;
        float: none;
        display: block;
        width: auto;
    }
    
    #actuality div.left,
    #actuality div.right{
        float: none;
        width: 100%;
        padding: 10px 0;
    }
}

@media (max-width: 700px){
    #guide-bar table{
        border-spacing: 0;
    }
    
    #guide-bar table td{
        display: block;
        width: 100%;
        margin: 12px 0;
    }
    
    #example blockquote p.author img{
        display: none;
    }
}

@media (max-width: 650px){
    #expert .wrap .box{
        width: 100%;
        padding: 0 20px;
    }
    
    #operation img.left{
        width: 100%;
    }
    
    #content.landing .video{
        width: 100%;
    }
    
    #content.landing h1,
    #content.landing h2{
        font-size: 1.3em;
    }
    
    #guide-bar.blue h3{
        font-size: 1.2em;
    }
    
    #content.landing form{
        width: 100%;
    }
    
    header nav ul li.who{
        display: none;
    }
}

@media (max-width: 600px){
    #home .wrap .box{
        width: 100%;
        padding: 0 20px;
    }
    
    #study img.right,
    #company img.right{
        width: 100%;
    }
    
    #expert .wrap .box img{
        display: none;
    }
    
    #content aside .box-content img.cover{
        width: 100%;
        float: none;
        margin-right: 0;
    }
    
    
    #guide-bar .wrap-form.col-50{
        width: 100%;
    }
}

@media (max-width: 500px){
    .wrap{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    #content aside .box-content,
    #content div.container-list .article{
        padding: 10px;
    }
    
    #content article{
        padding: 10px;
    }
    
    header nav ul li a{
        margin: 0;
    }
    
    #statistics{
        padding: 0;
    }
    
    #statistics table{
        border-spacing: 0;
    }
    
    #statistics table td{
        display: block;
        width: 100%;
        margin: 30px 0;
    }
    
    #example .button,
    #operation .button{
        padding: 12px 20px;
    }
    
    #home .wrap{
        padding-top: 190px !important;
    }
    
    #guide-bar.blue img{
        display: none;
    }
    
    #guide-bar .wrap-form{
        width: 100%;
    }
}

@media (max-width: 400px){
    header nav ul li a{
        padding: 32px 10px;
    }
    
    #company img.left{
        width: 100%;
    }
    
    #example blockquote p.author,
    #example blockquote div.content{
        float: none;
        width: 100%;
        padding-right: 0;
    }
    
    #videos .youtube{
        width: 100%;
        display: inline-block;
        padding-left: 0;
        padding-right: 0;
        background-image: none;
    }
}