body {font-family: 'Josefin Sans', sans-serif;, sans-serif; font-weight: 300; color: black; background-color: #d6d1ca;}

section { padding: 6vh 0;}

/*----------------*/
/*---TYPOGRAPHY---*/
/*----------------*/
body { font-size: 1rem;}
h1, .h1 { font-size: 2rem; margin-top: 0; margin-bottom: 4vh;}
h2 { font-size: 1.6rem; margin-top: 4vh;}
.header-top { font-size: 0.8rem;}

@media (min-width: 600px) {
  body { font-size: 1.1rem;}
  h1, .h1 { font-size: 2.6rem;}
  h2 { font-size: 1.8rem;}
  .header-top { font-size: 0.9rem;}
}

@media (min-width: 1920px) {
  body { font-size: 1.4rem;}
  h1, .h1 { font-size: 3rem;}
  h2 { font-size: 2rem;}
  .header-top { font-size: 1.1rem;}
}

.heading-ornament:after { content: ''; display: block; margin-top: 10px; height: 5px; width: 60px; background-color: #ff7f40; }

/*--------------*/
/* --- LINK --- */
/*--------------*/
a { color: black; text-decoration: underline; transition:all .4s ease;}
a:hover, a:focus, a:active { color: black; text-decoration: none; cursor: pointer;}

/*-------------*/
/* --- BTN --- */
/*-------------*/
.btn { display: inline-block; padding: 10px ; text-align: center; text-transform: uppercase; text-decoration: none; color: white; background: #ff7f40; 
-webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
border:none;
border-radius: 10px;
}
.btn:hover { color: white; background: black; 
-webkit-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
}
.btn:focus { color: #ff7f40; background: black; 
-webkit-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7); 
box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
}

/*-------------*/
/* --- BTN --- */
/*-------------*/
.bg-white { background-color: white;}

/*------------*/
/*---HEADER---*/
/*------------*/
#header { z-index: 2000; position: fixed; top: 0; width: 100%; border-bottom:5px solid black; transition: 0.2s; background-color: #d6d1ca;}

/*---LOGO MOBILE---*/
header .branding { width:100px;}
#header .branding-title, #header.shrink-menu .branding { display: none;}
#header.shrink-menu .branding-title { display: block; width:100px;}

@media (min-width: 600px) {
header .branding { position: absolute; top: 0; left: 0; padding:10px; width:180px; background: #d6d1ca;}
#header.shrink-menu .branding-title { position: absolute; top: 10px; left: 0; width:180px;}
}

/*---HEADER TOP---*/
.header-top { padding: 10px 0; color: white; text-align: right; background-color: black; border-bottom:2px solid #ff7f40;}
.header-top ul { margin-bottom: 0;}
.header-top li { padding-left: 5px;}
.header-top i { display: none;}
.header-top a { color: white;}
.header-top a:hover { color: #ff7f40;}

@media (min-width: 600px) {
  .header-top li { padding-left: 20px;}
  .header-top i { padding-right: 5px; display: inline-block;}
}

/*---NAV---*/
.navbar ul { margin-top: 10px; margin-bottom: 10px; margin-left: 200px;}
.navbar li { padding-left: 10px; padding-right: 10px;}
.navbar li a { padding: 0 0 2px 0 !important; font-weight: 400; text-decoration: none; border-bottom:3px solid transparent;}
.navbar li a:hover {  border-bottom:3px solid black;}
.navbar li a.active { color: #ff7f40; border-bottom:3px solid #ff7f40;}

/*---NAV MOBILE---*/
.navbar-toggler { z-index: 5000; padding: 10px; font-size: 1.8rem; line-height: 1; color:white; background-color: #ff7f40; border: none; border-radius: 0;} 

.collapse.show { z-index: 4000; position: absolute; top: 0; left: -15px; width: 100vw; height: 100vh; background-color: #d6d1ca;}
.collapsing ul { display: none;}
.collapse.show ul { margin:10vh 0 0 0; font-size: 200%;}

/*-----------*/
/*---MAIN---*/
/*---------*/
main { margin-top: 150px;}

@media (min-width: 600px) {
  main { margin-top: 200px;}
}

/*-----------------*/
/*---REALISATION---*/
/*-----------------*/
.galerie video { margin-bottom:25px; background-color: white; border-top: 5px solid white; border-bottom: 5px solid white;}
@media (max-width: 600px) {
  .galerie video { height: 300px !important;}
}

.galerie img { margin-bottom:25px; border:5px solid white;}
.galerie img:hover { margin-bottom:25px; border:5px solid #ff7f40;}

/*-----------------*/
/* --- CONTACT --- */
/* --------------- */
@media (max-width: 600px) {
  .contact .col-md-4 { margin-bottom: 2vh;}
  .contact .col-md-4:last-child { margin-bottom: 0;}
}

.contact .col-md-4 { text-align: center;}

.contact .fa { font-size: 35px; color: #ff7f40;}

/*------------*/
/*---FOOTER---*/
/*------------*/
.copyright { padding-top: 25px; padding-bottom: 25px; text-align: center; color: white; background-color: black; border-top:5px solid #ff7f40;}
.copyright a { color:white;}
.copyright a:hover { color: #ff7f40;}
.copyright ul { margin:0 0 15px 0; padding:0;}
.copyright ul li { display:inline; }
.copyright ul li:after { content: " -"}
.copyright ul li:last-child:after { content: ""}
.copyright ul li a { display: inline-block; word-break: keep-all !important; color: white;}
.copyright p { margin-bottom: 0;}

/* --- CAROUSEL --- */
/* --------------- */ 
.carousel { position: relative;}
.carousel-inner { border-bottom:5px solid black;}
.carousel h2 { z-index: 1000; position: absolute; bottom: 35%; right: 15%; padding:20px; color: black; background: rgba(255, 255, 255, 1); border-bottom:5px solid #ff7f40;}
.carousel-item-01 { background-image: url(../img/les-entreprises-graziani-slide-01.png);}
.carousel-item-02 { background-image: url(../img/les-entreprises-graziani-slide-02.png);}
.carousel-item-03 { background-image: url(../img/les-entreprises-graziani-slide-03.png);}

.carousel-item { background-position: center; height: 38rem;}
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 38rem;}

.carousel-control-next, .carousel-control-prev { opacity: 1;}
.carousel-control-next:hover, .carousel-control-prev:hover { cursor: pointer;}
.carousel-control-next-icon, .carousel-control-prev-icon { padding: 10px; width: 40px; height: 40px; background-color: #ff7f40; border:10px solid #ff7f40;}
.carousel-control-prev:hover .carousel-control-prev-icon, .carousel-control-next:hover .carousel-control-next-icon {  background-color: black; border-color: black;}

@media (max-width: 600px) {
  .carousel h2 { bottom: 30%;}
  .carousel-control-next-icon, .carousel-control-prev-icon { display: none;}
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

}

/*-------------*/
/*--- MODAL ---*/
/* ----------- */
.modal {z-index: 6000;}
.modal-content { color: white; background-color: black; border: 1px solid black; border-radius: 0px;}
.modal-header { border-bottom: 0;}
.close { opacity: 1; color: white; text-shadow: none;}
.close:hover { color: white;}

.ekko-lightbox-nav-overlay a:first-child,
.ekko-lightbox-nav-overlay a:last-child { position: absolute; bottom: 10px;}

.ekko-lightbox-nav-overlay a:first-child { right: 70px;}
.ekko-lightbox-nav-overlay a:last-child { right: 20px;}

.ekko-lightbox-nav-overlay a { opacity: 1; font-size: 30px; line-height: 36px; width: 40px; height: 40px; color: white; background-color: #ff7f40; border-radius: 0; text-decoration: none;}
.ekko-lightbox-nav-overlay a:hover { background-color: black; }
.ekko-lightbox-nav-overlay a > :focus { outline: none}

.ekko-lightbox-nav-overlay a span { padding: 0 12px;}
.ekko-lightbox-nav-overlay a:last-child span { text-align: right}

.ekko-lightbox-nav-overlay a:hover { text-decoration: none}
.ekko-lightbox-nav-overlay a:focus { outline: none}
.ekko-lightbox-nav-overlay a.disabled { cursor: default; visibility: hidden}

.ekko-lightbox a:hover { opacity: 1; text-decoration: none}