body {
  font-family: "Maven Pro", Verdana, sans-serif !important;
  font-size: 109% !important;
  font-weight: 500 !important;
  color: rgb(25, 25, 25) !important;
  line-height: 1.8em !important;
}

h1 {
  color: white !important;
  font-weight: 800 !important;
  line-height: 1.3em !important;
  text-shadow: 3px 3px 0 #666 !important;
}

h2 {
  font-weight: 800 !important;
  color: rgb(80, 80, 80) !important;
}

h4 {
  color: white !important;
  text-shadow: 2px 2px 0 #666 !important;
}

.my-h4{
  color: whitesmoke!important;
  text-shadow:1px 2px 0 #111;
}

.fa-calendar-check {
  /*    font-size: 120px*/
  font-size: 7em !important;
}

.myBtn {
  text-align: center !important;
  transition: 0.4s !important;
  color: rgb(90, 90, 90) !important;
  text-shadow:1px 1px 0 #bbb;
}

.myRed {
  color: darkred !important;
}

.my-footer {
  background-color: #333333 !important;
  color: lightgray !important;
  font-size: 0.75em !important;
  font-weight: 400 !important;
  line-height: 2em !important;
}

.my-bg-smoke {
  background-color: whitesmoke !important;
}

.my-bg-dark {
  background-color: #333333 !important;
  color: lightgray !important;
}

.my-menu {
  background-color: gray !important;
  color: whitesmoke;
}

.my-animate-opacity {
  animation: opac 0.3s
}

@keyframes opac {
  from {
    opacity: 0.1
  }

  to {
    opacity: 1
  }
}

.my-logo {
  width: 60%;
}

.my-img-resize {
  width: 40%;
}

.my-img-resize2 {
  width: 50%;
}

@media screen and (max-width: 600px) {
  
  h1 {
    font-size: 160%;
  }

  h2 {
    font-size: 140%;
  }
  
  .my-logo {
    width: 25%;
  }

  .my-img-resize {
    width: 25%;
  }

  .my-img-resize2 {
    width: 20%;
  }
  .my-h4 {
    font-size: 80%;
  }
}
  
@media screen and (min-width: 800px) {
 .my-h4 {
    font-size: 130%;
  }
  
}