body {
    font-family: myriad-pro, sans-serif;
    font-size: 16px;
    color: white;
    background:#0097AE;
}

@font-face {font-family: 'QanelasSoft-Black';src: url('webfonts/3A753A_5_0.eot');src: url('webfonts/3A753A_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3A753A_5_0.woff2') format('woff2'),url('webfonts/3A753A_5_0.woff') format('woff'),url('webfonts/3A753A_5_0.ttf') format('truetype');}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
    max-width: 100%;
}
img {
    height:auto !important;
}

.clear-float {
    clear:both;
}

.highlight {
    color:#FCD700;
}
.highlight-green {
    color:#55BA5A;
}
.highlight-blue {
    color:#0097AE;
}
.highlight-organic {
    color:#9E644C;
}
.reverse-blue {
    background: #F15843;
    color: white;
    display: inline-block;
}

img.display-left {
    float:left;
    max-width: 50%;
    margin-right:20px;
    margin-bottom:10px;
}

img.display-right {
    float:right;
    max-width: 50%;
    margin-left:20px;
    margin-bottom:10px;
}

h1 {
    font-family: QanelasSoft-Black;
    font-size:60px;
    text-transform:uppercase;
    margin: 0;
    line-height:1;
}

h1 .highlight {
    font-size:50px;
}
.columns {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.columns > * {
    margin:10px;
    flex: 1 1 0px;
}
.columns > *:first-child {
    margin-left:0;
}
.columns > *:last-child {
    margin-right:0;
}
.button {
    display:inline-block;
    text-decoration: none;
    background-color:#55BA5A;
    color:white;
    border:1px solid white;
    border-radius:48px;
    text-transform:uppercase;
    font-weight:bold;
    font-family: QanelasSoft-Black;
    font-size:24px;
    line-height: 24px;
    height: 24px;
    padding:12px;
}
.button::after {
    content:"";
    display:inline-block;
    margin-top:-4px;
    width:32px;
    height:32px;
    background-image:url('https://kms-au.appspot.com.storage.googleapis.com/sites/recycling-plant/app_files/img/arrow.svg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    vertical-align: middle;
}
@media only screen and (max-width: 760px){
    img.display-left,
    img.display-right {
        float: none;
        max-width: 100%;
        margin: 20px 0;
    }
    h1 {
        font-size:8vw;
    }
    h1 .highlight {
        font-size:7vw;
    }
    a {

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    }
}