﻿
#contact-form { max-width: 700px; }
#contact-form-title { width: 100%; color: #F68B1F; font-size: 35px; padding: 10px; }
#contact-form textarea { width: 100%; margin-top: 10px; height: 245px; }
#lobby { margin-bottom: 15px; }
#lobby #body { max-width: 800px; margin: 40px auto 0; text-align: center; }
#lobby #body p { color: #231f20; font-size: 85%; }
#ContactButton { color: #ffffff; text-decoration: none; font-size: 130%; display: inline-block; background-color: #F68B1F; border-radius: 5px; padding: 10px 30px 6px 30px; float: left; }
section { padding-bottom: 108px; }
.has-scrollbar { padding-bottom: 0; }

.treatmentsWrapper { max-width: 1170px; margin: 0 auto; text-align: center; }
.treatmensImgOuter { margin: 0 -15px; }
.treatmentBox { position: relative; padding: 0 16px; }
.treatmentItemImg { position: relative; }
.treatmentItemImg img { width: 100%; }


.treatmentItemTitle { position: absolute; bottom: 32px; right: 50%; color: #fff; white-space: nowrap; z-index: 1; transform: translateX(50%); -webkit-transform: translateX(50%); -ms-transform: translateX(50%); }
.treatmentItemTitle h3 { font-size: 200%; font-family: 'almoni-tzar-aaa-400'; font-weight: bold; }

/*Inner Treatment Page*/
.innerTreatmentBody #lobby { margin-bottom: 0; padding-bottom: 20px; }
.innerTreatmentBody .innerTreatmentWrapper { padding-top: 60px; }
.innerTreatmentBody p { font-size: 80%; line-height: 1.2; color: #231f20; }
.innerTreatmentBody .innerTreatmentContent { max-width: 1054px; height: 127px; position: relative; overflow: hidden; margin: 0 auto; }
.innerTreatmentBody .innerTreatmentContent:after { content: ''; position: absolute; width: 100%; height: 80px; bottom: 0; right: 50%; opacity: 1; transform: translateX(50%); -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(255,255,255,0.8)), color-stop(100%, rgba(0,0,0,0)), to(rgba(255,255,255,1))); background: -o-linear-gradient(bottom, rgba(255,255,255,0.8) 30%, rgba(0,0,0,0) 100%, rgba(255,255,255,1) 100%); background: linear-gradient(0deg, rgba(255,255,255,0.8) 30%, rgba(0,0,0,0) 100%, rgba(255,255,255,1) 100%); }
.innerTreatmentBody .innerTreatmentContent.toggled:after { opacity: 0; }
.innerTreatmentBody button.generalBtn.readMoreBtn { width: 290px; background: none; border: 1px solid #231f20; color: #000; margin: 5px auto 0; font-size: 90%; letter-spacing: 0.72px; }
.innerTreatmentBody button.generalBtn.readMoreBtn:hover, .innerTreatmentBody button.generalBtn.readMoreBtn:focus { background: none; }

@media (min-width: 1025px) {
    .treatmentBox { width: 33%; }

    .innerTreatmentBody .innerTreatmentContent { text-align: right; }
    .innerTreatmentTextBox { display: inline-block; max-width: 390px; vertical-align: top; }
    .innerTreatmentTextBox:first-child { margin-left: 166px; }
}

@media(min-width: 991px) {
    #SiteFooterContainer { background-color: #f2f3f6; }
}

@media(min-width: 768px) {
    .treatmentBox { display: inline-block; }
    .treatmentItemImg:before { content: ''; position: absolute; width: 100%; height: 80px; bottom: 8px; right: 50%; transform: translate(50%); -webkit-transform: translate(50%); -ms-transform: translate(50%); pointer-events: none; z-index: 1; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(255, 255, 255, 0))); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0)) }
    .treatmentItemImg:after { content: ''; position: absolute; width: 100%; height: 8px; bottom: 0; right: 50%; transform: translate(50%); -webkit-transform: translate(50%); -ms-transform: translate(50%); background-image: -webkit-gradient(linear, right top, left top, from(#f1d7a0), to(#e2b86e)); background-image: -o-linear-gradient(right, #f1d7a0, #e2b86e); background-image: linear-gradient(to left, #f1d7a0, #e2b86e); }
}

@media(min-width: 767px) {
    .treatmentBox a:hover img, .treatmentBox a:focus img { transform: scale(1.02); -webkit-transform: scale(1.02); }
    .treatmentItemImg { padding-bottom: 147%; overflow: hidden; }
    .treatmentItemImg img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all 650ms ease-in-out; -webkit-transition: all 650ms ease-in-out; }
}

@media(max-width: 1170px) {
    .treatmentsWrapper { max-width: 90%; }
}

@media (max-width: 1024px) {
    section { padding-bottom: 50px; }
}

@media(max-width: 990px) {

    #PageBreadCrumps { display: none; }
    #lobby { margin-bottom: 30px; }
    #lobby #body { max-width: 600px; }

    .treatmentsWrapper { padding-bottom: 135px; }
    .treatmensImgOuter { margin: 0; }
    .treatmentBox { padding: 0 8px; }
    .treatmentItemImg:before { bottom: 4px; }
    .treatmentItemImg:after { height: 4px; }
    .treatmentItemTitle { bottom: 20px; }
    .treatmentItemTitle h3 { font-size: 150%; line-height: 1; }

    #SiteGrid { background-image: -webkit-gradient(linear, left bottom, left top, from(#f2f3f6), to(#f7f7f7)); background-image: -o-linear-gradient(bottom, #f2f3f6, #f7f7f7); background-image: linear-gradient(to top, #f2f3f6, #f7f7f7); }

    #SiteFooter .footerContact { padding-bottom: 38px; }

    /*Inner Treatment page*/
    .innerTreatmentBody #headline { max-width: 380px; margin: 0 auto; }
    .innerTreatmentBody #headline h1 { font-size: 250%; line-height: 1; }
    .innerTreatmentBannerBox img { height: 175px; width: auto; }
    .innerTreatmentBody .innerTreatmentWrapper { padding-top: 40px; }
    .innerTreatmentBody .innerTreatmentContent:after { background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(243,244,246,0.8)), color-stop(100%, rgba(0,0,0,0)), to(rgba(243,244,246,1))); background: -o-linear-gradient(bottom, rgba(243,244,246,0.8) 30%, rgba(0,0,0,0) 100%, rgba(243,244,246,1) 100%); background: linear-gradient(0deg, rgba(243,244,246,0.8) 30%, rgba(0,0,0,0) 100%, rgba(243,244,246,1) 100%); }
    .innerTreatmentBody button.generalBtn.readMoreBtn { margin-top: 25px; }
}

