body{
    position: relative;
    background-color: #FAF8F5;
    color: #292929;
    font-size: 1.6rem;
    font-family: 'Inter', arial, sans-serif;
}


footer{
    position: absolute;
    bottom:0;
    height: 10rem;
    left:0;
    right: 0;
}

.main-home{
    margin-top: 52rem;
}

.main-home,
.project-page,
.process-page,
.contact-page,
.projects-page,
.sitemap-page,
.mentions-page{
    padding-bottom: 10rem;
}

.container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 19em) {  /* 304 */
    .container {
        width: 30rem;
    }
}


@media (min-width: 32em) {  /* 512 */
    .container {
        width: 45rem;
    }

    .card{
        width: 55rem;
    }
}


@media (min-width: 46em) {  /* 765px */
    .container {
        width: 70rem;
    }
}


@media (min-width: 62em) {  /* 992px */
    .container {
        width: 90rem;
    }
}

@media (min-width: 75em) { /* 1200px */
    .container {
        width: 110rem;
    }
}

/*  -----   TITLES  ----- */

h1{
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: normal;
    color: #FAF8F5;
    font-size: 5.3rem;
    line-height: 6rem;
}

.hero p{
    color: #FAF8F5;
    text-align: right;
}

h2{
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 400;
    color: #D9BCAE;
    font-size: 6rem;
    text-align: center;
}

.software h2,
.skills h2{
    color: #B49587;
    text-align: center;
}

h3,h4,h5{
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: lighter;
    font-size: 3rem;
}

h3{
    margin-bottom: 4rem;
    margin-top: 2rem;
}

.project-page h3{
    font-family: 'Inter light', arial, sans-serif;
    font-size: 2.5rem;
    padding-bottom: 2rem;
}

.contact-page h3,
.contact-social,
.social .social-item,
.logo{
    transition: .4s;
}

.contact-page h3 a,
.contact-page .social-item a{
    text-decoration: none;
    color: currentColor; 
}

.contact-page h3:hover,
.contact-social:hover,
.social .social-item:hover,
.logo:hover{
    transform: translateY(-10px) scale(1);
    transition: .4s;
}



h5{
    position: relative;
    margin-top: 0;
}

h5::after,
h5::after{
    right: 50%;
    content: "";
    transition: .5s;
    position: absolute;
    bottom: 0;
    top:5rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 4px;
    background-color: #FAF8F5;
    transform: scale(0);
}

h5:focus::after,
h5:hover::after,
h5:focus::after,
h5:hover::after{
    transform: scale(1);
}

.copyright{
    font-size: 1.2rem;
}



.backtotop,
.scroll-down,
.next,
.previous{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    width: 5rem;
    right:1.5rem;
    z-index: 99999;
    background-color: #FAF8F5;
    box-shadow: 0 0.2rem 1.8rem rgba(111, 93, 58, 0.208) ;
    border-radius: 5rem;
}
.backtotop{
    position: fixed;
    bottom:9rem;
}

.next,
.previous{
    position: absolute;
    top: 400px;
}

.next{
    right: 1.5rem;
}

.previous{
    left:1.5rem;
}

@media (max-width: 46em) {
    .next,
.previous {
    top: 300px;
    }
}

@media (max-width: 32em) { 
    .next,
    .previous {
    top: 377px;
    }

    .hero-project{
        padding-bottom: 6rem;
    }
}



.scroll-down{
    position: absolute;
    top:95%;
    left:calc(50%);
}

.bounce{
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
  }

.icon{
    display: block;
    width: 1.5rem;
    height:1.5rem;
    }
.icon-top,
.icon-down,
.icon-next,
.icon-previous{
    background-repeat: no-repeat;
    background-size: cover;
}
.icon-top{
    background-image: url(../img/back-to-top.png);
}

.icon-down{
    background-image: url(../img/scroll-down.png);
}

.icon-next{
    background-image: url(../img/next.png);
}

.icon-previous{
    background-image: url(../img/previous.png);
}

/*  -----   HEADER  ----- */

