/*!
 * Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template-overviews/scrolling-nav)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/LICENSE)
 */


.footer-copyright{
	color: grey;
}

.clients-paragraph{

	text-align: center;

}

.floating-icons {
	text-align: center;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 25px); }
    to   { transform: translate(0, -0px); }    
}


.dwell-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 2000px;
    top: 4100px;

}

.disrn-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1800px;
    top: 4000px;
}

.thanotech-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1900px;
    top: 4200px;
}

.thinker-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1600px;
    top: 4350px;
}

.waves-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;
}

.babylon-graphic{
	width: 300px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;

}


h2{
	font-family: 'Ubuntu', sans-serif;
}


#Services{
  padding: 250px 0;
    background-image: url('../images/servicebackground-01.svg');
    background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
}

#About{
	padding: 0px 0px 200px 0px;	
  	margin: 200px 0px 200px 0px;
}

#Clients{
  	padding: 400px 0px 700px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#Contact{
	padding: 200px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 90%;
    background-position: right;
    background-repeat: no-repeat;
}

#Footer{
	background-image: url('../images/footerbackground-01.svg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    margin: 0 auto;
}

footer{
	color: black;
}

p{
	font-family: 'Raleway', sans-serif;
}


a{
	color: grey;
	text-decoration: none;
	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	font-family: 'Raleway', sans-serif;
}

a:hover{
	color: black;
	text-decoration: none;
-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}


.footer-paragraph{
	color: grey;
}

.location{
	color: grey;
}

section {
  padding: 150px 0;

}

h5{
	font-family: 'Ubuntu', sans-serif;

}

h4{
	font-family: 'Ubuntu', sans-serif;
}




.navbar{
	background-color: white;
}

.navbar ul li a{
	color: grey;
	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}

.navbar ul li a:hover{
	color: red;
}

.navbar-expand-lg .navbar-nav .nav-link{
	padding-left: 3em;

}


.navbar-brand{
	font-family: 'Ubuntu', sans-serif;
}

h1{
	float: left;
	color: black;
	justify-content: left;
	text-align: left;
	align: left;
	padding: 0 40% 0 0;
	font-family: 'Ubuntu', sans-serif;
}

.servicestitle{
	text-align: center;
	font-family: 'Ubuntu', sans-serif;
}

.servicessubhead{
		text-align: center;
		padding-bottom: 1em;
		padding-right: 100px;
		padding-left: 100px;
}

.banner{
	float: right;
	justify-content: left;
	color: black;
	text-align: left;
	padding: 0 40% 0 0;
}

.lead{
	font-size: 1rem;
	font-weight: 300;

}




.col-lg-12{
	padding-top: 125px;
}

.text-center{
	text-align: left;
}

.bike{
	width: 70%;
}

.bg-primary{
	color: white;
}

.card{
	border-radius: 25px;
	padding: 10px 20px 10px 20px;
	text-align: center;
}


.about-graphic{
	width: 60%;
	left: 50px;
	float: left;
}

.masthead {
  padding: 400px 0px 700px 0px;	
  height: 80vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');


}

.btn-success{
	background: #8EF07C;
	display: block;
	color: white;
	border-radius: 30px;
	border-color: #8EF07C;
	padding: .5em;
	padding-left: 3em;
	padding-right: 3em;
	text-decoration: none;
	font-size: 1em;
	margin-top: -10px;
	position: static;
	-webkit-transition-duration: 0.2s;
  	transition-duration: 0.2s;
  	cursor: pointer;

}

.btn-success:hover{
  background-color: #81DDFE;
  border-color: #81DDFE
}


.services{
	background-color: red;
}


.container{

position: relative;


}

.m-0{
	color: black;
}





.controls{
	border-radius: 500px;
}







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



.about-text{
	padding-top: 150px;
}


#Contact{
	padding: 200px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 70%;
    background-position: right;
    background-repeat: no-repeat;
}




}








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




.about-text{
	padding-top: 150px;
}

#Contact{
	padding: 200px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 80%;
    background-position: right;
    background-repeat: no-repeat;
}
}


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




}




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





}


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





}





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







#Contact{
	padding: 200px 0px 600px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
}


#Clients{
  	padding: 400px 0px 500px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
}
}


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



}




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






 .about-text{
 	padding-top: 100px;
 }

.clients-paragraph{
	padding-right: 0px;

}

#Services{
  padding: 100px 0;
    background-image: url('../images/servicebackground-01.svg');
    background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
}

#Contact{
	padding: 200px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 90%;
    background-position: right;
    background-repeat: no-repeat;
}


 .col-lg-12{
	padding-top: 125px;
	 vertical-align: top;
    display: inline-block;
    text-align: center;
}

.about-graphic{
	width: 60%;
display: block;
    margin: 0 auto;
}

#Clients{
  	padding: 200px 0px 300px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
}
}


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



}



@media only screen and (max-width: 1760px) {
 
 .about-text{
 	padding-top: 150px;
 }

#Contact{
	padding: 200px 0px 300px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
}

  .masthead {
  height: 80vh;
  min-height: 500px;
  background-size: 150%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');
  }
}

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









 .about-text{
 	padding-top: 50px;
 }

 #Services{
  	padding: 50px 0;
    background-image: url('../images/servicebackground-01.svg');
    background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
}

