@font-face {
    font-family: "brandon text";
    src: url(_fonts/BrandonText-Regular.otf) format("opentype");
}

* {
	margin: 0;
	padding: 0;
    box-sizing: border-box;
	.mySlidesA {display: none;}
	img {vertical-align: middle;}
/*	background-color: #656111;*/
	}

/*	
#container {
	margin: auto auto;
	width: 1014px;
	border-color:#C1C1C1;
	border-width: 0 0px 0px;
	border-style: none;
	margin-bottom:10px;
}
*/

#right_sidebar {
	width: 210px;
	float: right;
	text-align: left;
	color:#3F4F9C;
    margin-top: 3px;
	overflow: hidden;
	display: none;
}

/* On smaller screens, decrease text size 
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
*/

@media only screen and (min-width: 1024px) {
 
	 #container {
		margin: 0px auto;
		max-width: 1014px;
		width: 100%;
		border-color: #C1C1C1;
		border-width: 0px 2px 2px;
		border-style: none;
		margin-bottom:10px;
		overflow : visible;
	}
	
	#right_sidebar {
		display: block;
	}
	
	.dropdownBooking {
		position: relative;

		/* display: none; */
		display: inline-block;
		background-color: #fff8de;
	}
	
	.iphone_reparatur_schweiz {
		display: block;
	}
	
	.iphone_reparatur_schweiz_mobile {
		display: none;
	}
	
	#left_sidebar {
	max-width:210px;
	float: left;
	text-align: left;
	color: #555566;
	margin-top: 3px;
	}
	
	/* Für Accordeon mit Hover START*/
	.haccordion {
    font-family: arial, sans-serif;
    margin:0 auto;
	width: 100%;
	max-width: 210px;
    padding:0;
    background:#fff;
	}
	
	.haccordion a {
    color:#033356;
	background:#e3e4e5;
	margin-top: 6px;
	margin-bottom: 4px;
    line-height:15px;
    padding-left:4px;
    font-size:12px;
    font-family: arial, sans-serif;
    display: block;
    text-align:left;
    text-decoration: none;	
	}
	
	/* Vertical */
	.vertical ul li {
    overflow:hidden;
    margin:0 0 0;
	}
	
}

@media only screen and (max-width: 1023px) {
 
	 #container {
		margin: 0px auto;
		max-width: 1014px;
		width: 100%;
		border-color: #C1C1C1;
		border-width: 0px 2px 2px;
		border-style: none;
		margin-bottom:10px;
		overflow : hidden;
	}
	
	#right_sidebar {
		display: none;
	}
	
	.dropdownBooking {
		position: relative;
		display: inline-block;
		background-color: #fff8de;
	}
	
	.iphone_reparatur_schweiz {
		display: none;
	}
	
	.iphone_reparatur_schweiz_mobile {
		display: block;
	}
	
	.iphone_reparatur_schweiz_mobile div {
		display: inline-block;
		font-weight:bold;
		font-size:10pt;
		background-color: #dddddd;
		border-radius: 5px;
		padding:5px;
		margin: 5px;
		height: 30px;
		
	}	
	
	
	#left_sidebar {
	width: 27%;
	display: block;
	/*max-width:100px;*/
	text-align: left;
	color: #555566;
	margin-top: 3px;
	float: left;
	}
	
	/* Für Accordeon mit Hover START*/
	.haccordion {
	width: 100%;
	display: block;
    font-family: arial, sans-serif;
    margin:0 auto;
    padding:0;
    background:#ffffff;
	float: left;
	}
	
	.haccordion a {
    color:#033356;
	background:#e3e4e5;
	margin-top: 8px;
	margin-bottom: 8px;
    line-height:15px;
    padding-left:4px;
    font-size:12px;
    font-family: arial, sans-serif;
    display: block;
    text-align:left;
    text-decoration: none;	
	}
		
	.haccordion label {
    height:40px;
	}


	/* Vertical */
	.vertical ul li {
    overflow:hidden;
    margin:0 0 0;
	margin-top:2px;
	margin-bottom:6px;
	}
	
}


html, body {
	height: 100%;
	width: 100%;
	margin: auto;
	background-color: #ffffff;
	color: #033356;
	font-family: arial, sans-serif;
	font-size: 13px;
	text-align: left;
}

a {
	color: #033356;
	text-decoration: underline;
}

a:hover {
	color: #e86553;
}

span {
	display: none;
}

img {
	border: none;
	margin: 0 0 0 0;
	border-radius: 2%;
}

p {
	margin: 10px 0 5px;
	text-align:left;
	font-family:arial,sans-serif;
	line-height: 14px;
        font-size:12px;
}

