/*! ROK Mobile v1.0.0 (https://rokmobile.com) Copyright 2018 ROK International */

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800");
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #000
}

section {
    height: auto;
    width: 100%;
    clear: both;
    display: block
}

main {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 0
}

footer {
    padding: 2rem 1rem;
    height: auto
}

html {
    font-size: 0.9rem
}

body,
html {
    height: 100%;
    width: 100%;
    color: #fff
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    webkit-tap-highlight-color: #000;
    -webkit-font-smoothing: subpixel-antialiased
}

hr {
    border-color: #d42528;
    border-width: 3px;
    max-width: 50px
}

a {
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
    color: #d42528
}

a:active,
a:focus,
a:hover {
    color: #999
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

::-moz-selection,
::-moz-selection {
    color: white;
    text-shadow: none;
    background: #222222
}

::-moz-selection,
::selection {
    color: white;
    text-shadow: none;
    background: #222222
}

img::-moz-selection,
img::-moz-selection {
    color: #fff;
    background: transparent
}

img::-moz-selection,
img::-moz-selection,
img::selection {
    color: #fff;
    background: transparent
}

.label,
label {
    color: #000;
    font-size: 100%
}

ul {
    padding: 0 0 10px 16px
}

sup {
    font-size: 55%;
    top: -0.8em
}

.carousel-control-next,
.carousel-control-prev {
    width: 11%;
    opacity: 0.8
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 30px;
    height: 30px
}

.card-footer {
    border: none;
    background-color: transparent;
    padding: 0
}

@media (max-width:575.98px) {
    .m-xs-0 {
        margin: 0!important
    }
    .mt-xs-0,
    .my-xs-0 {
        margin-top: 0!important
    }
    .mr-xs-0,
    .mx-xs-0 {
        margin-right: 0!important
    }
    .mb-xs-0,
    .my-xs-0 {
        margin-bottom: 0!important
    }
    .ml-xs-0,
    .mx-xs-0 {
        margin-left: 0!important
    }
    .m-xs-1 {
        margin: 0.25rem!important
    }
    .mt-xs-1,
    .my-xs-1 {
        margin-top: 0.25rem!important
    }
    .mr-xs-1,
    .mx-xs-1 {
        margin-right: 0.25rem!important
    }
    .mb-xs-1,
    .my-xs-1 {
        margin-bottom: 0.25rem!important
    }
    .ml-xs-1,
    .mx-xs-1 {
        margin-left: 0.25rem!important
    }
    .m-xs-2 {
        margin: 0.5rem!important
    }
    .mt-xs-2,
    .my-xs-2 {
        margin-top: 0.5rem!important
    }
    .mr-xs-2,
    .mx-xs-2 {
        margin-right: 0.5rem!important
    }
    .mb-xs-2,
    .my-xs-2 {
        margin-bottom: 0.5rem!important
    }
    .ml-xs-2,
    .mx-xs-2 {
        margin-left: 0.5rem!important
    }
    .m-xs-3 {
        margin: 1rem!important
    }
    .mt-xs-3,
    .my-xs-3 {
        margin-top: 1rem!important
    }
    .mr-xs-3,
    .mx-xs-3 {
        margin-right: 1rem!important
    }
    .mb-xs-3,
    .my-xs-3 {
        margin-bottom: 1rem!important
    }
    .ml-xs-3,
    .mx-xs-3 {
        margin-left: 1rem!important
    }
    .m-xs-4 {
        margin: 1.5rem!important
    }
    .mt-xs-4,
    .my-xs-4 {
        margin-top: 1.5rem!important
    }
    .mr-xs-4,
    .mx-xs-4 {
        margin-right: 1.5rem!important
    }
    .mb-xs-4,
    .my-xs-4 {
        margin-bottom: 1.5rem!important
    }
    .ml-xs-4,
    .mx-xs-4 {
        margin-left: 1.5rem!important
    }
    .m-xs-5 {
        margin: 3rem!important
    }
    .mt-xs-5,
    .my-xs-5 {
        margin-top: 3rem!important
    }
    .mr-xs-5,
    .mx-xs-5 {
        margin-right: 3rem!important
    }
    .mb-xs-5,
    .my-xs-5 {
        margin-bottom: 3rem!important
    }
    .ml-xs-5,
    .mx-xs-5 {
        margin-left: 3rem!important
    }
    .p-xs-0 {
        padding: 0!important
    }
    .pt-xs-0,
    .py-xs-0 {
        padding-top: 0!important
    }
    .pr-xs-0,
    .px-xs-0 {
        padding-right: 0!important
    }
    .pb-xs-0,
    .py-xs-0 {
        padding-bottom: 0!important
    }
    .pl-xs-0,
    .px-xs-0 {
        padding-left: 0!important
    }
    .p-xs-1 {
        padding: 0.25rem!important
    }
    .pt-xs-1,
    .py-xs-1 {
        padding-top: 0.25rem!important
    }
    .pr-xs-1,
    .px-xs-1 {
        padding-right: 0.25rem!important
    }
    .pb-xs-1,
    .py-xs-1 {
        padding-bottom: 0.25rem!important
    }
    .pl-xs-1,
    .px-xs-1 {
        padding-left: 0.25rem!important
    }
    .p-xs-2 {
        padding: 0.5rem!important
    }
    .pt-xs-2,
    .py-xs-2 {
        padding-top: 0.5rem!important
    }
    .pr-xs-2,
    .px-xs-2 {
        padding-right: 0.5rem!important
    }
    .pb-xs-2,
    .py-xs-2 {
        padding-bottom: 0.5rem!important
    }
    .pl-xs-2,
    .px-xs-2 {
        padding-left: 0.5rem!important
    }
    .p-xs-3 {
        padding: 1rem!important
    }
    .pt-xs-3,
    .py-xs-3 {
        padding-top: 1rem!important
    }
    .pr-xs-3,
    .px-xs-3 {
        padding-right: 1rem!important
    }
    .pb-xs-3,
    .py-xs-3 {
        padding-bottom: 1rem!important
    }
    .pl-xs-3,
    .px-xs-3 {
        padding-left: 1rem!important
    }
    .p-xs-4 {
        padding: 1.5rem!important
    }
    .pt-xs-4,
    .py-xs-4 {
        padding-top: 1.5rem!important
    }
    .pr-xs-4,
    .px-xs-4 {
        padding-right: 1.5rem!important
    }
    .pb-xs-4,
    .py-xs-4 {
        padding-bottom: 1.5rem!important
    }
    .pl-xs-4,
    .px-xs-4 {
        padding-left: 1.5rem!important
    }
    .p-xs-5 {
        padding: 3rem!important
    }
    .pt-xs-5,
    .py-xs-5 {
        padding-top: 3rem!important
    }
    .pr-xs-5,
    .px-xs-5 {
        padding-right: 3rem!important
    }
    .pb-xs-5,
    .py-xs-5 {
        padding-bottom: 3rem!important
    }
    .pl-xs-5,
    .px-xs-5 {
        padding-left: 3rem!important
    }
    .m-xs-auto {
        margin: auto!important
    }
    .mt-xs-auto,
    .my-xs-auto {
        margin-top: auto!important
    }
    .mr-xs-auto,
    .mx-xs-auto {
        margin-right: auto!important
    }
    .mb-xs-auto,
    .my-xs-auto {
        margin-bottom: auto!important
    }
    .ml-xs-auto,
    .mx-xs-auto {
        margin-left: auto!important
    }
}

.btn {
    border: none;
    font-weight: 600
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: #fff
}

@media only screen and (max-width:576px) {
    .btn {
        font-size: 1.2rem
    }
}

.btn-default {
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
    padding: .25rem 1rem;
    line-height: 1.3
}

.btn-default:active,
.btn-default:focus,
.btn-default:hover {
    color: #fff;
    background-color: #999;
    border: 1px solid #999
}

@media only screen and (max-width:480px) {
    .btn-default {
        width: 100%
    }
}

.btn-pink,
.btn-primary {
    color: #fff;
    background-color: #e5378a;
    border: 1px solid #e5378a;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
    padding: .25rem 1rem;
    line-height: 1.3
}

.btn-pink:active,
.btn-pink:focus,
.btn-pink:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    color: #e5378a;
    background-color: #fff;
    border: 1px solid #fff
}

