@font-face {
    font-family: 'arialround';
    src: url('../fonts/fontarialround.ttf');
}

* {
    margin: 0;
    padding: 0;
    font-family: 'arialround';
    box-sizing: border-box;    
}

img {
    max-width: 100%
}

svg {    
    fill: black;
    height: 26px;
}


/******************************************
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*             HEADER                      *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/


.header_full, .header-rectangle  {
    height: 95vh;
    min-height: 800px;
}



.header_full {    
    background-image: url('../images/janoff.jpg');   
    background-position: top;
    background-size: cover;
    position: relative;
}

#mySidenav {
   
    z-index: 2;
}

.header-rectangle {    
    position: absolute;  
}

.header-rectangle {
    background-color: #63b845;       
    min-width: 30%; 
}

.header-content {
    max-width: 1000px;
    margin: 0 auto;
}

.header_navs, .header_txt {
    position: relative;    
}


.header_navs {    
    top: 30px;    
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
   
}

.header_navs .header_navbar{
  
    flex: 1 1 auto;
}

.header_navs .header_social-bar {
    
    flex: 0 1 auto;    
}


.navbox ul{
    display: flex;
}



.header_navbar li {
    font-size: 26px;
    margin-right: 60px;
    margin-bottom: 30px;
  
}

.header_navs .header_social-bar li {
    margin: 0 10px;
    flex: 0 1 auto;   
}

.header_txt {    
    top: 23vh;   
    max-width: 400px; 
}

.header_txt h1 {
    font-size: 60px;
    font-weight: 500;
}

.header_txt h2 {
    padding: 30px 0px 160px 0px;
    font-size: 36px;
    font-weight: 500;    
}

.header_txt > p {
    max-width: 320px;
    font-size: 22px;
    font-weight: 500;
}

.header_navs li {
    list-style: none;
}

.header_navs li a{
    text-decoration: none;
    color: black;
}



/******************************************
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*             SECTION BIO                 *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/

.section-bio {    
    position: relative; 
    z-index: 0;  
}

.core-rectangle { 
    position: absolute;   
    background-color: #fcbb36;   
    width: 37%;
    min-height: 100%;
}

.section-bio-content {
    max-width: 1000px;
    margin: 0 auto;
}

.section-bio-content h2{
    position: relative;
    font-size: 48px;
    padding: 100px 0px 60px 0px;
}

.section-bio-content h3{
    font-size: 30px; 
    padding-bottom: 45px;
}


.section-bio-content p {
    font-size: 20px; 
    font-weight: 400; 
    font-family: arial;
    padding-bottom: 20px;
     
}

.section-bio-content section{  
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}

.section-bio-content .bio_section-3-c {
    margin-bottom: 0px;
}


.section-bio-content section > * {
    flex: 0 1 460px;
}

.bio_section-1 img {
    max-width: 450px;
    max-height: 413px;
}

.bio_section-2 img {
    border-radius: 100px;
    max-width: 445px;
    max-height: 320px;
}

.bio_section-3-a img {
    max-width: 366px;
    max-height:420px;
}


.section-bio-content figure {
    text-align: center;
}


.bio_section-3-b img {
    max-width: 250px;
}

.bio_section-3-c img {
    position: relative;
    top: -145px;
    max-width: 250px;
}


/******************************************
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*            SECTION APPLE                *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/

.section-2_apple {   
    position: relative;
    z-index: 0;  
}


.section-2_apple h2,
.section-apple-rectangle {
    height: 150px;
}

.section-2_apple h2 {
    display: flex;
    align-items: center;
    font-size: 48px;
    color: #f58726;
    max-width: 1000px;    
    margin: 0 auto; 

}

.section-2_apple h2 > * {
    flex: 1 1 auto;
}

.section-apple-rectangle {
    position: absolute;
    background-color: #f08222;
    background-image: url('../images/logo-apple-cromatahaut.png');
    background-repeat: no-repeat;
    background-position: 106% -22%;
    background-size: 341px;

    top: 0;
    right: 0px;
    width: 63%;
    /*
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  */
}