h1 {
	text-align: left;
	padding-left:5px;
	padding:5px;
	margin-bottom: 0;
	margin-right: 5px;
    background-color:#98999b;
	color:#FFFFFF;
	border-radius: 5px;
    font-size: 1.3em;
	font-family:"brandon text",arial,sans-serif;
	font-weight:normal!important;
}

h2 {
	text-align: center;
	padding-left:5px;
	padding:5px;
	margin-bottom: 0;
	margin-right: 5px;
    font-size: 2em;
	font-family:"brandon text",arial,sans-serif;
	font-weight:normal!important;
}

table#t01 {
    width: 98%; 
    background-color: white;
	text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: black;
    background-color: white;
	text-align: center;
	font-weight: normal;
}

table#t02 {
    width: 98%; 
    background-color: white;
	text-align: left;
}
table#t02 tr:nth-child(even) {
    background-color: #eee;
}
table#t02 tr:nth-child(odd) {
    background-color: #fff;
}
table#t02 th {
    color: black;
    background-color: white;
	text-align: center;
	font-weight: normal;
}
table#t02 td {
    color: #e86553;
}


input {
	padding-left: 2px;
	background-color: #fff;
	color: #85859c;
	font-family: "brandon text", arial, sans-serif;
	font-size: 11px;
}



/* für Simple-Slider START */
#simpleSlides {
	font-size: 12px;
	float: right;
	width:120px;
	height: 0px;
	position: relative;
	top: 2px;
 	color: #fffaef;
	z-index: 3;
}
#simpleSlides .slides {
  display: none;
  width: 100%;
}
#simpleSlides .animate-left {
  position: relative;
  animation: animateleft 0.8s
}
#simpleSlides .animate-top {
  position: relative;
  animation: animatetop 6.0s
}
#simpleSlides .animate-in {
  position: relative;
  animation: animatein 6.0s
}
#simpleSlides .animate-out {
  position: relative;
  animation: animateout 6.0s
}
@keyframes animatein { 
  from { top :0; opacity:0 } to { top:0; opacity:1 }
}
@keyframes animateout { 
  from { top :0; opacity:1 } to { top:0; opacity:0 }
}
@keyframes animatetop { 
  from { top :0; opacity:0 } to { top:0; opacity:1 }
}
@keyframes animateleft { 
  from { left :-500px; opacity:0 } to { left:0; opacity:1 }
}
/* für Simple-Slider ENDE */


/* Page Header */
#page_header {
	float: left;
	display: block;
	width: 100%;
	max-width: 1014px;

	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
    color: #ffffff;

}


#page_header img {
	float: left;
	display: block;
	width: 100%;
	border-radius: 0;
	padding: 0;
	
}

/* Main Navigation Menu */

#page_menu {
	float: left;
    display: block;
/*
für eine gleichmässige Verteilung der Filial-Dropdown-Buttons (geht aber nicht,
weil ich noch nicht herausgefunden habe, wo ich das platzieren muss, damit die
Implementation des responsive Designs nicht gestört wird):
display:flex;
justify-content: space-between;
*/    
    margin-bottom:0;
	width: 100%;
	max-width:1014px;
	/*height:39px;*/
	background-color: #fff8de;
}

.sticky {
	position: fixed;
	margin-top: 0px;
	width: 100%;
	z-index: 2;
}

/*
.sticky2 {
	position: fixed;
	top: 39px;
	width: 100%;
	z-index: 1;
}
*/

/* Für Hoverable dropdown START */
/* Dropdown Button */
.dropbtn {
	color: #033356;
    padding: 0;
    border: none;
	margin: 0 -4px 0 0;
	width: auto;
	height: 39px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	background-color: #fff8de;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	margin-top: 0;
	margin-left: 0;
    display: none;
    position: absolute;
    background-color: #fff8de;
    min-width: 145px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
	font-size: 14px;
	font-family: arial, sans-serif;
	opacity: 0.98;
}



/* Links inside the dropdown */
.dropdown-content a {
    color: #033356;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {

    display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
/*    background-color: #3e8e41;*/
	background-color: #033356;

}
/* Für Hoverable dropdown ENDE */


.haccordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.haccordion li {
    margin:0;
    padding:0;
}
.haccordion [type=radio], .haccordion [type=checkbox] {
    display:none;
}

