@charset "utf-8";


* { margin:0; padding:0; }


h1 { font-family: 'Playfair Display', serif; font-weight : 700; }
h2 { font-family: 'Montserrat', sans-serif; font-weight : 400; }
h3 { font-family: 'Montserrat', sans-serif; font-weight : 600; }
p { font-family: 'Montserrat', sans-serif; font-weight: 300; line-height: 1.25em; }
p2 { font-family: 'Montserrat', sans-serif; font-weight : 800; font-size: 12px; line-height: 4em; }
p3 { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 5em;  line-height: .75em; }
p4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px;  line-height: 1.5em; }
p5 { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 40px;  line-height: 1.5em; }


    font-family: 'Montserrat', sans-serif;

    font-family: 'Playfair Display', serif;

.SPACE-EXTRA-MIN {
	margin-top: 100px;
}

.SPACE-MIN {
	margin-top: 100px;
}

.SPACE-MIN-Blue {
    background-color: #e2f0fb;
	padding-top: 100px;
}

.SPACE-MIN-Black {
    background-color: #070501;
	padding-top: 100px;
}

.SPACE-MED {
	margin-top: 200px;
}

.SPACE-LARGE {
	margin-top: 300px;
}


.header_sitemap {
    display: flex;
    flex-direction: column;
	margin-top: 3vw;
    margin-left: 2vw;
	text-decoration: none;
    font-size: .75em;
    
}

.line-fine-3 {
    
    display: flex;
    margin-top: 1vw;
    
}



/*----------------------------------------------LOGO----------------------------------------------*/


.Logo {
	
	position: absolute;
	top: 3vw;
	left: 5vw;


}

.Top-Logo-33b {
    display: flex;
}

.Logo-33b {
	
	background-image : url("images/33b-Logo.png");
	background-repeat : no-repeat;
	background-size: contain;

	width : 4vw;
	height : 4vw;

}

a.Logo-33b:hover {
    background-image: url(images/33b-Logo-Grey.png)
}




/*----------------------------------------------LOGO SITEMAP----------------------------------------------*/


.Logo-sitemap {
	
	/*position: absolute;
	top: 3vw;
	left: 2vw;*/
    
    margin-top: 3vw;
    margin-left: 2vw;


}

.Top-Logo-33b-sitemap {
    display: flex;
}

.Logo-33b-sitemap {
	
	background-image : url("images/33b-Logo.png");
	background-repeat : no-repeat;
	background-size: contain;

	width : 4vw;
	height : 4vw;

}

a.Logo-33b-sitemap:hover {
    background-image: url(images/33b-Logo-Grey.png)
}






/*----------------------------------------------MENU----------------------------------------------*/




.Menu {
	
	position: absolute;
	
	/*width: 100%;*/
	top: .75vw;
	left: 10vw;
	
}



ul {
    
	list-style-type: none;
    display: flex;
    flex-direction: row;
    padding: 3vw;
 
}


li {
	/*float: left;*/
   
    padding: .6vw;
    

}

li a {
	
	color: #000000;
	font-family : Montserrat;
	font-weight: 400 ;
	font-size: .8vw;
	/*margin: 0px 10px;
	padding: 0px;*/
	text-decoration: none;
	text-align: center;
}

li a:hover {
	color: #000000;
	/*border-bottom: 1px solid #000000;*/
	font-weight: 800;
}

.active {
	color: #000000;
	border-bottom: 1px solid #000000;
	font-weight: 800;
}




/*----------------------------------------------MENU ICON Contact----------------------------------------------*/


.menu_icon {
	position: absolute;
	
	/*width: 100%;*/
	top: 47vw;
	left: 15vw;
}


.Icon {
	
	display: flex;
	flex-direction: row;
    padding: 0px;
	
}

.mail {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b_Icon_Contact_Mail-B.png);
	
	padding: 0px 10px;
	width: 25px;
	height: 25px;
	
}

a.mail:hover {
    background-image: url(images/33b_Icon_Contact_Mail-G.png);
}

.phone {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b_Icon_Contact_Phone-B.png);
	
	padding: 0px 10px;
	width: 25px;
	height: 25px;
	
}

a.phone:hover {
    background-image: url(images/33b_Icon_Contact_Phone-G.png);
}




/*----------------------------------------------PLACED ICON----------------------------------------------*/






.Packaging-icon {
    
    position: absolute;
    width: 30%;
    height: 130px;
    background-image: url(images/Picto-Packaging.png);
    background-repeat: no-repeat;
    background-size: contain;
    /*border: 1px solid red;*/
    top: 42vw;
    left: 4vw;
    
}






