@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

@media (min-width: 700px){
	.grid-container-tel {
	  display: none!important;
	}
}

@media (max-width: 768px){
	.bgimg-2{
		background-attachment: scroll !important;
	}
}

body a{
	color:#cfac67;
	text-decoration: none;
}

.interview .txtinterview{
	font-size: 0.8em;
    font-weight: 450;
    margin-top: 1em;
	margin-bottom:0;
}

.interview .catalogue img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
	filter: brightness(0.7);
}

.interview .catalogue{
	position:relative;
}

.interview .catalogue a{
	color:white;
}

.interview .catalogue p{
	color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    width: 60%;
	transform: translate(-50%, -50%);
    text-shadow: 0 0 13px black;
    font-size: 1.9em;
    padding: 1em;
}

.environnement .col-md-7 p{
	color: white;
    position: absolute;
    left: 0;
    top: 25%;
    text-align: center;
    width: 100%;
    text-shadow: 0 0 13px black;
    font-size: 1.4em;
    padding: 1em;
}



.environnement h3{
	font-size:1.5em;
}

.environnement .col-md-5{
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.imgheader img{
    width:100%;
}

.imgheader .overlay {
    position: absolute;
    top: 50%;
    left: 40%;
}

.imgheader{
    position: relative;
}

.imgheader h2{
	color:white;
	text-shadow: 0 0 5px black;
}

.catalogues p {
    color: black;
    font-size: 0.9em;
}

.catalogues .col-md-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalogues img{
	width:100%;
}

.catalogues h2{
	font-size:1.5em;
}

.catalogues h3{
	font-size:1em;
	font-weight:400;
	margin: 0.5em 0;
}

.pages{
    display: flex;
    justify-content: space-between;
}

.grid-container-tel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "marquetel1"
    "marquetel2"
    "marquetel3"
    "marquetel4"
    "marquetel5"
    "marquetel6"
    "marquetel7"
    "marquetel8"
    "marquetel9"
    "marquetel10"
    "marquetel11"
	"marquetel12"
	"marquetel14";
}
	
.marquetel1 {
	grid-area: marquetel1;
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/Alfalux.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
	min-height: 100vw;
}

.marquetel2 { 
	grid-area: marquetel2; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/schuco.jpeg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
	margin-bottom: 20px;
}


