/*
Theme Name: Ausfilm
Author:
Author URI:
Description:
Version:
License:
License URI:
Tags: Ausfilm,
Text Domain: Ausfilm

*/

/* --------- Fonts can be changed in Font Stylesheet File --------- */

/* ideally wouldn't give everything margin and padding 0 by default, leaving it because of grandfathering issues but would like to phase out */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*list-style: none;*/
    /*font-style: normal;*/
}

body{
    line-height: 1.5em;
}

:root {
    --white: #ffffff;
    --black: #000000;
    --yellow: #f8e39b;
    --bright-yellow: #faf1dd;
    --homepage-header: #fbf0db;
    --orange: #F89D5D;
    --salmon: #ED7D6E;
    --theme-purple: #795a77;
    --light-purple: #AF9CAD;
    --blue: #1D3463;
    --dark-blue: #2F3F4E;
    --darkblue: #2F3F4E;
    --bg-darkblue: #283643;
    --light-blue: #9ebdca;
    --channel-featured-heading: #fcf1db;
    --channel-blue: #32404d;
    --channel-light-blue: #a4bdc9;
    --tax-incentives-heading: #fcf1db;
    --tax-incentives-text: #fcf1db;
    --tax-incentives-border: #fcf1db;
    --what-we-do-text: #fcf1db;
    --why-aus-heading: #C9BDC8;
    --why-aus-text: #F9F0DD;
    --paleyellow: #F9F0DD;
    --why-aus-heading-inner: #bcacb9;
    --why-aus-bnannerDesc-inner: #fdf8ee;
    --channel-heading: #fcf1db;
    --light-orange: #f8c7bb;
    --channel-featured: #fcf1db;
    --banner-text-austalent: #fcf1db;
    --post-title: #fcd8be;
    --whiteSmoke: #F5F5F5;
    --gold: #c2977c;
    --gold-lighter: #d2a98f;
    --ocre: #d17d5e;
    /* --Aktiv-Grotesk: 'AktivGrotesk', sans-serif; */
    /* --Aktiv-Grotesk: 'AktivGrotesk-Regular', sans-serif; */
    /* I have added typekit back into the header and loaded Aktiv Grotesk below from there as the previous font loading was not looking correct */
    /* --Aktiv-Grotesk: 'aktiv-grotesk', sans-serif; */
    --Aktiv-Grotesk: 'Aktiv', sans-serif;
    --Akz-std: 'Akzidenz-Grotesk Std', sans-serif;
    --Akz-med: 'Akzidenz-Grotesk Std', sans-serif;
    /*--decimal: "Decimal A", "Decimal B", Arial, sans-serif !important;
    --decimal-light: "Decimal A", "Decimal B", Arial, sans-serif !important;
    --decimal-bold: "Decimal A", "Decimal B", Arial, sans-serif !important;*/
    --decimal: "Decimal", Arial, sans-serif !important;
    --decimal-light: "Decimal Light", Arial, sans-serif !important;
    --decimal-bold: "Decimal", Arial, sans-serif !important;
    --transition-duration: 0.3s;

    --theme-color: var(--dark-blue);

}

html { scroll-behavior: smooth; width: 100%; height: 100%; font-size: 16px; }
body { font-family: var(--Aktiv-Grotesk); font-size: 1.0625rem; font-style: normal; font-weight: 400; color: var(--darkblue); }
a { text-decoration: none; color: var(--gold); }
a:hover{ color: var(--gold-lighter); }

.mark, mark {
    padding: 0;
    color: var(--bs-highlight-color);
    background-color: var(--bs-highlight-bg);
}

/* Heading Sizes */
/* ==== Custom Utility Classes ==== */
/* Custom Heading Classes */
h1, .h1, .h1 strong { font-family: var(--decimal); font-size: 4rem; font-style: normal; line-height: 96%; font-weight: 700;}
h2, .h2, .h2 strong { font-family: var(--decimal); font-size: 2.875rem; font-style: normal; line-height: 1.1em; font-weight: 700;}
h3, .h3, .h3 strong { font-family: var(--decimal); font-size: 2rem; font-style: normal; line-height: 1.2em; font-weight: 700;}
h4, .h4, .h4 strong { font-family: var(--decimal); font-size: 1.6875rem; font-style: normal; line-height: 1.5em; font-weight: 700;}
h5, .h5, .h5 strong { font-family: var(--decimal); font-size: 1.375rem; font-style: normal; line-height: 1.5em; font-weight: 700;}
h6, .h6, .h6 strong { font-family: var(--decimal); font-size: 1.1rem; font-style: normal; line-height: 1.5em; font-weight: 700;}

