/* -------------------------------------------------------------------------  */
/* == Hauteur < 620px                                                         */
/* -------------------------------------------------------------------------  */
@media only screen and (max-height : 620px){
    #menu .recrutement img, #menu .recrutement .btn-recrut{
        display: none;
    }
    #menu .recrutement{
        height: 30px;
    }
}

/* -------------------------------------------------------------------------  */
/* == Tablette orientation portrait                                           */
/* -------------------------------------------------------------------------  */
@media (max-device-width: 768px) and (orientation: portrait), only screen and (max-width : 768px){
    #baseline{
        min-width: 738px;
    }
    
    #searchbox{
        background: none;
        right: 20px;
    }
    
    #menu{
        position: absolute;
        left: 10px;
        height: auto;
        min-height: 130px;
        padding-top: 0;
        background: url('../i/back-menu.png');
        text-align: left;
        z-index: 1000;
        width: 748px;
    }
        #menu nav{
            width: 728px
        }
        #menu nav ul li{background: none;}
        #menu nav ul li a{font-size: 1.2em;}
        #menu nav ul li:hover{background: #008bcb;}
        #menu .logo{
            float: left;
        }
        #menu .logo a{
            display: block;
            width: 240px;
            padding: 21px 0 29px;
            margin: 0;
            text-align: center;
            background: none;
        }
        #menu nav{
            margin-top: 77px;
            width: 728px;
            font-family: 'swiss_721light';
        }
        #menu nav ul.first-level li{
            float: left;
            text-align: center;
            padding: 5px 10px;
            max-width: 168px;
            height: 54px;
        }
        #menu nav ul.first-level li:last-child{
            border-bottom: none;
        }
        
        #menu nav .sub-menu, #menu nav .sub-sub-menu{
            display: none;
            margin: 10px 0 0 -10px;
            position: absolute;
            width: 200px;
            background: none;
        }
        #menu nav .sub-sub-menu{
            margin: -24px 0 0 -178px;
        }
        #menu nav .sub-menu li, #menu nav .sub-sub-menu li{
            width: 100%;
            border-top: none;
            background: url('../i/back-menu.png');
            border-bottom: 1px solid #fff;
        }
        
        #menu .recrutement{
            display: none;
        }
        
    #content{
        left: 10px;
        margin-right: 0;
        min-height: 700px;
        width: 728px;
        min-width: 728px;
        padding: 8px;
        position: absolute;
        right: 0;
        top: 165px;
    }
    #content .home-blocs{
        width: 728px;
        margin-left: -364px;
        margin-right: 0;
    }
    #content .gammes{
        margin-right: 0;
        max-width: 728px;
        min-width: 728px;
        width: 728px;
    }
    
    #content .fiche-produit{
        width: 728px;
        left: 0;
        margin-left: 0;
    }
    #content .back{
        left: 0;
        margin-top: 70px;
        margin-left: 0;
    }
    
    #content h3, #content h1.title {
        margin: 0 0 5px;
    }
}

@media (max-device-width: 1024px) and (orientation: landscape){
}

