/*residences*/

.resid-s1 {
  height: 100vh;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: inset 0px 86px 92px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0px 86px 92px 3px rgba(0,0,0,0.4);
  box-shadow: inset 0px 86px 92px 3px rgba(0,0,0,0.4);
}
.resid-s1-text {
  margin: auto;
  position: relative;
  text-align: center;
  padding: 0 15px;
}
.resid-s1-text-boxshadow {
  width: 100%;
  top: 50%;
  position: absolute;
  z-index: 0;
  -webkit-box-shadow: 0px 0px 150px 100px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 150px 100px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 150px 100px rgba(0,0,0,0.75);
}
.resid-s1-title {
  font-family: BentonSansBold;
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 10px;
  margin-bottom: 0;
  line-height: 1.2;
  position: relative;
  text-align: center;
}
.resid-s1-subtitle {
  color: purple;
  text-align: center;
  font-size: 40px;
  letter-spacing: 5px;
  position: relative;
}

/* s2 */

.resid-s2 {
  padding: 75px 0 100px;
  background-color: #F0F0F0;
}
.resid-s2-top {

}
.resid-s2-top-title {
  font-family: BentonSansMedium;
  font-size: 24px;
  text-align: center;
  width: 100%;
  line-height: 1.4;
}
.resid-s2-top-text {
  text-align: center;
  margin-top: 0;
  line-height: 1.7;
}
.resid-s2-bottom {

}
.resid-s2-plan {
  background-color: white;
  padding: 10px 20px 0;
  margin: 30px 0 0;
  border-bottom: 5px solid purple;
  cursor: pointer;
}
.resid-s2-plan-img {

}
.resid-s2-plan-img img {
  max-width: 100%;
}
.resid-s2-plan-text {
  text-align: center;
}
.resid-s2-plan-text-title {
  color: purple;
  font-size: 18px;
  font-family: BentonSansMedium;
}
.resid-s2-plan-text-desc {
  color: black;
}
.resid-s2-plan-data {
  display: flex;
  padding: 10px 0 10px;
  border-bottom: 2px solid lightgrey;
}
.resid-s2-plan-data span {
  margin: auto;
  font-size: 14px;
  font-family: BentonSansBold;
}
.resid-s2-plan-button {
  display: block;
  border: none;
  font-family: BentonSansMedium;
  background-color: gray;
  color: white;
  width: 100%;
  padding: 10px 0;
  margin: 5px 0;
  font-size: 24px;
  transition: all 0.3s;
}
.resid-s2-plan:hover .resid-s2-plan-button,
.resid-s2-plan-button:hover {
  background-color: purple;
  cursor: pointer;
  transition: all 0.3s;
}
#residencesModal {
  display: block;
  background-color: rgba(50,62,73,0.95);
  z-index: -1;
  padding: 0 !important;
}
#residencesModal.show {
  z-index: 1050;
}
#residencesModal .modal-dialog {
  max-width: 80%;
}
#residencesModal .modal-content {
  background-color: transparent;
  border: 2px solid lightgrey;
  border-radius: 0;
  position: relative;
  display: block;
}
#residencesModal .close {
  position: absolute;
  right: 0;
  background-color: white;
  opacity: 1;
  padding: 5px 8px;
  color: purple;
}
.residences-modal-img {
  width: 95%;
  margin: auto;
  display: block;
}
.residences-modal-text {
  text-align: center;
  color: white;
}
.residences-modal-unit {
  border-bottom: 1px solid lightgrey;
  width: 95%;
  margin: auto;
  padding-bottom: 20px;
}
.residences-modal-data {
  margin-top: 20px;
  color: lightgrey;
  display: flex;
}
.residences-modal-data span {
  margin: auto;
}
.residences-modal-btn {
  background-color: purple;
  color: #ffffff;
  padding: 12px 25px 12px;
  border: none;
  cursor: pointer;
  display: block;
  margin: 30px auto 40px;
}
.page-residences ~ #downloadFloorplans.show {
  background-color: rgba(44,54,64,0.9);
}

@media (max-width: 2500px) {
  #residencesModal .modal-dialog {
    max-width: 62%;
  }
}

@media (max-width: 1799px) {
  #residencesModal .modal-dialog {
    max-width: 62%;
  }
}

@media (max-width: 991px) {
  .resid-s1 {
    height: 50vh;
  }
  .resid-s1-title {
    font-size: 40px;
    margin-bottom: 16px;
  }
  .resid-s1-subtitle {
    font-size: 32px;
  }
  .resid-s2-plan-button {
    font-size: 16px;
  }
  #residencesModal .modal-dialog {
    max-width: 95%;
  }
}

@media (max-width: 767px) {
  .resid-s1 {

  }
  .resid-s1-text-boxshadow {
    -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.75);
  }
  .resid-s1-title {
    font-size: 24px;
    margin-bottom: 10px;
    letter-spacing: 5px;
    text-align: center;
  }
  .resid-s1-subtitle {
    font-size: 18px;
  }
  .resid-s2 {
    padding: 75px 0 75px;
  }
  .resid-s2-plan-data span {
    font-size: 12px;
  }
  .resid-s2-plan-button {
    font-size: 14px;
  }
}

@media (max-width: 330px) {
  .resid-s2-plan-data span {
    font-size: 10px;
  }
}

/* iPad Pro (portrait) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .resid-s1 {
    height: 50vh;
  }
  #residencesModal .modal-dialog {
    max-width: 95%;
  }
}

/* iPad Pro (landscape) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  #residencesModal .modal-dialog {
    /*max-width: 90%;*/
  }
}

/* iPad (landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .resid-s2-plan-data span {
    font-size: 12px;
  }
  #residencesModal .modal-dialog {
    max-width: 85%;
  }
}

/* iPad 11 (landscape) */
@media only screen and (min-width: 414px) and (max-width: 896px) and (orientation: landscape) {
  .resid-s1 {
    height: 100vh;
  }

}

/* iPad 8+ (landscape) */
@media only screen and (min-width: 414px) and (max-width: 736px) and (orientation: landscape) {

}