/* Table of Content
==================================================
	- Google fonts & font family -
	- typography -
	- General -
    - Preloader -
	- Header -
    - home section -
    - About section -
    - experience section -
    - projects section -
    - Contact section -
    - Responsive media queries -
*/


/* Google fonts & font family
==================================================*/

@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Playfair+Display:400,400i,700,700i,900,900i';

/*
font-family: 'Playfair Display', serif;
font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif;
*/


/* typography
==================================================*/

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 80px;
    line-height: 95px;}

h4 {
    font-family: 'Lato', sans-serif;
    text-transform: capitalize;
    letter-spacing: 2px;
    position: relative;
    color: #0B96B9;
    margin-left: 40px;
    font-weight: 700;}

h4:before {
    position: absolute;
    width: 50px;
    left: -40px;
    content: "";
    display: block;
    height: 2px;
    background: #0B96B9;
    top: 9px;}

#home h4:before {
    width: 30px;
    top: 9px;}

.servicestrio h2 {font-family: 'Open Sans', sans-serif;}


/* General
==================================================*/

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 24px;}

.size-50 {
    padding-top: 20px;
    font-size: 50px;
    line-height: 60px}

.h-25 {height: 25px;}

.h-50 {height: 50px;}

.h-90 {height: 90px;}


/* preloader
==================================================*/

#preloader img {
    margin-top: -150px;
    margin-left: -15px;}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 10000}

#status,
.preloader {
    top: 50%;
    left: 50%;
    position: absolute;}

#status {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    margin: -50px 0 0 -50px;}

.preloader {
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;}

.preloader:before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    height: 100%;
    width: 100%;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    border: 2px solid #0B96B9;
    border-top: 2px solid transparent;
    border-radius: 100%;}

.preloader>.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 25px;
    width: 10.6px;
    margin-top: -12.5px;
    margin-left: -5.3px;
    -webkit-animation: wink 1s ease-in-out infinite alternate;
    animation: wink 1s ease-in-out infinite alternate;}


@media only screen and (min-width:768px) {
    .preloader {
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px;}
    
    .preloader:before {
        left: -2px;
        top: -2px;
        border-width: 2px;}
    
    .preloader>.icon {
        height: 37.5px;
        width: 15.9px;
        margin-top: -18.75px;
        margin-left: -7.95px;}
}

@media only screen and (min-width:1200px) {
    .preloader {
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px;}
    
    .preloader>.icon {
        height: 50px;
        width: 21.2px;
        margin-top: -25px;
        margin-left: -10.6px;}
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes wink {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes wink {
    from {opacity: 0;}
    to {opacity: 1;}
}


/* Header
==================================================*/

header {
    text-align: center;
    -webkit-transition: all .5s;
    transition: all .5s;
    height: 65px;}

nav ul {
    display: inline-block;
    padding-left: 0;
    list-style: none;
    padding: 20px;
    margin-bottom: 0;
    -webkit-transition: all .5s;
    transition: all .5s;}

nav li {
    display: inline-block;
    margin: 10px;}

nav li a {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #7dcbdb;
    font-size: 14px;
    font-weight: 600;}

.bg-nav {background: black;}

.bg-nav ul {padding: 10px;}

a:focus {
    color: #444;
    text-decoration: none;}

a:hover {
    color: #0B96B9;
    text-decoration: none;}

a.active {
    color: #0B96B9;
    font-weight: bold;}

.navbar-fixed-top img {width: 30%;}



/* home section
==================================================*/

#home {
    background-color: black;
    height: 100vh;}

.table-cell {
    display: table-cell;
    vertical-align: middle;}

.disply-table {
    display: table;
    height: 100vh;}

#home .disply-table h1 {color: #7dcbdb;}

.lg_construct {
    width: 70%;
    position: absolute;
    left: 112%;}


/* about section
==================================================*/

#about {padding: 100px 0;}

.about-img-div img {
    margin: 0 auto;
    width: 90%; /* */
    max-width: 400px; /* */}

.about-border {
    position: absolute;
    border: 10px solid #0B96B9;
    /* width: 410px; */
    width: 72%;
    /* height: 542px; */
    height: 90%;
    top: 30px;
    /* left: 120px; */
    left: 20%;
    z-index: 1;}

#about p {
    font-size: 1.8rem;
    line-height: 2.1rem;}



