﻿/* admin strip */

#idAdminBar {
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #fff;
    position: fixed;
    z-index: 9999 !important;
    padding: 10px 20px;
    top: 0;
}

#idAdminBar a {
    color: #fff;
    border-bottom: 1px solid #000;
    font-weight: 700;
}

#idAdminBar a:hover, #idAdminBar a:focus, #idAdminBar a:active {
    border-bottom: 1px dotted #fff;
}

#idAdminBar a.clsLogout {
    display: block;
    text-decoration: none;
    float: right;
    font-size: 1.5rem;
}

/* loader */

.no-js #loader { display: none; }

.js #loader { display: block; position: absolute; left: 100px; top: 0;}

.loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
    background-color: #1d1d1b;
}

.loader i {
    position: absolute;
    left: 50%;
    left: calc(50vw - 25px);
    top: 50%;
    color: #fff;
    font-size: 3em;
}

.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    -moz-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-ms-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* web site */

/* colours
    Body text: #3c3f49
    Orange: #ff9933
    Grey: #3b3b3b
    Light gray: #dad3d0
    Very light gray: #ece9e7
*/

html {
    position: relative;
    min-height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 12pt;
    line-height: 1.75rem;
    color: #3c3f49;
    padding: 0;
    margin: 0;
}

a {
    color: #ff9933;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out, all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out, all .3s ease-in-out;
    -o-transition: all .3s ease-in-out, all .3s ease-in-out;
    transition: all .3s ease-in-out, all .3s ease-in-out;
}

a:hover, a:focus, a:active {
    color: #3c3f49;
    text-decoration: none;
}

h1, h2, h3 {
    font-weight: 700;
    margin: 30px 0;
}

h1 {
    margin-top: 0;
    font-size: 2rem;
}

h2 {
    font-size: 1.7rem;
}

h3, body.homepage h1 {
    font-size: 1.5rem;
}

p {
    margin: 30px 0;
}

/* media queries */

@media only screen and (max-width:767px) {
    body.admin {
        padding-top: 50px;
    }
}

@media only screen and (min-width:768px) {
    body {
        padding-top: 220px;
    }
    body.admin {
        padding-top: 270px;
    }
    body.admin header {
        top: 50px
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3, body.homepage h1 {
        font-size: 1.75rem;
    }
}

/* header */

header {
    width: 100%;
    background-color: #fff;
    display: block;
}

header .btn-block {
    width: 50%;
    float: left;
    background-color: #dad3d0;
    margin: 0 !important;
    border-radius: 0;
}

header .btn-block:first-child {
    border-right: 1px solid #fff !important;
}

header .btn-block:hover, header .btn-block:focus, header .btn-block:active {
    background-color: #ff9933;
    color: #fff;
}

header .btn-block i {
    margin-right: 5px;
}

header .row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    -webkit-transition: padding .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: padding .5s ease-in-out, padding .5s ease-in-out;
    transition: padding .5s ease-in-out, padding .5s ease-in-out;
}

header.top-collapse .row {
    padding: 10px 20px;
}

header .row [class*="col-"] {
    margin: 0;
    padding: 0;
}

header .row .col-lg-6 {
    padding: 0 20px;
}

header .row .col-12 {
    padding: 0;
    text-align: center !important;
}

header .row [class*="col-"] .img-fluid {
    max-height: 100%;
}

header .row .col-3 a {
    color: #ff9933;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.005rem;
}

header .row .col-3 a:hover, header .row .col-3 a:focus, header .row .col-3 a:active {
    color: #3b3b3b;
}

/* media queries */

