/* project: mozgovenok */

img.person-img-main {
	width: 100%;
}

.result-table.table .table-row .table-cell {
	font-family: 'Proxima Nova Rg';
}
	.table-cell.result-name {
		font-size: 16px;
	}
	.result-table {
		margin-bottom: 5em;
		margin-top: 1em;
	}

/* ================================================== */
/* === MAIN === */
/* ================================================== */
* {
	box-sizing: border-box;
	font-family: 'UA_Eagle';
}
body {
	/*font-family: 'Proxima Nova RG';*/
	margin: 0;
	font-size: 20px;
	min-height: 100vh;
}

h1,
h2 {
	/*margin-top: 0;*/
	margin-bottom: 1.5em;
	/*font-family: 'Proxima Nova Bl';*/
}

h2 {
	text-align: center;
	background-image: url(../images/h2.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 1em 0 1.5em 0;
	margin-bottom: .5em;
	max-width: 350px;
	margin: 0 auto;
}
	h2 .span {
		font-size: .7em;
		color: #c35c36;
	}

[screen="module"] h2,
[screen="exercise"] h2,
[screen="level"] h2 {
	margin-bottom: .5em;
}
[screen="module"] .person-box,
[screen="exercise"] .person-box,
[screen="level"] .person-box {
	margin-top: 1.5em;
}

h3 {
	text-align: center;
	font-weight: normal;
}
.wrapper h3 {
	animation: anim-append .5s ease;
}

.hide {
	display: none !important;
}

.h-desc {
	margin-top: -1.5em;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

.anim-append {
	animation: anim-append .5s ease;
}

.wrapper {
	width: 720px;
	margin: 2em auto;
}

@media screen and (max-width: 640px){
	.wrapper {
		width: 100%;
		margin: 0;
	}
}



/* ================================================== */
/* === COLORS === */
/* ================================================== */
body {
	/*background-color: #eee;*/
	background: linear-gradient(180deg, #458FE3 0%, #2FB1ED 100%);
	/*background-color: #458FE3;*/
	/*background: linear-gradient(180deg, #197eed 0%, #56a5fd 100%);*/
	color: #fff;
	/*text-shadow: 0px 1px 3px #373737, 1px 1px 0px #1b7b8e, -1px -1px 0px #1b7b8e, -1px 1px 0px #1b7b8e, 1px -1px 0px #1b7b8e;*/
	font-weight: bold;
}
	.background-image {
		min-height: 90vh;
		width: 100%;
		background-image: url(../images/background-image.png);
		background-position: center 2em;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.wrapper-game {
		/*background-image: url(../images/background-image.png);*/
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	input[type="submit"] {
		/*text-shadow: 0px 1px 3px #373737, 1px 1px 0px #1b7b8e, -1px -1px 0px #1b7b8e, -1px 1px 0px #1b7b8e, 1px -1px 0px #1b7b8e;*/
	}
.wrapper {
	/*background-color: #fff;*/
}
/*.btn.action {
	background-color: #42B449;
	color: #fff;
}*/
.btn.no-active,
.btn.no-active:hover {
	background-color: #e0e0e0;
	color: #a2a2a2;
}

.menu {
	/*background-color: #000;*/
	/*color: #000;*/
}

/* ================================================== */
/* === SIZES === */
/* ================================================== */
h2,
.btn.big {
	font-size: 21px;
}
h3,
h4 {
	font-size: 24px;
}
.btn {
	font-size: 24px;
}
.messages {
	font-size: 18px;
}
input[type="text"],
input[type="password"]{
	font-size: 20px; 
}



/* ================================================== */
/* === DESIGN === */
/* ================================================== */
.wrapper {
	border-radius: 15px;
	padding: 10px 20px 20px 20px;
}
@media screen and (max-width: 640px){
	.wrapper {
		border-radius: 0;
	}
}

.btn,
input[type="submit"],
.button {
	border-radius: 40px;
	/*padding: .7em 1.1em;*/
	padding: .8em 1.2em;
}
.btn,
.formula-wrapper,
[exercise="5"] .result-correct:after,
[exercise="5"] .result-incorrect:after,
[exercise="3"] .answer-box .btn.result-correct:after,
[exercise="3"] .answer-box .btn.result-incorrect:after,
.time-line,
.time-in,
/*.points,*/
.button,
input[type="submit"],
.menu-button {
	/*border: 2px solid #000;*/
	/*box-shadow: inset 0px -7px 2px rgba(0, 0, 0, 0.17), 0px 1px 0px #473FAA, 0px 4px 9px rgba(0, 0, 0, 0.5);*/
	box-shadow: inset 0px -2px 2px rgb(0 0 0 / 26%), 0px 4px 9px rgb(0 0 0 / 20%);
	/*background: linear-gradient(180deg, #00DEBA 0%, #00C5A5 100%);*/
}

/*Оранжевый*/
.time-in {
	background: linear-gradient(180deg, #FFAA3C 0%, #FB8E2B 100%);
}

/*Фиолетовый*/
/*.btn,*/
.button,
/*[exercise] .answer-box .btn,*/
input[type="submit"] {
	background: linear-gradient(180deg, #C365FC 0%, #AB4DE9 100%);
}

.btn,
.btn[select-var="module"],
.btn[select-var="level"],
.btn[select-var="exercise"] {
	background-color: #ffeade;
	border: 4px solid #f4c2b3;
	color: #ad705c;
}
	.coins-box .count {
		background-color: #ffeade;
		color: #ad705c;
	}
[exercise="2"] .btn[select-var="game"],
[exercise="3"] .btn[select-var="game"],
[exercise="4"] .btn[select-var="game"],
[exercise="5"] .btn[select-var="game"] {
	border-radius: 15px;
}

/*Зеленый*/
/*.time-in {
	background: linear-gradient(180deg, #00DEBA 0%, #00C5A5 100%);
}*/

/*Синий*/
/*[exercise="1"] .btn.on-select,
[exercise="5"] .btn.on-select,*/
.message,
.button.two-style,
.menu-button {
	background: linear-gradient(180deg, #3E67D9 0%, #3258C5 100%);
}

[exercise="1"] .btn.on-select,
[exercise="5"] .btn.on-select {
	background-color: #ffbf87;
}

/*[exercise="5"] .result-correct:after,
[exercise="5"] .result-incorrect:after {
	background: linear-gradient(180deg, #3E67D9 0%, #3258C5 100%) !important;
}*/

.formula-wrapper {
	background: none;
}


[exercise="4"] .answer-box .btn {
	box-shadow: 0 0 .3em rgba(0,0,0,.3);
	background: #00DEBA !important;
}
	[exercise="4"] .answer-box .btn:after {
		background: #00C5A5;
	}


.multipleer {
	/*text-align: center;*/
	background-color: #e9934b !important;
	color: #fff !important;
}

b {
	background-color: #9f38dc;
	color: #ffb575;
	border-radius: 1em;
	padding: .1em .5em .05em;
	font-size: .85em;
}

/* ================================================== */
/* === MENU === */
/* ================================================== */
.menu-mobile-btn {
	width: 3em;
	height: 100%;
	background-image: url(../images/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60%;
	display: table-cell;
}
.menu-mobile .menu_td {
	font-weight: bold;
	text-align: left;
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
	width: 33%;
}
	.menu-mobile .menu_site {
		font-weight: bold;
	}
	.menu-mobile .menu_desc {
		font-size: .62em;
	}
.menu-mobile-user {
    /*position: absolute;*/
    top: 0;
    right: 0;
    height: 100%;
    padding: .6em;
}
.menu-mobile-user img {
	width: auto;
	height: 80%;
	margin-top: 10%;
	margin-left: 10%;
}
	.menu-button {
		padding: .1em;
		display: inline-block;
		border-radius: 10px;
		margin-right: 1em;
	}
	.menu-button-login-img {
		width: 30px;
		height: 30px;
		background-image: url(../images/person.white.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 60%;
	}
/* ================================================== */
.menu {
	width: 100%;
	display: table;
	position: relative;
	height: 55px;
}
	.menu .menu_logo {
		font-size: 24px;
		font-weight: bold;
		text-decoration: none;
		display: table-cell;
		width: 210px;
		padding-left: 1em;
		padding-right: 1em;
		vertical-align: middle;
	}
		.menu .menu_logo img {
			vertical-align: middle;
		}
		.menu .menu_logo .desc {
			font-size: 14px;
			font-style: italic;
			/*font-weight: normal;*/
		}
.menu_elem {
	display: inline-block;
	/*padding: 1.5em 1.5em;*/
}
.menu_link {
	text-decoration: none;
	vertical-align: middle
}
[class^="menu_td"]{
	display: table-cell;
}
.menu_td_login {
	text-align: right !important;
}
.menu_td_btns {
}
	.menu-btns {
		text-align: center !important;
	}
	.menu_td_btns .menu-btns div,
	.menu_td_btns .menu-btns a {
		display: inline-block;
		background-color: #6860b9;
		border-radius: 50%;
		width: 1.6em;
		height: 1.6em;
		margin-top: .2em;
	}
	[class*="icon-"]{
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70%;
	}
	.icon-sound { background-image: url(../images/sound-off.png)	}
	.icon-sound.on { background-image: url(../images/sound-on.png)	}
	.icon-menu { background-image: url(../images/menu.png)	}
/* ================================================== */
.coins-box {
	position: relative;
	padding: 0 1em 0 1.5em;
	display: inline-block;
}
	.coins-box .count {
		/*vertical-align: middle;*/
		text-decoration: none;
		font-weight: bold;
		padding-left: 33px;
		display: inline-block;
		/*color: inherit;*/
		/*font-size: .9em;*/
		/*padding: .1em .5em;*/
		/*border-radius: 10px;*/
		position: relative;
		border-radius: 2em;
		font-size: 18px;
		padding: .2em 1em .2em 2em;
	}
		.anim-bounceIn {
			animation: bounceIn .5s ease;
		}
		.anim-bounce {
			animation: bounce .3s ease;
		}
		.coins-box .count:after {
			content: '';
			position: absolute;
			top: -4px;
			left: -11px;
			width: 36px;
			height: 36px;
			background-image: url(../images/star.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 70%;
			background-color: #bc5df5;
			border-radius: 50%;
			box-shadow: 0.08em -0.01em 0px 2px rgb(255 234 222), inset -1px -1px 0 rgba(0,0,0,.1);
		}
		.coins-box .count.money:after {
			background-image: url(../images/money.png);
		}
		.coins-box.none {
			padding-left: 1em;	
		}
			.coins-box.none .count {
				padding-left: 1em;
				padding-right: 1em;
				margin
			}
			.coins-box.none .count:after {
				display: none;
			}
	.coins-box .points-change,
	.coins-box .money-change {
		position: absolute;
		right: 1.5em;
	}

/*.ad-box {
	height: 100px !important;
	max-height: 100px !important;
}*/

/* ================================================== 
/* === ELEMENTS === */
/* ================================================== */
input,
textarea,
select,
.select-label {
	background-color: #eee;
	color: #000;
	font-size: 16px;
}
input,
textarea,
select,
.button,
.select-label {
	padding: 1em 1.5em .9em 1.5em !important;
	border: 0px solid #ccc;
	/*border-radius: .3em;*/
	border-radius: 40px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="text"],
input[type="password"],
input[type="number"]{
	min-width: 33%;
}
input[type="submit"],
.button {
	/*font-size: 1em;*/
	font-size: 21px; 
	/*padding: .7em 1.1em;*/
	/*padding: 1em 2.5em .9em 2.5em;*/
	margin-top: 1em;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	/*text-transform: uppercase;*/
	transition: all .3s;
	background-color: #EE9D00;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	color: #fff;
}
	#register_form > * {
		width: 50%;
	}
label {
	display: block;
	padding: .7em 0 .2em 0;
}
@media screen and (min-width: 640px){
	#register_form {
		width: 415px;
		margin: 0 auto;
	}
	#register_form .button,
	#register_form input {
		width: 100%;
	}
}
@media screen and (max-width: 640px){
	#register_form > * {
		width: 100%;
	}
	.btn {
		/*width: 100% !important;*/
	}
}
/* ================================================== */
.btn {
	/*border-radius: 15px;*/
	/*border: 2px solid #000;*/
	/*padding: .5em .8em;*/
	margin-bottom: .5em;
	transition: background-color,left .3s;
	animation: anim-append .5s ease;
	cursor: pointer;
	display: block;
	text-decoration: none;
}
	.btn:hover {
		/*background-color: #000;*/
		/*color: #fff;*/
	}
	.btn.on-select {
		animation: btn-flip .3s ease;
		/*background-color: #000;*/
		/*color: #fff;*/
	}

.btn.mega {
	padding-top: 8em;
	text-align: center;
	background-size: 52%;
	background-position: center 1em;
	background-repeat: no-repeat;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 4px rgba(0,0,0,0.3);
	font-weight: 900;
	font-size: 24px;
}

.btn.action {
	text-align: center;
	/*border: none;*/
	/*padding: .7em 1em;*/
	/*margin-bottom: 0;*/
}

.select-answer {
	border: 2px solid #36c;
}

/*.btn.math {
	background-image: url(https://nauteh-dpo.ru/wp-content/uploads/2018/12/098.jpg);
	background-position: 0 82%;
	background-size: 100%;
}*/
.btn.select.btn-image {
	background-size: 1.2em;
	padding-left: 3em;
	background-position: 1em center;
	background-repeat: no-repeat;
}

.btns-fix {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
	.btns-wrapper {
		padding: .5em 1em;
	}

.result-correct {
	position: relative;
	border-color: #42B449;
	/*background-color: #42B449 !important;*/
	animation: bounceIn .5s ease;
}
.result-correct:after {
	content: '';
	position: absolute;
	top: .7em;
	right: .7em;
	/*width: 1.2em;
	height: 1.2em;*/
	background-image: url('../images/done.color.png') !important;
	background-repeat: no-repeat !important;
	background-size: 100% !important;
	background-position: center !important;
}
	[exercise="1"] .result-correct:after,
	[exercise="1"] .result-incorrect:after {
		width: 1.2em;
		height: 1.2em;
		/*background-color: #2a4aa5;*/
		background-color: rgba(0,0,0,.4);
		background-size: 60% !important;
		border-radius: 10px;
	}

.result-incorrect {
	position: relative;
	border-color: #FF2525;
	/*background-color: #FF2525 !important;*/
	/*animation: bounceIn .5s ease;*/
}
.result-incorrect:after {
	content: '';
	position: absolute;
	top: .7em;
	right: .7em;
	/*width: 1.2em;
	height: 1.2em;*/
	background-image: url('../images/close.color.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

.question-result {
	padding: .7em 1em;
	/*border-radius: 15px;*/
	color: #fff;
	background-color: #000;
	animation: bounceInLeft .5s ease;
}
	.question-result h4 {
		margin: 0;
	}	
	.question-result.green { background-color: #42B449 }
	.question-result.red { background-color: #FF2525 }

.question-time {
	padding: 0em 1em .7em 1em;	
	position: relative;
}
	.question-time .time {
		font-size: .9em;
		text-align: right;
		position: absolute;
		top: 0;
		right: 1.7em;
	}
	.question-time .time-line {
		width: 100%;
		height: 22px;
		border-radius: 15px;
		margin-top: .3em;
		/*border: 2px solid #000;*/
		overflow: hidden;
	}
	.question-time .time-in {
		width: 100%;
		height: 22px;
		border-radius: 15px;
		/*background-color: #000;*/
		transition: all 1s;
	}
	

/* ================================================== */
/* === EXERCISES === */
/* ================================================== */
[exercise="1"] .question-data {
	font-size: 32px;
	text-align: center;
	font-weight: bold;
}
	[exercise="1"] .answer-box {
		display: inline-block;
		width: 50%;
	}
		[exercise="1"] .answer-box:nth-child(2),
		[exercise="1"] .answer-box:nth-child(4){
			padding-left: .5em;
		}
		[exercise="1"] .question-data {
			box-shadow: 0 0 0.3em rgb(0 0 0 / 40%);
			padding: .4em 0 .3em 0;
			border-radius: 15px;
		}
/* ================================================== */
[exercise="2"] .answer-box .btn,
[exercise="3"] .answer-box .btn {
	padding: 0;
	border: none;
	margin-bottom: 0;
	position: relative;
	margin: 5px;
}
	[exercise="2"] .answer-box .btn img,
	[exercise="3"] .answer-box .btn img {
		margin-bottom: -7px;
	}
[exercise="2"] .answer-box .btn[select-color]{
	background: none;
}
[exercise="2"] .answer-box .btn[select-color].no-color {
	background-color: #fff !important;
}
	/*[exercise="2"] .answer-box .btn[select-color].no-color:after {
		content: attr(select-color);
		position: absolute;
		top: -.5em;
		font-size: .6em;
		border-radius: 10px;
	}*/
	.variant-color {
		background: none;
	}
	[exercise="2"] .answer-box .btn.result-correct img,
	[exercise="3"] .answer-box .btn.result-correct img {
		opacity: 0 !important;
	}
/* ================================================== */
[exercise="3"] .answers {
	text-align: center;
}
[exercise] .answer-box[select-display="none"] {
	display: none;
	/*width: 0;
	height: 0;*/
	/*transform: translate(-100px);*/
}
	/*[exercise="3"] .answer-box [select-color]:before{
		content: attr(select-color);
		position: absolute;
		top: -.5em;
		font-size: .6em;
		border-radius: 10px;
	}*/
[exercise="3"] .answer-box .btn.result-incorrect:after,
[exercise="3"] .answer-box .btn.result-correct:after {
	top: -6px;
	left: -6px;
	background-color: #fff !important;
	background-size: 60%;
	width: 1.2em;
	height: 1.2em;
}
	[exercise="3"] .answer-box .btn.result-correct img {
		opacity: 1 !important;
	}
/* ================================================== */
[exercise="4"] .answer-box,
[exercise="2"] .answer-box,
[exercise="3"] .answer-box {
	display: inline-block;
	width: 25%;
}
	[exercise="4"] .answer-box img,
	[exercise="2"] .answer-box img,
	[exercise="3"] .answer-box img {
		width: 100%;
		height: auto;
		border-radius: 10px;
	}
	[exercise="4"] .answer-box .btn {
		padding: .3em .3em 0 .3em;
		border: none;
		margin-bottom: 0;
		position: relative;
		margin: 5px;
		transition: all .3s;
	}
	[exercise="4"] .answer-box .btn.rotate-on {
		transform: rotateX(180deg);
	}
		[exercise="4"] .answer-box .btn.rotate-on:after,
		[exercise="2"] .answer-box .btn:after,
		[exercise="3"] .answer-box .btn:after {
			content: '';
			top: 6px;
			left: 6px;
			right: 6px;
			bottom: 6px;
			position: absolute;
			/*background-color: rgba(255,255,255,1);*/
			background-size: 80%;
			border-radius: 10px;
			/*border: 2px solid #000;*/
			opacity: 1;
			transition: all .3s;
		}
	[exercise="4"] .answer-box .btn.on-select {
		transition: all .3s;
		transform: rotateX(0deg);
		animation: btn-rotate .3s ease;
	}
		[exercise="4"] .answer-box .btn.on-select:after {
			display: none;
			opacity: 0;
		}
		[exercise="4"] .answer-box .btn.result-correct {
			transform: none;
			opacity: .5;
		}
			[exercise="4"] .answer-box .btn.result-correct:after,
			[exercise="2"] .answer-box .btn.result-correct:after,
			[exercise="3"] .answer-box .btn.result-correct:after {
				background-color: #005c4d;
				background-size: 60% !important;
			}
/* ================================================== */
[exercise="5"] .answer-box {
	display: inline-block;
	width: 25%;
}
	[exercise="5"] .answer-box img {
		width: 100%;
		height: auto;
		border-radius: 10px;
	}
	[exercise="5"] .answer-box .btn {
		padding: .3em .3em .3em .3em;
		border: none;
		margin-bottom: 0;
		position: relative;
		margin: 5px;
	}
		[exercise="5"] .result-correct:after {
			content: '';
			top: -6px;
			left: -6px;
			right: 3px;
			bottom: 3px;
			width: 1.2em;
			height: 1.2em;
			position: absolute;
			background-size: 60% !important;
			border-radius: 10px;
			background-color: #2044aa !important;
			/*background: linear-gradient(180deg, #3E67D9 0%, #3258C5 100%) !important;*/
			/*border: 2px solid #000;*/
			opacity: 1;
			transition: all .3s;
		}
		[exercise="5"] .result-incorrect:after {
			content: '';
			top: -6px;
			left: -6px;
			right: 3px;
			bottom: 3px;
			width: 1.2em;
			height: 1.2em;
			position: absolute;
			background-size: 60% !important;
			border-radius: 10px;
			background-color: #2044aa !important;
			/*background: linear-gradient(180deg, #3E67D9 0%, #3258C5 100%) !important;*/
			/*border: 2px solid #000;*/
			opacity: 1;
			transition: all .3s;
		}
	[exercise="5"] .formula {
		border-radius: 10px;
		display: inline-block;
		width: 50%;
		text-align: center;
	}
		.formula-wrapper {
			margin: 5px;
			/*border: 2px solid #000;*/
			border-radius: 10px;
			padding: 7px 0;
			padding-bottom: 7px;
			text-align: center;
			box-shadow: 0 0 0.3em rgb(0 0 0 / 40%);
		}
			.formula-wrapper > div {
				vertical-align: middle;
			}
		[exercise="5"] .formula+.formula {
			/*margin-top: .5em;*/
		}
		[exercise="5"] .formula img {
			width: 48px;
			height: auto;
			border-radius: 10px;
			vertical-align: middle;
		}
		.formula .symbol {
			display: inline-block;
			vertical-align: middle;
			font-size: 40px;
			font-weight: bold;
			padding: 0 10px;
		}

[exercise="6"] .formula-wrapper {
	box-shadow: none;
	font-size: 7vw;
}
	[exercise="6"] .formula-wrapper .symbol {
		font-size: 2.5em;
	}

.stick-box {
	display: inline-block;
	/*font-size: 2em;*/
	margin: .5em 0;
}
	.stick {
		border: .08em solid #fff;
		border-radius: .3em;
		box-shadow: 0 0 .1em rgba(0,0,0,.3);
		position: relative;
	}
	.stick.hor { 
		width: 1.5em;
		height: .5em;
		clear: both;
		margin: 0 .5em;
	}
	.stick.ver { width: .5em; height: 1.5em; }
	.stick.right { float: right; }
	.stick.left { float: left; }
	.stick.on-1 {
		/*background-color: #001fff;*/
		background-color: #fff;
		/*border-color: #4e39ff;*/
	}
	.stick.on-0 {
		opacity: .2;
	}
	.stick.on-select {
		border-color: #001fff;
		background-color: #001fff;
		opacity: 1;
	}
	/*[stick]:after {
		content: attr(stick);
		position: absolute;
		top: 0;
		left: 0px;
		font-size: 11px;
		text-align: center;
		width: 10px;
	}*/


.person-box {
	text-align: center;
	/*margin-top: -1.2em;*/
	margin-top: 1em;
}
	.person-box img {
		width: 70%;
		margin: 0 auto;
	}

/* ================================================== */
/* === RESULTS TABLE === */
/* ================================================== */
.table {
	display: table;
	width: 100%;
}
.table-row {
	display: table-row;
}
	.table-cell {
		display: table-cell;
		padding: .2em 0;
	}
	.table-top {
		font-style: italic;
		font-size: .7em;
	}
/* ================================================== */
.result-points {
	text-align: right;
}
	.table-row.my {
		color: #fbbf64;
	}

/* ================================================== */
/* === ANIMATIONS === */
/* ================================================== */
.question-data {
	margin-bottom: 1em;
}
.answers-title {
	margin-bottom: 1em;
}


/* ================================================== */
/* === ANIMATIONS === */
/* ================================================== */
@keyframes anim-append {
	0% {
		opacity: 0;
		transform: translateX(-40%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes btn-flip {
	0% {
		/*background-color: #fff;*/
		/*color: #000;*/
		transform: rotateX(0deg);
	}
	50% {
		/*background-color: #fff;*/
		/*color: #000;*/
		transform: rotateX(90deg);
	}
	100% {
		transform: rotateX(0deg);
		/*background-color: #000;*/
		/*color: #fff;*/
	}
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  /*opacity: 0;*/
  -webkit-transform: scale3d(.8, .8, .8);
  transform: scale3d(.8, .8, .8);
  }
  20% {
  -webkit-transform: scale3d(1.06, 1.06, 1.06);
  transform: scale3d(1.06, 1.06, 1.06);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  /*opacity: 1;*/
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  /*opacity: 1;*/
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
} 

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -.3em, 0);
  transform: translate3d(0, -.3em, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -.15em, 0);
  transform: translate3d(0, -.15em, 0);
  }
  90% { -webkit-transform: translate3d(0,-.05em,0); transform: translate3d(0,-.05em,0);
  }
  } 

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-3000px, 0, 0);
  transform: translate3d(-3000px, 0, 0);
  }
  60% {
  opacity: 1;
  -webkit-transform: translate3d(25px, 0, 0);
  transform: translate3d(25px, 0, 0);
  }
  75% {
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  }
  90% {
  -webkit-transform: translate3d(5px, 0, 0);
  transform: translate3d(5px, 0, 0);
  }
  100% {
  -webkit-transform: none;
  transform: none;
  }
} 

/* ================================================== */
/* === MESSAGES === */
/* ================================================== */
.messages {
	position: fixed;
	bottom: 4.5em;
	left: 1em;
	right: 1em;
	/*width: 100%;*/
	z-index: 9999;
}
	.messages h3 {
		margin-top: 0;
		margin-bottom: 0;
		text-align: left;
		font-weight: bold;
	}
	.messages .message {
		position: relative;
		left: 0;
		/*background-color: rgba(0, 139, 158, 0.9);*/
		background-color: #000;
		border-radius: 15px;
		padding: .8em 1em;
		box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,.5);
		color: #fff;
		margin-top: 1em;
	}
		.message.frozen {
			background-image: url(../images/frozen.png);
			background-position: center 100%;
			background-repeat: no-repeat;
			background-size: 100%;
			background-color: transparent;
		}
		.message.green { background-color: #42B449 }
		.message.red { background-color: #FF2525 }

		.message h1,
		.message h2,
		.message h3,
		.message h4,
		.message h5,
		.message h6 {
			margin-bottom: .3em;
		}
		.message b {
			color: #f2b665;
		}