:root{
--varstreetheight: 339px;
--varmarqueeheight: 25px;
--varcontainerheight: 364px;
--varcpwidth: 1200px;
--varcpcontainersubwidth: 400px;
}

body{
	position:relative;
	font-family: 'Quicksand', sans-serif, Arial;
	text-align:justify;
}

img{
	border:0;
}

a.navbar-brand {
          padding: 0px 0px 0px 5px;
       }

.navbar-custom {
	background-color: white;
	font-size: 1.5em;	
}

.navbar-custom .navbar-nav>.active>a,
.navbar-custom .navbar-nav>.active>a:focus{
    background-color: #62B1F6;
}

main{
	transform: translateY(414px);;
}

h1, h2, h3{
  opacity: 0.6;
  font-weight: 100;
}

.hero {
  height: var(--varstreetheight);
}

.hero-img {
  background: transparent url(../img/ContractPartners-2481x339.png) repeat-x 50% 0;
}

#container{
	position:fixed;
	top:0px;
	height:var(--varcontainerheight);
	width:100%;
	z-index:1;
}

#streetimg{
	data-scrollingwidth: 2481px;
}

.marquee {
  position: relative;
  height: var(--varmarqueeheight);
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.marquee div {
  position: absolute;
  left: 100%;
  display: block;
  width: 500%;
  min-width: 2400px;
  overflow: hidden;
  animation: marquee 50s linear infinite;
}

.marquee div:hover {
    animation-play-state: paused
}

.marquee span {
  float: left;
  min-width: 400px;
}

@keyframes marquee {
  100% {left:-100%;}
}

.CPcontainer{
	width: var(--varcpwidth);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 20px 0px 20px;
}

.CPcontainersub{
	max-width: var(--varcpcontainersubwidth);
	float: left;
}

.CPcontainerleft{
	padding:0px 10px 0px 20px;
}

.CPcontainermid{
	padding:0px 10px 0px 10px;
}

.CPcontainerright{
	padding:0px 20px 0px 10px;
}

.SubWrapper{
	width: var(--varcpwidth);
	margin-left: auto;
	margin-right: auto;
}

.SubWrapper h3{
	margin-top: 0px;
}

#work{
	clear: both;
}

#team{
	clear: both;
}	

#quote{
	padding-bottom: 30px;
}

#contact{
	clear: both;
	padding-bottom:50px;
}

footer {
    position:fixed;
    bottom:0;
    left:0;
	width:100%;
    height:20px;
	background-color: white;
	opacity: 0.9;
	z-index: 10;	
}

#copyright{
	font-size: 70%;
	font-color: grey;
	padding-right: 20px;
	float:right;
}

@media screen and (max-width: 1024px){
:root{
	--varcpwidth: 100%;
	--varcpcontainersubwidth: 100%;
	--varstreetheight: 170px;
	--varcontainerheight: 195px;
}

main{
	transform: translateY(245px);
	font-size: 1.2em;
}

.marquee div {
  animation: marquee 20s linear infinite;
}

.navbar-custom {
	font-size: 1em;	
}


.CPcontainer{
	padding: 10px 10px 10px 10px;
}
 
.CPcontainersub{
	max-width: 100%;
	float: none;
}

.CPcontainerleft{
	padding:0px 10px 0px 10px;
}

.CPcontainermid{
	padding:0px 10px 0px 10px;
}

.CPcontainerright{
	padding:0px 10px 0px 10px;
}

.hero-img {
  background: transparent url(../img/ContractPartners-1244x170.png) repeat-x 50% 0;
}

footer{
	position: static;
	transform: translateY(245px);
}

#copyright{
	
	padding-right: 10px;
}

}