@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(http://db.onlinewebfonts.com/c/4c4c08af466e9ad071b6d69cf44093df?family=Saol+Display+Regular);
@font-face {font-family: "Saol Display Regular"; src: url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.eot"); src: url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.woff") format("woff"), url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/4c4c08af466e9ad071b6d69cf44093df.svg#Saol Display Regular") format("svg");}

/* -----------------------------*/
*{box-sizing: border-box;}
body{background-color: #000000; color: #fff;margin: 0;font-family: 'Roboto';}
p{font-family: 'MentorSansW01-Light', sans-serif;font-size: 17px;line-height: 1.4;color: #b4b4b4;}
h2{font-size: 32px;font-family: 'Saol Display Regular', cursive;text-transform: uppercase;font-weight: 400;letter-spacing: 0.5px;}
.clear{clear: both;}


#menu{display: none; position: fixed; /*top: 10px; */ width: 100%; min-height: 100%; margin: 0 auto; z-index: 100;background-color: rgba(255, 255, 255, 0.5);}
#reseau-menu img{height:40px;padding: 20px 10px 0 10px;}
nav{height: 100%;width: 60%;margin: auto;text-align: center;background-color: #162427;text-transform: uppercase;font-family: 'caviar dreams';font-size: 1.1em;position: absolute;ertical-align: bottom;background-image: url("../images/background-dm-agency-paris.jpg");background-size: contain;}
nav ul{font-family: 'Catamaran', sans-serif; vertical-align: middle;list-style: none; line-height: 35px; display: inline-block;margin-top: 100px; padding: 0;}
nav li{padding: 4px;}
nav li a{text-decoration: none; color: #fff; transition: all 0.5s ease; /*padding: 5px 50px 5px 50px;*/}
nav li a:hover{font-size: 1.3em; text-decoration:line-through;}
#croix{cursor: pointer;position: absolute;top: 3px;left:3px;padding: 10px 0 0 10px;}


#top-bar .nav-link{
        padding: 10px;
    }
#top-bar .nav{
        gap: 10px;
    }

#top-bar .container-fluid {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
}



#top-bar .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex
;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x)* -.5);
    margin-left: calc(var(--bs-gutter-x)* -.5);
}

#top-bar .col-3 {
    flex: 0 0 auto;
    width: 25%;
}

#top-bar .col-9 {
    flex: 0 0 auto;
    width: 75%;
}

#top-bar .justify-content-end {
    justify-content: flex-end !important;
}