@media only screen and (max-width: 767px) {
    header {
        position: relative !important;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 768px) {
    header .row {
        padding: 30px 20px;
    }
    header .row [class*="col-"] {
        height: 90px;
    }
    header .row .col-3 {
        display: flex;
        align-content: flex-start;
    }
    header .row .col-3 div {
        width: 100%;
        align-self: center;
    }
}

@media only screen and (max-width: 991px) {
    header .row .col-3 a {
        display: block;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    header .row .col-3 a i  {
        margin-right: 5px;
    }
    header .row .col-3 a em {
        font-style: normal;
    }
    header .row .col-3 a span {
        display: none;
    }
    header .row .col-12 .img-fluid {
        text-align: center !important;
    }
}

@media only screen and (min-width: 992px) {
    header .row .col-3 a i,
    header .row .col-3 a em {
        display: none;
    }
    header .row .col-3 a:first-child {
        font-size: 2.1rem;
    }
}

/* standard navigation */

.dropdown-item.active, .dropdown-item:active {
    background-color: transparent !important;
}

/* standard mobile navigation */

@media only screen and (max-width: 767px) {
    .navbar {
        padding: 0;
    }
    .navbar-toggler {
        border-radius: 0;
        border: none !important;
        width: 100%;
        position: relative;
        background-color: #3b3b3b;
        padding-left: 20px;
        height: 40px;
    }
    .navbar-toggler.collapsed {
        background-color: #3b3b3b;
    }
    .icon-bar {
	    width: 25px; 
	    height: 2px;
	    background-color: #fff;
	    display: block;
	    transition: all 0.2s;
	    margin: 1px 0 5px 0;
    }
    .navbar-toggler .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
        margin-top: 3px;
    }
    .navbar-toggler .middle-bar {
        opacity: 0;
    }
    .navbar-toggler .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }
    .navbar-toggler.collapsed .top-bar {
        transform: rotate(0);
    }
    .navbar-toggler.collapsed .middle-bar {
        opacity: 1;
    }
    .navbar-toggler.collapsed .bottom-bar {
        transform: rotate(0);
    }
    .navbar-collapse {
        position: absolute;
        top: 40px;
        right: 100%;
        padding: 0;
        width: 100%;
        transition: all 0.3s ease;
        display: block;
        background-color: #3b3b3b;
        height: calc(100vh - 186px);
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: 0;
    }
    .nav-item a {
        font-weight: 500;
        color: #fff;
        white-space: nowrap;
        padding: 5px 15px !important;
        display: block;
    }
    .nav-item a:hover, .nav-item a:active, .nav-item a:focus,
    .nav-item.active a, .nav-item.show > a {
        font-weight: 700;
        background-color: #dad3d0;
        color: #3c3f49;
    }
    ul.dropdown-menu {
        margin: 0;
        padding: 0;
        border-radius: 0;
        background-color: #dad3d0;
        box-shadow: none !important;
    }
    ul.dropdown-menu a.dropdown-item {
        padding-left: 30px !important;
        background-color: #dad3d0;
        color: #3c3f49 !important;
        font-weight: 500 !important;
    }
    ul.dropdown-menu li.active a,
    ul.dropdown-menu li a:hover,
    ul.dropdown-menu li a:focus,
    ul.dropdown-menu li a:active {
        background-color: #ff9933 !important;
        color: #fff !important;
    }
}

/* standard desktop navigation */

@media only screen and (min-width: 768px) {
    .navbar {
        height: 50px;
        background-color: #3b3b3b;
    }
    .navbar-collapse ul {
        padding: 0 20px;
        margin: 0 auto;
        height: 50px;
    }
    .nav-item {
        line-height: 1rem;
    }
    .nav-item a {
        font-weight: 500;
        color: #fff !important;
        white-space: nowrap;
        padding-top: 14px;
        height: 50px;
    }
    .nav-item a:hover, .nav-item a:active, .nav-item a:focus,
    .nav-item.active a, .nav-item.show > a {
        font-weight: 700;
    }
    ul.dropdown-menu {
        margin-top: -10px;
        padding: 0;
        border-radius: 0;
        background-color: #3b3b3b;
        height: auto;
    }
    ul.dropdown-menu a.dropdown-item {
        padding: 10px 20px;
        background-color: #3b3b3b;
        color: #fff !important;
        font-weight: 500 !important;
        height: unset;
    }
    ul.dropdown-menu li.active a,
    ul.dropdown-menu li a:hover,
    ul.dropdown-menu li a:focus,
    ul.dropdown-menu li a:active {
        background-color: #ff9933 !important;
        color: #fff !important;
    }
}

/* standard responsive layout */

