/*IMPORTANT*/
/*EACH TIME ANY CHANGES IN CUSTOM CSS SHEET RUN PYTHON MANAGE.PY COLLECTSTATIC TO REFLEXT CHANGES+F5+CTRL REFRESH IF NOT WORKING*/


  .navbar-light .navbar-nav .nav-link {
    color: #605f5f;

  }
/*when hovered over, changes colour*/
  .navbar .navbar-nav .nav-link:hover{
    color: #808080;
}
/*borders for nav bar, bottom a top*/
.navbar .navbar-nav {
    border-bottom: 2px solid #605f5f;
  }
  .navbar .navbar-nav {
    margin-top: 0.5em;
    margin-bottom: 20px;
    border-top: 2px solid  #605f5f;
  
  }
  
  .navbar .navbar-brand {
    padding-top: 10px;
  
  }
/* hamburger icon once menu collapse*/
  .navbar-light .navbar-toggler {
        background: gray;
         top: 0;
         margin-left: 5px;
        
    }

    .navbar-light .navbar-toggler::after {
        color:#605f5f;
    }

    
  /* style for paragraph on pages with class Lead*/
.lead{

  font-size: 20px;
}


/*nav-items styles*/
  .navbar .nav-item {
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    color:  #605f5f;
    font-weight: 300;
  }

  /*card on price page styles*/
  .card {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

  /*if navbar fixed to top, aditional padding needed as content overlaped
  body { padding-top: 200px; }

  @media screen and (min-width: 768px) {
    body { padding-top: 200px; }
}
 */


/* for logo to make it smaller on biggest screens*/

#my-logo {
  
  height: 220px;
}

/* for logo to make it responsive on smaller screens*/
@media (max-width: 768px) {
    #my-logo {
        max-width: 120px;
        height: auto; /* Maintain aspect ratio */
        padding: 0px;
        margin: 0px;
    }
}

/* for logo to make it responsive on smaller screens*/
@media (max-width: 576px) {
    #my-logo {
        max-width: 120px;
        height: auto; /* Maintain aspect ratio */
        padding: 0px;
        margin: 0px;
   }
}

/* Jumbotron Default height for small devices */
    #intro-example {
      height: 400px;
      background-position: 45% 55%;
    }

    /* Jumbotron Height for devices larger than 992px */
    @media (min-width: 992px) {
      #intro-example {
        height: 600px;
        background-position: 0 20%;
      }
    }

    /* colour of mask over jumnbotron Default height for small devices */
    #mask1 {
      height: auto;
      width: auto;
      background-color: rgba(0, 0, 0, 0.2);
    }

    /* colour of mask over jumnbotron Height for devices larger than 992px */
    @media (min-width: 992px) {
      #mask1 {
        background-color: rgba(0, 0, 0, 0.2);
        
      }
    }
 
     /*  text in middle of jumbotron  Default height for small devices, padding add more mask around text to mak it prettier */
    #flexC {
      height: auto;
      width: auto;
      padding-bottom: 20px;
      padding-top: 20px;
      
    }

   /* text in middle of jumbotron  jumbotron Height for devices larger than 992px */
    @media (min-width: 992px) {
      #flexC {
       
        margin-top: 150px;
        margin-bottom: 100px;
        
      }
    }