@font-face {
    font-family: "Gotham-Black";
    src: url("/assets/fonts/Gotham-Black.otf");
}
@font-face {
    font-family: "Gotham-Bold";
    src: url("/assets/fonts/Gotham-Bold.otf");
}
@font-face {
    font-family: "Gotham-Book";
    src: url("/assets/fonts/GothamBook.ttf");
}
@font-face {
    font-family: "Gotham-Light";
    src: url("/assets/fonts/GothamLight.ttf");
}
@font-face {
    font-family: "Gotham-Medium";
    src: url("/assets/fonts/GothamMedium_1.ttf");
}
@font-face {
    font-family: "Montserrat-Bold";
    src: url("/assets/fonts/Montserrat-Bold.ttf");
}
@font-face {
    font-family: "Myriad-Regular";
    src: url("/assets/fonts/MyriadPro-Regular.otf");
}

main{
    max-width: 1200px;
    margin: auto;
}
body{
    overflow-x: hidden;
}

p{
    font-family: Gotham-Medium;
    font-size: 20px;
}

h1{
    color: #fff;
    font-family: Gotham-Black;
    font-size: 70px;
    padding: 122px 0px 50px 0px;
    text-align: center;
    max-width: 100%;
}
.majuscule{
    font-size: 80px;
}
h2{
    color: #ef6f2b;
    font-family: Gotham-Black;
    font-size: 60px;
}
h5{
    color: #fff;
    font-family: Gotham-Black;
    font-size: 30px;
    
}
.trait{
    position: relative;
    bottom: 18px;
    margin-right: 18px;
}
.trait2{
    position: relative;
    bottom: 18px;
    margin-left: 18px;
}
.align-right{
    text-align: right;
}
header{
    padding: 20px 0px;
    display: flex;
    align-items: center;
}
.sticky{
    position: fixed;
    background-color: #fff;
    z-index: 99;
    width: 100%;
    margin: auto;
    height: 80px;
    transition: 0.4s;
}

header.sticky {
    padding: 10px 0px;
}

