@media (min-width: 100px) and (max-width: 680px) {

    .main{padding-top: 30px;}

    .contener-header{position: relative}
    #contener{ 
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
    }
    .contener-header{ width: 100%; height: 291px; }

    header .logo{ width:100%; overflow:hidden;}
    .main, header, footer{

        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        margin: 0px;
    }

    .logo{margin:auto !important; float:none !important;}
    #menu {border-top:1px solid #eee;}
    #menu, #menu ul{      box-sizing: border-box;
                          -moz-box-sizing: border-box;
                          width: 100%; margin-bottom: 20px; margin-top: 20px;}
    #menu a, #menu ul li {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0px;
        border:none;
    }

    .spacer, .bigshadow{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        background-image: none; border-top: 1px solid #ddd;}
    .logo{margin-left: 110px;}

    .tabs-contener{width: 100%;}
    .tab_content, .tab_content img{width:100% !important; height: auto; float: left;}

    .tabs, .tabs a{width: 20px; height: 20px; border-radius: 20px;}
    .home-block{      box-sizing: border-box;
                      -moz-box-sizing: border-box;
                      width: 100%; margin-bottom: 10px;}

    .logo-realisation{height: 150% !important; width: 100%;-moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; margin-bottom: 2%;}
    .logo-realisation figcaption{overflow: hidden; height: 20px; font-size: 14px;}
    .logo-realisation img{width: 100%; height: auto;}
    .logo-realisation figure{width: 100%; height: auto;}
    .logo-solution{height: auto;}


    .solution h1 {float:left; margin-right: 15px;}
    .solution figure {float:right;}
    .solution span{height: 100px; line-height: 100px; float: right;}
    .solution   [class^="icon-"]::before, [class*=" icon-"]::before {font-size: 100px !important; line-height: 100px !important; float: right;}
    .realisation header, .realisation .bttabs-contener , .realisation, .realisation-part1, .realisation-part2, .real-center, .realisation footer {width: 100%; box-sizing: border-box;}
    .realisation .tabs-contener{width: 100%;}
    .realisation-part1 figure {width: 100%; height: auto;}
    .realisation-part1 img { width:100%; height: auto;}
    .realisation-part2 {padding: 10px; margin: 0; width: 100%;  box-sizing: border-box; -moz-box-sizing: border-box; }
    .realisation footer > section {
        box-sizing: border-box; -moz-box-sizing: border-box;
        width: 100% !important;
    }


    footer section {
        
           box-sizing: border-box; -moz-box-sizing: border-box;
        width: 100% !important;
        text-align: center !important;
        
    }

    .solution,
    .solution section,
    .solution footer,
    .logo-solution,
    .logo-competence,
    .realisation-list,
    .competences,
    .logtabs-contener,
    .logtab_content,
    .date-range-realisation{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
    }
    
       .arrow-logiciel, .blog-aside{display: none;}
    .blog-posts{width: 100%;box-sizing: border-box; -moz-box-sizing: border-box; }
    .box-blog-main,.commentaire,.commentaires,.pager,.blog-menu, .blog-box, .post-blog, .blog-spacer, .addthis_toolbox, .content-blog, .content-blog img{width: 100%; height: auto; box-sizing: border-box; -moz-box-sizing: border-box;}


}




@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2){


    h1, h2, h3 {margin-bottom: 25px;}

    h1{font-size: 35px;}
    h2{font-size: 25px;}
    h3{font-size: 20px;}
    .home-block p{font-size:30px !important; line-height: 40px !important; }
    .home-block h2{font-size:40px !important; line-height: 45px !important; }

    .logo-solution h2{font-size: 200px; line-height: 70px; height:70px; overflow: hidden;}
    p, li{line-height: 30px !important; font-size: 18px!important;}
    .logo-realisation figcaption{height: 30px !important;}

    .tabs, .tabs a{width: 50px!important; height: 50px!important; border-radius: 50px!important;margin-right: 15px!important}
    #menu a { font-size: 20px; }
    .logo-solution h2{font-size: 35px !important}
    .logo-competence{overflow: hidden; width: 31%!important; height: 60px; padding: 5px;-moz-box-sizing: border-box; box-sizing: border-box; margin-right: 2%; margin-bottom: 2%; }
    .logo-competence h2 {font-size: 35px !important;}
    .logo-competence:nth-child(4n){margin-right: 2%!important}
    .logo-logiciel{width: 100px; height: 100px;}
    .logo-logiciel img {width: 100%; height: auto;}

    .solution footer{font-size: 24px;}
    a {font-size: 20px !important;}


}

