body {
    font-size : 14px;
    font-family: 'Arial',Tahoma sans-serif;
    width : 100%;

}

.fondDifferent {
    background :  url("../images/plancher.jpg") repeat;
    color : white;
}

.blocDiv {
    background : #da4f4f;
    color : white;
    height : 100%;
}

.iconeGros {
    width : 55px;
    height :auto;
}   
        p {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 25px;
        }
  

.nav-link {
border: none !important;
}

.container-fluid {
    width : 100%;
    padding : 0;
    margin : 0;
}

@keyframes imageLoad{
    to {
        opacity : 1;
    }
}


body {
    background: rgb(240, 239, 239) !important;
    font-size : 1em;
}


h1 {
    color :  #b93636 !important;
    font-size: 1.9em;
    font-family: Arial, Helvetica, sans-serif;
    width : 100%;
    text-align: center;
    text-shadow : none;
    margin : 20px 0 20px 0;
}

h2 {
    color :  #f1a761 !important;
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom : 2%;
    text-shadow : none;
    margin : 6px auto; 
}

h3 {
    font-size: 1.2em;
    margin : 7px 0px;
}

.devis {
    position: absolute;
    top : 75%;
    left : 50%;
    transform : translateX(-50%);
    width : 10%;
    border-radius: 26% ;
    overflow: hidden;
}

.blocButton {
    width : 100%;
    text-align: center;
}


.centrer {
   margin : 2% auto;
}

.centrer2 {
    text-align: center;
}

.left{
    text-align : left;
    padding-top: 2%;
}

.row {
    width : 100%;
    padding : 0 !important;
    margin : 0;
}

.row [class^="col-"] {
	padding : 9px 0;
}


hr {
    height: 1px;
    margin: 0.5em auto;
    margin-top : 0;
    margin-bottom : 24px;
    padding: 0;
    color :#ec9848 ;
    background-color: #ec9848 ;
    border: 0;
    width : 75px;
  }

header{
    background-color: #000;
    position: relative;
}

.textHeader {
    text-shadow: 1px 1px 2px black;
    font-size : 1.7em;
    text-align : center;
    color : white;
    margin : 0 auto;
    margin-top : 7%;
    background : rgba(113, 160, 231, 0.411);
}

footer {
    /*background-color: #3A3F44;*/
    background-color : #04192b;
    width : 100%;
    text-align: left;
    padding-top : 25px;
    color: white;
    margin-top : 6%;
    font-size : 0.8em;
    font-family: Arial, Helvetica, sans-serif;
}

footer a {
   color : #e72455;
   text-decoration: none;
}

footer .titre {
    color :  #e72455;;
}

.location { 
   
    margin-left : -30%;
    opacity : 0;
}

.navbar-toggler.hidden-lg-up {
    border : none ;
    padding : 0px;
}

.location:hover {
    cursor : pointer;
   }

@keyframes locationMove{
    to {
        opacity : 1;
        margin-left : 0;
    }
}

@keyframes locationMove2{
    to {
        opacity : 1;
        margin-top : 0;
        margin-left : 5%;
    }
}

.nav-item.active a{
    color : white !important;
}

.ombrage {
    border: 2px solid #fff;
    -moz-box-shadow: 8px 8px 12px #aaa; 
    -webkit-box-shadow: 8px 8px 12px #aaa; 
    box-shadow: 8px 8px 12px #555; 
    margin-bottom : 35px;
  } 

.ombrage2 {
    -moz-box-shadow: 8px 0px 12px #aaa; 
    -webkit-box-shadow: 0px 0px 12px #aaa; 
    box-shadow: 9px 0px 12px #555; 
} 

.img-fluid2 {
   max-width : 100%;
   width : 100%;
    height : auto;
    margin : 0;
    padding : 0;
    opacity : 0;
}



.img-fluid5 {
    max-width : 100%;
    width : 100%;
     height : auto;
     margin : 0;
     padding : 0;
 }

.img-fluid3 {
    max-width : 100%;
    width : 100%;
     height : auto;
     margin : 0;
     padding : 0;
     opacity : 0;
 }

 .img-fluid4 {
     height : 250px;
     width : auto;
     padding : 0;
     opacity : 0;
 }
 
