/* .title - contains "We have you covered" text */

.title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 9rem;
	background-color: #3773CA;
}

@media all and (min-width: 768px) {
	.title {
		margin-top: 6rem;
	}
}

.title .h1 {
	margin-bottom: 0;
	color: #FFFFFF;
	font-size: 2.6rem;
}

@media all and (min-width: 481px) {
	.title .h1 {
		font-size: 3.2rem;
	}
}


/* .image - circular graphic below title */
.image {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 15rem;
	margin-bottom: 2rem;
	background: linear-gradient(#3773CA, #3773CA 4.6rem, #FFFFFF 4.6rem, #FFFFFF);
}


/* .content - contains event info paragraph and forms */
.content {
	display: flex;
	flex-direction: column;
	max-width: 100rem;
	padding: 0 2rem;
	margin: 0 auto;
}

@media all and (min-width: 1024px) {
	.content {
		padding-bottom: 6rem;
		margin-bottom: 5rem;
		background-image: url('images/gecko--large.jpg');
		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: 204px;
	}

	body[data-category="tornado"] .content, body[data-category="fire"] .content {
		background-image: url('images/gecko--large-alt.jpg');
	}

	body[data-category="winter-storm"] .content,
	body[data-category="severe-winter-storm"] .content {
		background-image: url('images/gecko--large-scarf.jpg');
	}
}

.content h1 {
	color: #3773CA;
	text-align: center;
}

.content h2, .container h2 {
	display: flex;
	align-items: center;
	color: #3773CA;
	font-size: 2.4rem;
}

@media all and (min-width: 400px) {
	.content h2 {
		font-size: 2.6rem;
	}
}

@media all and (min-width: 481px) {
	.content h2 {
		margin-bottom: 0;
	}
}

.login .geico-icon,
.property .geico-icon {
	border-width: 0.2rem;
	margin-right: 1rem;
	color: #1C1C1E;
}

@media all and (max-width: 399px) {
	.login .geico-icon,
	.property .geico-icon {
		height: auto;
		width: 4rem;
		font-size: 2rem;
		line-height: 3.6rem;
	}
}

@media all and (min-width: 400px) {
	.login .geico-icon,
	.property .geico-icon {
		margin-right: 2rem;
	}
}

.gecko-image-small, .gecko-image-large {
	position: absolute;
}

.gecko-image-small {
	right: 0;
	height: 5.2rem;
}

body[data-category="tornado"] .gecko-image-small, body[data-category="fire"] .gecko-image-small {
	right: .5rem;
}

@media all and (min-width: 400px) {
	.gecko-image-small {
		height: 7.2rem;
	}
}

@media all and (min-width: 481px) {
	.gecko-image-small {
		left: 29rem;
		height: 6rem;
	}

	body[data-category="tornado"] .gecko-image-small, body[data-category="fire"] .gecko-image-small {
		left: 28.5rem;
	}
}

@media all and (min-width: 1024px) {
	.gecko-image-small {
		display: none;
	}
}

/* .intro - event information paragraph */
.intro {
	width: 100%;
	margin-bottom: 3rem;
}

@media all and (min-width: 768px) {
	.intro {
		margin-bottom: 5rem;
	}
}

.intro p {
	text-align: center;
}


/* .lower - wraps .login and .property */
@media all and (min-width: 768px) {
	.lower {
		display: flex;
		margin: 0 auto;
	}
}

@media all and (min-width: 1024px) {
	.lower {
		display: flex;
		justify-content: flex-start;
		margin: 0;
	}
}


/* .login - service login form */
.login {
	position: relative;
	width: 100%;
	border-bottom: .1rem solid #E2E2E2;
	margin-bottom: 1.2rem;
}

@media all and (min-width: 481px) and (max-width: 767px) {
	.login, .property {
		width: 35.1rem;
		margin: 0 auto 2rem;
	}
}

@media all and (min-width: 768px) {
	.login {
		width: 38.1rem;
		border-right: .1rem solid #E2E2E2;
		border-bottom: none;
	}
}

@media all and (min-width: 1024px) {
	.login {
		width: 40.1rem;
	}
}

.login input[type="text"], .login input[type="password"] {
	width: 100%;
	margin-bottom: 0;
}

@media all and (min-width: 481px) {
	.login input[type="text"], .login input[type="password"] {
		width: 27rem;
		margin-left: 8rem;
	}

	.actions {
		margin-left: 8rem;
	}
}


/* .property - home/boat/flood message & link */
@media all and (min-width: 481px) {
	.property p {
		margin-left: 8rem;
	}
}



@media all and (min-width: 768px) {
	.property {
		width: 30rem;
		margin-left: 3rem;
	}
}

@media all and (min-width: 1024px) {
	.property {
		width: 31rem;
		margin-left: 5rem;
	}
}

#primary-footer > div.footer-social-media-icons > ul > a .geico-icon {
	border-style: none;
}

.aspect-ratio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 51%;
	margin-bottom: 30px;
	margin-bottom: 3rem;
}

	.aspect-ratio iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}