/* services section
==================================================*/
#services {
    background-color: #f3f3f3;
    padding-bottom: 100px;}

.servicestrio {
    padding-left: 40px;
    padding-right: 40px;}

.servicestrio h2 {
    margin-bottom: 20px;
    font-size: 4.2rem;
    font-variant: small-caps;
    font-weight: 600;
    text-align: center;}

.servicestrio p { 
    margin-bottom: 20px;
    font-size: 2.3rem;
    line-height: 2.3rem;
    font-variant: small-caps;
    font-weight: 600;
    color: gray;
    text-align: center;}

.servicestrio ul {
    padding-left: 0px;
    text-align: center;}

.servicestrio li {
    padding-bottom: 10px;
    font-size: 1.9rem;
    color: #0B96B9;
    list-style-type: none;}

.servicestrio li:nth-child(even) {color: #7dcbdb;}



/* experience section
==================================================*/

#experience {
    padding: 100px 0;
    background: black;}

#experience h4,
#experience h4:before,
#experience h1 {color: #7dcbdb;}

#experience h3 {color: #0B96B9;}

#experience li {color: #f3f3f3;}

#experience li a {
    color: #7dcbdb;
    font-weight: 600;}

.experience-row {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;}

.experience-row h3 {
    font-family: 'Lato', sans-serif;
    text-transform: capitalize;
    letter-spacing: 2px;
    color: #0B96B9;
    font-size: 16px;
    font-weight: bold}

.experience-row p {
    color: #888;
    margin-top: 20px;
    font-size: 15px;}

.experience-row .date {
    color: #000;
    font-size: 17px;}

.timeline {
    padding-left: 0;
    list-style: none;
    position: relative;}

.timeline:before {
    background-color: #0B96B9;
    content: '';
    margin-left: -1px;
    position: absolute;
    top: 0;
    left: 2em;
    width: 2px;
    height: 100%;}

.timeline-event {position: relative;}

.timeline-event:hover .timeline-event-icon {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #0B96B9;}

.timeline-event:hover .timeline-event-thumbnail {
    box-shadow: inset 40em 0 0 0 #7dcbdb;}

.timeline-event-copy {
    padding: 2em;
    position: relative;
    top: -1.875em;
    left: 4em;
    width: 100%;}

.timeline-event-copy h3 {font-size: 1.75em;}

.timeline-event-copy h4 {
    font-size: 1.8rem;
    margin-bottom: 1.2em;}

.timeline-event-copy strong {font-weight: 700;}

.timeline-event-copy p:not(.timeline-event-thumbnail) {padding-bottom: 1.2em;}

.timeline-event-icon {
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #0B96B9;
    outline: 10px solid black;
    display: block;
    margin: 0.5em 0.5em 0.5em -0.5em;
    position: absolute;
    top: 0;
    left: 2em;
    width: 1em;
    height: 1em;}

.timeline-event-thumbnail {
    -moz-transition: box-shadow 0.5s ease-in 0.1s;
    -o-transition: box-shadow 0.5s ease-in 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in;
    -webkit-transition-delay: 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in 0.1s;
    transition: box-shadow 0.5s ease-in 0.1s;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: #0B96B9;
    box-shadow: inset 0 0 0 0em #7dcbdb;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 0.25em 1em 0.2em 1em;}

#experience .timeline-event-copy h4:before {width: 30px;}

#experience ul {font-size: 1.6rem;}

#experience ul li {line-height: 2.5rem;}



/* projects section
==================================================*/

#projects {padding: 100px 0;}

.portfolio .categories-grid span {
    font-size: 30px;
    margin-bottom: 30px;
    display: inline-block;}

.portfolio .categories-grid .categories ul li {
    list-style: none;
    margin: 20px 0;}

.portfolio .categories-grid .categories ul li a {
    display: inline-block;
    color: #60606e;
    padding: 0 10px;
    margin: 0 14px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;}

.portfolio .categories-grid .categories ul li a:hover,
.portfolio .categories-grid .categories ul li a:focus {
    text-decoration: none;}

.portfolio .categories-grid .categories ul li a.active {
    background-color: #0B96B9;
    padding: 0px 20px;
    color: white;
    text-decoration: none;}

.portfolio_filter {padding-left: 0;}

.portfolio_item {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 30px;}

.portfolio_item .portfolio_item_hover {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: #0B96B9;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #333;}

.portfolio_item .portfolio_item_hover .item_info {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 100%;
    font-weight: bold;}

.portfolio_item .portfolio_item_hover .item_info span {
    display: block;
    color: #fff;
    font-size: 25px;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: all .3s ease-in-out .3s;
    transition: all .3s ease-in-out .3s;
    opacity: 0;}

.portfolio_item .portfolio_item_hover .item_info em {
    font-style: normal;
    display: inline-block;
    background-color: #0B96B9;
    padding: 5px 20px;
    color: #fff;
    margin-top: 30px;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all .3s ease-in-out .3s;
    transition: all .3s ease-in-out .3s;
    opacity: 0;
    font-size: 18px;
    letter-spacing: 2px;}

.portfolio_item:hover .portfolio_item_hover {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);}

.portfolio_item:hover .item_info em,
.portfolio_item:hover .item_info span {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);}

.portfolio .categories-grid .categories ul li {float: left;}

.portfolio .categories-grid .categories ul li a {
    padding: 0 10px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;}

.portfolio_filter {
    padding-left: 0;
    display: inline-block;
    margin: 0 auto;
    text-align: center;}

.portfolio_item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);}