@media only screen and (max-width:576px) {
    .btn-pink,
    .btn-primary {
        font-size: 0.8rem
    }
}

.btn-pink:active,
.btn-pink:focus,
.btn-pink:hover {
    border: 1px solid #e5378a
}

.btn-large {
    padding: 10px 40px;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 800;
    text-align: center
}

.btn-white {
    color: #d42327;
    background-color: #fff;
    border: 1px solid #fff;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s
}

.btn-white:active,
.btn-white:focus,
.btn-white:hover {
    color: #fff;
    background-color: #999;
    border: 1px solid #999
}

.btn.inverse {
    color: #fff;
    background-color: #999;
    border: 1px solid #999
}

.btn.inverse:active,
.btn.inverse:focus,
.btn.inverse:hover {
    color: #fff;
    background-color: #d42528;
    border: 1px solid #d42528
}

.clear-white-btn {
    font-weight: 400;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #fff;
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: .315rem 1.75rem
}

.clear-white-btn:active,
.clear-white-btn:focus,
.clear-white-btn:hover {
    background-color: #fff;
    border: 1px solid #fff;
    color: #7c9993!important;
    text-decoration: none
}

@media only screen and (max-width:576px) {
    .clear-white-btn {
        width: 100%
    }
}

.clear-pink-btn {
    font-weight: 300;
    background-color: transparent;
    border: 1px solid #e5378a;
    display: inline-block;
    color: #e5378a;
    text-align: center;
    padding: .315rem 1.75rem;
    white-space: normal
}

