@font-face {
  font-family: 'Comfortaa';
  src: url("../assets/fonts/Comfortaa-Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'ComfortaaBold';
  src: url("../assets/fonts/Comfortaa-Bold.ttf") format("truetype"); }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

ul, ol {
  margin: 0;
  padding: 0; }

body {
  background: #F5F5F5;
  color: #383838;
  font-family: 'Comfortaa';
  font-size: 14px; }

.wrapper {
  width: 100%;
  max-width: 192rem;
  margin: 0 auto; }

.basic-padding {
  padding: 0 4rem; }

.fixed-stripe {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  -webkit-box-shadow: 0px 1px 12px 1px rgba(56, 56, 56, 0.2);
  -moz-box-shadow: 0px 1px 12px 1px rgba(56, 56, 56, 0.2);
  box-shadow: 0px 1px 12px 1px rgba(56, 56, 56, 0.2);
  z-index: 10; }
  .fixed-stripe.bottom {
    top: auto;
    bottom: 0;
    -webkit-box-shadow: 0px -1px 12px 1px rgba(56, 56, 56, 0.2);
    -moz-box-shadow: 0px -1px 12px 1px rgba(56, 56, 56, 0.2);
    box-shadow: 0px -1px 12px 1px rgba(56, 56, 56, 0.2); }

.section-offset {
  padding-top: 6rem; }

.dflex {
  display: flex; }

.prelative {
  position: relative; }

img {
  width: 100%; }

.mauto {
  margin: 0 auto; }

.tcenter {
  text-align: center; }

.tright {
  text-align: right; }

.pagination ul {
  display: block;
  width: 100%;
  list-style: none;
  text-align: center; }
  .pagination ul li {
    display: inline-block;
    margin: 0 1rem 1rem 0; }
    .pagination ul li a {
      display: inline-block;
      width: 3.5rem;
      height: 3.5rem;
      line-height: 3.5rem;
      font-size: 16px;
      border: 2px solid #383838;
      color: #383838;
      text-decoration: none;
      text-align: center;
      transition: all 300ms linear; }
      .pagination ul li a:hover {
        background: #383838;
        color: #FFF; }

header.fixed-stripe {
  z-index: 2; }

.logo-item {
  text-align: center; }
  .logo-item h1 {
    display: inline-block;
    margin: 0;
    padding: 0;
    padding: 0 2rem;
    border-bottom: 2px solid #383838;
    line-height: 6rem; }
    .logo-item h1 a, .logo-item h1 a:active, .logo-item h1 a:hover, .logo-item h1 a:visited {
      color: #383838;
      text-decoration: none; }
    .logo-item h1 img {
      width: 6rem;
      height: 6rem; }

.main-navigation {
  position: relative;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  list-style: none; }
  .main-navigation li {
    position: relative;
    display: block;
    height: 5.9rem; }
    .main-navigation li > a, .main-navigation li > a:active, .main-navigation li > a:visited {
      display: inline-block;
      height: 100%;
      padding: 0 1rem;
      line-height: 6rem;
      vertical-align: middle;
      font-size: 16px;
      color: #383838;
      text-decoration: none;
      cursor: pointer; }
    .main-navigation li > ul {
      list-style: none;
      justify-content: center;
      display: none;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -150px;
      width: 300px;
      background: #FFF;
      border-top: 2px solid #383838;
      z-index: 3; }
      .main-navigation li > ul li {
        display: flex;
        position: relative;
        width: 100%; }
        .main-navigation li > ul li a {
          display: inline-block;
          width: 100%;
          padding: 0 1.2rem;
          background: #FFF;
          font-size: 14px; }
          .main-navigation li > ul li a:hover {
            background: rgba(160, 160, 160, 0.1);
            font-size: 14px;
            padding: 0 1.2rem; }
        .main-navigation li > ul li:after {
          position: absolute;
          display: list-item;
          content: '';
          width: 70%;
          margin-left: 15%;
          height: 1px;
          background: rgba(56, 56, 56, 0.1); }
      .main-navigation li > ul:before {
        position: absolute;
        top: -7px;
        left: 50%;
        display: block;
        width: 0;
        height: 0;
        margin-left: -5px;
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #383838; }

nav {
  position: relative; }

.menu-decoration {
  position: absolute;
  bottom: 0;
  display: block;
  width: 50px;
  height: 2px;
  background: #383838;
  opacity: 0; }

#responsive-navigation {
  display: none;
  overflow: auto;
  height: calc(100vh - 10.5rem);
  list-style: none;
  margin: 0;
  padding: 3rem 1rem 0; }
  #responsive-navigation li a {
    display: inline-block;
    width: 100%;
    line-height: 6rem;
    padding-left: 2.5rem;
    font-size: 16px;
    color: #383838;
    text-decoration: none;
    border-top: 1px solid rgba(56, 56, 56, 0.2);
    transition: all 300ms linear; }
    #responsive-navigation li a:hover {
      background: rgba(56, 56, 56, 0.1); }
  #responsive-navigation li ul {
    list-style: none;
    display: none; }
    #responsive-navigation li ul li a {
      padding-left: 6rem; }
    #responsive-navigation li ul li:last-child {
      border: none; }
  #responsive-navigation li:last-child {
    border-bottom: 1px solid rgba(56, 56, 56, 0.2); }