.marquetel3 { 
	grid-area: marquetel3;
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/aluplast.jpeg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel4 { 
	grid-area: marquetel4;
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/Panaria.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel5 { 
	grid-area: marquetel5; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/cucina-Way-dettaglio-ceramica-ossido-nero-1_gallery copie 2 copie.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel6 { 
	grid-area: marquetel6; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/Zehnder  copie.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}


.marquetel7 { 
	grid-area: marquetel7; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/Somfy copie_1.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel8 { 
	grid-area: marquetel8;  
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/grohe.jpeg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel9 { 
	grid-area: marquetel9;  
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/bwt.jpeg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
	margin-bottom: 20px;
}
	

.marquetel10 { 
	grid-area: marquetel10;  
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/beneito.jpeg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
	margin-bottom: 20px;
}


.marquetel11 { 
	grid-area: marquetel11; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/cinier.jpeg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.marquetel12 { 
	grid-area: marquetel12;  
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://troja-holding.fr/images/Marques/IMG_20190319_101225.jpg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
	margin-bottom: 20px;
}
	

.marquetel13 { 
	grid-area: marquetel13;  
	background: linear-gradient(rgba(0, 0, 0), rgba(4, 31, 69)) ;
	background-size:cover;
	overflow:hidden;
	background-position: center;
	margin-bottom: 20px;
}


.marquetel14 { 
	grid-area: marquetel14; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://troja-holding.fr/images/Marques/bureau-bosch.jpg");
	background-size:cover;
	overflow:hidden;
	margin-bottom: 20px;
}

.titre-tel{
	font-family: playfair display;
	font-size: 20px;
	font-weight:600;
	line-height:1.5;
	color:white;
}
	
.description-tel{
	padding-top: 25%;
	padding-left: 20px;
	padding-right: 20px;
	color:white;
	font-family:lato;
	font-size:13px;
	text-align: center;
}	

	
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "row1"
    "row2"
    "row3"
    "row4"
    "row5"
	"row6";
}

@media (max-width: 700px){
	.grid-container {
	  display: none;
	}
}

.grid-container img{
	width: 100%;
	object-fit:cover;
	/*padding-bottom: 30px;
	padding-left:30px;*/
	object-position: 0% 0%;
}


@media (max-width: 1000px){
	.description2, .description3, .description8, .description, .description5 {
	font-size:12px !important;
	}
	.ss-titre2{
		font-size: 15px!important;
	}
	.titre2{
		font-size: 20px!important;
	}

	.description8{
		padding-top: 20vmax!important;
	}
}

@media (max-width: 800px){
	.description3, .description5, .description2{
		padding-top: 20px!important;
	}
	}


.superpose5, .superpose6, .superpose7, .superpose11, .superpose, .superpose4, .superpose14, .superpose12, .superpose13{
	position:relative;
	width: 100%!important;
	background-color: rgba(0, 0, 0, .5);
	overflow: hidden;
	height: 0;
	transition: .5s ease-out;
}	

.titre2{
	font-family:  'Playfair Display', serif !important;
	font-size: 30px;
	font-weight:700;
	line-height:1.5;
}

.row1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-rows: 100%;
    -ms-grid-rows: 100%;
    grid-template-areas:
    "marque1 marque1 marque2";
    grid-area: row1;
	height:40vmax;
	position: relative;
	padding-bottom: 30px;
}

.marque1 {
	grid-area: marque1;
	background-image: url("https://troja-holding.fr/images/Marques/Alfalux.jpg");
	background-size:cover;
	margin-right: 30px;
	overflow:hidden;
}

.imagemarque {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 15vmax;
}

.marque1:hover .imagemarque {
	display:none;
}

@media (min-width: 800px){
	.description{
		width:50%;
	}
}

.description{
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	color:white;
	font-family:lato;
	font-size:14px;
}

.marque1:hover .superpose {
	height: 100%;
	background-color: rgba(4, 31, 69, .5);
}

.marque2 { 
	grid-area: marque2; 
	background-image: url("https://troja-holding.fr/images/Marques/schuco.jpg");
	background-size:cover;
	overflow:hidden;
	background-position: left;
}

.description2{
	padding-top: 15vmax;
	padding-left: 8%;
	padding-right: 8%;
	color:white;
	font-family:lato;
	font-size:14px;
	text-align: center;
	text-shadow: 0 0 12px black;
}

.ss-titre2{
	font-size: 20px;
	font-weight:400;
	line-height:1.5;
}

.row2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: 100%;
	-ms-grid-rows: 100%;
	grid-template-areas:
	"marque3 marque4 marque4";
	grid-area: row2;
	height:40vmax;
	padding-bottom: 30px;
}

.marque3 { 
	grid-area: marque3;
	background-image: url("https://troja-holding.fr/images/Marques/aluplast.jpeg");
	background-size:cover;
	overflow:hidden;
}

.description3{
	padding-top: 5vmax;
	padding-left: 10%;
	padding-right: 10%;
	color:white;
	font-family:lato;
	font-size:14px;
	line-height:1.6;
	text-align: center;
}

.superpose3{
	position:relative;
	width: 100%!important;
	background-color: rgba(0, 0, 0, .5);
	overflow: hidden;
	height: 100%;
	display:none;
}	

.marque3:hover .superpose3 {
	transition: 0.2s ease-out;
	display:inline-block;
}

.imagemarque3 {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 15vmax;
}

.marque3:hover .imagemarque3 {
	display:none;
}


.marque4 { 
	grid-area: marque4;
	margin-left: 30px;
	background-image: url("https://troja-holding.fr/images/Marques/Panaria.jpg");
	background-size:cover;
	overflow:hidden;
}

.imagemarque4 {
    width: 40%;
    margin-right: auto;
    position: relative;
	padding-top:25vmax;
}

.marque4:hover .imagemarque4 {
	display:none;
}	

.marque4:hover .superpose4 {
    height: 100%;
	background-color: rgba(4, 31, 69, .5);
}


.row3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: 100%;
	-ms-grid-rows: 100%;
	grid-template-areas:
	"marque5 marque6 marque7";
	grid-area: row3;
	height:40vmax;
	padding-bottom: 30px;
}


.marque5 { 
	grid-area: marque5; 
	background-image: url("https://troja-holding.fr/images/Marques/cucina-Way-dettaglio-ceramica-ossido-nero-1_gallery copie 2 copie.jpg");
	background-size:cover;
	overflow:hidden;
}


.marque5:hover .superpose5 {
	height: 100%;
	background-color: rgba(4, 31, 69, .5);
}

.imagemarque5 {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 15vmax;
}

.marque5:hover .imagemarque5 {
	display:none;
}

.description5{
	padding-top: 5vmax;
	padding-left: 8%;
	padding-right: 8%;
	color:white;
	font-family:lato;
	font-size:14px;
	text-align: center;
}

.marque6 { 
	grid-area: marque6; 
	margin-right: 30px;
	margin-left: 30px; 
	background-image: url("https://troja-holding.fr/images/Marques/Zehnder  copie.jpg");
	background-size:cover;
	overflow:hidden;
}


.imagemarque6 {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 10vmax;
}

.marque6:hover .imagemarque6 {
	display:none;
}


.marque6:hover .superpose6 {
  	height: 100%;
	background-color: rgba(4, 31, 69, .5);
}

.marque7 { 
	grid-area: marque7; 
	background-image: url("https://troja-holding.fr/images/Marques/Somfy copie_1.jpg");
	background-size:cover;
	overflow:hidden;
}

.imagemarque7 {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 15vmax;
}

.marque7:hover .imagemarque7 {
	display:none;
}

.marque7:hover .superpose7 {
  	height: 100%;
	background-color: rgba(4, 31, 69, .5);
}


.row4 {
	display: grid;
	grid-template-columns: 1fr;
	-ms-grid-columns: 1fr;
	grid-template-rows: 100%;
	-ms-grid-rows: 100%;
	grid-template-areas:
	"marque8";
	grid-area: row4;
	height:40vmax;
	padding-bottom: 30px;
}


.marque8 { 
	grid-area: marque8;  
	background-image: url("https://troja-holding.fr/images/Marques/grohe.jpg");
	background-size:cover;
	overflow:hidden;
}

.description8{
	padding-top: 28vmax;
	padding-left: 20px;
	color:white;
	font-family:lato;
	font-size:14px;
	padding-rig: 50%;
	text-shadow: 0 0 12px black;
}

.titre8{
	font-family:'Playfair Display', serif !important;
	font-size: 30px;
	font-weight:700;
	line-height:1.5;
}

.superpose8{
	height:0;
}

.marque8:hover .superpose8 {
	background-color: rgba(4, 31, 69, .5);
	transition: .2s ease-out;
	height:100%;
}

.row5 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: 100%;
	-ms-grid-rows: 100%;
	grid-template-areas:
	"marque9 marque10 marque11";
	grid-area: row5;
	height:40vmax;
	padding-bottom: 30px;
}


.marque9 { 
	grid-area: marque9;  
	background-image: url("https://troja-holding.fr/images/Marques/bwt.jpeg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
}

.marque9:hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("https://troja-holding.fr/images/Marques/bwt.jpeg");
}

.marque9:hover .superpose9 {
	opacity:1;

}

.superpose9{
	position:relative;
	width: 100%!important;
	overflow: hidden;
	height: 100%;
	transition: .5s ease-out;
	opacity:0;
}	

.marque10 { 
	grid-area: marque10;  
	margin-right: 30px;
	margin-left: 30px;
	background-image: url("https://troja-holding.fr/images/Marques/beneito.jpeg");
	background-size:cover;
	overflow:hidden;
	background-position: center;
}

.marque10:hover {
	background-image: url("https://troja-holding.fr/images/Marques/beneito.jpeg");
}

.marque10:hover .superpose10 {
	background-color: rgba(0, 0, 0, .5);
	opacity:1;
}

.superpose10{
	position:relative;
	width: 100%!important;
	overflow: hidden;
	height: 100%;
	transition: .5s ease-out;
	opacity:0;
}	

.marque11 { 
	grid-area: marque11; 
	background-image: url("https://troja-holding.fr/images/Marques/cinier.jpeg");
	background-size:cover;
	overflow:hidden;
}

.marque11:hover .superpose11 {
	background-color: rgba(4, 31, 69, .5);
	height: 100%;
}


.row6 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-rows: 100%;
	-ms-grid-rows: 100%;
	grid-template-areas:
	"marque12 marque14 marque14";
	grid-area: row6;
	height:40vmax;
	padding-bottom: 30px;
}

