@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
html,body{
	font-family:'Raleway',sans-serif;
	height:100%;
	line-height:1.2;
	width:100%;
	margin:0;
	height:auto;
}
html{
	>body{
		>header{
			a,button{
				&:hover{
					color:#26873b;
				}
				all:unset;
				background:none;
				border:none;
				color:#000;
				cursor:pointer;
				font-size:100%;
				font-weight:400;
				text-decoration:none;
				white-space:nowrap;
			}
			img{
				max-width:150px;
			}
			>aside{
				>a{
					&.logo{
						display:none;
					}
					&.phone{
						>span:nth-child(1){
								background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -2px -2px no-repeat;
								display:inline-block;
								height:19px;
								vertical-align:middle;
								width:19px;
						}
					}
					&.button{
						background-color:#117C33;
						border-radius:50rem;
						color:#fff;
						font-weight:700;
						padding:5px 12px;
						text-transform:uppercase;
						font-size:70%;
					}
				}
				>button{
					>span{
						background-color:#29292B;
						border-radius:50rem;
						display:block;
						height:4px;
						width:100%;
					}
					display:none;
					grid-template-columns:1fr;
					row-gap:1px;
					width:1.5em;
				}
				align-items:center;
				background-color:#f3f3f5;
				column-gap:1em;
				display:grid;
				grid-template-areas:'logo phone form menu';
				grid-template-columns:1fr auto auto;
				padding:1em;
				text-align:right;
			}
			>nav{
				>menu{
					li.menu{
						button:after{
							background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -59px -1px no-repeat;
							content:'';
							display:inline-block;
							height:6px;
							margin-left:5px;
							vertical-align:middle;
							width:11px;
						}
						dialog{
							a{
								&:before{
									background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -5px -30px no-repeat;
									content:'';
									display:inline-block;
									height:11px;
									left:0;
									position:absolute;
									top:4px;
									vertical-align:middle;
									width:6px;
								}
								display:block;
								min-height:32px;
								padding:0px 0 0px 20px;
								position:relative;
							}
							>div{
								display:grid;
								grid-template-columns:1fr 1fr;
								grid-template-rows:auto;
							}
							margin:0;
							position:fixed;
							box-shadow:0 10px 5px #00000059;
							border-radius:10px;
							border: 1px solid #eee;
							z-index:100;
						}
					}
					display:flex;
					flex-wrap:wrap;
					justify-content:space-between;
					list-style:none;
				}
				background-color:#fff;
				padding:1em;
				display:grid;
				grid-template-columns:1fr 3fr;
				grid-template-rows:auto;
			}
			position:sticky;
			top:0;
			z-index:99;
		}
		main{
			a{
				color:rgb(17,124,51);
			}
			ul{
				>li{
					&:before{
						background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -106px -157px no-repeat;
						content:' ';
						display:inline-block;
						height:15px;
						left:0;
						position:absolute;
						top:5px;
						width:15px;
					}
					font-size:90%;
					line-height:24px;
					margin-bottom:10px;
					padding-left:25px;
					position:relative;
				}
				padding:0px;
				list-style:none;
			}
			h1{
				font-size:200%;
				font-weight:700;
			}
			h2{
				font-size:150%;
				font-weight:400;
			}
			img{
				width:100%;
				height:100%;
				margin:auto;
				display:block;
				object-fit:contain;
				border-radius:0.5em;
			}
			article{
				>section{
					>div.icon{
						&.chevron{
							width:97px;
							height:49px;
							background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -1px -723px no-repeat;
							display:inline-block;
							margin:5em auto 2em auto;
							display:block;
						}
					}
					>header{
						font-size:380%;
						font-weight:800;
						margin:0.25em 0;
						text-align:center;
					}
					>nav{
						>a{
							background-color:#26873b;
							border-radius:50rem;
							color:#d8dfe4;
							display:inline-block;
							font-size:110%;
							font-weight:700;
							margin:1em auto 0 auto;
							padding:1em 1.5em;
							text-transform:uppercase;
							text-decoration:none;
						}
						text-align:center;
					}
					>section{
						&.columns{
							>aside{
								>strong{
									display:block;
									text-align:center;
									font-size:200%;
								}
							}
							display:grid;
							gap:1.5em;
						}
					}
					>table{
						>caption{
							background-color:rgb(243,243,245);
							font-size:150%;
							font-weight:700;
							padding:1em 1em 0 1em;
							text-align:center;
							border-radius:0.5em 0.5em 0 0;
						}
						>thead{
							>tr:first-child{
								>th{
									height:200px;
								}
							}
							font-size:130%;
						}
						>tbody{
							ul{
								margin:0;
								padding:0;
							}
							td{
								p{
									text-align:center;
									font-size:130%;
									margin:0px 0px 1em 0px;
								}
								padding:0 0.5em;
								vertical-align:top;
							}
							th{
								a{
									text-decoration:none;
								}
								font-size:200%;
							}
						}
						background-color:rgb(243,243,245);
						padding:1em;
						border-radius:0 0 0.5em 0.5em;
						margin:auto;
					}
					>ul{
						display:grid;
						grid-template-columns:1fr 1fr;
						grid-template-rows:auto;
					}
					display:block;
					margin:auto;
					max-width:1200px;
					padding:0.25em 1em 1em 1em;
				}
				color:#343437;
			}
		}
		footer{
			a{
				color:#fff;
				text-decoration:none;
			}
			>section{
				>div{
					>div{
						>img{
							max-width:170px;
						}
						>nav{
							>a{
								&.facebook,&.twitter{
									display:inline-block;
									vertical-align:middle;
									background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') no-repeat;
								}
								&.facebook{
									width:12px;
									background-position:-107px -127px;
								}
								&.twitter{
									width:20px;
									background-position:-125px -129px;
								}
								height:23px;
							}
							display:flex;
							justify-content:space-around;
							padding:1em;
							align-items:center;
							max-width:170px;
							margin:auto;
						}
					}
					>nav{
						>span{
							color:#fff;
							font-size:110%;
							font-weight:700;
							margin-bottom:1em;
							text-transform:uppercase;
						}
						>a{
							&:before{
								content:' ';
								display:inline-block;
								width:6px;
								height:11px;
								vertical-align:middle;
								background:url('https://www.porter-logistics.com/wp-content/themes/myporter/images/sprite.png') -84px -104px no-repeat;
								position:absolute;
								top:4px;
								left:0;
							}
							position:relative;
							display:block;
							text-align:left;
							padding:0px 0px 0px 15px;
							margin-bottom:1.5em;
						}
						padding:1em;
					}
					display:grid;
					gap:1em;
					grid-template-areas:"head nav1 nav2 nav3 nav4";
				}
				p{
					text-transform:uppercase;
					font-size:80%;
				}
				max-width:1200px;
				margin:auto;
				padding:1em;
				text-align:center;
			}
			background:#313134 url('https://www.porter-logistics.com/wp-content/themes/myporter/images/footer-bg-min.jpg') center no-repeat;
			background-size:cover;
			background-attachment:fixed;
			color:#fff;
		}
	}
}
@media(max-width:1100px){
	html>body{
		>header{
			>aside{
				>a{
					&.logo{
						display:inline-block;
					}
					text-align:left;
				}
			}
			>nav{
				>a{
					&.logo{
						display:none;
					}
				}
				grid-template-columns:auto;
			}
			>article{
				&.hero>section{
					>div:first-child{
						display:block;
						margin:0px auto 2em auto;
						max-width:650px;
					}
					display:block;
				}
			}
		}
		>main{
			>article{
				>section{
					>header{
						font-size:280% !important;
					}
					>section{
						&.columns{
							>img{
								max-height:250px;
							}
							strong{
								font-size:100% !important;
							}
						}
					}
				}
			}
		}
		>footer{
			>section{
				>div{
					grid-template-areas:
					"head head head head"
					"nav1 nav2 nav3 nav4";
				}
			}
		}
	}
}
@media(max-width:850px){
	html>body{
		>header{
			>aside{
				>a{
					&.phone{
						>span:nth-child(2){
							display:none;
						}
					}
				}
				>button{
					display:grid;
					height:24px;
				}
				grid-template-areas:'logo form phone menu';
			}
			>nav{
				>menu{
					>li.menu,>a{
						padding:0.25em;
						display:block;
						border-bottom:1px solid #d8dfe4;
					}
					display:grid;
					grid-template-columns:1fr;
					padding:0px;
					margin:0px;
				}
				display:none;
				padding:1em;
			}
		}
		>main>article{
			>section{
				>header{
					font-size:180% !important;
				}
				>section{
					&.columns{
						display:block;
					}
				}
			}
		}
		>footer{
			>section{
				>div{
					grid-template-areas:
					"head head"
					"nav1 nav2"
					"nav3 nav4";
				}
			}
		}
	}
}
@media(max-width:550px){
	html>body{
		>main>article{
			>section{
				>header{
					font-size:120% !important;
				}
			}
		}
		>footer{
			>section{
				>div{
					grid-template-areas:
					"head"
					"nav1"
					"nav2"
					"nav3"
					"nav4";
				}
			}
		}
	}
}