*{
  margin:0;
  padding:0;
 }

body, html{height:100%;}




body{
     font-family:'source code pro',calibri, serif;
      background-color:grey;
    
     color:black;
      
   }

   
 
#main{

       max-width:1280px;

        min-height:100%;
         min-width:100%;
        margin:0 auto;
        
        position:relative;

     } 
 
footer{

        background:#424558;

        position:absolute;
        text-align:center;
        bottom:0;

        width:100%;

        padding-top:50px;

        height:50px;
       border-top:1px solid black;
     } 
 
 @media screen and (max-width: 780px){
   
     
   footer{

           width:100%;
           font-size:22px;
            padding-top:25px;
     } 
 }  
 
 
 
 
#firstback{ 
            display:block;
            background-color:#424558;
            height:80px;
            width:100%;
           }
.text{
      color:red;
      font-size:25px;
      position:absolute;
      text-transform:uppercase;
      font-weight:bold;
      font-style:italic;
      padding-left:35px;
      padding-top:0px;
      
     }
     
@media screen and (max-width: 780px){
   
     .text {
             padding-left:26px;
             font-size:23px;
               padding-top:4px;
           }
     
   
 }            

        
     
 
 .text1{
        color:white;
        font-size:17px;
        position:absolute;
        text-transform:lowercase;
        font-weight:bold;
        font-style:italic;
        right:10px;
        padding-top:10px;
 
       }         
  
@media screen and (max-width: 780px){
   
   .text1{
               position:absolute;
                right:35px;
                font-size:20px;
            }
     
   
 }                
 
          
 
 
 
 .intblocker {
              padding-top:30px;
            }
   
 .blocker{
          overflow:scroll;
           border:groove;
          width:25em;
          height:10em;
          margin:0px auto;
          color:black;
          background-color:white;
          padding-left:15px;
          padding-top:5px;
          
        }
 
 
 
 
.logo img{
          position:absolute;
          width:180px;
          height:85px;
          left:12px;
          padding-top:1px;
          
         }
         
@media screen and (max-width: 780px){
   
   .logo img{
             width:140px;
             height:70px;
             padding-top:17px;
            }
     
   
 }                   
         
         
         
 .logo1 img{
          position:absolute;
          width:2%;
          height:20px;
          right:10px;
          padding-top:38px;
         }
         
@media screen and (max-width: 780px){
   
   .logo1 img{
               position:absolute;
                width:4%;
                 height:20px;
                  right:34px;
            }
     
   
 }                     
         
.logo1 img:hover{
                 border-top:5px solid #e44d26;
              }                 
 
 .logo2 img:hover{
                 border-top:5px solid #e44d26;
              }
 
 .logo3 img:hover{
                  border-top:5px solid #e44d26;
                 }
 
.logo2 img{
          position:absolute;
          width:2%;
          height:14px;
          right:43px;
          padding-top:41px;
         } 
         
         
@media screen and (max-width: 780px){
   
   .logo2 img{
               position:absolute;
                width:4%;
                 height:14px;
                  right:78px;
            }
     
   
 }                              
   
.logo3 img{
          position:absolute;
          width:2%;
          height:14px;
          right:77px;
          padding-top:41px;
         } 
         
@media screen and (max-width: 780px){
   
   .logo3 img{
               position:absolute;
                width:4%;
                 height:15px;
                  right:122px;
            }
     
   
 }                      
            
   
nav {
    width:100%;
    background-color:#424558;
    

   }
   
nav > ul{
         margin:0px;
         padding:0px;
         
       }
nav > ul::after{
                content:'';
                display:block;
                clear:both;
               }       
nav > ul > li{
              float:left;
              position:relative;
           
              
           } 
nav > ul > li > a{
                   padding:15px 30px;
                   color:#FFF;
                   position:relative;
                   font-size:15px;
                  }
                  
  @media screen and (max-width: 780px){
   
       nav > ul > li > a{
                         padding:8px;
                         font-size:14px;
                    }
  
 }                  
       
                 
nav > ul > li:hover a {
                       padding:10px 30px 15px 30px;

                      } 
                      
 @media screen and (max-width: 780px){
   
   
   nav > ul > li:hover a {
                           padding:5px 10px 10px 10px;

                     }    
   
 }                       
                                                  
