@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');


:root{
   --text-color: rgb(34, 30, 30);
}
body{
    background-image: url(../images/background.jpg);
    font: 20px/1.5'Nunito', sans-serif;
  }
  header{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   z-index: 5;
}
img{
   padding: 13px;
   content: "";
   background: rgba(0,0,0,0.5);
   width: 100%;
   z-index: 1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;

}

  main{
      min-height: 200px;
      text-align: center;
  }
  nav ul{
     list-style-type: none;
     padding:0;
     text-align: center;
     background-color: rgba(114, 218, 200, 0.877);
  }
  nav ul li{
     position: relative;
     display: inline-block;
  }
  nav ul li a{
     text-decoration: none;
     padding: 10px 20px;
     display: block;
     font-weight: bold;
     line-height: 30px;
  }
  
  nav ul li ul{
     position: absolute;
     display: none;
     min-width: 100%;
  }
  nav ul li:hover ul{
     display: block;
   
  }
  nav ul li ul li{
     display: block;
  }
  nav ul li ul li a{
    text-align: center;
    line-height: 20px;
    padding: 8px;
  }
  .main-padding{
   padding: 7em 0em;
}
.bg-color{
   background-color: #f8f9fa !important;
}
.container-gallery{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-columns: repeat(auto-fill, minmax(250, 1fr));
   justify-items: center;
   grid-gap: 20px;
   margin: 0.2em 2em 0.2em 2em;
}
.item{
   width: 330px;
   display: inline-block;
   margin: 1rem;
   position: relative;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.item>a>img{
   width: 100%;
   height: 100%;
}
.item>a>img:hover{
   filter: blur(2px) brightness(60%);
   box-shadow: 0 8px 16px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
   cursor:pointer;
}
  .button{
   background-color: #545e61;
   transition: .3s all ease;
   padding: 12px 30px;
   margin-top: 0 !important;
   letter-spacing: .15em;
   color: #fff;
   border: none;
   cursor: pointer;
}
.contactform{
   width: 70%;
   padding-bottom: 4em;
}
   #slideshow { 
   margin: 50px auto; 
   position: relative; 
   width: 640px; 
   height: 320px; 
   padding: 10px; 
   box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
   position: absolute; 
   top: 10px; 
   left: 10px; 
   right: 10px; 
   bottom: 10px; 
}
.heroitems{
   position: absolute;
   width: 100%;
   height: 50vh;
   text-align: center !important;
   display: table-cell;
   vertical-align: middle;
   margin: auto;
   z-index: 2;
   top: 30%;
   color: #fff;
}
  /* Psuedo class - nav a:link, nav a:visited, nav a:hover, nav a:active; */
  nav ul li a:link{
     color: #fff;
  }
  nav ul li a:visited{
     color:#7e7a7a;
  }
  nav ul li a:hover{
     color:#333;
  }
  .heading{
      font-size: 50px;
      margin-bottom: 30px;
  }
  .heroimage{
     background-image: url(../images/heroimage.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     height: 100vh;
     opacity: 0.8;
  }
  .container{
    width: 90%;
    margin: auto;
    background-color: #fff;
    box-shadow: 0, 0, 10px grey;
    padding: 10px;
  }
.heading{
   text-transform: none;
   text-align: center;
}
#question{
   text-transform: none;
}
footer{
   padding: 20px;
}
  .home{
     color: rgb(63, 55, 55);
  }
  #blog{
   color: rgb(19, 18, 18);
   padding-top: 10px;
   font-size: 26px;
  }
  #blog-heading{
     text-transform: none;
     text-align: center;
     font-size: 40px;
     padding: 20px;
  }
  .description{
     color: var(--text-color);
  }
  footer{
    background-color: rgba(102, 190, 176, 0.877);
    padding: 10px;
    color: #fff;
    text-align: center;
  }
  .logo{
   text-transform: uppercase;
   letter-spacing: .2em;
   color: white;
   padding-left: 45px;
  }
  #aboutimg{
     width: 940px;
     height: 540px;
     text-align: center;
  }