/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */


body {
  	font-size: 1.0em; /* 1.em = 16px */
    line-height: 1.15em; /* 1.5 em= 24px */
	}

.page-wrapper {
    margin: 0;
}

header {
   background-color: #FFF;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   padding-left: 20px;
   padding-right: 10px;
   	}

header #logo {
	width: 100%;
	padding-top: 0.2em;
    padding-bottom: 0.2em;
	text-align: left;
	float: none;
}

header #logo img {
	width: 250px;
	height: auto;
	}

header #headerText {
	width: 100%;
	float: none;
	padding-left: 5px;
	display: block;
	}
	
header #headerText h2 {
	font-size: 1.2em;
	display: block;
	text-align: center;
	padding-top: 0.4em;
	padding-right: 0;
	padding-bottom: 0.4em;
	padding-left: 0;	
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	}

header #headerText h3 {
	font-size: 1.1em;
	display: none;
	padding-top: 0.2em;
	padding-right: 0;
	padding-bottom: 0.2em;
	padding-left: 0;	
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	}
	
.submenu {
	margin-bottom: 0px;
	height: 35px;
	/*height: auto;*/
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	text-align: left;
	}

.submenu #submenue_header2 {
	font-size: 1.0em;
	text-decoration: none;	
	text-align: left;
	width: 38px;
	float: left;	
	}
	
.submenu #submenue_header2 img {
	height: 30px;
	width: 30px;
	margin-top: -5px;
	}
	
.submenu #submenue_header2 a {
	font-size: 1.0em;
	/* font-weight: bold;*/
	text-decoration: none;	
	}
.submenu #submenue_header2 a:hover {
	font-size: 1.0em;
	}

.submenu #submenue_header3 {
	width: 12%;
	float: left;	
	font-size: 1.0em;
	text-align: right;
	padding-right: 5px;
	}
	
aside, footer {
    /* padding: 0.6em 20px; */
	padding: 0.1em 5px;
}

section {
   /*padding: 0 20px;*/
	padding: 0 10px;
	overflow: auto;
}

/* hier Spaltenbreiten in der Basisversion einstellen */

.mainContent {
	width: 100%;
	background-color: #FFFFFF;
	border-top: 1px solid transparent;
	}

aside {
    width: 100%;
	margin-left: 0;   /* Abgleichen mit Breite .maincontent  */
  	}

.mainContent #social_share {
	width: 100%;
	float: none;	
	display: inline;
	overflow: hidden;
	}
	
.mainContent #addthis_share {
	margin-left: 20px;
	float: left;	
	}
	
.mainContent #social_share_description {
	/*width: 60px;*/
	float: left;	
	text-align: right;
	padding-right: 10px;
	}
	
.mainContent #social_googleplus {
	float: none;	
	margin-left: 90px;
	width: 140px;
	display: none;
	}
	
.mainContent #social_facebook {
	float: left;	
	width: 90px;
	margin-left: 10px;
	}
	
.addthis_horizontal_follow_toolbox {
	float: left;
	margin-top: -15px;
	}

.addthis_sharing_toolbox { 
	float: left;
	margin-top: 0px;
	margin-left: 0px;
	}

.fb-like {
	float: left;
	/*margin-top: -12px;*/
	}

.submenu #google_translate {
	}

.submenu #google_translate_element {
	width: 40%;
	margin-left: 5px;
	overflow: hidden;
	float: left;
	}
	

.mainContent #imgbanner {
    overflow: hidden;
	width: 100%;
    }

.mainContent #image1 {
	height: 100px;	
	float: left;
	overflow: hidden;
	}

.mainContent #image2 {
	width: auto;
	height: auto;	
	float: left;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px; 
	}
	

.image_page img {
	width: 100%;
	height: auto;	
	float: none;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	}
	
.image_small_page img {
	width: 50%;
	height: auto;	
	float: left;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	}
	
.image_listbox img {
	width: 50%;
	height: auto;	
	float: left;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	}
	
.mainContent #listbox {
	padding-left: 10px;
	margin-left: 50%;   /*  abgleichen mit Bild image_small_page */
	}
	
.mainContent table {
	font-size: 0.8em;
	line-height: 1.0em;
	}

.mainContent_servicetable {
	width: 100%;
	overflow: auto;
	float: left;
	}
	
.servicetable_cell {
        margin: 0;
		margin-bottom: 5px;
		width: 100%;  /* 100% eine Box pro Zeile */
		display: inline;
		align-content: center;
		float: left;
		border-bottom: 1px solid rgba(250, 250, 250, 0); /* verhindert das margin-Collapse nach unten */
    	/*background-color: #DAE4F0;*/
    	}
	
