/**
 * -----------------------------
 * PROJECT CSS -----------------
 * Global styling --------------
 * -----------------------------
 */

/**
 * CSS Variables
 * (note: fallbacks for IE11 are written above variable references below - be sure to update these too, via find and replace!)
 * Or use a tool like https://github.com/pmburov/css-vars-fallback
 */

:root {
    /* Primary colour */
    --cc1: #3479a6;
    /* Secondary colour */
    --cc2: #59aad7;
    /* Tertiary colour */
    --cc3: #6ec2cc;
    --cc4: #b3de83;
    --cc5: #c3ea61;
    --cc6: #8fc650;
    --darkergrey: #212529;
    --darkgrey: #495057;
    --grey: #ced4da;
    --lightgrey: #dee2e6;
    --lightergrey: #f1f3f5;
    --white: #ffffff;
    --black: #000000;
}

/**
 *
 * Global Styles - Forms
 *
 */

fieldset {
    border: 0.05em solid #ced4da;
    border-radius: 0.25em;
}

legend {
    padding: 0.5em;
    font-size: 2em;
    color: #ced4da;
}

label {
    margin-bottom: 0.5em;
    font-weight: 700;
}

label,
label textarea,
label input,
label select {
    display: block;
}

textarea,
input,
select {
    border: 0px;
    border-bottom: 0.05em solid #212529;
    padding: 0.5em;
}

textarea:focus,
input:focus,
select:focus {
    border-color: #3479a6;
}

textarea,
input {
    outline: 0;
    width: 100%;
}

select {
    height: 2.25em;
    border: 0.05em solid #212529;
    border-radius: 0px;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    width: auto;
}

input[disabled] {
    color: #ced4da;
}

input[type="color"] {
    height: 4em;
}

.form-addon {
    background-color: #fff;
    border-bottom: 0.1em solid #212529;
    padding: 0.5em 1em;
}

/*
 *
 * Global Styles - Images
 *
 * */
@media only screen and (max-width: 460px) {
    .node img {
        float: none !important;
        max-width: 100% !important;
        height: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 15px !important;
    }
}
/*
 *
 * Global Styles - Tables
 *
 * */

.table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.table th,
.table td {
    padding: 0.5em;
    text-align: left;
}

.table tbody > :nth-child(2n-1) {
    background-color: #f1f3f5;
}

/*
 *
 * Global Styles - Buttons
 *
 * */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[disabled],
.btn {
    width: auto;
    color: #fff;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    padding: 0.5em 1.5em;
    outline: 0;
    text-align: center;
}

.btn-sm {
    padding: 0.25em 0.75em;
}

.btn-lg {
    padding: 1em 3em;
}

.button,
button,
[type="button"],
[type="reset"],
[type="submit"],
.btn-primary {
    /* .uk-button */
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 30px;
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color;
    /* Additional styles */
    background-color: #59aad7;
    border-radius: 0px;
    color: #fff;
}

.button:hover,
.button:focus,
.button:active,
button:hover,
button:focus,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="reset"]:hover,
[type="reset"]:focus,
[type="reset"]:active,
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active {
    background-color: #3479a6;
}

button[disabled],
input[disabled],
.btn-primary {
    background-color: #f1f3f5;
    color: #ced4da;
}

label.cmlabel {
    width: 100% !important;
}