/* -------------------------------------------------------------------------  */
/* == Smartphone                                                              */
/* -------------------------------------------------------------------------  */
@media only screen and (max-width : 320px){
    #wrapper{
        min-width: 100%;
    }

    /* Eléments masqué */
    #menu nav ul, #supersized ,#searchbox .search-bar, 
    #content .back, #menu .recrutement, 
    #menu .logo a .logo-desktop, #baseline,
    #supersized, #supersized-loader{display: none;}

    /* Eléments affiché */
    #menu nav select, #menu .logo a .logo-resp{display: block;}

    p{
    }
    h1{
        font-size: 2.2em;
    }
    h2{
        font-size: 2em;
    }

    #searchbox{
        background: none;
        padding: 0;
        width: 80px;
    }
        #searchbox .lang-selector{
            padding-top: 7px;
            width: 80px;
            border: none;
        }
            #searchbox .lang-selector a{
                display: inline;
                margin: 0 5px;
            }

    #menu{
        position: relative;
        padding-top: 10px;
        text-align: center;
        width: 100%;
        background: none;
        min-height: 100px;
        height: auto;
        left: 0;
        background: none;
    }
        #menu .logo a{
            width: 200px;
            margin: 30px 60px 20px;
        }
            #menu .logo a .logo-resp{
                width: 100%;
            }
        #menu nav{
            width: 100%;
            float: left;
            margin-top: 0;
        }
            #menu nav select{
                left: 50%;
                margin-bottom: 30px;
                margin-left: -140px;
                position: relative;
                width: 280px;
                font-size: 18px;
            }
            #menu nav select option{
                font-size: 18px;
                color: red;
            }

    #content{
        position: relative;
        margin: 20px auto 50px;
        left: 0;
        top: 10px;
        width: 100%;
        min-width: 100%;
        height: auto;
    }
        #content h1{
            text-align: left;
            margin: 0 0 10px;
        }
        #content .home-blocs{
            background: none;
            border: none;
            min-width: 100%;
            max-width: 100%;
            left: 0;
            bottom: auto;
            position: relative;
            padding: 0;
            margin: 0;
        }
            #content .home-blocs .bloc{
                display: block;
                margin: 0 auto 20px;
                padding-top: 1px;
                width: 90%;
                height: 100%;
                background: #fff;
                vertical-align: bottom;
            }
                #content .home-blocs .bloc .txt{
                    border-right: none;
                    height: auto;
                }
                #content .home-blocs .bloc img{
                    width: 100%;
                    margin: 0;
                }
        #content .width-btn{
            float: none;
            display: block;
            width: auto;
        }
        #content .btn-ss-gamme{
             padding: 5px 10px;
        }
        #content a.btn-ss-gamme{
            display: none;
        }
        #content .float-left{
            float: none;
            width: 100%;
        }
        #content .gammes,
        #content .liste-protocoles{
            min-width: 100%;
            max-width: 100%;
            margin: 40px auto 0;
            padding: 0;
        }
        #content .gammes.ss-gamme{
            margin-top: 70px;
        }
        #content .liste-protocoles{
            margin-top: 100px;
        }
            #content .liste-protocoles .protocole a:last-child{
                position: relative;
                bottom: auto;
                left: auto;
                margin: 5px 0;
            }
            #content .gammes .gamme,
            #content .liste-protocoles .protocole{
                float: none;
                width: 100%;
                height: auto;
                text-align: center;
            }
            #content .gammes .gamme h2{
                font-size: 1.6em;
                text-align: left;
            }
            #content .gammes .gamme img{
                max-width: 70%;
                height: auto;
            }
            #content .gammes .align a:last-child{
                position: relative;
                left: auto;
                margin: 5px 0;
            }
        #content .fiche-produit{
            width: 100%;
            min-width: 100%;
            margin-top: 80px;
        }
        .page-produit #content .contenu-mapper{
            float: none;
            width: 100%;
        }
            #content .fiche-produit .qualite-pro{
                display: none;
            }
                #content .fiche-produit .qualite-pro img{
                    width: 100%;
                }
            #content .fiche-produit .descr-produit{
                float: none;
                width: 100%;
                min-width: 100%;
            }
            #content .fiche-produit .img-produit{
                float: left;
                margin: 20px 0 0;
                width: 100%;
                min-width: 100%;
            }
            
    #content .duree-protocole{
        width: 100%;
        min-width: 100%;
    }
    
    #content .descr-etape{
        display: block;
        width: 100%;
        min-width: 100%;
        padding-bottom: 10px
    }
    #content .etape h2,
    #content .descr-etape ul{
        width: 100%;
    }
    #content .produit-etape{
        display: block;
        width: 100%;
        min-width: 100%;
        padding: 0 0 20px 0;
        margin-bottom: 50px;
    }
        #content .etape img{
            float: none;
            display: block;
            margin: 0 auto;
        }
    
    #content .etape .duree-etape{
        margin-right: 0;
        background: #0372ba;
        color: #fff;
        padding: 5px;
    }
    
            #content .encart-produits .produit{
                width: 45%;
            }
            
    #content .tx-tab-pi1 ul{
        margin-left: 10px;;
    }     
        #content li.tx-tab-bar-item a {
            font-size: 0.4em;
            padding: 0 5px;
        }
            
    .back{
        margin-top: 60px;
        margin-bottom: -100px;
    }
    
    #content .fiche-produit .img-produit img {
        max-width: 100%;
        height: auto;
    }
    
    #content .col{
        float: none;
        width: 100%;
    }
            #content .col .tx-powermail .powermail_label {
                width: 100%;
            }
            #content .col .tx-powermail .powermail_input {
                width: 100%;
            }
            #content .col .tx-powermail .powermail_textarea {
                max-width: 90%;
                min-width: 100%;
                width: 90%;
            }
            
    DIV.csc-textpic-intext-right .csc-textpic-imagewrap,
    DIV.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
    DIV.csc-textpic-intext-left .csc-textpic-imagewrap,
    DIV.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap{
        float: none;
        display: block;
    }
    #content .csc-textpic-intext-left-nowrap .csc-textpic-text,
    #content .csc-textpic-intext-left .csc-textpic-text,
    #content .csc-textpic-intext-right-nowrap .csc-textpic-text,
    #content .csc-textpic-intext-right .csc-textpic-text{
        margin-right: 0;
    }
    
    #content footer{
        margin: 50px 0 5px;
        left: 0;
        width: 100%;
        min-width: 100%;
        text-align: center;
        position: relative;
    }
    #content footer{left: 0; margin-left: 0}
}