* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
  position: relative;
  opacity: .90;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

/*
h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
/*
/* 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;
  }
}


/*
body {
/*
  background-image: url("img/jpg/IMG_4932.jpg");
  background-size:     1000px auto;
  background-attachment: fixed;
  background-repeat:   no-repeat;
  background-color: black;
  background-position: center center;
*/

/*
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 1300px 1000px;
*/

/*
background-size: auto;
  background-position: center; */

/*    background-image: linear-gradient(to bottom left, #6c194f 50%, #1f3890 100%); */

}

/* 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 */
}

/*                             changed and removed
.arrow {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
*/
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);
}


/* Check if the screen size is at least 600px */
@media only screen and (min-width: 600px) {
.logo {
    padding: 5px;
          }
.logo img {
    width: 100px;
  }
.title {
    padding: 10px;   /* changed */
  }
.header {
    padding: 10px;   /* changed */
  }
.compInfo {
    padding: 10px;   /* changed */
  }
.sidebarOne {
    padding: 10px;   /* changed */
  }
.sidebarTwo {
    padding: 10px;   /* changed */
  }
.sidebarThree {
    padding: 10px;   /* changed */
  }
.sidebarFour {
    padding: 10px;   /* changed */
  }
.sidebarfive {
    padding: 10px;   /* changed */
  }
.sidebarSix {
    padding: 10px;   /* changed */
  }
.sidebarSeven {
    padding: 10px;   /* changed */
  }
.sidebarEight {
    padding: 10px;   /* changed */
  }
.sidebarNine {
    padding: 10px;   /* changed */
  }
.contactOne {
    padding: 10px;    /* changed */
  }
.contactTwo {
    padding: 10px;   /* changed */
  }
.footer {
    padding: 10px;   /* changed */
  }
.grid div p {
    padding: 2px 2px;   /* changed */
  }
  .grid h1, h2, h3, p {
      font-size: 20px;         /* changed */
      padding: 6px;   /* changed */
  }
nav {
    height: 50px;   /* changed */
  }
                               changed and removed
.arrow {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
  }
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
nav ul li a {
    font-size: 20px;   /* changed */
    padding: 6px 7px;   /* changed */
  }
nav ul li ul {
    padding: 5px;   /* changed */

  }
nav ul li ul li {
    width: 140px;   /* changed */
    }
.tablink {
    padding: 7px 8px;     /* changed */
    font-size: 15px;      /* changed */
  }
.tabcontent {
    padding: 25px;         /* changed */
  }
.column img {
    height: 100px;         /* changed */
    padding: 5px;         /* changed with error*/
    box-shadow: 5px 8px 10px white;          /* changed */
  }
.modal {
    padding-top: 40px;          /* changed */
  }

.close {
    top: 8px;         /* changed */
    right: 20px;         /* changed */
    font-size: 25px;         /* changed */
  }
.prev,
.next {
    padding: 11px;         /* changed */
    font-size: 15px;         /* changed */
  }
.numbertext {
    font-size: 9px;          /* changed */
    padding: 6px 9px;           /* changed */
  }

.caption-container {
    padding: 2px 10px;         /* changed */
  }

}

/* Check if the screen size is at least 1000px */
@media only screen and (min-width: 1000px) {

.logo {
    padding: 7px;
          }
.logo img {
    width: 120px;
}


.title {
    padding: 20px;   /* changed */
  }
.header {
    padding: 20px;   /* changed */
  }
.compInfo {
    padding: 20px;   /* changed */
  }
.sidebarOne {
    padding: 20px;   /* changed */
  }
.sidebarTwo {
    padding: 20px;   /* changed */
  }
.sidebarThree {
    padding: 20px;   /* changed */
  }
.sidebarFour {
    padding: 20px;   /* changed */
  }
.sidebarfive {
    padding: 20px;   /* changed */
  }
.sidebarSix {
    padding: 20px;   /* changed */
  }
.sidebarSeven {
    padding: 20px;   /* changed */
  }
.sidebarEight {
    padding: 20px;   /* changed */
  }
.sidebarNine {
    padding: 20px;   /* changed */
  }
.contactOne {
    padding: 20px;    /* changed */
  }
.contactTwo {
    padding: 20px;   /* changed */
  }
.footer {
    padding: 20px;   /* changed */
  }
.grid div p {
    padding: 10px 10px;   /* changed */
  }
  .grid h1, h2, h3, p {
      font-size: 20px;         /* changed */
      padding: 10px;   /* changed */
  }
nav {
    height: 65px;   /* changed */
  }
                               changed and removed
.arrow {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
  }
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
nav ul li a {
    font-size: 24px;   /* changed */
    padding: 11px 14px;   /* changed */
  }
nav ul li ul {
    padding: 7px;   /* changed */

  }
nav ul li ul li {
    width: 180px;   /* changed */
    }
.tablink {
    padding: 14px 16px;     /* changed */
    font-size: 17px;      /* changed */
  }
.tabcontent {
    padding: 50px;         /* changed */
  }
.column img {
    height: 200px;         /* changed */
    padding: 10px;         /* changed with error*/
    box-shadow: 5px 10px 18px white;          /* changed */
  }
.modal {
    padding-top: 100px;          /* changed */
  }

.close {
    top: 10px;         /* changed */
    right: 25px;         /* changed */
    font-size: 35px;         /* changed */
  }
.prev,
.next {
    padding: 16px;         /* changed */
    font-size: 20px;         /* changed */
  }
.numbertext {
    font-size: 12px;          /* changed */
    padding: 8px 12px;           /* changed */
  }

.caption-container {
    padding: 2px 16px;         /* changed */
  }


}