body {
    font-family: 'Lato', sans-serif;
    background-color: #ffffff; /* #fdfdfd; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
}

h1 {
    font-weight: 700; /* Bold */
}

h2 {
    font-weight: 600; /* Semi-bold */
    font-size: large;
}

/* Apply the font to specific elements */
p {
    font-family: 'Lato', sans-serif;
    font-weight: 400; /* Regular */
}

/* Apply the font to navigation menu items */
.navbar {
    font-family: 'Lato', sans-serif;
    font-weight: 500; /* Medium */
}

/* Apply margin sizes */
.ml-20 {
    margin-left: 20px;
}
.mr-20 {
    margin-right: 20px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mt-50 {
    margin-top: 50px;
}
.mb-50 {
    margin-bottom: 50px;
}

/* Apply card styles */
.card-header, .card-footer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 
* Apply animation styles 
*/
.slideanim {visibility:hidden;}
.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
/* End animation styles */