/* Styles for the language globe dropdown */


@font-face {font-family:'Globe';
    src:url('/plugins/i18n_language_globe/font/globe.woff2') format('woff2'),
         url('/plugins/i18n_language_globe/font/globe.woff') format('woff'),
         url('/plugins/i18n_language_globe/font/globe.ttf') format('truetype');    
	font-weight:normal;
    font-style:normal;
    font-stretch:normal;
	font-display:block;
	unicode-range:U+1F310-U+1F310;
}


div.i18n-language-globe {
	display:table-cell;
	cursor:pointer;
	position:relative;
	white-space:nowrap;
}


div.i18n-language-globe-globe {
	display:inline-block;
	font-weight:bold;
	color: inherit;
  background-color: inherit;
}
div.i18n-language-globe-globe:before {
	display:inline-block;
	font-family:Globe;
    content:"\1f310";
	font-weight:bold;
	font-size:0.75em;
	vertical-align:top;
	color: inherit;
	background-color: inherit;
}

div.i18n-language-globe-name {
	display:inline-block;
	color: inherit;
	background-color: inherit;
}

div.i18n-language-globe-area {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vH;
	height: 100vH;
	background-color: transparent;
	z-index: 1000; 
}

 nav.i18n-language-globe-nav {
	display: none;
	position: absolute;
	cursor:pointer;
	z-index: 1100; 
	color: inherit;
	background-color: inherit;
	min-width:5em;
	max-width:none;
	width:-moz-max-content;
	width:max-content;
	padding:0px 2px;
	// max-height, overflow-y, what to do when too many languages?
}

ul.i18n-language-globe-list {
	display:block;
	margin: 0;
	padding:0;
	color: inherit;
	background-color: inherit;
	width:-moz-max-content;
	width:max-content;
}

li.i18n-language-globe-item {
	display:block;
	list-style-type:none;
	white-space: nowrap;
	color: inherit;
	background-color: inherit;
	width:-moz-max-content;
	width:max-content;
}

a.i18n-language-globe-url {
	color: inherit;
	background-color: inherit;
	margin: 0;
	padding:0;
	font-weight:normal;
	text-decoration:none;
}


@media only screen and (max-width: 480px) {

  div.i18n-language-globe {
    font-size: 2.2rem;
	width:initial !important;
  }
  div.i18n-language-globe-globe {
    font-size: 2.8rem;
	line-height:2.8rem;
	vertical-align:initial;
  }
  div.i18n-language-globe-globe:before { 
	vertical-align:initial;
  }
  div.i18n-language-globe-name {
    display: none !important;
  }

  li.i18n-language-globe-item {
    font-size: 0.75em;
	line-height: 1.5em;
  }
}

@media only screen and (min-width: 480.1px) and (max-width: 768px) {

  div.i18n-language-globe {
    font-size: 1.8rem;
	width:initial !important;
  }
  div.i18n-language-globe-globe {
    font-size: 2.3rem;
	line-height:2.3rem;
	vertical-align:initial;
  }
  div.i18n-language-globe-globe:before {
	vertical-align:initial;
  }
  div.i18n-language-globe-name {
    display: none !important;
  }
  li.i18n-language-globe-item {
    font-size: 0.75em;
	line-height: 1.5em;
  }
}

@media only screen and (min-width: 768.1px) and (max-width: 1024px) {

  div.i18n-language-globe {
    //font-size: 1.2rem;
  }
  div.i18n-language-globe-globe {
    font-size: 1.5rem;
	line-height:1.5rem;
	vertical-align:initial;
  }
  div.i18n-language-globe-globe:before {
	vertical-align:initial;
  }
  li.i18n-language-globe-item {
    font-size: 1.0em;
	line-height: 1.5em;
  }
}