nav li{
       list-style-type:none;
      
      }             
.submenu{
         display:none;
       }  
nav a{
      display:inline-block;
      text-decoration:none;
       
    }
nav li:hover .submenu{
                      display:inline-block;
                      position:absolute;
                      top:100%;
                      left:0px;
                      padding:0px;
                      z-index:1000;

                     }   
                     
.submenu li{
            border-bottom:1px solid #ccc;
            
           }
.submenu li a{
              padding:15px 30px;
              font-size:17px;
              color:#c5c5c5;
              width:270px;
             }
     
.menu-con:hover{
                 border-top:5px solid #4C8;
                 background-color:RGBa(64, 200, 130, 0.15);
             
                 } 
                 
 .menu:hover{
                  
                 border-top:5px solid #e44d26;
                 background-color:RGBa(228, 77, 38, 0.15);
                }
 .menu-ob:hover{
             border-top:5px solid #4C8;
                 background-color:RGBa(64, 200, 130, 0.15);
             
              } 
  .menu-hist:hover{
                  border-top:5px solid #e44d26;
                 background-color:RGBa(228, 77, 38, 0.15);
             
            }
 
 
 .menu-ci:hover{
            border-top:5px solid #e44d26;
            background-color:RGBa(228, 77, 38, 0.15);
             
            }
 
 .menu-appr:hover{
                  border-top:5px solid #e44d26;
                  background-color:RGBa(228, 77, 38, 0.15);
             
                 }
 .menu-pers:hover{
                 border-top:5px solid #4C8;
                 background-color:RGBa(64, 200, 130, 0.15);
             
                 } 
 .menu-media:hover{
                 border-top:5px solid #4C8;
                 background-color:RGBa(64, 200, 130, 0.15);
             
                 } 	  
 .menu-act:hover{
                  border-top:5px solid #e44d26;
                  background-color:RGBa(228, 77, 38, 0.15);
             
                 }
 
.menu-hist .submenu{
                  
                     background-color:#424558;
                     opacity:.8;
                  } 
 
.menu-act .submenu {
                 
                    background-color:#424558;
                    opacity:.8;
                 }

    
.submenu li:hover a{
                    color:#EEE;
                    font-weight:bold;
                   
                   }                 


                  
                               
             
                             
                            
.menu-hist .submenu li:hover{
                
                               background-color:RGBa(64, 200, 130, 0.15);
                            } 

.menu-act .submenu li:hover {
                 
                                background-color:RGBa(64, 200, 130, 0.15);
             
                            }

                            
 .reglage{
          padding-left:49px;
          padding-top:5px;
         } 
 @media screen and (max-width: 780px){
   .reglage{
               padding-left:29px;
               padding-top:5px;

         }
       
 }                
                    
 .reglage2{
          padding-left:49px;
          padding-top:5px;
         }
 @media screen and (max-width: 780px){
   .reglage2{
               padding-left:29px;
               padding-top:5px;

         }
       
 }        
               
h50{
    padding-left:125px;
     color:#FF8A22;
     font-size:22px;
     font-weight:bold;
   }            
    
#section1{
          
          padding:10px;
          border-top:none;
          
          height:200px;
          border-left:none;
          border-bottom:none;
          
          
       } 
 .spani1{
           color:black;
           font-weight:bold;
           font-size:18px;
          
         
         }
  .spani2{
           color:black;
           font-weight:bold;
           font-size:18px;
         }       
.gestion1{
           padding-left:315px;

         }
 @media screen and (max-width: 780px){
   .gestion1{
              padding-left:10px;

         }
       
 }                 
          
         
 .gestion2{
           padding-left:250px;

         } 
         
  @media screen and (max-width: 780px){
   .gestion2{
              padding-left:146px;

         }
       
 }                       

 .gestion3{
           padding-left:303px;
          }
          
 @media screen and (max-width: 780px){
   .gestion3{
              padding-left:0px;

         }
       
 }                  
          
          
         
.gestion4{
          padding-left:266px;
         }         
 
 @media screen and (max-width: 780px){
   .gestion4{
              padding-left:146px;

         }
       
 }
 
