@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf');
}

:root {
	--color-default:#3A3844;
	
	--color-0-logo:#3A3844;
	--color-primary:#C39052;
	--color-secondary:#04293A;
	
	--color-metal:#a0a0a0;
	
	--color-bg:#DADADA;
	--color-navbar:#FFF;
	--color-topbar:#FFF;
	--color-border:#3A384433;
	
	--home-height:calc((100vh - 43px - 90px - 100px)/3);
}

html { font-size:15px; line-height:24px; font-weight:400; overflow-x:hidden;  font-family:Montserrat;  }
body { font-size:1rem; color:var(--color-default); line-height:1.5rem; font-weight:400; overflow-x: hidden;  font-family:Montserrat;background-color:var(--color-bg); padding-top:0px; }

footer.page-footer .footer-copyright { background-color:var(--color-default);}
footer hr { border-color:#a0a0a0;}

main { min-height:calc(100vh - 130px); }

h1 { font-family:Montserrat; font-weight:600; text-transform:uppercase; font-size:1.8rem; line-height:2.4rem;  margin-bottom:10px; margin-top:0px; color:var(--color-secondary); letter-spacing:1px; }
h2 { font-family:Montserrat; font-weight:500; text-transform:uppercase; font-size:1.5rem; line-height:2.25rem; margin-bottom:30px; margin-top:0px; color:var(--color-secondary); letter-spacing:1.5px; }
h3 { font-family:Montserrat; font-weight:800; font-size:1.75rem; line-height:2rem; margin-bottom:20px; margin-top:0px; }

a { color:var(--color-default); }
a:hover { color:var(--color-primary); }


.error_404 { border:2px solid #124567; margin-top:50px; margin-bottom:50px; padding:30px; text-align:center;}
.error_404 .title { font-size:2rem; margin-bottom:30px;  }
.error_404 .description { font-size:1rem;  }

.form-group label { font-size:0.8rem; color:var(--color-default);}

.btn { font-family:Montserrat; font-weight:500!important; font-size:0.9rem; }

.btn-default { background-color:var(--color-default)!important; }
.btn-primary { background-color:var(--color-primary)!important; }
.btn-secondary { background-color:var(--color-secondary)!important; }

.default-text { color:var(--color-default)!important; }
.primary-text { color:var(--color-primary)!important; }
.secondary-text { color:var(--color-secondary)!important; }

.modal-header p { margin-bottom:0px; }
.modal-secondary .modal-header { background-color:var(--color-secondary)!important; color:white;}
.modal-primary .modal-header { background-color:var(--color-primary)!important; color:white;}

.card { box-shadow:none; width:100%;}
.card-link:hover .card-body { background-color:black;}
.card .card-header { background-color:#3A3844; color:white; text-transform:uppercase; font-size:1rem; font-weight:500; text-align:left;}
.card.card-select .card-header {text-align:center; }
.card-select:hover .card-header { background-color:var(--color-primary); color:white; }

.card-header h1 { color:white; margin:0px; font-size:1.2rem;}

.transparent { background-color:transparent;}

.navbar { background-color:white; padding:0px 0px; box-shadow:none;}
.navbar .nav-item { background-color:var(--color-navbar); border-right:1px solid var(--color-border); padding:10px 10px; }
.navbar .nav-item:first-child { border-top-left-radius:10px;}
.navbar .nav-item a { color:var(--color-metal); text-transform:uppercase; font-size:1rem; font-weight:500; letter-spacing:1.2px; }

.navbar .nav-item a:hover { color:var(--color-primary);}
.navbar .nav-item.devis { background-color:var(--color-primary); }
.navbar .nav-item.devis a { color:white;}
.navbar .nav-item.active a { color:var(--color-secondary); }
.navbar .nav-item.active a:hover { color:var(--color-secondary);}

.navbar-brand, .navbar-brand:hover {  padding-left:10px; color:var(--color-0-logo); font-size:1.7rem; font-weight:800; text-transform:uppercase; line-height:0.8rem; text-align:right;}
.navbar-brand small { font-size:0.8rem; line-height:0.8rem; color:var(--color-secondary); font-weight:600;}

.navbar-brand .fa-fw { color:var(--color-primary);}

.topbar { padding:10px; color:white; background-color:var(--color-default);text-align:center; font-size:0.8rem;}
.topbar a { color:white; }


.item-autocomplete {
    background: #FFF;
    border-radius: 0px;
    height:80px;
    font-size:1rem;
}
.item-autocomplete:hover {
	background-color: var(--color-secondary);
}
.item-autocomplete img {
	margin-bottom:10px; max-width:100%; width:60px;height:60px; object-fit: cover;
}
.item-autocomplete .label {
    
}
.item-autocomplete .marque {
	font-size:0.8rem;
    color:#BBB;
}

.bloc-home-familles { height:var(--home-height); background-size:cover; background-position:center center; }
.bloc-home-familles .degrade { background-color:rgba(4,41,58,0.95); height:100%; padding:0px 20px; }
.bloc-home-familles .degrade:hover { background-color:rgba(4,41,58,0.75); }

.bloc-home-familles h2 { color:white; text-align:center; width:100%; margin-bottom:10px; margin-top:0px;}
.bloc-home-familles h2 .first-letter { font-size:4rem; line-height:1rem; color:var(--color-primary); }

.bloc-home { height:calc(100vh - 80px - 90px - 100px - var(--home-height)); }
.bloc-home-semi { height:calc((100vh - 80px - 90px - 100px - var(--home-height))/2); background-size:cover; background-position:center center; }
.bloc-home-semi .degrade2 { background-color:rgba(195,144,82,0.20); height:100%; }


nav ol.breadcrumb { font-size:0.8rem; line-height:1.2rem; background-color:var(--color-secondary); border-bottom:1px solid var(--color-metal); border-radius:0px; margin-bottom:0px; }
nav ol.breadcrumb a { color:white; font-size:0.8rem; line-height:1.2rem; }
nav ol.breadcrumb li.active { color:var(--color-metal); font-size:0.8rem; line-height:1.2rem; }

.image-grid { height:200px;}

@media (max-width:576px) {
	html { font-size:12px; line-height:18px;  }
	body { font-size:1rem; line-height:1.5rem; }
	
	.bloc-home-familles { height:200px;}
	.bloc-home { height:200px;}
	.bloc-home-semi { height:200px;}
	
	.navbar { background-color:var(--color-navbar); padding:10px 0px 0px 0px!important; }
	.navbar .navbar-brand, .navbar .navbar-toggler, .navbar .btn { margin-bottom:10px; }
	.navbar-toggler .fa { color:var(--color-default); font-size:24px; }
	.navbar .nav-item { border-right:0px!important; border-top:0px!important; }
	.navbar .nav-item a { padding:10px 10px!important; }
	.navbar .nav-item:first-child { border-top-left-radius:0px; }
	.navbar .nav-item:first-child a { margin-top:10px; }
	
	h2 { font-size:1.5rem; line-height:2.25rem; }
	
	.navbar { padding:20px 5px; }
	.navbar .nav-item { border-top:1px solid var(--color-border); padding:5px 10px; }

	.topbar { text-align:center;}
	
	.form-group label { font-size:1rem;}

}