.clear-pink-btn:active,
.clear-pink-btn:focus,
.clear-pink-btn:hover {
    background-color: #e5378a;
    border: 1px solid #e5378a;
    color: #fff!important;
    text-decoration: none
}

.clear-btn {
    font-weight: 400;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #999;
    display: inline-block;
    color: #999;
    text-align: center
}

.clear-btn:active,
.clear-btn:focus,
.clear-btn:hover {
    background-color: #2da4dd;
    border: 1px solid #2da4dd;
    color: #fff!important;
    text-decoration: none
}

.clear-btn.active {
    background-color: #2da4dd;
    border: 1px solid #2da4dd;
    color: #fff!important;
    text-decoration: none
}

.clear-btn.focus {
    -webkit-box-shadow: unset;
    box-shadow: unset
}

@media only screen and (max-width:480px) {
    .clear-btn {
        width: 100%
    }
}

.clear-blue-btn {
    font-weight: 400;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #2da4dd;
    display: inline-block;
    color: #2da4dd;
    text-align: center
}

.clear-blue-btn:active,
.clear-blue-btn:focus,
.clear-blue-btn:hover {
    background-color: #999;
    border: 1px solid #999;
    color: #fff!important;
    text-decoration: none
}

.clear-blue-btn.active {
    background-color: #2da4dd;
    border: 1px solid #2da4dd;
    color: #fff!important;
    text-decoration: none
}

.clear-blue-btn.focus {
    -webkit-box-shadow: unset;
    box-shadow: unset
}

.flex-equal>* {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1
}

@media (min-width:768px) {
    .flex-md-equal>* {
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1
    }
}


header .tagline {
    font-size: 1.6rem;
    text-align: right;
    line-height: 1;
    text-transform: uppercase;
}

