/* Core */


/* Draw A Circle */

.c {
	border-radius: 50%;
}


/* Navigation */

nav {
	position: fixed;
  	margin: 0 auto;
  	width: 100%;
  	bottom: 0;
  	-webkit-box-shadow: 0px -9px 106px -17px rgba(0,0,0,0.51);
  	-moz-box-shadow: 0px -9px 106px -17px rgba(0,0,0,0.51);
  	box-shadow: 0px -9px 106px -17px rgba(0,0,0,0.51);
  	z-index: 5;
}

nav button {
	float: right;
	height: 60px;
	outline: 0;
  	border: 0;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #e0e1e2 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e1e2));
	background: -webkit-linear-gradient(top, #ffffff 0%, #e0e1e2 100%);
	background: -o-linear-gradient(top, #ffffff 0%, #e0e1e2 100%);
	background: -ms-linear-gradient(top, #ffffff 0%, #e0e1e2 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #e0e1e2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e1e2', GradientType=0 );
	color: #6d6868;
	font-family: 'Open Sans', sans-serif;
  	font-size: 12px;
  	letter-spacing: 3px;
}

nav button:hover {
	opacity: .9;
}

nav button:active {
	color: #ffffff;
	background: #e9895e;
	background: -moz-linear-gradient(top, #e9895e 0%, #c4744f 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #e9895e), color-stop(100%, #c4744f));
	background: -webkit-linear-gradient(top, #e9895e 0%, #c4744f 100%);
	background: -o-linear-gradient(top, #e9895e 0%, #c4744f 100%);
	background: -ms-linear-gradient(top, #e9895e 0%, #c4744f 100%);
	background: linear-gradient(to bottom, #e9895e 0%, #c4744f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9895e', endColorstr='#c4744f', GradientType=0 );
}

.active {
	color: #ffffff;
	background: #d49e8f;
	background: -moz-linear-gradient(top, #d49e8f 0%, #c77f75 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #d49e8f), color-stop(100%, #c77f75));
	background: -webkit-linear-gradient(top, #d49e8f 0%, #c77f75 100%);
	background: -o-linear-gradient(top, #d49e8f 0%, #c77f75 100%);
	background: -ms-linear-gradient(top, #d49e8f 0%, #c77f75 100%);
	background: linear-gradient(to bottom, #d49e8f 0%, #c77f75 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d49e8f', endColorstr='#c77f75', GradientType=0 );
}


/* Selection Text */

p::selection {
    background: #BF374B;
}


/* Information / Description text */

.info_text {
	color: white;
  	font-family: 'Open Sans', sans-serif;
  	font-size: 10px;
  	font-weight: 600;
  	letter-spacing: 1px;
  	z-index: 2;
  	text-align: center;
  	text-transform: uppercase;
  	opacity: .7;
  	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  	-webkit-font-smoothing: antialiased;
}

.info_container {
	position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

/* Labels */

.label {
  	position: absolute;
    top: -50px;
    left: -40px;
}

.line {
	height: 1px;
	width: 25px;
	background-color: #ffffff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: relative;
	top: 5px;
	left: 20px;
	opacity: .7;
}


/* Icons */

.eye {
	width: 15px;
    height: 10px;
    display: inline-block;
    background-size: 15px 10px;
	background-image: url('/img/eye.svg');
	position: absolute;
    opacity: .6;
}

.q {
	width: 15px;
    height: 15px;
    display: inline-block;
    background-size: 15px 15px;
	background-image: url('/img/q.svg');
}

.q-dark {
	width: 15px;
    height: 15px;
    display: inline-block;
    background-size: 15px 15px;
	background-image: url('/img/q-dark.svg');
}

/* Sun Styles */

.sun {
	display: block;
	border-radius: 50%;
	background: #FFFFEA;
	box-shadow: 0px 0px 0px 5px #ffffff;
	-webkit-box-shadow: 0px 0px 0px 5px #ffffff;
  	-moz-box-shadow: 0px 0px 0px 5px #ffffff;
}

.shine {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	-webkit-animation: pulse 3s ease-out infinite;
	animation: pulse 3s ease-out infinite;
	background: rgba(255,255,255,0);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,250,0) 23%, rgba(255,255,234,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(23%, rgba(255,255,250,0)), color-stop(100%, rgba(255,255,234,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,250,0) 23%, rgba(255,255,234,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,250,0) 23%, rgba(255,255,234,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,250,0) 23%, rgba(255,255,234,1) 100%);
	background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(255,255,250,0) 23%, rgba(255,255,234,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffea', GradientType=1 );
}

/* Sunshine Pulse Keyframes */

@keyframes pulse {
	from {
		-webkit-transform: scale(1,1);			
		opacity: 1;
	}
    to {
    	-webkit-transform: scale(1.5,1.5);
    	opacity: 0;
    }
}

@-webkit-keyframes pulse {
	from {
		-webkit-transform: scale(1,1);			
		opacity: 1;
	}
    to {
    	-webkit-transform: scale(1.5,1.5);
    	opacity: 0;
    }
}

@-ms-keyframes pulse {
	from {
		-webkit-transform: scale(1,1);			
		opacity: 1;
	}
    to {
    	-webkit-transform: scale(1.5,1.5);
    	opacity: 0;
    }
}

@-moz-keyframes pulse {
	from {
		-webkit-transform: scale(1,1);			
		opacity: 1;
	}
    to {
    	-webkit-transform: scale(1.5,1.5);
    	opacity: 0;
    }
}

.vertical-center {
  margin-bottom: 0;
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; /* You might also want to use
                        'height' property instead.
                        
                        Note that for percentage values of
                        'height' or 'min-height' properties,
                        the 'height' of the parent element
                        should be specified explicitly.
  
                        In this case the parent of '.vertical-center'
                        is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
  
  /* Align the bootstrap's container vertically */
    -webkit-box-align : center;
  -webkit-align-items : center;
       -moz-box-align : center;
       -ms-flex-align : center;
          align-items : center;
  
  /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
  width: 100%;
  
  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
         -webkit-box-pack : center;
            -moz-box-pack : center;
            -ms-flex-pack : center;
  -webkit-justify-content : center;
          justify-content : center;
}

/* Intro Question */

.question_container {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 6;
	-webkit-animation: slidedown .3s ease-in forwards 4s;
	animation: slidedown .3s ease-in forwards 4s;
}

.question {
	width: 70%;
	height: 70%;
	margin: 0 auto;
  	font-family: 'Open Sans', sans-serif; 
	font-weight: 800;
	color: #fff;
	font-size: 80px;
    text-align: center;
	text-transform: uppercase;
	line-height: 1;
	position: relative;
}

.question p {
	-webkit-filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.2));
	filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.2));
}

@keyframes slidedown {
	from {
		transform: translateY(0);			

	}
    to {
		transform: translateY(150%);
    }
}

@-webkit-keyframes slidedown {
	from {
		-webkit-transform: translateY(0);			

	}
    to {
		-webkit-transform: translateY(150%);
    }
}

@-ms-keyframes slidedown {
	from {
		-ms-transform: translateY(0);			

	}
    to {
		-ms-transform: translateY(150%);
    }
}

@-moz-keyframes slidedown {
	from {
		-moz-transform: translateY(0);			

	}
    to {
		-moz-transform: translateY(150%);
    }
}


@media only screen and (max-width : 767px) {
	
  	.question {
		font-size: 50px;
	}

}