@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Work+Sans:400,700&display=swap');

@font-face {
    font-family: 'FontAwesome';
    src: 
        url('../fonts/fontawesome/light/fa-light-300.woff2') format('woff2'),
        url('../fonts/fontawesome/light/fa-light-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

::selection,
::-moz-selection {
    background-color: #287cb3;
    color: #FFF;
}

::-moz-focus-inner {
    border: 0;
}

* {
    box-sizing: border-box;
    outline: none;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-size: 62.5%;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

header,
footer,
div,
section {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

section > div,
footer > div {
    padding: 8em 2em;
    margin: 0 auto;
    max-width: 960px;
    overflow: visible;
}

.blue > div > *,
.green > div > * {
    max-width: 580px;
}

section > div > *:first-child { margin-top: 0; }
section > div > *:last-child { margin-bottom: 0; }

/* ACCESSIBILITY */

.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* TYPOGRAPHY */

hr {
    margin: 4em 0;
    background-color: #EEE;
    font-size: 1em;
    height: 0.5em;
    width: 100%;
    display: block;
    overflow: hidden;
    outline: none;
    border: none;
}

h1,
h2,.h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0.5em 0;
}

p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + ul,
p + ol {
    margin-top: 2em;
}

h1 { font-size: 3.6em; }
h2, .h2 { font-size: 3em; }
h3 { font-size: 2.4em }
h4 { font-size: 2em; }
h5, h6 { font-size: 1.6em; }

p {
    font-size: 1.6em;
    line-height: 1.5em;
    margin: 1.25em 0;
}

h2 + p,.h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol,
h2 + dl,
h3 + dl,
h4 + dl,
h5 + dl,
h6 + dl {
    margin-top: 0;
}

a {
    color: #287cb3;
}

a:hover,
a:active,
a:focus {
    color: #FFF;
    background-color: #287cb3;
}

/* LISTS */

ul,
ol {
    font-size: 1em;
    margin: 4em 0;
    padding: 0 2em;
}

ul ul,
ul ol,
ol ul,
ol ol {
    font-size: 0.625em;
    padding: 0 4em;
    margin: 2em 0 0 0;
}

ul li {
    list-style-type: disc;
}

ul li,
ol li {
    font-size: 1.6em;
    line-height: 1.5em;
    margin: 1.25em 0;
}

ol li li,
ul li li {
    font-size: 1.6em;
}

ol:not([type]) {
    counter-reset: item;
    list-style: none;
    margin-left: 0;
    padding-left: 3em;
    position: relative;
}

ol ol {
    padding-left: 4em;
}

ol ol ol {
    padding-left: 5em;
}

ol ol ol ol {
    padding-left: 6em;
}

ol ol ol ol ol {
    padding-left: 7em;
}

ol ol ol ol ol ol {
    padding-left: 8em;
}

ol:not([type]) li::before {
    content: counters(item, ".") " ";
    counter-increment: item;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    position: absolute;
    left: 0;
    font-size: inherit;
    line-height: inherit;
}

@media all and ( min-width: 640px ) {

    h1 { font-size: 4em; }
    h2, .h2 { font-size: 3.6em; }
    h3 { font-size: 3em }
    h4 { font-size: 2.4em; }
    h5, h6 { font-size: 2em; }
    p { font-size: 1.8em; }
    ul li,
    ol li { font-size: 1.8em; }

    p + h2,
    p + h3,
    p + h4,
    p + h5,
    p + h6 {
        margin-top: 3.75rem;
    }

}

@media all and ( min-width: 720px ) {

    h1 { font-size: 4.8em; margin-top: 1.250em; }
    p { font-size: 2em; }
    ul li,
    ol li {
        font-size: 2em;
    }

}

section > div > p:first-of-type { 
    font-weight: 700;
}

/* HEADER */

header {
    height: 100vh;
    position: relative;
}

header a.logo {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    height: 162px;
    width: 290px;
    background-image: url('../images/logo-stc-portrait-white.svg');
    background-repeat: no-repeat;
    background-position: center;
    text-indent: 290px;
    white-space: nowrap;
    border: 1em solid transparent;
    box-sizing: border-box;
    transition: background-color 0.25s ease-out;
    position: absolute;
    top: 2em;
    left: 50%;
    transform: translate(-50%,0);
}

header a:hover,
header a:active,
header a:focus {
    background-color: rgba( 255, 255, 255, 0.2 );
}

header p {
    font-size: 3em;
    line-height: 1.2em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #FFF;
    background-color: #287cb3;
    padding: 0.66666em;
    margin: 0 0.2em 0.2em 0;
    box-shadow: 0.2em 0.2em 0 rgba(0,0,0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.continue::after {
   content: '\f078';
   font-family: 'FontAwesome';
   position: absolute;
   bottom: 1em;
   left: 50%;
   font-size: 4em;
   text-align: center;
   transform: translate(-50%,0);
   width: 2em;
   height: 2em;
   line-height: 2em;
   vertical-align: middle;
   border-radius: 50%;
   background-color: #FFF;
   color: #287cb3;
}

body::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url('../images/img-front-page.jpg');
    background-size: cover;
    background-position: center;
}

main {
    position: relative;
    z-index: 1;
}

/* SECTIONS */

section {
    background-color: #FFF;
    transition: background-color 0.25s ease-out;
}

.blue {
    background-color: #287cb3;
}

.blue ::selection,
.blue ::-moz-selection {
    background-color: #359e35;
    color: #FFF;
}

.green {
    background-color:  #359e35;
}
.green.darker {
    background-color: #026B02;
}

.blue *,
.green * {
    color: #FFF;
    border-color: #FFF;
}

/* INTRO */

dl {
    display: block;
    overflow: hidden;
    position: relative;
    border: 1px solid #CCC;
    font-size: 1em;
    margin: 4em 0 0 0;
}

dl dt,
dl dd {
    font-size: 2em;
    padding: 1em;
    margin: 0;
    display: block;
    overflow: hidden;
}

dl div {
    display: flex;
    flex-direction: column-reverse;
}

dl dd {
    font-size: 1.6em;
    background-color: #EEE;
    border-bottom: 1px solid #CCC;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

dl > div > dd {
    border-top: 1px solid #CCC;
}
dl > div:first-child > dd {
    border-top: 0;
}

@media all and ( min-width: 720px ){
    dl {
        display: flex;
        flex-direction: row;
    }
    dl div {
        height: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column-reverse;
    }



    dl > div > dd {
        border-top: none;
        flex-grow: 1;
    }
    dl div:not(:first-child) dd,
    dl div:not(:first-child) dt {
        border-left: 1px solid #CCC;
    }
}


/* FIGURES */

figure {
    display: block;
    overflow: hidden;
    margin: 0 0.2em 4em 0;
    height: auto;
    width: 100%;
    position: relative;
    border: 1px solid #FFF;
    box-shadow: 0.2em 0.2em 0 rgba(0,0,0, 0.2);
    
}

figure img {
   display: block;
   width: calc( 100% / 3 );
   border-left: 1px solid #FFF;
   float: left;
}

figure img:first-child {
    border: none;
}

@media all and ( min-width: 720px ){

    figure {
        float: right;
        width: 300px;
        height: auto;
        margin: 0 0 2em 4em;
    }
    
    figure img {
        width: 100%;
        border-left: none;
        border-top: 1px solid #FFF;
        float: none;
    }
}


/* FOOTER */

footer {
    min-height: 100vh;
    background-color: #CCC;
}

footer > div::before {
    content: 'Spread The Word! This is South Tyneside';
    display: block;
    overflow: hidden;
    height: auto;
    width: 70%;
    padding-bottom: calc( ( 30 / 143 ) * 70% );
    text-indent: 100%;
    white-space: nowrap;
    background-image: url('../images/logo-spread-the-word.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 4em;

}

footer > div::after {
    content: '';
    width: 50%;
    display: block;
    overflow: hidden;
    padding-bottom: calc( ( 81 / 294 ) * 50% );
    white-space: nowrap;
    background-image: url('../images/logo-stc-landscape-grey.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 4em auto 0;
}

@media all and ( min-width: 720px ){
    
    footer > div::after {
        width: 20%;
        padding-bottom: calc( ( 81 / 294 ) * 20% );
    }

    footer > div::before {
        width: 50%;
        padding-bottom: calc( ( 30 / 143 ) * 50% );
        
    }

}

footer p {
    font-size: 1.6em;
    margin: 0;
    text-align: center;
    display: block;
}

/* BTN */

.btnholder {
    max-width: 300px;
    margin: 2em auto 0;
}

.btn {
    display: inline-block;
    overflow: hidden;
    border: 0.063em solid rgba(0,0,0,0);
    font-size: 1.6em;
    line-height: 1.25em;
    padding: 0.5em 1.25em;
    margin: 0 0.125em 0.125em 0;
    background-color:  #287cb3;
    color: #FFF;
    transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    border-radius: 0.313em;
    box-shadow: 0.125em 0.125em 0 rgba(0,0,0,0.1);
    text-decoration: none;
    width: 100%;
    text-align: center;
}

.btn:hover,
.btn:focus {
    color: #FFF;
    background-color: #143e59;
    border-color: #143e59;
    box-shadow: 0.125em 0.125em 0 rgba(0,0,0,0.1);
}

.btn:active  {
    transform: translate( 0.125em, 0.125em );
    box-shadow: none;
}

.btn {
    font-size: 2em;
    line-height: 3em;
    padding: 0.4em 1em;
    margin: 0 0.1em 0.1em 0;
    border-radius: 0.25em;
    border-width: 0.05em;
    box-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
}

.id-howtoapply {
    border-top: 1px solid #EEE;
}

/* DOCUMENTS */

.id-documents div {
    margin-top: 4em;
}

.id-documents div:first-child {
    margin-top: 0;
}

.id-documents ul,
.id-documents li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

.id-documents li {
    font-size: 1.6em;
    line-height: 1.25em;
    padding: 1.25em 1.25em 1.25em 3.75em;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.id-documents li::before {
    content: '\f37e';
    font-family: 'FontAwesome';
    display: block;
    overflow: hidden;
    position: absolute;
    text-align: center;
    color: #333;
    border-right: 1px solid #CCC;
    width: 2.5em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    line-height: 3.75em;
}

.id-documents .word::before { content: '\f1c2'; }
.id-documents .pdf::before { content: '\f1c1'; }

.id-documents h3 {
    border: 1px solid #CCC;
    background-color: #EEE;
    font-size: 1.6em;
    padding: 1.25em;
    margin: 0;
}

@media all and ( min-width: 960px ){
    .id-documents > div > div {
        width: calc( (100% - 4em) / 2 );
        margin: 0;
    }

    .id-documents h2 {
        width: 100%;
    }

    .id-documents > div {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}



/* ACCORDION */

.accordion {
    max-width: none !important;
}

.accordion > div:not(:first-child){
    margin-top: 1em;
}

.accordion {
    margin: 4em 0;
}

.accordion h3 {
    margin: 0;
}

.accordion h3[aria-pressed] {
    background-color:#FFF;
    color: #359e35;
    cursor: pointer;
    cursor: hand;
    font-size: 2em;
    padding: 1em;
    position: relative;
    transition: color 0.25s ease-out, background-color 0.25s ease-out;
    border-radius: 0.25em;
    box-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
    margin: 0 0.1em 0.1em 0;
}

.accordion h3[aria-pressed]:hover,
.accordion h3[aria-pressed]:focus {
    background-color:#287cb3;
    color: #FFF;
}

.accordion h3[aria-pressed]:active {
    box-shadow: none;
    transform: translate( 0.1em, 0.1em );
}

.accordion h3[aria-pressed]::before {
    content: '\f078';
    font-family: 'FontAwesome';
    font-weight: 400;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translate(0,-50%);
    transition: transform 0.25s ease-out;
}

.accordion h3[aria-pressed="true"]::before {
    transform: translate(0,-50%) rotate(180deg);
}

.accordion .content {
    padding: 2em;
}

.accordion .content > *:first-child { margin-top: 0; }
.accordion .content > *:last-child { margin-bottom: 0; }

.accordion h3[aria-pressed="false"] + .content { display: none; }
.accordion h3[aria-pressed="true"] + .content { display: block; }


.blue .accordion h3 {
    color: #006293;
}

.blue .accordion h3[aria-pressed]:hover,
.blue .accordion h3[aria-pressed]:focus,
.grey .accordion h3[aria-pressed]:hover,
.grey .accordion h3[aria-pressed]:focus {
    background-color: #359e35;
    color: #fff;
}

.grey .accordion h3 {
    color: #706f6f;
}

/* VALUES */


.values ol,
.values li {
    display: block;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

.values li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.25em;
    color: rgba(0, 0, 0, 0.8);
    padding: 1.25em;
    text-align: center;
}

.values li span {
    display: inline-block;
    margin: 0.625em 0;

}

@media all and (min-width: 720px) {
    .values ol {
        display: flex;
        justify-content: space-between;
    }

    .values li {
        width: calc((100% - 8em) / 5);
        flex-grow: 1;
    }
}


.values ol:not([type])>li::before {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: none;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    display: block;
    position: static;
    color: #FFF;
}

.values ol:not([type])>li:nth-child(1) {
    background-color: #2eb0c5;
}

.values ol:not([type])>li:nth-child(2) {
    background-color: #7e5fa8;
}

.values ol:not([type])>li:nth-child(3) {
    background-color: #cc4a9b;
}

.values ol:not([type])>li:nth-child(4) {
    background-color: #f68c37;
}

.values ol:not([type])>li:nth-child(5) {
    background-color: #efbc2f;
}


.values ol:not([type])>li:nth-child(1)::before {
    content: 'P';
}

.values ol:not([type])>li:nth-child(2)::before {
    content: 'R';
}

.values ol:not([type])>li:nth-child(3)::before {
    content: 'O';
}

.values ol:not([type])>li:nth-child(4)::before {
    content: 'U';
}

.values ol:not([type])>li:nth-child(5)::before {
    content: 'D';
}


.values ol:not([type])>li::after {
    font-family: 'FontAwesome';
    font-weight: 300;
    text-transform: none;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    display: block;
    position: static;
    color: #FFF !important;
}

.values ol:not([type])>li:nth-child(1)::after {
    content: '\f2b5';
}

.values ol:not([type])>li:nth-child(2)::after {
    content: '\f4c3';
}

.values ol:not([type])>li:nth-child(3)::after {
    content: '\f183';
}

.values ol:not([type])>li:nth-child(4)::after {
    content: '\f4b6';
}

.values ol:not([type])>li:nth-child(5)::after {
    content: '\f058';
}


@media all and (min-width: 720px) {
    .values ol:not([type])>li:nth-child(-n+4)::after {
        margin-top: 0.5em;
    }

    .values ol:not([type])>li:nth-child(3)::after {
        margin-top: 0;
    }
}

@media all and (min-width: 960px) {
    .values ol:not([type])>li:nth-child(-n+4)::after {
        margin-top: 0.5em;
    }
}


.values {
    border: 10px solid white;
}

.values li span {
    overflow-wrap: anywhere;
}

.join {
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background: #006293;

    display: inline-block;

    min-width: 250px;
    min-height: 250px;


    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.join .img_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20%;
    height: 100%;
}

.full-width {
    max-width: 920px !important;
}

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