/* CSS AGP PRIOLO */

/* Imports */
@import 'mediaqueries.css';
@import 'slideshow.css';
@import 'navigation.css';

/* Colors */
:root {
--greyblue:#104562;
--darkblue:#004B93;
--darkblue2:#002B54;
--mediumblue:#0098D8;
--lightblue:#7FC4FD;
--lightgrey:#F5F5F5;
--darkgrey:#5A5A5A;
}
#greyblue {background-color:var(--greyblue)}
#mediumblue {background-color:var(--mediumblue)}

/* Styles */
body {font-family:canada-type-gibson, sans-serif}
a {text-decoration:none; color:var(--darkblue2); transition:color 0.3s ease}
a:hover {color:var(--darkblue) !important; text-decoration:none}
.popup {position:absolute; top:25px; left:20%; width:60%; z-index:1000}
.listing {line-height:18px; margin-bottom:10px}
.center {text-align:center}
.left {text-align:left}
.right {text-align:right}
#ref {line-height:40px !important; list-style-type:square !important; font-size:18px; color:var(--darkgrey)}
.title {font-size:40px;}
@media screen and (max-width:1008px){
.title {font-size:28px}
}

/* Font-Size */
h1 {font-size:54px; color:var(--darkblue)}
h2 {font-size:36px; color:var(--darkblue)}
h3 {font-size:28px; color:var(--darkblue)}
p {font-size:18px; color:var(--darkgrey)}
.thin {font-weight:100; font-style:normal}
.thin-italic {font-weight:100; font-style:italic}
.light {font-weight:200; font-style:normal}
.ligh-italic {font-weight:200; font-style:italic}
.book {font-weight:300; font-style:normal}
.book-italic {font-weight:300; font-style:italic}
p {font-weight:400; font-style:normal}
.italic {font-weight:400; font-style:italic}
.medium {font-weight:500; font-style:normal}
.medium-italic {font-weight:500; font-style:italic}
.semi-bold {font-weight:600; font-style:normal}
.semi-bold-italic {font-weight:600; font-style:italic}
.bold {font-weight:700; font-style:normal}
.bol-italic {font-weight:700; font-style:italic}
.heavy {font-weight:900; font-style:normal}
.heavy-italic {font-weight:900; font-style:italic}

/* Fontawsome */
.fa, .far, .fas {color:var(--darkblue2); font-size:20px !important}
.fa:hover, .far:hover, .fas:hover {color:var(--darkblue) !important}
#fa_white:hover {color:var(--darkblue2) !important}
#fa_static:hover {color:white !important}
.fa-lightbulb {transform:rotate(180deg)}

/* Intros */
.parallax {margin-top:0px; background-attachment:fixed; background-repeat:no-repeat}
#prestations {background-image:url("../images/vehicule-medium.jpg"); min-height:70vh; margin-bottom:0; background-size:cover; background-position-x:center; background-position-y:bottom}
#entreprise {background-image:url("../images/exterieur-large.jpg"); min-height:70vh; margin-bottom:0; background-size:cover; background-position-y:bottom; background-position-x:center}
#formation {background-image:url("../images/apprentis.jpg"); min-height:40vh; margin-bottom:0; background-size:cover; background-position:center}
#electromenager {background-image:url("../images/electromenager-large.jpg"); min-height:70vh; margin-bottom:0; background-size:cover; background-position-x:center}
#luminaires {background-image:url("../images/luminaires-large.jpg"); min-height:70vh; margin-bottom:0; background-size:cover; background-position-x:center}
#references {background-image:url("../images/img1.jpg"); min-height:70vh; margin-bottom:0; background-size:cover; background-position-y:-200px; background-position-x:center}

