@font-face {
    font-family: trivial;
    src: url("font/Trivial-Regular.otf") format("opentype");
}

@font-face {
    font-family: trivialBold;
    font-weight: bold;
    src: url("font/Trivial-Bold.otf") format("opentype");
}

body{
font-family: 'trivial', sans-serif;
margin:0 auto;
position:relative!important;
}

.fadeIn{
	display:none;
}

body *{
	box-sizing:border-box;
}

.noscroll{
	overflow:hidden;
}

img{
	max-width:100%;
	height:auto;
}

.btn{
	text-decoration:none;
	display:inline-block;
	padding:20px 40px;
	color:#fff;
	background:red;
	text-transform: uppercase;
	font-size:18px;
	text-align: center;
}

.btn:hover{
	cursor:pointer;
	background:#fff;
	color:red;
	transition:.3s ease-in-out;
}

@media (max-width:600px){

.btn{
	font-size:16px;
}

}

#mainNav{
	width:100%;
	padding:20px;
	position:absolute;
	z-index:10000;
	top:0;
	left:0;
	right:0;
	transition:.3s ease-in-out;
	clear:both;
	overflow:hidden;
}

.navActive{
	height:100%;
}

.bodyFixed{
	overflow:hidden;
}

#mainNav img{
	max-height:128px;
	float:left;
	margin:0 4%;
	width:128px;
	transition:.3s ease-in-out;
}

#mainNav .menuBtn{
	width:40px;
	margin-top:20px;
	float:right;
	display:none;
}

#mainNav .menuBtn .line{
	background:red;
	border:2px solid red;
	transition:.3s ease-in-out;
}

#mainNav .menuBtn .topLine{
	margin-bottom:10px;
		transform:rotate(0deg);
}

#mainNav .menuBtn .bottomLine{
		transform:rotate(0deg);
}

#mainNav .menuBtn:hover{
	cursor:pointer;

}

#mainNav .menuBtn:hover .line{
	background:red;
	border:2px solid red;

}

#mainNav .menuBtn.active .topLine{
	transform:rotate(-45deg);
	margin-bottom:0;
}

#mainNav .menuBtn.active .bottomLine{
	transform:rotate(45deg);
	margin-top:-4px;

}


.menuBtns{
	display:inline-block;
	float:right;
	max-width:65%;
	width:100%;
}


#mainNav.scrolled {
  background-color: rgba(0,0,0,0.95) !important;
  transition: background-color 200ms linear;
  position:fixed;
	top:0;
	left:0;
	right:0;
  padding:20px;
  transition:all .3s ease-in-out;
 	-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5);
	box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5);
}


#mainNav .navBtn{
	margin:1% 2% 0 2%;
	vertical-align:top;
	color:#fff;
	text-decoration:none;
	text-align:center;
	padding:2%;
	border-bottom:none;
	transition:.3s ease-in-out;
	position: relative;
	display:inline-block;
	width:12%;
	font-size:16px;
  white-space: nowrap;
}


#mainNav .navBtn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color:red;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

#mainNav .navBtn:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

#mainNav.scrolled .navBtn{
	color:#fff;
	padding:10px;
}

#mainNav.scrolled .navBtn:before {
  background-color: red;
}

#mainNav.scrolled img{
	margin-top:0;
	width:60px;
	transition:.3s ease-in-out;
}

#mainNav.scrolled .menuBtn{
	margin-top:15px;
}

#mainNav.scrolled .menuBtn:hover .line{
	background:#fff;
	border:2px solid #fff;
	cursor:pointer;
}

#mainNav.fixed{
	position:fixed;
}

@media (min-width:1201px){
.menuBtns{
	display:inline-block!important;
}

.menuBtn{
	display:none;
}
}

@media (max-width:1200px){

#mainNav{
	background:rgba(0,0,0,0.98);

}

#mainNav .menuBtn{
	display:block;
}

.menuBtns{
	display:none;
	width:auto;
	max-width:none;
	float:none;
	clear:both;
	overflow:auto;
	margin-top:120px;
}

