* {box-sizing:border-box}
        html, body, #wrapper {margin:0;width:100vw;height:100vh}

body {font-family: 'Montserrat', sans-serif; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
/* CSS FOR WRAPPER */

#wrapper {
        margin: 0 auto;
        max-width: 1920px;
}

#wrapper,
.content {
        display: flex; 
        flex-direction: column;
}

/* CSS FOR INDEX VIDEO */

#bgvideo {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100vw; 
        min-height: 100vh;
        z-index: -100;
        filter: blur(5px);
        filter: grayscale(100%);
}

.video-overlay {
        background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
        background: rgba(0, 0, 0, 0.85);
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
}

.logo-entrer {
        display: flex;
        width: 80vw;
        justify-content: center;
        align-items: center;
}

.logo-video {
        height: 22vh;
        margin-bottom: 30px;
}

.logo-entrer h1 {
        color: white;
        font-size: 4rem;
        font-weight: 100;
        padding: 0;
        margin: 0;
}
.logo-entrer p {
        color: red;
        font-size: 6rem;
        padding: 0 30px 0 30px;
        margin: 0;
        
}

.logo-entrer a,
.logo-entrer a:link,
.logo-entrer a:hover,
.logo-entrer a:visited,
.logo-entrer a:active {
        text-decoration: none;
}

.container-social {
        display: flex;
        width: 80vw;
        justify-content: center;
        align-items: center;
        
}

.fb-social {
        height: 40px;
        width: 40px;
        background-image: url('images/btn_facebook_hover.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        margin-right: 20px;
}

.fb-social:hover {
        background-image: url('images/btn_facebook.png');
}

.vimeo-social {
        height: 40px;
        width: 40px;
        background-image: url('images/btn_vimeo_hover.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        margin-right: 20px;
}

.vimeo-social:hover {
        background-image: url('images/btn_vimeo.png');
}

.yt-social {
        height: 40px;
        width: 40px;
        background-image: url('images/btn_youtube_hover.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        margin-right: 20px;
}

.yt-social:hover {
        background-image: url('images/btn_youtube.png');
}

.ig-social {
        height: 40px;
        width: 40px;
        background-image: url('images/btn_instagram_hover.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        margin-right: 20px;
}

.ig-social:hover {
        background-image: url('images/btn_instagram.png');
}

.in-social {
        height: 40px;
        width: 40px;
        background-image: url('images/btn_linkedin_hover.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
}

.in-social:hover {
        background-image: url('images/btn_linkedin.png');
}
/* CSS FOR HEADER + MENU */

header {
        display: flex;
        padding: 16px 50px 16px 50px;
        justify-content: space-between;
        align-items: center;
        -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.5);
}

.logo-menu {
        height: 10vh;
}

nav {
        
  
}

nav ul {
        list-style: none;
        text-align: center;
}

nav ul li {
        display: inline-block;
}

nav ul li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000;
        font-weight: 600;
        font-size: 1.25rem;
        text-transform: uppercase;
        margin: 0vw 0.5vw; 
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
        transition: all .5s;
}

nav ul li a:hover {
        color: #fff;
}

nav.shift ul li a {
        position:relative;
        z-index: 1;
}

nav.shift ul li a:hover {
        color: #fff;
        font-weight: 600;

}

nav.shift ul li a:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 1px;
        content: '.';
        color: transparent;
        background: #f60505;
        visibility: none;
        opacity: 0;
        z-index: -1;
}

nav.shift ul li a:hover:after {
        opacity: 1;
        visibility: visible;
        height: 100%;
}

label {
        font-size: 26px;
        line-height: 70px;
        display: none;
        width: 26px;
        float: right;
}

#toggle {
        display: none;
}

/* CSS FOR ACCUEIL */


#main-container {
        flex: 1; /* takes the remaining vertical space inside the #container */
        overflow: auto;
}

section {
        flex: 0 0 auto; /* or: flex-shrink: 0; */
        height: 90%; /* takes the remaining (visible) vertical space inside the main */
        margin-bottom: 1px; /* just for presentation / separation purposes */
        padding: 10px;
        background: white;
        overflow: auto; /* recommended */
}

.intro {
        display: flex;
        background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url("images/bg.png");
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        justify-content: center;
        align-items: center;
}

