input {
	-moz-transition:all .4s;
	-webkit-transition:all .4s;
	transition:all .4s;
}

* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

canvas {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	outline:none;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	z-index:1;
}

.drag {
	cursor:url(https://mail.google.com/mail/images/2/openhand.cur),default!important;
}

body,html {
	width:100vw;
	height:99vh;
}

body {
	margin:0;
	padding:0;
	font-family:ff-good-headline-web-pro-con,helvetica,arial,sans-serif;
	background-color:#000;
}

#index {
	color:#fff;
}

canvas:active {
}	
}

#content {
	width:100vw;
	height:100vh;
}

#mycanvas {
	height:100vw;
	width:100vh;
	background-color:#000;
}

#info {
	z-index:9999;
	width:220px;
	height:30%;
	overflow:scroll;
	background-color:rgba(255,255,255,0.5);
	position:absolute;
	top:0;
	left:0;
}

.menu {
	position:absolute;
	bottom:10px;
	right:15px;
	z-index:999;
	line-height: 1;
}

.menu li {
	float: left;
	list-style-type: none;
	padding-left:10px;
	margin-left:10px;
	border-left:1px solid #ccc;
}

.menu li:first-of-type {
border-left: none;
}

.menu a,.menu a:visited {
	text-transform:uppercase;
	color:rgba(255,255,255,0.8);
	text-decoration:none;
}

.menu a:hover {
	color:rgba(255,255,255,1);
}

.tools {
	position:absolute;
	top:50%;
	margin-top:-80px;
	left:20px;
	color:#fff;
}

.tools a {
	color:#fff;
	text-decoration:none;
	width:25px;
	height:25px;
	display:block;
	margin-bottom:2px;
	border:2px solid #fff;
/*text-indent: -9999em;*/
	background-position:center center;
	background-repeat:no-repeat;
	opacity:.7;
}

.tools a:hover {
	opacity:1;
}

.zoomin {
	background-image:url(../img/ico_mes.png);
}

.tools a.zoomout {
	background-image:url(../img/ico_menys.png);
	margin-bottom:8px;
}

.tools a.center {
	background-image:url(../img/ico_center.png);
	border:none;
}

.controls {
	width:100%;
	padding:10px 20px;
	position:absolute;
	top:0;
}

.controls-tags {
	margin-left:40px;
}

.controls .tag {
	float:left;
	margin:5px;
}

#ojito {
	width:25px;
	height:25px;
	background:url(../img/ico_show.png) no-repeat center top;
	position:absolute;
	left:20px;
	top:20px;
/*text-indent: -9999em;*/
	opacity:.8;
}

.ojito:hover {
	opacity:1;
	background-position:center -40px;
}

.ojito.hidden {
	background-position:center -40px;
}

.img_placer img {
	width:100px;
	height:100px;
	margin-right:20px;
	border-radius:8px;
	float:left;
}

#foto_roll {
	width:300px;
	height:100px;
	position:absolute;
	bottom:2px;
	right:2px;
}

#foto_selected {
	position:absolute;
	bottom:2px;
	right:2px;
	background-color:rgba(0,0,0,0.7);
	height:100px;
}

#foto_selected .meta-info {
	color:#fff;
	padding:5px 0;
}

#foto_roll .meta-info {
	color:#fff;
	padding:5px 0;
}

.meta-info h2 {
	margin:0;
	font-weight:400;
	text-transform:uppercase;
}

.meta-info a,.meta-info a:visited {
	color:rgba(255,255,255,0.8);
	text-decoration:none;
	margin-right:.75em;
	font-size:15px;
}

.meta-info a:hover {
	color:rgba(255,255,255,1);
}

.foto_info img {
	width:100%;
	height:100%;
}

h1 {
	position:absolute;
	left:20px;
	bottom:14px;
	color:#fff;
	margin:0;
	text-transform:uppercase;
	font-weight:400;
	line-height:1;
	color:aqua;
	font-size:18px;
	background:url(../img/logo_mapr.png) no-repeat center top;
	text-indent:-9999em;
	width:150px;
	height:44px;
}

input[type="text"] {
	border-width:2px;
	border-style:solid;
	background-color:#000;
	padding:4px 32px 5px 12px;
	text-transform:uppercase;
	font-family:ff-good-headline-web-pro-con,helvetica,arial,sans-serif;
	font-weight:500;
	color:#fff;
	font-size:16px;
	margin:0;
}

input[type="text"]:focus {
	background-color:#fff;
	-webkit-appearance:none;
	color:#000;
	margin-right:0;
	min-width:1px;
	display:inline;
	outline:0;
}

input.ok {
	border:none;
	font-size:16px;
	padding:6px 12px 7px;
	text-transform:uppercase;
	font-family:ff-good-headline-web-pro-con,helvetica,arial,sans-serif;
	font-weight:500;
	color:#fff;
	margin:0;
}

