/* Calculation for expanding font size. */
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

.clear { clear: both; }
.hide { display:none; }
.hidden { display: none; }
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

html {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 100%; /* 16px */
	/* width:100vw; */
   background:#ffffff;
}

body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-weight: 400;
   font-size: 1em;
   -webkit-text-size-adjust: 100%;
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 100%;
   line-height: 1.5;
   background: white;
   max-width: 1200px;
   margin: auto;
}

/* --- Heading Section --- */
/* --- Heading Section --- */

header {
   max-width: 100%;
   min-width: 100%;
   overflow: hidden;
   position: relative;
   height: 260px;
   border-top: 6px double #c73a9f;
   border-left: 6px double #c73a9f;
   border-right: 6px double #c73a9f;
}

/* Set up the two curved backgrounds */
svg {
   width: 2000px;
   left: 50%;
   transform: translate(-50%);
}

#curve1 {
   position: absolute;
   top: 0px;
   z-index: 20;
}

#curve2 {
   position: absolute;
   top: 20px;
   z-index: 10;
}

.shadow {
   filter: drop-shadow( 0px 3px 2px rgba(0, 0, 0, .7));
}

h1 {
   font-family: 'Merriweather', serif;
   z-index: 30;
   color: white;
   font-size: calc(16px + (50 - 38) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   width: 90%;
   margin: auto;
   letter-spacing: 3px;
   padding: 20px;
   position: relative;
   text-align: center;
}

@media screen and (min-width: 767px) {
   h1 {
      padding-top: 40px;
   }
}

/* --- Structure --- */
/* --- Structure --- */

#web_container {
   max-width: 100%;
   min-width: 100%;
   overflow: hidden;
   margin-top: -100px;
   background-color: transparent;
   border-bottom: 6px double #c73a9f;
   border-left: 6px double #c73a9f;
   border-right: 6px double #c73a9f;
}

#mobile_wrapper {
   width: 100%;
   position: relative;
   z-index: 50;
}

#main_content {
   width: 90%;
   padding: 0 5%;
}

@media screen and (max-width: 969px) {
	#web_container, header {
	   border: none;
	}
}

@media (min-width: 1024px) {
   #main_content {
      max-width: 1200px;
      margin: auto;
   }
}

/* --- Doctor Info --- */
/* --- Doctor Info --- */

.doctor-info {
   font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   font-weight: bold;
   padding-left: 0px;
   padding-top: 20px;
   list-style: none;
   text-align: center;
   margin-bottom: 30px;
}

.doctor-info li:first-of-type {
   font-size: calc(17px + (26 - 17) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   padding-bottom: 6px;
}

/* --- More Basic Structure --- */
/* --- More Basic Structure --- */

h2 {
   width: calc(100% - 20px);
   display: block;
   color: #c73a9f;
   padding: 8px 0 6px 0;
   font-size: calc(17px + (45 - 38) * ((100vw - 300px) / (1400 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1400 - 300)));
   margin-top:20px;
}
h2.main-title {
   font-size: calc(17px + (48 - 38) * ((100vw - 300px) / (1400 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1400 - 300)));
   color: #000;
   padding: 8px 0px 6px 0px;
}
h3 {
   color: #000;
   margin-top:20px;
   font-size: calc(16px + (43 - 38) * ((100vw - 300px) / (1300 - 300)));
   line-height: calc(1.1em + (1.5 - 1.2) * ((100vw - 300px)/(1300 - 300)));
}
h3 em {
   color: #c73a9f;
   font-weight: normal;
}

p {
   font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   padding: 10px;
   text-align:justify;
}
.add-padding {
   margin-bottom: 20px;
}
.add-padding-top {
   margin-top: 20px;
}

table {
   width: 90%;
   max-width: 500px;
   margin: auto;
}
table tbody {
   background: #fff;
   padding: 10px;
   border: 1px solid #666666;
}
table thead {
   background: #666;
   border: 1px solid #666;
}
table thead th {
   color: #fff;
}
table th {
   font-size: calc(17px + (20 - 17) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   padding: 10px;
   text-align:left;
   font-weight: bold;
}
table td {
   font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   padding: 10px;
   text-align:left;
   color: #000;
}
table tbody td {
   padding-left: 20px;
	border-bottom: 1px solid #aaa;
}
table tbody tr:last-child td {
	border-bottom: none;
}


table tbody td::before {
   display: inline;
   content: "\2022";
   font-size: 30px;
   position: relative;
   top: 5px;
   left: -8px;
}

table tfoot {
   padding: 10px 10px 0 10px;
}
table tfoot td {
   padding: 10px 10px 0 10px;
	font-size: calc(13px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/* --- Learning Objectives --- */
/* --- Learning Objectives --- */

.learning-objectives {
   font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   padding-left: 10px;
   padding-top: 20px;
   margin-left: 10px;
   margin-bottom: 30px;
}

.learning-objectives li {
   margin: 0px 10% 14px 3%;
}

.learning-objectives li:last-child {
   padding-bottom: 0px;
}

/* --- Patients Area --- */
/* --- Patients Area --- */
.patients {
   background-color: #fff;
   padding: 20px;
	border: 5px solid #c73a9f;
}


.patients p {
   color: #000;
   padding: 0;
   font-style: italic;
}

.patients-text {
   width: 100%;
}

.patient-img{
   margin-bottom: 20px;
   width: calc(100% - 10px);
   border: 5px solid #fff;
}

.media-container {
  margin: 0 auto;
  padding: 4%;
  background: #fff;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border: 5px solid #c73a9f;
  background: #222;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media (min-width: 769px) {

   .patients::after {
      content: "";
      display: table;
      clear: both;
   }

   .patients-text {
      float:left;
      width:calc(75% - 20px);
      margin-left: 20px;
   }

   .patient-img{
      float:left;
      width: calc(25% - 10px);
      margin-bottom: 0;
   }


}
@media screen and (min-width: 568px) and (max-width: 768px) {
	.patients {
	    background-color: #fff;
	    padding: 5% 15%;
	}
}






/* --- Figures --- */
/* --- Figures --- */

.figure-holder {
   background:#fff;
}

.figure-holder figure {
   padding:2% 4% 0 4%;
   margin:auto;
}
#figure2 figure {
   padding: 2% 0;
}
#figure1 figure img {
	display: block;
   max-width: 750px;
	margin: auto;
}
#figure3 figure img {
	display: block;
   max-width: 750px;
	margin: auto;
}
#figure3 figure, #figure3 p {
   text-align: center;
}
#figure1 p, #figure3 p {
   max-width: 750px;
	margin: auto;
}


