.p-0 {
	padding: 0 !important;
}
.no-underline {
    text-decoration: none !important;
}
.no-underline:hover {
   text-decoration: none !important;
}

.navbar-text {
	text-decoration: none !important;
}
.navbar-text:hover{
	color:#fff;
}
@font-face {
	font-family: 'Luckiest Guy';
    src:url('../fonts/LuckiestGuy.ttf');
}

@font-face {
	font-family: 'Bree Serif';
    src:url('../fonts/BreeSerif-Regular.ttf');
}

@font-face {
	font-family: 'Roboto', sans-serif;
    src:url('../fonts/Roboto-Regular.ttf');
}

 .font-luckiest {
    font-family: 'Luckiest Guy';
    font-size: 2.5em;
}

.font-bree {
    font-family: 'Bree Serif';
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

@font-face {
    font-family: 'FontAwesome';
    font-weight: normal;
    font-style: normal;
}

.ico {
    font-family: 'FontAwesome';
}

body {
	background-image:url('../img/debut_light.jpg');
}

textarea {
	resize: none;
}

.navbar {
	margin-bottom: 0px;
}

.navbar-right {
	margin-left: 5px;
	margin-right: 5px;
}

.jumbotron {
	margin-top: 25px;
    background-image:url('../img/food.jpg');
    background-attachment:fixed;
   	margin-bottom: 20px;
   	padding-bottom: 2vmin;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.jumbo-header {
	font-size: 32px;
	text-overflow: ellipsis;
}

.jumbo-tagline {
	font-size: 1.2em;
	text-overflow: ellipsis;
}

.footer {
	margin-top: 2em;
	margin-bottom: 1em;
}

.img-small {
	max-height: 240px;
	border-radius: 10px;
}

.img-index {
	max-height: 150px;
	border-radius: 5px;
}

.show-problem{
	font-size: 1.5em;
}

#upload-file-info {
	font-size: 1em;
}

.index-points {
	font-size: 1.35em;
	padding-top: 4px;
	padding-bottom: 4px;
}

.panel-heading-index {
	height: auto;
	color: black;
}

.index-game-stats {
	font-size: 1em;
	color: #f8a91a;
	padding: 0;
	margin: 0;
}

.panel-body-index {
	margin:0;
	padding: 0;
	padding-bottom: 14px;
}

.privacy-rules {
	line-height: 200%;
}

.game-description {
	height:auto;
	font-size: 14px;
	margin:0;
	padding-top:0;
	padding-bottom:0;
	padding-left: 4px;
	padding-right: 4px;
}

.index-description {
	font-size: 14px;
	line-height: 18px;
	height: auto;
	padding-left: 8px;
	padding-right: 8px;
	word-wrap: break-word;
}

.promo-badge {
	float: none !important;
	margin-top: 7px;
	margin-left: auto;
	margin-right: auto;
	background: #f0386b;
	background: linear-gradient(0deg, rgba(240,56,107,1) 0%, rgba(240,56,203,1) 100%);
	padding: 4px 8px;
}

.promo-description {
	color: #f0386b;
	font-size: 12px;
	margin-top: 14px;
	padding-left: 8px;
	padding-right: 8px;
	word-wrap: break-word;
}

.qcard-image {
	width:100%;
	height: auto;
	margin:0;
    padding: 0;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.answer-image {
	opacity: 0;
	transition: opacity 0.2s;
}

.menu-header {
	border-radius: 9px 9px 0 0 !important;
	background-color:#0A91AB !important;
}

.ctrl-panel-text {
	font-family: 'Bree Serif';
	color: #fff;
	font-size: 1.4em;

}
.control-panel-header {
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	padding: .6em 0 .6em 0;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inline {
	display:inline;
}

.badge-danger {
	background-color: #d43f3a;
	font-size: 1.1em;
}

.badge-success {
	background-color: #34be38 ;
	font-size: 1.1em;
}

.badge-primary {
	background-color: #3173AD;
	font-size: 1.1em;
}

.badge-questions {
	background-color: #fff;
	color:#0A91AB;
	font-size: 1.0em;
	padding-top: 1px;
	padding-bottom: 1px;
}

.badge-thanks {
	background-color: #fff;
	color:#F0386B;
	font-size: 1.0em;
	padding-top: 1px;
	padding-bottom: 1px;
}

.badge-info {
    background-color: #6787A6;
    font-size: 1.0em;
	padding-top: 1px;
	padding-bottom: 1px;
}

.pad-right {
	padding-right: 0.8em;
}

.pad-right-mobile {
	margin-right: 0.6em;
}

.scrollable {
	overflow: auto;
	height:90px;
	width: 100%;
	vertical-align: middle;
}

.game-control-box {
	height: 55px;
}

.index-by {
	padding-top: 16px;
	padding-bottom: 0px;
	margin: 0;
	font-size: 0.84em;
}



.user-link {
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 1em;
}

.mid {
	vertical-align: middle;
}

.question-box {
	overflow: auto;
	height:90px;
	width: 100%;
	vertical-align: middle;
}

.imageless-question-box {
	overflow: auto;
	height:90px;
	width: 100%;
	vertical-align: middle;
}

.question-stats {
	font-size: 1em;
	color: #f8a91a;
}

.question-count {
	font-size: 1.0em;
}

hr {
	margin: 10px 0 10px 0;
}

alert {
	margin: 0;
}

.shaded {
	background-color: #F3F5F8;
	padding: 5px 15px 15px 15px;
	border-radius: 5px;
}

.non-shaded {
	padding: 5px 15px 15px 15px;
	border-radius: 5px;
}

.faded-heart {
	color: #f35f88;
}

.btn-defaulted {
    background: #8D98A2;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-defaulted:hover, .btn-defaulted:focus, .btn-defaulted:active, .btn-defaulted.active, .open > .dropdown-toggle.btn-defaulted {
    background: #65717c;
    color: #ffffff;
}

.btn-dangerous {
    background: #6d6479;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-dangerous:hover, .btn-dangerous:focus, .btn-dangerous:active, .btn-dangerous.active, .open > .dropdown-toggle.btn-dangerous {
    background: #575060;
    color: #ffffff;
}

.btn-successful {
    background: #FB4D3D;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-successful:hover, .btn-successful:focus, .btn-successful:active, .btn-successful.active, .open > .dropdown-toggle.btn-successful {
    background: #C83D30;
    color: #ffffff;
}

.btn-studied {
    background: #1C77C3;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-studied:hover, .btn-studied:focus, .btn-studied:active, .btn-studied.active, .open > .dropdown-toggle.btn-studied {
    background: #165f9c;
    color: #ffffff;
}

.btn-slideshow {
    background: #f0386b;
    color: #fff;
    transition:all 0.2s;
}
.btn-slideshow:hover, .btn-slideshow:focus, .btn-slideshow:active, .btn-slideshow.active, .open > .dropdown-toggle.btn-slideshow {
    background: #dd2e60;
    color: #fff;
}

.btn-class-shr {
	background: #8453db;
	color: #fff;
	transition:all 0.2s;
}
.btn-class-shr:hover, .btn-class-shr:focus, .btn-class-shr:active, .btn-class-shr.active, .open > .dropdown-toggle.btn-class-shr {
	background: #5c30ad;
	color: #fff;
}

.btn-infoed {
    background: #2EBE4E;
    color: #ffffff;
    transition:all 0.2s;

}
.btn-infoed:hover, .btn-infoed:focus, .btn-infoed:active, .btn-infoed.active, .open > .dropdown-toggle.btn-infoed {
    color: #ffffff;
}

.btn-primaryed {
    background: #0A91AB;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-primaryed:hover, .btn-primaryed:focus, .btn-primaryed:active, .btn-primaryed.active, .open > .dropdown-toggle.btn-primaryed {
    background: #087286;
    color: #ffffff;
}

.btn-plus {
    background: #f0386b;
    background: linear-gradient(0deg, rgba(240,56,107,1) 0%, rgba(240,56,203,1) 100%);
    color: #fff;
    transition:all 0.2s;
}
.btn-plus:hover, .btn-plus:focus, .btn-plus:active, .btn-plus.active, .open > .dropdown-toggle.btn-plus {
    background: #f0386b;
    background: linear-gradient(0deg, rgb(219, 53, 100) 0%, rgb(226, 50, 191) 100%);
    color: #fff;
}

.btn-pinked {
    background: #F0386B;
    color: #ffffff;
    transition:all 0.2s;
}
.btn-pinked:hover, .btn-pinked:focus, .btn-pinked:active, .btn-pinked.active, .open > .dropdown-toggle.btn-pinked {
    background: #D83260;
    color: #ffffff;
}

.btn-secondary {
    background-color: #ececec;
    color: #444;
    transition: all 0.2s;
}
@media (hover: hover) and (pointer: fine) {
	.btn-secondary:hover {
		background-color: #f8a91a;
		color: #fff;
	}
}
.panel {
    border:0;
}

.closeMed {
    font-size: 30px;
    line-height: 20px;
    outline:none;
}

.panel > .panel-heading {
    background-image: none;
    background-color: #6787A6;
    color: #fff;
    border: 0;
}

.yellow	{
	color:#FAC564;
}

.turq2 {
	color: #97c3cc;
}

.option-header {
	font-family: 'Bree Serif';
	background-color: greyl;
	font-size:1.5em;
	color: #444;
	padding-bottom: 8px;
}

.mode-image {
	height: 160px;
}

.panel-settings{
	background-image:url('../img/debut_light.jpg');
}

.panel-menus {
	border-radius: 9px;
	padding: 0;
	margin:0;
    border: 0;
	transition:all 0.2s;
}
.panel-menus:hover {
	box-shadow: 0 12px 14px 2px rgba(0, 0, 0, .16), 0 3px 24px 5px rgba(0, 0, 0, .16), 0 8px 10px -5px rgba(0, 0, 0, .24)
}

.panel-modes {
	cursor: pointer;
	border-radius: 1vmin;
	padding: 0;
	margin: 16px;
    border: 0;
	transition:all 0.2s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.panel-modes:hover {
	box-shadow: 0 12px 14px 2px rgba(0, 0, 0, .16), 0 3px 24px 5px rgba(0, 0, 0, .16), 0 8px 10px -5px rgba(0, 0, 0, .24)
}

.game-modes {
	margin-left: 16px;
	margin-right: 16px;
}

.game-modes-game {
	cursor: pointer;
	border-radius: 1vmin;
	padding: 4px;
    border: 0;
	transition:all 0.2s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.game-modes-game:hover {
	box-shadow: 0 12px 14px 2px rgba(0, 0, 0, .16), 0 3px 24px 5px rgba(0, 0, 0, .16), 0 8px 10px -5px rgba(0, 0, 0, .24)
}

.panel-options {
	cursor: default;
    position: relative;
	border-radius: 1vmin;
	padding: 8px;
	margin-left: 16px;
	margin-right: 16px;
    border: 0;
	transition:all 0.2s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.panel-options:hover {
	box-shadow: 0 12px 14px 2px rgba(0, 0, 0, .16), 0 3px 24px 5px rgba(0, 0, 0, .16), 0 8px 10px -5px rgba(0, 0, 0, .24)
}

.mode-opt-btn {
	outline: none;
	background-color: transparent;
	color: #0a91ab;
	border: 5px solid transparent;
	border-radius: 16px;
	padding: 6px 18px 6px 18px;
	font-size: 1.4em;
	font-family: 'Bree Serif';
	transition: all 0.2s;
}

.mode-opt-active {
	transition: all 0.2s;
	border: 5px solid #FAC564;
	color: #0A91AB;
	box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .1), 0 3px 1px 0px rgba(0, 0, 0, .1), 0 3px 1px 0 rgba(0, 0, 0, .14) inset;
}

.game-option-disabled {
	color: #bdbdbd !important;
}
.game-option-disabled:hover {
	background-color: #fff !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

.panel-game {
	border-radius: 3px;
	padding: 0;
	margin:0;
    border: 0;
	transition:all 0.3s;
}
.panel-game:hover {
	box-shadow: 0 12px 14px 2px rgba(0, 0, 0, .14), 0 3px 24px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

#btn-game-options {
	color: #fff;
	font-size: 1.3em;
	background-color: #ff686b;
	font-family: 'Bree Serif';
	outline: 0;
	border-radius: .5vmin;
	box-shadow: 0px 5px 0px #b95e60;
	transition: all 0.2s;
	margin: 0px 5px 15px 5px;
}
#btn-game-options:hover {
	color: #fff;
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	-o-transform: translateY(5px);
	-ms-transform: translateY(5px);
	box-shadow: 0px 0px 0px #b95e60;
}

#btn-powerups {
	color: #fff;
	font-size: 1.3em;
	background-color: #ff686b;
	font-family: 'Bree Serif';
	outline: 0;
	border-radius: .5vmin;
	box-shadow: 0px 5px 0px #b95e60;
	transition: all 0.2s;
	margin: 0px 5px 15px 5px;
}
#btn-powerups:hover {
	color: #fff;
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	-o-transform: translateY(5px);
	-ms-transform: translateY(5px);
	box-shadow: 0px 0px 0px #b95e60;
}

#btn-themes {
	color: #fff;
	font-size: 1.3em;
	background-color: #ff686b;
	font-family: 'Bree Serif';
	outline: 0;
	border-radius: .5vmin;
	box-shadow: 0px 5px 0px #b95e60;
	transition: all 0.2s;
	margin: 0px 5px 15px 5px;
}
#btn-themes:hover {
	color: #fff;
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	-o-transform: translateY(5px);
	-ms-transform: translateY(5px);
	box-shadow: 0px 0px 0px #b95e60;
}

.game-option-selected {
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	-o-transform: translateY(5px);
	-ms-transform: translateY(5px);
	box-shadow: 0px 0px 0px #b95e60 !important;
}

.option-sub-label {
	font-size: 0.7em;
	color: #8D98A2;
	font-family: 'Bree Serif';
}

.box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.box-shadow--3dp {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
}
.box-shadow--4dp {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}
.box-shadow--6dp {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
.box-shadow--8dp {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.box-shadow--16dp {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

.index-game-settings {
	font-size: 1.2em;
	padding:0.25em;
	color: #c7c7c7;
}
.index-game-settings:hover {
	color: #0A91AB;
}

.label-default {
	background-color: #6787A6;
	color: #fff;
}

.pointer-cursor {
	cursor: pointer;
}

.label-privacy {
	cursor: default;
	font-family: 'Bree Serif';
	color: #fff;
	font-size: 0.95em;
	border-radius: 3px;
	padding: 2px 6px 4px 6px;
	margin: 1px;
}

.label-faded {
	background-color: #d6dfe7 !important;
}

.label-private {
	background-color: #FB4D3D;
}

.label-unlisted {
	background-color: #5d38f0;
}

.label-public {
	background-color: #2EBE4E;
}

.label-featured {
	background-color: #F0386B;
}

.has-images {
	color:#7ec7cf;
}

.has-question-with-sound {
	color:#00bed3;
}

.is-copied {
	color:#2bc96d;
	transition: all 0.2s;
}
.is-copied:hover,.is-copied:focus {
	color: #24ad5d;
}

.folder-attached {
	color:#0A91AB
}

.text-private {
	color: #FB4D3D;
}

.text-unlisted {
	color: #5d38f0;
}

.text-featured {
	color: #fac564;
}

.text-gotd {
    color: #F0386B;
}

.text-feature-game {
	color: #fac564;
	opacity: 0.6;
	transition: all 0.2s;
}
.text-feature-game:hover {
	color: #fac564;
	opacity: 1;
}

.list-group-item{
	border: 0px solid;
}

.page-header {
	margin-top: 0px;
	margin-bottom: 30px;
}
.alert-section {
	width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0 10px;
}
.alert-section ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.alert-section li::marker {
	content: none;
}
.alert-pink {
    background-image: none;
    background-color: #F0386B;
    color:#fff;
    font-size: 1.2em;
    border:0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding:10px 10px 10px 10px;
   	transition:all 0.2s;
}
.alert-pink:hover{
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}
.alert-pink li::marker {
	content: none;
}
.alert-success {
    background-image: none;
    background-color: #0A91AB;
    color:#fff;
    font-size: 1.2em;
    border:0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding:10px 10px 10px 10px;
   	transition:all 0.2s;
		text-align: center;
}
.alert-success:hover{
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}

.alert-danger {
    background-image: none;
    background-color: #FB4D3D;
    color:white;
    font-size: 1.2em;
    border:0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding:10px 10px 10px 10px;
   	transition:all 0.2s;
		 text-align: center;
}
.alert-danger:hover{
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}

.alert-info {
    background-image: none;
    background-color: #6787A6;
    color:white;
    font-size: 1.2em;
    border:0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding:10px 10px 10px 10px;
   	transition:all 0.2s;
}
.alert-info:hover{
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}

.grid-sizer {
	padding: 0 8px 16px 8px;

}

.grid-sizer-q {
	padding: 0 8px 16px 8px;

}

.grid {
  width:100%;
  padding:0;
  margin:0;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  float: left;
  margin-bottom: 0px;
  padding-bottom: 16px;
  padding-left:8px;
  padding-right:8px;
}

@media screen and (min-width: 0px) {
	.grid-sizer,.grid-item {
		width: 100%;
  }
}

@media screen and (min-width: 600px) {
	.grid-sizer,.grid-item {
		width: 50%;
  }
}

@media screen and (min-width: 900px) {
	.grid-sizer,.grid-item {
		width: 33.333%;
	}
}

@media screen and (min-width: 1200px) {
	.grid-sizer,.grid-item {
		width: 25%;
	}
}

@media screen and (min-width: 1500px) {
	.grid-sizer,.grid-item {
		width: 20%;
	}
}

@media screen and (min-width: 1800px) {
	.grid-sizer,.grid-item {
		width: 16.667%;
	}
}

@media screen and (min-width: 2100px) {
	.grid-sizer,.grid-item {
		width: 14.286%;
	}
}

@media screen and (min-width: 2400px) {
	.grid-sizer,.grid-item {
		width: 12.5%;
	}
}

@media screen and (min-width: 2700px) {
	.grid-sizer,.grid-item {
		width: 11.111%;
	}
}

@media screen and (min-width: 3000px) {
	.grid-sizer,.grid-item {
		width: 10%;
	}
}

@media screen and (min-width: 3300px) {
	.grid-sizer,.grid-item {
		width: 9.091%;
	}
}

@media screen and (min-width: 3600px) {
	.grid-sizer,.grid-item {
		width: 8.333%;
	}
}

@media screen and (min-width: 3900px) {
	.grid-sizer,.grid-item {
		width: 7.692%;
	}
}

.qcard-text, .gcard-text {
	font-size: 18px;
	word-wrap: break-word;
	padding: 6px;
}

.qcard-question, .gcard-title {
	color: #333;
	padding-top: 9px;
}

.qcard-answer {
	color: #0A91AB;
	opacity: 0;
	transition: opacity 0.2s;
}

.qcard-answer-multi {
	color: #0A91AB;
	opacity: 1;
	transition: opacity 0.2s;
}

.qcard-answer-multi-correct {
	color: #0A91AB;
	opacity: 1;
	transition: opacity 0.2s;
}

.qcard-points {
	font-size: 14px;
	color:#f8a91a;
}

.qcard-ellipsis {
	color: #a6aaaf;
    padding: 4px;
	outline:0;
}

.gcard-buttons, .fcard-buttons {
	padding-left:10px; 
	padding-right:10px; 
	margin: 12px 0 0 0; 
	font-size:1em; 
	color:#a6aaaf
}

.no-click {
	position: absolute;
	bottom: 0;
	left: 0;
	background: pink;
	width: 60px;
}

.gcard-ellipsis {
	color: #a6aaaf;
	outline:0;
	vertical-align: middle;
}

.qcard-ellipsis:hover {
	color: #0A91AB;
	outline:0;
	vertical-align: middle;
}
.qcard-ellipsis:active {
	outline:0;
}

.qeditor {
 	height: auto;
	min-height: 60px;
	border-radius: 6px;
	padding-bottom: 1px;
	margin-bottom: 20px;
	transition:all 0.2s;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.qeditor:hover {
	box-shadow: 0 7px 7px 0 rgba(0, 0, 0, .19), 0 8px 6px -2px rgba(0, 0, 0, .25), 0 5px 10px 0 rgba(0, 0, 0, .17);
}

.qeditor-text {
	word-wrap: break-word;
	margin-top: 6px;
}

.qeditor-problem {
	padding: 6px;
	margin-left: 3px;
	margin-right: 9px;
	margin-left: 6px;
}

.qeditor-solution {
	padding: 6px;
	color: #0A91AB;
}

.qeditor-text-with-image {
	min-height: 62px;
}

.qeditor-icon {
	color:#f8a91a;
	display: inline-block;
	margin-bottom: 6px;
}

.qeditor-points {
	outline: none;
}

.editor-dropdown {
	color: #f8a91a;
	border: 0;
    box-shadow: none;
}

.qeditor-edit {
	margin-right: 9px;
}

.qeditor-image {
	object-position: 50% 50%;
	object-fit: cover;
	padding: 0;
	position: absolute;
	top: 9px;
	right: 24px;
}

.qeditor-delete-btn {
	outline: none !important;
	border: 0;
	background-color:transparent;
	padding: 1px 6px;
	transition: all 0.2s;
}
.qeditor-delete-btn:hover {
	color: #0A91AB;
}

.qeditor-edit-a {
	color:#f8a91a;
	outline: none !important;
	border: 0;
	background-color: transparent;
	padding: 3px 6px;
}
.qeditor-edit-a:hover {
	color: #0A91AB;
}

@media screen and (min-width: 0px) {
	.qeditor-image {
		height: 25px;
		width: 30px;
		border-radius: 2px;
	}
	.qeditor-text, .qeditor-icon {
		font-size: 0.6em;
	}
	.qeditor-solution {
		margin-right: 21px;
	}
	.qrow2 {
		height: 27px;
	}
	.editor-dropdown {
		font-size: 8px;
	}
}

@media screen and (min-width: 300px) {
	.qeditor-image {
		height: 25px;
		width: 35px;
		border-radius: 2px;
	}
	.qeditor-text, .qeditor-icon {
		font-size: 0.7em;
	}
	.qeditor-solution {
		margin-right: 21px;
	}
	.qrow2 {
		height: 27px;
	}
	.editor-dropdown {
		font-size: 10px;
	}
}

@media screen and (min-width: 400px) {
	.qeditor-image {
		height: 35px;
		width: 40px;
		border-radius: 3px;
	}
	.qeditor-text, .qeditor-icon {
		font-size: .9em;
	}
	.qeditor-solution {
		margin-right: 18px;
	}
	.qrow2 {
		height: 33px;
	}
	.editor-dropdown {
		font-size: 12px;
	}
	.qeditor-points {
		margin: 3px 12px;
	}
}

@media screen and (min-width: 500px) {
	.qeditor-image {
		height: 55px;
		width: 60px;
		border-radius: 4px;
	}
	.qeditor-text {
		font-size: 1em;
	}
	.qeditor-icon {
		font-size: .9em;
	}
	.qeditor-solution {
		margin-right: 15px;
	}
	.qrow2 {
		height: 36px;
	}
	.editor-dropdown {
		font-size: 13px;
	}
	.qeditor-points {
		margin: 3px 12px;
	}
}

@media screen and (min-width: 600px) {
	.qeditor-image {
		height: 75px;
		width: 80px;
		border-radius: 4px;
	}
	.qeditor-text {
		font-size: 1.1em;
	}
	.qeditor-icon {
		font-size: .9em;
	}
	.qeditor-solution {
		margin-right: 15px;
	}
	.qrow2 {
		height: 36px;
	}
	.editor-dropdown {
		font-size: 14px;
	}
	.qeditor-points {
		margin: 3px 12px;
	}
}

.qrow1 {
	margin-left: 0px;
}

.qrow2 {
	margin: 5px 0 6px 0;
	cursor: default;
}

.qcol1 {
	padding:0;
}

.qcol2 {
	height: auto;
	padding:0;
}

.created {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
	background-color: #fff;
}

.followers {
	font-size: 0.9em;
	padding: 0;
	margin: 0;
	background-color: #fff;
}

.profile-link {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
	background-color: #fff;
}

.btn-link-d {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
	background-color: #fff !important;
	transition: 2s;
}
.btn-link-d:focus {
	outline: none !important;
	outline-width: 0;
}

.btn-link-p {
	color: #8D98A2;
	background-color: #fff !important;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	transition: .1s;
}
.btn-link-p:hover, .btn-link-p:focus, .btn-link-p:active, .btn-link-p.active, .open > .dropdown-toggle.btn-link-p {
    color: #5f6a75;
}

.btn-link-s {
	color: #f8a91a;
	background-color: #fff !important;
	font-size: 1.2em;
	padding: 0;
	margin: 0;
	transition: .2s;
}
.btn-link-s:hover, .btn-link-s:focus, .btn-link-s:active, .btn-link-s.active, .open > .dropdown-toggle.btn-link-s {
	color: #0A91AB;
}

.btn-link-t {
	color: #8D98A2;
	background-color: #fff !important;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

.helper-icon {
	color: #6787a6;
}

.panel-icon {
	font-size:1.2em;
	color:#F0386B;
	margin:.1em;
}


.btn-study-check {
	padding: 7px 21px;
	border-radius: 6px;
    background-color: #efefef  ;
    color: #6b6b6b;
    transition:all .2s;
}
.btn-study-check:hover, .btn-study-check:focus, .btn-study-check:active, .btn-study-check.active, .open > .dropdown-toggle.btn-study-check {
    background-color: #bfbfbf  ;
    color: #474747;
}


.btn-okay {
	padding-top: 7px;
    background-color: #2EBE4E;
    color: #fff;
    transition:all 0.2s;

}
.btn-okay:hover, .btn-okay:focus, .btn-okay:active, .btn-okay.active, .open > .dropdown-toggle.btn-okay {
    background-color: #269e41;
    color: #fff;
}


.btn-oops {
	padding-top: 7px;
    background-color: #FB4D3D;
    color: #fff;
    transition:all 0.2s;
}
.btn-oops:hover, .btn-oops:focus, .btn-oops:active, .btn-oops.active, .open > .dropdown-toggle.btn-oops {
    background-color: #C83D30;
    color: #fff;
}

.like-game, .follow-user {
	color: #F0386B !important;
}

.game_card-author {
    color:#a6aaaf;
    transition: all 0.1s;
}
.game_card-author:hover,.game_card-author:focus {
    color:#0A91AB;
}

.game-menu-link {
	font-size: 1em;
	margin-top: 13px;
    color:#a6aaaf;
    transition: all 0.1s;
}
.game-menu-link:hover {
    color:#0A91AB;
}

.game-menu-follow {
	font-size: 1em;
	margin-top: 13px;
    color:#a6aaaf;
    transition: all 0.1s;
}

@media (hover: hover) and (pointer: fine) {
	.game-menu-follow:hover {
		color:#D83260;
	}
}
.game-menu-following {
	font-size: 1em;
	margin-top: 13px;
    color:#F0386B;
    transition: all 0.1s;
}

@media (hover: hover) and (pointer: fine) {
	.game-menu-following:hover {
    	color:#D83260;
	}
}

.profile-menu-follow {
    color:#444;
}

.profile-menu-following {
    color:#F0386B !important;
    transition: all 0.2s;
}

@media (hover: hover) and (pointer: fine) {
	.profile-menu-following:hover {
		color:#FFF !important;
	}
}

.game-menu-created {
	cursor: default;
    font-size: 1em;
	color:#a6aaaf;
	margin-top: 13px;
}

#btn-copy-game {
	display: inline-block;
    width: 100%;
    text-align: left;
	color: #333;
	outline: none;
}

#btn-copy-game:hover {
	background-color: #f5f5f5;
}

.multi-solution {
	margin-top: 5px;
}

.multi-form-control {
	display: inline;
	width: 90%;
}

.sound-form-control {
	display: inline;
	/* width: 90%; */
}

.multi-icon-green	{
	color: #2EBE4E;
}

.multi-icon-red {
	color: #FB4D3D;
}

.display-inline {
	display: inline;
}

.fa-fw {
	width: 1.1em;
	font-size: 0.8em;
}

.bbzl-plus-badge {
	background: rgb(240,56,107);
	background: linear-gradient(0deg, rgba(240,56,107,1) 0%, rgba(240,56,203,1) 100%);
	font-weight: 500;
	padding: 4px 8px;
	transition: all 0.2s;
}

.classic-jr-badge {
	background: rgb(255,167,108);
	background: linear-gradient(180deg, rgba(255,167,108,1) 0%, rgba(232,103,43,1) 100%);
	font-weight: 500;
	padding: 4px 8px;
	transition: all 0.2s;
}

.spinner-border{
	width: 100px;
	height: 100px;
	border-radius: 100%;
	position: relative;
	margin: 0 auto;
}

/* fix search fields alignment */
.select2,
.select2-container,
.select2-container--default {
    position: relative;
    width: 100% !important;
}

.sr-only-container > select {
    padding: 6px 16px 6px 4px;
}

#sr-only:before, #sr-only:after{
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border: 10px solid transparent;
	border-top-color: #3498db;
}

#sr-only:before{
	z-index: 100;
	animation: spin 1s infinite;
}

#sr-only:after{
	border: 10px solid #ccc;
}

@keyframes spin{
	0%{
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100%{
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


	.social-container a,
    .social-container a:hover,
    .social-container a:focus,
    .social-container a:active {
        text-decoration: none;
        color: #fff;
    }

    .social-container {
        display: flex;
        flex-flow: row wrap;
        box-sizing: border-box;
    }

    .social {
        padding: 8px 16px;
        margin: 0 2px 5px;
        border-radius: 10px;
        font-size: 1.8rem;
        font-family:'Bree Serif', sans-serif;
        transition: all .2s ease-in-out;
        -webkit-transition:all .2s ease-in-out;
        -moz-transition:all .2s ease-in-out;
        -ms-transition:all .2s ease-in-out;
        -o-transition:all .2s ease-in-out;
    }

    .social:hover {
        transform: translateY(-3px);
    }

    .social-title {
        margin-left: 5px;
        font-size: 0.68em;
        position: relative;
        top: -2.3px;
		font-family:'Bree Serif', sans-serif;
    }

    @media only screen and (max-width: 980px) {
        .social {
            margin: 0 3px 5px;
        }

        .social-title {
            display: none;
        }
    }

    textarea.form-control {
    height: 34px;
}


section#checkbox-form {
    height: 217px;
    min-height: 217px;
    resize: vertical;
    overflow: auto;
}

/* Checkbox Custom Style */
.checkbox-container {
    display: block;
    position: relative;
    margin-bottom: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-container:first-child {
    margin-top: 6px;
}

.checkbox-container:last-child {
    margin-bottom: 0;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid black;
    cursor: pointer;
}

.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #fac663;
    border: none;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkbox-label {
    padding-left: 30px;
    cursor: pointer;
}

.user-settings {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.settings-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 4rem;
    padding: 0 10px 10px;
}

.field-container {
    width: 75%;
}

.btn-sub {
    font-size: 1.96rem;
    border-radius: 8px;
    width: 200px;
    height: 47px;
    border-radius: 4px;
}

.folder-checkbox:disabled +span {
    background-color: lightgrey;
}

.btn-folder-select,
.btn-questions-select {
	font-size: 12px;
    margin: 2px;
    padding: 2px 6px;
    background: #0A91AB;
    color: #fff;
	outline: none !important;
	transition: all 0.2s;
}
.btn-folder-select:hover,
.btn-folder-select:focus,
.btn-folder-select:active,
.btn-folder-select.active,
.btn-questions-select:hover,
.btn-questions-select:focus,
.btn-questions-select:active,
.btn-questions-select.active,
.open > .dropdown-toggle.btn-folder-select {
	color: #fff;
	background: #087286;
}

.new-password-btn:hover,
.new-password-btn:focus,
.new-password-btn:active {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)) !important;
}

.cancel-profile-btn:hover,
.cancel-profile-btn:focus,
.cancel-profile-btn:active {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)) !important;
}