.uppercase{text-transform: uppercase;}

/* fixing bootstrap breaking list layout */
.row>ul {
    padding-left: revert;
}

.container {
    max-width: 90%;
    width: 1244px;
}

nav .container {
    max-width: 100%;
    width: 1400px;
}

@media screen and (max-width: 576px){
    .container {
        max-width: 100%;
    }
}


@media only screen and (max-width: 1200px) {
    #mega-menu-wrap-extra-menu .mega-menu-toggle {
        right: calc(var(--bs-gutter-x) * .5)!important;
    }
}



/* I don't know why bootstrap sets the margin bottom on p's to 1rem, this is bound to cause problems */
p{
    margin-bottom: 1em;
}

.has-text-align-center {
    text-align: center;
}


/* Paragraph Classes */

/* I'm going to comment these p#'s out - they turn up in weird places on the site when text gets copy pasted and I'd rather any theme level sizing is applied more granularly, or at least using a less universal class name */

/*

.p1,
.p1 p {
    font-style: normal;
    font-weight: 400;
    font-size: 1.875rem;
    line-height: normal;
    text-align: left;
    margin-bottom: 0;
}

.p2,
.p2 p {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.p2 p {
    margin-bottom: 0;
}

.p3,
.p3 p {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.p4,
.p4 p {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.p5,
.p5 p {
    padding-bottom: 18px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

*/

/* --- Updated Typography classes --- */

/* Custom Paragraph Classes */
strong, .strong { font-weight: 700; }

/* this seems like it should be reviewed, commenting it out */
/*.button { color: #795A77; text-align: center; font-family: var(--Akz-std); font-size:16px; font-style: normal; font-weight: 400; padding: 10px 30px; line-height: 150%; }*/

.border-all { border: 1px solid;}
.border-btm { border-bottom: 1px solid;}
.img-arrow-lighten { opacity: .7; filter: grayscale(1);}
.program-button:hover .img-arrow-lighten { opacity: 1; filter: brightness(0) invert(1);}


/* --- Font Family Classes --- */
.font-Aktiv { font-family: var(--Aktiv-Grotesk);}
.font-decimal { font-family: var(--decimal);}
/* --- Font Family Classes --- */

/* --- Color Classes --- */
.text-yellow { color: var(--yellow) !important; border-color: var(--yellow);}
.text-bright-yellow { color: var(--bright-yellow) !important; border-color: var(--bright-yellow);}
.text-orange { color: var(--orange) !important; border-color: var(--orange);}
.text-darkblue { color: var(--dark-blue) !important; border-color: var(--dark-blue) !important; }
.text-lightblue { color: var(--light-blue) !important; border-color: var(--light-blue); }
.text-channel-blue { color: var(--channel-light-blue) !important; border-color: var(--channel-light-blue); }
.text-channel-featured { color: var(--channel-featured-heading) !important; border-color: var( --channel-featured-heading); }
.text-item-featured { color: var(--channel-featured) !important; border-color: var( --channel-featured) !important; }
.text-aus-inner-heading { color: var(--why-aus-heading-inner) !important; border-color: var(--why-aus-heading-inner); }
.text-aus-inner-desc { color: var(--why-aus-bnannerDesc-inner) !important; border-color: var(--why-aus-bnannerDesc-inner); }
.text-post-title { color: var(--post-title) !important; border-color: var(--post-title); }
.text-incentives-heading { color: var(--tax-incentives-heading); }
.text-incentives-color { color: var(--tax-incentives-text); }

.text-light-purple {
    color: var(--light-purple);
}

.text-color-white {
    color: #fff;
}
.text-why-aus { color: var(--why-aus-text); }
.text-austalent-banner { color: var(--banner-text-austalent); }
.text-light-orange {
    color: var(--light-orange);
    color: #F6C1B9 !important;
}

