* {
	outline:none;
	margin:0;
	padding:0;
	line-height:1.3em;
}
outline {none;}
:root {
	
  	--hlogo-minHeight: 50px;
	--hlogo-maxHeight: 74px;
	--header-minPadding: 15px;
	--header-maxPadding: 15px;
	--header-minHeight: calc(var(--hlogo-minHeight) + (var(--header-minPadding) * 2));
	--header-maxHeight: calc(var(--hlogo-maxHeight) + (var(--header-maxPadding) * 2));
	/*--header-minHeight: 70px;
	--header-maxHeight: 90px;*/
	}
	/* Menu */
	.sp-megamenu-parent > li > a {font-size:1.5em; text-transform:uppercase;}

  /* header animation */
  	#sp-header, #sp-header .logo, #sp-header .logo-image, .sp-megamenu-parent > li > a {transition:all .75s ease-out;}
	/*container */
	#sp-header, #sp-header .logo {height: var( --header-maxHeight );}
	#sp-header.header-sticky, #sp-header.header-sticky .logo {height: var( --header-minHeight );} 
	#offcanvas-toggler {transition:all .75s ease-out;}
  	/* logo */
	#sp-header .logo-image {height: var(--hlogo-maxHeight) !important;}
	.logo-image-phone {height: var(--hlogo-maxHeight) !important;}
	#sp-header.header-sticky .logo-image-phone {height: var(--hlogo-minHeight) !important;}
	#sp-header.header-sticky .logo-image {height: var(--hlogo-minHeight) !important;}
	/* offcanvas toggler */
	.header-sticky  #offcanvas-toggler {height: var(--header-minHeight); line-height: var(--header-minHeight);}
	.offcanvas-menu .offcanvas-inner ul.menu > li.active a {color:#000066; font-weight:bold;}
	.offcanvas-menu .logo-image {height:50px;}
	/* menu items */
	.sp-megamenu-parent > li > a {line-height: var(--header-maxHeight);}
	.header-sticky .sp-megamenu-parent > li > a {line-height:var(--header-minHeight);}


h1, h2, h3, h4, h5, h6 {font-weight:bold;}
#sp-title {background-color:#000066; padding:10px;}
#sp-title h1, h1 {
    font-weight: normal;
    font-size: 1em;
	
	text-align:center;
	color:white;
}
span.larger {font-size:150%;}
#sp-main-body {padding:0;}
#sp-main-body h1 {color:black;}
h2 {font-size:2em;}

.img-responsive {display:block; width:100%; margin:auto; text-align:center;}
#image-float {float:none; margin:auto;}
#info, #sp-services, #sp-contact {padding:50px 0;}
#info p {text-align:center;}
section p {
  font-weight: 400;
  
}
section p.lead, span.lead {
  font-weight: 600;
  font-size: 1.3em;
}

  /* about modules */
	#sp-about #sp-user1, #sp-about #sp-user2 {
		background-color:#ccc;
		padding:40px;
		display: flex;
  		align-items: center;
  		justify-content: center;}
	#sp-about #sp-user2 {background-color:#f0f0f0; padding:40px;}
	
  /* contact services */
	#sp-services {background-color:#f9f9f9;}
	#sp-services h2 {text-align:center;}
  /* contact module */
	#sp-contact {
	  background: rgba(0,0,102,1) url(../../../images/backgrounds/Oak-Transportation-Services-Contact-BG.jpg);
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-size: cover;
	  background-position: center;
	  color:white;
	  text-shadow: 0 0 15px rgba(0,0,0,.5);
	}
	#sp-contact h2 {color:white; text-shadow: 3px 3px 15px rgba(0,0,0,1);}
	#sp-contact .lead {
	  font-size: 2.5em;
	  font-style: italic;
	  padding: 0 10px;
	  font-weight: 600;
	  max-width: 100%;
	  text-shadow: 3px 3px 15px rgba(0,0,0,1);
	}
	#sp-contact p {
	  font-size: 1.6em;
	  font-weight: 600;
	  text-align: center;
	  text-shadow: 3px 3px 15px rgba(0,0,0,1);
	}
	#sp-contact .btn {display:block; width:80%; margin:auto; box-shadow:3px 3px 15px rgba(0,0,0,.5); text-shadow:none;}
	
/* services page */
	#service-intro {padding:0 15px;}
	#service-description {background-color:rgba(0,0,0,.2); margin:60px 0; padding:10px;}
	#service-intro h2, #service-description h2 {text-align:center; margin-bottom:20px;}
	#service-description .row.service {background-color:white; padding:20px 5px; margin:25px 0;}
	.service h3 {text-align:center; margin-top:5px; font-size:1.5em; text-decoration:underline;}
	.service .lead {font-size:1.3em;}
	#service-intro .lead, .service .lead, .service p { text-align:justify;}
	#service-description #disclaimer.row {margin-top:40px !important;}

/* contact us page */
	.com-contact__thumbnail img {max-width:80%;}
	.contact-form {
	  background-color: rgba(0,153,255,.7);
	  padding: 10px 15px;
	}
	.com-contact.contact {padding-bottom: 80px;}

/* Footer */
	#sp-footer {font-size: 14px; padding: 0;}
	#sp-footer .container-inner {padding:10px 5px;}
	.sp-copyright, .credits {text-align:center; line-height:1.4em;}

/* classes */
	.card {margin-bottom:30px; box-shadow:0 0 15px rgba(0,0,0,.2); border:1px solid #999;}
	.card, .card-title, .card-body p {text-align:center;}
	.card-title {font-size:1.5em;}
	.caption {font-weight:600; padding-top:5px;}
	.e-mail:before {
	  content: attr(data-website) "\0040" attr(data-user);
	  unicode-bidi: bidi-override;
	  direction: rtl;
	}


@media screen and (min-width: 576px) {
	#info, #sp-services, #sp-contact {padding:90px 0;}
	h2 {font-size:3em;}
	#sp-title h1, h1 {font-size:1.4em;}
	span.larger {font-size:150%;}
	#sp-about #sp-user1, #sp-about #sp-user2 {padding: 80px;}
	#service-description {padding: 60px;}
	#service-description .row.service {padding:25px;}
	#sp-contact .btn {width:70%}

}

@media screen and (min-width: 768px) {
	#sp-title h1, h1 {font-size:2em;}
	span.larger {font-size:150%;}
	#image-float {float:left; margin-right:25px; margin-bottom:10px;}
	#sp-about #sp-user1, #sp-about #sp-user2 {padding:40px;}
	.contact-form {padding: 25px 40px;}
	#sp-contact .btn {width:80%}

}
@media screen and (min-width: 992px) {
	#info p {text-align:left;}
	#sp-about #sp-user1, #sp-about #sp-user2 {padding:80px;}
	.service h3 { text-align:left;}
	#sp-contact .btn {width:60%}
	.sp-copyright {text-align:left;}
	.credits {text-align:right;}
	
}
@media screen and (min-width: 1200px) {
	.container {max-width: 1170px;}
	#sp-about #sp-user1, #sp-about #sp-user2 {padding:100px;}
	#sp-contact .btn {width:50%}
}
@media screen and (min-width: 1300px) {
	.container {max-width: 1270px;}

@media screen and (min-width: 1400px) {	
	.container {max-width: 1370px;}
}