/****
layout 
****/
.summary-line {
  height:2px;
  width: 100%;
  background-color: #E4E3E6;
  margin-top: 30px;
}

.summary-text {
  text-align: left;
}
.section {
  padding-top: 75px;
}
.img-group {
  margin-top: 15px;
  margin-bottom: 45px;
}
.caption-container-below {
  margin-top: -45px;
  margin-bottom: 45px;
}
.goal, .prompt {
  margin-bottom: 75px;
}
.phase-group {
  margin-top: 45px;
  margin-bottom: 45px;
}
.metrics-group {
  padding-left: 60px;
}

/****
text styling
****/
h4 {
  margin: 15px 0 0;
}
.h4-inline {
  display:none; /* hide when small */
}
.list-highlight-left dt, .list-highlight-right dt {
  font-weight: 500;
}
.phase h5 {
  margin-bottom: -20px;
  color: #837889;
}

.caption {
  font-family: "europa", Helvetica;
  font-size: 16px;
  font-weight: 400;
  color: #A09CA6;
  margin-top: 45px;
}
.caption-below {
  margin-top: 20px;
  margin-bottom: 0px;
}

.first-p::first-letter {
  color: #DDA39F;
  float: left;
  position: relative;
  font-size: 2.5em;
  line-height: .15;
  padding: 20px 8px 3px 0;
}
.summary-text.first-p::first-letter {
  font-size: 3.375em;
  line-height: 0.1;
  padding: 34px 10px 0 0;
}

.metric h2 {
  color: #837889;
  margin-top: 15px;
  margin-bottom: 0px;
}
.metric h2:before {
  position: absolute;
  content: " ";
  background-image: url(../imgs/arrow.svg);
  background-repeat: no-repeat;
  height: 16px;
  width: 12px;
  margin-top: 12px;
  margin-left: -20px;
}
.metric p {
  margin-top: 0px;
  font-family: "europa", Helvetica;
  font-size: 16px;
  color: #A09CA6;
}

.bulleted-list li {
  list-style-type: disc;
  margin-left: 20px;
}
.italic-list li {
  font-style: italic;
}

/***** 
boxes and lines for styling 
*****/

.withbnl:before { /*box*/
  position: absolute;
  content: " ";
  background-color: #F3F1F4;
  z-index:-2;
}
.withbnl:after { /*line*/
  position: absolute;
  content: " ";
  background-color: #DDA39F;
  height: 2px;
  z-index:-1;
}

/* only show when large */
@media (min-width: 992px) {
  .caption-right:after {
    top: 30px;
    left: -20%;
    width: 70%;
  }
  .caption-left:after {
    top: 30px;
    right: -20%;
    width: 70%;
  }
  .caption-below:after {
    bottom: 30px;
    left: -20%;
    width: 30%;
  }
  .caption-inline:after {
    bottom: 60px;
    right: -20%;
    width: 70%
  }
  .caption-below {
    text-align: right;
  }
  .caption-inline {
    margin-bottom: 60px;
    width: 50%;
  }

  .list-highlight-left:after {
    width: 15%;
    left: 5%;
    top: 45px;
  }
  .list-highlight-right:after {
    width: 15%;
    right: 5%;
    top: 45px;
  }
  .list-highlight-left:before {
    width: 30%;
    height: 102%;
    top: -5px;
    left: 10%;
  }
  .list-highlight-right:before {
    width: 30%;
    height: 102%;
    top: -5px;
    right: 10%;
  }
  .h4-inline {
    display: block;
  }
  .morestudies-left:after {
    width: 66%;
    left: 30%;
    top: 75px;
    height: 4px;
  }
  .morestudies-right:after {
    width: 66%;
     top: 75px;
    height: 4px;
    right: 30%;
  }
}

.goal:before {
  background-color: #FAF2F1;
  width: 12%;
  height: 80%;
  top: 10%;
  left: 0px;
}
.prompt:before {
  background-color: #FAF2F1;
  width: 12%;
  height: 80%;
  top: 10%;
  left: 13%;
}

