@font-face {
	font-family: 'icomoon';
	src:	url('../style/fonts/icomoon.eot?nyjvxb');
	src:	url('../style/fonts/icomoon.eot?nyjvxb#iefix') format('embedded-opentype'),
		url('../style/fonts/icomoon.ttf?nyjvxb') format('truetype'),
		url('../style/fonts/icomoon.woff?nyjvxb') format('woff'),
		url('../style/fonts/icomoon.svg?nyjvxb#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
html {
	height: 100%;
	font: 400 1em/1.4 'Open Sans',sans-serif;
	text-rendering: optimizeLegibility;
}
body {
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-family: sans-serif;
	/* color: #8899A6; */
	color: #444;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.action-home .label-to-action,
#frecencyWrapper .label-to-action {
	font-family: sans-serif;
	cursor: pointer;
}

.icon-nearby:before {
	content: " \e900";
}
.icon-bus_stop:before {
	content: " \e901";
}
.icon-bus_number:before {
	content: " \e902";
}
.icon-star:after {
	content: " \e903";
}
.icon-star_border:before {
	content: "\e904";
}
.icon-arrow_up:before {
	content: "\e905";
}
.icon-arrow_down:before {
	content: "\e906";
}
.icon-menu:before {
	content: "\e907";
}
.icon-menu_2:before {
	content: "\e908";
}
.icon-bookmark:before {
	content: "\e909";
}
.icon-bookmark_border:before {
	content: "\e90a";
}
.icon-search:before {
	content: "\e90b";
}
.icon-drag:before {
	content: "\e90c";
}
.icon-drag_2:before {
	content: "\e90d";
}
.icon-sync:before {
	content: "\e90e";
}
.icon-edit:before {
	content: "\e90f";
}
.icon-back:before {
	content: "\e910";
}

a, a:link, a:visited {
	color: #444;
	text-decoration: none;
}
a:hover {
	color: #000;
}
.no-js .only-js,
.js .js-hide {
	display: none;
}

#mascara {pointer-events: none; position: absolute; top: 0; left: 0; opacity: 0.1; }

#secHome {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#secHome header {
	order: 1;
}
#secHome #geoInfo {
	order: 1;
}
#secHome #busStop {
	order: 2;
}
#secHome #busNumber {
	order: 3;
}
#secHome  footer {
	order: 4;
	flex: 1;
	font-size: 0.8em;
	margin: 0 1em 1em 1em;
}
#secHome #frecencyWrapper {
	order: 5;
	flex-shrink: 2;
	margin: 0;
}
header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #0B72CF;
	color: #FFF;
	margin: 0 0 1em 0;
	box-shadow: 0 0.2em 0.2em #C4C4C4;
}
h1 {
	font-size: 3.7em;
	margin: 0;
	padding: 0.1em 0.2em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}
#secHome article {
	margin: 0 1em 1em 1em;
}
#secHome article h1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	align-items: center;
	justify-content: center;
}

#secHome article.on h1 {
	background-color: #85B8E7;
}
#secHome article h1 label {
	flex: 1;
	font-size: 0.85em;
	font-weight: 400;
}
#secHome h1 .icon-back {
	font-size: 2.5em;
	vertical-align: middle;
}
#secHome h1 .icon-nearby,
#secHome h1 .icon-bus_stop,
#secHome h1 .icon-bus_number {
	font-size: 2.5em;
	vertical-align: middle;
	padding-right: 0.4em;
}
#secHome h1 label {
	vertical-align: middle;
}
#secHome article.off h1 .icon-back {
	/* visibility: hidden; */
	display: none;
}
#secHome article.off .action-target {
	display: none;
}
#frecencyWrapper h1 {
	background-color: #0B72CF;
	color: #FFF;
	font-size: 1.5em;
}
.home-option #secHome article.off,
.home-option footer {
	display: none;
}

.home-option #secHome #busStop form,
.home-option #secHome #busNumber form {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}
.home-option #secHome .search,
.home-option #secHome .submit {
	width: 100%;
	display: block;
	box-sizing: border-box;
	margin: 0.5em 0;
	font-size: 3em;
	padding: 0.5em 0.1em;
	text-align: center;
	border: 1px solid #0B72CF;
	border-radius: 0.8rem;
}
.home-option #secHome .submit {
	background-color: #0B72CF;
	color: #fff;
	font-family: 'icomoon';
	font-size: 6em;
	margin: 0;
	padding: 0.1em;
}

