body {
	margin:0px;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button {
	border-radius: 7px;
	background-color: #276eb5;
	border-color: #3161ca;
	border-width: 1px;
	padding: 10px;
	color: #fff;
	margin-right: 0px;
	margin-left: auto;
	display: block;
	cursor: pointer;
}

input[type="text"],
input[type="email"],
textarea {
	border-radius: 7px;
	background-color: #262626;
	border-color: #424242;
	border-width: 1px;
	padding: 5px;
	color: #C8C8C8;
	width: 310px;
}

.h-center {
  text-align: center;
}

.v-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

#body {
	margin-top: 0px;
	margin-bottom: 0px;
}

a.wikipedia,
a.website,
a.details,
a.network {
	display:block;
    width:40px;
    height:40px;
	position: absolute;
	background: url('img/icons.png') no-repeat;
}

a.wikipedia {
	background-position: 0px -40px;
}

a.website {
	background-position: 0px 0px;
}

a.network {
	background-position: -40px 0px;
}

a.details {
	background-position: -40px -40px;
}

div#mapid {
	text-align: left;
	transition-property: filter, opacity;
	transition-duration: 1s, 1s;
	transition-timing-function : ease-in-out, ease-in-out;
	z-index: 1;
}

div#mapid.fadedMap {
	filter: grayscale(100%);
	pointer-events: none;
	opacity: 50%;
}

p.back-link a {
	font-family: neuropol;
	line-height: 1.15;
	letter-spacing: 0.05em;
}


/* Popup with place buubles */
#mapid .popup-bubbles {
	
}

#mapid .popup-bubbles .mapboxgl-popup-content {
	background: none;
}

#mapid .popup-bubbles .mapboxgl-popup-close-button,
#mapid .popup-bubbles .mapboxgl-popup-tip
{
	display: none;
}

/* Popup with place description */
#mapid .popup-description {
}
#mapid .popup-status-project .mapboxgl-popup-content,
#mapid .popup-status-construction .mapboxgl-popup-content {
    background-image: url("img/status-project.png");
    background-repeat: repeat-x;
}
#mapid .popup-description span.status {
	color: #ff6600;
	display: block;
	font-weight: bold;
	font-size: 0.75em;
}
#mapid .popup-description span.status::before {
  content: "[";
}
#mapid .popup-description span.status::after {
  content: "]";
}
#mapid .popup-description img {
	padding-right: 10px;
	float: left;
	max-width: 50%;
	max-height: 100px;
}




a.active {
	background-color: #76AF9E;
}

#body, #header {
}

#header {
	font-size: 20px;
	background-color: #FF0000;
	padding: 10px;
	position: absolute;
	top: 0px;
	left: 50%;
    margin-left: -200px;
	width: 400px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #DDD;
	font-weight: bold;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

#header h1 {
	color: #DDD;
	font-size: 24px;
	line-height: 2;
}

#header p,
#header a {
	color: #DDD;
	font-size: 14px;
}

#header p
{
	margin-bottom: 0px;
}

a {
	text-decoration: underline;
}



#left-container,
#mapid {
	position: relative;
	height: 100%;
    max-height: 100%;
}

#mapid {
	float: right;
	width: 75%;
}

#left-container {
	float: left;
    position: absolute;
    width: 350px;
    top: 0;
    left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 2;
}

.page {
	padding: 15px;
	text-align: left;
}

#left-container small {
	text-align: center;
}

#left-container a[target=_blank]::after,
#left-container #location-products a span:last-child span::after {
	content: url("themes/default/img/external.png");
	padding-left: 5px;
}

#left-container #location-products a::after {
	content: none;
}

.page h2,
.page h3,
.page p,
.page ul {
    margin: 0 0 10px;
}

.page p,
.page ul {
    margin: 10px 0 20px;
	line-height: 1.5;
}

.page h2 {
	font-size: 2.5em;
	text-align: center;
}