@media only screen and (max-width: 768px) and (min-width: 0) {
    .field-container {
        width: 100%;
    }

    .game-settings-modal {
        padding-top: 9vmin !important;
    }

    .panel-modes {
        margin: 9px !important;
    }

    .panel-options {
        margin: 0 9px 9px;
    }

    .game-modes-game {
        margin: 0 0 9px;
    }

    div.game-modes div.col-sm-4 {
        padding: 0 9px;
    }
}

@media only screen and (max-width: 576px) {
	.alert-section {
		padding: 0;
		margin: auto;
        width: 100%;
	}

    .user-settings {
        margin: auto;
        width: 100%;
    }

    .settings-wrapper {
        padding: 0;
    }

    .game-settings-modal {
        padding-top: 14vmin !important;
    }

    .mode-opt-btn,
    .option-header,
    #btn-game-options {
        font-size: 1.2em !important;
    }
}

@media only screen and (max-width: 368px) {
    .jumbo-header {
        font-size: 2.6rem;
    }

    .panel-header {
        font-size: 1.3rem !important;
        line-height: 28px !important;
    }

    .btn-sub {
        font-size: 1.8rem;
        width: 188px;
        height: 44px;
    }
}

.btn-editor-inactive {
	background: #8d98a2;
	color: #fff !important;
	outline: none !important;
	transition:all 0.2s;
	font-size: .9em;
	padding: 4px 8px;
	margin: 3px;
}
.btn-editor-inactive:hover {
	background: #65717c;
}

