@media screen and (min-width: 1600px){
    #metier .zoom {
        display: none;
        height: 536px;
        left: 50%;
        margin-left: -400px;
        margin-top: -268px;
        position: fixed;
        top: 50%;
        width: 800px;
    }
    
    #be .metier_grey_background_div div img , #be .metier_grey_background_div div p {
        margin: 30px;
    }
    #metier #contenu {
        font-size: 0.9em;
    }
    #assemblage img {
        width: 550px;
    }
}

@media screen and (max-width: 1400px){
    
    .arrowUp {
        border-width: 0 15px 15px;
    }
    .arrowDown {
        border-width: 15px 15px 0;
    }
    .fp-controlArrow.fp-next {
        border-width: 15px 0 15px 15px;
    }
    .fp-controlArrow.fp-prev {
        border-width: 15px 15px 15px 0;
    }
    .arrowUp, .arrowDown {
        margin-left: -8px;
    }
    #metier #contenu {
        width: 40%;
    }
}

@media screen and (max-width: 1360px){
    #metier_button {
        margin-top: 0;
        top: 20px;
    }
    
    #metier #contenu ul {
        padding-left: 10px;
    }
    .contenu_assemblage {
        display: inline-block;
        font-size: 0.85em;
        text-align: left;
        width: 350px;
    }

    #assemblage img {
        width: 370px;
    }
    
}

@media screen and (max-width: 900px){
    #metier #contenu {
        width: 30%;
        font-size: 0.7em;
    }
    #traitement .metier_grey_background .traitement_texte {
        display: block;
    }
    #traitement .metier_grey_background .traitement_liste {
        display: none;
    }
    .secteurs_titre {
        display: none;
    }
}

@media screen and (max-width: 800px){
    .sideimglogo, .sideimglogo2{
        display: none;
    }
    #barre_vertical {
        right: 0;
    }
    #secteurs_button {
        right: 0;
    }
    #metier_button {
        right: 0;
    }
    #big_title div {
        left: 25%;
        margin-left: 20px;
        width: 50%;
    }
    #big_title img {
        width: 100%;
    }
    #news {
        padding: 45px 0 45px 40px;
    }
    #news .button {
        bottom: -1px;
        right: 0;
    }
    #news img {
        height: auto;
        padding-left: 0.5%;
        width: 40%;
    }
    #news h3 {
        font-size: 30px;
    }
    #news .news_content {
        padding-left: 0.5%;
        width: 40%;
    }
    
    .news_content .news_text{
        display: none;
    }
    #metier video {
        height: 220px;
        width: 400px;
    }
    #presentation {
        font-size: 0.7em;
    }
    #presentation h1 {
        font-size: 1.5em;
        margin: 0;
        padding: 10px 0;
    }
    #presentation p {
        margin: 0;
        max-width: 600px;
    }
    #secteurs_content {
        padding-right: 0;
        padding-top: 30px;
    }
    .metier_grey_background h1 {
        font-size: 1.5em;
    }
    #metier video {
        height: 110px;
        width: 200px;
    }
    #be .metier_grey_background_div {
        margin-top: -120px;
    }
    #be img{
        width: 300px;
    }
    #be .metier_grey_background_div div p {
        font-size: 0.7em;
    }
    #metier .usinage img, #metier .tolerie img, #metier .assemblage img {
        width: 100%;
        min-height: 119px;
    }
    
    #metier .usinage, #metier .tolerie, #metier .soudure, #metier .assemblage {
        height: 27%;
        margin: 10px 0;
        width: 100%;
        position: relative;
    }
    .miniature {
        height: 100%;
        width: 100%;
    }
    #video .metier_grey_background_div {
        margin-top: -30%;
    }
    #metier h3 {
        margin: 0 0 5px;
    }
    #metier #contenu {
        background-color: rgba(25, 25, 25, 0.3);
        font-size: 0.75em;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 2px;
        position: absolute;
        top: 0;
        width: 100%;
    }
    #metier #contenu ul {
        margin: 0;
    }
    
    #traitement {
        font-size: 0.7em;
    }
    #usinage .metier_grey_background_div,
    #tolerie .metier_grey_background_div,
    #ms .metier_grey_background_div,
    #assemblage .metier_grey_background_div{
        margin-left: 40px;
        margin-top: 40px;
        top: 0;
        width: 70%;
    }
    .metier_grey_background_div h4 {
        font-size: 0.7em;
        margin: -10px 0 0;
    }
    
    .contenu_assemblage {
        font-size: 0.75em;
        font-weight: 700;
        text-align: left;
    }
    
    #assemblage img {
        width: 250px;
    }
    
    .contenu_assemblage {
        width: 250px;
    }
}

