/*** SOLVING THE TALENT SHORTAGE ***/
.banner.home {
    position: relative;
    height: 420px;
    width: auto;
}

.banner-wrapper .banner-overlay .in-this-section {
    font-weight:300;
    text-align: left;
}
.banner-wrapper {
    position:relative;/*fix zindex position*/
    z-index:9;
    /*width: auto;*/
    height: 100%;
}

.banner-wrapper .banner-overlay {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
}

@media (max-width:991px){
    .banner-wrapper .banner-overlay .in-this-section {
        margin: 0 auto;
    }
}

.banner-overlay h1 {
    font-family: "Din OT", "Helvetica Neue LT Std", "Helvetica Neue", "Arial", sans-serif;
    font-size: 2.4em;
    line-height: 1.1;
    margin-bottom: 6px;
    color: #466ea5;
    text-transform: uppercase;
}

.banner-overlay h2 {
    color: #67696f;
    font-family: "Din OT", "Helvetica Neue LT Std", "Helvetica Neue", "Arial", sans-serif;
    margin-bottom: 12px;
    line-height: 1.5;
    /* max-width: 600px; */
    font-size: 2em;
    font-weight:300;
}

.intro .banner-keyword {
    color: #466ea5;
    font-weight: 700;
    font-family: "Helvetica Neue LT Std", "Helvetica Neue", "Arial", sans-serif;
}

.intro .banner-description {
    margin-top:10%;
    font-weight:300;

}
@media (max-width:1299px){
    .intro .banner-description {
        margin-top:5%;
    }
}
@media (max-width:991px){
    .intro .banner-description {
        margin: 0 auto;
    }
}

.banner {
    background-size: cover;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    padding: 0;
}