@media(min-width: 768px) and (max-width: 1024px) {
    .treatmentBox { width: 28%; }
}

@media(min-width: 768px) and (max-width: 990px) {
    .treatmentsWrapper { max-width: 100%; }
    .treatmentsWrapper.innerTreatmentMain { padding: 0 40px 125px; }
}

@media (max-width: 767px) {
    #PageBreadCrumps { display: none; }
    #lobby { margin-bottom: 5px; }
    #lobby #body { width: 90%; margin-top: 20px; }

    .treatmentsWrapper { padding-bottom: 70px; }
    .treatmentBox { padding: 0; margin-bottom: 25px; }
    .treatmentBox:last-child { margin-bottom: 0; }
    .treatmentItemTitle { bottom: 50%; right: auto; transform: translate(50%, 50%); -webkit-transform: translateY(50%); -ms-transform: translate(50%, 50%); left: 0; width: 50%; white-space: normal; padding: 0 15px; }

    /*Inner Treatment Page*/
    .innerTreatmentBody #lobby { padding-bottom: 30px; }
    .innerTreatmentBody #headline h1 { font-size: 230%; }
    .innerTreatmentBody .innerTreatmentContent { text-align: right; }
    .innerTreatmentBody .GridWrapper { padding: 0; width: 100%; }
}


#PageView #PageBreadCrumps { margin-top: 0; padding-top: 30px; }
#PageView #lobby { height: 350px; background-color: #f2f3f6; margin: 0; padding: 0; }
#PageView .grid-text { max-width: unset; position: relative; margin: -85px auto 60px auto; background: #fff; min-height: 100px; }
#PageView #subheadline { padding-top: 0; }
#PageView .grid-text { padding: 70px 160px; }
#PageView .grid-text .grid-text-content h2 { font-size: 200%; font-weight: 500; text-transform: uppercase; position: relative; margin-bottom: 30px; }
#PageView .grid-text .grid-text-content h2:after { content: ""; position: absolute; bottom: -10px; left: 0; width: 80px; height: 8px; background: linear-gradient(-45deg, #f1d7a0, #e2b86e, #f1d7a0, #e2b86e); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; }
#PageView .grid-text .grid-text-content p { font-size: 70%; color: #231f20; text-shadow: 0 0 0 #bcbcbc; line-height: 1.65; }

@media (max-width: 1024px) {
    #PageView #lobby { height: 325px; }
    #PageView #subheadline { padding-top: 25px; }
    #PageView .grid-text { padding: 50px 100px; }
}

@media (max-width: 767px) {
    #PageView #lobby { height: 275px; }
    #PageView .grid-text { padding: 30px; }
    #PageView .grid-text .grid-text-content h2 { font-size: 7vw; }
    #PageView #subheadline { padding-top: 50px; }
    #lobby #body p { line-height: 1.5; }
    #headline h1 { font-size: 250%; }
}
