/* styles specific to National Inventors Day 2022 */

.nid-hero {
    margin-top: 120px;
    background-image: url(/wp-content/uploads/galaxy.jpg);
    background-size: 1420px;
    background-repeat: repeat-x;
    background-position: top right 200px;
    animation: 210s linear infinite galaxy-float;
    min-height: 460px;
}

/* styles specific to Jerry Lemelson 100 */

.home .site-header, .page-jerry-100 .site-header {
    background-color: white;
    height: 120px;
}
.page-jerry-100 #hero {
    margin-top: 120px;
}
.page-jerry-100 .panel.entry-header {
    display: none;
}
.jerry-100-images {
    position: absolute;
    top: 30px;
    bottom: 0;
    width: 1100px;
    left: calc((100% - 1100px) / 2);
}
.jerry-100-images > div {
    display: flex;
    align-items: flex-end;
}
.jerry-portrait {
    width: 400px;
    margin-bottom: 0;
}
.jerry-notebooks {
    width: 250px;
}
.jerry-inventions {
    width: 325px;
}
@keyframes galaxy-float {
    from {
        background-position: top right 0;
    }
    to {
        background-position: top right -1420px;
    }
}
@media only screen and (max-width: 989px) {
    .nid-hero {
        margin-top: 0;
    }
}
.nid-hero-logo {
    margin-top: 110px;
}
.nid-hero-logo img {
    width: 650px;
}
.nid-portraits > div {
    position: relative;
}
.nid-portrait > div  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.nid-portraits > div {
    width: 640px;
    height: 206px;
}
.nid-portrait {
    position: absolute;
    width: 115px;
    height: 115px;
    transition: width 100ms linear, height 100ms linear;
}
.nid-portrait-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.nid-portrait:not(.activated)::before {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    z-index: 4;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 200ms ease-in-out;
}
.nid-portrait:not(.activated):hover::before {
    background-color: #0bbfea33;
}
.nid-portrait-frame + figure img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 1;
}
.nid-portrait:nth-of-type(1) {
    left: 0;
}
.nid-portrait:nth-of-type(2) {
    left: 96px;
}
.nid-portrait:nth-of-type(3) {
    left: 157px;
}
.nid-portrait:nth-of-type(4) {
    left: 261px;
}
.nid-portrait:nth-of-type(5) {
    left: 365px;
}
.nid-portrait:nth-of-type(6) {
    left: 429px;
}
.nid-portrait:nth-of-type(7) {
    left: 526px;
}
.nid-portrait:nth-of-type(1), .nid-portrait:nth-of-type(7) {
    top: 20px;
}
.nid-portrait:nth-of-type(2), .nid-portrait:nth-of-type(6) {
    top: -30px;
}
.nid-portrait:nth-of-type(3), .nid-portrait:nth-of-type(5) {
    top: 64px;
}
.nid-portrait:nth-of-type(4) {
    top: 27px;
}
.nid-portrait.activated > div::before {
    content: "";
    width: 115px;
    height: 115px;
    background-image: url(/wp-content/uploads/nid-active-frame.png);
    z-index: 5;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    transition: width 100ms linear, height 100ms linear;
}
.nid-slider > div {
     display: flex;
 }
.nid-slider-arrow-container {
    display: flex;
    flex-basis: 225px;
}
.nid-slider-arrow-container > div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nid-slides {
    flex-basis: calc(100% - 450px);
    overflow: hidden;
    position: relative;
}
.nid-slides::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 50px;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    z-index: 6;
}
.nid-slides::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 50px;
    right: 0;
    top: 0;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    z-index: 6;
}
.nid-slides > div {
    position: relative;
}
.nid-slide {
    position: absolute;
    top: 0;
    left: 100%;
     display: flex;
     flex-direction: column;
     text-align: center;
    width: 100%;
    padding: 0 50px;
    /*transition: left 600ms linear;*/
    /*animation: 3000ms ease-in-out forwards nid-slide-off-left;*/
 }
