footer {
    background-color: #9B8B72;
}

.bg-beige {
    background-color: #FAF0DF;
}

.bg-brown {
    background-color: #9B8B72;
}

.bg-grey {
    background-color: #E6E6E6;
}



[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

a:hover{
    text-decoration: none;
}

html {
    position: relative;
    min-height: 100vh;
}

main {
    padding-bottom: 10rem !important;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    main {
        margin-left: 0px;
        padding-bottom: 20rem !important;
    }
}

/* Nav */
.overlay {
    height: 90%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.5s;
    margin-top: 87px;
}


/* <MD bootstrap */
@media (max-width:768px) {
    /* The following handles the toggler burger-icon */
    .navbar-toggler span {
       display: block;
       background-color: black;
       height: 3px;
       width: 35px; /* 40 */
       margin-top: 10px; /* 10 */
       margin-bottom: 10px; /* 10 */
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       position: relative;
       right: 0px;
       opacity: 1;
       top: 0px;
    }

    .navbar-toggler span:nth-child(1),
    .navbar-toggler span:nth-child(3) {
       -webkit-transition: transform .35s ease-in-out;
       -moz-transition: transform .35s ease-in-out;
       -o-transition: transform .35s ease-in-out;
       transition: transform .35s ease-in-out;
    }

    .navbar-toggler:not(.closed-nav) span:nth-child(1) {
        position: absolute;
        right: 27px;
        top: 32px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
        opacity: 0.9;
    }

    .navbar-toggler:not(.closed-nav) span:nth-child(2) {
        height: 29px;
        visibility: hidden;
        background-color: transparent;
    }

    .navbar-toggler:not(.closed-nav) span:nth-child(3) {
        position: absolute;
        right: 27px;
        top: 32px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
        opacity: 0.9;
    }
}

/* toggle icons - arrows */
[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

/* asterisk for required field have red  */
.required:after {
    content:" *";
    color: red;
}

/* IE 10 card display:flex fix */
/* https://stackoverflow.com/questions/42095977/bootstrap-card-image-distorted-in-internet-explorer */
/* IE10+ specific styles go here */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .card {
        display: block !important;
    }
    .ie-wrapper {
        display: flex;
    }
    .ie-inner {
        flex-basis: 100%;
    }
}