/*
	FONTS
		font-family: 'Pacifico', cursive;
		font-family: 'Russo One', sans-serif;
*/

*{
	box-sizing: border-box;
}

body{
	background: rgb(42, 129, 222);
	margin: 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
	transition: all 3.5s ease;
}

h1, .count-col h2, .count-col h3, .comment h3, .comment p{
	transition: all 1s ease;
}

h1{
	color: #fafafa;
	text-align: center;
	font-size: 4vw;
	font-family: "Pacifico", cursive;
	font-weight: normal;
	margin: 0;
	margin-top: 50px;
}

#title-2{
	opacity: 0;
	width: 80%;
    margin: 0 auto;
    margin-bottom: 75px;
	animation: appear 2.5s ease forwards 3s;
}

#count:after, #comment-form:after{
	content: "";
	display: block;
	clear: both;
}

.count-col{
	float: left;
	width: 25%;
	text-align: center;
	transform: scale(0);
	animation: bounce-in 1s ease 2s forwards;
}

.count-col h2{
	color: #fafafa;
	font-size: 10vw;
	font-family: 'Russo One', sans-serif;
	font-weight: normal;
	margin-top: 30%;
	margin-bottom: 2%;
}

.count-col h3{
	color: #fafafa;
	font-size: 2vw;
	font-family: 'Russo One', sans-serif;
	font-weight: normal;
}

.dark h1, .dark h2, .dark h3, .dark a, .dark p{
	color: #333 !important;
}

#comment-container{
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 50px;
}

.comment{
	margin-bottom: 50px;
}

.comment h3{
	color: #fafafa;
	font-size: 18px;
	margin-bottom: 10px;
}

.comment p{
	color: #fafafa;
	font-size: 16px;
	margin: 0;
}

#comment-form{
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255,255,255,0.6);
	padding: 3% 20px;
}

#comment-form, #comment-container{
	opacity: 0;
	animation: appear 2.5s ease forwards 4s;
}

#comment-form input, #comment-form textarea{
	display: block;
	float: left;
	vertical-align: top;
	font-family: "Open Sans", sans-serif;
	border: 2px solid #333;
	background: #fafafa;
	border-radius: 5px;
	padding: 10px 2%;
	font-size: 18px;
}

#comment-form input:focus, #comment-form textarea:focus{
	outline: none !important;
	float: left;
}

#comment-form input:first-child{
	width: 25%;
}

#comment-form textarea{
	resize: vertical;
	overflow: hidden;
	max-height: 300px;
	width: 59%;
	margin: 0 3%;
}

#comment-form #submitButton{
	width: 10%;
	cursor: pointer;
	background: #333;
	color: #fafafa;
	padding: 10px;
	transition: all .5s ease;
}

#comment-form #submitButton:hover, #comment-form #submitButton:focus, #comment-form #submitButton:active{
	background: #fafafa;
	color: #333;
}

#error{
	color: #c1150b;
}

#error:before{
	content: ".";
    display: block;
    visibility: hidden;
    clear: both;
}

footer{
	text-align: center;
	margin-top: 75px;
}

footer a{
	font-size: 1.2vw;
    color: #fafafa;
    opacity: 0.6;
    text-decoration: none;
    transition: all .5s ease;
}

footer a:hover{
	opacity: 1;
}

@media screen and (max-width: 980px){
	#comment-form input, #comment-form textarea{
		width: 100% !important;
		float: none;
		margin: 15px 0 !important;
		display: block;
	}
}

@media screen and (max-width: 480px){
	h1{
		font-size: 6vw;
	}

	.count-col h2{
		font-size: 11vw;
	}

	.count-col h3{
		font-size: 4vw;
	}
}

@keyframes appear{
	from{opacity: 0;}
	to{opacity: 1;}
}

@keyframes bounce-in{
	from{transform: scale(0);}
	to{transform: scale(1);}
}