legend {
    color : black;
}

.dropdown-menu {
 padding : 9px;
}

.alert-successPerso {
    background: #da945b;
}

.compte {
width : 90%;
padding : 4%;
background : rgb(21, 42, 73);
color : rgb(246, 248, 223);
}

.compte input {
color : #9e9696;
}

.compte label {
    color : white;
}

.show2{
    display : block !important;
}

.acceptCookie{
    background : #0f0e52;
    color : white;
    font-size : 1.1em;
    position : fixed;
    bottom : 0;
    width : 100%;
    text-align : center;
    padding : 15px;
    z-index :4000;
    left : 0;

}

#mynavbar {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color : black;
}
    
.hide{
    visibility: hidden;
}

li.nav-item.dropdown.show:hover > div.dropdown-menu{
    display : block;
}

div.dropdown-menu:hover{
    display : block;
}

.mentions a {
    color : rgb(77, 46, 1);
}
small a {
    color : #c57205;
}

.relative {
    position : relative;
}

.white {
    background : #FFF;
    color : black;
}

.black {
    background : #000;
    color :white;
}

.nav-link:hover {
    color :white !important;
}

.boutonLien {
    color : white;
    border: 1px solid #c70606;
    background-color : #97654e;;
    padding : 10px;
    font-family : Tahoma, sans-serif;
    font-size : 0.8em;
}

.boutonLien:hover{
cursor : pointer;
}

.boutonAction1 {
    color : white;
    background-color:#dd905c ;
    font-family: Tahoma, sans-serif;
    padding : 11px;
    border : 0;
}

.boutonAction2 {
    color : white;
    background-color:#095e64 ;
    font-family: Tahoma, sans-serif;
    padding : 11px;
    border : 1px solid white;
}

.prix1 {
    font-size : 1.3em;
    font-family: Tahoma, sans-serif;
    color : #da945b;
}

.imgIcon {
    width : 60px;
    height : auto;
}

.blocLienImg {
    background-image : url("../images/backspread.jpg");
    opacity : 0;
    background-size : 5%;
    background-repeat: no-repeat;
    background-position : center;
     -webkit-transition: background-size 600ms linear;
    -moz-transition: background-size 600 linear;
    -o-transition: background-size 600 linear;
    transition: background-size 600ms linear;
}

