/* resets */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	
	-webkit-user-select: none;
	   -moz-user-select: -moz-none;
	        user-select: none;
	
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
}

/* BOOTSTRAP: START
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  
  -webkit-user-select: none;
	   -moz-user-select: -moz-none;
	    -ms-user-select: none;
	 				user-select: none;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  -webkit-user-select: none;
	   -moz-user-select: -moz-none;
	    -ms-user-select: none;
	 				user-select: none;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  -webkit-touch-callout:none;
	-webkit-text-size-adjust:none;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}



input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/ BOOTSTRAP: END */






/* document */
html, body {
	width:100%;
	height:100%;
	margin:0px;
	background:#000
}
/*
	html {
	-webkit-content-zooming:none;
	-webkit-touch-action:pan-x pan-y;
	-moz-content-zooming:none;
	-moz-touch-action:pan-x pan-y;
	-ms-content-zooming:none;
	-ms-touch-action:pan-x pan-y;
	content-zooming:none;
	touch-action:pan-x pan-y;
}
*/
body {
	min-height:100%;
	padding:0px;
	font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
	font-size:12px;
	overflow:hidden;
	touch-action:none
}
optgroup, option {
	font-size:initial !important;
	color:black;
	background-color:white !important
}


/* native flex panel */
.panel {
	position:relative;
	overflow:hidden;
	
	display:-webkit-flex;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	
	/*justify-content:space-around;*/
	/*flex-flow:row wrap;*/
	
	-webkit-user-select:none;
	-moz-user-select:-moz-none;
	user-select:none;
}
.panel.inline {
	-webkit-box-orient:horizontal;
	flex-direction:row;
}
.panel.flex {
	-webkit-box-flex:1;
	flex:1;
}



/* pages */
.page {
	position:absolute;
	z-index:1;
	display:none;
	top:0;
	right:0;
	bottom:0;
	left:0;
	
	/*
	background-color:#E4E4E4;
	background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
	background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
	background-image:-moz-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
	background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4));
	background-repeat:no-repeat;
	*/
	
	background:rgb(0,0,0);
	
	/*
	background:rgb(0,0,0) url('images/logo-normal2.png') center calc(100% - 100px) no-repeat;
	background-size:90% auto;
	*/
	
	
	/*
	background:rgb(0,0,0) url('images/.png') center calc(100% - 75px) no-repeat;
	*/
}
.page.in,
.page.out,
.page[active] {
	display:flex;
}

/* helpers */
.hidden {display:none !important}
.left {float:left}
.right {float:right}
.clear {clear:both}
.top-right {position:absolute; top:17px; right:10px; background-color:#fff}
.hover .top-right {background-color:transparent}



/* style */
.debug {
	position:absolute;
	z-index:1;
	top:5px;
	left:188px;
	padding:6px 8px 3px 8px;
	text-align:center;
	color:#fff;
	font:17px arial;
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.75);
	text-decoration:none;
	border:1px solid transparent;
	outline:0 none transparent;
	background:transparent;
}
#menue, #suchen, #senden {
	position:absolute;
	z-index:3;
	right:4px;
	top:5px;
	width:56px;
	height:50px;
	border:0;
	outline:0 none transparent;
	background:url() center center no-repeat;
}
#suchen {
	right:70px;
	background-image:url('images/icon-search.png');
	-webkit-transform:scaleX(-1);
	transform:scaleX(-1);
}
#menue {
	font-size:43px;
	color:white;
	background-image:url('images/icon-menu.png')
}
#menue.offline {
	color:red;
	background-image:url('images/icon-menu-offline.png');
}
#senden {
	width:68px;
	left:260px;
	background:url('images/icon-envelope.png') center center no-repeat;
}
#debug:active, #debug.hover,
#menue:active, #menue.hover,
#suchen:active, #suchen.hover,
#senden:active, #senden.hover {
	background-color:#000;
	border:1px solid #fff;
}



#setup .form {
	text-align:center;
	margin-bottom:25px
}
#setup label > span {
	display:inline-block;
	width:200px;
	text-align:right;
	font-size:25px;
	color:#fff;
	margin:20px 15px 0 0;
}
#setup #kunde,
#setup #zugang {
	font-size:25px;
	padding:8px 8px 4px 8px;
	width:calc(100% - 228px);
}

#datenschutz_list {
	padding:25px 25px 35px;
	color:white;
	font-size:19px;
	text-align:left
}
#datenschutz_list h6 {
	color:#00C64A;
	font-size:19px;
	margin:0 0 10px 0
}
#datenschutz_list h5 {
	color:#00C64A;
	font-size:23px;
	margin:0 0 35px 0
}

#impressum table {
	margin:25px 25px 35px;
	color:white;
	font-size:19px
}
#impressum table td {
	vertical-align:top;
	padding-bottom:20px
}
#impressum table td b {
	color:#00C64A;
	white-space:nowrap
}
#impressum table td h6 {
	color:#00C64A;
	white-space:nowrap;
	font-size:19px;
	margin:0 0 10px 0
}
#impressum table td small {
	color:#ccc
}

#bemerkung {
	display:block;
	width:100%;
	height:80%;
	margin-top:20px;
	font-size:20px;
	padding:10px;
	color:#444;
}