.backg-rj {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 60px;    
    background-image:  linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)),
    
    url('../images/fond-logo-rob-janoff.png');    
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: top;
    margin-bottom: -40px; /*dû au déplacement de l'image de Rob Janoff de 40px vers le haut */
}

.backg-rj figure {
    text-align: center;
}


.section-2_apple-3 img {
    position: relative;
    top: -30px; /*pour déplacer l'image de 40px vers le haut*/
    left: 0;    
}

.section-2_apple-1,
.section-2_apple-2,
.section-2_apple-3
 {    
    align-items: center;
}


.section-2_apple section {
    display: flex;
    justify-content: space-between;
}

.section-2_apple section > * {
    flex: 0 1 45%;
}

.section-2_apple .section-2_apple-1 img {
    max-width: 445px;
    border-radius: 45px;
}

.section-2_apple .section-2_apple-2 img {
    max-width: 280px;
}


.section-2_apple .section-2_apple-3 img {
    max-width: 400px;
}


.section-2_apple p {
    font-size: 20px; 
    font-weight: 400; 
    font-family: arial;
    padding-bottom: 20px;    
}


/******************************************
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*           SECTION PROJETS               *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/


.section-3_projets {
    position: relative;
    z-index: 0;
    background-image: linear-gradient(90deg,#db413c 0%,#db413c 50% , #fff 50.0001%, #fff 100% );
}

.projets_content {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.projets_content h2{
    position: relative;
    color:white;
    font-size: 48px;    
    padding: 100px 0 60px 0;
}


.projets_content {
    background-color: #db413c;
}


.projets-img{    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}

.projets-img:after{
    content:"";
    display:block;
    position:absolute;
    height:100%;
    width: 15.3%;
    top:0;
    right:0;
    z-index:1;
    background-color:#fff;
  
}
.projets-img > * {
    flex: 0 1 460px;
    padding-bottom: 50px;
    position: relative;
    z-index: 2;
}


/******************************************
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*               FOOTER                    *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/


footer {
    background-color: #f3d07c;
}

footer ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

footer li {
    flex: 0 1 auto;    
    padding: 40px 30px;
}

footer li a {
    text-decoration: none;
    color: black;
}

footer li a:after{
    display: inline-block; 
    content:"";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: black;
    position: relative;
    left: 30px;
}


footer li:nth-child(6) a:after {
    display: none;
}


/******************************************
* **                                      *
*   **                                    *
*     **                                  *
*       **                                *
*         **                              *
*           ** MEDIA QUERY                *
*             **                          *
*               **                        *
*                 **                      *
*                   **                    *
*                     **                  *
*                       **                *
******************************************/
/******************************************
*                            **           *
*                              **         *
*                                **       *
*                                  **     *
*                                    **   *
*            MEDIA QUERY               ** *
*                                        **
*                                         *
*                                         *
*                                         *
*                                         *
*                                         *
******************************************/



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



    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *            HEADER <1100          *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/    

    #burger {
        position: absolute;
        z-index: 1;
        height: 40px;
        top: 40px;
        left: 40px;
    }

    .header_navs {
        display: none;
    } 
       
    
    .header_full {
        max-width:1100px;
        height: 480px;        
        min-height: 480px;
    }
     
    .header-rectangle  {
        position: absolute; 
        height: 235px;
        min-height: 235px;
        background-color: #63b845;           
        min-width: 30%;             
    }   
  
    .header-content {        
        max-width:1000px;
    }

    .header_txt {
        top: 90px;
        
        max-width: 1100px;       
    }     

   
    .header_txt h1 {
        padding: 0 20px 0 20px;        
        font-size: 46px;
        font-weight: 500;
    }
    
    .header_txt h2 {
        padding: 0 20px 0 20px;      
        font-size: 32px;
    }

    .header_txt h1,
    .header_txt h2 {
        margin-left: 15%;      
    }

    .header_txt > p {
        max-width: 1100px;
        font-size: 22px;
        font-weight: 500;
        background: linear-gradient(
            rgba(0, 0, 0,0.5), 
            rgba(0, 0, 0,0.5));
        color: white;        
        text-align: justify;
        font-family: arial;
        padding: 10px 20px 10px 20px; 
        margin: 0px; 
        margin-top: 100px;
    }

    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *              BIO <1100           *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/   

    .section-bio {        
        margin: 0 20px; 
       
    }
    
    .core-rectangle {        
        width: 50%;
        min-height: 130px;
        top: 0;
        right: -20px;
    }
    
    .section-bio-content {
        max-width: 375px;        
    }
    
    .section-bio-content h2 {        
        color: #fcbb36; 
        padding: 30px 0px 30px 0px;
        
    }
    
    .section-bio-content h3{
        position: relative;        
        padding: 50px 0 60px 0;
    }
    
    .section-bio-content h3:after{
        display: block;
        content:"";
        position: absolute;
        width: 130px;
        height: 80px;
        background-color: #fcbb36;
        top: 30px;
        left: 89px;
        z-index: -1;
    }
    
    .section-bio-content p {
        font-size: 24px;    
        padding-bottom: 0px;
        text-align: justify;
        margin-bottom: 35px;         
    }

    .section-bio-content figure {
        margin: 40px 0 40px 0;
    }
    
    .section-bio-content section {       
        flex-direction: column;       
        margin-bottom: 0px;
        top: 60px;
    }
    
    .section-bio-content section > * {
        flex: 0 1 auto;
    }
    
    .section-bio-content article {
        margin: 0px;
    }
    
    img {
        width: 100%!important;
    }  

    .bio_section-3-c img {        
        top: -40px;
       
    }

    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *            APPLE  <1100          *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/   

    .section-2_apple {
        padding: 20px;
    }


    .section-2_apple h2 {        
        max-width: 335px;
        margin: 0 auto;
    }

    .section-apple-rectangle {
        max-width: 40%;;
    }

    .backg-rj {
        max-width: 335px;
        margin: 0 auto;        
        background-image:  linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)),        
        url('../images/fond-logo-rob-janoff2.png');
        background-size: 100% 25%;        
        background-position: center;
    }
    
    .section-2_apple-3 img {        
        top: 30px; /*pour déplacer l'image*/
    }   

    .section-2_apple section {        
        flex-direction: column;        
        margin-top: 20px;
        margin-bottom: 20px;
    }


    .section-2_apple .section-2_apple-3{
        margin-bottom: 0px;
    }

    .section-2_apple section > * {
        flex: 0 0 auto; 
    }

    .section-2_apple-2 figure{
        order: 1;
    }

    .section-2_apple .section-2_apple-1 img {
        max-width: 335px;
        border-radius: 50px;
    }

    .section-2_apple .section-2_apple-2 img {
        max-width: 232px;
    }


    .section-2_apple .section-2_apple-3 img {
        max-width: 335px;
    }


    .section-2_apple p {
        font-size: 24px;
        padding-bottom: 20px; 
        text-align: justify;   
    }

    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *            PROJETS  <1100        *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/   

    .projets_content {
        max-width: 375px;
    }

    .projets_content h2{
        padding: 50px 0 50px 20px;
    }

    .projets-img img {
        max-width: 375px;
    }

    .projets-img:after{
        
        width: 33.1%;
        right: -1px;
       /* display: none;*/

    }

    .projets-img > * {
        flex: 0 1 375px;
    }

    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *            FOOTER  <1100         *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/    

    footer ul {
        flex-direction: column;
        text-align: center;       
    }

    footer li {
        flex: 0 1 auto;    
        padding: 20px 30px;
    }

    footer li a {
        text-decoration: none;
        color: black;
    }

    footer li a:after{
        display: none;
    }

    footer li:nth-child(6) a:after {
        display: none;
    }
}




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


    /***********************************
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    *            HEADER  <680          *
    *                                  *
    *                                  *
    *                                  *
    *                                  *
    ***********************************/   
       
    .header_txt h1 {      
        font-size: 32px;      
    }
    
    .header_txt h2 {      
        font-size: 20px;
    } 

    .header_txt h1,
    .header_txt h2 {
        margin-left: 0%; 
    }

}