﻿/*
Large >= 1200
Medium >= 992
Small >= 768
Extra Small < 768
Mobile < 480
*/

/*-------------------------------- Sticky footer -------------------------------------*/
html {
   position: relative;
   min-height: 100vh;
}
body {
   color:#4d4d4d;
   min-height: 100vh;
   z-index: 0;
}
.footer {
   position: relative;
   bottom: 0;
   width: 100%;
   background-color: #4d4d4d;
   color: #D0D0D0;
}

.footer a:link, .footer a:visited, .footer a:hover{color:#D0D0D0; margin-right:11px; white-space:nowrap;}

.footer-disclaimer
{
   margin-top:7px;
}
/*-------------------------------- Cookie Message -------------------------------------*/
.cookie-message {
   z-index: 10;
   position: fixed;
   bottom: 1rem;
   width: 95%;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   font-size: 1.2rem;
   color: #000;
   background-color: #fff;
   border: 1px solid #0054a4;
   box-shadow: rgba(0, 0, 0, 0.4) 5px 10px 40px 5px;
   text-align: center;
   padding: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 18px;
}

   .cookie-message > :not(:last-child) {
      display: inline;
   }

   .cookie-message > :last-child {
      display: block;
      margin-top: 0.5rem;
   }

/*.cookie-message {
   background-color: #FFFFCC;
   width: 100%;
   padding: 7px;
   text-align: center;
   z-index: 2;
}
.cookie-message > div {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   padding: 0px 5px;
}*/

/*-------------------------------- Top Navigation -------------------------------------*/
.navbar {
   margin-bottom: 0px;
   z-index: 1;
   flex-basis: auto;
}


.navbar-custom-top {
   color:#ffffff;
  	border-radius:0;
   min-height:32px;
   height:auto;
}

.navbar-custom-top .navbar-right {
   padding-top:19px;
}

.navbar-custom-top .navbar-nav > li > a {
   color: #fff;
   padding-left: 25px;
   padding-right: 25px;
   padding-top: 5px;
   padding-bottom: 5px;
}

.navbar-custom-top .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #d87900;
}

.navbar-custom-top .nav .open > a, .nav .open > a:hover, .nav .open > a:focus 
{
   background-color: #d87900;
}

/*-------------------------------- Main Navigation -------------------------------------*/
.navbar-custom-main
{
   color:#999999;
   font-size:20px;
   text-align:center;
   margin-bottom:2px;
}

.navbar-custom-main .navbar-nav > li {
  	margin-left:0px;
  	margin-right:20px;
   padding-top:2px;
   padding-bottom:10px;
   width:122px;
}

.navbar-custom-main .navbar-nav > li > a {
  	color:#999999;
  	padding:0px;
}

.navbar-custom-main .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #f7a823;
    background-color:#ffffff;
}

.navbar-brand {

   padding-top:0px;
   padding-bottom:10px;
   padding-left:15px;
   padding-right:0px;
}

.navbar-custom-main .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
   color:#f7a823;
}
.navbar-custom-main .navbar-toggle
{
   background-color:#999999;
}

.navbar-custom-main .icon-bar {
   border: 1px solid #fff;                
}

.navbar-collapse {
   padding-left:0px!important;
}

.navbar-collapse.in {
   overflow: hidden;
}

@media(max-width:992px)
{
   .navbar-custom-main {font-size:18px;}
   .navbar-custom-main .navbar-nav > li {width:90px; margin-left:18px;}
   .navbar-collapse {padding-left: 15px !important;}
}

@media(max-width:767px)
{
   .navbar-custom-main {text-align:left;}
   .navbar-custom-main .navbar-nav > li {width:100%; margin-top:10px; padding-bottom:0px;}
}

.main-nav-footer
{
   border-bottom:2px solid #cccccc;
}

.main-nav-tagline
{
   font-size:8px;
   color:#999999;
   margin-bottom:5px;
   margin-left:5px;
}

.jobg8-logo
{
   /*background-color:#ffffff;*/
   padding:5px;
   width: 170px;
}

