/* ============================================================
	Replace me with the Actual Design
============================================================ */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');

html,
body {
	font-family: 'Raleway', sans-serif;
}

a {
	color: #08f;
}
a:visited {
	color: #88f;
}

.header {
	max-width: 960px;
	margin: 0 auto;
}

.module {
	max-width: 960px;
	margin: 0 auto;
}

.hero {	
	background: linear-gradient(to bottom, rgba(82,166,252,1) 0%,rgba(132,58,234,1) 100%);
	color:white;
	overflow:hidden;
	position:relative;
}

.hero__wrapper {

	max-width:70%;
	margin:0 auto;
	margin-top:10em;
}

.hero__message {
	float:left;
	width:70%;
	line-height:3.5em;
}

.hero__dudeguy {
	position:absolute;
	width:25vw;
	bottom:0;
	right:100px
}

.hero__dudeguy img {
	width:100%;
}

.hero__message1 {
	font-size:2.8em;
}

.hero__message2 {
	margin-top:1em;
	font-size:1.5em;
	color:#1951a6;
	line-height:1em;
}

.fourtyfive-minute {
	width:30%;
	margin:0 auto;
	margin-top:3em;
	margin-bottom:3em;
}

.fourtyfive-minute img {
	width:100%;
}

.after45 {
	font-size:1.2em;
	background-color:#ffffff17;
	color:white;
	padding:2em;
	text-align:center;

}

.after45__h2 {
	font-size:1.5em;
	margin-bottom:1em;
}

.after45__h3 {
	line-height:1em;
	margin-bottom:1em;
}

.button {
	background-color:#f25151;
	padding:.5em 1.5em;
	font-size:1.5em;
	color:white;
	display:inline-block;
	border-radius:20px;
	text-transform: uppercase;
	font-weight:bold;
	margin:4em 1em 4em 1em;
	transition:all .5s ease;
}

.button__outer {
	text-align:center;
}

.button:hover {
	background-color:white;
	color:#f25151;
}

.bonus {
	position:relative;
	display:block;
	min-height:200px;
}

.bonus__dude {
	float:left;
	width:30vw;
	margin-top:-100px;
	margin-left:100px;
}

.bonus__dude img {
	width:100%;
}
.bonus__h3 {
	font-weight:bold;
}
.bonus__text {
	font-size:1.8em;
	float:left;
	margin-left:100px;
	width:50%;
	line-height:1.4em;
	margin-top:100px;
	text-align:center;
}

.footer {
	background-color:#52a6fc;
	color:white;
	padding:2em 0;
}

.footer a,
.footer a:visited {
	color:white;
}

@media only screen and (min-width: 2000px) {
	.hero__dudeguy {
		width:18%;
	}

}
@media only screen and (min-width: 1700px) {
	.hero__dudeguy {
		width:20%;
	}

}
@media only screen and (min-width: 1200px) {
	.hero__dudeguy {
		width:20%;
	}

	.hero__dudeguy {
		
	}

	.hero__wrapper {
    	max-width: 80%;
	}
	.bonus__text {
		margin-top:50px;
	}

}


@media only screen and (max-width: 1200px) {
	.bonus__text {
		margin-bottom:100px;
	}

	.bonus__dude {
    	float: left;
    	width: 30vw;
    	margin-top: 10px;
    	margin-left: 100px;
	}
}

@media only screen and (max-width: 950px) {
	.bonus__dude {
		margin:0;
		margin-top:50px;
		width:30%;
	}

	.bonus__text {
		float:right;
		margin:0;
		margin-top:100px;
		width:70%;
	}

}
@media only screen and (max-width: 800px) {
	.hero__message1 {
    	line-height: 1em;
	}
	.hero__dudeguy {
		width:30%;
		right:10px;
	}

	.bonus__text {
		font-size:1.5em;
	}

}

@media only screen and (max-width: 650px) {
	.after45__h2 {
		line-height:1em;
	}
	.hero__message {
		width:100%;
	}

	.hero__dudeguy {
		right:10px;
	}

	.after45 {
		padding:1em;
		width:80%;
	}

	.bonus__dude {
		display:none;
	}

	.bonus__text {

		float:none;
		margin:0 auto;
		margin-top:1em;
		margin-bottom:1em;
	}


	.hero__wrapper {
		max-width:85%;
		margin-top:2em;
	}

	.fourtyfive-minute {
		width:80%;
	}

	.button__outer {
		margin-bottom:5em;
	}

}

@media only screen and (max-width: 650px) {
	.after45 {
		padding:1em;
		width:100%;
	}

}