@import url('https://fonts.googleapis.com/css?family=Rammetto+One&display=swap');
/* font-family: 'Rammetto One', cursive; */

@import url('https://fonts.googleapis.com/css?family=Rock+Salt&display=swap');
/* font-family: 'Rock Salt', cursive; */


.frockPage h3 {
    font-size:2.5em;
    line-height:1em;
    text-align:center;
    font-family: 'Rock Salt', cursive;
    margin-top:2em;
}

#frockHero {
    padding:26em 0 0;
    background-color:#9E7A90;
    background-image:url(../images/frock/Lux-WhatTheFrock-HeroV1-Border.png);
    background-size:cover;
    height:100%;
    width:100%;
    position:relative;
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-position:center center;
    display:block;
    top:0;
    overflow:hidden;
    margin:0 auto;
}

    .spinning {
        -webkit-animation: rotation 14s infinite linear;
        /* z-index: -100; */
        position: absolute;
        top: -500px;
        left: 0;
        height: 1400px;
        width: auto;
        opacity: 1;
    }

    @-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
    }

    #wednesday {
        position:absolute;
        bottom:7px;
        left: 22px;
        z-index: 10;
        height: 382px;
        width:auto;
    }

#frockLogo {
    position: absolute;
    top: 45px;
    right: 70px;
}

    #frockLogo img {
        height:225px;
        width:auto;
    }

#frockStarring {
    position: absolute;
    top: 50px;
    left: 300px;
    transform: rotate(7deg);
    z-index: 11;
    text-shadow: 0 0 10px #000000;
}


#frockHero h2, #frockHero h3, #frockHero h4 {
    font-family: 'Rammetto One', cursive;
}

#featuringWord {
    position: absolute;
    top: 215px;
    left: 305px;
    transform: rotate(-5deg);
    text-shadow: 0 0 10px #000000;
}

    #featuringWord p {
        font-size:1.5em;
        font-family: 'Rammetto One', cursive;
        text-transform:uppercase;
    }

#featuringLeft {
    position: absolute;
    bottom: 30px;
    right: 500px;
}

#featuringMiddle {
    position: absolute;
    bottom: 30px;
    right: 300px;
}

#featuringRight {
    position: absolute;
    bottom: 30px;
    right: 100px;
}

#frockHero h5 {
    font-family: 'Rock Salt', cursive;
    font-size:1em;
    color:#fff;
}

#frockHero h6 {
    font-family: 'Rock Salt', cursive;
    font-size: 2.25em;;
    color: #fff;
    line-height: .9em;
}

#featuringLeft img, #featuringRight img, #featuringMiddle img {
    height:150px;
    width:auto;
}


#nextFrock {
    margin:0 auto;
    padding:2em 4em 1em;
    position:relative;
    display:grid;
    grid-template-columns:20% 60% 20%;
    
}

.frockPoster.left {
    grid-column:1;
}

    .frockPoster.left img {
        height:200px;
        width:auto;
        transform: rotate(-5deg);
    }

.frockPoster.right {
    grid-column:3;
}

    .frockPoster.right img {
        height:200px;
        width:auto;
        transform: rotate(5deg);
    }

.frockDetails {
    grid-column:2;
    padding-top:1em;
}

.frockDetails h2 {
    margin-bottom:1em;
    font-size:1.5em;
    line-height:1.25em;
}

.frockDetails h2 span {
    color:#A90000;
}

.frockDetails h2 span.large {
    font-size:2em;
}

.frockDetails a.button {
    width:50%;
}

#frockIntro {
    font-size:1.3em;
    line-height:1.4em;
    text-align:center;
    padding:0 5em 2em;
}

.frockFacebook {
    display:block;
    margin:1em auto 0;
    height:90px;
    width:auto;
}

.eventListings.frock {
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap:1em;
    grid-column-gap:1em;;
}

.frockGallery .rl-gallery-item, .frockPosters .rl-gallery-item  {
    height:200px;
}

.frockGallery .rl-gallery-item img, .frockPosters .rl-gallery-item img {
    width:100%;
    object-fit:cover;
    height:300px;
    object-position: center;
    opacity:.6;
    -webkit-transition:all .4s ease;  
    -moz-transition:all .4s ease;  
    -o-transition:all .4s ease;  
    transition:all .4s ease;
}