/* =============================================
* RADIO BUTTONS
=============================================== */

#radios label {
	cursor: pointer;
	position: relative;
    margin-left: 15px;
    margin-right: 15px;
}

#radios label + label {
	margin-left: 15px;
}

input[type="radio"] {
	opacity: 0; /* hidden but still tabable */
	position: absolute;
	z-index: -1;
}

input[type="radio"] + span {
	font-family: 'Material Icons';
	color: #B3CEFB;
	border-radius: 50%;
	padding: 20px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

input[type="radio"]:checked + i {
	top: -3px;
}

input[type="radio"]:focus + span {
	color: #fff;
}

/* ================ TOOLTIPS ================= */

#radios label:hover::before {
	content: attr(for);
	font-family: Roboto, -apple-system, sans-serif;
	font-size: 18px;
	position: absolute;
	top: 140%;
	left: -60px;
	right: 0;
	opacity: 0.75;
	background-color: #323232;
	color: #fff;	
	padding: 8px;
	border-radius: 3px;
	display: block;
	width: 160px;
}

/* =============================================
* CENTERING, CONTAINER STYLING ETC || IGNORE
=============================================== */

h1 {
	font-weight: 300;
	color: #666;
	text-align: center;
	margin-bottom: 30px;
	margin-top: 0;
	font-size: 40px;
}

#radios {
	text-align: center;
	margin 0 auto;
}

.container {
	margin: 0 auto;
	margin-top: -50px;
}

.container_wrapper {
	margin: 0 auto;
	margin-top: -50px;
}

html {
	height: 100%;
	font-family: Roboto, -apple-system, sans-serif;
}

body {
	background-color: #FFF;
	display: flex;
	height: 100%;
	align-items: center;
	text-align: center;
}

.material-icons {
	-webkit-transition: all 0.02s; /* Safari */
    transition: all 0.02s;
}

.material-icons:hover {
	top: -3px;
}

.radio_emoji {
    font-size: 45px;
}

.food_image {
	display: block;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 40px;
}

.divider {
	width: 100%;
    height: 1px;
    margin-bottom: 30px;
    background-color: #ccc;
}

.buttom_close {
	position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
}

.survey_data {
	font-family: Roboto, -apple-system, sans-serif;
	position: absolute;
    top: 10px;
    left: 10px;
    text-align: left;
    font-size: 14px;
    color: #666;
    line-height: 12px;
	max-width: 250px;
}

.survey_data p {
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.thanks_title {
	font-size: 35px;
    color: #666;
    margin-bottom: 20px;
}

.thanks_subtitle {
	font-size: 20px;
    color: #666;
}

.thanks_icon {
	font-size: 40px;
    margin-bottom: 20px;
}

.thanks_button {
	margin-top: 40px;
    font-size: 16px;
}

.login_title {
	font-size: 35px;
    color: #666;
    margin-bottom: 20px;
}

.login_subtitle {
	font-size: 20px;
    margin-bottom: 30px;
    color: #666;
}

.buttom_exit {
	position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
	text-decoration: none !important;
}

.child_list li {
    cursor: pointer;
	-webkit-transition: all 0.05s; /* Safari */
    transition: all 0.05s;
}

.child_list li:hover {
    background-color: #EEE;
}

.container_wrapper_list {
    margin: 0 auto;
    margin-top: -50px;
    width: 30%;
}

@media (max-width: 1100px) {
	
	.container_wrapper_list {
		width: 60%;
	}
	
}

@media (max-width: 435px) {
	
	.radio_emoji {
		font-size: 30px;
	}
	
	#radios label {
		margin-left: 5px;
		margin-right: 5px;
	}
	
	h1 {
		font-size: 30px;
	}
	
	.divider {
		width: 80%;
		margin-left: 10%;
	}
	
	.buttom_close {
		font-size: 15px;
		top: 5px;
		right: 5px;
	}
	
	.survey_data {
		top: 5px;
		left: 5px;
		font-size: 12px;
		line-height: 10px;
	}
	
	.container_wrapper_list {
		width: 90%;
	}
	
}

@media (max-width: 300px) {
	
	.radio_emoji {
		font-size: 20px;
	}
	
	#radios label {
		margin-left: 3px;
		margin-right: 3px;
	}
	
	h1 {
		font-size: 25px;
	}
	
	#radios label:hover::before {
		font-size: 14px;
		top: 130%;
		left: -50px;
		right: 0;
		opacity: 0.75;
		background-color: #323232;
		color: #fff;	
		padding: 4px;
		border-radius: 3px;
		display: block;
		width: 120px;
	}
	
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: wait; /* Add a pointer on hover */
}

#overlay label {
	text-align: center;
}