@font-face {
    font-family: 'kreonbold';
    src: url('kreon-bold-webfont.eot');
    src: url('kreon-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('kreon-bold-webfont.woff') format('woff'),
         url('kreon-bold-webfont.ttf') format('truetype'),
         url('kreon-bold-webfont.svg#kreonbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kreonlight';
    src: url('kreon-light-webfont.eot');
    src: url('kreon-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('kreon-light-webfont.woff') format('woff'),
         url('kreon-light-webfont.ttf') format('truetype'),
         url('kreon-light-webfont.svg#kreonlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kreonregular';
    src: url('kreon-regular-webfont.eot');
    src: url('kreon-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('kreon-regular-webfont.woff') format('woff'),
         url('kreon-regular-webfont.ttf') format('truetype'),
         url('kreon-regular-webfont.svg#kreonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	font-family: 'kreonlight';
	color: #52565a;
}

a {
	color: 29657e;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'kreonbold';
}

body {
	font-size: 200%;
}

.navbar-sh {
	font-size: 18px;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
	background-color: #fff;
	height: 140px;
	border-radius: 0;
	margin-bottom: 0;
}

.navbar-sh a,
 {
	color: #29657e !important;
	background: #fff !important;
}

.navbar-sh a:hover {
	color: #225367 !important;
	background: #fff !important;
}

.navbar-right {
	padding-right: 15px;
}

.navbar-sh .container {
	padding: 0;
}

.navbar-sh, h1, h2, h3, h4 {
	text-transform: uppercase;
}

h1 {
	padding-bottom: 35px;
}

.highlight,
p {
	padding-bottom: 15px;
}

.section-companies .highlight,
.section-companies p,
.section-websites .highlight,
.section-websites p,
.section-contact .highlight,
.section-contact p
 {
	padding-bottom: 55px;
}

.navbar-sh .nav {
	background: #fff;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
	padding-top: 20px;
}

.navbar-brand .navbar-logo {
    margin: 0 auto;
    height: 97px;

    /* */
    width: 74px;
    background: url(sh-logo.png);
    /* */
    width: 97px;
    background: url(hsr-logo.jpg);
    /* */
    width: 270px;
    background: url(hsr-logo2.jpg);
    /* */
    width: 168px;
    background: url(hsr-logo3.jpg);
    /* */
}

.navbar-brand .inner {
	display: inline-block;
	background: #fff;
	padding: 0 30px;
}

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

    .navbar-brand .navbar-logo {
        margin: 0 auto;
        height: 44px;

        /* */
        width: 65px;
        background: url(sh-logo-mobile.png);
        /* */
        width: 44px;
        background: url(hsr-logo-mobile.jpg);
        /* */
        width: 123px;
        background: url(hsr-logo2-mobile.jpg);
        /* * /
        width: 76px;
        background: url(hsr-logo3-mobile.jpg);
        /* */
    }

	.navbar-sh {
		height: 70px;
	}

	.navbar-brand {
		padding-top: 12px;
	}

	.navbar-sh .nav {
		margin-top: 16px;
	}

}

@media (max-width: 767px) {

	.navbar-right {
		float: right !important;
	}

}

@media (min-width: 768px) {

	.navbar-sh .container {
		background: url(horizontal-line.png) repeat-x 0 70px;
	}

	.navbar-sh .nav {
		margin-top: 50px;
	}

}

.navbar-logo > span {
	display: none;
}

.section {
	width:100%;
}

@media (max-width: 767px) {

	.section.section-description {
		background: url(watercolor-streched.jpg) repeat-y center;
		background-size:cover;
		text-align: center;
	}

}

@media (min-width: 768px) {

	.section.section-description {
		background-repeat: repeat-y;
		background-image:url(watercolor-streched.jpg);
		background-size:cover;
		text-align: center;
	}

}

.section .container {
	padding: 20px 0 100px 0;
}

.section.section-description .container {
	padding: 80px 0 120px 0;
}

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

	.section .container {
		padding: 20px 50px 100px 50px;
	}

	.section.section-contact .container {
		padding: 50px 0 120px 0;
	}

	.section.section-description .container {
		padding: 80px 50px 120px 50px;
	}


}

.section .container p {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.section.section-companies .overlay .middle {
	background-image: url(arrow-grey.png);
}

.section.section-companies .overlay .left,
.section.section-companies .overlay .right,
.section.section-companies {
	background-color:#52565a;
}

.section.section-companies .highlight,
.section.section-websites .highlight
 {
	max-width: 600px;
	margin: 0 auto;
}

.highlight p {
	display:inline;
	line-height: 36px;
  background: #ededed;
  color: #52565a;
  box-shadow:14px 0 0 #ededed, -14px 0 0 #ededed;
  padding: 5px 1px;
  margin:0 5px;
}

.overlay .middle {
	width: 172px;
	height: 29px;
}

.overlay {
	height: 29px;
	z-index: 1;
	position: relative;
	display: table-row;
}

.section .wrap {
	position: relative;
	top: -29px;
}

.overlay .left,
.overlay .right
{
	display: table-cell;
	width: 50%;
}

.section {
	text-align: center;
}

.section.section-companies,
.section.section-websites
{
	color: #fff;
}

.section.section-companies p {

}

.section.section-websites .overlay .left,
.section.section-websites .overlay .right,
.section.section-websites {
	/*background-color:#82a8b5;*/
	background-color:#52565a;
}

.section.section-websites .overlay .middle {
	/*background-image: url(arrow-blue.png);*/
	background-image: url(arrow-grey.png);
}

.section.section-contact .overlay .left,
.section.section-contact .overlay .right,
.section.section-contact {
	background-color:#ededed;
}

.section.section-contact .overlay .middle {
	background-image: url(arrow-eggshell.png);
}

.section.section-imprint {
	background-color:#fff;
}

.section.section-copyright {
	background-color:#fff;
	background-image: url(horizontal-line.png) repeat-x;
	padding-top: 20px;
}

.navbar-fixed-top {
	position: relative !important;
	z-index: -1000;
}

#companies-image {
	margin-top: 20px;
	width: 1180px;
	height: 344px;
	background-size:contain;
	background-repeat: no-repeat;
	display: inline-block;
	margin-left: -15px;
}

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

	#companies-image {
		width: 544px;
		height: 426px;
		background-image: url(hsr-companies-mobile.png);
		margin-left: 0;
	}

}

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

	#companies-image {
		width: 500px;
		height: 392px;
	}

}

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

	#companies-image {
		width: 400px;
		height: 313px;
	}

}

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

	#companies-image {
		width: 300px;
		height: 235px;
	}

}

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

	#companies-image {
		width: 250px;
		height: 196px;
	}

}