/*-------------------------------- General overrides -------------------------------------*/
label {font-weight:normal;}

.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {margin-left:0px !important;}

.content-padding {padding-top:20px;}
.padding-bottom-10 {padding-bottom:10px;}
.padding-top-10 {padding-top:10px;}

.margin-top-10 {margin-top:10px;}

.hidden-expander {display:none;}

.no-padding-left {padding-left:0px;}
.no-padding-right {padding-right:0px;}
.no-padding-width {padding-left:0px; padding-right:0px;}
.no-padding {padding:0px 0px 0px 0px;}
.no-margin-top {margin-top:0px;}
.no-margin-bottom {margin-bottom:0px;}

.auto-width {width:auto !important;}

.inline-block {display:inline-block;}

.center {text-align:center;}

.text-left-important {text-align:left !important;}

.weight-600 {font-weight:600;}

/*-------------------------------- Colours -------------------------------------*/
.text-white {color:#ffffff;}
.text-red {color:#ff0000;}
.text-green {color:#00CC33;}
.text-orange {color:#f7a823;}

.background-yellow {background-color:#f9b234;}
.background-orange {background-color:#ea5b0b;}
.background-red {background-color:#f34941;}
.background-white {background-color:#ffffff;}
.background-dark-blue {background-color:#1d2e72;}
.background-dark-red {background-color:#cd2c29;}
.background-jobg8-orange {background-color: #f7a823;}
.background-light-blue {background-color:#C5D6E8;}

/*-------------------------------- Responsive styles -------------------------------------*/
.img-center {margin-left:auto; margin-right:auto;}
.img-responsive {width:100%;}

.large-header {font-size:47px; color:#9a9a9a; text-transform:uppercase;}
.text-jumbotron {font-size:21px; text-align:justify;}
.h1-homepage {font-size:50px;}
.h2-homepage {font-size:35px;}

@media(max-width:1200px)
{
   .large-header {font-size:32px;}
   .text-jumbotron {font-size:18px;}
   .h1-homepage {font-size:38px;}
   .h2-homepage {font-size:25px;}
}

@media(max-width:992px)
{
   .container {width:100%!important;}
   .h1-homepage {font-size:34px;}
   .h2-homepage {font-size:24px;}
}

@media(max-width:768px)
{
   .h1-homepage {font-size:24px;}
   .h2-homepage {font-size:18px;}
   h1 {font-size:24px;}
   h2 {font-size:20px;}
   h3 {font-size:18px;}
}

@media(max-width:480px)
{
   .large-header {font-size:24px;}
   .text-jumbotron {font-size:14px;}
   .h1-homepage {font-size:18px;}
   .h2-homepage {font-size:14px;}
}

/*-------------------------------- Links -------------------------------------*/
.link-white a:link, .link-white a:visited {color:#FFFFFF; text-decoration:underline;}
.link-white a:hover {color:#000000; text-decoration:underline;}

.link-grey a:link, .link-grey a:visited {color:#4d4d4d; text-decoration:underline;}
.link-grey a:hover {color:#FFFFFF; text-decoration:underline;}

.link-summit a:link, .link-summit a:visited {color:#FFFFFF;}
.link-summit a:hover {color:#000000; text-decoration:none;}

/*-------------------------------- Specific styles -------------------------------------*/
.accountDropDown {width: 100%; text-align: center; padding-top:10px; padding-bottom:10px;}

.accountDropDown > #myModal {text-align: left;}

.accountTestMode {margin: 0; padding: 10px; color: #77360A; background-color: #f9a635; border: 2px solid #77360A;}

.product-image {max-height:450px; max-width:825px;}

.product-stripes {max-height:550px; max-width:584px;}

.partners-image {line-height:100px; height:100px; text-align:center; vertical-align:middle; margin-top:20px;}

.glyphicon-bullet {padding-left:20px;}
.glyphicon-bullet-text {padding-left:8px;}

.finance-expander-outer {width:auto; height: auto; padding: 0px 0px 0px 18px; overflow: hidden; margin: 0px 0px 0px 0px;}
.finance-expander-inner {width:auto; height: 285px; overflow: auto; border: 1px solid #DBDBDB; background-color: #FFFFFF; padding: 6px;}
.finance-expander-inner td {padding: 6px;}

/*-------------------------------- Carousel styles -------------------------------------*/
.carousel-border {border-width:1px; border-style:solid; border-color:#9a9a9a;}
.carousel-caption-override {color:#4d4d4d; top:10px; text-shadow:none;}
.carousel-indicators-override li{border:1px solid #4d4d4d;}
.carousel-indicators-override .active{background-color:#4d4d4d;}

/*-------------------------------- Job Board Summit Booking Page styles -------------------------------------*/
.jbs-book-ticket .subtitle { font-weight:bold; font-size:18px; margin-bottom:10px; }

/*-------------------------------- Glyphicons bullet list styles -------------------------------------*/
.tick-circle-bullet ul {list-style:none} 
.tick-circle-bullet ul li:before {content:'\e089'; font-family: 'Glyphicons Halflings'; padding-right:8px;}
.tick-circle-bullet ul li {background:none;}

/*-------------------------------- Dashboard reports -------------------------------------*/
.cr {text-align:right;}
.cl {text-align:left;}
.c {text-align:left;}
.bold {font-weight: bold;}
.dashboard-table {min-width:390px;}
.dashboard-list li {padding: 8px 0px 8px 0px}

/*-------------------------------- Modal Popup -------------------------------------*/

.modal-popup-scrollable-div { overflow-y: scroll; height: 500px}

@media(max-height:620px)
{
   .modal-popup-scrollable-div { overflow-y: scroll; height: 400px}
}

@media(max-height:520px)
{
   .modal-popup-scrollable-div { overflow-y: scroll; height: 300px}
}

@media(max-height:420px)
{
   .modal-popup-scrollable-div { overflow-y: scroll; height: 200px}
}

@media(max-height:320px)
{
   .modal-popup-scrollable-div { overflow-y: scroll; height: 100px}
}

/*-------------------------------- Internal Menu Item Cog -------------------------------------*/ 
.cog-icon > .dropdown-toggle:before {content:'\e019'; font-family: 'Glyphicons Halflings';}

.top-menu-override {
   padding-left: calc(1.5vw - 5px) !important;
   padding-right: calc(1.5vw - 5px) !important;
}

/*-------------------------------- Job Apply -------------------------------------*/
.panel-title > a
{
   color:#2a6496;
}

input[type="file"] {
   background-color:transparent;
   display:inline-block;
}
input[type="file"]::-ms-value {

	background : #fff;
   border : 1px solid #aaaaaa;
   border-radius : 7px;
	padding :4px;
   color:#4d4d4d;
}
input[type="file"]::-ms-browse {

	border : 1px solid #737173;
	border-radius : 4px;
	font-family : inherit;
   margin-left:6px;
	padding : 0 8px;
}

/*-------------------------------- Top Navigation -------------------------------------*/
.navbar{
   margin-bottom:0px;
}


.navbar-custom-top {
   color:#4d4d4d;
   font-size:20px;
  	border-radius:0;
   min-height:32px;
   height:auto;
}

.navbar-custom-top .navbar-right {
   padding-top:30px;
}

.navbar-custom-top .navbar-nav > li > a {
  	color:#4d4d4d;
  	padding-left:25px;
  	padding-right:25px;
   padding-top:5px;
   padding-bottom:5px;
}

.navbar-custom-top .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #f7a823;
    background-color:#ffffff;
}

.navbar-custom-top .nav .open > a, .nav .open > a:hover, .nav .open > a:focus 
{
    color: #f7a823;
    background-color:#ffffff;
}

/*------------------------------ General --------------------------------------------------*/
.dynamic-content-text
{
   padding-top:150px;
   padding-bottom:150px;
}

.blue-separator {
   background-color: #0154a4;
}

.content-block
{
   padding-top:20px;
   padding-left:30px;
   padding-right:30px;
   padding-bottom:20px;
   background-color:white;
}

.homepage-header
{
   position: relative;
   left:15%;
   top:25%;
   width:80%;
}

.homepage-clients
{
   position: relative;
   width:45%;
   left:50%;
   top:20%;
   border-left:4px solid #ffffff;
   padding:20px;
   padding-left:40px;
}

.homepage-jobboardsummit
{
   position: relative;
   width:60%;
   left:5%;
   top:10%;
}

.get-in-touch
{
   position: relative;
   top:20%;
   padding-bottom:20px;
   background-color:#C5D6E8;
}

/*FONTS*/
.text-50 {font-size:50px;}
.text-35 {font-size:35px;}
.text-25 {font-size:25px;}
.text-16 {font-size:16px;}

@media(max-width:1200px)
{
   .text-50 {font-size:38px;}
   .text-35 {font-size:25px;}
   .text-25 {font-size:18px;}
}

@media(max-width:992px)
{
   .text-50 {font-size:34px;}
   .text-35 {font-size:24px;}
}

@media(max-width:768px)
{
   .text-50 {font-size:24px;}
   .text-35 {font-size:20px;}
   .text-25 {font-size:16px;}
   .text-16 {font-size:14px;}
}

@media(max-width:480px)
{
   .text-50 {font-size:20px;}
   .text-35 {font-size:18px;}
   .text-25 {font-size:14px;}
   .text-16 {font-size:14px;}
}

.grayscale-hover {
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
}

.grayscale-hover:hover {
   -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
   filter: grayscale(0%);
}
/*------------------------------ Product specific styles --------------------------------------------------*/
.product-header {
   position: relative;
   text-align: center;
   color: #ffffff;
   top: 30%;
   font-size: 7vw;
}

.width-35
{
   width:35%;
}

.width-100 {
   width: 100%;
}

.product-icon
{
   display:table-cell;
   padding-right:10px;
   padding-bottom:20px;
}

.product-icon-text
{
   display:table-cell;
}

.content-panel-blue
{
   background-color:#C5D6E8;
   padding:70px;
}

.content-panel-white
{
   background-color:#FFFFFF;
   padding:70px;
}

.vertical-center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.vertical-top {
   vertical-align: top;
}

.product-text
{
   width:80%;
}

.jbs-book-ticket
{
   width:600px;
}

/*------------------------------ Mobile specific styles --------------------------------------------------*/
@media(max-width:992px)
{
   .homepage-clients 
   {
      left: 5%;
      width: 90%;
      border-left: 0px none #ffffff;
      padding: 0px;
      /*background:rgba(255,255,255,  0.4)*/
   }

   .dynamic-content-text 
   {
      padding-top: 100px;
      padding-bottom: 100px;
   }

   .navbar-custom-top 
   {
      font-size:14px;
   }

   .jbs-book-ticket 
   {
      width: 100%;
   }
}

@media(max-width:768px)
{
   .dynamic-content-text 
   {
      padding-top: 50px;
      padding-bottom: 50px;
   }
    
   .homepage-header, .homepage-jobboardsummit
   {
      left:5%;
      width:90%;
   }

   .product-text
   {
      width:100%;
   }

   .content-panel-blue, .content-panel-white 
   {
      padding: 20px;
   }
}

/*------------------------------------------- Service Tiles ----------------------------------------------------------*/
.service-tiles {
   display:inline-block;
   max-width:1300px;
   padding-top:25px;
   padding-bottom:25px;
   text-align:center;
}

.service-tile
{
   display:inline-block;
   font-size:30px;
   color:#ffffff;
   width:300px;   
   line-height:300px;
   cursor:pointer;
   margin:10px;
}

@media(max-width:480px)
{
   .service-tiles 
   {
      padding-top:2px;
      padding-bottom:2px;
   }

   .service-tile
   {
      font-size:30px;
      width:100%;   
      line-height:220px;
      margin:2px 0px 2px 0px;
      min-width:300px;
      background-position:center center;
   }
      
   .service-tile-jobboard-summit 
   {
      line-height:300px;
      background-color:#0D0D01;
      background-size: contain;
      background-position:center;
   }

   .service-tile-jobboard-summit-next {
      line-height: 300px;
      background-color: #0D0D01;
      background-size: contain;
      background-position: center;
   }
}

/*------------------------------------------- Homepage Tiles ----------------------------------------------------------*/
.blue-tint-container {
    display: inline-block;
    padding: 10px;
}

.blue-tint {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0px;
    cursor: pointer;
}

.blue-tint figure {
    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin: 0px;
    position: relative;
    float: left;
    border: none;
    height: 300px;
}

.blue-tint figure:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,80,190, 0.5);
    transition: all .3s linear;
}

.blue-tint:hover figure:before {
    background: none;
}

.blue-tint-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 30px;
    color: #fff;
    transition: all .3s linear;
}

.blue-tint:hover .blue-tint-text {
    text-shadow: 0px 0px 5px #000;
}

.divImageJump {
   overflow: hidden;
}

.divImageJump img {
   -webkit-transition: width 0.2s ease-in-out;
   transition: all 0.1s ease-in;
}

.divImageJump img:hover {
   transform: scale(1.03);
}

.flex-page {
   min-height: 100vh;
   position: relative;
}

.flex-container {
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

.flex-two-columns {
   width: 50%;
}

@media (max-width: 768px) {
   .flex-sm-hide {
      display: none;
   }
}

.flex-column {
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
}

.flex-row {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
}

/* Work around for IE not supporting flex screen height */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .flex-ie {
      min-height: calc(100vh - 180px);
   }
}

.btn-padding {
   padding: 6px 12px !important;
}

.btn-jobg8-blue, .btn-jobg8-blue:visited, .btn-jobg8-blue:focus {
   color: #fff;
   background-color: #0054a4;
   border-color: #0054a4;
}

   .btn-jobg8-blue:hover, .btn-jobg8-blue:active {
      color: #fff;
      background-color: #276eb2;
      border-color: #276eb2;
   }

.btn-jobg8-orange, .btn-jobg8-orange:visited, .btn-jobg8-orange:focus {
   border: 4px solid #fff;
   border-radius: 5px;
   font-family: Oswald;
   font-size: 18px;
   background-color: #f9a635;
   color: #fff;
   min-width: 184px;
   padding: 4px 8px;
   transition: all linear 0.1s;
}

   .btn-jobg8-orange:hover, .btn-jobg8-orange:active {
      border: 4px solid #eee;
      color: #eee;
      background-color: #f19415;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.10)
   }

.validation {
   animation: validation-flash 0.5s linear 0.2s;
   -moz-animation: validation-flash 0.5s linear 0.2s;
   -webkit-animation: validation-flash 0.5s linear 0.2s;
}

@keyframes validation-flash {
   0% {
      background-color: #fff;
   }

   50% {
      background-color: #f99;
   }

   100% {
      background-color: #fff;
   }
}

@-moz-keyframes validation-flash {
   0% {
      background-color: #fff;
   }

   50% {
      background-color: #f99;
   }

   100% {
      background-color: #fff;
   }
}

@-webkit-keyframes validation-flash {
   0% {
      background-color: #fff;
   }

   50% {
      background-color: #f99;
   }

   100% {
      background-color: #fff;
   }
}

.unpublished {
   background-color: #fdd;
   background-image: url(/images/unpublished.png);
}

/*------------------------------------------- Bootstrap Tooltips ----------------------------------------------------------*/
.tooltip.in {
   opacity: 1 !important;
}

.tooltip-inner {
   background-color: #e0e9f8;
   color: #000;
   text-align: left;
   border: solid 1px rgb(185, 201, 239);
   font-size: 14px;
}

.tooltip.top .tooltip-arrow {
   border-top-color: rgb(185, 201, 239);
}

.tooltip.right .tooltip-arrow {
   border-right-color: rgb(185, 201, 239);
}

.tooltip.bottom .tooltip-arrow {
   border-bottom-color: rgb(185, 201, 239);
}

.tooltip.left .tooltip-arrow {
   border-left-color: rgb(185, 201, 239);
}

.tooltip-large + .tooltip > .tooltip-inner {
   max-width: 450px !important;
   width: 450px !important;
}