.container-fluid {
    max-width: 100% !important;
}

.content-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

[class*="col-"] {
  padding: 15px;
}

/* fixed width content */

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px !important;
    }
}

/* carousel */

body.homepage .carousel {
    border-bottom: 25px solid #dad3d0 !important;
}

.carousel-inner {
    width: 100%;
    margin: 0 auto;
}

body.homepage .carousel-inner,
body.error .carousel-inner {
    max-width: 1200px;
}

.carousel-item {
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

body.homepage .carousel-item {
    height: 250px;
    background-size: contain;
    background-position: bottom center;
}

.carousel-caption {
    top: 0;
    bottom: unset;
    margin: 0 auto;
    padding: 10px 0 0 0;
}

.carousel-caption .clsInner {
    width: 100%;
}

.carousel-caption .clsInner p {
    margin: 0 0 10px 0;
    color: #3b3b3b;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: normal;
}

.carousel-caption .clsInner p:nth-child(3) {
    color: #ff9933;
    font-weight: 700;
    font-size: 1rem;
}

.carousel-caption .clsInner .btn-default {
	margin: 20px 0 0 0;
    font-weight: 700;
}

/* media queries */

@media only screen and (max-width: 400px) {
    .carousel-caption .clsInner .btn-default {
        display: none;
    }
}

@media only screen and (min-width: 401px) {
    body.homepage .carousel-item {
        height: 350px;
    }
}

@media only screen and (max-width: 991px) {
    .carousel-caption .clsInner p:nth-child(2) {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    body.homepage .carousel {
        border-bottom: 50px solid #dad3d0 !important;
    }
    body.homepage .carousel-item {
        height: 500px;
    }
    .carousel-caption .clsInner p {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 1200px) {
    body.homepage .carousel-item {
        height: 600px;
    }
    .carousel-caption .clsInner p {
        font-size: 2.5rem;
    }
}

/* content */

#idCol1 h1, #idCol1 h2:first-child, #idCol1 h3:first-child,
#idCol2 h1, #idCol2 h2:first-child, #idCol2 h3:first-child {
    margin-top: 0;
}

#idCol1 ul {
    margin: 20px 0 20px 15px;
    padding: 0;
}

body #idCol1 p.clsIntro {
    font-size: 1.25rem;
    line-height: 2rem;
}

body.homepage #idCol1 p.clsIntro {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
}

body.homepage #idCol1 p.clsIntro em {
    display: block;
    font-weight: 500;
    font-style: normal;
}

body.homepage #idCol1 ul.clsIntro {
    font-size: 1.25rem;
    line-height: 2rem;
    color: #ff9933;
    font-weight: 700;
    list-style-type: none;
    margin: 20px 0;
}

.clsBlock {
    display: block;
    margin: 20px 0;
    padding: 30px 20px;
}

.clsBlock h3 {
    margin-top: 0;
}

.clsBlock p:last-child {
    margin-bottom: 0;
}

.clsBlock.clsOrange {
    background-color: #ff9933;
    color: #fff;
}

/* media queries */

@media only screen and (min-width: 768px) {
    body.homepage #idCol1 p.clsIntro {
        font-size: 2.5rem;
        line-height: 3rem;
    }
    body.homepage #idCol1 ul.clsIntro {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }
}

/* responsive gallery */

.nanogallery_gallerytheme_custom_KG_Gallery .nGY2TnImgBack {
    background-image: none !important;
}

/* downloads */

ul.clsDownloads {
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
}

ul.clsDownloads li {
    margin: 0;
    padding: 0;
}

ul.clsDownloads li a {
    display: block;
    padding: 10px 15px;
    margin: 0 0 10px 0;
    text-decoration: none;
    font-weight: 700;
}

ul.clsDownloads li a:hover, ul.clsDownloads li a:focus, ul.clsDownloads li a:active {
    background-color: #ff9933;
    color: #fff;
}

ul.clsDownloads li i {
    margin: 0 10px 0 0;
    font-size: 1.5em;
}

/* google map */

#idMap .col-12 {
    padding: 25px 0 50px 0;
}

/* media queries */

