/* Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}


html,body{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
background: #000 url(../images/bg2.jpg) center top no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}


#wrapper{
max-width: 100%;
width: 940px;
margin: 0 auto;
}

.main{
max-width: 100%;
width: 940px;
float: left;
}

.header, .content, .bottom, .sep2{
width: 100%;
float: left;
}



.header{
	margin-top: 100px;
	margin-bottom: 5px;
}


h1{
font-family: 'Open Sans', sans-serif;
color: #fff;
text-align: center;
font-size: 50px;
font-weight: 300;
margin: 0 0 10px 0;
}


h1 strong{
font-size: 38px;
font-weight: 700;
}

h2{
	text-align: center;
	font-weight: 300;
	font-size: 20px;
		color: #ffffff;

}

h2 strong{
	font-weight: 700;
	font-style: italic;
}


.information{
width: 480px;
padding-top: 20px;
margin: 0 auto;
}

h3 {
	text-align: center;
	font-weight: 100;
	font-style: italic;
	font-size: 18px;
	color: #ffffff;
}

.footer {
	text-align: center;
	margin-bottom: 20px;
}

.media-link {
	margin-left: 5px;
	margin-right: 5px;
	font-size: 32px;
}

.fa-gradient-red {
	background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(rgb(122, 0, 0)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fa-gradient-green {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(55, 255, 81)), to(rgb(0, 82, 4)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fa-gradient-blue {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(15, 219, 255)), to(rgb(0, 66, 97)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


h4{
	font-size: 24px;
	font-weight: 500;
	color: #ffffff;
}

.information p{
font-size: 16px;
color: #ffffff;
display: block;
}

.form{
position: relative;
width: 478px;
margin-top: 20px;
}

.field{
background: url(../images/field.png) repeat;
width: 448px;
-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
border: none;
font-style: italic;
font-family: 'Lato', sans-serif;
font-size: 16px;
color: #ffffff;
padding: 15px;
margin-bottom: 15px;
outline: none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  opacity: 1; /* Firefox */
}
	.field:focus {
	border: 1px solid #ffffff;
	padding: 14px;
	}
@media only screen and (max-width: 480px)  {
	.information{
	width: 100%;
	}
	.form{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	}

	.field {
	width: 90%;
	}
}

.submit{
position: absolute;
right: 15px;
top: 13px;
padding: 3px 10px;
-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
background: #ffffff;
border: none;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}


.submit:hover{
background: #eeeeee;
}

.error {
  color: #FE7070;
  font-weight: 700;
  font-size: 25px;
}

a {
  color: #92BCF2;
  font-weight: 700;
}

a:visited,
a:hover {
  color: #7EB6FF;
}

.g-recaptcha, .g-recaptcha > div {
  margin: auto;
}

#earth {
  /* [1] Allow it to contain the absolutely positions pseudo-elements (later-on) */
  position: relative;

  /* [2] Set-up the dimensions and spacing */
  width: 300px;
  height: 300px;
  margin: 3em auto;

  /* [3] Prepare the animation effects */
  transition: transform 200ms linear;
  animation: rotate 4s linear infinite; /* This is going to be defined in the next step */

  /* [4] Tweak the appearance, and give it a nice background i.e. the world map */
  color: #000;
  border-radius: 50%;
  background: url(path/to/world-map-image) 0 0 repeat / 630px;
  box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);

  /* [5] Position things in a 3d space */
  transform-style: preserve-3d;
}

#earth:after {
	/* [1] Break the flow to show this as an overlay */
	position: absolute;
	top: 0;
	left: 0;

	/* [2] Make it take all the space available in the box (ahem... globe!) */
	width: 100%;
	height: 100%;

	/* [3] Make sure this has no generated content, as we want this just for fancy purposes */
	content: '';

	/* [4] Give it some shape and shadow */
	border-radius: 50%;
	box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
}

@keyframes rotate {
  0% {background-position: 0 0;}
  100% {background-position: 630px 0;}
}