/*Appointment Request Form*/
.styled-form { margin: 30px auto; font-size: 16px; }

.styled-form [class^="btn"] { margin-left: 0; }

.styled-form .drei { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; }

.styled-form .drei + .drei { margin-top: 5px; }

.styled-form .input-content, .styled-form .inline { width: calc(100% / 3 - 5px); min-height: 60px; }

.styled-form .inline, .input-content { background-color: #545454; }

.input__label-content strong, .input__label-content strong a { color: #fff; }

.input-content, .styled-form .inline label, .styled-form .inline, .input--filled .input__label .input__label-content strong, .input--filled .input__label .input__label-content a { color: #fff !important; }

.styled-form .drei:first-of-type { line-height: 1 !important; }

.styled-form .inline { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px 16px; }

.styled-form .inline span input { margin-right: 4px; }

.styled-form .inline span { display: block; line-height: 1.4; }

.styled-form .hear { margin: 5px 0; }

.styled-form .hear label { display: inline-block; margin-right: 8px; }

.styled-form .inline.wide { width: calc(100% / 1.5 - 3px); }

.input-content { position: relative; z-index: 1; overflow: hidden; }

.input__field { -webkit-appearance: none; position: absolute; z-index: 2; display: block; float: right; border: none; border-radius: 0; padding: 0 14px; margin-top: 1.2em; height: 40px; width: 100%; background: transparent; color: #fff; }

.input__field { outline: none; }

.styled-form *:focus { outline-color: #22898c; outline-style: ridge; outline-width: thin; }

.input__label { display: inline-block; padding: 0; width: 100%; background: transparent; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.input__label::before { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid transparent; -webkit-transition: border-width 0.3s, border-color 0.3s; transition: border-width 0.3s, border-color 0.3s; }

.input__label-content { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 100%; padding: 1.1em 1em; text-rendering: geometricPrecision; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s, color 0.3s; -webkit-transition: color 0.3s, -webkit-transform 0.3s; transition: color 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s, -webkit-transform 0.3s; }

.input__label-content strong { float: right; font-weight: 300; }

.input__field + .input__label::before, .input--filled .input__label::before { border-width: .2em 0 0; border-color: #22898c; border-top-width: 1.5em; }

.input__field + .input__label .input__label-content, .input--filled .input__label .input__label-content { color: #fff; font-size: 16px; padding: .85em .5em; -webkit-transform: translate3d(0, -0.65em, 0); transform: translate3d(0, -0.65em, 0); }

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: transparent !important; }

.styled-form .inline textarea { padding: 5px; display: block; width: 100%; height: 80px; font-size: 16px; margin-top: 5px; }

.styled-form .inline textarea { color: #000; padding: 5px; display: block; width: 100%; height: 120px; font-size: 16px; margin-top: 5px; }

.styled-form .inline.wide { width: calc(100% / 1.5 - 3px); }

@media (max-width: 800px) { .styled-form .input-content, .styled-form .inline { width: 100%; display: block; border-bottom: 1px solid rgba(206, 206, 206, 0.22); }
  .styled-form .input-content + .input-content { margin-top: 5px; }
  .styled-form .inline.wide { width: 100%; margin-top: 5px; } }

.styled-form select { color: #000; border: 1px solid #545454; padding: 5px; }

.options label { display: block; margin-bottom: 5px; }

.options [type=checkbox], .options [type=radio] { -webkit-appearance: none; position: relative; background-color: #fff; padding: 9px; border-radius: 3px; vertical-align: middle; }

.options [type=radio] { border-radius: 50%; }

.options [type=checkbox]:active, .options [type=checkbox]:checked:active, .options [type=checkbox]:checked, .options [type=radio]:active, .options [type=radio]:checked:active, .options [type=radio]:checked { background-color: #fff; }

.options [type=checkbox]:checked:after, .options [type=radio]:checked:after { font-family: fontello; content: '\e832'; font-size: 13px; position: absolute; top: 2px; left: 2px; color: #22898c; }

.options [type=radio]:checked:after { content: ''; width: 14px; height: 14px; background-color: #22898c; border-radius: 50%; }



.off {pointer-events: none;}

.service-icons {display: flex; justify-content: center; text-align: center; flex-wrap: wrap; margin: 20px auto; 
    h3 {margin: 5px auto; font-size: 22px; line-height: 1.1;}
    > * {padding: 5px; flex:0 1 180px; margin: 10px auto;display: block;}
  a { color: $text;text-decoration: none;
    &:hover {
        .icon .ic-color {fill: $primary;} 
      h3 {color: $primary;}
    }
  }
}

.ic-color {fill: $secondary}
.sv-icon {height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.has-h3 {clear: both; display: table; width: 100%; margin: 20px auto; text-align: left;}
.has-h3 h3 {margin: 0 auto 10px;text-align: left;}
@media (max-width: 750px) {
 .has-h3, .has-h3 h3 {text-align: center;}
}
.service-icons > a { margin: 0 24px; }

/*==================== Modal ================*/

#lean_overlay {padding: 10px; position: fixed; z-index:1100; top: 0; left: 0; height:100%; width:100%; background: rgba(0,0,0,.9); display: none; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center; overflow: scroll; }




.modal-content { display: none; -webkit-box-flex: 0;-ms-flex: 0 1 97%;flex: 0 1 97%;border-radius: 8px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  max-width: 1000px;-webkit-box-sizing: border-box; box-sizing: border-box; position: relative;text-align: center;  width: 93%;  max-height: calc(100vh - 80px); overflow: auto;
  
          h3 {text-align: center;font-size: 26px;margin: 15px 0 10px}
        .has_btns {display: flex; justify-content: center; flex-wrap: wrap;}
        .btn {margin: 5px; min-width: 430px;}

  
    .buttons {display: flex;flex-wrap: wrap;justify-content: center;}
    .buttons > p {margin: 5px}

    }

    .modal-close { position: absolute; right:0; top:0; margin: 5px; z-index:1002; cursor:pointer;  color: $secondary; line-height: 1;
        span {display: none;}
        i { position: relative; color:$secondary; font-style: normal; padding-bottom: 4px;
            &:before { font-size: 40px;content: '\00d7'}
        }
         &:hover i {color: #555; }
    }


    .modal-content .has_btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
    .modal-content .btn{margin:5px;min-width:350px}

.modal-content { padding: 30px; }


#index-faq {
margin: 8rem auto;
text-align: center;
max-width: 1200px;
}


@media (max-width:500px){
.v-card > div {
  margin: auto;
  align-content: center;
}
.v-card.flex-row {
  display: grid;
  justify-content: center;
}}


/*MODAL CSS*/
#trigger { display: table; position: relative; }
body.modal-open { overflow: hidden; }
.modal-contain { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; }
.scotch-overlay { position: fixed; z-index: 9998; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); -webkit-transition: 1ms opacity ease; transition: 1ms opacity ease; }
.scotch-modal.scotch-open.scotch-anchored { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.scotch-modal { position: fixed; z-index: 9999; opacity: 0; top: 100%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 94%; padding: 24px 20px; border-radius: 2px; background: #fff; -webkit-transition: 1ms opacity ease; transition: 1ms opacity ease; text-align: left; }
.scotch-modal.scotch-open { opacity: 1; }
.scotch-overlay.scotch-open { opacity: 1; }
.scotch-close { font: 400 24px/1 'Roboto', Arial, san-serif; position: absolute; top: 5px; right: 5px; padding: 5px 7px; cursor: pointer; color: #fff; border: 0; outline: none; background: #e74c3c; }
.scotch-close:hover { background: #c0392b; }
.scotch-overlay.fade-and-drop { display: block; opacity: 0; }
.scotch-modal.fade-and-drop { top: -300%; opacity: 1; display: block; }
.scotch-modal.fade-and-drop.scotch-open { top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.scotch-modal.fade-and-drop.scotch-open.scotch-anchored { -webkit-transition: 250ms top 250ms ease; transition: 250ms top 250ms ease; }
.scotch-overlay.fade-and-drop.scotch-open { top: 0; -webkit-transition: 250ms opacity ease; transition: 250ms opacity ease; opacity: 1; }
.scotch-modal.fade-and-drop { -webkit-transition: 250ms top ease; transition: 250ms top ease; }
.scotch-overlay.fade-and-drop { -webkit-transition: 250ms opacity 250ms ease; transition: 250ms opacity 250ms ease; }
#modal-box { display: none; }
.vid { width: 100%; max-width: 400px }
.vid iframe { max-width: 100% }
.covid-19 { background-color: #e33939; text-align: center; padding: 7px; margin-bottom: 10px; }
.covid-19 a { text-transform: uppercase; color: #fff; font-weight: bold; }
.covid-19 a:hover { text-decoration: underline; }
.gallery .side-by-side { display: block !important; }
.gallery.letters { display: block !important; }
.letters .arrow { position: static; font-size: 30px; }
.letters .pager span { border-color: #178240; }
.letters .pager span.cycle-pager-active { background-color: #178240; }
.letters .cycle-slide { box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); padding: 20px; }
.letters .author { display: block; text-align: right; font-size: 18px; }
.letters .controls { display: block; }
.letters .controls:before { content: none !important; }

/* Modal Video */
.elem-left.video-modal.agd { margin-bottom: 108px !important }
.video-modal .content { position: relative; display: table; margin: auto; }
.video-modal .assoc-below { margin-top: 3px; padding: 5px; background-color: #000; bottom: -87px; left: 0; right: 0; }
.open-modal { position: absolute; display: block; bottom: 20px; right: 0; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); color: #fff; font-size: 50px; line-height: 1.5; z-index: 10; }
body.modal-opened { overflow: hidden }
.modal, .modal.open:after { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.modal.open:after { background-color: rgba(0, 0, 0, 0.8); z-index: -1; content: ""; display: block; }
.modal { max-height: 100% !important; max-width: 100% !important; z-index: 600; display: none; padding: 10px; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center }
.modal.open { -js-display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.modal .figure { width: 600px; max-width: 100%; text-align: center; margin-top: 50px; }
.modal .btn.close { display: table; margin: 20px auto; }

/*Meet The Team Modals*/
.page_meet-our-team a.open-modal { left: 0 !important; right: -190px; }

/* Closed Modal */
.close-modal.active { display: block; }
.close-modal { display: none; background-color: #2c76bc; box-shadow: -2.6px 1.5px 21px rgba(2, 2, 2, 0.7); max-width: 596px; width: 100%; position: fixed; top: 300px; right: 50%; transform: translateX(50%); -ms-transform: translateX(50%); z-index: 700; text-align: center; color: #fff; font-family: Lato; padding: 20px 10px; background-image: url(assets/images/modal-bkg.png); background-repeat: no-repeat; background-position: center; }
.close-modal:after { content: ''; pointer-events: none; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px solid rgba(255, 255, 255, .4); position: absolute; }
.close-modal strong { font-size: 50px; font-weight: 700; display: block; }
.close-modal span { font-size: 36px; font-weight: 300; font-style: italic; display: block; }
.close-modal p { font-size: 18px; font-weight: 300; max-width: 520px; margin: 10px auto; }
.close-modal-btn { position: absolute; right: 2%; top: 4%; }
body.modal-open { overflow: hidden; }
body.modal-open:after { content: ''; z-index: 650; position: absolute; width: 500%; height: 500%; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); }
@media (max-width:860px) {
  .close-modal { top: 50px; }
}

/*  Video Embed  */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-initial { display: block; margin: auto; max-height: 315px; max-width: 560px; }


#tour-gallery {
  margin: 40px auto;
  display: flex;
  gap: 40px 70px;
  flex-wrap: wrap;
  justify-content: center;
}
#tour-gallery img {
  margin: 0;
}
