/*================================================================*/
/*================================================================*/
/*	Respoonsive	*/
/*================================================================*/
/*================================================================*/

.menu-toggle {
  position: absolute;
  padding: 0.8em;
  top: 1em;
  right: .5em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: #EBEBD3;
  height: 3px;
  width: 2em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 350ms;
  transition: all ease-in-out 350ms;
}

.hamburger::before {
  -webkit-transform: translateY(-7px);
          transform: translateY(-7px);
}

.hamburger::after {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.open .hamburger::before {
  display: none;
}

.open .hamburger::after {
  -webkit-transform: translateY(-1px) rotate(-90deg);
          transform: translateY(-1px) rotate(-90deg);
}
/*who we are*/
.mg3-b { display: none;}

@media (min-width: 781px) {

  .menu-toggle {
    display: none;
  }
}


@media (max-width: 780px) {
	.flexbox-container-full > div.story-left {
		padding: 0;
	}
	#footer .img-footer {
		position: inherit;
		top: -24px;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		display: inline;
	}
	.nav {
		margin: 0;
		padding: 0;
		position: relative;
		top: 55px;
	}
	.social-network {
		margin: 0 auto;
		position: absolute;
		left: 20px;
		color: white;
		z-index: 309;
		padding: 20px 0 0 0;
		font-size: 20px;
		width: 200px;
	}
	.logo-menu {
		width: 218px;
		display: none;
		position: absolute;
		top: 21px;
		cursor: pointer;
		z-index: 310;
	}
	.nav ul {
		display: flex;
		flex-direction: column;
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: none;
	}

	.nav ul.opening {
		display: block;
		height: 30px;
	}

	.nav #nav li {
	  border-bottom: 1px solid #cccccc;
	  width: 100%;
	  margin:0;
	}
	.nav li:last-child {
	  border-bottom: none;
	}
	.nav a {
	  color: #ffffff;
	  background: #101010;
	  display: block;
	  padding: 1.5em 4em 1.5em 3em;
	  text-transform: uppercase;
	  text-decoration: none;
	}

	.nav a:hover,
	.nav a:focus {
	  background: #111111;
	}

	.nav ul {
		display: flex;
		flex-direction: column;
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: none;
	}
	.nav ul.opening {
		display: block;
		height: 30px;
	}
	#nav {
		list-style: none;
		z-index: 302;
		left: inherit;
		position: inherit;
	}
	/*who we are*/
	.mg3 { display: none;}
	.mg3-b {
		width: 280px;
		display: block;
		margin: 0 auto;
	}
	.mg3-b a {
		width: 100%;
		display: inline-block;
		margin: 20px 0;
	}
	.mg3-b a img{
		float: left;
		width: 50px;
		margin-right: 20px;
	}
	.thealchimistsname {
		text-transform: uppercase;
		font-weight: bold;
		display: block;
		font-size: 16px;
		letter-spacing: 4px;
		margin-bottom: 0px;
	}
	.it-b {
	  display: flex;
	  justify-content: left;
	  height:110px;
	}

	#manufactures {
		margin-top: 150px;
	}
	#manufactures a {
		margin-top: 0;
		display: inline-block;
	}
	#contact {
		margin-top: 150px;
	}
	.spacer_height {
		height: 200px;
	}
	h1 {
		font-size: 150%;
		line-height: 150%;
		letter-spacing: 2px;
	}
	.no-mobile { visibility : hidden;}
	.i21 { float: right}
	.i41 { float: right}
	.bg1 {
		width: 100%;
		height: 1784px;
		background-image: url(../images/Bibliotheque-2C.jpg);
		background-repeat: no-repeat, no-repeat;
		background-color: transparent;
		background-position: center 0px;
		position: absolute;
		background-size:100% auto;
		top: 0;
		z-index: 10;
		padding: 0;
		margin: 0;
	}
	.bg12 {
		width: 100%;
		height: 1784px;
		background-image: url(../images/Bibliotheque-1C.jpg);
		background-repeat: no-repeat, no-repeat;
		background-color: transparent;
		background-position: center 0px;
		position: absolute;
		background-size:100% auto;
		top: 0;
		z-index: 10;
		padding: 0;
		margin: 0;
	}

}


