.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: 1px auto rgb(236, 170, 59);
}

.navbar .navbar-nav .nav-link {
    color: rgb(236, 170, 59);
    padding-right: 20px;
}

.navbar span.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='gray' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

li {
    cursor: pointer;
}

#material-headers h1{
    color: rgb(236, 170, 59);
    text-align: center;
}

#joie-tab-logo {
    height: 80px;
    margin-left: 20px;
    margin-bottom: -40px;
    /* padding-top: 0px; */
    margin-top: -10px;
}
#joie-wordmark {
    display: none;
    margin-left: 30px;
    height: 30px;
}
.navbar-nav {
    padding-bottom: 20px;
}

.navbar-collapse.in {
    background: RGBA(0, 0, 0, 0.85);
}

.row {
    height: 100%;
}

.fixed-top {
    padding-top: 0px;
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
}

#no-such-thing-row {
    background-image: url('./Assets/PureJoy-images/4B7A0640_FPO.jpg');
    height: 500px;
    background-size: cover;
    background-position: center;
}

#video-container-background {
    top: 0%;
    left: 0%;
    height: 400px;
    max-width: 1400px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;

}

#video-container-background video {
    position: absolute;
    object-fit: cover;
    z-index: -20;
    height: 400px;
    width: 100%;
    max-width: 1400px;
}

.video-row .col-sm {
    align-self: center;
}

.video-row .col-sm div {
    margin: 0 auto;
    width: 60%;
    padding-top: 10px;
}

#section-three {
    background-color: rgb(191, 220, 205);
    height: 500px;
    color: rgb(18, 42, 74);
}

.carousel-header {
    width: 240px;
    margin: 0 auto;
    padding-left: 50px;
}

.carousel-select {
    width: 250px;
}

.carousel-select li.active {
    color: white;
    font-size: 30px;
}

.carousel-control-next,
.carousel-control-prev {
    width: 5%;
}

#above-beyond-select:after {
    content: '';
    height: 140%;
    width: 1px;
    position: absolute;
    right: 0;
    top: -20%;
    background-color: white;
}

#giving-back-select:after {
    content: '';
    height: 240%;
    width: 1px;
    position: absolute;
    right: 0;
    top: -70%;
    background-color: white;
}

.carousel-above-beyond h1 {
    text-decoration-line: underline;
    text-underline-position: below;
    text-decoration-color: rgb(249, 216, 108);
    text-decoration-thickness: 5px;
}

.carousel-above-beyond {
    width: 400px;
    text-align: center;
    margin: 0 auto;
}

#givingback {
    background-color: rgb(191, 220, 205);
    height: 400px;
    color: rgb(18, 42, 74);
}

.carousel-image-column {
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    align-content: center;
    align-self: center;
}

.carousel-image-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.carousel-image-container img {
    width: 100%;
    object-fit: scale-down;
    padding-left: 10%;
    max-height: 300px;
}

.carousel-giving-back-text {
    max-width: 300px;
    padding-left: 0;
    padding-right: 40px;
    align-self: center
}

.carousel-inner p {
    color: rgb(18, 42, 74) !important;
}

#lasting-joy,
#no-such-thing,
#made-for-life,
#joy-on-the-job,
#share-joy {
    padding: 20px;
    padding-top: 4px;
    margin-top: 4px;
    align-self: center;
}

#lasting-joy div,
#no-such-thing div,
#made-for-life div,
#joy-on-the-job div,
#share-joy div {
    max-width: 375px;
    margin: 0 auto;
}

#lasting-joy h1,
#no-such-thing h1,
#made-for-life h1,
#joy-on-the-job h1,
#share-joy h1 {
    color: rgb(236, 170, 59);
}

#lasting-joy p,
#no-such-thing p,
#made-for-life p,
#joy-on-the-job p,
#share-joy p {
    color: rgb(121, 122, 126);
}

#full-video-link {
    color: rgb(18, 42, 74) !important;
    font-weight: bold;
    font-size: 20px;
}

.joy-on-the-job-facts div {
    max-width: 450px;
    align-self: center;
    padding: 20px;
    text-align: center;
    margin: 0px auto;
}

.joy-on-the-job-facts img {
    object-fit: scale-down;
    height: 14em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.joy-on-the-job-facts p {
    color: rgb(121, 122, 126);
    width: 90%;
    margin: 0 auto;
    margin-bottom: 60px;
}

.joy-icon {
    object-fit: scale-down !important;
    height: 100px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.orange-block {
    height: 20px;
    background-color: rgb(236, 170, 59);
}

.social li {
    list-style: none;
    display: inline;
    padding-right: 10px;
}

.social ul {
    justify-content: center;
    display: flex;
    padding: 0;
}

.circle-image-large img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    object-fit: scale-down;
    max-height: 500px;
}
.circle-image-large {
    padding-top: 30px;
    align-self: center;
    justify-content: center;
    display: flex;
    height: 500px;
}

.square-image-large {
    padding-top: 30px;
    align-self: center;
    justify-content: center;
    display: flex;
}
.square-image-large img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    object-fit: scale-down;
}

