html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  margin: 0;
}

@font-face{
  font-family: 'Avenir Roman';
  src : url('../font/Avenir Roman.otf');
}

body {
  font-family: "Avenir Roman", serif;
}

@media (max-width:992px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; 
    z-index:2;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
     transform: translateX(-100%);  
    z-index: 2;
  }
  body{
    padding-left: 0;
  }

  .headlogo{
    text-decoration: none;
    border: none;
    max-width: 80%;
  }
  .custom-toggler .navbar-toggler {
    border-color: black;
  }

  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(128,128,128, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

  .navbar-brand {
    width: 20%;
    height: auto;
  }
  .my-3 {
    margin-top: 0!important;
    margin-bottom: 0!important;
  }
  .organizer {
    font-size: medium;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #ffffff;
    margin-bottom: 3%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }
  .group-16 {
    padding-left: 10%;
    padding-right: 10%;
    max-width: 100%;
    height: auto;
  }

  .logo {
    width: 30%;
    height: auto;
  }

  .nav-item > a {
      color:white;
  }

  .carousel-caption {
    position: relative;
    left: 0;
    top: 0;
    background: #f8ba39;
    height:4.4rem;
    z-index:1;
  }
  .carousel-caption h5 {
    font-size: 0.85rem;
  }

  .slide-button-prev {
    opacity: 0;
  }

  .slide-button-next {
    opacity: 0;
  }

  .carousel-indicators {
    z-index:1;
  }
  .carousel-indicators > li {
    width: 9px;
    height: 9px;
    border-radius: 100%;
  }
  .workflowdescription{
    font-size: medium;
    color: #F8C138;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
  }
  .group-17 {
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 10%;
    max-width: 100%;
    height: auto;
  }

  .purpose {
    font-size: medium;
    font-weight: bolder;
    margin-left: 10%;
    margin-right: 10%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .assist {
    font-size: medium;
    font-weight: lighter;
    margin-left: 10%;
    margin-right: 10%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .plan {
    color: #F8C138;
    font-size: medium;
    font-weight: bolder;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }
  .card-deck .card {
    margin-left: 5%;
    margin-right: 5%;
    min-width: 15rem;
  }
  .card-header{
    margin-top: 1px;
    border-style: hidden hidden solid hidden;
    background-color: white;
  }
  .card-middle{
    min-height: 10px;
    margin-bottom: 1px;
    border-style: hidden hidden hidden hidden;
  }
  .card-body{
    border-style: hidden hidden hidden hidden;
    border-top-width: 1px;
    border-top-color: rgba(0,0,0,0.125);
  }
  .card-title{
    margin-bottom: 0;
    font-size: xx-large;
  }
  .period{
    margin-top: 0!important;
  }
  .btn-outline-primary,
  .btn-outline-primary:hover,
  .btn-outline-primary:active,
  .btn-outline-primary:visited,
  .btn-outline-primary:focus {
    background-color: #F8C138;
    border-color: #F8C138;
    width: 40%;
    margin-left: 28%;
    color: white;
    letter-spacing: 1px;
    line-height: 1rem;
    border-radius: 2rem;
    transition: all 0.3s ease 0s;
  }
  .transaction{
    margin-top: 1.5rem!important;
    font-size: x-small;
  }
  .footerbottom{
    background-color: black;
  }
  .my-5 {
    margin-top: 0!important;
    margin-bottom: 1rem!important;
    font-size: small;
  }

  .pt-5{
    padding-top: 1rem!important;
  }
  .mb-1{
    color: white;
  }
  .list-inline{
    margin-top: 7%;
  }
  .list-inline-item >a{
    color: white;
  }
  .simpleplan {
    color: #F8C138;
    font-size: medium;
    font-weight: bolder;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .simpleplandescription {
    font-size: medium;
    font-weight: bolder;
    margin-left: 2%;
    margin-right: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }
  .team {
    color: #F8C138;
    font-size: medium;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .row {
    margin-top: 0;
  }

  .personimg {
    padding-left: 0;
  }

  .personlogo {
    width: 21.5rem;
  }

  .persontext {
    padding-right: 2rem;
    margin-top: 1.25rem;
  }
  .persontext > h3{
    margin-bottom: 0.5rem;
  }
  .persontitle{
    font-size: x-large;
  }
  .persondescription {
    margin-bottom: 0.5rem;
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-purple { background-color: #6f42c1; }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
@media (min-width: 992.01px) {
  body{

  }
  .navbar {
    padding-left: 0;
  }
  .headlogo{
    text-decoration: none;
    border: none;
    margin-left: 10%;
  }
  .organizer {
    font-size: x-large;
    font-weight: bolder;
    padding-top: 2%;
    background-color: #ffffff;
    margin-left: 8%;
    margin-right: 15%;
    margin-top: 0;
    width: 50%;
    object-fit: contain;
    text-align: center;
  }

  .nav-link {
    color: black;
  }
  .logo {
    margin-left: 11%;
    width: 47%;
    height: auto;
  }
  .navbar{
    /*display: flow;*/
  }
  .navbar-collapse{
    padding-left: 10%;
  }

  .navbar-expand-lg .navbar-nav .nav-link {

  }
  .navbar-nav {
    padding-left:0;
    display: flow;
  }

  .navbar-nav >li{
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
  }

  .my-3 {
    margin-top: 0!important;
    margin-bottom: 0!important;
  }

  .group-16 {
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 0;
    margin-bottom: 5%;
    max-width: 100%;
    height: auto;
  }

  .workflowdescription{
    font-size: x-large;
    color: #F8C138;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
  }

  .group-17 {
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 10%;
    max-width: 62rem;
    height: auto;
  }

  .purpose {
    font-size: x-large;
    font-weight: bolder;
    margin-left: 25%;
    margin-right: 25%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .assist {
    font-size: x-large;
    font-weight: lighter;
    margin-left: 20%;
    margin-right: 20%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .plan {
    color: #F8C138;
    font-size: x-large;
    font-weight: bolder;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .card-deck {
    margin-left: 6%;
    margin-right: 6%;
    min-width: 14rem;
  }
  .card {
    margin-left: 3%;
    margin-right: 3%;
    min-width: 16rem;
  }
  .card-header{
    margin-top: 1px;
    border-style: hidden hidden solid hidden;
    background-color: white;
  }
  .card-middle{
    min-height: 10px;
    margin-bottom: 1px;
    border-style: hidden hidden hidden hidden;
  }
  .card-body{
    border-style: hidden hidden hidden hidden;
    border-top-width: 1px;
    border-top-color: rgba(0,0,0,0.125);
  }
  .card-title{
    margin-bottom: 0;
    font-size: xx-large;
  }
  .period{
    margin-top: 0!important;
  }
  .btn-outline-primary,
  .btn-outline-primary:hover,
  .btn-outline-primary:active,
  .btn-outline-primary:visited,
  .btn-outline-primary:focus {
    background-color: #F8C138;
    border-color: #F8C138;
    width: 46%;
    margin-left: 27%;
    margin-right: 27%;
    color: white;
    letter-spacing: 1px;
    line-height: 1rem;
    border-radius: 2rem;
    transition: all 0.3s ease 0s;
    alignment: center;
  }
  .transaction{
    margin-top: 1.5rem!important;
    font-size: x-small;
  }

  .footerbottom{
    background-color: black;
  }
  .my-5 {
    margin-top: 0!important;
    margin-bottom: 1rem!important;
  }

  .pt-5{
    padding-top: 1rem!important;
  }
  .mb-1{
    color: white;
  }
  .list-inline-item >a{
    color: white;
  }
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }
  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }

  .carousel-caption {
    position: relative;
    left:0;
    top:0;
    color:white;
  }

  .carousel-caption h5 {
    font-size: 1.5rem;
  }

  .slide-button-prev {
    margin-left: -13rem;
    margin-top:45%;
  }
  
  .slide-button-next {
    margin-right: -13rem;
    margin-top:45%;
    top:0;
  }
  .carousel {
    width:60%;
    height:70%;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 3%; 
  } 
  
  .carouselWrapper {
    width: 100%;
    height: 37.8rem; 
    background-image: url("../img/carousel-background.svg");
  }
  .carousel-indicators > li {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
  }
  .carousel-indicators {
    bottom:-12rem;
}

.dropdown-item-img {
  padding-left:1.6rem;
  padding-bottom:0.2rem;
  width:5rem;
  height:5rem;
}
  .simpleplan {
    color: #F8C138;
    font-size: x-large;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .simpleplandescription {
    font-size: x-large;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .team {
    color: #F8C138;
    font-size: x-large;
    font-weight: bolder;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 2%;
    object-fit: contain;
    text-align: center;
    alignment: center;
  }

  .row {
    margin-top: 10%;
  }

  .personimg {
    padding-left: 6.25rem;
  }
  .persontext {
    padding-right: 5rem;
  }
  .persontext > h3{
    margin-bottom: 3rem;
  }

  .persondescription {
    margin-bottom: 2rem;
  }
}

.dropdown-menu {
  background-color: #618270;
}