*, *:before, *:after{
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
body{
  background: #201E2F url("../img/bg.jpg") top center no-repeat;
  font-family:'Karla';
  color:#fff;
  text-align:center;
  line-height:1;
}
#center-box{
	margin: 0 auto;
	width: 715px;
	padding: 70px 0 0 0;
}
h1{
	font-family:'Catamaran-VariableFont_wght';
	font-size: 52px;
	margin: 0 0 30px 0;
	text-transform: uppercase;
	line-height:1.3;
}
p{
	margin: 0 0 30px 0;
	font-size:20px;
}
p b{
  text-transform: uppercase;
}
form{
	overflow:hidden; 
	clear:both; 
	margin: 60px 0 60px 0;
}
#status{
	margin: 60px 0 60px 0; 
	overflow:hidden; 
	clear:both;
	position:relative;
}
#status-base{
	width:100%;
	height: 20px;
	border: solid 2px #EB0951;
	display:block;
	position:relative;
}
#status-bar{
	width:80%;
	height: 20px;
	background:#EB0951;
	display:block;
	position:absolute;
	top: 0px;
	left:-2px;
}
#status-text{
	position:relative;
	font-size:16px;
	margin:10px 0 0 0;
}
#status-text:before{
	position:absolute;
	top:0;
	left:0;
	content:"0%";
	font-size:16px;	
}
#status-text:after{
	position:absolute;
	top:0;
	right:0;
	content:"100%";
	font-size:16px;	
}

.row{
	margin: 0 -10px;
	position:center;
}
.one-third{
	float:left;
	width:33.33%;
	padding:0 10px;
}
input[type="text"], input[type="email"]{
	width:100%;
	padding:10px;
	border:solid 2px #fff;
	font-size:16px;
	font-family: inherit;
	background: transparent;
	margin: 0 0 20px 0;
	color:#fff;
	}
input[type="submit"]{
	width:100%;
	background: #fff;
	padding:10px;
	font-size:16px;
	font-family: inherit;
	color: #0b0e17;
	font-weight:bold;
	text-transform: uppercase;
	border:solid 2px #fff;
}
input[type="submit"]:hover{
	width:100%;
	font-size:16px;
	font-family: inherit;
	border:solid 2px #ffff00;
	background-color: #ffff00;
}

::-webkit-input-placeholder{
	color:#fff;
}
ul{
	owerflow: hidden;
	margin: 0 0 30px 0;
}
ul li{
	display:inline-block;
}
ul li a{
	display:inline-block; 
	border:solid 2px #fff;
	width:50px;
	height:50px;
	border-radius:50px;
	margin:0 10px;
	background-size: 20px auto;
	background-repeat: no-repeat;
	background-position:center center;
} 

ul li a:hover{
  border-color: #ffff00;
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  animation-name: example;
  animation-duration: 2s;
}

#facebook {background-image: url(../img/facebook.svg);}
#twitter {background-image: url(../img/twitter.svg);}
#gplus {background-image: url(../img/gplus.svg);}
#linkedin {background-image: url(../img/linkedin.svg);}
#youtube {background-image: url(../img/youtube.svg);}

@media only screen and (max-width:715px){
	#center-box {
		width:100%;
		padding:40px 25px 0 25px;
	}
} 

@media only screen and (max-width:640px){
	.one-third { 
	width:100%;
	float:none;
	}
	body, p {font-size:16px;}
	h1 {font-size:30px;}
	
	ul li a{
	width:35px;
	height:35px;
	margin:0 5px;
	background-size: 15px auto;
}
}