.logo{
    display: block;
    width: 100px;
    margin-left: 50px;
}
.flag{
    width: 20px;
}
.language-container {
    width: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
nav{
    width: 1200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
}
nav a:hover{
    border-bottom: solid 3px #ef6f2b;
    padding-bottom: 8px;
    transition: 0.3s;
}
nav a, .language-container a{
    text-decoration: none;
    color: #7c898a ;
    font-family: Gotham-Bold;
}

.banner{
    background-image: url(../assets/img/banner.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: -200px;
    background-size: cover;
    height: 500px;
}

.solutions{
    display: flex;
    margin: auto;
    height: 500px;
    width: 800px;
    justify-content: space-around;
}
.left,.right{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.solutions div{
    background-color: #8eb1c7;
    width: 350px;
    border-radius: 40px;
    padding: 0px 30px;
}

.solution-titre{
    display: block;
    margin: auto;
    padding-top: 30px;
    
    font-family: Gotham-Bold;
    font-size: 25px;
    text-align: center;
    color: #ffff;
}
.solutions div p{
    margin-top: 30px;
    text-align: center;
    line-height: 25px ;
    color: #ffff;
}
.text-right{
    margin-top: 50px !important;
}

.illu1{
    display: block;
    width: 220px;
    position: relative;
    top: -195px;
    left: -151px;
}
.illu2{
    display: block;
    width: 260px;
    position: relative;
    top: -193px;
    left: 172px;
}


.en-savoir-plus-left, .en-savoir-plus-right{
    position: relative;
    bottom: -60px;
    text-decoration: none;
    font-size: 14px;
    color: #ffff;
    background-color: #294359;
    width: 90px;
    padding: 15px 30px;
    border-radius: 40px;
    font-size: 18px;
    font-family: Helvetica;
}

.en-savoir-plus-left{
    right: -110px;
}
.en-savoir-plus-right{
    right: -10px;
}

/* nos-partenaires */
.section-nos-partenaires{
    
    min-width: 800px;
    max-width: 2400px;
    margin: auto;
    margin-top: 200px;
}

.nos-partenaires-item-container{
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding: 100px 0px 20px 0px;
    display: flex;
    justify-content: space-between;
}
.items{
    width: 200px;
    border-radius: 20px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/* section plantation */
.section-plantation{
    
    min-width: 800px;
    max-width: 2400px;
    margin: auto;
}
.plantation-container{
    width: 1000px;
    margin: auto;
}
.tnl-mini-logo{
    position: relative;
    top: -293px;
    left: 295px;
    width: 20px;
    background-color: #ef6f2b;
}
.tnl-mini-logo2{
    position: relative;
    top: -126px;
    left: 382px;
    width: 20px;
    background-color: #ef6f2b;
}

.img-carte-plantation{
    display: block;
    width: 100%;
}


/* section team */
.section-team{
    width: 100%;
    min-width: 800px;
    max-width: 2400px;
    margin: auto;
}
.banner-container-team{
    background-image: url("../assets/img/A.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
    margin: auto;
}
.bis-container{
    width: 600px;
    margin: auto;
}

.a-bis{
    width: 280px;
    position: relative;
    top: -50px;
    left: 565px;
}

.container-industrie{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: auto;
}
.img-4{
    width: 100%;
    height: 100%;
    align-self: center;
}
.img-industrie-left{
    width: 900px;
    height: 450px;
    background-image: url('../assets/img/tnl-mini-logo.png');
    background-size: contain;
    background-position-y: 100px;
    background-repeat: no-repeat;
}
.industrie-right{
    width: 50%;
    padding-bottom: 50px;
}
.mission-statement{
    width: 350px;
    margin: auto;
}
.mission-statement p{
    margin-top: 20px;
    text-align: justify;
    font-size: 20px;
    color: #7c898a;
   
}
h3{
    color: #294359;
    font-family: Gotham-Medium;
    font-size: 40px;
    text-align: center;
}
.orange{
    color: #ef6f2b;
    font-family: Gotham-Bold;
}


.team-members{
    
    margin: auto;
    margin-top: 80px;}
.team-title{
    display: block;
    max-width: 80%;
    margin: auto;
    margin-top: 50px;
    text-align: left;
    font-size: 25px;
}
h4{
    font-family: Gotham-Black;
    color: #fff;
    font-size: 40px;
    text-align: center;

}
.profile-container{
    display: flex;
    justify-content: space-around;
}
.profile{
    width: 28%;
    min-width: 250px;
    max-width: 350px;
}
.profile-text{
    padding: 100px 22px 0px 22px;
    background-color: #294359;
    min-height: 380px;
    border-radius: 25px;
    
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.profile-text p{
    margin-top: 20px;
    color: white;
    font-family: Gotham-Light;
    font-size: 20px;
}
.profile-img{
    border-radius: 25px;
    width: 230px;
    height: 350px;
    display: block;
    margin: auto;
    position: relative;
    top: 60px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;    font-family: Gotham-Medium;
    text-align: center;
    font-size: 30px;
}

.jp-photo{
    filter: grayscale();
    object-fit: cover;  

}

.profile-text:hover {
     outline:solid 4px #ef6f2b;
}
.bold{
    font-weight: bold ;
}

.sub-profile{
    margin: 90px 0px;
    font-family: Gotham-Medium;
    text-align: center;
}

/* solution vipxo */
.banner-container-vipxo{
    background-image: url("../assets/img/B.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #294359;
}
.b-bis{
    width: 350px;
    position: relative;
    top: -20px;
    left: 450px;
}

.container-production{
    background-color: #294359;
}
.background-tablette{
    height: 200px;
    background-image: url("../assets/img/production/background/1-picto.png");
    background-repeat: no-repeat;
    background-position: center;
}

.container-suivi{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url("../assets/img/production/background/2-picto.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: contain;
}

.container-quality{
    display: flex;
    justify-content: space-around;

    background-image: url("../assets/img/production/background/3-picto.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;

}
.container-OF{
    display: flex;
    justify-content: space-between;
    background-image: url("../assets/img/production/background/4-picto.png");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    padding: 20px 0px;
}
.container-management{
    display: flex;
    justify-content: space-around;
    background-image: url("../assets/img/production/background/5-picto.png");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}
.container-chariot{
    display: flex;
    justify-content: space-between;
    background-image: url("../assets/img/production/background/6-picto.png");
    background-repeat: no-repeat;
    background-position-y: 50px;
    background-position-x: center;
    padding-top: 20px 
}
.container-img{
    width: 500px;
}
.img-ouvrier {
    width: 100%;
}
.img-two-ouvrier{
    width: 300px;
    position: relative;
    left: 100px;
    bottom: 100px;
    
}
.container-text{
    width: 600px;
    padding: 0px 40px;
    margin-bottom: 100px;
}
.container-production p{
    font-family: Gotham-Light;
    color: #fff;
}

.container-text-quality{
    width: 500px;
    margin-top: 150px;
}
.container-text-OF{
    width: 600px;
    padding: 0px 40px;
    margin-top: 100px;
}
.container-text-management{
    width: 500px;
    margin-top: 120px;
}
.container-text-chariot{
    width: 600px;
    padding: 0px 40px;
    margin-top: 50px;
}
.banner-ligne-suivie{
    margin: 100px 0px;
}
.ligne-suivie{
    font-size: 100px;
    font-family: Gotham-Bold;
}

/* section assets tracking */

.banner-container-assets-tracking{
  
    background-image: url("../assets/img/C.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
}
.c-bis-container{
    margin: auto;
    height: 160px;
}
.c-bis{
    width: 280px;
    position: relative;
    left: 780px;
    top: -100px;
}
.section-assets-tracking{
    margin: auto;
    background-color: #294359;
}

.container-assets-tracking{
    max-width: 100%;
    margin: auto;
    background-color: #294359;
    padding: 30px;
}
h6{
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
    font-family: Gotham-Black;
    width: 33%;
    text-align: center;

}

.container-assets-tracking p{
    margin-top: 20px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    width: 33%;
    padding: 20px;
}
.container-assets{
    display: flex;
}

.container-tablette{
    width: 90%;
    margin: auto;
    padding-bottom: 30px;
}
.container-tablette img{
    width: 100%;  
}

.title-clients{
    margin: 100px 0px;
}

.title-tags{
    margin-top: 100px;
}

.video-container{
    margin: 100px 0px;
    background-image: url('../assets/img/background\ video.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
    display: flex;
}
.video-container h1{
    padding-top: 130px;
}
.button-play-container{
    width: 200px;
    margin: auto ;
    max-width: 100%;
}
.button-play{
    width: 100%;
}
.play-button{
    background-color: transparent;
    border: none;
}
.play-button:hover{
    cursor: pointer;
}

.video{
    position: fixed;
    top: 100px;
    width: 100%;
    height: 100%;
    display: none;
    margin: auto;
}

.decouvrez-nous{
    width: 40%;
    min-width: 350px;
    margin-left: 200px;
}

.separator{
    height: 40px;
    background-color: #ef6f2b;
}
.separator2{
    margin-top: 30px;
    height: 40px;
    background-color: #8eb1c7;
}
.div-title{
    display: flex;
    width: 600px;
}

/* section contact */

.section-contact{
    display: flex;
    justify-content: center;
    padding: 50px;
    background-color: #acd0e6;
}
.img-container{
    width: 600px;
    padding-top: 100px;
}
.contact-form{
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 50px 0px;
}
form{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
}
.contact-form h2{
    text-align: center;
    margin-bottom: 50px;
}
input{
    padding: 10px 5px;
    border: none;
    background-color: #fff;
    margin: 10px 0px;
}
input::placeholder, textarea::placeholder{
    color: #67737c;
}
label{
    font-family: Gotham-Light;
}

.submit{
    width: 100px;
    margin: auto;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #294359;
    color: #fff;
    font-family: Gotham-Black;
}
textarea{
    margin: 10px 0px;
    padding: 10px 20px;
    border: none;
    background-color: #fff;
    max-width: 100%;
}
.iframe{
    width: 100%;
    margin: 30px 0px;
}

/* footer */
footer{
    height: 200px;
    background-color: #294359;
}
.footer-container{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-around;   
}
.footer-container div{
    width: 20%;
}
.footer-container p{
    text-align: center;
    margin-top: 30px;
    color: #fff;
}
.footer-container h6{
    margin-top: 50px;
    width: 100%;
    font-size: 20px;
    background-color: #8eb1c7;
    padding: 10px 20px;
    border-radius: 20px;
}
.g-recaptcha{
    margin-bottom: 40px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 40%;
min-width: 200px;
max-width: 500px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: black;
background-color: #7c898a;
padding: 10px;
float: right;
font-size: 28px;
font-weight: bold;
}
.close2 {
color: #67737c;
padding: 5px 8px;
float: right;
font-size: 28px;
font-weight: bold;
font-family: Gotham-Medium;
}
.close2:hover{
    cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

@media screen and (max-width: 492px){
    main{
        width: 100%;
    }

    p{
        font-size: 15px;
    }
    .logo{
        margin: 10px;
    }

    .header2{
        position:absolute;
        right: 30px;
        top: 20px;
        z-index:99;
        width:100%;
        max-width:40px;
        box-sizing:border-box;
        border-bottom:1px solid #fff;
      }

    #menu-button{
        position:absolute;
        width:50px;
        height:50px;
        overflow:hidden;
        background:#fff;
        color: #ef6f2b;
        line-height:40px;
        text-align:center;
        font-size:60px;
        cursor:pointer;
        transition:all .5s;
      }
      
      #menu-button::after{
        content:'×';
        background-color: black;
        color: #ef6f2b;
      }
      #menu-button.close{
        color:#ef6f2b;
        background:#fff;
      }
      #menu-button.close::after{
        content:'≡';
        color:#ef6f2b;
        background:#fff;
      }
      
      #menu{
        display: flex;
        flex-direction: column;
        transition: transform .5s;
        background-color: #ef6f2b;
        position:absolute;
        z-index: 99;
        top: 20px;
        width:100%;
        max-width: 100%;
        transform:translateY(-300px);
      }
      #menu a{
        color: #fff;
        font-size: 20px;
        margin: 10px;
      }
      #menu.show-menu{
        transform:translateY(50px);
      }

      .banner{
        background-size: contain;
        background-position-y: -50px;
        height: 280px;
      }
      h1{
        font-size: 25px;
        padding-top: 10px;
      }
      h3{
        font-size: 20px;
      }
      .majuscule{
        font-size: 40px;
      }
      .solutions{
        width: 100%;
        height: inherit;
        display: flex;
        flex-direction: column;
        padding: 0px;
      }

      .solutions div{
        width: 300px;
        margin: auto;
        padding: 0px 10px;
        height: 400px;
      }

      .illu1, .illu2{
        width: 150px;
      }
      .illu1{
        top: -151px;
        left: -62px;
      }
      .illu2{
        top: -38px;
        left: 176px;
      }
      .en-savoir-plus-left, .en-savoir-plus-right{
        right: 0;
        left: 0;
        bottom: auto;
        display: block;
        margin: auto;
        position: inherit;
        width: 200px;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
      }
      .solutions .right{
        margin-top: 50px;
        height: 500px;
      }    

      .section-nos-partenaires{
        min-width: 100%;
      }
      h2{
        font-size: 25px;
        width: 100%;
      }

      .section-plantation,.plantation-container{
       min-width: inherit;
       width: 100%;
      }

      .section-team{
        min-width: inherit;
      }
    
      .bis-container{
        width: 100%;
      }
      .a-bis,.b-bis, .c-bis{
        width: 150px;
        left: 242px;
      }
      /* container qui sommes nous */
      .container-industrie{
        width: 100%;
        flex-direction: column;

      }
      .mission-statement{
        width: auto;
        padding: 0px 5px;
      }
      .mission-statement p{
        font-size: 15px;
      }

      .img-industrie-left{
        width: 300px;
        background-size: 40%;
        background-position-y: 63px; 
        height: 150px;
        margin: auto;
      }
      .industrie-right{
        width: 300px;
        margin: auto;
        margin-top: 40px;
        padding-bottom: 10px;
      }
      .team-title{
        font-size: 15px;
      }
      .profile-container{
        flex-direction: column;
      }
      .profile{
        margin: auto;
        width: 200px;
      }
      .profile-img{
        width: 165px;
        height: 210px;
      }
      h5{
        font-size: 20px;
      }
      .profile-text{
        padding-top: 70px;
        min-height: 340px;
      }
      h4{
        font-size: 20px;
      }

      /* container suivi */
      .container-suivi{
        padding: 15px 10px;
      }
      .container-img{
        width: 50%;
      }
      .container-text{
        width: 50%;
        padding-left: 20px;
        padding-right: 0px;
      }

      /* container quality */
      .container-text-quality{
        width: 50%;
        margin-top: 10px;
        padding-right: 25px;
      }
      .img-two-ouvrier{
        width: 120px;
        bottom: -15px;
        left: 25px;
      }
      .container-quality{
        background-size: contain;
        padding: 40px 0px;
      }

      /* container OF */
      .container-OF{
        padding: 40px 0px;
        background-size: contain;
      }
      .container-text-OF{
        width: 40%;
        margin-top: 0px;
        padding-left: 10px;
        padding-right: 0px;
      }

      /* container management */
      .container-management{
        background-size: contain;
        padding: 20px 0px;
      }
      .container-text-management{
        margin-top: 0px;
        width: 40%;
      }

      /* container-chariot */
      .container-chariot{
        padding: 20px 0px;
      }
      .container-text-chariot{
        width: 50%;
        margin-top: 0px;
      }

      /* Solution assets tracking */
      .c-bis{
        top: -60px;
      }
      .container-assets-tracking{
        padding: 0px ;
      }
      .container-assets.titre{
        padding: 0px 5px;
      }
      .container-assets.text p{
        padding: 0px 8px;
        font-size: 13px;
      }

      h6{
        font-size: 16px;
      }

      /* video container */
      .video-container{
        width: 100%;
        background-size: contain;
        margin : -50px 0px;
      }
      .video-container h1{
        padding-top: 160px;
      }
      .button-play-container{
        width: 140px;
      }

      .decouvrez-nous{
        min-width: inherit;
        margin-left: 50px;
      }

      /* contact */
      .section-contact{
        display: inherit;
        padding: 0px 40px;
      }
      .img-container{
        width: 300px;
        padding: inherit;
      }
      .contact-form{
        padding: 25px 0px;
        width: 90%;
      }
    
      form{
        width: inherit;
      }

      /* footer */
      .footer-container h6{
        font-size: 16px;
        padding: 10px 10px;
      }
      .footer-container div{
        width: 32%;
      }
      .footer-container p{
        font-size: 10px;
      }
}