/*----------------------------------------------MAIN----------------------------------------------*/


.Main {
	
	position: relative;
	/*max-width: 2400px;*/
	margin-left: auto;
	margin-right: auto;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

}





.Main-marge-ext {
    
    /*background-color: #4F4F4F;*/
    /*background-color: #e9ebef;*/
    margin: 0vw 9vw;
    
}


.Main-marge-med {
	
	position: relative;
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
    padding: 0vw 0vw;
    
     display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

}


.Main-marge-small {
	
	position: relative;
	/*background-color: #4F4F4F;*/
    background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	margin: 0vw 15vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

    
}


.Main-marge-photo {
	
	position: relative;
	/*background-color: #4F4F4F;*/
    background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

    
}



.Main-marge-small-black {
	
	position: relative;
	background-color: #1b1718;
    /*background-color: #fff;*/
	margin-left: auto;
	margin-right: auto;
	padding: 0vw 14vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

}



.Main-marge-flexible {
	
	position: relative;
	/*background-color: #4F4F4F;*/
    background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	margin: 0vw 0vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

    
}






.Main-image-marge-centered-black {
	background-color: #fff;
	margin: 7vw 0vw 7vw 0vw;
}




.Main-marge-small-white {
	
	position: relative;
	background-color: #fff;
    /*background-color: #fff;*/
	margin-left: auto;
	margin-right: auto;
	padding: 0vw 14vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

}

.Main-marge-small-grey {
	
	position: relative;
	background-color: #5f5f5f;
    /*background-color: #fff;*/
	margin-left: auto;
	margin-right: auto;
	padding: 0vw 14vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

}


.Main-image-marge-centered-white {
	background-color: #fff;
	margin: 7vw 0vw 7vw 0vw;
}


.Main-image-marge-centered-grey {
	background-color: #5f5f5f;
	margin: 2vw 0vw 2vw 0vw;
}





.Main-marge-large {
	
	position: relative;
	/*background-color: #4F4F4F;*/
    background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	margin: 0vw 20vw 0vw 0vw;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-justify-content: center;
	/* Safari */
	justify-content: center;

    
}


.Main-image-marge-top {
	
	margin: 7vw 0vw 0vw 0vw;
}

.Main-image-marge-top-photo {
	padding: 0px;
	margin: 0vw 0vw 0vw 0vw;
}

/*.Main-image-marge-flexible {
	
	margin: 7vw 0vw 0vw 0vw;
}*/

.Main-image-marge-bottom {
	
	margin: 0vw 0vw 5vw 0vw;
}

.Main-image-marge-bottom-photo {
	padding: 20px;
	margin: 0vw 0vw 0vw 0vw;
}





.Main-image {
	
	padding-top: 0px;
}

img {
	
	width: 100%;
	height: auto;
	display: flex;
}




/*----------------------------------------------MAIN TEXT----------------------------------------------*/



.Main-texte-top-left-small {
	
	position: absolute;
	/*background-color: #fff;*/
	padding: 50px;
	width: 30%;
	top: 15%;
	left: 5%;

}




.Main-texte-top-left-small-centered {
	
	position: absolute;
	/*background-color: #fff;*/
    
	padding: 50px;
	width: 30%;
	top: 15%;
	left: 15%;

}

.Main-texte-top-left-small-centered-blanc {
	
	position: absolute;
	/*background-color: #fff;*/
    
	padding: 50px;
	width: 30%;
	top: 15%;
	left: 15%;

}


.Main-titre-small {
	
	color: #000000;
	font-size: 2vw;
	line-height: 2em;

}

.Main-titre-small-blanc {
	
	color: #fff;
	font-size: 2vw;
	line-height: 2em;

}



.Main-texte-top-left {
	
	position: absolute;
	background-color: #fff;
	padding: 50px;
	width: 40%;
	top: 15%;
	left: 8%;

}





.Main-titre {
	
	color: #000000;
	font-size: 3vw;
	line-height: 2em;

}


.Main-sous-titre {
	
	color: #000000;
	font-size: .60vw;
	line-height: 3em;
	width: 70%;
	margin-top: 5em;
	padding-left: 5vw;

}

.Main-sous-titre-blanc {
	
	color: #fff;
	font-size: .60vw;
	line-height: 3em;
	width: 70%;
	margin-top: 5em;
	padding-left: 5vw;

}


.Main-Vignette {
	
	color: #000000;
	font-size: .75vw;
	line-height: 2em;
	padding-left: 5vw;

}




