/* Feuille de style CSS personnalisée pour Philipona & Berthelot */

body {
font-family: "Source Sans Pro", sans-serif;
}
a {
color:var(--blue);
text-decoration: none;
}
a:hover {color: black}
h1 {
font-size: 60px;
line-height: 68px;
margin-bottom: 20px;
font-weight: 700;
}
h2 {
font-size: 40px;
line-height: 48px;
margin-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
}
#content {
font-size: 22px;
line-height: 30px;
font-weight: 600;
}

/* Alignement */
.center {text-align: center}
.right {text-align:right}
      
/* Responsive */
.desktop {display: block}
.mobile {display: none}
@media screen and (max-width: 896px) {
.desktop {display: none}
.mobile {display: block}
}

/* Palette de couleurs */
:root {
--yellow: #FFE900;
--orange: #FFA30D;
--blue: #1991FF;
--green: #58D62D;
--pink: #FF26E1;
}
.yellow {color: var(--yellow)}
.yellow:hover {color: black}
.orange {color: var(--orange)}
.orange:hover {color: black}
.blue {color: var(--blue)}
.blue:hover {color: black}
.green {color: var(--green)}
.green:hover {color: black}
.pink {color: var(--pink)}
.pink:hover {color: black}
.black {color: black}
.black:hover {color: var(--blue)}

/* Cookie Banner */
.cookie-banner {
position:fixed;
width:280px;
bottom: 20px;
left:20px;
background:var(--blue);
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(--yellow);
color: black;
font-size: 18px;
margin-top:20px;
float:right
}
#cookie {color: white}

/* Banner Top */
#logo {width: 100%}
@media screen and (max-width: 414px){
#logo {width: 230px}
}
@media screen and (max-width: 320px){
#logo {width: 180px}
}
.banner_top {
position: absolute;
top: 25px;
left: 25px;
display: flex;
flex-wrap: wrap;
}
#bannerLink {
font-size: 22px;
line-height: 30px;
font-weight: 600;
color: white;
text-decoration:none;
}
#bannerLink:hover {
color:var(--yellow);
cursor: pointer;
}

/* Content */
.content {
margin: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position-y:0;
background-position-x:0;
background-repeat: no-repeat;
}

.intro {background-image:url("../images/intro-md.jpg")}
.installations {background-image:url("../images/installation-md.jpg")}
.domotique {background-image:url("../images/domotique_md.jpg")}
.bornes {background-image:url("../images/bornes-md.jpg")}
.luminaires {background-image:url("../images/luminaires-md.jpg")}

.content_box_left {
width: 650px;
padding: 25px 50px 25px 25px;
position: relative;
top: 18%;
left: 0;
}

.content_box_right {
width: 650px;
padding: 25px;
position: relative;
top: 18%;
left: calc(100% - 650px);
}
.button_pos {
text-align: center;
position: relative;
top: calc(100% - 80px);
}
.nav_button {font-size: 50px}
.button_pos_mobile {
text-align: center;
margin-top: 50px;
}

/* e-tec */
#e-tec {margin-bottom: 100px}
.e-tec_box {
background-color: white;
border: solid 1px black;
border-radius: 10px;
padding: 25px;
margin-bottom: 40px;
}
.e-tec_frame {
width: 100%;
height: 500px;
border: none;
}
@media screen and (min-width: 1290px) {
.e-tec_frame {height: 640px}
}
/* Footer */
.footer {
padding: 25px 0;
background-color: var(--yellow)
}
#footerLink {
font-size: 22px;
line-height: 30px;
font-weight: 600;
color: black;
text-decoration:none;
}
#footerLink:hover {
color:var(--blue);
cursor: pointer;
text-decoration: underline;
}

/* Modal */
@media (min-width: 576px) {
.modal-dialog {
max-width: 80%;
margin: 1.75rem auto;
}
}  
#modalCall:hover {
cursor: pointer;
text-decoration: underline;
}
.modal-container {
padding: 40px;
}
#modalButton {
float:right;
font-size:30px;
font-weight:700;
border-radius: 10px;
}
#modalButton:hover {
cursor: pointer;
}
.btn-primary {
color: #fff;
background-color: var(--blue);
border-color: var(--blue);
}
.btn-primary:hover {
color: #fff;
background-color: black;
border-color: black;
}

/* Logo ELITE */
.logoElite {
width: 280px;
margin-top: -80px;
float: right;
}

/* Responsive */

@media screen and (max-width: 896px){
.content {height:auto}
.intro, .installations, .domotique, .bornes, .luminaires {background-image:none}
.content_box_left, .content_box_right {
width: 100%;
padding: 25px;
top: 0;
left: 0;
}
.logoElite {
text-align: left;
margin-top: 40px;
margin-bottom: 40px;
float: none;
}
}
 
@media screen and (max-width: 414px) {
h1 {font-size: 44px; line-height: 48px}
h2 {font-size: 34px; line-height: 38px}
}