header{
	background-image: url(../jpg/cw_bg.jpg);
    background-size: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

	header .textwrapper{
		margin: 0;
	}

	header .title {
		font-family: var(--mlight);
	}

	header label.time{
		font-size: 1.5rem;
	    color: var(--l-gray);
	    font-weight: 700;
	}

	header .subtitle{
		font-weight: 700;
		font-size: 2rem;
	}

	header .bracket{
		font-family: var(--head);
		text-transform: uppercase;
	    color: var(--blue3);
	    font-size: 2rem;
	}
		header .bracket:after{
			content: '[Webinar]'
		}
		header .bracket.viewlink:after{
			content: '[On-demand Webinar]'
		}

section.first.lander .container{
	flex-wrap: nowrap;
	text-align: left;
}

section.first.lander .left, section.first.lander .right{
	margin: 0;
	text-align: left;
	width: 50%;
}

	section.first.lander .left{
		margin-right: 3rem;
	}

section.first.lander .slogan{
	margin: 2rem;
    margin-top: 0;
}

.formfill .host{
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top:1px solid var(--gray3);
	transition: var(--ease);
}

	.host .blurb, .host .mug{
		padding: 0 1rem;
	    width: 100%;
	    box-sizing: border-box;
	}

	.host .mug{
		display: flex;
		width: 100%;
		justify-content: flex-start;
		align-items: center;
	}

		.host .mug .circle{
			margin: 0 1rem;
			width: 6rem;
		    border-radius: 50%;
		    overflow: hidden;
		    border: 2px solid var(--blue2);
		}

		.host .mug .circle img{
			width: 100%;
			margin-bottom: -5px;
		}

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
	.formfill {
	    padding: 1.5rem !important;
	}
}

@media screen and (max-width: 850px), screen and (max-device-width: 850px) {

	section.first.lander .container{
		flex-wrap: wrap-reverse;
	}

	section.first.lander .left, section.first.lander .right{
		width: 100%;
		padding: 0 1rem;
		margin: auto;
	}
		section.first.lander .left{
			margin-top: 3rem;
		}

	.formfill .title{
	    margin-top: 1rem;
	}

	section.first.lander .slogan{
		text-align: center;
	}
}

@media screen and (max-width: 550px), screen and (max-device-width: 550px) {

	header .textwrapper{
		margin: auto 1rem;
	}

	section.first.lander .slogan{
		margin: 0 1rem;
    	margin-bottom: 1.5rem;
	}

	header>.textwrapper>.title{
		font-size: 2.75rem;
	}

	.host .mug .circle {
		margin: 0;
		margin-right: 1rem;
	}
}


@media screen and (max-width: 450px), screen and (max-device-width: 450px) {

	header>.textwrapper>.title{
		font-size: 2.5rem;
	}
}