.btn-editor-active {
	background: #0A91AB;
	color: #fff !important;
	outline: none !important;
	transition:all 0.2s;
	font-size: .9em;
	padding: 4px 8px;
	margin: 3px;
}
.btn-editor-active:hover {
	background: #087286;
}

.btn-delete-game {
	background:#FB4D3D;
	color: #fff !important;
	outline: none !important;
	transition:all 0.2s;
	font-size: .9em;
	padding: 4px 8px;
	margin: 3px;
}
.btn-delete-game:hover {
	background: #C83D30;
}

.btn-delete-question {
	background:#FB4D3D;
	color: #fff !important;
	outline: none !important;
	transition:all 0.2s;
}
.btn-delete-question:hover {
	background: #C83D30;
}

.q-update {
	position: absolute;
	right: 5px;
	bottom: 21px;
	color: #2EBE4E;
	opacity: 0;
	transition: opacity 0.2s;
}

.game-option {
	height: auto;
	min-height: 80px;
	margin: 5px;
	border-radius: 6px;
	padding-bottom: 1px;
	margin-bottom: 10px;
	transition:all 0.2s;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.game-option:hover {
	box-shadow: 0 7px 7px 0 rgba(0, 0, 0, .19), 0 8px 6px -2px rgba(0, 0, 0, .25), 0 5px 10px 0 rgba(0, 0, 0, .17);
}

.option-text {
	float: left;
	text-align: left;
}

.option-title {
	font-family: 'Bree Serif';
	color: #444;
}

.option-description {
	font-family: 'Bree Serif';
	color: #9e9e9e;
}


@media screen and (min-width: 0px) {
	.option-title {
		margin-top: 20px;
		font-size: 1em;
		line-height: 1.5em;
	}
	.option-description {
		font-size: 0.8em;
	}
	.option-icon {
		float: left;
		height: 30px;
		margin: 25px 10px;
	}
	.option-switch {
		margin-right: 10px;
	}
	.switch {
		height: 24px;
		width: 40px;
		margin-top: 28px;
	}
	.slider {
		border-radius: 24px;
	}
	.slider:before {
		height: 16px;
		width: 16px;
	}
	input:checked + .slider:before {
		-webkit-transform: translateX(16px);
		-ms-transform: translateX(16px);
		transform: translateX(16px);
	}
	.input-number {
		margin-top: 3px;
	}
}

@media screen and (min-width: 500px) {
	.option-title {
		margin-top: 17px;
		font-size: 1.2em;
		line-height: 1.6em;
	}
	.option-description {
		font-size: 0.9em;
	}
	.option-icon {
		float: left;
		height: 40px;
		margin: 20px 10px;
	}
	.option-switch {
		margin-right: 15px;
	}
	.switch {
		height: 29px;
		width: 45px;
		margin-top: 28px;
	}
	.slider {
		border-radius: 29px;
	}
	.slider:before {
		height: 21px;
		width: 21px;
	}
	input:checked + .slider:before {
		-webkit-transform: translateX(16px);
		-ms-transform: translateX(16px);
		transform: translateX(16px);
	}
	.input-number {
		margin-top: 8px;
	}
}

@media screen and (min-width: 600px) {
	.option-title {
		margin-top: 9px;
		font-size: 1.5em;
		line-height: 1.6em;
	}
	.option-description {
		font-size: 1em;
	}
	.option-icon {
		float: left;
		height: 60px;
		margin: 10px 20px;
	}
	.options-well {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.power-ups-well {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.themes-well {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.option-switch {
		margin-right: 20px;
	}
	.switch {
		height: 34px;
		width: 55px;
		margin-top: 23px;
	}
	.slider {
		border-radius: 34px;
	}
	.slider:before {
		height: 26px;
		width: 26px;
	}
	input:checked + .slider:before {
		-webkit-transform: translateX(21px);
		-ms-transform: translateX(21px);
		transform: translateX(21px);
	}
	.input-number {
		margin-top: 12px;
	}
}

.option-switch {
	float: right;
	margin-bottom: 5px;
}

.switch {
	position: relative;
	display: inline-block;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #fac564;
}

input:focus + .slider {
	box-shadow: 0 0 1px #fac564;
}

.options-well {
	height: 380px;
	overflow-y: scroll;
	padding: 6px;
	background-image:url('../img/debut_light.jpg');
}

.power-ups-well {
	height: 380px;
	overflow-y: scroll;
	padding: 6px;
	background-image:url('../img/debut_light.jpg');
}

.themes-well {
	height: 380px;
	overflow-y: scroll;
	padding: 6px;
	background-image:url('../img/debut_light.jpg');
}

.input-number {
	color: #0a91ab;
	font-size: 1.4em;
	font-family: "Bree Serif";
	border: 0;
	border-radius: 6px;
	width: 55px;
	outline: none;
	vertical-align: middle;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	opacity:0;
	cursor: pointer;
	transition: all 0.4s;
	margin-right: 10px;
}

.search-dropdown {
	margin-top: 7px; 
	width: 100% !important;
}

.lib-header {
	border-radius: 9px 9px 0 0 !important;
}

.lib-btn {
	font-size: 1.2em; 
	margin-bottom: 0; 
	border-radius:8px;
	transition: all 0.2s;
	color: #333;
	background: #ececec;
}
.lib-btn:hover {
	background: #dbdbdb;
}

.lib-btn-active {
	color: #fff !important;
	background: #f8a91a !important;
}
.lib-btn-active:hover {
	background: #eca219 !important;
}

.btns-new-container {
	padding-bottom: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

.btns-new {
	font-size: 1.2em;
	margin-top: 5px;
	width: 49%;
}

@media only screen and (max-width: 356px) {
	.btns-new-container {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.btns-new {
		width: 100%;
	}
}

.noUi-tooltip {
	display: none !important;
}
.noUi-active .noUi-tooltip {
	display: block !important;
}
.noUi-handle .noUi-horizontal {
	cursor: ew-resize !important;
}
#questionsSlider .noUi-tooltip {
	bottom: unset !important;
}
#setPointsId .noUi-tooltip {
	bottom: -150%;
	display: block !important;
}
.noUi-target {
	direction: unset !important;
}
.noUi-handle {
	background: #0A91AB !important;
	box-shadow: none !important;
	cursor: ew-resize !important;
}

.hide-break-line,
.hide-profile-pic,
.hide-web-icon {
	display: none;
}

.show-break-line,
.show-profile-pic,
.show-web-icon {
	display: block;
}

.loc-web-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.profile-image {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin: auto;
	display: block;
}

.profile-name {
	font-size: 3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bio-description {
	overflow-wrap: break-word;
}

.share-profile,
.edit-profile {
	outline: none;
}

.share-profile {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.profile-text {
	font-size: 14px;
	line-height: 18px;
	height: auto;
	padding-left: 8px;
	padding-right: 8px;
	word-wrap: break-word;
}

.game-cover {
	width:100%;
	margin:0;
    padding: 0;
} 

.btn-remove {
	padding: 8px 50px 4px 50px;
	border-radius: 6px;
    background-color: #fff;
    color: #e4e4e4;
    transition:all .2s;
}
.btn-remove:hover, .btn-remove:focus, .btn-remove:active, .btn-remove.active, .open > .dropdown-toggle.btn-remove {
    background-color: #ececec;
    color: #444;
}

.btn-new-folder {
    color: #0A91AB;
    background: #fff;
    transition:all 0.2s;
    border: solid 2px #fff;
    border-radius: 30px;
}
.btn-new-folder:hover, .btn-new-folder:focus, .btn-new-folder:active, .btn-new-folder.active, .open > .dropdown-toggle.btn-new-folder {
    color: #087286 !important;
    background: #fff !important;
    border: solid 2px #087286;
}

.btn-sort {
	font-family: 'Bree Serif';
	color: #a6aaaf;
	font-size: 0.95em;
}
.btn-sort:hover, .btn-sort:focus, .btn-sort:active, .btn-sort.active, .open > .dropdown-toggle.btn-sort {
	color: #0A91AB;
	box-shadow: none;
}

.btn-template
{
	font-size:1.2em; 
	margin-top:15px; 
	margin-bottom:0; 
	outline: none; 
	border-radius:8px;
}

.restore-game-form {
	display: contents;
}

.history-delete-group-btn {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin-top: 5px;
}

.history-delete-group-btn a:first-child {
	border-radius: 8px 0 0 8px;
	font-size: 1em;
}

.history-delete-group-btn a:last-child {
	border-radius: 0 8px 8px 0;
	font-size: 1em;
}

/*context-menus*/
.context-menus{
	cursor: pointer;
	position: relative;
}
.context-menus-lists{
	display: none;
	position: absolute;
	right: 0;
	width: auto;
	top: 15px;
	z-index: 1;
	background: #fff;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.context-menus-lists .btn{
	background-color: transparent;
	color: #333;
	text-align: left;
	padding: 2px 10px;
	border-radius: 0;
}
.context-menus-lists .btn:hover{
	background-color: #e8e8e8;
}
.context-menus-lists .btn-menu-delete{
	color: #F0386B;
}
.context-menus:hover .context-menus-lists{
	display: block;
}
.button-group-secondary>.btn-group:first-child:not(:last-child)>.btn{
	border-top-left-radius:8px; 
	border-bottom-left-radius:8px; 
	border-top-right-radius:0; 
	border-bottom-right-radius:0; 
	outline:none;
}

/* drag reorder */ 
.question-container .question-item .drag-icon:hover { 
	color: #0A91AB;
} 
.question-container .question-item .drag-icon { 
	color:#f8a91a;
	outline: none !important;
	border: 0;
	background-color: transparent;
	padding: 3px 6px;
	cursor: pointer;
} 
.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* show more-less button on game view */
.btn-class-more {
	cursor: pointer;
	font-size: 1.2em;
	margin-bottom: 0;
	border-radius: 8px;
	padding: 2px 38px;
	color: #fff;
	background: #0991AB;
	text-decoration: none;
	transition: all 0.2s;
	font-family: 'Bree Serif';
}
.btn-class-more:hover {
	background: #087286;
	color: #fff;
}
.hidden-game-view {
	margin-bottom: 22px;
	overflow: hidden;
}
.fixed-button {
	position: fixed;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	z-index: 1000;
}
/* Styles for iPad (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.hidden-game-view {
		margin-bottom: 26px;
	}
	.btn-class-more {
		font-size: 12px !important;
	}
}

/* Styles for iPad (portrait and landscape) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	.btn-class-more {
		font-size: 1.1em !important;
	}
}

/* Styles for mobile devices (portrait and landscape) */
@media only screen and (max-width: 767px) {
}
/* Styles for iPhone 6/7/8 (portrait and landscape) */
@media only screen and (min-width: 375px) and (max-width: 667px) {
	.btn-class-more {
		font-size: 1.1em !important;
	}
}
.hidden {
	display: none;
}
.btn-class-more {
	cursor: pointer;
	font-size:1.2em; 
	margin-bottom:0;
	border-radius:8px;
}
/* Styles for Samsung Galaxy S8/S9/S10 (portrait and landscape) */
@media only screen and (min-width: 360px) and (max-width: 412px) {
	.btn-class-more {
		font-size: 1.1em !important;
	}
}

/* Class pin section */
.button-container {
	display: flex;
	gap: 10px; /* Adjust the gap as needed */
}
.button-container .btn {
	margin: 0; /* Remove any default margin */
}

.verification-link:hover,
.verification-link:active,
.verification-link:visited,
.verification-link.clicked {
	color:inherit;
	text-decoration: underline;
}
.swal-height {
	height: 67vh !important;
}
.right-button-actions-modal {
	justify-content: flex-end !important;
}
/* Styles for iPhone 6/7/8 (portrait and landscape) */
@media only screen and (max-width: 767px) {
	.navbar-nav #batch-editor-id .dropdown-menu {
		position: absolute;
		float: left;
		background-color: #fff !important;
		border: 1px solid rgba(0,0,0,.15);
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
	}
	
	#question-form #right-menu-desktop {
		margin: 0px -15px !important;
	}
}

/* fix buttons for edit batch match same with save button on left */
#question-form #right-menu-desktop {
	margin: 0px;
}

/* add css for all popup same size */
.swal2-popup {
	width: 600px !important; 
	font-size: 13px !important;
}

.error-modal-popup .swal2-content .swal2-html-container {
	text-align: center;
}

.custom-pause-subscription .swal2-content .swal2-html-container {
	text-align: left;
}

/* set common size for gif-modal */
.gif-modal.swal2-modal {
	width: 32em !important;
	height: 20em;
	font-size: 1.5rem !important;
}

.custom-pause-subscription .swal2-content li {
	line-height: 1.7;
}

.swal2-content .swal2-html-container label[for="selected_questions[]"] {
	text-align: left;
	display: block;
}

.verification-link:hover,
.verification-link:active,
.verification-link:visited,
.verification-link.clicked {
	color:inherit;
	text-decoration: underline;
}
@media only screen and (min-width: 1024px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 40px;
	}
}

.swal2-content .swal2-html-container label[for="selected_questions[]"] {
	text-align: left;
	display: block;
}

/* Styles for iPad (portrait and landscape) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 60px;
	}
}

/* Styles for iPhone 6/7/8 (portrait and landscape) */
@media only screen and (min-width: 375px) and (max-width: 667px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 60px;
	}
}
#classPinTable {
	overflow-y: auto;
	scrollbar-width: thin;
	margin-bottom: 15px;
}

