body{background: #22ccaa url('../i/webinar-angle.svg') top right no-repeat; background-size: 100vh; color:#fff; font-family: "Avenir Next", Arial, sans-serif; text-align: center; margin: 0;}
h1{color:#2c2f3d; font-size: 3.5rem; margin-top: 0; font-weight: 700; line-height: 3.9rem;}
iframe{max-width: 100%;}
.intro{font-size: 1.3rem;}
.intro p.lead{margin: 10px 0 20px 0; letter-spacing: 5px; font-size: 1rem;}
.intro a{color:#ffcc33; text-decoration: none;}
.intro a:hover{text-decoration: underline;}
.logo{float: left; margin-right: 15px;}
.wrapper{display: flex; max-width: 1280px; margin: auto; text-align: left; min-height: 100vh; padding: 20px 5%;}
.intro{flex: 1; align-self: center; margin-right: 100px; background: url('../i/arrow-right.png') bottom right no-repeat; padding-bottom: 90px;}
.intro.wider{flex-grow: 1.5;}
.intro ul{list-style-type: none; padding:0; margin:40px 0 0 0;}
.intro ul.checklist li{padding: 0 0 30px 40px; background: url('../i/icon-check-yellow.png') 0 5px no-repeat;}
.detail{flex: 1; align-self: center;}
.detail p{text-align: center;}
.detail p a{color:#ffcc33;}
.biopic{display: block; width: 150px; height: 150px; border-radius: 100%; background: url('../i/kev-pic.jpg') top center no-repeat; margin: auto; position:relative; z-index: 3; border: 5px solid #fff;}
.biopic + .card{margin-top:-75px; padding-top: 100px;}
.card{background: #fff; border-radius: 5px; color:#666; padding: 30px; position:relative; z-index: 1; font-size: 1.2rem;}
.card p{width: 80%; margin-left: 10%;}
.card ul{list-style-type: none; padding:0; margin:40px 0 0 0;}
.card ul li{padding: 0 10% 30px 18%; background: url('../i/icon-check.png') 10% 7px no-repeat;}
.btn{background: #ffcc33; font-family:"Avenir Next", arial, sans-serif !important; float: left; padding: 30px 20px; border-radius: 5px; text-align: center; color:#2c2f3d; text-decoration: none; font-size: 1.4rem; border:none; border-bottom: 4px solid #F5A623;}
.btn:hover{background: #FCC00D; text-decoration: none; color:#fff; border:none; border-bottom: 4px solid #F5A623;}
.btn:active{background: #FCC00D; border-bottom: none; position: relative; top:4px; margin-bottom: 24px; border:none; outline: none;}
.btn:focus{outline: none;}

.card .embedded-joinwebinar-button button{background: #ffcc33; font-family:"Avenir Next", arial, sans-serif !important; padding: 30px 0; display: block; width: 80%; margin:20px 10% 0 10%; border-radius: 5px; text-align: center; color:#2c2f3d; text-decoration: none; font-size: 1.4rem; border:none; border-bottom: 4px solid #F5A623;}
.card .embedded-joinwebinar-button button:hover{background: #FCC00D; text-decoration: none; color:#fff; border:none; border-bottom: 4px solid #F5A623;}
.card .embedded-joinwebinar-button button:active, .card .embedded-joinwebinar-button button:focus{background: #FCC00D; border-bottom: none; position: relative; top:4px; margin-bottom: 4px; border:none;}

.form-group{margin-bottom: 20px;}
.form-group label{display:block; width:100%; margin-bottom: 5px; font-weight: 600;}
.form-group input{display:block; width:calc(100% - 20px); font-size: 1em; padding:10px; color:#666 !important;}
.form-group p.note.ok{margin-bottom: 0; width: 100%; margin: 0; text-align: left; margin-top: 7px; font-size: 0.8em;}
.checkbox{margin-bottom: 10px;}
.checkbox input{margin-right: 10px; position: relative; top:-2px;}
form button{width: 100%; margin-top: 20px; display: block; margin-bottom: 20px;}
.card p.small{display: block; width: 100%; margin: 0; margin-top: 20px; font-size: 0.8em;}
.card p.small a{color:#22ccaa;}
.card .error{border:1px solid #E85656; background: #FFEBEB; color:#E85656; padding:20px; font-size:0.9em; margin-bottom: 20px; border-radius: 5px;}
			
@media only screen and (max-width: 1060px) {
	.intro{flex-grow: 1;}
}
			
@media only screen and (max-width: 950px) {
	h1{font-size: 3rem; line-height: 3rem;}
}
			
@media only screen and (max-width: 850px) {			
	.wrapper{flex-direction: column; margin: 50px 0; width:80%; margin-left: 10%; padding:0;}
	.logo{float: none;}
	.intro{background-image: none; padding-bottom: 0; margin-right: 0; text-align: center; align-self: flex-start; flex-grow: 0;}
	.detail{align-self: flex-start; margin-top: 50px; width:80%; margin-left: 10%;}
}
				
@media only screen and (max-width: 400px) {	
	.detail{width:100%; margin-left: 0;}
}