.nid-slide.activated {
    left: 0;
}
/*
.nid-slide.reverse {
    3000ms ease-in-out forwards nid-slide-off-right;
}
.nid-slide.activated.reverse {
    3000ms ease-in-out forwards nid-slide-on-right;
}
.nid-slides.static {
    animation: none;
}*/
.nid-slide figure {
    margin-bottom: 5px;
}
.nid-slide img {
    width: 225px;
    border-radius: 50%;
    border: 6px solid #6e2159;
}
@keyframes nid-slide-on-right {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}
@keyframes nid-slide-off-right {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}
@keyframes nid-slide-on-left {
    from {
        left: 100%;
    }
    to {
       left: 0;
    }
}
@keyframes nid-slide-off-left {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}
@keyframes nid-slide-image-on {
    from {
        transform: translateX(100%) scale(0.1);
        opacity: 0;
    }
    to {
       transform: translateX(0) scale(1);
        opacity: 1;
    }
}
@keyframes nid-slide-image-off {
    from {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateX(-100%) scale(0.1);
        opacity: 0;
    }
}
.nid-slide h4 {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
    padding: 15px 0;
}
.nid-slide p {
    line-height: 1.3;
    padding-bottom: 1rem;
}
.nid-slide .wp-block-button a, .read-full-story a  {
    text-shadow: none;
    font-weight: 400;
    font-size: 21px;
    text-transform: uppercase;
    line-height: 1.5;
    color: white;
    background-color: #6e2159;
    border: #6e2159 1px solid;
    height: 2rem;
    padding: 4px 25px 6px 25px;
    min-width: 12rem;
    border-radius: 0;
}
.nid-slide .wp-block-button a:hover, .read-full-story a:hover {
    text-decoration: none;
    background-color: #aa0000;
    border: #aa0000 1px solid;
}
.nid-slider-arrow {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #dcdcdc;
    position: relative;
    transition: background-color 200ms ease-in-out;
}
.nid-slider-arrow:hover {
    background-color: rgba(110,33,89,0.5);
}
.nid-slider-arrow::before {
     color: white;
     content: '\f0d9';
     font-family: FontAwesome;
     position: absolute;
     left: 50%;
     top: 50%;
     font-size: 80px;
     transform: translate(-65%, -50%);
 }
.nid-slider-arrow-next::before {
    content: '\f0da';
    transform: translate(-30%,-50%);
}
.nid-rule-container {
    height: 180px;
    position: relative;
    display: flex;
    padding: 0 42px;
    align-items: center;
}
.nid-rule-container > div {
    display: flex;
    height: 14px;
    width: 100%;
    border-right: 2px #dcdcdc solid;
    border-left: 2px #dcdcdc solid;
    align-items: center;
}
.nid-rule {
    width: 100%;
    height: 2px;
    background-color: #dcdcdc;
}
.story-info h5, .lemelson-family-text h5 {
    padding-bottom: 20px;
}
.story-info h5 a, .lemelson-family-text h5 a {
    color: #6e2159;
}
.story-preview {
    padding-bottom: 90px;
}
.story-preview > div {
    display: flex;
}
.story-preview-info {
    flex-basis: 60%;
    padding-right: 40px;
}
.story-preview-image {
    flex-basis: 40%;
}
.wp-block-buttons::before, .wp-block-buttons::after {
    display: none;
}
.story-preview-left .story-preview-info {
    order: 2;
    padding-right: 0;
    padding-left: 40px;
}
@media screen and (max-width: 1000px) {
    .nid-slider > div {
        flex-wrap: wrap;
    }
    .nid-slider-arrow-container {
        flex-basis: 50%;
        padding: 20px;
    }
    .nid-slider-arrow-container > div {
        margin: 0 !important;
    }
    .nid-slides {
        flex-basis: 100%;
        order: 1;
    }
    .nid-slider-arrow-container:first-of-type {
        order: 2;
        justify-content: flex-end;
    }
    .nid-slider-arrow-container:last-of-type {
        order: 3;
    }
    .nid-slider-arrow {
        width: 40px;
        height: 40px;
    }
    .nid-slider-arrow::before {
        font-size: 40px;
    }
    .nid-rule-container {
        height: unset;
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 700px) {
    .nid-portraits:not(.full-width) {
        padding: 0 !important;
    }
    .nid-portraits > div {
        width: 416px;
        height: 130px;
    }
    .nid-portrait {
        width: 75px;
        height: 75px;
    }
    .nid-portrait.activated > div::before {
        width: 75px;
        height: 75px;
    }
    .nid-portrait:nth-of-type(1), .nid-portrait:nth-of-type(7) {
        top: 13px;
    }
    .nid-portrait:nth-of-type(2), .nid-portrait:nth-of-type(6) {
        top: -19px;
    }
    .nid-portrait:nth-of-type(2) {
        left: 64px;
    }
    .nid-portrait:nth-of-type(3), .nid-portrait:nth-of-type(5) {
        top: 42px;
    }
    .nid-portrait:nth-of-type(3) {
        left: 102px;
    }
    .nid-portrait:nth-of-type(4) {
        top: 18px;
    }
    .nid-portrait:nth-of-type(4) {
        left: 170px;
    }
    .nid-portrait:nth-of-type(5) {
        left: 236px;
    }
    .nid-portrait:nth-of-type(6) {
        left: 279px;
    }
    .nid-portrait:nth-of-type(7) {
        left: 342px;
    }
    .lemelson-family-text {
        padding-right: 20px;
        padding-left: 40%;
    }
    .nid-slide .wp-block-button a, .read-full-story a {
        min-width: 8rem;
    }
    .story-preview > div {
        flex-wrap: wrap;
    }
    .story-preview-image {
        flex-basis: 100%;
    }
    .story-preview-info {
        flex-basis: 100%;
        padding-right: 0;
        padding-left: 0 !important;
        order: 2;
    }
}
@media screen and (max-width: 500px) {
    .nid-slide {
        padding: 0 25px;
    }
    .nid-slides::before, .nid-slides::after {
        width: 25px;
    }
}

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

    .nid-portraits > div {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scale(0.7);
        top: 30px;
    }
}

}