.portfolio-padding {padding: 50px 0;}

.portfolio-inner {
    padding-bottom: 0 !important;
    padding-top: 55px;}

.modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
    border: none;}

.popup-modal {background: #fff;}

.close-popup-modal {
    float: right;
    margin: 20px;
    font-size: 22px;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
    position: fixed;
    z-index: 100000;
    right: 14px;}

.animatedModal-on .close-popup-modal {opacity: 1;}

.modal-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    line-height: 50px;}

.shadow {
    -webkit-box-shadow: 0px 0px 40px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 40px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 40px 1px rgba(0,0,0,0.4);}

.portfolio-padding h2 {text-align: center;}

.portfolio-padding img {
    margin: auto;
    margin-bottom: 40px;}

.lien_bigsize {
    padding-bottom: 20px;
    font-size: 1.7rem;}

.lien_bigsize a {
    color: #0B96B9;
    font-weight: bold;}

.gras {font-weight: 600;}

.txt_center {text-align: center;}

.sub_lien {
    margin-bottom: 30px;
    font-size: 1.7rem;}

.lien_bleu {color: #14b0bf;}

.tt_img {
    font-size: 2rem;
    font-variant: small-caps;
    color: #0B96B9;
    text-align: center;}

.titre_info_video {
    margin-top: 25px;
    font-size: 2.8rem;
    color: #7dcbdb;
    font-weight: 600;
    font-variant: small-caps;
    text-align: center;}

video {margin-bottom: 50px;}

.bordure {border: 1px solid #cdd5d6;}

.titre_info_folio {
    margin-bottom: 25px;
    font-size: 2.7rem;
    font-variant: small-caps;
    color: #14b0bf;}



/* contact
==================================================*/

#contact {
    padding: 60px 0 0 0;
    background: black;}

#contact h4:before {background-color: #7dcbdb;} 

#contact h1 {color: #7dcbdb;}

#contact p {
    font-size: 1.7rem;
    color: #f3f3f3;
    text-align: left;}

#contact .imgflypaper img {max-width: 100%;}

#contact-form input,
#contact-form textarea {  
    height: 50px;
    margin-bottom: 10px;
    background-color: #D6F3FF;
    border-radius: 0;
    font-size: 1.7rem; 
    font-weight: 600;}

