/* whole page */
@font-face {
    font-family: 'banco';
    src: url("../fonts/banco.c0b0f026826d.ttf");
    src: local('../fonts/banco.ttf')
}

@font-face {
    font-family: 'kabel-black';
    src: url("../fonts/Kabel-Black.307622455a4a.ttf");
    src: local('../fonts/Kabel-Black.ttf')
}

@font-face {
    font-family: 'hot-air';
    src: url("../fonts/Hot-Air.d41d8cd98f00.ttf");
    src: local('../fonts/Hot-Air.ttf')
}


body {
    font-family: 'Nunito', sans-serif;
    font-size: 19px;
    color: white;
    height: 100%;
}

footer {
    height: 10em;
    width: 100%
}

h1 {
    font-family: 'Bowlby One SC', cursive;
}

.bg-default {
    background-color: #CE3939;
}

.white-bg {
    background-color: white;
    color: black;
}

.red-bg {
    background-color: #CE3939;
}

.container-fluid {

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.text-align-center {
    text-align: center;
}

.container-grid {
    display: grid;
    grid-template-columns: [first] 5em [line2] 5em [line3] auto [col4-start] 5em [five] 5em [end];
    grid-template-rows: [row1-start] 2em [row1-end] auto [last-line];
}

.split-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.grid-item-centre-3 {
    grid-column: 2 / span 3;
    grid-row: 2;
}

.grid-item-centre {
    grid-column: 3 / span 1;
    grid-row: 2;
}

.merch-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}

img.merch {
    display: block;
    max-width: 30%;
    height: auto;
}

/* Animated img */
@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(0deg);
    }
    85% {
        transform: rotate(5deg);
    }
    95% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

img.wiggle {
    animation: wiggle 2.5s infinite;
    animation-delay: 20s;
}

img.wiggle:hover {
    animation: none;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
    border-color: black;
}


a {
    text-decoration: none;
}

.p-menu1 {
    height: 100%;
}


/* Hamburger */
.hamburger1 {
    height: 45px;
    margin: 10px;
    display: -ms-grid;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    z-index: 120;
}

.hamburger1 div {
    background-color: rgb(61, 61, 61);
    position: relative;
    width: 40px;
    height: 5px;
    margin-top: 7px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#toggle1 {
    display: none;
}

#toggle1:checked + .hamburger1 .top {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: 22.5px;
}

#toggle1:checked + .hamburger1 .meat {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -5px;
}

#toggle1:checked + .hamburger1 .bottom {
    -webkit-transform: scale(0);
    transform: scale(0);
}

#toggle1:checked ~ .menu1 {
    height: 340px;
}


/* Menu */
.menu1 {
    width: 100%;
    background-color: #CE3939;
    margin: 0;
    display: -ms-grid;
    display: grid;
    grid-template-rows: 1fr repeat(4, 0.5fr);
    grid-row-gap: 5px;
    padding: 0;
    list-style: none;
    clear: both;
    width: auto;
    text-align: center;
    height: 0px;
    overflow: hidden;
    transition: height .4s ease;
    z-index: 120;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu1 a:first-child {
    margin-top: 40px;
}

.menu1 a:last-child {
    margin-bottom: 40px;
}

.link1 {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    font: 700 19px 'Nunito', sans-serif;
    color: white;
}

.link1:hover {
    background-color: #CE3939;
    color: rgb(61, 61, 61);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Menu end */

#twitter-logo {
    max-width: 50px;
    width: auto;
    height: auto;
}

.red-href > a {
    color: #CE3939;
}

.film-clip {
    padding: 30px;
    color: #CE3939;
    max-width: 700px;
    margin: auto;
}

.film-year, .film-credits {
    font-size: smaller;
    color: #CE3939;
}

.film-title, .panel-heading {
    font-weight: bold;
}

.red-text {
    color: #CE3939;
}

.red-text a:hover {
    color: #a32929;
}

.special-offers-panel {
    margin-top: 3em;
}

.padded-box {
    padding:10px;
}


/* NAVBAR */
#nav-logo {
    font-family: 'Bowlby One SC', cursive;
    color: #FFCC99;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #CE3939;
    overflow: hidden;
    border-bottom: 1px solid #a32929;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 19px;
    font-family: 'Nunito', sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #a32929;
    color: white;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #CE3939;
    color: white;
}

.topnav .icon {
    display: none;
}
.cart {
  padding: 0px 10px;
    height: 32px;
}

.quantity, .total-quantity {
  margin-left: 2px;
}

@media screen and (max-width: 1180px) {
    .merch-flex {
        flex-direction: column;
    }

    .container-grid {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 1180px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* END NAVBAR  */