@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic');

:root { --bg: #212122; --color1: #27a848; --color2: #229a40; }

html { scroll-behavior: smooth; }
body { background:#FFF; font-family: 'Open Sans'; color: #000; font-size: 19px; }
.container { max-width: 1500px; }

h1, h2, h3, h4 { font-weight: bold; }
h1, .h1 { font-size: 1.5em; font-weight: 600; margin-bottom: 1rem; }
h2, section h1 { font-size: 1.8em; text-transform: uppercase; margin-bottom: 2.5rem; }
h2 span, section h1 span, section p span { color: var(--color1); }
h2::after, section h1:after { content: '';  width: 55px; height: 3px; background: var(--color1); display: block; margin-top: 13px; }
h2.text-center::after { margin: 13px auto 0 auto; }
h3 { font-size: 1.2em; margin: 2rem 0 1.5rem; }
h4 { font-size: 1em; margin-bottom: 1.2rem; }
label { font-weight: 600; }
a { color: #000; text-decoration: none; transition: all 0.3s ease-out; }
a:hover { color: var(--color1); }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.small { font-size: 0.7em; }
.intro { font-style: italic; text-align: right; }
.fluid { width: 100%; }
.nomargin { margin: 0!important; }
.nopadding { padding: 0; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mb-1 { margin-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.mb-3 { margin-bottom: 3rem!important; }
.mb-4 { margin-bottom: 4rem!important; }
.mt-2 { margin-top: 2rem!important; }
.pl { padding-left: 3rem; }
.pr { padding-right: 3rem; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.only-xs { display: none; }
.clear { clear: both; }
.border { border:1px solid #3a526a; }
.btn { padding: 1rem; line-height: 15px; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease-out; } 
.btn:first-child:active { background: var(--color2); border-color:var(--color2); }
.btn-primary, .button { border-color: var(--color1); background: var(--color1); color: #FFF; letter-spacing: 0.5px; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { border-color: var(--color2)!important; background: var(--color2)!important; color: #FFF!important; }
.btn-primary i { padding-right: 5px; }
.tooltip { --bs-tooltip-bg: var(--color1); --bs-tooltip-color: #FFF; }
.form-control { letter-spacing: 0.2px; font-weight: 600; font-size: 1.1em!important; }
.white { color: #FFF; }
.green { color: green; }
blockquote { font-size: 1.1em; background: #FFF; border-left: 5px solid var(--color1); padding: 2rem; margin-bottom: 2rem; }
.list { list-style: none; padding: 0; margin: 0 0 1rem; }
.list li { background: #FFF; border:1px solid var(--color1); padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; }
.list li i { font-size: 0.8em; color: var(--color1); margin-right: 0.5rem; }
.opacity { position:relative; }
.opacity::before { background: rgba(0, 0, 0, 0.3); content: ""; height:100%; left:0; position:absolute; top:0; width:100%; z-index:0; }
.bg_green { background: var(--color1); }
.bg_green a:hover { color: #000!important; }
.bg_black { background: var(--bg); }

/* Navbar */
.navbar { height: 13vh; background: var(--bg); padding: 1.5rem 0; }
.navbar-brand { padding: 0; margin: 0; }
.navbar-brand img { margin-top: 2rem; height:170px; transition: all 0.3s ease-out; }
.navbar-brand img:hover { opacity: 0.8; }
.nav-link { color: #FFF; font-size: 1em; padding: 1rem 0.5rem!important; transition: all 0.3s ease-out; }
.nav-link:hover, .nav-link:active, .nav-link.active { color: var(--color1)!important; }
.dropdown-menu { border:0; border-radius: 0; left: 10px!important; font-size: 1.1em; }
.dropdown-item { padding: 0.5rem 1rem; }
.dropdown-item:focus, .dropdown-item:hover { color: var(--color1)!important; background: none; }
.navbar { padding: 0;  }
.navbar .btn { font-size: 1.1em; font-weight: 600!important; }
.navbar .btn-secondary { background: none; border-color:#000; color: #000; }
.navbar .btn-secondary:hover { background: #000; border-color:#000; color: #FFF!important; }
.navbar .panneaux { background: #FFF; color: #000; margin-right: 1rem; }
.navbar .panneaux:hover, .navbar .panneaux.active { color: var(--color1); }
.navbar .contact { background: var(--color1); }
.navbar .contact:hover, .navbar .contact.active { color: #000!important ; }
.navbar-toggler { background:#FFF; color: #000; font-weight: 600; border: 0; padding: 0.5rem 1rem; }

/* Section */
section { padding-top: 4rem; }

/* Home */
#home { background: #f6f4ef; }
#video { width: 100%; height: 87vh; object-fit: cover; }
#video-caption { position: absolute; width: 80%; left: 11%; bottom: 30%; /*background: rgba(255, 255, 255, 0.7); padding: 2rem; border-left:5px solid var(--color1);*/ }
#video-caption h1 { font-size: 3em; color: #FFF; text-shadow: 1px 1px #000; }
#video-caption p {  margin-bottom: 3rem; font-size: 2em; color: #FFF; text-shadow: 1px 1px #000; }

/* Parallax */
#parallax { background-image: url('../pictures/home/parallax.png'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 5rem 0; text-align: center; }
#parallax h3 { font-size: 2em; color:#FFF; margin: 0 0 2rem; }
#parallax p { font-size: 1.2em; color:#FFF; margin: 0 0 2rem; }

/* Title */
#title { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 4rem 0; }
#title h1 { margin-bottom: 2rem; font-size: 2.8em; text-transform: uppercase; color: #FFF; text-shadow: 1px 1px #000; }
#title p {  margin: 0; font-size: 1.5em; color: #FFF;  text-shadow: 1px 1px #000; }

/* Expertises */
#expertises { background: var(--bg); padding: 4rem 0; margin-top: 3rem; }
#expertises h2 { color:#FFF; }
#expertises a { position: relative; text-decoration: none; }
#expertises .shadow { background: #000; width: 100%; height: 300px; opacity: 0; transition: all 0.3s ease-out; }
#expertises a:hover .shadow { opacity: 30%; }
#expertises a:hover .expertise_text { bottom:0; }
.expertise_detail { position: relative; height: 300px; overflow:hidden; background-size: cover; background-position: center center; margin-bottom:1.5rem; }
.expertise_text { position: absolute; z-index: 1; left: 0; bottom: -80px; width: 100%; padding: 1.5rem; transition: all 0.2s; }
.expertise_text h3 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 25px; text-shadow: 1px 1px #000; }
.expertise_text h3, .expertise_text p { color: #FFF; }
.expertise_text p { margin: -4px; }
.expertise_text .btn { width: 100%!important; font-size: 0.9em; text-transform: uppercase; line-height: normal; }

/* Why */
#why { background: var(--bg); padding: 4rem 0; }
.why_detail { padding: 0 1rem; }
#why h2 { color: var(--color1); }
#why h3 { font-size: 1.3em; font-weight: 100; color: #FFF; }
#why .number { display: inline-block; width: 40px; height: 40px; border-radius: 40px; background: var(--color1); color: #FFF; text-align: center; line-height: 40px; margin-right: 0.5rem; }

/* How */
.how_detail { text-align: center; }
.how_detail h4 { font-size: 1.3em; }
.how_detail .icon { font-size: 3.6em; color: var(--color1); }

/* Partners */
#partners { padding-bottom: 3rem; }
#partners .box { min-height: 430px; }

/* Gallery */
.gallery_detail { position: relative; height: 400px; overflow:hidden; background-size: cover; background-position: top center; }
#gallery a:hover .shadow { opacity: 40%; }
#gallery a:hover .icon { opacity: 100%; }
#gallery .shadow { background: #000; width: 100%; height: 600px; opacity: 0; transition: all 0.3s ease-out; }
#gallery .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.3s ease-out; width: 70px; height: 70px; border: 1px solid #FFF; border-radius: 70px;  text-align: center; line-height: 80px; }
#gallery .icon i { font-size: 2em; color: #FFF; }
#gallery .gallery_caption { padding-top: 1rem; margin-bottom: 2rem; font-weight: bold; text-align: center; }

/* Box */
.box { background: #FFF; border-radius: 15px; padding: 2rem; margin-bottom: 2rem;}
.box h3 { margin-top: 0; }

/* Group */
#group { background: #f6f4ef; }

/* Animations */
#animations { display: flex; }
.animation_detail { _flex: 1; opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
.animation_detail.show { opacity: 1; transform: translateY(0); }

/* Contact */
#contact { background: #f6f4ef; }
.contact_detail { background: #FFF; padding:2rem; margin-bottom: 2rem;  }
.contact_detail p { margin: 0; }
.contact_detail i { font-size: 3em; color: var(--color1); margin-right: 1.8rem; }
.mb-form { margin-bottom: 1.5rem; }
.input-group-text { font-size: 1.1em; padding: 0 1rem; }
.form-control, .form-select { border-radius: 0; padding: 0.6rem 1rem; font-size: 1em; color: #333; }

/* Legal */
#mentions { text-align: left; font-size: 0.9em; }
#mentions h2 { text-align: left; font-size: 2em; margin: 2rem 0 1rem; }

/* Footer */
footer { background: var(--bg); color:#FFF; font-size: 0.8em; }
footer .border-right { border-right:1px solid #FFF; }
.footer_detail { padding: 1rem 3rem; }
.footer_detail p { margin-bottom: 0.5rem; }
.footer_detail b { text-transform: uppercase; font-weight: 600; }
.footer_detail a { color:#FFF; text-decoration: none; }
.footer_detail a:hover { color: var(--color1); }
.footer_detail ul { list-style: none; padding: 0; margin: 0; }
.footer_detail ul li { margin-bottom: 0.5rem; }
.footer_detail ul li:last-child { margin: 0; }
.footer_detail .logo { max-height: 155px; }
.footer_detail .logo:hover { opacity: 0.8; }
.footer_detail .btn { font-size: 0.9em; width: 100%; }
.footer_detail .btn-primary { border-color: #FFF; background: #FFF; color: var(--color1); }
.footer_detail .btn-primary:hover, .footer_detail .btn-primary:active { border-color: #FFF!important; background: #FFF!important; color: #000!important; }
#socials li { float: left; margin-right: 10px; }
#socials li a { display: block; width: 40px; height: 40px; line-height: 39px; background: #FFF; border:1px solid #FFF; text-align: center; font-size: 1em; color: #337ab7; }
#socials li a:hover { background: #fec54c; color: #000; }
#legal { background: var(--bg); border-top:1px solid #CCC; padding: 1rem; font-size:0.9em; }
#legal a { color: #FFF; }
#legal a:hover { color: var(--color1); }

/* Mobile */
@media only screen and (max-width: 768px) {

    body { font-size: 16px; }
	.hidden-xs { display:none; }
    .only-xs { display: block; }
    .mb-xs-2 { margin-bottom: 2rem; }
    .pr, .pl { padding: 0; }
    h2 { margin-bottom: 1rem; }

    .navbar { height: 11vh; padding: 1rem 0; }
    .navbar-brand img { height:60px; margin-top: 0; }
    .nav-link, .nav-link.show, .dropdown-item { color: #FFF!important; text-shadow: none; padding: 0.9rem!important; text-align: center; }
    .dropdown-menu { padding: 0; margin: 0; background: #000; }
    .navbar .btn { font-size: 1em; }

    #offcanvasNavbar { background: var(--bg); }
    .offcanvas-title { color: #FFF; }

    section { padding-top: 2rem; }
    section .box { padding: 1rem; }

    #video { height: 89vh; min-height: 400px; }
    #video-caption { left: 5%; bottom:35%; width: 90%; font-size: 0.6em; text-align: center; }
    
    #title { padding: 2rem; }
    #title h1 { font-size: 2em; }

    .service_detail_img, .service_detail_box { display: block; width: 100%; }
    .service_detail_box:before { display: none; }

    #expertises { padding: 1rem 0; }
    #expertises a:hover .expertise_text { bottom: -80px; }

    #partners { padding-bottom: 1rem; }
    #partners .box { min-height: auto; }

    .why_detail { margin-bottom: 1rem; }
    #gallery .gallery_caption { margin-bottom: 2rem; }

    #parallax { background-attachment: scroll; } 

    footer { font-size: 1em; }
    footer .border-right { border: 0; }
    footer .display_table { height: auto; }
    .contact_detail { width: 100%; }
    .footer_detail { text-align: center; margin-bottom: 0.5rem; }
    .footer_detail .logo { height: 70px; transition: all 0.3s ease-out; }
    .footer_detail-brand .logo:hover { opacity: 0.8; }

    label, .form-control, .form-select { font-size: 1.1em; }
}