.haccordion label {
    display:block;
    font-size:12px;
    line-height:12px;
	border-radius: 5px;
    background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#929395, #d9d8d8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#929395, #d9d8d8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#929395, #d9d8d8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#929395, #d9d8d8); /* Standard syntax (must be last) */	
    color:#FFFFFF;
	font-weight: bold;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.haccordion ul li label:hover, .haccordion [type=radio]:checked ~ label, .haccordion [type=checkbox]:checked ~ label {
    background:#e86553;
    color:#FFFFFF;
}
.haccordion .content {
    background:#e3e4e5;
    padding:0 4px;
	margin-top: 2px;
    overflow:hidden;
	border-radius: 5px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.haccordion p {
    color:#033356;
	background:#e3e4e5;
    line-height:26px;
    padding-left:4px;
    font-size:12px;
    font-family: arial, sans-serif;
    display: block;
    text-align:left;
    text-decoration: none;	
}

.haccordion a:hover {
    color: #033356;
	background-color: #f1f1f1

}
.haccordion h3 {
    color:#542437;
    padding:0;
    margin:10px 0;
}


.vertical ul li label {
    padding:8px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}
.vertical ul li label:hover {
}
.vertical ul li .content {
    height:0;
    border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
/*    height:100px;*/
    height: auto;
}

/* Für Accordeon mit Hover ENDE */


/* Main Content Area */

#main_content {
	display: block;
	margin-right: 2px;
	width: 70%;
	max-width: 585px;
	text-align: left;
	float: right;
}


/* New Item Description */

#new_item {
	display: block;
	margin-top: 3px;
	width: 100%;
	max-width: 585px;
	text-align: left;
	float: right;
}

#new_item p{
	padding-left: 5px;
	padding-right: 10px;	
	font-size: 1.3em;
	line-height: 1.4em;
}

#new_item img{
	width: 99%;
	padding-left: 5px;
	padding-right: 10px;
	border-top-left-radius: 10px 7px;
	border-top-right-radius: 15px 7px;
	border-bottom-left-radius: 10px 7px;
	border-bottom-right-radius: 15px 7px;
}

.imgsmall{
	float: none;
	width: 20px;
	margin-right: 5px;
	border: none;
	border-radius: 0%;
}

/* Centered image */
.centeredimg {
	float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* Right Sidebar */



#spinner {
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
  text-align:center;
}
@keyframes spinner {
   0% {transform: rotateZ(-10deg);}
   50% {transform: rotateZ(10deg);}
   100% {transform: rotateZ(-10deg);}
}

/* Container holding image and text */
.imgtxt-container {
    position: relative;
    text-align: center;
    color: white;
}

/* Centered text */
.centeredtext p {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-30%, -30%);
    font-family: "brandon text", arial, sans-serif;
    display: block;
    text-align:center;
    text-decoration: none;
/* Formatierungen für Buchen-Button */
/* 14.06.2018 / Thomas / Gelb für während WM:
    top: 27%;
    left: 19%;
	line-height: 25px;
	font-size: 30px;
    color: yellow;
    text-shadow: 1px 1px 2px red, 0 0 25px blue, 0 0 5px white;
*/
/* 20.07.2018 / Thomas / Rot für Sonnenblume:
	line-height: 20px;
    top: 65%;
    left: 25%;
	font-size: 25px;
	color: red;
    text-shadow: none;
    font-weight: 900;

/* 20.07.2018 / Thomas / Standard (weiss):*/
    line-height: 20px;
    top: 35%;
    left: 25%;
	font-size: 25px;
	color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px #033356;
*/
}

/* Geschäftskundenlogos */
#partner_footer {
	width: 100%;
	max-width: 1014px;
	min-height: 100px;
	background-color: #F9F9F9;
	padding-left: 0;
	border-width:0 0 0 0;
	border-style: none;
	float: left;
	text-align: left;
	text-decoration: none;
	position: relative;
	z-index: 3;
}
#partner_footer_header {
	width: 100%;
	max-width: 1014px;
	height: 35px;
	background-color: #fff8de;
	padding-left: 0;
	border-width:0 0 0 0;
	border-style: none;
	float: left;
	text-align: left;
	text-decoration: none;
	position: relative;
	z-index: 3;
}
#partner_footer p {
	margin: 10px 0 0;
	text-align: center;
	font-family: arial, sans-serif;
	line-height: 16px;
	font-size: 1.5em;
}

#partner_footer img {
	max-width: 90px;
	max-height: 60px;
	margin: 20px 20px 20px 20px;
}


/* Page Footer */

#page_footer {
	width: 100%;
	max-width: 1014px;
	min-height: 160px;
	background-color: #fff8de;
	padding-left: 0;
	border-width:0 0 0 0;
	border-style: none;
	float: left;
	text-align: left;
	text-decoration: none;
	position: relative;
	z-index: 3;
}

#page_footer a {
	text-decoration: none;
}


