/* CSS 4 Telec Renggli SA */

@import 'hamburger.css';
@import 'cookies.css';

body {color:#011A22; font-family:"bio-sans", sans-serif; scroll-behavior:smooth}
h1 {color:#DE1F25; margin-bottom:50px}
.subtitle {font-weight:600; color:#DE1F25}
hr {border-top:solid 3px; color:#DE1F25; opacity:1}

/* Top Banner */
.top-banner {background-color:white; padding:25px 0; box-shadow:0 5px 5px rgba(0, 0, 0, 0.5)}
.flexbox-top-banner {display:flex; justify-content:space-between; align-items:center}
.top-logo {width:320px;}
.top-logo #brand-logo {width:100%}

/* Navbar */
.nav-link {margin-left:50px; width:125px; height:45px}
.btn-primary {border:none; background-color:#DE1F25; color:white; font-size:18px; font-weight:500; text-transform:capitalize}
.btn-primary:hover {background-color:#011A22; color:white}

/* Intro */
.bg-intro {margin-top:130px; width:100%; height:75vh; background-image:url("../images/bg-intro-lg.jpg"); background-position:center; background-size:cover; background-attachment:fixed}
.bg-cover {width:100%; height:75vh; background-color:rgba(1,26,34,0.6); display:flex; align-items:center}
.bg-cover h1 {font-size:3rem; font-weight:600; color:white; margin-bottom:50px}
.picto {width:50%; float:right}

/* Teaser */
.teaser {display:none}
.img-teaser {transition:0.3s;width:100%}
.img-teaser:hover {filter:grayscale(1); cursor:pointer}
.call {width:100%; text-align:center; background-color:#DE1F25; padding:15px 0}
.call:hover {
background-color:#011A22;
cursor:pointer;
}
.call a {color:white; font-size:22px; font-weight:500; text-transform:capitalize; text-decoration:none}

/* Sections */
#electricite, #magasin {margin:100px 0}

/* Section électricité */
th {vertical-align:top; font-weight:400; padding-bottom:15px}
.img-grid {display:none}

/* Logos partenaires */
.flexbox-partner {width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:25px}

/* Tableaux */
th a {text-decoration:none; color:#DE1F25}
th a:hover {color:#011A22}

/* Flexbox Magasin */
.flexbox-magasin {display:flex; flex-wrap:wrap; gap:50px; justify-content:space-between; align-items:flex-start}
.flexbox-magasin > div {width:45%}


/* e-tec */
.e-tec {background-color:#f1f1f1; margin-top:100px; padding:100px 0}
.iframe-e-tec {width:100%; height:100%; display:flex; justify-content:center; align-items:center}
.iframe {width:100%; height:680px; border:none}

/* footer */
.footer {background-color:#011A22; color:white; padding-top:50px}
.footer a {color:white; text-decoration:none}
.footer a:hover {color:#DE1F25}

/* Modal Confidentialités & Impressum */
.modal-header .btn-close {background-color:var(--orange); color:white !important}
.modal-header .btn-close:hover {background-color:#0D0C00}
.modal-dialog {max-width:90% !important}
.modal-body a {color:var(--orange)}

/* Mediaqueries */
@media screen and (max-width:500px) {
.top-logo {width:280px}
}
@media screen and (max-width:993px) {
.desktop-nav {display:none}
.flexbox-magasin > div {width:100%}
.picto-red {display:none}
}
@media screen and (min-width:992px) {
.hamburger-menu {display:none}
.picto {width:100%; float:none}
.teaser {display:block}
.img-grid {display:block}
}