// FONTS

@import url('https://fonts.googleapis.com/css?family=Gothic+A1:400,300,200|Open+Sans:300,400,700,900|Overpass:200,300,400,600i,700,900i|Work+Sans');

$gothic: Gothic A1, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$op: Overpass, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$worksans: Work Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$opensans: Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;


// COLORS

$red:			#962833;
$yellow:		#dba430;
$p-color: 		#686868;
$white:			#ffffff;
$black:			#000000;
$blue: #023AC1;


// GLOBAL STYLES

body,h1,h2,h3,h4,h5{
	font-family: $op;
}

h1,h2,h3,h4,h5{
	color: $red;
	font-weight: 900;
}

p{
	font-family: $opensans;
	font-weight: 500;
	font-size: 13pt;
	line-height: 1.5;
	color: $p-color;
}

a{
	color: lighten($red, 20%);
}

a:hover{
	text-decoration: none;
	color: lighten($red, 15%);
}

.content{
	padding: 80px 0;
	
	h1,h2,h3,h4,h5{
		color: $black;
		line-height: inherit;
	}
	h1{
		color: $black;
		font-weight: 900 !important;
		font-size: 40pt;
		font-family: $opensans;
		line-height: 1.3;
	}

	p{
		font-size: 13pt;
		color: $p-color;
		line-height: 1.6;
		margin-bottom: 1.5rem;
		font-family: $worksans;
	}

	p.lead{
		font-size: 20pt;
		font-weight: 500;
	}
	
	p.sub-head {
		font-family: $gothic;
		font-style: italic;
		font-weight: 300;
		color: $black;
		font-size: 22pt;
	}

	.line{
		position: relative;
		display: inline-block;
		margin-bottom: 50px;
	}
	.line:after{
		position: absolute;
		content:'';
		bottom: -10px;
		left: 0;
		width: 17%;
		height: 5px;
		background-color: $red;
	}

	li{
		margin-top: 5px;
		line-height: 18pt;
		font-family: $opensans;
		font-weight: 400;
		font-size: 13pt;
		line-height: 20pt;
		color: $p-color;
	}
	
	.blue-grid {height: 32px;}
	.blue-grid-sm {height: 24px;}

}

.bg-dark{
	background-color: $red !important;
}

.btn-primary{
	background: $red;
	border: none;
}

.btn-primary:hover{
	background: $yellow;
}


// ********* CUSTOM STYELS ***********************************************************************************************************************************************

/* CSS used here will be applied after bootstrap.css */