.intro p {
        
        color: white;
        text-transform: uppercase;
        font-size: 2rem;
        letter-spacing: 10px;
        width: 80vw;
        text-align: center;
        font-weight: bold;
        text-shadow: 2px 2px 4px #000000;
}

.main-section,.main-section2 p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
}

.main-section {
        display: flex;
        padding: 50px;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        background-color: #efefef;
        max-width: 1920px;
        
}

.main-section,.main-section2 {

}

.main-section h1 {
        font-size: 2rem;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 2px;
        line-height: 2rem;
}

.main-section h2 {
        font-size: 1.2rem;
        color: red;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
}

.main-section a {
        color: red;
}


.section-img {
       
}
.mariage-img {
        height: 35vh;
        max-height: 385px;
}

.section-txt {
        width: 65vw;
        margin-bottom: 0;
        padding-left: 1.5vw;
}

.section-txt a{
    text-transform: uppercase;
    text-decoration: none;
}

.main-section2 {
        display: flex;
        padding: 50px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        background-color: #fff;
        max-width: 1920px;
}

.main-section2 h1 {
        font-size: 2rem;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 2px;
        line-height: 2rem;
}

.main-section2 h2 {
        font-size: 1.2rem;
        color: red;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
}

.section-txt2 {
        width: 65vw;
        margin-bottom: 0;
        padding-right: 1.5vw;
}

footer {
        display: flex;
        background-color: #000;
        justify-content: space-between;

}

footer p {
        font-size: 0.75rem;
        color: white;
}

footer div {
        width: 48%;
        display: flex;
        align-items: center;
        padding: 0 50px 0 50px;
}

.footer-bd {
        flex-direction: row;
        justify-content: flex-end;
}

.logo-bd {
    height: 50px;
}
/* FOR PAGES-TITLE */

.page-title {
        padding: 30px;
        background-color: #efefef;
        
        
}

.page-title h1 {
        font-size: 1.5rem;
        margin: 0;
        border-right: 5px solid red;
        padding-right: 10px;
        text-align: right;
}

/* FOR SERVICES CSS */

.container-services,.container-services2 {
        display: flex;
        background-color: #FFF;
        padding: 50px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        max-width: 1920px;
}

.container-services2 {
        background-color: #efefef;
}

.section-img-services {
       
}

.services-txt {
        width: 59vw;
        padding-left: 50px;
        margin-bottom: 0;
        font-weight: 600;
}

.services-txt li {
        line-height: 1.5rem;
}

.services-img {
        height: 35vh;
        max-height: 385px;
}

.services-txt h1 {
        font-size: 2rem;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 3px;
}

.services-txt h1 span {
        color: red;
        font-size: 1.5rem
}

.services-txt h2 {
        font-size: 1.2rem;
        color: red;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
}

/* FOR À PROPOS CSS */

.container-equipe,.container-equipe2 {
        display: flex;
        background-color: #FFF;
        padding: 50px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        max-width: 1920px;
}

.container-equipe a,
.container-equipe a:link,
.container-equipe a:active,
.container-equipe a:hover,
.container-equipe a:visited {
        color: red;
        text-decoration: none;
}

.container-equipe2 {
        background-color: #efefef;
}

.equipe-img {
        height: 60vh;
        max-height: 650px;
}

.equipe-img2 {
        height: 35vh;
        max-height: 300px;
}

.equipe-txt {
        width: 59vw;
        padding-left: 40px;
        margin-bottom: 0;
        font-weight: 600;
        line-height: 1.5rem;
}

.equipe-txt h1 {
        font-size: 2rem;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 3px;
}

.equipe-txt h2 {
        font-size: 1.2rem;
        color: red;
        text-transform: uppercase;
        padding-top: 0;
        margin-top: 0;
}

/* FOR CONTACT CSS */

.container-contact {
        display: flex;
        background-color: #FFF;
        padding: 50px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        max-width: 1920px;
        height: 80vh;
        background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(images/bg-portfolio.png);
        background-size: cover;
}

.contact-img {
        width: 40vw
        justify-content: center;
}

.contact-txt {
        width: 40vw;

}

.contact-txt p {
        font-size: 1.2rem;
        line-height: 2rem;      
}

.btn-contact {
        width: 35px;
        padding-right: 15px;
}

.contact-link {
        width: 50%;
        font-weight: 600;
        align-items: center;
}

.contact-link p {
        font-size: 1rem;
        color: #f60505;
}