.title-bar {
	border-bottom:3px solid #000;
	color:#fff;
	background:rgb(80,80,80) url('images/becker-schoell_icon144.png') 5px 10px no-repeat;
	background-size:40px;
	cursor:default;
}
.title-bar h1 {
	font-size:25px;
	font-weight:bold;
	margin:0 4px 0 34px;
	padding:17px 15px 13px 15px;
	overflow:visible;
	text-align:left;
	text-shadow:1px 1px 4px rgba(0, 0, 0, 0.75);
	opacity:1;
	-webkit-transition:opacity 140ms;
					transition:opacity 140ms;
}
.title-bar h1 small {
	margin-left:5px;
	/*font-size:0.8em;*/
	font-weight:normal;
}
.out .title-bar h1 {
	opacity:0;
}



.list {
	/*overflow-y:auto;*/
}
.list ul {
	/*display:table;*/
	list-style:none;
	margin:0px;
	padding:0px;
}
.list li {
	/*display:table-row;*/
	position:relative;
	cursor:default;
	padding:17px 10px 12px 15px;
	border-bottom:1px solid #ccc;
	font-size:17px;
	background-color:#fff;
	white-space:nowrap;
	/*box-shadow:4px 4px 15px rgba(0,0,0,.25);*/
	/*-webkit-transition:background-color 100ms;
					transition:background-color 100ms;*/
}
/*
.list li > b,
.list li > div {
	display:inline-block;
	text-overflow:ellipsis;
	padding-right:15px;
}
.list li > div.grey {
	color:#444;
}
.list li > b:first-child,
.list li > span:first-child {
	float:right;
	padding-right:0px;
}
*/
.list li > div {
	display:block;
	font-size:1.25em;
}
.list li > div:first-child {
	margin-bottom:5px;
	font-size:1.4em;
	overflow:hidden;
	text-overflow:ellipsis;
}
.list li > div > div {
	display:inline-block;
}
.list li > div > span {
	margin-left:15px;
}
.list li > b {
	font-size:1.4em;
}
.list li.odd {
	background-color:#eee;
}
.list li.done {
	background-color:#99ff88;
}
.list li.hover {
	background-color:#ffee44 !important;
	-webkit-transition:background-color 0s;
					transition:background-color 0s;
}
.list li.hover > b {
	background-color:inherit;
}
/*
.list li > div:nth-child(2) {
	display:none;
}
.list li.hover > div:nth-child(2) {
	display:block;
}
*/


/*
.list.details li > b:first-child {
	margin-top:-3px;
	font-size:20px;
}
*/



/* scolling */
.scroll {
	overflow-y:auto;
}
.scroll > div {
	position:absolute;
	z-index:1;
	width:100%;
	min-height:100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
	-o-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-o-text-size-adjust:none;
	text-size-adjust:none;
}
body.simple .scroll {
	background:url(images/logo0.png) center 10% no-repeat;
	/*
	-webkit-animation:spin3D 42.4s infinite linear;
					animation:spin3D 42.4s infinite linear;
	*/
}



/*
#menu .list li > div:nth-child(1) {
	width:90%;
	font-size:25px;
}
*/


.panel.inline.buttons {
	border-top:3px solid black;
	border-bottom:3px solid black;
}


/*
#suche .scroll {flex-direction: column-reverse}
#suche .list {min-height:unset}
*/

#bestellung_eingabe,
#suche_gebinde,
#suche_hersteller,
#suche_bezeichnung,
#suche_eingabe {
	width:100%;
	font-size:32px !important;
	font-weight:normal !important;
	padding:8px 47px 7px 15px !important;
	border:0px !important;
	outline:0 none transparent !important;
}
#suche_anzahl {font-weight:normal}
/*#suche_hersteller {width:62%; font-size:32px; padding-left:15px; outline:0 none transparent; border-left:0; border-right:3px solid black}*/
/*SELECT #suche_gebinde {display:none; width:38%; font-size:32px; padding-left:8px; outline:0 none transparent}*/
#suche_gebinde,
#suche_bezeichnung {margin-left:3px}

#suche input.used {background-color:#e0ffd0 !important}
#suche input.error {background-color:#ffe0e0 !important}
/*
#suche button.ok {margin-left:3px; width:65px; background-color:#ccc}
#suche button.ok.hover {background-color:#ffee44}
*/
#suche input[type=search] + button.suche-reset {display:none; position:absolute; z-index:1; height:100%; right:0px; width:55px; margin:0; opacity:.7; border:0; background-color:transparent; cursor:pointer}
#suche input[type=search] + button.suche-reset > div {font-size:21px; line-height:0; filter:grayscale(100%)}
#suche input[type=search].used + button.suche-reset,
#suche input[type=search].error + button.suche-reset {display:inline-block}
#suche input[type=search] + button:active.suche-reset > div {filter:none}
#suche input[type=search]::-webkit-search-cancel-button {-webkit-appearance:none; appearance:none}

#suche_hersteller:focus,
#suche_bezeichnung:focus,
#suche_gebinde:focus,
#suche_eingabe:focus {background-color:#fff9e6}

