/*New Registration Flow Template

Created by Jason Aquino-Evans
TRM Limited (UK) 2018

This document contains examples of what you can change with CSS on our registration flow to meet your needs. Use this as you may

The section below is for changing the section that contains the event name and logo*/

.event {
    background-image: linear-gradient(to right,#0050E1, #000FA5);
    color: white;
    padding: 0 10px;
    height: 80px;
    position: relative;
}

.event h1 {
    background: url(../images/logo.png);
    display: block;
    width: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.event h1, .offMobile p {
    margin: 0;
    font-family: tasseMedium !important;
    font-size: 26px;
}

.event h2 {
    margin: 0;
    font-size: 26px;
    font-family: tasseMedium !important;
    line-height: 1.2em;
}

.event img {
    width: 45px;
    height: 45px;
    box-shadow: 0 0 11px 1px #9e9e9e;
    border-radius: 50%;
    opacity: 0;
}

/* This is used for the main buttons such as 'Get Tickets'*/
.btnPrimary {
    background: #0050E1 !important;
    margin-top: 12px;
    color: white !important;
    font-family: tasseMedium !important;
}

/* Button used in the same section as the event name */
.btnSecondary {
    background-color: #ffffff !important;
    color: black !important;
}

/* Map icon and event date icons */

.icons {
    color: #000FA5 !important;
    font-size: 5em;
}

/* Banner container */
.banner {
    background: url(../images/banner.jpg) !important;
    background-size: cover !important;
    height: 440px;
    max-width: 100%;
    max-height: 71%;
    box-shadow: 0 0 15px -4px #0000;
    background-color: rgba(0, 0, 0, .1) !important;
    background-size: cover !important;
    background-repeat: no-repeat!important;
    background-position-y: -220px !important;
}

/* Main body background */
body {
    background: url('../images/background.jpg') top no-repeat !important;
    font-family: 'Rokkitt', serif;
    font-size: 20px;
    background-color: #002e5285 !important;
    background-blend-mode: overlay;
    background-size: cover !important;
    color: #333333;
    margin: 0;
}

/* Container that contains the ticket selection box, event location and date boxes */
.container {
    margin: 0 auto;
    background: #ffffff;
}

/* Footer */
.footer {
    background-image: linear-gradient(to right,#0050E1, #000FA5) !important;
    text-align: center;
}

hr.divider {
    border-top: 1px solid rgba(0, 0, 0, 0.7)!important;
}

/*This is the section in the footer that reads Powered By Trumin*/
.col-md-3 {
    display: none;
}

/*This is the ! icon next to the email confirmation box on the payment page*/
.orderCheckout .warning {
    display: none;
}

.header {
    min-height: 367px !important;
    background: none;
    background-size: cover;
    filter: blur(2px);
}

.breakingRestrictions {
    display: none !important;
}

.center-xs {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    filter: grayscale(150%) !important;
}

.btn.get_tickets {
    font-size: 0px;
}

.btn.get_tickets:before {
    font-size: 16px;
    font-family: 'Rokkitt', serif;
    content: "£300: PAY NOW" !important;
    visibility: visible;
}

.box h3, .box h4, .box p {
    color: #333;
    font-family: 'Rokkitt', serif;
}


.heading:before {
    font-family: 'Rokkitt', serif;
    font-size: 20px;
    content: "Tell us your email address. We'll use this as your Trumin account and it's where we'll send your confirmation of entry." !important;
}

.heading {
    font-size: 0px !important;
}

.stepperContainer .ticketInfo p {
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    margin: 0;
}

p {
    font-family: 'Rokkitt', serif;
    font-size: 20px;
}

.jss36 {
    width: 100%;
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
    visibility: hidden;
}

.rightSection h3, .rightSection p {
    padding-left: 40px;
    padding-top: 10px;
    text-align: left!important;
    color: #333!important;
    font-size: 27px;
}

.rightSection .address, .rightSection .time {
    font-size: 18px !important;
}

.offMobile p {
    margin: -7px;
    font-family: tasseMedium !important;
    font-size: 0px;
}

.col-md-2 {
    filter: brightness(3.5);
}

@media only screen and (max-width: 767px) {
    body {
    background-color: #ffffff !important;
    }
    .btnPrimary{
        font-size: 0px;
        width: 129px;
    }

    .col-xs-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
        margin-left: -13px;
    }

    .btnPrimary:before {
        background: #0050E1 !important;
        margin-top: 12px;
        color: white !important;
        font-family: tasseMedium !important;
        font-size: 26px;
        content: "£300: PAY NOW";
        font-family: 'Rokkitt', serif;
    }
}

pre {
    visibility: hidden;
}

@media only screen and (max-width: 767px) {
    .banner {
        background: url(../images/banner.jpg) !important;
        max-width: 100%;
        max-height: 71%;
        box-shadow: 0 0 15px -4px #0000;
        background-color: rgba(0, 0, 0, .1) !important;
        background-size: cover !important;
        background-repeat: no-repeat!important;
    }
        pre {
        visibility: hidden;
    }
}

@media only screen and (max-width: 767px) {
	.banner.container {
		background-position: center center !important;
	}
}