@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

h1 {font-size: 2.8125rem}
h2 {font-size: 1.75rem}
h3 {font-size: 1.625rem}
h4, th{font-size: 1.4375rem}


/* HEADER ------------------------------*/
.header-wrapper {position:fixed; top:0; left:0; width:100%; z-index: 10;}
header {background:#fff; position: relative; transition: ease all 200ms; width: 100%; z-index:10; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center;}
        .management>.header-wrapper {top:35px}
        .management2>.header-wrapper {top:80px}
        header.scroll {box-shadow: 0 1px 0 0 #C5CED2; }
#brand {height: 4.125em; padding: 0.125em 1em 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;}
#brand img {max-width: 12.25rem; height: auto}

/* NAV ------------------------------ */
nav ul{margin: 0}
#navContainer {padding-right:1em; -webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;}
#mainnav{overflow:visible}
#mainnav ul{text-align:right;overflow:visible;margin: 0;padding: 0;}
#mainnav li{display:inline-block;position:relative}
#mainnav a{display: block; padding: 0 0.85em; line-height:4.125rem; text-decoration: none;font-weight: 700;font-size: 1.125rem;color: #000000;}
#mainnav>ul>li {margin-left: 1px}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a, #mainnav>ul>li:focus-within>a{background:#056D87;color:#fff}
#mainnav>ul>li.on>a{background:#952C50;color:#fff}
/* drop-down menu */
#mainnav li.menu-item-has-children {
	position: relative;
}
#mainnav li > div {
        z-index:1;
        width:14.0625rem;
        padding:1em 0;
        background:rgba(0,0,0,.8);
        position:absolute;
        overflow:auto;
        height:auto;
        top: -200vh;
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition: ease 200ms opacity 0.35s;
}
/* fade out */
#mainnav li:not(.expand) > div {
	transition:
		opacity .2s ease-out 0.25s,
		visibility .2s ease-out 0.25s,
		top 0s linear 0.7s;
}

#mainnav li:hover > div,
#mainnav>ul>li.tapped > div,
#mainnav>ul>li>a:focus + div,
#mainnav>ul>li.expand>div {
    opacity: 1;
    top: 100%;
	visibility: visible;
}

/* fade in */
#mainnav>ul>li:is(:hover, .expand)>div {
    transition:
		opacity .2s ease-in .3s,
		visibility .2s ease-in 0s,
        top 0s linear .3s;
}

#mainnav>ul>li:nth-last-child(-n+3) div{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:#fff}
#mainnav li ul li a{font-weight: 700; font-size: 0.875rem; color: #000000; text-align: right;display:block;width:100%;text-align:left;float:left; line-height: 1.25em; padding:0.25em 1em;}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff;background:#952C50}
/* Accessible dropdowns */
#mainnav>ul>li.menu-item-has-children>a {
	padding-right: 1.625em;
}

#mainnav>ul>li>button {
	background: transparent;
	border: 0;
	font-size: 1rem;
	height: 1.5rem;
	inset: 50% clamp(0.25em, -0.167em + 0.89vw, 0.5em) auto auto;
	margin: 0;
	opacity: .75;
	outline-offset: -2px;
	padding: 0;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
	width: 1.5rem;
}

#mainnav>ul>li>button:before {
	background: #333;
	content: '';
	height: .75rem;
	left: 0;
	mask: url('/images/icons/misc/chevron-down.svg?v=1.01') no-repeat center / auto .75em;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
	transition: all .3s ease;
}


#mainnav>ul>li.on>button::before,
#mainnav>ul>li:hover>button::before,
#mainnav>ul>li:focus-within>button::before,
#mainnav>ul>li>button:focus-visible::before,
#mainnav>ul>li>a:focus-visible+button::before {
	background: #FFF;
	opacity: 1;
}