#About{
	padding: 0px 0px 25px 0px;	
  	margin: 200px 0px 200px 0px;
}

#Contact{
	padding: 200px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
}

  .masthead {
  height: 80vh;
  min-height: 500px;
  background-size: 150%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');
  }

  #Clients{
  	padding: 200px 0px 300px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 200%;
    background-position: center;
    background-repeat: no-repeat;
}
}


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





}


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




}




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






 
@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 0px); }
    to   { transform: translate(0, 0px); }    
}

.clients-paragraph{
	text-align: center;
}



.client-paragraph{

padding-right: 0px;

}

.about-graphic{
	margin-left: 60px;
	margin-right: 100px;
	width: 80%;

}

.about-text{
	text-align: center;
}

.about-text{
	padding-top: 50px;
}



.servicessubhead {
    text-align: center;
    padding-bottom: 1em;
    padding-right: 0px;
    padding-left: 0px;

}








.about-graphic{
	margin-left: 60px;
	margin-right: 100px;
	width: 80%;

}

.about-text{
	text-align: center;
}

#About{
	padding: 0px 0px 0px 0px;	
  	margin: 200px 0px 100px 0px;
}


#Clients{
  	padding: 300px 0px 200px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 250%;
    background-position: center;
    background-repeat: no-repeat;
}


#Contact{
	padding: 0px 0px 300px 0px;
	background-image: none;
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-position: 50px;
}

  .masthead {
  height: 80vh;
  min-height: 500px;
  background-size: 180%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');
  }

  h1{
	float: left;
	color: black;
	justify-content: left;
	text-align: left;
	align: left;
	padding: 0 30% 0 0;
}
}



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

#Clients{
  	padding: 300px 0px 300px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 250%;
    background-position: center;
    background-repeat: no-repeat;
}

.dwell-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 2000px;
    top: 4100px;

}

.disrn-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1800px;
    top: 4000px;
}

.thanotech-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1900px;
    top: 4200px;
}

.thinker-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1600px;
    top: 4350px;
}

.waves-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;
}

.babylon-graphic{
	width: 200px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;

}





}


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



}



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

#Clients{
  	padding: 200px 0px 300px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 250%;
    background-position: center;
    background-repeat: no-repeat;
}


}


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



}


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



}


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


}



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






}


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



}


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

#Clients{
  	padding: 200px 0px 200px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 250%;
    background-position: center;
    background-repeat: no-repeat;
}

}



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



}


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


#Contact{
	padding: 100px 0px 400px 0px;
	background-image: url('../images/contactbackground-01.svg');
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
}


 .clients-paragraph{
	text-align: center;
	padding-top: 75px;
}





#Contact{
	padding: 100px 0px 300px 0px;
	background-image: none;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

  .masthead {
  height: 80vh;
  min-height: 500px;
  background-size: 200%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');
  }

   h1{
	float: left;
	color: black;
	justify-content: left;
	text-align: left;
	align: left;
	padding: 0 6% 0 0;
}


.servicessubhead{
		text-align: center;
		padding-bottom: 1em;
		padding-right: 0px;
		padding-left: 0px;

}
}

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



}



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


}

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



}


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



}


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



#Contact{
	padding: 50px 0px 300px 0px;
	background-image: none;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

}

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



}


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



}




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




}


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



}




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




}


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




}





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




}


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

#Clients{
  	padding: 50px 0px 50px 0px;	
  	margin: 100px 0px 100px 0px;	
	background-image: url('../images/clientsbackground-01.svg');
    background-size: 250%;
    background-position: center;
    background-repeat: no-repeat;
}


}





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





}




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





}



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





}



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




}



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



}


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


.dwell-graphic{
	width: 175px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 2000px;
    top: 4100px;

}

.disrn-graphic{
	width: 160px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1800px;
    top: 4000px;
}

.thanotech-graphic{
	width: 160px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1900px;
    top: 4200px;
}

.thinker-graphic{
	width: 160px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1600px;
    top: 4350px;
}

.waves-graphic{
	width: 160px;
	animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;
}

.babylon-graphic{
	width: 160px;
	animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    left: 1200px;
    top: 4400px;

}


}



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



}



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



}



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




}



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




}



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




}



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




}



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



.about-graphic{
	padding-right: 25px;
}





}



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




}



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




}



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




}





@media only screen and (max-width: 370px) {
 
.about-graphic{
	padding-right: 25px;
}





  .masthead {
  height: 60vh;
  min-height: 500px;
  background-size: 220%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/bikebackground-01-01.svg');
  }

.servicessubhead{
		text-align: center;
		padding-bottom: 1em;
		padding-right: 50px;
		padding-left: 50px;
}


.nav-link{
	display: block;
}
}


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





}


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




}



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




}



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




}


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




}


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




}


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




}

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

.about-graphic{
	padding-right: 40px;
}



}



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




}


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





}



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





}






.navbar-custom {
    background-color: white;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: grey);

}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: grey;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: black;

}