#secHome #frecencyList {
	margin: 0;
}
#secHome #frecencyWrapper .action-frecency {

	background-repeat: no-repeat;
	background-position: right;
	cursor: pointer;
}
#secHome #frecencyWrapper.off .action-frecency {
	background-image: url(../style/icons/ic_arrow_drop_up_white_24px.svg);
}
#secHome #frecencyWrapper.on .action-frecency {
	background-image: url(../style/icons/ic_arrow_drop_down_white_24px.svg);
}
.action-home {
	background-color: #0B72CF;
	color: #FFF;
	padding: 0.8em 0.5rm 0.8em 0.5em;
	border: 0;
	box-shadow: 0.2em 0.2em 0.2em #C4C4C4;
	font-size: 2.5em;
	border-radius: 0.3em;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: pointer;
}
.nearby::after {
	content: " 0";
	font-size: 5em;
	background-image: url(/borrador/ic_restore_black_48dp_2x.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	vertical-align: middle;
}

footer {
	margin: 1em 0.5em 0.5em 0;
	text-align: right;
}

/*
#secHome.hidden,
#secNearbyStop.hidden,
#secBusStop.hidden,
#secBusNumber.hidden {
	display: block;
	border: 3px dotted green;
	display: none;
}
/ Home /
#geoInfo,
#busStop,
#busNumber {
	margin: 0 0 1.5em 0;
}
#geoInfo label,
#busStop label,
#busNumber label,
#frecencyList h1 {
	display: block;
	margin: 0;
	padding: 0 0.3em;
	color: #000;
	font-size: 1.5em;
	font-weight: bold;
}
#frecencyList .edit {
	padding: 0 0 0 0.5em;
}
#busStop input,
#busNumber input {
		font-size: 1.5em;
}
#busStop .search,
#busNumber .search {
	width: 5em;
}

#frecencyList ul,
#frecencyList li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#frecencyList li {
	margin: 0.2em 0 0 0.5em;
}
#frecencyList  .sortable {
	display: none;
	cursor: move;
}
.sortable-ghost {
	background-color: #eee;
}
#frecencyList .bookmark {
	color: #444;
	padding: 0 0.5em 0 0;
}
#frecencyList .bookmark:hover {
	color: #000;
}
#frecencyList .toBus {
	display: inline;
}
#frecencyList .editable {
	display: none;
	width: 80%;
}
#frecencyList.editMode .sortable {
	display: inline;
	padding: 0 0.5em;
	color: #ccc;
}
#frecencyList.editMode li:hover .sortable {
	color: #444;
}
#frecencyList.editMode .toBus {
	display: none;
}
#frecencyList.editMode .editable {
	display: inline;
}
#frecencyList li {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
#frecencyList li .bookmark {
	flex: 1 1 2%;
}
#frecencyList li .toBus,
#frecencyList li .editable{
	flex: 3 1 96%;
}
#frecencyList li .sortable{
	flex: 1 1 2%;
}

#mascara {pointer-events: none; position: absolute; top: 0; left: 0; opacity: 1; }
footer {
	margin: 1em 0.5em 0.5em 0;
	text-align: right;
}


/ Bus stop & number/
header {
	display: flex;
	flex-direction: row;
	background-color: #0B72CF;
	color: #FFF;
	margin: 0 0 0.2em 0;
	box-shadow: 0 0.2em 0.2em #C4C4C4;
}

header h1 .address {
	display: block;
	font-size: 0.6em;
}
header h1 .lines{
	display: block;
	font-size: 0.5em;
}
.linkHome,
h1 {
	font-size: 3.8em;
	margin: 0;
	padding: 0.1em 0.2em;
	font-weight: bold;
	text-transform: uppercase;
}
.linkHome, .linkHome:link, .linkHome:visited {
	background-color: #444;
	color: #fff;

}
.linkHome:hover {
	background-color: #000;
}
a.busStop::after {
	content: " »";
}

.stopsLine h1 {
	font-size: 1em;
	padding: 0.5em 0.3em;
	margin: 0 0 0.5em;
	position: sticky;
	top: 0;
}
.changeDir {
	display: block;
}
.changeDir::after {
	content: " »";
}
.collapsableTrigger {
	cursor: pointer;
	background-color: #eee;
}
.collapsableTrigger::after {
	content: " »";
}
.wrapList {
	overflow: hidden;
}
.list {
	padding: 0 0 0 0.5em;
	margin: 0;
	font-size: 0.7em;
	list-style: none;
}
.collapsableTarget {
	overflow: hidden;
}
.collapsableTarget.hidden {
	-moz-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	-moz-animation-name: slideout;
	-webkit-animation-name: slideout;
	height: 0;
}
.collapsableTarget.visible {
	-moz-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	-moz-animation-name: slidein;
	-webkit-animation-name: slidein;
	height: auto;
}

@-moz-keyframes slideout {
	from {
		height: 1024px;
	}
	1% {
		height:1024px;
	}
	to {
		height:0;
	}
}
@-moz-keyframes slidein {
	from {
		height:0;
	}
	99% {
		height:1024px;
	}
	to {
		height: 1024px;
	}
}

@media (min-height: 480px) {
	@-moz-keyframes slideout {
		from {
			height: 640px;
		}
		1% {
			height:640px;
		}
		to {
			height:0;
		}
	}
	@-moz-keyframes slidein {
		from {
			height:0;
		}
		99% {
			height:640px;
		}
		to {
			height: 640px;
		}
	}
}
@media (min-height: 640px) {
	@-moz-keyframes slideout {
		from {
			height: 1024px;
		}
		1% {
			height:1024px;
		}
		to {
			height:0;
		}
	}
	@-moz-keyframes slidein {
		from {
			height:0;
		}
		99% {
			height:1024px;
		}
		to {
			height: 1024px;
		}
	}
}
@media (min-height: 1024px) {
	@-moz-keyframes slideout {
		from {
			height: 1280px;
		}
		1% {
			height:1280px;
		}
		to {
			height:0;
		}
	}
	@-moz-keyframes slidein {
		from {
			height:0;
		}
		99% {
			height:1280px;
		}
		to {
			height: 1280px;
		}
	}
}
@media (min-height: 1280px) {
	@-moz-keyframes slideout {
		from {
			height: 1500px;
		}
		1% {
			height:1500px;
		}
		to {
			height:0;
		}
	}
	@-moz-keyframes slidein {
		from {
			height:0;
		}
		99% {
			height:1500px;
		}
		to {
			height: 1500px;
		}
	}
}


.collapsableTarget.hidden_v2 {
	max-height: 0;
}
.collapsableTarget.visible_v2 {
	max-height: none;
}
.collapsableTarget_v1 {
	transition: .5s cubic-bezier(0, 1, 0.5, 1);
	transform: translateY(0);
	height: auto;
}
.collapsableTarget_v1.hidden {
	transform: translateY(-100%);
	height: 0;
}

#reload {
	padding: 0.2em 0.5em 0.2em 0.2em;
	background-color: #eee;
	text-align: right;
	font-size: 0.8em;
}
#reload a {
	margin-right: 0.5em;
}
#reload a:after {
	content: "\21BB"; / Reload symbol ↻ /
	display: inline-block;
}
#reload a.loading:after {
	animation-name: loading;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes loading {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.extra {
	margin: 0;
	padding: 0.5em;
	font-size: 0.7em;
}

.list li {
	padding: 0;
	margin: 0 0 1em 0;
	border-bottom: 1px solid #EEE;
}
.list h2 {
	font-size: 1.3em;
	margin: 0;
}
.list .subt {
	color: #555;
	margin: 0 0 1em 0;
}

/ Bookmarks /
.bookmark {
	color: #FFF;
	font-size: 1.3em;
}
.bookmark:hover {
	cursor: pointer;
	color: #FFF;
}
.bookmark.starred,
.bookmark.starred:link,
.bookmark.starred:visited,
.bookmark.starred:hover,
.bookmark.starred:active  {
	color: #FFF308;
}

/ Info messages /
#info {
	position: absolute;
	background-color: #FFF;
	top: 0;
	right: 0;
	padding: 0.5em 1em;
	display: none;
}
#info.visible {
	display: block;
}
*/