html, body {
	height: 100%;
}
* {
	box-sizing:border-box;
}

body {
	background: url(../img/bg.jpg) center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	margin: 0;
	min-height: 100%;
	padding: 0;
}

h1 {
	font-size: 50px;
	font-weight: bold;
	line-height: 54px;
	letter-spacing: 1px;
	margin: 0;
	margin-bottom: 30px;
}

.dark h1 {
	color: #333;
}

.light h1 {
	color: #fff;
}

h2 {
	font-size: 24px;
	margin-top: 1.5em;
    text-transform: uppercase;
}

h2 .inline {
	border-bottom: 1px solid #fff;
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 5px;
    padding-bottom: 8px;
    width: 100px;
}

.light h2 .inline {
	border-bottom: 1px solid #fff;
}

.dark h2 .inline {
	border-bottom: 1px solid #333;
}

h4 {
	font-size: 22px;
	font-weight: normal;
	line-height: 32px;
	margin: 0;
	margin-bottom: 30px;
}

p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 1.5em;
}

li {
	line-height: 26px;
	margin-bottom: 1.5em;
}

.light h4 {	color: #fff; }
.dark h4 { color: #333; }

.left {
	width: 70%
}
.dark .left {
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.9)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3ffffff',GradientType=1 );
}
.light .left {
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.4)));
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
	background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
	background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#4d000000',GradientType=1 );

}

.left .subscribe-container {
	display: table;
	height: 90vh;
	padding-left: 14%;
}

.left .content {
	display: table-cell;
	vertical-align: middle;
}

.left h4 {
	max-width: 320px;
}

form {
	display: inline-block;
	position: relative;
}
.dark form {
	box-shadow: 0 20px 15px -15px rgba(0,0,0,.2);
}

.light form {
	box-shadow: 0 20px 15px -15px rgba(0,0,0,.2);
}

input {
	background: #fff;
	border-radius: 4px 0px 0px 4px;
	-moz-border-radius: 4px 0px 0px 4px;
	-webkit-border-radius: 4px 0px 0px 4px;
	border: 1px solid transparent;
	height: 50px;
	line-height: 48px;
	padding: 0 30px;
	min-width: 240px;

	vertical-align: top;
}

input:focus {
	border: 1px solid rgb(34, 171, 109);
}
input.error {
	border: 1px solid tomato;
}
label#email-error {
	background: #fff;
	box-shadow: 0px 10px 30px -10px rgba(0,0,0,.4);
	left: 10px;
    line-height: 40px;
    padding: 0 20px;
    position: absolute;
    top: 70px;
}
label#email-error:before {
	background: #fff;
    content: "";
    height: 16px;
    transform: rotate(45deg);
    width: 16px;
    position: absolute;
    top: -8px;
}

.light input:focus {border: 1px solid rgb(54, 106, 100);}

