#footerwrap {text-align:center;width:100%;}
body { margin: 0px; padding:0px; text-align:left; font-size:12px; font-family:Arial;} 
body table { text-align:left;}
#searchContainer { position:absolute; top:10px; right:10px; float:left;} 
#pageContainer { width:1630px;margin:0 auto;} 
#leftcolumn { width:150px; padding:0px 0px 20px 0px; position:relative; display:none; float:left;} 
#rightcolumn { width:150px; padding:0px 0px 20px 0px; position:relative; display:none; float:right;} 
#footer { width:1630px; height:75px; display:block; clear:both;} 
#Navigation-18531 ul li a.hover {cursor:pointer;}
a.logo, #logo-footer a {pointer-events: none;}
a.logo:hover, .footer-logo a:hover {cursor: not-allowed;}

/*------ Keeps admin panel styling from being overridden ------*/

mce-tinymce *, #editBar *, .editMenuItems li, .rtbText {color: #000 !important;}

/*------- Fonts ------

font-family: 'Lora', serif;
font-family: 'Raleway', sans-serif; */

/*------- General universal ------*/

/* large gallery image border fix */

div#colorbox * {-webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;}

/* Text field focus border reset */

*:focus {outline: unset; outline-color: unset; outline-style: unset; outline-width: unset;}

@media only screen and (min-width: 801px)
#map .responsive-iframe-container {position: relative; max-width: 100%; height: 0; padding-top: 56.25%; overflow: hidden;}