#suche_gebinde.grey,
#suche_gebinde .grey,
#suche_gebinde::placeholder,
#suche_gebinde:focus::placeholder,
#suche_hersteller::placeholder,
#suche_hersteller:focus::placeholder,
#suche_bezeichnung::placeholder,
#suche_bezeichnung:focus::placeholder,
#suche_eingabe::placeholder,
#suche_eingabe:focus::placeholder {color:#aaa !important}

#suche_liste b.top-right,
#eingabe_display b.top-right {z-index:1; top:17px; right:8px; font-size:23px}
#eingabe_display b.top-right > font {padding-right:9px; font-size:19px}

#data_display {display:none !important; position:fixed; z-index:1; bottom:135px; padding:6px 13px 5px 11px; color:#fff; font-size:29px; background:rgb(80,80,80); border:1px solid #aaa; border-radius:5px; -webkit-box-shadow:10px 6px 30px rgba(0,0,0,.5); box-shadow:10px 10px 30px rgba(0,0,0,.5)}

#data_gebinde,
#data_hersteller,
#data_bezeichnung {display:block; position:fixed; z-index:1; bottom:135px; left:5px; width:380px; max-height:calc(100% - 200px); border:1px solid #aaa; -webkit-box-shadow:10px 6px 30px rgba(0,0,0,.5); box-shadow:10px 10px 30px rgba(0,0,0,.5)}
#data_gebinde {left:auto; right:6px; width:280px}
#data_bezeichnung {left:calc(38% + 3px); width:61%}
#liste_gebinde,
#liste_hersteller,
#liste_bezeichnung {margin:0; padding:0; list-style:none; background:#888; cursor:pointer}
#liste_gebinde > li,
#liste_hersteller > li,
#liste_bezeichnung > li {margin:1px 0 0 0; padding:6px 9px 5px; font-size:29px; background:#fff; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
#liste_gebinde > li:first-child,
#liste_hersteller > li:first-child,
#liste_bezeichnung > li:first-child {margin-top:0}



#details .top-right,
#bestellung .top-right {font-size:1.4em; padding-left:5px}

#bestellung .buttons:last-child {
	height:60px;
	border-bottom:3px solid #000;
}
#details_summe,
#bestellung_summe {
	margin-top:3px;
}
#details_summe:first-child,
#bestellung_summe:first-child {
	margin-top:0px;
}
#details_summe,
#details_footer,
#bestellung_summe,
#bestellung_footer {
	margin-top:3px;
	padding-top:13px;
	font-size:2em;
	background-color:#eee;
}
/*
#details_summe.hover,
#bestellung_summe.hover {
	background-color:#ffee44;
}
*/
#details_summe > span,
#details_footer > span,
#bestellung_summe > span,
#bestellung_footer > span {
	float:right;
}



#menu .list li,
#archiv .list li {
	padding:16px 15px 10px 15px;
}
#menu .list li {
	font-size:21px;
}
#menu .list .glyphicon {
	float: right;
	margin: 0px;
}
#menu .list .glyphicon-tasks {
	margin-top: 2px;
}
#archiv .list li font,
#details .title-bar font {
	font-weight:normal;
	margin-left:15px;
	font-size:0.8em;
}
#archiv_auswahl {
	position:absolute;
	z-index:3;
	font-size:25px;
	font-weight:bold;
	margin:-11px 0 0 5px;
	padding:10px 5px 7px 5px;
	overflow:visible;
	text-align:left;
	text-shadow:1px 1px 4px rgba(0, 0, 0, 0.75);
	background:transparent;
	border:0;
	color:#fff;
}


/*
#bestellung_summe.hover,
#bestellung_footer.hover,
#details .list li.hover,
*/
#eingabe .list li.hover {
	background-color:#ffffff;
}
#eingabe .list li > div:first-child {
	width:88%;
}


/*
#eingabe_display {
	cursor:default;
	padding:16px 15px 12px 15px;
	border-bottom:10px solid #000;
	font-size:17px;
	background-color:#fff;
	white-space:nowrap;
}
#eingabe_display b:first-child {
	margin-top:-3px;
	font-size:20px;
}
*/


/* buttons */
.buttons {
	height:66px;
}
.ok,
.abbrechen {
	background-color:#dd0000;
	text-align:center;
	color:#fff;
	font:25px arial;
	font-weight:bold;
	border:0px;
	outline:0 none transparent;
	text-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
.ok {
	background-color:#33aa00;
}
.ok > div,
.abbrechen > div {
	position:absolute;
	left:0px;
	right:0px;
	top:17px;
}
.ok.hover,
.abbrechen.hover {
	background-color:#feee00;
	color:#444;
	text-shadow:1px 1px 3px rgb(255, 255, 255);
}



#alert_message {
	position:absolute;
	top:12px;
	left:15px;
	right:15px;
	max-height:calc(100% - 30px);
	overflow-y:auto;
	padding:30px 20px;
	border-radius:10px;
	background:#fff;
	font-family:inherit;
	font-size:25px;
	line-height:1.65;
	box-shadow:4px 4px 30px rgba(0,0,0,.25);
	text-align:left
}
#alert_message h1,
#alert_message h2,
#alert_message h3 {
	padding:0;
	margin:0 10px 0 0;
}
#alert_message b {
	display:inline-block;
	padding-bottom:5px;
}
#alert_message textarea {
	height:420px;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	margin:-20px -10px 20px -10px;
  width: calc(100% + 20px);
	border:0px;
}
#alert_message pre {
	display:inline-block;
	font-size:11px;
	text-align:center;
	overflow-y:auto;
	width:100%;
	height:calc(100% - 70px);
	background:transparent;
}
#setup .buttons,
#alert .buttons,
#eingabe .buttons {
	height:100px;
}
#setup .ok > div,
#setup .abbrechen > div,
#alert .ok > div,
#alert .abbrechen > div,
#eingabe .ok > div,
#eingabe .abbrechen > div {
	top:33px;
}



