/*------------------------------------------------------------------

[Overview]

Template Name: Promo Landing Page
Version: 0.1
Author: WordPress Wireframes
Author URI: http://www.wordpresswireframes.com

Copyright: (c) 2015 WordPress Wireframes.
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html

[Table of contents]

1.	Defaults
2.	Typography
3.	Structure and containers
4.	Forms
5.	Navigation
6.	Header
7.	Footer
8.	Sidebar
9.	Menu
10.	Hero
11.	Content
12.	Top
13.	Panel
14.	Video
15.	Responsive options

-------------------------------------------------------------------*/

/* Defaults ==================================== */

	html {
		height:100%;
		position: relative
	}

	body {
		background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 5000% 5000%;
		animation: gradient 15s ease infinite;
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		font-weight:100;
		padding:0;
		margin:0;
		font-size:14px;
		line-height:1.6em;
		padding:0 0 0;
		height:100%;
	}

	@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

	.loading #loadingoverlay {
		background: #4e596b;
		height:100%;
		width:100%;
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:999999;
		text-align: center
	}

	#loadingoverlay h2 {
		height:100%;
		width:100%;
		position: fixed;
		top:45%;
		left:0;
		right:0;
		z-index:999999;
		text-align: center;
		color:#fff;
		text-transform: uppercase;
		font-weight: 400;
		font-size:1.8em
	}

/* Typography ==================================== */

	h1, h2, h3, h4, h5, h6 {
		margin:0 0 1em;
		padding:0;
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		font-weight:300;
		color:#fff;
	}

	h1 {
		font-size:2.5em;
		margin:0 0 .5em;
		line-height:1.1em;
		font-weight:500
	}

	h2 {
		font-size:3.5em;
		margin:0 0 .4em;
		line-height:1.2em;
        color: #fff;
	}

	h3 {
		font-size:1.8em;
		margin:0 0 .8em;
		line-height:1.3em;
        color: #fff;
	}

	h4 {
		font-size:1.4em;
		margin:0 0 .8em;
		line-height:.9em;
        color: #fff;
	}

	h5 {
		font-size:1em;
		line-height:1.6em;
	}

	h6 {
		font-size:.8em;
		line-height:1.6em;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		text-decoration: none;
	}

	a, a:visited {
		color: #fff;
    		-webkit-transition: all ease 0.25s;
    		transition: all ease 0.25s;
	}

	a:hover {
		color: #81DAF5;
	}

	a.button, a.button:visited {
		font-family: 'Exo 2', sans-serif;
		font-size:1em;
		font-weight: 300;
		line-height:1em;
		text-decoration: none;
		text-transform: uppercase;
		padding: .7em 1em;
		background:#e94e6b;
		color:#fff;
		text-decoration: none;
		margin:0 1em .5em 0;
		display: block;
		float: left;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
  		border-radius: 4px;
	}

	a.button:hover {
		background:#81DAF5;
	}

	a.button-light, a.button-light:visited {
		border: solid 1px #eff0f1;
		background:#fff;
		color:#3d454e;
	}

	a.button-light:hover {
		border: solid 1px #3d454e;
	}

	a.button-dark, a.button-dark:visited {
		background:#3d454e;
		color:#fff;
	}

	a.button-dark:hover {
		background:#3d454e;
		color:#fff;
	}

	a.button span {
		margin-right:.5em
	}

	.align-centered {
		text-align: center
	}

	.align-left {
		text-align: left
	}

	.align-right {
		text-align: right
	}

	.large {
		font-size: 3em;
		margin-bottom:.5em;
		color:#e94e6b;
	}

	.medium {
		font-size: 1.6em;
		margin:0 .1em .5em;
		color:#e94e6b;
	}

	img {
		border:0;
	}