/* Galery */
.filter-button {font-size:18px; border:1px solid #42B32F; border-radius:5px; text-align:center; color:#42B32F; margin-bottom:30px}
.filter-button:hover {font-size:18px; border:1px solid #42B32F; border-radius:5px; text-align:center; color:#ffffff; background-color:#42B32F}
.btn-default:active .filter-button:active {background-color:#42B32F; color:white}
.port-image {width:100%}
.gallery_product {margin-bottom:30px}
#gallery {margin:25px auto; width:100%; cursor:pointer}
/* The Modal (background) */
.modal {display:none; position:fixed; z-index:1; padding-top:100px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:black; top:0}
/* Modal Content */
.modal-content {position:relative; background-color:#fefefe; margin:auto; padding:0; width:90%; max-width:1200px}
/* The Close Button */
.close {color:white; position:absolute; bottom:20px; right:25px; font-size:35px; font-weight:bold}
.close:hover, .close:focus {color:#999; text-decoration:none; cursor:pointer}

/* Slider */
/* Hide the slides by default */
.mySlides {display:none}
/* Next & previous buttons */
.prev, .next {cursor:pointer; position:absolute; top:40%; width:auto; padding:16px; color:var(--darkblue2) !important; font-weight:bold; font-size:40px; transition:0.6s ease; border-radius:0 3px 3px 0; user-select:none; -webkit-user-select:none}
@media screen and (max-width:768px) {.prev, .nect {top:20%;}}
/* Position the "next button" to the right */
.next {right:0; border-radius:3px 0 0 3px}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color:rgba(0, 0, 0, 0.8)}
/* Number text (1/3 etc) */
.numbertext {color:white; font-size:24px; font-weight:bold; padding:8px 12px; position:absolute; top:0}

/* Caption text */
.caption-container {text-align:center; background-color:black; padding:40px 16px; font-size:20px; color:white}

/* Accordion */
.accordion {color:var(--darkblue); cursor:pointer; padding-bottom:10px; width:100%; text-align:center; border:none; outline:none; transition:0.4s; margin:20px 0px}
.panel {padding:0 18px; display:none; overflow:hidden}

/* Info */
.info {position:absolute; top:0; left:25%; width:50%; z-index:10}

/* Teasers */
.teasers {padding:0; position:absolute; top:25%; width:100%; z-index:1; text-align:center}
#teasers_img {width:100%; margin-bottom:20px; border-radius:5px}
#teasers_title {color:white; font-size:36px; font-weight:500}
@media screen and (max-width:1008px){
#teasers_title {font-size:24px}
}

/* Logo */
.logo2 {position:absolute; top:0; margin:0 40%; width:20%; z-index:1}

/* intros */
.intro {padding-top:80%; text-align:center; padding:20%}
.intro_suppl {color:white; font-size:22px; font-weight:600}
.intro_formation {padding-top:10%; text-shadow:4px 4px 4px rgba(0, 0, 0, 0.5); text-align:center}

/* Button */
.btn-primary {color:white !important; background-color:var(--darkblue2) !important; border-color:var(--darkblue2) !important}
.btn-primary:hover {color:#fff !important; background-color:var(--darkblue) !important; border-color:var(--darkblue) !important}
.btn-primary:focus, .btn-primary.focus {box-shadow:0 0 0 0.2rem rgba(0, 0, 0, 0.5) !important}
.btn-primary.disabled, .btn-primary:disabled {color:#fff; background-color:var(--darkblue) !important; border-color:var(--darkblue) !important}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {color:#fff; background-color:var(--darkblue) !important; border-color:var(--darkblue) !important}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow:0 0 0 0.2rem rgba(0, 0, 0, 0.5) !important}
.btn-light {color:var(--darkblue) !important}
#call-to-action {font-size:36px; line-height:36px; font-weight:600; margin:0 5%; border-radius:10px; padding:20px}

/* Blocs de contenu */
.box {margin:50px 10%}
.box-2 {margin:50px 0px}
.box_grey {margin:100px 0px; padding:50px 0px; background-color:var(--lightgrey)}
.box_grey2 {margin:0 0 100px 0; padding:50px 0px; background-color:var(--lightgrey)}
.box_greyblue {margin:5%; padding:25px; background-color:var(--greyblue); text-align:center; border-radius:10px}
.box_mediumblue {margin:5%; padding:25px; background-color:var(--mediumblue); text-align:center; border-radius:10px}
@media screen and (min-width:1008px) {
.box_mediumblue {height:600px}
}
.box_portrait {width:250px; height:250px; border-radius:125px; line-height:250px; background-size:cover; background-repeat:no-repeat; text-align:center; margin:auto; filter:grayscale(1); -webkit-filter:grayscale(1)}
.box_portrait:hover {filter:grayscale(0); -webkit-filter:grayscale(0)}

/* Footer */
.footer {margin:100px 0px 50px 0px; padding:50px 0px; background-color:var(--greyblue); text-transform:uppercase}
.footer a {color:white}
.footer a:hover {color:var(--darkblue)}
.footer i {color:white}
.footer p {color:white}
#logo-footer {
margin-top:100px;
text-align:right;
width:300px;
}
@media screen and (max-width:414px){
#logo-footer {text-align:left; width:250px}
}

/* Cookie Banner */
.cookie-banner {position:fixed; width:30%; top:calc(100% - 220px); left:35%; background:var(--greyblue); text-align:left; padding:20px; font-size:18px; z-index:999; border-radius:5px; box-shadow:0px 5px 10px rgba(0, 0, 0, 0.2)}
.cookie-vorhanden {display:none}
#set-cookie {background-color:var(--darkblue2); color:white; font-size:18px; margin-top:20px; float:right}

/* e-tec */
.container-e-tec {position:relative; width:100%; height:600px; margin-bottom:100px}
.responsive-iframe {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none}
.e-tec {color:white}
.e-tec:hover {color:var(--greyblue) !important}

/* Content Luminaires */
.flexbox {display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; gap:25px}
.flexbox > .card-body {width:250px; max-width:100%; padding:20px; border:solid thin var(--darkblue2); background-color:white; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5); border-radius:3px; height:auto; flex:none!important}
@media screen and (min-width:484px) {
.card-body:hover {box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2); transform:scale(1.2, 1.2); cursor:zoom-in}
}
#thumb_luminaires {width:100%; margin-bottom:20px}
.card-content {height:120px; font-size:16px; text-align:center}
.prix {background-color:var(--darkblue2); padding:10px; font-size:22px; font-weight:700; color:white; text-align:center; margin-top:20px}

/* Overlay */
.overlay, .overlay2 {position:absolute; bottom:100%; left:0; right:0; background-color:var(--mediumblue); overflow:hidden; width:100%; height:0; transition:.5s ease; border-radius:10px}
.container:hover .overlay {bottom:0; height:100%}
.container2:hover .overlay2 {bottom:0; height:100%}
.text {color:white; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center}

/* RGPD */
.rgpd {top:25vh}
@media screen and (max-width:768px){
.rgpd {margin-top:300px !important}
}

/* Alert */
.alert {padding:25px !important; margin-bottom:0 !important; border:none}
.close2 {float:none !important; font-size:16px !important; font-weight:400 !important; text-shadow:none !important; opacity:1 !important}
.close2:hover {cursor:pointer; color:var(--darkblue2)}
.alert-dissmissible {padding-right:0 !important}