.w3-teal-new, .w3-hover-teal-new:hover {
    color: #fff!important;
    background-color: #bacaca!important;
}

.background {
    position:absolute;
    top: 120px;
    width: 100%;
    z-index: -1;
}

.font-teal {
    color: #5c9495
}

.w3-theme-teal2 {
    color: #fff !important;
    background-color: #5c9495 !important;
}

.w3-orange2 {
    color: #000!important;
    background-color: #d8a667!important;
}

:root {
    --mx: 2.5;
  }

.plus{
    background: url(/images/pattern-colour.png);
    width: calc(20px * var(--mx));
    height: calc(20px * var(--mx));
    background-size: calc(200px * var(--mx)) calc(200px * var(--mx));
}

.plus-grey {
    background-position-x: calc(30px * var(--mx));
    background-position-y: calc(44px * var(--mx));
}

.plus-orange {
    background-position-x: calc(30px * var(--mx));
    background-position-y: calc(107px * var(--mx));
}

.plus-blue {
    background-position-x: calc(78px * var(--mx));
    background-position-y: calc(60px * var(--mx));  
}

.plus-green {
    background-position-x: calc(46px * var(--mx));
    background-position-y: calc(60px * var(--mx));  
}

.plus-green {
    background-position-x: calc(47px * var(--mx));
    background-position-y: calc(60px * var(--mx)); 
}

.plus-peach {
    background-position-x: calc(30px * var(--mx));
    background-position-y: calc(75px * var(--mx)); 
}

.dashed {
    border-top:1px dotted #000 !important;
}

.dashed-line {
    --s:15px; /* control the space between dashes */

    width: 6px;
    height: 180px;
    background: 
    radial-gradient(circle closest-side,#4b9ed9 98%,#0000) 0 0/100% var(--s),
    linear-gradient(#4b9ed9 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}

.dashed-line-alt {
    --s:24px;

    height: 5px;
    background: 
    radial-gradient(circle closest-side,#73a4a4 98%,#0000) 0 0/var(--s) 100%,
    linear-gradient(90deg,#73a4a4 50%, #0000 0) calc(var(--s)/2) 0/calc(2*var(--s)) 100%;
}

.spacer {
    height: 126px;
}

li {
    text-align: left;
}

h2 {
    font-size:25px;
}

.btn-primary, .btn-primary:visited {
    background-color: #5a9595;
    border: #5a9595;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
    background-color: #d8a667 !important;
    border: #d8a667 !important;
}

.description-block {
    width:100%;
}

.menu-item{
    margin-top:43px;
}

.disabled-button {
    color: #bbb;
    cursor: pointer !important;
}

.w3-top {
    background: white;
}

.footer {
    padding-top:32px;
    padding-bottom:32px;
}

.w3-dropdown-content{
    color: #5c9495;   
}

.w3-dropdown-content .w3-button:hover, a.active {
    background-color: #5c9495 !important;
    color: #eee !important;
}

.w3-dropdown-content .disabled-button.w3-button:hover {
    background-color: white !important;
    color: #bbb !important;
}

.w3-dropdown-hover:hover > .w3-button:first-child {
    background-color: white;
    color: #5c9495;
}

#navDemo {
    background: white !important;
    position:absolute;
    z-index: 2;
    width: 100%;
    color: #5c9495;
    top: 39px;
    width: 40%;
    right: 0;
}

.w3-button:hover {
    background-color: #5c9495 !important;
    color: #eee !important;
}

#logo {
    width: 200px;
}

.author-box {
    background: url(/images/simone-hobbs.jpg) no-repeat center;
    width: 400px;
    height: 400px;
    background-size: 400px;
    background-position-y: -195px;
    border-radius: 50%;
}

@media (max-width: 576px){
    #logo {
        width: 150px;
    }
    .description-block{
        padding: 0 20px 0 20px;
    }

    .author-box {
        width: 300px;
        height: 300px;
        background-size: 300px;
        background-position-y: -150px;
        border-radius: 50%;
    }
}

@media (min-width: 577px){
    .d-90{
        padding-left:90px;
    }
}

.bi {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentcolor;
    margin-right: 4px;
}

.mobile-conversion {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border-radius: 0 !important;
}

h3 {
    font-size: 1.25rem;
}