@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------------------- */
/* Polyglot Language Switcher 2
/* ----------------------------------------------------------------------
Version: 1.0.0
Author: Ixtendo
Author URI: http://www.ixtendo.com
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* TABLE OF CONTENTS
/* ----------------------------------------------------------------------
-Global Styles
-Selected Locale (the trigger for the dropdown)
-Language Container
------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* Global Styles
/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 768px){
	.polyglot-language-switcher {
		font: 14px/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; /* edit or delete so that the switcher inherits the font styles of your project */
	}

	.polyglot-language-switcher,
	.polyglot-language-switcher * {
		margin: 0;
		padding: 0;	
	}


	.polyglot-language-switcher {
		position: relative;	
		margin-top:-20%;
	}
	

	.polyglot-language-switcher ul {
		list-style: none;	
	}

	.polyglot-language-switcher a {
		transition: all 0.2s ease-in-out;
	}

	.polyglot-language-switcher img {
		margin-right: 3px;	
	}

	/* ---------------------------------------------------------------------- */
	/* Selected Locale (the trigger for the dropdown)
	/* ---------------------------------------------------------------------- */
	.polyglot-language-switcher > .pls-selected-locale {
		text-decoration: none;
		color: #333; 
		position: relative; /* for the arrow */
	}

	.polyglot-language-switcher > .pls-selected-locale:hover {
		color: #3a91bd;	
	}

	.polyglot-language-switcher > .pls-selected-locale:after { 
		content: " "; 
		position: absolute;
		top: 50%;
		margin-top: -2px;
		left: 100%;
		margin-left: 5px;
		width: 0; 
		height: 0; 
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid #000;
	}

	/* ---------------------------------------------------------------------- */
	/* Language Container
	/* ---------------------------------------------------------------------- */
	.pls-language-container-scrollable {
		position: relative;
		top: 100%;
		left: 0;
		z-index: 10000;
		width: 100%;
		/*overflow-x: auto;	*/
		margin-top: 17px;
		
		
	}

	.pls-language-container {
		margin-top: 10px;
		padding: 10px 0;
		border: 1px solid #ccc;	
		box-shadow: 0 1px 2px rgba(0,0,0,.08);
		background-color: #fff;
	}

	.pls-language-container td {
		padding: 0 10px;
		border-right: 1px solid #ccc;
		vertical-align: top;
	}

	.pls-language-container td:last-child {
		border-right: none;
	}

	.pls-language-container a {
		color: #3a91bd;	
		text-decoration: none;
		padding: 5px 10px;
		display: block;
		white-space: nowrap;
	}

	.pls-language-container a:hover {
		background-color: #f5f5f5;	
		color: #333; 
	}

	.pls-language-container .pls-selected-locale {
		color: #333;
		font-weight: bold;	
		cursor: default;
	}
}

@media only screen and (max-width: 767px){
	.polyglot-language-switcher {
		font: 14px/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; /* edit or delete so that the switcher inherits the font styles of your project */
	}

	.polyglot-language-switcher,
	.polyglot-language-switcher * {
		margin: 0;
		padding: 0;	
	}


	.polyglot-language-switcher {
		position: absolute;	
	}
	

	.polyglot-language-switcher ul {
		list-style: none;	
	}

	.polyglot-language-switcher a {
		transition: all 0.2s ease-in-out;
	}

	.polyglot-language-switcher img {
		margin-right: 3px;	
	}

	/* ---------------------------------------------------------------------- */
	/* Selected Locale (the trigger for the dropdown)
	/* ---------------------------------------------------------------------- */
	.polyglot-language-switcher > .pls-selected-locale {
		text-decoration: none;
		color: #333; 
		position: relative; /* for the arrow */
	}

	.polyglot-language-switcher > .pls-selected-locale:hover {
		color: #3a91bd;	
	}

	.polyglot-language-switcher > .pls-selected-locale:after { 
		content: " "; 
		position: absolute;
		top: 50%;
		margin-top: -2px;
		left: 100%;
		margin-left: 5px;
		width: 0; 
		height: 0; 
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid #000;
	}

	/* ---------------------------------------------------------------------- */
	/* Language Container
	/* ---------------------------------------------------------------------- */
	.pls-language-container-scrollable {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10000;
		width: 100%;
		/*overflow-x: auto;	*/
		margin-top: 10%;
		
		
	}

	.pls-language-container {
		margin-top: 10px;
		padding: 10px 0;
		border: 1px solid #ccc;	
		box-shadow: 0 1px 2px rgba(0,0,0,.08);
		background-color: #fff;
	}

	.pls-language-container td {
		padding: 0 10px;
		border-right: 1px solid #ccc;
		vertical-align: top;
	}

	.pls-language-container td:last-child {
		border-right: none;
	}

	.pls-language-container a {
		color: #3a91bd;	
		text-decoration: none;
		padding: 5px 10px;
		display: block;
		white-space: nowrap;
	}

	.pls-language-container a:hover {
		background-color: #f5f5f5;	
		color: #333; 
	}

	.pls-language-container .pls-selected-locale {
		color: #333;
		font-weight: bold;	
		cursor: default;
	}

}