.navbar{
	background: rgb(255,255,255);
	background: linear-gradient(107deg, rgba(255,255,255,1) 38%, rgba(150,40,51,1) 38.05%);
	padding: 20px 0;

	@media (max-width: 991.98px) {
		background: $white !important;
		padding: 20px;
		border-bottom: 1px solid $red;
	}

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) and (max-width: 1199.98px) {
		background: rgb(255,255,255);
		background: linear-gradient(107deg, rgba(255,255,255,1) 25%, rgba(150,40,51,1) 25.05%);
		padding: 20px 0;
	}

	// Additional Breakpoint 1200 to 1400
	@media (min-width: 1200px) and (max-width: 1439.98px) {
		background: linear-gradient(107deg, rgba(255,255,255,1) 33%, rgba(150,40,51,1) 33.05%);
	}
	
	// Additional Breakpoint 1400 to 1900
	@media (min-width: 1440px) and (max-width: 1919.98px) {
		background: linear-gradient(107deg, rgba(255,255,255,1) 35%, rgba(150,40,51,1) 35.05%);
	}

	@media only screen and (min-width: 2560px) {
	  background: linear-gradient(107deg, rgba(255,255,255,1) 41%, rgba(150,40,51,1) 41.05%);
	}

	.navbar-brand{
		img{
			@media (max-width: 767.98px) {
				width: 150px;
			}

			// Medium devices (tablets, 768px and up)
			@media (min-width: 768px) and (max-width: 991.98px) {
				width: 200px;
			}

			// Large devices (desktops, 992px and up)
			@media (min-width: 992px) and (max-width: 1199.98px) {
				width: 150px;
			}
		}
	}

	.navbar-toggler{
		color: $red !important;
		border-color: $red;
		padding: 5px 8px;
		padding-top: 7px;
	}

	.navbar-nav{
		margin-left: 70px;

		@media (max-width: 991.98px) {
			margin-left: 0;
			margin-right: 0;
			width: 100%;
		}

		// Large devices (desktops, 992px and up)
		@media (min-width: 992px) and (max-width: 1199.98px) {
			margin-left: 100px;
		}

		.nav-item{
			margin-right: 55px;
			@media (max-width: 991.98px) {margin-right: 0px;}
			@media (min-width: 992px) and (max-width: 1199.98px) {margin-right: 40px;}
		}

		.nav-item:last-child{
			margin-right: 0;
		}

		.active{
			position: relative;
			display: inline-block;
		}

		.active:after{
			content: '';
			position: absolute;
			//bottom: -8px;
			bottom: 0;
			width: 100%;
			height: 7px;
			background-color: $yellow;

			// Small devices (landscape phones, less than 768px)
			@media (min-width: 576px) and (max-width: 767.98px) {
				bottom: 0px;
				height: 5px;
				width: 100%;
			}
		}

		.nav-link{
			font-weight: 400;
			font-size: 17pt;
			line-height: 50pt;
			text-transform: uppercase;
			color: $white !important;
			padding: 0;

			// Extra small devices (portrait phones, less than 576px)
			@media (max-width: 575.98px) {
				color: $red !important;
			}

			// Small devices (landscape phones, less than 768px)
			@media (min-width: 576px) and (max-width: 767.98px) {
				color: $red !important;
				line-height: 40pt;
			}

			// Medium devices (tablets, 768px and up)
			@media (min-width: 768px) and (max-width: 991.98px) {
				color: $red !important;
				line-height: 40pt;
			}

			// Large devices (desktops, 992px and up)
			@media (min-width: 992px) and (max-width: 1199.98px) {
				font-size: 14pt;
			}

		}

		.nav-link:hover{
			color: $yellow !important;
		}
	}
}

	.blue {
		background: rgb(255,255,255);
		background: linear-gradient(107deg, rgba(255,255,255,1) 38%, rgba(2, 58, 193,1) 38.05%);

		@media (min-width: 992px) and (max-width: 1199.98px) {
			background: rgb(255,255,255);
			background: linear-gradient(107deg, rgba(255,255,255,1) 25%, rgba(2, 58, 193,1) 25.05%);
			padding: 20px 0;
		}
		@media (min-width: 1200px) and (max-width: 1439.98px) {
			background: linear-gradient(107deg, rgba(255,255,255,1) 33%, rgba(2, 58, 193,1) 33.05%);
		}
		@media (min-width: 1440px) and (max-width: 1919.98px) {
			background: linear-gradient(107deg, rgba(255,255,255,1) 35%, rgba(2, 58, 193,1) 35.05%);
		}
		@media only screen and (min-width: 2560px) {
		  background: linear-gradient(107deg, rgba(255,255,255,1) 41%, rgba(2, 58, 193,1) 41.05%);
		}
	}


// Carousel