.marque12 { 
	grid-area: marque12; 
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://troja-holding.fr/images/Marques/doporro.jpeg");
	background-size:cover;
	overflow:hidden;
}

.marque12:hover .superpose12 {
	background-color: rgba(4, 31, 69, .5);
	height: 100%;
}

.imagemarque8 {
    width: 40%;
    margin: auto;
    position: relative;
    padding-top: 12vmax;
}



.marque13 { 
	grid-area: marque13;  
	background: linear-gradient(rgba(0, 0, 0), rgba(4, 31, 69)) ;
	background-size:cover;
	overflow:hidden;
}

.imagemarque13 {
    width: 40%;
    margin: auto;
    position: relative;
}


.marque14 { 
	grid-area: marque14; 
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://troja-holding.fr/images/Marques/bureau-bosch.jpg");
	background-size:cover;
	margin-right: 30px;
	margin-left: 30px;
	overflow:hidden;
}


.marque14:hover .superpose14 {
	background-color: rgba(4, 31, 69, .5);
	height: 100%;
}

#dropdownmenu2 li {
	width: 150%;
}

#dropdownmenu2 a {
	font-size:0.8em;
}

#dropdownmenu2 {
	z-index:100;
}

.dropdownmenu2 {
	z-index:100;
}

.fondnoir a{
	color:black;
	text-decoration:none;
}

