/* =Kunde: 	ARB Tec
-----------------------------------------------------------------------------*/

/* =Imports
-----------------------------------------------------------------------------*/

@import url("https://use.typekit.net/ktb2noh.css");


/* =General
-----------------------------------------------------------------------------*/

html  {
	/* 2 */
	-webkit-text-size-adjust: 100%;
	/* 3 */
	background-color: rgba(226,229,230,1);
	color: #666;
	font: 300 18px/1.5 "aktiv-grotesk", Arial, sans-serif;
}
body  {
	text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
header, section, footer {
	display: block;
	clear: both;
	float: none;
}

section, footer {
	background-color: rgba(226,229,230,1);
	
}

section, .abstand {
	margin-bottom: 12px;
}

section > div {
	padding: 50px 50px 100px;
}

/* =Links
-----------------------------------------------------------------------------*/

a, .uk-link {
  color: rgba(0,0,0,.5	);
  text-decoration: none;
  cursor: pointer;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
a:hover, a:focus, a:hover, .uk-link:hover {
  color: rgba(0,0,0,1);
  text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
a:focus, a:hover {
	color: rgba(255,81,0,1);
}
::-moz-selection { 
	background: rgba(0,0,0,1); color: #fff; text-shadow:none; 
}
::selection { 
	background: rgba(255,81,0,1); color: #fff; text-shadow:none; 
}



/* =Typography
-----------------------------------------------------------------------------*/

h1,h2,h3,p {
	font-family: "aktiv-grotesk", Arial, sans-serif;
	font-weight: 300;
	color: rgba(84,86,90,1);
	display: block;
}
	
h1 {
	margin-bottom: 50px;	
	margin-top: 30px;
	color: rgba(255,81,0,1);
}

h2 {
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 50px;
}

h3 {
}

p,li {
	font-size: 1.1em;

}

.projekttext p {
	width: 66%;
}
.lead p {
	width: 100%;
}
.box p {
	width: 100%;
	color: rgba(255,255,255,1);
}

strong, b {
	font-weight: 700;
}

hr {
	
}

/* =Color
-----------------------------------------------------------------------------*/
.grey {
	background-color: rgba(84,86,90,1);
	color: rgba(255,255,255,1);
}

.grey-80 {
	background-color: rgba(84,86,90,.8);
	color: rgba(255,255,255,1);
}

.lightgrey {
	background-color: rgba(226,229,230,1);
}
.orange {
	background-color: rgba(255,81,0,1);
	color: rgba(255,255,255,1) !important;
}
.white {
	background-color: rgba(255,255,255,1);
}
.text-grey {
	color: rgba(84,86,90,1);
}
.text-orange {
	color: rgba(255,81,0,1);
}
.text-white {
	color: rgba(255,255,255,1) !important;
}
.icon {
	padding: 5px;
}
/* =Header
-----------------------------------------------------------------------------*/

.uk-sticky-fixed {
	height: 90px;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}

.uk-sticky-fixed.uk-active {
	height: 55px;
}

.uk-sticky-fixed > div > nav > .logo > a > img {
	height: 60px;
	position: absolute;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
	top: 15px;
	right: 0;
}
.uk-sticky-fixed.uk-active > div > nav > .logo > a > img {
	height: 30px;
	top: 10px;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
.uk-sticky-fixed > div > nav {
    padding-top: 10px;
}
.uk-sticky-fixed.uk-active > div > nav {
    padding-top: 10px;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}

.uk-sticky-fixed.uk-active > div > nav > .logo > img {
	top: 15px;
	height: 20px;
}
.hamburger {
	margin-top: 0px;
}
/* =Navigation
-----------------------------------------------------------------------------*/
.uk-sticky-fixed .uk-navbar-nav > li > a {
    column-gap: .25em;
    min-height: 80px;
    padding: 0 30px 0 0;
	font: 300 1.4rem/1.5 "aktiv-grotesk", Arial, sans-serif;
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
	text-transform: capitalize;
}
.uk-sticky-fixed.uk-active .uk-navbar-nav > li > a {
    min-height: 35px;
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.uk-navbar-nav > li > a {
	color: rgba(84,86,90,1);
}

.uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a.uk-active, .uk-navbar-nav > li.uk-active > a{
	color: rgba(255,81,0,1);
}
.uk-sticky-fixed .uk-drop {
	top: 70px !important;
}

.uk-sticky-fixed.uk-active .uk-drop {
	top: 35px !important;
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

/* =Offcanvas
-----------------------------------------------------------------------------*/

.uk-offcanvas-bar {
	background-color: rgba(255,81,0,1);
}
.uk-offcanvas-bar ul {
	margin-top: 50px;
}
.uk-offcanvas-bar ul li a {
	text-transform: uppercase;
	font-size: 1.7em;
	color: rgba(255,255,255,1) !important;
}
.uk-offcanvas-bar ul li a.uk-active {
	font-weight: 700;
}

/* =Seitenaufbau
-----------------------------------------------------------------------------*/
.startbox > div > div > h3 {
	font-size: 2em;
	font-weight: 700;
	color: rgba(84,86,90,1);
}

.firma  ul > li {
	list-style: none;
}

.content ul {
	padding-left: 0px;
	margin-left: 30px;
}

.content ul li{
   list-style: none;
}
.content ul li::before{
   content: '';
   display: inline-block;
   height: 20px;
   width: 20px;
   margin-left: -30px;
   background: url(img/bulletpoint_orange.png) left bottom no-repeat;
   background-size: 15px auto;
   padding-right: 10px;
}
.outer{
    bottom: -50px;
    left: 40px;
}


/* =Slider
-----------------------------------------------------------------------------*/
.slidetext > div  {
	top: 120px;
	left: calc((100vw - 1200px) / 2);
	position: absolute;
	max-width: 100%;
	width: 1200px;
	display: block;
}
.slidetext > div > h1 {
	display: block;
	padding: 3px 20px;
	font-weight: 200;
	font-size: 2.5em;
	color: rgba(255,255,255,1);
	margin-bottom: 0px;	
	margin-top: 0px;
	text-shadow: 2px 2px 8px rgba(0,0,0,.6);
}
.ol-orange {
	height: calc(100vh - 90px);
}


.pfeile {
	margin-top: -50px;
	position: relative;
	max-width: 1280px;
}

.pfeile > a {
	float: right;
	background-color: rgba(255,255,255,.85);
	color: rgba(84,86,90,1) !important;
	padding: 12px 15px;
	margin-left: 2px;
}
.pfeile > a:hover {
	background-color: rgba(255,81,0,1);
	color: rgba(255,255,255,1) !important;
}

.arrow  {
	position: relative;

}
.arrow > a {
	float: right;
	top: -430px;
}
.alert {
	max-width: 90%;
	width: 1200px;
	background-color: rgba(68,71,73,1);
	color: rgba(255,255,255,1) !important;
}
.alert p, .alert p strong {
	color: rgba(255,255,255,1) !important;
}


/* =Module
-----------------------------------------------------------------------------*/

/* =Plugins
-----------------------------------------------------------------------------*/

/* =Filter
-----------------------------------------------------------------------------*/
.uk-subnav {
    padding-left: 18px;
	margin-top: 50px;
}
.uk-subnav > * {
    flex: none;
    padding-left: 2px;
	padding-top: 2px;
    position: relative;
}
.uk-subnav-pill > * > :first-child {
    padding: 3px 20px;
    background: 0 0;
    color: rgba(68,71,73,1);
    font-size: 1rem;
    text-transform: capitalize;
	background-color: rgba(226,229,230,1);
}
.uk-subnav-pill > *:hover > a {
	background-color: rgba(255,81,0,1);
	color: rgba(255,255,255,1);
}
.uk-subnav-pill > .uk-active > a {
	background-color: rgba(68,71,73,1);
}

/* =Lightbox
-----------------------------------------------------------------------------*/
.gallerie {
	padding-top: 50px;
}

.uk-lightbox {
	background-color: rgba(221,222,221,.9);
}

.uk-lightbox-toolbar {
	background-color: rgba(255,81,0,0);
}

.uk-lightbox-button {
	background-color: rgba(221,222,221,0);
	color: rgba(255,81,0,1);
}

.uk-lightbox-button:hover {
	background-color: rgba(255,81,0,1);
	color: rgba(255,255,255,1);
}

.uk-lightbox-toolbar * {
    background-color: rgba(221,222,221,0);
	color: rgba(255,81,0,1);
	padding: 6px;
}

.uk-lightbox-toolbar *:hover {
    background-color: rgba(255,81,0,1) !important;
	color: rgba(255,255,225,1) !important;
	padding: 6px;
}

/* =Formulare
-----------------------------------------------------------------------------*/

.forms input, .forms textarea {
	background-color: rgba(226,229,230,1);
}

/* = Footer
-----------------------------------------------------------------------------*/

footer {
	padding-top: 30px;
	padding-bottom: 30px;
}
footer ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
footer ul li {
	float: left;
	display: block;
	font-size: .9rem;
}
footer ul li::after {
	content: ",";
	margin-right: 6px;
}
footer ul li:first-of-type {
	display: block;
	float: none;
	clear: both;
	font-weight: 700;
}
footer ul li:first-of-type::after,
footer ul li:last-of-type::after {
	content: "";
}
footer ul li::before {
	content: none;
}
footer a {
	font-size: .9rem;
}
.kontaktadresse ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/* =Misc
-----------------------------------------------------------------------------*/

.player .vp-video-wrapper.transparent {
    background-color: rgba(0,0,0,1) !important;
}
.colophon{
	display:block;
	position:fixed;
	bottom:25px;
	left:25px;
	width:25px;
	height:25px;
	background:url(img/Designheit-Bildmarke.svg) no-repeat right bottom;
	opacity: 0.1;
	filter: alpha(opacity=10);
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.colophon:hover{
	opacity:1;
	filter: alpha(opacity=100);
	}

.sicherung {
	display: none;
}

#cookie_banner-wrapper {
	 z-index: 9001;
	 position: relative;
}
 @-webkit-keyframes fadeInBottom {
	 0% {
		 opacity: 0;
		 -webkit-transform: translateX(20px);
		 transform: translateX(20px);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: translateX(0);
		 transform: translateX(0);
	}
}
 @keyframes fadeInBottom {
	 0% {
		 opacity: 0;
		 -webkit-transform: translateY(20px);
		 -ms-transform: translateY(20px);
		 transform: translateY(20px);
	}
	 100% {
		 opacity: 1;
		 -webkit-transform: translateY(0);
		 -ms-transform: translateY(0);
		 transform: translateY(0);
	}
}
 #cookie_banner-wrapper .cookie_container {
	 position: fixed;
	 bottom: 0;
	 overflow: hidden;
	 padding: 15px;
	 background: rgba(238,239,238,1);
	 color: rgba(0,0,0,.6);
	 box-sizing: border-box;
	 -webkit-animation-fill-mode: both;
	 animation-fill-mode: both;
	 -webkit-animation-duration: 0.8s;
	 -moz-animation-duration: 0.8s;
	 -o-animation-duration: 0.8s;
	 animation-duration: 0.8s;
	 -moz-animation-fill-mode: both;
	 -o-animation-fill-mode: both;
	 -webkit-animation-name: fadeInBottom;
	 animation-name: fadeInBottom;
}
 @media (max-width: 499px) {
	 #cookie_banner-wrapper .cookie_container {
		 left: 0;
		 right: 0;
	}
}
 @media (min-width: 500px) {
	 #cookie_banner-wrapper .cookie_container {
		 width: 300px;
		 bottom: 20px;
		 right: 20px;
	}
}
 @media screen and (min-width: 768px) {
	 #cookie_banner-wrapper .cookie_container {
		 font-size: 0.9em;
	}
}
 #cookie_banner-wrapper .cookie_container .cookie_message a {
	 text-decoration: none;
	 color: rgba(0,0,0,1);
}
 #cookie_banner-wrapper .cookie_container .cookie_message a:hover {
	 color: rgba(0,0,0,.6);
}
 #cookie_banner-wrapper .cookie_container .cookie_message a:active {
	 color: rgba(0,0,0,1);
}
 #cookie_banner-wrapper .cookie_container .cookie_btn {
	 background-color: rgba(255,255,255,1);
	 color: rgba(0,0,0,.6);
	 border-radius: 5px;
	 border: 1px solid transparent;
	 padding: 6px 12px;
	 text-align: center;
	 cursor: pointer;
	 width: 100%;
}
 #cookie_banner-wrapper .cookie_container .cookie_btn:hover {
	 color: rgba(0,0,0,1);
}
 @media print {
	 #cookie_banner-wrapper {
		 display: none;
	}
}
 