@media screen and (max-width: 546px){
    
    #nav_box{
        display: block;
    }
    #social {
        right: 10px;
        top: 10px;
    }
    #social img {
        width: 20px;
    }
    #news img {
        width: 60%;
    }
    #news .news_content {
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }
    #news .news {
        position: relative;
    }
    #news h3 {
        color: #fff;
        margin: 10px 0;
        font-size: 20px;
    }
    #presentation h1 {
        font-size: 0.8em;
    }
    #secteurs_button img {
        padding: 5px;
    }
    #secteurs_button a h4 {
        height: 20px;
    }
    #secteurs_button a:hover h4 {
        padding: 5px;
    }
    #secteurs_content {
        width: 200px;
        padding-right: 40px;
        padding-top: 30px;
    }
    .energie, .batiment, .communication, .luxe, .bien, .transport, .mobilier {
        width: 200px;
    }
    #secteurs_content .cross_close {
        left: 200px;
        top: 25px;
    }
    #secteurs_content img, #secteurs_content figure {
        margin: 5px;
        width: 88px;
        font-size: 0.9em;
    }
    #secteurs_content figcaption {
        margin: 0 5px;
        width: 88px;
        font-size: 0.9em;
    }
    #metier video {
        height: 110px;
        width: 200px;
    }
    #metier_button {
        margin-top: 0;
        top: 35px;
    }
    #metier_button img {
        padding: 5px;
    }
    #metier_button a h4 {
        height: 20px;
    }
    #metier_button a:hover h4 {
        padding: 2px;
    }
    #be .metier_grey_background_div {
        margin-top: -150px;
        margin-left: 36px;
        margin-right: 0px;
    }
    #be img{
        width: 300px;
    }
    #be .metier_grey_background h1{
        font-size: 1.2em;
    }
    
    #be .metier_grey_background_div div span {
        font-size: 0.8em;
        width: 100%;
        margin-top: 30px;
    }
    #be .metier_grey_background_div div img {
        display: none;
    }
    
    #metier .usinage img, #metier .tolerie img, #metier .assemblage img {
        width: 100%;
        min-height: 119px;
    }
    
    #metier .usinage, #metier .tolerie, #metier .assemblage {
        height: 27%;
        margin: 10px 0;
        width: 100%;
        position: relative;
    }
    #metier .soudure {
        height: 25%;
        margin: 10px 0;
        width: 100%;
        position: relative;
    }
    .miniature {
        height: 100%;
        width: 100%;
    }
    #video .metier_grey_background_div {
        margin-top: -30%;
        margin-left: 36px;
    }
    #metier h3 {
        margin: 0 0 5px;
    }
    #metier #contenu {
        background-color: rgba(25, 25, 25, 0.3);
        font-size: 0.56em;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 4px;
        position: absolute;
        top: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #metier #contenu ul {
        margin: 0;
        padding-left: 15px;
    }
    #usinage .metier_grey_background_div,
    #tolerie .metier_grey_background_div,
    #ms .metier_grey_background_div,
    #assemblage .metier_grey_background_div,
    #traitement .metier_grey_background_div{
        margin-left: 36px;
        margin-top: 40px;
        top: 0;
        width: 70%;
    }
    .metier_grey_background_div h4 {
        font-size: 0.7em;
        margin: -10px 0 0;
    }
    #map-canvas, #info_contact {
        height: 150px;
    }
    #text_contact {
        font-size: 0.8em;
        width: 100%;
    }
    .basic-grey {
        background: #f7f7f7 none repeat scroll 0 0;
        border: 1px solid #e4e4e4;
        color: #888;
        font: 12px Georgia,"Times New Roman",Times,serif;
        left: 50%;
        margin-left: -125px;
        margin-top: -250px;
        padding: 25px 15px 25px 10px;
        position: absolute;
        text-shadow: 1px 1px 1px #fff;
        top: 50%;
        width: 250px;
    }
    .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey select {
        border: 1px solid #dadada;
        box-shadow: 0 1px 4px #ececec inset;
        color: #888;
        font-size: 12px;
        height: 20px;
        line-height: 15px;
        margin-bottom: 6px;
        margin-right: 6px;
        margin-top: 2px;
        outline: 0 none;
        padding: 3px 3px 3px 5px;
        width: 70%;
    }
    
    #assemblage img{
        width: 300px;
    }
    .contenu_assemblage {
        width: 300px;
    }
}

@media screen and (max-width: 400px){
    #news img {
        width: 200px;
    }
    #assemblage img{
        width: 200px;
    }
    .contenu_assemblage {
        width: 200px;
    }
}