.Main-texte-center {
	
	/*position: absolute;*/
	/*background-color: #4F4F4F;*/
    
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
	padding: 10vw 8vw 0vw 8vw;
    
	width: 60%;
    
}


.Main-titre-center {
	
	color: #000000;
	font-size: 2.25vw;
	line-height: 2em;

}


.Main-sous-titre-center {
	
	color: #000000;
    margin-left: 2vw;
    padding-top: 10vw;
	font-size: .6vw;
	line-height: 3em;
	

}



/*----------------------------------------------MAIN TEXT DESCRIPTIF----------------------------------------------*/



.Main-texte-descriptif-right-white {
	
	position: absolute;
	/*background-color: #fff;*/
	padding: 50px;
	width: 25%;
	top: 25%;
    left: 63%;
    /*transform: translate(-50%, -50%);*/
    
}

.Main-description-right-white {
	
	color: #c0c3c8;
	font-size: .55vw;
	line-height: 3em;
	width: 100%;
	text-align: left;

}



.Main-texte-descriptif-centrered {
	
	position: absolute;
	background-color: #fff;
    padding: 50px;
	width: 28%;
	top: 62%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    
    

}

.Main-description {
	
    
	color: #000000;
    /*border-style: solid ;
    border-color: #989898;
    border-width: 1px;
    padding: 20px;*/
    
	font-size: 1vw;
	line-height: 2em;
	width: 100%;
	text-align: left;
    
}




/*----------------------------------------------ICON Cover----------------------------------------------*/


.menu_icon-cover {
    
	position: absolute;
	
	width: 100%;
	top: 3vw;
	left: 50vw;
}


.icon-cover {
	
	display: flex;
	flex-direction: row;
    padding: 0px;
	
}



.branding-icon {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b-Branding-icon-cover.png);
	
	padding: 0px 10px;
	width: 8vw;
	height: 8vw;
	
}

a.branding-icon:hover {
    background-image: url(images/33b-Branding-icon-cover-grey.png);
}




.packaging-icon {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b-Packaging-icon-cover.png);
	
	padding: 0px 10px;
	width: 8vw;
	height: 8vw;
	
}

a.packaging-icon:hover {
    background-image: url(images/33b-Packaging-icon-cover-grey.png);
}




.design-icon {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b-Design-icon-cover.png);
	
	padding: 0px 10px;
	width: 8vw;
	height: 8vw;
	
}

a.design-icon:hover {
    background-image: url(images/33b-Design-icon-cover-grey.png);
}




.photo-icon {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b-Photo-icon-cover.png);
	
	padding: 0px 10px;
	width: 8vw;
	height: 8vw;
	
}

a.photo-icon:hover {
    background-image: url(images/33b-Photo-icon-cover-grey.png);
}






/*----------------------------------------------COVER MENU Vertical----------------------------------------------*/




.vertical-menu-cover {
    
    position: absolute;
    
    color: #000000;
	font-family : Playfair Display;
    font-weight : bold;
	font-size: 3.5vw;
	
	width: 200px; /* Set a width if you like */
	top: 20vw;
	left: 64vw;
    
}

.vertical-menu-cover a {
    /*background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 0px 0px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
    
}

.vertical-menu-cover a:hover {
    /*background-color: #ccc; */
    font-weight: 800;
}

.vertical-menu-cover a.active {
    /*background-color: #4CAF50; */
    font-weight: 800;
}




/*----------------------------------------------MAIN TITRE Cover----------------------------------------------*/


.Main-texte-top-left-cover {
	
	position: absolute;
	/*background-color: #fff;*/
	padding: 0px;
	width: 30%;
	top: 10%;
	left: 15%;

}


.Main-titre-cover {
	
	color: #000000;
	font-size: 3vw;
	line-height: 2em;

}






/*----------------------------------------------PAGE DESCRIPTIF Cover----------------------------------------------*/



.Page-descriptif-cover {
	
	position: absolute;
	/*background-color: #fff;*/
	
    
    color: #000000;
	font-size: 2vw;
	line-height: 3em;
	width: 45%;
	text-align: left;
    
	top: 0vw;
    left: 50vw;
    
    
}







/*----------------------------------------------LOGO Footer----------------------------------------------*/


.Logo-footer {
	
	position: absolute;
    
	top: 12vw;
	left: 64vw;


}

.Logo-33b-footer {
    
    display: flex;
}


.Logo-33b-Complet {
	
	background-image : url("images/33b-Logo-Footer.png");
	background-repeat : no-repeat;
	background-size: contain;

	width : 14vw;
	height : 14vw;

}