@media only screen and (min-width: 768px) {
    #idMap .col-12 {
        padding: 50px 0 100px 0;
    }
}

/* terms etc. */

ol.clsTerms,
ul.clsTerms {
    margin: 0;
}

ol.clsTerms li,
ul.clsTerms li {
   margin-bottom: 20px;
}

ol.clsTerms li ol,
ul.clsTerms li ol {
    list-style-type: lower-alpha;
}

ol.clsTerms li ol,
ol.clsTerms li ul,
ul.clsTerms li ol,
ul.clsTerms li ul {
   margin-top: 20px;
   margin-bottom: 20px;
}

ol.clsTerms li ol li,
ol.clsTerms li ul li,
ul.clsTerms li ol li,
ul.clsTerms li ul li {
    margin-bottom: 0;
}

/* survey & logo rows */

#idSurvey {
    background-color: #dad3d0;
    line-height: 1.25rem;
}

#idSurvey .row .col-md-6 .img-fluid {
    max-height: 250px;
}

#idSurvey h4 {
    margin-top: 0;
    font-size: 1.75rem;
    font-weight: 400;
}

#idSurvey ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: 700;
}

#idLogos {
    background-color: #ece9e7;
    line-height: 1.25rem;
    text-align: center;
}

#idLogos .img-fluid {
    max-height: 50px;
    margin: 20px 10px;
    filter: gray;
    -webkit-filter: grayscale(100%); 
}

/* media queries */

@media only screen and (max-width: 767px) {
    #idSurvey {
        text-align: center;
    }
    #idSurvey .row .col-md-6 .img-fluid {
        max-height: 150px;
    }
}

@media only screen and (min-width: 768px) {
    #idSurvey .row .col-md-6:first-child {
        text-align: right;
    }
    #idSurvey .row .col-md-6 .img-fluid {
        max-height: 250px;
    }
    #idSurvey h4 {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 991px) {
    #idLogos .img-fluid {
        max-height: 85px;
        margin: 20px;
    }
}

/* footer */

footer {
    background-color: #ff9933;
    color: #fff;
    line-height: 1.25rem;
}

footer .col-md-6:first-child ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: 700;
}

footer .col-md-6:first-child ul li {
   padding: 5px 0;
}

footer .col-md-6:first-child ul li a {
    padding: 0;
    background-color: transparent;
    color: #fff;
    display: inline;
}

footer .col-md-6:first-child ul li a:hover, footer .col-md-6:first-child ul li a:focus, footer .col-md-6:first-child ul li a:active {
    color: #3c3f49;
}

footer .col-md-6:first-child ul li.dropdown > a:first-child {
    color: #fff !important;
}

footer .col-md-6:first-child ul li.dropdown ul {
    text-transform: none !important;
    padding: 10px 0 5px 20px;
}

footer .col-md-6:first-child ul li.dropdown ul li {
    padding: 2px 0;
}

footer .col-md-6:last-child a {
    color: #fff;
    border-bottom: 1px dotted #fff;
}

footer .col-md-6:last-child a:hover, footer .col-md-6:last-child a:focus, footer .col-md-6:last-child a:active {
    color: #3c3f49;
    border-bottom: 1px dotted #3c3f49;
}

footer .col-md-6:last-child {
    font-size: .9rem;
}

footer .col-md-6:last-child p:first-child {
    margin-top: 0;
}

footer h4 {
    margin-top: 0;
    font-size: 1.75rem;
    font-weight: 400;
}

@media only screen and (min-width: 768px) {
    footer h4 {
        font-size: 2rem;
    }
}

/* media queries */

@media only screen and (max-width: 767px) {
    footer .col-md-6:first-child {
        padding-bottom: 0;
    }
    footer .col-md-6:last-child {
        text-align: left !important;
        padding-top: 0;
    }
    footer .col-md-6:last-child p {
        margin-top: 0;
    }
}

@media only screen and (min-width: 991px) {
    footer .img-fluid {
        max-height: 85px;
    }
}

/* forms */

.form-control {
    border: 1px solid #3c3f49;
    border-radius: 10px;
    color: #3c3f49;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(60,63,73,0.33) !important;
}