/* BOUTON BURGER MENU*/ 
button{display: block; position: fixed; left: -2px; top: 0px; background: #1c1c1c;box-shadow: 1px 1px 10px -2px rgba(255, 255, 255, 0.1) inset; background-color: none; outline-style: none; cursor: pointer; border: none;z-index: 50;padding: 20px;}
button span{display: block; width: 20px; height: 2px; background-color:#fff; cursor: pointer;}
button span:nth-child(2){margin: 5px 0; -webkit-transition: margin 0.3s ease; -moz-transition: margin 0.3s ease; -o-transition: margin 0.3s ease; -ms-transition: margin 0.3s ease; transition: margin 0.3s ease; cursor: pointer;}
button:hover span:nth-child(2){margin: 7px 0;cursor: pointer;}



.content-full{display: flex;height: 100vh;flex-wrap: wrap;overflow-y: hidden;}

.container{flex-grow: 5;overflow: auto;display: flex;flex-basis: 75%;}

#sidebar {display: none; z-index: 2;/*background: #162427; */ background-image: url("../images/background-dm-agency-paris.jpg"); background-size: contain; transition: left .3s ease; overflow-y: auto;flex-basis: 100%;max-width: auto; flex-grow: 1;}
#sidebar.active {left: 0px; color: #fff;}
#sidebar .sidebar-header {padding: 10px 20px;}
#sidebar .info{text-align: center;margin-top: 30px;opacity: 0.4;}
#sidebar .info img{width: 30px;}
#sidebar .info a{color: #fff;display: inline-block;}
#sidebar .info p{margin: 0;font-size: 15px;}
.sidebar-header{display: none;}
.sidebar-header img{width: 90%;}

#header-nav{z-index: 2;}

.navbar-header .toggle-btn {padding-top: 10px; padding-left: 20px; color: #fff;}

/*** Menu Items***/
.sidebar-menu {margin: 20px 0 0; list-style: none; /* background: #162427;*/}
.sidebar-menu a {display: block; padding: 16px; color: #eeeeee; text-decoration: none; cursor: pointer;}
.sidebar-menu ul ul a{padding-left: 40px;}
.sidebar-menu a.active,
.sidebar-menu a:hover {color: white; background-color: #151515;}
.sidebar-menu ul ul{background-color: black;}
.sidebar-menu ul {padding: 0px; margin: 0px; list-style: none; text-align: center;}
.sidebar-menu li {list-style: none; padding-left: 0px; /*border-bottom: 1px solid #2c2c2c;*/}
.sidebar-menu li span{color: #9d9d9d;}
.overlay {/* full screen */ width: 100vw; height: 100vh; /* transparent black */ background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; display: none; /* middle layer, i.e. appears below the sidebar */ z-index: 1;
}

@media (min-width: 767px) {
 #sidebar {left: 0px; top: 0px;}
 .sidebar-header{display: block;}
 .sidebar-header .sidebar-close{display : none;}

}



/*TOP + VIDEO */ 
.container .top {position: relative;}
.container .top img{position: absolute;width: 30%;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.container .logo{background: linear-gradient(to top, rgba(0, 0, 0, 0.9),60%, transparent);text-align: center;position: absolute;bottom:0;width: 100%;height: 100px;padding-bottom: 60px;}
.container .logo img{width: 200px;margin-top: -220px;}
.container #myVideo {/*position: fixed;*/ right: 0; bottom: 0; max-width: 1920PX; max-height: 1080px; height: 100%; width: 100%;}
.container .video-hero--content img{width: 100px;position: absolute;top :20px; left :30px;}

/* BLOC DEFINITION */
.container .bloc-intro {background:linear-gradient(to bottom, black,transparent), url("../images/dm-agency-paris-evenementiel-4.jpg");background-position: center;background-repeat: no-repeat; background-size: cover; text-align: center;padding: 80px 40px;}
.container .bloc-intro h3{text-transform: uppercase;}
.container .bloc-intro p{margin: 0 auto;text-shadow: 0.5px 0.5px 4px black;}


/*SEPARATEUR */
.separateur{/*background-attachment: fixed;*/ background-position: center;background-size: auto 100%;}
.event {background-image: url("../images/dm-agency-paris-evenementiel-8.jpg");}
/*.com{background-image: url("../images/com-2.jpg");}*/
.contact {background:linear-gradient(to top, black,transparent), url("../images/evenementiel/dm-agency-paris-evenementiel-6.jpg");background-position: center;background-repeat: no-repeat; background-size: cover;}
.separateur h4{font-family: 'Saol display regular';font-size:24px;text-transform: uppercase; text-align: center;padding: 80px 0;margin: 0; letter-spacing: 2px;}
.contact h4 {text-align: left;margin-left: 20px;padding: 30px 0 ;}
.contact h4 span{font-size: 18px;display: block;font-family: 'MentorSansW01-Light', sans-serif;}

/* EVENEMENTIEL */
.container .bloc-event{background-color: #000000;display: flex;box-sizing:border-box;flex-wrap: wrap;padding: 70px 35px;align-items: center;}
.container .bloc-event .bloc-img, .bloc-event .bloc-texte{flex-basis: 100%;}
.container .bloc-event .bloc-img img{width: 100%;max-width: 750px}
.container .bloc-texte h3{text-transform: uppercase;}
.container .bloc-texte h2{color: #0ea5a8; font-size: 32px;}
.container .bloc-texte p {text-align: left;}
.container .bloc-texte a{background-color:#0ea5a8;padding: 10px;color: #fff;text-decoration: none; display: inline-block;margin:0 20px 20px 0;}
.container .bloc-texte a:hover{background-color: #0f6768;}


/* COMMUNICATION */ 
.container .bloc-com {display: flex;box-sizing:border-box;flex-wrap: wrap;padding:70px 50px;}
.container .bloc-com .bloc-img, .bloc-com .bloc-texte{flex-basis: 100%;}
.container .bloc-com .bloc-img img{width: 100%;}


/* CONTACT */
.bloc-contact{display:flex;box-sizing:border-box;flex-wrap: wrap; padding: 0 0 20px;}
.bloc-contact h2{font-size: 24px;}

.bloc-contact .separateur{flex-basis: 100%;background-attachment: fixed;background-position: center;background-size: auto 100%;padding-bottom: 60px;}
.bloc-contact .separateur{background:linear-gradient(to top, black,transparent), url("../images/evenementiel/dm-agency-paris-evenementiel-6.jpg");background-position: center;background-repeat: no-repeat; background-size: cover;}
.bloc-contact .separateur h4{font-family: 'Saol display regular';font-size:24px;text-transform: uppercase; text-align: left;padding: 30px 0 ;margin: 0;margin-left: 20px; letter-spacing: 2px;}
.bloc-contact .separateur h4 span{font-size: 18px;display: block;font-family: 'MentorSansW01-Light', sans-serif;}

.bloc-contact .bloc-coordonnees{flex-basis: 100%;text-align: center; margin-bottom: 20px;}
.bloc-contact .bloc-coordonnees .info{padding:15px 0 ;}
.bloc-contact .bloc-coordonnees .info a{color:#FFF;text-decoration: none;}
.bloc-contact .bloc-coordonnees .info a:hover{text-decoration: underline;}
.bloc-contact .bloc-coordonnees .info img{width: 25px;}
.bloc-contact .bloc-coordonnees .info h3{margin: 0;}
.bloc-contact .bloc-coordonnees .info p{margin: 0;font-size: 15px;}

.bloc-contact .bloc-formulaire{flex-basis: 100%;padding: 0 40px 0;}
.bloc-contact .bloc-formulaire form{text-align: center;}
.bloc-contact .bloc-formulaire h2{color: #0ea5a8;text-align: center;}
.bloc-contact .bloc-formulaire p{font-size: 15px;}
.bloc-contact .bloc-formulaire label{display: block;text-align: left;font-size: 14px;}
.bloc-contact .bloc-formulaire input{width: 100%;height: 30px;margin:5px 0 20px;border: none;background-color: #ededed;}
.bloc-contact .bloc-formulaire textarea{max-width: 100%; min-width: 100%;min-height: 100px;margin:5px 0 20px; border-radius: 5px;background-color: #ededed;}
.bloc-contact .bloc-formulaire #envoyer {background-color: #0ea5a8; color: #FFF;text-transform: uppercase;max-width: 100px;}
.bloc-contact .bloc-formulaire input:focus, .bloc-contact .bloc-formulaire textarea:focus{background-color: #cfedee;}

/* COPYRIGHT */
.copyright{border-top: solid 0.5px #3c3c3c;text-align: center;padding: 15px 0;}
.copyright p{font-size: 12px;line-height: 16px;margin: 0;}


/* SLIDE RETOURS CLIENTS */
.wrapper {width:auto height:100%; margin:0 40px 100px;overflow: none;}
.wrapper h2{color: #0ea5a8;font-size: 32px;}

/* slide module wrapper */
.testimonial {top:50%; /*transform:translateY(-50%);*/ position:relative;}
.testimonial .testimonial-ul {height:250px; list-style:none; margin:0 auto; width:50%; position:relative; /*border-top:5px solid #ffffff;*/ border-bottom:1px solid #ffffff; overflow:hidden;}

/* slides */
.testimonial-slide {width: 100%; height:100%; margin:0 auto; position:absolute; right: 0; left: 0; opacity: 0; z-index:1;}
.testimonial-slide.active {z-index: 2; opacity: 1; transition:opacity 1s ease-in-out; -webkit-backface-visibility:hidden;}

/******* text ***/
.testimonial p {color:#b4b4b4;font-family: 'MentorSansW01-Light', sans-serif; font-style: italic; text-align:center;font-size: 17px; /* font-size:2em;*/ padding:15px 0; top:50%; position:relative; transform:translateY(-50%);}

/******* quotes ***/
.testimonial:before {content:'\201C';color: #b4b4b4; display:block; font-size:150px; line-height:0; text-align:center; position: absolute; left:0; top:35px; right:0; margin:0 auto; z-index:2;}
.top-left {position:absolute; top:0; left:0; display:block; height:1px; width:44%; background:#ffffff; margin-right:10px;}
.top-right {position:absolute; top:0; right:0; display:block; height:1px; width:44%; background:#ffffff; margin-left:10px;}

/********* dots */
.dots-wrapper {margin-top:20px; width:100%; display:inline-block; list-style:none; text-align:center;}
.dots-wrapper li {position:relative; width:10px; height:10px; background:#7f8c8d; border-radius:100%; display:inline-block; margin-right:7px; cursor:pointer; overflow:hidden;}
.dots-wrapper li:last-child {margin-right:0;}
.dots-wrapper li:hover {background:#bdc3c7;}
.dots-wrapper li:after {content:''; position:absolute; width:100%; height:100%; border-radius:100%; background:#ffffff; top:0; left:0;
 /*opacity:0; transition: all .15s ease-in-out;*/ /*zoom in*/ /* transform:scale(0); transition:all .3s ease-in-out; */ /*slide up*/ transform:translateY(15px); transition:all .1s ease-out; -webkit-backface-visibility:hidden;}

.dots-wrapper li.active:after {background-color: #0ea5a8; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); /*opacity:1;*/ /*zoom in*/ /*transform:scale(1);*/ /*slide up*/ transform:translateY(0px);}
Retrouvez nous au salon Pollutec du 12 au 15 octobre 2021, Hall 5 – Stand C 98.
/******* transitions */
.js-reset-left{left:auto;}
.testimonial-slide.left{left:-100%; right:auto;}
.testimonial-slide.right{right:-100%; left: auto;}
.transition .testimonial-slide.left{left:0%;}
.transition .testimonial-slide.right{right:0%;}
.transition .testimonial-slide.shift-right{right: 100%; left:auto;}
.transition .testimonial-slide.shift-left{left: 100%; right:auto;}

.transition .testimonial-slide{transition-property: right, left, margin;}

/********* media queries ******/

/***** mobile */
@media only screen and (min-width: 320px) and (max-width: 480px) {
 .wrapper{margin: 0 20px 100px;}
 .testimonial .testimonial-ul {width:80%;height: 390px;} 
 .top-left {width:30%;}
 .top-right {width:30%;}
 
}

/***** tablet */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
 .testimonial p {font-size:17px;}
 .testimonial .testimonial-ul {width:70%;height: 300px;} 
 .top-left {width:40%;}
 .top-right {width:40%;}
 .testimonial:before {font-size:150px;}
}




/*RESPONSIVE DESK -- (MOBILE FIRST) */ 

@media screen and (min-width:500px) {
 .bloc-contact .bloc-formulaire{padding: 0 60px 0;}
}

@media screen and (min-width:750px) {
	/*.container .menu img{width: 90px;}
	.container .menu .menu-desk{display: flex;text-transform: uppercase;margin:auto;}
	.container #menu-burger{display: none;}*/

	.container .bloc-intro{padding:150px 0 100px;}
	.container .bloc-intro p{max-width: 600px;}
	.container .bloc-intro h3{margin-bottom:5px;}
	.container .bloc-intro h2{font-size: 50px;margin-top:0;}

 .separateur{background-size: 100% auto;background-attachment: fixed;}
	.separateur h4{font-size: 50px;padding: 100px 0;}

 .container .bloc-com {flex-wrap: nowrap;text-align: right;padding: 0;}
 .container .bloc-com .bloc-img, .container .bloc-com .bloc-texte {flex-basis: 50%;}
 .container .bloc-com .bloc-img {order: 2;text-align: right;}
 .container .bloc-com .bloc-texte {order: 1;}
 .container .bloc-com .bloc-texte p{text-align: right; max-width: unset;}

 .container .bloc-texte a{margin-right: 30px;display:inline;}


 .bloc-contact{flex-wrap: wrap;}
 .bloc-contact .separateur{flex-basis: 100%;}
 .bloc-contact .separateur h4 {padding: 50px 0 ;}
	.bloc-contact .bloc-coordonnees{flex-basis: 50%;margin-bottom: unset;}
 .bloc-contact .bloc-coordonnees .info{padding:20px 0 ;}
 .bloc-contact .bloc-coordonnees .info img{width: 40px;}
	.bloc-contact .bloc-formulaire{flex-basis: 50%;padding: 0 100px 0;}
 .bloc-contact .bloc-formulaire input{height: 40px;}


	.container .bloc-event, .container .bloc-com{padding: 100px 40px;}
 .container .bloc-img, .container .bloc-texte 	{display: inline-block;width: 47%;vertical-align: middle;}
 .container .bloc-img img{max-width: 500px;width: 100%;}
	/*.container .bloc-texte{margin-left:20px;}*/
	.container .bloc-texte p{max-width: 750px;}
	
	.container .logo img {width: 180px; margin-top: -130px;}

 .bloc-contact h2{font-size: 32px;}
 .bloc-contact .bloc-coordonnees .info p, .bloc-contact .bloc-formulaire p{font-size: 17px;}
	
}

@media screen and (min-width:1000px) {
 button{display: none;}
 .content-full{flex-wrap: nowrap;}
 .content-full .container{}
 .content-full #sidebar {flex-basis: 25%;max-width: 220px;display: block;min-width: 160px;overflow-y: hidden;}
}

@media screen and (min-width:1150px) {
 .container .bloc-event {flex-wrap: nowrap;padding: 100px 40px;}

 .container .bloc-event .bloc-img, .container .bloc-event .bloc-texte{flex-basis: 50%;}
 .container .bloc-texte {margin-left: 20px;}
 .container .bloc-event .bloc-img img{max-width: 500px;}
}




/*
@media screen and (max-width:850px) {
.container .competences .competence{max-width: 1000px;display: block;}
.container .competences .mobile{display: block;}
} */

/* MENU FIXE*/
/*.menu {background-color: #000;display: flex; padding: 20px 0; border-bottom:solid 0.5px #272727; box-shadow: inset -2px -1px 11px -1px rgba(255,255, 255, 1);}
.menu img{width: 120px;margin:auto;list-style-type: none}
.menu .menu-desk{display:none;}
.menu .menu-desk li{display: inline-block;margin-left: 35px;}
.menu .menu-desk li a {color: #a4a4a4;text-decoration: none;}
.menu .menu-desk li a:hover{color:#fff; -webkit-transition: 0.5s ease;text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5), 27px 31px 1px rgba(255,255,255,0);text-shadow: #9d9d9d 0px 0px 3px, #9d9d9d 0px 0px 8px, #9d9d9d 0px 0px 13px, #0ea5a8 0px 0px 18px, #0ea5a8 0px 0px 25px, #0ea5a8 0px 0px 35px;}
.menu .menu-desk .evenementiel, .menu .menu-desk .communication{position: relative;}
.menu .menu-desk .evenementiel span, .menu .menu-desk .communication span{position :absolute;display: none;font-size: 13px;font-weight: bold;margin-top: 10px;text-shadow:none;}
.menu .menu-desk .evenementiel:hover span, .menu .menu-desk .communication:hover span{display: block;}

#menu-burger {width: 50px; height: 50px; background: #000; border-radius: 50%; position: absolute; top: 16px; right: 5%; cursor: pointer; z-index: 200;}
#menu-burger .menu-icon {display: block; height: 2px; width: 18px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -9px; margin-top: -1px;}
#menu-burger .menu-icon:after {content: ''; display: block; height: 2px; width: 18px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -9px; margin-top: -5px; transition: 0.35s;}
#menu-burger .menu-icon:before {content: ' '; display: block; height: 2px; width: 18px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -9px; margin-top: 4px; transition: 0.35s;}
#menu-burger .menu-icon.open:before{transform: rotate(45deg); margin-top: -1px; background: #000;}
#menu-burger .menu-icon.open:after{transform: rotate(-45deg); margin-top: -1px; background: #000;}
#menu-burger.open {background: #fff;}
#menu-burger .menu-icon.open {background: #fff;}-
#overlay-menu {position: fixed; background: #000; height: 100%; width: 100%; opacity: 0.85; z-index: 100; right: -100%; transition: 0.35s;}
#overlay-menu.open {right: 0%;}
#overlay-menu nav {height: 60%; position: relative; top: 50%; left: 0; transform: translateY(-50%); font-size: 32px; text-align: center;}
#overlay-menu nav ul {display: inline-block; margin: auto; height: 100%;}
#overlay-menu nav ul li {position: relative; color: #fff; margin-bottom: 20px;}
#overlay-menu nav ul li a {color: #fff;}
#overlay-menu nav ul li a:after {content: ' '; display: block; position: absolute; top: 100%; left: 0; height: 3px; width: 0%; background: #fff; transition: 0.25s;}
#overlay-menu nav ul li a:hover:after {width: 100%;}
*/

/*@font-face {font-family: "MentorSansW01-Light"; src: url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.eot"); src: url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.eot?#iefix") format("embedded-opentype"), url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.woff2") format("woff2"), url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.woff") format("woff"), url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.ttf") format("truetype"), url("http://dob.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.svg#MentorSansW01-Light") format("svg");}*/
/*
 @import url(http://dob.onlinewebfonts.com/c/0089f2d610cc41ed31b88f38befea56b?family=MentorSansW01-Light);

@font-face {font-family: "MentorSansW01-Light";
 src: url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.eot"); 
 src: url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.eot?#iefix") format("embedded-opentype"), 
 url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.woff2") format("woff2"), 
 url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.woff") format("woff"), 
 url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.ttf") format("truetype"), 
 url("http://db.onlinewebfonts.com/t/0089f2d610cc41ed31b88f38befea56b.svg#MentorSansW01-Light") format("svg"); 
}*/