@media only screen and (min-width: 1024px) {
	#classPinTable table {
		table-layout: fixed;
	}
	
	#classPinTable .table th, .table td {
		overflow: hidden;
		white-space: normal;
		word-wrap: break-word;
	}

	#classPinTable table th:last-child {
    width: 155px; /* Đặt chiều rộng tối thiểu cho cột chứa nút */
    white-space: nowrap; /* Không cho nội dung xuống dòng */
	}

	#classPinTable table th.small-col {
    min-width: 66px;
		width: 12%;
	}

	#pauseSubscriptionForm input[name="pauseSubscriptionUntil"] {
		line-height: initial;
	}
}

@media only screen and (min-width: 1024px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 40px;
	}
}

/* Styles for iPad (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 60px;
	}
}

/* Styles for iPad (portrait and landscape) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 60px;
	}
}

/* Styles for iPhone 6/7/8 (portrait and landscape) */
@media only screen and (min-width: 375px) and (max-width: 667px) {
	#collapseAdvancedSearch #filterOptions {
		text-align: left;
		margin-left: 60px;
	}
}

/* Ad Container Styles */
.ad-container {
	display: block;
	clear: both;
	margin: 0 auto;
	text-align: center;
	position: relative;
  }
  
  .header-ad {
	margin: 0px auto 0px;
	max-width: 80%;
	min-height: 90px;
	background-color: transparent;
  }
  
  .footer-ad {
	margin: 10px auto 10px;
	max-width: 80%;
	background-color: transparent;
  }
  
  .sidebar-ad {
	margin-top: 15px;
	border-radius: 9px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	min-height: 280px;
  }

  .floating-sidebar-ad-left {
	max-width: 300px;
  }

  .floating-sidebar-ad-right {
	max-width: 300px;
  }
  
  /* Responsive adjustments */
  @media screen and (max-width: 768px) {
	.header-ad {
	  max-width: 100%;
	  padding: 10px;
	  min-height: 100px; /* Slightly smaller on mobile */
	}
  }
  
  /* Ensure grid-item containing sidebar ads has proper sizing */
  .grid-item .sidebar-ad {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
  }

