@font-face{font-family:Rubik;src:url(../fonts/Rubik-Regular.woff);font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-Bold.woff);font-weight:bold;font-display:swap}
html,body{font-size: calc(.8856vw + 3px);direction: rtl;font-family: Rubik, sans-serif;background: #fff;}
#login{height: 80vh;}
.formbox{margin-top: 3rem;background-color: #F7F7F9;box-shadow: 0px 3px 6px #00000029;border-radius: 2rem;padding: 2rem;position: relative;}
#login-form .submit_button{background-color: #39B54A;border-color: #39B54A;font-weight: bold;padding: .5rem 3rem;position: absolute;right: 50%;transform: translateX(50%);bottom: -3.5rem;}
.formbox div{position: relative;margin-bottom: 2rem;}
.formbox label{position: absolute;right: .75rem;bottom: 50%;transform: translateY(50%);margin: 0;}
.formbox label.top{bottom: 135%;}
.navbar{background: url(../images/header.png)  no-repeat;justify-content: center;background-size: 100%;}
.custom-logo{width: 16rem;}
#page-content header{background: url(../images/header.png)  no-repeat;background-size: cover;color: #fff;padding-right: 6rem;padding-bottom: 8rem;background-position-y: -8em;position: relative;z-index: 3;}
#page-content header .img{position: absolute;left: 0;bottom: 50%;transform: translateY(50%);width: 42vw;}
h1{display: flex;font-size: 5rem;color: #39B54A;font-weight: bold;line-height: .9;}
h1 small{font-size: 60%;margin: 1.75rem .75rem 0 0;}
#page-content header h2{font-size: 2.4rem;margin-bottom: 3rem;}
.type{font-size: 1.2rem;}
#page-content main{background: url(../images/main.png)  no-repeat;background-size: cover;color: #fff;padding-bottom: 8rem;background-position-y: -19em;padding-top: 10rem;margin-top: -10rem;text-align: center;z-index: 2;position: relative;}
#page-content main h2,#page-content main h3{font-size: 2rem;margin-bottom: 2rem;}
.treatments{display: flex;width: 80vw;margin: auto;justify-content: space-between;margin-bottom: 5rem;flex-wrap: wrap;}
.treatment img{width: 5rem;}
.treatment{display: flex;flex-direction: column;}
.treatment .icon{height: 6rem;margin-bottom: 2rem;}
.video-line{display: flex;justify-content: center;}
.video-line .right img, .video-line .left img{width: 34vw;}
.video-line .left{margin-right: -2vw;display: flex;flex-direction: column;justify-content: flex-end;}
.video-line .left img{margin-top: 7vw;}
.other{font-size: 1.5rem;color: #7C2B83;text-align: right;margin: 1rem;}
.other a{color: #fff;background: #6c0075;padding: .25rem 1rem;margin: .25rem;}
.other a:hover{text-decoration: none;color: #fff;opacity: .8;}
#page-content footer{background: #E4E3E67A;padding-top: 10em;margin-top: -11em;}
footer .icon img{width: 9rem;}
footer .icon{margin-bottom: 1rem;}
.instructions, .diaries{display: flex;justify-content: space-between;text-align: center;width: 60vw;margin: 0 auto 3rem;}
.instruction a, .diary a{color: #000;line-height: 1.2;}
footer h3{color: #7C2B83;font-weight: bold;text-align: center;font-size: 2rem;margin-bottom: 2rem;}
.leaflet{padding: 2rem 0 3rem;text-align: center;background: #fff;}
.leaflet a{background: #39B54A;color: #fff;padding: .5rem;border-radius: .5rem;}
.leaflet a:hover{background: #6c0075;color: #fff;text-decoration: none;}
.page-template-homepage .site-footer{padding: 0;}
.modal .video{display: none;}
.modal .video.active{display: block;}
#video-modal .modal-dialog{min-height: auto;width: 60vw;max-width: 100%;}
#video-modal .modal-dialog .wp-video{width: 60vw!important;max-width: 100%;}
#video-modal .close{position: absolute;z-index: 99;}
#login h1{display: block;text-align: center;margin-top: 3rem;}
.tos{text-align: center;}
.tos a{margin: .25rem;}
.legal{text-align: right;font-size: .8rem;}
.ft{font-size: .8rem;direction: ltr;text-align: center;}
.ft img{width:auto;height: 1rem;vertical-align: sub;}
@media(max-width: 1000px){
    .navbar{background-size: auto;}
    html,body{font-size: 4.4vw;}
    .custom-logo{width: 9rem;}
    #page-content header{padding-right: 2rem;display: flex;flex-direction: column;background-position-y: 0;padding-top: 1rem;}
    h1{font-size: 2rem;order: 0;}
    h1 small{margin-top: .65rem;}
    #page-content header h2{font-size: 1.4rem;order: 1;margin-bottom: 1rem;}
    #page-content header .img{position: relative;bottom: auto;transform: none;order: 2;width: 80vw;margin: 0 auto 2rem 0;}
    .types{order: 3;}
    .treatments{width: 90vw;margin-bottom: 1rem;}
    .treatment{flex: 0 0 50%;margin-bottom: 1rem;}
    .treatment .icon{margin-bottom: .5rem;height: 5rem;}
    .treatment .icon img{width: 4rem;}
    .instructions, .diaries{width: 90vw}
    .leaflet a{display: inline-block;width: 90vw;}
    footer h3{font-size: 1.5rem;}
    #page-content main h2, #page-content main h3{font-size: 1.5rem;margin-bottom: 2.5rem;}
    #page-content main{padding-top: 6rem;background-position-y: -6rem;}
    .video-line .right img, .video-line .left img{width: 70vw;}
    .video-line{flex-direction: column;}
    .other{display: flex;flex-direction: column;align-items: center;}
    .video-line .left{margin-right: 0;align-items: center;}
    footer .icon img{width: 6rem;}
    #video-modal .modal-dialog{width: 90vw;margin: auto;}
    #video-modal .modal-dialog .wp-video{width: 90vw!important;max-width: 100%;}
    .ft br{display:none;}
}