/*.vc_row .wpb_row section .vc_row-fluid  .event-background {*/
    /*background-position: top left !important;*/

/*}*/

#event-background{
    background-position: top left !important;
    background-size: contain !important;
}

.event {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto 64px 64px;
    grid-template-areas:
    "box-left box-text event-box-box-logo"
    "event-box-picture box-text event-box-box-text"
    "event-box-picture box-text event-button-2"
    "event-box-picture box-text event-button";
    /*height: 290px;*/
    /*padding-bottom: 40px;*/
}

.event2 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto 64px;
    grid-template-areas:
    "box-left box-text event-box-box-logo"
    "event-box-picture box-text event-box-box-text"
    "event-box-picture box-text event-box-box-text"
    "event-box-picture box-text event-button";
    /*height: 290px;*/
    /*padding-bottom: 40px;*/
}

.event-box-left {
    grid-area: box-left;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    background-color: #ffffff;
    /*padding: 30px;*/
    padding-top: 30px;
    padding-left: 45px;
    min-height: 120px;
}

.event-box-day {
    color: #999999;
    font-size: 44px;
    line-height: 52px;
    font-weight: 400;
    letter-spacing: 1px;
}

.event-box-month {
    /*padding-top: 15px;*/
    padding-bottom: 10px;
    color: #999999;
}

.event-box-month p {
    color: #999999;
}

.event-title {
    color: #999999;
    font-size: 24px;
    line-height: 30px;
    font-family: "PT Sans";
    font-weight: 400;
    letter-spacing: 1px;
    padding-bottom: 20px;
}

.event-box-text {
    grid-area: box-text;
    display: flex;
    flex-direction: column;
    align-content: center;
    background-color: #ffffff;
    padding: 30px;
    margin-right: 4px;
    min-height: 230px;
}

.buttons {
    display: flex;
    flex-direction: column;
}

.event-box-picture {
    grid-area: event-box-picture;
    display: flex;
    /*align-content: stretch;*/
    justify-content: flex-end;
    padding-bottom: 40px;
    flex-direction: column;
    background-color: white;
    /*height: 100%;*/
}

.event-box-picture img {
    /*padding-top: 50px;*/
    height: 60px;
    width: auto;
    margin-left: 30px;
    margin-right: auto;
    padding-left: 10px;
}

.event-box-right {
    grid-area: box-right;
    display: flex;
    /*row-gap: 5px;*/
    flex-direction: column;
    align-content: stretch;
    min-height: 230px;

}

.event-box-box {
    grid-area: event-box-box;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    background-color: #f5f5f5;
    /*padding: 30px;*/
    height: 100px;
    /*margin-left: 2px;*/
}

.event-box-box-text {
    grid-area: event-box-box-text;
    padding: 0;
    display: flex;
    background-color: #f9f9f9;
    justify-content: center;
    flex-direction: column;
    min-height: 100px;
}

.event-box-box-logo {
    grid-area: event-box-box-logo;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    justify-content: flex-end;
    background-color: #f9f9f9;
    padding: 30px;
}

.event-box-box-logo img {
    height: 60px !important;
    width: 60px !important;
}

.event-text {
    text-align: center;
    font-family: "PT Sans";
    color: #000000;
    font-weight: bold;
}

.event-text-additional {
    text-align: center;
    font-family: "PT Sans";
    color: #818181;
}

.empty {
    height: 40px;
}

.event-box-text p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*@media screen*/
/*and (min-device-width: 1200px)*/
/*and (max-device-width: 1500px) {*/
    /*.event-box-text {*/
        /*height: 290px;*/
    /*}*/
/*}*/

/* Bounce To Right */
.event-button {
    grid-area: event-button;
    background: #0099ff;
    color: white;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.event-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #006eff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.event-button:hover, .event-button:focus, .event-button:active {
    color: white;
}
.event-button:hover:before, .event-button:focus:before, .event-button:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Right */
.event-button-2 {
    grid-area: event-button-2;
    background: #0099ff;
    color: white;
    height: 60px;
    line-height: 60px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    /*margin-bottom: 4px;*/
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.event-button-2:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #006eff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.event-button-2:hover, .event-button-2:focus, .event-button-2:active {
    color: white;
}
.event-button-2:hover:before, .event-button-2:focus:before, .event-button-2:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*!* ----------- iPhone X ----------- *!*/