header h2 {
    text-transform: uppercase;
    color:#999;
    font-weight: 800;
}

header h2 a{
    text-transform: uppercase;
    color:#fff;
    text-decoration: underline;
    font-weight: 800;
}

@media (max-width:567px) {
    header img {
        margin-bottom: 1rem;
    }
    header .tagline, header h2 {
        text-align: center;
    }
}

.business-block {
    width: 100%
}

@media screen and (max-width:576px) {
    .business-block {
        margin-bottom: 30px
    }
}

@media screen and (max-width:576px) {
    .align-items-center>.col-lg:last-child .business-block {
        margin-bottom: 0
    }
}

.img-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-out 0s, -webkit-transform 250ms ease-out 0s;
    transition: opacity 250ms ease-out 0s, -webkit-transform 250ms ease-out 0s;
    -o-transition: transform 250ms ease-out 0s, opacity 250ms ease-out 0s;
    transition: transform 250ms ease-out 0s, opacity 250ms ease-out 0s;
    transition: transform 250ms ease-out 0s, opacity 250ms ease-out 0s, -webkit-transform 250ms ease-out 0s
}

.img-overlay.primary {
    background: rgba(0, 0, 0, 0.7)
}

.img-overlay:hover {
    opacity: 1
}

.project-details {
    color: #fff!important;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    padding: 1rem;
    text-align: center
}

.project-details h3 {
    font-size: 1.4rem;
    font-weight: 800
}

.project-details .large {
    font-size: 4rem
}

.project-details a {
    color: #fff!important
}

.project-details p {
    font-size: 0.9rem;
    margin: 0 1rem;
    margin-bottom: 0.8rem;
    line-height: 1.4
}

@media screen and (max-width:576px) {
    .project-details h3{
        font-size: 1.6rem;
        text-transform: uppercase;
    }
    .project-details p {
        font-size:1.2rem;
        line-height: 1.1;
    }
    .project-details a {
        font-size: 1.4rem;
    }
}

.dist-op {
    color: #fff!important;
    padding: 1rem;
    text-align: center
}

.dist-op h3 {
    font-size: 1.4rem;
    font-weight: 800
}

.dist-op p {
    font-size: 0.8rem
}

.dist-op a {
    color: #fff!important;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 800
}

.viewlink {
    font-size:0.8rem;
    text-transform: uppercase;
    font-weight:600;
    margin-top:.8rem;
    text-transform: uppercase;
    text-decoration: underline;
}

footer .h3 {
    font-weight: 800;
    text-transform: uppercase;
}


footer .h4 {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.2rem;
    white-space: nowrap;
}

footer p {
    line-height: 1.1;
}

footer .h4>span {
    color:#999;
}

footer .h4>a {
    color:#fff;
    text-decoration: underline;
}

@media screen and (max-width:576px) {
    footer .h3, footer .h4, footer p {
        text-align: center;
    }
}

nav {
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    background-color: #fff
}

