body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ESSENTIAL STYLES */
.sf-menu,
.sf-menu *
{
    margin:0;
    padding:0;
    list-style: none;
}

.sf-menu
{
    line-height:1.0;
}

.sf-menu ul
{
    /*width:13em;*/
    top:-999em;
    position:absolute;
}

.sf-menu ul li
{
    width:100%;
}

.sf-menu li:hover
{
    visibility: inherit;
}


.sf-menu li
{
    position:relative;
    float:left;
}

.sf-menu a
{
    position:relative;
    display:block;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul
{
    left:0;
    top:2.5em;
    z-index: 99;         
}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul
{
    top:-999em;
}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul
{
    /*left:13em;*/
    top: 0;
}

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul
{
    top:-999em;
}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul
{
    /*left:13em;*/
    top: 0;
}
/* ==============================================================================
   =1. Allgemeine Selektoren
============================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html {
    height: 100%;
    background: #FEFEFE url(../../files/technikolympiade/grafik/fond.jpg) top repeat-x;
}

body {
    line-height: 1;
    color: white;
    text-align: left;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: url(../../files/technikolympiade/grafik/fond-header.jpg) top no-repeat;
}

html>body {
    min-height: 100%;
    height: auto;
}


:focus {
	outline: 0;
}

/* ==============================================================================
   =Block-Elemente
============================================================================== */

h1 {
    font-size: 110%;
    font-weight:bold;
    margin-bottom:0.6em;
    color: #525252;
    text-transform: uppercase;
    line-height: 1.5;
}

h2 {
    font-size: 100%;
    font-weight:bold;
    margin-bottom:0.6em;
    color: #525252;
    text-transform: uppercase;
    line-height: 1.5;
}

p, ul, ol {
	color: #525252;
    line-height: 1.5;
    margin: 0 0 1em;
}

ol, ul {
    list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote, q {
	quotes: "" "";
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    	content: "";
    }

/* ==============================================================================
   =Inline-Elemente
============================================================================== */

strong, b {
    font-weight:bold;
}

em, i {
    font-style:italic;
}

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

a:hover {
    color: #6F6F6F;
    text-decoration:none;
}

/* ==============================================================================
   =Classes allgemeiner Art
============================================================================== */

img.mime_icon {
    vertical-align:text-top;
}

.clear {
    clear: both;
}

/* ==============================================================================
  =2. LAYOUTBEREICHE
============================================================================== */
/* ==============================================================================
   WRAPPER
============================================================================== */

#wrapper {
    width: 1350px;
    margin: 0 auto;
    display: block;
}

#header {
    width: 1350px;
    height: 586px;
    display: block;
    /*float:left;*/
}

#header .inside {
    margin-left: 180px;
}

#container {
    display: block;
    font-size: 90%;
    margin-top:92px;
    min-height: 370px;
    background: transparent url(../../files/technikolympiade/grafik/verlauf.png) top repeat-y;
}

#right {
    width: 290px;
    float:left;
}

#right .inside {
    width: 250px;
    float:left;
    padding: 0 20px 0 20px;
}

#main{
    width: 700px;
    float:left;
    padding-left: 180px;
}

#main .inside {
    width: 660px;
    padding: 0 20px 0 20px;
    float:left;

}

/* ==============================================================================
   KOPFBEREICH
============================================================================== */

#header #logo {
    width: 460px;
    height: 106px;
    float:left;
    position:absolute;
    z-index: 6;
    top: 50px;
    left: 20px;
}

#header #button-header {
    width: 213px;
    height: 90px;
    float:left;
    position:absolute;
    z-index: 5;
    top: 440px;
    left: 20px;
}

#header #loetkolben {
    width: 387px;
    height: 261px;
    float:left;
    position:absolute;
    z-index: 4;
    top: 241px;
    left: 37px;
}

#header #slogan{
    float:left;
    position:absolute;
    z-index: 3;
    top: 370px;
    left: 548px;
}

#header #menschen {
    width: 990px;
    height: 474px;
    float:left;
    position:absolute;
    z-index: 2;
    top: 69px;
    left: 0px;
}

/* ==============================================================================
   NAVIGATION
============================================================================== */

#navi {
    position: relative;
}

.mod_navigation {
    float:left;
    display: block;
    width: 990px;
    height:48px;
    overflow: visible;
    position: absolute;
    top: 590px;
    left:185px;
    z-index: 999;
    top: 5px;
}

