/* lugisol.com - CSS - Luc GILBERT october 2022 */

/* 22 november 2024 : added Regen Microscopy link in header */

 /* For all */
:root {--fond: var(--fpx);}
html {font-size: 100%;}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* For small mobile phones (default, and smallest size first) */
@media only screen and (orientation: landscape) {:root {--fond: var(--fls);}}
@media only screen and (orientation: portrait) {:root {--fond: var(--fps);}}

/* Mobile phones  */
@media only screen and (min-width: 512px) and (orientation: landscape) {:root {--fond: var(--flm);}}
@media only screen and (min-width: 512px) and (orientation: portrait) {:root {--fond: var(--fpm);}}

/* Small tablets: */
@media only screen and (min-width: 1024px) and (orientation: landscape) {:root {--fond: var(--fll);}}
@media only screen and (min-width: 1024px) and (orientation: portrait) {:root {--fond: var(--fpl);}}

/* All wider screens: tablets, PC's... */
@media only screen and (min-width: 2048px) and (orientation: landscape) {:root {--fond: var(--flx);}}
@media only screen and (min-width: 2048px) and (orientation: portrait) {:root {--fond: var(--fpx);}}

body {
  color: #035111;
  text-align: center;
  font-weight: bold;
  font-family: Urbanist, sans-serif;
  background-image: var(--fond);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 0px;
  background-color: #D9D9D9;
  background-size: cover;
  clear: both;
}

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Responsive top menu bar vvvvvvvvvv */
#menuContactId a {color: palegreen;} /* palegreen: #98fb98 */
:root {--hlcol: #8ae58a;}
#EMOpticsLogoId {height: 16px;}
#RegenLogoId {height: 16px;}
#EMOpticsId {padding-left: 2px;}
#RegenId {padding-left: 2px;}
#menuContactId a {color: var(--hlcol);}

ul.topnav {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content max-content auto max-content;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: grey;
  font-size: xx-large;
}

.menuitem, .active, .dropdown {
  line-height: 1;
  text-align: left;
  color: white;
  text-decoration: none;
  font-size: 0.75em;
  padding: 0px 10px 0px 10px;
}

.menuitem a, .dropBtn {
  display: inline-block;
  text-align: center;
  color: white;
  text-decoration: none;
}

.dropdown:hover .dropBtn, .menuitem:hover:not(.active), .dropdown-content a:hover {background-color: #038151;}

.active, .active a {
  background-color: #04AA6D;
  color: white;
  cursor: default;
  text-decoration: none;
}

ul.topnav li.dropdown {text-align: right;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: grey;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left: -32px;
  text-align: right;
  color: white;
  text-decoration: none;
  padding: 10px 10px 10px 10px;
}

.dropdown-content a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: right;
  padding: 3px 4px;
}

.dropdown:hover .dropdown-content {
  display: block;
  padding: 3px 4px;
}

@media screen and (max-width: 750px) {
  ul.topnav {grid-template-columns: auto auto auto auto;}
  .menuitem, .active, .dropdown {
    padding: 5px 5px 5px 5px;
    text-align: center;
    font-size: 0.6em;
  }
/*  .active, .active a {text-decoration: none;} */
  #menuEMOpticsId {text-align: left;}
  .dropdown:hover .dropdown-content {
    display: inline;
    margin-left: -55px;
    margin-top: 22px;
  }
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Responsive top menu bar ^^^^^^^^^^ */

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Cookie consentment bar vvvvvvvvvv */
#cookieBtn {display: none;}

#cookieBtn:checked + #cookieBar {
  display: none;
  bottom: -100%;
}

#cookieBtnLbl {
  display: inline-block;
  padding: 0.25em;
  background: #04AA6D;
  color: white;
}

#cookieBtnLbl:hover {
  cursor: pointer;
  background: #038151;
}

#cookieBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: black;
  text-align: center;
  background-color: grey;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  -moz-transition: 1s ease;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cookie consentment bar ^^^^^^^^^^ */

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Global vvvvvvvvvv */
.content {font-size: 4vmin;}
.normContent {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 450px) {
  .normContent {grid-template-columns: 5% 90% 5%;}
}
.hl, #homeTitleDiv h1 {color: var(--hlcol);}
.sc {font-variant: small-caps;}
.cn {text-align: center; font-size: 4vmin;}
.sl {text-decoration: underline;}
h1 {font-size: 10vmin;}
h2 {font-size: 9vmin;}
h3 {font-size: 8vmin;}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Global ^^^^^^^^^^ */

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Main page vvvvvvvvvv */
#homeTitleDiv {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
#homeTitleDiv img {height: 6vmin;}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Main page ^^^^^^^^^^ */

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv About page vvvvvvvvvv */
#aboutDiv2 img {
  height: 35vmin;
  border: 5px outset grey;
  float: left;
  margin-right: 15px;
}
#aboutDiv2 p {text-align: justify;}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ About page ^^^^^^^^^^ */

/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv Contact page vvvvvvvvvv */
.contact {text-align: left;}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Contact page ^^^^^^^^^^ */