@media (max-width: 540px) { 
	.mg3-b a img {
		float: left;
		text-align: center;
		display: inline-block;
	}
	.mg3-b a img.i21 { float: right}
	.mg3-b a img.i41 { float: right}
	.mg3-b a {

		width: 100%;
		display: inline-block;
		margin: 20px 0;

	}
	.it-b {
		display: flex;
		justify-content: center;
		height: auto;
	    margin-top: 15px;
	}
	.it-b.i2-b {
		justify-content: left;
		text-align: right;
		float: right;
		margin-right: 10px;
	}
	.it-b.i1-b {
		justify-content: left;
		text-align: right;
		float: right;
		margin-right: 10px;
	}
	.it-b.i4-b {
		justify-content: left;
		text-align: right;
		float: right;
		margin-right: 10px;
	}
}
@media (max-width: 440px) { 
	.logo img { width: 100%; max-width: 290px;}
}
@media (max-width: 320px) { 
	.logo img { width: 100%; max-width: 250px;}
}

@media (max-width: 720px) { 


}

@media (max-width: 960px) { 

	#intro {
		padding: 20px;
	}
	body .padding-top-40 {
		margin: 0 auto;
		margin-top: 40px;
	}
	#manufactures img {
		padding: 20px 0;
		max-width: 1000px;
		width: 100%;
	}
/*who we are*/
	.mg3 { display: none;}
	.mg3-b {
		width: 280px;
		display: block;
		margin: 0 auto;
	}
	.mg3-b a {
		width: 100%;
		display: inline-block;
		margin: 20px 0;
	}
	.mg3-b a img{
		float: left;
		width: 50px;
		margin-right: 20px;
	}
	.thealchimistsname {
		text-transform: uppercase;
		font-weight: bold;
		display: block;
		font-size: 14px;
		letter-spacing: 4px;
		margin-bottom: 0px;
	}
	.it-b {
	  display: flex;
	  justify-content: left;
	  height:110px;
	    margin-top: 15px;
	}
	.mg3-b a img {
		float: right;
		text-align: center;
		display: inline-block;
	}
	.mg3-b a img.i21 { float: left}
	.mg3-b a img.i11 { float: left}
	.mg3-b a img.i41 { float: right}
	.mg3-b a {

		width: 100%;
		display: inline-block;
		margin: 20px 0;

	}
	.flexbox-container-full > div.story-left,
	.metitle h1,
	.concept,
	#manufactures img,
	#manufactures a  	{
		padding: 20px 0;
		max-width: 480px;
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	.flexbox-container-full, .flexbox-container {
		/* display: -ms-flex; */
		/* display: -webkit-flex; */
		
		display: flex;
		flex-direction: column;
		text-shadow: 5px 5px 4px rgb(1, 1, 1);
		justify-content: center;
	}
        .concept1.flexbox-container-full .story-left{ order: 1; }
        .concept1.flexbox-container-full .story-right { order:2; }
        .concept2.flexbox-container-full .story-left{ order: 2; }
        .concept2.flexbox-container-full .story-right { order:1; }
        .flexbox-container .story-left{ order: 1; }
        .flexbox-container .story-right { order: 2; }
	.flexbox-container-full > div.story-right {
		padding: 20px 0;
		max-width: 480px;
		width: 100%;
		margin: 0 auto;
	}
	
		
	.ml {
		position: fixed;
		top: 50px;
		right: 10px;
		z-index: 390;
		padding: 0 5px 2px 5px;
	}
	.ml a {
		color: #7b7b7b;
	}

	

	#whoweare {margin-top: 290px;}
	
	#txt_W3 .flexbox-container-full > div.story-right {
		padding: 20px 0; 
	}
	.concept .content-stickers img{
		width: 120px;
		position: inherit;
		left: inherit;
		bottom: inherit;
	}

}
@media (max-width: 480px) { 
	/*================================================================*/
	/*================================================================*/
	/*	Video et cadre 	*/
	/*================================================================*/
	/*================================================================*/
	.p-c-video {
		position: relative;
	}
	.c-video {
		position: absolute;
		top: 0;
		height: auto;
	}
	.c-cadre {
		position: absolute;top:0;
	}
	#txt_W3 .flexbox-container-full > div.story-left {
		padding: 10px 0 0 0;
	}
	
	.concept .content-stickers img{
		width: 120px;
		position: inherit;
		left: inherit;
		bottom: inherit;
	}
}
@media (max-width: 1140px) { 


}