.page h3 {
	font-size: 1.5em;
}

.page a {
	color: #3887BE;
}

.page a {
	color: #3887BE;
}

.page a:hover {
	color: #63b6e5;
}

.page div.section {
	margin-bottom: 20px;
}

.page dl {
	margin: 0px;
}

.page dt {
	color: #777777;
	display: block;
	float: left;
	width: 100px;
}

.page dd {
	margin-bottom: 15px;
	margin-left: 100px;
	padding-left: 5px;
}

#contact dt {
	float: none;
	width: 310px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#contact dd {
	margin-left: 0px;
	padding-left: 0px;
}

#organizations-places #section-description {
	margin-top: 30px;
}

#organizations-places #section-description .noteContributors {
	margin: 20px;
	font-size: 0.8em;
	background-color: #000;
	padding: 5px;
	border-radius: 5px;
	border: #888 1px solid;
	color: #888;
}

#organizations-places #section-description .noteContributors .title {
	font-weight: bold;
}

h2#location-title div img,
div#image-description img {
	max-height: 100%;
	max-width: 100%;
}

h2#location-title div {
	height: 100px;
	line-height: 100px;
}

div#image-description {
	height: 150px;
	line-height: 150px;
	text-align: center;
}

#loader {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 4;
}

#loader .message {
    position:absolute;
    top:50%;
    text-align:center;
    width:100%;
	font-size: 2em;
}

/* SOCIAL NETWORKS */
#location-social a {
	background: url('img/social.png') no-repeat;
	display:inline-block;
    width:30px;
    height:30px;
	margin: 5px;
}

#left-container #location-social a::after {
	content: none;
}

#location-social a.facebook {
	background-position: 0px 0px;
}

#location-social a.linkedin {
	background-position: -30px 0px;
}

#location-social a.twitter,
#location-social a.x {
	background-position: -60px 0px;
}

#location-social a.flickr {
	background-position: -90px 0px;
}

#location-social a.youtube {
	background-position: -120px 0px;
}

#location-social a.instagram {
	background-position: -150px 0px;
}

#location-social a.dailymotion {
	background-position: -180px 0px;
}

#location-social a.soundcloud {
	background-position: -210px 0px;
}

#location-social a.vkontakte {
	background-position: -240px 0px;
}

#location-social a.medium {
	background-position: -270px 0px;
}

#location-locations ul,
#location-products ul {
	padding: 0px;
	margin: 0px;
}

#location-locations li,
#location-products li {
	display: inline-block;
	width: 90px;
	text-align: center;
	vertical-align: top;
	margin: 0 5px 0 5px;
}

#location-locations span.location-image,
#location-products span.product-image {
	display: block;
	background-image: url('themes/default/img/product-default.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 80px;
	height: 80px;
	margin: auto;
	margin-bottom: 10px;
}

#location-locations span.location-image
{
	background-image: url('themes/default/img/location-default.png');
}

#location-locations span.location-name,
#location-products span.product-name {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
}


/* Over effect */
#location-products li {
  position: relative;
}

#location-products .product-image {
  display: block;
  width: 100%;
  height: auto;
}

#location-products .product-name {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: #333;
  border: 1px white solid;
  margin-bottom: 0px;
}

#location-products li:hover .product-name {
  opacity: 1;
}

#location-products span.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}




#index-alphabetical,
#index-categories,
#index-countries {
	margin-bottom: 20px;
}

#index-alphabetical-keys
{
	text-align: center;
}

#index-alphabetical-keys a
{
	padding: 0px 2px;
}

#index-alphabetical-keys a.selected
{
	font-weight: bold;
	text-decoration: none;
	color: #333;
}

ul.tree {
	padding-left: 20px;
}

ul.tree li.node {
	list-style-type: none;
}

ul.tree li.leaf {
	list-style-type: disc;
}