#page_footer_left {
	width:200px;
	padding-left: 10px;
	padding-top: 10px;
	float: left;
	line-height: 1;
}
#page_footer_mid {
	width:486px;
	padding-top: 5px;
	padding-left: 10px;
	line-height: 1.5;
	float: left;
}
#page_footer_right {
	width:200px;
	padding-left: 10px;
	padding-top: 5px;
	float: left;
}

#powered_by {
	float: left;
	width: auto;
	height: auto;
	color:#000000;
	font-size:12px;
	text-align: left; 
}

#powered_by a {
	color:#3F4F9C;
}


/* Für Preislisten-Tabelle START
			body{width:98%; font-family: Arial;}*/
.current-row{
	background-color:#B24926;
	color:#FFFFFF;
	}
.current-col{
	background-color:#1b1b1b;
	color:#FFFFFF;
	}
.tbl-qa {
	font-size:1.2em;
    width: 98%;
	background-color: #f5f5f5;
}

.tbl-qa th.table-header {
	text-align: left;
	padding:5px;
    background-color:#596BBF!important;color:#FFFFFF;
    background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#929395, #d9d8d8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#929395, #d9d8d8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#929395, #d9d8d8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#929395, #d9d8d8); /* Standard syntax (must be last) */
	border-radius: 5px;
    font-size: 1em;
	font-family:"brandon text",arial,sans-serif;
	font-weight:normal!important;
	padding-left:5px;
	}

.tbl-qa th.table-header-c {
	text-align: center;
	padding:5px;
    background-color:#596BBF!important;color:#FFFFFF;
    background: gray; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#929395, #d9d8d8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#929395, #d9d8d8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#929395, #d9d8d8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#929395, #d9d8d8); /* Standard syntax (must be last) */
	border-radius: 5px;
    font-size: 1em;
	font-family:"brandon text",arial,sans-serif;
	font-weight:normal!important;
	padding-left:5px;
}
	
.tbl-qa td.table-row-l {
	padding:5px;
	background-color: #FDFDFD;
	text-align: left;
	border-radius: 5px;
}

.tbl-qa td.table-row-r {
	padding:5px;
	background-color: #FDFDFD;
	text-align: right;
	border-radius: 5px;
}
	
/* Für Preislisten-Tabelle ENDE */

/* für Slide-Show START */

.w3-content{max-width:980px;margin:auto}

.w3-display-container{position:relative}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}


.w3-tiny{font-size:10px!important}.w3-small{font-size:12px;font-style: italic;background-color:#FDFDFD;opacity: 0.7}.w3-medium{font-size:15px!important; font-style: italic;}.w3-large{font-size:18px!important}

.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

.w3-padding-small{padding:4px 8px!important}

.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 

.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}

.w3-display-bottommiddle{position:absolute;left:0%;bottom:0;transform:translate(0%,0%);-ms-transform:translate(-30%,0%)}
.w3-light-gray,.w3-hover-light-gray:hover{color:#ff0000;}
.w3-yellow,.w3-hover-yellow:hover{color:#fff8de;}
.w3-black,.w3-hover-black:hover{color:#000000;}

/* für Slide-Show ENDE */

/* für Automatic-Slide-Show START */
/* Slideshow container */
.slideshow-container {
  max-width: 98%;
  position: relative;
  margin: auto;
  margin-top: 5px;
  display: none;
}

@media only screen and (min-width: 1024px) {
 		
	.slideshow-container {
		display: block;
	}   
    
}

/* Caption text */
.ctexta {
  font-family: "brandon text", arial, sans-serif;
  color: #033356;
  font-size: 1.3em;
  padding: 0px 12px 5px 5px;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 100%;
  text-align: left;
}

.ctextn {
  font-family: "brandon text", arial, sans-serif;
  color: #033356;
  font-size: 1em;
  padding: 8px 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: right;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dotA {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



/* für Automatic-Slide-Show ENDE */


/* für Gallery START */
#galtxt {
	font-family: "brandon text", arial, sans-serif;
    margin: 0 0 0 0;
}
#galtxt h4{
    font-size: 1.1em;
	text-align: center;
	font-style: italic;
}
#galtxt p{
    font-size: 0.9em;
	text-align: center;
}


.galrow {
    margin: 0 -10px;
}

/* Add padding BETWEEN each column */
.galrow,
.galrow > .galcolumn {
    padding: 3px;
}

/* Create two equal columns that floats next to each other */
.galcolumn {
    float: left;
    width: 30%;
}

/* Clear floats after rows */ 
.galrow:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.galcontent {
    background-color: white;
    padding: 5px;
	min-height: 440px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 900px) {
    .galcolumn {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .galcolumn {
        width: 100%;
	}
}