#mainNav img{
		max-width:60px;
}

#mainNav .navBtn{
	margin:0 auto;
	text-align:left;
	color:#fff;
	padding:20px 0;
	display:block;
	width:auto;
	font-size:24px;
}

#mainNav .navBtn:not(:last-child){
	margin-bottom:10px;
}

#mainNav .navBtn:hover{
	color:red;
}

#mainNav .navBtn:hover:before{
	background-color:red;
}

}


/*** End of mainNav styling ***/

/*** Start of top panel styling ***/

.topPanel{
	position:relative;
	background:url(images/backgrounds/spanners.jpg);
	background-size:cover;
	width:100%;
	padding:15%;
	border-bottom:3vw solid #fff;
	text-align:center;
}

.topPanel h1{
	color:#fff;
	font-size:3.5vw;
	font-family:trivialBold,sans-serif;
	font-weight:700;
	text-align:center;
	text-transform:uppercase;
	margin-bottom:5px;
}

.topPanel span{
	display:block;
	font-size:2vw;
}

.topPanel .underline{
	width:60%;
	margin:10px auto 30px auto;
	height:0.3vw;
	background:#fff;
}




@media (max-width:1200px){

.topPanel{
	padding:30% 20px;
}


.topPanel h1{
	font-size:7vw;
}

.arrow{
	font-size:4vw;
}

}

@media (max-width:600px){
.topPanel{
	padding:60% 20px;
}

.topPanel h1{
	font-size:7vw;
}

.topPanel h1 span{
	font-size:4vw;
}

.topPanel a{
	font-size:16px;
}

}


/*** End of top panel styling ***/


/*** Start of infoSection styling ***/

.infoSection{
	width:100%;
	clear:both;
	overflow:hidden;
	border-bottom:3vw solid #fff;
	transition: 0.3s ease-in-out;
}

.infoSection h2{
	font-size:2vw;
}

/*** End of infoSection styling***/

/*** Start of about styling***/


.about{
	background:#000 url(images/backgrounds/hand-with-tool.jpg) no-repeat;
	background-size:100% auto;
	position: relative;
}

.about .textBlock{
	max-width:50%;
	padding:3% 3%;
	margin:2% 0;
}

.about .textBlock h2{
	font-size:36px;
	margin-top:0;
	color:#fff;
}


.about .textBlock h2 span{
	display:block;
	font-size:18px;
	text-decoration:underline;
	margin-bottom:30px;
}

.about .textBlock p{
	font-size:1vw;
	color:#fff;
	margin-bottom:40px;
	font-family:arial, sans-serif;
}


@media (max-width:1200px){

	.about{
		background:#000 url(images/backgrounds/hand-with-tool-1150.jpg) no-repeat;
		background-size:100% auto;
	}

.about .textBlock{
	max-width:80%;
	width:auto;
	margin:0 auto;
	padding:28% 2% 4% 2%;
}

.about .textBlock h2{
	font-size:4vw;
}


.about .textBlock h2 span{
	font-size:2vw;
}
.about .textBlock p{
	font-size:1.4vw;

}

}

@media (max-width:670px){

	.about .textBlock{

		padding:18% 2% 18% 2%;
	}

.about .textBlock h2{
	font-size:28px;
}


.about .textBlock h2 span{
	font-size:16px;
}
.about .textBlock p{
	font-size:16px;

}

}


/*** End of about styling***/

/*** Start of skills styling ***/

.skills{
	background: rgb(1,1,1);
	background: linear-gradient(180deg, rgba(1,1,1,1) 0%, rgba(65,65,65,1) 100%);
}

.skills .textBlock{
	text-align:center;
	max-width:700px;
	margin:5% auto;
}

.skills .textBlock h2, .skills .textBlock p{
	color:#fff;
}

.skills .textBlock h2{
	font-size:2vw;
	margin-bottom:0;
}

.skills .textBlock h2 span{
	display:block;
	font-size:18px;
	text-decoration:underline;
	margin-bottom:30px;
}

.skills .textBlock p{
	font-size:20px;
}

