/************* GENERAL *************/
* {font-family: "Montserrat";transition: all 0.5s;}
body {background:#000 url('../img/bg-2.jpg') top center no-repeat; background-size: cover; height:800px}
body p {color:#fff; font-weight: 300;;}
ul.no-list {list-style: none; margin:0; padding:0}
ul.list {list-style: none; margin:0; padding:0}
ul.list li:before {content:'-'; padding-right: 1rem;}
h1 {color:#fff; text-transform: uppercase;font-size: 2rem;}
h2 {color:#00c6ff; font-weight: 200;font-size: 1.5rem;}
.titre-bleu {color:#00c6ff; font-size: 2.5rem;text-transform: uppercase;font-weight: 800;display: block;}
.titre-bloc {background:rgba(0,198,255,0.3);padding:1.4rem;display: block;color:#fff; text-transform: uppercase;font-weight:300; text-align: center;}
.sous-titre {color:#fff; text-transform: uppercase;font-size:1.5rem;}
.highlight {color:#00c6ff;}
.quote {border-left:3px solid #fff; padding-left:15px; font-size:18px; font-style: italic; background:rgba(0,198,255,0.3); padding: 1.5rem}
button:focus {outline:none}
.full-img {object-fit: cover;width: 100%;}
.btn-send {background:#518999; border-radius: 0; color:#fff; padding: 0.8rem 1.5rem;transition: all 0.5s;}
.btn-send:hover {background:#416E7A; color:#fff}

/************* HEADER *************/
.main-navbar {margin-top:0; padding-top:0; margin-bottom: 2.5rem;}
.main-navbar .navbar-brand {display: flex;align-items: flex-end;height: 100%;}
.main-navbar .nav-item {display: flex;align-items: flex-end;margin: 0 0.8rem;}
.main-navbar .nav-item {margin:0}
.main-navbar .nav-item .nav-link {color:#fff; text-transform: uppercase; font-size: 1rem;}
.main-navbar .nav-item .nav-link:after {content:'|'; color:#fff; padding: 0 20px}
.main-navbar .nav-item.last .nav-link:after {content:''}
.main-navbar .buttons {display: flex; flex-direction: row;;;}
.main-navbar .buttons .nav-item.contact, .main-navbar .buttons .nav-item.home {height:8rem; width:3.5rem; display: flex; justify-content: center; align-items:flex-end;}
.main-navbar .buttons .nav-item.contact .nav-link, .main-navbar .buttons .nav-item.home .nav-link {height: 100%;display: flex;align-items: flex-end;font-size: 1.5rem;;}
.main-navbar .buttons .nav-item.contact .nav-link:after, .main-navbar .buttons .nav-item.home .nav-link:after {display: none;}
.main-navbar .buttons .nav-item.contact {background:#cfc8d0;}
.main-navbar .buttons .nav-item.home {background:#00c6ff;margin-right:1rem}
/*Animation*/
@media (min-width: 992px) {.animate {animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-fill-mode: both; -webkit-animation-fill-mode: both;}}
@keyframes slideIn {0% {transform: translateY(1rem);opacity: 0;}100% { transform:translateY(0rem);opacity: 1;}0% {transform: translateY(1rem);opacity: 0;}}
@-webkit-keyframes slideIn {0% {-webkit-transform: transform; -webkit-opacity: 0;}100% {-webkit-transform: translateY(0); -webkit-opacity: 1;}0% {-webkit-transform: translateY(1rem);-webkit-opacity: 0;}}
.slideIn {-webkit-animation-name: slideIn; animation-name: slideIn;}
/* Icon */
.custom-toggler .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
.custom-toggler.navbar-toggler {border-color: transparent;} 
.animated-icon {width: 30px;height: 20px;position: relative;margin: 0px;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
.animated-icon span {background: #fff;display: block;position: absolute;height: 3px;width: 100%;border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.animated-icon span:nth-child(1) {top: 0px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon span:nth-child(2) {top: 10px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon span:nth-child(3) {top: 20px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon.open span:nth-child(1) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);top: 0px;left: 8px;}
.animated-icon.open span:nth-child(2) {width: 0%;opacity: 0;}
.animated-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 21px;left: 8px;}
.navbar-collapse.open {display: block !important;padding: 2.8rem;background: #444;position: absolute;z-index: 2500;top: 0;left: 0;min-height: 100vh;}
.navbar-collapse.open .navbar-nav {height:inherit!important}

/************* HOMEPAGE *************/
#homepage {padding: 3rem 0 5rem;}
#homepage #services {margin:0 auto 3rem}
#homepage #services .item {background:#00568c; padding:0.9rem; height:31rem; display: flex;flex-direction: column;justify-content: center;position:relative}
#homepage #services .item:hover {margin-top:0.6rem; text-decoration: none;}
#homepage #services .item.decalage {margin-top:3.15rem}
#homepage #services .item.decalage:hover {margin-top:3.75rem}
#homepage #services .item span {color:#fff; font-family: "Source Sans Pro";font-size: 1.4rem; text-transform: uppercase;line-height: 1.2;}
#homepage #services .item .img-service {position: absolute;bottom:-4.1rem; left: 2.8em;}
#homepage #services .item .img-service.service2 {left: -0.2em;}
#homepage #about, #homepage #realisations {padding:6rem 1rem 0}
#homepage #about p {margin:2rem 0; font-size: 1rem;}

/************* GALERIE REALISATIONS *************/
#realisations .gallery {margin-top:3rem}
#realisations .gallery .item {background:#00568c; width: 100%; height:23rem;position: relative; display: flex;}
#realisations .gallery .item img {position: absolute;  width: 100%; height:23rem; z-index:100; object-fit: cover;}
#realisations .gallery .item .overlay {opacity:0; background:rgba(0,0,0,0.7); width: 100%; height:100%;position: absolute; z-index:300; display: flex; flex-direction: column; justify-content: center;align-items:center;color:#fff}
#realisations .gallery .item .overlay span.titre {font-size: 0.8rem;font-weight: 300;}
#realisations .gallery .item .overlay span.cat {text-transform: uppercase;}
#realisations .gallery .item:hover .overlay {opacity: 1;}
#realisations .gallery .item .overlay a {height:3rem; width:3rem; font-size:1.6rem; background:#f4f4f4; border-radius: 5px; ; margin-top: 1rem; display: flex; justify-content: center; align-items: center;color: #000}
#realisations .gallery .item .overlay a:hover {text-decoration: none;} /* TO DO : box shadow on hover */

/************* PAGE INT *************/
#page-int {padding: 3rem 0; color:#fff}
#page-int .owl-carousel {position: relative;}
#page-int .owl-carousel .owl-nav {position: absolute;width: 100%;display: flex;flex-direction: row;justify-content: space-between;top: 40%; padding: 0 1.2rem;}
#page-int .owl-carousel .item {position: relative;}
#page-int .owl-carousel .item .caption {position:absolute; display:block; width:100%; background:rgba(0,0,0,0.5); color:#fff; padding:1rem; bottom:0; font-size: 0.9rem;}
#page-int ul {margin-top:1rem}
#page-int ul li {font-weight: 300;}
#page-int.activites .item {margin: 1rem auto}
#page-int.activites .item img {object-fit: cover;height:15rem; width:100%}
#page-int.contact form .form-control {border-radius:0; border:none}
#page-int.contact form .btn-send {height: 100%;width:100%;margin-left:0.4rem}
#page-int.contact form .form-check label {font-weight: 300;}
#page-int.references i {font-size:3rem; margin-right:0.5rem}
#page-int.entreprise .owl-entreprise .item img {object-fit: cover; width:100%;height:300px;}

/************* FOOTER *************/
footer {background:#266c80; color:#fff;padding:3.12rem 1.8rem;}
footer .titre {text-transform: uppercase;font-weight: 700;font-size: 1.12rem;}
footer .titre::after {content:''; width:4.3rem; height:1px; background:#fff; display:flex; margin-top:1.12rem}
footer .content {margin-top:1.8rem}
footer .content ul li a, footer .content ul li{color:#fff; font-weight: 300; line-height: 1.3;}
footer .content ul.menu li {margin: 0.75rem 0}
footer p {font-weight: 300; font-size: 1rem;}
.subfooter {background:#518999; color:#fff; padding:0.9rem; font-weight:300 ;}
.subfooter a {color:#fff}