/* Structure and containers ==================================== */

	.container {
		margin:0 auto;
		min-width: 50em; /* 300px @ 16px */
		max-width: 75em; /* 1140px @ 16px */
	}

	.inner {
		margin:0 1em 2em 0;
	}

	.row {
		clear:both;
	  	margin:0;
	  	padding:0;
	}

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		float: left;
	}
	.span12 {
		width:100%;
	}
	.span11 {
		width:91.6666666667%;
	}
	.span10 {
		width:83.3333333333%;
	}
	.span9 {
		width:75%;
	}
	.span8 {
		width:66.6666666667%;
	}
	.span7 {
		width:58.3333333333%;
	}
	.span6 {
		width:50%;
	}
	.span5 {
		width:41.6666666667%;
	}
	.span4 {
		width:33.3333333333%;
	}
	.span3 {
		width:25%;
	}
	.span2 {
		width:16.6666666667%;
	}
	.span1 {
		width:8.33333333333%
	}

	.clearfix {
		clear: both
	}

/* Forms ==================================== */

	.form-row {
		margin-bottom:0;
	}

	.input-wrapper {
		border: solid 1px #e0e0e0;
		border-bottom:0;
	}

	.form-row input.text,
	.form-row textarea {
		width:100%;
		display: block;
		border:0;
		padding:1.2em 0;
		font-size:1em;
		font-weight: 300;
		font-family: 'Exo 2', sans-serif;
		background:#f9f9f9;
		color:#7f7f7f;
		text-align: center;
		-webkit-box-shadow: inset 0 5px 10px #f3f3f3;
		-moz-box-shadow: inset 0 5px 10px #f3f3f3;
		-o-box-shadow: inset 0 5px 10px #f3f3f3;
		box-shadow: inset 0 5px 10px #f3f3f3;
	}

	select {
		width:100%;
		font-size:1em;
	}

	.form-row input.btn {
		width:100%;
		border: 0;
		padding:1.2em 0;
		font-size:1em;
		background:#333;
		color:#fff;
		text-shadow:  0 -1px 2px rgba(0,0,0,.2);
	}

	.form-row input.btn:hover,
	.form-row input.btn:focus {
		background:#388E8E;
	}

	.form-box {
		padding:2em 1em 1em 2em;
		text-align: center;
		z-index: 9999999;
	}

	.form-box .btn {
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		border-bottom-right-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-left-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
	}

	.form-box form {
		position: relative;
	}

/* Navigation ==================================== */

	#navigation {
		background: #fff;
		height:100%;
		width:100%;
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:99999;
		display: none
	}

	#navigation .nav-container {
		text-align: center;
		margin:5em 0
	}

	#navigation .nav-container ul {
		list-style: none;
		padding:0;
		margin:0;
	}

	#navigation .nav-container ul li {
		list-style: none;
		padding:0;
		margin:0 0 1em;
	}

	#navigation .nav-container ul li a {
		text-decoration: none;
		color:#777;
	}

/* Header ==================================== */

	#header {
		position: relative;
		z-index: 9999999;
	}

	#header .row {
	}

	#header h1 {
    margin-bottom: 100;
		padding:0;
		text-transform: uppercase;
		font-weight: 400;
		font-size:2em;
        color: white;
        text-align: center;
	}

	#header h1 a {
		color:#fff;
	}


/* Footer ==================================== */

	#footer {
		background:#f5f5f5;
		padding:2.5em 0 2em;
		color:#bbb;
	}

	#footer a {
		text-decoration: none;
		color:#bbb;
	}

	#footer a:hover {
		text-decoration: none;
		color:#bbb
	}

	#footer .copyright {
		margin: 1em 0 0
	}

	#footer a .medium {
		color:#bbb
	}

	#footer a .medium:hover {
		color:#388E8E;
	}

	#footer .menu {
		float: right;
		list-style: none;
		padding:0;
		margin:0;
	}

	#footer .menu li {
		float: left;
		list-style: none;
		padding:0;
		margin:0 0 0 1em;
	}