.banner-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .banner-wrapper {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .banner .tile {
        width: calc(100% - 20px);
        margin-top: 18px;
    }

    .banner-wrapper {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

}

@media (min-width: 768px) {
    .banner-wrapper {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .banner-wrapper {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .banner-wrapper {
        width: 1170px;
    }
}

.banner .tile {
    width: 60%;
    padding: 26px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    font-weight: 300;
    margin: 54px 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.banner .tile p{
    font-weight: 300;
    font-family: 'dinpro-regularregular';
}

.banner .tile h1{
    color: #466ea5;
    font-size: 28px;
    font-family: 'dinpro-regularregular';
}

@media (max-width: 767px) {
    .banner .tile {
        width: calc(100% - 70px);
        margin-top: 18px;
    }
}

section {
    padding: 36px 0;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container:before, .container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container-fluid:before, .container-fluid:after {
    content: " ";
    display: table;
}

.container-fluid:after {
    clear: both;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row:before, .row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

/*COLOR TILES*/
.color-tiles {
    /* $tile-light-blue:               #6390c6;
  $tile-red:                          #ab404b;
  $tile-orange:                       #e77c22;
  $tile-gray:                         #67696f;
  $tile-dark-gray:                    #282a32;
  $tile-black:                        #000000; */
}

.color-tiles .tile {
    -webkit-flex-basis: calc(100%/3 - 18px);
    -ms-flex-preferred-size: calc(100%/3 - 18px);
    flex-basis: calc(100%/3 - 18px);
    width: calc(100%/3 - 18px);
    padding: 9px;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 767px) {
    .color-tiles .tile {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.color-tiles .tile-content {
    width: 100%;
    color: #436DA7;
    background: #d9e2ee;
    border-radius: 6px;
    padding: 20px;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.color-tiles .tile-content h3 {
    line-height: 1.5;
}

.color-tiles .tile-content span {
    font-size: 11px;
    line-height: 1;
}

.color-tiles .tile:nth-child(1).is-featured {
    width: 50%;
    max-width: 50%;
}

@media (max-width: 767px) {
    .color-tiles .tile:nth-child(1).is-featured {
        width: 100%;
        max-width: 100%;
    }
}

.color-tiles .tile:nth-child(2).is-featured {
    width: 50%;
    max-width: 50%;
}

@media (max-width: 767px) {
    .color-tiles .tile:nth-child(2).is-featured {
        width: 100%;
        max-width: 100%;
    }
}

.color-tiles .tile.green .tile-content {
    color: #6D8F82;
    background: #e1e9e6;
}

.color-tiles .tile.green .tile-content a {
    color: #6D8F82;
    font-weight: 600;
}

.color-tiles .tile.blue .tile-content {
    color: #436DA7;
    background: #d9e2ee;
}

.color-tiles .tile.blue .tile-content a {
    color: #436DA7;
    font-weight: 600;
}

.color-tiles .tile.dark-blue .tile-content {
    color: #edf3f9;
    background: #6390c6;
}

.color-tiles .tile.dark-blue .tile-content a {
    color: #edf3f9;
    font-weight: 600;
}

.color-tiles .tile.red .tile-content {
    color: #FFFFFF;
    background: #9D323D;
}

.color-tiles .tile.red .tile-content a {
    color: #ffeaea;
    font-weight: 600;
}

.color-tiles .tile.orange .tile-content {
    color: #ffecdc;
    background: #e77c22;
}

.color-tiles .tile.orange .tile-content a {
    color: #ffecdc;
    font-weight: 600;
}

.color-tiles .tile.dark-gray .tile-content {
    color: #dadbe2;
    background: #282a32;
}

.color-tiles .tile.dark-gray .tile-content a {
    color: #dadbe2;
    font-weight: 600;
}

.color-tiles .tile.black .tile-content {
    color: #fff;
    background: #000000;
}

.color-tiles .tile.black .tile-content a {
    color: #fff;
    font-weight: 600;
}

.color-tiles .tile.gray .tile-content,
.color-tiles .tile.grey .tile-content {
    color: #494A4F;
    background: #F9F9F9;
}

.color-tiles .tile .tile-wrapper.col-1, .color-tiles .tile.col-1 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}

.color-tiles .tile.col-2 {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

@media (max-width: 767px) {
    .color-tiles .tile.col-2 {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.color-tiles.green .tile .tile-content {
    color: #6D8F82;
    background: #e1e9e6;
}

.color-tiles.green .tile .tile-content a {
    color: #6D8F82;
    font-weight: 600;
}

.color-tiles.blue .tile .tile-content {
    color: #436DA7;
    background: #d9e2ee;
}

.color-tiles.blue .tile .tile-content a {
    /*color: #436DA7;*/
    color: #FFFFFF;
    float: right;
    clear: both;
    font-weight: 600;
}

.color-tiles.dark-blue .tile .tile-content {
    color: #edf3f9;
    background: #6390c6;
}

.color-tiles.dark-blue .tile .tile-content a {
    color: #edf3f9;
    font-weight: 600;
}

.color-tiles.red .tile .tile-content {
    color: #FFFFFF;
    background: #9D323D;
}

.color-tiles.red .tile .tile-content a {
    color: #ffeaea;
    font-weight: 600;
}

.color-tiles.orange .tile .tile-content {
    color: #ffecdc;
    background: #e77c22;
}

.color-tiles.orange .tile .tile-content a {
    color: #ffecdc;
    font-weight: 600;
}

.color-tiles.dark-gray .tile .tile-content {
    color: #dadbe2;
    background: #282a32;
}

.color-tiles.dark-gray .tile .tile-content a {
    color: #dadbe2;
    font-weight: 600;
}

.color-tiles.black .tile .tile-content {
    color: #fff;
    background: #000000;
}

.color-tiles.black .tile .tile-content a {
    color: #fff;
    font-weight: 600;
}

.color-tiles.gray .tile .tile-content,
.color-tiles.grey .tile .tile-content {
    color: #494A4F;
    background: #F9F9F9;
}

.color-tiles .tile .tile-content h2{
    font-family: 'dinpro-regularregular';
    font-size: 22px;
}

.color-tiles .tile .tile-content p{
    font-family: 'dinpro-regularregular';
    color: #000;
}

.color-tiles.has-bg .tile-wrapper {
    box-shadow: 0px 0px 0px 9px #fff inset;
    background-size: cover;
    background-position: 50% 50%;
}

.color-tiles.has-bg .tile {
    padding: 0;
    border: 9px solid #fff;
}

.color-tiles.has-bg .tile .tile-content {
    box-shadow: 0px 0px 0px 4px white;
    border-radius: 6px;
    background-color: transparent;
}

.color-tiles .tile-wrapper.col-1 .tile, .color-tiles.col-1 .tile {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}

.color-tiles .tile-wrapper.col-2 .tile, .color-tiles.col-2 .tile {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

@media (max-width: 767px) {
    .color-tiles .tile-wrapper.col-2 .tile, .color-tiles.col-2 .tile {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.tile-wrapper {
    margin-top: 18px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

section:not(.leaf) > .container:not(.leaf) > h1 {
    text-align: center;
    margin-bottom: 18px;
    color: #466ea5;
    font-size: 28px;
    font-family: 'dinpro-regularregular';
}

section:not(.leaf) > .container:not(.leaf) > p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
    font-family: 'dinpro-regularregular';
}

.btn {
    border-radius: 5px;
    background: #d3d4d8;
    border: 0;
    color: #494A4F;
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.77;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none !important;
}

.btn:hover, .btn:focus {
    color: #fff;
    text-decoration: none;
    background: #aaacb4;
}

.btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active, .btn:active {
    background: #aaacb4;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    box-shadow: none;
}

.btn.green {
    color: #6D8F82;
    background: #e1e9e6;
}

.btn.green:hover, .btn.green:focus {
    color: #6D8F82;
    background: #b5c9c1;
}

.btn.blue {
    color: #436DA7;
    background: #d9e2ee;
}

.btn.blue:hover, .btn.blue:focus {
    color: #436DA7;
    background: #a4bad6;
}

.btn.dark-blue {
    color: #edf3f9;
    background: #6390c6;
}

.btn.dark-blue:hover, .btn.dark-blue:focus {
    color: #edf3f9;
    background: #3b6aa1;
}

.btn.red {
    color: #ffeaea;
    background: #ab404b;
}

.btn.red:hover, .btn.red:focus {
    color: #ffeaea;
    background: #732b33;
}

.btn.orange {
    color: #ffecdc;
    background: #e77c22;
}

.btn.orange:hover, .btn.orange:focus {
    color: #ffecdc;
    background: #aa5812;
}

.btn.dark-gray {
    color: #dadbe2;
    background: #282a32;
}

.btn.dark-gray:hover, .btn.dark-gray:focus {
    color: #dadbe2;
    background: #060608;
}

.btn.black {
    color: #fff;
    background: #000000;
}

.btn.black:hover, .btn.black:focus {
    color: #fff;
    background: #262626;
}

.btn.gray, .btn.grey {
    color: #494A4F;
    background: #F9F9F9;
}

.btn.gray:hover, .btn.gray:focus, .btn.grey:hover, .btn.grey:focus {
    color: #494A4F;
    text-decoration: none;
    background: lightgray;
}