.servicetable_cell img {
	width: 40%;  /* Bild als Grösse der Box */
    height: auto;
    /*height: 150px;*/
	padding-bottom: 10px;
	padding-top: 10px;
	float: left;
	}
	
.servicetable_celltext {
        width: 60%;  /* Textbox als Grösse der Box */
		/*margin: 0 0 1em 0;*/
		overflow: auto;
		display: inline;
		text-align: left;
        padding-left: 10px;
        padding-right: 5px;
		padding-bottom: 5px;
		padding-top: 5px;
		float: left;
    	}
	
.servicetable_celltext h3 {
    /*margin: 0.2em 0 0.4em;*/
	font-size: 1.05em; 
	text-align: left;
	margin-top: 1px;
	margin-bottom: 3px;
	}

.servicetable_celltext p {
    margin: 0;
    font-size: 0.95em; 
	}


.mainContent #servicepage_text {
	float: none;
	padding-left: 10px;
	}
	
.mainContent #servicepic img {
	float: left;
	width: 180px;
	height: auto;
	padding-right: 30px;
	padding-left: 10px;
	padding-bottom: 15px;
}
.mainContent #serviceoffered {
	padding-left: 10px;
}
.mainContent #servicecontact {
	padding-left: 20px;
	float: none;
}

.mainContent #servicecontact img {
	width: 100px;
	height: auto;
	float: left;
}


.servicecontact_inner {
	padding-left: 10px;
	padding-right: 10px;
	float: none;
}
.servicecontact_inner img {
	float: none;
	padding-left: 10px;
	padding-right: 10px;
}


.disclaimertext {
	font-size: 0.8em;
	color: #656565;
}

.disclaimertext p {
	font-weight: 100;
}

.silbentrenner {
	/* hyphens */
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

aside #sidebar_left {
	float: left; 
	width: 100%;
	height: auto;
	display: none;
	overflow: hidden;
	}
aside #sidebar_right, #sidebar_right2 {
	float: left; 
	width: 100%;
	height: auto;
	display: inline;
	overflow: hidden;
	margin-top: 0px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 0.9em;
	text-align: left;
	line-height: 1.15em;
	}
	


aside #sidebar_leftunten {
	float: left;
	display: inline;
	text-align: left;
	width: 88%;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 10px;
	/* height: 150px; */
}

side #sidebar_rightoben, #sidebar_rightunten, #sidebar_rightunten2 {
	float: left;
	width: 100%;
	margin-top: 0px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
	font-size: 0.9em;
	text-align: left;
	line-height: 1.15em;
}

.sidebar_rightoben_text {
	float: none;
	margin-top: 0px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 1.0em;
	line-height: 1.15em;
	/* background-color: lightgray; */
	}

.sidebar_blogstyle {
	float: left;
	width: 100%;
	margin-top: 0px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	font-size: 1.0em;
	text-align: left;
	line-height: 1.15em;
	/* background-color: lightgray; */
}

.sidebar_blogstyle h3 {
	font-size: 1.1em;
	line-height: 1.2em;
	/* background-color:lightyellow; */
	}

.sidebar_blogstyle img {
	width: 40%;
	height: auto;
	float: left;
	padding-right: 10px;
	padding-bottom: 7px;
	}

aside #sidebar_rightoben img {
	width: 40%;
	height: auto;
	float: left;
	padding-right: 10px;
	padding-bottom: 7px;
	}
	
aside #sidebar_rightoben h3 {
	float: none;
	font-size: 1.1em;
	line-height: 1.2em;
	/* background-color:lightyellow;*/
	}

article {
	width: 100%;
	padding-top: 20px;
	padding-left: 3%;
	padding-right: 5%;
	padding-bottom: 5px;
	float: none;
}

.stepchange_webinar {	
	float: none;
	padding: 10px;
	}
	
.stepchange_career {	
	float: none;
	padding: 10px;
	background-color: #CCCCCC;
	}


figure img {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	}


