* {
  /* font-family: 'Julius Sans One', sans-serif; */
  /* font-family: 'Quicksand', sans-serif; */
  font-family: 'Barlow', sans-serif;
  box-sizing: border-box;
}
*:before,
*:after{
  box-sizing: border-box;
}
html{
  min-width: 320px;
  background-color: black;
  color:whitesmoke;
}
a:link {
  text-decoration: none;
  color: whitesmoke;
}

a:visited {
  text-decoration: none;
  color: whitesmoke;
}

a:hover {
  text-decoration: none;
}
a:active {
  text-decoration:none;
}
.main-container{
  min-height: 97vh;
  overflow: hidden;
  display: block; 
  position: relative;
  padding-bottom: 30px;
}
.header{
  border: 1px solid;
  border-color: lightgray;
  text-align: center;
  padding:20px;
  margin: 15px;
}
.menu {
  float: left;
  min-width: 90px;
  width: 15%;
  margin: 1%;
}
.menuitem {
  padding: 8px;
  /* margin-top: 7px; */
  border-bottom: 1px solid #f1f1f1;
}
.page{
  display:none;
  width: 51%;
  float: left;
  margin: 1%;
  /* padding: 20px 20px; */
  overflow: hidden;
}
#machining {
  display: block;
}
.gallery{
    display: none;
    float: left;
    margin: 1%;
    padding: 20 20px;
    overflow: hidden;
}
.gallery-item{
  padding: 0 5px 5px ;
  float: left;
  width: 49%;
}
.card{
  border: 1px solid;
  border-color: lightgray;
  text-align: center;
  padding:20px;
  margin: 15px; 
}
.right {
  background-color: rgb(19, 117, 150);
  float: right;
  width: 28%;
  min-width: 220px;
  padding: 10px 15px;
  margin: 1%;
  overflow: hidden;
  /* height: auto; */
}
.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
img {
  width: 100%;
  height: auto;
  filter: opacity(70%) grayscale(100%);
}
img:hover{
  filter: opacity(100%) grayscale(0%);
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .menu{
    width: 20%;  
  }
  .page {
    width: 76%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
  .gallery{
    float: right;
    width: 63%;
  }
  .gallery-item{
    width: 50%; 
  }

}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .header h3 span{
    width: 100%;
    display: block;
    align-items: center;
  }
  .header h3 #divider{
    display: none;
  }
  .menu, .page, .right {
    width: 100%;
  }
  .gallery{
    float: left;
    width: 100%;
  }
  .gallery-item{
    width: 100%; 
  }
}