@media (max-width: 750px) or ((max-width: 1020px) and (orientation: landscape)) {
    /*************************************/
    /********** INTRO ANIMATIONS *********/
    /*************************************/


    * {
		box-sizing: border-box;
	}
    /* changes scrolling behavior. */
    html, body, div#innerFrame,  main {
        overflow-y:auto;
        overflow-x:hidden;
    }
    header#optionsHeader {
        position: fixed;
        width: 100%;
        height:3em;
        
        display: block;
        top:unset;
        bottom: 0px;
        left: 0;
        right:0;
        z-index:99999;
    }
    fieldset {
        margin:auto;
    }
    body.is-dark header#optionsHeader {
        background-color: #111111;
        color:wheat;
    }
    body.is-light header#optionsHeader {
        background-color: wheat;
        color: #111111;
    }
    /* Hides outer frame and siteTitle, etc. */
    #outterFrame,
    header#navHeader,
    div.headerContainer,
    footer#footerSocial,
    #headerSkipIntro {
        display:none;
    }
    /* social network icons */
    ul.socialNetworkIcons {
        flex-direction:row-reverse;
    }
    /* inner frame fills page, with no offset. */
    #innerFrame {
        z-index:200;
        position: fixed;
        inset:0;
        margin:20px;
        padding:0;
        height:100%;
    }
    /* Margin after section in mobile view */
    section.page{
        margin-bottom:5em;
    }
    /* harmonizes font sizes except for main title */
    body, 
    div.home p,
    h2,
    #mainDiv, 
    header#navHeader {
        font-size:1em;
    }
    h1#siteTitle {
        font-size:1.8em;
    }
    /* subtitle margins */
    p.subTitle {
        margin-top:0.5em;
        margin-bottom:2em;
    }

    /* makes h2 sticky */
    h2.stickyTitle {
        z-index: 9999999;
        font-family: "Noto Sans", sans-serif;
        position:sticky;
        top:0px;
        display:block;
        height:1.5em;
        width:100%;
        margin-top:0;
        font-weight:800;
    }
    body.is-dark h2.stickyTitle:focus {
        background-color: black;
    }
    body.is-dark h2.stickyTitle {
        background-color:#111111;
    }
    body.is-light h2.stickyTitle {
        background-color: wheat;
    }

    body.is-dark {
        background-color: black;
        color:wheat        
    }
    main {
        position:absolute;
        /* top: 5vh; */
        inset:0;
        /* left:10vw;
        right:5vw; */
        height:95%;
        bottom:5vh;
        z-index:7;
        overflow-y: none;
    }
    img#bioPortrait {
        max-height: 15vh;
        float:none;
    }
    body.is-dark ul.techs li {
        background-color:beige;
        color:#111111;
    }
    main.vertical.simple  section.projectPage {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height:70vh;
        
     }

    nav#leftNav ul {
        display:flex;
        flex-direction: row;
        margin-top:0vh;
    }
    nav#leftNav ul li {
    padding-left:15px;
    font-size:1em;
    }

    a.projectContainer {
        padding:0 0 3vh 0;
        display: flex;
        height: inherit;
        flex-direction: column;
        margin: 1vh 1vw 2vh 1vw;
        align-items:center;
    }
   
    img.projectSnapShot {
        width:100%;
        height:unset;
    }

    div#mainDiv.projects h2:not([class*='stickyTitle']){
        text-align: center;
        margin:1vh 0 0.5vh 0;
    }

     /* main.project.vertical.simple::before {content:" MOBILE ";} */
main.project.vertical.simple  > section.projectPage:nth-child(odd) {
    flex-direction: column;
}
main.project.vertical.simple  > section.projectPage:nth-child(even) {
    flex-direction: column;
}
main.project.vertical.simple section.projectPage .text {
    width:auto;
}
}

@media (max-width: 750px) {
	
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	/* body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	 */
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	/* img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	/* img {
		height: auto;
	} */ 
	
	/* gestion des mots longs */

	
	
	
    
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	/* body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	} */
}