.responsive {
    width: 50%;
    max-width: 400px;
    height: auto;
  }
  
  h3 {
    text-align: center; 
    font-family: 'Sanchez', serif;
  }
  
  /* boxes */
  * {
    box-sizing: border-box;
  }
  
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    text-align: left;
    justify-content: center;
  }
  
  .flex-item {
  background-color: #b5d9ad;
    padding: 5px;
    flex: 20%;
    margin-top: 8px;
    margin-right: 8px;
    margin-left: 8px;
    font-family: 'Arapey', serif;
  }
  
  /* Responsive layout - makes a one column-layout instead of a two-column layout */
  @media (max-width: 800px) {
    .flex-item {
      flex: 100%;
    }
  }
  
  /*a normal, unvisited link*/
  .flex-item a:link{
      color: green;
  }
  /*a link the user has visited*/
  .flex-item a:visited{
      color: #355730;
  }
  /*a link when the user mouses over it*/
  .flex-item a:hover{
      color: yellow;
  }
  /*a link the moment it is clicked*/
  .flex-item a:active{
      color: brown;
  }
  
  footer{
      font-family: 'Amiri', serif !important;
      font-size:14px;
      line-height:23px !important;
      }
  footer h3,h4{
      font-family: 'Rokkitt', serif !important;
      font-size:17px;
      font-weight: 400 !important;
  }
  
  .footer-area{
    background: #353843 !important;
  }
  
  .f-title h3{
      color:#ffffff !important;
      font-weight:400 !important;
  }
  .f-title h4{
      color:#333 !important;
  }
  
  .f-widget p{
  color:#fff;
  }
  
  .f-widget ul li {
      color: #cecece;
      font-weight: 500;
      font-size:medium;
      letter-spacing: .5px;
    list-style-type: none;
  }
  
  .social-widget i{
  color:#ffffff !important;
  }
  
  .social-widget i:hover{
  color:#000000 !important;
  }
  
  .social-widget ul li {
    display: inline;
  }
  
  #introblocks{display:block; position:relative; margin:-160px 0 130px 0; z-index:1;}