
body {
	padding: 3vw;
}

.wtf-logo {
    margin: 0;
    max-width: 460px;
    max-height: 427px;
}

.wtf-header {
    padding-bottom: .5vh;
}

.header-cols {
	text-align: right;
	padding: 3vw 3vw 0;
    position: relative;
    z-index: 1;
    margin-bottom: -8vh;
}

@media screen and (max-width: 79.9375em) {/*  1279px */
    .header-cols__col {
        width: 50%;
        float: left;
    }
}

@supports (display: grid) {
    .header-cols {
        display: grid;
        grid-template-columns: 5fr 3fr;
        grid-column-gap: 20px;
        justify-items: stretch;
        align-items: end;
    }
    .header-cols__col {
        width: inherit;
        float: none;
    }

}

.header-cols *:last-child {
	margin-bottom: 0;
}


@media screen and (min-width: 48em) {/*  768px */
    body {
    	padding: 20px;
    }
	.header-cols {
		padding: 20px 20px 0;
	}
}

.section--blue {
    background: #77c5bd;
    color: #ffffff;
}

.section--navy {
    background: rgba(36, 34, 83, 1.0);
    color: #ffffff;
}

.section--blue .h1,
.section--navy h1,
.section--navy h2,
.section--navy .h2,
.section--navy .h1,
.section--navy a {
    color: #ffffff;
}


.section--navy h2,
.section--navy .h2 {
    text-transform: uppercase;
}

.section--navy a:hover,
.section--navy a:focus,
.section--navy a:active {
	color: rgba(255,255,255,.75);
}

.section--footer {
	color: #ffffff;
    padding: 8vh 8vw 5vh;
	text-align: center;
}

.section--terms a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0);
    transition: all 180ms ease-in-out;
}

.section--terms a:hover,
.section--terms a:focus,
.section--terms a:active {
    color: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(255,255,255,.5);
}

.section--blue-border {
    border-top: 1px solid rgba(119, 197, 189, 1.0);
}

.section--terms {
    padding: 30px 0;
    text-align: center;
}

.wtf-date {
	font-size: 7vw;
	line-height: 1.2;
	font-weight: 800;
}

.wtf-date__day {
	background: #fff101;
	color: #77c5bd;
	display: inline-block;
	line-height: 0.9;
	padding: 0 3vw 0.28em;
	margin-left: -3vw;
	margin-right: -1.5vw;
	position: relative;
	top: -1.1vw;
    background: url(../images/number-bg-deco.svg) no-repeat center center;
    background-size: 100% 100%;
}

.wtf-location {
	margin-left: -10px;
	text-transform: uppercase;
}

@media screen and (max-width: 26.25em) {/*  420px */
    .wtf-date {
        margin-bottom: 0;
    }
    .wtf-location {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}


@media screen and (min-width: 31.25em) {/*  500px */

    .wtf-date {
        font-size: 8vw;
    }
    .wtf-location {
    	font-size: 3.5vw;
    	line-height: 1.2;
    }

}

.wtf-location__time {
	color: #fff101;
}

.wtf-location__time:before {
	content: '// ';
	color: #FFFFFF;
	margin-left: -10px;
}

.wtf-illo {
	padding: 20px;
	background: url(../images/illo.svg) no-repeat center center;
	background-size: contain;
	min-height: 40vh;
    transform: translate(0px, 2.5vh);
}

.tagline {
	color: #bb2e2f;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	text-align: center;
	font-size: 5vw;
	padding: 10px 0;
    margin-bottom: 0;
}


.tagline span {
	color: #242253;
}


@media screen and (min-width: 42.5em) {/*  680px */
    .wtf-date {
    	font-size: 5.5rem;
    }

    .wtf-location {
    	font-size: 2.4rem;
    }

    .wtf-date__day {
    	top: -7.5px;
        padding-left: 26px;
        padding-right: 26px;
    	margin-left: -3px;
    	margin-right: -5px;
    }


    .wtf-illo {
    	min-height: 51vh;
    	margin-top: -5vh;
    }

    .tagline {
		letter-spacing: 0.25em;
		font-size: 3.9vw;
		padding: 2.5vw 0;
    }
}

@media screen and (min-width: 68.75em) {/*  1100px */
    .wtf-illo {
    	min-height: 560px;
    	margin-top: -200px;
    }
}

@media screen and (min-width: 80em) {/*  1280px */
	.wtf-header {
		position: relative;
		padding-bottom: 30px
	}

	.header-cols {
		display: block;
		text-align: left;
		padding: 3vw 3vw 0;
        margin-bottom: 0;
	}


	.wtf-logo {
		max-width: 400px;
		max-height: 427px;
	}

    .wtf-logo svg {
        width: 400px;
        height: 342px;
    }

	.wtf-date {
		padding-top: 20px;
	}

	.wtf-location,
	.wtf-location__time:before {
	    margin-left: 0px;
	}

    .wtf-illo {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	right: 2vw;
    	width: 70%;
    	background-size: 680px auto;

    	background-size: 860px auto;
    	background-position: bottom -1px right 0;

        transform: translate(0px, 3.5vh);
    }
}

@media screen and (min-width: 92.5em) {/*  1480px */


    .header-cols {
        padding-left: 8vw;
        padding-right: 8vw;
    }
    .wtf-illo {
    	right: 3vw;
    	background-size: 90% auto;
    }
}


@media screen and (max-width: 26.25em) {/*  420px */
    .wtf-illo {
        transform: translate(0px, 5.5vh);
    }
}

.content-wrap {
	background: #ffffff;
	position: relative;
	z-index: 2;
}

#content {
	text-align: center;

}