.fixed-section {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: calc(100vh - 10.5rem);
  font-size: 14px; }
  .fixed-section .landing-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transition: opacity 300ms linear;
    opacity: 0; }
    .fixed-section .landing-image.current {
      opacity: 1; }

.main-content {
  position: relative;
  width: 1200px;
  padding-bottom: 7rem;
  z-index: 1; }
  .main-content.cards {
    width: 1400px; }
  .main-content.clinic {
    width: 700px; }
  .main-content.small {
    width: 900px; }
  .main-content.center {
    margin: 0 auto; }
  .main-content .center-container {
    padding: 2rem; }
    .main-content .center-container.top-offset {
      padding-top: 4rem; }
  .main-content .separator {
    border-right: 5px solid #383838; }
  .main-content .decoration {
    background: #FFF;
    -webkit-box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2);
    -moz-box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2);
    box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2);
    transition: all 300ms linear; }
    .main-content .decoration:hover {
      -webkit-box-shadow: 0px 0px 12px 2px rgba(168, 168, 168, 0.4);
      -moz-box-shadow: 0px 0px 12px 2px rgba(168, 168, 168, 0.4);
      box-shadow: 0px 0px 12px 2px rgba(168, 168, 168, 0.4); }
    .main-content .decoration.offsets {
      padding: 2.5rem; }
  .main-content .before {
    position: relative;
    background: #383838;
    color: #FFF; }
    .main-content .before > div {
      position: relative;
      z-index: 2; }
    .main-content .before:before {
      position: absolute;
      bottom: -219px;
      left: -213px;
      display: block;
      width: 2000px;
      height: 2000px;
      background: #383838;
      z-index: 1;
      -ms-transform: rotate(20deg) skewX(-50deg);
      -webkit-transform: rotate(20deg) skewX(-50deg);
      transform: rotate(20deg) skewX(-50deg);
      content: ''; }
  .main-content .after {
    padding: 6rem 0 2rem; }
  .main-content header {
    padding-top: 4rem; }
    .main-content header h1 {
      text-align: center;
      color: #A3A3A3;
      font-size: 18px;
      margin: 0 0 3rem;
      padding: 0; }
  .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
    margin: 0 0 1.5rem;
    padding: 0; }
    .main-content h1.small-offset, .main-content h2.small-offset, .main-content h3.small-offset, .main-content h4.small-offset, .main-content h5.small-offset, .main-content h6.small-offset {
      margin: 0 0 0.5rem; }
  .main-content h1 {
    font-size: 20px; }
  .main-content h2 {
    font-size: 18px; }
  .main-content h3 {
    font-size: 17px; }
  .main-content h4 {
    font-size: 16px; }
  .main-content h5 {
    font-size: 15px; }
  .main-content h6 {
    font-size: 14px; }
  .main-content p {
    font-size: 14px;
    margin: 0 0 1rem;
    padding: 0; }

