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

}

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

}

.summary-photo_right {
    display:flex;
    margin: 0vw 2vw 2vw 12px;
    width:30vw;
    height:400px;
    align-items:flex-start;
    justify-content: end;
    object-fit: cover;
    top:0;
}

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

.summary-box-sub {
    display:inline-flex;
    flex-direction: row-reverse;
    flex-wrap:nowrap;
    justify-content:start;
    width:100%;
    position:relative;
    margin-top: 8vw;
}

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

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

.summary-title {
    margin: 0px 18px 12px 18px;
    max-width:auto;
    align-items:center;
    justify-content: center;
    text-align:center;
    font-size:28px   
}

.summary_right {
    display:flex;
    margin: 0vw 2vw 2vw 12px;
    width:25vw;
    align-items:flex-start;
    justify-content: end;
    object-fit: contain;
    top:0;
}


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

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

.photo_right {
    display:flex;
    margin: 0vw 2vw 2vw 12px;
    width:25vw;
    align-items:flex-start;
    justify-content: end;
    object-fit: contain;
    top:0;
}

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

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

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

.research_description_left {
    max-width:auto;
    align-items:start;
    justify-content: end;
    text-align:justify;
    font-size:18px
}




.more-button {
  background-color: white;
  border:1.5px solid #A57BC3;
  color: var(--nav-logo-color);
  padding: 0px 14px;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  border-radius: 14px;
  display: inline-block;
  align-self: flex-start;
  cursor: pointer;
}

.more-button:hover{
    background-color: #A57BC3;
    color: white;
}

@media screen and (max-width: 1200px)  {
  .photo_left{width:40vw!important;} 
  .photo_right{width:40vw!important;} 
  .title{font-size:22px;}
  .research_description{font-size: 16px;}
  .research_description_left{font-size: 16px;}
  .more-button {
    padding: 0px 12px;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
    border-radius: 12px;
    display: inline-block;
    align-self: flex-start;
    cursor: pointer;
    }
}

@media screen and (max-width: 1000px)  {
  .research-box-odd{flex-direction: column!important;}
  .research-box-even{flex-direction: column!important;}
  .photo_left{width:80%!important; margin:auto; max-width: 500px;} 
  .photo_right{width:80%!important;margin:auto;max-width: 500px;} 
  .text-box_right {margin: 5vw 0vw 3vw 0vw}
  .text-box_left {margin: 5vw 0vw 3vw 0vw;}
  .summary-box-sub{flex-direction: column!important;}
  .summary-photo_right{width:80%!important;margin:auto;max-width: 500px;}
  .summary-photo_right{height:auto!important}
}

@media screen and (max-width: 600px)  {
  .title{font-size:20px;}
  .text-box_right {margin: 6vw 0vw 3vw 0vw}
  .text-box_left {margin: 6vw 0vw 3vw 0vw;}
  .summary-title{font-size:24px}
}

@media screen and (max-width: 1200px)  {
  .summary-photo_right{height:450px}
}