body {
  color: #c2c2c2;
  background-color:#536e54;
  font-family: 'Roboto Slab';
  font-family: 'EB Garamond';
  
}
.grid-container {
  display: grid;
  grid-template-columns:200px 200px 200px 200px 200px 200px;
  grid-gap: 40px;
  grid-template-rows:200px 200px 200px 200px 200px 150px;
  justify-content:center;
  scrollbar-color:#323a32 #4b5950
}
.grid-item1 {
  grid-column:1/-1;
  background-color:#4b5950;
  border:10px solid #323a32;
  padding:30px;
  text-align:center;
  
}
.grid-item2{
  background-color:#4b5950;
  grid-row: span 2;
  border:10px solid #323a32;
  overflow-y:scroll;
  word-break:break-all;
  overflow-x: hidden;
  padding:20px;
  scrollbar-color: #323a32 #4b5950;
}
.grid-item3{
  background-color:#4b5950;
  grid-row: span 4;
  text-align:center;
  grid-column: span 4;
  border:10px solid #323a32;
  padding:35px;
}
.grid-item4{
  background-color:#4b5950;
  grid-row: span 2;
  border:10px solid #323a32;
  overflow-y:scroll;
  padding:20px;
  scrollbar-color: #323a32 #4b5950;
}
.grid-item5{
  background-color:#4b5950;
  grid-row: span 2;
  border:10px solid #323a32;
  overflow-y:scroll;
  word-wrap:break-word;
  padding:20px;
  scrollbar-color: #323a32 #4b5950;
}
.grid-item6{
  background-color:#4b5950;
  grid-row: span 2;
  border:10px solid #323a32;
  overflow-y:scroll;
  word-wrap:break-word;
  padding:20px;
  scrollbar-color: #323a32 #4b5950;
}
.grid-item7{
  background-color:#4b5950;
  grid-column:1/-1;
  border:10px solid #323a32;
  padding:20px;
}
.leftscroll{
  overflow-y:scroll;
}
.textbox {
  margin:auto;
  width: 755px;
  height: 500px;
  overflow-y:scroll;
  word-wrap:break-word;
  margin-bottom:40px;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:19px;
}
.photogallery {
  margin:auto;
  width: 775px;
  height: 800px;
  word-wrap:break-word;
  margin-bottom:40px;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  text-align:start;
  padding:19px;
}
.textbox2{
  width: 365px;
  height: 250px;
  margin-right:31px;
  overflow-y:scroll;
  word-wrap:break-word;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
.textbox3{
  width: 365px;
  height: 250px;
  overflow-y:scroll;
  word-wrap:break-word;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
.textbox4{
  width: 200px;
  height: 225px;
  overflow-y:scroll;
  word-wrap:break-word;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
.textbox5{
  width: 200px;
  height: 500px;
  overflow-y:scroll;
  margin-top:40px;
  margin-right:65px;
  word-wrap:break-word;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
.textbox-5{
  width: 200px;
  height: 500px;
  overflow-y:scroll;
  margin-top:40px;
  word-wrap:break-word;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
.textbox6{
  margin:auto;
  width: 800px;
  height: 200px;
  overflow-y:scroll;
  word-wrap:break-word;
  margin-bottom:40px;
  background-color: #4b5d50;
  border: solid#323a32 6px;
  scrollbar-color: #323a32 #4b5d50;
  text-align:start;
  padding:5px;
}
nav ul{
  margin:0;
  padding:0px;
  list-style:none;
  white-space:nowrap;
}
nav .mainMenu>li{
  display:inline-block;
}
nav a{
  margin-left:35px;
  padding:9px;
  width:150px;
  background-color:#323a32;
  color:#c2c2c2;
  position:relative;
  text-decoration:none;
  display:block;
  text-align:left;
  
}
nav li:hover>a{
  background-color:#1f231f;
  cursor:pointer;
}
nav .subMenu,nav .superSubMenu{
  position:absolute;
  display:none;
}
nav .superSubMenu{
  transform: translate(82.7%,0);
  right:0;
  top:0;
}
nav .subMenu li{
  position:relative;
  z-index:10;
}
nav .mainMenu>li:hover .subMenu,nav .subMenu>li:hover> .superSubMenu{
  display:block;
}
.rightscroll{
  overflow-x:scroll;
  white-space:nowrap;
  text-align: center;
  padding:20px;
  background:#323a32;
}
.right_scroll{
  overflow-x:scroll;
  white-space:nowrap;
  padding:2px;
  text-align:center;
}
.container {
  position: relative;
  max-width: 710px;
  margin: 0 auto;
  display:inline-block;
}


.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); 
  color: #c2c2c2;
  width: 100%;
  padding: 20px;
  opacity:0;
  transition: .4s ease;
}
.image{
  opacity:1;
}
.container:hover .content {
  opacity: 1;
}
.container:hover .image {
  opacity: 1;
}
.container_2 {
  position: relative;
  width:1%;
  border-radius:10%;
  cursor:pointer;
}

.image_2 {
  display: block;
  width: 100%;
  height: auto;
  border-radius:10%;
}

.overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 259px;
  width: 387px;
  opacity: 0;
  transition: .4s ease;
  background: rgba(0,0,0,0.3);
  border-radius:10%;
}

.container_2:hover .overlay {
  opacity: 1;
}

.text_box {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}



  
a, h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Slab';}
p, span{font-family: 'EB Garamond';}