@media only screen and (min-width: 900px) {

	#companies-image {
		width: 768px;
		height: 326px;
		background-image: url(hsr-companies.png);
	}

}

@media only screen and (min-width: 1100px) {

	#companies-image {
		width: 943px;
		height: 326px;
		background-image: url(hsr-companies.png);
	}

}

@media only screen and (min-width: 1300px) {

	#companies-image {
		width: 943px;
		height: 326px;
		background-image: url(hsr-companies.png);
	}

}

.ul-links {
	margin: 0 auto;
	padding: 0;
	float: none;
	clear: both;

}

.ul-links li {
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 0;
}

.ul-links a {
	background: #a8c2cb;
	float: left;
	display: inline-block;
	padding: 20px 20px 30px 20px;
}

.ul-links li,
.ul-links a {
	min-height: 300px;
}


.ul-links a:hover {
	background: #d6e2e7;
	text-decoration: none;
}

.ul-links a .icon {
	opacity: 0.55;
	width: 235px;
	height: 132px;
	background-repeat: none;
	margin-bottom: 25px;
}

.ul-links a .label {
	font-size: 20px;
	color: #2a667f;
	background: url(link-arrow.png) no-repeat right top;
	border-radius: 0;
}

.ul-links a .description {
	display: block;
	width: 235px;
	font-size: 14px;
	color: #2a667f;
}

.ul-links a:hover .icon {
	opacity: 1;
}

.ul-links a[href='http://greenmill.de'] .icon {
	background-image: url(icon-greenmill.jpg);
}

.ul-links a[href='https://screwerk.com'] .icon,
.ul-links a[href='https://de.screwerk.com'] .icon,
.ul-links a[href='https://us.screwerk.com'] .icon {
	background-image: url(icon-screwerk.jpg);
}

.ul-links a[href='https://bsonic.com'] .icon {
	background-image: url(icon-bsonic.jpg);
}

.ul-links a[href='https://hsrobotics.com'] .icon {
	background-image: url(icon-hsrobotics.jpg);
}

.ul-links a[href='https://graph-it.com'] .icon {
  background-image: url(icon-graphit.jpg);
}
.ul-links a[href='https://aquattro.de'] .icon {
  background-image: url(icon-aquattro.jpg);
}

@media only screen and (min-width: 1200px) {

	.contact .contact-map,
	.contact .contact-info {
		display: inline-block;
	}

	.contact .contact-map {
		float: left;
	}

	.contact .contact-info {
		float: right;
	}

	.contact {
		position: relative;
		width: 1160px;
		height: 310px;
		background: #fff;
	}

	.contact .contact-overlay {
		position: absolute;
		top: 0;
		right: 0;
		background: url(map-overlay.png);
		width: 26px;
		height: 310px;
		z-index: 1;

	}


	.contact .contact-map {
		position: relative;
	}


}

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

	.contact .contact-overlay {
		position: absolute;
		left: 0;
		top: 0;
		background: url(map-overlay-mobile.png) 50% 0;

		width: 580px;

		height: 26px;
		z-index: 1;
	}


	.contact .contact-map {
		position: relative;
		margin: 0 auto;
		max-width: 100% !important;
		min-width: 390px !important;
	}

	.contact .contact-overlay,
	.contact .contact-map > iframe,
	.contact .contact-info {
		margin: 0 auto;
		max-width: 100% !important;
		min-width: 390px !important;
	}

}

.contact .address,
.contact .value {
	color: #999;
}

.contact-info {
	position: relative;
}

.contact .value {
	display: inline-block;
	background: #fff;
	padding-left: 20px;
	margin-left: -20px;
	z-index: 1;
	position: absolute;
	left: 50%;
}

.contact .field {
	display: inline-block;
	background: #fff;
	padding-right: 20px;
}

.contact .line {
	display: inline-block;
	background: url(horizontal-line-small.png) repeat-x 0 20px;
	width: 50%;
}

.contact .contact-map,
.contact .contact-map > iframe,
.contact .contact-info {
	width: 580px;
	height: 310px;
}

.contact .contact-map > iframe {
	border:0;
}

.contact .contact-info {
	background: #fff;
	padding: 40px;
	text-align: left;
}

.section-imprint .container {
	padding: 50px 0 50px 0;
}

.section-copyright .container {
	padding: 20px 0 0 0;
	color: #999;
}

.line {
	background: url(horizontal-line.png) repeat-x 0 16px;
}

.line h4 {
	padding: 0 40px;
	background: #fff;
	display: inline-block;
}

.imprint-info {
	padding-top: 50px;
	color: #999;
}