@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=fallback");
@import url("https://fonts.googleapis.com/css?family=Days+One&display=fallback");
/*
            Media Queries Manager

0-250      ->   (sm-phone) = small-phone
250-400    ->   (md-phone) = medium phone
400-600    ->   (bg-phone) = phone
600-900    ->   (tab-port) = tablet-portait
900-1200   ->   (tab-land) = tablet-landscape
1200-1800  ->   (desc) = desctop
1800-1920  ->   (big-desc) = big desctop
2500       ->   (super-desc) = super big desctop 4K screen


1em = 16px
*/
.section-disease, .section-disease-2 {
  background-position: center;
  background-size: cover;
  position: relative; }

.topMedia li:nth-child(1) a i::after, .topMedia li:nth-child(2) a i::after, .topMedia li:nth-child(3) a i::after {
  color: #fff;
  border: none;
  border-radius: .5rem; }

.wrapimage__fixed__wrap--disease, .wrapimage__fixed__wrap--doctors {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(2px); }

.m-card__heading--1, .m-card__heading--2, .m-card__heading--3, .m-card__heading--4, .m-card__heading--5 {
  height: 80%;
  background-size: cover;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  margin-bottom: .8rem; }

.social__rate__box__header--img--1, .social__rate__box__header--img--2, .social__rate__box__header--img--3 {
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 55%;
  left: 30%;
  transform: translate(-50%, -50%) scale(0.8); }

.padding-lr-small {
  padding-left: 2rem;
  padding-right: 2rem; }

.padding-lr-medium {
  padding-left: 4rem;
  padding-right: 4rem; }

.padding-lr-big {
  padding-left: 6rem;
  padding-right: 6rem; }

.pos-relative {
  position: relative; }

.mg-bm-sm {
  margin-bottom: 1rem; }

.mg-bm-md {
  margin-bottom: 2rem; }

.mg-bm-lg {
  margin-bottom: 4rem; }

/* for apoinment */
.appointment__emergency {
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: 700;
  color: #e4405f; }
  .appointment__emergency-phonenumber {
    margin-top: 1rem;
    font-size: 3rem; }

.appointment__divAppointment {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 130%;
  width: 70%;
  background-color: #e3e3e3;
  border-radius: 1.5rem;
  transform: translate(-50%, -50%) skewX(-20deg);
  overflow: hidden; }
  @media only screen and (max-width: 56.25em) {
    .appointment__divAppointment {
      transform: translate(-50%, -50%) skewX(0);
      width: 90%; } }
  .appointment__divAppointment__contents {
    transform: skewX(20deg);
    width: 87%;
    height: 90%;
    margin: 0 auto; }
    @media only screen and (max-width: 56.25em) {
      .appointment__divAppointment__contents {
        transform: skewX(0); } }
  .appointment__divAppointment__btn {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 13%;
    background-color: #6d6d6d;
    z-index: 100; }
    .appointment__divAppointment__btn-ul {
      list-style-type: none;
      height: 100%; }
    .appointment__divAppointment__btn-li {
      width: 100%;
      height: 50%;
      position: relative;
      border-radius: 1.5rem;
      transition: all .6s; }
      .appointment__divAppointment__btn-li:hover {
        border-radius: 1.5rem;
        background-color: #a3a3a3; }
    .appointment__divAppointment__btn-i {
      position: absolute;
      left: 50%;
      top: 50%;
      color: #eee;
      transform: translate(-50%, -50%);
      font-size: 8vw;
      transition: all .6s; }
  .appointment__divAppointment__textbox--caption {
    font-size: 4rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    color: #14521F; }
    @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
      .appointment__divAppointment__textbox--caption {
        font-size: 2.5rem; } }
    @media only screen and (max-width: 25em) {
      .appointment__divAppointment__textbox--caption {
        font-size: 2.5rem; } }
  .appointment__divAppointment__textbox {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -55%);
    transition: all .6s; }
    @media only screen and (max-width: 56.25em) {
      .appointment__divAppointment__textbox {
        transform: translate(-43%, -50%); } }
    .appointment__divAppointment__textbox--text {
      font-size: 2rem;
      line-height: 1.8;
      margin: 0; }
      @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
        .appointment__divAppointment__textbox--text {
          width: 80%;
          margin: 0 auto; } }
      @media only screen and (max-width: 25em) {
        .appointment__divAppointment__textbox--text {
          width: 80%;
          margin: 0 auto; } }
      @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
        .appointment__divAppointment__textbox--text {
          width: 90%;
          line-height: 1.3; } }

.appointment__rightImg {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%; }

.appointment__leftImg {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%; }

