/* GENERIC */

::placeholder {
    color: #ACACAC !important;
    opacity: 1;
}

body {
    background-color: #ffffff;
    color: #150028;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

p, a {
    color: #150028;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
}

p.intro {
    color: #777777;
    font-size: 24px;
    margin-bottom: 10px;
}

p.grey {
    color: #777777;
}

h1.highlighted-yellow {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 112px;
    font-weight: 400;
    font-style: normal;
    line-height: 112px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 5px 5px 0px rgba(255, 242, 20, 0.7);
    -webkit-text-shadow: 5px 5px 0px rgba(255, 242, 20, 0.7);
    -moz-text-shadow: 5px 5px 0px rgba(255, 242, 20, 0.7);
}

h1.highlighted-orange {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 112px;
    font-weight: 400;
    font-style: normal;
    line-height: 112px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 5px 5px 0px rgba(255, 103, 29, 0.7);
    -webkit-text-shadow: 5px 5px 0px rgba(255, 103, 29, 0.7);
    -moz-text-shadow: 5px 5px 0px rgba(255, 103, 29, 0.7);
}

h1.highlighted-blue {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 112px;
    font-weight: 400;
    font-style: normal;
    line-height: 112px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 5px 5px 0px rgba(46, 217, 195, 0.7);
    -webkit-text-shadow: 5px 5px 0px rgba(46, 217, 195, 0.7);
    -moz-text-shadow: 5px 5px 0px rgba(46, 217, 195, 0.7);
}

h1.highlighted-purple {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 112px;
    font-weight: 400;
    font-style: normal;
    line-height: 112px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 5px 5px 0px rgba(194, 166, 225, 0.7);
    -webkit-text-shadow: 5px 5px 0px rgba(194, 166, 225, 0.7);
    -moz-text-shadow: 5px 5px 0px rgba(194, 166, 225, 0.7);
}

h1.highlighted-green {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 112px;
    font-weight: 400;
    font-style: normal;
    line-height: 112px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 5px 5px 0px rgba(56, 212, 48, 0.7);
    -webkit-text-shadow: 5px 5px 0px rgba(56, 212, 48, 0.7);
    -moz-text-shadow: 5px 5px 0px rgba(56, 212, 48, 0.7);
}

h1 {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 68px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

h2 {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 44px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

h3 {
    color: #150028;
    font-family: bebas-neue, sans-serif;
    font-size: 34px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

h4 {
    color: #150028;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h5 {
	color: #150028;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/*a.yellow {
    background-color: #FFF214;
    color: #150028;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    padding: 2.5px 25px; 
}

a:hover.yellow {
    font-size: 16px;
    transition: all 0.5s;
}*/

a.yellow, a.orange, a.blue, a.green, a.purple {
    background-color: transparent;
    color: #ACACAC;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    padding: 2.5px 25px; 
}

a:hover.yellow {
    background-color: #FFF214;
    color: #150028;
    font-size: 16px;
    transition: all 0.5s;
}

a:hover.orange {
    background-color: #FF671D;
    color: #150028;
    font-size: 16px;
    transition: all 0.5s;
}

a:hover.blue {
    background-color: #2ED9C3;
    color: #150028;
    font-size: 16px;
    transition: all 0.5s;
}

a:hover.green {
    background-color: #38D430;
    color: #150028;
    font-size: 16px;
    transition: all 0.5s;
}

a:hover.purple {
    background-color: #C2A6E1;
    color: #150028;
    font-size: 16px;
    transition: all 0.5s;
}

hr.grey {
    background-color: #ACACAC;
    border: none;
    display: block;
    height: 3px;
    margin: 1.5rem 0;
}

hr.yellow {
    background-color: #FFF214;
    border: none;
    display: block;
    height: 3px;
    margin: 1.5rem 0;
}

.empty-space {
	height: 50px;
}

/*--- HOME ---*/

/* VIDEO */

div#main_video {
    position: relative;
    padding: 10px 0px 0px 0px;
}

.video_overlay {
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    width: 102%;
    height: 96%;
    background-color: rgba(0, 0, 0, 0.5);
}

img.video-logo {
    width: 400px;
    height: auto;
}

.slide-content {
    width: 100%;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
    transform: translate(0%, 100%);
}

/* SERVICES */

div#our-services {
    padding: 0px;
}

#our-services hr {
    background-color: #707070;
    border: none;
    display: block;
    height: 1px;
    width: 85%;
    margin: 50px auto;
}

.our-services h4 {
    font-family: bebas-neue, sans-serif;
}

.columns.is-multiline.is-mobile.has-text-centered.services-list {
    display: flex;
    align-items: center;
}

a.column.is-2-desktop.is-12-tablet.is-12-mobile {
    /*width: 20%;*/
    min-height: 150px;
    background-color: #F0F0F0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

a:hover.column.is-2-desktop.is-12-tablet.is-12-mobile {
    background-color: #FFF214;
    transition: all 0.5s;
}

#our-services img {
    width: 50px;
    margin: 0 auto;
}

/* WORK */

div#work {
    padding-bottom: 0px;
}