.contact-link a {
        text-decoration: none;
        color: #f60505;
}

/* FOR PORTFOLIO */

.container-portfolio {
        display: flex;
        background-color: #FFF;
        padding: 50px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        max-width: 1920px;
        height: 80vh;
        background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(images/bg-portfolio.png);
        background-size: cover;
}

/* FOR MOBILE CSS */


@media only screen and (max-width: 1024px) {
      
      .video-overlay {
        width: 100%;
        height: 100%;
        background-color: #000;
      }
      
      .logo-entrer {
        width: 90vw;
        flex-direction: column;
      }
      
      .logo-entrer p {
        display: none;
      }
      
      .logo-entrer h1 {
        font-size: 2rem;
        padding-top: 20px;
      }
      
      .container-social {
        display: none;
      }
      
      #bgvideo {
        display: none;
      }
      
      label {
        display: block;
        cursor: pointer;
      }
      
      nav {
        width: 100vw;
        
      }
      
      .menu {
        text-align: center;
        width: 100%;
        display: none;
        margin: 0 30px 0 0;
      }
      
      nav ul li {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
      }
      
      nav ul li a {
        
        font-size: 1rem;
      }
      
      nav ul {
        padding: 0;
        text-align: left;
      }
      
      #toggle:checked + .menu {
        display: block;
      }
      
      .logo-menu {
        height: 8vh;
      }
      
      .intro {
        background-size: cover;
        background-position-x: 35%;
      }
      
      .intro p {
        font-size: 1.5rem;
        overflow: auto;
        flex-wrap: nowrap;
      }

      .main-section {
        flex-direction: column-reverse;
        overflow: auto;
      }
      
      .section-img {
        justify-content: center;
      }
      
      .section-txt h1 {
        font-size: 1.5rem;
      }
      
      .section-txt p {
        font-size: 1rem;
      }
      
      .section-txt {
        width: 90vw
      }

      .main-section2 {
        flex-direction: column;
        overflow: auto;
      }
      
      .section-txt2 h1 {
        font-size: 1.5rem;
      }
      
      .section-txt2 p {
        font-size: 1rem;
      }
      
      .section-txt2 {
        width: 90vw
      }
      
      .main-section {
        padding: 25px;
      }
      .main-section2 {
        padding: 25px;
      }
      
      .section-img-services {
        display: none;
      }
      
      .services-txt {
        width: 100vw;
        padding: 0;
      }
      
      .services-txt h2 {
        font-size: 0.9rem;
      }
      
      .services-txt ul {
        font-size: 0.7rem; 
      }
      
      .page-title {
        padding: 15px;
        
      }
      
      .page-title h1 {
        font-size: 1rem;
      }
      
      .container-services, .container-services2 {
        padding: 30px;
      }
      
      .services-txt h1 {
        font-size: 1.5rem;
      }
      
      .services-txt h1 span {
        font-size: 1rem;
      }
      
      .section-img-equipe {
        display: none;
      }
      
      .section-img-equipe2 {
        display: none;
      }
      
      .container-equipe, .container-equipe2 {
        padding: 30px;
        flex-direction: column;
      }

      .equipe-txt h1 {
        font-size: 1.6rem;
      }
      
      .equipe-txt {
        width: 85vw;
        padding: 0;
      }

        .container-contact {
            flex-direction: column;
            justify-content: center;
        }

        .contact-img {
                width: 90vw
                justify-content: center;
        }

        .contact-txt {
                width: 90vw;

        }

        .contact-logo {
                width: 150px;
                padding-bottom: 15px;
        }

        .contact-txt p {
                font-size: 0.9rem;
                line-height: 1rem;      
        }

        .btn-contact {
                width: 35px;
                padding-right: 15px;
        }

        .contact-link {
                width: 90vw;
                font-weight: 600;
                align-items: flex-start;
        }

        .contact-link p {
                font-size: 0.85rem;
                color: #f60505;
        }

        .contact-link a {
                text-decoration: none;
                color: #f60505;
        }
              
      
      .container-portfolio {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        }

        .videoplayer {
            padding :10px 10px 10px 10px;
        }


        footer p {
                font-size: 0.5rem;
                color: white;
        }

        footer div {
                width: 100%;
                display: flex;
                text-align: center;
        }

        .footer-bd {
        display: none;
        
        }


}