/* Wayfinder */
.main-wayfinder {
  position: sticky;
    z-index: 2;
}

.logo-img {
  width: 12rem;
  position: relative;
  right: 3%;
}

.wayfinder {
  font-family: 'Poppins', sans-serif;
  background-color: white;
}

/* Billboard */
.billboard-container {
 margin-top: -4.7%;
}

.button-container-cover {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-container-cover > div {
    display: flex;
    justify-content: center;
}


.button-body-homepg-1 {
  text-decoration: none;
  background-color: #f4ac71;
  color: white;
  width: 300px;
  padding: 10px;
  border-radius: 3.5px;
}

.button-body-homepg-1:hover {
  background-color: white;
  transition: background-color 1.5s ease;
  border: 1px solid #f4ac71;
  color: #f4ac71;
}

.button-body-homepg-2 {
  text-decoration: none;
  color: rgb(165, 165, 165);
  background-color: white;
  border: 1px solid rgb(165, 165, 165);
  width: 300px;
  padding: 10px;
  border-radius: 3.5px;
}

.button-body-homepg-2:hover {
  background-color: rgb(165, 165, 165);
  color: white;
  transition: background-color 1.5s ease;
}


.btn-1 {
  margin-right: 10px;
  margin-top: 10%;
  font-size: 0.7em;
}

.btn-2 {
  margin-left: 10px; 
  margin-top: 10%;
  font-size: 0.7em;
}

.billboard-homepg {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

#billboard-title {
  font-size: 5em;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

#billboard-pg {
  font-size: 2.2em;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

/* component grid */
.documentation {
    margin-top: 5%;
}

.component-grid {
    margin-top: 5%;
    margin-bottom: 5%;
}


/* component page breaks */
hr {
    background-color: rgb(223, 223, 223);
    width: 75%;
    height: .1vh;
    margin-right: 12.5%;
    margin-left: 12.5%;
}

/* component containers */
.container a {
  text-decoration: none;
  color: rgb(100, 100, 100);
  font-weight: 200;
}

.comp-head {
  font-weight: 300;
  font-size: 3em;
}

.sm-head {
  font-weight: 300;
  font-size: 2em;
}

.intro-container {
    //height: 25vh;
    display: flex;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
  font-weight: 200;
  color: rgb(100, 100, 100);
}

.n-container {
    height: 25vh;
    display: flex;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
  font-weight: 200;
  color: rgb(100, 100, 100);
}

.comp-container {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-content: center;
    font-family: 'Poppins', sans-serif;
}

.vid-container {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

.ex-container {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

.helpers-ex-container {
    display: flex;
    justify-content: center;
    align-content: center;
}





/* component content */
.component-txt {
    font-size: 20px;
    padding: 7%;
    margin-left: 18%;
}

.nav-txt {
    margin-left: 8.25%;
}

.comp-video {
    height: 73%;
    width: 60%;
    margin-left: -9%;
}

.example {
    border: 4px solid  rgb(243, 243, 243);
    width: 75%;
}

/* component code */
.code {
    border-left: 4px solid #f4ac71;
    background-color: rgb(243, 243, 243);;
    width: 60%;
}


.sm-code {
    border-left: 4px solid #f4ac71;
    background-color: rgb(243, 243, 243);
    width: 70%;
  position: relative;
  right: 10%;
}

.code-container {
    margin-top: 4%;
    //height: 70vh;
    display: flex;
    justify-content: center;
    align-content: center;
  width: 100%;
}

.starter-code-container {
    display: flex;
    justify-content: center;
    align-content: center;
  width: 100%;
}

.copy-code {
    left: 83%;
    bottom: 43%;
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3em;
  font-weight: 300;
}

.copy-code:hover {
    border-bottom: 2px solid black;
}

.sm-copy-code {
    left: 73%;
    bottom: 43%;
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3em;
  font-weight: 300;
}

.sm-copy-code:hover {
    border-bottom: 2px solid black;
}


.grid-code-container {
    margin-top: 4%;
}

.sm-code-container {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 10.5%;
    height: 40vh;
}

.code-ex-content {
    width: 93%;
    height: 55vh;
    background-color: rgb(243, 243, 243);
}


/* wayfinder example */
.wayfinder-ex {
  position: relative;
    z-index: 0;
  background-color: rgb(207, 207, 207);
}

.nav-ex-content {
    width: 93.5%;
    height: 55vh;
    background-color: rgb(243, 243, 243);
}

/* billboard example */
.billboard-ex-content {
    width: 95%;
    height: 58vh;
  margin-top: 5%;
    background-color:  rgb(207, 207, 207);
  font-family: 'Poppins', sans-serif;
}

.billboard-comp-content > p {
    font-size: 2em;
  font-weight: 300;
}

.billboard h1 {
  font-size: 3rem;
  font-weight: 400;
}

.btn-1-ex {
    height: 7.5vh;
    font-size: .6em;
  position: relative;
  border-radius: 1px;
}

/* gallery example */
.gallery-ex {
    width: 95%;
    height: 60vh;
    background-color: rgb(207, 207, 207);
}

.slide-heading {
  color: black;
  font-size: 3rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

.slide-caption {
  color:black;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 2rem;
}

/* grid example */
.grid-ex-container {
    height: 70vh;
    width: 75%;
    background-color:  rgb(243, 243, 243);
}

.grid-ex {
    height: 23vh;
  position: relative;
  bottom: -0.9rem;
    display: flex;
  justify-content: center;
    align-content: center;
}

.grid-cbx-1 {
    background-color: #f4ac71ff;
}

.grid-cbx-2 {
    background-color: lightgrey;
}

.grid-cbx-3 {
    background-color:grey;
}

.grid-text {
    font-family: 'Poppins', sans-serif;
    color: rgb(156, 152, 152);
    font-weight: 200;
}



/* Cards example */
.cards-ex-container {
  display: flex;
  justify-content: center;
  align-items: center;
    height: 45vh;
    width: 95%;
}

.cd-ex {
    width: 97.5%;
    margin-left: %;
}

.card-ex {
    background-color: white;
    margin-top: 0%;
}

.card-image {
     background-image: url("image.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: 60vh, 100%;
}

.singlecd-box {
  position: relative;
  left: 37%;
}


/* Background image example */
.bgimg-ex-container {
    height: 60vh;
    width: 100%;
}

.bg-img-ex {
    background-image: url("image.jpg");
    background-size: cover;
    height: 93%;
    width: 85%;
    margin-top: 3.7%;
    margin-left: 7.5%;
}

.bgimg-box {
  position: relative;
  left: 12.3%;
}

/* container example */
.container-ex-container {
  height: 57vh;
  width: 90%;
  background-color:rgb(243, 243, 243);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
}

.container-box {
  position: relative;
  left: 12.3%;
}

/* button example */

#button-item {
  margin-top: -1.5%;
}

.button-box {
  height: 19vh;
  width: 50%;
  background-color: rgb(243, 243, 243);
}

.button-space {
  font-size: .8em;
}

/*  example */
.helpers-ex-container {
  width: 100%;
  
}
.one {
  width: 70%;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  color: rgb(64, 64, 64);
}

.color-contrast {
  color: rgb(208, 208, 208);
}

/* component code */
.comp-code {
    line-height: 1.6;
    font-size: 1.2em;
    letter-spacing: .5px;
    width: 100%;
}

.carousel-code-box {
  height: 70vh;
}

.grid-code-box {
  height: 60vh;
}

.bgimg-code-box {
  height: 10vh;
}

.tag {
    color: rgb(33, 84, 140);
}

.class {
    color: rgb(90, 136, 246);
}

.class-name {
    color: rgb(206, 129, 39 )
}

.h-scroll-menu {
  display: inline-block;
  overflow: auto;
  white-space: nowrap;
}

.h-scroll-menu > figure {
    display: inline-block;
    padding: 14px;
}



@media (max-width:1301px) {

  .component-txt {
        padding: 5%;
        width: 75%;
        margin: 0;
    }

}

@media only screen and (max-width: 850px) {
  

    .responsive {
        display: none;
    }

    .bgimg-box {
  position: relative;
  left: 0%;
    }

    .sm-code {
  right: 0%;
}


.copy-code {
    left: 83%;
    bottom: 93%;
}


.sm-copy-code {
    left: 73%;
    bottom: 43%;
}

.container-box {
  position: relative;
  left: 0%;
}

.our-team-content {
    width: 90%;
    
}

}

@media (max-width:770px) {
    .card-deck-ex-container {
        height: 130vh;
    }
}

@media (max-width:900px) {
    .card-deck-ex-container {
        height: 230vh;
    }

    .billboard h1 {
        font-size: 1rem;
    }

    .billboard-comp-content > p {
        font-size: 1em;
    }

    .ex-catalog-container {
        display: none;
    }

    .code {
        width: 90%;
        font-size: 12px;
    }

    .comp-code {
        width: 100%;
    }

        hr {
            display: none;
        }

        .component-grid {
            margin-top: 10%;
            margin-bottom: 10%;
    }

    .our-team {
    margin-top: 165px;
    height: 125vh;
    }

    .why-us {
        height: 55vh;
        margin-top: 5%;
    }

    .why-us-content {
        width: 90%;
    }



}



@media only screen and (max-width: 670px) {

    .card-deck-ex-container {
        height: 280vh;
    }

  pre {
        position: relative;
        left: -60px;
    }
}