.grid-item--height-xl { 
  height: 100vh; /* Full viewport height */
  max-height: 1200px; /* Set a reasonable maximum */
}

.modal-study-review {
  width: 1200px;
  margin-left: auto;
  margin-right: 0;
}

/* Large desktops */
@media (min-width: 1600px) {
  .modal-study-review {
    margin-left: 30%;
    margin-right: 0;
  }
}

/* Laptops and standard desktops */
@media (min-width: 1024px) and (max-width: 1599px) {
  .modal-study-review {
    width: 1000px;
    margin-left: 30%;
    margin-right: 0;
  }
}

/* Tablets (iPad) */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal-study-review {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile phones */
@media (max-width: 767px) {
  .modal-study-review {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  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);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  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);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    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);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    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);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
.introjs-arrow.top-middle,
.introjs-arrow.top-right,
.introjs-arrow.top-left,
.introjs-arrow.top {
    border-bottom-color: #ffc675 !important;
}

.introjs-arrow.bottom-middle,
.introjs-arrow.bottom-left,
.introjs-arrow.bottom-right,
.introjs-arrow.bottom {
    border-top-color: #333 !important;
}

.introjs-arrow.right,
.introjs-arrow.right-top {
    border-left-color: #ffc675 !important;
}

.introjs-arrow.right-bottom {
    border-left-color: #333;
}