/* Eingabe */
#display,
#multi {
	position:absolute;
	z-index:2;
	width:380px;
	top:-29px;
	left:2px;
	white-space:nowrap;
	padding:24px 0 0 10px;
	/*text-align:right;*/
	text-align:left;
	font-family:arial;
	font-size:110px;
	font-weight:bold;
	color:#000;
}
#display > div {
	display:inline-block;
	width:14px;
	height:82px;
	margin:0px 4px -2px 8px;
	background:#666;
	-webkit-animation:blinker 800ms linear 0ms infinite alternate;
	animation:blinker 800ms linear 0ms infinite alternate;
}
#multi {
	width:auto;
	left:0;
	right:12px;
	top:11px;
	font-size:68px;
	text-align:right;
	font-weight:normal;
}
@-webkit-keyframes blinker {
	0%   {opacity:1}
	20%  {opacity:1}
	25%  {opacity:0}
	75%  {opacity:0}
	80%  {opacity:1}
	100% {opacity:1}
}
@keyframes blinker {
	0%   {opacity:1}
	20%  {opacity:1}
	25%  {opacity:0}
	75%  {opacity:0}
	80%  {opacity:1}
	100% {opacity:1}
}



/* DOT | Land | Eingabe */
.keyboard-display {
	margin-top:10px;
	margin-bottom:5px;
	text-align:left;
	background:#eee;
	height:115px;
}
.keyboard-display div span,
.keyboard-display div:last-child {
	font-weight:normal;
}
.keyboard-options {
	background:#000;
}
.keyboard-options button {
	margin:5px;
	text-align:left;
	border:1px solid transparent;
	font-family:arial;
	font-size:50px;
	background:#ccc;
	border-radius:5px;
	text-shadow:1px 1px 3px rgba(255, 255, 255, 0.75);
}
.keyboard-options button:first-child {
	margin-left:0;
}
.keyboard-options button:last-child {
	margin-right:0;
}
.keyboard-options button.hover {
	border:1px solid yellow;
	background-color:#ffdd44;
	color:#000;
}
.keyboard-options button > b {
	float:left;
	margin:0px;
}




/* landscape */
body.landscape .keyboard-display {
	height:127px !important;
	font-size:40px !important;
}
body.landscape .keyboard-options button {
	font-size:40px !important;
}
body.landscape #display {
	height:83px !important;
	font-size:80px;
	padding-top:14px !important;
}
body.landscape #display > div {
	height:60px !important;
	margin-top:14px !important;
}



/* helpers */
.grey {
	color:grey;
}
.red {
	color:red !important;
}
.selected {
	background-color:#fffce6
}
.selected > option {
	background-color:white !important
}

/* animations */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform:translateX(0);
	}
	40% {
		transform:translateX(30px);
	}
	60% {
		transform:translateX(15px);
		opacity:1;
	}
	0% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform:translateX(0);
	}
	40% {
		transform:translateX(30px);
	}
	60% {
		transform:translateX(15px);
		opacity:1;
	}
	0% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}
.bounce {
	animation:bounce 2000ms infinite;
	-webkit-animation:bounce 2000ms infinite;
}




/* loading spinner */
#spinner {
	display:table;
	position:absolute;
	z-index:10;
	top:0px;
	bottom:0px;
	width:100%;
	height:100%;
	opacity:0.75;
	background-color:rgba(0,0,0,0.3)
}
#spinner > div {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#spinner > div > div {
	display:inline-block;
	width:200px;
	height:200px;
	margin-top:-64px;
	background:url('../css/images/loading0.png') center center no-repeat;
	background-size:75% 75%;
	-webkit-animation:spinner 0.2s infinite linear;
					animation:spinner 0.2s infinite linear;
}
#spinner > div > span {
	display:block;
	
}
@-webkit-keyframes spin {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}
@keyframes spin {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}
@-webkit-keyframes spinner {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(30deg)}
}
@keyframes spinner {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(30deg)}
}



/* animation: in-out */
.in,
.out {
	animation-duration:240ms;
	animation-fill-mode:both;
	animation-timing-function:ease-in-out;
	-webkit-animation-duration:240ms;
	-webkit-animation-fill-mode:both;
	-webkit-animation-timing-function:ease-in-out;
}

/* not working! */
/*
.in h1 {
	animation-name:fadeIn;
	-webkit-animation-name:fadeIn;
}
.out h1 {
	animation-name:fadeOut;
	-webkit-animation-name:fadeOut;
}
*/