.name-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: 30px 30px; }
  .name-decoration .position {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    color: #A3A3A3;
    font-size: 40px; }
  .name-decoration .first-name,
  .name-decoration .last-name {
    display: block;
    font-size: 20px; }
    .name-decoration .first-name .diplom,
    .name-decoration .last-name .diplom {
      color: #A3A3A3; }
  .name-decoration .last-name {
    text-align: center; }

.image-holder {
  position: relative;
  padding-left: 60px; }

.date-place {
  display: block;
  margin: 0 0 2rem;
  color: #A3A3A3;
  font-weight: bold;
  font-size: 12px; }

.left-image {
  float: left; }

.right-image {
  float: right; }

.left-image,
.right-image {
  max-width: 450px;
  margin: 0 2rem 1.5rem 0; }

.article {
  border-left: 4px solid #383838;
  margin-bottom: 3rem; }
  .article:last-child {
    margin-bottom: 0; }
  .article > div {
    padding: 15px; }
  .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    font-weight: bold; }
  .article img {
    max-width: 200px;
    margin: 0 15px 0 0; }
  .article a {
    text-decoration: none;
    color: #383838; }

.main-content .work-container {
  overflow: hidden;
  padding: 0;
  width: 500px; }
  .main-content .work-container p {
    font-size: 12px; }
  .main-content .work-container img {
    max-width: 200px; }
  .main-content .work-container .before, .main-content .work-container .after {
    padding: 2rem; }
  .main-content .work-container .after {
    padding-top: 8rem; }
    .main-content .work-container .after h2 {
      margin-bottom: 3rem; }

.mapouter {
  background: rgba(56, 56, 56, 0.5); }

.footer.additional-info {
  font-size: 14px; }
  .footer.additional-info > div {
    padding: 2rem 0; }
  .footer.additional-info .social-menu {
    display: inline-block;
    float: none;
    padding: 0; }
    .footer.additional-info .social-menu li {
      text-align: center; }
  .footer.additional-info .social-icon.phone {
    margin-right: 1rem; }

.cards-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start; }

.news-container {
  width: 22%;
  margin: 0 2rem 5rem 0;
  padding: 1rem;
  border-top: 3px solid #383838;
  background: #FFF;
  -webkit-box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2);
  -moz-box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2);
  box-shadow: 0px 0px 8px 2px rgba(168, 168, 168, 0.2); }
  .news-container p {
    font-size: 12px; }
  .news-container h2 {
    margin-bottom: 1rem; }
  .news-container a h2, .news-container a p {
    text-decoration: none;
    color: #383838; }
  .news-container a:hover {
    text-decoration: none; }

.job-container .image-wrapper,
.news-container .image-wrapper {
  position: relative;
  margin-bottom: 2rem; }
  .job-container .image-wrapper .btn,
  .news-container .image-wrapper .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: -81px;
    opacity: 0;
    transition: all 450ms linear; }
  .job-container .image-wrapper span,
  .news-container .image-wrapper span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: all 400ms linear; }
  .job-container .image-wrapper.hovered .btn,
  .news-container .image-wrapper.hovered .btn {
    opacity: 1; }
  .job-container .image-wrapper.hovered > span,
  .news-container .image-wrapper.hovered > span {
    background: rgba(0, 0, 0, 0.5); }