.introjs-arrow.left,
.introjs-arrow.left-top {
    border-right-color: #ffc675 !important;
}

.introjs-arrow.left-bottom {
    border-right-color: #333;
}

.introjs-tooltip {
    width: 300px;
    font-size: 1.6rem;
    border-radius: 11px;
    background-color: #333;
}

.introjs-tooltip-header {
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
    position: relative;
    display: block;
    margin-bottom: 10px;
    border-radius: 9px 9px 0 0;
    background-color: #ffc66d;
    border: 0 solid;
}

.introjs-tooltiptext {
    padding: 0 15px 15px;
    color: #d4d4d4;
}

.introjs-tooltipbuttons .introjs-button {
    background-color: #ffc66d;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-shadow: none;
    -webkit-appearance: button;
    touch-action: manipulation;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
}

.help-icon-intro {
    position: absolute;
    bottom: 1px;
    right: 5px;
}

.study-intro {
    bottom: 4px;
    right: 6px;
}

.game-preview-intro,
.game-settings-intro {
    position: unset !important;
    margin: 10px 18px 0 0;
}

.folder-preview-intro {
    position: unset !important;
    margin: 10px 15px 0 0;
}

.settings-preview-container {
    position: absolute;
    bottom: 8px;
    right: -8px;
}

.game-preview-tooltip {
    top: 182px !important;
}