a.overlay {
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

a:hover.overlay {
    opacity: 0;
    transition: all 0.5s;
}

article.tile.is-child.specsavers {
	background-image: url('/images/specsavers-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 700px;
}

article.tile.is-child.specsavers img {
	width: 200px;
}

article.tile.is-child.spar {
	background-image: url('/images/spar-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

article.tile.is-child.spar img {
	width: 200px;
}

article.tile.is-child.powerni {
	background-image: url('/images/power-ni-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
}

article.tile.is-child.powerni img {
	width: 200px;
}

article.tile.is-child.ulsterbank {
	background-image: url('/images/ulster-bank-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 500px;
}

article.tile.is-child.ulsterbank img {
	width: 200px;
}

article.tile.is-child.castlecourt {
	background-image: url('/images/castle-court-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-height: 500px;
}

article.tile.is-child.castlecourt img {
	width: 200px;
}

article.tile.is-child.natwest {
	background-image: url('/images/natwest-background.png');
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
}

article.tile.is-child.natwest img {
	width: 200px;
}

/* CLIENTS */

div#clients {
    padding-top: 0px;
}

/* AWARDS */

div#awards {
    background-color: #000000;
}

div#awards h3 {
    color: #ffffff;
}

/* TEAM */

div#team {
    background-color: #FFF214;
    /*background-image: url("/images/the-team.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;*/
    padding-bottom: 15px;
}

div#team .column.is-12-desktop.is-12-tablet.is-12-mobile {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
}

div#team .column.is-12-desktop.is-12-tablet.is-12-mobile a {
    margin: -20px;
}

/* BLOG */

div#blog {
    background-color: #CBCBCB;
}

/*----- ABOUT -----*/

div#our-awards {
    padding-top: 0px;
    padding-bottom: 0px;
}

div#our-awards hr {
    background-color: #6DD6C3;
    border: none;
    display: block;
    height: 1px;
    margin: 1.5rem 0;
}

div#client-testimonials hr {
    background-color: #6DD6C3;
    border: none;
    display: block;
    height: 1px;
    margin: 1.5rem 0;
}

span.green {
    color: #2ED9C3;
}

/*----- SERVICES -----*/

/*--- MAIN ---*/

.landing {
    position: relative;
}

.landing-heading {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 99%;
    background-color: rgba(0, 0, 0, 0.5);
}

.landing h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #ffffff;
}

a:hover .landing-heading {
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.5s;
}

/*--- SUBPAGES ---*/

div#banner {
    padding: 0px;
}

.services-tab {
    display: inline-grid;
    padding: 2.5px 10px;
    background-color: #FF671D;
}

/*div#services-details {
    padding-bottom: 0px;
}*/

div#services-details .columns.is-multiline.is-mobile {
    align-items: flex-end;
}

div#services-details h5 {
    margin-bottom: 10px;
}

div#services-details h1 {
    margin-bottom: 50px;
}

div#services-details hr {
    background-color: #707070;
    border: none;
    display: block;
    height: 1px;
    margin: 1.5rem 0;
}

div#services-details h2 {
    color: #000000;
}

div#corporate, div#consumer, div#digital, div#video, div#event {
    padding-bottom: 0px;
}

div#work-examples {
    background-color: #D8D8D8;
    padding-top: 0px;
}

div#work-examples h2 {
    color: #EC7037;
}

/*----- CLIENTS -----*/

div#client-list {
    /*display: flex;
    align-items: center;
    padding-top: 0px;*/
    padding-bottom: 0px;
}

div#client-list .columns.is-multiline.is-mobile.has-text-centered {
    align-items: center;
}

/*div#client-list .column.is-3-desktop {
    width: 20%;
}*/

img.client-logo {
    display: block;
    margin: 0 auto;
}

.clients div#client-testimonials hr {
    background-color: #C2A6E1;
    border: none;
    display: block;
    height: 1px;
    margin: 1.5rem 0;
}

.clients div#client-testimonials .slick-prev:before, .clients div#client-testimonials  .slick-next:before {
    color: #C2A6E1 !important;
}

.clients div#client-testimonials span.green {
    color: #C2A6E1 !important;
}

/*----- WORK -----*/