/* animation: removeElement */
.remove {
	-webkit-animation:removeElement 400ms;
					animation:removeElement 400ms;
}
@keyframes removeElement {
	0% {
		opacity:1;
		transform:scale(1);
	}
	100% {
		opacity:0;
		transform:scale(0.2)
	}
}
@-webkit-keyframes removeElement {
	0% {
		opacity:1;
		-webkit-transform:scale(1);
	}
	100% {
		opacity:0;
		-webkit-transform:scale(0.2)
	}
}



/* animation: fade in-out */
.fade.in {
	animation-name:fadeIn;
	-webkit-animation-name:fadeIn;
}
.fade.out {
	animation-name:fadeOut;
	-webkit-animation-name:fadeOut;
}
@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-webkit-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}


/* animation: pop in-out */
.pop.in {
	animation-name:popIn;
	-webkit-animation-name:popIn;
}
.pop.out {
	animation-name:popOut;
	-webkit-animation-name:popOut;
}
@keyframes popIn {
	0% {
		opacity:0;
	}
	5% {
		transform:scale(0.2);
		opacity:0;
	}
	100% {
		transform:scale(1);
		opacity:1;
	}
}
@keyframes popOut {
	5% {
		transform:scale(1);
		opacity: 1;
	}
	100% {
		transform:scale(0.2);
		opacity:0;
	}
}
@-webkit-keyframes popIn {
	0% {
		opacity:0;
	}
	5% {
		-webkit-transform:scale(0.2);
		opacity:0;
	}
	100% {
		-webkit-transform:scale(1);
		opacity:1;
	}
}
@-webkit-keyframes popOut {
	5% {
		-webkit-transform:scale(1);
		opacity: 1;
	}
	100% {
		-webkit-transform:scale(0.2);
		opacity:0;
	}
}


/* animation: slide-left in-out */
.slide-left.in {
	animation-name:slideLeftIn;
	-webkit-animation-name:slideLeftIn;
}
.slide-left.out {
	animation-name:slideLeftOut;
	-webkit-animation-name:slideLeftOut;
}
@keyframes slideLeftIn {
	0% {
		transform:translateX(100%);
	}
	100% {
		transform:translateX(0);
	}
}
@keyframes slideLeftOut {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(100%);
	}
}
@-webkit-keyframes slideLeftIn {
	0% {
		-webkit-transform:translateX(100%);
	}
	100% {
		-webkit-transform:translateX(0);
	}
}
@-webkit-keyframes slideLeftOut {
	0% {
		-webkit-transform:translateX(0);
	}
	100% {
		-webkit-transform:translateX(100%);
	}
}


/* animation: slide-right in-out */
.slide-right.in {
	animation-name:slideRightIn;
	-webkit-animation-name:slideRightIn;
}
.slide-right.out {
	animation-name:slideRightOut;
	-webkit-animation-name:slideRightOut;
}
@keyframes slideRightIn {
	0% {
		transform:translateX(-100%);
	}
	100% {
		transform:translateX(0);
	}
}
@keyframes slideRightOut {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-100%);
	}
}
@-webkit-keyframes slideRightIn {
	0% {
		-webkit-transform:translateX(-100%);
	}
	100% {
		-webkit-transform:translateX(0);
	}
}
@-webkit-keyframes slideRightOut {
	0% {
		-webkit-transform:translateX(0);
	}
	100% {
		-webkit-transform:translateX(-100%);
	}
}


/* animation: slide-up in-out */
.slide-up.in {
	animation-name:slideUpIn;
	-webkit-animation-name:slideUpIn;
}
.slide-up.out {
	animation-name:slideUpOut;
	-webkit-animation-name:slideUpOut;
}
@keyframes slideUpIn {
	0% {
		transform:translateY(100%);
	}
	100% {
		transform:translateY(0);
	}
}
@keyframes slideUpOut {
	0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(100%);
	}
}
@-webkit-keyframes slideUpIn {
	0% {
		-webkit-transform:translateY(100%);
	}
	100% {
		-webkit-transform:translateY(0);
	}
}
@-webkit-keyframes slideUpOut {
	0% {
		-webkit-transform:translateY(0);
	}
	100% {
		-webkit-transform:translateY(100%);
	}
}


/* animation: slide-down in-out */
.slide-down.in {
	animation-name:slideDownIn;
	-webkit-animation-name:slideDownIn;
}
.slide-down.out {
	animation-name:slideDownOut;
	-webkit-animation-name:slideDownOut;
}
@keyframes slideDownIn {
	0% {
		transform:translateY(-100%);
	}
	100% {
		transform:translateY(0);
	}
}
@keyframes slideDownOut {
	0% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-100%);
	}
}
@-webkit-keyframes slideDownIn {
	0% {
		-webkit-transform:translateY(-100%);
	}
	100% {
		-webkit-transform:translateY(0);
	}
}
@-webkit-keyframes slideDownOut {
	0% {
		-webkit-transform:translateY(0);
	}
	100% {
		-webkit-transform:translateY(-100%);
	}
}


/* easing */
.slide-left,
.slide-right,
.slide-up,
.slide-down {
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
}