@media (min-width: 681px) and (max-width: 980px)  { 

    #contener{ width: 100% !important;}
    .contener-header{ width: 100%; height: 170px; }
    .main, header, footer{

        width: 100% !important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin: 0px !important;

    }
    .main{padding-top: 30px;}

    .contener-header{position: relative}
    #menu{ width: 100%; float:left;border-top: solid 1px #eee; }
    #menu, #menu ul{width:100%; margin-bottom: 20px; margin-top: 20px;}
    #menu ul li {
        width:20%;
        height: 30px;
        line-height: 30px;
        padding: 0px;

    }
    #menu a {padding: 0px; height: 30px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; line-height: 30px;}


    .spacer, .bigshadow{width:100%; background-image: none; border-top: 1px solid #ddd;}


    .tabs-contener{width: 100%;}
    .tab_content, .tab_content img{width:100% !important; height: auto; float: left;}

    .tabs, .tabs a{width: 20px; height: 20px; border-radius: 20px;}

    .home-block{width:31%; box-sizing: border-box; -moz-box-sizing: border-box; height: auto; float: left; margin-right: 2%; text-align: left;}

    .date-range-realisation{width:100%; height: auto;}
    .logo-realisation{height: 150% !important; width: 48%;-moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; margin-right: 2%; margin-bottom: 2%;}
    .logo-realisation figcaption{overflow: hidden; height: 20px; font-size: 14px;}
    .logo-realisation img{width: 100%; height: auto;}
    .logo-realisation figure{width: 100%; height: auto;}


    .logo-solution{margin-left: 0px;}
    .logo-solution{width: 31%; padding: 5px;-moz-box-sizing: border-box; box-sizing: border-box; height: 80px; margin-right: 2% !important; margin-bottom: 2%;}
    .logo-solution h2{font-size: 20px; line-height: 70px; height:70px; overflow: hidden;}
    .logo-solution span{margin-right: 10px;}
    .logo-solution   [class^="icon-"]::before, [class*=" icon-"]::before {font-size: 50px !important; line-height: 70px !important; float: right;}


    .competences{ width: 100%}
    .logo-competence{overflow: hidden; width: 23%; height: 60px; padding: 5px;-moz-box-sizing: border-box; box-sizing: border-box; margin-right: 2%; margin-bottom: 2%; }
    .logo-competence h2 {font-size: 20px; line-height: 50px; height: 50px; overflow: hidden;}

    .logtabs-contener{width:100%;}
    .logtab_content{width: 90%;}


    .solution{width: 100%;-moz-box-sizing: border-box; box-sizing: border-box;}
    .solution section{width: 100%;}
    .solution footer{width: 100% !important;}
    .realisation-list{width: 100%;}
    .competences{ width: 100%;-moz-box-sizing: border-box; box-sizing: border-box;}

    .solution h1{float: left; font-size: 30px;}
    article.solution span{height: 100px; line-height: 100px; float: right; margin-bottom: 15px;}

    .solution   [class^="icon-"]::before, [class*=" icon-"]::before {font-size: 100px !important; line-height: 100px !important; float: right;}
    footer .solution span[class^="icon-"]::before, footer .solution span[class*=" icon-"]::before {font-size: 50px !important; line-height: 50px !important; float: left !important;}
    .solution figure {float:right; margin-right: 0px; margin-left: 15px; margin-bottom: 15px;}


    .realisation header, .realisation .bttabs-contener , .realisation, .realisation-part1, .realisation-part2, .real-center, .realisation footer {width: 100%; box-sizing: border-box;}
    .realisation .tabs-contener{width: 100%;}
    .realisation-part1 figure {width: 100%; height: auto;}
    .realisation-part1 img { width:100%; height: auto;}
    .realisation-part2 {padding: 10px; margin: 0; width: 100%;  box-sizing: border-box; -moz-box-sizing: border-box; }
    .realisation footer > section.partenaire, .realisation footer > section.client {
        box-sizing: border-box; -moz-box-sizing: border-box;
        width: 30%;
    }

    .realisation footer > section.solution{
        box-sizing: border-box; -moz-box-sizing: border-box;
        width: 20%;
    }

    footer section { width: 33%; box-sizing: border-box; -moz-box-sizing: border-box; }

    .blog-aside{width: 20%;box-sizing: border-box; -moz-box-sizing: border-box; }
    .blog-posts{width: 80%;box-sizing: border-box; -moz-box-sizing: border-box; }
    .box-blog-main,.commentaire,.commentaires,.pager,.blog-menu, .blog-box, .post-blog, .blog-spacer, .addthis_toolbox, .content-blog, .content-blog img{width: 100%; height: auto; box-sizing: border-box; -moz-box-sizing: border-box;}

}