.main-page{
  font-family: 'Montserrat';
}

h1.align-center{
  text-align: center;
  font-size: 60px;
  font-family: 'Montserrat';
  color: #FFF;
  padding-bottom: 20px;
  padding-top: 20px;
}

.orange-background {
  background-color: #CC442E;
  height: 800px;
}

.navigate-btns {
  height: 550px;
  background: linear-gradient(97deg, #FFF 50%, #D77B3F 11.05ch);
}

.btn-container{
  text-align: center;
  justify-content: center;
}

.event-search-btn {
  font-family: 'Montserrat';
  margin-top: 136px;
  align-items: center;
  justify-content: center;
}

.plan-event-btn {
  margin-top: 200px;
  margin-right: 200px;
}

.show-all-events-btn {
  margin-top: 24px;
  margin-left: -9px;
}

.text-white {
  color: #FFF;
  text-decoration: none;
}

.text-orange {
  color: #D77B3F;
}

a {
  text-decoration: none;
}



/* CSS */

.button-left.btn-top {
  cursor: default;
}

.button-left {
  color: #FFF;
  background-color: #D77B3F;
  border-radius: 30px;
}

.button-right {
  color: #D77B3F;
  background-color: #FFF;
  border-radius: 30px;
}

.button-left,
.button-right {
  align-items: center;
  appearance: none;
  background-clip: padding-box;
  background-image: none;
  border-style: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  flex-direction: row;
  flex-shrink: 0;
  font-family: 'Montserrat';
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  line-height: 24px;
  margin: 0;
  min-height: 45px;
  outline: none;
  overflow: visible;
  padding: 12px 25px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: auto;
  word-break: keep-all;
  /* z-index: 1; */
}

.button-left:before,
.button-left:after,
.button-right:before,
.button-right:after {
  border-radius: 80px;
}

.button-left:before,
.button-right:before {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}

.fs-30 {
  font-size: 23px;
  font-family: 'Montserrat';
  font-weight: 400;
  margin-bottom: 10px;
}

.button-left.btn-bottom:hover {
  background-color: #FFF;
  color: #D77B3F;
  border: 2px solid #D77B3F;
}

.button-right:hover {
  background-color: #D77B3F;
  color: #FFF;
  border: 2px solid #FFF;
}

.button-left:after,
.button-right:after {
  background-color: initial;
  bottom: 4px;
  content: "";
  display: block;
  left: 4px;
  overflow: hidden;
  position: absolute;
  right: 4px;
  top: 4px;
  transition: all 100ms ease-out;
  z-index: -1;
}


@media only screen and (min-width: 768px) and (max-width: 1200px) {
  h1.align-center {
    text-align: center;
    font-size: 47px;
  }

  .show-all-events-btn {
    margin-top: 50px;
    margin-right: 100px;
    margin-left: 0px;
  }

  .plan-event-btn {
    margin-top: 50px;
    margin-left: 45px;
    margin-right: 30px 
  }

  .event-search-btn {
    margin-top: 67px;
  }

  .header .logo {
    margin-left: 45px;
    padding-right: 709px;
  }
}

@media only screen and (max-width: 768px) {
  h1.align-center {
    text-align: center;
    font-size: 47px;
  }

  .show-all-events-btn {
    margin-top: 50px;
    margin-right: 200px;
    margin-left: 0px;
  }

  .plan-event-btn {
    margin-top: 70px;
    margin-left: 200px;
    margin-right: 0px;
  }

  .event-search-btn {
    margin-top: 67px;
  }
}