@media only screen and (max-width: 768px) {
    .uk-button {
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 460px) {
    .uk-button {
        line-height: 30px;
    }
}
.uk-button-default,
.uk-button-primary,
.uk-button-default.uk-hover,
.uk-button-default:hover,
.uk-button-default.uk-active,
.uk-button-default:active,
.uk-button-default.uk-focus,
.uk-button-default:focus,
.uk-button-default.uk-visited,
.uk-button-default:visited,
.uk-button-primary.uk-hover,
.uk-button-primary:hover,
.uk-button-primary.uk-active,
.uk-button-primary:active,
.uk-button-primary.uk-focus,
.uk-button-primary:focus,
.uk-button-primary.uk-visited,
.uk-button-primary:visited {
    background-color: #6ec2cc;
    color: #fff;
}

/**
 *
 * Global styles - typography
 *
 */

.ProximaNovaA-BlackIt {
    font-family: ProximaNovaA-BlackIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Bold {
    font-family: ProximaNovaA-Bold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-BoldIt {
    font-family: ProximaNovaA-BoldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-ExtrabldIt {
    font-family: ProximaNovaA-ExtrabldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Light {
    font-family: ProximaNovaA-Light;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-LightIt {
    font-family: ProximaNovaA-LightIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Regular {
    font-family: ProximaNovaA-Regular;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-RegularIt {
    font-family: ProximaNovaA-RegularIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Semibold {
    font-family: ProximaNovaA-Semibold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-SemiboldIt {
    font-family: ProximaNovaA-SemiboldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Thin {
    font-family: ProximaNovaA-Thin;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-ThinIt {
    font-family: ProximaNovaA-ThinIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Black {
    font-family: ProximaNovaS-Black;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-BlackIt {
    font-family: ProximaNovaS-BlackIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Bold {
    font-family: ProximaNovaS-Bold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-BoldIt {
    font-family: ProximaNovaS-BoldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Extrabld {
    font-family: ProximaNovaS-Extrabld;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-ExtrabldIt {
    font-family: ProximaNovaS-ExtrabldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Light {
    font-family: ProximaNovaS-Light;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-LightIt {
    font-family: ProximaNovaS-LightIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Regular {
    font-family: ProximaNovaS-Regular;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-RegularIt {
    font-family: ProximaNovaS-RegularIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Semibold {
    font-family: ProximaNovaS-Semibold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-SemiboldIt {
    font-family: ProximaNovaS-SemiboldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Thin {
    font-family: ProximaNovaS-Thin;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-ThinIt {
    font-family: ProximaNovaS-ThinIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Black {
    font-family: ProximaNova-Black;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-BlackIt {
    font-family: ProximaNova-BlackIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Bold {
    font-family: ProximaNova-Bold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-BoldIt {
    font-family: ProximaNova-BoldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Extrabld {
    font-family: ProximaNova-Extrabld;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-ExtrabldIt {
    font-family: ProximaNova-ExtrabldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Light {
    font-family: ProximaNova-Light;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-LightIt {
    font-family: ProximaNova-LightIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Regular {
    font-family: ProximaNova-Regular;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-RegularIt {
    font-family: ProximaNova-RegularIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Semibold {
    font-family: ProximaNova-Semibold;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-SemiboldIt {
    font-family: ProximaNova-SemiboldIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaT-Thin {
    font-family: ProximaNovaT-Thin;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-ThinIt {
    font-family: ProximaNova-ThinIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Black {
    font-family: ProximaNovaA-Black;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Extrabld {
    font-family: ProximaNovaA-Extrabld;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-MediumIt {
    font-family: ProximaNovaA-MediumIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-MediumIt {
    font-family: ProximaNovaS-MediumIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-MediumIt {
    font-family: ProximaNova-MediumIt;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaA-Medium {
    font-family: ProximaNovaA-Medium;
    font-weight: normal;
    font-style: normal;
}
.ProximaNovaS-Medium {
    font-family: ProximaNovaS-Medium;
    font-weight: normal;
    font-style: normal;
}
.ProximaNova-Medium {
    font-family: ProximaNova-Medium;
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 1.125rem;
    font-family: ProximaNova-Regular, "Helvetica Neue", Helvetica, Arial,
        sans-serif;
}

body {
    background-color: white;
    font-weight: 300;
    line-height: 1.45;
    color: #212529;
}

p {
    margin-bottom: 1.3rem;
}
strong {
    font-family: ProximaNova-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4 {
    margin: 1.414rem 0 0.5rem;
    font-weight: inherit;
    line-height: 1.1;
}
.hugetext {
    font-size: 6.312rem;
}
.bigtext {
    font-size: 4.735rem;
}
h1,
.uk-h1 {
    margin-top: 0;
    font-size: 2.639rem;
}
.view-header h1 {
    font-size: 3.157rem;
}
h2,
.uk-h2 {
    font-size: 1.777rem;
}
.view-header h2 {
    font-size: 2.639rem;
}
h3,
.uk-h3 {
    font-size: 1.333rem;
}
.view-header h3 {
    font-size: 1.777rem;
}
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6 {
    font-size: 1.1rem;
}

small,
.font_small {
    font-size: 0.707rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6 {
    font-family: ProximaNova-Light, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a,
a:visited,
.uk-link,
.uk-link:visited {
    color: #3479a6;
    text-decoration: underline;
}
a:hover,
.uk-link:hover {
    color: #59aad7;
    text-decoration: underline;
}
p {
    font-weight: 300;
}

/* Heading colours */
h1,
h2,
h3,
h4 {
    font-weight: 300;
    color: #59aad7;
}
h5,
h6 {
    font-weight: 600;
    color: #59aad7;
}
.view-lp .icac-panel h1,
.view-lp .icac-panel h2,
.view-lp .icac-panel h3,
.view-lp .icac-panel h4,
.view-lp .icac-panel h5,
.view-lp .icac-panel p,
.view-lp .icac-panel a {
    color: #fff;
}

/* TRIANGLE SETUP */

.tr-down-mask,
.tr-up-mask {
    width: 100%;
    position: relative;
}
.tr-down,
.tr-up {
    width: 100%;
    position: relative;
    height: 80px;
}
.tr-down svg,
.tr-up svg,
.tr-down-mask svg,
.tr-up-mask svg {
    height: 80px;
    width: 100%;
    position: absolute;
}
@media only screen and (min-width: 768px) {
    .tr-down,
    .tr-up {
        width: 100%;
        position: relative;
        height: 120px;
    }
    .tr-down svg,
    .tr-up svg,
    .tr-down-mask svg,
    .tr-up-mask svg {
        height: 120px;
    }
}
@media only screen and (min-width: 1920px) {
    .tr-down,
    .tr-up {
        width: 100%;
        position: relative;
        height: 180px;
    }
    .tr-down svg,
    .tr-up svg,
    .tr-down-mask svg,
    .tr-up-mask svg {
        height: 180px;
    }
}
.tr-down svg {
    top: -0.5px; /* Fix hairline issue */
}
.tr-up svg {
    top: 0.5px; /* Fix hairline issue */
}
.tr-down-mask svg {
    bottom: -0.5px; /* Fix hairline issue */
}
.tr-up-mask svg {
    top: -0.5vh; /* Fix hairline issue */
}

/* ADD COLOUR TO TRIANGLES */
.tr {
    fill: transparent;
}
.tr-cc1 {
    fill: #3479a6;
}
.tr-cc2 {
    fill: #59aad7;
}
.tr-cc3 {
    fill: #6ec2cc;
}
.tr-cc4 {
    fill: #b3de83;
}
.tr-cc5 {
    fill: #c3ea61;
}
.tr-cc6 {
    fill: #8fc650;
}
.tr-grey {
    fill: #dee2e6;
}
.tr-down-mask .tr,
.tr-up-mask .tr {
    fill: white;
}
.tr-down-mask .tr-slideshow {
    fill: #3479a6;
}

/* CONTENT PADDING TO ACCOMODATE IMAGE MASKS */
.tr-before {
    padding-bottom: 30vh; /* 2 x height value */
}
.tr-after {
    padding-top: 30vh; /* 2 x height value */
}

/* OPI styles */
.opi {
    color: #c3ea61;
}
a.btn-opi,
a.btn-opi:hover,
a.btn-opi:active,
a.btn-opi:visited,
a.button-opi,
a.button-opi:hover,
a.button-opi:active,
a.button-opi:visited {
    background: #c3ea61 !important;
    color: #212529 !important;
}
a.btn-opi:hover,
a.button-opi:hover {
    background: #8fc650 !important;
}

/* Other */
.icac-text-shadow {
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 960px) {
    .icac-mega {
        font-size: 4em !important;
    }
}

/* OPI Section overrides - requires https://www.drupal.org/project/field_formatter_css_class to be enabled */
.lp-category-complaints--reports-opi h1,
.lp-category-complaints--reports-opi h2,
.lp-category-complaints--reports-opi h3,
.lp-category-complaints--reports-opi h4,
.lp-category-complaints--reports-opi h5,
.lp-category-complaints--reports-opi h6 {
    color: #8fc650;
}
.node-type-opi .icac-featured-image {
    background-color: #c3ea61;
}

.page-opi .icac-panel h1,
.page-opi .icac-panel h2,
.page-opi .icac-panel h3,
.page-opi .icac-panel h4,
.page-opi .icac-panel h5,
.page-opi .icac-panel p,
.page-opi .icac-panel a {
    color: #000;
}
em {
    color: inherit;
}
.node table {
    border: 0px transparent;
}
.node td {
    padding: 10px;
}

/**
 *
 * Global styles - colour system
 *
 */

.cc1-bg {
    background-color: #3479a6;
}

.cc2-bg {
    background-color: #59aad7;
}

.cc3-bg {
    background-color: #6ec2cc;
}

.cc4-bg {
    background-color: #b3de83;
}

.cc5-bg {
    background-color: #c3ea61;
}

.cc6-bg {
    background-color: #8fc650;
}

.white-bg {
    background-color: #ffffff;
}

.black-bg {
    background-color: #000000;
}

.cc1-fg {
    color: #3479a6;
}

.cc2-fg {
    color: #59aad7;
}

.cc3-fg {
    color: #6ec2cc;
}

.cc4-fg {
    color: #b3de83;
}

.cc5-fg {
    color: #c3ea61;
}

.cc6-fg {
    color: #8fc650;
}

.white-fg,
.inverse {
    color: #ffffff;
}

.black-fg {
    color: #000000;
}

/**
 *
 * Global styles - misc
 *
 */

.messages {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 15px;
}

.submitted {
    display: none;
}
.stretch {
    width: 95vw;
}

.footer-img {
    max-width: 150px;
    opacity: 0.5;
    display: block;
}

.front .page-title {
    display: none;
}

.header__logo-image {
    max-height: 100px;
}

#icac-footer {
    position: relative;
}
#icac-footer a {
    padding: 10px;
}

#icac-footer svg {
    margin-top: -5px;
}

#logo-footer {
    max-width: 200px;
    transition: opacity 0.3s;
    opacity: 0.35;
    position: absolute;
    top: -70px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
@media only screen and (max-width: 480px) {
    #logo-footer {
        margin-top: 0px;
        max-width: 100px;
        top: -50px;
    }
}
@media only screen and (max-width: 768px) {
    #logo-footer {
        margin-top: 0px;
        max-width: 150px;
    }
}
#logo-footer:hover {
    opacity: 1;
}
#logo-footer svg {
    fill: #999;
}

#footer-wrapper {
    background-color: #dee2e6;
}
#icac-hp-cta {
    margin: 50px 10px;
}
.page-node-70 #icac-hp-cta {
    /* Hide the CTA on the actual CTA page! */
    display: none;
}

.footer-cta-buttons {
    margin: 10px 0px;
    text-align: center;
}

.footer-cta-buttons a:visited {
    color: inherit;
}

.icac-main {
    margin-top: 0px !important;
}

h2.block__title,
.block__title {
    /* Hide block titles by default, in a screen-reader friendly fashion */
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal;
}
.aspect-ratio {
    height: 0;
    position: relative;
}
.aspect-ratio--6x4 {
    padding-bottom: 66.6%;
}
.aspect-ratio--object,
.icac-card-image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.cover {
    background-size: cover !important;
}
.button-primary {
    background-color: #6ec2cc;
}
.pager {
    margin: 20px 0px;
}
.pager a {
    text-decoration: none;
    font-weight: bold;
    color: #59aad7;
}
.uk-button-default,
.uk-button-primary {
    background-color: #6ec2cc;
    border: 0px;
    color: #ffffff;
}
.uk-button-default:hover,
.uk-button-primary:hover {
    background-color: #3479a6;
    border: 0px;
    color: #ffffff;
}

/* SEARCH - temporary (create a search template!) */

#search-form {
    display: none;
}

/* user login style tweaks */
.page-user .page-container {
    padding: 20px;
}

/* Hide 'read more' links on embedded forms */
.node-readmore {
    display: none !important;
}

/*
H5P Module Styles

NOTE:
Style overrides within the H5P iframe are inserted via a custom module (https://github.com/drawcard/customh5p/)

Overrides can be found in /sites/all/modules/customh5p/h5p-overrides.css.
*/

.h5p-iframe-wrapper {
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
    padding: 20px;
    margin: 30px;
}

/**
 * -----------------------------
 * IE11 Overrides --------------
 * Keep this at the bottom -----
 * -----------------------------
 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html {
        overflow-x: hidden;
    }
    .uk-icon svg {
        height: 40px !important;
    }
    .header__logo {
        float: inherit;
        text-decoration: none;
    }
    #logo {
        height: 101px !important;
        width: 233px !important;
        -ms-interpolation-mode: nearest-neighbor;
    }
    #logo-footer {
        width: 200px;
    }
    .tr-down-mask svg {
        bottom: -7px;
    }
}
@media screen and (max-width: 1400px) {
    .sf-menu li {
        word-wrap: normal !important;
        width: 120px;
    }
}

/* Different technique required for IE11 + viewport media queries */
@media screen and (max-width: 768px) {
    _:-ms-fullscreen,
    :root .tr-down-mask svg {
        bottom: -2px;
    }
    _:-ms-fullscreen,
    :root #logo {
        height: 98px;
        width: 285px;
    }
}