* {box-sizing: border-box;     margin: 0;}
@font-face { font-family: 'lato'; src: url('../font/lato/Lato-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}	
@font-face { font-family: 'oswald'; src: url('../font/optima/optima.ttf') format('truetype'); font-weight: normal; font-style: normal;}	
html{font-family: lato; color: rgb(0, 0, 0);}



body {background-color: white; width: 100%;
     }

.page{display: flex;
    flex-direction: column;
}

    .topbar {height: 50px;
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:flex-start;
        align-items: center; 
        box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
        /*background-color: rgb(199, 228, 252);
        /*background-color: rgb(233, 248, 229);
        /*border-color: rgba(90, 90, 228, 0.7);
        border-style: ridge;*/
        /*box-shadow: 0px 5px 0px 0px rgba(90, 90, 228, 0.7);*/
        padding: 10px;
        z-index: 2;}
    .topbar  a{text-decoration: none; color: black;}

    .title {font-size: 30px; color: rgb(247, 112, 22); display: flex; justify-content:center;  width: 40%;}
    .title a{font-size: 40px; color:rgb(247, 112, 22); }
    .title a:hover{color: rgb(180, 180, 180);}

    .menu-1{display: flex;  
        flex-wrap: nowrap;
        justify-content:space-around;
        align-items: center; 
        width: 60%;}
 
    .item {font-size: 20px;
          flex-wrap: nowrap;}
    .item img{margin-right: 15px;}
    .item a:hover{color: rgb(247, 112, 22);}

    .corps{display: flex;background-color: white;flex-direction: row;height:100%;
        /*background-image: url('https://humanstrategy.fr/images/fondu.jpg');*/}
    .photo{padding: 50px 20px 20px 20px;
        width: 40%;
        z-index: 1;}
    .photo img{width: 40%;  
            margin-left: 30%;
            margin-bottom: 10%;
            box-shadow: 10px 10px 10px  #222;
            filter: grayscale(20%);}
    
    .photo img:hover {box-shadow: 3px 3px 2px #222;filter: grayscale(0%);}
    .pitch{text-align: center;color:rgb(247, 112, 22);line-height: 120%;}
    #contact-mini{text-align: center;font-size: 20px;}
    .contact{ font-size: 20px;width: 70%;justify-content: center ;padding: 3%;}
    .espace{padding-bottom: 2px; padding-left: 5%;}
   
    .palier{display: flex;  flex-wrap: nowrap;  justify-content:space-around; align-items: center; width: 100%;height: 10%;}
    .porte img:hover{  box-shadow: 2px 2px 20 rgb(22, 22, 22);}
    .porte{margin: 15px;width: 20%;background-color: white; box-shadow: 8px 8px 20 rgb(22, 22, 22); display: flex;
         flex-direction: column; flex-wrap: nowrap;  justify-content:center;align-items: center; 
         -moz-box-shadow: 8px 8px 12px #aaa; 
         -webkit-box-shadow: 8px 8px 12px #aaa; 
         box-shadow: 8px 8px 12px #555;}
    .porte img{ width: 100%; filter: grayscale(0%); }
    .porte a{text-decoration: none; }
    .porte img:hover{  filter: grayscale(100%);}
    .porte a:hover{box-shadow: 3px 3px 2px #222; color: rgb(247, 112, 22);font-weight: bold;}
    .centre{display:flex;justify-content: center ;align-items: center;margin-bottom: 15px;margin-top: 10px; z-index: 2;}
        
    .retrait{font-family: oswald;font-size: larger; padding-left: 4%;margin-bottom: 7px;color: rgb(247, 112, 22);}

    .cent img{width:100%;} 
    
    @media screen and (max-width:1300px ){
        .item { font-size: 15px ;}
        .title a{font-size: 25px;} 
        .centre{font-size: 12px;}
        .espace{font-size: 15px;}
        .retrait{font-size: 20px;}
        
    }
       
    @media screen and (max-width:1000px ){
        .item { font-size: 10px ; }
        .title a{font-size: 20px;} 
        .centre{font-size: 10px;}
        .espace{font-size: 15px;}
        .retrait{font-size: 20px;}
     
    }
    
    @media screen and (max-width:810px ){
        .menu-1 { display: none;}
        .contact { display: none;}
        .palier { display: none;}
        .cent{display: none;}
        .title{ width: 80%;}
        .photo{width:100%;}
        .photo img{margin-bottom: 10%;}
        .pitch{font-size: smaller;}
        .corps{height: 500px;}
      }
      
    @media screen and (min-width:810px){
        #navigation{display: none;}
        #contact-mini{display: none;}
       /* .corps{display: none;}
        .photo{display: none;}
        .contact{display: none;}
        .palier{display: none;}*/
    }