.clearfix:after {
    display: block;
    content: '';
    clear: both;
    float: none
}
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    text-align: center;
    font-weight: 300;
    color: #fff;    
}
html{
	background-image: url('images/bg.jpg');
	background-position: top left;
	background-size: cover;
	background-repeat: repeat;
}
.social{
	margin-top: 20px;
	text-shadow: none;
}
.social-button.twitter {
    background: #4099ff;
    border-color: #4099ff;
    color: #fff;
}
.social-button.fb {
    background: #3b5998;
    border-color: #3b5998;
    color: #fff;
}
.social-button{
	font-size: 1.1em;
    letter-spacing: 2px;
    font-weight: 600;
    text-decoration: none;
    padding: .35rem 1.5rem;
    border: 2px solid;
    background: transparent;
    cursor: pointer;
    display: inline-block;
}
.wrapper {
    width: 70%;
    max-width: 1000px;
    margin: 80px auto;
    text-shadow: 1px 1px #000;

}

h1 {
    font-size: 75px;
    font-family: 'Slabo 27px', serif;
    text-align: center;
}

h2 {
    font-size: 35px;
}

h2, h3 {
    font-weight: 400;
}
#intro{
	background-color: #62bcfa;
	background-image: url('images/bg.jpg');
	background-position: top center;
	height: 100vh;
}
.intro-content{
	position: absolute; /* or absolute */
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	min-width: 635px;
}
@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}
.more{
	margin-top: 30px;
	cursor: pointer;
}
.more:hover{
	animation: bounce 1s;
}
.main-heading{
	font-family: 'Slabo 27px', serif;
	font-size: 50px;
}
.form-section {
    margin: 50px 0;
}

select {
    padding: 5px;
    border-radius: 5px;
}

input[type="submit"], button {
    font-family: 'Slabo 27px', serif;
    font-size: 20px;
    padding: 10px 25px;
    background: #62bcfa;
    color: #fff;
    text-transform: capitalize;
    border-radius: 20px;
    border: 2px solid #62bcfa;
    cursor: pointer;
}

.sleep {
    font-family: 'Slabo 27px', cursive;
    font-size: 30px;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
}

ul {
    text-align: left;
}

li {
    margin: 5px 0;
}
#footer{
	width: 80%;
	margin: 0 auto;
    padding: 15px 0;
}
#footer a{
	color: inherit;
}
@media (max-width: 1440px){
	body {
	    background-position: 2% 120vh; 
	}
	#background {
	    background-position: 98% 10vh; 
	}
}
@media (max-width: 1100px){
	body {
	    background: none;
	}
	#background {
	    background: none; 
	}
}
@media (max-width: 1000px){
	.wrapper {
	    width: 80%;
	}
}
@media (max-width: 670px){
	
	.intro-content{
		top: 20px;
	    left: 0;
	    transform: translate(0, 0);
		min-width: auto;
		display: block;
		margin: 0 auto;
		width: 100%;
	}
}
@media (max-width: 500px){
	html{
		background-image: none;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#001849+1,185096+64,4b7ed1+100 */
		background: #001849; /* Old browsers */
		background: -moz-linear-gradient(top,  #001849 1%, #185096 64%, #4b7ed1 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #001849 1%,#185096 64%,#4b7ed1 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #001849 1%,#185096 64%,#4b7ed1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001849', endColorstr='#4b7ed1',GradientType=0 ); /* IE6-9 */
	}
	h1{
		font-size: 40px
	}
	h2 {
	    font-size: 25px;
	}
	.intro-content h1{
		font-size: 30px
	}
	.intro-content h2{
		font-size: 20px
	}
	.wrapper {
	    width: 98%;
	    margin: 40px auto;
	}
	.main-heading {
	    font-size: 30px;
	}
	input[type="submit"]{
		font-size: 16px;
	}
	#footer{
		width: 98%;
	}
}