@media screen and (min-width: 768px) and (max-width: 915px){
    :root {
	  --fullwidth: 100vw;
    }
    #logo{
       max-height: 55px;
       margin-bottom: 30px;
      }

    .menu-first ul li {
        display: inline-block;
        margin: 0px;
      }
      .menu-first ul li:last-child {
        margin-right: 60px!important;
      }
      .menu-first {
        float: right;
      }
      .menu-first li a {
        font-size: 10px;
        line-height: 70px;
        padding: 0px 10px;
      }
      .menu-first ul li.active a {
        color: #fff;
        background-color: #ec4c1c;
      }
      
      .banner {
  
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 450px;
        width: var(--fullwidth);
      }
      .banner-content {
        text-align: center;
        padding: 200px 0px 70px 0px;
      }
      
      .banner .home-text{
        text-align: center;
        position: relative;
        z-index: 2;
        height: 60px;
        width: calc((var(--fullwidth)*80)/100);
        margin-top: 10px;
            
      }
      .banner .home-text p{
        height: 100px;
    }
      
      .banner .home-text p span{
        font-size: 26px;
        line-height: 50px;
        display: none;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 2px;
     }
    
     #col1{
       width: calc((var(--fullwidth)*23.7)/100);
           margin-right: calc((var(--fullwidth)*2)/100);
     }
     #bg1{
      height: 90px;
      width: calc((var(--fullwidth)*22.7)/100);
           padding: 0.85rem !important;
     }
    #bg2{
      width: 36px; height: 36px;
      
    }
    #icon1{
      font-size: 18px;
    }
    
    #ps1{
      padding-left: 6% !important;
      color: #fff !important;
      margin-bottom: 0 !important;
      font-weight: 600 !important;
      font-size: 1.25rem;
      line-height: 0.7;
    }
    #ps1 h5{
      font-size: 12px;
      color: #fff !important;
      margin-top: 0 !important;
      font-weight: 600 !important;
      box-sizing: border-box;
    }
    
    #ps1 h1{
      color: #fff !important;
      margin-bottom: 0 !important;
      font-weight: 800 !important;
      margin-top: 1px;
     margin-bottom: 0px;
      font-family: "Nunito",sans-serif;
      font-weight: 500;
      line-height: 0.7;
      color: #091E3E;
      box-sizing: border-box;
      font-size: 18px;
    }
    #span1{
      color: #fff !important;
      margin-bottom: 0 !important;
      font-weight: 800 !important;
      margin-top: 0;
    
      font-family: "Nunito",sans-serif;
      font-weight: 500;
      color: #091E3E;
      box-sizing: border-box;
      font-size: 18px;
    }
    
    #span2 {
      color: #fff !important;
      margin-bottom: 0 !important;
      font-weight: 600 !important;
      font-size:11px;
      box-sizing: border-box;
    }
  
    /*** Section Title ***/
  
    .section-heading {
      
      margin-top: 30px;
      margin-bottom: 60px;
    
    }
    .section-heading h4 {
      margin-top: 0px;
      margin-bottom: 10px;
      text-transform: uppercase;
      
      font-size: 36px;
      font-weight: 300;
      color:#ec4c1c;
    }

    
    .t1.text-center::before {
      left: 50%;
      margin-left: -75px;
    }
    
    .t1.section-title-sm::before {
      width: 90px;
      height: 3px;
    }
    
    .t1::before {
		position: absolute;
		content: "";
		width: 100px;
		height: 5px;
		left: 50%;
		top: 52px;
		transform: translateX(-50%);
		background: #2c2c84;
		border-radius: 2px;
	}

	.t1::after {
		position: absolute;
		content: "";
		width: 15px;
		height: 6px;
		left: calc(50% - 50px);
		top: 52px;
		background: white;
		animation: section-title-tablet 5s infinite linear;
		-webkit-animation: section-title-tablet 5s infinite linear;
	}
	
	@keyframes section-title-tablet {
		0% {
			left: calc(50% - 50px);
		}

		50% {
			left: calc(50% + 35px);
		}

		100% {
			left: calc(50% - 50px);
		}
	}
    
    .t1.section-title-sm::after {
      width: 4px;
      height: 3px;
    }
    
    .t1.text-center::after {
      -webkit-animation: section-title-run-center 5s infinite linear;
      animation: section-title-run-center 5s infinite linear;
    }
    
    .t1.section-title-sm::after {
      -webkit-animation: section-title-run-sm 5s infinite linear;
      animation: section-title-run-sm 5s infinite linear;
    }
    
    @-webkit-keyframes section-title-run {
      0% {left: 320; } 50% { left : 420px; } 100% { left: 320; }
    }
    
    @-webkit-keyframes section-title-run-center {
      0% { left: 50%; margin-left: -320px; } 50% { left : 50%; margin-left: 320px; } 100% { left: 50%; margin-left: -320px; }
    }
    
    @-webkit-keyframes section-title-run-sm {
      0% {left: 0; } 50% { left : 85px; } 100% { left: 0; }
    }
    
    /*** Section Title ***/