.gestion5{
          padding-left:287px;
         }         
 
 @media screen and (max-width: 780px){
   .gestion5{
              padding-left:0px;

         }
       
 }                       
 
 .gestion6{
          padding-left:217px;
         }         
 
 @media screen and (max-width: 780px){
   .gestion6{
              padding-left:146px;

         }
       
 } 
  
  
             
           
 #section1 input{
                 width:90px;
                 height:20px;
                
                 
                 }              
              
#section1:hover{
                box-shadow:0px 0px 5px #444;
                
               } 
  #section1 label{
                  
                  width:300px;
                  padding:10px 0px 15px 40px;
                 
               }              
input[type="submit"]{
                     
                     position:absolute;
                     left:530px;
                     font-size:14px;
                     color:#fff;
                     background-color:#fe6921;
                     font-weight:bold;
                     text-transform:uppercase;
                     border-radius:5px;

                    } 
                    
 @media screen and (max-width: 780px){
   
       input[type="submit"]{
                             position:absolute;
                             left:450px;
                        }
 
 
 } 
 
   
                                 
 input[type="submit"]:hover{
                            box-shadow:0px 0px 4px #555;
                            background-color:#e8ab2e;
                           } 
.vert{
      margin-left:100px;
      
     }
     
 @media screen and (max-width: 780px){
    .vert{
           margin-left:8px;
        }
       
 }
 
.vert1{
      margin-left:100px;
      
     }
     
 @media screen and (max-width: 780px){
    .vert1{
           margin-left:70px;
        }
       
 }          
 
           
     
 .adresse {
           padding-top:15px; 
           font-size:18px;
          }
 @media screen and (max-width: 780px){
    .adresse{
              font-size:17,5px;
            }
       
 }                   
          
            
 p2{
    font-weight:bold;
   }
       
h1{
   color:#FF8A22;
   padding-left:320px;
   font-size:25px;
  }
  
  @media screen and (max-width: 780px){
    h1{
            font-size: 15px;
            padding-left:300px;

        }
       
 } 
 
 h2{
   color:#FF8A22;
   padding-left:320px;
   font-size:25px;
  }     
  
  @media screen and (max-width: 780px){
    h2{
            font-size: 15px;
            padding-left:100px;

        }
       
 }  
  
  .pays{
        font-size:18px;
        padding-top:15px;
       }
  .pays1{
        font-size:18px;
        padding-top:15px;
       }   
 
  @media screen and (max-width: 780px){
    .pays1{
            font-size:16px;
        }
       
 }  
       
 .grand{
        font-weight:bold;
       }
  
.pk{
     color:#FF8A22;
     font-size:22px;
     font-weight:bold;
     padding-left:13px;
   }
.pk1{
     color:#FF8A22;
     font-size:20px;
     font-weight:bold;
     padding-left:20px;
    }   
   
   
 p5{
    text-decoration:underline;
   }  
 
 
.avuza img{
           width:100%;
           max-width:400px;
           padding-top:50px;
           padding-left:40px;
          }
.atamba img{
            width:100%;
            max-width:400px;
            padding-top:50px;
            padding-left:40px
         }
         
  

 .a1{
      position:absolute;
       padding-top:20px;
       left:190px;
       text-transform:uppercase;
       font-weight:bold;
       font-size:18px;

 
    }  
  
 .a2{
       position:absolute;
       padding-top:20px;
       left:140px;
       text-transform:uppercase;
       font-weight:bold;
       font-size:18px;

 
    }      

  

 .green{
        
         margin-left:100px;
        
       }
  .add{
       font-size:20px;
        padding-top:15px;
  }          
 
 @media screen and (max-width: 780px){
    .green{
              margin-left:9px;

         }
       
 }       
       
       
       
       
 .trait{
        margin-left:15px;
        font-size:18px;
 
        }
  
 @media screen and (max-width: 780px){
    .trait{
              margin-left:-2px;

         }
       
 }              
        
             
 .trait1{
         margin-left:10px;
         font-size:18px;
       }      
 .panier{
         max-width:1250px;
         margin:auto;
         background:#f2f2f2;
         overflow:auto;
       }
       
 @media screen and (max-width: 780px){
    .panier{
              max-width:1270px;
              margin:auto;
              background:#f2f2f2;
              overflow:auto;

         }
       
 }                    
       
       
               
 
 .gallery{
          margin:5px;
          border:1px solid #ccc;
          float:left;
          width:404px;
         }
  
        
 @media screen and (max-width: 780px){
    .gallery{
               margin:5px;
               border:1px solid #ccc;
               float:left;
               width:220px;

         }
       
 }                            
 
 .gallery img{ 
              width:100%;
              height:auto;
             }                     
 @media screen and (max-width: 780px){
    .gallery img{
                 width:100%;
                 height:auto;
              }
       
 }           
  

 
 
 