.section--content {
    padding-top: 30px;
	padding-bottom: 30px;
}


@media screen and (min-width: 48em) {/*  768px */

    .section--content {
        padding-top: 8vh;
        padding-bottom: 10vh;
    }
}




.button {
	background: #dc3e38;
	border-radius: 0;
}

.button:hover,
.button:focus,
.button:active {
	background: #bb2e2f;
}


@media screen and (min-width: 48em) {/*  768px */
    .seminar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        grid-gap: 3rem;
    }

    .seminar-grid--one-seminar {
        max-width: 680px;
        margin: 40px auto;
    }
}


@media screen and (min-width: 75em) {/*  1200px */
    .seminar-grid {
        margin: 0 40px;
        grid-gap: 6rem;
    }
}

.seminar-grid__cinema {

}

.table--content-standard tr:nth-child(2n+0) {
    background: rgba(0,0,0,.05);
}


.promo-grid {

    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    line-height: 1.2;
    list-style: none;
}

.promo-grid .promo-grid__link {
    display: inline-block;
    padding: 4px 0 1px;
    text-decoration: none;
    transition: 200ms ease-in-out;
    border-bottom: 1px solid rgba(187, 46, 47, 0)
}

.promo-grid .promo-grid__link:hover,
.promo-grid .promo-grid__link:focus
.promo-grid .promo-grid__link:active {
    border-bottom-color: rgba(187, 46, 47, 1.0);
}

@media screen and (min-width: 48em) {/*  768px */
    .promo-grid__item {
        float: left;
        width: 50%;
        padding: 2rem;
    }
    .promo-grid__item:nth-child(2n+1) {
        clear: left;
    }
}

@media screen and (min-width: 62.5em) {/*  1000px */
    .promo-grid__item {
        width: 33%;
    }
    .promo-grid__item:nth-child(2n+1) {
        clear: none;
    }
    .promo-grid__item:nth-child(3n+1) {
        clear: left;
    }
}

@media screen and (min-width: 92.5em) {/*  1480px */
    .promo-grid__item {
        width: 25%;
    }
    .promo-grid__item:nth-child(3n+1) {
        clear: none;
    }
    .promo-grid__item:nth-child(4n+1) {
        clear: left;
    }
}

@supports (display: grid) {
    .promo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        grid-gap: 4rem;
    }
    .promo-grid__item {
       padding: 0;
       width: auto;
    }

    @media screen and (min-width: 48em) {/*  768px */
        .promo-grid {
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        }
    }
}




.promo-grid__item__heading {
    display: block;
    padding: 10px 0;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(187, 46, 47, 1.0);
}

@media screen and (min-width: 1000px) {

    .section--text-only {
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }
}


h3,
h2 {
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.content-intro-paragraph {
    margin-bottom: -30px;
    line-height: 1.5;
}

.promo-grid__item img {
    max-width: 85%;
    margin-bottom: 15px;
}
