@import "/css/base.css";
@import "/xhref/nav/navigation.css";
@import "/xhref/footer/footer.css";
@import "/css/projectpage-images.css";

html{
  background-color: white;
}

main {
  background-color: white;
}

.hide{
  display: none;
}

.flex{
  display: flex;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

.flex-spacebetween{
  display: flex;
  justify-content: space-between;
}

.flex-end{
  display: flex;
  justify-content: flex-end;
}

/* //////PASSWORD PROTECT */

.redirect-message{
  font-size: .75rem;
  line-height: 140%;
  margin: 0 0;
}
.password-protect-shell{
  display: flex;
  margin: 5vw 5vw 25vh 5vw;
  height: 25vh;
  justify-content: center;
  padding-top: 8vh;
  padding-left: 5vw;
  border: 1.5px dashed #c8c8c8;
  border-radius: 16px;
}
.password-protect-copy-shell{
  width: 54vw;
}

.restricted-icon{
  background-image: url(/images/icons/restricted.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 72px;
  width: 72px;
  margin-right: 20px;
}

.load-content-button{
  width: 160px;
  height: 36px;
  background-color: #F3CD60;
  border-radius: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  cursor: pointer;
}

.load-content-button:hover{
  background-color: #eac04d;
}

.button-text{
  font-size: .875rem;
  font-weight: 600;
  color: #323535;
}


/* //////NAV components */
.caret-nav-top{
  background-image: url("/images/icons/backtotop.svg");
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
}

.backtotop{
  display: flex;
  position: fixed;
  flex-direction: column;
  right: 5vw;
  top: 90vh;
  cursor: pointer;
  z-index: 50;
}

.project-breadcrum{
  display: none;
  }

.right-arrow{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  height: 5vw;
  width: 5vw;
  margin-top: 3.5px;
  margin-left: 5vw;
  cursor: pointer;
}

.left-arrow{
  transform: rotate(180deg);
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  height: 5vw;
  width: 5vw;
  margin-top: 3.5px;
  cursor: pointer;
}

/* //project category nav */

.right-arrow-category{
  background-image: url("/images/icons/arrow-horizontal.svg");
  height: 1rem;
  width: 1rem;
  margin-left: 10px;
  cursor: pointer;
}

.right-arrow-category:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}

.left-arrow-category{
  transform: rotate(180deg);
  background-image: url("/images/icons/arrow-horizontal.svg");
  height: 1rem;
  width: 1rem;
  margin-right: 10px;
  cursor: pointer;
}

.left-arrow-category:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}




/* //////GENERAL PAGE STRUCTURE */

.outer-shell{
  display: block;
  width: 100vw;
}

.pp-background{
  box-shadow: 0px 10px 15px 10px rgba(216, 216, 216, .35);
  margin-top: 2vw;
  padding: 0vw 0vw 0vw 0vw;
}

.tabs-flex{
  display: flex;
  flex-direction: column;
}

.mobile-project-category-header-shell {
  padding: 30px 5vw 0px 5vw;
  display: none;
}

.desktop-project-category-header-shell {
  margin: 40px 25px 10px 20px;
  display: flex;
  align-items: center;
}

.project-subcategory{
  display: none;
  
}

.project-section{
  padding-bottom: 5vw;
}

/* //TABS */
.tabs-shell{
  display: flex;
  margin: 20px 5vw 30px 5vw;
}

.tab{
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50px;
  background-color: #F3CD60;
  margin-right: 15px;
}

.tab-inactive{
  background-color: #fafafa;

  box-shadow: 
      inset -2px -2px 7px 2px rgba(255, 255, 255, 0.45), 
      5px 5px 8px 2px rgba(94, 104, 121, .05), 
      2px 3px 5px 2px rgba(94, 104, 121, .1), 
      -5px -5px 0px 2px rgba(255, 255, 255, .75);

  transition: ease-in 300ms;
  cursor: pointer;
  margin-top: -1.5px;
}

/* 
////LINES/// */

