@charset "UTF-8";
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0;display:block;}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}


@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/OpenSans-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html, body {
	font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    line-height: 1.4;
    color: #000;
    margin: 0;
    padding: 0;
    text-align: left;
	background-color: #FFF;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
}

html{
	min-height:100%;
}
body{
	font-size: 1.6rem;
	min-height:100%;
	background-image:url(../images/background.gif);
	background-repeat:no-repeat;
	background-size:cover;

	//background: rgba(190,194,198,1);
	//background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(190,194,198,1) 100%);
}

*{
	margin:0;
	padding:0;
	outline:none;
}

img{
	display:block;
	border:none;
    -ms-interpolation-mode: bicubic;
}

h1,h2,h3,h4,p{
	font-weight:normal;
}

div, a{
	-webkit-tap-highlight-color:rgba(0,0,0,0);	
}

div, input{
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
}

a{
	font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
	font-size: 1.6rem;
    color:#333;
	text-decoration: none;
}

a:hover{
	text-decoration:underline;
}

textarea{
    resize:none;
}

h1{
	font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
	font-size: 4rem;
	line-height: 1.2;
}

h1 span{
	font-size: 2.2rem;
	display: block;
	margin-top:10px;
}

h2{
	font-size: 2.2rem;
}

p{
	font-size: 1.6rem;
}

p.lead{
	font-size: 1.8rem;
}


/*************************************************
* STRUKTUR
*************************************************/
html{
	height: 100%;
}

body{
	display: flex;
}

div#main-wrapper{
	position:relative;
	z-index:100;
	min-height: 100%;
    display: flex;
    flex-direction: column;
	flex-grow: 1;
}

div#header{

	width: 100%;
	padding:0 5rem;
	padding-right: 10rem;
	padding-top: 4rem;

	display: flex;
	align-items: center;
	justify-content: space-between;
}



div#content{
    display: flex;
    align-items: center;
	flex-grow: 1;
	justify-content: center;
}

/*************************************************
* HEADER
*************************************************/
div#header div.logo img{
	width:100%;
	height:auto;
	max-width:20rem;
}

nav#navigation{
	display:block;
	flex-grow: 1;
	margin-left: 5rem;
	display: flex;
}

nav#navigation a{
	padding:.3rem 4rem;
	border-right: .1rem solid #333;
	transition: all 300ms cubic-bezier(0.77,0,.175,1);
	color: black;
	//background-color: rgba(77, 159, 40, 0.5);
	//margin-right: 1rem;
}

nav#navigation a:last-child{
	margin-right: 0;
	border-right:none;
}

nav#navigation a:hover{
	transition: all 300ms cubic-bezier(0.77,0,.175,1);
	text-decoration: none;
	background-color: rgba(77, 159, 40, 0.5);
}

nav#navigation a.active{
	background-color: rgba(77, 159, 40, 0.8);
}



div.cta{
	justify-self: end;
}


/*************************************************
* CONTENT
*************************************************/

div.content-padder{
	padding-top: 3rem;
	padding-bottom: 10rem;

	padding-left: 3rem;
	padding-right:3rem;

	max-width: 102.4rem;
    text-align: center;
}

div.content-padder p{
	margin:0 auto;
	max-width: 70rem;
	margin-bottom: 4rem;
}

div.content-padder h1{
  margin-bottom: 2.3rem;
}


div.content-padder .input-wrapper{
	margin-bottom:1rem;
}
div.content-padder .input-wrapper +  div.content-padder .input-wrapper{
	margin-bottom: 2rem;
}

/*************************************************
* CARDS
*************************************************/

div.card-container{
	height:100%;
	width:100%;
	position: relative;
    perspective:1000px;
}

div.card-container div.card{
	position:absolute;
    perspective:1000px;
	opacity:0;	
}

div.card-container div.card div{
	position: absolute;
	top: 0;
	left: 0;
	
	height:100%;
	width: 100%;

	backface-visibility:hidden !important;

	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
	border-radius: 12px;
	overflow: hidden;
	transform:translate3d(0,0,0);
}

div.card-container div.card div.front{	
	transform:rotateY(180deg);
}	

div.card-container div.card img{
	position: absolute;
	width:100%;
	height: 100%;
}



/*************************************************
* MESSAGES
*************************************************/
div#globalMessage{
	padding:60px;

	width: 100%;

	position:absolute;
	top:50%;
	transform:translateY(-50%);

	text-align: center;

	background-color: rgba(255,255,255,0.9);

	z-index:500;

	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);

}

div#globalMessage p{
	font-size:22px;
	line-height:26px;
}

div.message{
	font-size: 1.6rem;
	color: #f00;
	margin-bottom: 2rem;
}


/*************************************************
* STUFF
*************************************************/
.button{
	padding:.8rem 3rem;
	cursor:pointer;
	display:inline-block;	
	background: #4d9f28;
	color:white;
	border: .2rem solid #4d9f28;
	transition: all 300ms cubic-bezier(0.77,0,.175,1);
}

.button.round{
	border-radius:100px;
	margin-left:2rem;
}

.button:first-child{
	margin-left:0;
}

.button:hover{
	//color:#408121;
	background: rgba(77, 159, 40, 0.3);
	
}
.button.round:hover{
	text-decoration:none;
}

.button.act{
	font-weight: bold;
	box-shadow:0px 0px 6px 2px rgba(0,0,0,0.4);
}

form + form{
	margin-top: 4rem;
}


form div.button, form input[type=submit]{
	margin-top: 1rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"]{
	background: transparent;
	border: .2rem solid #4d9f28;
	
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
		  
	font-size:1.6rem;
	color:#000;
	
	padding:.8rem .8rem;
	
	width:100%;
	min-width: 30rem;
}

form.ng-invalid div.input-error{
	display: block;
}

input.ng-valid-email.ng-dirty ~ div.input-success{
	display: block;
}

div.input-wrapper{
	position: relative;
	display: inline-block;
}

div.input-error, div.input-success{
	display: none;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

div.input-error svg, div.input-success svg{
	display: block;
	width: 2.2rem;
	height: 2.2rem;
}

div.input-error svg circle{
	fill:#f00;
}

div.input-error svg polygon, div.input-success svg polygon{
	fill:white;
}

div.input-success svg circle{
	fill:#4d9f28;
}

.transition{
	-webkit-transition: all 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-moz-transition: all 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-ms-transition: all 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-o-transition: all 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	/*transition: all 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);*/
}

.valign{
	position:absolute;
	top:50%;
	transform:translateY(-50%); 
}

.halign{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}

.centered{
	display:table;
	width:100%;
	height:100%;
}

.centered > div{
	display:table-cell;
	vertical-align:middle;
}


/*************************************************
* Media Query
*************************************************/

@media screen and (max-width: 768px) {
	
	div#header{
		padding:0 2rem;
		padding-top: 2rem;
		flex-direction:column;
		justify-content: space-between;
	}

	nav#navigation{
		margin-left: 0rem;
		margin-bottom: 2rem;
	}

	div#header nav#navigation a{
		padding:.3rem 2rem;
	}

	div#header div.logo{
		margin-bottom: 2rem;
	}

	div#header div.logo img{
		max-width: 18rem;
	}

	div#header div.cta{
		display: none;
	}

}