/* Multibuy Styling */

/* Setting out grid */

/* This part sets out the grid and the structural outline of the cards */

.OffersDiv .Events {
    align-content: flex-start;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-line-pack: start;
    margin-top: 20px;
}

.Multibuypage .Event {
    margin-bottom: 20px;
    margin-right: 20px;
    width: 220px;
}

/* Cosmetics */

/* The event description is exposed on this page but as they can be quite long, it would be better hide them with this kind of layout. */

.Multibuypage .Event_Description {
    display: none;
}

/* Event Image */

/* Prefer setting images to fixed size - this will prevent issues with our iframe resize script */

.Multibuypage .Event_Image > img {
    border: 0;
    display: block;
    height: 293px;
    vertical-align: middle;
    width: 100%;
}


/* Event Details */

/* Handles the structure of the all the elements below the image in each card */

.Multibuypage .Event_Text {
    border: 1px solid #ddd;
    min-height: 89px;
    padding: 6px 10px 6px initial;
}

.Multibuypage .Event_Name {
    display: block;
    margin: 12px 0;
}

.Multibuypage .Event_Dates.Event_Detail {
    display: block;
}

.Multibuypage .More_Info.Event_Detail {
    display: block;
}


/* Buttons */

/* These are the "More information" links within the panel. 
Semantically they are not buttons but contextually styling them this way works well. */

.Multibuypage .More_Info.Event_Detail {
    background-color: #444;
    border: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #fff;
    display: block;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px 0;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.Multibuypage .More_Info.Event_Detail:hover {
    background-color: #222;
    color: #fff;
}

/* This is the continue to basket button */

.Multibuypage .Button.DeclineButton {
    float: right;
    margin-bottom: 30px;
}

/* Responsive Styling */

/* Higher resolution PC's, Laptops and TV */

@media (min-width: 1200px) {
   .Multibuypage .Event {
        margin-right: 30px;
        width: 270px;
    }
    
   .Multibuypage .Event_Text {
        min-height: 74px;
    }
    
    .Multibuypage .Event_Image > img {
        height: 359px;
    }
}

/* Lower resolution devices - low end tablets */

@media (max-width: 979px) and (min-width: 768px) {
    .Multibuypage .Event {
        margin-right: 20px;
        width: 166px;
    }
    .Multibuypage .Event_Text {
        min-height: 104px;
    }
    .Multibuypage .Event_Image > img {
        height: 221px;
    }
}

/* Mobile styling - Fully stacked and centered */

@media (max-width: 767px) {
   .Multibuypage .Event {
        display: block;
        width: 270px;
        margin-right: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .Multibuypage .Event_Image > img {
        height: 359px;
    }
    .Multibuypage .Event {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }
}