.metrics-group:before {
  background-color: #FAF2F1;
  width: 150%;
  height: 85%;
  right:0;
  top: 50px;
}

.morestudies-left:before {
  width: 66%;
  height: 120%;
  right:10%;
  top: 50px;
}
.morestudies-right:before {
  width: 66%;
  height: 120%;
  left:10%;
  top: 50px;
}

/** boxes for images **/

/*style guide
.lang-img-1:before {
  width: 70%;
  height: 90%;
  top: -5%;
  right: -12%;
}
.lang-img-2:before {
  width: 40%;
  height: 50%;
  top: 10%;
  left: -20%;
}
.lang-img-3:before {
  width: 85%;
  height: 100%;
  top: 10%;
  right: 5%;
}
.lang-img-4:before {
  width: 40%;
  height: 50%;
  top: 3%;
  right: -18%;
}
.lang-img-5:before {
  width: 100%;
  height: 60%;
  top: -5%;
  left: -12%;
}
.lang-img-6:before {
  width: 40%;
  height: 100%;
  top: 10%;
  left: -8%;
}*/



/****
image layout
****/
.lang-img-set-1 .img-1 {
  margin: auto 0;
  width: 40%;
  z-index: 1;
}
.lang-img-set-1 .img-2 {
  margin-left: -45px;
  width: 40%;
  z-index: 2;
} 
.lang-img-set-1 .img-3 {
  width: 20%;
  margin-left: 30px;
}

.lang-img-set-2 .img-1 {
  padding-bottom: 15px;
}

.lang-img-set-3 .img-1, .lang-img-set-3 .img-2, .lang-img-set-3 .img-3, .lang-img-set-3 .img-4, .lang-img-set-3 .img-5 {
  width: 23%;
}
.lang-img-set-3 .img-2, .lang-img-set-3 .img-3, .lang-img-set-3 .img-4, .lang-img-set-3 .img-5 {
  margin-left: -5%;
}
.lang-img-set-3 .img-1, .lang-img-set-3 .img-3, .lang-img-set-3 .img-5 {
  margin-top: 15px;
} 

.mp-img-set-1 .img-1 {
  z-index: 1;
  width: 57%;
}
.mp-img-set-1 .img-2 {
  margin-left: -15%;
  z-index: 2;
  width: 57%;
}

.mp-img-set-2 .img-1, .mp-img-set-2 .img-2, .mp-img-set-2 .img-3, .mp-img-set-2 .img-4 {
  width: 60%;
}
.mp-img-set-2 .img-1 {
}
.mp-img-set-2 .img-2 {
   margin-left: -33%; 
}
.mp-img-set-2 .img-3 {
  margin-left: 30px;
  margin-top: -30%;
}
.mp-img-set-2 .img-4 {
  margin-left: -29%; 
  margin-top: -15%; 
}

.orgs-img-set-1 {
  margin-top: -65px;
}
.orgs-img-set-1 .img-1, .orgs-img-set-1 .img-2 {
  width: 52%;
  border: 5px solid white;
  border-radius: 3px;
}
.orgs-img-set-1 .img-2 {
  margin-left: -50px;
  margin-top: 160px;
}
.org-img {
  border-radius: 3px;
  -webkit-transition: -webkit-transform .3s; /* Safari */
  transition: transform .3s;
}
.org-img.img-1 {
  width: 33.333334%;
  /*opacity: .7;*/
}
.org-img.img-2 {
  width: 66.666667%;
  margin-left: -30px;
  margin-top: 60px;
}
.orgs-img-set-2 {
  margin-top: -30px;
}

@media (max-width: 992px) {
  .preset-size-img {
    width: 90%;
  }
}

.arch-img-set-1 {
  text-align: center;
}
.arch-img-set-1 img {
  width: 30%;
  border-radius: 3px;
  margin: 10px 5px;
}