#About {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
   

  
  
   /*** Section début Apropos ***/
      
   #About{
    margin-top: 10px;
  }
  
   #ro{
	margin-left: 0px;
    display:inline-flex;
  
  }
  
  #ro1{
    margin-left: 0px;
  }
  
   #colone1{
     width: 300px;
     margin-left: 0px;
   }
   #icone1{
    margin-left: 225px;
  }
  
  #co1{
    height: 230px;
  }
  
  #espace{
    width: 50px;
    height: 300px;
  }
    /*** Section fin Apropos ***/
  
  /*** Section début SERVICES ***/
  #SERVICES{
    margin-left: calc((var(--fullwidth)*2)/100);
   
  }


  #SERVICES .section-heading {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 0px;
  
  }
  #Concept #AnimationPDV #Conceptiongraphique #Interim #Roadshow #ProductionposePLV #Affichagedynamique #Affichagemobile{
   /* margin-left: 20px; */
    margin-bottom: 0px;
    margin-right: 20px;
  }
  
  
    #SERVICES .portfolio-item img{
      width: calc((var(--fullwidth)*62)/100);
      height: 250px;
    }
  
  
    
    #owl-portfolio2 #owl-portfolio3 #owl-portfolio4 #owl-portfolio5 #owl-portfolio6 #owl-portfolio7 #owl-portfolio8 #owl-portfolio9{
      width: calc((var(--fullwidth)*62)/100);
      height: 250px;
     
    }
    
   
    #div1{
      width: 250px;
    }
    #div2{
      width: calc((var(--fullwidth)*55)/100);
    }
    .tab-content-services{
      display: inline-flex;
    }
    #Concept h4{
      font-size: 18px;
    }
  
    
  /*** Section fin SERVICES ***/
  
  
  /*** Section début REFERENCES ***/
  #portfolio {
    margin-top: 20px;
	margin-left: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
  
    
  }
  #portfolio .section-heading {
      
    margin-left:  20px;
  
  }

  #portfolio h4 {
    margin-right:10px;
  
  } 

  .carousel__slider {
    width: 2100px;
    margin-bottom: 0px;
  }

  .carousel1 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}
  /*** Section fin REFERENCES ***/
  
  /*** Section début contact ***/
    #contact {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
  #contact-us {
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 0px;
  }

  
  #icone_contact {
    text-align: center;
  }
  #icone_contact1 {
    text-align: center;
    margin-top: 20px;
  }
  
  #text_icone_contact1 {
    text-align: center; 
    margin-top: 5px;
    width:calc((var(--fullwidth)*76)/100);
    margin-left:calc((var(--fullwidth)*3)/100);
  }
  
  #text_icone_contact2 {
    text-align: center; 
    margin-top: 10px;
  }
  
  #text_icone_contact3 {
    text-align: center; 
    margin-top: 10px;
  }
  
  .footer-icons{
    text-align: center;
  }
  /*** Section fin Contact ***/
  
  
  /* :::::::::::::::: map début :::::::::::::::::::: */
  #maps {
    margin-top: 30px; 
    background: #f4f4f4 none repeat scroll 0 0; 
    height: 130px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
  }
  #maps iframe {
    border:0;
    height:100px;
	width: 100%;
	max-width: 100%;
  }
  /* :::::::::::::::: map fin :::::::::::::::::::: */
  
  
  /* :::::::::::::::: footer début :::::::::::::::::::: */
  footer{
    width:calc((var(--fullwidth)*100)/100);
  }
  .footer-area-bottom {
    
    padding: 20px 0px 20px 0px;
  }
  #footer_copyright{
    margin-left: 10px;
  }
  
  /* :::::::::::::::: footer fin :::::::::::::::::::: */
  #myBtn {
    left: calc((var(--fullwidth)*93)/100);
  }
  
  


    #contact-us .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #contact-us .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        float: none;
    }

    #contact {
        width: 100%;
        max-width: 100%;
    }

    #contact-us .row > [class*="col-"] {
        margin-left: 0;
        margin-right: 0;
    }



    .site-main,
    .site-header,
    .banner,
    #About,
    #SERVICES,
    #portfolio,
    #contact-us {
        max-width: 100%;
        box-sizing: border-box;
    }

    #contact-us,
    #contact-us .container,
    #contact-us .row {
        max-width: 100%;
        box-sizing: border-box;
    }

    #contact-us .row {
        margin-left: 0;
        margin-right: 0;
    }

    #contact input,
    #contact textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    .site-main {
        margin-left: auto;
        margin-right: auto;
    }

    .banner,
    .site-header {
        margin-left: auto;
        margin-right: auto;
    }


    .portfolio-section {
        max-width: 100%;
        overflow-x: hidden;
    }

    .carousel1 {
        max-width: 100%;
        overflow-x: hidden;
    }

    #contact-us .container {
        max-width: 100%;
        box-sizing: border-box;
    }

    #contact input,
    #contact textarea {
        max-width: 100%;
        box-sizing: border-box;
    }



    .site-main > .container,
    .banner > .container,
    #About > .container,
    #SERVICES > .container,
    #portfolio > .container,
    #contact-us > .container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .banner .row,
    #About .row,
    #SERVICES .row,
    #portfolio .row {
        margin-left: 0;
        margin-right: 0;
    }

    .banner .home-text {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }





    #cont1 {
        box-sizing: border-box;
        max-width: 100%;
    }

    .main-header > .container {
        margin-left: auto;
        margin-right: auto;
    }

    #menu-wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    .site-main .container,
    .site-header .container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #About,
    #SERVICES,
    #portfolio,
    #contact-us {
        margin-left: auto;
        margin-right: auto;
    }

 
    .section-heading {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

 
    #contact {
        margin-left: auto;
        margin-right: auto;
    }



    #cont1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #col1 {
        margin-left: 0;
        margin-right: 10px;
    }

    #col1:last-child {
        margin-right: 0;
    }



    .t1.text-center::after {
        animation: section-title-tablet 5s infinite linear;
        -webkit-animation: section-title-tablet 5s infinite linear;
    }





    #contact-us .section-heading {
        position: relative;
    }

    #contact-us .t1::before,
    #contact-us .t1::after {
        top: 55px;
    }

    #About #ro {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        margin: 0 auto;
    }


    #About #espace {
        display: none;
    }


    #About #colone1 {
        width: 42%;
        flex: 0 0 42%;
        margin: 0;
        padding: 0;
        text-align: right;
    }

 
    #About #colone11 {
        width: 42%;
        flex: 0 0 42%;
        margin: 0;
        padding: 0;
        text-align: left;
    }


    #About #colone1 #co1,
    #About #colone11 #co1 {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }


    #About #icone1 {
        margin-left: auto;
        margin-right: 0;
		width: 46px;
		height: 46px;
    }


    #About #icone2 {
        margin-left: 0;
        margin-right: auto;
		width: 46px;
		height: 46px;
    }


    #About #colone1 h4,
    #About #colone1 p {
        text-align: right;
    }


    #About #colone11 h4,
    #About #colone11 p {
        text-align: left;
    }
	
	/* add */
	
    .main-header {
        position: fixed;
        top: 30px;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
    }

    #menu-wrapper #main-first1 > li:last-child {
         margin-right: 0 !important;
    }
.main-header > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#menu-wrapper {
    width: calc(100% - clamp(40px, 8vw, 80px)) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
	#menu-wrapper #main-nav {
		float: right !important;
		width: auto !important;
	}


	#menu-wrapper #main-first1 {
		float: right !important;
		margin-right: 0 !important;
		white-space: nowrap;
	}
}