.form__contents {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  transform: translate(-45%, -55%);
  transition: all .6s; }
  .form__contents__name, .form__contents__email, .form__contents__comment {
    margin: 0 auto 1.2rem auto;
    padding: .5rem 1.5rem;
    display: block;
    width: 70%;
    font-size: 1.6rem;
    border: none;
    border-radius: .3rem;
    border-bottom: 3px solid transparent;
    transition: all .4s; }
    @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
      .form__contents__name, .form__contents__email, .form__contents__comment {
        width: 100%; } }
    @media only screen and (max-width: 25em) {
      .form__contents__name, .form__contents__email, .form__contents__comment {
        width: 100%; } }
    .form__contents__name:valid, .form__contents__email:valid, .form__contents__comment:valid {
      border-bottom: 3px solid #2dbb4c; }
    .form__contents__name:invalid, .form__contents__email:invalid, .form__contents__comment:invalid {
      border-bottom: 3px solid #f4511e; }
  .form__contents__comment {
    min-height: 5rem;
    max-height: 8.5rem;
    margin-bottom: 1.8rem; }
  .form__contents-btn-submit, .form__contents-btn-cancel {
    font-size: 2.3rem;
    padding: .3rem 4rem;
    border: 1px solid #eee;
    border-radius: .5rem;
    color: #fff; }
    @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
      .form__contents-btn-submit, .form__contents-btn-cancel {
        padding: .3rem 2.5rem;
        font-size: 2rem; } }
    @media only screen and (max-width: 25em) {
      .form__contents-btn-submit, .form__contents-btn-cancel {
        padding: .3rem 2.5rem;
        font-size: 2rem; } }
    @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
      .form__contents-btn-submit, .form__contents-btn-cancel {
        padding: .3rem 1.5rem;
        font-size: 1.6rem; } }
  .form__contents-btn-submit {
    background-color: #14521F;
    margin-right: 5rem; }
    @media only screen and (max-width: 25em) {
      .form__contents-btn-submit {
        margin-right: 0; } }
  .form__contents-btn-cancel {
    background-color: #A22F0B; }

.anime__phone {
  transform: translate(-45%, -150%); }

.anime__email {
  transform: translate(-45%, 50%); }

.appointment__close {
  background-color: #6d6d6d;
  border-radius: 0; }

.text__close {
  color: #eee; }

.appointment__open {
  background-color: #e3e3e3;
  border-radius: 0; }

.text__open-phone {
  color: #2dbb4c; }

.text__open-email {
  color: #f4511e; }

.previusBtn {
  height: 30rem;
  top: 50%;
  width: 8%;
  transform: translateY(-50%); }

.btnPreviusBack,
.btnPreviusNext {
  position: absolute;
  height: 10rem;
  width: 10rem;
  border: none;
  background-color: transparent;
  font-family: "Days One", serif;
  font-size: 6rem;
  font-weight: bold;
  color: #eee; }
  @media only screen and (max-width: 37.5em) {
    .btnPreviusBack,
    .btnPreviusNext {
      display: none; } }

.btnPreviusNext {
  right: 2rem; }

.btnPreviusBack {
  left: 2rem; }

.section-caption {
  font-size: 5rem;
  font-weight: 300;
  color: #fff;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%); }

.section-hospital-caption {
  font-size: 5rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 5rem; }

.synergates_omada_iatron,
.sec-cap-disease,
.sec-cap-social {
  color: #fff;
  font-size: 5rem;
  font-weight: 300;
  margin: 0;
  margin-bottom: 5rem; }

.cnt-hospital {
  height: 100%;
  width: 100%; }

.row-hospital {
  width: 100%;
  height: 100%;
  position: relative; }

.col-hospital {
  display: inline-block;
  position: relative;
  width: 49%; }
  @media only screen and (min-width: 37.6em) and (max-width: 45em) {
    .col-hospital {
      width: 60%;
      margin-bottom: 5rem; } }
  @media only screen and (max-width: 37.5em) {
    .col-hospital {
      width: 80%;
      margin-bottom: 5rem; } }
  @media only screen and (max-width: 25em) {
    .col-hospital {
      width: 100%; } }

.card__hospital {
  position: relative;
  height: 40.8rem;
  width: 55%;
  background-color: #fff;
  border-radius: 1rem;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 1rem 1rem 2rem;
  backface-visibility: hidden;
  transition: all .6s;
  padding-left: 2rem;
  padding-right: 2rem; }
  @media only screen and (max-width: 75em) {
    .card__hospital {
      width: 65%; } }
  @media only screen and (max-width: 56.25em) {
    .card__hospital {
      width: 80%; } }
  @media only screen and (max-width: 25em) {
    .card__hospital {
      width: 95%; } }
  @media only screen and (max-width: 15.6em) {
    .card__hospital {
      height: 53.5rem; } }
  .card__hospital:hover .card__hospital__picture--img {
    width: 45%;
    clip-path: circle(40%);
    float: left;
    shape-outside: circle(35%);
    transform: translateX(-15%); }
  .card__hospital:hover .card__hospital__contents--title {
    font-size: 2.3rem;
    margin: 0rem auto 3rem auto; }
  .card__hospital:hover .card__hospital__contents--text,
  .card__hospital:hover .card__hospital__contents--text-p {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); }
  .card__hospital:hover .card__hospital__contents--text-p {
    text-indent: 2rem; }
  .card__hospital__picture {
    width: 100%;
    padding: 1rem; }
    .card__hospital__picture--img {
      width: 100%;
      border-top-left-radius: .5rem;
      border-top-right-radius: .5rem;
      float: none;
      clip-path: circle(100%);
      transition: all .6s ease; }
  .card__hospital__contents--title {
    margin: 0rem auto 2rem auto;
    font-size: 3rem;
    color: #3D4797;
    transition: all .4s ease;
    transition-delay: .2s; }
  .card__hospital__contents--text, .card__hospital__contents--text-p {
    visibility: hidden;
    opacity: 0;
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: justify;
    text-indent: 0;
    margin: 0;
    transform: translateY(4rem);
    transition: all .8s ease;
    transition-delay: .6s; }
    @media only screen and (max-width: 15.6em) {
      .card__hospital__contents--text, .card__hospital__contents--text-p {
        line-height: 1.4; } }
    @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
      .card__hospital__contents--text, .card__hospital__contents--text-p {
        line-height: 1.4; } }

.cont-disease {
  position: relative;
  width: 100%; }
  .cont-disease .dis_col {
    display: inline-block;
    position: relative;
    width: 24.5%;
    margin-bottom: 6rem; }
    @media only screen and (min-width: 56.3em) and (max-width: 74.9em) {
      .cont-disease .dis_col {
        width: 33%; } }
    @media only screen and (max-width: 56.25em) {
      .cont-disease .dis_col {
        width: 49%; } }
    @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
      .cont-disease .dis_col {
        width: 80%; } }
    @media only screen and (max-width: 25em) {
      .cont-disease .dis_col {
        width: 100%; } }
    .cont-disease .dis_col .dis {
      display: block;
      position: relative;
      height: 43.35rem;
      width: 35.25rem;
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0.1rem 0.1rem 4rem #000;
      margin: auto;
      backface-visibility: hidden;
      overflow: hidden; }
      .cont-disease .dis_col .dis .dis_title {
        height: 25%;
        padding: 1rem;
        position: relative;
        border-bottom: 1px solid #6d6d6d; }
        .cont-disease .dis_col .dis .dis_title-txt {
          margin: 0;
          position: relative;
          top: 50%;
          transform: translateY(-50%);
          font-size: 2.8rem;
          line-height: 1.4;
          color: #19593F; }
      .cont-disease .dis_col .dis .dis_img {
        position: absolute;
        height: 75%;
        z-index: 2;
        top: 25%;
        left: 0;
        transition: all .4s ease-out; }
        .cont-disease .dis_col .dis .dis_img-img {
          height: 100%;
          width: auto;
          position: absolute;
          left: 0;
          top: 0; }
      .cont-disease .dis_col .dis .dis_text {
        height: 62%;
        padding: 1rem;
        position: relative;
        overflow: hidden; }
        .cont-disease .dis_col .dis .dis_text-txt {
          position: relative;
          top: 100%;
          font-size: 1.8rem;
          text-align: center;
          margin: 0;
          transition-delay: .2s;
          transition: all .4s ease-in; }
      .cont-disease .dis_col .dis .dis_btn {
        position: relative;
        height: 13%;
        padding: 1rem; }
        .cont-disease .dis_col .dis .dis_btn-style {
          font-size: 2rem;
          background-color: #0053B3;
          color: #fff;
          position: absolute;
          padding: 0.7rem 5rem;
          border-radius: 1rem;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
          .cont-disease .dis_col .dis .dis_btn-style:hover {
            background-color: #147DFF;
            text-decoration: none; }
      .cont-disease .dis_col .dis:hover .dis_text-txt {
        top: 0%; }
      .cont-disease .dis_col .dis:hover .dis_img {
        top: 100%; }

.row-footer {
  width: 100%; }
  .row-footer .col-menu, .row-footer .col-contact, .row-footer .col-time, .row-footer .col-map {
    display: block;
    position: relative;
    float: left; }
  .row-footer .col-menu, .row-footer .col-contact, .row-footer .col-time {
    width: 20%; }
    @media only screen and (max-width: 56.25em) {
      .row-footer .col-menu, .row-footer .col-contact, .row-footer .col-time {
        width: 33%;
        margin-bottom: 6rem; } }
    @media only screen and (max-width: 25em) {
      .row-footer .col-menu, .row-footer .col-contact, .row-footer .col-time {
        width: 50%; } }
  @media only screen and (max-width: 25em) {
    .row-footer .col-time {
      width: 100%;
      margin-bottom: 4rem; } }
  .row-footer .col-map {
    width: 37%; }
    @media only screen and (max-width: 56.25em) {
      .row-footer .col-map {
        width: 100%; } }
  .row-footer .clearfix:after {
    content: "";
    display: table;
    clear: both; }

.footer__menu {
  font-size: 2rem;
  line-height: 1.5;
  color: #cfcfcf; }

.footer--hr {
  width: 80%;
  margin: 1rem auto;
  border-color: #6d6d6d; }

.footer-menu {
  padding: 1rem 0 1rem 3rem;
  list-style: none; }
  .footer-menu-box:hover .footer-menu-box--item {
    text-decoration: none;
    color: #0053B3; }
  .footer-menu-box--item {
    display: block;
    font-size: 2rem;
    text-decoration: none;
    transition: color .4s;
    text-align: left;
    color: #cfcfcf; }
  .footer-menu-box:not(:last-child) {
    margin-bottom: 1.8rem; }

.footer_icon {
  display: inline-block !important;
  font-size: 3rem;
  margin-right: 1rem;
  width: 3rem;
  color: #cfcfcf; }

.footer__contact {
  list-style: none;
  text-align: left;
  padding: 1rem;
  word-break: break-all; }
  .footer__contact-box {
    padding-left: 2rem;
    font-size: 2rem;
    text-decoration: none; }
    .footer__contact-box:not(:last-child) {
      margin-bottom: 1.5rem; }
    .footer__contact-box:hover .footer_icon {
      color: #0053B3; }
    .footer__contact-box:hover .footer__contact-box--item {
      text-decoration: none;
      color: #0053B3; }
    .footer__contact-box--item {
      display: inline-block;
      transform: translatey(-18%);
      color: #cfcfcf;
      transition: color .4s; }

.footer--adress {
  color: #cfcfcf;
  padding-top: .8rem;
  margin-bottom: 2rem; }

.footer__bottom--hr {
  margin: 0;
  margin-bottom: 1.5rem;
  border-color: #cfcfcf; }

.footer__bottom--text {
  font-size: 1.3rem;
  color: #cfcfcf; }

.footer__time {
  text-align: center;
  list-style: none; }
  .footer__time--item {
    padding-top: 1rem;
    color: #cfcfcf; }

/* Set the size of the div element that contains the map */
#map {
  height: 33rem;
  /* The height is 400 pixels */
  background-color: #eee; }

.goto-start {
  position: fixed;
  z-index: 999;
  right: 4rem;
  bottom: 6rem;
  border-radius: 50%;
  background-color: #6d6d6d;
  opacity: 0;
  width: 0;
  height: 0;
  transition: all .4s; }
  .goto-start--item {
    text-decoration: none;
    color: #393e46;
    transition: color .4s; }
  .goto-start:hover .goto-start--item {
    color: #eee; }
  @media only screen and (max-width: 37.5em) {
    .goto-start {
      right: 2rem;
      bottom: 2rem; } }

.goto-start-show {
  font-size: 4rem;
  width: 6.5rem;
  height: 6.5rem;
  opacity: .6;
  display: flex;
  justify-content: center;
  align-items: center; }

.infos-container {
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-auto-flow: row; }
  .infos-container .infos-apofthegma {
    grid-row: 1/2; }
    .infos-container .infos-apofthegma .apofthegma {
      position: relative;
      right: 0;
      text-align: right;
      font-weight: bold;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: .5px;
      color: #6d6d6d;
      margin-bottom: .5rem; }
    .infos-container .infos-apofthegma .Ermhneia {
      position: relative;
      text-align: right;
      right: 1rem;
      color: #6d6d6d;
      font-size: 2rem;
      margin-bottom: 0; }
    .infos-container .infos-apofthegma .ippokratis {
      position: relative;
      right: 1rem;
      text-align: right;
      color: #6d6d6d;
      margin-bottom: 7rem; }
  .infos-container .infos-minibio {
    grid-row: 2/-1;
    display: grid;
    grid-template-columns: 45rem 1fr;
    align-items: center; }
    .infos-container .infos-minibio .miniBio {
      align-self: center;
      position: relative;
      left: 0rem;
      margin: 0 4rem;
      font-size: 2.3rem;
      text-align: justify;
      line-height: 1.7;
      color: #6d6d6d; }
      .infos-container .infos-minibio .miniBio p button {
        position: relative;
        margin-top: 2rem;
        width: 15rem;
        font-size: 1.8rem; }
      .infos-container .infos-minibio .miniBio-btn {
        position: relative;
        padding: 1rem 2rem;
        border-radius: .5rem;
        width: 15rem;
        top: 2rem;
        font-size: 2.6rem;
        background-color: #0053B3;
        color: #fff; }
        .infos-container .infos-minibio .miniBio-btn:hover {
          text-decoration: none;
          background-color: #147DFF; }
      @media only screen and (max-width: 37.5em) {
        .infos-container .infos-minibio .miniBio {
          left: 0; } }
    .infos-container .infos-minibio .image-infos {
      justify-self: center;
      height: auto;
      width: 90%;
      border-radius: 15%; }
      @media only screen and (max-width: 37.5em) {
        .infos-container .infos-minibio .image-infos {
          width: auto;
          height: 100%; } }
    @media only screen and (max-width: 37.5em) {
      .infos-container .infos-minibio {
        grid-template-rows: 24rem max-content;
        grid-auto-flow: column;
        grid-template-columns: 1fr;
        grid-row-gap: 3rem; } }

/* style for logo*/
.logoImage img {
  width: 100%; }

/* style for ΔΗΜΗΤΡΗΣ ΣΜΑΙΛΙΣ MD ΓΕΝΙΚΟΣ ΧΕΙΡΟΥΡΓΟΣ */
.logoLetter {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: #412fd0;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .5rem;
  font-weight: 200; }
  @media only screen and (max-width: 100em) {
    .logoLetter {
      left: 14%;
      font-size: 2.1rem;
      line-height: 1.4;
      letter-spacing: 0.3rem; } }
  @media only screen and (min-width: 75.01em) and (max-width: 99.9em) {
    .logoLetter {
      left: 10%;
      font-size: 2rem;
      line-height: 1.4;
      letter-spacing: 0.2rem; } }
  @media only screen and (min-width: 56.3em) and (max-width: 74.9em) {
    .logoLetter {
      left: 8%;
      letter-spacing: 0; } }
  @media only screen and (max-width: 56.25em) {
    .logoLetter {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%; } }
  @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
    .logoLetter {
      font-size: 1.8rem;
      margin: 0;
      width: 80%;
      transform: translate(-48%, -50%);
      letter-spacing: 0.1rem; } }
  @media only screen and (max-width: 25em) {
    .logoLetter {
      left: 50%;
      top: 50%;
      width: 100%;
      font-size: 1.9rem; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .logoLetter {
      font-size: 1.5rem;
      letter-spacing: .1rem; } }
  @media only screen and (max-width: 15.6em) {
    .logoLetter {
      font-size: 1.4rem;
      letter-spacing: 0;
      line-height: 2;
      transform: translate(-48%, -50%);
      width: 90%; } }

.popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.85); }
  .popup:target {
    opacity: 1;
    visibility: visible; }
  .popup:target .popup__box {
    transform: translate(-50%, -50%) scale(1); }
  .popup__box {
    position: absolute;
    height: 60%;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    border-radius: 1rem;
    background-color: #fff;
    padding: 2rem;
    transition: all .4s;
    display: table; }
    .popup__box-imgbox {
      display: table-cell;
      position: relative;
      width: 34%;
      border-radius: 1rem;
      overflow: hidden; }
      .popup__box-imgbox-img {
        position: absolute;
        left: -20%;
        height: 100%; }
    .popup__box-text {
      display: table-cell;
      position: relative;
      width: 65%;
      vertical-align: middle; }
  .popup-exit {
    text-decoration: none;
    color: #6d6d6d;
    font-size: 2.4rem;
    font-weight: 700;
    position: absolute;
    top: 2rem;
    right: 3rem; }
    .popup-exit:hover {
      text-decoration: none;
      color: #393e46; }

.carousel-synergates {
  position: relative;
  width: 100%; }

.row-synergates {
  position: relative;
  width: 90%;
  margin: 0 auto; }
  @media only screen and (max-width: 25em) {
    .row-synergates {
      width: 100%; } }

.col-synergates {
  display: inline-block;
  position: relative;
  width: 100%;
  transform: scale(0.9); }

.synergates__box {
  position: relative;
  height: 60rem;
  width: 40rem;
  margin: 0 auto; }

.m-card {
  height: 100%;
  padding: 2rem;
  border-radius: .8rem;
  background-color: white;
  box-shadow: 0.8rem 2rem 1.5rem rgba(0, 0, 0, 0.4);
  backface-visibility: hidden; }
  .m-card__heading--1 {
    background-image: url("../image/doctors/trigka.jpg"); }
  .m-card__heading--2 {
    background-image: url("../image/doctors/zhshs.jpg"); }
  .m-card__heading--3 {
    background-image: url("../image/doctors/sioros.jpg"); }
  .m-card__heading--4 {
    background-image: url("../image/doctors/kanelopoulou.jpg"); }
  .m-card__heading--5 {
    background-image: url("../image/doctors/drikos.jpg"); }
  .m-card__contact {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 8rem;
    left: 0;
    top: 30%;
    background-image: linear-gradient(to right bottom, rgba(192, 192, 192, 0.6), rgba(85, 85, 85, 0.6));
    transform: skewY(-3deg);
    overflow: hidden;
    transition: all .4s ease;
    backface-visibility: hidden; }
    .m-card__contact ul {
      list-style-type: none;
      transform: skewY(3deg) translateY(-0.8rem);
      text-align: center; }
      .m-card__contact ul li {
        display: inline-block;
        margin: 1.7rem auto;
        font-size: 4rem;
        color: #444444;
        cursor: pointer;
        transition: all .2s ease; }
        .m-card__contact ul li:hover {
          transform: translateY(-0.6rem);
          transition: all .2s ease; }
          .m-card__contact ul li:hover.m-card__website {
            color: #2a84d8; }
          .m-card__contact ul li:hover.m-card__facebook {
            color: #3b5998; }
          .m-card__contact ul li:hover.m-card__instagram {
            color: #e95950; }
          .m-card__contact ul li:hover.m-card__twitter {
            color: #55acee; }
          .m-card__contact ul li:hover.m-card__mail {
            color: #dd4b39; }
          .m-card__contact ul li:hover:after {
            content: "";
            display: block;
            width: 100%;
            height: .8rem;
            background-color: rgba(0, 0, 0, 0.7);
            filter: blur(0.8rem); }
        .m-card__contact ul li:active {
          transform: translateY(-0.2rem);
          transition: all .2s ease; }
          .m-card__contact ul li:active:after {
            transform: translateY(-0.3rem);
            height: .4rem;
            background-color: rgba(0, 0, 0, 0.9);
            filter: blur(0.5rem); }
        .m-card__contact ul li:not(:last-child) {
          margin-right: 2rem; }
  .m-card__hr {
    border: none;
    border-bottom: 0.2rem solid #b1b1b1;
    margin-bottom: 2rem; }
  .m-card__details {
    text-align: center; }
    .m-card__details--name {
      font-size: 2.5rem;
      letter-spacing: .3rem;
      margin-bottom: 1.3rem;
      color: #5e5e5e; }
    .m-card__details--idiotita {
      display: inline-block;
      font-size: 2rem;
      letter-spacing: .3rem;
      color: #5e5e5e;
      padding-bottom: .3rem;
      border-bottom: 0.2rem solid lightgray; }
  .m-card:hover .m-card__contact {
    opacity: 1;
    top: 60%; }

/* class */
/* div for first slide carousel */
.div-carousel {
  position: relative;
  width: 100%;
  height: 83rem;
  text-align: center;
  /* top: 0; */
  background-image: url("../image/center_slider/image1-min.jpg");
  background-position: center;
  background-size: cover; }
  @media only screen and (max-width: 15.6em) {
    .div-carousel {
      height: 50rem; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .div-carousel {
      height: 52rem; } }
  @media only screen and (max-width: 25em) {
    .div-carousel {
      height: 55rem; } }
  @media only screen and (max-width: 25em) and (orientation: landscape) {
    .div-carousel {
      height: 35rem; } }

/* id of elements for carousel*/
.carousel_height {
  height: 95%; }

.social__rate__box {
  position: relative;
  margin: 0 auto 2rem auto;
  padding: 1rem 5rem;
  max-height: 95%;
  width: 70%;
  background-color: rgba(244, 81, 30, 0.5);
  border-radius: .8rem;
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.5);
  transform: skewX(-10deg); }
  @media only screen and (max-width: 37.5em) {
    .social__rate__box {
      transform: none;
      width: 90%; } }
  .social__rate__box__header {
    width: 20rem;
    height: 20rem;
    transform: skewX(10deg);
    position: relative;
    float: left;
    shape-outside: circle(50% at 50%); }
    @media only screen and (max-width: 37.5em) {
      .social__rate__box__header {
        transform: none; } }
    @media only screen and (max-width: 25em) {
      .social__rate__box__header {
        shape-outside: circle(50% at 30%); } }
    .social__rate__box__header--img {
      display: block; }
      .social__rate__box__header--img--1 {
        background-image: url("../image/social/POPIKALOTYXOY.jpg"); }
      .social__rate__box__header--img--2 {
        background-image: url("../image/social/vasogatou.jpg"); }
      .social__rate__box__header--img--3 {
        background-image: url("https://lh6.googleusercontent.com/-5cI4HGfanwI/AAAAAAAAAAI/AAAAAAAAAAA/hDGfFDm0hf4/w160-h160-p-rp-mo-br100/photo.jpg"); }
  .social__rate__box__text {
    display: block;
    width: 100%;
    text-align: justify; }
    .social__rate__box__text--txt {
      font-size: 2.8rem;
      word-spacing: .5rem;
      color: #eee;
      line-height: 1.5; }
      @media only screen and (max-width: 25em) {
        .social__rate__box__text--txt {
          font-size: 1.8rem;
          word-spacing: normal; } }
  .social__rate__box__date {
    position: relative;
    bottom: 0;
    left: 0;
    width: 50%;
    text-align: left;
    transform: skewX(10deg);
    color: #393e46; }
    @media only screen and (max-width: 37.5em) {
      .social__rate__box__date {
        transform: none; } }
    .social__rate__box__date--person {
      display: inline-block;
      font-size: 1.7rem; }
      .social__rate__box__date--person::after {
        content: "|";
        margin-left: 1rem; }
    .social__rate__box__date--datetime {
      margin-left: 1rem;
      display: inline-block;
      font-size: 1.2rem; }

/* to top div me tis grhgores pplhrofories */
.topDiv {
  position: relative;
  height: 8rem;
  width: 100%;
  /*prepei na to do ligo sto synoliko z-index*/
  background-color: #45c8db; }
  @media only screen and (max-width: 15.6em) {
    .topDiv {
      height: 7rem; } }

/* topmedia style */
.fab {
  display: block; }

.topMedia {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 20px;
  right: 0;
  display: flex;
  margin-right: 2rem; }
  .topMedia li {
    position: relative;
    list-style-type: none;
    margin: 0 .4rem;
    /* logo for phone */
    /* logo gia to facebook */
    /* logo gia to twiter */
    /* logo for instagram */
    /* logo for email */ }
    .topMedia li:hover a i::before {
      transform: rotateX(90deg) translateY(-50%); }
    .topMedia li a {
      width: 4rem;
      height: 4rem;
      display: block;
      transition: 0.5s;
      opacity: 0.7; }
      .topMedia li a i {
        width: 100%;
        height: 100%; }
        .topMedia li a i::before {
          text-align: center;
          line-height: 4rem;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          font-size: 3rem;
          opacity: 0.3;
          color: #000;
          border: solid 1px #000;
          border-radius: .5rem;
          background-color: transparent;
          transform-origin: top;
          transition: 0.3s; }
        .topMedia li a i::after {
          text-align: center;
          line-height: 4rem;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          font-size: 3rem;
          opacity: 1;
          transform-origin: bottom;
          transform: rotateX(90deg) translateY(50%);
          transition: 0.3s; }
    .topMedia li a::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -20%;
      width: 4rem;
      height: .8rem;
      background-color: #000;
      transition: 0.6s;
      opacity: 0;
      transform: scale(0.3);
      filter: blur(0.4rem); }
    .topMedia li:hover a::before {
      transform: scale(1);
      opacity: 0.7; }
    .topMedia li:hover {
      transform: translateY(-20%); }
    .topMedia li:hover a i::after {
      transform: rotateX(0deg) translateY(0); }
    .topMedia li:nth-child(1) a i::before,
    .topMedia li:nth-child(1) a i::after {
      content: "\f095"; }
    .topMedia li:nth-child(1) a i::after {
      background-color: #2dbb4c; }
    .topMedia li:nth-child(2) a i::before,
    .topMedia li:nth-child(2) a i::after {
      content: "\f099"; }
    .topMedia li:nth-child(2) a i::after {
      background-color: #55acce; }
    .topMedia li:nth-child(3) a i::before,
    .topMedia li:nth-child(3) a i::after {
      content: "\f0e0"; }
    .topMedia li:nth-child(3) a i::after {
      background-color: #f4511e; }
    @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
      .topMedia li {
        margin: 0 1rem; } }
    @media only screen and (max-width: 15.6em) {
      .topMedia li {
        margin: 0 1rem; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .topMedia {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      right: auto;
      margin-right: 0; } }
  @media only screen and (max-width: 15.6em) {
    .topMedia {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      right: auto;
      margin-right: 0; } }

.jarallax {
  position: relative;
  z-index: 0;
  height: 37.5rem;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(69, 200, 219, 0.5)); }
  .jarallax-img {
    position: absolute;
    object-fit: cover;
    filter: blur(2px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; }

.test_jarallax {
  background-image: linear-gradient(to left bottom, rgba(69, 200, 219, 0.6), rgba(255, 255, 255, 0.8)); }

.wrapimage__fixed {
  height: 100%;
  margin: 0; }
  .wrapimage__fixed__wrap--disease {
    background-image: linear-gradient(to left bottom, rgba(69, 200, 219, 0.6), rgba(255, 255, 255, 0.8)), url("../image/wrapimage/wrap_surgery.png"); }
  .wrapimage__fixed__wrap--doctors {
    background-image: linear-gradient(to left bottom, rgba(69, 200, 219, 0.7), rgba(255, 255, 255, 0.8)), url("../image/wrapimage/wrapimage_doctors.jpg"); }

/* style for navbar */
.activemenu {
  background-color: #395D74 !important;
  color: #fff !important; }

.topleftbar {
  position: absolute;
  top: -5rem;
  z-index: 12; }

/* circle disigne */
.boxDiv {
  position: relative;
  background-color: #fff;
  width: 30rem;
  height: 6rem;
  border-top-right-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem; }
  @media only screen and (min-width: 75.01em) and (max-width: 99.9em) {
    .boxDiv {
      width: 18rem; } }
  @media only screen and (max-width: 75em) {
    .boxDiv {
      width: 16rem; } }
  @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
    .boxDiv {
      width: 10rem; } }
  @media only screen and (max-width: 25em) {
    .boxDiv {
      display: none; } }

.circleDiv {
  position: absolute;
  top: 0;
  left: 22rem;
  background-color: #fff;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  box-shadow: 0rem 0rem 2rem grey; }
  @media only screen and (min-width: 75.01em) and (max-width: 99.9em) {
    .circleDiv {
      left: 10rem; } }
  @media only screen and (max-width: 75em) {
    .circleDiv {
      left: 10rem; } }
  @media only screen and (min-width: 56.3em) and (max-width: 74.9em) {
    .circleDiv {
      left: 8rem; } }
  @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
    .circleDiv {
      left: 1rem; } }
  @media only screen and (max-width: 25em) {
    .circleDiv {
      left: 1rem;
      width: 8rem;
      height: 8rem;
      top: 5.5rem;
      box-shadow: 0rem 0rem 1rem grey; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .circleDiv {
      width: 5.5rem;
      height: 5.5rem;
      top: 5.7rem;
      left: .5rem;
      box-shadow: 0rem 0rem 0rem grey; } }
  @media only screen and (max-width: 15.6em) {
    .circleDiv {
      left: 0.3rem;
      width: 6rem;
      height: 6rem;
      box-shadow: 0rem 0rem 0rem grey; } }

.center-navbar {
  position: absolute;
  top: 0;
  width: 86.9%;
  border-bottom-left-radius: 3.8rem;
  height: 6rem;
  right: 0;
  z-index: 10;
  background-color: #fff;
  transition: opacity ease;
  transition-duration: 0.7s;
  opacity: 0.6; }
  .center-navbar:hover {
    opacity: 1; }
  @media only screen and (min-width: 75.01em) and (max-width: 99.9em) {
    .center-navbar {
      width: 91%; } }
  @media only screen and (max-width: 75em) {
    .center-navbar {
      width: 91%; } }
  @media only screen and (max-width: 56.25em) {
    .center-navbar {
      width: 88%; } }
  @media only screen and (min-width: 37.6em) and (max-width: 45em) {
    .center-navbar {
      width: 85%; } }
  @media only screen and (max-width: 37.5em) {
    .center-navbar {
      width: 84%; } }
  @media only screen and (min-width: 25.01em) and (max-width: 37.4em) {
    .center-navbar {
      width: 92%; } }
  @media only screen and (max-width: 25em) {
    .center-navbar {
      width: 100%;
      opacity: 1;
      border-bottom-left-radius: 0; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .center-navbar {
      height: 7rem; } }
  @media only screen and (max-width: 15.6em) {
    .center-navbar {
      height: 7rem; } }

.navigation__bar {
  position: absolute;
  right: 0;
  height: 100%;
  cursor: pointer; }
  .navigation__bar__ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    display: block; }
    @media only screen and (max-width: 56.25em) {
      .navigation__bar__ul {
        display: none; } }
    .navigation__bar__ul-link {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: left;
      height: inherit;
      float: left;
      padding: 0 2.3rem;
      background-color: #fff;
      cursor: pointer;
      transition: all .6s; }
      .navigation__bar__ul-link:hover {
        background-color: #4D7C99; }
      .navigation__bar__ul-link:hover .navigation__bar__ul-link-title {
        text-decoration: none;
        color: #fff; }
      .navigation__bar__ul-link-title {
        font-size: 2.2rem;
        color: #412fd0;
        text-decoration: none;
        position: relative;
        transition: color .4s; }
      @media only screen and (min-width: 56.3em) and (max-width: 74.9em) {
        .navigation__bar__ul-link {
          padding: 0 1.4rem; } }
      @media only screen and (max-width: 56.25em) {
        .navigation__bar__ul-link {
          float: none;
          height: auto;
          padding: 1rem 2.3rem; } }
    .navigation__bar__ul-second {
      display: none;
      position: absolute;
      background-color: #fff;
      top: 100.6%;
      left: 15.6%;
      list-style: none; }
      @media only screen and (max-width: 56.25em) {
        .navigation__bar__ul-second {
          position: relative;
          top: 0;
          left: 0; } }
      .navigation__bar__ul-second .second__link-1,
      .navigation__bar__ul-second .second__link-2,
      .navigation__bar__ul-second .second__link-3,
      .navigation__bar__ul-second .second__link-4,
      .navigation__bar__ul-second .second__link-5,
      .navigation__bar__ul-second .second__link-6 {
        display: block;
        padding: 1rem 1.5rem 1rem 1.5rem;
        border-bottom: 1px solid #6d6d6d;
        transition: all .6s; }
        .navigation__bar__ul-second .second__link-1:hover,
        .navigation__bar__ul-second .second__link-2:hover,
        .navigation__bar__ul-second .second__link-3:hover,
        .navigation__bar__ul-second .second__link-4:hover,
        .navigation__bar__ul-second .second__link-5:hover,
        .navigation__bar__ul-second .second__link-6:hover {
          background-color: #55acce; }
        .navigation__bar__ul-second .second__link-1:hover .second__link-title,
        .navigation__bar__ul-second .second__link-2:hover .second__link-title,
        .navigation__bar__ul-second .second__link-3:hover .second__link-title,
        .navigation__bar__ul-second .second__link-4:hover .second__link-title,
        .navigation__bar__ul-second .second__link-5:hover .second__link-title,
        .navigation__bar__ul-second .second__link-6:hover .second__link-title {
          text-decoration: none;
          color: #fff; }
        .navigation__bar__ul-second .second__link-1 .second__link-title-1,
        .navigation__bar__ul-second .second__link-1 .second__link-title-2,
        .navigation__bar__ul-second .second__link-1 .second__link-title-3,
        .navigation__bar__ul-second .second__link-1 .second__link-title-4,
        .navigation__bar__ul-second .second__link-1 .second__link-title-5,
        .navigation__bar__ul-second .second__link-1 .second__link-title-6,
        .navigation__bar__ul-second .second__link-2 .second__link-title-1,
        .navigation__bar__ul-second .second__link-2 .second__link-title-2,
        .navigation__bar__ul-second .second__link-2 .second__link-title-3,
        .navigation__bar__ul-second .second__link-2 .second__link-title-4,
        .navigation__bar__ul-second .second__link-2 .second__link-title-5,
        .navigation__bar__ul-second .second__link-2 .second__link-title-6,
        .navigation__bar__ul-second .second__link-3 .second__link-title-1,
        .navigation__bar__ul-second .second__link-3 .second__link-title-2,
        .navigation__bar__ul-second .second__link-3 .second__link-title-3,
        .navigation__bar__ul-second .second__link-3 .second__link-title-4,
        .navigation__bar__ul-second .second__link-3 .second__link-title-5,
        .navigation__bar__ul-second .second__link-3 .second__link-title-6,
        .navigation__bar__ul-second .second__link-4 .second__link-title-1,
        .navigation__bar__ul-second .second__link-4 .second__link-title-2,
        .navigation__bar__ul-second .second__link-4 .second__link-title-3,
        .navigation__bar__ul-second .second__link-4 .second__link-title-4,
        .navigation__bar__ul-second .second__link-4 .second__link-title-5,
        .navigation__bar__ul-second .second__link-4 .second__link-title-6,
        .navigation__bar__ul-second .second__link-5 .second__link-title-1,
        .navigation__bar__ul-second .second__link-5 .second__link-title-2,
        .navigation__bar__ul-second .second__link-5 .second__link-title-3,
        .navigation__bar__ul-second .second__link-5 .second__link-title-4,
        .navigation__bar__ul-second .second__link-5 .second__link-title-5,
        .navigation__bar__ul-second .second__link-5 .second__link-title-6,
        .navigation__bar__ul-second .second__link-6 .second__link-title-1,
        .navigation__bar__ul-second .second__link-6 .second__link-title-2,
        .navigation__bar__ul-second .second__link-6 .second__link-title-3,
        .navigation__bar__ul-second .second__link-6 .second__link-title-4,
        .navigation__bar__ul-second .second__link-6 .second__link-title-5,
        .navigation__bar__ul-second .second__link-6 .second__link-title-6 {
          font-size: 2.2rem;
          color: #412fd0;
          text-decoration: none;
          transition: color .4s; }
          .navigation__bar__ul-second .second__link-1 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-1 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-1 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-1 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-1 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-1 .second__link-title-6 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-2 .second__link-title-6 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-3 .second__link-title-6 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-4 .second__link-title-6 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-5 .second__link-title-6 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-1 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-2 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-3 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-4 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-5 .nav_symbole-space,
          .navigation__bar__ul-second .second__link-6 .second__link-title-6 .nav_symbole-space {
            margin-right: 1rem; }
    .navigation__bar__ul-second-bio {
      display: none;
      position: absolute;
      background-color: #fff;
      top: 100.6%;
      left: 52.7%;
      list-style: none; }
      @media only screen and (max-width: 56.25em) {
        .navigation__bar__ul-second-bio {
          position: relative;
          top: 0;
          left: 0; } }
      .navigation__bar__ul-second-bio .second__link {
        display: block;
        padding: 1rem 1.5rem 1rem 1.5rem;
        border-bottom: 1px solid #6d6d6d;
        transition: all .6s; }
        .navigation__bar__ul-second-bio .second__link:hover {
          background-color: #55acce; }
        .navigation__bar__ul-second-bio .second__link:hover .second__link-title {
          text-decoration: none;
          color: #fff; }
        .navigation__bar__ul-second-bio .second__link .second__link-title {
          font-size: 2.2rem;
          color: #412fd0;
          text-decoration: none;
          transition: color .4s; }
          .navigation__bar__ul-second-bio .second__link .second__link-title .nav_symbole-space {
            margin-right: 1rem; }
    .navigation__bar__ul-third-1, .navigation__bar__ul-third-2, .navigation__bar__ul-third-3, .navigation__bar__ul-third-4, .navigation__bar__ul-third-5, .navigation__bar__ul-third-6, .navigation__bar__ul-third-7 {
      position: inherit;
      background-color: #fff;
      list-style: none;
      display: none; }
    .navigation__bar__ul-third-1 {
      left: -84.1%;
      top: 0%; }
    .navigation__bar__ul-third-2 {
      left: -88.3%;
      top: 16.9%; }
    .navigation__bar__ul-third-3 {
      left: -70.1%;
      top: 33.5%; }
    .navigation__bar__ul-third-4 {
      left: -72.7%;
      top: 50%; }
    .navigation__bar__ul-third-5 {
      left: -71.5%;
      top: 66.8%; }
    .navigation__bar__ul-third-6 {
      left: -67.3%;
      top: 83.5%; }
    .navigation__bar__ul-third-7 {
      left: -135%;
      top: 83.5%; }

.third__link {
  display: block;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-bottom: 1px solid #6d6d6d;
  transition: all .6s; }
  .third__link:hover {
    background-color: #55acce; }
  .third__link:hover .third__link-title {
    color: #fff;
    text-decoration: none; }
  .third__link-title {
    font-size: 2.2rem;
    color: #412fd0;
    text-decoration: none;
    transition: color .4s; }

.expand {
  display: none;
  height: 100%;
  font-size: 5rem;
  color: #393e46;
  min-width: 10rem;
  position: relative; }
  .expand:hover {
    background-color: #4D7C99;
    color: #fff; }
  @media only screen and (max-width: 56.25em) {
    .expand {
      display: block; } }
  @media only screen and (max-width: 25em) {
    .expand {
      font-size: 4rem;
      min-width: 7rem; } }
  @media only screen and (max-width: 15.6em) {
    .expand {
      font-size: 3.5rem;
      min-width: 5rem; } }

.sb-expand {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -52%); }

@media only screen and (max-width: 56.25em) {
  .nav-expanded {
    display: block; }
  .nav-expanded-bio {
    display: block; }
  .nav-expanded-bio-d {
    display: block; } }

.map_contact {
  width: 100% !important; }

.back {
  height: 90vh;
  background-color: white;
  position: relative;
  padding-top: 7rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 37.5em) {
    .back {
      height: auto; } }
  .back__divAppointment {
    position: relative;
    height: 80%;
    width: 90%;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(48, 127, 222, 0.8));
    border-radius: 1.5rem;
    transform: skewX(-10deg);
    overflow: hidden;
    border: 2px solid #616161;
    z-index: 1; }
    @media only screen and (max-width: 37.5em) {
      .back__divAppointment {
        height: 96%;
        width: 100%;
        background-image: linear-gradient(to left bottom, rgba(255, 255, 255, 0.6), rgba(48, 127, 222, 0.6));
        transform: skewX(0deg);
        z-index: 1; } }
    @media only screen and (max-width: 56.25em) {
      .back__divAppointment {
        width: 100%;
        transform: skewX(0deg); } }
    @media only screen and (min-width: 56.3em) and (max-width: 74.9em) {
      .back__divAppointment {
        height: 90%; } }
    .back__divAppointment__contents {
      transform: skewX(10deg);
      height: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: 2rem 0; }
      @media only screen and (max-width: 37.5em) {
        .back__divAppointment__contents {
          transform: skewX(0deg);
          height: 100%;
          display: grid;
          grid-template-columns: none;
          grid-template-rows: repeat(2, 1fr);
          row-gap: 2rem; } }
      @media only screen and (max-width: 56.25em) {
        .back__divAppointment__contents {
          transform: skewX(0deg); } }
      .back__divAppointment__contents-textbox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem; }
      .back__divAppointment__contents-email {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        padding: 2rem; }

.background__appointment {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to left bottom, rgba(100, 149, 177, 0.6), rgba(255, 255, 255, 0.7)), url("../../image/wrapimage/wrap_surgery-min-2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: blur(5px);
  position: absolute;
  left: 0;
  top: 0; }

*::selection {
  background-color: transparent; }

.text-bold {
  font-weight: bold;
  border-bottom: 1px solid currentColor;
  margin: 0 1rem; }

.section-cv {
  padding: 10rem 5rem 5rem;
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(min-content, 1fr); }
  @media only screen and (max-width: 15.6em) {
    .section-cv {
      padding: 5rem 1rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-cv {
      padding: 5rem 2rem;
      display: block;
      grid-template-columns: none;
      word-break: break-all; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .section-cv {
      word-break: break-word; } }

.top-block {
  height: 15vh; }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .top-block {
      height: 10vh; } }

.img-fixed {
  width: 40% !important;
  height: auto;
  position: fixed;
  left: 2.2vw;
  bottom: 0px; }

.img-absolute {
  width: 40% !important;
  height: auto;
  position: absolute;
  left: 2.2vw;
  bottom: 0px; }

.margin-bm {
  margin-bottom: 5rem; }

.margin-bmb {
  margin-bottom: 7rem; }

.container-cv-img {
  width: 25vw; }

.container-cv-top {
  padding-bottom: 15rem; }
  @media only screen and (max-width: 15.6em) {
    .container-cv-top {
      padding-bottom: 3rem; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .container-cv-top {
      padding-bottom: 5rem; } }
  .container-cv-top-title {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 5px;
    word-spacing: 5px;
    -webkit-font-smoothing: antialiased;
    color: #5d5d5d;
    border-bottom: 1px solid currentColor;
    border-top: 1px solid currentColor;
    width: fit-content;
    margin: 0 auto 5rem;
    padding: 1.5rem; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-top-title {
        font-size: 3rem;
        letter-spacing: 3px;
        word-spacing: 3px;
        margin: 0px auto 1rem;
        padding: 0.5rem; } }
  .container-cv-top-minibio {
    padding: 1.5rem;
    font-size: 2.5rem;
    letter-spacing: 2px;
    font-weight: 500;
    color: dimgrey;
    line-height: 3;
    margin: 0 auto;
    width: 80%; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-top-minibio {
        padding: 0.5rem;
        font-size: 1.7rem;
        letter-spacing: 2px;
        font-weight: 500;
        color: dimgrey;
        margin: 0 auto;
        width: 100%;
        line-height: 1.5; } }
    @media only screen and (max-width: 37.5em) {
      .container-cv-top-minibio {
        width: 95%; } }
    @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
      .container-cv-top-minibio {
        padding: 1rem;
        line-height: 2;
        font-size: 2rem; } }

.container-cv-details {
  display: grid;
  row-gap: 15rem; }
  @media only screen and (max-width: 15.6em) {
    .container-cv-details {
      row-gap: 5rem; } }
  .container-cv-details-title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 3px;
    word-spacing: 5px;
    padding: 1.5rem;
    border-bottom: 1px solid currentColor;
    width: fit-content;
    margin: 0 auto 7rem;
    color: #5d5d5d; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-details-title {
        font-size: 2rem;
        font-weight: 500;
        word-spacing: 3px;
        padding: 0.5rem;
        border-bottom: 1px solid currentColor;
        margin: 0 auto 2rem; } }
  .container-cv-details--title {
    font-size: 2.5rem;
    letter-spacing: 2px;
    font-weight: 400;
    color: #5d5d5d;
    padding: 1rem;
    margin: 0 auto 5rem;
    border-bottom: 1px solid currentColor;
    border-top: 1px solid currentColor;
    width: fit-content; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-details--title {
        font-size: 2rem;
        letter-spacing: 1.5px;
        font-weight: 400;
        padding: 0.5rem;
        margin: 0 auto 2rem; } }
  .container-cv-details---title {
    font-size: 2.3rem;
    letter-spacing: 2px;
    font-weight: 400;
    color: #5d5d5d;
    padding: 0.8rem;
    margin: 0 auto 2rem;
    border-bottom: 1px solid currentColor;
    width: fit-content; }
  .container-cv-details-land {
    display: grid;
    row-gap: 5rem;
    margin-bottom: 5rem; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-details-land {
        row-gap: 2rem;
        margin-bottom: 2rem; } }
    .container-cv-details-land-title {
      font-size: 2.5rem;
      color: darkolivegreen;
      font-weight: 500;
      margin-bottom: 0.8rem; }
      @media only screen and (max-width: 15.6em) {
        .container-cv-details-land-title {
          font-size: 2rem;
          margin-bottom: 1rem; } }
    .container-cv-details-land-answer {
      font-size: 2.1rem;
      color: darkolivegreen;
      font-weight: 500; }
      @media only screen and (max-width: 15.6em) {
        .container-cv-details-land-answer {
          font-size: 1.7rem; } }
  .container-cv-details-port {
    display: grid;
    grid-template-columns: max-content max-content;
    margin-bottom: 5rem;
    justify-content: center;
    row-gap: 5rem;
    column-gap: 2rem;
    align-items: center; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-details-port {
        grid-template-columns: none;
        margin-bottom: 2rem;
        row-gap: 1rem;
        column-gap: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-cv-details-port {
        grid-template-columns: max-content minmax(min-content, 1fr); } }
    .container-cv-details-port-bg {
      display: grid;
      grid-template-columns: max-content minmax(min-content, 65rem);
      margin-bottom: 5rem;
      justify-content: center;
      row-gap: 5rem;
      column-gap: 2rem;
      align-items: center; }
      @media only screen and (max-width: 15.6em) {
        .container-cv-details-port-bg {
          grid-template-columns: none;
          margin-bottom: 2rem;
          row-gap: 1rem;
          column-gap: 0; } }
    .container-cv-details-port-title {
      font-size: 2.5rem;
      color: darkolivegreen;
      font-weight: 500; }
      @media only screen and (max-width: 15.6em) {
        .container-cv-details-port-title {
          font-size: 1.7rem;
          margin: 0; } }
    .container-cv-details-port-answer {
      font-size: 2.1rem;
      color: darkolivegreen;
      font-weight: 500;
      justify-self: left; }
      @media only screen and (max-width: 15.6em) {
        .container-cv-details-port-answer {
          font-size: 1.7rem; } }
  .container-cv-details-ul {
    list-style: none; }
  .container-cv-details-list {
    font-size: 2.3rem;
    width: 50vw;
    margin: 0 auto 5rem;
    text-align: center;
    color: darkolivegreen;
    -ms-word-break: break-all;
    word-break: break-word; }
    .container-cv-details-list:last-child {
      margin: 0 auto; }
    @media only screen and (max-width: 15.6em) {
      .container-cv-details-list {
        font-size: 1.7rem;
        width: 90vw;
        margin: 0 auto 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-cv-details-list {
        width: 90vw; } }
  .container-cv-details--prosopika:last-child, .container-cv-details--etaireies:last-child, .container-cv-details--ergo:last-child, .container-cv-details--synedria:last-child, .container-cv-details--seminaria:last-child {
    margin-bottom: 0; }

h3 {
  font-size: 1.73rem;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2; }

.select-desease {
  min-height: 30vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 15rem 10rem 5rem;
  color: white;
  position: relative; }
  .select-desease-pagkreas {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url(../../image/disease/karkinos_pagkreatos-min.jpg); }
  .select-desease-enteroy {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/karkinos_paxeos_enteroy-min.jpg"); }
  .select-desease-stomaxou {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/karkinos_stomaxoy_leptoy_enteroy-min.jpg"); }
  .select-desease-mastos {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/karkinos_mastoy-min.jpg"); }
  .select-desease-laparoskopiki {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/laparoskopiki-min.jpg"); }
  .select-desease-adenas {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/thyreoeidhs-min.jpg"); }
  .select-desease-kiles {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/kiles-min.jpg"); }
  .select-desease-proktos {
    background-image: linear-gradient(to left bottom, rgba(0, 35, 56, 0.9), rgba(0, 41, 9, 0.9)), url("../../image/disease/pathiseis_proktoy-min.jpg"); }
  @media only screen and (max-width: 112.5em) {
    .select-desease {
      padding: 10rem 5rem 5rem; } }
  @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
    .select-desease {
      padding: 10rem 1rem 3rem; } }
  .select-desease-title {
    font-size: 6rem;
    letter-spacing: 5px;
    margin-bottom: 5rem; }
    @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
      .select-desease-title {
        font-size: 2.7rem;
        margin-bottom: 3rem; } }
  .select-desease-details {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto; }
    @media only screen and (max-width: 112.5em) {
      .select-desease-details {
        width: 80%; } }
    @media only screen and (max-width: 37.5em) {
      .select-desease-details {
        width: 100%; } }
    .select-desease-details-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      padding: 2rem; }
      @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
        .select-desease-details-text {
          padding: .5rem; } }
      .select-desease-details-text--title {
        font-size: 3rem;
        margin-bottom: 2rem;
        padding: 2rem;
        border-bottom: 1px solid white; }
        @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
          .select-desease-details-text--title {
            font-size: 2.5rem;
            padding: 1rem; } }
      .select-desease-details-text--text {
        text-align: left;
        font-size: 2.3rem;
        margin-bottom: 4rem;
        line-height: 2;
        width: 90%;
        color: #e5ffe2; }
        @media only screen and (max-width: 112.5em) {
          .select-desease-details-text--text {
            width: 100%; } }
        @media only screen and (max-width: 37.5em) {
          .select-desease-details-text--text {
            text-align: justify; } }
        @media only screen and (min-width: 15.7em) and (max-width: 24.9em) {
          .select-desease-details-text--text {
            font-size: 2.1rem;
            line-height: 1.7; } }

.section-navigationbar {
  position: relative; }

/* section for information */
.section-infos {
  width: 100%;
  padding: 5rem 2rem;
  background-color: #fff; }

.section-disease-2,
.section-disease {
  width: 100%;
  padding: 2rem 0 4rem; }

.section-disease {
  background-image: linear-gradient(to left bottom, rgba(100, 149, 177, 0.6), rgba(255, 255, 255, 0.7)), url("../image/disease/disease_background-1-min.jpg"); }

.section-disease-2 {
  padding: 10rem 0;
  background-image: linear-gradient(to right bottom, rgba(163, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url("../image/disease/disease_background-2-min.jpg"); }

.section-wrapimage {
  height: 37.5rem; }

.section-synergates {
  position: relative;
  width: 100%;
  background-image: linear-gradient(to right bottom, rgba(85, 172, 206, 0.8), rgba(255, 255, 255, 0.8)), url("../image/doctors/doctor_background-min.jpg");
  background-size: cover;
  padding: 2rem 0 8rem; }

/* section for apoinment */
.section-appointment .apointmentDiv {
  position: relative;
  height: 28rem;
  border-radius: 0;
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #fff;
  backface-visibility: hidden; }

/* section for hospital */
.section-hospital {
  background-image: linear-gradient(to left top, rgba(65, 47, 208, 0.6), rgba(45, 187, 76, 0.8) 70%), url("../image/hospitals/clinics_background-min.jpg");
  background-size: cover;
  background-position: center;
  padding: 6.5rem 0 8rem; }

.section-social {
  min-height: 72rem;
  background-image: linear-gradient(to left top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(to right bottom, rgba(59, 89, 152, 0.8) 50%, rgba(45, 187, 76, 0.6)), url("../image/social/social_background-min.jpg");
  background-size: cover;
  position: relative;
  padding: 5rem 0; }
  .section-social .row {
    height: 100%; }

.section-footer {
  padding: 2rem;
  background-color: #363636; }
  @media only screen and (max-width: 25em) {
    .section-footer {
      padding: .5rem; } }

.section-footer__bottom {
  background-color: #363636;
  padding-bottom: 1rem; }

/* Html Elements */
html {
  font-family: "Roboto", serif;
  font-size: 62.5%; }
  @media only screen and (max-width: 112.5em) {
    html {
      font-size: 58.5%; } }
  @media only screen and (max-width: 100em) {
    html {
      font-size: 51%; } }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 48%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 45%; } }

body {
  /* fonts for all site */
  background-color: #e3e3e3;
  text-align: center; }

*, p {
  padding: 0;
  margin: 0; }