@media screen and (max-height: 400px){
    
    #nav_box{
        display: block;
    }
    nav ul li {
        padding: 5px 0;
    }
    .fp-controlArrow.fp-next {
        right: 35px;
    }
    #social {
        right: 10px;
        top: 10px;
    }
    #map-canvas{
        display: none;
    }
    #social img {
        width: 20px;
    }
    #news img {
        width: 100%;
    }
    #news .news_content {
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }
    #news .news {
        position: relative;
        display: inline-block;
        height: 30%;
        text-align: center;
        width: 30%;
        margin-top: 15%;
    }
    #news h3 {
        color: #fff;
        margin: 10px 0;
        font-size: 20px;
    }
    #presentation .grey_background div {
        color: #fff;
        display: inline-block;
        height: 300px;
        margin: -100px auto auto;
        position: relative;
        text-align: left;
        top: 50%;
        width: 70%;
    }
    #secteurs_button {
        margin-top: -120px;
    }
    #presentation h1 {
        font-size: 1em;
    }
    #presentation .grey_background h4 {
        margin: 5px 0;
    }
    #presentation p {
        font-size: 1em;
        margin: 0;
        max-width: 600px;
    }
    #secteurs_button img {
        padding: 5px;
    }
    #secteurs_button a h4 {
        height: 20px;
    }
    #secteurs_button a:hover h4 {
        padding: 5px;
    }
    #secteurs_content {
        padding-right: 70px;
        padding-top: 30px;
        width: 350px;
    }
    .energie, .batiment, .communication, .luxe, .bien, .transport, .mobilier {
        width: 350px;
    }
    #secteurs_content .cross_close {
        left: 350px;
        top: 25px;
    }
    #secteurs_content img, #secteurs_content figure {
        margin: 5px;
        width: 88px;
        font-size: 0.9em;
    }
    #secteurs_content h3 {
        margin: 5px 0;
    }
    #secteurs_content figcaption {
        margin: 0 5px;
        width: 88px;
        font-size: 0.7em;
    }
    #metier video {
        height: 110px;
        width: 200px;
    }
    #metier_button {
        margin-top: 0;
        top: 35px;
    }
    #metier_button img {
        padding: 5px;
    }
    #metier_button a h4 {
        height: 20px;
    }
    #metier_button a:hover h4 {
        padding: 2px;
    }
    #be .metier_grey_background_div {
        margin-top: -100px;
        margin-left: 36px;
        margin-right: 0px;
    }
    #be img{
        width: 300px;
    }
    #be .metier_grey_background h1{
        font-size: 1.2em;
    }
    
    #be .metier_grey_background_div div span {
        font-size: 0.8em;
        width: 100%;
        margin-top: 30px;
    }
    #be .metier_grey_background_div div img {
        display: none;
    }
    #be .metier_grey_background_div div p, #traitement .metier_grey_background p {
        font-size: 0.5em;
    }
    #metier .usinage img, #metier .tolerie img, #metier .assemblage img {
        width: 100%;
        min-height: 119px;
    }
    
    #metier .usinage, #metier .tolerie, #metier .assemblage {
    display: inline-block;
    margin: 10px 0;
    position: relative;
    width: 30%;
    }

    #metier .soudure {
        display: inline-block;
        height: 100px;
        margin: 10px 0;
        position: relative;
        width: 30%;
    }
    .miniature {
        display: none;
    }
    #video .metier_grey_background_div {
        margin-top: -30%;
        margin-left: 36px;
    }
    #metier h3 {
        margin: 0 0 5px;
    }
    #metier #contenu {
        background-color: rgba(25, 25, 25, 0);
        font-size: 0.55em;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 4px;
        position: absolute;
        top: 0;
        width: 100%;
        box-sizing: border-box;
    }
    #metier #contenu ul {
        margin: 0;
        padding-left: 15px;
    }
    #usinage .metier_grey_background_div,
    #tolerie .metier_grey_background_div,
    #ms .metier_grey_background_div,
    #assemblage .metier_grey_background_div,
    #traitement .metier_grey_background_div{
        margin-left: 36px;
        margin-top: 40px;
        top: 0;
        width: 80%;
        font-size: 0.9em;
    }
    .metier_grey_background_div h4 {
        font-size: 0.7em;
        margin: -10px 0 0;
    }
    #map-canvas, #info_contact {
        height: 150px;
    }
    #text_contact {
        font-size: 0.8em;
        width: 100%;
    }
    
    .basic-grey {
        background: #f7f7f7 none repeat scroll 0 0;
        border: 1px solid #e4e4e4;
        color: #888;
        font: 12px Georgia,"Times New Roman",Times,serif;
        left: 50%;
        margin-left: -125px;
        margin-top: -130px;
        padding: 5px 5px 5px 0;
        position: absolute;
        text-shadow: 1px 1px 1px #fff;
        top: 50%;
        width: 250px;
    }
    .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey select {
        border: 1px solid #dadada;
        box-shadow: 0 1px 4px #ececec inset;
        color: #888;
        font-size: 12px;
        height: 15px;
        line-height: 15px;
        margin-bottom: 6px;
        margin-right: 6px;
        margin-top: 2px;
        outline: 0 none;
        padding: 3px 3px 3px 5px;
        width: 70%;
    }
    #traitement .metier_grey_background p {
        margin: 5px 0;
    }
    .basic-grey .button {
        background: #d31616 none repeat scroll 0 0;
        border: medium none;
        border-radius: 3px;
        box-shadow: 1px 1px 5px #b6b6b6;
        color: #fff;
        cursor: pointer;
        padding: 5px 15px;
        text-shadow: 1px 1px 1px #9e3f3f;
    }
    .basic-grey textarea {
        height: 50px;
    }
    .basic-grey h1 {
        border-bottom: 1px solid #e4e4e4;
        color: #888;
        display: block;
        font-size: 25px;
        margin: 5px auto;
        padding: 0;
    }
    .contenu_assemblage {
        width: 200px;
    }
    .contenu_assemblage {
        font-size: 0.65em;
        font-weight: 700;
        text-align: left;
    }
    #assemblage img {
        width: 180px;
    }
}