/* animation: slide-left in-out */
.slide-left.in {
	animation-name:slideLeftIn;
	-webkit-animation-name:slideLeftIn;
}
.slide-left.out {
	animation-name:slideLeftOut;
	-webkit-animation-name:slideLeftOut;
}
@keyframes slideLeftIn {
	0% {
		transform:translateX(100%);
	}
	100% {
		transform:translateX(0);
	}
}
@keyframes slideLeftOut {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(100%);
	}
}
@-webkit-keyframes slideLeftIn {
	0% {
		-webkit-transform:translateX(100%);
	}
	100% {
		-webkit-transform:translateX(0);
	}
}
@-webkit-keyframes slideLeftOut {
	0% {
		-webkit-transform:translateX(0);
	}
	100% {
		-webkit-transform:translateX(100%);
	}
}




@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('fonts/glyphicons-halflings-regular.eot');
  src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {content: "\002a"}
.glyphicon-plus:before {content: "\002b"}
.glyphicon-euro:before,
.glyphicon-eur:before {content: "\20ac"}
.glyphicon-minus:before {content: "\2212"}
.glyphicon-cloud:before {content: "\2601"}
.glyphicon-envelope:before {content: "\2709"}
.glyphicon-pencil:before {content: "\270f"}
.glyphicon-glass:before {content: "\e001"}
.glyphicon-music:before {content: "\e002"}
.glyphicon-search:before {content: "\e003"}
.glyphicon-heart:before {content: "\e005"}
.glyphicon-star:before {content: "\e006"}
.glyphicon-star-empty:before {content: "\e007"}
.glyphicon-user:before {content: "\e008"}
.glyphicon-film:before {content: "\e009"}
.glyphicon-th-large:before {content: "\e010"}
.glyphicon-th:before {content: "\e011"}
.glyphicon-th-list:before {content: "\e012"}
.glyphicon-ok:before {content: "\e013"}
.glyphicon-remove:before {content: "\e014"}
.glyphicon-zoom-in:before {content: "\e015"}
.glyphicon-zoom-out:before {content: "\e016"}
.glyphicon-off:before {content: "\e017"}
.glyphicon-signal:before {content: "\e018"}
.glyphicon-cog:before {content: "\e019"}
.glyphicon-trash:before {content: "\e020"}
.glyphicon-home:before {content: "\e021"}
.glyphicon-file:before {content: "\e022"}
.glyphicon-time:before {content: "\e023"}
.glyphicon-road:before {content: "\e024"}
.glyphicon-download-alt:before {content: "\e025"}
.glyphicon-download:before {content: "\e026"}
.glyphicon-upload:before {content: "\e027"}
.glyphicon-inbox:before {content: "\e028"}
.glyphicon-play-circle:before {content: "\e029"}
.glyphicon-repeat:before {content: "\e030"}
.glyphicon-refresh:before {content: "\e031"}
.glyphicon-list-alt:before {content: "\e032"}
.glyphicon-lock:before {content: "\e033"}
.glyphicon-flag:before {content: "\e034"}
.glyphicon-headphones:before {content: "\e035"}
.glyphicon-volume-off:before {content: "\e036"}
.glyphicon-volume-down:before {content: "\e037"}
.glyphicon-volume-up:before {content: "\e038"}
.glyphicon-qrcode:before {content: "\e039"}
.glyphicon-barcode:before {content: "\e040"}
.glyphicon-tag:before {content: "\e041"}
.glyphicon-tags:before {content: "\e042"}
.glyphicon-book:before {content: "\e043"}
.glyphicon-bookmark:before {content: "\e044"}
.glyphicon-print:before {content: "\e045"}
.glyphicon-camera:before {content: "\e046"}
.glyphicon-font:before {content: "\e047"}
.glyphicon-bold:before {content: "\e048"}
.glyphicon-italic:before {content: "\e049"}
.glyphicon-text-height:before {content: "\e050"}
.glyphicon-text-width:before {content: "\e051"}
.glyphicon-align-left:before {content: "\e052"}
.glyphicon-align-center:before {content: "\e053"}
.glyphicon-align-right:before {content: "\e054"}
.glyphicon-align-justify:before {content: "\e055"}
.glyphicon-list:before {content: "\e056"}
.glyphicon-indent-left:before {content: "\e057"}
.glyphicon-indent-right:before {content: "\e058"}
.glyphicon-facetime-video:before {content: "\e059"}
.glyphicon-picture:before {content: "\e060"}
.glyphicon-map-marker:before {content: "\e062"}
.glyphicon-adjust:before {content: "\e063"}
.glyphicon-tint:before {content: "\e064"}
.glyphicon-edit:before {content: "\e065"}
.glyphicon-share:before {content: "\e066"}
.glyphicon-check:before {content: "\e067"}
.glyphicon-move:before {content: "\e068"}
.glyphicon-step-backward:before {content: "\e069"}
.glyphicon-fast-backward:before {content: "\e070"}
.glyphicon-backward:before {content: "\e071"}
.glyphicon-play:before {content: "\e072"}
.glyphicon-pause:before {content: "\e073"}
.glyphicon-stop:before {content: "\e074"}
.glyphicon-forward:before {content: "\e075"}
.glyphicon-fast-forward:before {content: "\e076"}
.glyphicon-step-forward:before {content: "\e077"}
.glyphicon-eject:before {content: "\e078"}
.glyphicon-chevron-left:before {content: "\e079"}
.glyphicon-chevron-right:before {content: "\e080"}
.glyphicon-plus-sign:before {content: "\e081"}
.glyphicon-minus-sign:before {content: "\e082"}
.glyphicon-remove-sign:before {content: "\e083"}
.glyphicon-ok-sign:before {content: "\e084"}
.glyphicon-question-sign:before {content: "\e085"}
.glyphicon-info-sign:before {content: "\e086"}
.glyphicon-screenshot:before {content: "\e087"}
.glyphicon-remove-circle:before {content: "\e088"}
.glyphicon-ok-circle:before {content: "\e089"}
.glyphicon-ban-circle:before {content: "\e090"}
.glyphicon-arrow-left:before {content: "\e091"}
.glyphicon-arrow-right:before {content: "\e092"}
.glyphicon-arrow-up:before {content: "\e093"}
.glyphicon-arrow-down:before {content: "\e094"}
.glyphicon-share-alt:before {content: "\e095"}
.glyphicon-resize-full:before {content: "\e096"}
.glyphicon-resize-small:before {content: "\e097"}
.glyphicon-exclamation-sign:before {content: "\e101"}
.glyphicon-gift:before {content: "\e102"}
.glyphicon-leaf:before {content: "\e103"}
.glyphicon-fire:before {content: "\e104"}
.glyphicon-eye-open:before {content: "\e105"}
.glyphicon-eye-close:before {content: "\e106"}
.glyphicon-warning-sign:before {content: "\e107"}
.glyphicon-plane:before {content: "\e108"}
.glyphicon-calendar:before {content: "\e109"}
.glyphicon-random:before {content: "\e110"}
.glyphicon-comment:before {content: "\e111"}
.glyphicon-magnet:before {content: "\e112"}
.glyphicon-chevron-up:before {content: "\e113"}
.glyphicon-chevron-down:before {content: "\e114"}
.glyphicon-retweet:before {content: "\e115"}
.glyphicon-shopping-cart:before {content: "\e116"}
.glyphicon-folder-close:before {content: "\e117"}
.glyphicon-folder-open:before {content: "\e118"}
.glyphicon-resize-vertical:before {content: "\e119"}
.glyphicon-resize-horizontal:before {content: "\e120"}
.glyphicon-hdd:before {content: "\e121"}
.glyphicon-bullhorn:before {content: "\e122"}
.glyphicon-bell:before {content: "\e123"}
.glyphicon-certificate:before {content: "\e124"}
.glyphicon-thumbs-up:before {content: "\e125"}
.glyphicon-thumbs-down:before {content: "\e126"}
.glyphicon-hand-right:before {content: "\e127"}
.glyphicon-hand-left:before {content: "\e128"}
.glyphicon-hand-up:before {content: "\e129"}
.glyphicon-hand-down:before {content: "\e130"}
.glyphicon-circle-arrow-right:before {content: "\e131"}
.glyphicon-circle-arrow-left:before {content: "\e132"}
.glyphicon-circle-arrow-up:before {content: "\e133"}
.glyphicon-circle-arrow-down:before {content: "\e134"}
.glyphicon-globe:before {content: "\e135"}
.glyphicon-wrench:before {content: "\e136"}
.glyphicon-tasks:before {content: "\e137"}
.glyphicon-filter:before {content: "\e138"}
.glyphicon-briefcase:before {content: "\e139"}
.glyphicon-fullscreen:before {content: "\e140"}
.glyphicon-dashboard:before {content: "\e141"}
.glyphicon-paperclip:before {content: "\e142"}
.glyphicon-heart-empty:before {content: "\e143"}
.glyphicon-link:before {content: "\e144"}
.glyphicon-phone:before {content: "\e145"}
.glyphicon-pushpin:before {content: "\e146"}
.glyphicon-usd:before {content: "\e148"}
.glyphicon-gbp:before {content: "\e149"}
.glyphicon-sort:before {content: "\e150"}
.glyphicon-sort-by-alphabet:before {content: "\e151"}
.glyphicon-sort-by-alphabet-alt:before {content: "\e152"}
.glyphicon-sort-by-order:before {content: "\e153"}
.glyphicon-sort-by-order-alt:before {content: "\e154"}
.glyphicon-sort-by-attributes:before {content: "\e155"}
.glyphicon-sort-by-attributes-alt:before {content: "\e156"}
.glyphicon-unchecked:before {content: "\e157"}
.glyphicon-expand:before {content: "\e158"}
.glyphicon-collapse-down:before {content: "\e159"}
.glyphicon-collapse-up:before {content: "\e160"}
.glyphicon-log-in:before {content: "\e161"}
.glyphicon-flash:before {content: "\e162"}
.glyphicon-log-out:before {content: "\e163"}
.glyphicon-new-window:before {content: "\e164"}
.glyphicon-record:before {content: "\e165"}
.glyphicon-save:before {content: "\e166"}
.glyphicon-open:before {content: "\e167"}
.glyphicon-saved:before {content: "\e168"}
.glyphicon-import:before {content: "\e169"}
.glyphicon-export:before {content: "\e170"}
.glyphicon-send:before {content: "\e171"}
.glyphicon-floppy-disk:before {content: "\e172"}
.glyphicon-floppy-saved:before {content: "\e173"}
.glyphicon-floppy-remove:before {content: "\e174"}
.glyphicon-floppy-save:before {content: "\e175"}
.glyphicon-floppy-open:before {content: "\e176"}
.glyphicon-credit-card:before {content: "\e177"}
.glyphicon-transfer:before {content: "\e178"}
.glyphicon-cutlery:before {content: "\e179"}
.glyphicon-header:before {content: "\e180"}
.glyphicon-compressed:before {content: "\e181"}
.glyphicon-earphone:before {content: "\e182"}
.glyphicon-phone-alt:before {content: "\e183"}
.glyphicon-tower:before {content: "\e184"}
.glyphicon-stats:before {content: "\e185"}
.glyphicon-sd-video:before {content: "\e186"}
.glyphicon-hd-video:before {content: "\e187"}
.glyphicon-subtitles:before {content: "\e188"}
.glyphicon-sound-stereo:before {content: "\e189"}
.glyphicon-sound-dolby:before {content: "\e190"}
.glyphicon-sound-5-1:before {content: "\e191"}
.glyphicon-sound-6-1:before {content: "\e192"}
.glyphicon-sound-7-1:before {content: "\e193"}
.glyphicon-copyright-mark:before {content: "\e194"}
.glyphicon-registration-mark:before {content: "\e195"}
.glyphicon-cloud-download:before {content: "\e197"}
.glyphicon-cloud-upload:before {content: "\e198"}
.glyphicon-tree-conifer:before {content: "\e199"}
.glyphicon-tree-deciduous:before {content: "\e200"}
.glyphicon-cd:before {content: "\e201"}
.glyphicon-save-file:before {content: "\e202"}
.glyphicon-open-file:before {content: "\e203"}
.glyphicon-level-up:before {content: "\e204"}
.glyphicon-copy:before {content: "\e205"}
.glyphicon-paste:before {content: "\e206"}
.glyphicon-alert:before {content: "\e209"}
.glyphicon-equalizer:before {content: "\e210"}
.glyphicon-king:before {content: "\e211"}
.glyphicon-queen:before {content: "\e212"}
.glyphicon-pawn:before {content: "\e213"}
.glyphicon-bishop:before {content: "\e214"}
.glyphicon-knight:before {content: "\e215"}
.glyphicon-baby-formula:before {content: "\e216"}
.glyphicon-tent:before {content: "\26fa"}
.glyphicon-blackboard:before {content: "\e218"}
.glyphicon-bed:before {content: "\e219"}
.glyphicon-apple:before {content: "\f8ff"}
.glyphicon-erase:before {content: "\e221"}
.glyphicon-hourglass:before {content: "\231b"}
.glyphicon-lamp:before {content: "\e223"}
.glyphicon-duplicate:before {content: "\e224"}
.glyphicon-piggy-bank:before {content: "\e225"}
.glyphicon-scissors:before {content: "\e226"}
.glyphicon-bitcoin:before {content: "\e227"}
.glyphicon-btc:before {content: "\e227"}
.glyphicon-xbt:before {content: "\e227"}
.glyphicon-yen:before {content: "\00a5"}
.glyphicon-jpy:before {content: "\00a5"}
.glyphicon-ruble:before {content: "\20bd"}
.glyphicon-rub:before {content: "\20bd"}
.glyphicon-scale:before {content: "\e230"}
.glyphicon-ice-lolly:before {content: "\e231"}
.glyphicon-ice-lolly-tasted:before {content: "\e232"}
.glyphicon-education:before {content: "\e233"}
.glyphicon-option-horizontal:before {content: "\e234"}
.glyphicon-option-vertical:before {content: "\e235"}
.glyphicon-menu-hamburger:before {content: "\e236"}
.glyphicon-modal-window:before {content: "\e237"}
.glyphicon-oil:before {content: "\e238"}
.glyphicon-grain:before {content: "\e239"}
.glyphicon-sunglasses:before {content: "\e240"}
.glyphicon-text-size:before {content: "\e241"}
.glyphicon-text-color:before {content: "\e242"}
.glyphicon-text-background:before {content: "\e243"}
.glyphicon-object-align-top:before {content: "\e244"}
.glyphicon-object-align-bottom:before {content: "\e245"}
.glyphicon-object-align-horizontal:before {content: "\e246"}
.glyphicon-object-align-left:before {content: "\e247"}
.glyphicon-object-align-vertical:before {content: "\e248"}
.glyphicon-object-align-right:before {content: "\e249"}
.glyphicon-triangle-right:before {content: "\e250"}
.glyphicon-triangle-left:before {content: "\e251"}
.glyphicon-triangle-bottom:before {content: "\e252"}
.glyphicon-triangle-top:before {content: "\e253"}
.glyphicon-console:before {content: "\e254"}
.glyphicon-superscript:before {content: "\e255"}
.glyphicon-subscript:before {content: "\e256"}
.glyphicon-menu-left:before {content: "\e257"}
.glyphicon-menu-right:before {content: "\e258"}
.glyphicon-menu-down:before {content: "\e259"}
.glyphicon-menu-up:before {content: "\e260"}