.project-line{
  height: 1.5px;
  width: 100%;
  background-color: #e3e3e3;
  margin: 5vw 0vw;
}

.project-line-bottom{
  height: 1.5px;
  width: 100%;
  background-color: #e3e3e3;
  margin: 3vw 0vw;
}

.project-line-top{
  height: 1.5px;
  width: 100%;
  background-color: #e3e3e3;
  margin: 30px 0vw 2vw 0vw;
}


/* //IMAGE SHELLS */
.image-shell-hero {
  width: 90vw;
  height: 70vw;
}

.vm-image-shell-hero  {
  width: 90vw;
  height: 50vw;
}

.image-shell-90 {
  width: 90vw;
}
.image-shell-85 {
  width: 85vw;
}
.image-shell-80 {
  width: 80vw;
}
.image-shell-75 {
  width: 90vw;
}
.image-shell-70 {
  width: 80vw;
}
.image-shell-60 {
  width: 90vw;
}
.image-shell-55 {
  width: 55vw;
}
.image-shell-50 {
  width: 50vw;
}
.image-shell-42 {
  width: 42vw;
}
.image-shell-30 {
  width: 30vw;
}
.image-shell-23 {
  width: 90vw;
}
.image-shell-20 {
  width: 20vw;
}
.image-shell-15 {
  width: 15vw;
}
.image-shell-12 {
  width: 90vw;
}
.rs-uc-image  {
  width: 70vw;
  height: 42vw;
}
.rs-cy-image-board  {
  width: 80vw;
}




/* //////Multi-Image Frames */
.vm-image-navigation{
  display: flex;
  align-items: center;
  width: 90vw;
  margin: 10px 0vw 10px 0vw;
}
.img-paginate-arrows{
  margin-right: 30px;
  cursor: pointer;
}
.img-paginate{
  display: none;
  margin-right: 12px;
  cursor: pointer;
  }
.img-inactive{
  color: #b1b1b1;
  transition: ease-in 100ms;
}
.img-inactive:hover{
  color: #323535;
  transition: ease-in 100ms;
}




/* CONTENT SHELLS */

.content-shell-00{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw;
  padding-bottom: 2vw;
}



.rs-subproject{
  display: flex;
  flex-direction: column;
  margin-bottom: 3vw;
}
.rs-caption-image{
  display: flex;
  flex-direction: column;
}
.content-shell-00-header-shell{
  display: flex;
  flex-direction: column;
  width: 90vw;
}

.content-shell-00-header-shell-arch{
  display: flex;
  flex-direction: column;
  width: 90vw;
}

.content-shell-00-header-shell-vm{
  display: flex;
  flex-direction: column;
  width: 90vw;
}

.content-shell-00-project-name-shell{
  width: 70vw;
}

.content-shell-00-project-copy-shell{
  width: 90vw;
  margin-top: 10px;
}

.content-shell-00-media-header-shell{
  padding: 0px 0 30px 0;
  width: 90vw;
}

.content-shell-00-project-name-shell-alt1{
  width: 90vw;
}

.content-shell-00-project-copy-shell-alt1{
  width: 90vw;
}

.content-shell-00-project-details-shell{
  margin-bottom: 20px;
}

