@font-face {
    font-family: 'stolzl_displaybold';
    src: url("../font/stolzl_display_bold-webfont.woff2") format('woff2'),
         url("../font/stolzl_display_bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "stolzl_displayregular";
    src: url("../font/stolzl_display-webfont.woff2") format('woff2'),
         url("../font/stolzl_display-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
	scroll-behavior: smooth;
}


body{min-height:0vh; overflow-x:hidden; !important}
.navbar-default{
  transition:500ms ease;
  background:transparent;
}
.navbar-default.scrolled{
  background: rgba(255, 255, 255, 0.95);
	border: solid 10px rgba(220, 220, 220, 1);
}

.container-fluid{
	margin :0;
	padding: 0;
}

button img{
	margin-bottom: 5px;
}

.button {
	padding-bottom: 9px;
	padding-top: 8px;
}


/* -----------------------------------NAVIGATION -------------*/

nav img{
	border: none;
}

.navbar-brand{
	padding-left:35px;
	padding-top:10px;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
	margin-bottom: 16px;
	font-size: 20px;
	padding-left:35px;
	
}

.navbar-light .navbar-toggler
{
	background-color: none;
	border: solid 3px black;
	border-radius: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 4px;
	margin-right:15px;
	margin-top:11px;
}

.navbar-light .navbar-toggler-icon
{
	background-image: url("../images/nav/hamburger.svg");
	padding-right:20px;
}

.icone
{
	margin: -22px 10px 0px 0px;
}

.header{
	margin-left: -20px;
}


nav{
	 font-family: "stolzl_displayregular";
	color: black;
	font-size: 18px;
	z-index: 1;

}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: solid 3px black;
  outline: none;
  background-color: rgba(255, 255, 255, 0.5);
  color: white;
  cursor: pointer;
  padding: 20px;
}

#myBtn img {
	
	margin: 5px;
	
}

#myBtn:hover {
  background-color: white;
}

/* -----------------------------------TEXTE -------------*/

h1, h3 {
 font-family: 'stolzl_displaybold';
	color:black;
}

h2, h4, p{
	font-family: "stolzl_displayregular";
	color:black;
}

/* -----------------------------------HOMEPAGE -------------*/

.section_couleurjour{
	background-color:#A6C0CE;
	 border: 20px solid #87AABE;
	padding: 0px 30px 0px 30px;
}

.motsdujour{
	margin-top: 150px;
	
}

.video_couleurdujour{
	margin-top: 50px;
 }

.section_tendances{
	background-color:#EDDEC6;
	border: 20px solid #CCB898;
	padding: 0px 30px 0px 30px;
}

.rapport
{
	margin-bottom: 40px;
}

.img_ambiance1{
	margin-top:20px;
}

.section_offrespeciale{
	background-color:#FFEB00;
	 border: 20px solid #EDDD20;
	padding: 0px 30px 0px 30px;
}

.image_offrespeciale{
	 border: 20px solid #EDDD20;
}

.section_produitsdumois{
	background-color: #FFB230;
	border: 20px solid #D99828;
	padding: 0px 30px 0px 30px;
}

.section_produitsdumois img {
	border: 20px solid #D99828;
	
}

.section_adobecloud{
	background-color: #F00000;
	border: 20px solid #D91919;
	padding: 0px 30px 0px 30px;
}


/* -----------------------------------SYSTEME COULEUR -------------*/

.systeme_pantone{
	background-color: #E36266;
	border: 20px solid #B45154;
	padding: 50px 30px 0px 30px;
}

.section_emballageetconception{
	background-color: #E36266;
	border: 7px solid black;
	padding: 0px 30px 0px 30px;
}

.bouton_GRAPHIQUE{
	background-color: #6A9B7D;
	border: 20px solid #597463;
	padding: 0px 30px 175px 30px;
}

.bouton_MODE{
	background-color: #EDDEC6;
	border: 20px solid #D0B891;
	padding: 0px 30px 175px 30px;
}

.bouton_PRODUIT{
	background-color: #FFB230;
	border: 20px solid #D99828;
	padding: 0px 30px 175px 30px;
}

.bouton_SYSTEME{
	background-color: #E36266;
	border: 20px solid #B45154;
	padding: 0px 30px 175px 30px;
}

/* -----------------------------------COULEURS PHARES  -------------*/
.couleur_annee{
	background-color: #8CBE7B;
	border: 20px solid #6EA35C;
	padding: 50px 30px 0px 30px;
}

.section_3col img
{
	position: relative;
}

.section_3col h4
{
	position: absolute;
	top: 10%;
	left: 10%;
}

.section_3col p
{
	position: absolute;
	top: 25%;
	left: 10%;
}

/* -----------------------------------SYSTEME GRAPHIQUE -------------*/

.systeme_graphique{
	background-color: #6A9B7D;
	border: 20px solid #597463;
	padding: 50px 30px 0px 30px;
}

.systeme_graphique_image {
	border: 20px solid #597463;
}

.back_produit{
	background-color: #FFB230;
	border: 20px solid #D99828;
	padding: 0px 30px 0px 30px;
}

.produit_image {
	border: 20px solid #D99828;
}

/* -----------------------------------SYSTEME MODE -------------*/