/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
	h1 {
		margin: 0;
		}
	
	h2 {
		margin: 0.4em 20px;
		}
		
	h3 {
		margin: 0.2em 10px;
		}
	
	p.teasertext {
		margin: 0.8em 20px;
		}
	
	ul, ol {
		padding: 0;
		margin: 0 0 0.625em 20px;
		}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
	nav ul {
		margin: 0;
	}
	
	nav ul > li {
		margin-left: 0;
		border-bottom: 1px solid rgba(250, 250, 250, 0.6);
	}
	
	nav ul > li > a, nav ul > li > strong {
		padding: 0.6em 20px; 
		display: block;
	}
	
	nav ul a:link {
		text-decoration: none;
	}
	
	.navbutton {
		border-radius: 30px;
   		background-color: #009eeC; 
		border: none;
		color: white;
		padding: 8px 15px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 0.9em;
		margin: 5px 2px;
		cursor: pointer;
		}
	
	.navbutton:hover {
		background-color: #ff9933;  /* orange */
		}
		
	.navbutton a:visited {
		color: #FFF;  /* white; besuchte Links normal darstellen */
		}
	.navbutton a {
		color: #FFF;  /* white */
		text-decoration: none; 
		}
		
/* ----------------------------------------------------------------------------- *
 *              Styles der breitere Smartphone / Tablet schmal  			      *
 *              480px / 16px/em = 30em                               			  *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 30em) {

     header #logo {
		width: 50%;
		float: left;
		}
	
	header #headerText {
		width: 50%;
		margin-left: 50%;
		}
	
	header #headerText h2 {
		text-align: left;
		}
	
	aside #sidebar_left {
    	float: left; 
	    width: 100%;
	    display: none;
        }
    aside #sidebar_right {
	    float: left; 
	    width: 100%;
	    display: inline;
        }
     aside #sidebar_right2 {
		display:none;
        }
	/*.submenu #submenue_header2 {
		width: 15%; } */
		
	.submenu #google_translate_element {
		width: 35%;
		}
	
	.mainContent #addthis_share {
		/*margin-left: 50px;*/
		}
	.mainContent #social_googleplus {
		width: 150px;
		margin-left: 110px;
		}
	
	.mainContent #social_facebook {
		float: left;	
		width: 100px;
		}
	
	.servicetable_cell {
        width: 50%;  /* bestimmt Anzahl der Spalten */
		}
		
	.servicetable_cell img {
		width: 35%;  /* Bild als Grösse der Box */
		}
		
	.servicetable_celltext {
		width: 65%;  /* Textbox als Grösse der Box */
			}		
		
	.servicetable_cell p {
        font-size: 0.85em;
		}
		
			
	.image_page img {
			width: 50%;
			float: left;
			}
			
	.image_small_page img {
			width: 25%;
			float: left;
			}
			
	figure img {
			width: 65%;
			float: left;
			}
		
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion (Menue oben)               *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
          font-size: 0.938em; /* 15px */
          }
  	  }
	
	header #logo {
		width: 35%;
		float: left;
		}
	
	header #logo img {
	width: 250px;
	height: auto;
		}
	
	header #headerText {
		width: 65%;
		float: none;
		margin-left: 35%;
		}
	
	header #headerText h2 {
	font-size: 1.2em;
	text-align: left;
	display: block;
	}
	header #headerText h3 {
	font-size: 0.9em;
	text-align: left;
	display: block;
		}

    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
   		 }

    .mainContent {
        width: 66.7%;
        float: left;
        /*padding: 0.8em 20px;*/    /*ursprüngliche Einstellung*/
		padding: 0.4em 10px;
        border-top: none;
   		 }
	
	.mainContent #social_googleplus {
		/*float: left;	*/
		/*padding-bottom: 20px;*/
		}
	
	.mainContent #social_facebook {
		/*float: left;	*/
		}
	
	.mainContent_servicetable {
        width: 100%;
		}
	.servicetable_cell {
        width: 50%;
		margin-right: 0%;
		}
	
	/*
	.mainContent_servicetable #cell img {
		width: 40%;
		}
	
	.mainContent_servicetable #celltext {
        width: 60%;
		}   */
	
	.servicetable_celltext h3 {
		font-size: 0.9em; 
		}
			
	.servicetable_celltext p {
		font-size: 0.85em; 
		}

	.image_page img {
			width: 60%;
			float: left;
			}

   figure img {
	width: 60%;
	float: left;
	}
	
   
    aside {
        width: 33.3%;
        margin-left: 66.7%;
        /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
		margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
    	}

    aside #sidebar_left {
    	float: left; 
	    width: 100%;
	    display: none;
        }
    aside #sidebar_right {
	    float: left; 
	    width: 100%;
	    display: inline;
		}
     aside #sidebar_right2 {
		display: none;
        }
    
footer {
        clear: left;
   	 	}

aside, footer {
        padding: 0.6em 5px;
   		 }

