/* User CSS for Eltech-System 
Author: eev | aae
Version: 01/2022 */

@import "nav-mobile.css";

/* Colors */
:root {
--cassiopeia-color-primary: #2d2857 !important;
--cassiopeia-color-link: #00abe9;
--cassiopeia-color-hover: #00abe9 !important;
}

/* Styles */
body {
hyphens:none;
-webkit-hyphens:none;
-ms-hyphens:none;
-moz-hyphens:none;
}
h1, h2, h3 {margin-bottom: 25px}

/* Container */
.container-header {
background-color: var(--cassiopeia-color-primary);
background-image: none;
}
.footer {background-image: none; margin-top: 100px}
.back-mobile-nav {
position: absolute:
left: 0;
bottom: 0;
width: 100%;
background-color: var(--cassiopeia-color-primary);
color: white;
}
.back-mobile-nav a {text-decoration: none; font-weight: 700; transition: 0.6s}
.back-mobile-nav a:hover {color: white}
.bg-grey {background-color: #F6F7F9; padding: 50px; border-radius: 5px}
.mod-articlesnews-horizontal li {
background-color: white;
}
.top100 {margin-top: 100px}
.bottom100 {margin-bottom: 100px}
.top50 {margin-top: 50px}
.bottom50 {margin-bottom: 50px}

/* Nav desktop */
.bg-eltech {background-color: none;}
.nav-item {text-transform: uppercase;}
.navbar-dark .navbar-nav .nav-link {color:white; transition: 0.6s}
.navbar-dark .navbar-nav .nav-link:hover {color: var(--cassiopeia-color-link) !important}
.active {font-weight: 700; color: var(--cassiopeia-color-link) !important}

/* Mobile Main Logo */
.mobile-main-logo {
width: 300px;
text-align: left;
margin-top: 25px;
padding: 0 25px;
}

/* Call to Action */
.call-to-action {
background-color: var(--cassiopeia-color-link);
color: white !important;
padding: 15px;
border-radius: 5px;
font-size: 20px;
font-weight: 600;
text-decoration: none;
}
.call-to-action:hover {background-color: black}

/* Teasers */
.teaser {
width: 100px;
height: 100px;
background-color: var(--cassiopeia-color-link);
border-radius: 50%;
text-align: center;
margin: 0 auto 15px auto;
}
.teaser i {
color: white;
font-size: 40px;
line-height: 100px;
}
.flexbox-teaser {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.flexbox-teaser > div {
width: 200px;
text-align: center;
font-size: 18px;
color: var(--cassiopeia-color-lin);
font-weight: 600;
margin-bottom: 50px;
}

/* e-tec */
.container-etec {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 75%; /* 4:3 Aspect Ratio */
}
.iframe-etec {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.link-etec a {
text-decoration: none;
font-size: 24px;
line-height: 34px;
}
.link-etec a:hover {color: black}

/* video 3/2 */
.container-video {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
.iframe-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}

/* Articles */
.item-image {width: 100%}
.imgtop {width: 100%; margin-bottom: 100px}

/* Footer Content */
.footer a {
color: var(--cassiopeia-color-link);
text-decoration: none;
font-weight: 700;
transition: 0.2s;
}
.footer a:hover {
color: white;
}

/* Button */
.btn-primary {
background-color: var(--cassiopeia-color-link);
border-color:  var(--cassiopeia-color-link);
}
.btn-primary:hover {
background-color: black;
border-color:  black;
}
.btn-secondary {
background-color: var(--cassiopeia-color-link);
border-color:  var(--cassiopeia-color-link);
color: white;
font-weight: 600;
}
.btn-secondary:hover {
background-color: black;
border-color:  black;
color: white !important;
text-decoration: none !important;
}
.btn-secondary:focus {
background-color: var(--cassiopeia-color-link);
border-color:  var(--cassiopeia-color-link);
}
.icon-chevron-right {display:none}

/* Logos Partenaires */
.flexbox-partenaires {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
.flexbox-partenaires > div {margin-bottom: 25px; margin-right: 50px; width: 140px}
.flexbox-partenaires > div:last-child {margin-bottom: 25px; margin-right: 0}
#partenaires {transition: 0.2s}
#partenaires:hover {filter: grayscale(100%)}

/* Visform */
.position-left {justify-content: start}
.vis_mandatory {color:var(--cassiopeia-color-link)!important}
.asterix-ancor::after {color:var(--cassiopeia-color-link)!important}

/* Back to top */
.back-to-top-link {
background-color: var(--cassiopeia-color-link);
border-color: var(--cassiopeia-color-link);
color: white;
height: 64px;
width: 64px;
border-radius: 5px;
font-size: 40px;
line-height: 64px;
padding: 0;
text-align: center;
transition: 0.2s;
z-index: 1;
}
.back-to-top-link:hover {
background-color: black;
border-color: black;
color: white !important;
}
.back-to-top-link:focus {
background-color: var(--cassiopeia-color-link);
border-color: var(--cassiopeia-color-link);
}


/* Media Queries */
.desktop {display:none}
.mobile, .text-intro-mobile {display:block}
@media screen and (min-width: 900px){
.desktop {display:block}
.mobile, .text-intro-mobile {display:none}
.modal-dialog {max-width: 60%}
}
@media screen and (max-width: 899px) {
.back-to-top-link {left: 15px; bottom: 20px}
#partenaires {scale: 0.6}
.flexbox-partenaires {justify-content: start}
.flexbox-partenaires > div {margin-right: 25px}
}
.spacing-btn {display:none}
@media screen and (max-width: 450px){
.mobile-main-logo {width: 100%; text-align: center}
.flexbox-teaser > div {width: 150px}
.bg-grey {padding: 25px}
.container-etec {padding-top: 160%}
}