html { overflow-y: scroll; } body { position: absolute; } .main-unregistered { flex-direction: column; background-color: #fffdf9; color: #3f3f3f; width: 100%; } .main-unregistered .intro { display: flex; flex-direction: row; justify-content: center; width: 100%; } .main-unregistered .menu { position: fixed; justify-content: center; top: 0; width: 39.313vw; height: 3.544vw; background-color: #deeaec; border-radius: 1.636vw; border: 0.109vw solid; border-color: #97b8a5; display: flex; justify-content: space-around; align-items: center; z-index: 1000; } .main-unregistered .text-menu { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 600; font-size: 1.091vw; background-color: #deeaec; border: none; transition: border 0.1s ease-in; } .main-unregistered .text-menu:hover{ border: 0.2vw solid #97b8a5; border-radius: 1.636vw; } .main-unregistered .heads-intro { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; text-align: center; top: 5.453vw; align-items: center; } .main-unregistered .text-head { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 5.016vw; } .main-unregistered .text-subhead { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.017vw; } .main-unregistered .image-intro-pets { display: block; margin-top: 3.272vw; width: 23.501vw; height: 18.92vw; } .main-unregistered .miniinfo { margin-top: 19.502vw; width: 100%; display: flex; justify-content: center; } .main-unregistered .subminiinfo { display: flex; justify-content: center; align-items: center; width: 68.43vw; } .main-unregistered .text-miniinfo-head { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.617vw; margin-left: 4.089vw; } .main-unregistered .text-miniinfo-subhead { font-family: "Abhaya Libre Medium-Regular", Helvetica; font-weight: 500; font-size: 1.745vw; width: 41.712vw; margin-left: 4.089vw; } .main-unregistered .miniinfo-img { width: 22.465vw; height: 33.751vw; } .main-unregistered .services { width: 100%; height: 50.436vw; margin-top: 9.051vw; background-color: #97b8a5; flex-direction: column; margin-left: -0.5vw; } .main-unregistered .subservices { display: flex; justify-content: space-around; margin-top: 3.162vw; } .main-unregistered .services-part { align-items: end; display: grid; justify-content: center; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .main-unregistered .services-part:hover{ color: #fffdf9; background-color: #FFD87E; } .main-unregistered .text-services-head { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.617vw; padding-top: 4.798vw; text-align: center; color: #fffdf9; margin-bottom: 0.763vw; } .main-unregistered .for-services-img { justify-content: center; width: 100%; display: grid; align-items: center; margin-top: 1.927vw; } .main-unregistered .services-img { width: 4.471vw; height: 4.471vh; justify-content: center; align-items: center; display: flex; } .main-unregistered .text-services { text-align: center; font-family: "Abhaya Libre Medium-Regular", Helvetica; font-weight: 500; font-size: 1.527vw; margin-top: 4.635vw; margin-bottom: 1.254vw; width: 12.865vw; height: 3.125vw; text-align: center; } .main-unregistered .services-part { background-color: #fffdf9; width: 14.395vw; height: 15.812vw; } .main-unregistered .doctors { width: 100%; justify-content: center; align-items: center; flex-direction: column; display: flex; padding-top: 3.907vw; } .main-unregistered .doctors-head { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.617vw; text-align: center; color: #3f3f3f; margin-bottom: 2.453vw; } .main-unregistered .pets { width: 100%; height: 50.436vw; background-color: #FFE4DD; margin-top: 4.744vw; margin-left: -0.5vw; } .main-unregistered .pets-head { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.617vw; padding-top: 3.599vw; text-align: center; color: #fffdf9; margin-bottom: 5.889vw; text-shadow: 0 0 1px #3f3f3f, 0 0 1px #3f3f3f, 0 0 1px #3f3f3f; } .main-unregistered .subpets { display: flex; justify-content: space-between; } .main-unregistered .pets-part-background { width: 33.697vw; height: 28.353vw; background-color: #FFFDF9; margin-right: 1.472vw; align-items: center; justify-content: center; display: flex; position: relative; } .main-unregistered .pets-parts-text { width: 29.171vw; height: 16.303vw; font-size: 1.745vw; text-align: center; font-family: "Abhaya Libre Medium-Regular", Helvetica; position: absolute; top: 50%; transform: translate(0, -50%); } .main-unregistered .podval { width: 100%; height: 22.028vw; margin-top: 2.963vw; } .main-unregistered .podval-str1, .podval-str2 { justify-content: space-between; display: flex; } .main-unregistered .podval-str2 { margin-top: 3.708vw; } .main-unregistered .podval-text-col2 { text-align: right; font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-size: 2.617vw; margin-right: 2.181vw; } .main-unregistered .podval-text-col1 { text-align: right; font-family: "Commissioner-SemiBold", Helvetica; font-weight: 500; font-size: 2.617vw; margin-left: 2.181vw; } .link { text-decoration: none; color: #3f3f3f; } .registration_form .button-back { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 1.5vw; background-color: #DEEAEC; color: #3f3f3f; height: 4vw; width: 9vw; border: 2px solid #97B8A5; border-radius: 30px; text-align: center; margin-top: 1vw; margin-left: 2vw; vertical-align: middle; } .registration_form .button-back-p { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 1.5vw; background-color: #DEEAEC; color: #3f3f3f; height: 4vw; width: 9vw; border: 2px solid #97B8A5; border-radius: 30px; text-align: center; margin-top: 1vw; margin-left: 1vw; vertical-align: middle; } .registration_form .button-edit { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 1.5vw; background-color: #DEEAEC; color: #3f3f3f; height: 4vw; width: 18vw; padding-left: 3vw; border: 2px solid #97B8A5; border-radius: 30px; text-align: center; margin-top: 1vw; margin-left: 68vw; vertical-align: middle; background-image: url(img/edit.png); background-size: 2vw; background-repeat: no-repeat; background-position: left 1.5vw center; } .line1 { margin-top: 3.217vw; border: 0.055vw solid #97B8A5; width: 80.261vw; position: absolute; top: 500%; left: 50%; transform: translate(-50%, -50%); } .icon-user{ background-color: #97B8A5; border-radius: 8vw; width: 13vw; height: 13vw; transform: translate(-50%, -50%); position: absolute; top: 10vw; left: 50%; } .info-user{ width: auto; height: auto; transform: translate(-50%, -50%); position: absolute; top: 22vw; left: 50%; display:grid; text-align: center; justify-content: center; align-items: center; } .pets-user{ font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-style: normal; font-size: 2vw; transform: translate(-50%, -50%); position: absolute; top: 30vw; left: 50%; width: 23vw; height: 5vw; text-align: center; } .pets-add{ margin-top: 24vw; margin-left: 58vw; } .name-user{ font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-style: normal; font-size: 2vw; } .email-user{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 2vw; margin-top: 0.1vw; } .registration_form { flex-direction: column; background-color: #fffdf9; color: #3f3f3f; width: 100%; } .registration_form .heads-form { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 2.617vw; text-align: center; color: #3f3f3f; margin-bottom: 0.273vw; } .registration_form .form-position { display:grid; text-align: center; justify-content: center; align-items: center; } .registration_form .element{ display: block; text-align: justify; margin-top: 1.091vw; } .registration_form .lable{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 1.617vw; color: #3f3f3f; } .registration_form .input{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; width: 57.088vw; height: 3.871vw; border-radius: 0.818vw; background-color: #97B8A5; border: none; padding-left: 1.091vw; font-size: 1.617vw; color: #FFFDF9; margin-top: 1.091vw; } .textarea{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; width: 57.088vw; height: 3.871vw; border-radius: 0.818vw; background-color: #97B8A5; border: none; padding-left: 1.091vw; font-size: 1.617vw; color: #FFFDF9; margin-top: 1.091vw; resize: vertical; max-height: 8.088vw; min-height:3.871vw; padding-top: 0.5vw; } .textarea::-webkit-resizer{ background: linear-gradient(315deg, #0000 16% 26%, #FFFDF9 26% 33%, #0000 33% 43%, #FFFDF9 43% 50%, #0000 50% 100%) no-repeat; background-size: 80% 80%; } .registration_form .input:focus{ outline: none; } .registration_form .input::placeholder{ color: #3F3F3F; } .textarea:focus{ outline: none; } .textarea::placeholder{ color: #3F3F3F; } .registration_form .container { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; display: block; position: relative; text-align: left; padding-left: 3.272vw; margin-top: 1.091vw; cursor: pointer; font-size: 1.363vw; padding-top: 0.436vw; } .registration_form .checkmark { width: 2.072vw; height: 2.072vw; border: 0.164vw solid #97B8A5; border-radius: 0.818vw; cursor: pointer; display: inline-block; text-align: left; position: absolute; top: 0; left: 0; } .registration_form .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { left: 0.709vw; top: 0.382vw; width: 0.545vw; height: 0.818vw; border:solid #3F3F3F; border-radius: 0.109vw; border-width: 0 0.191vw 0.191vw 0; transform: rotate(45deg); } .registration_form .button{ text-align: center; display: block; margin-top: 2.181vw; align-items: center; justify-content: center; } .registration_form .button-text{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 3.272vw; width: 50.6vw; height: 5.18vw; border-radius: 0.818vw; background-color: #97B8A5; border: none; padding-left: 1.091vw; color: #FFFDF9; margin-top: 1.091vw; } .registration_form .footer-form { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 1.500vw; text-align: center; color: #3f3f3f; margin-top: 0.545vw; } .registration_form .appointment-position { display:grid; text-align: center; justify-content: center; align-items: center; } .registration_form .head-appointment { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 800; font-style: normal; font-size: 2.617vw; text-align: center; color: #3f3f3f; margin-bottom: 0.273vw; } .registration_form .input-appointment{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; width: 47.088vw; height: 3.871vw; border-radius: 0.818vw; background-color: #FFD87E; border: none; padding-left: 1.091vw; font-size: 1.617vw; color: #FFFDF9; margin-top: 1.091vw; margin-left: 2vw; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url(img/strelka.png); background-size: 2vw; background-repeat: no-repeat; background-position: right 1vw center; } .registration_form .datetime-appointment{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; width: 46.088vw; height: 3.871vw; border-radius: 0.818vw; background-color: #FFD87E; border: none; padding-left: 1.091vw; font-size: 1.617vw; color: #FFFDF9; margin-top: 1.091vw; margin-left: 2vw; } input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 1; display: block; background: url(img/datetime.png) no-repeat; width: 3vw; height: 2vw; border-width: thin; background-size: 2vw; } *:focus { outline: none; } .datetime-appointment:focus{ outline: none; } .input-appointment:focus{ outline: none; } .registration_form .button-appointment{ font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 3.272vw; width: 50.6vw; height: 5.18vw; border-radius: 0.818vw; background-color: #FFD87E; border: none; padding-left: 1.091vw; color: #FFFDF9; margin-top: 1.091vw; } .registration_form .container-appointment { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; display: block; position: relative; text-align: left; padding-left: 3.272vw; margin-top: 1.091vw; cursor: pointer; font-size: 1.363vw; padding-top: 0.436vw; margin-left: 2vw; } .registration_form .checkmark-appointment { width: 2.072vw; height: 2.072vw; border: 0.164vw solid #FFD87E; border-radius: 0.818vw; cursor: pointer; display: inline-block; text-align: left; position: absolute; top: 0; left: 0; } .registration_form .checkmark-appointment:after { content: ""; position: absolute; display: none; } .container-appointment input:checked ~ .checkmark-appointment:after { display: block; } .container-appointment .checkmark-appointment:after { left: 0.709vw; top: 0.382vw; width: 0.545vw; height: 0.818vw; border:solid #3F3F3F; border-radius: 0.109vw; border-width: 0 0.191vw 0.191vw 0; transform: rotate(45deg); } .services { justify-content: center; display: flex; width: 100%; background-color: #fffdf9; } .services .services-page { flex-direction: column; width: 100%; margin-top: 9.017vw; justify-content: center; align-items: center; display: flex; } .services .services-head { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 3.272vw; text-align: center; color: #3f3f3f; margin-top: 0.8.179vw; } .services .menu { position: fixed; justify-content: center; top: 0; width: 39.313vw; height: 3.544vw; background-color: #deeaec; border-radius: 1.636vw; border: 0.109vw solid; border-color: #97b8a5; display: flex; justify-content: space-around; align-items: center; z-index: 1000; } .services .text-menu { font-family: "Commissioner", Helvetica; font-weight: 600; font-size: 1.091vw; background-color: #deeaec; border: none; transition: border 0.1s ease-in; } .services .text-menu:hover{ border: 0.2vw solid #97b8a5; border-radius: 1.636vw; } .services .make-app { position: fixed; top: 0; width: 39.313vw; height: 5.344vw; background-color: #FFE4DD; border-radius: 1.636vw; border: 0.050vw solid; border-color: #97b8a5; display: flex; justify-content: center; align-items: end; z-index: 1000; margin-top: 1.091vw; } .services .make-app-text { font-family: "Commissioner", Helvetica; font-weight: 700; font-size: 1.527vw; margin-bottom: 0.354vw; color: #3F3F3F; } .services .line1 { margin-top: 3.217vw; border: 0.055vw solid #97B8A5; width: 63.261vw; } .services .services-section { margin-top: 3.762vw; margin-bottom: 3.326vw; width: 83.937vw; height: 22.465vw; display: flex; justify-content: space-between; } .services .service { background-image: url("img/service2.png"); background-size: cover; border: 0.164vw solid #97b8a5; width: 22.901vw; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center; } .services .line2 { border: 0.056vw solid #97B8A5; width: 14.286vw; margin-top: 1.418vw; } .services .service-head { margin-top: 2.236vw; margin-bottom: auto; position: static; font-family: "Commissioner", Helvetica; font-weight: 400; font-size: 1.854vw; width: 20.011vw; } .services .service-desc { margin-top: 1.527vw; margin-bottom: 1.472vw - 1.418vw; font-family: "Commissioner", Helvetica; font-weight: 400; font-size: 1.527vw; width: 20.011vw; } .services .service-price { margin-top: 1.963vw; margin-bottom: 2.672vw; font-family: "Commissioner", Helvetica; font-weight: 600; font-size: 1.527vw; } .doctors { justify-content: center; display: flex; width: 100%; height: auto; background-color: #fffdf9; } .doctors .docs { width: 68.542vw; height: auto; display: flex; justify-content: center; flex-direction: column; } .doctors .subdocs { display: flex; width: 68.542vw; margin-bottom: 5.453vw; justify-content: space-between; align-items: center; } .doctors .text-docs-head-left { font-family: "Commissioner", Helvetica; font-weight: 800; font-size: 1.363vw; width: 47.708vw; margin-left: 2.181vw; } .doctors .text-docs-head-right { font-family: "Commissioner", Helvetica; font-weight: 800; font-size: 1.363vw; width: 47.708vw; } .doctors .text-docs-subhead-left { font-family: "Commissioner", Helvetica; font-weight: 500; font-size: 1.363vw; width: 47.708vw; margin-left: 2.181vw; } .doctors .text-docs-subhead-right { font-family: "Commissioner", Helvetica; font-weight: 500; font-size: 1.363vw; width: 47.708vw; } .doctors .doc-img { width: 17.986vw; height: 17.986vw; } .doctors .menu { position: fixed; justify-content: center; top: 0; width: 39.313vw; height: 3.544vw; background-color: #deeaec; border-radius: 1.636vw; border: 0.109vw solid; border-color: #97b8a5; display: flex; justify-content: space-around; align-items: center; z-index: 1000; } .doctors .text-menu { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 600; font-size: 1.091vw; background-color: #deeaec; border: none; transition: border 0.1s ease-in; } .doctors .text-menu:hover{ border: 0.2vw solid #97b8a5; border-radius: 1.636vw; } .docs .doctors-head { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 3.272vw; text-align: center; color: #3f3f3f; margin-top: 6.107vw; margin-bottom: 5.507vw; width: 100%; text-align: center; } .shelter { justify-content: center; display: flex; width: 100%; background-color: #fffdf9; } .shelter .pets { width: 100%; height: 183.403vw; display: flex; justify-content: center; flex-direction: column; align-items: center; } .shelter .subdocs { width: 85.347vw; display: flex; margin-bottom: 5.453vw; } .shelter .text-docs-head-left { font-family: "Commissioner", Helvetica; font-weight: 800; font-size: 1.363vw; width: 62.569vw; margin-left: 2.181vw; } .shelter .text-docs-head-right { font-family: "Commissioner", Helvetica; font-weight: 800; font-size: 1.363vw; width: 62.569vw; } .shelter .text-docs-subhead-left { font-family: "Commissioner", Helvetica; font-weight: 500; font-size: 1.363vw; width: 62.569vw; margin-left: 2.181vw; } .shelter .text-docs-subhead-right { font-family: "Commissioner", Helvetica; font-weight: 500; font-size: 1.363vw; width: 62.569vw; } .shelter .doc-img { width: auto; height: 21.528vw; } .shelter .menu { position: fixed; justify-content: center; top: 0; width: 39.313vw; height: 3.544vw; background-color: #deeaec; border-radius: 1.636vw; border: 0.109vw solid; border-color: #97b8a5; display: flex; justify-content: space-around; align-items: center; z-index: 1000; } .shelter .text-menu { font-family: "Commissioner-SemiBold", Helvetica; font-weight: 600; font-size: 1.091vw; background-color: #deeaec; border: none; transition: border 0.1s ease-in; } .shelter .text-menu:hover{ border: 0.2vw solid #97b8a5; border-radius: 1.636vw; } .pets .doctors-head { font-family: "Abhaya Libre", Helvetica; font-weight: 600; font-style: normal; font-size: 3.272vw; text-align: center; color: #3f3f3f; margin-top: 0.107vw; margin-bottom: 5.507vw; width: 100%; text-align: center; }