/* @l – Laptop / Tablet Landscape */

@media (max-width: 1200px) {

.startbox > div {
	margin-top: -100px;
}
.pfeile {
	bottom: 90px;
}
.colophon{
	display:none;
}
.slidetext > div  {
	top: 60px;
	left: 20px;
	width: calc(100% - 40px);
}

}
/* @m – Tablet Portrait */
@media (max-width: 960px) and (orientation: portrait) {

.startbox > div {
	margin-top: -180px;
}
.startbox > div > div > h2 {
	margin-top: 25px;
}
.uk-offcanvas-bar ul li a {
	font-size: 1.3em;
}

.pfeile {
	bottom: 132px;
}
.projekttext p {
	width: 100%;
}
.uk-sticky-fixed > div > nav,.uk-sticky-fixed.uk-active > div > nav {
    padding-top: 10px;
}
.uk-sticky-fixed,
.uk-sticky-fixed.uk-active {
	height: 65px;
}
.uk-sticky-fixed > div > nav > .logo > a > img,
.uk-sticky-fixed.uk-active > div > nav > .logo > a > img {
	height: 40px;
	top: 15px !important;
}
.uk-sticky-fixed.uk > div > nav > .logo > a:first-of-type > img,
.uk-sticky-fixed.uk-active > div > nav > .logo > a:first-of-type > img {
	top: 10px;
	display: block;
}
.uk-sticky-fixed > div > nav > .logo > a:nth-of-type(2) > img,
.uk-sticky-fixed.uk-active > div > nav > .logo > a:nth-of-type(2) > img {
	height: 6px;
	top: 4px;
}

.colophon{
	display:none;
}
section > div {
    padding: 10px 10px 50px;
}
.alert {
	position: relative !important;
	max-width: 100%;
}

}