/*!* Portrait and Landscape *!*/
/*@media only screen*/
/*and (min-device-width: 375px)*/
/*and (max-device-width: 812px)*/
/*and (-webkit-min-device-pixel-ratio: 3) {*/
    /*.event {*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr;*/
        /*grid-template-areas:*/
                /*"box-left box-text"*/
                /*"event-box-box-logo event-box-box-text"*/
                /*"event-button-2 event-button-2"*/
                /*"event-button event-button";*/
        /*height: 290px;*/
        /*padding-bottom: 40px;*/
    /*}*/
/*}*/

@media only screen and (max-width: 1025px) {
    .event {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "box-left event-box-picture"
                "box-text box-text"
                "box-text box-text"
                "event-box-box-logo event-box-box-text"
                "event-button-2 event-button-2"
                "event-button event-button";
        justify-items: stretch;
        /*grid-row-gap: 5px;*/
        height: auto;
    }

    .event2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "box-left event-box-picture"
                "box-text box-text"
                "box-text box-text"
                "event-box-box-logo event-box-box-text"
                "event-button event-button";
        justify-items: stretch;
        /*grid-row-gap: 5px;*/
        height: auto;
    }

    .event-box-text {
        margin-right: unset;
        margin-bottom: 4px;
    }

    .event-box-left {
        min-height: 400px;
        /*flex-direction: row;*/
        min-height: unset;
        padding-top: 20px;
        padding-left: 30px !important;
    }

    .event-box-right {
        flex-direction: row;
        align-content: stretch;
        min-height: 400px;
    }

    .event-box-picture {
        height: unset;
        justify-content: center;
        padding-bottom: unset;
    }

    .event-box-box-logo {
        margin-right: 2px;
        /*min-height: 150px;*/
        justify-content: center;
        align-items: center;
    }

    .event-box-box-text {
        grid-area: event-box-box-text;
        justify-content: center;
        margin-left: 2px;
        min-height: 150px;
    }

    .event-button {
        margin-top: unset;
    }

    .event-button-2 {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .event-box-text h5 {
        text-align: left;
    }
    .event-box-text p {
        /*display: none;*/
    }

    .event-box-day {
        text-align: left;
    }

    .event-box-month {
        text-align: left;
    }

    .event-box-picture img {
        padding-top: unset;
    }

    .event2 .event-button {
        margin-top: 4px;
    }
}

@media only screen and (max-width: 600px) {
    .event {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "box-left box-left"
                "box-text box-text"
                "box-text box-text"
                "event-box-picture event-box-picture"
                "event-box-box-logo event-box-box-text"
                "event-button-2 event-button-2"
                "event-button event-button";
        justify-items: stretch;
        /*grid-row-gap: 5px;*/
        height: auto;
    }

    .event2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "box-left box-left"
                "box-text box-text"
                "box-text box-text"
                "event-box-picture event-box-picture"
                "event-box-box-logo event-box-box-text"
                "event-button-2 event-button-2"
                "event-button event-button";
        justify-items: stretch;
        /*grid-row-gap: 5px;*/
        height: auto;
    }

    .event-box-left {
        flex-direction: row;
        padding-bottom: 10px;
        min-height: unset;
        justify-content: left;
        padding-left: unset;
    }

    .event-box-month p {
        margin-top: 5px;
    }

    .event-box-day {
        font-family: "PT Sans";
        font-size: 24px;
        line-height: 30px;
        font-weight: 400;
        color: #999999;
    }
    .event-box-month {
        font-family: "PT Sans";
        font-size: 24px;
        line-height: 30px;
        font-weight: 400;
        color: #999999;
        padding-left: 10px;
    }

    .event-box-text {
        justify-content: center;
        margin-bottom: unset;
        min-height: 100px;
        padding-top: unset;
        padding-bottom: unset;
        min-height: 80px;
    }

    .event-box-text-text {
        display: none;
    }

    .event-box-picture {
        margin-bottom: 4px;
        /*min-height: 100px;*/
        padding-bottom: 20px;
    }

    .event2 .event-button {
        margin-top: 4px;
    }

    .event-title {
        color: black;
        font-size: 17px;
        line-height: 25px;
        font-weight: bold;
    }

    .event-box-picture img {
        /*padding-top: 50px;*/
        height: 40px;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        /*padding-left: 10px;*/
    }
}