body.whatweDo  .text-about-orange {
    color: #F6C1B9 !important;
}
.text-light-blue { color: var(--light-blue); }
.text-what-we-do { color: var(--what-we-do-text); }
.text-channel-banner { color: var(--channel-heading); }
.text-purple { color: var(--theme-purple) !important; border-color: var(--theme-purple) !important}
.text-light-purple {
    color: var(--light-purple) !important;
}
.text-whiteSmoke { color: var(--whiteSmoke) !important;}


.cursor-pointer {
    cursor: pointer;
}

.bg-shadow { background-color: rgba(0,0,0,0.05); }
.bg-black { background-color: var(--black); }
.bg-lightblue { background-color: var(--light-blue); }
.bg-channel-blue { background-color: var(--channel-blue); }
.bg-purple { background-color: var(--theme-purple); }
.bg-darkblue  {background-color: var(--bg-darkblue);}
.paleyellow, .text-paleyellow { color: var(--paleyellow);}
.bg-salmon {background-color: var(--salmon);}


/* --- Color Classes --- */

/* --- Space Utilty Classes --- */



.pt-6 { padding-top: 3.75rem; /* 60px */}
.pb-6 { padding-bottom: 3.75rem; /* 60px */}
.ps-6 { padding-left: 3.75rem; /* 60px */}
.pe-6 { padding-right: 3.75rem; /* 60px */}
.px-6 { padding: 0 3.75rem;}
.py-6 { padding: 3.75rem 0;}


.mt-6 { margin-top: 3.75rem; /* 60px */ }
.mb-6 { margin-bottom: 3.75rem; /* 60px */ }
.ms-6 { margin-left: 3.75rem; /* 60px */ }
.me-6 { margin-right: 3.75rem; /* 60px */ }
.mx-6 { margin: 0 3.75rem; }
.my-6 { margin: 3.75rem 0; }

.pt-64 { padding-top: 4rem; /* 64px */}
.pb-64 { padding-bottom: 4rem; /* 64px */}
.ps-64 { padding-left: 4rem; /* 64px */}
.pe-64 { padding-right: 4rem; /* 64px */}
.px-64 { padding: 0 4rem;}
.py-64 { padding: 4rem 0;}


.mt-64 { margin-top: 4rem; /* 64px */ }
.mb-64 { margin-bottom: 4rem; /* 64px */ }
.ms-64 { margin-left: 4rem; /* 64px */ }
.me-64 { margin-right: 4rem; /* 64px */ }
.mx-64 { margin: 0 4rem; }
.my-64 { margin: 4rem 0; }



.pt-7 { padding-top: 4.5rem; /* 72px */ }
.pb-7 { padding-bottom: 4.5rem; /* 72px */ }
.ps-7 { padding-left: 4.5rem; /* 72px */ }
.pe-7 { padding-right: 4.5rem; /* 72px */ }
.px-7 { padding: 0 4.5rem; }
.py-7 { padding: 4.5rem 0; }

.pt-8 { padding-top: 5rem; /* 80px */ }
.pb-8 { padding-bottom: 5rem; /* 80px */ }
.ps-8 { padding-left: 5rem; /* 80px */ }
.pe-8 { padding-right: 5rem; /* 80px */ }
.px-8 {  padding-left: 5rem; padding-right: 5rem; }
.py-8 { padding-top: 3.25rem; padding-bottom: 3.25rem; /* 52px */ }

.mt-8 { margin-top: 5rem; /* 80px */ }
.mb-8 { margin-bottom: 5rem; /* 80px */ }
.ms-8 { margin-left: 5rem; /* 80px */ }
.me-8 { margin-right: 5rem; /* 80px */ }
.mx-8 { margin: 0 5rem; }
.my-8 { margin: 5rem 0; }

.pt-9 { padding-top: 5.5rem; /* 88px */ }
.pb-9 { padding-bottom: 5.5rem; /* 88px */ }
.ps-9 { padding-left: 5.5rem; /* 88px */ }
.pe-9 { padding-right: 5.5rem; /* 88px */ }
.px-9 { padding: 0 5.5rem; }
.py-9 { padding: 5.5rem 0; }

.pt-10 { padding-top: 6.25rem; /* 100px */ }
.pb-10 { padding-bottom: 6.25rem; /* 100px */ }
.ps-10 { padding-left: 6.25rem; /* 100px */ }
.pe-10 { padding-right: 6.25rem; /* 100px */ }
.px-10 { padding: 0 6.25rem; }
.py-10 { padding: 6.25rem 0; }