section {
        padding: 0;
    }

    /* ----------------------------------------------------------------------------- *
     *                             Textauszeichnungen                                *
     * ----------------------------------------------------------------------------- */
    h2 {
        /* font-size: 2.1875em; /* 35px */
        line-height: 1.2em; 
		font-size: 1.2em; 
        margin: 0.3em 0 0;
    }

    p.teasertext {
        margin: 0.8em 0;
    }

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        overflow: hidden;
		font-size: 1.2em; 
		}

    nav ul {
        margin: 0 20px; 
		}

    nav ul li {
	float: left;
	border: none;
	width: auto;
    }

    nav ul > li > a {
        padding: 0.7em 10px 0.7em 10px; 
        display: inline-block;
    }
	
	
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Desktops (Menuspalte links)                   *
 *                           urspr. 1248px / 16px/em = 78em                      *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
    /* Navigation wird links neben dem Inhalt angeordnet */
    nav {
        width: 15%;
        float: left;
        box-shadow: none;
    }

    nav ul {
        margin: 1.6em 0 0;
	    }

    nav ul > li {
        width: 100%;
        float: none;
    }

    nav ul > li > a {
        padding: 0.8em 25px; 
		display: block;
    }
	

    /* .main macht Platz für .nav */
    .main {
        width: 85%;
        float: left;
    }

    /* Größenanpassungen */
    .mainContent {
        width: 62%;
        padding: 0.8em 10px;
		}

    aside {
        width: 38%;
        margin-left: 62%;
    }


.mainContent #social_share {
	display: inline;
	}

aside #sidebar_left {
	float: left; 
	width: 100%;
	display: none;
}
aside #sidebar_right {
	float: left; 
	width: 100%;
	display: inline;
}
aside #sidebar_right2 {
	display: none;
}

aside #sidebar_rightoben img {
	width: 30%;
	}
	
.sidebar_rightoben_text {
	font-size: 0.9em;
	line-height: 1.1em;
	}
	
.sidebar_blogstyle {
	font-size: 0.9em;
	line-height: 1.1em;
    }
	
footer {
        clear: left;
    }
}
/* ----------------------------------------------------------------------------- *
 *                          Styles für grössere Desktops                         *
 *                           1392px / 16px/em = 87em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 87.0em) {
   
    .page-wrapper {
       margin-left: 0;
	   margin-right: auto;
		/* margin: 0 auto;*/
        /*max-width: 87.0em;*/
   		 }
	
	 .mainContent {
        width: 60%;
        padding: 0.8em 20px;
    	}

	.servicetable_cell {
			width: 50%;
			margin-right: 0%;
			}
	
	.servicetable_cell img {
		width: 40%;
		}
	
	.servicetable_celltext {
        width: 60%;
		}
		
    aside {
        width: 40%;
        margin-left: 60%;
    }
	aside #sidebar_left {
	display: none;
	}
	aside #sidebar_right {
	float: left; 
	width: 48%;
	display: inline;
	}
	aside #sidebar_right2 {
	float: left; 
	width: 52%;
	display: inline;
	}
	
    aside #sidebar_rightoben img {
		width: 50%;
		}
	aside #sidebar_right2 img {
		width: 50%;
		}
   .sidebar_rightoben_text {
	  font-size: 0.9em;
	  line-height: 1.1em;
	  }
	
   .sidebar_blogstyle {
	  font-size: 0.9em;
	  line-height: 1.1em;
      }
	
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1600px / 16px/em = 100em                            *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 100em) {
    .page-wrapper {
        margin-left: 0;
		margin-right: auto;
		/*margin: 0 auto;*/
        max-width: 100em;
    }
	 .mainContent {
        width: 55%;
        padding: 0.8em 20px;
    }

    aside {
        width: 45%;
        margin-left: 55%;
    }
	aside #sidebar_left {
	display: none;
	}
	aside #sidebar_right {
	float: left; 
	width: 50%;
	display: inline;
	}
	aside #sidebar_right2 {
	float: left; 
	width: 50%;
	display: inline;
	}
	.sidebar_rightoben_text {
	font-size: 1.0em;
	line-height: 1.15em;
	}
	.sidebar_blogstyle {
	font-size: 1.0em;
	line-height: 1.15em;
    }
	
	
}


/* ----------------------------------------------------------------------------- * 
 *                          Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */

header {
    position: relative;
}