a.Logo-33b-Complet:hover {
    background-image: url(images/33b-Logo-Footer-Grey.png);
}






/*----------------------------------------------MENU Vertical----------------------------------------------*/




.vertical-menu {
    
    position: absolute;
    
    color: #000000;
	font-family : Playfair Display;
    font-weight : bold;
	font-size: 2.5vw;
	
	width: 200px; /* Set a width if you like */
	top: 28vw;
	left: 64vw;
    
}

.vertical-menu a {
    /*background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 0px 0px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
    
}

.vertical-menu a:hover {
    /*background-color: #ccc; */
    font-weight: 800;
}

.vertical-menu a.active {
    /*background-color: #4CAF50; */
    font-weight: 800;
}






/*----------------------------------------------MENU ICON Footer----------------------------------------------*/


.menu_icon-footer {
    
	position: absolute;
	
	width: 100%;
	top: 45vw;
	left: 64vw;
}


.Icon-footer {
	
	display: flex;
	flex-direction: row;
    padding: 0px;
	
}

.mail-footer {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b_Icon_Contact_Mail-B.png);
	
	padding: 0px 10px;
	width: 2vw;
	height: 2vw;
	
}

a.mail-footer:hover {
    background-image: url(images/33b_Icon_Contact_Mail-G.png);
}

.phone-footer {
    
    background: no-repeat;
    background-size: contain;
    background-image: url(images/33b_Icon_Contact_Phone-B.png);
	
	padding: 0px 10px;
	width: 2vw;
	height: 2vw;
	
}

a.phone-footer:hover {
    background-image: url(images/33b_Icon_Contact_Phone-G.png);
}





/*----------------------------------------------PAGE DESCRIPTIF Footer----------------------------------------------*/



.Page-descriptif-footer {
	
	position: absolute;
	/*background-color: #fff;*/
	
    
    color: #000000;
	font-size: .9vw;
	line-height: 3em;
	width: 20%;
	text-align: left;
    
	top: 20vw;
    left: 64vw;
    
    
}


.copyright {
    
    position: absolute;
	/*background-color: #fff;*/
	
    
    color: #000000;
	font-size: .70vw;
	line-height: 3em;
	width: 30%;
	text-align: left;
    
	top: 53vw;
    left: 64vw;
    
}






html,body { overflow-x: hidden; }




@media screen and (max-width: 1100px){
    
    /*.Main-texte-descriptif-right-white { padding: 50px; width: 60%; top: 70%; left: 50%; transform: translate(-50%, -50%); }*/
    .Main-texte-descriptif-right-white { padding: 30px; width: 25%; top: 10%; left: 63%; }
    
    /*.Main-description-right-white { font-size: 1.75vw; line-height: 3em; width: 100%; text-align: left; }*/
    .Main-description-right-white { font-size: 1vw; line-height: 2.5em; width: 100%; text-align: left; }
    
    .Main-texte-top-left-small { padding: 50px; width: 30%; top: 8%; left: 5%; }
    .Main-sous-titre { font-size: 1vw; line-height: 2.25em; width: 80%; margin-top: 3em; padding-left: 5vw; }
    .menu_icon { top: 51vw; left: 15vw; }

    
    .SPACE-MIN { margin-top: 70px; }
    .SPACE-MIN-Blue { padding-top: 70px; }
    .SPACE-MIN-Black { padding-top: 70px; }
    .SPACE-MED { margin-top: 140px; }
    .SPACE-LARGE { margin-top: 210px; }
        
}

/*@media screen and (max-width: 768px){ html,body{ width:100%; overflow-x: hidden; }*/


@media screen and (max-width: 800px){ 
    
    .Main-texte-top-left { padding: 50px; width: 45%; top: 15%; left: 4%; }
    .Main-sous-titre { font-size: 1vw; line-height: 2.25em; width: 80%; margin-top: 3em; padding-left: 5vw; }

}



