body, html { font-family: sans-serif }
body { background: url(/img/bg/bg.jpg); color:#505050; font-family:'Roboto', Calibri, Myriad, Arial, sans-serif; font-weight: 100; font-size: 100%;  margin: 0px }
/*
body.unibg { background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
*/
.clear       { clear:both; height: 0px; width:100% }
.half        { float: left; width: 50%; }
.nobr        { white-space: nowrap }
.nowrap *    { white-space: nowrap }
.center      { text-align: center }
.right       { text-align: right }
.paddtop     { padding-top: 15px }
.hidden      { display: none }
.unvisible   { visibility: hidden }
.transparent { opacity: 0 }
.transparent5{ opacity: 0.5 }
.clickable   { cursor: pointer }
.semi-plexi  { background:rgba(0, 0, 0, 0.3) } 
.plexi       { background:rgba(0, 0, 0, 0.75) } 
.full-width  { width: 100% }
.gold        { color:#c9ac72 } 
.brown       { color:#a9a791 }
.justify     { text-align: justify }

a img        { border: none; }
a            { color: #e7350e; text-decoration: none; }
a:hover      { text-decoration: none; }

b,strong     { font-weight: 500 } 

.correct     { background: transparent }
.incorrect   { background: #f27d7d }
.preloader   { width: 100%; text-align: center; padding: 100px 0 100px 0 }
.centered    { width: 950px; margin: 0 auto }


.mobile      { display: none }
.screen      {  }


/*
red: #e7350e	
blue: #21b4de
*/	


/* Master DIV */

.container { position: relative; padding: 0 10px; max-width: 1100px; width: 100%; text-align: left; margin: 0 auto; }

.container.header { background: #e1e1e1 }
.container.vizual { background: #d2d2d2 }




/* Header */
.header.top { background:#e7350e; color: #fff; padding: 10px 0  }
.top-line { padding: 0px }

.vizual { background: url(/img/bg/vizual.jpg) no-repeat center top; height:270px; }
.vizual .logo { float: left; max-width:238px; margin-top:30px }
.vizual .claim { float: right; max-width:380px; margin-top:-100px; opacity: 0; transition:all 0.8s ease }

.navigation{ height: 172px; background:url('/img/bg/menugb.png'); margin-top: -12px }
.navi-container { width: 950px; margin: 0 auto }
.menubox{ width: 150px; height: 170px; float: left; margin: 0 auto; text-align: center; color: #fff; font-size: 80%; line-height: 140%; border: 1px solid transparent; border-radius: 3px;}
.menubox:hover { background:#e7350e }  
.menubox img { margin: 25px 0 10px 0;  }
.separator { height: 172px; width: 5px; float: left; background: url(/img/bg/sep2.png) center center no-repeat }


/* Content */
.content-bg { background:url(/img/bg/lezci.png) center top no-repeat }

.side-menu { width: 20%; float: left; margin: 15px 0; font-size: 90%; line-height: 130%; border: 1px solid #ebebeb; border-radius:4px; overflow: hidden }
.side-menu h2 { background: #484848; color: #fff; padding: 10px 8px; font-weight: 100; text-transform: uppercase }
.side-menu a { display: inline-block; width: 100%; border-top:1px solid #ebebeb }
.side-menu span { padding: 5px 8px; display: inline-block }
.side-menu a:hover { background:#e7350e; color: #fff }

.inlay { font-size: 90%; line-height: 140%; margin: 20px 0 50px 0 }
.inlay.fullsize { width: 100% }
.inlay.resized { width: 75%; float: right }
.inlay h1 { color: black; font-size: 200%; margin: 6px 0 12px 0; font-weight: 300; line-height: 120% }
.inlay h2 { color: red; font-size: 140%; margin: 6px 0 12px 0; font-weight: 300 }
.inlay h3 { color: #0aa6d1; font-size: 120%; margin: 6px 0 5px 0; font-weight: 300 }
.inlay hr { height: 0px; border: none; border-top:1px dashed #bfbfbf; margin: 0px 0 }

/*.col-1-6 { width: 15.5%; margin: 0 0.5%; float: left }*/
.col-1-6 { width: 23.5%; margin: 0 0.5%; float: left }
.col-2-6 { width: 31%; margin: 0 0.5%; float: left }
.col-4-6 { width: 62%; margin: 0 0.5%; float: left }

.ULLI {display: block; padding-left: 35px; background: url(../img/ulli/ulli.png) no-repeat left top; margin:8px 0 12px 0; }
.button, a.button { display: inline-block; background: #e7350e; color: #fff; padding: 4px 12px; border-radius:3px; border:1px solid #e7350e; font-weight: 200; text-shadow: none; transition:background .2s ease  }
.button:hover, a.button:hover { background: #fff; color: #e7350e  }


.edu-active { width: 31%; margin: 0 1% 15px 1%; float: left }  

.edu-box { width: 48%; margin: 10px 1.5% 10px 0; float: left; border: 1px solid #d7d7d7; border-radius:3px; background: #fff; height: 7em; max-height: 7em; transition:max-height 0.7s ease-in-out; overflow: hidden }
.edu-box div { padding: 15px 20px; line-height: 120%; font-weight: 100;  }
.edu-box div a.button { background: #a8a8a8; border:1px solid #d7d7d7; margin-top: 10px  }
.edu-box:hover div a.button { background:#e7350e; color: #fff; border:1px solid #e7350e; }
.edu-box:hover div a.button:hover { background:#fff; color: red; border:1px solid #e7350e; }
.edu-box div.edu-detail { padding: 0; height: 0px; overflow: hidden; }
.edu-table { margin: 8px 0 0 0;  }
.edu-table td { padding: 5px }

form.edu-order label { display: inline-block; float: left; width: 100%; margin-top: 8px  }
form.edu-order input[type=text], form.edu-order textarea { vertical-align: middle; font-size: 110%; width: 400px; max-width: 100%; border:1px solid #d7d7d7; padding: 5px; border-radius: 3px }
form.edu-order input[type=submit] { font-size: 110%; padding: 6px 12px }

p.gallery { width: auto }
p.gallery span.imageBox img { margin: 3px; border:1px solid #fff }
p.gallery span.imageBox img:hover { border:1px solid red }

.GenTablePlus { border-top: 1px dotted silver; width: 100%; max-width: 100% }
.GenTablePlus td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px dotted silver  }

p.warning { border:1px solid #e7350e; border-radius: 4px; padding: 15px; font-size: 100%; color: #e7350e; background: #fff  }
p.warning i.fa { font-size: 200%; margin-right: 10px }


/* Gallery-footer */
.gallery-footer { background: #ebf0f0 url(/img/bg/bg-gallery.png) repeat-x center bottom; border-top:1px solid #c8c8c8; padding: 20px 0 }
.gallery-footer h3 { font-size: 100%; font-weight: 300; color: #252525; text-transform: uppercase }
.work-viewer { max-width: 100%; overflow: hidden }
.work-viewer img { margin: 16px 10px 0 0  }


/* Footer */
.footer { background: #252525 url(/img/bg/bg-footer.png); color:#c8c8c8; font-size: 80%; line-height: 200%  }
.footer-line { border-bottom: 1px dashed #5c5c5c; padding: 20px 0; margin-bottom: 20px }
.footer b {font-weight: 200; color: #dddddd }
.footer a {color: #b4b4b4 }
.footer a:hover { text-decoration: underline; color: #eaeaea }
.impressum { padding: 20px 0; color: #fff; font-size: 90%; text-align: center; color: gray }
.impressum span { color: #4d4d4d }

.newsletter input[type="button"], input[type="text"] { line-height:normal !important }
.newsletter { display: inline-block }
.newsletter input[type="text"]{ padding: 5px; margin-left: 8px; display: inline-block; vertical-align: middle; border: none; background: #fff; color: black; font-size: 110%; margin-right: 0px; border-bottom-left-radius: 3px; border-top-left-radius: 3px}
.newsletter input[type="button"]{ padding: 5px; border: none; margin-left: -2px; display: inline-block; vertical-align: middle; background: #e7350e; color: #fff; font-size: 110%; border-bottom-right-radius: 3px; border-top-right-radius: 3px; font-weight: 100 }
.icon-circle { display: inline-block; overflow: hidden; vertical-align: middle; background: gray; cursor: pointer; transition:background 0.3s ease; color: black; height: 30px; width: 30px; text-align: center; border-radius: 15px; margin: 0 5px }
.icon-circle i { font-size: 130%; display: inline-block; padding-top: 6px }
.icon-circle:hover { background:#21b4de }

.person { width: 48%;  float: left; margin-right: 2%; margin-bottom: 25px; box-sizing: border-box }
.person .face { width: 30%; overflow: hidden; float: left }
.person .face  img { max-width: 100% }
.person .about { padding: 10px 0 0 15px; float: left }


@media screen and (max-width: 950px) { 
	
	.container { position: relative; padding: 0 10px; max-width: 100%; width: auto; text-align: left; margin: 0 auto }
	 
    .mobile { display: block }
    
    img { max-width: 100% }
	
    .navigation{ height: auto; background:#21b4de; margin-top: -12px }
    .navi-container { width: 100%; margin: 0 auto }
    .menubox{ width: 33%; height: 150px; float: left; margin: 0 auto; text-align: center; color: #fff; font-size: 80%; line-height: 140%; border: none; border-radius: 0;}
    .menubox:hover { background:#e7350e }  
    .menubox img { margin: 15px 0 5px 0;  }
    .separator { display: none }
    
	.col-1-6 { width: 32%; margin: 0 0.5%; float: left }
	.col-2-6 { width: 99%; margin: 0 0.5%; float: left }
	.col-4-6 { width: 99%; margin: 0 0.5%; float: left }
} 


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

	.side-menu { width: 100%; float: left; margin: 15px 0; font-size: 90%; line-height: 130%; border: 1px solid #ebebeb; border-radius:4px; overflow: hidden }
	.side-menu a { display: inline-block; width: 100%; border-top:1px solid #ebebeb }
	.side-menu span { padding: 10px 8px; display: inline-block }
	.side-menu a:hover { background:#e7350e; color: #fff }
	
	.inlay.resized { width: 100%; float: left }
}


@media screen and (max-width: 750px) { 	
	
	.edu-box { width: 99%; margin: 10px 0 10px 0; float: left; border: 1px solid #d7d7d7; border-radius:3px; background: #fff; height:auto }
	
	.edu-box div a.button { background:#e7350e; color: #fff; border:1px solid #e7350e; }
	.edu-box:hover div a.button { background:#e7350e; color: #fff; border:1px solid #e7350e; }
	.edu-box:hover div a.button:hover { background:#e7350e; color: #fff; border:1px solid #e7350e; }
	
	form.edu-order { width: 95% }
} 



@media screen and (max-width: 550px) { 
	
	.icon-circle { display: block; float: left; margin: 15px }
	
	.vizual { background-image: none; background: #fff; height: auto; padding: 10px; overflow: hidden }
    .vizual .logo { float: left; max-width:100%; margin:10px 0 }
    .vizual .claim { display: none  }
    
	.col-1-6 { width: 49%; margin: 0 0.5%; float: left }
	.col-2-6 { width: 99%; margin: 0 0.5%; float: left }
	.col-4-6 { width: 99%; margin: 0 0.5%; float: left }
			
}