/* Menü-Link im Header zum Ein-und Ausblenden des Menüs */
a.toggle-nav {
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 1em;
    text-decoration: none;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    cursor: pointer;
    padding: 0.357em;
   /* color: #D0E4F2;*/
	/*background: #4A6491;*/
	color: #FFF;
	background: #009eeC;
    border: 1px solid #4A6491;
}

a.toggle-nav:hover {
    border: 1px solid #D0E4F2;
    /*background: #D0E4F2;*/
	background: #ff9933;
	color: #FFF;
   /* color: #1A1F2B;*/
}


h1 a:link, h1 a:visited {
    color: #fff;
    text-decoration: none;
}

h1 a:hover, h1 a:active, h1 a:focus {
    color: darkorange;
}

/* NEU */
/* ----------------------------------------------------------------------------- *
 *                      Beispiel Multi-Level-Menü im Basis-Layout                *
 * ----------------------------------------------------------------------------- */
/* Clearing von nav, nav.ul, .main mit .clearfix statt mit overflow:hidden;
 * sonst wird die zweite menüebene abgeschnitten! */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}


/* ----------------------------------------------------------------------------- *
 *                          Multi-Level-Menü im Basis-Layout                     *
 * ----------------------------------------------------------------------------- */
/* Positionierung der Navigation "auf" dem Hauptinhalt, damit die zweite Menüebenen nicht verdeckt wird. */
nav {
	overflow: inherit;
	position: relative;
	z-index: 10;
	width: 100%;
}

.main {
    z-index: 5;
}


nav ul {
	padding-left: 10px;   /* damit Menubuttons nicht bis an den Rand gehen */
	padding-right: 10px;
    }

/* Layout und Positionierung der 2. Menüebene */
nav ul ul {
    background-color: #009eeC;
    z-index: 20;
    display: none;
}

nav ul .openmenu ul {
    display: block;
}

nav ul li {
    font-size: 0.92em;
	position: relative;
	}

nav ul li li {
    font-size: 0.85em;
    float: none;
}

nav ul li:hover { 
	/* background-color: #ff9933;   orange */	
	background-color: #009eeC;	/* hinter der Linkfläche */
    color: #FFF;
	}

nav li.act {
    background-color: #C2D2E5;
}

nav ul > li > a, nav ul > li > b, nav ul > li > strong {
    padding: 0.8em 20px;
	/*padding: 0.8em 20px;*/
	display: block;
    font-weight: normal;
	}

nav ul > li > b, nav ul > li > strong {
    color: #30395C; 
}

#navMain {
    display: none;
}

/* Einblenden des Untermenüs onHover für alle Ebenen */
nav ul li:hover ul {
    display: block;
	}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Tabletversion                         *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
   
	
	nav > ul > li {
        height: 2.0em;
        width: 20%;   /* breite pro menupunkt in Tabletversion(menue oben) */
		/*
		height: 2.8em;
		width: 25%;
		*/
    }

    /* Layout und Positionierung der 2. Menüebene */
    nav ul ul {
        top: 2.0em;  /* Abgleichen mit height  */
		/*top: 2.8em;*/
        position: absolute;
        width: auto;
        margin: 0;
        min-width: 100%;
    }

    nav ul > li > a, nav ul > li > strong {
        padding: 0.6em 7px;
	 /*	 padding: 0.8em 10px; */
        display: block;
    }

    #navMain {
        display: block;
    }

    /* Menü-Link verstecken in großen Viewports */
    a.toggle-nav {
        display: none;
    }
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü links (Desktopversion                    *
 *                          1248px / 16px/em = 78em                              *
 *                          1024px / 16px/em = 64em                              *
 * ----------------------------------------------------------------------------- */
  

@media only screen and (min-width: 78em) {
    /* 100% Navigation wird hier wieder überschrieben */
    nav {
        width: 15%;
		/* width: 20%; */
    }

    nav ul {
	margin: 5px 0 0;
	/* margin: 20px 0 0; */
	position: relative;
    }

    nav ul ul {
		position: absolute;
        top: 0;
		left: 100%;
		background-color: #009eeC;
    }
    
    nav ul ul a:hover {
        background: #ff9933;   /* orange */
        color: #fff;
    }
    nav > ul > li {
        height: auto;
        width: auto;
    }

    nav ul > li > a, nav ul > li > strong {
        padding: 0.3em 7px;
		/* padding: 0.6em 20px; */
    }
    
    nav ul ul > li > a, nav ul ul > li > strong {
        padding: 0.4em 7px;
		/* padding: 0.7em 20px; */
    }	
	
    nav ul li {
        float: none;
    }
}