.carousel{
	margin-top: 140px;

	// Small devices (landscape phones, less than 768px)
	@media (max-width: 575.98px) {
		margin-top: 100px;
	}
	
	// Small devices (landscape phones, less than 768px)
	@media (min-width: 576px) and (max-width: 767.98px) {
		margin-top: 100px;
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) and (max-width: 991.98px) {
		margin-top: 115px;
	}
	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) and (max-width: 1199.98px) {
		margin-top: 105px;
	}
	
	.carousel-caption{
		right: -200px;
		bottom: 80px;
		.caption-block{
			display: inline-block;
			border: solid 10pt $white;
			background-color: transparent;
			width: 450px;
			height: 220px;
			border-right: 0;
			position: relative;

			.right-bar{
				position: absolute;
				right: 0;
				border-top: solid 20pt $white;
				border-bottom: solid 65pt $white;
				width: 12px;
				height: 200px;
			}

			h1{
				font-weight: 900;
				font-style: italic;
				line-height: 40pt;
				font-size: 45pt;
				color: $white;
				padding-top: 50px;
				padding-left: 75px;
				width: 500px;
				display: block;
			}

			.yellow{
				color: #f5e20e !important;
			}
		}
	}
	
	@media (min-width: 992px) {
	  .carousel-caption{
		  right: -115px;
		  bottom: 30px;
		  .caption-block{
			  display: inline-block;
			  border: solid 8pt $white;
			  background-color: transparent;
			  width: 285px;
			  height: 170px;
			  border-right: 0;
			  position: relative;
  
			  .right-bar{
				  position: absolute;
				  right: 0;
				  border-top: solid 18pt $white;
				  border-bottom: solid 45pt $white;
				  width: 10px;
				  height: 150px;
			  }
  
			  h1{
				  font-weight: 900;
				  font-style: italic;
				  line-height: 35pt;
				  font-size: 30pt;
				  color: $white;
				  padding-top: 40px;
				  padding-left: 30px;
				  width: 400px;
				  display: block;
			  }
  
			  .yellow{
				  color: #f5e20e !important;
			  }
		  }
	  }
	}
	
	@media (min-width: 1200px) {
	  .carousel-caption{
		  right: -150px;
		  bottom: 35px;
		  .caption-block{
			  display: inline-block;
			  border: solid 10pt $white;
			  background-color: transparent;
			  width: 380px;
			  height: 220px;
			  border-right: 0;
			  position: relative;
  
			  .right-bar{
				  position: absolute;
				  right: 0;
				  border-top: solid 20pt $white;
				  border-bottom: solid 65pt $white;
				  width: 12px;
				  height: 200px;
			  }
  
			  h1{
				  font-weight: 900;
				  font-style: italic;
				  line-height: 40pt;
				  font-size: 42pt;
				  color: $white;
				  padding-top: 50px;
				  padding-left: 30px;
				  width: 450px;
				  display: block;
			  }
  
			  .yellow{
				  color: #f5e20e !important;
			  }
		  }
	  }
	}
	
	@media (min-width: 1540px) {
	  .carousel-caption{
		  right: -200px;
		  bottom: 80px;
		  .caption-block{
			  display: inline-block;
			  border: solid 10pt $white;
			  background-color: transparent;
			  width: 450px;
			  height: 220px;
			  border-right: 0;
			  position: relative;
  
			  .right-bar{
				  position: absolute;
				  right: 0;
				  border-top: solid 20pt $white;
				  border-bottom: solid 65pt $white;
				  width: 12px;
				  height: 200px;
			  }
  
			  h1{
				  font-weight: 900;
				  font-style: italic;
				  line-height: 40pt;
				  font-size: 45pt;
				  color: $white;
				  padding-top: 50px;
				  padding-left: 75px;
				  width: 500px;
				  display: block;
			  }
  
			  .yellow{
				  color: #f5e20e !important;
			  }
		  }
	  }
	}

	.carousel-indicators{
		li{
			border-radius: 20px;
			background-color: $white;
		}
		.active{
			background-color: #f5e20e;
		}
	}
}

