:root {
    --basic-font: 'Montserrat', sans-serif;
    --sec-font: 'Abril Fatface', cursive;
    --black: #1a1919;
    --white: #f7f7f7;
    --urologist: #e0f2f1;
    --aesthetic: #fbe9e7;
}

html {overflow-y: scroll; background: #1a1919;}
body {position: relative; min-height: 100vh; margin: 0; padding: 0; color: var(--black); font: 400 18px/30px var(--basic-font); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

* {box-sizing: border-box;}

a {color: var(--black); text-decoration: none; transition: all 0.3s;}
a:before, a:after {transition: all 0.3s;}
p {margin: 1.8em 0;}
ul {margin: 1.8em 0; padding-left: 0;}
li {margin: 0 0.5em;}
li:first-child {margin-top: 0;}
li:last-child {margin-bottom: 0;}
strong {font-weight: 700;}
h1, h2, h3, h4, h5, h6 {font-weight: 400; font-family: var(--sec-font);}

.cf:after {display: block; clear: both; overflow: hidden; height: 0; content: "";}
.clickable {cursor: pointer;}

*::selection {background: var(--black); color: #fff;}
*::-moz-selection {background: var(--black); color: #fff;}
*::selection a {color: #fff;}
*::-moz-selection a {color: #fff;}

/* layout */
.page-header {padding: 20px; background: var(--white); text-align: center;}
.logo {display: block; margin: 0 auto; max-width: calc(100% - 40px);}
.page-content {padding: 20px; background: var(--white);}
.specialty {margin-bottom: 60px; cursor: pointer; transition: transform 0.3s;}
.page-footer {padding: 20px; color: var(--white);}
.footer-widget {margin: 30px 0 60px;}

@media (min-width: 600px) {
    .page-header {padding: 50px 0 100px;}
    .page-content {padding: 25px 20px 150px;}
    .page-footer {display: flex; flex-wrap: wrap; align-items: flex-start;}
    .footer-widget {width: 50%; padding-right: 30px;}
}

@media (min-width: 800px) {
    .specialties {display: flex; flex-wrap: wrap;}
    .specialty {width: 50%; margin-bottom: 0;}
    .specialty:first-child {padding-right: 20px; animation: slide-in-down 1s ease-out; }
    .specialty:last-child {padding-left: 20px; animation: slide-in-up 1s ease-out;}
}

@media (min-width: 1000px) {
    .specialty:first-child {padding-right: 60px;}
    .specialty:last-child {padding-left: 60px;}
    .footer-widget {margin: 0 0 90px;}
}

@media (min-width: 1200px) {
    .page-content {padding: 25px 20px 150px;}
    .specialty:first-child {padding-right: 120px;}
    .specialty:last-child {padding-left: 120px;}
    .specialty:hover {transform: scale(1.05);}
    .footer-widget {padding-right: 60px;}
}

@media (min-width: 1480px) {
    .page-content {padding: 25px 0 150px;}
    .specialties {max-width: none; margin: 0 auto; padding: 0 20px; flex-wrap: nowrap;}
	.specialty {width: calc(33.333% - 40px / 3); box-sizing: border-box;}
    .specialty:hover {transform: scale(1.1);}
    .page-footer {max-width: 1440px; margin: 0 auto; padding: 90px 0 0;}
}

/* modules */
.specialty-title {position: relative; display: flex; align-items: center; margin-bottom: 40px; font-size: 30px; line-height: 30px;}
.specialty-title:before {display: block; flex-shrink: 0; width: 25.7px; height: 60px; margin-right: 20px; font: 400 10px/20px var(--basic-font); letter-spacing: 3px; content: attr(data-number);}
.specialty-title:after {display: block; width: 65.29px; height: 2px; position: absolute; left: 10px; top: 60px; transform-origin: 0 0; transform: rotate(-68deg); background: var(--black); content: '';}
.doctors {position: relative; margin: 0; padding: 30px 0; font: 400 20px/2em var(--basic-font);}
.doctors:before {position: absolute; top: 0; left: 0; display: block; width: 30px; height: 1px; background: var(--black); content: '';}

@media (min-width: 1300px) {
    .specialty-title {margin-bottom: 56px; font-size: 80px; line-height: 80px;}
    .specialty-title:before {width: 69px; height: 160px; line-height: 30px;}
    .specialty-title:after {top: 160px; left: 0; width: 172px; height: 3px;}
    .doctors {padding-top: 56px; font-size: 30px;}
}

.registration-contact {margin-top: 0; line-height: 30px;}
.registration-contact .label {margin: 0; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;}
.registration-contact a {padding-right: 5px; font-weight: 700; font-size: 18px;}
.urologist .registration-contact a {background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--urologist) 50%, var(--urologist) 100%);}
.aesthetic .registration-contact a {background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--aesthetic) 50%, var(--aesthetic) 100%);}
.button {position: relative; display: inline-block; width: 207px; height: 60px; margin-left: 15px; border: 2px solid var(--black); font-size: 10px; font-weight: 700; letter-spacing: 3px; line-height: 56px; text-transform: uppercase; text-align: center;}
.button:before {display: block; position: absolute; left: -15px; top: 50%; width: 30px; height: 1px; background: var(--black); content: '';}
.urologist .button:hover {background: var(--urologist);}
.aesthetic .button:hover {background: var(--aesthetic);}
.button:hover:before {transform: rotate(-68deg);}

@media (min-width: 1200px) {
    .goto-page {margin: 58px 0 0;}
}

.footer-widget-title {position: relative; margin: 0; padding: 30px 0; font: 400 10px/1em var(--basic-font); text-transform: uppercase; letter-spacing: 3px;}
.footer-widget-title:before {display: block; position: absolute; left: 0; top: 0; width: 30px; height: 1px; background: var(--white); content: '';}
.footer-widget p, .footer-widget ul {margin-top: 0;}
.footer-widget ul {list-style: none;}
.footer-widget li {margin: 0 0 0.5em;}
.footer-widget a {position: relative; color: var(--white);}
.footer-widget a:before {display: block; position: absolute; top: 100%; left: 50%; width: 0; height: 1px; background: var(--white); content: '';}
.footer-widget a:hover:before {width: 100%; transform: translateX(-50%);}

.social-links {display: flex;}
.social-links li {margin: 0 10px 0 0;}
.social-links a {display: block; width: 20px; height: 20px;}
.social-links a:before {display: none;}
.social-links a:hover {transform: scale(1.5);}
.social-links svg {width: 20px; height: 20px;}
.social-links path {fill: var(--white);}

.map {width: 100%; height: 400px; flex-shrink: 0;}

.bottom {width: 100%; padding: 60px 0 0; color: #626262; font-size: 12px; line-height: 22px; letter-spacing: 0.18px; text-align: center;}
.bottom p {margin: 2em 0;}
.bottom a {color: #626262;}
.bottom a:hover {color: var(--white);}

@media(min-width: 800px) {
    .bottom {display: flex; justify-content: space-between; padding: 50px 0;}
    .bottom p {margin: 0;}
}

/* animations */
@-webkit-keyframes slide-in-down {
    0% {transform: translateY(-50%); opacity: 0;}
    100% {transform: none; opacity: 1;}
}
@keyframes slide-in-down {
    0% {transform: translateY(-50%); opacity: 0;}
    100% {transform: none; opacity: 1;}
}

@-webkit-keyframes slide-in-up {
    0% {transform: translateY(50%); opacity: 0;}
    100% {transform: none; opacity: 1;}
}
@keyframes slide-in-up {
    0% {transform: translateY(50%); opacity: 0;}
    100% {transform: none; opacity: 1;}
}