.blocLienImg:hover {
    background-size : 100%;
}

  @media screen and (max-width: 768px) {

    header {
        margin-bottom : 20px;
    }

    .textHeader {
        position : absolute;
        top : 22%;
        width : 100%;
        font-size : 1.1em;
    }

.devis {
width : 22%;
}
    
    .logo {
        position : fixed;
        top  :4px;
        left : 4px;
        width : 150px;
        height : auto;
        z-index : 1000;
    }

    h1 {
        font-size : 1.4em;
        margin : 0 auto;
    }

    .nav-item {
        background : black;
        color : white;
    }

    .avecEspaces {
        margin-top  : 6%;
    }

    .imgProduit.col-8.col-md-12 + .col-4.col-md-12 {
        font-size : 0.8em;
    }

    #mynavbar {
        position : absolute !important;
        top : 2px !important;
        left : 0px;
        height : 30px;
        background-color : black !important;
    }

    

    #navbarColor01{
        background-color : black !important;
    }
    
    .img-fluid3 {
        width : 100%;
        max-width : 100%;
    }

    .img-fluid4 {
        height : 100px;
    }

    footer p {
        font-size : 1em;
    }


    
  }


  @media only screen and (max-width: 767px) and (orientation: portrait) {


    label {

        width : 135px;
    }

    .img-fluid4 {
        height : 85px;
    }

    .boutonAction {
        width : 96%;
        height : auto;
        margin : 0 1%;
     }

     .boutonAction1 {
        color : white;
        background-color:#dd905c ;
        font-family: Tahoma, sans-serif;
        padding : 5px;
        font-size : 0.8em;
        border : 0;
    }
    
    .boutonAction2 {
        color : white;
        background-color:#095e64 ;
        font-family: Tahoma, sans-serif;
        padding : 11px;
        border : 1px solid white;
    }
     
     header {
        position:relative;
        margin-bottom : 20px;
        background : url('../images/header_xs.jpg');
        animation : animationHeaderS 15s infinite 5s;
        background-repeat : no-repeat;
        background-position-x : center;
        background-size: 100% auto;
        min-height : 300px;
        height : 300px;
    }


    h1 {
        font-size : 1.4em;
        margin : 0 auto;
    }



    .logo {
        position : absolute;
        top  : -10px;
        left : 57%;
        width : 155px;
        height : auto;
        z-index : 5000;
    }


    #mynavbar {
        position : absolute !important;
        top : 0px !important;
        background: transparent !important;
        height : 45px !important;
        width : 100%;
        
    }

    #navbarColor01{
        position : absolute !important;
        background : transparent !important;
        top : 0px !important;
        color : white;
        z-index : 5999;
        overflow: visible;
    }
 
    .navbar-toggler.hidden-lg-up {
        border : none ;
        padding : 0px;
        background-color: transparent!important;
    }


    body {
        font-size : 12px;
    }
}
  

  @media screen and (min-width: 769px) {

    .img-fluid4 {
        height : 150px;
    }

.devis {
width : 14%;
}


    header {
        position:relative;
        margin-bottom : 30px;
        background : url('../images/header_xl.jpg');
        background-repeat : no-repeat;
        background-position-x : center;
        background-size: 100% auto;
        min-height : 300px;
        height : 300px;
    }

    .logo {
        position : absolute;
        top  : -27px;
        left : 80%;
        width : 150px;
        height : auto;
    }

    .img-fluid4 {
        height : 216px;
    }

    h2 {
        font-size : 1.2em;
    }

    body {
        font-size : 12px;
    }

    #mynavbar {
        background-color : transparent !important;
        background : transparent !important;
    }

    #navbarColor01{
        position : absolute !important;
      background : transparent;
        top : 30px !important;
        color : black;
    }

  
    .nav-item.active {
        background : rgb(210, 246, 255) !important;
        opacity : 1 !important;
        color : white;
    }
    
    header {
        max-height:260px;
        position:relative;
        margin-bottom : 30px;
        
    }

    footer {
        font-size : 0.8em;
    }

    .img-fluid4 {
        height : 165px;
    }

    footer p {
        font-size : 1em;
    }

  }

  @media screen and (min-width: 1024px) {

    .logo {
        position : absolute;
        top  :-45px;
        left : 80%;
        width : 230px;
        height : auto;
        z-index : 5000;
    }

.devis {
width : 10%;
}

    h2 {
        font-size : 1.5em;
    }

    body {
        font-size : 15px;
    }

    .img-fluid3 {
        width : 100%;
        height : auto;
    }

    #mynavbar {
        position : relative;
        height  : 60px;
        padding : 0 !important;
        width : 100%;
        background : transparent !important;
        border : none;
    }

    #navbarColor01{
        background : transparent;
        width : 100%;
        top :0px !important;
        height : 60px;
        border : none;
        color : blue;
    }

    #navbarColor01 a{
        line-height : 50px;
    }

    #mynavbar a {   
        font-size : 0.8em;
        color : black;
    }

    .nav-item.active {
        background : rgb(240, 92, 92) !important;
        opacity : 1 !important;
        color : white !important;
    }

    .nav-item {
        background : transparent;
        
    }

    .nav-link {
        padding : 7px !important;
    }

    header {
        position:relative;
        overflow : hidden;
        margin-bottom : 0px;
        background : url('../images/header_xl.jpg');
        background-repeat : no-repeat;
        background-position-x : center;
        background-size: 100% auto;
        min-height : 450px;
        height : 450px;
    }
   
    footer p {
        font-size : 1em;
    }

    .img-fluid4 {
        height : 250px;
    }
}


/*///////////////////*POPUP ///////////////////////*

  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
  }
  
  @keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
  }

 
.show {
    visibility: visible;
}
 
.show ~ .overlay {
    opacity: 1;
    visibility: visible;
}
 
.blur-effect .popup-content {
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    transform: translateY(-5%);
    opacity: 0;
}
 
.show.blur-effect ~ .container,
.blur-effect .popup-content, .show.blur-effect ~ .bgall {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
 
.show.blur-effect .popup-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}