// FEATURED
.featured{
	padding: 80px 0;
	background: url('../images/bg-featured.jpg') no-repeat top center;
	height: 790px;
	position: relative;
	background-size: auto 100%;

	// Extra small devices (portrait phones, less than 576px)
	@media (max-width: 575.98px) {
		padding-top: 50px;
		height: 500px;
	}

	// Small devices (landscape phones, less than 768px)
	@media (min-width: 576px) and (max-width: 767.98px) {
		height: auto;
		position: static !important;
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) and (max-width: 991.98px) {
		height: 700px;
	}

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) and (max-width: 1199.98px) {
		padding: 70px 0;
		height: 650px;
	}

	.caption{
		font-size: 30pt;
		line-height: 35pt;
		font-weight: 200;
		font-family: $op;
		color: $white;
		text-shadow: 0px 4px 3px rgba($black, 0.5);

		// Extra small devices (portrait phones, less than 576px)
		@media (max-width: 575.98px) {
			font-size: 22pt;
			line-height: 27pt;
		}

		strong{
			font-weight: 600;
		}
	}
	
	.feature-logo {
		padding-top: 15px;
		width: 221px;
		@media (min-width: 576px) {width: 302px;}
	}

	.featured-block-group{
		position: relative;
		top: 120px;

		@media (max-width: 575.98px) {
			top: 55px;
		}
		@media (min-width: 576px) and (max-width: 767.98px) {
			top: 65px;
		}
		@media (min-width: 768px) and (max-width: 991.98px) {
			top: 75px;
		}
		@media (min-width: 992px) and (max-width: 1199.98px) {
			width: auto;
			top: 52px;
		}

		a{
			transition: 0.2s;
		}
	
		a:hover{
			h1{
				letter-spacing: 2pt;
				color: $white;
				background-color: $red;
				transition: 0.2s;
				text-shadow: 0px 5px 5px rgba($black, 0.5);

			}
		}

		.featured-block{
			box-shadow: 0px 15px 15px rgba($black, 0.3);
			width: 100%;
			height: 305px;

			// Extra small devices (portrait phones, less than 576px)
			@media (max-width: 575.98px) {
				box-shadow: 0px 5px 10px rgba($black, 0.3);
				height: auto;
			}

			// Small devices (landscape phones, less than 768px)
			@media (min-width: 576px) and (max-width: 767.98px) {
				height: auto;
			}
			
			@media (min-width: 768px) and (max-width: 991.98px) {
				height: auto;
			}
			
			// Small devices (landscape phones, less than 768px)
			@media (min-width: 992px) and (max-width: 1199.98px) {
				height: 265px;
			}

			
			h1{
				display: block;
				background-color: $white;
				font-weight: 300;
				font-size: 24pt;
				text-align: center;
				padding: 15px;
				transition: 0.2s;
				@media (min-width: 576px) and (max-width: 767.98px) {font-size: 20pt;}
			}

			.list-block{
				padding: 25px 35px;
				background-color: $white;
				height: 305px;
				
				@media (max-width: 991.98px) {height: auto;}
				
				// Large devices (desktops, 992px and up)
				@media (min-width: 992px) and (max-width: 1199.98px) {
					padding: 15px 20px;
					height: 265px;
				}
				
				ul{
					padding: 0;
					margin: 0;
					h3{
						background: none;
						font-style: italic;
						color: $black;
						letter-spacing: 1pt;
						
						@media (max-width: 767.98px) {font-size: 1.5rem;}
						@media (min-width: 992px) and (max-width: 1199.98px) {font-size: 1.15rem;}
						}

					li{
						background: url('../images/bullet-featured-list.jpg') left no-repeat;
						list-style: none;
						font-family: $op;
						font-style: italic;
						padding-left: 40px;

						a{
							color: #0070bb;
							font-size: 15pt;
							font-weight: 600;
							display: block;
							line-height: 23pt;
							transition: 0.2s;

							// Large devices (desktops, 992px and up)
							@media (min-width: 992px) and (max-width: 1199.98px) {
								font-size: 14pt;
								line-height: 23pt;
							}
						}

						a:hover{
							color: $red;
							padding-left: 5px;
							transition: 0.2s;
						}
					}
				}
			}
		}
	}	
}


// WELCOME
.welcome{
	padding: 140px 0 50px;

	// Extra small devices (portrait phones, less than 576px)
	@media (max-width: 575.98px) {
		padding: 850px 0 50px 0;
	}

	// Small devices (landscape phones, less than 768px)
	@media (min-width: 576px) and (max-width: 767.98px) {
		padding: 50px 0;
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) and (max-width: 991.98px) {
		padding: 400px 0 50px;
	}

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) and (max-width: 1199.98px) {
		padding: 160px 0 50px;
	
	}

	h1{
		font-family: $gothic;
		font-style: italic;
		font-weight: 300;
		color: $black;
		font-size: 26pt;
	}

	h1.normal{
		font-style: inherit;
		font-weight: 400;
	}
	p{
		font-family: $worksans;
		color: lighten($black, 10%);
		font-size: 16pt;
	}

	.line{
		position: relative;
		display: inline-block;
		margin-bottom: 50px;
	}

	.line:after{
		position: absolute;
		content:'';
		bottom: -20px;
		left: 0;
		width: 17%;
		height: 5px;
		background-color: $red;

	}

	.img-welcome{
		box-shadow: 20px 20px 0px #4d8ac9;

		// Extra small devices (portrait phones, less than 576px)
		@media (max-width: 575.98px) {
			box-shadow: 5px 5px 0px #4d8ac9;
		}
	}

	h2.phone{
		// Extra small devices (portrait phones, less than 576px)
		@media (max-width: 575.98px) {
			font-size: 25pt;
		}
	}
}