/* search */
header .search {position: relative; background:#ECECEC; height: 4.125rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
header .search input {font-family: 'Merriweather', serif; border-radius:0; font-style: normal; transition:ease all 200ms; padding: 0 4.125rem 0 1em; width:13.125rem; height:4.125rem; border:0; background:none; box-shadow:none; font-size: 1rem; opacity:1; color: #056D87;}
header .search input:focus {background: none; box-shadow: inset 0 -4px 0px 0px #056D87}
        header .search ::-webkit-input-placeholder {font-family: 'Merriweather', serif; font-style:italic; font-size: 1rem; opacity:1; color: #056D87;}
        header .search ::-moz-placeholder {font-family: 'Merriweather', serif; font-style:italic; font-size: 1rem; opacity:1; color: #056D87;}
        header .search :-ms-input-placeholder {font-family: 'Merriweather', serif; font-style:italic; font-size: 1rem; opacity:1; color: #056D87;}
        header .search :-moz-placeholder {font-family: 'Merriweather', serif; font-style:italic; font-size: 1rem; opacity:1; color: #056D87;}
header .search button {height: 4.125rem; width: 4.125rem; position:absolute; right:0; top:0; background: url(/images/search.svg) no-repeat center}
header .search button:hover {opacity: 0.75; filter: grayscale(1)}

/* mobile */
#mobilenav,.menu{display: none}


/* MAIN ------------------------------ */
main {transition: ease all 200ms}
.home *:not(footer) .wrap{width:100%;max-width:79rem;margin-left:auto;margin-right:auto;position:relative;overflow:auto}
.interior main {padding:0 0 10rem;}
.interior main>.wrap {padding-right: 1rem;z-index: 1; max-width:83.75rem; overflow: visible; padding-left:1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;}
.interior main>.wrap>aside {order:1; width:15.0625rem; min-width:15.0625rem; padding-right: 1.875rem; overflow:hidden;float: left;}
.interior main>.wrap>#content {width:100%; order:2; margin-right: 12em; overflow:visible; max-width:53.125rem; padding:0 0 3.125rem 3.125rem; border-left:1px solid #C5CED2; min-height:600px;position:relative}
.interior.fullWidth  main>.wrap {width: 100%;z-index: 1;margin: 0 auto;float: none; padding:2rem 0 0; border:0}
.interior.fullWidth  main>.wrap>#content {width: 100%; max-width:60rem;margin: 0 auto;float: none; padding:0; border:0}
.interior.fullWidth.fleet  main>.wrap,
.interior.fullWidth.ports  main>.wrap {max-width:1200px; z-index: 1;padding: 2rem 1em 0; margin: 0 auto}
.interior.fullWidth.fleet  main>.wrap>#content,
.interior.fullWidth.ports  main>.wrap>#content {max-width:100%;}

.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
   -moz-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
#content .twoCol > * {width: 100%; display: inline-block; margin:0}
#content .twoCol > li+li {margin:0}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;-moz-columns: auto;columns: auto;
	-webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:0 0 1em 2em;}
.photoleft{margin:0 2em 1em 0;}
.content .aligned-images .photoright {margin:0 0 1em 1%;}
.content .aligned-images .photoleft {margin:0 1% 1em 0;}

.pageHeader {padding: 5.625rem 1em 8.875rem;}
.pageHeader h1 {font-size: 2.8125rem; line-height: 1em; max-width: 83.75rem; margin: 0 auto 1rem; padding-bottom: 0.75em}
.pageHeader h1:after {height:0.375rem; width:4.625rem}
.pageHeader p {max-width: 43rem; margin:0 auto 1em; font-weight: 400;font-size: 1.25rem;color: #FFFFFF;text-align: center;line-height: 2rem;text-shadow: 0 2px 34px rgba(0,0,0,0.50);}

.content .highlight {margin:3em 0}
blockquote {float: right; max-width:287px; margin: 0 0 0 2em; text-align:right}

.home h2 {font-size: 2.3125rem; margin-bottom:0.75em; font-weight:900; text-align: center;}
.home h2:after {content: ""; margin:0.25em auto; display: block; width:4.625rem; height: 0.375rem; background: #952C50}
.home #infographic h2:after {display: none;}

#hero {height: calc(100vh - 4em); background: no-repeat center / cover}
#hero .wrap {position: absolute; bottom: 130px; left:0; width:100%; max-width:100%; text-align:center;}
#hero .wrap h1 {font-size: 2.5em; margin:0 auto 0.75em; max-width:70rem}
#hero .wrap h1 span {font-size: 1.5rem; line-height:2em;}
#hero .wrap .hover-buttons {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#hero .wrap .hover-buttons a {font-size: 1.25em;}
#hero .wrap .hover-buttons a+a {margin-left:1em}
#hero .wrap .hover-buttons a:hover {background: #056D87; color:#fff}
#hero .hover-images {position: absolute; z-index: 1; pointer-events: none; top:0; left:0; width:100%; height:100%;}
#hero .hover-images div {position: absolute;opacity: 0; transition: ease all 200ms; top:0; left:0; width:100%; height:100%; background-position:center; background-repeat: no-repeat; background-size: cover}
#hero .hover-images div.hover {opacity: 1;}
        /*#hero .hover-images [data-attribute="Safety-Culture"] {background-image: url(/images/home/rotator-images/img-safety-culture.jpg)}
        #hero .hover-images [data-attribute="Ship-Assist"] {background-image: url(/images/home/rotator-images/img-ship-docking.jpg)}
        #hero .hover-images [data-attribute="Transportation"] {background-image: url(/images/home/rotator-images/img-transportation.jpg)}
        #hero .hover-images [data-attribute="LNG-Operations"] {background-image: url(/images/home/rotator-images/img-lng-operations.jpg)}
        #hero .hover-images [data-attribute="Environmental-Services"] {background-image: url(/images/home/rotator-images/img-environmental-services.jpg)}*/

#culture-of-safety {overflow:hidden; padding: 5.75rem 1em 12rem}
#culture-of-safety .wrap {padding: 3.5rem 5rem 4.5rem}
#culture-of-safety h2:before {content: ""; margin:0 auto 0.25em; display: block; height: 3.25rem; background: url(/images/home/icon-life-vest.svg) no-repeat center}
#culture-of-safety p {max-width: 32.5625rem; margin:0 auto}
#culture-of-safety .image {position: absolute; z-index: 1; width: 23.3125rem; height:18.125rem; box-shadow: 0 0 50px 0 rgba(0,0,0,0.3) }
#culture-of-safety .image-1 {top:17em; left:calc(50% - 43.75rem); background: url(/images/home/culture-of-safety-img-1.jpg) no-repeat center / cover}
#culture-of-safety .image-2 {top:15em; right:calc(50% - 43.75rem); background: url(/images/home/culture-of-safety-img-2.jpg) no-repeat center / cover}
#culture-of-safety .image span {bottom:-2em; left:0; position: absolute;}
#culture-of-safety .image-2 span {left:auto; right: 0;}

#welcome-message {position: relative; padding: 3em 1em 0; overflow:hidden}
#welcome-message .wrap {overflow: visible; max-width:70.75rem; z-index: 1; pointer-events: none}
#welcome-message .welcome-text {max-width:41.5rem}
#welcome-message h2 {text-align:left; position: relative; margin-left:-5.25rem; padding-left: 5.25rem}
#welcome-message h2:before {content: ""; display: block; position:absolute; left:0; top:0; width: 5.25rem; height:2.8125rem; background: url(/images/home/icon-tug-boat.svg) no-repeat center left}
#welcome-message h2:after {margin: 0.25em 0}
#welcome-message #map {position: relative; width:87.5rem; margin: -18.125rem auto 0; background: url(/images/home/map.jpg) no-repeat center / 87.5rem auto; height: 47.125rem;}
#welcome-message #map a {position: absolute; font-weight: 500; font-size: 0.75rem; color: #4A4A4A;}
#welcome-message #map a:hover {color:#952C50}
#welcome-message #map a.lng:hover {color:#056D87}
#welcome-message #map a:not(.before):not(.bottom-right):not(.lng):not(.bottom):not(.top):after {content: ""; display: inline-block; vertical-align: middle; margin-left: 0.5em; width: 0.8125rem; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center}
#welcome-message #map a.before:before {content: ""; display: inline-block; vertical-align: middle; margin-right: 0.5em; width: 0.8125rem; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center}
#welcome-message #map a.bottom:after {content: ""; display: block; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center}
#welcome-message #map a.bottom-right:after {content: ""; display: block; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center right}
#welcome-message #map a.top:before {content: ""; display: block; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center}
#welcome-message #map a.lng:after {content: ""; display: inline-block; vertical-align: middle; margin-left: 0.5em; width:0.9375rem; height:0.9375rem; background: url(/images/home/map-triangle.svg) no-repeat center}
#welcome-message #map a.lng.before:before {content: ""; display: inline-block; vertical-align: middle; margin-right: 0.5em; width:0.9375rem; height:0.9375rem; background: url(/images/home/map-triangle.svg) no-repeat center}
#welcome-message #map a.lng.before:after {display: none}
#welcome-message #map a.lng:after {content: ""; display: inline-block; vertical-align: middle; margin-left: 0.5em; width:0.9375rem; height:0.9375rem; background: url(/images/home/map-triangle.svg) no-repeat center}
#welcome-message #map a.lng.bottom-left:after {display: block; margin-left: 0}
#welcome-message #map a.right {text-align: right}
        #welcome-message #map #albany {top:15.517241379%; left: 61.357142857%}
        #welcome-message #map #portsmouth {top:15.782493368%; left: 83%}
        #welcome-message #map #new-york {left: 78%; top: 20.291777188%;}
        #welcome-message #map #philadelphia {left: 77.5%; top: 22.944297082%;}
        #welcome-message #map #baltimore {left: 76.25%; top: 26.259946949%;}
        #welcome-message #map #cove-point {left: 68.285714285%; top: 28.24933687%;}
        #welcome-message #map #norfolk {left: 74.857142857%; top: 32.891246684%;}
        #welcome-message #map #morehead {left: 73.857%; top: 37.379%;}
        #welcome-message #map #wilmington {left: 70.857%; top: 39.379%;}
        #welcome-message #map #chaleston {left: 68.714285714%; top: 43.899204244%;}
        #welcome-message #map #elba-island {left: 61.214285714%; top: 44.297082228%;}
        #welcome-message #map #savannah {left: 67.214285714%; top: 46.949602122%;}
        #welcome-message #map #brunswick {left: 66.714285714%; top: 48.673740053%;}
        #welcome-message #map #fernandina {left: 66.571428571%; top: 50.663129973%;}
        #welcome-message #map #jacksonvill {left: 66.642857142%; top: 52.652519893%;}
        #welcome-message #map #miami {left: 68.142857142%; top: 63.660477453%;}
        #welcome-message #map #new-orleans {left: 51.15%; top: 53.580901856%;}
        #welcome-message #map #lake-charles {left: 49.714285714%; top: 48.541114058%;}
        #welcome-message #map #freeport {left: 40.928571428%; top: 52.387267904%;}
        #welcome-message #map #port-arthur {left: 36.57%; top: 48.072%}
        #welcome-message #map #costa-azul {left: 13%; top: 45.755968169%;}
        #welcome-message #map #san-juan {left: 88.285714285%; top: 81.034482758%;}
.management .waves:after {content: ""; position:absolute; bottom:0; left:0; width:100%; height: 100%; background: url(/images/waves.png) no-repeat center bottom / 100% 100px}
.management .waves.blue:after {background: url(/images/waves-blue.png) no-repeat center bottom / 100% 100px}
.management .waves svg {display: none}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .waves {transform: none;}
        .waves:after {content: ""; position:absolute; bottom:0; left:0; width:100%; height: 100%; background: url(/images/waves.png) no-repeat center bottom / 100% 100px}
        .waves.blue:after {background: url(/images/waves-blue.png) no-repeat center bottom / 100% 100px}
        .waves svg {display: none}
}

#infographic {margin: -2.8125rem 0 0; overflow:hidden; position: relative; background:#F7F7F7; padding: 0 0 22rem}
#infographic .wrap {text-align: center; z-index: 3; overflow:visible}
#infographic .graphic {position: relative; /*animation: bob 5s linear infinite*/}
#infographic .graphic img {max-width: 54.5rem; width:100%; height: auto; z-index: 3; position:relative; height:auto;}
#infographic .graphic .wake {position: absolute;}
#infographic .graphic .front-wave {animation: jitter 0.75s linear infinite; bottom:-0.625rem; z-index: 4; left:2.3125rem; width:60.75rem; height: 3rem; background: url(/images/home/infographic-wave-front.svg) no-repeat bottom left}
#infographic .graphic .middle-wave {animation: jitter 0.75s linear infinite; animation-delay: 0.3s; bottom:0; z-index: 2; left:-0.625rem; width:17.25rem; height: 2.875rem; background: url(/images/home/infographic-wave-middle.svg) no-repeat bottom left}
#infographic .graphic .back-wave {animation: jitter 0.75s linear infinite; animation-delay: 0.7s; bottom:1.25rem; z-index: 1; left:4.375rem; width:17.25rem; height: 2.875rem; background: url(/images/home/infographic-wave-back.svg) no-repeat bottom left}
#infographic .stats li {position:absolute; z-index: 4; font-size: 1.9375em;}
        #infographic .stats li.employees {top: 8.9375rem; left: 8.5%;}
        #infographic .stats li.ports {top: 6.375rem; left: 24%;}
        #infographic .stats li.years {top: 3rem; left: 37%;}
        #infographic .stats li.assists {top: 6.5625rem; left: 67%;}
        #infographic .stats li.safety {top: 8.6875rem; left: 90%;}
                #infographic .stats li.safety span {white-space: nowrap}
        #infographic .stats li.horsepower {top: 32.8125rem; left: 4.5%;}
        #infographic .stats li.tugboats {top: 33.5625rem; left: 23%;}
        #infographic .stats li.barrels {top: 33.8125rem; left: 42%;}
        #infographic .stats li.steel {top: 33.4375rem; left: 68%;}
        #infographic .stats li.bulk {top: 32rem; left: 85%;}
#infographic .stats li:after {content: ""; font-size: 0.5em; position:absolute; display: inline-block; transform-origin: bottom right; border-right: 2px dotted rgba(0,0,0,0.15)}
#infographic .stats.bottom li:after {content: ""; font-size: 0.5em; transform-origin:top right; border-color: rgba(255,255,255,0.15)}
        #infographic .stats li.employees:after {bottom: -3.375em; right: -3em; height: 4em; transform: rotate(-36deg)}
        #infographic .stats li.ports:after {bottom: -6.25em; right:0; height: 6.25em; transform: rotate(-20deg)}
        #infographic .stats li.years:after {height: 4.375em; bottom: -4.875em; right: 3.6875em; transform: rotate(-10deg)}
        #infographic .stats li.assists:after {height: 4.375em; bottom: -5em}
        #infographic .stats li.safety:after {height: 5em; left:-5.375em; bottom: -2.5em; transform: rotate(60deg)}
        #infographic .stats li.horsepower:after {height: 6.25em; top: -2.1875em; transform: rotate(64deg); right: -73px;}
        #infographic .stats li.tugboats:after {height: 3.25em;top: -3em;transform: rotate(24deg);right: 53px;        }
        #infographic .stats li.barrels:after {height: 2.25em;top: -3em;}
        #infographic .stats li.steel:after {height: 2.625em;top: -3em;transform: rotate(-24deg);right: 100px;}
        #infographic .stats li.bulk:after {height: 6.375em; top: -3.625em;  transform: rotate(-54deg);  left: -26px}

/*
#infographic .passing-wave-1 {opacity:0.75; position: absolute; z-index: 5; top:32.375rem; width:22.625rem; height: 3rem; background: url(/images/home/passing-wave.svg) no-repeat center / contain; animation: passing-wave 6.5s linear infinite}
#infographic .passing-wave-2 {opacity:0.75; position: absolute; z-index: 5; top:36.375rem; width:23.625rem; height: 3.5rem; background: url(/images/home/passing-wave.svg) no-repeat center / contain; animation: passing-wave 5s linear infinite}
#infographic .passing-wave-3 {opacity: 0.75; position: absolute; z-index: 5; top:40.375rem; width:24.625rem; height: 4.5rem; background: url(/images/home/passing-wave.svg) no-repeat center / contain; animation: passing-wave 4.5s linear infinite}
*/
#infographic:before {content:""; display: block; position:absolute; z-index: 1; top:5.875rem; width: 100%; height:26.5625rem; background-image: linear-gradient(180deg, #F7F7F7 33%, #CDCDCD 100%);}
#infographic:after {content:""; display: block; position:absolute; z-index: 1; bottom:0; width: 100%; height: 24.5625rem; background-image: linear-gradient(180deg, #1B4C6A 5%, #0D2C3F 91%);}
#infographic .waves {z-index: 2;}
#infographic .waves.blue {bottom: 27.5625rem}
/*
@keyframes bob {
        0% {transform: translateY(0)}
        50% {transform: translateY(12px)}
        100% {transform: translateY(0)}
}*/
@keyframes jitter {
        0% {transform: translateY(0)}
        50% {transform: translateY(-1px)}
        100% {transform: translateY(0)}
}
@keyframes passing-wave {
        0% {left: 100%}
        100% {left: -100%}
}

#social-feed {text-align:center; padding:4.0625rem 1em}
#social-feed h2:before {content: ""; margin:0 auto 0.25em; display: block; height: 3.5rem; background: url(/images/home/icon-radar.svg) no-repeat center}

#careers {padding:0 1em 10.625rem}
#careers .wrap {padding-top:3.375rem}
#careers h2:before {content: ""; margin:0 auto 0.25em; display: block; height: 3.25rem; background: url(/images/home/icon-binoculars.svg) no-repeat center}

.content-nav {overflow: auto; padding-bottom: 1em; width:100%; float:left;}
.fleet-toggle, .display-toggle {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;}
.fleet-toggle {float: left;}
        #content .fleet-location .fleet-toggle {float:none; text-align: left; margin-bottom:1em; display: block}
.fleet-toggle > *+* {margin-left: 0.3125rem}
.fleet-toggle > .download-summary {margin-left: 2.25rem}
.display-toggle {float: right;}
.display-toggle * {margin-left: 0.3125rem}
.port-page .fleet-location {margin-top: 3em; padding-top: 3em;}
        .ports.port-page .fleet-location {margin-top: 0; padding-top: 0; border:0}
.fleet-location h2 {font-size: 1.4375rem; margin-bottom: 1em; font-weight:700}
.fleet-location .display-toggle {position: absolute; top:2.5rem; right:0}
.fleet-location.grid li {float:left; text-align:center; width:17.5%; margin:0 3.125% 3.125% 0}
.fleet-location.grid li:nth-child(5n+5) {margin-right:0}
.fleet-location.grid li span {display: block; text-align:center}
.fleet-location.grid li .vessel {position: relative; width:100%; margin-bottom: 0.75em; padding-bottom: 100%; background-size: cover; background-position:center}
.fleet-location.grid li .vessel-name {font-weight: 700; margin-bottom: 0.25em;font-size: 1rem;color: #333333;line-height: 1.1875rem;}
.fleet-location.grid li .vessel-type {font-weight: 400;font-size: 0.875rem;color: #4A4A4A;line-height: 1.1875rem;}
.fleet-location.grid li .vessel-hp {font-style: italic;font-weight:300;font-size: 0.875rem;color: #4A4A4A;line-height: 1.1875rem;}
.fleet-location.grid ul,
.fleet-location.list ul {overflow: auto; margin: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;}
.fleet-location.list li {width:48%; margin-bottom: 1em; padding-right:1em; display: inline-block; vertical-align: top; text-align: left; }
        .port-page .fleet-location.list li {width:100%}
.fleet-location.list li .vessel { display: inline-block; vertical-align:middle; margin-right: 0.5em; width:2.8125rem; min-width:2.8125rem; padding-bottom: 2.8125rem; background-size: cover; background-position:center}
.fleet-location.list li .vessel-name {display: inline-block; vertical-align:middle; width: 27%; font-weight: 700; font-size: 1rem;color: #333333;line-height: 1.1875rem;}
.fleet-location.list li .vessel-type {display: inline-block; vertical-align:middle; width:25%; font-weight: 400; font-size: 0.875rem;color: #4A4A4A;line-height: 1.1875rem;}
.fleet-location.list li .vessel-hp {display: inline-block; vertical-align:middle; width:25%; font-style: italic; font-weight:300;font-size: 0.875rem;color: #4A4A4A;line-height: 1.1875rem;}
        .fleet-location.barge.list li {min-height:2.8125rem; padding-left:3.5rem; line-height:1em; position: relative}
        .fleet-location.barge.list li .vessel {position: absolute; top:0; left:0;}
        .fleet-location.barge.list li .vessel-name {width:100%; display: block}
        .fleet-location.barge.list li .vessel-name,
        .fleet-location.barge.list li .vessel-type,
        .fleet-location.barge.list li .vessel-hp {width:auto; display: block}

.fleet-location.grid li .vessel .credit {color: #FFF;font-size: .6em;position: absolute;width: 100%;bottom: .5em;left: 50%;line-height: 1.4;text-shadow: 0 1px 1px rgba(0,0,0,.25);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);transform: translateX(-50%);}

.ports .all-ports-map {height: 37.5rem; margin-bottom: 2.5em}
.ports h2 {font-size: 1.4375rem; }
.ports:not(.port-page) h2 {margin-bottom: 1.5em; padding-bottom: 0.35em; border-bottom: 1px solid rgba(0,46,67,0.2)}
.ports h2 span {font-weight: 300; font-style: italic;font-size: 16px;}
.ports .port-list {position: relative;}
.ports .port-list .legend {position: absolute; top:0; right:0}
.ports .port-list ul {column-width: 20em}
.ports .contact-port {overflow: auto; width:calc(100% - 17.25rem); margin-bottom: 3em}

.port-page main > .port-map {height: 31.25rem}
.port-page main > .port-map:before {height: 8.0625rem;}
.port-page main > .port-map:after {height: 12rem;}
.port-page h1 {font-size: 2.25rem}
.port-page .port-info {float: right; width:15.1875rem; margin-bottom:3em}
.port-page .contact-port .main-contact,
.port-page .contact-port .email-port {float: left; width: 100%; clear:left}
.port-page .contact-port .email-port label {font-size: 0.8125rem;display: block; line-height: 1.5em; color: #808080;}
.port-page .contact-port .email-port input:not([type="submit"]) {height:2.375rem; padding: 0 0.5em; background: #FFFFFF;border: 1px solid #E0E0E0;border-radius: 2px;}
.port-page .contact-port .email-port textarea {background: #FFFFFF;border: 1px solid #E0E0E0;border-radius: 2px;}
.port-page .contact-port .email-port input[type="submit"] {background: #952C50; padding:0; width:7rem; height: 2.6875rem}
.port-page .contact-port .email-port input[type="submit"]:hover {background: #056D87}
.ports.port-page hr {margin: 1em 0 2em; clear:both}
.ports.port-page .port-fleet {position: relative; width:100%; float:left; clear:both; margin-top:1em; overflow: visible}
.ports.port-page .port-fleet .fleet-toggle {position: absolute; top:-0.6875rem; right:5.25rem;}
.ports.port-page .port-fleet .display-toggle {position: absolute; top:-0.6875rem; right:0;}
.ports.port-page .port-fleet h2 {padding-right:18.25rem; margin-bottom:1.5em}

.interior.fullWidth.emergency-page main > .wrap #content {max-width: 64.3125rem; padding: 0 1em}
.emergency-page #emergency-dashboard {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;}
.emergency-page #emergency-dashboard .top {overflow: auto; width:49%; min-width:22.375rem;}
.emergency-page #emergency-dashboard .top #sidebar {background: #FFFFFF; overflow:auto; border: 1px solid #C5CED2;border-radius: 7px;}
.emergency-page #emergency-dashboard h2 {font-weight: 700; margin-bottom:0.5em; position:relative; font-size: 1.25rem;color: #952C50;}
        .emergency-page #emergency-dashboard h2.icon:before {content: "";position: absolute;display: block;width: 16px;height: 16px;left: -24px;top: 4px;        }
        .emergency-page #emergency-dashboard h2.icon.phone:before {background: url(/images/emergency-dashboard/icon-phone.svg) no-repeat center / contain}
        .emergency-page #emergency-dashboard h2.icon.info:before {background: url(/images/emergency-dashboard/icon-info.svg) no-repeat center / contain}
        .emergency-page #emergency-dashboard h2.icon.message:before {background: url(/images/emergency-dashboard/icon-message.svg) no-repeat center / contain}
        .emergency-page #emergency-dashboard h2.icon.message.single {margin-left: 1.75em}
.emergency-page #emergency-dashboard .sticky {position:sticky; position: -webkit-sticky; top:5.25rem;}
.emergency-page #emergency-dashboard h3 {font-weight: 700; margin-bottom: 0.5em; font-size: 1rem;color: #000000;}
.emergency-page #emergency-dashboard .top > * {padding: 2rem 3.125rem}
.emergency-page #emergency-dashboard .message-board {width:49%; margin-left: 2%}
.emergency-page .post-a-message table td {width:33%}
.emergency-page #emergency-dashboard .message-board .current-messages {padding-left: 2rem; width:100%}
.emergency-page #emergency-dashboard .current-messages li .message-title .byline:before {content: "-"; font-weight: 500}
.emergency-page #emergency-dashboard.inactive {background: #FFFFFF; overflow:auto; border: 1px solid #C5CED2;border-radius: 7px; display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;}
.emergency-page #emergency-dashboard.inactive .top {width:100%; display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;}
.emergency-page #emergency-dashboard.inactive .top .phone-info {min-width:22.375rem;}
.emergency-page #emergency-dashboard.inactive .top .other-info {margin: 0; padding:2rem 3.125rem; border:0; border-left: 1px solid #C5CED2}
.emergency-page #emergency-dashboard.inactive .top .other-info .event-info {margin: 0; padding:0; border:0;}
.emergency-page #emergency-dashboard.inactive .top .other-info .event-info p {font-size: 1rem; line-height: 1.5em}


.emergency-page .mobileOnly {display: none}


#animated-graphic {position: relative; padding-bottom:100%; margin-top: 3em}
#animated-graphic #graphic {display: none;}
#animated-graphic #background {position: absolute; top:0; left:0; width:100%; height:100%; background: url(/images/safety-bg.svg) no-repeat center;
        animation: rotation 10s infinite linear;
        -webkit-animation: rotation 10s infinite linear;}

@-webkit-keyframes rotation {
        from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
        to {
        transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        }
}
#animated-graphic h2 {width:100%; position:absolute; top:calc(50% - 0.25em); left:0; transform: translateY(-50%); font-size: 2.1875rem; color: #000000;text-align: center;}
#animated-graphic h2:after {content: ""; display: block; margin: 0.5rem auto 0; width: 4.625rem; height: 0.375rem; background:#952C50 }
#animated-graphic h2 i {color:var(--Moran-red); font-size:1.125em; display: block; margin-bottom:0.25em;}
#animated-graphic .value-point {position:absolute; z-index: 1;}
#animated-graphic .value-point.on,
#animated-graphic .value-point:hover {z-index: 2;}
        /* 2 value points */
        #animated-graphic.two .value-points > div:first-child {left:6%; top:50%; transform: translateY(-50%)}
        #animated-graphic.two .value-points > div:nth-child(2) {right:6%; top:50%; transform: translateY(-50%)}
        /* 3 value points */
        #animated-graphic.three .value-points > div:first-child {left:50%; top:12%; transform: translateX(-50%)}
        #animated-graphic.three .value-points > div:nth-child(2) {right:12%; bottom:22%;}
        #animated-graphic.three .value-points > div:nth-child(3) {left:12%; bottom:22%; }
        /* 4 value points */
        #animated-graphic.four .value-points > div:first-child {left:50%; top:6%; transform: translateX(-50%)}
        #animated-graphic.four .value-points > div:nth-child(2) {right:6%; top:50%; transform: translateY(-50%)}
        #animated-graphic.four .value-points > div:nth-child(3) {left:50%; bottom:6%; transform: translateX(-50%)}
        #animated-graphic.four .value-points > div:nth-child(4) {left:6%; top:50%; transform: translateY(-50%)}
        /* 5 value points */
        #animated-graphic.five .value-points > div:first-child {left:50%; top:6%; transform: translateX(-50%)}
        #animated-graphic.five .value-points > div:nth-child(2) {right:10%; top:30%;}
        #animated-graphic.five .value-points > div:nth-child(3) {right:20%; bottom:12%; }
        #animated-graphic.five .value-points > div:nth-child(4) {left:20%; bottom:12%; }
        #animated-graphic.five .value-points > div:nth-child(5) {left:10%; top:30%; }
#animated-graphic .title {width: 10.5rem;height: 10.5rem;cursor: pointer;transition: ease all 200ms;border-radius: 50%;position: relative;border: 2px solid #fff;box-shadow: 0 2px 7px 0 rgba(0,0,0,0.10), 0 13px 24px 0 rgba(0,0,0,0.13);background: #002334;}
#animated-graphic .value-point:hover .title {box-shadow: 0 2px 7px 0 rgba(0,0,0,0.10), 0 13px 24px 0 rgba(0,0,0,0.13)}
#animated-graphic .title h3 {position:absolute; margin:0; top:50%; left:0; transform: translateY(-50%); width:100%; font-size: 1.5625rem;color: #fff;text-align: center;}
#animated-graphic .title h3 i {font-weight:300; display: block; opacity:0.3; transition:ease all 200ms; transform: scale(0.75); font-size: 1.5em; margin:-0.5em auto 0.125em}
#animated-graphic .value-point:hover .title h3 i {transform: scale(1)}
#animated-graphic .safety-content {opacity: 0;transition: ease all 200ms;pointer-events: none;position: absolute;top: calc(100% - 0.5em);left: 50%;transform: translateX(-50%);padding: 2em 1.5em; width:25.6875em; background: #fff;border-radius: 4px;box-shadow: 0 2px 7px 0 rgba(0,0,0,0.10), 0 13px 24px 0 rgba(0,0,0,0.13); border:2px solid #d4dadd}
#animated-graphic .value-point:hover .safety-content {opacity: 1; top: calc(100% + 0.5em);}
        /* show above the circle value point */
        #animated-graphic.three .value-points > div:nth-child(2) .safety-content,
        #animated-graphic.three .value-points > div:nth-child(3) .safety-content,
        #animated-graphic.four .value-points > div:nth-child(3) .safety-content,
        #animated-graphic.five .value-points > div:nth-child(3) .safety-content,
        #animated-graphic.five .value-points > div:nth-child(4) .safety-content {bottom: calc(100% - 0.5em); top:auto}
        #animated-graphic.three .value-points > div:nth-child(2):hover .safety-content,
        #animated-graphic.three .value-points > div:nth-child(3):hover .safety-content,
        #animated-graphic.four .value-points > div:nth-child(3):hover .safety-content,
        #animated-graphic.five .value-points > div:nth-child(3):hover .safety-content,
        #animated-graphic.five .value-points > div:nth-child(4):hover .safety-content {bottom: calc(100% + 0.5em); top:auto}
#animated-graphic .safety-content > * {font-size:0.875em; line-height: 1.25em; padding:0}
#animated-graphic .safety-content > *:last-child {margin-bottom:0}
#animated-graphic .safety-content ul {margin: 0; padding:0}
#animated-graphic .safety-content ul li:before {content: "";background: #952c50;top: 0.3125rem;left: 0.9375rem;display: block;width: 5px;height: 5px;border-radius: 50%;}


/* TIMELINE ---------------------------- */
body.timeline .pageHeader {padding: 27vh 1em;}
.waveyline:after {content: "";width: 1px;background: #056D87;position: absolute;height: 30vh;z-index: 5;top: 0;right: 50%;transform: translateX(50%);}
.timeline-full {position: relative;}
.timeline-full:before {content: "";width: 1px;background: #056D87;position: absolute;height: calc(100% - 5rem);z-index: 1;top: 0;right: 50%;transform: translateX(50%);}
.timeline-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;position: relative;margin-bottom: 3.75rem;}
.timeline-item:before {content: "";position: absolute;height: 1.75rem;width: 1.75rem;border-radius: 50%;right: 50%;transform: translateX(50%);top: 0;z-index: 3;border: 1px solid #056D87;}
.timeline-white .timeline-item:before {background: #F7F7F7;}
.timeline-blue .timeline-item:before {background: #002334;}
.timeline-item p {line-height: 1.625em;}
.timeline-item .timeline-text {max-width: 29.6875rem;width: 100%;}


.timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(odd) img,
.timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(even) img {order: 1;margin-left: 1.75rem;}

.timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(odd) .timeline-text,
.timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(even) .timeline-text {order: 2;}

.timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(even) img,
.timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(odd) img {margin-right: 1.75rem;}
.timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(even) .timeline-text,
.timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(odd) .timeline-text {text-align: right;}


.today {padding: 1em 0 10em;}


.today p {
        max-width: 45.9375rem;
        margin-left: auto;
        margin-right: auto;
}
/* FOOTER ------------------------------ */
.fatFooter > div {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: center; align-items: center;}
.fatFooter>nav{float: left;width: 80%}
.fatFooter>nav>ul{float: left;width:25%}
#web-solutions {float:right;margin-left:11px}
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}

footer .logos > div {text-align:center; width: 100%;}
.logos form {
display: flex;
align-items: center;
}
.bigLogo {display: block; margin-bottom:1em; width: 100%;}
.bigLogo img {height: 3.25rem; width: auto;}
.wrap.logos img {margin:0 1.4em;}
    

@media screen and (max-width: 1375px) {
        #welcome-message {padding-bottom: 0; background: #F7F7F7 url(/images/home/map.jpg) no-repeat center / contain}
        #welcome-message .wrap {max-width: 62.5rem; margin:0 auto}
        #welcome-message .welcome-text {max-width:100%; margin-bottom:2em}
        #welcome-message #map {width:100%; margin: 0 auto; background:none; height: auto; margin:0 auto}
        #welcome-message #map ul {padding:0 2em; column-count: 2; max-width: 62.5rem; margin:0 auto}
        #welcome-message #map a {position: static; font-size:0.875em; display: inline-block}
        #welcome-message #map a:not(.before):not(.bottom-right):not(.lng):not(.bottom):not(.top)::after,
        #welcome-message #map a.bottom-right::after,
        #welcome-message #map a.bottom::after,
        #welcome-message #map a.lng::after,
        #welcome-message #map a.lng.bottom-left::after {display:none}
        #welcome-message #map a:not(.before):not(.bottom-right):not(.lng):not(.bottom):not(.top)::before,
        #welcome-message #map a.top::before,
        #welcome-message #map a.bottom-right::before,
        #welcome-message #map a.bottom::before {content: ""; display: inline-block; vertical-align: middle; margin-right: 0.5em; width: 0.8125rem; height: 0.8125rem; background: url(/images/home/map-dot.svg) no-repeat center;}
        #welcome-message #map a.lng::before {content: ""; display: inline-block; vertical-align: middle; margin-right: 0.5em; width: 0.9375rem; height: 0.9375rem; background: url(/images/home/map-triangle.svg) no-repeat center;}

        #infographic {margin-top: 0; padding-top: 2em;}
        #infographic .wrap {max-width: 59rem; font-size:0.875em}
        #infographic .graphic .front-wave {left:-7.5625rem}
        #infographic .graphic .middle-wave {left:-8.625rem}
        #infographic .graphic .back-wave {left:-5.625rem}
        #infographic .stats li {font-size: 1.75em}
        #infographic .stats li.horsepower {left: 1.5%}
        #infographic .stats li.tugboats {left:18%}
        #infographic .stats li.barrels {left:40%}
        #infographic .stats li.steel {left:65.75%}
        #infographic .stats li.bulk {left:82%; top: 33rem}
        #infographic .stats li.employees::after {right:1em; bottom: -6em; height: 6em; transform: rotate(-25deg);}
        #infographic .stats li.assists::after {height:8.375em; bottom: -9em}
        #infographic .stats li.safety::after {height: 6em;left: -1.375em;bottom: -4em;transform: rotate(51deg);            }
        #infographic .stats li.ports::after {bottom: -9.25em;right: 0;height: 9.25em;transform: rotate(-20deg);}
}

@media screen and (max-width: 1200px) {
        #welcome-message {padding-left: 6.25rem}
        #welcome-message #map ul {padding:0}
        .interior main > .wrap > #content {margin-right: 5em}
        .interior main > .wrap > aside {padding-right: 1em; min-width: 12rem}
}

@media screen and (max-width: 1070px) {
        #mainnav a {font-size:1rem}
        #mainnav>ul>li>button {inset: 50% 0 auto auto;}
        body > header .search input {width:10.125rem}
        #hero {height: calc(100vh - 6em)}
        #hero .wrap h1 {font-size: 1.8rem; line-height: 2.5rem}
        #hero .wrap .hover-buttons a {font-size: 1rem}
        #hero .wrap .hover-buttons a+a {margin-left: 0.25em}
        .home h2 {font-size: 1.8rem; position: relative; z-index: 2;}
        .interior main > .wrap > #content {margin-right: 1em}
        .port-page main > .port-map {height:30rem}

        .timeline-item img {width: 45%;}
        .timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(odd) img, .timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(even) img {margin-left: 0;}
        .timeline-full>div:nth-of-type(-n+4) .timeline-item:nth-of-type(even) img, .timeline-full>div:nth-of-type(n+5) .timeline-item:nth-of-type(odd) img {margin-right: 0;}
        .timeline-item .timeline-text {width: 45%}
        .timeline-item .timeline-text {font-size: .9em;}

        #animated-graphic .value-point.measure .safety-content {left:auto; right: 0; transform: none}
        #animated-graphic .value-point.evaluate .safety-content {left: 0; transform: none}


   
}

@media screen and (max-width: 1000px) {
        #infographic {padding: 2em 0 5em; text-align: center;}
        #infographic::before {top: 0; height: 21.5rem}
        #infographic::after {height: calc(100% - 21.5rem)}
        #infographic .graphic {max-width:30rem; margin:0 auto}
        #infographic .graphic img {max-width:100%}
        #infographic .graphic .front-wave {width: 31.75rem; left:-3.625rem; background-size: contain; bottom:0}
        #infographic .graphic .middle-wave {bottom:0.375rem; left:-5rem; width: 9.25rem; background-size: contain}
        #infographic .graphic .back-wave {bottom: 1.25rem; left: -2.4375rem; width: 9.25rem; background-size: contain;}
        #infographic .stats {width:40%; display: inline-block; vertical-align: top}
        #infographic .stats li {color:#fff; line-height: 1.25em; margin-bottom: 1.25em; position: static}
        #infographic .stats li:after {display: none !important}
        #infographic .stats li span {color: #C9D5DC}
                #infographic .stats li.employees:before {background-image: url(/images/home/infographic-icon-employees-white.svg)}
                #infographic .stats li.ports:before {background-image: url(/images/home/infographic-icon-pin-white.svg)}
                #infographic .stats li.years:before {background-image: url(/images/home/infographic-icon-timeline-white.svg)}
                #infographic .stats li.assists:before {background-image: url(/images/home/infographic-icon-cleat-white.svg)}
                #infographic .stats li.safety:before {background-image: url(/images/home/infographic-icon-safety-white.svg)}
        #infographic .waves.blue {bottom: calc(100% - 21.5rem)}
        .home .fatFooter .top {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
        .home .fatFooter .top .social {margin-top:2em; width: 100%; text-align:center;}
        .ports.port-page .port-fleet .port-fleet h2 {padding-right: 17.25rem}
        .ports.port-page .port-fleet .fleet-toggle,
        .ports.port-page .port-fleet .display-toggle {top:0; font-size:0.875em}
        .ports.port-page .port-fleet .fleet-toggle {right:4.5rem}
        .ports.port-page .port-fleet .fleet-toggle .button {line-height: 2.35em; height: 2.35em}
        .ports.port-page .port-fleet .display-toggle button {height: 2.35em; width: 2.35em}
        #animated-graphic #background {background-size: 75% auto}
        #animated-graphic h2 {font-size: 1.5rem;}
        #animated-graphic h2:before {padding-bottom: 2.188rem;}
        #animated-graphic .title {width:7.5em; height: 7.5em}
        #animated-graphic .title h3 {font-size:1.25em}
        #animated-graphic .safety-content {top:8em}
        #animated-graphic .safety-content {top:8em}
}

@media screen and (max-width: 990px) {
        #mainnav a {font-size: 0.875em;padding: 0 0.75em}
        #brand {width:10.5em; height: 100%;}
        #brand img {width: 100%;}
        body > header .search input {font-size: 0.875em}
                header .search ::-webkit-input-placeholder {font-size:1em}
                header .search ::-moz-placeholder {font-size:1em}
                header .search :-ms-input-placeholder {font-size:1em}
                header .search :-moz-placeholder {font-size:1em}
}

@media screen and (max-width: 900px) {
        #mainnav a {font-size: 0.75em; padding: 0 0.5em}
        body > header .search input {font-size: 0.75em; width: 8.125rem;}
}


/* INTERNET EXPLORER */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .interior.timeline .pageHeader {overflow: hidden;}
        .timeline-full > div:nth-of-type(-n+4) :nth-of-type(2n+1).timeline-item img, .timeline-full > div:nth-of-type(n+5) :nth-of-type(2n).timeline-item img {
                margin-left: 0;
                margin-right: 2.75rem;
        }
        .timeline-full > div:nth-of-type(-n+4) :nth-of-type(2n).timeline-item .timeline-text, .timeline-full > div:nth-of-type(n+5) :nth-of-type(2n+1).timeline-item .timeline-text {
                margin-right: 2.75rem;
        }
}