button {
	background: rgb(27,167,103);
	background: -moz-linear-gradient(45deg,  rgba(27,167,103,1) 0%, rgba(61,188,130,1) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(27,167,103,1)), color-stop(100%,rgba(61,188,130,1)));
	background: -webkit-linear-gradient(45deg,  rgba(27,167,103,1) 0%,rgba(61,188,130,1) 100%);
	background: -o-linear-gradient(45deg,  rgba(27,167,103,1) 0%,rgba(61,188,130,1) 100%);
	background: -ms-linear-gradient(45deg,  rgba(27,167,103,1) 0%,rgba(61,188,130,1) 100%);
	background: linear-gradient(45deg,  rgba(27,167,103,1) 0%,rgba(61,188,130,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ba767', endColorstr='#3dbc82',GradientType=1 );

	border-radius: 0px 4px 4px 0px;
	-moz-border-radius: 0px 4px 4px 0px;
	-webkit-border-radius: 0px 4px 4px 0px;
	border: 1px solid rgb(34, 171, 109);

	color: #fff;
	cursor: pointer;
	font-family: Roboto;
	font-weight: 400;
	height: 50px;
	letter-spacing: .5px;
	line-height: 45px;
	padding: 0 30px;
	text-transform: uppercase;

	vertical-align: top;

	-webkit-transition: .3s ease;
    transition: .3s ease;
}
.light button {
	border: none;
}
button:hover {
	background: rgb(19,140,83);
	background: -moz-linear-gradient(45deg,  rgba(19,140,83,1) 0%, rgba(21,154,93,1) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(19,140,83,1)), color-stop(100%,rgba(21,154,93,1)));
	background: -webkit-linear-gradient(45deg,  rgba(19,140,83,1) 0%,rgba(21,154,93,1) 100%);
	background: -o-linear-gradient(45deg,  rgba(19,140,83,1) 0%,rgba(21,154,93,1) 100%);
	background: -ms-linear-gradient(45deg,  rgba(19,140,83,1) 0%,rgba(21,154,93,1) 100%);
	background: linear-gradient(45deg,  rgba(19,140,83,1) 0%,rgba(21,154,93,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#138c53', endColorstr='#159a5d',GradientType=1 );
}
button:active {
	background: rgb(17,122,69);
	background: -moz-linear-gradient(45deg,  rgba(17,122,69,1) 0%, rgba(23,165,99,1) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(17,122,69,1)), color-stop(100%,rgba(23,165,99,1)));
	background: -webkit-linear-gradient(45deg,  rgba(17,122,69,1) 0%,rgba(23,165,99,1) 100%);
	background: -o-linear-gradient(45deg,  rgba(17,122,69,1) 0%,rgba(23,165,99,1) 100%);
	background: -ms-linear-gradient(45deg,  rgba(17,122,69,1) 0%,rgba(23,165,99,1) 100%);
	background: linear-gradient(45deg,  rgba(17,122,69,1) 0%,rgba(23,165,99,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#117a45', endColorstr='#17a563',GradientType=1 );
}

button:focus, input:focus {
	outline: none;
}

.light .left .seo-container {color: #fff;}
.dark .left .seo-container {color: #333;}

.left .seo-container {
	padding: 13% 10% 5%;
	max-width: 1200px;
}

.right {
	display: table;
	height: 100%;
	padding: 0 40px;
	position: fixed;
	right: 0;
	top: 0;
	width: 30%;
}
.dark .right {background: #333;}
.light .right {background: #fff;}

.right .content {
	display: table-cell;
	vertical-align: middle;
}

.logo {
	margin-bottom: 30px;
}
.logo img {
	max-width: 100%;
	height: auto;
}

.right .content p {
	font-size: 18px;
	font-weight: normal;
	line-height: 32px;
	margin: 0;
	margin-bottom: 30px;
	max-width: 265px;
}
.light .right .content p {color: #666;}
.dark .right .content p {color: #fff;}

.social-links a {
	background: url(../img/social.svg) no-repeat;
	background-color: transparent;
	background-size: 60px;
	background-position: 0 0;
	border-radius: 50%;
	display: inline-block;
	height: 40px;
	width: 40px;
	opacity: .8;
	-webkit-transition: .3s ease;
    transition: .3s ease;
}

.dark .social-links a[title~="Facebook"] {background-position: 12px 6px;}
.dark .social-links a[title~="Twitter"] {background-position: -28px 7px;}
.dark .social-links a[title~="Facebook"]:hover {background-position: 12px -31px;}
.dark .social-links a[title~="Twitter"]:hover {background-position: -28px -29px;}
.dark .social-links a:hover {background-color: #fff; opacity: 1;}

.light .social-links a:hover {background-color: #666;}
.light .social-links a[title~="Facebook"] {background-position: 12px -31px;}
.light .social-links a[title~="Twitter"] {background-position: -28px -29px;}
.light .social-links a[title~="Facebook"]:hover {background-position: 12px 6px;}
.light .social-links a[title~="Twitter"]:hover {background-position: -28px 7px;}

@media screen and (max-width : 1050px ) {
	h1 {
		font-size: 42px;
		line-height: 46px;
	}
	.left {		
		width: 100%;
	}
	.left .subscribe-container {
		min-height: 360px;
		max-height: 460px;
	}
	.left .seo-container {
	    padding: 13% 10% 25%;
	}
	.right {
		height: 200px;
		width: 100%;
		top: auto;
		bottom: 0;
		overflow: hidden;
		text-align: center;
	}
	.logo {
		margin: 0;
	}
	.logo img {
		max-height: 160px;
	}
}

@media screen and (max-width : 470px ) {
	h1 {
		font-size: 32px;
	}
	.dark .left {
		background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.9)));
		background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
		background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
		background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3ffffff',GradientType=0 );
	}
	.light .left {
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.4)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#4d000000',GradientType=0 );

	}
	.left .seo-container {
		padding: 20px;
	}
	.left, .right {
		padding: 20px;
	}
	input, button {
		border-radius: 0;
		width: 100%;
	}
}