/* Sidebar ==================================== */

	#sidebar ul {
		list-style: none;
		padding:0;
		margin:0;
	}

	#sidebar ul li {
		list-style: none;
		padding:0 0 1em;
		margin:0 0 1em;
		border-bottom: solid 1px #eee;
	}

	#sidebar ul li h3.label {
		margin:0 0 .5em;
	}

	#sidebar ul li h3.label span {
		color:#e94e6b
	}

/* Menu ==================================== */

	h2.menulink {
	    	float: right;
	    	display: inline;
	    	width: 20px;
	    	height: 20px;
	    	border: 0;
	    	margin: 0 0 0em;
	}

	h2.menulink a {
	    	display: block;
	    	width: 20px;
	    	height: 20px;
	    	text-indent: -1000px;
	    	background: url(../images/menu.png) no-repeat bottom center;
	    	overflow: hidden;
	    	border: 0;
	}

/* Hero ==================================== */

	.hero {
		margin:0 0 0;
	}

	.hero p {
		color:#333;
	}

	.hero .intro {
		padding:0 0 0 0;
		margin: 0 auto;
        margin-top: 100px;
	}

	.hero .intro.pagetitle {
		padding:5em 1em
	}

	.hero .intro.pagetitle h4 {
		padding: 0;
		margin:0;
	}

	.hero h2 {
		font-weight: 300;
		color:#fff;
	}

	.hero h2 span {
		border-bottom: solid 5px #e94e6b;
		font-weight: 500
	}

	.hero h4 {
		color:#fff !important;
		font-weight: 300;
	}

	.hero .button {
		float: none;
		display: inline
	}

	.hero .button-light, .hero .button-light:visited  {
		border: solid 1px #fff;
		background:rgba(0,0,0,0.2);
		color:#fff;
	}

	.hero .icons {
		margin-top:2em;
		margin-bottom:2em
	}

	.hero .large {
		color:#fff;
	}

	.hero .form-box.boxed {
		color:inherit;
		background: #fff;
		box-shadow: 0px 0px 40px rgba(0,0,0,.2);
		padding:2em
	}

	.hero .form-box .medium {
		font-size:1.2em
	}

	.hero .form-box .top .spacer {
		display: block;
		width:6em;
		height:.2em;
		margin:0 auto 2em;
		background:#e94e6b;
	}

	.desktop .intro {
		padding:5em 1em 0;
	}

	.introduction .intro {
		padding:5em 1em ;
	}

	.intro h1 {
		color: #fff;
		text-transform: uppercase;
		font-weight: 700;
		font-size:3.5em;
		line-height:1em;
		margin:0 0 .2em;
		padding:0;
	}

	.introduction .intro {
		padding:0 1em 0;
		max-width:100%;
		margin: 0 auto
	}

	#content.subscribe .boxed {
		max-width:20em;
		margin:0 auto
	}

	#success, #error {
		display: none
	}

	.footnote {
		margin:0;
		padding:1em 0 0;
		font-size:.9em;
	}

	.footnote a, .footnote a:visited {
		text-decoration: none
	}

	.demo-box {
		float: left;
		display: block;
		width:30%;
		height:5em
	}

	.demo-box span {
		color:#e94e6b;
		font-size:2em
	}

/* Content ==================================== */

	#content {
		margin-top:-8em
	}

	#content .left img {
		width:100%;
		margin:0;
		padding:0;
		display: block;
	}

	#content .container {
		position: relative
	}

	#content.boxed .container {
		background: #fff;
		box-shadow: 0px 0px 40px rgba(0,0,0,.2);
	}

/* Top ==================================== */

	#hero {
		color:#fff;
		padding:0
	}

	#hero h1, #hero h2, #hero h3, #hero h4, #hero h5, #hero h6  {
		color:#fff;
	}

	#hero img {
		width:100%;
		margin:0 auto;
		display: block;
		height: auto
	}