#contact-form label {
    display: block;
    margin-bottom: .2em;
    font-size: 13px;
    line-height: 13px;
    font-size: 1.3rem;
    line-height: 1.3rem;
    color: #000;}

#contact-form label.error {
    margin-top: 10px;
    margin-bottom: 1em;
    font-size: 12px;
    line-height: 12px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: #D33E43;
    margin-left: 10px}

#contact-form input[type="text"].error,
#contact-form input[type="password"].error,
#contact-form input[type="date"].error,
#contact-form input[type="datetime"].error,
#contact-form input[type="datetime-local"].error,
#contact-form input[type="month"].error,
#contact-form input[type="week"].error,
#contact-form input[type="email"].error,
#contact-form input[type="number"].error,
#contact-form input[type="search"].error,
#contact-form input[type="tel"].error,
#contact-form input[type="time"].error,
#contact-form input[type="url"].error,
#contact-form textarea.error {
    border-color: #D33E43}

#contact .consentement {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: normal;
    color: #7dcbdb;}

textarea {resize: none;}

fieldset {
    border: 0px;
    margin: 0;
    padding: 0}

.required {color: #e9266d}

#success,
#error {display: none}

#success p,
#error p {display: block;}

#success p {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    padding: 20px;
    background-color: #0B96B9;
    margin-top: 10px;}

#error p {
    color: #D33E43;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border: 2px solid #D33E43;
    margin-top: 10px;}

#submit {
    background-color: #0B96B9;
    color: #fff;
    padding: 20px 40px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    width: 100%;}

.social {
    padding-left: 0;
    list-style: none;
    margin-top: 20px;}

.social li {float: left;}

.social li a {
    color: #333;
    font-size: 35px;
    margin-right: 15px;
    transition: all .3s;
    -webkit-transition: all .3s;}

.social li a:hover {color: #425BB5;}

::-webkit-input-placeholder {
  color: #0B96B9;
  font-size: 1.5rem;}

::-moz-placeholder{
  color: #0B96B9;
  font-size: 1.5rem;}

:-ms-input-placeholder{
  color: #0B96B9;
  font-size: 1.5rem;}

.screen_contact {
    width: 130%;
    position: relative;
    bottom: 60px;
    right: 60px;}

.formulaire {padding-bottom: 35px;}

.mentions a {
    font-size: 1.8rem;
    color: #f3f3f3;
    font-variant: small-caps;
    font-weight: 600;}

.mentions a:hover {color: #7dcbdb;}

#contact .copyright p{padding-bottom: 20px;
    font-size: 1.4rem;
    text-align: center;}

#contact .next {display: none;}



/* Page Mentions légales
==================================================*/
#mentions{
    background-color: black;
    color: #f3f3f3;}

#mentions h1 {
    margin-bottom: 50px;
    font-size: 4.5rem;
    font-variant: small-caps;
    line-height: 5rem;
    color: #7dcbdb;}

#mentions h2 {
    padding-top: 30px;
    color: #7dcbdb;
    font-size: 3rem;
    font-variant: small-caps;}

#mentions h3 {font-variant: small-caps;}

#mentions p {
    margin-bottom: 40px;
    font-size: 1.7rem;
    line-height: 2.4rem;}

#mentions ul li {
    margin-left: -20px;
    font-size: 1.7rem;}