.work-top-tab {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

h5.work-tab {
    background-color: #FFF214;
    padding: 2.5px 10px;
    margin-right: 5px;
}

.work-top-tab .category {
    background-color: rgba(255, 242, 20, 0.5);
    padding: 2.5px 10px;
    text-transform: uppercase;
    font-weight: 900;
}

.work .work-post-content h1 {
    margin-bottom: 15px;
}

.work .work-post-content p {
    margin-bottom: 15px;
}

.work .work-post-content ul {
    list-style: inside disc;
    margin-bottom: 15px;
}

/*.work-top-tab a:hover {
    background-color: rgba(255, 242, 20, 1);
    transition: all 0.5s;
}*/

/*----- TEAM -----*/

div#staff-members {
    padding-top: 0px;
}

.staff-details {
    background-color: #38D430;
    padding: 5px;
    margin-top: -4px;
    min-height: 76px;
}

p.role {
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 10px;
}

div#staff-members hr {
    background-color: #000000;
    border: none;
    display: block;
    height: 1px;
    margin: 10px 0px;
}

/*----- CONTACT ----*/

.input, .select select, .textarea {
    background-color: #ffffff;
    border: none;
    border-radius: 0px;
    color: #727272;
    box-shadow: none;
}

form#form1_contact .input, form#form1_contact .textarea {
    background-color: #ffffff;
    color: #727272;
    border: 1px solid #ACACAC;
    border-radius: 0px;
    box-shadow: none;
    padding: 10px;
}

form#form1_contact .input:active, form#form1_contact .input:focus {
    background-color: #ffffff;
    border: 1px solid #727272;
    box-shadow: none;
    outline: none;
    transition: all 0.5s;
}

textarea#form1_message {
    min-width: 100%;
    min-height: 150px;
}

input#form1_submit {
    background-color: #FF671D;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    border: 1px solid #FF671D;
    border-radius: 0px;
    box-shadow: none;
    padding: 2.5px 25px;
}

input:hover#form1_submit {
    background-color: #150028;
    color: #ffffff;
    font-size: 18px;
    border: 1px solid #150028;
    transition: all 0.5s;
}

input#form1_capture {
    display: none;
    visibility: hidden;
}

/*----- MEDIA QUERIES -----*/

/*--- MOBILE ---*/

@media (max-width: 480px) {

    h1.highlighted-yellow, h1.highlighted-orange, h1.highlighted-blue, h1.highlighted-purple, h1.highlighted-green {
        font-size: 50px;
        line-height: 50px;
    }

    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 40px;
    }

    .landing-heading h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 20px;
    }

    .video_overlay {
        transform: translate(-50%, -57%);
        width: 105%;
        height: 88%;
    }

    .slide-content {
        transform: translate(0%, 50%);
    }

    a.column.is-2-desktop.is-12-tablet.is-12-mobile {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    article.tile.is-child.specsavers, article.tile.is-child.spar, article.tile.is-child.ulsterbank, article.tile.is-child.castlecourt, article.tile.is-child.powerni, article.tile.is-child.natwest {
        height: 250px;
        min-height: 250px;
    }

    .work-details h3 {
        font-size: 28px;
    }

}

/*--- TABLET ---*/

@media (min-width: 481px) and (max-width: 768px) {

    h1.highlighted-yellow, h1.highlighted-orange, h1.highlighted-blue, h1.highlighted-purple, h1.highlighted-green {
        font-size: 80px;
        line-height: 80px;
    }

    .video_overlay {
        transform: translate(-50%, -54%);
        width: 105%;
        height: 94%;
    }

    .slide-content {
        transform: translate(0%, 75%);
    }

    a.column.is-2-desktop.is-12-tablet.is-12-mobile {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    article.tile.is-child.specsavers, article.tile.is-child.spar, article.tile.is-child.ulsterbank, article.tile.is-child.castlecourt, article.tile.is-child.powerni, article.tile.is-child.natwest {
        height: 250px;
        min-height: 250px;
    }

    .work-details h3 {
    	font-size: 30px;
    }

}

/*--- LAPTOP ---*/

@media (min-width: 769px) and (max-width: 1024px) {

    a.column.is-2-desktop.is-12-tablet.is-12-mobile {
        min-height: 158px;
    }

    div#client-list .column.is-3-desktop {
        width: 20%;
    }

    .work-details h3 {
        font-size: 22px;
    }

}

/* AWKWARD SIZE */

@media (min-width: 1025px) and (max-width: 1216px) {

    h4 {
        font-size: 18px;
    }

    .work-details h3 {
        font-size: 22px;
    }
}

/*--- SMALL DESKTOP ---*/

@media (min-width: 1217px) and (max-width: 1440px) {

    div#client-list .column.is-3-desktop {
        width: 20%;
    }

    h4 {
        font-size: 18px;
    }

    .work-details h3 {
        font-size: 28px;
    }
}

/*--- LARGE DESKTOP ---*/

@media (min-width: 1441px) and (max-width: 2500px) {

    div#client-list .column.is-3-desktop {
        width: 20%;
    }
}