@charset "UTF-8";

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.bread {
  margin-top: -2rem;
}

footer {
  background: #f3f3f3;
  padding: 2vh 0 2vh 0;
}

footer a {
  color: #000000;
  margin-left: 1vw;
}

footer a:hover {
  color: #5b5b5b;
}

.social a {
  margin-left: 1rem;
}

.social img {
  height: 4vh;
}

.mirrorvismis {
  margin-left: -4em;
  margin-bottom: -6em;
}

.nav-tabs a {
  font-size: 0.9rem;
}

/* The sidebar menu */
.sidebar {
  width: 125px;
  position: sticky;
  z-index: 1;
  top: 70px;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  opacity: 60%;
}

.sidebar a {
  font-size: 0.8rem;
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #555555;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

.servicesContainer {
  margin-top: -27rem;
  margin-left: 4rem;
}

.borderBox {
  border-radius: 25px;
  border: solid thin #ababab;
  line-height: 1.6;
  transition: 0.3s;
}

.borderBox:hover {
  box-shadow: 2px 5px 3px 0 #cccccc;
}

#more,
#more1,
#more2 {
  display: none;
}

#hces-mobile {
  display: none;
}

#footer-mobile {
  display: none;
  font-size: 20px;
}

#footer-mobile ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer-social img {
  padding-right: 1rem;
}

@media screen and (max-width: 700px) {
  .sidebar {
    display: none;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

/* @media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
} */

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

/*Responsive*/
/******************************

[Table of Contents]

1. 1600px
2. 1440px
3. 1280px
4. 1199px
5. 1024px
6. 991px
7. 959px
8. 880px
9. 768px
10. 767px
11. 539px
12. 479px
13. 400px

******************************/

/************
1. 1680px
************/

@media only screen and (max-width: 1680px) {
}

/************
1. 1600px
************/

@media only screen and (max-width: 1600px) {
}

/************
2. 1440px
************/

@media only screen and (max-width: 1440px) {
}

/************
3. 1380px
************/

@media only screen and (max-width: 1380px) {
}

/************
3. 1280px
************/

@media only screen and (max-width: 1280px) {
  .servicesContainer {
    margin-left: 5rem;
  }
}

/************
4. 1199px
************/

@media only screen and (max-width: 1199px) {
}

/************
4. 1100px
************/

@media only screen and (max-width: 1100px) {
}

/************
5. 1024px
************/

@media only screen and (max-width: 1024px) {
}

/************
6. 991px
************/

@media only screen and (max-width: 991px) {
  footer .footerLogo {
    margin-left: 1rem;
  }
  footer .links {
    padding-top: 50px;
    margin-left: -2.4rem;
  }

  footer .links a {
    padding-right: 100px;
  }

  /* footer .social {
  } */
}

/************
7. 959px
************/

@media only screen and (max-width: 959px) {
}

/************
8. 880px
************/

@media only screen and (max-width: 880px) {
}

/************
9. 768px
************/

@media only screen and (max-width: 768px) {
  #footer-desktop {
    display: none;
  }

  #footer-mobile {
    display: inherit;
  }
}

/************
10. 767px
************/

@media only screen and (max-width: 767px) {
  #mobilehide {
    visibility: hidden;
  }

  .mirrorvismis {
    margin-top: -5rem;
    margin-left: auto;
    margin-bottom: -20rem;
  }
}

/************
11. 575px
************/

@media only screen and (max-width: 575px) {
}

/************
11. 539px
************/

@media only screen and (max-width: 539px) {
}

/************
12. 480px
************/

@media only screen and (max-width: 480px) {
}

/************
13. 479px
************/

@media only screen and (max-width: 479px) {
  h1 {
    font-size: 24px;
  }
}

/************
14. 400px
************/

@media only screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }

  #hces-section {
    display: none;
  }

  #hces-mobile {
    display: inherit;
  }
}