.skillBoxes{
	margin:5% auto 15% auto;
	text-align:center;
}

.skillBoxes .skill{
	display:inline-block;
	width:20%;
	margin:0 2.5%;
	background:#fff;
	vertical-align:top;
	min-height:450px;
	border-radius:5px;
	-webkit-box-shadow: 0px 14px 13px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 14px 13px -2px rgba(0,0,0,0.3);
box-shadow: 0px 14px 13px -2px rgba(0,0,0,0.3);
}

.skillsText{
	padding: 10px 20px;
}

.skillBoxes .skill p, .skillBoxes .skill h3{
	color:#000;
	text-align: left;
}

.skillBoxes .skill p{
	font-family: arial,sans-serif;
}

.skillBoxes .skill h3{
	font-size:24px;
	margin-top:0;
}


.skillBoxes .skill span{
	font-size:4vw;
}


.skillBoxes .skill:hover{
	background:#fff;
}

.skillBoxes .skill img{
	width:100%;
}

.skillBoxes .skill:not(:hover),.skillBoxes .skill:not(:hover) p, .skillBoxes .skill:not(:hover) span,.skillBoxes .skill:not(:hover) h3{
	transition:.5s ease-in-out;
	transform: translateY(0px);
}

.skillBoxes .skill:hover,.skillBoxes .skill:hover p, .skillBoxes .skill:hover span,.skillBoxes .skill:hover h3{
	transition:.5s ease-in-out;
	cursor:cursor;
	transform: translateY(-10px);
}

@media (max-width:1200px){
	.skills{
	padding:0 20px;
}

.skillBoxes .skill{
	width:45%;
	margin:0 2.5% 40px 2.5%;
}

.skills .textBlock h2{
	font-size:4vw;
}

}

@media (max-width:670px){

.skills .textBlock h2{
	font-size:36px;
}

.skills .textBlock p, .skillBoxes .skill p{
	font-size:16px;
}


.skillBoxes .skill span{
	font-size:25vw;
}

	.skillBoxes .topRow:nth-child(even), .middleItem{
	border-right:none;
	border-left:none;
}

.skillBoxes .skill{
	display:block;
	width:70%;
	margin:auto 15%;
}

.skillBoxes .skill:not(:last-child){
	margin-bottom:5%;
}

}


/***End of skills section styling ***/

/***Start of Air ride styling***/


.airRide{
	background:#000 url(images/backgrounds/van-front-on.jpg)no-repeat top center;
  background-size:cover;
  padding:10%;
}

.airRide .textBlock{
	text-align:center;
	max-width:700px;
	margin:5% auto;
  color:#fff;
}

.airRide .textBlock h2{
	font-size:2vw;
	margin-bottom:0;
}

.airRide .textBlock h2 span{
	display:block;
	font-size:18px;
	text-decoration:underline;
	margin-bottom:30px;
}

.airliftSuppliers{
  max-width:1200px;
  margin:0 auto;
}

.airliftSuppliers .supplier{
  display:inline-block;
  vertical-align:top;
  width:23%;
  color:#fff;
  text-align:center;
  margin:0 1%;
}

.airliftSuppliers .supplier:not(:hover),.supplier:not(:hover) p{
	transition:.5s ease-in-out;
	transform: translateY(0px);
}

.airliftSuppliers .supplier:hover,.supplier:hover p{
	transition:.5s ease-in-out;
	cursor:cursor;
	transform: translateY(-10px);
  color:red;
}

@media (max-width:1200px){

  .airRide{
    padding:10% 20px;
  }

  .airliftSuppliers .supplier{
    width:48%;
  }

  .airRide .textBlock h2{
  	font-size:4vw;
  }

}

@media (max-width:500px){
  .airliftSuppliers .supplier{
    width:100%;
    margin:40px auto;
  }
}

/***End of Air ride styling***/

/**Start of Slick styling**/

.slickSlider{
	margin:0% auto 0% auto!important;
	clear:both;
	padding:20px 0;
}

.mobile{
  display:none!important;
}

.slick-dots{
	bottom:20px!important;
}