.portfolio-header{  
    padding-top: 2rem;
    position: relative;
    z-index: 99999;
    
}

.portfolio-header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url(../img/logo-noir-01.png);
    background-repeat: no-repeat;
    background-size: contain;
}


/* -- MENU BURGER -- */

.toggle-menu{
    position: relative;
    z-index: 10001;
    padding: 0.6rem 0;
    border: 0;
    height: 1.4rem;
    width: 2.5rem;
    background-color: #292929;
    background-clip: content-box;
    transition: .3s;
}

.toggle-menu::before,
.toggle-menu::after{
    content:"";
    position: absolute;
    left: 0;
    right: 0;
    height: 0.2rem;
    background-color: #292929;
    transition: .3s;
    transform-origin: left center;
}

.toggle-menu::before {
	top: 0;
}

.toggle-menu::after {
	bottom: 0;
}

.toggle-menu[aria-expanded="true"] {
	background-color: rgba(0,0,0,0);
}

.toggle-menu[aria-expanded="true"]::before {
	transform: rotate(42.5deg) translateY(-3px);
}

.toggle-menu[aria-expanded="true"]::after {
    transform: rotate(-42.5deg) translateY(3px);
}

.menu{
    font-size: 1.2rem;
    position: absolute;
    z-index: 10000;
    top: 6rem;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    height: 50rem;
    width: 37.5rem;
    background-color: #FAF8F5;
}

.menu:not([hidden]) {
	opacity: 1;
    pointer-events: all;
}

.menu-item a{
    display: block;
    position: relative;
    padding: 5px 20px;
    margin-bottom: 5rem;
	text-decoration: none;
    color: currentColor;
    font-weight: 400;
    text-transform: uppercase;
    z-index: 1001;
}

.menu-item a::after,
.footer-item a::after,
.sitemap a::after{
    right: 50%;
    content: "";
    transition: .5s;
    position: absolute;
    bottom: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 4px;
    background-color: #292929;
    transform: scale(0);
}

.menu-item a::after,
.footer-item a::after{
    top:2.5rem;
}


.sitemap a::after{
    top:9.5rem
}

.menu-item a:focus::after,
.menu-item a:hover::after,
.footer-item a:focus::after,
.footer-item a:hover::after,
.sitemap a:hover::after{
    transform: scale(1);
}



@media (min-width: 62em) {  /* 992px */
    .toggle-menu {
        display: none;
    }

    .menu{
        display: flex;
        justify-content: right;
        flex-direction: row;
        opacity: 1;
        pointer-events: all;
        height: 2rem;
        width: 68rem;
        background-color: transparent;
        top:0;
        position: relative;
    }

    .menu-item a {
        padding: 0;
        margin-left: 8rem;
        margin-bottom: 0;
    }
}


/*  -----   HERO  ----- */

.hero{
    display: flex;
    align-items: center;
    height: 80rem;
    width: 100%;
    max-height: 60rem;
    background-color: #D9BCAE;
    position: absolute;
    top: 0;
    left: 0;
}