.presentationste h3{
	color: #CFAC67;
    font-weight: 600;
}

.presentationste hr{
	border-top: 1px solid #CFAC67;
    width: 40%;
}

.presentationste{
	margin: 1em 0 0 0;
}

.presentationste p {
    font-size: 0.8em;
}

@media (max-width: 575px){
	.nav{
		justify-content: center;
	}
	.menu li{
		font-size:9px;
	}
	.nav-link{
		padding:0.3rem;
	}
	.nav-item a{
		font-size:9px !important;
	}
	.nav-item a img{
		width:10px !important;
		height:10px!important;
	}	
	.logo{
		width:50%;
	}
}


.imgtitre{
	max-width:280px;
}

.txtcaption img{
	padding:0!important;
}


.grecaptcha-badge{
	visibility:hidden;
}

.row{
	margin:auto!important;
}
/*contact*/

textarea {
	resize: none;
}
.form-label {
	font-size: 12px;
	color: #CFAC67;
	margin: 0;
	display: block;
	opacity: 1;
	-webkit-transition: .333s ease top, .333s ease opacity;
	transition: .333s ease top, .333s ease opacity;
}
.form-control {
	border-radius: 0;
	border-color: #ccc;
   	border-width: 0 0 2px 0;
   	border-style: none none solid none;
   	box-shadow: none;
}
.form-control:focus {
	box-shadow: none;
	border-color: #CFAC67;
}
.js-hide-label {
	opacity: 0; 	
}
.js-unhighlight-label {
	color: #999 
}
.btn-start-order {
	background: 0 0 #ffffff;
    border: 1px solid #2f323a;
    border-radius: 3px;
    color: #2f323a;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    line-height: inherit;
    margin: 30px 0;
    padding: 10px 50px;
    text-transform: uppercase;
    transition: all 0.25s ease 0s;
}
.btn-start-order:hover,.btn-start-order:active, .btn-start-order:focus {
	border-color: #CFAC67;
	color: #CFAC67;
}