@media screen and (max-width: 480px) {

    .Menu { top: 2vw; left: 20vw; }
    li { padding: 2.5vw; }
    li a { font-size: 2vw; }
    
    .menu_icon { top: 115vw; left: 18vw; }
    .Packaging-icon { height: 100px; top: 105vw; left: 66vw; }
    
	img { min-width: 100%; }
	.Main { flex-direction: column; }
	.Main-marge { flex-direction: column; padding: 0vw 20vw; }
    .Main-marge-med { flex-direction: column; padding: 0vw 10vw; }
    .Main-marge-small { flex-direction: column; margin: 5vw 15vw; }
    .Main-marge-flexible { flex-direction: column; margin: 0vw 15vw; }
    .Main-marge-small-black { flex-direction: column; padding: 15vw 15vw; }
    .Main-marge-small-white { flex-direction: column; padding: 15vw 15vw; }
    .Main-marge-small-grey { flex-direction: column; padding: 0vw 15vw; }
    .Main-image-marge-centered-black { margin: 2vw 0vw 2vw 0vw; }
    .Main-image-marge-centered-grey { margin: 0vw 0vw 0vw 0vw; }

    .Main-image-marge-top-photo { padding: 0px; }
    .Main-image-marge-bottom-photo { padding: 0px; }
    .Main-marge-ext {margin: 0vw 9vw; }
    .Main-marge-med { padding: 0vw 0vw; }
    
	.Main-texte-top-left-small-centered { padding: 50px; width: 70%; top: 0%; left: 5%; }
    .Main-texte-top-left-small-centered-blanc { padding: 50px; width: 70%; top: -10%; left: 5%; }
    .Main-texte-top-left-small { padding: 30px; width: 70%; top: 0%; left: 12%; }
    .Main-texte-top-left { padding: 30px; width: 70%; top: 10%; left: 7%; }
    
    .Main-texte-center { flex-direction: column; margin-bottom: 5vw; padding: 10vw 8vw 0vw 8vw;; width: 75%; }
    .Main-titre-center { font-size: 4vw; margin-top: 10vw; }
    .Main-sous-titre-center { margin-left: 5vw; padding-top: 8vw; font-size: 1.75vw; }

    .Main-texte-top-left-cover { padding: 0px; width: 70%; top: -25%; left: 12%; }
    .Main-titre-cover { font-size: 7vw; }
    
	.Main-titre-small { font-size: 5vw; }
    .Main-titre-small-blanc { font-size: 5vw; }
    .Main-titre { font-size: 6vw; }
    
	.Main-sous-titre { padding-left: 5vw; font-size: 2vw; width: 80%; margin-top: 3em; }
    .Main-sous-titre-blanc { padding-left: 5vw; font-size: 2vw; width: 80%; margin-top: 3em; }
    
    .Main-texte-descriptif-centrered { padding: 50px; width: 60%; top: 75%; left: 50%; transform: translate(-50%, -50%); }
    .Main-description { font-size: 3.25vw; width: 100%; text-align: left; }
    
    .Main-texte-descriptif-right-white { padding: 50px; width: 60%; top: 70%; left: 50%; transform: translate(-50%, -50%); }
    .Main-description-right-white { color: #c0c3c8; font-size: 2.75vw; line-height: 2em; width: 100%; text-align: left; }
	
	
	.Logo { top: 5vw; left: 10vw; }

	.Logo-33b { width : 45px; height : 45px; }
    
	
	.SPACE-EXTRA-MIN { margin-top: 100px; }
    .SPACE-MIN { margin-top: 50px; }
    .SPACE-MIN-Blue { padding-top: 50px; }
    .SPACE-MIN-Black { padding-top: 50px; }
    .SPACE-MED { margin-top: 100px; }
    .SPACE-LARGE { margin-top: 150px; }
    
    
    .Logo-footer { top: 110vw; left: 27vw; }
    .Logo-33b-Complet { width : 35vw; height : 35vw; }
    
    .vertical-menu { font-size: 7vw; top: 150vw; left: 27vw; }
    .vertical-menu-cover { font-size: 10vw; top: 135vw; left: 27vw; }
    
    .menu_icon-cover { top: 3vw; left: 10vw; }
    .branding-icon { padding: 0px 5px; width: 18vw; height: 18vw; }
    .packaging-icon { padding: 0px 5px; width: 18vw; height: 18vw; }
    .design-icon { padding: 0px 5px; width: 18vw; height: 18vw; }
    .photo-icon { padding: 0px 5px; width: 18vw; height: 18vw; }
    
    .menu_icon-footer { top: 200vw; left: 27vw; }
    .mail-footer { padding: 0px 15px; width: 9vw; height: 9vw; }
    .phone-footer { padding: 0px 15px; width: 9vw; height: 9vw; }

    .Page-descriptif-footer { font-size: 3vw; width: 60%; top: 130vw; left: 27vw; }
    .Page-descriptif-cover { font-size: 5vw; width: 70%; top: -20vw; left: 17vw; }
    
    .copyright { font-size: 2vw; width: 50%; top: 215vw; left: 27vw; }


}