html, body, section {
  height  : 100%;
  
  box-sizing: content-box;
}

html {
  scroll-behavior  : smooth;
}

section {
  display  : block;
  height   : 100vh;
}

.even-content-box {
  background-color  : rgba(255, 255, 255, 1);
}

.odd-content-box {
  background-color  : rgba(0, 0, 0, 1);
  box-shadow : 3px 4px black;
}

.watermark {
  font-size  : 5rem;
  text-align  : center;
  color  : #E7E7E7;
  position  : absolute;
  left  : 50%;
  top  : 50%;
  transform  : translateX(-50%) translateY(-50%);
}

.clear {
  height: 1rem;
  margin: 1rem;
}

hr .separator {
  height  : 0px;
  border-top    : 1px solid #AFBCC6;
  border-bottom : 1px solid #EFF2F6;
  margin-bottom : 10px;
}

.clear-gap {
  padding-left  : 0;
  padding-right : 0;
}

#slide-section {
  width  : 100%;
  height : 25rem;

  align-items  : center;

  overflow : hidden;
  position : relative;

  top  : 10%;
}

#slide-section .carousel-item {
  /* display  : flex; */
  justify-content  : center;
  align-items  : center;
  flex-direction  : column;
  bottom  : 0;
  top  : 0;
  left:   0;
  right  : 0;
}

#news-intro h2 {
  color  : grey;
  margin-bottom  : 0.2rem;
  padding-top  : 1rem;
  font-size  : 48px;
  font-weight  : 700;
}

#news-intro p {
  color  : grey;
  margin : 0 0;
  font-size  : 1rem;
}

.contact-intro i {
  padding : 6px 0;
  margin  : 8px 0;
  border-radius : 15%;
  opacity : 0.8;
  background : black;
  color   : white;
  width   : 1.5rem;
  height  : 1.5rem;
}

.contact-intro label {
  padding : 2px;
  padding-left  : 20px;
  padding-right : 10px;
  margin  : 8px 0;
  float   : left;
}

.contact-intro span {
  padding  : 0rem 0.3rem;
  font-size  : 0.8rem;
}

.contact-intro p {
  padding: 5px;
}

/*--- Cover ---*/
.cover-home {
  height   : 100vh;
  /* background  : linear-gradient(rgba(2, 2, 2, 0.9), rgba(0, 0, 0, 0.8)), url("../img/background1.jpg") fixed center center; */
  background-size  : cover;
  display  : flex;
  align-items  : center;
  justify-content  : center 
}

#page-cover-content {
  margin  : 0
}

.cover-home p {
  font-size  : 1.4rem;
  font-weight : 700;
  color  : rgba(255, 255, 255, 1);
}

/*--- Intro ---*/
#page-intro {
  padding  : 1rem;
}

/*--- Header ---*/
header {
  height  : 100vh;
  transition : all 0.4s;
  padding : 2rem 0;
  background  : rgba(0, 0, 0, 1);
  box-shadow : 0px 4px linear-gradient(rgba(1, 1, 1, 0.6), rgba(0, 0, 0, 0.8));
}

#clear-head {
  height  : 10rem;
  background  : rgba(0, 0, 0, 1);
}

header.header-scrolled {
  background  : rgba(0, 0, 0, 0.8);
  height   : 4rem;
  padding  : 0.7rem 0;
}

header .logo h1 {
  margin  : 0;
  padding : 2px 0;
  font-size : 2.2rem;
  text-transform  : uppercase;
  letter-spacing  : 6px;
  line-height  : 1;
  font-weight  : 450;
}

header .logo h1 a {
  color : white;
  text-decoration  : none;
}

/*--- Main ---*/
main {
  
}

/*--- Footer ---*/


/*--- Navigation Menu ---*/
.nav-menu, .nav-menu * {
  margin  : 0;
  padding  : 0;
  list-style  : none;
}

.nav-menu > ul > li {
  position  : relative;
  white-space  : nowrap;
  float  : left;
}

.nav-menu a {
  display  : block;
  position  : relative;
  color  : #F4F3EE;
  padding  : 5px 10px;
  transition  : 1s;
  font-size  : 1rem;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color  : #C3C2BE;
  text-decoration  : none;
}

