@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');
* {
	margin: 0;
	padding: 0;
}
body {
	background: #02CACA;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	overflow: hidden;
}

.container {
	position: relative;
}

.question{
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 7%;
}
.question .title {
	position: relative;
	margin: 50px auto;
	text-align: center;
	line-height: 2;
	height: 88px;
}

.title h1 {
	position: absolute;
	left: 0;
	right: 0;
	color: #FFF;
	font-size: 44px;
	font-weight: 400;
	text-shadow: 1px 1px #008484;
}

.answer h1 {
	position: absolute;
	left: 0;
	right: 0;
	color: #FFF;
	font-size: 44px;
	font-weight: 400;
	text-shadow: 1px 1px #bf9200;
}

.emojis {
	position: relative;
	max-width: 768px;
	margin: 0 auto;
}
.smileis{
	position: relative;
	text-align: center;
	height: 500px;
}

.emojis .smileis figure {
	height: 159px;
	width: calc(100% / 6);
	text-align: center;
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 1px #008484;
	letter-spacing: 1.5px;
	font-size: 18px;
	display: inline-block;
}


.fadeIn {
	animation-name: fadeIn;
    animation-duration: .8s;
}

.fadeUp {
	animation-name: fadeUp;
    animation-duration: 2s;
    opacity: 0;
}

.fadeDown {
	animation-name: fadeDown;
    animation-duration: 1.3s;
}

.circleFX {
	position: absolute;
	z-index: 99;
	top: -50px;
	left: -50px;
	width: 100px;
	height: 100px;
	transition: all 495ms;

}

.yellowBG{
 	background-color: #FFDD67;
}

.redBG{
 	background-color: #F22E2E;
}

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

@keyframes fadeUp {
    from {margin-top: 50px;}
    to {margin-top: 0px;}
}

@keyframes fadeDown {
    from {opacity: 0; margin-top: -50px;}
    to {opacity: 1; margin-top: 0;}
}