.game-preview-highlight {
    height: 174px !important;
}


.howto-tooltip {
    left: 0;
    right: 0;
    margin: auto;
}

.howto-highlight {
    width: 400px !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
}

.teams-tooltip,
.questions-tooltip {
    top: 113px !important;
    left: 0;
    right: 0;
    margin: auto;
}

.teams-highlight,
.questions-highlight {
    width: 500px !important;
    height: 103px !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
}

.image-intro-tooltip {
    top: 134px !important ;
}

.image-intro-highlight {
    height: 70px !important;
    top: 306.969px !important;
}

.float-help-left {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    left: 35px;
    background: #2196f3;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    transition: all .2s;
    z-index: 9999;
    outline: 0;
    border: none;
}

.btn-editor-help,
.btn-create-help,
.btn-edit-game-help,
.btn-create-folder-help {
	background: #2196f3;
	color: #fff;
	transition:all 0.2s;
	outline: none;
	margin-bottom:10px;
	outline:none !important;
}

.btn-editor-help:hover,
.btn-editor-help:focus,
.btn-editor-help:active,
.btn-create-help:hover,
.btn-create-help:focus,
.btn-create-help:focus,
.btn-edit-game-help:hover,
.btn-edit-game-help:focus,
.btn-edit-game-help:focus,
.btn-create-folder-help:hover,
.btn-create-folder-help:focus,
.btn-create-folder-help:focus,
.btn-editor-help.active,
.open > .dropdown-toggle.btn-editor-help {
	background: #2196f3;
	color: #fff;
}

@media only screen and (max-width: 991px) {
    .image-intro-highlight {
        height: 90px !important;
    }

    .image-intro-tooltip {
        top: 152px!important;
    }
}

@media only screen and (max-width: 899px) {
    .solution-card-tooltip {
        left: -120px !important;
    }
}

@media only screen and (max-width: 768px) {
    .teams-highlight,
    .questions-highlight {
        width: 88% !important;
        left: -14px !important;
    }

    .image-intro-highlight {
        height: 119px!important;
        top: 431.969px!important;
    }

    .image-intro-tooltip {
        top: 261px!important;
    }

    .question-card-tooltip {
        left: -17px !important;
    }

    .image-options-tooltip {
        right: 0 !important;
    }

    div.image-options-tooltip > div.introjs-arrow.top,
    div.image-options-tooltip > div.introjs-arrow.top-middle {
        left: 75% !important;
    }
}

