*{padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Questrial', sans-serif;
}

.centrage{width: 100%;}

form{margin-top: 20px}

div.gallery{display: flex;
flex-wrap: wrap;
margin: auto

}
.photo{width: 50%;
height: auto}

div.prevu{
margin:1px;
width: 200px;
height: 200px;
position: relative;
background: gray;
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-webkit-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
filter: grayscale(1)
}

div.prevu:hover{
    
    transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
filter: grayscale(0);
   box-shadow: 0px 0px 150px black;
    background: red;
    z-index:2
    
}




.btn-primary {
    margin-bottom: 5px;
    margin-right: 5px;
width: 320px}


 h2.aphiact{margin: 27px 0 31px -39px;
        text-align: center;
        font-size: 1.6rem}

h1{margin: 50px 0 31px 0px;
        text-align: center;
        font-size: 1.6rem;
text-transform: lowercase;
color: white}

.choix{
margin: auto;
max-width: 320px;
flex-wrap: wrap;
display: flex;
flex: 1;
justify-content: center}

label{float:left;
    width: 100%;
    text-align: center}

.date{width: 100%}


input:hover{background: #deeaf6}



textarea{width: 100%;
    height: 200px}

select{ width: 100%;
    padding: 12px;}

.blocgauche,.blocdroite{
    width: 395px;
    height: auto;
    min-width: 320px;
    margin-right: 10px;
    margin-left: 10px;
    flex: 1;
background: white}

.blocgauche{margin-right: 10px}

form{ width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    margin-bottom: 80px;
}

.send{width: 320px;
    margin: auto;
    background: #deeaf6;
    transition: 1s}

.send:hover{width: 100%;
    background: #0b0d25;
    color: white}

.generale{ 
    width: 800px;
    margin: auto;
    height: 100%;
    display: flex;
    flex-wrap: wrap
}

@keyframes animlogo{
    0%{top:-103px;}
    100%{top:0px;}
}



.panel-default > .panel-heading {
    background: #deeaf6;
    transition: 1s
}

.panel-default > .panel-heading:hover {
    background: transparent;
    border: 1px solid #deeaf6;
    box-shadow:  2px 10px 14px #deeaf6 ;

}
.panel-group .panel:nth-child(3){
    margin-bottom: 90px;}

.accordeon {
    color: gray;
    font-size: 12px;
    line-height: 43px
}

.panel-group .panel {
    margin: 25px;


}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.accordeon2{ color:white;
    font-size: 16px;
    background-color: lightslategray;
    width: 100%;
    height: auto;
    text-align: center;
    display: block;
    line-height: 50px;
    border-radius: 10px
}

.aligne{text-align: center}

figcaption{margin-top: 10px}

.regle{display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
    margin: auto}

.ouali{width: 184px}


.ordres{
    margin: 5rem 0 0;}

.pres{padding-left: 20px}

.carousel-caption{position: absolute;
    right: 15%;
    bottom: 38px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center}

section.bloc{
    max-width: 80%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
    box-shadow:  2px 10px 14px gray ;
    margin: 0px auto 36px

}
.navbar-light .navbar-nav .nav-link:hover  {
    color: black
}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
    color: #c03228
}

div.savoir{
    width: 97%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;

}

div.savoirpres{
    width: 97%;
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;


}

div.savoirpres2{
    width: 97%;
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 20px


}


article.desc{
    padding-top: 8px;
    width: 33.33%;
    height: 290px;
    background: #c03228;
    min-width:252px;
    flex: 1;



}

article.desc:nth-child(2){
    background: white;
    border-right: 1px solid white;
    border-left: 1px solid white
}

.zone{ border: 1px solid #0097d7;
    padding: 10px;
    border-radius: 5px}

article.desc:nth-child(3){
    background: #3f6cb2
}


/*debut contenu un savoir faire*/

section.bleu{width: 100%;
    background: #3f6cb2;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 1px 16px -1px black;
    margin-bottom: 17px;
 color: white;}

section.bleupres{width: 100%;
    background: #3f6cb2;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 1px 16px -6px black;
    margin-bottom: 17px;
    padding-left: .5rem;
     color: white;
}

section.bleupres2{
     background: white;
    height: auto;
    color: white;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px;
    box-shadow: 0px 1px 16px -6px black;
    background: #3f6cb2;
}