ul.tree li.node > a {
	background-image: url("themes/default/img/arrow-close.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 10px;
	padding-left: 15px;
}

ul.tree li.leaf > a {
	padding-left: 0px;
}

ul.tree li.node > a.selected {
	background-image: url("themes/default/img/arrow-open.png");
}

ul.tree div {
	margin-top: 5px;
}



/* Cockpit */
@font-face {
	font-family: "Neuropol";
	src: url("themes/default/fonts/neuropol.ttf");
}

#left-container,
#header,
#loader,
#ctrl-display
{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

#left-container,
#header,
#loader
{
	background-color: #333;
	color: #eee;
}

#left-container
{
	background: linear-gradient(to right, #333 95%,#222 100%);
}

#left-container small
{
	font-size: 0.8em;
	padding-left: 15px;
	padding-right: 15px;
}

#header
{
	width: 600px;
	padding-top: 0px;
	z-index: 3;
}

#left-container h1,
#left-container h2,
#left-container h3,
#header h1,
#loader,
.ctrl-title
{
	font-family: neuropol;
	line-height: 1.15;
	letter-spacing: 0.05em;
}

#left-container p
{
	text-align: justify;
}

#left-container a,
#header a
{
	color: #2A82DA;
	text-decoration: none;
}

#left-container span.location-image,
#left-container span.product-image
{
	border: 1px solid #eee;
}

#left-container dd.memberof a
{
	display: block;
	margin-bottom: 10px;
}

#left-container a.selected
{
	color: #eee;
	font-weight: bold;
}

#home h2
{
	font-size: 2em;
}
#home h3
{
	font-size: 1.2em;
}

#location-search
{
	margin: 30px;
}

#location-search #results
{
	overflow-y: scroll;
	max-height: 200px;
	position: fixed;
	background-color: #333;
	border: 1px #eee solid;
	width: 250px;
	display: block;
}

#location-search input
{
	padding: 10px;
	width: 90%;
}

#location-search ul
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

#location-search li
{
	padding: 5px;
}

#location-search div#results div
{
	padding: 10px;
}

#location-search li:hover
{
	background-color: #eee;
}



/* Hexagon */
#location-products
{
	margin-bottom: 40px;
}

#location-products li
{
	width: 98px;
	height: 113px;
	background-color: #eee;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#location-products li + li
{
	margin: 0px;
	margin-bottom: -29px;
}

#location-products li .product-image
{
	border-width: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	clip-path: polygon(50% 1%, 99% 26%, 99% 74%, 50% 99%, 1% 74%, 1% 26%);
}

#location-products li .product-name
{
	border-width: 0px;
	clip-path: polygon(50% 1%, 99% 26%, 99% 74%, 50% 99%, 1% 74%, 1% 26%);
	margin-bottom: 0px;
}

#location-products li
{
	width: 100px;
	margin-bottom: -29px;
}

#location-products li:nth-child(5n+1)
{
	margin-left: 50px;
}



#ctrl-display
{
	margin-top: 120px;
	padding: 0px;
}

#ctrl-display ul
{
	padding: 0px;
	margin: 0px;
}

#ctrl-display li
{
	text-align: left;
	list-style: none;
	padding: 5px;
	border-top: 1px #DDDDDD solid;
}

.ctrl-title
{
	font-weight: bold;
	margin: 5px;
}

#ctrl-display label
{
	padding-left: 5px;
}

#ctrl-display li:hover
{
	background-color: #F2F2F2;
}

#ctrl-display li:hover,
#ctrl-display li label:hover,
#ctrl-display li input:hover
{
	cursor: pointer;
}

div.upcoming-launch
{
	min-height: 50px;
	margin-bottom: 5px;
}

#location-launches .source
{
	text-align: right;
	font-size: 0.8em;
}

div.upcoming-launch img
{
	float:left;
	background-image: url('themes/default/img/product-default.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 40px;
	height: 50px;
	margin-right: 5px;
	border: 1px white solid;
}