/* For em calculations, base pixel size is 16px */


html, body {
    width:100%;
    height:100%;
}

body {
    background-color:#f2f2f2;
    margin:0;
    padding:0;
    /*font-family: "Arial", "Helvetica", "Verdana", "sans-serif";*/
    /*font-family: 'Roboto Slab', serif;*/
    font-family: 'Open Sans', sans-serif;

    /*font-family: 'Fanwood Text', serif;*/
    /*font-family: 'Lora', serif;*/
    /*font-family: 'Open Sans', sans-serif;*/

    font-weight: normal;
    font-size: 100%;
    color: #000000;
    line-height: 1.4;

}

/* Make all divs adhere to the same physical style (box model) */
/* input included here too, because of Mozilla */
/* The width and height properties (and min/max properties) includes content, padding and border, but not the margin */
div, input {
    box-sizing: border-box;
}

a {
    color:#000000;
    text-decoration:none;
    border-bottom:0.063em dotted #000000;
    padding-bottom:0.125em;
}

a:hover {
    color:#000000;
    text-decoration:none;
    border-bottom:0.063em solid #000000;
}




img {
    border: 0;
}

hr {
    height: 0.063em;
    border:0;
    background-color:#ffffff;
}

hr.Black {
    background-color:#000000;
}

@font-face{
    font-family: 'familiar_probold';
    src: url('/css/Familiar_Pro-Bold-webfont.eot');
    src: url('/css/Familiar_Pro-Bold-webfont.eot?iefix') format('eot'),
    url('/css/Familiar_Pro-Bold-webfont.woff') format('woff'),
    url('/css/Familiar_Pro-Bold-webfont.ttf') format('truetype'),
    url('/css/Familiar_Pro-Bold-webfont.svg#webfont') format('svg');
}

small, .small {
    font-size:68.8%;
    line-height: 18px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.250em;
}