.bleu {color: #0B96B9;}

.retour_home {
    padding: 50px 0 10px 0;
    text-align: center;}

.retour_home a {
    font-size: 2.5rem;
    font-variant: small-caps;
    color: #0B96B9;}

.retour_home a:hover {color: #7dcbdb;}



/* Responsive media queries
==================================================*/

@media (max-width: 1080px) { 
    
    .invisible {display: none;}
    
    .table-cell {
        padding-top: 250px;
        vertical-align: top;}
    
    .lg_construct {
        width: 60%;
        left: 110%;
        bottom: 35%;}
    
    #about,
    #services,
    #experience,
    #projects {padding: 50px 0;}
    
    .about-img-div img {
        width: 90%;
        max-width: 400px;}
    
    .about-border {
        width: 88%;
        left: 5%;}
    
    .servicestrio h2 {
        font-size: 4rem;
        font-family: open sans, sans-serif;}
    
    .servicestrio p {
        color: gray;
        font-weight: 600;}
    
    .servicestrio li {color: #0B96B9;}
    
    .servicestrio li:nth-child(even) {color: #7dcbdb;}
    
    .modal-content h2 {
        font-size: 32px;
        line-height: 45px;}
    
    #contact {padding: 0px;}
    
    #contact p {margin-top: 60px;}
    
    #contact h1 {margin-bottom: 30px;}
    
    #contact .flypaper img {width: 100%;}
    
    .screen_contact {
        right: 50px;
        bottom: 20px;}
    
    #mentions .retour_home {padding: 20px 0 10px 0;}
}

/* largeur tablette en mode horizontal 980px */
@media (max-width: 991px) {  
    
    .table-cell {padding-top: 100px;}
    
    .disply-table {margin-left: 9%;}
    
    #about,
    #services,
    #experience,
    #projects {padding: 20px 0px 50px 0px;}
    
    #home h4 {top: 40px;}
    
    #home h1 {
        padding-top: 30px;
        font-size: 60px;
        line-height: 75px;}
    
    .lg_construct {
        width: 22%;
        left: 70%;
        bottom: 17%;}
    
    .about-img-div img {display: none;}
    
    .about-border {display: none}
    
    .invifolio {display: none;}
    
    .portfolio .categories-grid .categories ul li a {padding: 0 2px;}
    
    .modal-content h2 {font-size: 30px;}
    
    #contact .flypaper {margin-bottom: 30px;}
    
    #contact .screen_contact,
    #contact .girl_contact {display: none;}
    
    #mentions h1 {
        margin-bottom: 0px;
        font-size: 3.9rem;
        line-height: 4rem;}
}

/* largeur gsm galaxy 770px en mode horizontal */
@media (max-width: 840px) { 
    
    #experience {padding: 15px 0px 50px 0px ;}
    
    #home container {margin-left: 10%;}
    
    .lg_construct {
        width: 23%;
        left: 70%;
        bottom: 3%;}
    
    #experience .timeline-event-copy {width: 95%;}
    
    .modal-content h2 {
        font-size: 25px;
        line-height: 35px;}
}

@media (max-width: 768px) { 
    
    .invisible {display: none;}
    
    .timeline-event-copy {
        width: 90%;
        left: 2em;}
    
    header {height: 80px;}
    
    header nav li {margin: 3px 10px;}
    
    /* MENU BURGER */
    .menu-wrap {
        background-color: #0B96B9;
        position: fixed;
        top: 0;
        height: 100%;
        width: 200px;
        margin-left: -280px;
        font-size: 1em;
        font-weight: 700;
        overflow: auto;
        transition: .25s;
        z-index: 10;}

    .menu-show {margin-left: 0;}

    .menu-sidebar {
        margin: 0px;
        position: relative;
        top: 0;}
    
    .menu-sidebar ul {padding: 50px 0 ;}

    .menu-sidebar li {padding: 18px 22px 0;}

    .menu-sidebar li > a {
        color: #f3f3f3;
        font-size: 1.18em;
        position: relative;}

    .menu-sidebar li > a::after {
        content: "";
        display: block;
        height: 0.15em;
        position: absolute;
        top: 100%;
        width: 100%;
        left: 50%;
        transform: translate(-50%);
        transition: background-position .2s .1s ease-out;
        background-size: 200% auto;}
    
    .menu-sidebar li > a.hover {color: #7dcbdb;}
    
    .menu-sidebar li > a.active {color: black;}

    .menu-sidebar li > a:hover::after {background-position: -100% 0; color: #7dcbdb;}

    .menu-sidebar .menu-item-has-children {position: relative;}

    .menu-sidebar .menu-item-has-children .sub-menu {display: none;}

    .sidebar-menu-arrow::after {
        content: "\f107";
        font-family: 'FontAwesome';
        padding: 10px;
        position: relative;}

    .sidebar-menu-arrow:hover::after {
        cursor: pointer;
        color: #fff;}

    .sidebar-menu-arrow:active::after {top: 2px;}


    /*Hamburger Button*/
    .toggle-button {
        position: fixed;
        width: 44px;
        height: 40px;
        top: 25px;
        left: 20px;
        padding: 4px;
        transition: .25s;
        z-index: 15;}

    .toggle-button:hover {cursor: pointer;}

    .toggle-button .menu-bar {
        position: absolute;
        border-radius: 2px;
        width: 80%;
        transition: .5s;}

    .toggle-button .menu-bar-top {
        border: 4px solid #7dcbdb;
        border-bottom: none;
        top: 0;}

    .toggle-button .menu-bar-middle {
        height: 4px;
        background-color: #7dcbdb;
        margin-top: 7px;
        margin-bottom: 7px;
        top: 4px;}

    .toggle-button .menu-bar-bottom {
        border: 4px solid #7dcbdb;
        border-top: none;
        top: 22px;}

    .button-open {left: 25px;}

    .button-open .menu-bar-top {
        border-color: #fff;
        transform: rotate(45deg) translate(8px, 8px);
        transition: .5s;}

    .button-open .menu-bar-middle {
        background-color: #fff;
        transform: translate(230px);
        transition: .1s ease-in;
        opacity: 0;}

    .button-open .menu-bar-bottom {
        border-color: #fff;
        transform: rotate(-45deg) translate(7px, -7px);
        transition: .5s;}
    
    /* FIN MENU BURGER */  
    
    .disply-table {margin-left: 10px;}
    
    /*.disply-table img {
        display: block;
        top: 250px;
        left: 35%;
        margin-top: 30px;}*/
    
    .table-cell {
        display: block;
        margin-top: 80px;
        padding-top: 0px;}
    
    .lg_construct {
        width: 45%;
        left: 107%;
        bottom: 0%;
        /*padding-top: 20px;*/}
    
    #about,
    #experience,
    #projects {padding: 20px 0;}
    
    #about h4,
    #services h4,
    #experience h4,
    #projects h4 {margin-top: 60px;}
    
    .about-img-div img {display: none;}
    
    .about-border {display: none;}
    
    .servicestrio img {
        margin: auto;
        width: 70%;    }
    
    .portfolio_filter {padding-right: 0px;}
    
    .servicestrio ul {padding-bottom: 80px;}
    
    .portfolio-inner {padding-top: 0px;}
    
    .portfolio .categories-grid .categories ul li a.active {padding: 0 5px;}
    
    .portfolio_container .bloc_port {
        position: absolute; 
        left: 5% !important;}
    
    .modal-content h2 {font-size: 25px;}
    
    #contact {padding: 0px;}
    
    #contact .flypaper img {display: none;}
    
    #mentions .container {width: 93%;}
    
    #mentions h1 {font-size: 3.5rem;}
    
}

/* largeur tablette en mode vertical 548px */
@media (max-width: 650px) { 
    
    .table-cell {margin-top: 0px;}
    
    .disply-table img {display: none;}
    
    .lg_construct {
        width: 58%;
        padding-top: 10%;}
    
    #home h1 {
        padding-top: 70px;
        font-size: 50px;
        line-height: 65px;}
    
    #home h4 {
        top: 70px;
        left: 2px;}
    
    #about,
    #services {padding: 20px 0 50px 0;}
    
    #experience,
    #projects,
    #contact {padding-top: 10px;}
    
    #about h4,
    #services h4 {margin-top: 30px;}
    
    #experience h4,
    #projects h4,
    #contact h4 {margin-top: 10px;}
    
    .portfolio_container .bloc_port {left: 0px !important;}
    
    .modal-content h2 {
        font-size: 22px;
        line-height: 30px;}
    
    #contact p {margin-top: 0px;}
    
    #mentions .container {width: 90%;}
    
    #mentions h1 {
        font-size: 2.7rem;
        line-height: 3.5rem;}
    
    #mentions h2 {font-size: 2.5rem;}
}

@media (max-width: 500px) {
    
    #home h4 {
        top: 30px;
        left: -7px;}
    
    #home h1 {
        padding-top: 0px;
        font-family: 'Playfair Display', serif;
        font-size: 50px;
        line-height: 50px;}
    
    .container {padding-right: 30px;}
    
    .table-cell {margin-top: 0px;}
    
    #home,
    .disply-table {
        height: 100vh;
        display: block;
        padding-top: 20px;}
    
    .disply-table {margin-left: 20px;}
    
    #home .disply-table h1 {
        font-size: 50px;
        line-height: 6.5rem;}
    
    .disply-table img {display: none;}
    
    .size-50 {font-size: 45px;}
    
    #about h4,
    #projects h4 {margin-top: 50px;}

    #services h4,
    #experience h4,    
    #contact h4 {margin-top: 0px;}
    
    #about,
    #experience,
    #projects {padding: 0 0 20px 0;}
    
    .servicestrio img {width: 70%;}
    
    #experience .timeline-event-copy h4 {line-height: 1.5;}
    
    .portfolio .categories-grid .categories ul li {
        list-style: none;
        margin: 10px 0;}
    
    .modal-content h2 {
        font-size: 22px;
        line-height: 30px;}
    
    #contact .copyright p {
        font-size: 1.5rem;
        line-height: 3rem;}
    
    #contact .next{display: inherit;}
    
    .mentions a {font-size: 1.6rem;}
    
    #mentions h1 {
        font-size: 2.5rem;
        line-height: 3rem;}
}