.mod_navigation ul li {
    font-size: 95%;
    font-weight: bold;
    line-height: 1.8;
    float: left;
    white-space:nowrap;
    background: url(../../files/technikolympiade/grafik/navi-trenner.jpg) top right no-repeat;
}

.mod_navigation ul li.last {
    background: none;
}

.mod_navigation ul li a {
    text-decoration: none;
}

.mod_navigation ul li .active,
.mod_navigation ul li .trail,
.mod_navigation ul li a:hover {
    color: #878786;
    cursor:pointer;
}

/* ==============================================================================
   CUSTOM NAV NAVIGATION
============================================================================== */

.mod_customnav {
    float:left;
    display: block;
    margin: 20px 0px 0 185px;
    width: 670px;
    border-top: 1px solid #878786;
}

.mod_customnav ul li {
    font-size: 90%;
    float: left;
    list-style:none;
    padding: 12px 10px 0 10px;
    height:35px;
    background: none;
}

.mod_customnav ul li a {
    text-decoration: none;
}

.mod_customnav ul li .active,
.mod_customnav ul li .trail,
.mod_customnav ul li a:hover {
    color: #878786;
}

/* ==============================================================================
   MAIN
============================================================================== */

#main ul {
    margin-left: 17px;
    list-style-type: disc;
}

#main .image_container {
    float:right;
    display: block;
    padding: 0px 0 30px 30px;
}

#main .ce_image {
    width: 295px;
    float:left;
}

#main .ce_image.right {
    width:295px;
    float:right;
}

#main .ce_image h2 {
    width:295px;
}

#main .ce_image .image_container {
    padding: 0;
}

#right p img.logo-rechts {
    float:right;
    display: block;
    padding: 5px 0 0 0;
}

#main .ce_text table {
    background-color: #EBEBEB;
    color: #525252;
    line-height: 1.5;
    margin: 1em 0 1em;
    font-size:80%;
    width:330px;
    border: 1px solid #FFF;
}

#main .ce_text table tr td {
    padding: 4px 5px;
    border: 1px solid #FFF;
}

/* ==============================================================================
   KONTAKTFORMULAR
============================================================================== */


.ce_form form {
    padding: 0 0 10px 0;
    line-height:1.5;
    width:655px;
    color:#4C4C4C;
}

.ce_form form .widget {
    padding-bottom:5px;
    padding-top:5px;
}

.ce_form form .widget.widget-text label {
    padding-bottom:0;
    text-align:left;
    width:135px;
    display:block;
    float:left;
}

.ce_form form .widget.widget-checkbox span label {
    padding-bottom:0;
    width:600px;
    margin-left:35px;
    display: block;
}

.checkbox_container span input {
    width: 20px;
    border:none;
    background-color:transparent;
    float:left;
    display: block;
}


span.mandatory {
    color:#850000;
    font-weight: bold;
}

input.captcha {
    width: 194px;
}

input {
    width:330px;
}

input, textarea {
    background-color: #D8D8D8;
    border:1px solid #5F6565;
    padding:2px;
    color: #525252;
}

input, button, textarea, select {
    font-family:inherit;
    font-size:99%;
    font-weight:inherit;
}

textarea {
    height:140px;
    width:330px;
}

input.submit, button.submit {
    width: 200px;
    background-color: #e60f0f;
    border:1px solid #FFF;
    color:#FFF;
    font-weight:bold;
    margin-top:20px;
}

form br {
    clear: left;
}