/* @m – Phone Landscape */
@media (max-width: 960px) and (orientation: landscape) {
h1 {
	margin-top: 60px;
}
.startbox > div {
	margin-top: 0px;
}
.uk-offcanvas-bar ul li a {
	font-size: 1.3em;
}

.pfeile {
	bottom: 150px;
}
.projekttext p {
	width: 100%;
}
section > div {
    padding: 10px 10px 50px;
}
.outer{
    bottom: -50px;
    left: 40px;
}
.alert {
	position: relative !important;
	max-width: 100%;
}

}

/* @s – Phone Portrait */
@media (max-width: 640px) {
h1 {
	margin-top: 60px;
}
.slidetext > div {
	left: 30%;
	max-width: 400px;
}

.slidetext > div > h1 {
	font-size: 1.6em;
}
.pfeile {
	margin-top: 90px;
}
.startbox > div {
	margin-top: -200px;
}
.pfeile {
	bottom: 153px;
}

.projekttext p {
	width: 100%;
}
.slidetext > div {
	top: calc(50% - 130px);
}

.slidetext > a {
	top: calc(50% - 43.5px);
}

.slidetext > a.slidebild{
	top: calc(50% - 6px);
}

.slidetext > div > h3 {
	padding: 2px 12px;
	font-size: 1.5em;
	margin: 0 0 2px;
}

footer ul li::after {
	content: "";
}
footer ul li {
	display: block;
	float: none;
	clear: both;
}
.colophon{
	display:none;
}
section > div {
    padding: 10px 10px 50px;
}
.outer{
    bottom: -50px;
    left: 40px;
}
.alert {
	position: relative !important;
	max-width: 100%;
	margin-top: -130px;
}

  }