.toll-phone {
	background-color: #0070bb;
	padding: 40px 0;
	
	h1 {
		font-weight: 200; font-size: 2.75rem;
		@media (max-width: 575.98px) {font-size: 2rem;}
	}
}


// TRUCK SIZES

.truck-size{
	padding: 50px 0;
	background-color: $black;
	color: $white !important;
	font-family: $gothic;
	font-style: italic;

	h1{
		color: $white !important;
		font-weight: 300 !important;
		font-size: 29pt;

		// Extra small devices (portrait phones, less than 576px)
		@media (max-width: 575.98px) {
			font-size: 20pt;
		}

		// Small devices (landscape phones, less than 768px)
		@media (min-width: 576px) and (max-width: 767.98px) {
			font-size: 24pt;
		}

		// Large devices (desktops, 992px and up)
		@media (min-width: 992px) and (max-width: 1199.98px) {
			font-size: 30pt;
		}
	}

	.line{
		position: relative;
		display: inline-block;
		margin-bottom: 70px;
	}

	.line:after{
		position: absolute;
		content:'';
		bottom: -20px;
		left: 0;
		right: 0;
		width: 10%;
		margin: 0 auto;
		height: 5px;
		background-color: $white;
	}

	ul{
		margin-top: 20px;
		margin: 0 auto;
		display: block;

		li{
			font-weight: 400;
			font-style: normal;
			margin-right: 90px;
			font-size: 24pt;
			display: inline-block;
			line-height: 2;

			// Extra small devices (portrait phones, less than 576px)
			@media (max-width: 575.98px) {
				font-size: 15.5pt;
				margin-right: 40px;
			}

			// Small devices (landscape phones, less than 768px)
			@media (min-width: 576px) and (max-width: 767.98px) {
				font-size: 18pt;
			}
			@media (min-width: 768px) and (max-width: 991.98px) {font-size: 20pt;}
			@media (min-width: 992px) and (max-width: 1199.98px) {font-size: 22pt;}
		}
	}
	.fa-circle {
		font-size: 10px;
		position: relative;
		top: -8px;
		margin-right: 4px;
		
		@media (max-width: 575.98px) {font-size: 6px; top: -5px;}
		@media (min-width: 576px) and (max-width: 767.98px) {font-size: 8px; top: -5px;}
	}
}

// FOOTER

footer{
	padding: 70px 0 80px;
	background: url('../images/bg-footer.jpg') no-repeat top center;
	background-size: auto 100%;

	// Extra small devices (portrait phones, less than 576px)
	@media (max-width: 575.98px) {
		background-repeat: repeat-y;
	}

	// Small devices (landscape phones, less than 768px)
	@media (min-width: 576px) and (max-width: 767.98px) {
		background-repeat: repeat-y;
	}

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) and (max-width: 991.98px) {
		background-repeat: repeat-y;
	}

	h5{
		font-family: $opensans !important;
		font-weight: 600;
	}

	.line{
		position: relative;
		display: block;
		margin-bottom: 35px;
	}

	.line:after{
		position: absolute;
		content:'';
		bottom: -15px;
		left: 0;
		width: 80%;
		height: 1px;
		background-color: $white;
	}

	h5,address,p{
		color: $white;
	}

	p.about{
		font-family: $worksans;
		font-weight: 200;
		font-size: 13pt;
	}

	address{
		font-weight: 400;
		font-family: $opensans !important;
		font-size: 13pt;

		// Large devices (desktops, 992px and up)
		@media (min-width: 992px) and (max-width: 1199.98px) {
			font-size: 11pt;
		}
		.title{
			font-size: 14pt;
			font-weight: 600;
		}
		a {color: #dba430;}
	}

	nav{
		a{
			display: block;
			color: $white;
			font-weight: 300;
			padding-bottom: 5px;
		}

		a:hover{
			color: rgba($white, 0.7);
		}
	}
	
	.copyright {
		a {color: $white;}
	}
}

.map{
	margin-bottom: -10px;
}