.job-container {
  width: 22%;
  margin: 0 2rem 3rem 0;
  padding: 1rem;
  background: #EBEBEB; }
  .job-container a {
    text-decoration: none; }
  .job-container h1 {
    margin: 0;
    padding: 0 0.5rem;
    color: #383838;
    font-size: 14px;
    font-weight: bold; }
  .job-container .image-wrapper {
    margin-bottom: 1rem; }
    .job-container .image-wrapper .btn {
      margin-left: -62px; }
    .job-container .image-wrapper img {
      width: 100%; }

.footer {
  height: 4.5rem;
  z-index: 2; }
  .footer .social-menu {
    float: left;
    padding-top: 10px;
    list-style: none; }
    .footer .social-menu li {
      position: relative;
      display: inline-block;
      width: 2.4rem;
      height: 4rem;
      margin-right: 1rem; }
      .footer .social-menu li a {
        display: inline-block;
        width: 24px;
        height: 24px; }
  .footer p {
    float: right;
    margin: 0;
    line-height: 4.5rem;
    vertical-align: middle;
    text-align: right; }
    .footer p span {
      margin-right: 10px; }
  .footer .social-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 300ms linear; }
    .footer .social-icon.facebook {
      background: url("../assets/images/icons/facebook.png"); }
    .footer .social-icon.instagram {
      background: url("../assets/images/icons/instagram.png"); }
    .footer .social-icon.mail {
      background: url("../assets/images/icons/mail.png"); }
    .footer .social-icon.phone {
      background: url("../assets/images/icons/phone.png"); }
    .footer .social-icon.facebook:hover, .footer .social-icon.instagram:hover, .footer .social-icon.mail:hover {
      opacity: 0.6; }

.btn {
  padding: 2.5rem;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid #FFF;
  color: #FFF;
  outline: none;
  background: transparent;
  font-weight: bold;
  transition: all 300ms linear; }
  .btn.dark {
    border: 2px solid #383838;
    color: #383838; }
    .btn.dark:hover {
      background: #383838;
      color: #FFF; }
  .btn.small {
    padding: 1rem;
    font-size: 14px; }
  .btn.big {
    padding: 1.5rem 8rem; }
  .btn:hover {
    background: #FFF;
    color: #383838; }
  .btn:active, .btn:visited {
    text-decoration: none;
    outline: none; }

.landing-btn-center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -29px;
  margin-left: -107px; }

.navigation-button {
  position: absolute;
  top: 12px;
  right: 10px;
  display: none;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer; }
  .navigation-button:hover, .navigation-button:active, .navigation-button:focus {
    outline: none; }
  .navigation-button:after, .navigation-button:before,
  .navigation-button span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 3px;
    content: '';
    background: #383838; }
  .navigation-button span {
    top: 11px; }
  .navigation-button:after {
    top: auto;
    bottom: 0; }

@media (max-width: 1420px) {
  .main-content.cards {
    width: 100%; } }

@media (max-width: 1400px) {
  html {
    font-size: 8px; }
  .basic-padding {
    padding: 0 2rem; }
  .footer .social-menu {
    padding-top: 6px; } }

@media (max-width: 1250px) {
  #main-navigation li > a, #main-navigation li > a:active, #main-navigation li > a:visited {
    font-size: 14px; }
  #main-navigation .logo-item {
    padding: 1rem 1rem; }
    #main-navigation .logo-item h1 {
      font-size: 20px;
      line-height: 4rem; }
  .main-content {
    width: 100%; } }

@media (max-width: 1024px) {
  .main-navigation, .menu-decoration {
    display: none; }
  .navigation-button {
    display: block; }
  .news-container {
    width: 30%; } }

@media (max-width: 920px) {
  .main-content.small {
    width: 100%; }
  .news-container {
    width: 44%; } }

@media (max-width: 770px) {
  .main-content.clinic {
    width: 100%; }
  .footer.additional-info > div {
    text-align: center; }
  .mapouter {
    height: 300px !important;
    width: 400px !important; }
  .gmap_canvas {
    height: 300px !important;
    width: 400px !important; } }

@media (max-width: 520px) {
  .main-content .work-container {
    width: 100%; }
  .news-container {
    width: 90%; } }