.figure-holder figure figcaption {
   font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
   font-weight: bold;
   text-align:center;
   padding-bottom:10px;
   color:black;
}

.figcaption-phone {
   display: block;
}

.figcaption-large {
   display: none;
}

.figure-holder figure img {
   width: calc(100% - 10px);
   border: 5px solid #c73a9f;
}
#figure2a figure img {
   background: #000;
}

.figure-holder p {
   color:black;
   padding:10px 4% 2% 4%;
	font-size: calc(13px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
}

@media (min-width: 768px) {
   .figure2a {
      width: 40%;
      float: left;
      margin: 15px 20px 20px 0;
   }
   #figure2a figure, #figure2a p {
      max-width: 450px;
      margin: auto;
   }
   .figcaption-phone {
      display: none;
   }

   .figcaption-large {
      display: block;
   }
}
@media (min-width: 1116px) {
   .figure2a {
      margin: 15px 20px 60px 0;
   }
}

@media (min-width: 1079px) {
	.media-container {
	  padding: 2% 6.5%;
	}
}
@media (min-width: 1179px) {
	.media-container {
	  padding: 2% 10%;
	}
}



/* --- Callout --- */
/* --- Callout --- */

.callout {
   background-color: #20497d;
   color: white;
   padding: 20px;
}

.callout h2 {
   background-color: #20497d;
}

.callout2 {
   margin:2% 4%;
   background-color: #20497d;
   color: white;
   padding: 20px;
}

sup {
   font-size: 11px;
   font-weight: bold;
   vertical-align: top;
	position: relative;
   top: -0.3em;
}

i.small {
   text-transform:lowercase;
   font-style:normal;
}

/* --- References --- */
/* --- References --- */

.ref-popup {
   padding: 6px;
}

#footer-reference-links {
    padding-bottom: 40px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
#footer-reference-links::after {
   clear: both;
   display: table;
   content: "";
}
.ref-icon, .pdf-icon {
   float: left;
   color: #000;
   cursor: pointer;
   display: table;
   height: 70px;
   margin: 40px 40px 0 40px;
}
.ref-icon img, .pdf-icon img {
   display: table-cell;
   vertical-align: middle;
   margin-right: 15px;
   height: auto;
   width: 70px;
}
.ref-icon a, .pdf-icon a {
   text-decoration: none;
   color: #000;
   text-decoration: none;
}
.ref-icon strong, .pdf-icon strong {
   font-style: italic;
   display: table-cell;
   vertical-align: middle;
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
   .ref-icon, .pdf-icon {
      height: 50px;
   }   
   .ref-icon {
      margin: 20px 20px 0 0px;
   }
   .pdf-icon {
      margin: 20px 0px 0 20px;
   }
   .ref-icon img, .pdf-icon img {
      margin-right: 10px;
      width: 50px;
   }
}

/* --- Modal Window ---  */
/* --- Modal Window ---  */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1000; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
   margin: 100px auto 0 auto;
   display: block;
   width: 80%;
   max-width: 900px;
   border: 10px solid #ddddddc4;
   border-radius: 12px;
}

#caption {
   margin: 20px auto;
   display: none;
   width: 80%;
   max-width: 900px;
   text-align: center;
   color: #ccc;
   padding: 0 0 0px 0;
   border: 3px solid #ddddddc4;
   border-radius: 2px;
   background: rgba(35, 35, 35, 0.7);
}

#caption .figure-holder, #caption .media-container {
   background:#ededed;
}

#caption h3 {
   margin-top: 0;
   border-top-right-radius: 9px;
   border-top-left-radius: 9px;
}

#caption ol {
   margin: 25px 5%;
   width: 90%;
}

#caption ol li {
   text-align: left;
   width: 95%;
   padding-bottom: 15px;
}

#caption ol li a {
   color: white;
   text-decoration: underline;
}

#caption ol li a:hover {
   text-decoration: none;
}


.modal-content, #caption {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
   from {
      -webkit-transform: scale(0)
   }

   to {
      -webkit-transform: scale(1)
   }
}

@keyframes zoom {
   from {
      transform: scale(0)
   }

   to {
      transform: scale(1)
   }
}

.close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
}

.close:hover,
.close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

@media only screen and (max-width: 700px) {
   .modal-content {
      width: 90%;
   }
}

@media (max-width: 549px) {
   #caption {
      margin: 20px auto;
      width: 98%;
      border: none !important;
   }

   .modal {
      position: absolute !important;
      overflow: scroll !important; /* Enable scroll if needed */
   }
}