.content-shell-00-project-details-shell-arch{
  display: grid;
  width: 90vw;
  grid-template-columns: 1fr;
  gap: 10px 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.content-shell-01{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw;
  padding-bottom: 1vw;
}

.content-shell-02{
  display: flex;
  flex-direction: column;
  margin: 0vw 0vw 0vw 5vw;
  padding-bottom: 1vw;
}

.content-shell-03{
  display: flex;
  flex-direction: column;
  margin: 0vw 0vw 0vw .5vw;
  padding-bottom: 1vw;
}

.content-shell-04{
  width: 90vw;
  display: grid;
  grid-template-columns: repeat(3, minmax(10vw, 1fr));
  grid-auto-rows: 18vw;
  grid-gap: 2vw;
  margin: 0 5vw;
}
.art-image-height-18{
  height: 18vw;
  }

.content-shell-05{
  width: 86vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 28vw;
  grid-gap: 3vw;
  margin: 0 5vw 0 4vw;
}
.art-image-height-28{
  height: 28vw;
}

.content-shell-06{
  width: 86vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 7.75vw;
  grid-gap: .75vw;
  margin: 0 5vw;
}

.content-shell-06-header{
  margin: 0 5vw 1vw 5vw;
}

.art-image-height-12{
  height: 7.75vw;
  }

.photo-section{
  margin-bottom: 5vw;
}

.content-shell-07{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw;
}

.content-shell-08{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw 3vw 5vw;
  width: 90vw;
}
.content-shell-09{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw 3vw 5vw;
}

.content-shell-10{
  display: flex;
  margin: 0vw 5vw 1vw 5vw;
}

.content-shell-11{
  display: flex;
  margin-right: 5vw;
}



/* //////Product Content Shells */

.product-header-shell{
  display: flex;
  flex-direction: column;
  margin: 0 5vw 12vw 5vw;
}
.product-epic-shell{
  display: flex;
  flex-direction: column;
  padding: 0px 0 0px 0;
  width: 90vw;
}
.product-leadin-shell{
  width: 90vw;
  display: flex;
  justify-content: space-between;
}
.product-content-shell-00{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw 5vw 5vw;
}
.product-content-shell-01{
  display: flex;
  flex-direction: column;
  margin: 10vw 5vw;
}
.product-content-shell-02{
  display: flex;
  margin: 5vw 5vw 5vw 5vw;
}
.product-content-shell-03{
  display: flex;
  flex-direction: column;
}
.product-section-leadin-shell{
  display: flex;
  flex-direction: column;
  margin: 0vw 5vw 5vw 5vw;
  width: 90vw;
}
.product-caption-shell{
  width: 90vw;
  margin-right: 5vw;
  margin-bottom: 12px;
}
.mobile-margin{
  margin-top: 50px;
}


/* //////////////////////////////////////////////////Modal ///////////////////////////////////////////////////////////////////////////////////////////////////  */
  
.image-modal-sequence{
  cursor: pointer;
}


/* The Modal (background) */

.modal {
  display: none; 
  position: fixed;
  z-index: 50; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: none; 
  background-color: rgba(50, 53, 53, .95);
}
.modal-nav-shell {
  margin: 25vw 5vw 20px;
  width: 90vw;
  display: flex;
  justify-content: end;
}
.modal-image-shell {
  display: flex;
  height: 60vw;
  max-height: 720px;
  margin: 36px 5vw;
}
.modal-image {
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 0%;
  background-size: 100%;
  width: 100%;
}
.art-image-height-modal{
  height: 80vh;
  max-height: 600px;
  width: 100%;
  background-position-x: center;
  background-position-y: 0%;
  background-size: contain;
}
.close-button {
  background-image: url("/images/icons/close.svg");
  width: 1.5rem;
  height: 1.5rem; 
  cursor: pointer;
}
.close-button:hover,
.close-button:focus {
  background-image: url("/images/icons/close-hover.svg");
  transition: ease-in 300ms;
}

/* //MODAL IMAGES NAV */
.modal-arrow-left{
  transform: rotate(180deg);
  background-image: url("/images/icons/arrow-horizontal.svg");
  width: 1.5rem;
  height: 1.5rem; 
  cursor: pointer;
}
.modal-arrow-left:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}
.modal-arrow-right{
  background-image: url("/images/icons/arrow-horizontal.svg");
  width: 1.5rem;
  height: 1.5rem; 
  cursor: pointer;
  margin: 0 2rem;
}
.modal-arrow-right:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}