.list-group-horizontal {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.list-group-horizontal .list-group-item {
    display: inline-block;
    margin-bottom: 0;
    margin-left: -4px;
    margin-right: 0;
    border-radius: 4px
}

.no-padding {
    padding: 0
}

@media screen and (max-width:768px) {
    .m-no-padding {
        padding: 0
    }
}

.no-gutter {
    margin: 0
}

.mob-padding {
    padding-left: 15px;
    padding-right: 15px
}

.uppercase {
    text-transform: uppercase
}

.boldtext {
    font-weight: 700!important
}

.normal {
    font-weight: 400!important
}

.reg {
    font-size: 1rem;
    font-weight: normal
}

.red {
    color: #d42528!important
}

.grey {
    color: #999!important
}

.blue {
    color: #2da4dd!important
}

.black {
    color: #000!important
}

.white {
    color: #fff!important
}

.pink {
    color: #e5378a!important
}

.grey-bg {
    background-color: #f3f3f3
}

.midgrey-bg {
    background-color: #999
}

.dkgrey-bg {
    background-color: #1d1d1b
}

.red-bg {
    background-color: #d42528
}

.white-bg {
    background-color: #fff
}

.black-bg {
    background-color: #000
}

.paleblue-bg {
    background-color: #D8E9F3
}

.ltblue-bg {
    background-color: #80B2E0
}

.dkblue-bg {
    background-color: #2da4dd
}

.pink-bg {
    background-color: #e5378a
}

.divider-blue {
    border-top: 1px solid #2da4dd;
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1px;
    font-size: 1px
}

.divider-ltblue {
    border-top: 1px solid #D8E9F3;
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1px;
    font-size: 1px
}

.centered {
    text-align: center
}

.centered img {
    margin: auto
}

.centred-items {
    padding: 25% 16% 0 17%
}

@media screen and (max-width:768px) {
    .centred-items {
        padding: 10%
    }
}

.d-none {
    display: none!important
}

.inline {
    display: inline-block!important
}

.relative {
    position: relative
}

.full-height {
    height: 100%
}

.full-width {
    width: 100%
}

.clearboth {
    clear: both
}

.overflow-hidden {
    overflow: hidden
}

.row-divider {
    border-top: 1px solid #000
}

.content-spacer {
    padding: 2% 14% 1%
}

@media screen and (max-width:768px) {
    .content-spacer {
        padding: 2% 4% 1%
    }
}

.content-spacer-large {
    padding: 2% 8% 1%
}

@media screen and (max-width:768px) {
    .content-spacer-large {
        padding: 4%
    }
}

.extra-info {
    font-size: 20px;
    font-weight: 600
}

.extra-info a {
    color: #d42528;
    font-weight: 700
}

@media screen and (max-width:768px) {
    .extra-info {
        font-size: 5vw
    }
}

@media screen and (max-width:768px) {
    .navbar-fixed-top {
        position: relative;
        margin-bottom: 0
    }
}

@media screen and (min-width:768px) {
    .banners-fix {
        margin-top: -30px
    }
}

.page-spacer-footer {
    padding-bottom: 15%
}

.bold-red {
    color: #d42528;
    font-weight: bold
}

.divider-white {
    border-top: 1px solid #fff;
    display: block;
    width: 100%
}

.divider-black {
    border-top: 1px solid #000;
    display: block;
    width: 100%
}

.divider-red {
    border-top: 1px solid #d42528;
    display: block;
    width: 100%;
    max-width: 100%
}

.white-box {
    border: 1px solid #fff
}

.grey-btm-line {
    border-bottom: 1px solid #f3f3f3
}

.dkgrey-btm-line {
    border-bottom: 1px solid #dedede
}

.red-btm-line {
    border-bottom: 2px solid #d42528
}

.red-btm-line-thin {
    border-bottom: 1px solid #d42528
}

.dotted-line {
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #fff
}

.smallprint {
    font-size: 12px
}

.xsmallprint {
    font-size: 0.6rem
}

.fs-1 {
    font-size: 1.2rem
}

.fs-2 {
    font-size: 1.4rem
}

.fs-3 {
    font-size: 1.6rem
}

.fs-4 {
    font-size: 1.8rem
}

.fs-5 {
    font-size: 2rem
}

.verticle-align-m {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.temporary-hide {
    display: none
}

.unhide {
    display: block!important
}

@media screen and (max-width:567px) {
    .mobile {
        display: block
    }
    .desktop {
        display: none
    }
}

@media screen and (min-width:568px) {
    .mobile {
        display: none
    }
    .desktop {
        display: block
    }
}

.form-small {
    font-size: 0.9rem
}

.form-small label {
    font-size: 0.9rem
}

.cart-modal .modal-content {
    background-color: transparent
}

.cart-modal .modal-body,
.cart-modal .modal-footer {
    background-color: #fff
}