section.blanc{width: 100%;
    background: white;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

section.blanc2{width: 100%;
    background: white;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px
}

section.blancg{width: 100%;
    background: white;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px
}

    

article.cadre{width: 70%;margin-top: 100px;
margin-bottom: 150px}


article.cadre2{width: 40%}



figure.coif{width: 20%;
    height: 434px;
    min-width: 320px}

section.car{width: 100%;
    background: white;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-bottom: 10px}
/*fin contenu un savoir faire*/


.ordre{margin: 5rem 0 0}

div.toto{
    display: flex;
    width: 100%; 
    height: 100%; 
    background: #c03228;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-bottom: 50px
}


div.footer{width: 50%;
    display:flex;
    justify-content: space-around}

.popup2, .popup{
    height: auto;
    margin: auto;
    padding: 15px;
    border: 1px solid white;
    background: rgba(0,0,0,.3);
    text-align: center;
    color: white;
    font-size: 20px;
    position: relative;
    z-index: 2;
    width: 320px;
    bottom:65px
}


/*////////////////////////////////////////ordi xl voir tv*/
@media screen and (min-width:1024px){
    .azsormat{height: auto;
        background: orange;
        width: 50%}

    .mieux{
        width: 56%;
        height: auto;
        min-width: 320px;
        padding: 101px 31px 15px;
        margin-bottom: 2px;}

    h2.aphia4 {
        margin: 40px 0 35px 282px;
        color: black;
        font-size: 1.6rem;}





    div.slida{margin-top: 55px}
    div.toto{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #23263d;;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 50px
    }

    section.slide{ background:#0b0d25; width: 100%; height: auto;
        padding-left: 50%}
    /*footer*/
    footer{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #c03228;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .col ul li a, address{color: snow;}
    .col{
        width: 50%;
        height: auto;
        margin-top: 10px;
        margin-left: 37px;
        font-size: 12px;
        text-align: center;
        font-size: 14px
    }
    .colseul ul li a, address{color: snow;}
    .colseul{
        width: 12%;
        height: auto;
        font-size: 12px;
        margin-left: 50px;
    }

    a.phone{ color:aquamarine; text-decoration: none}
    .mentions {color: snow}

    .col ul li {list-style: none; padding-bottom: 5px}
    .col  h2 { font-size: 20px;
        color: lightgray;
    }
    .colseul h2 { font-size: 20px;
        color: lightgray;
        text-align: center
    }


    address{text-align: center}

    .autorisation{font-size: 12px;
        text-align: center;
        padding-top: 20px;}


    /*    fin footer*/
    article.exp{
        width: 56%;
        height: auto;
        min-width: 320px;
        padding: 15px;
        margin-bottom: 2px
    }

    article.expo{
        width: 54%;
        height: auto;
        min-width: 320px;
        padding: 15px;
        margin-bottom: 2px
    }

    article.exposeul, article.exposeulh{
        width: 54%;
        height: auto;
        min-width: 320px;
        padding: 15px;
        margin-bottom: 2px
    }

    

    .fiscal{margin: 4.5%}

    .partenaires{width: 1024px;
        margin: auto}

    section.new{width: 100%;
        background:  #3f6cb2;
        color: white;
        height: auto;
        box-shadow: 0px 1px 16px -1px black;
        margin-bottom: 17px;}

    h2.chapitre{ margin: 52px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;} 

    div.global{margin: auto;
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;}

    .logo{ z-index: 1032;
        position: fixed;
        top: 0;
        left: 10%;
        width: 230px;
        height: 90px;
        background: url(../images/logo.svg) 0px 0px no-repeat #c03228;
        border-bottom-right-radius: 10px;
        box-shadow: 0px 2px 9px -1px black;
        border-bottom-left-radius: 10px;
        animation: 1s animlogo 500ms linear 1 backwards
    }
    /*    box-shadow: -1px 2px 10px 3px black inset;*/

    .carousel {
        position: relative;
        top:0px} 

    .navbar-nav{ 
        margin-left:32%;
    }

    nav ul li {font-size: 15px} 

    header.banner
    {width: 100%;
        height: auto;
        background: white;
        position: fixed;
        z-index: 10;
        top: 0;
        box-shadow: 0px 2px 9px -1px black;
    }        

    div.picto{width: 66px;
        height: 71px;
        margin: 10px auto; 
        background: url(../images/pictoecran1.gif) 0 0 no-repeat;

    }
    div.picto2{
        width: 95px;
        height: 71px;
        margin: 10px auto;
        padding-top: 10px;
        background: url(../images/picto2.gif) 0 0 no-repeat
    }
    div.picto3{
        width: 79px;
        height: 71px;
        margin: 10px auto;
        background: url(../images/pictoecran3.gif) 0 0 no-repeat
    }


    .deux{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid white;
        color: white}

    .deu{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid black;
        color: black
    }
    p.txt,h2.txt{text-align: center;
        color: white;
    }
    h2.txt{font-size: 1.6rem}

    p.txt{margin-bottom: 25px}


    p.txt2,h2.txt2{text-align: center;
        color: black;
    }
    h2.txt2{font-size: 1.6rem}

    p.txt2{margin-bottom: 25px}
    /*reseau */
    .reseau{position: fixed;
        top: 40vh;
        left: 0;
        z-index: 10;
        width: 60px;
        height: 80px;
    }
    li.facebook, li.in{
        list-style: none; 
        display: block;}

    li.phone2{display: none}

    li.facebook a{display: block;
        width: 40px;
        background: #3b5998;
        transition: 1s; 
        height: 40px}


    li.in a{display: block;
        width: 40px;
        background: #0e76a8;
        transition: 1s; 
        height: 40px}

    li.in a:hover{
        animation: 500ms rs2 0s linear ; 
        animation-iteration-count:1;
        animation-fill-mode: forwards;

    }

    li.facebook a:hover{
        animation: 500ms rs 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }

    i.color{color:white;
        line-height: 40px;
        padding-left: 5px;
        box-sizing: border-box}
    @keyframes rs{

        0%{ width: 40px;
            padding-left: 5px;

        }

        100%{width: 60px;
            transition: 500ms;
            background: #3b5998;
            padding-left: 15px
        }

    }


    @keyframes rs2{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: #0e76a8;
            padding-left: 15px
        }

    }

    /*fin reseau*/
    .tablet{display: none}

    /*bloc slide*/
    a.numero{display: block;
        background:#c03228;
        width: 377px;
        line-height: 40px;
        height: 40px;
        margin: auto;
        margin-bottom: 10px;
        box-shadow: 6px 6px 36px black;
        text-decoration: none;
        color: white;
        font-size: 24pt
    }

    .oumlil{background: white;
        width: 377px;
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        color: black;
        box-shadow: 6px 6px 36px black;
        margin:  0 auto -30px;
        font-size: 20px;
    }

    .msg{
        color: #3f6cb2;
        font-weight: bold;
        border-top:1px solid black;
        margin: 14px auto 0px;
        padding-top: 10px;

    }

    .cadre2{text-align: center;}




    /*fin bloc slide*/

    /*h2 contenu un savoir faire*/
    h2.aphia{margin: 27px 0 31px 0;
        text-align: left;
        font-size: 1.6rem}
    
   

    h2.aphi{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}

    h2.aphia2,h2.aph{margin: 40px 0 35px 0;
        text-align: center;
        color: black;
        font-size: 1.6rem}

    h2.aphia3{margin: 40px 0 35px 146px;
        color: black;
        font-size: 1.6rem}

    section.car2{background: white;
        height: auto;
        width: 100%}


    h2.samedi{
        margin: 40px 0 35px 0px;
        color: black;
        font-size: 1.6rem}


    div.valeurgroup{
        padding-top: 20px;
        width: 700px;
        min-width: 320px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: auto
    }

    figure.valeur{width: 97px;
        height: 119px;
        margin-right: 37px;
    }

    div.valeur2{width: 185px;
        height: 188px;
        margin-right: 37px;
    }
    div.valeurgroup2{
        width: 890px;

        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 39px;
    }



}
/*////////////////////////////////////////ordi m*/
@media screen and (min-width:990px) and (max-width:1023px){
    h2.aphia4 {
        margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;
    }

    h2.aphi{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}



    div.slida{margin-top: 55px}
    h2.aphia3{margin: 40px 0 35px 0px;
        color: black;
        font-size: 1.6rem}


    h2.aphia2,h2.aph{margin: 40px 0 35px 0;
        text-align: center;
        color: black;
        font-size: 1.6rem}

    section.slide{ background:#0b0d25; width: 100%; height: auto;
        padding-left: 40%}
    article.exp,article.exposeulh{
        width: 56%;
        height: auto;
        min-width: 320px;
        padding: 15px;
        margin-bottom: 2px
    }

    article.expo{
        width: 54%;
        height: auto;
        min-width: 320px;
        padding: 15px;
        margin-bottom: 2px
    }


    article.expotitre{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding: 15px 0;
        margin-bottom: 2px;
        text-align: left
    }
    header.banner
    {width: 100%;
        height: auto;
        background: white;
        position: fixed;
        z-index: 10;
        top: 0;
        box-shadow: 0px 2px 9px -1px black; } 

    .logo{ z-index: 1032;
        position: fixed;
        top: 0;
        left: 10%;
        width: 174px;
        height: 64px
        background: url(../images/logo768.svg) 10px 0px no-repeat #c03228;
        border-bottom-right-radius: 10px;
        box-shadow: 0px 2px 9px -1px black;
        border-bottom-left-radius: 10px;
    }
    nav{
        margin-left:25% ;
        background: white !important;}

    div.picto{width: 47px;
        height: 53px;
        margin: 10px auto; 
        background: url(../images/picto1.gif) 0 0 no-repeat
    }
    div.picto2{
        width: 47px;
        height: 53px;
        margin: 10px auto;
        background: url(../images/picto2.gif) 0 0 no-repeat
    }
    div.picto3{

        height: 53px;
        margin: 10px auto;
        width: 59px;
        background: url(../images/picto3.gif) 0 0 no-repeat
    }

    .deux{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid white
    } 
    p.txt,h2.txt{text-align: center;
        color: white;
    }
    h2.txt{font-size: 1.6rem}

    p.txt{margin-bottom: 25px}

    p.txt2,h2.txt2{text-align: center;
        color: black;
    }
    h2.txt2{font-size: 1.6rem}

    p.txt2{margin-bottom: 25px}
    /*reseau */
    .reseau{position: fixed;
        top: 20vh;
        left: 0;
        z-index: 10;
        width: 60px;
        height: 80px;
    }
    li.facebook, li.in{
        list-style: none; 
        display: block;}

    li.phone2{display: none}

    li.facebook a{display: block;
        width: 40px;
        background: #3b5998;
        transition: 1s; 
        height: 40px}


    li.in a{display: block;
        width: 40px;
        background: #0e76a8;
        transition: 1s; 
        height: 40px}

    li.in a:hover{
        animation: 500ms rs2 0s linear ; 
        animation-iteration-count:1;
        animation-fill-mode: forwards;

    }

    li.facebook a:hover{
        animation: 500ms rs 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }

    i.color{color:white;
        line-height: 40px;
        padding-left: 5px;
        box-sizing: border-box}
    @keyframes rs{

        0%{ width: 40px;
            padding-left: 5px;

        }

        100%{width: 60px;
            transition: 500ms;
            background: #3b5998;
            padding-left: 15px
        }

    }


    @keyframes rs2{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: #0e76a8;
            padding-left: 15px
        }

    }

    /*fin reseau*/
    .tablet,.fa-phone-square,li.phone2{display: none;
    }
    /*h2 contenu un savoir faire*/
    h2.aphia{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}

    div.valeurgroup{
        width: 700px;
        min-width: 320px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: auto
    }

    figure.valeur{width: 97px;
        height: 119px;
        margin-right: 37px;
        min-width: 30px}

    div.valeur2{width: 185px;
        height: 188px;
        margin-right: 37px;
    }
    div.valeurgroup2{
        width: 890px;

        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 39px;
    }

    article.cadre2{width: 40%}

    section.new{width: 100%;
        background: #deeaf6;
        height: auto;
        box-shadow:  1px 1px 28px gray}

    div.global{margin: auto;
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;}



    h2.chapitre{ margin: 52px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;} 

    .navbar-nav{padding-left: 38px }
    .partenaires{width: 1024px;
        margin: auto}



    /*footer*/
    footer{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #c03228;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .col ul li a, address{color: snow;}
    .col{
        width: 50%;
        height: auto;
        margin-top: 10px;
        margin-left: 37px;
        font-size: 12px;
        text-align: center;
        font-size: 14px
    }
    .colseul ul li a, address{color: snow;}
    .colseul{
        width: 100%;
        height: auto;
        font-size: 12px;
    }

    a.phone{ color:aquamarine; text-decoration: none}
    .mentions {color: snow}

    .col ul li {list-style: none; padding-bottom: 5px}
    .col  h2 { font-size: 20px;
        color: lightgray;
    }
    .colseul h2 { font-size: 20px;
        color: lightgray;
        text-align: center
    }


    address{text-align: center}


    .autorisation{font-size: 12px;
        text-align: center;
        padding-top: 20px;}



    /*    fin footer*/
    .tablet{display: none}

    /*bloc slide*/
    a.numero{display: block;
        background: #c03228;
        width: 280px;
        line-height: 30px;
        height: 30px;
        margin: auto;
        margin-bottom: 10px;
        box-shadow: 6px 6px 36px black;
        text-decoration: none;
        color: white;
        font-size: 18pt
    }

    .oumlil{background: white;
        width: 280px;
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        color: black;
        box-shadow: 6px 6px 36px black;
        margin:  0 auto 5px;
        font-size: 15px}

    div.msg{
        color: #3f6cb2;
        font-weight: bold;
        border-top: 1px solid black;
        margin: 14px auto 0px;
        padding-top: 10px; }

    /*fin bloc slide*/
}
/*////////////////////////////////////////tablette*/
@media screen and (min-width:768px) and (max-width:989px){

    h2.aphia4 {
        margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;
    }

    h2.aphi{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}





    div.slida{margin-top: 55px}
    article.expotitre{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding: 15px 0;
        margin-bottom: 2px;
        text-align: center
    }


    article.exposeul,article.exposeulh{
        width: 52%;
        height: auto;
        min-width: 320px;
        padding-left: 40px;
        margin-bottom: 2px
    }

    section.slide{ background: #0b0d25; width: 100%; height: auto}
    .pres{padding-left: 0px}
    h2.aphia2,h2.aph{margin: 40px 0 35px 0;
        text-align: center;
        color: black;
        font-size: 1.6rem}
    article.exp{
        width: 56%;
        height: auto;
        min-width: 320px;
        padding-left:35px;
        padding-right:10px;

    }

    .mieux{
        width: 56%;
        height: auto;
        min-width: 320px;
        padding-left: 35px;
        padding-right:10px;}

    article.expo{
        width: 52%;
        height: auto;
        min-width: 320px;
        padding-left: 40px;
        margin-bottom: 2px
    }



    header.banner
    {width: 100%;
        height: auto;
        background: white;
        position: fixed;
        z-index: 10;
        top: 0;
        box-shadow: 0px 2px 9px -1px black; } 

    .logo{ z-index: 1032;
        position: fixed;
        top: 0;
        left: 10%;
        width: 174px;
        height: 64px;
        background: url(../images/logo768.svg) 10px 0px no-repeat #c03228;
        border-bottom-right-radius: 10px;
        box-shadow: 0px 2px 9px -1px black;
        border-bottom-left-radius: 10px;
    }
    nav{
        margin-left:25% ;
        background: white !important;}

    div.picto{width: 47px;
        height: 53px;
        margin: 10px auto; 
        background: url(../images/picto1.gif) 0 0 no-repeat
    }
    div.picto2{
        width: 47px;
        height: 53px;
        margin: 10px auto;
        background: url(../images/picto2.gif) 0 0 no-repeat
    }
    div.picto3{

        height: 53px;
        margin: 10px auto;
        width: 59px;
        background: url(../images/picto3.gif) 0 0 no-repeat
    }

    .deux{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid white
    } 
    p.txt,h2.txt{text-align: center;
        color: white;
    }
    h2.txt{font-size: 1.6rem}

    p.txt{margin-bottom: 25px}

    p.txt2,h2.txt2{text-align: center;
        color: black;
    }
    h2.txt2{font-size: 1.6rem}

    p.txt2{margin-bottom: 25px}

    /*reseau */
    .reseau{position: fixed;
        top: 20vh;
        left: 0;
        z-index: 10;
        width: 60px;
        height: 80px;
    }
    li.facebook, li.in{
        list-style: none; 
        display: block;}

    li.phone2{display: none}

    li.facebook a{display: block;
        width: 40px;
        background: #3b5998;
        transition: 1s; 
        height: 40px}


    li.in a{display: block;
        width: 40px;
        background: #0e76a8;
        transition: 1s; 
        height: 40px}

    li.in a:hover{
        animation: 500ms rs2 0s linear ; 
        animation-iteration-count:1;
        animation-fill-mode: forwards;

    }

    li.facebook a:hover{
        animation: 500ms rs 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }

    i.color{color:white;
        line-height: 40px;
        padding-left: 5px;
        box-sizing: border-box}
    @keyframes rs{

        0%{ width: 40px;
            padding-left: 5px;

        }

        100%{width: 60px;
            transition: 500ms;
            background: #3b5998;
            padding-left: 15px
        }

    }


    @keyframes rs2{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: #0e76a8;
            padding-left: 15px
        }

    }

    /*fin reseau*/
    .tablet,.fa-phone-square,li.phone2{display: none;
    }
    /*h2 contenu un savoir faire*/
    h2.aphia{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}

    div.valeurgroup{
        width: 700px;
        min-width: 320px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: auto
    }

    figure.valeur{width: 97px;
        height: 119px;
        margin-right: 37px;
        min-width: 30px}

    div.valeur2{width: 185px;
        height: 188px;
        margin-right: 37px;
    }
    div.valeurgroup2{
        width: 100%;
        justify-content: center;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 39px;
    }

    article.cadre2{width: 80%}

    section.new{width: 100%;
        background: #deeaf6;
        height: auto;
        box-shadow:  1px 1px 28px gray}

    div.global{margin: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;}



    h2.chapitre{ margin: 52px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;} 

    .navbar-nav{padding-left: 69px;}
    .partenaires{width: 100%;
        margin: auto}



    /*footer*/
    /*footer*/
    footer{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #c03228;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .col ul li a, address{color: snow;}
    .col{
        width: 50%;
        height: auto;
        margin-top: 10px;
        margin-left: 37px;
        font-size: 12px;
        text-align: center;
        font-size: 14px
    }
    .colseul ul li a, address{color: snow;}
    .colseul{
        width: 100%;
        height: auto;
        font-size: 12px;
    }

    a.phone{ color:aquamarine; text-decoration: none}
    .mentions {color: snow}

    .col ul li {list-style: none; padding-bottom: 5px}
    .col  h2 { font-size: 20px;
        color: lightgray;
    }
    .colseul h2 { font-size: 20px;
        color: lightgray;
        text-align: center
    }


    address{text-align: center}
    .autorisation{font-size: 12px;
        text-align: center;
        padding-top: 20px;}



    /*    fin footer*/
    .tablet{display: none}

    /*bloc slide*/
    a.numero{display: block;
        background: #c03228;
        width: 280px;
        line-height: 30px;
        height: 30px;
        margin: auto;
        margin-bottom: 10px;
        box-shadow: 6px 6px 36px black;
        text-decoration: none;
        color: white;
        font-size: 18pt
    }

    .oumlil{background: white;
        width: 280px;
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        color: black;
        box-shadow: 6px 6px 36px black;
        margin:  0 auto 5px;
        font-size: 15px}

    .msg{
        color: #3f6cb2;
        font-weight: bold;
        border-top: 1px solid black;
        margin: 14px auto 0px;
        padding-top: 10px; }

    /*fin bloc slide*/
}
/*////////////////////////////////////////tablette m*/
@media screen and (min-width:520px) and (max-width:767px){
    h2.aphia4 {
        margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;
    }

    h2.aphi{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}





    div.slida{margin-top: 55px}
    article.expotitre{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding: 15px 0;
        margin-bottom: 2px;
        text-align: center
    }

    .pres{padding-left: 0px}

    h2.aphia2,h2.aph{margin: 40px 0 35px 0;
        text-align: center;
        color: black;
        font-size: 1.6rem}

    article.exposeul{
        width: 52%;
        height: auto;
        min-width: 320px;
        padding-left: 0px;
        margin-bottom: 2px
    }


    article.exposeulh{
        width: 72%;
        height: auto;
        min-width: 320px;
        padding-left: 10px;
        padding-bottom: 32px
    }

    section.slide{ 
        background:  #0b0d25; 
        width: 100%; 
        height: auto}

    article.exp{
        width: 80%;
        height: auto;
        min-width: 320px;
        padding-left:35px;
        padding-right:10px;

    }
    .mieux{
        width: 80%;
        height: auto;
        min-width: 320px;
        padding-left:35px;
        padding-right:10px;}

    article.expo{
        width: 80%;
        height: auto;
        min-width: 320px;
        padding-left: 40px;
        margin-bottom: 2px;


    }

    .type{order: 2}


    header.banner
    {width: 100%;
        height: auto;
        background: white;
        position: fixed;
        z-index: 10;
        top: 0;
        box-shadow: 0px 2px 9px -1px black;} 

    .logo{ z-index: 1032;
        position: fixed;
        top: 0;
        left: 10%;
        width: 174px;
        height: 64px;
        background: url(../images/logo768.svg) 10px 0px no-repeat #c03228;
        border-bottom-right-radius: 10px;
        box-shadow: 0px 2px 9px -1px black;
        border-bottom-left-radius: 10px;
    }
    nav{
        margin-left:25% ;
        background: white !important;}

    div.picto{width: 47px;
        height: 53px;
        margin: 10px auto; 
        background: url(../images/picto1.gif) 0 0 no-repeat
    }
    div.picto2{
        width: 47px;
        height: 53px;
        margin: 10px auto;
        background: url(../images/picto2.gif) 0 0 no-repeat
    }
    div.picto3{

        height: 53px;
        margin: 10px auto;
        width: 59px;
        background: url(../images/picto3.gif) 0 0 no-repeat
    }

    .deux{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid white
    } 
    p.txt,h2.txt{text-align: center;
        color: white;
    }
    h2.txt{font-size: 1.6rem}

    p.txt{margin-bottom: 25px}
    p.txt2,h2.txt2{text-align: center;
        color: black;
    }
    h2.txt2{font-size: 1.6rem}

    p.txt2{margin-bottom: 25px}

    /*reseau */
    .reseau{position: fixed;
        top: 20vh;
        left: 0;
        z-index: 10;
        width: 60px;
        height: 80px;
    }
    li.facebook, li.in{
        list-style: none; 
        display: block;}

    li.phone2{display: block;
        list-style: none;
    }

    li.phone2 a{display: block;
        width: 40px;
        background: #0097d7;
        transition: 1s; 
        height: 40px}

    li.phone2 a:hover{
        animation: 500ms rs3 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }
    @keyframes rs3{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: skyblue;
            padding-left: 15px
        }
    }

    li.facebook a{display: block;
        width: 40px;
        background: #3b5998;
        transition: 1s; 
        height: 40px}


    li.in a{display: block;
        width: 40px;
        background: #0e76a8;
        transition: 1s; 
        height: 40px}

    li.in a:hover{
        animation: 500ms rs2 0s linear ; 
        animation-iteration-count:1;
        animation-fill-mode: forwards;

    }

    li.facebook a:hover{
        animation: 500ms rs 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }

    i.color{color:white;
        line-height: 40px;
        padding-left: 5px;
        box-sizing: border-box;
    }

    @keyframes rs{

        0%{ width: 40px;
            padding-left: 5px;

        }

        100%{width: 60px;
            transition: 500ms;
            background: #3b5998;
            padding-left: 15px
        }

    }


    @keyframes rs2{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: #0e76a8;
            padding-left: 15px
        }

    }

    /*fin reseau*/
    .tablet,.fa-phone-square,li.phone2{display: block;
    }
    /*h2 contenu un savoir faire*/
    h2.aphia{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}

    div.valeurgroup{
        width: 100%;
        justify-content: center;
        min-width: 320px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: auto
    }

    figure.valeur{width: 97px;
        height: 119px;
        margin-bottom: 25px;
        margin-right: 37px;
        min-width: 30px}

    div.valeur2{width: 50%;
        height: 188px;
    }
    div.valeurgroup2{
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 39px 90px;
    }

    article.cadre2{width: 80%;
    }

    section.new{width: 100%;
        background: #deeaf6;
        height: auto;
        box-shadow:  1px 1px 28px gray}

    div.global{margin: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;}



    h2.chapitre{ margin: 52px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;} 

    .navbar-nav{padding-left: 119px}
    .partenaires{width: 100%;
        margin: auto}

    .carousel {
        position: relative;
        top: 47px;
        z-index: -1}

    section.bloc {
        max-width: 80%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 2px;
        box-shadow: 2px 10px 14px grey;
        margin: 46px auto 36px;}

    /*footer*/
    /*footer*/
    footer{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #c03228;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 50px;
    }
    .col ul li a, address{color: snow;}
    .col{
        width: 50%;
        height: auto;
        margin-top: 10px;
        margin-left: 37px;
        font-size: 12px;
        text-align: center;
        font-size: 14px
    }
    .colseul ul li a, address{color: snow;}
    .colseul{
        width: 100%;
        height: auto;
        font-size: 12px;
    }

    a.phone{ color:aquamarine; text-decoration: none}
    .mentions {color: snow}

    .col ul li {list-style: none; padding-bottom: 5px}
    .col  h2 { font-size: 20px;
        color: lightgray;
    }
    .colseul h2 { font-size: 20px;
        color: lightgray;
        text-align: center
    }


    address{text-align: center}
    .autorisation{font-size: 12px;
        text-align: center;
        padding-top: 20px;}


    /*    fin footer*/
    .tablet{display: none}

    /*bloc slide*/
    a.numero{display: block;
        background: #c03228;
        width: 280px;
        line-height: 30px;
        height: 30px;
        margin: auto;
        margin-bottom: 10px;
        box-shadow: 6px 6px 36px black;
        text-decoration: none;
        color: white;
        font-size: 18pt
    }

    .oumlil{background: white;
        width: 280px;
        height: auto;
        padding: 15px;
        box-sizing: border-box;
        color: black;
        box-shadow: 6px 6px 36px black;
        margin:  0 auto 5px;
        font-size: 15px}

    .msg{
        color: #3f6cb2;
        font-weight: bold;
        border-top: 1px solid black;
        margin: 14px auto 0px;
        padding-top: 10px; }

    /*fin bloc slide*/
}
/*////////////////////////////////////////smartphone*/
@media screen and (max-width:519px){
    form{margin: 0;
    padding: 0;
    box-sizing: border-box}
    label{width: 100%}
    
    .blocgauche {
    margin-right: 0px;
     width: 320px;
     margin-left: 0px; 
}
    .blocdroite {
    width: 320px;
    height: auto;
    
     margin-right: 0px; 
     margin-left: 0px; 
    }
    .generale {
  width: 320px;
    height: 100%;
    display: flex;
        flex-wrap: wrap;}
    
    
    
select{ width: 70%;
    padding: 12px;}

.send {
    width: 170px;
    margin: auto;
    background: #deeaf6;
    transition: 1s;}
    .send:hover{width: 80px}
    
    textarea {
    width: 281px;
        height: 200px;}
    
    h2.aphi{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}
    .btn-primary {
    margin-bottom: 5px;
    margin-right: 5px;
width: 320px}
    
    

    .form-control {
        display: block;
        width: 70%;
        margin: auto}

    div.slida{margin-top: 55px;
    }
    article.expotitre{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding: 15px 0;
        margin-bottom: 2px;
        text-align: center
    }

    .pres{padding-left: 22px;}

    h2.aph,h2.aphia3{margin: 40px 0 35px 0;
        text-align: center;
        color: black;
        font-size: 1.6rem}

    h2.aphia4{margin: 40px 0 35px 35px;
        text-align: center;
        color: black;
        font-size: 1.6rem}



    section.slide{ 
        background: #0b0d25; 
        width: 100%; 
        height: auto}

    article.exp{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding-left: 61px;
        padding-right: 25px;

    }
    .mieux{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding-left: 61px;
        padding-right: 25px;}



    h2.aphia2,h2.aph{margin: 40px 0 35px -13px;
        text-align: center;

        font-size: 1.6rem}

    article.expo{
        width: 80%;
        height: auto;
        min-width: 320px;
        padding-left: 57px;
        padding-right: 20px;
        margin-bottom: 2px;
        text-align: justify;


    }



    article.exposeul,article.exposeulh{
        width: 100%;
        height: auto;
        min-width: 320px;
        padding-left: 61px;
        padding-right: 25px;
        margin-bottom: 2px
    }

    .type{width: 80%;
        margin-left: 46px;}


    header.banner
    {width: 100%;
        height: auto;
        background: white;
        position: fixed;
        z-index: 10;
        top: 0;
        box-shadow: 0px 2px 9px -1px black; } 

    .logo{ z-index: 1032;
        position: fixed;
        top: 0;
        left: 10%;
        width: 174px;
        height: 64px;
        background: url(../images/logo768.svg) 10px 0px no-repeat #c03228;
        border-bottom-right-radius: 10px;
        box-shadow: 0px 2px 9px -1px black;
        border-bottom-left-radius: 10px;
    }
    nav{
        margin-left:25% ;
        background: white !important;}

    div.picto{width: 47px;
        height: 53px;
        margin: 10px auto; 
        background: url(../images/picto1.gif) 0 0 no-repeat
    }
    div.picto2{
        width: 47px;
        height: 53px;
        margin: 10px auto;
        background: url(../images/picto2.gif) 0 0 no-repeat
    }
    div.picto3{

        height: 53px;
        margin: 10px auto;
        width: 59px;
        background: url(../images/picto3.gif) 0 0 no-repeat
    }

    .deux{margin-bottom: 20px;
        text-align: center;
        background: transparent;
        border: 1px solid white
    } 
    p.txt,h2.txt{text-align: center;
        color: white;
    }
    h2.txt{font-size: 1.6rem}

    p.txt{margin-bottom: 25px}
    p.txt2,h2.txt2{text-align: center;
        color: black;
    }
    h2.txt2{font-size: 1.6rem}

    p.txt2{margin-bottom: 25px}

    /*reseau */
    .reseau{position: fixed;
        top: 20vh;
        left: 0;
        z-index: 10;
        width: 60px;
        height: 80px;
    }
    li.facebook, li.in{
        list-style: none; 
        display: block;}

    li.phone2{display: block;
        list-style: none;
    }

    li.phone2 a{display: block;
        width: 40px;
        background: #0097d7;
        transition: 1s; 
        height: 40px}

    li.phone2 a:hover{
        animation: 500ms rs3 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }
    @keyframes rs3{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: skyblue;
            padding-left: 15px
        }
    }

    li.facebook a{display: block;
        width: 40px;
        background: #3b5998;
        transition: 1s; 
        height: 40px}


    li.in a{display: block;
        width: 40px;
        background: #0e76a8;
        transition: 1s; 
        height: 40px}

    li.in a:hover{
        animation: 500ms rs2 0s linear ; 
        animation-iteration-count:1;
        animation-fill-mode: forwards;

    }

    li.facebook a:hover{
        animation: 500ms rs 0s linear; 
        animation-iteration-count:1;
        animation-fill-mode:forwards;
    }

    i.color{color:white;
        line-height: 40px;
        padding-left: 5px;
        box-sizing: border-box;
    }

    @keyframes rs{

        0%{ width: 40px;
            padding-left: 5px;

        }

        100%{width: 60px;
            transition: 500ms;
            background: #3b5998;
            padding-left: 15px
        }

    }


    @keyframes rs2{

        0%{ width: 40px;
            padding-left: 5px
        }

        100%{width: 60px;
            transition: 500ms;
            background: #0e76a8;
            padding-left: 15px
        }

    }

    /*fin reseau*/
    .tablet,.fa-phone-square,li.phone2{display: block;
    }
    /*h2 contenu un savoir faire*/
    h2.aphia{margin: 27px 0 31px 0;
        text-align: center;
        font-size: 1.6rem}

    div.valeurgroup{
        width: 100%;
        justify-content: center;
        min-width: 320px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin-left: 10px;
    }

    figure.valeur{width: 97px;
        height: 119px;
        margin-bottom: 25px;
        margin-right: 37px;
        min-width: 30px}

    div.valeur2{width: 50%;
        height: 188px;
    }
    div.valeurgroup2{
        width: 100%;

        height: auto;
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 39px 38px;
    }

    article.cadre2{width: 100%;
        height: auto;

        min-width: 320px;
        padding-left: 22px;
        padding-right: 25px;}

    article.cadre{width: 100%;
        height: auto;
        min-width: 320px;

        padding-left: 61px;
        padding-right: 25px;}

    article.cadrepicto{width: 100%;
        height: auto;
        min-width: 320px;
        padding-right: 35px;}

    section.new{width: 100%;
        background: #deeaf6;
        height: auto;
        box-shadow:  1px 1px 28px gray}

    div.global{margin: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;}


    h2.chapitre{ margin: 52px 0 31px 0;
        text-align: center;
        font-size: 1.6rem;} 

    .navbar-nav{
        position: relative;
        left: -50px;
        padding-top: 25px;
        text-align: center;
        background: rgba(255,255,255,.5)}

    .partenaires{width: 100%;
        margin: auto}

    .carousel {
        position: relative;
        top: 47px;
        z-index: -1}

    section.bloc {
        max-width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        box-shadow: 2px 10px 14px grey;
        margin: 46px auto 36px;}

    /*footer*/
    /*footer*/
    footer{
        display: flex;
        width: 100%; 
        height: 700px; 
        background: #c03228;
        flex-direction: column;
        flex-wrap: wrap
    }
    .col ul li a, address{color: snow;}
    .col{
        width: 100%;
        height: auto;
        margin-top: 30px;

        font-size: 12px;
        text-align: center;
        font-size: 14px;
    }

    .col:nth-child(3){

        margin-top: -94px;

    }
    .colseul ul li a, address{color: snow;}
    .colseul{
        width: 100%;
        height: auto;
        font-size: 12px;
    }

    a.phone{ color:aquamarine; text-decoration: none}
    .mentions {color: snow}

    .col ul li {list-style: none; padding-bottom: 5px}
    .col  h2 { font-size: 20px;
        color: lightgray;
    }
    .colseul h2 { font-size: 20px;
        color: lightgray;
        text-align: center
    }
    div.toto{
        display: flex;
        width: 100%; 
        height: 100%; 
        background: #23263d;;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;

    }
}

address{text-align: center}
.autorisation{font-size: 12px;
    text-align: center;
    padding-top: 20px;}


/*    fin footer*/
.tablet{display: none}

/*bloc slide*/
a.numero{display: block;
    background: #c03228;
    width: 280px;
    line-height: 30px;
    height: 30px;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: 6px 6px 36px black;
    text-decoration: none;
    color: white;
    font-size: 18pt
}

.oumlil{background: white;
    width: 280px;
    height: auto;
    padding: 15px;
    box-sizing: border-box;
    color: black;
    box-shadow: 6px 6px 36px black;
    margin: auto;
    font-size: 15px;
    border-bottom:1px solid black;}




/*fin bloc slide*/
}