.mt-10 { margin-top: 6.25rem; /* 100px */ }
.mb-10 { margin-bottom: 6.25rem; /* 100px */ }
.ms-10 { margin-left: 6.25rem; /* 100px */ }
.me-10 { margin-right: 6.25rem; /* 100px */ }
.mx-10 { margin: 0 6.25rem; }
.my-10 { margin: 6.25rem 0; }

.pt-12 { padding-top: 7.5rem !important; /* 120px */ }
.pb-12 { padding-bottom: 7.5rem !important; /* 120px */ }
.ps-12 { padding-left: 7.5rem !important; /* 120px */ }
.pe-12 { padding-right: 7.5rem !important; /* 120px */ }
.px-12 { padding: 0 7.5rem !important; }
.py-12 { padding: 7.5rem 0 !important; }


.mt-12 { margin-top: .875rem; /* 12px */ }
.mb-12 { margin-bottom: .875rem; /* 12px */ }
.ms-12 { margin-left: .875rem; /* 12px */ }
.me-12 { margin-right: .875rem; /* 12px */ }
.mx-12 { margin: 0 .875rem; }
.my-12 { margin: .875rem 0; }

.pt-14 { padding-top: .875rem; /* 14px */}
.pb-14 { padding-bottom: .875rem; /* 14px */}
.ps-14 { padding-left: .875rem; /* 14px */}
.pe-14 { padding-right: .875rem; /* 14px */}
.px-14 { padding: 0 .875rem;}
.py-14 { padding: .875rem 0;}


.mt-14 { margin-top: .875rem; /* 14px */ }
.mb-14 { margin-bottom: .875rem; /* 14px */ }
.ms-14 { margin-left: .875rem; /* 14px */ }
.me-14 { margin-right: .875rem; /* 14px */ }
.mx-14 { margin: 0 .875rem; }
.my-14 { margin: .875rem 0; }

.pt-20 { padding-top: 1.25rem/* 20px */}
.pb-20 { padding-bottom: 1.25rem/* 20px */}
.ps-20 { padding-left: 1.25rem/* 20px */}
.pe-20 { padding-right: 1.25rem/* 20px */}
.px-20 { padding: 0 1.25rem;}
.py-20 { padding: 1.25rem 0;}


.mt-20 { margin-top: 1.25rem/* 20px */ }
.mb-20 { margin-bottom: 1.25rem/* 20px */ }
.ms-20 { margin-left: 1.25rem/* 20px */ }
.me-20 { margin-right: 1.25rem/* 20px */ }
.mx-20 { margin: 0 1.25rem; }
.my-20 { margin: 1.25rem 0; }

/* --- Utility classes as per live website --- */
.padd-38 {
    padding: 2.375rem;
}
.pad-y-57 {
    padding-top: 57px;
    padding-bottom: 57px;
}

.pad-t-57 {
    padding-top: 57px;
}

.pad-b-57 {
    padding-bottom: 57px;
}

.m-y-57 {
    margin-top: 57px;
    margin-bottom: 57px;
}

.m-t-57 {
    margin-top: 57px;
}

.m-b-57 {
    margin-bottom: 57px;
}

.pad-y-53 {
    padding-top: 53px;
    padding-bottom: 53px;
}

.pad-t-53 {
    padding-top: 53px;
}

.pad-b-53 {
    padding-bottom: 53px;
}
.pt-52 {
    padding-top: 3.25rem !important;
}

.m-b-53 {
    margin-bottom: 53px;
}
.pad40 { padding-bottom: 40px; }
.pad40-top { padding-top: 40px; }

.m-b-40 {
    margin-bottom: 40px;
}

.m-b-30 { margin-bottom: 1.875rem; }
.m-t-30 { margin-top: 1.875rem; }

.m-b-54 {
    margin-bottom: 3.375rem;
}
.m-t-17 {
    margin-top: 17px;
}

.m-b-17 {
    margin-bottom: 17px;
}

.my-17 {
    margin-top: 17px;
    margin-bottom: 17px;
}

