.grid-fancy-border {
        background-color: transparent;
        position: absolute;
        border-radius: 1rem;
        border: 5px solid #fff;
        width: 90%;
        height: 90%;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
}

.grid-fancy-header {
        background-color: #00205b50;
        position: absolute;
        border-radius: 1rem;
        border: 0px solid #fff;
        width: 100%;
        height: 30%;
        margin: 0;
        bottom: 0;
        overflow: hidden;
}

.grid-fancy-header-text {
        background-image: url(https://media.giphy.com/media/l378sOvgHwmw7G21q/giphy-downsized.gif);
        background-size: cover;
        color: transparent;
        -moz-background-clip: text;
        -webkit-background-clip: text;
        text-transform: uppercase;
        -webkit-text-stroke: 1px #fff;
        text-stroke: 1px #fff;
        font-family: "Hardcore";
        font-weight: 400;
        font-size: 2.8rem;
        letter-spacing: 2px;
        text-align: left;
        margin-left: 5%;
        margin-top: 10px;
        border-bottom: 1px #fff solid;
}

.grid-fancy-text {
        color: #fff;
        font-family: "Montserrat";
        font-weight: 200;
        font-size: 1.1rem;
        text-align: left;
        line-height: 1.6rem;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 5px;
        white-space: pre-line;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
}

.read-btn-wrapper {
        display: table;
        width: 200px;
        margin-top: 15px;
        margin-left: 5%;
}

.read-btn-pulse {
        color: #ccc;
        background-color: transparent;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        font-size: 11px;
        height: 40px;
        width: 120px;
        margin: 0px auto 0;
        display: table-cell;
        border: 1px solid #ba0c2f;
        border-radius: 0px;
        position: relative;
        transition: all 0.15s 0.15s ease-in-out;
        vertical-align: middle;
        padding: 0px 20px;
        animation: btnPulse 2s infinite forwards ease;
        overflow: hidden;
}

.read-btn-pulse:hover {
        background-color: #ba0c2f;
        color: #fff;
}

@keyframes btnPulse {
        0% {
                box-shadow: 0 0 0 0 rgba(219, 39, 99, 0.5);
        }
        70% {
                box-shadow: 0 0 0 20px rgba(219, 39, 99, 0);
        }
        100% {
                box-shadow: 0 0 0 0 rgba(219, 39, 99, 0);
        }
}


.grid-label {
        display: inline-block;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
}

.grid-label-bk {
        background-image: linear-gradient(180deg, #878E97, #222);
        position: absolute;
        top: 0%;
        right: 40%;
        height: 100%;
        width: 100%;
        border-radius: 0rem;
        transform: skew(-15deg, 0deg);
        border-right: 1px solid #cccccc30;
}

.grid-border {
        transition: 0.5s ease;
        border-radius: 1rem;
        border: 1px solid #cccccc30;
        position: relative;
}

.grid-border:hover {
        box-shadow: 0 0 0 2px #dcdcdc;
        transition: 0.2s ease;
        border-radius: 1rem;
        border: 1px solid #cccccc30;
}

.cta-img {
        height: 100%;
        width: 50%;
        margin-left: 0;
        object-fit: cover;
        overflow: hidden;
        position: absolute;
}

.grid-img {
        border-radius: 1rem;
        max-height: 100%;
        height: auto;
        width: 100%;
        object-fit: cover;
        overflow: hidden;
        position: absolute;
        //object-position: 30% 50%;
        box-shadow:0px 0px 15px 2px rgba(0,0,0,0.2);
}

.grid-img-btn {
        border-radius: 1rem;
        height: 100%;
        width: 50%;
        margin-left: 50%;
        object-fit: cover;
        overflow: hidden;
        //object-position: 30% 50%;
        box-shadow:0px 0px 15px 2px rgba(0,0,0,0.2);
}

.grid-img-fill {
        object-fit: fill;
}

.grid-img:hover {
        box-shadow: 0px 0px 2px #8d8d8d;
}

.grid-img-shadow {
        border-radius: 1rem;
        height: 100%;
        width: 100%;
        //object-fit: cover;
        box-shadow:0px 0px 15px 2px rgba(0,0,0,0.2);
}


/* ----------- WHAT'S HAPPENING SECTION ----------- */

.grid-section-1 {
        display: grid;
        grid-column-gap: 6rem;
        grid-row-gap: 1rem;
        grid-template-columns: repeat(12, minmax(auto, 1fr));
        grid-template-rows: repeat(4, 130px);
        margin: auto;
        max-width: 80%;
        width: 100%;
        padding: 1rem 0;
}

.grid-section-1-item-1 {
        grid-row: 1/5;
        grid-column: 1/8;
        width: 100%;
        height: 100%;
        position: relative;
}

.grid-section-1-item-2 {
        grid-row: 1/1;
        grid-column: 8/13;
        width: 100%;
        transform: skew(-15deg, 0deg);
}

.grid-section-1-item-3 {
        grid-row: 2/2;
        grid-column: 8/13;
        width: 100%;
        transform: skew(-15deg, 0deg);
}

.grid-section-1-item-4 {
        grid-row: 3/3;
        grid-column: 8/13;
        width: 100%;
        transform: skew(-15deg, 0deg);
}

.grid-section-1-item-5 {
        grid-row: 4/4;
        grid-column: 8/13;
        width: 100%;
        transform: skew(-15deg, 0deg);
}


/* ----------- WHAT WE DO SECTION (DEPRECATED) ----------- */

.grid-section-2 {
        display: grid;
        grid-column-gap: 4rem;
        grid-row-gap: 2rem;
        grid-template-columns: repeat(4, minmax(auto, 1fr));
        grid-template-rows: repeat(3, 150px);
        margin: 0 auto;
        max-width: 80%;
        width: 100%;
        padding: 1rem 0;
}

.grid-section-2-item-1 {
        grid-row: 1/3;
        grid-column: 1/3;
        width: 100%;
        position: relative;
}

.grid-section-2-item-2 {
        grid-row: 1/3;
        grid-column: 3/5;
        width: 100%;
        position: relative;
}

.grid-section-2-item-3 {
        grid-row: 3/3;
        grid-column: 1/2;
        width: 100%;
        position: relative;
}

.grid-section-2-item-4 {
        grid-row: 3/3;
        grid-column: 2/3;
        width: 100%;
        position: relative;
}

.grid-section-2-item-5 {
        grid-row: 3/3;
        grid-column: 3/4;
        width: 100%;
        position: relative;
}

.grid-section-2-item-6 {
        grid-row: 3/3;
        grid-column: 4/4;
        width: 100%;
        position: relative;
}


/* ----------- OUR GAMES SECTION ----------- */

.grid-section-3 {
        display: grid;
        grid-column-gap: 4rem;
        grid-row-gap: 2rem;
        grid-template-columns: repeat(4, minmax(auto, 1fr));
        grid-template-rows: repeat(4, 150px);
        margin: 0 auto;
        max-width: 80%;
        width: 100%;
        padding: 3rem 0;
}

.grid-section-3-item-1 {
        grid-row: 1/3;
        grid-column: 1/3;
        width: 100%;
        position: relative;
}

.grid-section-3-item-2 {
        grid-row: 1/3;
        grid-column: 3/5;
        width: 100%;
        position: relative;
}

.grid-section-3-item-3 {
        grid-row: 3/5;
        grid-column: 1/3;
        width: 100%;
        position: relative;
}

.grid-section-3-item-4 {
        grid-row: 3/5;
        grid-column: 3/5;
        width: 100%;
        position: relative;
}


/* ----------- CALL-TO-ACTION SECTION ----------- */

.grid-section-4 {
        display: grid;
        grid-column-gap: 4rem;
        grid-row-gap: 2rem;
        grid-template-columns: repeat(2, minmax(auto, 1fr));
        grid-template-rows: repeat(1, 150px);
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        padding: 1rem 0;
}

.grid-section-4-item-1 {
        grid-row: 1/2;
        grid-column: 1/1;
        width: 100%;
        max-width: 50%;
}

.grid-section-4-item-2 {
        grid-row: 2/2;
        grid-column: 1/1;
        width: 100%;
        max-width: 50%;
}


/* ----------- WORK WITH US SECTION ----------- */

.grid-section-5 {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: repeat(2, minmax(auto, 1fr));
	grid-template-rows: repeat(1, 150px);
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	padding: 3rem 0;
}



.grid-section-5-item-1 {
	grid-row: 1/1;
	grid-column: 1/2;
	width: 50%;
	//max-width: 50%;
}

.grid-section-5-item-2 {
	grid-row: 1/1;
	grid-column: 2/2;
	width: 50%;
	//max-width: 50%;
}