.cookiebar {background: #B8B8B8;}
.cookiebar__button {background-color: #FFCC00; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;}
.cookiebar__button:hover {background-color: #FFCC00; color: #000;}
/*  =========================================================

1. Allgemeine Selektoren
   - Block-Elemente
   - Inline-Elemente
   - Allgemeine Klassen

2. Layoutbereiche
   - Wrapper
   - Kopfbereich
   - Navigation - Normal
   - Navigation - Individuell
   - Breadcrumb
   - Container
   - Left
   - Main
   - Right
   - Fussbereich
   - Suchmaschine - Seitensuche
   - Kontaktformular
   - Google Maps
   - RSS

========================================================== */

/* ==============================================================================

   =1. Allgemeine Selektoren

============================================================================== */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html {
    height: 100%;
    background: #FFF;
}

body {
    line-height: 1;
    color: white;
    text-align: left;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #FFF;
}

html>body {
    min-height: 100%;
    height: auto;
}


:focus {
	outline: 0;
}


/* ==============================================================================
   =Block-Elemente
============================================================================== */


h1 {
    font-size: 110%;
    font-weight:bold;
    margin-bottom:0.6em;
    color: #525252;
    text-transform: uppercase;
    line-height: 1.5;
}

h2 {
    font-size: 100%;
    font-weight:bold;
    margin-bottom:0.6em;
    color: #525252;
    text-transform: uppercase;
    line-height: 1.5;
}

p, ul, ol {
	color: #525252;
    line-height: 1.5;
    margin: 0 0 1em;
}

ol, ul {
    list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote, q {
	quotes: "" "";
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    	content: "";
    }


/* ==============================================================================
   =Inline-Elemente
============================================================================== */


strong, b {
    font-weight:bold;
}

em, i {
    font-style:italic;
}

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

a:hover {
    color: #6F6F6F;
    text-decoration:none;
}


/* ==============================================================================
   =Classes allgemeiner Art
============================================================================== */


img.mime_icon {
    vertical-align:text-top;
}

.clear {
    clear: both;
}


/* ==============================================================================

  =2. LAYOUTBEREICHE

============================================================================== */



/* ==============================================================================
   WRAPPER
============================================================================== */


#wrapper {
    width: 800px;
    margin: 0 auto;
    display: block;

}

#container {
    float:left;
    display: block;
    font-size: 90%;
    background:none;
    margin-top:20px;
}

#main{
    width: 800px;
    float:left;
    margin-left: 0px;
}

#main .inside {
    width: 760px;
    padding: 0 20px 0 20px;
    float:left;

}

/* ==============================================================================
   MAIN
============================================================================== */

#main ul {
    margin-left: 17px;
    list-style-type: disc;
}

#main .inside {
	padding: 0 10px !important;
}

#main .ce_text table {
    background-color: #EBEBEB;
    color: #525252;
    line-height: 1.5;
    margin: 1em 0 1em;
    font-size:80%;
    width:330px;
    border: 1px solid #FFF;
}

#main .ce_text table tr td {
    padding: 4px 5px;
    border: 1px solid #FFF;
}

#navi #menu-aufruf{display:none}.mm-listitem a:not(.mm-btn),.mm-listitem strong{padding:10px 10px 10px 20px}.ce_form form{max-width:655px;width:100%}.ce_form form .widget.widget-checkbox span label{width:auto;max-width:600px}@media only screen and (max-width:1350px){html body #wrapper{max-width:990px;width:100%}html body #wrapper #header{max-width:990px;width:100%}html body #wrapper #header .inside{margin:0 auto}html body #wrapper .custom .mod_navigation{left:3px}html body #wrapper #container #main{padding-left:0}}@media only screen and (max-width:1024px){html{background:linear-gradient(180deg, white 0%, #e1e1e1 100%)}html body{background:none}html body #wrapper #header{height:160px}html body #wrapper #header #menschen,html body #wrapper #header #loetkolben,html body #wrapper #header #slogan,html body #wrapper #header #button-header{display:none}html body #wrapper .custom .mod_navigation{top:185px;background:#fff;left:0;padding-bottom:5px;width:100%}html body #wrapper #container{padding-top:20px;margin-top:100px;display:grid;grid-template-columns:70% 30%;padding-right:0;background:none}html body #wrapper #container #main{width:auto;float:none;background:#fff;padding-top:20px}html body #wrapper #container #main .inside{width:auto}html body #wrapper #container #right{width:auto;float:none;margin:0;background:#ECECEC;padding-top:20px}html body #wrapper #container #right .inside{width:auto}html body #wrapper #container #right .inside p img.logo-rechts{margin-left:10px}}@media only screen and (max-width:890px){html body #wrapper #container{margin-top:30px}html body #wrapper #container #main .image_container{width:280px}html body #wrapper #navi #menu-aufruf{display:block;position:absolute;top:85px;right:15px;z-index:1}html body #wrapper #navi .mod_navigation{display:none}}@media only screen and (max-width:800px){html body #wrapper #container{grid-template-columns:100%}html body #wrapper #container #main .image_container{width:auto}}@media only screen and (max-width:640px){html body #wrapper #header{height:140px}html body #wrapper #header #logo{width:380px;height:auto}html body #wrapper #navi #menu-aufruf{top:72px}html body #wrapper #container{margin-top:10px}html body #wrapper #container #main .ce_text{display:grid;grid-template-columns:100%}html body #wrapper #container #main .ce_text .image_container{float:none;padding-left:0;grid-row:10}}@media only screen and (max-width:480px){html body #wrapper #header{height:120px}html body #wrapper #header #logo{width:300px}html body #wrapper #navi #menu-aufruf{top:60px}}@media only screen and (max-width:400px){html body #wrapper .widget-text input{width:100%;box-sizing:border-box}html body #wrapper #header{height:100px}html body #wrapper #header #logo{width:235px;left:10px}html body #wrapper #navi #menu-aufruf{top:58px}}
/* DEMO SKIN */
.sf-menu
{
    float:left;
}

.sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    background: #FFF;
    margin-top:19px;
    /*padding: 0 0 7px 0;*/
}
.sf-menu ul ul{
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    background: #FFF;
    margin-top:0px;
    padding: 0 0 0 0;
}


.sf-menu a, .sf-menu span.active
{
    border-left:0px solid #FFF;
    text-decoration:none;
    padding: 14px 15px 0 15px;
    margin:0 0 11px  0;
}

.sf-menu li.submenu.trail,
.sf-menu li.submenu
{
    border-left:0px solid #FFF;
    text-decoration:none;
    padding: 14px 15px 0 15px;
    margin:0 0 11px  0;
}

.sf-menu a.sf-with-ul
{
    padding: 0px 0px 0 0px;
    margin:0 0 11px  0;
}


.sf-menu ul.level_2 a, .sf-menu ul.level_2 span.active
{
    margin: 0 0 0 0;
}

.sf-menu li.active span.active {
    display: block;
}

.sf-menu .level_2 a,
.sf-menu .level_2 span.active,
.sf-menu .level_3 a,
.sf-menu .level_3 span.active
{
    border-top:0px solid #fff;
    padding: 5px 15px 0px 15px;
}

.sf-menu a, .sf-menu a:visited  {
    color: #515151;
}

.sf-menu li
{
    background: none;
    padding: 0 0 0 0;
    text-transform: uppercase;
}

.sf-menu li li
{
    background: #FFF;
    font-weight:normal;
}

.sf-menu li li li
{
    background: #FFF;
}

.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active
{
    outline: 0;
    color:#515151;
}

.sf-menu ul.level_2 li .submenu {
   background: url(../../files/technikolympiade/grafik/arrows-white.png) right no-repeat;
}
.sf-menu span.active,
#header .mod_navigation ul.level_1 li a.trail
{
    background: none;
    outline: 0;
    color:#515151;
    font-weight:bold;
    border-bottom: 0px;
    padding-bottom: 0;
}

#header .mod_navigation ul.level_2 li a.trail
{ background: url(../../files/technikolympiade/grafik/arrows-white.png) right no-repeat;
    outline: 0;
    color:#515151;
    background-color:#FFF;
    font-weight:normal;
    border-bottom: 0px solid #FFCC00;
    padding-bottom: 5px;
}

.sf-menu ul.level_2 span.active,
.sf-menu ul.level_2 li.submenu .trail,
.sf-menu ul.level_2 li a:hover {
    background-color:#FFF;
    font-weight:normal;
    border-bottom: 0px solid #FFCC00;
}

/* arrows */
.sf-menu a.sf-with-ul,
.sf-menu span.active.sf-with-ul
{
    min-width:1px;
}

.sf-sub-indicator
{
    width:10px;
    height:10px;
    right:.95em;
    position:absolute;
    overflow:hidden;
    display:block;
    text-indent:-999em;
    top: 1.05em;
    background: url("../../files/technikolympiade/grafik/arrows-white.png") no-repeat -10px -100px;
}

a > .sf-sub-indicator, span > .sf-sub-indicator
{
    top:.95em;
    background-position: 0 -100px;
}


/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator,
li:hover > span.active > .sf-sub-indicator,
li.sfHover > span.active > .sf-sub-indicator
{
    background-position: -10px -100px;
}


/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator
{
    background-position: -10px 0;
}

.sf-menu ul a > .sf-sub-indicator,
.sf-menu ul span.active > .sf-sub-indicator
{
    background-position: 0 0;
}


/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator,
.sf-menu ul li:hover > span.active > .sf-sub-indicator,
.sf-menu ul li.sfHover > span.active > .sf-sub-indicator
{
    background-position: -10px 0;
}