/***********************************************
Contact
************************************************/

/***********************************************
Screen 1200px+
***********************************************/
.jobblock {
    border-top: 1px solid #b4b4b4;
    border-left: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    padding: 30px;
    text-align: center;
    font-weight: lighter;
}

.jobhead {
    font-size: 22px;
    font-weight: 600;
    color: #434343;
}

.joblinkbutton {
    font-size: 16px;
    font-weight: lighter;
    padding: 15px 5px;
    width: auto;
}

.baseborderpurple { border-bottom: 5px solid #484396; }

.baseborderorange { border-bottom: 5px solid #e09e1a; }

.baseborderblue { border-bottom: 5px solid #0088cf; }

.ui-dialog { z-index: 1000; }

.staffcover {
    background-image: url(images/splitgraphics/aileen.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    max-height: 300px;
    max-width: 1000px;
    background-color: #ffffff;
}

.leftcolumn img { padding: 0; }

.introheaderparagraph { color: dimgrey; }

.remodal {
    max-height: 500px;
    overflow: scroll;
    overflow-x: hidden;
    text-align: left;
}

strong { font-weight: 600; }

.cell, .videocell {
    background-color: #222;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

.pebbleJob {
    border-bottom: 1px dotted #ccc;
    padding: 0;
}

.jobTitleLink {
    float: left;
    position: relative;
}

.jobTitleLink a {
    font-size: 20px;
    line-height: 19px;
    color: #333333;
    font-style: italic;
}

.deadlineLabel {
    position: absolute;
    top: 8px;
    right: -86px;
    padding: 4px 10px;
    background-color: #fa6341;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    border-radius: 6px 6px 6px 0;
}

.jobApplyLink { float: right; }

.jobApplyLink a {
    font-size: inherit;
    line-height: 19px;
    color: #ffffff;
    background-color: #06a5d1;
    padding: 10px 16px;
}

.jobApplyLink a:hover { background-color: #1ab3dd; }

.tooltip:hover:after {
    background: rgba(100, 180, 65, 1.0);
    border-radius: 5px;
    bottom: 35px;
    color: #fff;
    content: attr(data-title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    text-align: center;
    z-index: 98;
    width: 46px;
}

.tooltip:hover:before {
    border: solid;
    border-color: #64b441 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 29px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.benefits-block-icon {
    display: block;
    text-align: center;
    background: rgba(214, 11, 82, 1.0) none repeat scroll 0 0;
    border-radius: 100%;
    width: 38px;
    height: 38px;
    color: rgba(42, 42, 42, 0.6);
    display: inline-block;
    position: relative;
    padding: 10px 10px 10px 10px !important;
    text-align: center;
    margin: 0 0 30px 0;
}

.benefits-block-icon span { margin: 3px 0 0 0; }

.benefit-icon {
    float: none;
    color: #ffffff;
    font-weight: 600;
}

.benefits-list-block { margin: 60px 0 0 20px; }

.benefits-list {
    color: #ffffff;
    font-size: 16px;
    line-height: 32px;
    list-style-position: inside;
}

.benefits-list li {
    color: #ffffff;
    list-style: none;
    text-indent: -2em;
    padding-left: 1.5em;
}

.benefits-list li::before {
    color: #ea5435;
    content: "\2022";
    font-size: 2.8em;
    padding-right: 0.3em;
    position: relative;
    top: 0.23em;
}

.careers-benefits h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 52px;
    letter-spacing: 0.02em;
    margin: 10px 0 0 0;
    color: #ffffff;
}

.quotechar {
    display: block;
    font-family: sans-serif;
    font-size: 2000%;
    margin: 120px 0 0 -10px;
    padding: 0;
    opacity: 1;
}

#freewall { display: block; }

.missioncopy { left: 25% !important; }

.colour-teal { color: #219db9; }

.colour-orange { color: #ea5435; }

.colour-purple { color: #d60b52; }

.content-left {
    padding: 0;
    margin: 0;
    width: 50%;
    max-width: 50%;
    float: left;
}

.content-right {
    padding: 0;
    margin: 0;
    width: 50%;
    max-width: 50%;
    float: left;
}

.content-copy { padding: 4%; }

#alister-img, #aileen-img, #toni-img { overflow: hidden; }

/***********************************************
Screen Smaller than 1199px
***********************************************/

@media only screen and (min-width: 960px) and (max-width: 1199px) { 
}

/***********************************************
Tablet (Smaller than 959px)
***********************************************/

@media only screen and (min-width: 768px) and (max-width: 1020px) {
    #freewall { display: block; }

    .content-left {
        width: 100%;
        max-width: 100%;
    }

    .content-right {
        width: 100%;
        max-width: 100%;
    }

    #quote-container-2 {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #aileen-img {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #aileen-copy {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #alister-img, #aileen-img, #toni-img { overflow: visible; }

    #alister-img img, #aileen-img img, #toni-img img {
        max-width: 100%;
        max-height: 100%;
    }
}

/***********************************************
Mobile (portrait 300px)
***********************************************/

@media only screen and (max-width: 767px) {
    .jobTitleLink { float: left; }

    .jobApplyLink {
        float: left;
        width: 100%
    }

    .missioncopy { left: 50% !important; }

    #freewall { display: none; }

    .content-left {
        width: 100%;
        max-width: 100%;
    }

    .content-right {
        width: 100%;
        max-width: 100%;
    }

    #quote-container-2 {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #aileen-img {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #aileen-copy {
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }

    #alister-img, #aileen-img, #toni-img { overflow: visible; }

    #alister-img img, #aileen-img img, #toni-img img {
        max-width: 100%;
        max-height: 100%;
    }
}

/***********************************************
Mobile (landscape 420px)
***********************************************/

@media only screen and (min-width: 480px) and (max-width: 767px) { 
}