﻿/*******************************/
/******     Body CSS  ******/
/*******************************/
body { font-size: 1.8em; font-family: "Raleway", sans-serif; }
p { line-height: 2em; padding-bottom: 10px; }
.text-center ul, .text-center ol { list-style-position: inside; }

/*******************************/
/****** Global Keyframes ******/
/*******************************/
@-webkit-keyframes zoomIn { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
@keyframes zoomIn { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

@-webkit-keyframes slideFromLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes slideFromLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

@-webkit-keyframes slideFromTop { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes slideFromTop { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

@-webkit-keyframes tiltInTop { 0% { -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg); transform: rotateY(30deg) translateY(-300px) skewY(-30deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg); transform: rotateY(0deg) translateY(0) skewY(0deg); opacity: 1;} }
@keyframes tiltInTop { 0% { -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg); transform: rotateY(30deg) translateY(-300px) skewY(-30deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg); transform: rotateY(0deg) translateY(0) skewY(0deg); opacity: 1;} }

/*******************************/
/******     Button CSS  ******/
/*******************************/
.btn { margin: 10px; font-size: 1em; border-radius: 5px; text-align: center; transition: all linear .3s; text-decoration: none!important; }
.btn-solid { color: #7d5443; background-color: #c4a091; border: 1px solid #c4a091; }
.btn-solid:hover { color: #32522f; background-color: #dbc96b; border: 1px solid #b4cf53; }
.btn-green-solid { color: #b0d4ab; background-color: #4a6347; border: 1px solid #4a6347; }
.btn-green-solid:hover { color: #4a6347; background-color: #b0d4ab; border: 1px solid #b0d4ab; }
.btn-gold { color: #fff; background-color: #e3b200; border: 1px solid #e3b200; }
.btn-gold:hover { color: #e3b200; background-color: #fcf9eb; border: 1px solid #e3b200; }
.btn-orange { background-color: #ffd68f; color: #000!important; border: 2px solid #fcc15b; }
.btn-orange:hover { background-color: #fff0d6; color: #000!important; border: 2px solid #ffd68f; }
.btn-gold { background-color: transparent; color: #bda964!important; border: 2px solid #bda964; }
.btn-gold:hover { background-color: #bda964; color: #1a1a1a!important; }
.btn-gold-solid { background-color: #bda964; color: #fff!important; }
.btn-gold-solid:hover { background-color: #f0e0aa; color: #ad8600!important; }
.btn-lightblue { background-color: #a6ecff; color: #1a1a1a!important; }
.btn-lightblue:hover { background-color: #5498ab!important; color: #fff!important; }
.btn-blue-solid { background-color: #0072d3; color: #e1e8ed!important; }
.btn-blue-solid.border { border: 1px solid #0072d3; }
.btn-blue-solid:hover { background-color: #e1e8ed; color: #0072d3!important; }
.btn-transparent { background-color: rgba(0,0,0,0.4)!important; color: #fff; }
.btn-transparent:hover { background-color: rgba(100, 100, 100,0.4)!important; color: #fff; }
.btn-transparent.border-yellow { border: 2px solid #f5a700!important }
.btn-transparent.border-yellow:hover { background-color: rgba(245, 204, 0,0.4)!important; color: #fff; }
.btn-transparent.border-lightblue { background-color: rgba(166, 236, 255,0.4)!important; border: 2px solid #a6ecff!important }
.btn-transparent.border-lightblue:hover { background-color: rgba(166, 236, 255,0)!important; color: #fff; }
.btn-burgandy-solid { background-color: #cc0000!important; color: #fff!important; border: 1px solid #cc0000!important; }
.btn-burgandy-solid:hover { background-color: #fcc7c7!important; color: #cc0000!important; border: 1px solid #fcc7c7!important; }

.btn-link { padding: 30px; margin-bottom:50px;  }

@media(max-width: 768px) {
    .btn-link { padding: 20px; width: 90%; }
}
@media(max-width: 512px) {
    .btn-link { font-size: 0.7em; }
}

/*******************************/
/******     Form Control CSS  ******/
/*******************************/
.form-control { border-radius:8px; line-height:20px }
.form-control.textbox { background: rgba(255,255,245,1); padding: 2px 10px; color: #333; }
.form-control.textbox::-webkit-input-placeholder { color: #aaa; }
.form-control.textbox:-moz-placeholder, .form-control.textbox:-ms-input-placeholder, .form-control.textbox::-ms-input-placeholder { color: #444; }
.form-control.textbox:placeholder-shown { color: #ccc; }

/* Exception Box */
.divMessageBox { font-size: 1em; line-height: 1.6em; margin-bottom: 15px; position: relative; padding: 14px 40px 14px 18px; margin: auto 20px; width: calc(100% - 40px); -webkit-box-shadow:  0px 1px 1px 0px rgba(180, 180, 180, 0.1); box-shadow:  0px 1px 1px 0px rgba(180, 180, 180, 0.1); }
.divMessageBox { display: none; }
.divMessageBox.exception { background-color: #ffccd1!important; color: #b70011!important; border: 1px solid #b70011!important; }
.divMessageBox.success { background-color: #edf6e5!important; color: #7a9659!important; border: 1px solid #9fc76f!important; }
.form-control-exception { display: none; }
.form-control-exception { background: #ffccd1; color: #b70011; margin-top: -10px; margin-bottom: 10px; padding: 5px 12px; }
.form-control-exception { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition: 1s ease-out; -webkit-transition: 1s ease-out; }

/*******************************/
/******     Section CSS  ******/
/*******************************/
section { min-height: 50vh; }
section .title { text-align: center; font-size: 2em; font-family: 'Montserrat', serif; padding: 50px 0 ; }
.section-alt-background { background: #e1e1eb; color: #444; }
.section-background { background: #444; color: #fff; }

.section-number .count.counter-count, .section-number .counter-text  { font-size: 4em; line-height: 4em; font-family: 'Radio Canada',sans-serif; }

.banner-image-bg { position: relative; top: 0; left: 0; width: 100%; min-height: 70vh; }
.banner-image-bg { background-position: center center!important; background-size: cover!important; background-repeat: no-repeat!important; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.4);}

.content-panel-wrapper { height: calc(100% - 112px); }
.centered-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; }
.centered-box .link-div a { color: #e6c98c;  }
.centered-box .link-div a:hover { color: #ebb950;  }
.centered-box .img-logo { width: 150px; max-width: 400px;}

.centered-box .title { font-size: 1.6em; font-weight: bold; text-transform: uppercase; color: #d3d3e0; padding-bottom: unset; }
.centered-box .caption { font-size: 1.3em; color: #b0b1d9; padding-bottom: 40px; }
.centered-box .description { font-size: 1.2em; color: #bbb; }

@media (max-width:768px) {
    .banner-image-bg { height: calc(100vh + 80px); }
    .content-panel-wrapper { height: calc(100% - 80px);}
}

/*******************************/
/******     Section Background Image CSS  ******/
/*******************************/
.section-background-image { background-position: center center!important; background-size: cover!important; background-repeat: no-repeat!important; }
.section-background-image { color: #bbb; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.6);}

.sectionTopImageBanner { height: 35vh; min-height: unset; }
.content-box.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sectionTopImageBanner h1 { font-size: 1.6em; font-weight: bold; text-transform:uppercase; }
.sectionTopImageBanner h2 { font-size: 1.2em; }

/*******************************/
/******     Column Cells CSS  ******/
/*******************************/
.col-cells .cell { position: relative; min-height: 50vh; text-align: center; color: #fff; font-size: 0.9em; padding: 40px 20px 60px; font-family: "Raleway", sans-serif; }
.col-cells .cell.alt { background: #666;}
.col-cells .cell .icon { border: 2px solid #fff;; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; padding-top: 2px; text-align: center; margin: auto; }
.col-cells .cell .header { font-size: 1.5em; }
.col-cells .cell .content { padding-bottom: 20px; font-size: 1.1em; line-height: 1.7em; color: #ddd }
.col-cells .cell .link { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; }
.col-cells .cell a { color: #f2cdbd; text-transform: uppercase; transition: all linear .3s; }
.col-cells .cell a:hover { color: #fff3ed; font-size: 1.1em; } 

.col-cells .cell .header.title { font-size: 2em; }
.col-cells .cell .icon.animate { -webkit-animation: zoomIn 1.5s both;  animation: zoomIn 1.5s both; }
.col-cells .cell .header.animate { -webkit-animation: slideFromTop 1.5s both;  animation: slideFromTop 1.5s both; animation-delay: 0.5s }
.col-cells .cell .content.animate, .section-services .cell a { -webkit-animation: slideFromTop 1s both;  animation: slideFromTop 1s both; animation-delay: 1s; }

.col-cells.type-2 .cell { color: #ddd!important; }
.col-cells.type-2 .cell .icon { border: 2px solid #ddd; }

@media(max-width: 768px) {
    .col-cells .cell .header.title { padding: 50px 0 20px; }
    .col-cells .cell .icon { width: 80px; height: 80px; font-size: 40px; padding-top: 10px; }
    .col-cells .cell { padding: 20px; }
    .section-number .col-cells .cell .header.title { font-size: 2em; }
}

/*******************************/
/******     Partnership CSS  ******/
/*******************************/
.partnership { text-align: center;}
.partnership img { width: 300px;}
.partnership div { padding: 20px 0; font-size: 1.2em; font-weight: bold; color: #b38434; }
.partnership:hover div { color: #805a1c; }

/*******************************/
/******     Section Enquiry CSS  ******/
/*******************************/
.sectionEnquiry .divMain { padding-bottom: 50px;}
.sectionEnquiry .divEnquiry { background: #fafafa;}
.sectionEnquiry .divEnquiry .row.contact { padding: 15px 20px 0 20px; }
.sectionEnquiry .divEnquiry .title { font-size: 1.6em; padding: 50px 20px 20px;}
.sectionEnquiry .divEnquiry .title .subtitle { font-size: 0.5em; color: #888; }
.sectionEnquiry .divEnquiry .row.contact span { font-size: 0.8em; color: #d00;}

/*******************************/
/******     Section Contact Us CSS  ******/
/*******************************/
.sectionContact .row.contact { padding: 15px 20px 0 20px; }
.sectionContact .title { font-size: 1.6em; padding: 50px 20px 20px; text-align: left;}
.sectionContact .contact a { color: #444; }

.contentWrapper { padding-bottom: 50px;}