.process{
    padding-top: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.hero .container{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.hero-content{
    margin-top: auto;
    margin-bottom: auto;
}

@media (max-width: 46em) {  /* 765px */
    .hero .container {
        align-items: center;
    }
    .hero-illustration{
        width:20rem;
    }

    .hero-content{
        margin-bottom: 4rem;
        margin-top: 4rem;
    }

    .hero-content h1{
        font-size: 3.5rem;
        line-height: 4rem;
    }
}

@media (max-width: 32em) {  /* 512 */
    .hero .container {
       flex-direction: column;
    }
}



/*  -----   ABOUT  ----- */

.about,
.projects{
    background-color:#242534;
    color: #FAF8F5;
}

.about{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
}

.about .container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.about h2{
    grid-row: 1;
    grid-column: 1;
    text-align: left;
}

.about-illustration{
    display: flex;
    justify-content: center;
    grid-row: 2;
    grid-column: 1;
    height:30rem;
    max-width: 35rem;
}

.about-content{
    grid-row: 2;
    grid-column: 2;
    text-align: right;
    color: #F8EFE7;
}

.job{
    margin-bottom: 2rem;
}


@media (max-width: 46em) {  /* 765px */

    h2{
        font-size: 5rem;
    }

    h3{
        font-size: 2.5rem;
    }
}

@media (max-width: 62em) {  /* 992px */
    .about .container{
        gap:2rem;
    }

    .about h2,
    .about-content,
    .about-illustration{
        grid-column: span 2;
        text-align: center;
    }

    .about-illustration{
        margin-top: 4rem;
    }

    .about-illustration img{
        width:40rem;
    }

    .about-content{
    grid-row: 3;
    text-align: left;
}

    .about-illustration{
        grid-row: 2;
    }
}

/* -- SOFTWARE -- */

.software {
    display: flex;
    justify-content: center;
}

.software .container{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.software h2,
.skills h2,
.projects h2{
    margin-bottom: 5rem;
}

.software-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    border:solid 1px #B49587;
    height:20rem;
    width: 100%;
    border-radius:1.4rem;
}

.picto-software{
    margin-top: 2rem;
}

.list-software{
    display: flex;
}li.icon-software:nth-child(6) {
    padding-right: 0;
    }

.list-software .icon-software{
    padding-right: 1rem;
    padding-left: 0;
 }

 .list-software .icon-software:nth-child(6){
    padding-right: 0;
 }

.background{
    position: absolute;
    height: 50rem;
    width:78rem;
    background-color: #FFF;
    z-index: -1000;
}

@media (max-width: 62em) {  /* 992 */
    .background{
        width: 50rem;
    }
}

@media (max-width: 46em) {  /* 765 */

    .icon-software{
        margin-bottom: 2rem;
        padding: 0;
    }

    .icon-software img{
        width: 6rem;
    }

    .software-logo{
        height:20rem;
        width: 50rem;
    }

    .background{
        width: 30rem;
        height: 50rem;
    }
}

@media (max-width: 32em) { 

    .software-logo{
        padding-top: 2rem;
    }

    .list-software{
        flex-direction: column;
    }
    
    .list-software .icon-software{
        padding-right: 0;
    }

    .picto-software .list-software{
        flex-direction: row;
    }
    .software-logo{
        height:50rem;
        width: 20rem;
    }
    
    .icon-software{
        width:5rem;
    }

    .background{
        width: 15rem;
        height: 75rem;
        
    }
}

/* -- SKILLS -- */

.skills .container{
    display: flex;
    flex-direction: column;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.all-skills{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(6, 1fr);
    gap:3rem
}

.picto-skill{
    margin-left: auto;
    margin-right: auto;
    width:8rem;
}

.skill{
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    height: 38rem;
    border:solid 1px #B49587;
    border-radius:1.4rem;
    position: relative;
    text-align: center;
    padding:3rem;
}

.skill-1{
    grid-column: 1/3;
}
.skill-2{
    grid-column: 3/5;
}

.skill-3{
    grid-column: 5/7;
}

.skill-4{
    grid-column: 2/4;
}

.skill-5{
    grid-column: 4/6;
}


.skill::after{
    content: "";
    width:2.3rem;
    height: 2.3rem;
    background-color: #292929;
    border-radius: 5rem;
    position: absolute;
    bottom: 97%;
    left: calc(45%);
}

.picto-software{
    display: flex;
    justify-content: center;
}

.skills .icon-software img{
    width: 3rem;
    height: 3rem;
}



 @media (max-width: 46em) {  /* 765px */
    .all-skills{
        grid-template-columns: 1fr;
    }

    .skill-1{
        grid-column: 1;
        grid-row: 1;
    }
    .skill-2{
        grid-column: 1;
        grid-row: 2;
    }
    
    .skill-3{
        grid-column: 1;
        grid-row: 3;
    }
    
    .skill-4{
        grid-column: 1;
        grid-row: 4;
    }
    
    .skill-5{
        grid-column: 1;
        grid-row: 5;
    }
    
}

/* -- PROJECTS -- */

.projects{
    display: flex;
}

.projects .container{
    display: flex;
    flex-direction: column;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.all-projects{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:4rem;
}

.portfolio{
    display: flex;
    justify-content: center;
    align-items: center;
    height:60rem;
    position: relative;
}

.portfolio img{
    border-radius: 1.3rem;
}

.project-1,
.project-2,
.project-3,
.project-4,
.project-5,
.project-6,
.project-7,
.project-8,
.project-9,
.project-10,
.project-11{
    display:block;
    border:solid 1px #B49587;
    max-width: 51rem;
    border-radius:1.4rem;
    transition:.8s;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

.portfolio:hover .project-1,
.portfolio:focus .project-1,
.portfolio:hover .project-2,
.portfolio:focus .project-2,
.portfolio:hover .project-3,
.portfolio:focus .project-3,
.portfolio:hover .project-4,
.portfolio:focus .project-4,
.portfolio:hover .project-5,
.portfolio:focus .project-5,
.portfolio:hover .project-6,
.portfolio:focus .project-6,
.portfolio:hover .project-7,
.portfolio:focus .project-7,
.portfolio:hover .project-8,
.portfolio:focus .project-8,
.portfolio:hover .project-9,
.portfolio:focus .project-9,
.portfolio:hover .project-10,
.portfolio:focus .project-10,
.portfolio:hover .project-11,
.portfolio:focus .project-11{
    opacity: 0.3;
}

.portfolio h5{
    color: #FAF8F5;
    text-decoration: none;
    font-family: 'Playfair', Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    width:100%;
    height: 10rem;
    opacity:0;
    margin-bottom:0;
    transition:.5s;
    position: absolute;
    top:50%;
    z-index:999999;
}

.portfolio:hover h5,
.portfolio:focus h5{
    opacity:1;
}


@media (max-width: 75em) {  /* 1200px */
    .portfolio{
        height: 50rem;
    }
}


@media (max-width: 62em) {  /* 992px */
    .portfolio{
        height: 40rem;
    }
}


@media (max-width: 46em) {  /* 765px */
    .all-projects{
        grid-template-columns: 1fr;
    }
    .portfolio{
        height: 55rem;
    }
}

@media (max-width: 32em) {  /* 512px */
    .portfolio{
        height: 40rem;
    }
}

.portfolio-footer .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    height: 10rem;
}

.social{
    display: flex;
    width:8rem;
}

.social-item a::before{
    content:"";
    display: block;
    width: 3.5rem;
    height:3.5rem;
    margin-right: 2rem;
}

.social-item .Linkedin{
    display: flex;
}

.social-item a[href*="https://www.linkedin.com/in/mathilde-tatin-225834108"]::before{
    background-image: url(../img/linkedin.png);
}

.contact-social a[href*="https://www.linkedin.com/in/mathilde-tatin-225834108"]::before{
    background-image: url(../img/linkedin-contact.png);
}


.social-item a[href*="https://www.behance.net/"]::before{
    background-image: url(../img/behance.png);
}

.contact-social a::before,
.social-item a::before{
    background-repeat: no-repeat;
    background-size: contain;
}


.footer-menu{
    display: flex;
    justify-content: space-between;
}

.footer-item{
    position: relative;
}

.footer-item a{
    display: block;
	text-decoration: none;
    color: currentColor;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.2rem;
}

@media (min-width: 62em) {  /* 992px */
    .footer-menu{
        width: 50rem;
    }
}


@media (max-width: 62em) {  /* 992px */
    .portfolio-footer .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 30rem;
    }

    .footer-menu{
        flex-direction: column;
        justify-content: space-between;
        height: 10rem;
    }
    .footer-nav{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .copyright{
        margin-bottom: 2rem;
    }
}


/* -- PROCESS-- */

.section-process{
    display: grid;
    padding-top: 10rem;
    padding-bottom: 10rem;
    align-items: center;
    height: 85rem;
}

.process-illustration{
    background-repeat: no-repeat;
    background-size: contain;
}

.analyse{
    background-image: url(../img/process-analyse.png);
}

.search{
    background-image: url(../img/process-search.png);
}

.design{
    background-image: url(../img/process-design.png);
}

.process-card{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.process-card h2{
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 4rem;
    text-align: left;
    color: currentColor;
}

.process-card .process-illustration{
    grid-column: 2;
    grid-row: 1/3;
    z-index: 9;
}

.process-card .process-content{
    grid-column: 3;
    grid-row: 1;
    padding-left: 10rem;
    margin-bottom: 4rem;
}

.process-line{
    grid-column: 1/4;
    grid-row: 2;
    border-top:solid 1px black;
}

.search-section .process-line{
    border-top:solid 1px #FAF8F5;
}

.analyse-section{
    background-color: #FAF8F5;
}

.search-section{
    background-color: #28293B;
    color: #FAF8F5;
}

.design-section{
    background-color: #D9BCAE;
}

@media (max-width: 75em) {  /* 1200px */
    .process-illustration{
        margin-top: 11rem;
    }
}

@media (max-width: 62em) {  /* 992px */
    .process-content{
        font-size: 1.4rem;
    }
    .process-card h2{
        font-size: 4rem;
        padding-right: 4rem;
        grid-column: 1;
        grid-row: 1;
        text-align: center;
        border-top: 0;
        padding-right: 0;
    }

    .process-card{
        grid-template-columns: 1fr;
    }

    .process-card .process-illustration{
        grid-column: 1;
        grid-row: 2;
        height: 30rem;
        width: 30rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
    }
    .process-card .process-content{
        grid-column: 1;
        grid-row: 3;
        padding-left: 0;
        text-align: center;
        margin-bottom: 0;
        margin-top: 4rem;
    }

    .process-line{
        display: none;
    }
}

@media (max-width: 45em) {  /* 720px */
    .process-card .process-illustration{
        width: 20rem;
        height: 20rem;
    }
}

/* -- PROJECT-- */



.animated.fadeInUp {
	animation-name: fadeInUp;
}

.animated {
    visibility: visible;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
}



@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }

    0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


.scape-illustration-2,
.scape-illustration-4{
    width: 32rem;
}


.project-illustration img,
.project-illustration video{
    border-radius:1.4rem;
    border:solid 1px #B49587;
}

.project-illustration img{
    box-shadow: 9px 12px 15px -5px rgba(180,149,135,0.18);
}

.scape-illustration-3{
    width: 100%;
}

.hero-project{
    margin-top: 10rem;
}

.hero-project h2,
.projects-page h2,
.contact-me h2{
    position: absolute;
    top:86px;
    left: 0;
    right: 0;
    z-index: 9;
}

.hero-project h2{
    color: #242534;
}

.projects h2{
    color: #B49587;
}

.project-scape-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4rem;
    margin-bottom: 4rem;
}


.scape-illustration-2{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    left: calc(10%);
    bottom:-10%;
    z-index: 9999;
}

.first-content{
    grid-column: 2;
    grid-row: 1;
    padding-top: 4rem;
    margin-bottom: 4rem;
}

.scape-illustration-3{
    grid-column: span 2;
    grid-row: 2;
    position: relative;
}

.second-content{
    grid-column: 1;
    grid-row: 3;
    padding-top: 4rem;
}

.scape-illustration-4{
    grid-column: 2;
    grid-row: 3;
    position: relative;
    left: calc(20%);
    bottom:15%;
    z-index: 9999;
}

@media (max-width: 62em) {  /* 992px */
    .scape-illustration-2,
    .scape-illustration-4 {
        width: 26rem;
        height: 32rem;
    }
}

@media (max-width: 46em) {  /* 736px */
    .hero-project h2{
        top:6.6%;
        font-size: 4rem;
    }

    .hero-project-1 h2,
    .hero-project-8 h2{
        top:4.2%;
    }

    .hero-project-2 h2{
        top:5.8%
    }

    .hero-project-3 h2{
        top:7.8%
    }

    .hero-project-5 h2{
        top: 6%;
    }

    .hero-project-7 h2{
        top: 7.3%;
    } 

    .projects h2{
        top:1.7%;
    }

    .scape-illustration-2,
    .scape-illustration-4 {
        width: 18rem;
        height: 22rem;
    }
    .scape-illustration-2{
        bottom:-10%;
        left:calc(10%);
    }

    .first-content{
        margin-bottom: 2rem;
        padding-top: 0;
    }

    .first-content h3,
    .second-content h3{
        margin-bottom: 1rem;
        margin-top: 0;   
    }
    .scape-illustration-4{
        left: calc(10%);
        bottom:10%;
    }
}

@media (max-width: 32em) {  /* 512px */
    .hero-project h2{
        font-size: 3rem;
    }

    .hero-project-1 h2{
        top: 5.4%;
    }
    .hero-project-8 h2{
        top:6%;
    }

    .hero-project-2 h2{
        top:7.6%
    }

    .hero-project-3 h2{
        top:9.8%
    }

    .hero-project-4 h2{
        top:7.7%
    }

    .hero-project-5 h2{
        top:7.6%;
    }

    .hero-project-6 h2{
        top: 7.4%;
    } 
    .hero-project-7 h2{
        top: 9%;
    } 

    .hero-project-8 h2{
        top: 6%;
    } 

    .hero-project-9 h2{
        top: 8.5%;
    }

    .projects h2{
        top:2.25%;
    }

    .project-page h3{
        font-size: 2rem;
    }
    
    .first-content{
        grid-column: span 5;
        grid-row: 1;
        padding-top: 0;
    }
    .scape-illustration-2{
        grid-column: span 5;
        grid-row: 2;
        position: relative;
        left: calc(20%);
        bottom:-10%;
    }
    
    .scape-illustration-3{
        grid-column: span 2;
        grid-row: 3;
        z-index: 9999;
    }
    .second-content{
        grid-column: span 2;
        grid-row: 5;
        padding-top: 4rem;
    }
    .scape-illustration-4{
        grid-column: span 2;
        grid-row: 4;
        position: relative;
        left: calc(20%);
        bottom:10%;
        z-index: 9999;
    }


}

/* -- CONTACT-- */

.contact-me{
    margin-top: 10rem;
}
.contact-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 80rem;
    color: #D9BCAE;
    background-color: #242534;
    padding-top: 10rem;
    padding-bottom: 10rem;
}


.contact-social{
    display: flex;
    justify-content: space-between;
}


@media (max-width: 46em) {  /* 765px */
    .contact-me h2 {
        top: 97px;
    }
}



/* -- PROJECTS-- */

.projects{
    margin-top: 10rem;
}

.discover{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10rem;
    margin-bottom: 10rem;
    border: solid 1px #D9BCAE;
    border-radius: 3rem;
    width: 20rem;
    height: 5rem;
    transition: .4s;
}

.discover:hover,
.discover:focus{
    color:#FAF8F5;
    background-color:  #B49587;
    transition: .4s;
    transform: translateY(-10px) scale(1);
}

.discover a{
    color: #D9BCAE;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: .3s;
    position: relative;
}

.discover a:hover,
.discover a:focus{
    color:#FAF8F5;
    transition: .3s;
}

/* -- SITEMAP-- */

.sitemap-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.sitemap-page a{
    position: relative;
    text-decoration: none;
    color: currentColor;
}


.sitemap-page h3{
    margin-bottom: 0;
}

.sitemap-home,
.sitemap-projects,
.sitemap-process,
.sitemap-contact{
    margin-bottom: 6rem;
    text-align: center;
}


/* -- MENTIONS LEGALES-- */

.mentions-content{
    margin-top: 10rem;
    margin-bottom: 10rem;
}


/* -- PROJECT-4 MANADE-- */

.behance-project{
    margin-top: 6rem;
    grid-row: 4;
    grid-column: 1/3;
    text-align: center;
}

.logo-behance{
    display: block;
    width: 8rem;
    height: 8rem;
    background-image: url(../img/project-7-behance.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    transition: .4s;
    line-height: 0;
}

.logo-behance:hover{
    width: 9rem;
    height: 9rem;
    transition: .4s;
}