.systeme_mode{
	background-color: #EDDEC6;
	border: 20px solid #D0B891;
	padding: 50px 30px 0px 30px;
}

.mode_image{
	border: 20px solid #D0B891;
}


/* -----------------------------------SYSTEME PRODUIT -------------*/
.systeme_produit{
	background-color: #FFB230;
	border: 20px solid #D99828;
	padding: 50px 30px 0px 30px;
}

/* -----------------------------------SECTION CONTACT -------------*/

.section_contact{
	background-color: #A4B6ED;
	border: 20px solid #7288CC;
	padding: 50px 30px 0px 30px;
}


h1{
	font-size: 2.50rem;
	margin-top: 5px;
}

h2{
	font-size: 25px;

}

h3{
	font-size: 35px;
	margin-top:30px;
	margin-bottom:20px;
}

.h3{
	font-family: 'stolzl_displaybold';
	font-size:35px;
	margin-top: 30px;
	margin-bottom:20px;
}

h4{
	font-size: 25px;
	margin-top: 10px;
	margin-bottom:20px;
}

p{
	font-size: 18px;
	margin-bottom: 30px;
}


.bouton_hp{
	border: solid 3px black;
	border-radius: 0px;
	font-family: "stolzl_displayregular";
	color:black;
	font-size: 20px;
	margin-bottom: 20px;
	transition: all .5s ease;
}

.bouton_hp:hover{
	background-color: white;
	color:black;
	border-color: black;
	transition: all .5s ease;
}


/* -----------------------------------ACHATS -------------*/


.intro_achats{
	background-color: #FFB230;
	border: 20px solid #D99828;
	padding: 50px 30px 0px 30px;
}

.cadre_produits{
	border: 20px solid #D99828;
}



.main ul{
    margin-top: 50px;
	font-family: "stolzl_displayregular";
}
 
.main ul li{
    padding: 10px 15px;
    border: 3px solid black;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .5s ease;
	color: black;
	font-size: 20px;
}
 
.main ul li.active,
.main ul li:hover{
    background-color: white;
    color: black;
    border-color: black;
}

 .main .container
{
	margin-right: 0px;
	margin-left: 0px;
	max-width: 2000px;
}

 
.main .container-fluid{
  overflow: hidden;
  padding: 0;
}
 
.main .container-fluid .col-md-3{
    padding: 0;
    float: left;
    transition: all 5s ease-in-out
}
 
.main .container-fluid img{
    width: 100%
}

.main img
{
	border: 20px solid #D99828;
}


/* -----------------------------------FOOTER  -------------*/
.footer
{
	background-color:#D3D3D3;
	border: 20px solid #A7A7A7;
	padding: 0px 30px 0px 30px;
}


/* -----------------------------------RESOLUTIONS -------------*/


  /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	h1{font-size: 40px;}
	h1 .mt-5{font-size: 40px;}
}
	
	

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	h1{font-size: 40px;}
	h1 .mt-5{font-size: 40px;}
	h2{font-size: 30px;}
	h3{font-size: 25px;}
		.h3{font-size: 25px;}
	h4{font-size: 25px;}
	p{font-size: 20px;}
	.image_offrespeciale { margin-bottom:50px; }
	.section_offrespeciale h4{margin-top:80px;}
	
	.rapport{
		margin-bottom: 50px;
	}
	
	.img_ambiance1{margin-top:300px;}
	
	
	
	.img_adobecloud{margin-top:95px;}
	.oubien{margin-top: 100px;}
	.plastic{margin-top: 90px;}
	
	.limpressionpapier{margin-top:80px;}
	.col_droit{padding-left: 30px;}
	.header{margin-left: -20px;}
	
	.navbar-light .navbar-nav .nav-link {
    color: black;
	margin-bottom: 16px;
	padding-left:35px;}
	
}
	
	

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	
	h1{font-size: 40px;}
		h1 .mt-5{font-size: 40px;}
	h2{font-size: 35px;}
	h3{font-size: 38px;}
		.h3{font-size: 38px;}
	h4{font-size: 30px;}
	p{font-size: 20px;}
	
	.rapport{
		margin-bottom: 50px;
	}
	
	.img_ambiance1{margin-top:320px;}
	
	.section_offrespeciale h4{margin-top:95px;}
	
	.navbar-light .navbar-nav .nav-link {
    color: black;
	justify-content: space-between;
	padding-left:35px;
	}
	
	.profil{padding-top: 0px;}
	
	.oubien{
		margin-top: 125px;}
	
	.header{margin-left: -30px;}
	
	.icone{
	margin: -22px 0px 0px 10px;}
	
}
	

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

		h1{font-size: 110px;}
	h2{font-size: 45px;}
	h3{font-size: 48px;}
		.h3{font-size: 48px;}
	h4{font-size: 30px;}
	p{font-size: 20px;}
	
	.rapport{
		margin-bottom: 100px;
	}
	
	.img_ambiance1{margin-top:300px;}
	
	.navbar-light .navbar-nav .nav-link {
    color: black;
	margin-top: 55px;
	padding-left:30px;
	font-size: 18px
	}
	
	.profil{padding-top: 0px;}
	
	.oubien{
	margin-top: 95px;}
	
	
}