@media only screen and (max-width: 600px) {
    .btn-save-tooltip,
    .btn-copy-tooltip {
        left: -156px !important;
    }

    div.btn-save-tooltip > div.introjs-arrow.top-middle,
    div.btn-copy-tooltip > div.introjs-arrow.top-middle {
        left: 75% !important;
    }

    div.solution-card-tooltip > div.introjs-arrow.top {
        left: 50%;
    }

    .question-card-tooltip {
        left: 0 !important;
    }

    .total-preview-folder-tooltip {
        left: -94px !important;
    }

    div.total-preview-folder-tooltip > div.introjs-arrow.top {
        left: 50%;
    }

    .toggleLike-tooltip,
    .unlock-bbzl-tooltip {
        right: 0 !important;
    }

    div.toggleLike-tooltip > div.introjs-arrow.top-middle,
    div.unlock-bbzl-tooltip > div.introjs-arrow.top-middle {
        left: 90%;
    }
}

@media only screen and (max-width: 564px) {
    .bootstrap-switch-tooltip {
        left: -86px !important;
    }

    div.bootstrap-switch-tooltip > div.introjs-arrow.top {
        left: 50% !important;
        right: 50% !important;
    }
    
    .btn-copy-tooltip {
        left: -189px !important;
    }

    div.btn-copy-tooltip > div.introjs-arrow.top-right {
        right: 21% !important;
    }

    .game-options-tooltip {
        left: -87px !important;
    }

    div.game-options-tooltip > div.introjs-arrow.top-right,
    div.game-options-tooltip > div.introjs-arrow.top {
        left: 50% !important;
    }

    .correct-answers-tooltip {
        left: -106px !important;
    }

    div.correct-answers-tooltip > div.introjs-arrow.top {
        left: 50% !important;
    }

    .select-all-tooltip {
        top: 48px;
        right: 0;
    }

    div.select-all-tooltip > div.introjs-arrow.right {
        display: none !important;
    }

    div.select-all-tooltip > div.introjs-arrow.top-middle {
        display: inherit !important;
        left: 90% !important;
    }
}

@media only screen and (max-width: 451px) {
    .btn-like-tooltip {
        left: -50px !important;
    }

    div.btn-like-tooltip > div.introjs-arrow.top-middle,
    div.btn-like-tooltip > div.introjs-arrow.bottom-middle {
        left: 34% !important;
    }
}

@media only screen and (max-width: 415px) {
    .image-intro-highlight {
        height: 140px!important;
        top: 416.969px!important;
    }

    .image-intro-tooltip {
        top: 276px!important;
    }

    .btn-save-tooltip {
        left: -146px !important;
    }

    .btn-copy-tooltip {
        left: -210px !important;
    }

    div.btn-save-tooltip > div.introjs-arrow.bottom-middle,
    div.btn-save-tooltip > div.introjs-arrow.top-middle {
        left: 65% !important;;
    }

    div.btn-copy-tooltip > div.introjs-arrow.top-middle {
        left: 86% !important;;
    }
}

@media only screen and (max-width: 411px) {
    .btn-like-tooltip {
        left: -60px !important;
    }

    .btn-close-slide-tooltip,
    .btn-fullscreen-slide-tooltip,
    .btn-text-slide-tooltip,
    .btn-image-slide-tooltip {
        right: 0 !important;
    }

    div.btn-close-slide-tooltip > div.introjs-arrow.top-middle,
    div.btn-fullscreen-slide-tooltip > div.introjs-arrow.top-middle,
    div.btn-text-slide-tooltip > div.introjs-arrow.top-middle,
    div.btn-image-slide-tooltip > div.introjs-arrow.top-middle {
        left: 92% !important;;
    }

    .slideshow-card-tooltip {
        left: -10px !important;
    }

    .next-slide-tooltip {
        right: 0 !important;
    }

    div.next-slide-tooltip > div.introjs-arrow.top-middle {
        left: 90% !important;;
    }

    .top-news-icon-tooltip {
        left: -80px !important;
    }

    div.top-news-icon-tooltip > div.introjs-arrow.top-middle {
        left: 37%!important;
    }

    .top-menu-icon-tooltip {
        right: 0 !important;
    }

    div.top-menu-icon-tooltip > div.introjs-arrow.top-middle {
        left: 90% !important;
    }
}

@media only screen and (max-width: 369px) {
    .btn-copy-tooltip {
        left: -206px !important;
    }

    div.btn-copy-tooltip > div.introjs-arrow.top-middle {
        left: 82% !important;;
    }

    .btn-like-tooltip {
        left: -83px !important;
    }

    div.btn-like-tooltip > div.introjs-arrow.top-middle {
        left: 38% !important;
    }

    .top-games-icon-tooltip {
        left: -34px !important;
    }

    div.top-games-icon-tooltip > div.introjs-arrow.top-middle {
        left: 20% !important;
    }

    .checkmark-tooltip {
        left: -10px;
    }

    div.checkmark-tooltip > div.introjs-arrow.top-middle {
        left: 8% !important;
    }
}

@media only screen and (max-width: 360px) {
    .search-input-tooltip {
        right: -24px !important;
        left: -24px !important;
    }

    .search-results-tooltip {
        left: -8px !important;
        right: -8px !important;
    }

    .search-questions-tooltip {
        left: -18px !important;
        right: -18px !important;
    }

    div.search-questions-tooltip > div.introjs-arrow.bottom-middle {
        left: 14% !important;
    }

    .search-privacy-tooltip {
        left: -52.4375px !important;
        right: -52.4375px !important;
    }

    div.search-privacy-tooltip > div.introjs-arrow.bottom-middle {
        left: 25% !important;
    }

    .search-likes-tooltip {
        left: -234px !important;
        right: -234px !important;
    }

    div.search-likes-tooltip > div.introjs-arrow.bottom-middle,
    div.search-likes-tooltip > div.introjs-arrow.top-middle {
        left: 90% !important;
    }

    .search-mylikes-tooltip {
        left: -246px !important;
        right: -246px !important;
    }

    div.search-mylikes-tooltip > div.introjs-arrow.top-middle {
        left: 90% !important;
    }

    .game-code-tooltip {
        left: -23px !important;
    }

    div.game-code-tooltip > div.introjs-arrow.top {
        left: 18% !important;
    }

    .game-preview-tooltip {
        left: -17px;
    }

    div.game-preview-tooltip > div.introjs-arrow.top-middle {
        left: 50% !important;
    }

    .btn-share-tooltip {
        left: -4px !important;
    }

    div.btn-share-tooltip > div.introjs-arrow.top-middle {
        left: 15% !important;
    }

    .game-author-tooltip {
        left: -15px !important;
    }

    div.game-author-tooltip > div.introjs-arrow.top-middle {
        left: 14% !important;
    }

    .teams-highlight {
        left: 0 !important;
    }

    .study-btns-tooltip {
        left: -11px !important;
    }

    div.study-btns-tooltip > div.introjs-arrow.top {
        left: 50% !important;
    }

    .prev-slide-tooltip {
        left: -15px !important;
    }

    div.prev-slide-tooltip > div.introjs-arrow.top-middle {
        left: 15% !important;
    }
}

@media only screen and (max-width: 321px) {
    .image-intro-highlight {
        top: 450.969px!important;
    }

    .btn-share-tooltip {
        left: -22px !important;
    }

    .btn-like-tooltip {
        left: -85px !important;
    }

    div.btn-like-tooltip > div.introjs-arrow.bottom-middle {
        left: 40%!important;
    }

    .howto-tooltip {
        left: -11px !important;
    }

    .teams-tooltip {
        left: -19px !important;
    }

    .question-card-tooltip {
        left: -10px !important;
    }

    .study-btns-tooltip {
        left: -22px !important;
    }

    .slideshow-card-tooltip {
        left: -24px !important;
    }

    .next-slide-tooltip {
        right: -15px !important;
    }
}
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}
/*
 * bootstrap-tagsinput v0.8.0
 * 
 */

.bootstrap-tagsinput {
  width:100%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/*
 * bootstrap-tagsinput v0.8.0
 * 
 */

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
}