input[type="search"] {
    -webkit-appearance: textfield;
    height: 2.6em;
    width: 60%;
    border-radius: 0.4em;
    border: 1px solid lightgrey;
    display:inline-block;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input, textarea, select, input[type=search] {
    padding:0.250em;
    width:80%;
    font-size: 93.8%;
    color: #000000;
    line-height: 1.4;
    font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
    display:block;
}

textarea {
    width:78%;
}

@media screen and (max-width: 375px) {
    input, textarea, select {
        width:94%;
    }
    textarea {
        width:91%;
    }
}

input[type=radio] {
    width:1.875em;
}

input[type=checkbox] {
    width:1.250em;
    margin-left:0;
}

input[type=submit] {
    margin-top:0.750em;
    width:auto;
    padding: 0.5em 1.6em 0.5em 1.6em;
    background-color: #EB4800;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 7px;
    -webkit-box-shadow: 0px 2px 4px 0px rgb(50 50 50 / 80%);
    -moz-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow: 0px 2px 4px 0px rgb(50 50 50 / 80%);
    cursor: pointer;
    font-size: 0.85em;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    height: 3em;
    border: 0;
    display: inline-block;
}

input[type=submit]:hover {
    background-color:#ffcc00;
}

input, input[type=search]  {
    /*height:1.875em;*/
}
textarea {
    height:12.500em;
}

.Clear {
    clear: both;
}







/*----------------------------------------------------------------------------*/


/* Header, Masthead, Top Nav and Sub Nav elements */


/*----------------------------------------------------------------------------*/

.header {
    position: relative;
}



/* Top navigation container */
/* Dark green bar at top */
.header-topBar {
    text-align: center;
    height:3.6em;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 10;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 3px 5px 0px rgba(20, 20, 20, 0.8);
    -moz-box-shadow:    0px 3px 5px 0px rgba(20, 20, 20, 0.8);
    box-shadow:         0px 3px 5px 0px rgba(20, 20, 20, 0.8);
    background-color:#214343;
    background-image: url('../images/classy-fabric.png');
}
/*
@media screen and (max-width: 1000px) {
    .header-topBar {
        z-index: 6;
    }
}
*/

/* Special class. Activated by jQuery /js/scripts.js */
/* Changes transparent bar to coloured bar */

/* http://www.w3schools.com/css/css3_animations.asp */
/* The animation code */
/*
@keyframes example {
    from {background-color: transparent;}
    to {background-color: #214343;}
}

.BarOn {
    background-color: #214343;
    animation-name: example;
    animation-duration: 0.4s;
    /* h-shadow v-shadow blur spread color  */
/*
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
}
*/

/* Initially hide the hamburger menu icon and menu word */
.header-topBar-hamburger {
    display:none;
    z-index:99;
    left:4.125em;
    top:1.2em;
    cursor: pointer;
    position: fixed;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

@media screen and (max-width: 1000px) {
    .header-topBar-hamburger {
        display:block;
    }
}

@media screen and (max-width: 375px) {
    .header-topBar-hamburger {
        left:3em;
    }
}

/* Control size of icon */
.header-topBar-hamburger img {
    width:1.4em;
    margin-right:0.75em;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

/* Fine tune size and position of 'menu' word */
.header-topBar-hamburger span  {
    color:#FFFFFF;
    font-size:80%;
    position: relative;
    bottom:0.313em;
    text-transform: uppercase;
}


/* Home icon */
.header-topBar-homeIcon {
    width: 1.4em;
    height:1.4em;
    background-image:url('../images/home.png');
    background-size:contain;
    background-repeat:no-repeat;
    position: absolute;
    left:1.8em;
    top:1.1em;
    cursor: pointer;
    z-index:99;
}
@media screen and (max-width: 375px) {
    .header-topBar-homeIcon {
        left:0.8em;
    }
}

/* Login/account bean */
.header-topBar-loginAccount {
    padding:0.4em 0.8em 0.4em 0.8em;
    position: absolute;
    right:5.8em;
    top:1.3em;
    background-color: #ccff00;
    text-transform: uppercase;
    font-weight:bold;
    z-index:99;
    border-radius: 7px;
    font-size: 0.75em;
    border:0;
    text-decoration: none;
}
@media screen and (max-width: 375px) {
    .header-topBar-loginAccount {
        right:3.8em;
    }
}


.header-topBar-loginAccount:hover {
    background-color:#ffcc00;
    color:#ffffff;
}

/* 'Vetclick' name that only appears once you scroll past a certain point */
.header-topBar-narrowScreenName {
    font-family: 'familiar_probold', Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    position: absolute;
    top: 0.57em;
    left: 2.9em;
    z-index: 9;
    font-size: 138%;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    -moz-transition: opacity 0.7s ease-in-out;
    -webkit-transition: opacity 0.7s ease-in-out;
}

/* Special class added via jQuery */
.visible, .visiblePermanent {
    opacity:1;

}

@media screen and (max-width: 800px) {
    .header-topBar-narrowScreenName {
        left: 7.1em;
    }
}


@media screen and (max-width: 375px) {
    .header-topBar-narrowScreenName {
        display:block;
        letter-spacing: -1px;
        top: 0.44em;
        left: 3.45em;
        font-size: 155%;
        opacity:1;
    }
}



/* Search magnifying glass */
.header-topBar-searchIcon {
    width: 1.4em;
    height:1.4em;
    background-image:url('../images/magnifying_glass.png');
    background-size:contain;
    background-repeat:no-repeat;
    position: absolute;
    right:1.8em;
    top:1.1em;
    cursor: pointer;
    z-index:99;
}
@media screen and (max-width: 375px) {
    .header-topBar-searchIcon {
        right:0.7em;
    }
}

/* Search field box and button in the top bar, initially hidden */
/* Made visible by jQuery /js/scripts.js */
.header-topBar-searchBox {
    display:none;
    width:33%;
    position: absolute;
    right:1.4em;
    top:0.75em;
    z-index: 99;
}
@media screen and (max-width: 375px) {
    .header-topBar-searchBox {
        width:80%;
    }
}




.header-topBar-searchBox input[type=search] {
    -moz-appearance:none;
    -webkit-appearance:none;

    height:2.2em;
    padding:0.6em;
    margin:0;
    display:inline-block;
    border-radius:4px;
    border:0;
    position: relative;
    right:0;
    width:auto;
}
@media screen and (max-width: 450px) {
    .header-topBar-searchBox input[type=search] {
        right:3em;
        width:80%;
        position:absolute;
    }
}
@media screen and (max-width: 375px) {
    .header-topBar-searchBox input[type=search] {
        right:2em;
    }
}

.header-topBar-searchBox input[type=submit] {
    position: absolute;
    right:3.6em;
    top:0;
    padding:0.8em;
}

.header-topNav {

    z-index: 3;
}

/* Main navigation ul list */
.header-topNav ul {
    position: fixed;
    display:block;
    top:0.75em;
    left:18%;
    /*width:64%;*/
    width:67%;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.75em;
    list-style: none;
    padding:0;

    z-index: 10; /* was 99 */
}




@media screen and (max-width: 1000px) {
    /* Hide initial state of ul menu (closed) */
    .header-topNav ul {
        text-align: left;
        display:none;
        position: fixed;
        top:3.76em;
        left:0;
        font-size: 75%;
        background-color:#214343;
        opacity:0.95;
        width:100%;
        padding:2em 0 2em 5.5em;
        z-index: 5;
    }

}
@media screen and (max-width: 450px) {
    .header-topNav ul {
        top:3.2em;
        padding:1.4em 0 2em 1em;
        font-size: 85%;
    }
}



/* Main navigation li elements */
.header-topNav ul li {
    display: inline;
    padding:0;
    margin:0 3.5% 0 0;
    color:White;
    font-weight: bold;
    text-align: left;
    position: relative; /* Needed to position submenu */
}
.header-topNav ul li:last-of-type {
    padding-right:0;
    margin-right:0;
}
.header-topNav ul li.dropdown {
    padding:0 3% 0 0;
}


@media screen and (max-width: 1000px) {
    /* Make ul li menu items appear underneath each other, make a bit transparent */
    .header-topNav ul li {
        display: block;
        padding:0.6em 0 0.6em 0;
        text-align: left;
        opacity:0.9;
        width:24%;
    }
    .header-topNav ul li.dropdown {
        padding:0.6em 0 0.6em 0;
    }
}
@media screen and (max-width: 450px) {
    .header-topNav ul li {
        padding:0.6em 0 1.2em 0;
        width:60%;
    }
    .header-topNav ul li.dropdown {
        padding:0.6em 0 1.2em 0;
    }
}


/* Main top nav anchor text color */
.header-topNav ul li a {
    color:white;
    text-decoration: none;
    border:0;
}

/* Main top nav anchor text hover state */
.header-topNav ul li a:hover {
    border-bottom:0.125em dotted white;
}

.header-topNav-ul-close {
    float:right;
    margin-right:13em;
    width: 1.4em;
    height:1.4em;
    background-image:url('../images/close-x-white.png');
    background-size:contain;
    cursor: pointer;
    display:none;
}
@media screen and (max-width: 999px) {
    .header-topNav-ul-close {
        display:block;
    }
}
@media screen and (max-width: 450px) {
    .header-topNav-ul-close {
        margin-right:3em;
        margin-top:0.3em;
    }
}


/* Arrow to show/hide submenus */
.header-topNav-arrow {
    position:absolute;
    top:0.37em;
    right:0;
    cursor:pointer;
    background-image:url('../images/menu-arrow-down.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    width:1.250em; /* 20px */
    height:0.688em; /* 11px */
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}
@media screen and (max-width: 1000px) {
    /* Position arrows a bit lower */
    .header-topNav-arrow {
        top:0.8em;
    }
}



/* Make submenu menu items (e.g. job categories) lowercase, submenu initially hidden */
.header-submenu {
    padding:2.3em 0 2em 0;
    color:#ffffff;
    display:none;
    background-color: #214343;
    position: fixed;
    top:4.05em;
    left:0;
    width:100%;
    z-index: 6;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    opacity:0.95;
    font-size: 90%;
}
@media screen and (max-width: 1000px) {
    .header-submenu {
        padding: 1.85em 0 2em 0;
    }
}

@media screen and (max-width: 375px) {
    .header-submenu {
        top:3.60em;
        padding: 1em 0 2em 0;
        font-size: 100%;
    }
    /* Remove tally next to each category, to save space */
    .header-submenu span {
        display:none;
    }
}

.header-submenu-close {
    position: absolute;
    right:6em;
    top:2em;
    width: 1.3em;
    height:1.3em;
    background-image:url('../images/close-x-white.png');
    background-size:contain;
    cursor: pointer;
}
@media screen and (max-width: 450px) {
    .header-submenu-close {
        right:1.9em;
        top:1.5em;
    }
}



.header-submenu-container {
    width:80%;
    margin:auto;
    -moz-column-count: 3;
    column-count: 3;
    text-align: left;
}
@media screen and (max-width: 1000px) {
    .header-submenu-container {
        margin: auto auto auto 4.65em;
        -moz-column-count: 2;
        column-count: 2;
    }
}
@media screen and (max-width: 450px) {
    .header-submenu-container {
        width:100%;
        margin: auto auto auto 0.8em;
        -moz-column-count: 1;
        column-count: 1;
    }
}

.header-submenu a {
    color:#ffffff;
    text-decoration: none;
    border-bottom:1px dotted transparent;
    margin-bottom:0.24em;
    padding-top: 0.24em;
    display:inline-block;
}
@media screen and (max-width: 375px) {
    .header-submenu a {
        margin-bottom:0.34em;
        padding-top: 0.34em;
    }
}

.header-submenu a:hover {
    border-bottom:1px dotted #ffffff;
}








/* Image filled area behind 'VetClick' and 'section' name combination */
.stage {
    height:20em;
    text-align: center;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index:2;
}
@media screen and (max-width: 675px) {
    .stage {
        height:17em;
    }
}
@media screen and (max-width: 375px) {
    .stage {
        height:10em;
    }
}

/* Bigger size area for 'hub' pages */
.stage.hub {
    height:30em;
}
@media screen and (max-width: 675px) {
    .stage.hub {
        height:20em;
    }
}
@media screen and (max-width: 375px) {
    .stage.hub {
        height:10em;
    }
}

/* For simple static type pages e.g. Terms */
.stage.simple {
    height:10em;
    background-image:url('../images/kittens-cat-cat-puppy-rush-45170.jpeg');
    background-position: center 35%;
}

.stage.signUp {
    height:16em;
    background-image:url('../images/8104203329_52d1f443fb_b.jpg');
    background-position: center 15%;
}

@media screen and (max-width: 450px) {
    .stage.signUp {
        height:14em;
        background-image:url('../images/8104203329_52d1f443fb_b_small.jpg');
        background-position: center 15%;
    }
}
@media screen and (max-width: 375px) {
    .stage.signUp {
        height:12em;
    }
}

.stage.signUp.candidate {
    height:20em;
    background-image:url('../images/Vilda1.jpg');
    background-position: center 35%;
}
@media screen and (max-width: 450px) {
    .stage.signUp.candidate {
        background-image:url('../images/Vilda1_small.jpg');
        background-position: center 25%;
    }
}

.stage.signUp.recruiter {
    height:20em;
    background-image:url('../images/pexels-photo-24871.jpg');
    background-position: center 25%;
}
@media screen and (max-width: 450px) {
    .stage.signUp.recruiter {
        background-image:url('../images/pexels-photo-24871_small.jpg');
        background-position: center 25%;
    }
}

@media screen and (max-width: 450px) {
    .stage.signUp.candidate, .stage.signUp.recruiter {
        height:16em;
    }
}

@media screen and (max-width: 375px) {
    .stage.signUp.candidate, .stage.signUp.recruiter {
        height:10em;
    }
}


.stage.hub.home {
    /*background-image:url('../images/pexels-photo-260296.jpeg');*/
    /*background-image:url('../images/white-and-tan-jack-russell-terrier.jpg');*/

    background-image:url('../images/animal-dog-golden-retriever-9716-144.jpg');

    background-image:url('../images/cat-face-close-view-115011-1024.png');

    background-image:url('../images/cat-face-close-view-115011-min.jpeg');



    background-position: center 58%;

    height: 50em;
}

@media screen and (max-width: 1050px) {
    .stage.hub.home {
        background-position: center 38%;
        height:30em;
    }
}

@media screen and (max-width: 450px) {
    .stage.hub.home {
        height: 26em;
        background-image: url('../images/vertical-cat.jpg');
    }
}







.stage.category.jobs {
    background-image:url('../images/cat-tokyo-japan-japanese.jpg');
    background-position: center 35%;
}
@media screen and (max-width: 450px) {
    .stage.category.jobs {
        background-image:url('../images/cat-tokyo-japan-japanese_small.jpg');
        background-position: center 35%;
    }
}
.stage.listing.jobs {
    background-image:url('../images/backgrounds/jobs/dog-201734.jpg');
    background-position: center 40%;
}
@media screen and (max-width: 450px) {
    .stage.listing.jobs {
        background-image:url('../images/dog_pat_small.jpg');
        background-position: center 25%;
    }
}
.stage.search.jobs {
    background-image:url('../images/1280px-Australian_Shepherds_001.jpg');
    background-position: center 40%;
}
@media screen and (max-width: 450px) {
    .stage.search.jobs {
        background-image:url('../images/1280px-Australian_Shepherds_001_small.jpg');
        background-position: center 40%;
    }
}




.stage.hub.staff {
    background-image:url('../images/47231142-kittens-wallpaper.jpg');
    background-position: center 65%;
}
@media screen and (max-width: 450px) {
    .stage.hub.staff {
        background-image:url('../images/47231142-kittens-wallpaper_small.jpg');
        background-position: center 65%;
    }
}
.stage.category.staff {
    background-image:url('../images/ChocolateYellowBrownLabs_2880x1000px.jpg');
    background-position: center 15%;
    background-size: cover;
}
@media screen and (max-width: 450px) {
    .stage.category.staff {
        background-image:url('../images/ChocolateYellowBrownLabs_2880x1000px_small.jpg');
        background-position: center 15%;
    }
}
.stage.listing.staff {
    background-image:url('../images/lxmeG.jpg');
    background-position: center 20%;
}
@media screen and (max-width: 450px) {
    .stage.listing.staff {
        background-image:url('../images/lxmeG_small.jpg');
        background-position: center 20%;
    }
}



.stage.hub.calendar {
    background-image:url('../images/pexels-photo-146087.jpeg');
    background-position: center 15%;
}
@media screen and (max-width: 450px) {
    .stage.hub.calendar {
        background-image:url('../images/pexels-photo-146087_small.jpg');
        background-position: center 15%;
    }
}

.stage.calendar {
    background-image:url('../images/pexels-photo-290184.jpeg');
    background-position: center 30%;
}
@media screen and (max-width: 450px) {
    .stage.calendar {
        background-image:url('../images/pexels-photo-290184_small.jpg');
        background-position: center 30%;
    }
}

.stage.login {
    height:16em;

    background-image:url('../images/pexels-photo-47466.jpeg');


    background-position: center 35%;

}

@media screen and (max-width: 450px) {
    .stage.login {
        background-image:url('../images/pexels-photo-47466_small.jpg');
        background-position: center 35%;
    }
}

/* Make a bit slimmer, because it has not 'cards' overlapping it */
@media screen and (max-width: 375px) {
    .stage.login {
        height:9em;
    }
}

.stage.news {
    background-image:url('../images/Golden_tabby_and_white_kitten_n03.jpg');
    background-position: center 41%;
    background-size: 100%;
}
@media screen and (max-width: 450px) {
    .stage.news {
        background-image:url('../images/Golden_tabby_and_white_kitten_n03_small.jpg');
        background-position: center 41%;
    }
}

.stage.listing.news {
    background-image:url('../images/Golden_tabby_and_white_kitten_n03.jpg');
    background-position: center 41%;
    background-size: 100%;
}
@media screen and (max-width: 450px) {
    .stage.listing.news {
        background-image:url('../images/Golden_tabby_and_white_kitten_n03_small.jpg');
        background-position: center 41%;
    }
}









.stage a {
    border:0;
}


.stage-masthead {
    letter-spacing: -2px;
    color:#ffffff;
    text-transform: uppercase;
    line-height: normal;
    width:100%;
    position: absolute;
    top: 43%;
    transform: translateY(-50%);
}

@media screen and (max-width: 450px) {
    .stage.hub.home .stage-masthead {
        top: 60%;
        transform: translateY(-60%);
    }
}


@media screen and (max-width: 375px) {
    .stage-masthead {
        top: 55%;
        transform: translateY(-55%);
    }
}
.stage.login .stage-masthead, .stage.signUp .stage-masthead {
    top:59%;
}

.stage.signUp.candidate .stage-masthead, .stage.signUp.recruiter .stage-masthead {
    top:48%;
}
@media screen and (max-width: 375px) {
    .stage.signUp.candidate .stage-masthead, .stage.signUp.recruiter .stage-masthead {
        top:56%;
    }
}

@media screen and (max-width: 375px) {
    .stage.login .stage-masthead {
        top: 69%;
    }
}





/* Category name, 'Work in the veterinary industry' */
.stage-masthead h1 {
    color: #99CCCC;
    font-size: 275%;
    font-weight: lighter;
    text-transform: uppercase;
    position: relative;
    display:block;
    margin:0.1em 0 0 0;
    letter-spacing: normal;
}
@media screen and (max-width: 675px) {
    .stage-masthead h1 {
        font-size: 200%;
    }
}
@media screen and (max-width: 450px) { /* Was 375 */
    .stage-masthead h1 {
        /*line-height:1.1;*/
        display:none;
    }
}

/* 'VetClick' name text */
.stage-masthead h2 {
    font-family: 'familiar_probold', Arial, sans-serif;
    display: inline;
    /*font-size: 100%;*/
}


/* Separates 'VetClick' name and '/ section' name to allow two lines in responsive */
.stage-masthead-sectionName {
    display:inline;
}
/* 'VetClick' and 'section' name combination */
.stage-masthead h2, .stage-masthead-sectionName {
    font-size:400%;
}
@media screen and (max-width: 675px) {
    .stage-masthead h2, .stage-masthead-sectionName {
        font-size:320%;
    }
}
@media screen and (max-width: 450px) {
    .stage-masthead h2, .stage-masthead-sectionName {
        font-size:200%;
    }
}


@media screen and (max-width: 375px) {
    .stage-masthead h2 {
        display:none;
    }
    .stage-masthead-sectionName {
        font-size:200%;
    /*
        display: inline-block;
        margin-bottom:1em;
        */
    }
    
}



/* slash '/' between 'VetClick' name and 'section' name */
.stage-masthead-sectionName span {
    color:#99CCCC;
}



/* Small text displayed below 'VetClick' name and 'section' name */
.stage-masthead-statistics {
    font-size:0.750em; /* 12px */
    text-transform: none;
    letter-spacing: normal;
    font-family: Arial, Helvetica, sans-serif;
    color:#ffffff;
    margin-top:0.4em;
}
@media screen and (max-width: 600px) {
    .stage-masthead-statistics {
        display: none;
    }
}


.layersContainer {
    position: relative;
    margin-bottom:5em;
}



.preStrip {
    position: relative;
    width:100%;
    height:0.5em;
    z-index: 4;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:    0px -3px 5px 0px rgba(0, 0, 0, 0.4);
    box-shadow:         0px -3px 5px 0px rgba(0, 0, 0, 0.4);
    background-color:#214343;
    background-image: url('../images/classy-fabric.png');
}




.strip, .second-strip {
    width:100%;
    padding:1.6em 2em 2em 2em;
    background-color:#214343;
    background-image: url('../images/classy-fabric.png');
    position: relative;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:    0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    box-shadow:         0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    z-index:4;
}

.strip {
    margin-bottom:10em;
}

.second-strip {
    padding-top:6em;
    padding-bottom:10em;
    /*position: absolute;*/
    z-index:2;
    top:0;
    left:0;
}

@media screen and (max-width: 450px) {
    .second-strip {
        margin-top:20em;
    }
}

@media screen and (max-width: 375px) {
    .strip {
        padding:1.7em 0;
    }
}


.strip-container {
    width:85%;
    margin:auto;
}
@media screen and (max-width: 375px) {
    .strip-container {
        width: 75%;
    }
}







.strip-block {
    width:44%;
    margin:0 3% 2% 3%;
    padding:1em 3em 1.6em 1.6em;
    color:white;
    float:left;
    position: relative;
}
.strip-block:last-of-type {
    padding-left:3.6em;
}
@media screen and (max-width: 600px) {
    .strip-block {
        width: 100%;
        float:none;
        margin:0 0 5em 0;
        padding:0;
    }
    .strip-block:last-of-type {
        padding:0;
    }

}

.strip-block.third {
    width:21%;
    font-size:90%;
    margin:0 2% 0 2%;
}
@media screen and (max-width: 800px) {
    .strip-block.third {
        width:100%;
    }
}


.strip-block h2 {
    font-weight:normal;
    text-transform: uppercase;
    margin:0 0 1em 0;
    padding:0;
}
@media screen and (max-width: 375px) {
    .strip-block h2 {
        text-align: center;
        font-size:1.2em;
    }
}
.strip-block.third h2 {
    font-size:1em;
}



.strip-block ul {
    list-style: none;
    text-align:left;
    margin:2em 0 0 0.4em;
    padding-left:0;
}
.strip-block li {
    color:#99CCCC;
    margin-bottom:1em;
    padding-left:1.2em;
    border-left:1px dotted #ffffff;
}

.strip-block input {
    -moz-appearance: none;
    -webkit-appearance: none;
    /*height: 2.2em;*/
    padding: 0.6em;
    margin: 0;
    display: inline-block;
    border-radius: 4px;
    border: 0;
}

.strip-block input[type=submit] {
    color:#000000;
    padding: 0.5em 1.6em 0.5em 1.6em;
    background-color: #ccff00;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 7px;
    font-size: 0.85em;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    /*height:2.4em;*/
}
.strip-block input[type=submit]:hover {
    background-color:#ffcc00;
    color:#ffffff;
    cursor: pointer;
}

.strip-block a {
    border:0;
}


.strip-block-taskButton {
    background-color: #EB4800;
    color:#ffffff;
    padding:0.8em 1.3em 0.8em 1.3em;
    margin:2em 0 1em 2em;
    font-size: 0.75em;
    font-weight:bold;
    text-transform: uppercase;
    border-radius: 7px;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    cursor: pointer;
    display:inline-block;
    letter-spacing: normal;
}
.strip-block-taskButton:hover {
    cursor: pointer;
    background-color:#ffcc00;
}

.strip-block.login .strip-block-taskButton {
    margin:0.7em 0 0 2em;
}


@media screen and (max-width: 375px) {
    .strip-block-taskButton {
        width:75%;
        margin:auto;
        margin-bottom:4%;
        font-size: 0.85em;
    }
}


.strip-block p a {
    color:white;
    text-decoration: none;
    border-bottom:1px dotted #ffffff;
}
@media screen and (max-width: 375px) {
    .strip-block p a {
        text-align: center;
    }
}

.strip-block p a:hover {
    border-bottom:1px solid white;
}


.strip-subheading h2 {
    font-size:200%;
    font-weight:normal;
    text-transform: uppercase;
    color:#99CCCC;
    margin-top:0;
}





.registration input, .registration select {
    height:2.6em;
    width:60%;
    border-radius: 0.4em;
    border:1px solid lightgrey;
}
.registration textarea {
    height:9em;
    width:59%;
    border-radius: 0.4em;
    border:1px solid lightgrey;
}

@media screen and (max-width: 450px) {
    .registration input, .registration select {
        width:90%;
    }
    .registration textarea {
        width:86%;
    }
}



.registration label {
    margin-bottom: 0.35em;
}
.registration span {
    font-weight:normal;
}
.registration input[type=radio], .registration input[type=checkbox] {
    display:inline;
    width:1.2em;
    vertical-align: middle;
}
/*
.registration input[type=radio]:last-of-type {
    margin-left:1.6em;
}*/
.registration input.short {
    width:30%;
}
.registration input[type=submit] {
    max-width:14em;
    border: 0;
    height: 3em;
    border-radius: 7px;
}

.registration form label.error {
    margin:0.4em 0 0.6em 0;
    width:auto;
    display:inline-block;
    color:red;
}




/* Special class, added and removed via jQuery /js/scripts.js */
/* Rotates element 180 degree */
.box_rotate_90 {
    -webkit-transform: rotate(90deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(90deg);  /* IE 9 */
    -o-transform: rotate(90deg);  /* Opera 10.50-12.00 */
    transform: rotate(90deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
/* Rotates element 180 degree */
.box_rotate_180 {
    -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(180deg);  /* IE 9 */
    -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
    transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
/* Rotates element 360 degree */
.box_rotate_360 {
    -webkit-transform: rotate(360deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(360deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(360deg);  /* IE 9 */
    -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
    transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}




.backToTop {
    background-color:#214343;
    position: fixed;
    bottom:0;
    right:0;
    width:3.7em;
    height:3.7em;
    cursor: pointer;
    z-index: 98;
    background-image: url('/images/back-to-top-arrow.png');
    background-repeat:no-repeat;
    background-size: 20px 11px;
    background-position: center center;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.backToTop:hover {
    background-position: center 18px;
}






/* Begin 375px */

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
/*
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/*
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
*/

@media screen and (max-width: 375px) {


    /* Hide 'menu' word next to hamburger icon */
    .header-topBar-hamburger span  {
        display:none;
    }



}











/* Width constraining container, contains content inbetween the header/masthead and footer */
.container {
    width:85%;
    max-width: 1600px;
    margin: 0 auto 0 auto;
    position: relative;
    top:-60px;
    z-index: 3;
}
@media screen and (max-width: 675px) {
    .container {
        width:93%;
    }
}
@media screen and (max-width: 375px) {
    .container {
        top:-40px;
    }
}

/* Narrow version of .Container, meant for login boxes etc */
/*
.container.Half {
    width:50%;
}
*/










.chk-container {
    list-style:none;
    margin-left:0;
    padding:0;
}


.SocialContainer {
    margin:2em 0 2em 0;
}

.SocialContainer div {
    display:inline-block;
}

.SocialContainer .fb-share-button {
    position: relative;
    top:-6px;
}




/* Container containing individual taskbuttons */
.taskButtons {
    position: absolute;
    top:6.5em;
    /*left:1em;*/
    left:1.75em;
    z-index:4;
}
@media screen and (max-width: 675px) {
    .taskButtons {
        display:none;
    }
}
/* Special class added via jQuery */
.taskButtonsFixed {
    position: fixed;
    top:4.6em;
}

.taskButtons-button {
    background-color: #EB4800;
    color:#ffffff;
    padding:0.8em 1.3em 0.8em 1.3em;
    margin-bottom:0.7em;
    font-size: 0.75em;
    font-weight:bold;
    text-transform: uppercase;
    border-radius: 7px;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    cursor: pointer;
}
.taskButtons-button:hover {
    background-color:#ffcc00;
}


/* Positions the collection of filter menu buttons and filter menu toggle */
.filterMenu {
    position:absolute;
    z-index:4;
    /*top:6.5em;*/
    top:2.5em;
    /*right:0;*/
	width:70%;
	right:15%;
}
@media screen and (max-width: 675px) {
    .filterMenu {
        top: 73px;
    }
}


/* Special class added via jQuery */
.filterMenuFixed {
    position: fixed;
    /*top:4.6em;*/
    top:2.5em;
}
@media screen and (max-width: 375px) {
    .filterMenuFixed {
        top:60px;
    }
}



.filterMenu .filterOptions {
    /*border-bottom-left-radius: 7px;*/
    /*border-top-left-radius: 7px;*/
	border-radius: 7px;
    /*width:900px;*/
    background-color: #EB4800;
    /*padding:0.7em 0.9em 0.7em 0.7em;*/
    padding:0.9em 0.9em 1em 0.9em;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    z-index: 1;
    position: relative;
}
@media screen and (max-width: 900px) {
    .filterMenu .filterOptions {
        width:500px;
    }
}
@media screen and (max-width: 675px) {
    .filterMenu .filterOptions {
        width:320px;
    }
}


@media screen and (max-width: 375px) {
    .filterMenu .filterOptions {
        width:260px;
    }
}

.toTheTop {
    z-index:99;
}
@media screen and (max-width: 675px) {
    .toTheTop {
        position: absolute;
    }
}

.filterOptionsFilterByChoice {
    font-size:70%;
    text-transform: uppercase;
    color:#FECD09;
    margin:0 0 0.4em 0.4em;
}
.filterOptionsFilterByChoice.bottom {
    margin-top:0.6em;
}
.filterOptionsFilterByChoice.white {
    color:#ffffff;
}

#filterCategoryResults p {
    color:#ffffff;
    font-size: 80%;
    font-weight: bold;
    text-transform: uppercase;
}


/* Box that is the display control for the filter menu */
/* Clicking it toggles the filter menu on and off */
.toggleFilterMenu {
    position:fixed;
    top:6.6em;
    right: 1.8em;
    z-index:99;
    background-image: url('../images/filter_white.png');
    padding-left:40px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 11px center;
}


.filterInterfaceHighlight {
    background-image:url('../images/filter_yellow.png');
}
.filterInterfaceHighlight:hover {
    background-image:url('../images/filter_white.png');
}


.filterMenu .selectedFilterOptions {
    width: 300px;
    position: fixed;
    /*top: -1em;*/
	top: 7.5em;
    right: 1.5em;
	/*right: 3.5em;*/
    /*z-index: 99;*/
    /*padding:0.6em 0.5em 0.5em 0.5em;*/
	padding:0;
    text-align: right;
}
@media screen and (max-width: 375px) {
    .filterMenu .selectedFilterOptions {
        width:260px;
    }
}

.filterMenu .emptyFilterOptions {
    width: 100px;
    position: absolute;
    top: -0.4em;
    right: 0.4em;
    z-index: 99;
    text-align: right;
}



.filterMenu .filterOptions span, .filterMenu .selectedFilterOptions span {
    background-color:white;
    padding:0.2em 0.4em 0.2em 0.4em;
    color:#EB4800;
    border-radius:3px;
    display:inline-block;
    float:left;
    margin:4px;
    text-align: left;
    margin-bottom:0.5em;
    font-size:80%;
    font-weight:bold;
    text-transform: uppercase;
}

.filterMenu .selectedFilterOptions span {
    float:right;
    margin:4px 0 4px 8px;
}

.filterMenu .filterOptions span:hover {
    background-color: #FECD09;
    cursor:pointer;
}

.filterMenu .filterOptions span a {
    text-decoration: none;
    border:0;
    color:#EB4800;
}


.filterMenu .filterOptions-reload {
    display:block;
    float:right;
    /*clear:both;*/
    /*margin:0.8em 0.6em 4em 4em;*/
    border-radius: 50%;
    background-color: #ffffff;
    width: 1.7em;
    height:1.7em;
    background-image:url('/images/rotate.png');
    background-size:55%;
    background-repeat:no-repeat;
    background-position: center center;
    cursor: pointer;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.filterMenu .filterOptions-reload:hover {
    background-color: #FECD09;
    -webkit-animation: none;
    animation: none;
}

/* A special class added to .filterOptions span via jQuery toggleClass /js/scripts.js */
/* !important necessary here, otherwise does not override previous */
.filterOptionSelected {
    background-color:#FECD09 !important;
    padding:0.2em 0.4em 0.2em 1.9em !important;
    background-image:url('../images/close-x.png');
    background-repeat:no-repeat;
    background-position:6px, 3px;
    background-size:12px;
}
.filterMenu .selectedFilterOptions .filterOptionSelected {
    background-image:none;
    padding:0.2em 0.4em 0.2em 0.4em !important;
}


/* Flash class and keyframe animation */
.flashIt{
    -webkit-animation: flash linear 1s infinite;
    animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
    0% { opacity: 1; }
    50% { opacity: .1; }
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: .1; }
    100% { opacity: 1; }
}


/* Responsive changes for listing elements only */

@media screen and (max-width: 900px) {

    .Logo {
        float:none;
        margin-left:0;
        margin-bottom:0;
        margin-top:0.625em;
    }

}


.Menu {
    background-color:#B7F0CB;
    padding:1px 10px 10px 10px;
    border-radius:6px;
    font-size: 12px;
    margin-bottom:12px;
    font-weight: bold;
    text-align: center;
}

.Menu {
    text-align: left;
    background-color: #99CCCC;
}

.Menu p {
    background-color: #669999;
    padding:4px 10px 4px 10px;
    border-radius:5px;
    color:#ffffff;
    margin-bottom:6px;
}

.Menu.Home {
    background-color:#214343;
    padding:10px;
    padding-left:18px;
}

.Menu.Home a {
    color:#ffffff;
    text-decoration:none;
    border:0;
}

.Menu.Home a:hover {
    border-bottom:1px solid #ffffff
}

.Menu.Reporting {
    background-color: #E0FF9F;
}

.Menu .Value li {
    margin-bottom:3px;
}

.Menu .Value {
    padding:6px;
    background-color: #ffffff;
    border-radius: 6px;
    margin:0 auto 0 auto;
    font-weight: normal;
}

.Notice {
    padding:1px 10px 10px 10px;
    font-size: 11px;
    margin-bottom:12px;
    text-align: left;
}




/*----------------------------------------------------------------------------*/


/* Grid layout elements only */


/*----------------------------------------------------------------------------*/

/* Get rid of underlines underneath a elements inside grid elements */
.container a, .summaryCard a {
    border:0;
}

/* Set hover state, bit of drop shadow so you can see change */
.summaryCard:hover {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(20, 20, 20, 0.2);
    -moz-box-shadow:    1px 1px 4px 1px rgba(20, 20, 20, 0.2);
    box-shadow:         1px 1px 4px 1px rgba(20, 20, 20, 0.2);
    cursor:pointer;
    position: relative;
    transform: translate3d(0px, -5px, 0px);
}

.summaryCard {
    display:inline-block;
    width: 23.4%;
    margin:0.8% 0.8% 1em 0.8%;
    padding:1em 1.4em 1.4em 1.4em;  /* 1.6em top */
    background-color: #ffffff;
    vertical-align: top;
    transition: transform .2s ease-in-out;
    line-height: 1.2;
    border-top:8px solid #81BEBC;
}
@media screen and (max-width: 1000px) {

    .summaryCard {
        width: 31%;
    }
}
@media screen and (max-width: 800px) {

    .summaryCard {
        width: 48.4%;
    }
}

@media screen and (max-width: 600px) {

    .summaryCard {
        width: 98%;
    }
}

@media screen and (max-width: 375px) {
    .summaryCard {
        padding:0.9em 1.1em 0.9em 0.9em;
        margin:0 0 1em 0;
        border-top:6px solid #81BEBC;
    }
}

.summaryCard img {
    border:0;
}



.summaryCard.auctioned.wide {
    border-top:8px solid goldenrod;
    width: 48.4%;
    padding: 1em 1.7em 1.7em 1.7em;
}
.summaryCard.auctioned.wide h3 {
    font-size:160%;
}
.summaryCard.auctioned.wide .summaryCard-address {
    font-size:18px;
}
.summaryCard.auctioned.wide .summaryCard-description {
    font-size:18px;
    line-height: 1.35;
}
.summaryCard.auctioned {
    border-top:8px solid goldenrod;
}
@media screen and (max-width: 1000px) {

    .summaryCard.auctioned.wide {
        width: 63.6%;
    }
}
@media screen and (max-width: 600px) {

    .summaryCard.auctioned.wide {
        width: 98%;
    }
}
@media screen and (max-width: 375px) {
    .summaryCard.auctioned {
        border-top: 6px solid goldenrod;
    }
}




.summaryCard.featured {
    border-top:8px solid #FECD09;
}
@media screen and (max-width: 375px) {
    .summaryCard.featured {
        border-top: 6px solid #FECD09;
    }
}

.summaryCard.revealedCandidate, .summaryCard.appliedForJob {
    background-color:#f2f9f9;
}
.summaryCard-revealed, .summaryCard-applied {
    padding: 0.4em 0.6em 0.4em 0.6em;
    background-color: #81BEBC;
    text-transform: uppercase;
    font-weight: bold;
    color:#ffffff;
    border-radius: 7px;
    font-size: 0.75em;
    width:auto;
    margin-bottom:0.4em;
    display:inline-block;
}
.summaryCard-applied {
    margin-bottom:1.4em;
}

.summaryCard-category {
    font-size:13px;
    color:#81BEBC;
    margin-bottom:1.4em;
    opacity:0.6;
}
@media screen and (max-width: 375px) {
    .summaryCard-category {
        margin-bottom:0.9em;
        opacity:0.8;
    }
}

.summaryCard-logo {
    /*margin:auto;*/
    margin-bottom:18px;
    width:50%;
    background-size:contain;
    background-position:left center;
    background-repeat: no-repeat;
    max-height: 130px;
}
@media screen and (max-width: 375px) {
    .summaryCard-logo {
        margin-bottom:14px;
    }
}

.summaryCard-ratingStars {
    margin-top:6px;
    text-align: left;
}

.summaryCard h3 {
    margin:8px 0 12px 0;
    display:block;
    text-align: left;
    font-size:120%;
    font-weight:500;
}
@media screen and (max-width: 375px) {
    .summaryCard h3 {
        margin: 6px 0 8px 0;
    }
}

.summaryCard-address {
    text-align:left;
    font-size:15px;
    margin-bottom:12px;
}
@media screen and (max-width: 375px) {
    .summaryCard-address {
        margin-bottom: 8px;
    }
}

.summaryCard-description {
    font-size:15px;
    line-height:1.3;
}
@media screen and (max-width: 375px) {
    .summaryCard-description {
        display:none;
    }
}


.summaryCard-posted {
    display:block;
    text-align:left;
    margin-top:26px;
    font-size:13px;
}
@media screen and (max-width: 375px) {
    .summaryCard-posted {
        margin-top: 10px;
    }
}



.summaryCard-posted img, .mainCard-rightCol-info img {
    width:14px;
    position:relative;
    top:2px;
    right:3px;
    margin-left:7px;
}








/*----------------------------------------------------------------------------*/






.FeatureType {
    font-size: 10px;
    color: #FFFFCC;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top:-18px;
    left:0;
    width:100%;
    z-index: 2;
}






.mainCard {
    padding:1.4em 4em 4em 3em;
    background-color: #ffffff;
    border-top:12px solid #81BEBC;
    margin: 0 3.5em 0 3.5em;
}
@media screen and (max-width: 675px) {
    .mainCard {
        margin: 0 0.5em 0 0.5em;
        padding:1.4em 2em 2em 1.8em;
    }
}
@media screen and (max-width: 375px) {
    .mainCard {
        margin: 0 0.2em 0 0.2em;
        padding: 1em 1.4em 1.4em 1em;
    }
}

.mainCard.featured {
    border-top:12px solid #FECD09;
}

.mainCard-breadcrumbs {
    font-size:0.750em;
    margin-bottom:3em;
}

.mainCard h1 {
    font-size:180%;
    font-weight:normal;
    line-height: 1.2;
}

@media screen and (max-width: 675px) {
    .mainCard h1 {
        margin: 8px 0 12px 0;
        display: block;
        text-align: left;
        font-size: 160%;
        font-weight: 500;
    }
}


.mainCard a {
    text-decoration: none;
    border-bottom:1px dotted #000000;
}
.mainCard a:hover {
    border-bottom:1px solid #000000;
}

.mainCard-rightCol-logo {
    float:right;
    width:25%;
    margin:0 0 0 7em;
    min-height:1em;
}
.mainCard-rightCol-logo img {
    max-width:80%;
    height:auto;
    max-height: 7em;
    margin-bottom:1em;
}
@media screen and (max-width: 375px) {
    .mainCard-rightCol-logo img {
        max-width:60%;

    }
}

.mainCard-rightCol-info {
    float:right;
    width:25%;
    margin:0 0 4em 7em;
    font-size:85%;
    clear:right;
}


@media screen and (max-width: 675px) {
    .mainCard-rightCol-logo, .mainCard-rightCol-info {
        float:none;
        width:100%;
        margin:0.5em;
    }
    .mainCard-rightCol-info {
        margin-top:2em;
    }
}

.mainCard-rightCol-info p {
    margin:0.4em 0 0 0;
}




.mainCard-button {
    background-color: #EB4800;
    color:#ffffff;
    padding:0.8em 1.3em 0.8em 1.3em;
    margin-bottom:0.7em;
    text-align: center;
    font-size:88.5%;
    font-weight:bold;
    text-transform: uppercase;
    border-radius: 7px;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    max-width:12em;
    cursor: pointer;
}
.mainCard-button:hover {
    background-color:#FECD09;
}

.mainCard-button.redirect {
    max-width:24em;
}
.mainCard-button.redirect.short {
    max-width:12em;
}






.mainCard.Message {
    background-color:#E0FF9F;
    list-style: none;
    padding-bottom:20px;
}

.mainCard.Alert p, .mainCard.Final p {
    margin:4px;
}

.mainCard.Alert {
    background-color:#FFCC00;
    margin-bottom:26px;
}

.mainCard.Final {
    background-color:#FF6600;
    margin-bottom:26px;
    color:White;
}

.mainCard h3 {
    display:inline;
    padding:0;
    margin:0;
}



.mainCard-RSS img {
    width:30px;
    vertical-align: text-top;
    margin-right:0.6em;
}

.mainCard-RSS a.icon {
    text-decoration: none;
    border:0;
}








/*----------------------------------------------------------------------------*/


/* Footer elements only */


/*----------------------------------------------------------------------------*/


/* 'Fat' footer layout */
footer {
    position: relative;
    bottom:0;
    left:0;
    width:100%;
    text-align: center;
    height:15em;
    z-index:1;
    background-color:#214343;
    background-image: url('../images/classy-fabric.png');
}

@media screen and (max-width: 450px) {
    footer {
        height:32em;
    }
}

/* Fixed and whole height of screen, to allow for sliding layers */
footer.login, footer.home {
    position: fixed;
    height:100%;
}




/* Fixed at the bottom, to allow for 100% height of parent */
.footer-credits {
    font-size:0.75em;
    color:#99CCCC;
    width:100%;
    position: absolute;
    bottom:7em;
    margin:auto;
}

@media screen and (max-width: 450px) {
    .footer-credits {
        width:92%;
        margin-left:4%;
        bottom:10em;
    }
}

.footer-credits ul {
    list-style:none;
    margin-bottom:1em;
}
.footer-credits ul li {
    padding:0 0.8em 0 0.8em;
    display:inline-block;
    text-align:left;
}

@media screen and (max-width: 450px) {
    .footer-credits ul {
        width:40%;
        float:left;
        padding-left:2em;

    }
    .footer-credits ul li {
        padding:0 0 0.7em 0;
        display:block;
    }
}



.footer-credits ul li a {
    color:#99CCCC;
    border-bottom:1px dotted #99CCCC;
}


.footer-bottom-social {
    width:100%;
    position: absolute;
    left:0;
    bottom:2.6em;
    text-align: center;
}

@media screen and (max-width: 450px) {
    .footer-bottom-social {
        bottom:4.6em;
    }
}

.footer-bottom-social a {
    text-decoration: none;
    border:0;
    margin:0 0.3em 0 0.3em;
}

.footer-bottom-social a img {
    height:29px;
}





.Notification {
    padding:12px;
    background-color:#FFFFCC;
    border-radius: 9px;
}

.modalOverlay {
    background-color: #000000;
    opacity:0.7;
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 98;
    display:none;
}

.modalForm {
    width:50%;
    background-color:#ffffff;
    border-top:12px solid #EB4800;
    padding:2em 2em 3em 2em;
    color:#214343;
    position: absolute;
    /*top:5%;*/
    left:25%;
    z-index:100;
    display:none;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
}
@media screen and (max-width: 450px) {
    .modalForm {
        width: 80%;
        /*top: 5%;*/
        left: 10%;
        padding:1em 1em 2em 1em;
    }
}


@media screen and (max-width: 375px) {
    .modalForm {
        width: 90%;
        left:5%;
    }
}

.modalForm-close {
    float:right;
    width:1.6em;
    height:1.6em;
    cursor: pointer;
    background-image: url('../images/close-x-orange.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.modalForm-close:hover {
    background-image: url('../images/close-x-yellow.png');
}

.modalForm.contact fieldset, .modalForm.search fieldset, .modalForm.login fieldset {
    border:0;
    padding:0;
}

.modalForm.contact label.error {
    margin:0.3em 0 0.6em 0;
    width:auto;
    display:inline-block;
    color:red;
}

.modalForm.contact textarea {
    height:6em;
}

.modalForm.search input[type=search] {
    margin-bottom:1em;
}

.modalForm.login input[type=submit] {
    margin-top:1.75em;
}


.modalForm h2 {
    margin-top:0;
    text-transform: uppercase;
    font-weight:normal;
}

.modalForm input[type=submit] {
    padding: 0.5em 1.6em 0.5em 1.6em;
    background-color: #EB4800;
    color:#ffffff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 7px;
    /* h-shadow v-shadow blur spread color  */
    -webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 2px 4px 0px rgba(50, 50, 50, 0.8);
    cursor: pointer;
    font-size: 0.85em;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    height:3em;
    border:0;
}

.modalForm input[type=submit]:hover {
    background-color:#ffcc00;
}






.contactBox {
    float: right;
    margin-left:6em;
    margin-bottom:4em;
    max-width:300px;
    padding:1em;
    background-color: lightgreen;
}
@media screen and (max-width: 1000px) {
    .contactBox {
        float:none;
        margin-left:0;
        margin-bottom:2em;
    }
}



.ui-datepicker-calendar th, .ui-datepicker-calendar td, .ui-timepicker-div {
    font-size: 12px;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    border:0;
}



.cookieAcceptLayer {
    position: fixed;
    bottom:0;
    left:0;
    background-color: #99CCCC;
    z-index: 999;
    height:auto;
    width:100%;
    padding:2em 3em 3em 3em;
    font-size:80%;
}
.cookieAcceptLayer h2 {
    text-transform: uppercase;
    font-weight: normal;
}
.cookieAcceptLayer span {
    padding: 0.4em 0.8em 0.4em 0.8em;
    background-color: #ccff00;
    text-transform: uppercase;
    text-align:center;
    font-weight: bold;
    z-index: 99;
    border-radius: 7px;
    font-size: 1em;
    border: 0;
    text-decoration: none;
    display:inline-block;
    margin:1.5em 1em 0 0;
    width:auto;
}
.cookieAcceptLayer span:hover {
    cursor: pointer;
    background-color: #ffcc00;
}
@media screen and (max-width: 1000px) {
    .cookieAcceptLayer {
        position: absolute;
        top:0;
        bottom:auto;
    }
}