input.ok:hover {
	cursor:pointer;
}

.tag {
	position:relative;
}

.close {
	position:absolute;
	width:20px;
	height:28px;
	right:8px;
	top:1px;
	display:block;
	text-indent:-999em;
	white-space:nowrap;
	opacity:.8;
	background:url(../img/close.png) no-repeat center center;
}

input[type="text"]:focus ~ .close {
	background:url(../img/close2.png) no-repeat center center;
}

.close:hover {
	opacity:1;
}

.info {
	opacity:0;
	color:#fff;
	margin:0;
}

.loading .info {
	opacity:.8;
}

.tag:hover .info {
	opacity:.8;
}

.disclaimer {
width: 300px;
position: absolute;
bottom: 70px;
right: 120px;
background-color: #fff;
padding: 40px;

}

/**
 * Tooltips!
 */
/*

#content,
#content p {
  margin: 4em 0;
  text-align: center;
}
*/
/* Base styles for the element that has a tooltip */
[data-tooltip],.tooltip {
	position:relative;
	cursor:pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after {
	position:absolute;
	visibility:hidden;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity:0;
	-webkit-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-transform .2s cubic-bezier(0.71,1.7,0.77,1.24);
	-moz-transition:opacity .2s ease-in-out,visibility .2s ease-in-out,-moz-transform .2s cubic-bezier(0.71,1.7,0.77,1.24);
	transition:opacity .2s ease-in-out,visibility .2s ease-in-out,transform .2s cubic-bezier(0.71,1.7,0.77,1.24);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	pointer-events:none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after {
	visibility:visible;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,[data-tooltip]:before {
	z-index:1001;
	border:6px solid transparent;
	background:transparent;
	content:"";
}

/* Base styles for the tooltip's content area */
.tooltip:after,[data-tooltip]:after {
	z-index:1000;
	padding:8px;
	width:160px;
	background-color:#000;
	background-color:hsla(0,0%,20%,0.9);
	color:#fff;
	content:attr(data-tooltip);
	font-size:14px;
	line-height:1.2;
}

/* Directions */
/* Top (default) */
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after,.tooltip-top:before,.tooltip-top:after {
	bottom:100%;
	left:50%;
}

[data-tooltip]:before,.tooltip:before,.tooltip-top:before {
	margin-left:-6px;
	margin-bottom:-12px;
	border-top-color:#000;
	border-top-color:hsla(0,0%,20%,0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,.tooltip:after,.tooltip-top:after {
	margin-left:-80px;
}

[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after,.tooltip-top:hover:before,.tooltip-top:hover:after,.tooltip-top:focus:before,.tooltip-top:focus:after {
	-webkit-transform:translateY(-12px);
	-moz-transform:translateY(-12px);
	transform:translateY(-12px);
}

/* Left */
.tooltip-left:before,.tooltip-left:after {
	right:100%;
	bottom:50%;
	left:auto;
}

.tooltip-left:before {
	margin-left:0;
	margin-right:-12px;
	margin-bottom:0;
	border-top-color:transparent;
	border-left-color:#000;
	border-left-color:hsla(0,0%,20%,0.9);
}

.tooltip-left:hover:before,.tooltip-left:hover:after,.tooltip-left:focus:before,.tooltip-left:focus:after {
	-webkit-transform:translateX(-12px);
	-moz-transform:translateX(-12px);
	transform:translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,.tooltip-bottom:after {
	top:100%;
	bottom:auto;
	left:50%;
}

.tooltip-bottom:before {
	margin-top:-12px;
	margin-bottom:0;
	border-top-color:transparent;
	border-bottom-color:#000;
	border-bottom-color:hsla(0,0%,20%,0.9);
}

.tooltip-bottom:hover:before,.tooltip-bottom:hover:after,.tooltip-bottom:focus:before,.tooltip-bottom:focus:after {
	-webkit-transform:translateY(12px);
	-moz-transform:translateY(12px);
	transform:translateY(12px);
}

/* Right */
.tooltip-right:before,.tooltip-right:after {
	bottom:50%;
	left:100%;
}

.tooltip-right:before {
	margin-bottom:0;
	margin-left:-12px;
	border-top-color:transparent;
	border-right-color:#000;
	border-right-color:hsla(0,0%,20%,0.9);
}

.tooltip-right:hover:before,.tooltip-right:hover:after,.tooltip-right:focus:before,.tooltip-right:focus:after {
	-webkit-transform:translateX(12px);
	-moz-transform:translateX(12px);
	transform:translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,.tooltip-right:before {
	top:3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,.tooltip-right:after {
	margin-left:0;
	margin-bottom:-16px;
}