/*****************************************************************
 Projekt: 			
 Datei: 				responsive.css
 Beschreibung: 	Media Queries for responsive Web
 Autor:					NGI, webundso GmbH
 Contact: 			info@webundso.ch
 Datum:					30.01.13
 
  Verwendete Farben:
  #fff    = weiss
  #000    = schwarz
  etc.
*****************************************************************/

/*--------------------------------------------------------------*/
/* Desktop */
/*--------------------------------------------------------------*/

img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: auto;
}

/*--------------------------------------------------------------*/
/* Tablets */
/*--------------------------------------------------------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {
	
}

/*--------------------------------------------------------------*/
/* Smartphones */
/*--------------------------------------------------------------*/

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

	.slicknav_menu {
		display: block;
	}
	
	.row, .columns, .column,
	.row .columns, .row .column,
	.row .row {
		margin: 0;
		padding: 0;
	}
	#languages {
		left: 200px;
	}
	#languages ul {
		margin-top: 5px;
	}
	#languages li {
		min-width: 15px;
		padding: 5px;
	}
	#search {
		width: 50%;
		left: 10px;
		background: #d0d0d0;
		top: 0;
	}
	#searchbox{
		margin-top: 3px;	
	}
	#tx-indexedsearch-searchbox-sword{
		width: 150px;
		border: 1px solid #e7e7e7;
		background: #fff;
	}
	#header {
		width: 100%;
		margin: 0;
		height: 100px;
	}
	#headerImage {
		margin-top: 0;
	}
	#headerImage img {
	}
	#logo {
		max-width: 350px;
		left: auto;
		top: 10px;
		right: 10px;
	}
	#middleTube, 
	#rightTube,
	#footer {
		padding: 0 12px !important;
		min-height: 0;
	}
	#footerContent {
		margin-top: 20px;
	}
	.tx-powermail label {
		float: none;
		width: 100%;
	}
	.tx-powermail input,
	.tx-powermail textarea,
	.tx-powermail select {
		float: none; 
		width: 100%;
	}
	h1 {
		font: 24px/28px 'Lato', sans-serif;
	}

	h2 {
		font: 20px/24px 'Lato', sans-serif;
	}

	
	
}

@media only screen and (max-width: 767px) and (orientation : landscape) {
	#languages {
		left: auto;
	}
	#logo{
		left: 0px;
	}
	#navigation {
		display: none !important;
	}
	
	#search, #languages{
		display: none !important;
	}
	#search.mob {
		display: block !important;
		left: 150px;
		max-width: 200px;
	}
	#languages.mob {
		display: block !important;
		right: 100px;
	}
}

/*--------------------------------------------------------------*/
/* Iphone Retina Displays */
/*--------------------------------------------------------------*/

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 
	
}