html, body {overflow-x: hidden;}
body {min-width: 306px; font-family: 'Raleway', sans-serif; font-size: 18px; color: #676163;}
input, textarea, select, button, p > a {font-family: 'Ubuntu', sans-serif;}
img {max-width: 100%; height: auto;}
#columnsContainer {width: 100% !important; max-width: 100% !important;}
#maincolumn {width: 100%;  max-width: 1170px !important; min-height: 600px; margin: auto; padding: 24px 15px;}
#maincolumn.maincol-home {max-width: unset !important; padding: 0;}
#maincolumn.maincol-height-remove {min-height: 0;}
h1, h2, h3, h4, h5 {font-family: 'Lora', serif; font-weight: normal;}
h1 {font-size: 2em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.167em;}
h5 {font-size: 1em;}
h1.pageName {border-bottom: 1px solid #d0d0d0;}
a, a:visited {text-decoration: none; color: unset;}
span.text-breakpoint {display: inline-block;}
.logo a:hover {opacity: unset;}
iframe {max-width: 100%;}
.section-padding {padding: 36px 0;}
#parallax-overlay {display: none;}
.Image-align-left img, .Image-align-right img {border-radius: 12px;}

@media (max-width: 1170px) {
#pageContainer {margin-top: 0;}
}

@media (max-width: 800px) {
#pageContainer {margin-top: 42px;}
h1, h2, h3, h4, h5 {text-align: center;}
p {text-align: justify; text-align-last: center;}
.Image-align-left, .Image-align-right {float: none; display: block; margin: 0 0 24px}
.Image-align-left img, .Image-align-right img {float: none !important; margin: 0 !important;}
}

@media (max-width: 600px) {
body {font-size: 16px;}
}

/* Container system */

.container-1170 {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin: auto;}
.container-1170 {max-width: 1170px;}
div.sub-20, div.sub-25, div.sub-33, div.sub-50, div.sub-66, div.sub-75, div.sub-100 {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin: 12px 15px;}
div.sub-20 {max-width: calc(20% - 30px);}
div.sub-25 {max-width: calc(25% - 30px);}
div.sub-33 {max-width: calc(33.33% - 30px);}
div.sub-50 {max-width: calc(50% - 30px);}
div.sub-66 {max-width: calc(66.66% - 30px);}
div.sub-75 {max-width: calc(75% - 30px);}
div.sub-100 {max-width: 1170px;}
div.strip-100 {display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%;}

@media (max-width:800px) {
div.sub-25, div.sub-75, div.sub-33, div.sub-66, div.sub-50 {max-width: calc(100% - 30px); padding; 12px 15px; text-align: center;}
}

/* Transitions */

a, a.my-btn, #buckets a, #contactForm input.buttonSubmit, #contactForm input, div#contactForm textarea, div#contactForm select {webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out}

/* Mobile Phone Number Link */

a[href^=tel] {color: inherit; text-decoration: none;}

@media handheld, only screen and (min-width:801px) {
a.phone {text-decoration: none; pointer-events: none; cursor: default;}
}

/* Buttons */

a.my-btn, #contactForm input.buttonSubmit {display: block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; width: 100%; max-width: 260px; margin-top: 24px; padding: 14px; background: #4e7ac7; font-size: 1em; color: #fff; text-decoration: none; text-transform: uppercase; border: none; border-radius: 4px;}
a.my-btn:hover, #contactForm input.buttonSubmit:hover {opacity: unset; filter: saturate(150%);}

@media (max-width: 800px) {
a.my-btn, #contactForm input.buttonSubmit {margin: 24px auto 0;}
}

@media (max-width: 480px) {
a.my-btn, #contactForm input.buttonSubmit {max-width: 220px; padding: 12px;}
}

/*------ Header ------*/

#searchContainer {display: none;}
#header {max-width: 100%;}

@media (max-width: 800px) {
#header {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
}

/* Header top */

@media (min-width: 601px) {
#header-top-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
}

#header-top-strip .sub-100 {-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}
#header .social a {margin-right: 16px; font-size: 1.25em;}
#header .social a:hover {opacity: 0.75;}
#header-top-strip a.phone {font-size: 1.125em;}

@media (max-width: 600px) {
#header .social {margin-bottom: 12px;}
#header .social a {margin: 0 8px;}
}

/* Header main */

@media (min-width: 801px) {
#header-main-strip .sub-100 {-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
}

#header-main-strip {background: rgba(0, 0, 0, 0.25);}
#header-main-strip .sub-100 {position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; margin: 24px 15px;}
#header a.logo {position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}

/* Nav */

#header .ddsmoothmenu-h {-webkit-box-flex: 3; -ms-flex: 3; flex: 3; max-width: 700px;}
#header .ddsmoothmenu-h, .ddsmoothmenu-h > ul {height: 100%;}
#header .ddsmoothmenu-h > ul {display: -webkit-box; display: -ms-flexbox; display: flex;}
#header .ddsmoothmenu-h > ul > li {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#header .ddsmoothmenu-h ul li a {display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; width: 100%; height: 100%; text-align: center; font-family: 'Lora', serif; font-size: 1.167em; color: #fff;}
#header .ddsmoothmenu-h ul li a:hover {color: #dda800;}
#header .ddsmoothmenu-h ul li ul {top: 100% !important;}

@media (max-width: 1100px) {
#header .ddsmoothmenu-h ul li a {font-size: 1em;}
}

@media handheld, only screen and (max-width:800px) {
div#main-nav-container {display: none;}
}

/* Mobile nav */

.slicknav_menu {position: absolute; width: 100%; min-width: 306px; height: 42px; background: #00005b; z-index: 3;}
.slicknav_btn {background: none;}
.slicknav_menu .slicknav_icon-bar {background: #fff;}
.slicknav_nav {background: #35478c;}
.slicknav_nav ul li {border: none;}
.slicknav_nav a:hover {opacity: unset; background: #DB7D00;}

/*------ Footer ------*/

#footerwrap {width: 100%; margin: auto; text-align: unset; background: #16193b;}
#footer {display: -webkit-box; display: -ms-flexbox; display: flex;  justify-content: space-between; width: 100%; max-width: 1170px; height: unset; min-height: 150px;}
#footer-contact, #logo-footer {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 15px;}
#footer-contact {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.75;}
#logo-footer {-webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; }
#footer-contact a {color: #fff;}
.webDugoutLink, .webDugoutLink a {text-align: center; line-height: 1.5; font-size: 0.55rem; color: #afafaf;}
.webDugoutLink::before {display: block; content: "Copyright 2020 All Ports Trucking. All Rights Reserved.";}

@media (max-width: 800px) {
#footer {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: unset; text-align: center;}
#footer-contact, #logo-footer {-webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center;}
#footer-contact {padding-bottom: 0;}
}

/*------- Body fade in ------*/

body {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-moz-keyframes fadein { /* Firefox */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}
@-o-keyframes fadein { /* Opera */
    0%{opacity:0}
    50%{opacity:0}
    100%{opacity:1}
}

/*------ Overrides ------*/

/* Dark color */

/* Mid color (can be accent color if no third color available) */

.slicknav_nav  {background: #00005b;}
#contactForm input:not([type="submit"]):focus, div#contactForm textarea:focus, div#contactForm select:focus {box-shadow: inset 0px 0px 0px 2px #00005b;} /* Change color only */

/* Accent color */

a.my-btn, #contactForm input.buttonSubmit {background: #DB7D00;}
#header .social i, #header a.phone i, /*#header .ddsmoothmenu-h ul li a.menuactive,*/ #footer-contact a i.fas {color: #DB7D00;}


/* Additional changes for this site */

#footerwrap {background: #212121;}
#header .social i, #header a.phone i, i.fas {color: #00005b;}
#logo-footer > a {margin-bottom: 12px;}
#header .ddsmoothmenu-h ul li a:hover {color: #fff; opacity: 0.75;}
/*div#parallax-overlay a.my-btn {background: none; border: 2px solid #fff;}
div#parallax-overlay a.my-btn:hover {background: rgba(255, 255, 255, 0.25);}*/
#buckets-strip h3 {color: #00005b}
#buckets-strip h3 i.fas {color: #ccc;}
div#home-intro-strip {background: #00005b;}
div#home-intro, #buckets-strip, #home-contact-strip {background: unset !important;}
div#home-intro * {color: #fff;}

/*------ Contact section ------*/

#map {margin-top: 24px;}
.contact-container {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 2em;}

/* Contact form */

#UpdatePanel1 div#contactForm {display: none;}
#contactForm {width: 100%; max-width: 500px; margin: 24px auto;}
#contactForm .fRow {position: relative; margin: 8px 0;}
#contactForm input, div#contactForm textarea, div#contactForm select {width: 100%; margin: 4px 0; font-size: 1em; border: none; border-radius: 4px; background: #fff;}
#contactForm input:not([type="submit"]):focus, div#contactForm textarea:focus, div#contactForm select:focus {box-shadow: inset 0px 0px 0px 2px #4e7ac7;} 
#contactForm textarea {height: 32px !important;}
#contactForm textarea:focus {height: 100px !important;}
#contactForm span.cformlabel {font-size: .8em; width: 100%;}
#contactForm .errorRequired {position: absolute; top: 0; right: 0;}

/* Body fade in */
body {
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*------ Leave this comment for space above ------*/