.body {
  background-image: url("../images/doc-background.png");
  background-repeat: repeat;
}

.header {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  padding: 15px;
  font-weight: 900;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  -webkit-box-shadow: 0 8px 5px -5px rgba(255, 255, 255, 0.2) inset,
              0 -8px 5px -5px rgba(0, 0, 0, 0.2) inset,
              0 1px 5px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 8px 5px -5px rgba(255, 255, 255, 0.2) inset,
              0 -8px 5px -5px rgba(0, 0, 0, 0.2) inset,
              0 1px 5px 0 rgba(0, 0, 0, 0.3);
  color: #FFF;
  background: rgb(22,77,128);
  background: -o-linear-gradient(295deg, rgba(22,77,128,1) 50%, rgba(28,87,142,1) 50%);
  background: linear-gradient(155deg, rgba(22,77,128,1) 50%, rgba(28,87,142,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#164d80",endColorstr="#1c578e",GradientType=1);
}

.header--top {
  margin-top: 120px;
}

.header__name {
  text-decoration: underline;
}

.content {
  background: rgba(255, 255, 255, 0.7);
  width: 90%;
  max-width: 1175px;
  margin: 0px auto;
  border-bottom: 5px dashed rgba(0, 0, 0, 0.1);
  border-right: 5px dashed rgba(0, 0, 0, 0.1);
  border-left: 5px dashed rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  -webkit-box-shadow: 3px 3px 0 0 rgba(255, 255, 255, 0.5),
              -3px 3px 0 0 rgba(255, 255, 255, 0.5);
          box-shadow: 3px 3px 0 0 rgba(255, 255, 255, 0.5),
              -3px 3px 0 0 rgba(255, 255, 255, 0.5);
}

.content--details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 60px 25px;
}

.content--articles {
  padding: 10px;
}

.contentItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 25px;
}

.contentItem--profile {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.contentItem--about {
  -webkit-box-flex: 5;
      -ms-flex: 5;
          flex: 5;
}

.profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 40px;
  border-left: 3px solid #13406A;
  border-right: 3px solid #13406A;
  border-bottom: 5px solid #13406A;
  -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2),
              0 -10px 0 0 #164D80 inset,
              0 -12px 0 0 rgba(255, 255, 255, 0.5) inset,
              0 2px 0 0 rgba(0, 0, 0, 0.2),
              0 -12px 0 0 rgba(255, 255, 255, 0.7) inset,
              0 -2px 0 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2),
              0 -10px 0 0 #164D80 inset,
              0 -12px 0 0 rgba(255, 255, 255, 0.5) inset,
              0 2px 0 0 rgba(0, 0, 0, 0.2),
              0 -12px 0 0 rgba(255, 255, 255, 0.7) inset,
              0 -2px 0 0 rgba(0, 0, 0, 0.2);

              background: rgb(234,234,234);
              background: -o-linear-gradient(295deg, rgba(234,234,234,1) 50%, rgba(244,244,244,1) 50%);
              background: linear-gradient(155deg, rgba(234,234,234,1) 50%, rgba(244,244,244,1) 50%);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eaeaea",endColorstr="#f4f4f4",GradientType=1);
}

.topLine {
  background: #164D80;
  border-top: 5px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 50px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  -webkit-box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.7),
              0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
              0 -4px 0 0 rgba(0, 0, 0, 0.1) inset;
          box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.7),
              0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
              0 -4px 0 0 rgba(0, 0, 0, 0.1) inset;
}

.personPic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  -webkit-box-shadow: 0 0 0 15px #EAEAEA,
              0 -4px 0px 15px #164D80,
              0 -7px 0px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 15px #EAEAEA,
              0 -4px 0px 15px #164D80,
              0 -7px 0px 15px rgba(0, 0, 0, 0.2);
  z-index: 1;
  background: #FFF;
  background-image: url("../images/default-doctor-pic.png");
  background-position: center;
  background-size: cover;
}

.personPic__img {
  height: 100%;
}

.profileContent {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.profileContent__name {
  color: #164D80;
  font-size: 26px;
  margin-bottom: 5px;
}

.profileContent__job {
  color: #000;
  font-size: 18px;
  text-align: center;
}

.sectionTitle {
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
  background: #13406A;
  color: #FFF;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 -12px 3px -8px rgba(0, 0, 0, 0.1) inset;
          box-shadow: 0 -12px 3px -8px rgba(0, 0, 0, 0.1) inset;
  font-family: Arial;
}

.sectionContent {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2) inset;
  padding: 5px;
  width: 100%;
}

.sectionContent__text {
  font-size: 14px;
}

.mobilePic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #FFF;
  margin-bottom: 15px;
}

.aboutTitle {
  color: #164D80;
  font-weight: 100;
  margin-bottom: 10px;
  border-bottom: 1px solid;
}

.aboutContent {
  word-break: break-word;
}

.slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 20px;
}

.article {
  width: 300px;
  border-radius: 5px;
  overflow: hidden;
  background: #164D80;
  padding: 15px;
  -webkit-box-shadow: 1px 1px 0 0 #FFF,
              4px 4px 4px 0 rgba(0, 0, 0, 0.1),
              -1px -1px 0 0 #11395D,
              -2px -2px 0 0 #FFF,
              -4px -4px 4px 0 rgba(0, 0, 0, 0.1),
              0 7px 7px 0 rgba(255, 255, 255, 0.1) inset,
              0 -7px 7px 0 rgba(0, 0, 0, 0.1) inset;
          box-shadow: 1px 1px 0 0 #FFF,
              4px 4px 4px 0 rgba(0, 0, 0, 0.1),
              -1px -1px 0 0 #11395D,
              -2px -2px 0 0 #FFF,
              -4px -4px 4px 0 rgba(0, 0, 0, 0.1),
              0 7px 7px 0 rgba(255, 255, 255, 0.1) inset,
              0 -7px 7px 0 rgba(0, 0, 0, 0.1) inset;
  margin: 20px;
}

.articleHeader {
  text-align: center;
  margin-bottom: 30px;
  color: #FFF;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}

.articlePic {
  width: 100%;
  height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.4),
              0 0 0 18px rgba(0, 0, 0, 0.4),
              5px 5px 5px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.4),
              0 0 0 18px rgba(0, 0, 0, 0.4),
              5px 5px 5px 0 rgba(0, 0, 0, 0.3);
}

.articlePic__img {
  height: 100%;
}

.articleSummary {
  overflow: hidden;
  font-size: 14px;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 30px;
  color: #FFF;
}

/* ####################################################################### */

/* Large devices (desktops, 992px and up) */
@media only screen and (max-width: 1199px) {
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 991px) {
  .content--details {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 60px 10px;
  }

  .profileContent {
    margin-top: 25px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 767px) {
}

/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width: 575px) {
}