/*
.grid-container {
    background: #1a1a1a;
}
*/
.grid {
    padding: 0;
    cursor: pointer;
    overflow:visible;
}
.grid-container {
    background-color: #626262;
}
.grid-item {
    position: relative;
    width: 330px;
    padding:10px;
    transition: padding 400ms;
}
.grid-item:hover {
    padding:10px;
}
.grid-item.active {
    padding:0;
}
.grid-item-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 400ms;
}
.grid-item-inner:not(.no-decoration) {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.grid-item:hover .grid-item-inner {
    box-shadow: 0 0 20px rgba(0,90,99,0.2);
}
.grid-item.active .grid-item-inner {
    border: 2px solid #0dcaf0;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,90,99,0.3);
}
.img-cover .flex-inner {
    width: 100%;
    height: 100%;
}
.grid-item-inner.bg-dark {
    border: 1px solid rgba(256,256,256,0.1);
}
.grid-item-inner .flex-inner img:not(.not-full-image) {
    width: 100%;
    height: 100%; 
    object-fit: contain;
    /*
    box-shadow: 0 0 20px rgba(0,0,0,0.33);
    border-radius: 6px;
    */
}
.active .grid-item-inner .flex-inner img {
    border-radius: 0px;
}
.img-cover .grid-item-inner .flex-inner img {
    min-height: 100px;
    width: 100%;
    height: 100%; 
    object-fit: cover;
    box-shadow: 0 0 20px rgba(0,0,0,0.33);
}

.grid-item--width-100pc {
    width: 100%;
}
@media screen and (max-width:767px) {
    .grid-item {
        padding: 10px;
    }
    .grid-item--width-25 {
        width: 50%;
    }
    .grid-item--width-50 {
        width: 100%;
    }
    .grid-item--width-75 {
        width: 100%;
    }
    .grid-item--width-100 {
        width: 100%;
    }
    
    .grid-item--height-25 {
        height: auto;
    }
    .grid-item--height-50 {
        height: auto;
    }
    .grid-item--height-75 {
        height: auto;
    }
    .grid-item--height-100 {
        height: auto;
    }
    
    .grid-item--width-33 {
        width: 50%;
    }
    .grid-item--width-66 {
        width: 100%;
    }
    .grid-item--height-33 {
        height: auto;
    }
    .grid-item--height-66 {
        height: auto;
    }
    /* XS ONLY OVERRIDES */
    .grid-item--xs-width-50 {
        width: 100%;
    }
}
@media screen and (min-width:768px) {
    .grid-item--width-25 {
        width: 360px;
    }
    .grid-item--width-50 {
        width: 360px;
    }
    .grid-item--width-75 {
        width: 720px;
    }
    .grid-item--width-100 {
        width: 720px;
    }
    
    .grid-item--height-25 {
        height: 360px;
    }
    .grid-item--height-50 {
        height: 360px;
    }
    .grid-item--height-75 {
        height: 720px;
    }
    .grid-item--height-100 {
        height: 720px;
    }
    
    .grid-item--width-33 {
        width: 240px;
    }
    .grid-item--width-66 {
        width: 480px;
    }
    .grid-item--height-33 {
        height: 240px;
    }
    .grid-item--height-66 {
        height: 480px;
    }
}
@media screen and (min-width:1024px) {
    .grid-item--width-25 {
        width: 240px;
    }
    .grid-item--width-50 {
        width: 480px;
    }
    .grid-item--width-75 {
        width: 720px;
    }
    .grid-item--width-100 {
        width: 960px;
    }
    
    .grid-item--height-25 {
        height: 240px;
    }
    .grid-item--height-50 {
        height: 480px;
    }
    .grid-item--height-75 {
        height: 720px;
    }
    .grid-item--height-100 {
        height: 960px;
    }
    
    .grid-item--width-33 {
        width: 320px;
    }
    .grid-item--width-66 {
        width: 640px;
    }
    .grid-item--height-33 {
        height: 320px;
    }
    .grid-item--height-66 {
        height: 640px;
    }
}
@media screen and (min-width:1200px) {
    .grid-item--width-25 {
        width: 285px;
    }
    .grid-item--width-50 {
        width: 570px;
    }
    .grid-item--width-75 {
        width: 855px;
    }
    .grid-item--width-100 {
        width: 1140px;
    }
    
    .grid-item--height-25 {
        height: 285px;
    }
    .grid-item--height-50 {
        height: 570px;
    }
    .grid-item--height-75 {
        height: 855px;
    }
    .grid-item--height-100 {
        height: 1140px;
    }
    
    .grid-item--width-33 {
        width: 380px;
    }
    .grid-item--width-66 {
        width: 760px;
    }
    .grid-item--height-33 {
        height: 380px;
    }
    .grid-item--height-66 {
        height: 760px;
    }
}
@media screen and (min-width:1400px) {
    .grid-item--width-25 {
        width: 330px;
    }
    .grid-item--width-50 {
        width: 660px;
    }
    .grid-item--width-75 {
        width: 990px;
    }
    .grid-item--width-100 {
        width: 1320px;
    }
    
    .grid-item--height-25 {
        height: 330px;
    }
    .grid-item--height-50 {
        height: 660px;
    }
    .grid-item--height-75 {
        height: 990px;
    }
    .grid-item--height-100 {
        height: 1320px;
    }
    
    .grid-item--width-33 {
        width: 440px;
    }
    .grid-item--width-66 {
        width: 880px;
    }
    .grid-item--height-33 {
        height: 440px;
    }
    .grid-item--height-66 {
        height: 880px;
    }
}
@media screen and (min-width:1920px) {
    .container {
        max-width: 1800px;
    }
    .grid-item--width-25 {
        width: 300px;
    }
    .grid-item--width-50 {
        width: 600px;
    }
    .grid-item--width-75 {
        width: 900px;
    }
    .grid-item--width-100 {
        width: 1200px;
    }
    
    .grid-item--height-25 {
        height: 300px;
    }
    .grid-item--height-50 {
        height: 600px;
    }
    .grid-item--height-75 {
        height: 900px;
    }
    .grid-item--height-100 {
        height: 1200px;
    }
    
    .grid-item--width-33 {
        width: 450px;
    }
    .grid-item--width-66 {
        width: 900px;
    }
    .grid-item--height-33 {
        height: 450px;
    }
    .grid-item--height-66 {
        height: 900px;
    }
}
@media screen and (min-width:1920px) {
    .container {
        max-width: 1800px;
    }
    .grid-item--width-25 {
        width: 450px;
    }
    .grid-item--width-50 {
        width: 900px;
    }
    .grid-item--width-75 {
        width: 1350px;
    }
    .grid-item--width-100 {
        width: 1800px;
    }
    
    .grid-item--height-25 {
        height: 450px;
    }
    .grid-item--height-50 {
        height: 900px;
    }
    .grid-item--height-75 {
        height: 1350px;
    }
    .grid-item--height-100 {
        height: 1800px;
    }
    
    .grid-item--width-33 {
        width: 600px;
    }
    .grid-item--width-66 {
        width: 1200px;
    }
    .grid-item--height-33 {
        height: 600px;
    }
    .grid-item--height-66 {
        height: 1200px;
    }
}
@media screen and (min-width:2048px) {
    .container {
        max-width: 1920px;
    }
    .grid-item--width-25 {
        width: 240px;
    }
    .grid-item--width-50 {
        width: 480px;
    }
    .grid-item--width-75 {
        width: 720px;
    }
    .grid-item--width-100 {
        width: 960px;
    }
    
    .grid-item--height-25 {
        height: 240px;
    }
    .grid-item--height-50 {
        height: 480px;
    }
    .grid-item--height-75 {
        height: 720px;
    }
    .grid-item--height-100 {
        height: 960px;
    }
    
    .grid-item--width-33 {
        width: 320px;
    }
    .grid-item--width-66 {
        width: 640px;
    }
    .grid-item--height-33 {
        height: 320px;
    }
    .grid-item--height-66 {
        height: 640px;
    }
}
@media screen and (min-width:2400px) {
    .container {
        max-width: 2280px;
    }
    .grid-item--width-25 {
        width: 285px;
    }
    .grid-item--width-50 {
        width: 570px;
    }
    .grid-item--width-75 {
        width: 855px;
    }
    .grid-item--width-100 {
        width: 1140px;
    }
    
    .grid-item--height-25 {
        height: 285px;
    }
    .grid-item--height-50 {
        height: 570px;
    }
    .grid-item--height-75 {
        height: 855px;
    }
    .grid-item--height-100 {
        height: 1140px;
    }
    
    .grid-item--width-33 {
        width: 380px;
    }
    .grid-item--width-66 {
        width: 760px;
    }
    .grid-item--height-33 {
        height: 380px;
    }
    .grid-item--height-66 {
        height: 760px;
    }
}
@media screen and (min-width:2800px) {
    .container {
        max-width: 2640px;
    }
    .grid-item--width-25 {
        width: 330px;
    }
    .grid-item--width-50 {
        width: 660px;
    }
    .grid-item--width-75 {
        width: 990px;
    }
    .grid-item--width-100 {
        width: 1320px;
    }
    
    .grid-item--height-25 {
        height: 330px;
    }
    .grid-item--height-50 {
        height: 660px;
    }
    .grid-item--height-75 {
        height: 990px;
    }
    .grid-item--height-100 {
        height: 1320px;
    }
    
    .grid-item--width-33 {
        width: 440px;
    }
    .grid-item--width-66 {
        width: 880px;
    }
    .grid-item--height-33 {
        height: 440px;
    }
    .grid-item--height-66 {
        height: 880px;
    }
}
.quote h1,
.quote .h1 {
    font-family: 'Cormorant Infant', serif;
    font-weight: 300;
}
.quote .smaller-text h1,
.quote .smaller-text .h1 {
    font-size: 32px;
    line-height:1.2;
}
.quote .vsmaller-text h1,
.quote .vsmaller-text .h1 {
    font-size: 26px;
    line-height:1.2;
}
.quote .highlighted {
    font-weight: 600;
    color: #C81470;
}
.quote .highlighted-pink {
    font-weight: 600;
    color: #C81470;
}
.quote .highlighted-cyan {
    font-weight: 600;
    color: #0dcaf0;
}
.quote .justified {
    text-align: justify;
}
.quote .grid-item-inner {
    padding:10px;
}
.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.text-light .blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(255,255,255,0.5);
}


.grid-item .overview {
    z-index: 1;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    border-start-end-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: all 400ms;
    transform-style: preserve-3d;
    /*transform: rotateX(-90deg) translateZ(-100px) translateY(100%);*/
    transform: rotateX(90deg) translateZ(0px) translateY(0px) scale(1.1);
    opacity: 0;
    perspective: 500px;
    transform-origin: center bottom;
}
.grid-item .overview-inner {
    color: white;
    background: rgba(0,0,0,0.8);
    border:rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    border-start-end-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 10px;
}
.grid-item.active .overview {
    transform: rotateX(0deg) translateZ(0px) translateY(0px) scale(1);
    opacity: 1;
}


.overview-card img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width:1023px) {
    .quote h1,
    .quote .h1 {
        font-size: 24px;
        line-height:1.2;
    }
    .quote .smaller-text h1,
    .quote .smaller-text .h1 {
        font-size: 24px;
        line-height:1.2;
    }
    .quote .vsmaller-text h1,
    .quote .vsmaller-text .h1 {
        font-size: 16px;
        line-height:1.2;
    }
    
    .overview-description {
        display: none;
    }
    .grid-item .overview {
        padding: 0px;
    }
}