.arch-img-set-2 img {
  border-radius: 3px;
  width: 40%;
}
.arch-img-set-2-top .img-2 {
  margin-left: 10px
}
.arch-img-set-2-bottom {
  margin-top: 20px;
  text-align: right;
}
.arch-img-set-2 .img-4 {
  width: 45%;
  margin-left: 10px;
}

.arch-img-set-3 {
  margin-top: -70px;
  text-align: center;
}
.arch-img-set-3 img {
  width: 50%;
  border-radius: 3px;
}
.arch-img-set-3 .img-2 {
  margin-top: 140px;
  margin-left: -110px;
}
.arch-img-set-3 .img-3 {
  margin-top: -130px;
  margin-left: 40px;
}

.arch-img-set-4 img {
  width: 31%;
  border-radius: 3px;
  margin: 5px 5px;
}
.arch-img-set-4-bottom {
  margin-top: 20px;
}

.arch-img-set-5 img{
  width: 32%;
  margin: 10px 5px;
}

/*** 
change img layout when narrow 
***/
@media (max-width: 576px) {

  .orgs-img-set-1 {
  margin-top: 0px;
  }
  .orgs-img-set-1 .img-1, .orgs-img-set-1 .img-2 {
    width: 46%;
    margin: 10px 5px;
  }
  .orgs-img-set-2 {
    margin-top: 0px;
    text-align: center;
  }
  .orgs-img-set-2 .img-2 {
    width: 100%;
    margin: 20px 5px 10px;
  }

  .mp-img-set-1 .img-1, .mp-img-set-1 .img-2 {
    width: 100%;
    margin: 10px 5px;
  }
  .mp-img-set-2 .img-1, .mp-img-set-2 .img-2, .mp-img-set-2 .img-3, .mp-img-set-2 .img-4 {
    width: 47%;
    margin: 10px 5px;
  }

  .arch-img-set-1 img,
  .arch-img-set-2 img, .arch-img-set-2 .img-2,
  .arch-img-set-3 img, .arch-img-set-3 .img-2, .arch-img-set-3 .img-3,
  .arch-img-set-5 img {
    width: 46%;
    margin: 10px 5px;
  } 
  .arch-img-set-2 {
    text-align: center;
  }
  .arch-img-set-2-bottom {
    margin-top: 0;
    text-align: center;
  }
  .arch-img-set-3 {
    margin-top: 0px;
  }
  
  .caption {
    margin-top: 0px;
  }

}

/**** 
navigation at the bottom
****/

#moreStudiesContainer h4 {
  margin-top:0px;
}
.morestudies-link {
  margin-top: 30px;
}
/* arrows for navigation */
.arrow {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  box-shadow: 0px 5px 15px rgba(79, 74, 87, .15);
  -webkit-transition: box-shadow .3s, background-image .3s, -webkit-transform .3s; /* Safari */
  transition: box-shadow .3s, background-image .3s, transform .3s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 12px;
  background-color: white;
}
.arrow-right {
  background-image: url('../imgs/arrow_right.svg');
  margin-left: 30px;
}
.arrow-left {
  background-image: url('../imgs/arrow_left.svg');
  margin-right: 30px;
}
.arrow:hover {
  box-shadow: 0px 10px 30px rgba(126, 122, 134, .3);
  -webkit-transform: translate(0px -2px);
  transform: translate(0px, -2px);
  -webkit-transition: box-shadow .3s, background-image .3s, -webkit-transform .3s; /* Safari */
  transition: box-shadow .3s, background-image .3s, transform .3s;
}
.arrow-left:hover {
    background-image: url('../imgs/arrow_left_h.svg');
}
.arrow-right:hover {
    background-image: url('../imgs/arrow_right_h.svg');
}
.arrow:active {
  box-shadow: 0px 0px 3px rgba(126, 122, 134, .3);
 -webkit-transform: translate(0px 2px);
  transform: translate(0px, 2px);
}