.m-t-14 { margin-top: 14px;}
.m-b-14 {
    margin-bottom: 14px;
}
.line  { border-bottom: 1px solid #00000025; }
.top-line  { border-top: 1px solid #31404E; }

/* --- Space Utilty Classes --- */

/* --- border classes ---*/
.border-tax-incentives { border-bottom: 1px solid var(--tax-incentives-border);}
/* --- border classes ---*/


/* ==== Custom Utility Classes ==== */


.pull-up { top: -18px }
.pull-up:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 48px;
    background: #795a77;
    top: 0;
}



/* ====================== Link Rows Stying ===================== */

.row-links{

}

.row-links ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.row-links ul li {
    padding: 0;
    border-top: 1px solid var(--paleyellow);
    transition: all linear .3s;
    transition-duration: var(--transition-duration);
}
.row-links ul li:last-of-type{
    border-bottom: 1px solid var(--paleyellow);
}
.row-links ul li:hover {
    background-color: var(--paleyellow);
}
.row-links ul li:hover a {
    color: var(--dark-blue);
    padding: 18px;
}
.row-links ul li a {
    color: var(--paleyellow);
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    transition: all linear .3s;
    transition-duration: var(--transition-duration);
}

.row-links ul li a span{
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.row-links .list_chevron{
    border-top: 2px solid;
    border-right: 2px solid;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    margin-right: 2px;
}


/* ====================== END Link Rows Stying ===================== */


/* ====================== Accordions Stying ===================== */

.accordion-item {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;

    border: 0;
    border-bottom: 1px solid var(--theme-purple);
    color: var(--darkblue);
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.accordion-button{
    padding: 1rem 0;
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    transition: all ease-in-out 0.25s;
    transition-duration: var(--transition-duration);
    font-size: 1em;
    letter-spacing: inherit;
}
.accordion-button:not(.collapsed), .accordion-item:hover .accordion-button{
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    background: var(--theme-purple);
    padding: 1rem;
}
.accordion-button:not(.collapsed) .d-block, .accordion-item:hover .accordion-button .d-block{
    color: white !important;
}

.accordion-button::after{
    background-image: none;
    background-color: var(--theme-purple);
    -webkit-mask-image: var(--bs-accordion-btn-icon);
    mask-image: var(--bs-accordion-btn-icon);
}

.accordion-item:hover .accordion-button:after, .accordion-button:not(.collapsed):after{
    background-color: white!important;
    background-image: none;
    -webkit-mask-image: var(--bs-accordion-btn-active-icon);
    mask-image: var(--bs-accordion-btn-active-icon);
}

/* ====================== END Accordions Stying ===================== */


/* ====================== Factsheet Pseudo-Accordion ===================== */

.factsheet-item {
    border-top: 1px solid var(--dark-blue);
    transition: all ease-in-out .25s;
}

.factsheet-item:last-of-type {
    border-bottom: 1px solid var(--dark-blue);
}

.factsheet-button {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
    transition: all ease-in-out .25s;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.factsheet-button:after {
    content: '';
    display: block;
    height: 11px;
    width: 11px;
    transform: rotate(45deg);
    border-top: 1px solid var(--dark-blue);
    border-right: 1px solid var(--dark-blue);
    margin-right: 3px;
    vertical-align: middle;
    min-width: 11px;
}

.factsheet-item:hover {
    background-color: var(--darkblue);
    color: #fff;
    /* padding: 0 12px; */
}

.factsheet-item a {
    transition: all ease-in-out .25s;
}

.factsheet-item:hover a {
    color: #fff !important;
    padding: 0 1rem;
    background-position: center right 10px;
}

.factsheet-item:hover .factsheet-button {
    filter: brightness(1000);
}

/* ====================== END Factsheet Pseudo-Accordion ===================== */


/* ====================== Wordpress Image Gallery - Make Responsive ===================== */

.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px!important;
  }
  
  .wp-block-gallery img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: all ease-in-out 0.1s;
  }

  .wp-block-gallery img:hover {
    scale: 1.02;
    /*box-shadow: 0 0 20px #00000014;*/
  }
  
  /* Mobile styles */
  @media only screen and (max-width: 768px) {
    .wp-block-gallery {
      grid-template-columns: 1fr;
    }
  }

  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    width: 100%!important;
  }

  @media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
        width: 100%!important;
    }
  }

  /* ====================== END Wordpress Image Gallery - Make Responsive ===================== */