.img-header-contact {width: 100%; height: 500px; background: url(../images/papeterie-troja.jpg) center 40% no-repeat; background-size: cover;}



body {background: #FFF; color: #373737;font-family:  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 17px; overflow-x: hidden; width:100vw;}
.header {padding: 5px; border-bottom:1px solid #CFAC67;text-align: center; background:#000; margin:0}
.img-header {width: 100%; height:500px; background:center center no-repeat; background-size: cover;}
.contenu {width: auto; padding: 25px; margin: 25px; background: rgba(255,255,255,0.9)}
.logo {padding: 20px}

/* TITRES */

.surtitre{
	font-size:10px;
	color: #ceac67;
}


.titre{
	font-family:'Playfair Display', serif;
	font-size: 20px;
}

.donneescontact{
	font-size:14px;
}

h1 {color: #CFAC67; font-size: 24px;letter-spacing: 2px; font-family:  'Playfair Display', serif;text-align: center; padding-top: 25px;}
h2 {color: #CFAC67; font-size: 18px;letter-spacing: 2px; font-family:  'Playfair Display', serif;text-align: center; padding-top: 15px }
h3 {color: #CFAC67; font-size: 16px;letter-spacing: 3px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 200 }
h4 {color: #CFAC67; font-size: 12px;letter-spacing: 3px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 200;}
h5 {color: #000; font-size: 22px;letter-spacing: 2px; font-family:'Playfair Display', serif; font-weight: 400;}

/* BOUTONS URL */
.btn {position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #CFAC67; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.12); transition: 250ms ease-out; font-size: 0.8rem; padding: 1.05rem 2.13rem; margin: 6px; border-radius: 2px; white-space: normal !important; word-wrap: break-word; cursor: pointer;}
.btn:hover{box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.22);}
.btn span, .btn::after { color: #CFAC67; position: relative; z-index: 1;}
.btn::before { position: absolute; display: block; width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; background: #f5f5ff;}
.buttonX span {color: #CFAC67;}
.buttonX::before {background: #CFAC67; transform: scaleX(0); transform-origin: right; transition: transform 0.2s ease-out;}
.buttonX:hover {border-color: #CFAC67;}
.buttonX:hover span {color: #CFAC67;}
.buttonX:hover::before {transform: scaleX(1); transform-origin: left;}

/* TEXTE */
.lettrine {color: #CFAC67; font-size: 38px; font-family:  'Playfair Display', serif; }
.pup {line-height: 30px; color:#777}

/* MENU */
.menu {color: #CFAC67; list-style: none; padding-bottom: 25px; margin: auto}
.menu li {font-size: 16px; letter-spacing: 1px; margin-top:5px; font-family: 'Playfair Display', serif; font-weight: bold; float: left; display: inline;}
.menu li a{ color: #D3B97E; }
.menu li a:hover {text-decoration: none; color: #fff; display: block}


li{list-style:none;}
ul li ul {display: none;}
li:hover ul { display: block; position: absolute; margin: 0 0 0 -40px;z-index:1000;}
li:hover li { width: 90px;  text-align: center;	z-index: 10; margin:0;background: #2e2e2e;line-height: 34px}
li:hover a {color: white;}
li:hover a:hover { background: #CFAC67;}

.ressources{
	width: 50%;
    padding-left: 5%;
    padding-right: 5%;
    background: #00000070;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ressources h5{
	color:white;
}

.ressources p{
	color:white;
}

/* galeries*/

.formulairecontact{
	margin-left:-30%;
	background: white;
    padding: 5% 15%;
	box-shadow: 0px 12px 80px -6px rgb(0 0 0 / 30%);
    width: 110%;
}

@media (max-width: 575px){
	.formulairecontact{
		margin-left:0;
		padding:5%;
    	width: 100%;
	}
	.contact{
		padding:10% !important;
	}
	.donneescontact{
		padding: 5% 10% 5% 10% !important;
		text-align:center;
	}
	.donneescontact ul{
		padding: 0 !important;
	}
}

.contact{
	background-image:url("images/contact.jpg");
	background-size:cover;
	background-position:center right;
	padding:  5%;
}

.owl-carousel .owl-item img {
width:35% !important;
}

@media (max-width: 575px){
	.gallerielogo img{
		width:50% !important;
		margin-left:25%;
		padding:5%;
	}
}
.fondnoir{
	margin-bottom: 3%;
    margin-top: 5%;
    background: url(images/fondnoir.jpg);
    background-position: top;
    background-size: 100% 18%;
    background-repeat: no-repeat;
    width: 100vw;
    padding: 3% 5%;
}


#slider{
	display:flex;
	align-items:center;
}

@media (max-width: 991px){
	.fondnoir{
		background-size: 100% 12%;
	}
}

@media (max-width: 575px){
	.fondblancmobile{
		padding: 2% 5% 15% 5% !important;
        background: white;
        margin-top: 7%;
	}
}

.bgimgheader{
	display: flex;
    align-items: center;
	justify-content:center;
}

.logoechecs{
	width:90%;
}

@media (max-width: 575px){
	.logoechecs{
		width:50%;
		margin:auto;
	}
	
}


.form-control{
	border-style: none !important;
	background-color: rgba(0,0,0,0.05) !important;
	color: #666 !important;
	padding: 2% !important;
}

.bouttoncontact {
    color: #D3B97E;
    background-color: #000;
    border: none;
    width: 100%;
    padding: 2%;
}



/* FOOTER */
.rowfooter {background-image: url(images/pattern-troja.jpg); background-repeat: repeat;  text-align: center; padding:1%; letter-spacing: 2px}
.rowfooter p {font-family: 'Playfair Display', serif;color: #FFF; font-size:10px;}
.rowfooter h3 {color: #CFAC67; font-size: 13px;letter-spacing: 3px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 200 }
.copyright {font-size: 9px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 200 ;}
.copyright a {color: #FFF}

.logopino {font-family: Times, "Times New Roman", "serif"; color: #FFF; font-weight: bold; font-size: 24px;padding-top: 22px}
.logopino-big {font-family: Times, "Times New Roman", "serif"; color: #CFAC67; font-weight: bold; font-size: 34px;padding-top: 22px}

/* PARALLAX */
/*.bgimg-6{background-position: center; background-repeat: no-repeat; background-size: cover; display: flex;  align-items: center; justify-content: center;}*/
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-6, .bgimg-7,.bgimg-9 {position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex;  align-items: center; justify-content: center;}

.bgimg-5 {position: relative; background-position: bottom; background-repeat: no-repeat; background-size: cover; display: flex;  align-items: center; justify-content: center;}

.bgimg-8 {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex;  align-items: center; justify-content: center;}

.caption { width: 70%; text-align: center; color: white!important; text-shadow: 0 0 5px black; }
.caption h5{
	color:white!important;
}
.caption span.border {background-color: #111; color: #fff; padding: 18px; font-size: 25px; letter-spacing: 10px;}
.txtcaption {color:#777;background-color:#FFF;text-align:center;padding:4% 10%;text-align: justify;}
.has-scroll-reveal { opacity: 0; animation-play-state: paused; }
.animated {-webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-play-state: running;}
.fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp;}

@keyframes fadeInUp {
  from {opacity: 0; -webkit-transform: translate3d(0, 2.5rem, 0); transform: translate3d(0, 2.5rem, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none; }}


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-3 , .bgimg-4, .bgimg-5,.bgimg-6, .bgimg-7,.bgimg-8, .bgimg-9 { background-attachment: scroll; }
	.copy { background-color:#31353d;   text-align: center;   color: #e9edf2; } }

@media screen and (max-width: 768px) {	
	.bg-img1,.bgimg-2, .bgimg-3,.bgimg-4, .bgimg-5,.bgimg-6, .bgimg-8, .bgimg-7, .bgimg-9, .bgimgheader {min-height: 300px!important;}
	.img-header{height:300px!important;}
	.bg-img3 {min-height: 180px;}
}