/* fix for bold fonts in chrome on mac */

* {
	-webkit-font-smoothing: antialiased;
}

/* body */

body {
	/*font-family: "Roboto", sans-serif;
	font-size: 13px;*/
	
	background-color: #eceff1; /* blue grey 50 */
}

body > div.wrapper {
	background-color: #eceff1; /* blue grey 50 */
}





/* we're only going to set the font globally for the global elements to avoid display issues in 3rd party scripts */

header,
nav.site,
footer {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
}





/* header */

header {
	height: 125px;
	
	background-color: #0d47a1; /* blue 900 */
	background-image: url("https://www.expeditersonline.com/images/header/skyline.png");
	background-position: bottom center;
	background-repeat: repeat-x;
}

header,
header * {
	position: relative;
}

header a.logo {
	margin: 25px 0;
	height: 75px;
	
	background-color: transparent;
}

header form {
	top: 35px;
	
	background-color: transparent;
}

header form h3 {
	padding: 5px 0;
	
	font-weight: normal;
	line-height: 25px;
	
	background-color: rgba(0, 0, 0, 0.25); /* black */
}

header form button {
	background-color: #4caf50; /* green 500 */
}

header form button:hover {
	background-color: #81c784; /* green 300 */
}

header div.input input[type="email"] {
	border: 0;
}





/* navigation: site */

nav.site {
	background-color: #1565c0; /* blue 800 */
}

nav.site li {
	margin: 0;
}

nav.site a {
	padding: 10px;
	
	text-decoration: none;
}

nav.site a:hover {
	color: #fff;
	
	background-color: #1976d2; /* blue 700 */
}

nav.site li.active a {
	color: #fff;
	
	background-color: #1e88e5; /* blue 600 */
}

a.siteburger {
	width: 75px;
	height: 75px;
	
	text-decoration: none !important;
	
	background-color: #1565c0; /* blue 800 */
}

a.siteburger i.fa {
	display: block;
	
	width: 75px;
	height: 75px;
	
	color: #fff; /* white */
	font-size: 28px;
	line-height: 75px;
	text-align: center;
}





/* navigation: site */

nav.top {
	right: 15px !important;
	
	background-color: transparent;
}

nav.top li {
	margin: 0;
}

nav.top a {
	padding: 5px 7px;
	
	text-decoration: none;
}

nav.top a:hover,
nav.top li.active a {
	color: #fff;
	
	background-color: transparent;
}

nav.top a i.fa {
	margin-right: 5px;
}





/* navigation: pages /

nav.pages {
	background-color: transparent;
}

nav.pages li a {
	background-color: #607d8b; /* blue grey 500 /
	
	transition: none;
}

nav.pages li a:hover {
	background-color: #455a64; /* blue grey 700 /
}

nav.pages li.active a {
	background-color: #4caf50; /* green 500 /
}





/* footer */

footer {
	color: #607d8b; /* blue grey 500 */
	
	background-color: #263238; /* blue grey 900 */
}

footer nav a {
	color: inherit;
	
	text-align: left;
	text-decoration: none;
}

footer nav a:hover {
	color: #fff; /* white */
	
	background-color: transparent;
}

footer a img {
	border: 0;
}

footer p {
	background-color: transparent;
}





/* content: images: placeholders */

figure.placeholder div {
	background-image: url("../images/eo-truck-black.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50%;
}

figure.placeholder div::after {
	/*color: #f00 !important;*/
	content: "" !important;
	/*font-size: 56px !important;*/
}

/*section.widget figure.placeholder div::after {
	font-size: 28px !important;
}

@media screen and (max-width: 480px) {
	
	figure.placeholder div::after {
		font-size: 28px !important;
	}
	
}*/





/* advertisements */

.ad,
.ads,
.banners {
	/*display: none; /* dev */
}

div.ad {
	/*font-size: 11px;*/
	
	/*background-color: #cfd8dc; /* blue grey 100 */
	/*background-color: #fff; /* white */
	background-color: rgba(255, 255, 255, 0.5); /* white */
}

div.ad * {
	/*visibility: hidden; /* dev */
}





/* pickle player */

.PKL_wrapper{
	display: block;
	
	z-index: 1;
	
	margin: 0 auto;
	width: 60px;
	height: 60px;
}

.PKL_playpause,
.PKL_play {
	position:absolute;
	top: 0;
	left: 0;
	z-index: 6;
	
	width: 60px;
	height: 60px;
	
	border-radius: 50%;
	
	cursor: pointer;
	
	background-color: #1976d2; /* blue 700 */
}

.PKL_playpause:after,
.PKL_play:after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	
	margin-left: 2px;
	
	color: #fff; /* white */
	content: "\f04b"; /* fa-play */
	font-family: FontAwesome;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-decoration: inherit;
	
	-webkit-transform: perspective(1px) translateX(-50%) translateY(-50%);
	    -ms-transform: perspective(1px) translateX(-50%) translateY(-50%);
	        transform: perspective(1px) translateX(-50%) translateY(-50%);
}

div.PKL_playpause:hover,
div.PKL_play:hover {
	background-color: #2196f3; /* blue 500 */
}

div.PKL_playpause.pause:after,
div.PKL_play.pause:after {
	margin-left: 0;
	
	content: "\f04c"; /* fa-pause */
}





@media screen and (max-width: 1024px) {
	
	header {
		height: 115px;
	}
	
	header a.logo {
		margin: 20px 0;
	}
	
	
	
	
	
	nav.site {
		display: none;
		
		position: absolute;
		right: 20px;
		top: 95px;
		z-index: 900;
		
		padding: 20px;
		height: auto;
		
		box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
	}
	
	nav.site ul {
		padding: 0 !important;
		height: auto;
	}
	
	nav.site li {
		float: none;
	}
	
	nav.site a {
		padding: 10px 20px;
		
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}
	
	nav.site i.fa {
		display: inline-block;
	}
	
	nav.site li.show-medium {
		display: block;
	}
	
	
	
	
	
	a.siteburger {
		display: block;
		
		right: 20px;
	}
	
	a.siteburger:hover {
		background-color: #e91e63; /* pink 500 */
	}
	
	a.siteburger.active {
		background-color: #e91e63; /* pink 500 */
		
		box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
	}
	
	a.siteburger.active i.fa.fa-bars::before {
		/*content: "\f00d"; /* fa-close */
		content: "\f011"; /* fa-power-off */
	}
	
	
	
	
	
	nav.top {
		display: none;
	}
	
	
	
	
	
	header form {
		top: 20px;
		right: 110px !important;
	}
	
}





@media screen and (max-width: 1024px) {
	
	footer nav a {
		text-align: center !important;
	}
	
}