/*--MOBILE FIRST ----------------------------------------------------------------------------*/
/*-------COMMUN---------*/
*{
    box-sizing: border-box;
    outline: none
}
html{
    font-size:62.5%;
}
body{
    background-color: #f2f1f4;
    color: #6a6d70;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 20px;
}
header{
    text-align: center;
}
h1,h2,h3{
    border-bottom: 1px solid #30a894;
    color: #30a894;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
}
h1{
    font-size:4rem;
}
h2{
    font-size:2.4rem;
}
nav{
    background-color:#30a894;
}

.container{
    margin: 0 auto;
    width:100%;
}
/*tr{
    border-bottom: 40px;
    width: 70%;
    color: #30a894;*/

/*-------FIN COMMUN---------*/


/*-------HEADER---------*/
header{
    background: #f2f1f4;
}
header nav{
    color:#fff;
    background-color:#30a894;
} 
header nav a{
    color: #fff;
    display:block;
    font-weight:none;
    text-decoration:none;
    padding-top:25px;
    padding-bottom: 25px;
} 
header nav a:hover{
    background-color:  #38b5a0;
}  
/*-------FIN HEADER---------*/

/*---------MAIN-------*/
main a{
    color:#49b2b4;
    }

.hide{
        display: none;
    }
.ouverture picture img{
    width: 100%
}
/*---------FIN MAIN-------*/

/*-------FOTER---------*/
footer{ 
    text-align: center;
    padding: 20px;
}
footer img{
    width: 50px;
}
/*-------FIN FOTER---------*/

/*--MOBILE FIRST -------------------------------------------------------------*/

/*-------CSS MEDIA QUERIES-----------------------------------------------------*/
/*******TABLETTE*****/
@media screen and (min-width:768px){
    aside{
        background:#b8dcb1;
    } 
  
    .hide{
        display: block;
        padding: 10px 15px;
    }

/*******DESKTOP*****/
@media screen and (min-width:1025px){
    
    header nav a{
        flex-basis: 33.33333%;
    }
    header nav{
        display: flex;
        justify-content: space-around;
        
    }
    .container{
        max-width:80%;
    }
    main{
        display: flex;
    }
    section{
        flex-basis: 70%;
        margin-top: 0px;
        padding-right: 20px;
    }
    aside{
        flex-basis: 30%;
    }
   

    /*section.article article{
        flex-basis: 45%*/
    
   /* section.article article:first-of-type{
        padding-left: 10px;
    }
    section.article article:last-of-type{
        padding-right: 10px;
    }*/
  
}