.slick-dots li button, .slick-dots li{
	width:60px!important;
	height:60px!important;
	color:#fff!important;
	margin:0 30px;
}

.slick-dots li button:before{
	width:60px!important;
	height:60px!important;
	font-size:30px!important;
	color:#fff!important;
}

.slick-dots li.slick-active button:before {
    opacity: 1!important;
    color: red!important;
}



@media (max-width:670px){

.slick-dots li button, .slick-dots li{
	width:30px!important;
	height:30px!important;
	color:#fff!important;
	margin:0 15px;
}

.slick-dots li button:before{
	width:auto!important;
	height:auto!important;
}

}

@media (max-width:600px){
  .desktop{
    display:none!important;
  }

  .mobile{
    display: block!important;
  }
}


/*** Start of location styling ***/

.location{
	clear:both;
	overflow:hidden;
	background:#fff;
  padding:4%;
}

.location .textBlock{
  float:right;
  width:45%;
	color:#000;
	margin:0% auto 0% 5%;
  vertical-align:top;
}

.location iframe{
  float:left;
  vertical-align:top;
  width:45%;
  height:600px;
  margin-right:5%;
}

.location h2{
	font-size:2vw;
}

.location h2 span{
	display:block;
	font-size:18px;
	text-decoration:underline;
	margin-bottom:30px;
}
.location p{
	font-size:16px;
  font-family:arial,sans-serif;
}

.location .contactDetails{
  clear:both;
  overflow:hidden;
}

.location .contactDetails .address{
  float:left;
  width:45%;
  margin:0 5% 0 0;
}

.location .contactDetails .openingTimes{
  float:right;
  width:45%;
  margin:0 0 0 5%;
}


@media (max-width:1200px){
  .location iframe{
    height:400px;
  }
  .location h2{
  	font-size:3vw;
  }

}



@media (max-width:900px){

  .location .textBlock, .location iframe{
    float:none;
    width:80%;
  	margin:0% auto 10% auto;
  }

.location iframe  {
    height:600px;
    display:block;
  }

}

@media (max-width:670px){

	.location .textBlock{
		max-width:inherit;
	}

	.location h2{
	font-size:36px;
}

.location p{
	font-size:16px;
}



}


/*** End of location work***/

/*** Start of contact form styling ***/

.contact{
	padding:5%;
	background: #fff;
}

.contact .textBlock{
	text-align:center;
	margin:0 auto;
}

.contact .textBlock h2{
	font-size:4vw;
	color:#000;
}

.contact .textBlock h2 span{
  display:block;
	font-size:18px;
	text-decoration:underline;
	margin-bottom:30px;
}

.contact .textBlock .btn:hover{
  background:#000;
  color:#fff;
}



@media (max-width:670px){

  .contact{
  	padding:10% 5%;
  }


	.contact .textBlock h2{
	font-size:36px;
}


}


/*** End of contact form styling ***/

/*** Footer styling***/

.footer{
padding:80px 20px;
background:#000;

}

.footer p{
	font-size:14px;
	text-align:left;
  color:#757575;
}

.footer .copyright{
  float:right;
}

.footer .contactFooter a{
  margin-bottom:40px;
  display:block;
}

.footer .contactFooter a img,.footer .contactFooter a span {
  display:inline-block;
  vertical-align: top;
}

.footer .contactFooter a span{
  margin-left:10px;
  margin-top:15px;
  color:#fff;
}

.footer .contactFooter a:hover span{
  color:red;
  transition:.3s ease-in-out;
}

.footer .contactDetails{
  clear:both;
  overflow:hidden;
  max-width:500px;
  color:#757575;
}

.footer .contactDetails .address{
  float:left;
  width:45%;
  margin:0 5% 0 0;
}

.footer .contactDetails .openingTimes{
  float:right;
  width:45%;
  margin:0 0 0 5%;
}


@media(max-width:400px){

  .footer .contactDetails .address, .footer .contactDetails .openingTimes{
    float:none;
    width:inherit;
    margin:20px 5%;
  }

}