:root{
   --nar-body-color:rgb(78, 75, 80);
   --var-body-light-color:rgb(210, 205, 214);
   --nar-text-color: rgb(92, 86, 96);
 }

 .horizontal_line{
    width:80%;
    margin-left: 10%;
    border-top: 2px solid #eee9f4;
    margin-top:120px;

}

.text-box_right {
    display:flex;
    flex-direction: column;
    width:100%;
    position:relative;
    justify-content:center;
    margin: 0vw 4vw 2vw 4vw;

}

.title {
    margin: 0px 0vw 12px 0vw;
    max-width:auto;
    align-items:start;
    justify-content: end;
    text-align:center;
    font-size:24px 
 }

 .title_english{
    margin: 0px 0vw 12px 0vw;
    max-width:auto;
    align-items:start;
    justify-content: end;
    text-align:center;
    font-size:24px 
 }

.research_description {
    max-width:auto;
    align-items:start;
    justify-content: end;
    text-align:center;
    font-size:20px;
}

.research_description_english {
    max-width:auto;
    align-items:start;
    justify-content: end;
    text-align:center;
    font-size:20px;
}

.email {
  max-width:auto;
  align-items:start;
  justify-content: end;
  text-align:center;
  font-size:20px;
  margin-top:24px;
  color:var(--nar-body-color);
}

.contact-box {
    display:inline-flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content:start;
    width:80%;
    position:relative;
    margin-left: 10%;
    margin-top: 3vw;
}

.text-box-outside {
    display:inline-flex;
    flex-direction: column;
    flex-wrap:nowrap;
    justify-content:start;
    width:80%;
    position:relative;
    margin-left: 10%;
    margin-top: 3vw;
}

.text-box-inside {
    display:flex;
    flex-direction: column;
    width:100%;
    position:relative;
    justify-content:center;
    margin: 0vw 2vw 1vw 0px;
}

.contact-us{
    font-size: 22px; 
    text-align: center;
    color: var(--nar-body-color);
    margin: 48px 0px 48px 0px
}

.email-us{
    font-size: 22px; 
    text-align: center;
    color: var(--nar-body-color);
    margin: 3vw 0px 3vw 0px;
    cursor: pointer;
}

.email-us:hover{
    color:var(--nav-logo-color);
    cursor: pointer;
    font-weight: bold;
}

.location-box{
    display:inline-flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content:start;
    width:80%;
    position:relative;
    margin-left: 10%;
    margin-top: 3vw; 
}

.photo_left {
    display:flex;
    margin: 0vw 12px 2vw 12px;
    align-items:flex-start;
    justify-content: start;
    object-fit: contain;
    top:0;
    flex-direction: column;
}

.slideshow-container {
  width:100%;
}

.img {vertical-align: middle; }
.mySlides{width:45vw; display:none}

/* Caption text */
.text-box{
  color:rgba(255,255,255,0.6);
  position: absolute;
  bottom:0;
}

.text {
  color: var(--nar-body-color);
  font-size: 16px;
  padding: 8px 24px;
  position: absolute;
  bottom: 0;
  width: 45vw;
  text-align: right;
  background-color:rgba(255,255,255,0.7);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot-box{
  flex_direction:row;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



@media screen and (max-width: 1300px)  {
  .title{font-size:22px}
  .research_description{font-size:18px}
  .email{font-size:18px;}
  .email-us{font-size:20px}
  .contact-us{font-size:20px}
}

@media screen and (max-width: 1100px)  {
  .title{font-size:20px}
  .research_description{font-size:16px}
  .email{font-size:18px;}
  .email-us{font-size:20px}
  .contact-us{font-size:20px}
}

@media screen and (max-width: 1000px)  {
  .location-box{flex-direction: column;}
  .photo_left{display:block}
  .mySlides{max-width: 500px; width:100%; margin:auto}
  .dot-box{display:flex; align-items: center;justify-content:center;}
  .text{position:relative; padding:0 0; width: 100%; text-align: center; 
  max-width:500px; background-color:rgb(78, 75, 80, 0.1); 
  padding-top: 6px; padding-bottom: 6px}
  .text-box_right {
    display:flex;
    flex-direction: column;
    width:100%;
    position:relative;
    justify-content:center;
    margin: 48px 0vw 0vw 0vw;
}

}