/* largeur gsm galaxy 388px en mode vertical */
@media (max-width: 420px) {
    
    nav li {margin: 6px;}
    
    nav li a {font-size: 10px;}
    
    .disply-table img {display: none;}
    
    .container {padding-right: 0px;}
    
    #home {height: 115vh;}
    
    #home h4{
        padding-bottom: 20px;
        font-size: 2rem;}
    
    #services h4,
    #contact h4 {margin-top: 20px;}
    
    #home h1 {padding-top: 30px;}
    
    .size-50 {
        font-size: 35px;
        line-height: 45px;}
    
    .servicestrio {
        margin-top: -25px;
        padding-right: 0px;
        padding-left: 0px;}
    
    .servicestrio h2 {font-size: 3rem;}
    
    .servicestrio p {
        margin-left: 15px;
        margin-right: 20px;}
    
    .servicestrio ul {
        padding-left: 15px;
        padding-right: 20px;}
    
    .categories li a {font-size: 1.3rem;}
    
    #experience .container {margin-left: 0px;}
    
    #experience .exp {padding-left: 0px;}
    
    #experience ul {margin-left: -20px;}
    
    #projects .categories-grid ul li {margin: 5px 0;}
    
    #projects .img-responsive {max-width: 95%;}
    
    .portfolio_filter {padding-left: 10px;}
    
    .portfolio .categories-grid .categories ul li a {margin: 0 7px;}
    
    .portfolio .categories-grid .categories ul li a.active {padding: 0 7px;}
    
    .portfolio_container .bloc_port {left: 5% !important;}
    
    .bloc_port {padding-left: 0px;}
    
    .modal-content h2 {
        font-size: 18px;
        line-height: 25px;
        font-weight: 600;}
    
    .titre_info_video {font-size: 2.5rem;}
    
    .imgflypaper {display: none;}
    
    .formulaire {
        width: 95%;
        padding-bottom: 0px;}
    
    .copyright {width: 85%;}
    
    #contact p {
        font-size: 1.5rem;
        line-height: 2rem;}
    
    #contact .copyright p {font-size: 1.3rem;}
    
    .mentions a {
        font-size: 1.5rem; 
        font-weight: 600;}
    
    #mentions h1 {
        font-size: 2.5rem;
        line-height: 3rem;}
    
    #mentions p{font-size: 1.6rem;}
    
    #mentions ul li {font-size: 1.6rem;}
}