.desc{
      padding:15px;
      text-align:center;
     } 
     
  
     
         
                                         
.p1{
     color:white;
     font-weight:bold;
     font-size:30px;
     padding-top:180px;
     padding-left:350px;
     
   }
   

 .item-1, 
.item-2, 
.item-3 {
	     position: absolute;
         display: block;
	    top: 6em;
        color:white;
        font-weight:bold;
        width: 60%;
  
        font-size: 2em;

	    -webkit-animation-duration: 45s;
	    -webkit-animation-timing-function: ease-in-out;
    
	     -webkit-animation-iteration-count: infinite;
     
     
         -moz-animation-duration:45s;
         -moz-animation-timing-function:ease-in-out;                      
             
         -moz-animation-iteration-count:infinite;
         
         
         -o-animation-duration:45s;
         -o-animation-timing-function:ease-in-out;                      
             
         -o-animation-iteration-count:infinite;
         
        
           animation-duration:45s;
           animation-timing-function:ease-in-out;                      
              
           animation-iteration-count:infinite;
                      
            
                           
                    
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@-webkit-keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 40%; opacity: 0; }
}

@-webkit-keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 40%; opacity: 0; }
}

@-webkit-keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 40%; opacity: 0; }
}


@-moz-keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 40%; opacity: 0; }
}

@-moz-keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 40%; opacity: 0; }
}

@-moz-keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 40%; opacity: 0; }
}

@-o-keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 40%; opacity: 0; }
}

@-o-keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 40%; opacity: 0; }
}

@-o-keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 40%; opacity: 0; }
}
@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 40%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 40%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 40%; opacity: 0; }
}           
                            
.slider{
          margin:0px;
          padding:0px;
          width:100%;
          height:550px;
          
          background-image:url('picture/pic.jpg'); 
          background-size:cover;
         
          -webkit-animation-name:chgt-image;
         -webkit-animation-duration:45s;
         -webkit-animation-timing-function:ease-in-out;                      
         -webkit-animation-delay:2s;    
         -webkit-animation-iteration-count:infinite; 
         -webkit-animation-direction:normal;
                  
           
         -moz-animation-name:chgt-image;
         -moz-animation-duration:45s;
         -moz-animation-timing-function:ease-in-out;                      
         -moz-animation-delay:2s;     
         -moz-animation-iteration-count:infinite;
         -moz-animation-direction:normal;         
                    
                    
           -o-animation-name:chgt-image;
           -o-animation-duration:45s;
           -o-animation-timing-function:ease-in-out;                      
           -o-animation-delay:2s;
          -o-animation-iteration-count:infinite;
          -o-animation-direction:normal;
                      
           
           animation-name:chgt-image;
           animation-duration:45s;
           animation-timing-function:ease-in-out;                      
           animation-delay:2s;   
           animation-iteration-count:infinite;
           animation-direction:normal;           
            
                                                              
      }

@-webkit-keyframes chgt-image{
0%{background-image:url('./picture/pic.jpg'); }  
33%{background-image:url('./picture/foto3.jpg');} 
66%{background-image:url('./picture/foto1.jpg'); }                                                         

@-moz-keyframes chgt-image{
0%{background-image:url('./picture/pic.jpg');}  
33%{background-image:url('./picture/foto3.jpg');} 
66%{background-image:url('./picture/foto1.jpg'); }                                                        

@-o-keyframes chgt-image{
0%{background-image:url('./picture/pic.jpg'); }  
33%{background-image:url('./picture/foto3.jpg'); } 
66%{background-image:url('./picture/foto1.jpg');}                                                        

@keyframes chgt-image{
0%{background-image:url('./picture/pic.jpg'); }  
33%{background-image:url('./picture/foto3.jpg'); } 
66%{background-image:url('./picture/foto1.jpg');}                               


 @media screen and (orientation: landscape){}