/*--- Content ---*/
.social-links a {
  padding : 8px 0;
  margin  : 10px 0;
  border-radius : 15%;
  display : inline-block;
  opacity : 0.4;
  background : #1E4356;
  color   : rgba(255, 255, 255, 1);
  line-height  : 1;
  text-align : center;
  width   : 2.2rem;
  height  : 2.2rem;
  transition : 1s;
}

.social-links a:hover {
  padding : 8px 0;
  margin  : 10px 0;
  border-radius : 15%;
  display : inline-block;
  opacity : 0.4;
  color   : rgba(255, 255, , 1);
  background: grey;
  box-shadow: 0px 2px 15px rgba(3, 3, 3, 0.5);
  line-height  : 1;
  text-align : center;
  width   : 2.2rem;
  height  : 2.2rem;
}

.sub-title-label {
  font-family  : sans-serif;
  font-weight  : 500;
  font-variant : normal;
  font-stretch : ultra-expanded;
  letter-spacing : 0.2rem;
}

/*--- Product Content ---*/
#product-content {
  padding  : 2.8rem 0;
  color  : grey;
  text-align  : center;
}

#product-content .product-content-row {
  padding  : 1rem;
  font-size  : 1.7rem; 
  display  : block;
  margin-left  : auto;
  margin-right  : auto;
}

#product-content .centered-img {
  display  : block;
  margin-left  : auto;
  margin-right  : auto;
  width   : 70%;
  height  : 70%;
  object-fit  : contain;
}

/*--- Online Shop Content ---*/
#online-shop-content {
  padding  : 2.8rem 0;
  color  : grey;
  text-align  : center;
}

#online-shop-content .online-shop-content-row {
  padding  : 1.2rem auto;
  font-size: 1.7rem;
  color  : grey;
  display  : block;
  margin-left  : auto;
  margin-right  : auto;
}

.online-shop-content-item {
  margin : 5px;
  margin-left : auto;
  margin-right : auto;
  width : 80%;
  box-shadow : 0px 5px 10px -2px grey;
  border-radius  : 10px;
  transition  : 2s;
}

.online-shop-content-item:hover {
  box-shadow  : 0px 2px 15px rgba(0, 0, 0, 0.1);
  background  : #fff;
}


.a-cleaner {
  color : #858687;
  text-decoration  : none;
}

.a-image {
  width  : 60%;
}

.a-cleaner:hover {
  color : #1D425B;
  text-decoration  : none;
  text-align  : center;
  transition  : 1s;
}

.online-shop-content-item .img-section {
    padding : auto 0;
    text-align : center;
    position : relative;
    display :flex;
    align-items :center;
    width :auto;
    height :100px;
}

.online-shop-content-item .img-section img {
  margin-left : auto;
  margin-right : auto;
  height : auto;
  max-height: 90px;
  width: 85%;
}

/*--- Branch Content ---*/
#branch-content {
  padding : 2.8rem 0;
  color   : grey;
  text-align : center;
}

#branch-content .branch-content-row {
  padding   : 1rem;
  font-size : 1.7rem; 
  display   : block;
  margin-left  : auto;
  margin-right : auto;
}

/*--- Branch Content ---*/
.features .card {
  border-radius  : 10px;
  padding  : 10px;
  border   : 0;
  overflow : hidden;
  position : relative;
  background  : #F7F7F7;
  transition  : 1s;
}

.features .card-body {
  position  : relative;
  height    : 100%;
}

.features .card .card-body img {
  padding-top : 40px;
}

.features .card-title {
  font-weight  : 700;
  position     : relative;
}

.features .card-title a {
  color  : #595B5D;
  transition  : 0.5s;
}

.features .icon-enlarge-info {
  font-size  : 2rem;
  padding : 2px;
  opacity : 0.8;
}

.features .card:hover {
  box-shadow  : 0px 2px 15px rgba(0, 0, 0, 0.1);
  background  : #fff;
}

.features .card:hover .card-title a {
  color  : #1D425B;
}

.branch-info label {
  color : grey;
  font-size : 1rem;
  padding   : 0.6rem 0.5rem;
}

.branch-info p {
  margin  : 0;
  padding : 0;
}