#carouselCards,
#carouselOurLab {
    display: none;
}

#carouselCards img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    object-fit: scale-down;
}

.carousel-indicators {
    position: unset !important;
    padding-top: 10px;
}

.carousel-indicators li {
    display: unset !important;
    width: 20px;
    height: 20px;
    margin: 10px;
    text-indent: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: rgba(236, 170, 59, .5);
}
.carousel-indicators .active {
    width: 20px;
    height: 20px;
    margin: 10px;
    background-color:  rgb(236, 170, 59);
}

#testing h1 {
    color: rgb(236, 170, 59);
}

#testing p {
    color: rgb(121, 122, 126);
}

#testing img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    object-fit: scale-down;
    padding: 20px;
}
#certified-safe {
    background-color: rgb(250, 249, 249) !important;
    padding-top: 20px;
    padding-bottom: 20px;
}
#our-lab-your-life {
    margin-top: 40px;
    margin-bottom: 40px;
}

#materials .row {
    margin-bottom: 40px;
}
#sustainability .row {
    margin-bottom: 40px;
}

#ourpeople-video {
    margin-left: -40px;
}

#ourpeople-video video {
    width: 100%;
}

#joy-on-the-job {
    margin-top: 40px;
    padding-bottom: 10px !important;
}

#materials img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    object-fit: scale-down;
    padding: 20px;
    height: 14em;
}

.footer-col p {
    text-align: center;
    color: rgb(121, 122, 126);
    font-size: 10px;
}

.footer-col a {
    color: rgb(121, 122, 126);
    font-size: 24px;
}

.footer-col div {
    margin-top: 60px;
}

.video-container {
    position: relative;
}

.video-container video {
    z-index: 2 !important;
    object-fit: cover;
    height: 400px;
    width: 100%;
}

.inline-arrow{
    display: inline-flex;
}
.inline-arrow p{
    min-width: 100px;
    font-size: 26px !important;
    font-weight: bold !important;
    color: rgb(18, 42, 74) !important;
    word-spacing: -1px;
    letter-spacing: -1px;
}
.inline-arrow img{
    height: 25px;
    padding: 0 !important;
}
.inline-arrow-right {
    margin-bottom: -10px !important;
}
.inline-arrow-right p{
    margin-left: 50px;
}
.inline-arrow-right img {
    margin-left: -25px;
}
.inline-arrow-left {
    margin-top: 0px !important;
}
.inline-arrow-left p{
    margin-right: 68px;
}
.inline-arrow-left img {
    margin-right: -16px;
}

.playpause {
    background-image: url('Assets/Icons/video_play_button.png');
    background-repeat: no-repeat;
    width: 30%;
    height: 40%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: -30%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;
    z-index: 1;
}

#desktop-video {
    height: 100%;
    background: rgba(18, 42, 74, .15);
    display: flex;
    align-items: center;
    text-align: center;
}

#made-for-life-image {
    display: none;
}

.our-lab-videos {
    height: 400px;
}
.our-lab-facts {
    width: 70%;
    margin: 0 auto;
}

#testing .playpause {
    width: 20% !important;
    top: -10% !important;
}

.joy-on-the-job-row {
    max-width: 700px !important;
}

.joy-on-the-job-facts > div {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: min-content min-content min-content 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
        "."
        "."
        "."
        ".";
    width: 100%; 
    height: 100%;
}
.joy-on-the-job-facts table {
    width: 100%;
}
.joy-on-the-job-facts td {
    vertical-align: bottom;
}

#materials > div.row.justify-content-center.align-items-start {
    display: grid; 
    gap: 0px 0px; 
    /* width: 100%;  */
    height: 100%; 
}

#materials div.col-md {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: min-content min-content 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      "."
      "."
      "."; 
    width: 100%; 
    height: 100%; 
} 

#materials table {
    width: 100%;
}
#materials td {
    vertical-align: bottom;
}

html[dir="rtl"] .navbar-nav li {
    margin-left: 0 !important;
    margin-right: auto;
}

html[dir="rtl"] #materials p {
    text-align: right;
}

html[dir="rtl"] #lasting-joy p, html[dir="rtl"] #lasting-joy h1 {
    text-align: right;
}

html[dir="rtl"] #share-joy p, html[dir="rtl"] #share-joy h1 {
    text-align: right;
}

html[dir="rtl"] .carousel-giving-back-text {
    padding-right: 0;
    padding-left: 40px;
}

html[dir="rtl"] .carousel-header h1, html[dir="rtl"] .carousel-header p {
    text-align: right;
}

html[dir="rtl"] #made-for-life h1, html[dir="rtl"] #made-for-life p {
    text-align: right;
}

html[dir="rtl"] #no-such-thing h1, html[dir="rtl"] #no-such-thing p {
    text-align: right;
}