/*--- Giving a clickable div a pointer -----------------------------*/
.a-link, .modal-link, .js-link, .grid-link, .photo-link {cursor: pointer;}


/*----- Tab Links -----*/

.submit-enquiry-button a {border-right: solid 1px #ced4d8;}
.submit-enquiry-button a:hover {background: #fff; color: #4c4c4c;}



/*==================================================================*/
/*   MODAL BOX                                                      */
/*==================================================================*/
/* css copied from original file jquery.flex-modal.css and brought into this css file for editing instead */
/* SEE https://github.com/floriancapelle/jquery-flex-modal */
/* set this class to hide modals on pageload */ /* use your existing modifiers if you can */

html.modal-open {overflow: hidden; padding-right: 16px;} /* Prevents background scrolling while modal is open */

.flex-modal-hide {display: none;}
.flex-modal-item {position: fixed; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.4); z-index: 10000; opacity: 0; display: none; transition: opacity .1s; /* make sure to use at least tiny transition-duration so a transitionend event can fire */}
.flex-modal-item--ready {display: flex;}
.flex-modal-item--visible {opacity: 1;}
.flex-modal-item__content {box-sizing: border-box; position: relative; padding: 0px; border-radius: 3px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); background: #fff;}
.flex-modal-item__content h2 {margin-bottom: 0px;}
.flex-modal-item__content h2:first-child {margin-top: 0px;}
.flex-modal-scrollable__content {box-sizing: border-box; padding: 20px; max-width: 60vw; max-height: 90vh; overflow: auto;}
.flex-modal-scrollable__content_narrow {box-sizing: border-box; padding: 20px; max-width: 45vw; max-height: 90vh; overflow: auto;}
.flex-modal-item__close {position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; z-index: 100000;}
.flex-modal-item__close svg {width: 20px; height: 20px;}
.flex-modal-item__close svg polygon {fill: #343f48; transition: all .3s ease;}
.flex-modal-item__close:hover svg polygon {fill: #019e6c;}

.flex-modal-item__close_popup_subscribe {position: absolute; top: 40px; right: 40px; width: 20px; height: 20px; z-index: 100000;}
.flex-modal-item__close_popup_subscribe svg {width: 20px; height: 20px;}
.flex-modal-item__close_popup_subscribe svg polygon {fill: #FFFFFF; transition: all .3s ease;}
.flex-modal-item__close_popup_subscribe:hover svg polygon {fill: #019e6c;}

/*--- Add this class to a modal div if you want them to animate ----*/
.modal-animate {transition: opacity .4s;}
.modal-animate .flex-modal-item__content {transition: transform .5s cubic-bezier(0.610, 0.405, 0.325, 1.165); transform: translateY(-200px);}
.modal-animate.flex-modal-item--visible .flex-modal-item__content {transform: translateY(0);}

.modal-expert {padding: 0px 0px 20px 0px;}
.modal-expert-wrap {display: flex;}
.modal-expert-box {flex: 1; box-sizing: border-box; margin: 0px 10px; padding: 15px 20px 15px 90px; border: solid 1px rgba(132,147,158,0.3); position: relative; transition: all .3s ease;}
.modal-expert-box:first-child {margin-left: 0px;}
.modal-expert-box:last-child {margin-right: 0px;}
.modal-expert-box h3 {font-size: 1rem; font-weight: 600; text-transform: uppercase; text-align: left; color: #988962; margin: 0px;}
.modal-expert-box p {font-size: 1.4rem; margin: 0px; font-weight: 400;}
.modal-expert-box svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px;}
.modal-expert-box svg path, .modal-expert svg circle {fill: #25aae1;}
.modal-expert-box-priority-line svg path {fill: #c00000;}
/*--- For devices who auto change phone numbers to links -----------*/
.modal-expert-box a, .modal-expert-box a:visited, .modal-expert-box a:hover, .modal-expert-box a:active, .modal-expert-box .phoneexpert {color: #343f48 !important; text-decoration: none;}

.modal-enquiry input[type="text"], .modal-enquiry input[type="tel"], .modal-enquiry input[type="email"], .modal-enquiry input[type="submit"], .modal-enquiry select, .modal-enquiry textarea {width: 100%;}
.modal-enquiry-title {flex: 1; box-sizing: border-box; padding: 15px 20px 15px 90px; position: relative; border: solid 1px rgba(132,147,158,0.3); border-bottom: none;}
.modal-enquiry-title svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px;}
.modal-enquiry-title svg path, .modal-enquiry-title svg circle {fill: #25aae1;}
.modal-enquiry-title h3 {font-size: 1rem; font-weight: 600; /*text-transform: uppercase;*/ text-align: left; color: #988962; margin: 0px;}
.modal-enquiry-title p {font-size: 1.4rem; margin: 0px; font-weight: 400;}
.modal-enquiry-title-no-svg {padding-left: 20px;}

.modal-enquiry-wrap {display: flex; flex-flow: row wrap; box-sizing: border-box; border: solid 1px rgba(132,147,158,0.3); border-top: none; padding: 0px 10px 20px 10px;}
.modal-enquiry-wrap p {margin: 0px;}
.modal-enquiry-wrap .signup-terms {flex-basis: auto; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; padding: 0px 0px 20px 10px;}
.modal-enquiry-wrap .signup-terms p {font-size: 1.4rem; margin: 0px;}
.modal-enquiry-wrap .field-2 {flex-basis: auto; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 50%; padding: 0px 10px 20px 10px;}
.modal-enquiry-wrap .field-1 {flex-basis: auto; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; padding: 0px 10px 20px 10px;}
.modal-enquiry-wrap label {flex-basis: auto; width: 100%; padding-bottom: 10px;}
.modal-enquiry-wrap .field-w-titlename select {flex: 1; margin-right: 20px;}
.modal-enquiry-wrap .field-w-titlename input {flex: 3;}
.modal-enquiry-wrap .field-w-callback select {flex: 1; margin-left: 20px;}
.modal-enquiry-wrap .field-w-callback input {flex: 3;}
.modal-enquiry-wrap .field-w-subscribeby span {flex: 1; display: inline-block; margin-right: 20px;}
.modal-enquiry-wrap .field-w-subscribeby span:last-of-type {margin-right: 0px;}
.modal-enquiry-wrap .field-w-subscribeby label {display: inline-block; padding: 0px 0px 5px 0px; font-weight: 600;}
.modal-enquiry-wrap .field-w-btn input {flex: 2;}
.modal-enquiry-wrap .field-w-btn button {flex: 1; font-size: 1.4rem; margin-left: 20px;}
.modal-enquiry-wrap .field-manual {margin-left: auto; padding-bottom: 10px;}
.modal-enquiry-wrap .field-manual p {position: relative; top: -10px; text-align: right; width: 100%;}
.modal-enquiry-wrap .field-manual a {text-decoration: underline; color: #343f48;}
.modal-enquiry-wrap .field-manual a:hover, .modal-enquiry-wrap .field-manual a:focus {text-decoration: none;}











/*--- Form Styles --------------------------------------------------*/
form {margin: 0px; padding: 0px;}
fieldset {border: 0px; margin: 0px; padding: 0px;}
input, select, textarea {font-family: 'Open Sans'; font-size: 1.6rem;/*16px*/ border: solid 1px #ced4d8; border-radius: 3px; background-color: #ffffff; padding: 10px 20px 10px 20px; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
input::-ms-expand, select::-ms-expand, textarea::-ms-expand {display: none;}
select {background: url('/images/select-field-arrow.png') right center no-repeat transparent; background-color: #ffffff; padding: 10px 50px 10px 20px;}
input[type="text"] {}
input[type="text"]:checked {}
input[type="radio"] {-webkit-appearance: radio;}
input[type="radio"]:checked {}
input[type="checkbox"] {-webkit-appearance: checkbox; padding: 0px !important;}
input[type="checkbox"]:checked {}
input[type="submit"] {cursor: pointer; cursor: hand; color: #ffffff; font-size: 1.09rem;/*16px - changed from 1.6rem to 1.09rem for REGISTER NOW button*/ font-weight: 400; text-transform: uppercase; border: solid 1px #0e6b94; background-color: #0e6b94 !important; box-sizing: border-box; transition: all .3s ease;}
input[type="submit"]:hover {border: solid 1px #8cc63e; background-color: #8cc63e !important;}
input[type="submit"]:focus {}
input[type="reset"] {cursor: pointer; cursor: hand; color: #757575; font-size: 1.6rem;/*16px*/ font-weight: 400; text-transform: uppercase; border: solid 1px #5c5c5c; background-color: #363636 !important; box-sizing: border-box; transition: all .3s ease;}
input[type="reset"]:hover {color: #8f8f8f; border: solid 1px #757575; background-color: #424242 !important;}
input[type="reset"]:focus {}
.shift-label label {position: absolute; bottom: 100000px; left: 0px;}

/*--- Clear Fix ----------------------------------------------------*/
.clearfix {background: transparent; clear: both; font-size: 0em;}

/*--- Single Element Alignment -------------------------------------*/
.left {float: left;}
.right {float: right;}

/*--- Giving a clickable div a pointer -----------------------------*/
.a-link {cursor: pointer;}

/*--- Boxes --------------------------------------------------------*/

/*--- Buttons ------------------------------------------------------*/
.button-blue {display: inline-block; color: #ffffff; font-size: 1.4rem;/*14px*/ font-weight: 400; background-color: #0e6b94; border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-blue i {margin-left: 10px; font-size: 1.0rem;/*10px*/ position: relative; top: -1px;}
.button-blue:hover {background-color: #094661;}

.button-ghost-light {display: inline-block; color: #ffffff; font-size: 1.4rem;/*14px*/ font-weight: 400; background-color: rgba(255,255,255,0.1); border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-ghost-light i {margin-left: 10px; font-size: 1.0rem;/*10px*/ position: relative; top: -1px;}
.button-ghost-light:hover {background-color: #0e6b94;}

.button-ghost-dark {display: inline-block; color: #ffffff; font-size: 1.4rem;/*14px*/ font-weight: 400; background-color: rgba(0,0,0,0.2); border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-ghost-dark i {margin-left: 10px; font-size: 1.0rem;/*10px*/ position: relative; top: -1px;}
.button-ghost-dark:hover {background-color: #0e6b94;}

/*--- Back To Top Scroll Button ------------------------------------*/
a.go-top {display: none; position: fixed; bottom: 1em; right: 1em; text-decoration: none; text-align: center; color: #ffffff; background-color: rgba(0,0,0,0.3); font-size: 1.6rem/*16px*/; padding: 10px 20px 15px 20px; border-radius: 3px;}
a.go-top:link, a.go-top:visited {background-color: rgba(0,0,0,0.3); color: #ffffff;}
a.go-top:hover, a.go-top:active {background-color: rgba(0,0,0,0.6); color: #ffffff;}

/*--- Responsive Youtube / iframe videos ---------------------------*/
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.videoWrapperBx {position: relative; /* 16:9 */ height: 300px; min-height: 300px;}
.videoWrapperBx iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*--- Brochure Issuue Embed ----------------------------------------*/
.issuuembed {width: 100%; height: 600px;}

/*--- Modal Box ----------------------------------------------------*/
/* Outer */
.popup {width: 100%; height: 100%; display: none; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 100000; background: rgba(0,0,0,0.6);}
/* Inner */
.popup-inner {box-sizing: border-box; /*max-width: 400px;*/ width: 50%; /*max-height: 600px;*/ height: 90%; padding: 40px 20px 40px 20px; position: absolute; top: 50%; left: 50%; z-index: 100010; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: auto; background: #fff;}
/*.animate-top {-webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s}
.animate-bottom {-webkit-animation-name: animatebottom; -webkit-animation-duration: 0.4s; animation-name: animatebottom; animation-duration: 0.4s}*/
/* Close Button */
.popup-close {box-sizing: border-box; width: 40px; height: 40px; padding-top: 4px; display: inline-block; position: absolute; top: 0px; right: 0px; z-index: 100000; transition: ease 0.25s all; background: rgba(255,255,255,1); font-size: 30px; font-weight: 300; text-align: center; line-height: 100%; color: #292929; text-decoration: none;}
.popup-close:hover {background:rgba(0,0,0,1);}

/* Add Animations */
/*@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
@-webkit-keyframes animatebottom {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}
@keyframes animatebottom {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}*/

.popup-contact-info {}
.popup-contact-info .title {border-bottom: solid 1px #ff0000; margin-bottom: 20px;}
.popup-contact-info .title h2 {margin-top: 0px !important;}
.popup-contact-info .title p {margin-top: 0px !important;}
.popup-contact-info .box-group {display: flex; border-bottom: solid 1px #ff0000; margin-bottom: 20px;}
.popup-contact-info .box {box-sizing: border-box; width: 200px; border: solid 1px #cccccc; padding: 20px; margin: 0px 20px 20px 0px;}
.popup-contact-info .box:last-child {margin: 0px 0px 20px 0px;}
.popup-contact-info .break-word {word-wrap: break-word;}

.popup-contact-form {}
.popup-contact-form textarea {width: 100%;}
.popup-contact-form label {display: inline-block; border: solid 1px #ff0000;}
.popup-contact-form select, .popup-contact-form input {width: 100%; margin-bottom: 20px;}

.popup-contact-flex {display: flex; justify-content: space-between;}
.popup-contact-column {flex: 1; margin-right: 20px; border: solid 1px #ff0000;}
.popup-contact-column:last-child {margin-right: 0px;}
.popup-contact-submit {text-align: center; border: solid 1px #ff0000; padding: 20px 0px 20px 0px;}











/*==================================================================*/
/*   Contact Us                                                     */
/*==================================================================*/
.contact-info {width: 100%; padding: 20px 0px 20px 0px; text-align: center; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.contact-info .box {border-radius: 3px; border: solid 1px rgba(132,147,158,0.3); margin: 0px auto 0px auto; padding: 20px;}

.contact-phone {min-height: 400px; margin-bottom: 0px !important; padding: 10px 20px 10px 20px; box-sizing: border-box; text-align: left; background-color: #0e6b94; color: #ffffff;}
.contact-phone h3 {margin: 20px 0px 0px 0px;}
.contact-phone h3 svg {width: 18px; height: 18px; fill: rgba(225,225,225,0.5); position: relative; top: 1px; margin-right: 2px;}
.contact-phone p {margin: 5px 0px 10px 0px;}
.contact-phone a, .contact-phone a:hover {color: #ffffff; text-decoration: none;}

.contact-map {height: 400px; margin-bottom: 0px !important;}

.contact-form h3 {}

.contact-form label {display: inline-block; padding: 10px 10px 10px 0px; font-weight: 300;}
.contact-form div.shift-label label {position: absolute; bottom: 100000px; left: 0px;}

.contact-form div.field {display: block; width: 33.3%; margin: 0px; padding: 0px 5px 10px 5px; float: left; box-sizing: border-box; text-align: left;}
.contact-form div.fieldx2 {display: block; width: 66.6%; margin: 0px; padding: 0px 5px 10px 5px; float: left; box-sizing: border-box; text-align: left;}
.contact-form div.fieldx3 {display: block; width: 100%; margin: 0px; padding: 0px 5px 10px 5px; float: left; box-sizing: border-box; text-align: left;}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {width: 100%;}
.contact-form select {width: 50%;}
.contact-form textarea {width: 100%; height: 200px; box-sizing: border-box;}
.contact-form input[type="submit"] {background-color: #cc0000; border: none; color: #ffffff; width: 100%; box-sizing: border-box; transition: all .3s ease;}
.contact-form input[type="submit"]:hover {background-color: #343f48;}

/*==================================================================*/
/*   Speak to an Expert                                             */
/*==================================================================*/
.expert {background: linear-gradient(rgba(8, 61, 84, 0.8), rgba(8, 61, 84, 0.8)), url("/images/test/stock-photo-blue-sea-blue-sky-horizon-282303773.jpg") center 75% no-repeat #292929 !important; background-size: cover !important; color: #ffffff; padding: 50px 0px 60px 0px;}

.expert-title {}
.expert-wrap {display: flex;}
.expert-box {flex: 1; box-sizing: border-box; margin-bottom: 0px; padding: 15px 20px 15px 110px; background-color: rgba(0,0,0,0.3); position: relative;}

.expert h2 {font-size: 2.4rem;/* 24 / 16 = 1.25 */ text-transform: uppercase; text-align: center; color: #ffffff; font-weight: 600; margin: 0px;}
.expert h3 {font-size: 1.4rem;/* 14 / 16 = 0.875 */ font-weight: 600; text-transform: uppercase; text-align: left; color: rgba(255,255,255,0.6); margin: 0px;}
.expert p {font-size: 2.4rem;/* 24 / 16 = 1.5 */ margin: 0px;}

.expert svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 40px;}
.expert svg path, .expert svg circle {fill: #ffffff;}

/*--- For devices who auto change phone numbers to links -----------*/
.expert a, .expert a:visited, .expert a:hover, .expert a:active {color: #ffffff; text-decoration: none;}









@media only screen and (min-width: 960px) and (max-width: 1199px) {

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content_narrow {max-width: 60vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}

}

@media only screen and (min-width: 720px) and (max-width: 959px) {

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content, .flex-modal-scrollable__content_narrow {max-width: 90vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}


/*--- Contact Us --------------------------------------------------*/
.contact-form div.field {width: 100%;}
.contact-form div.fieldx2 {width: 100%;}
.contact-form div.fieldx3 {width: 100%;}

.contact-form select {width: 100%;}
.contact-form textarea {width: 100%; height: 200px;}
.contact-form input[type="submit"] {margin-top: 0px;}


}





@media only screen and (max-width: 719px) {

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content, .flex-modal-scrollable__content_narrow {max-width: 90vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}



/*--- Contact Us --------------------------------------------------*/
.contact-form div.field {width: 100%;}
.contact-form div.fieldx2 {width: 100%;}
.contact-form div.fieldx3 {width: 100%;}

.contact-form select {width: 100%;}
.contact-form textarea {width: 100%; height: 200px;}
.contact-form input[type="submit"] {margin-top: 20px;}

/*--- Speak to an Expert -------------------------------------------*/
.expert .grid-4 {padding: 0px 0px 20px 0px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.expert .grid-4:first-child {padding: 0px 0px 20px 0px;}
.expert .grid-4:nth-last-child(2) {border-bottom: none; padding: 0px 0px 0px 0px;}
.expert h2 {border-bottom: 0px; padding-bottom: 0px;}

}


.enquiry-form div.fieldright.submit-enquiry-button { width : auto;}
@media only screen and (max-width: 719px){
	.enquiry-form 
	.submit-enquiry-button input[type="submit"]{
	font-size : .75rem;
		padding: 10px 20px 10px 20px;
	}
}




@media only screen and (max-width: 354px) {

.modal-expert-box p {font-size: 2.0rem;}
.modal-enquiry-title p {font-size: 2.0rem;}
.modal-enquiry-wrap .field-w-titlename select {flex: none; margin: 0px 0px 20px 0px; display: block;}
.modal-enquiry-wrap .field-w-titlename input {flex: none; display: block;}
}