/*
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
    background-attachment: scroll;
  }
}
/*  start  */
/* End of page */
/* Start Grid */
.grid {
  display: grid;
  grid-template-columns: 2% 50px 1fr 5% 1fr 2%; /* can also us 100px or 20% or auto */
  /* grid-template-rows: 1fr 1fr 1fr 1fr; */
  grid-template-areas:
/*  "openMenu openMenu openMenu openMenu openMenu openMenu"
/*  "logo logo title title title title title title"
  "title title title title title title"
  "header header header header header header"
  "compInfo compInfo compInfo compInfo compInfo compInfo"
  "sidebarOne sidebarOne sidebarOne sidebarOne sidebarOne sidebarOne"
  ". sidebarTwo sidebarTwo sidebarTwo sidebarTwo ."
  ". sidebarThree sidebarThree . sidebarFour ."
  ". sidebarfive sidebarfive . sidebarSix ."
  ". sidebarSeven sidebarSeven . sidebarEight ."
  ". sidebarNine sidebarNine sidebarNine sidebarNine ."
  "contactOne contactOne contactOne . contactTwo ."
  "footer footer footer footer footer footer";
*/
}
/* End of Grid / start Logo */
.logo {
  grid-area: logo;
  padding: 2px;
        }
.logo img {
  padding: 0px;
  width: 50px;
        }
/* End of Logo / start of Grid settings */
.openMenu {
  grid-area: openMenu;
  position: fixed; /* keeps openMenu Fixed in position*/
  left: 0;
  top: 0;
  width: 100%;
  padding: 0px;
  font-weight: bold;
        }
.title {
  grid-area: title;
  padding: 2px;   /* changed */

}
.header {
  grid-area: header;
  height: 100%;
  padding: 2px;   /* changed */
}
.compInfo {
  grid-area: compInfo;
  padding: 2px;   /* changed */
}
.sidebarOne {
  grid-area: sidebarOne;
  padding: 2px;   /* changed */
}
.sidebarTwo {
  grid-area: sidebarTwo;
  padding: 2px;   /* changed */

}
.sidebarThree {
  grid-area: sidebarThree;
  padding: 2px;   /* changed */
  background-color: purple;
}
.sidebarFour {
  grid-area: sidebarFour;
  padding: 2px;   /* changed */
  background-color: blue;
}
.sidebarfive {
  grid-area: sidebarfive;
  padding: 2px;   /* changed */
  background-color: red;
}
.sidebarSix {
  grid-area: sidebarSix;
  padding: 2px;   /* changed */
  background-color: green;
}
.sidebarSeven {
  grid-area: sidebarSeven;
  padding: 2px;   /* changed */
  background-color: violet;
}
.sidebarEight {
  grid-area: sidebarEight;
  padding: 2px;   /* changed */
  background-color: Darkblue;
}
.sidebarNine {
  grid-area: sidebarNine;
  padding: 2px;   /* changed */
}
.contactOne {
  grid-area: contactOne;
  padding: 2px;    /* changed */
}
.contactTwo {
  grid-area: contactTwo;
  padding: 2px;   /* changed */
}
.footer {
  grid-area: footer;
  text-align: center;
  padding: 2px;   /* changed */
}

.grid div p {
  padding: 2px 2px;   /* changed */
}
.grid h1, h2, h3, p {
  color: white;
  font-size: 15px;         /* changed */
    padding: 2px;   /* changed */
    font-weight: bold;
}

/* End of Grid / Start of openMenu */

nav {
  width: 100%;
  height: 50px;   /* changed */
}

nav ul {
  float: right;
}
nav ul li {
  float: left;
  list-style: none;
  position: relative;
}
nav ul li a {
  display: block;
  font-family: Calibri;
  background-color: #6c194f;
  border-radius: 0px 0px 10px 10px;
  color: white;
  font-size: 15px;   /* changed */
  padding: 3px 3px;   /* changed */
  text-decoration: none;
}
nav ul li a:hover {
  background-color: lightblue;
  border-radius: 0px 0px 10px 10px;
}
nav ul li ul {
  display: none;
  position: absolute;

  padding: 2px;   /* changed */
  border-radius: 0px 0px 10px 10px;
}
nav ul li:hover ul {
  display: block;

}
nav ul li ul li {
  width: 100px;   /* changed */
  border-radius: 4px;
}
nav ul li ul li a {
  padding: 2px 2px;
}
nav ul li ul li a:hover {
  background-color: lightblue;
  border-radius: 10px 10px 10px 10px;
}

/* this is the start of the Tab section */

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  border-radius: 0px 0px 10px 10px;
  outline: none;
  cursor: pointer;
  padding: 2px 2px;     /* changed */
  font-size: 12px;      /* changed */
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 10px;         /* changed */
  text-align: center;
}

#optionOne {
  background-color: inherit;
  /* border-radius: 10px 10px 0px 0px; */
}
#optionTwo {
  background-color:green;
  border-radius: 10px 10px 0px 0px;
}
#optionThree {
  background-color:blue;
  border-radius: 10px 10px 0px 0px;
}
#optionFour {
  background-color:orange;
  border-radius: 10px 10px 0px 0px;
}

/* this is the start of the header pannel section */
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 33.3%;
}
.column img {
  height: 50px;         /* changed */
  padding: 2px;         /* changed with error*/
  border: black;
  border: 2px solid;
  padding: 2px;
  box-shadow: 5px 5px 5px white;          /* changed */
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;          /* changed */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 5px;         /* changed */
  right: 14px;         /* changed */
  font-size: 14px;         /* changed */
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 8px;         /* changed */
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 10px;         /* changed */
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 6px;          /* changed */
  padding: 4px 6px;           /* changed */
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 8px;         /* changed */
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}