/* /// MARGINS ////// */
.margin-bottom-xs{
  margin-bottom: 5px;
}
.margin-bottom-s{
  margin-bottom: 20px;
}
.margin-bottom-m{
  margin-bottom: 40px;
}
.margin-bottom-l{
  margin-bottom: 60px;
}
.margin-bottom-xl{
  margin-bottom: 50px;
}
.margin-left-s{
  margin-left: 1vw;
}
.margin-left-5vw{
  margin-left: 5vw;
}
.margin-left-10vw{
  margin-left: 10vw;
}

/* /// HEIGHTS! ////// */
.height-32{
  height: 32vw;
}
.height-40{
  height: 40vw;
}
.height-45{
  height: 45vw;
}
.height-50{
  height: 50vw;
}
.height-55{
  height: 55vw;
}
.height-65{
  height: 65vw;
}
.height-70{
  height: 100vw;
}




/* //////////////////////////////////////////////////BREAKPOINTS ///////////////////////////////////////////////////////////////////////////////////////////////////  */


@media (min-width: 480px) {

  /* //////PASSWORD PROTECT */

.redirect-message{
  font-size: 1.125rem;
  line-height: 140%;
  margin: 0 0vw;
}
.password-protect-shell{
  display: flex;
  margin: 0vw 5vw 20vh 5vw;
  height: 30vh;
  justify-content: center;
  padding-top: 12vh;
  padding-left: 0vw;
  border: 1.5px dashed #c8c8c8;
  border-radius: 16px;
}
.password-protect-copy-shell{
  width: 48vw;
}

.restricted-icon{
  background-image: url(/images/icons/restricted.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 12vw;
  width: 12vw;
  margin-right: 4vw;
}

.load-content-button{
  width: 200px;
  height: 36px;
  background-color: #F3CD60;
  border-radius: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.button-text{
  font-size: 1rem;
  font-weight: 600;
}



/* //contents */

.project-line-top{
  height: 1.5px;
  margin: -24px 0vw 2vw 0vw;
}


.tabs-flex{
  flex-direction: row;
}


.project-line{
  margin: 4vw 0vw 2vw 0vw;
}

.image-shell-hero {
  height: 42vw;
}

.vm-image-navigation{
  margin: 0px 0vw 10px 0vw;
}

.img-paginate{
  display: flex;
}

.content-shell-00{
  padding-bottom: 0vw;
}

.content-shell-01{
  padding-bottom: 1vw;
}

.mobile-project-category-header-shell {
  display: none;
}

.desktop-project-category-header-shell {
  display: flex;
  margin: 25px 5vw 0px 5vw;
  align-items: center;
}

.project-breadcrum{
  display: flex;
  justify-content: flex-end;
  margin: 0px 5vw 20px 5vw;
  cursor: pointer;
}

.project-subcategory{
  margin: 22px 0vw 30px 5vw;
  display: flex;
  position: absolute;
  right: 5vw;
}

.rs-caption-image{
  display: flex;
  flex-direction: row;
}


/* //TABS */
.tabs-shell{
  display: flex;
  margin: 25px 5vw 50px 0vw;
}

.tab{
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.tab-inactive:hover{
  background-color: #F3CD60;
  transform: translateY(.5px);
  box-shadow: none;
}

.vert-sep {
  background-color: rgb(230, 230, 230);
  width: 1px;
  height: .75rem;
  margin: 3px 18px 0px 5px;
}

/* //MODAL */
.modal-image-shell {
  display: flex;
  height: 60vw;
  max-height: 720px;
  margin: 0 5vw;
}
.modal-nav-shell {
  margin: 40px 5vw 20px;
  width: 90vw;
  display: flex;
  justify-content: end;
}

/* //project images nav */
.right-arrow{
  background-image: url("/images/icons/arrow-horizontal.svg");
  height: 1rem;
  width: 1rem;
  margin-top: 0px;
  margin-left: 10px;
  cursor: pointer;
}

.right-arrow:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}

.left-arrow{
  transform: rotate(180deg);
  background-image: url("/images/icons/arrow-horizontal.svg");
  height: 1rem;
  width: 1rem;
  margin-top: 0px;
  margin-right: 10px;
  cursor: pointer;
}

.left-arrow:hover{
  background-image: url("/images/icons/arrow-horizontal-hover.svg");
  transition: ease-in 300ms;
}

/* //project category nav */

.right-arrow-category{
  height: 1rem;
  width: 1rem;
  margin-left: 10px;
}

.left-arrow-category{
  height: 1rem;
  width: 1rem;
  margin-right: 10px;
}


/* //content shell 00- typical project header */

.content-shell-00-header-shell{
  flex-direction: row;
  margin-bottom: 10vw;
}

.content-shell-00-header-shell-vm{
  flex-direction: row;
  margin-bottom: 3vw;
}

.content-shell-00-header-shell-arch{
  flex-direction: row;
}

.content-shell-00-project-name-shell{
  width: 65vw;
}


.content-shell-00-project-copy-shell{
  width: 45vw;
  margin-top: 50px;
  margin-bottom: 100px;
}

.content-shell-00-project-details-shell-arch{
  display: flex;
  flex-direction: column;
  width: 20vw;
  margin-top: 0px;
  position: absolute;
  left:72vw;
  margin-bottom: 0px;
}

.content-shell-00-media-header-shell{
  margin-top: 0px;
}

.content-shell-00-project-name-shell-alt1{
  width: 50vw;
  margin-right: 5vw;
}

.content-shell-00-project-copy-shell-alt1{
  width: 42vw;
}

.content-shell-00-project-copy-shell-alt2{
  width: 40vw;
}

.none{
  display: none;
}

/* //////Product Content Shells */

.product-header-shell{
  display: flex;
  flex-direction: column;
  margin: 0 5vw 5vw 5vw;
}
.product-epic-shell{
  display: flex;
  flex-direction: column;
  padding: 0 0 0 0;
  width: 90vw;
  margin-top: -24px;
}
.product-leadin-shell{
  width: 90vw;
}
.product-content-shell-01{
  display: flex;
  flex-direction: column;
  margin: 5vw 5vw 5vw 5vw;
}
.product-content-shell-02{
  display: flex;
  margin: 5vw 5vw 5vw 5vw;
}
.product-content-shell-03{
  display: flex;
  flex-direction: row;
}
.product-section-leadin-shell{
  width: 70vw;
}
.product-caption-shell{
  width: 15vw;
  margin-right: 2vw;
}
.mobile-margin{
  margin-top: 0px;
}


/* ///////////MARGINS//////// */


.margin-bottom-xl{
  margin-bottom: 100px;
}

.image-shell-90 {
  width: 90vw;
}
.image-shell-85 {
  width: 85vw;
}
.image-shell-80 {
  width: 80vw;
}
.image-shell-75 {
  width: 75vw;
}
.image-shell-70 {
  width: 70vw;
}
.image-shell-60 {
  width: 60vw;
}
.image-shell-50 {
  width: 50vw;
}
.image-shell-42 {
  width: 42vw;
}
.image-shell-30 {
  width: 30vw;
}
.image-shell-23 {
  width: 23vw;
}
.image-shell-12 {
  width: 12vw;
}

}


@media (min-width: 900px) {
  /* //////PASSWORD PROTECT */

.redirect-message{
  font-size: 1.125rem;
  line-height: 140%;
  margin: 0 0vw;
}
.password-protect-shell{
  display: flex;
  margin: 0vw 5vw 20vh 5vw;
  height: 30vh;
  justify-content: center;
  padding-top: 12vh;
  padding-left: 4vw;
  border: 1.5px dashed #c8c8c8;
  border-radius: 16px;
}
.password-protect-copy-shell{
  width: 36vw;
}

.restricted-icon{
  background-image: url(/images/icons/restricted.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 8vw;
  width: 8vw;
  margin-right: 2vw;
}

.load-content-button{
  width: 200px;
  height: 36px;
  background-color: #F3CD60;
  border-radius: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

.button-text{
  font-size: 1rem;
  font-weight: 600;
}

}


@media (min-width: 1440px) {
}


@media (min-width: 1600px) {
}