/* Panel ==================================== */

	.panel {
		background:#fff;
		padding:7em 0;
		position: relative;
		position: relative;
		overflow:hidden;
	}

	.panel-content {
		padding:2em 0
	}

	.panel-alt {
		background:#f9f9f9;
	}

	.box-right .image-box {
		background: url(../pictures/sample5.jpg) 50% 0 / cover no-repeat;
		width:50%;
		right:0;
  		top:0;
		height:100%;
		padding:0;
		position:absolute;
  		box-sizing:border-box;
	}

	.box-right .inner {
		padding:0 8em 0 0;
	}

	.box-left .image-box {
		background: url(../pictures/sample6.jpg) 50% 0 / cover no-repeat;
		width:50%;
		left:0;
  		top:0;
		height:100%;
		padding:0;
		position:absolute;
  		box-sizing:border-box;
	}

	.box-left .inner {
		padding:0 0 0 8em;
	}

	/* image box ==================================== */

	/* price ==================================== */

	.price {
		background: transparent;
		margin-bottom:-1px;
	}

	.price .intro {
		max-width:50em;
		margin:0 auto 5em;
		color:#fff;
	}

	.price .intro h3 {
		color:#fff;
	}

	.price .intro p {
		color:#fff;
		color:rgba(255,255,255,0.7);
	}

	.price .option {
		background:#fff;
		margin-right: 1em;
		padding:3em 2em;
		position: relative;
		overflow: hidden
	}

	.price .option h3 {
		margin:0 0 .5em;
	}

	.price .option h2 {
		margin:1em 0 .5em;
	}

	.price .option h2 span {
		font-weight:100;
		font-size:.6em
	}

	.price .option span.spacer {
		display: block;
		width:6em;
		height:.2em;
		margin:0 auto;
		background:#e94e6b;
	}

	.price .option ul {
		list-style: none;
		padding:0;
		margin: 0 0 1em
	}

	.price .option .button {
		display: block;
		float: none;
		margin:0 1em;
	}

	.price .ribbon {
		background-color: #3d454e;
		overflow: hidden;
		white-space: nowrap;
		/* top left corner */
		position: absolute;
		right: -4.5em;
		top: 1.2em;
		/* 45 deg ccw rotation */
		-webkit-transform: rotate(45deg);
		   -moz-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		     -o-transform: rotate(45deg);
		        transform: rotate(45deg);
	}
	.price .ribbon a {
		color: #fff;
		display: block;
		margin: 1px 0;
		padding: .3em 0em;
		width:14em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 500;
	}

/* Video  ==================================== */

	video#bgvid {
		position: fixed; top: 0;
		min-width: 100%; min-height: 100%;
		width: auto; height: auto; z-index: -100;
		background:transparent;
	}

	.videooverlay {
		position: fixed; right: 0; bottom: 0;
		min-width: 100%; min-height: 100%;
		width: auto; height: auto; z-index: -100;
		background: rgba(97,114,144,.7) url(../images/background_block_trans.png);
	}

/* Responsive options ==================================== */

@media screen and (max-width: 30em) {


	.container {
		min-width: 100%;
		max-width: 100%
	}

	#header {
		padding:1em
	}

    video#bgvid {
        display: none;
    }

}

@media screen and (max-width: 30em) {
	body {
		padding:0;
	}
	.container {
		min-width: 100%;
		max-width: 100%
	}

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  		width:100%
	}

	.inner {
		margin:0 0 1em 0;
	}

	.image-box {
		display: none
	}

	#content {
		padding-top:4.5em;
	}

	.form-box {
		padding:2em 1em 0em 1em;
	}

	.panel {
		padding:2em 1em
	}

	.box-right .inner,
	.box-left .inner {
		padding:2em;
	}

	.hidden {
		display: none
	}

	.price .intro {
		margin:0;
	}

	.price .option {
		background:#fff;
		margin: 0 0 1em;
		padding:2em 1em 2em;
	}

	#footer {
		padding:2.5em 0 0em;
	}

	#signup .align-right {
		text-align: left
	}

	#signup .span5 {
		display: none
	}


}