* {
  box-sizing: border-box;
  font-family:  'Arial', sans-serif;
}

html{
    min-height:100%;
    position:relative;
}

body {
  margin: 0;
  background-color: #e4e4e4;
}


.header-container {
  position: relative;
  background-color: #080808;
}

/* Style the header */
.header {
  display: flex;
  padding: 21px;
  text-align: center;
  color: #fefefe;
  font-family:  'Arial', sans-serif;
  position: relative;
z-index: 9999;
}

.header-bg {
  background-image: url("images/lines.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  opacity:25%;
  position:absolute;
  z-index: 0;
  height:100%;
  width:100%;
}

.header h1{
    font-family:  'Arial Black', sans-serif;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.row{
  padding-top: 20px;
  margin-bottom: 55px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  }

.column li{
  padding: 10px 0 10px 0;

}

/* Left and right column */
.column.side {
  width: 5%;
}

/* Middle column */
.column.middle {
  display: flex;
  width: 90%;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: column;
}

.get-to-know-us {
  margin: 20px;
  display: block;
  float: left;
}

.photo{
  width: 180px;
  float: left;
   margin-right: 20px;
   margin-bottom: 2px;
}

.column.middle.homeScreenColumn{
  flex-direction: row;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
  *{
    width: fit-content;;
  }
  .slide_head_small,
  .slide_head_medium{
    display: none;
    background-color: red;
  }
  .topnav a{
    padding: 10px 11px;
  }
  .topnav {
      font-size: 0.9em;
      width: 100%;
  }
  }

  @media screen and (max-width: 700px) {
    .column.side, .column.middle {
      width: 100%;
    }
    *{
      /* width: fit-content;; */
    }
    .slide_head_medium{
      display: none;
      background-color: red;
    }
    }


/* Style the footer */
.footer {
  background-color: #333;
  font-size: 0.95em;
  color: #f2f2f2;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}


.footer a {
  font-family: "Bauhaus 93";
  color: #6cbeff;
  text-align: center;
  text-decoration: none;
}

/* Change color on hover */
.footer a:hover {
  background-color: #6cbeff;
  color: #ddd;
  color: black;
}

.page{
  position:relative;
}

.mainpage_link_button{
  width: 250px;
  display: block;
}

.mainpage_link_button {
  width: 250px;
  border: 1px solid #3468a6;
  display: block;
  border-radius: 16px;
  padding: 8PX;
  margin: 10px;
}

.mainpage_link_button:link,
.mainpage_link_button:visited
{
  text-decoration: none;
  color: black;
}

.mainpage_link_button:hover{
  text-decoration: none;
  background-color: #3468a6; /*l blue */
  color: #fefefe; /* l white */
  padding: 8px;
  border-radius: 17px;
}

.mainpage_link_button:hover .vg_sub_head{
  background-color: #fefefe; /* l white */
  color: #3468a6; /*l blue */
}