::-moz-placeholder { /* Firefox 19+ */
    color: rgba(60,63,73,0.33) !important;
}

:-ms-input-placeholder { /* IE 10+ */
    color: rgba(60,63,73,0.33) !important;
}

:-moz-placeholder { /* Firefox 18- */
    color: rgba(60,63,73,0.33) !important;
}

label {
    margin: 10px 0 5px 0;
    font-size: 1.1em;
}

.clsError {
    color: #ff0000 !important;
}

.clsError::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(255,0,0,1) !important;
}

.clsError::-moz-placeholder { /* Firefox 19+ */
    color: rgba(255,0,0,1) !important;
}

.clsError:-ms-input-placeholder { /* IE 10+ */
    color: rgba(255,0,0,1) !important;
}

.clsError:-moz-placeholder { /* Firefox 18- */
    color: rgba(255,0,0,1) !important;
}

.btn-default {
	margin: 0;
    border: none !important;
    border-radius: 0;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out, all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out, all .3s ease-in-out;
    -o-transition: all .3s ease-in-out, all .3s ease-in-out;
    transition: all .3s ease-in-out, all .3s ease-in-out;
    font-size: 1rem;
    background-color: #ff9933;
    color: #fff;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 10px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: #3c3f49;
    color: #fff;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block !Important;
}

input[type="checkbox"] + label span {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 10px 5px 0;
    vertical-align: middle;
    background: url(/Assets/Images/CSS/bgCheckbox.png) left -30px no-repeat;
    cursor: pointer;
}

input[type="checkbox"]:checked + label span {
    background: url(/Assets/Images/CSS/bgCheckbox.png) left top no-repeat;
}

/*.clsMarketing {
    margin: 20px 0;
    background-color: #e5e5e5;
    padding: 20px;
}

.clsMarketing p {
    margin: 0 0 15px 0;
}

.clsMarketing input[type="checkbox"] + label span {
    background: url(/Assets/Images/CSS/bgCheckbox.png) left -30px no-repeat;
}

.clsMarketing input[type="checkbox"]:checked + label span {
    background: url(/Assets/Images/CSS/bgCheckbox.png) left top no-repeat;
}*/

.g-recaptcha {
    margin: 20px 0;
}

#idContactForm .form-control.clsError {
    border: 1px solid #ff0000;
}

#idContactForm h4 {
    margin-top: 30px;
}

#idContactForm .col-md-6 h4:first-child {
    margin-top: 0;
}

#idSurvey label {
    display: none;
}

#idSurvey .form-control {
    background-color: #fff;
    border-radius: 20px;
    margin: 0 0 10px 0;
    color: #3c3f49;
    border: none;
}

#idSurvey .btn-default {
    border-radius: 20px;
    float: right;
}

/* form validation messages */

.clsValidation {
	margin: 20px 0;
	padding: 20px;
	overflow: auto;
    display: block;
    border-radius: 20px;
    background-color: #ece9e7;
}

.clsValidation.clsSuccess {
    color: #3c3f49;
}

.clsValidation.clsFailure {
    color: #ff0000;
}

.clsValidation.clsSuccess strong {
    color: #ff9933;
}

#idSurvey .clsValidation {
    background-color: #fff;
}

/* progress modal */

 .modalBackground { 
    background-color: #000; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
}

.updateProgress { 
    border: none; 
    background-color: #fff; 
    position: absolute; 
    max-height: 250px; 
    max-width: 250px; 
    padding: 50px;
    text-align: center;
    font-size: 1.2rem;
    color: #000;
}

.updateProgress i {
    margin: 0 0 20px 0;
}

/* back to top */

@media only screen and (max-width: 1023px) {
    #scrolltotop_parent {
        bottom: 25px !important;
        right: 25px !important;
    }
}

#scrolltotop_parent {
    background: #3b3b3b;
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1002 !important;
    color: #fff;
    padding: 8px 14px;
    font-size: 1.4rem;
}

#scrolltotop_parent:hover {
    opacity: 0.7;
    transition: 0.1s;
}

.scrolltotop_circle {
    border-radius: 50%;
}
