/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block
}
body {
	line-height: 1.5;
	background-color: #f2f2f2;
	font-family: 'Droid Sans', sans-serif;
	font-size: 1em;
	color: #676767
}
ol, ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
img {
	vertical-align: top
}
.clearfix:after, .clearfix:before {
	content: " ";
	display: table
}
.clearfix:after {
	clear: both
}
.clearfix {
	*zoom: 1
}
.container {
	width: 100%
}
.container50 {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px
}
.grid {
	background-image: url(images/grid_background.png);
	background-repeat: repeat;
	background-position: left top
}
.grid_green {
	background-image: url(images/grid_background_green.png);
	background-repeat: repeat;
	background-position: left top
}
.cube {
	background-image: url(images/cube_background.png);
	background-repeat: repeat;
	background-position: left top
}
.wrapper {
	margin: 0 auto;
	width: 90%
}
.col_wrap {
	margin: 0 auto;
	width: 90%;
	max-width: 1100px;
}
html {
	box-sizing: border-box
}
button {
	box-sizing: border-box
}
*, :before, :after {
	box-sizing: border-box
}
.hr {
	height: 1px;
	width: 300px;
	margin: 0 auto;
	opacity: .7;
	background: transparent linear-gradient(to right, #F4f4f4 0px, #005E5E 25%, #005E5E 75%, #F4f4f4 100%) repeat scroll 0 0;
	margin-bottom: 1.3em;
	clear: both;
	margin-top: 1em
}
#menu {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 13.755em;
	right: -13.755em;
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	transition: 1s ease;
	background-color: #005E5E;
	height: 100%;
	z-index: 10000;
	overflow-y: scroll
}
#menu ul li a {
	display: block;
	text-decoration: none;
	color: #f2f2f2;
	padding: 1em;
	border-bottom: 1px solid #003E3E;
	text-transform: uppercase
}
#menu.active {
	-webkit-transform: translate(-13.755em, 0px);
	-moz-transform: translate(-13.755em, 0px);
	-o-transform: translate(-13.755em, 0px);
	-ms-transform: translate(-13.755em, 0px);
	transform: translate(-13.755em, 0px)
}
.menu-link {
	position: absolute;
	top: 0;
	right: 0;
	left: 20;
	background-color: #132D3;
	color: #222;
	padding: 1em;
	text-decoration: none;
	z-index: 10000;
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	transition: 1s ease;
	text-align: center
}
.menu-link.active {
	background-color: #f2f2f2;
	position: fixed;
	z-index: 10000;
	-webkit-transform: translate(-13.755em, 0px);
	-moz-transform: translate(-13.755em, 0px);
	-o-transform: translate(-13.755em, 0px);
	-ms-transform: translate(-13.755em, 0px);
	transform: translate(-13.755em, 0px)
}
#menu ul {}
.menu-link:after {
	content: "Menu";
	font-size: 14px;
	display: block;
	color: #004646;
	text-decoraion: none;
	padding-top: .2em
}
.menu-link.active:after {
	content: "Close";
	font-size: 14px;
	display: block;
	color: #004646;
	text-decoraion: none;
	padding-top: .2em
}
#menu.active .menu-link a:after {
	text-decoraion: none
}
.logo a {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 160px;
	height: 65px;
	background-image: url(images/tariff_tree_mobile.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -99999px
}
.logo {
	display: block;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.logo2 {
	display: none;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.invoice .logo a {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 160px;
	height: 65px;
	background-image: url(images/cls_logo_white_mobile.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -99999px
}
.globalNav {
	display: none
}
.hero {
	text-align: center;
	background-size: cover;
	background-color: #CCC;
	background-position: center center;
	width: 100%;
	height: 330px
}
.heroFooter {
	text-align: center;
	background-size: cover;
	background-color: #CCC;
	background-image: url(images/footer_container_ship_mobile.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 200px;
}
.heroFooterText {
	text-align: center;
	color: #f2f2f2;
}
.heroText {
	text-align: center;
	color: #f2f2f2
}
h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 2em;
	padding-bottom: 16px
}
h1 span {
	font-family: 'Droid Sans', sans-serif;
	font-size: 18px;
	display: block;
	padding-top: 16px
}
.cta {
	display: block;
	background-color: #005E5E;
	padding: 1em;
	font-size: 20px;
	margin: auto;
	margin-top: 1em;
	color: #f2f2f2;
	text-decoration: none;
}
.cta_dk {
	background-color: #003E3E
}
.cube h2 {
	font-size: 2em;
	color: #005E5E;
	text-align: center;
	font-family: 'Oswald', sans-serif
}
/* ADAM */
.cube h3 {
    font-size: 1.5em;
    color: #005E5E;
    text-align: center;
    font-family: 'Oswald', sans-serif
}
/* ADAM */
.cube h4 {
    font-size: 1em;
    color: #005E5E;
    text-align: center;
    font-family: 'Oswald', sans-serif
}
.heroFooterText {
	padding: 0 1em
}
.heroFooterText h2, .grid_green h2 {
	color: #f2f2f2;
	font-size: 2em;
	font-family: 'Oswald', sans-serif
}
/* ADAM */
.heroFooterText h3, .grid_green h3 {
    color: #f2f2f2;
    font-size: 1.5em;
    font-family: 'Oswald', sans-serif
}
/* ADAM */
.heroFooterText h4, .grid_green h4 {
    color: #f2f2f2;
    font-size: 1em;
    font-family: 'Oswald', sans-serif
}
.heroFooterText .hr {
	height: 1px;
	width: 300px;
	margin: 0 auto;
	opacity: .7;
	background: transparent linear-gradient(to right, #005E5E 0px, #f2f2f2 25%, #f2f2f2 75%, #005E5E 100%) repeat scroll 0 0;
	margin-bottom: 1.3em;
	clear: both;
	margin-top: 1em
}
.grid_green .hr {
	height: 1px;
	width: 300px;
	margin: 0 auto;
	opacity: .7;
	background: transparent linear-gradient(to right, #005E5E 0px, #f2f2f2 25%, #f2f2f2 75%, #005E5E 100%) repeat scroll 0 0;
	margin-bottom: 1.3em;
	clear: both;
	margin-top: 1em
}
.heroFooter p {
	color: #f2f2f2
}
.footerInfo {
	border-top: 1px solid #004646;
	margin-top: 50px
}
.footerInfo li {
	display: block;
	width: 100%;
	margin-top: 50px
}
.footerInfo a {
	text-decoration: none;
	color: #f2f2f2;
}
.formContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 600px;
	margin: auto;
	margin-top: 50px
}
input {
	padding: 1em;
	font-size: 1em -webkit-appearance: none;
}
input.text {
	flex: 1;
	font-size: 20px;
}
.Btn {
	background-color: #005E5E;
	color: #f2f2f2;
	border: none
}
.steps {
	text-align: center
}
.step {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	text-align: center;
	line-height: 50px;
	background-color: #005E5E;
	color: #f2f2f2;
	margin: auto;
	font-size: 1.5em;
	margin-top: 1em
}
.steps h3 {
	color: #005E5E;
	font-size: 1.5em;
	font-family: 'Oswald', sans-serif;
	padding-bottom: 10px
}
.steps p {
	color: #666
}
.steps li {
	display: block;
	width: 100%
}
.answer, .radio {
	cursor: pointer;
	margin-top: 1.4em;
}
.answer {
	display: block;
	background-color: #cccccc;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	color: #666666;
}
.radio {
	display: none;
}
.contentWrap {
	text-align: center;
	max-width: 660px;
	margin: auto;
}
.contentWrap2 {
	max-width: 960px;
	margin: auto;
}
h4 {
	color: #005E5E;
	font-style: italic;
	font-size: 1.5em;
	font-family: 'Oswald', sans-serif;
	padding-bottom: 10px
}
.header {
	border-bottom: 1px solid #cccccc;
}
.answerContainer {
	display: block;
	background-color: #cccccc;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	color: #666666;
}
.label {
	display: block;
	background-color: #cccccc;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	color: #666666;
	cursor: pointer;
	margin-top: 2em;
}
input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
	/* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Default State */

div.ans {
	background: green;
	width: 400px;
	height: 100px;
	line-height: 100px;
	color: white;
	text-align: center;
}

/* Toggled State */

input[type=checkbox]:checked+label {
	background-color: #0F4A42;
	color: #f2f2f2;
	-webkit-appearance: none;
}
.col_70 {
	width: 100%;
	float: none;
}
.col_30 {
	width: 100%;
	float: none;
	margin-top: 32px;
}
.col_50 {
	width: 100%;
	float: none;
}
.content_image {
	max-width: 100%;
	height: auto;
}
.col_wrap p {
	padding-bottom: 2em;
}
.form_wrap input, .form_wrap select {
	display: block;
	width: 100%;
	max-width: 550px;
	margin: 8px 0px 16px 0px;
	-webkit-appearance: none;
}
input[type=submit] {
	background-color: #005E5E;
	border: none;
	color: #f2f2f2;
	font-size: 18px;
	-webkit-appearance: none;
	cursor: pointer;
}
.form_wrap select {
	padding: 1em;
	color: #676767;
	text-transform: uppercase;
}
.form_centered input, .form_centered select {
	margin: 8px auto 16px auto;
}
.disclaimer {
	font-size: 14px;
	padding-top: 2em;
}
.radio-group {
	display: block;
	margin: 30px 0px;
}
.radio-group:first-child {
	margin: 0px 0px;
}
.radio-wrap input[type="radio"] {
	float: left;
	margin-top: 16px;
	margin-right: 8px;
	transform: scale(1) !important;
	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	margin-left: 12px;
}
.help {
	display: block;
	padding: 12px;
	background-color: #dddddd;
	border-radius: 8px;
	text-decoration: none;
	color: #4D4D4D;
	cursor: pointer;
	margin-bottom: 24px;
}
.radio-wrap label {
	display: block;
	text-align: left;
	padding: 12px;
	background-color: #dddddd;
	border-radius: 8px;
	text-decoration: none;
	color: #4D4D4D;
	cursor: pointer;
}
.radio-wrap input[type="radio"]:checked+label {
	background-color: #0F4A42;
	color: #f2f2f2;
}
.prevNext {
	border-top: 1px solid #cccccc;
	margin-top: 24px;
	padding: 16px 0px;
	clear: both;
}
.prevNext a {
	display: inline-block;
	background-color: #DDDDDD;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	color: #666666;
	cursor: pointer;
	text-transform: uppercase;
}
a.prev {
	float: left;
}
a.next {
	background-color: #222222;
	color: #f2f2f2;
	float: right;
}
.next {
	font-size: 100%;
	border: 0;
	display: inline-block;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	cursor: pointer;
	text-transform: uppercase;
	background-color: #222222;
	color: #f2f2f2;
	float: right;
}
.prev {
	font-size: 100%;
	border: 0;
	display: inline-block;
	border-radius: 8px;
	padding: 1em;
	text-decoration: none;
	cursor: pointer;
	text-transform: uppercase;
	background-color: #DDDDDD;
	color: #666666;
	float: left;
}
.question {
	font-size: 22px;
	margin-bottom: 24px;
	text-align: center;
}
.unselect {
	-webkit-user-select: none;
	/* Chrome all / Safari all */
	-moz-user-select: none;
	/* Firefox all */
	-ms-user-select: none;
	/* IE 10+ */
	user-select: none;
}
@media (min-width: 500px) {
	h1 {
		font-family: 'Oswald', sans-serif;
		font-size: 2.5em;
		padding-bottom: 16px
	}
	h1 span {
		font-family: 'Droid Sans', sans-serif;
		font-size: 20px;
		display: block
	}
	.cube h2 {
		font-size: 2.5em;
		color: #005E5E;
		text-align: center
	}
	/* ADAM */
    .cube h3 {
        font-size: 2em;
        color: #005E5E;
        text-align: center
    }
    /* ADAM */
    .cube h4 {
        font-size: 1.5em;
        color: #005E5E;
        text-align: center
    }
	.steps h3 {
		color: #005E5E;
		font-size: 2em;
		font-family: 'Oswald', sans-serif;
		padding-bottom: 10px
	}
	.heroFooterText h2, .grid_green h2 {
		color: #f2f2f2;
		font-size: 2.5em
	}
	/* ADAM */
    .heroFooterText h3, .grid_green h3 {
        color: #f2f2f2;
        font-size: 2em
    }
    /* ADAM */
    .heroFooterText h4, .grid_green h4 {
        color: #f2f2f2;
        font-size: 1.5em
    }
}
@media (min-width: 600px) {
	.logo a {

		float: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
		width: 469px;
		height: 65px;
		background-image: url(images/tariff_trees.png);
		background-repeat: no-repeat;
		background-position: left top;
		text-indent: -99999px
	}
	.invoice .logo a {
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
		width: 469px;
		height: 65px;
		background-image: url(images/cls_logo_white.png);
		background-repeat: no-repeat;
		background-position: left top;
		text-indent: -99999px
	}
	.logo {
	float: left;
	display:none;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.logo2 {
	display: block;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
}
}
@media (min-width: 830px) {
	.col_70 {
		width: 70%;
		float: left;
	}
	.col_30 {
		width: 30%;
		float: left;
		padding-left: 5%;
		margin-top: 0px;
	}
	.col_50 {
		width: 50%;
		display: inline-block;
		margin-left: -4px;
		position: relative;
		vertical-align: middle;
	}
	.question {
		padding-right: 30px;
		margin-bottom: 24px;
		text-align: left;
	}
	.content_image {
		max-width: 100%;
		height: auto;
		padding-left: 2em;
	}
	.hero {
		text-align: center;
		background-size: cover;
		background-position: center bottom;
		width: 100%;
		height: 630px
	}
	.cta {
		width: 300px
	}
	.step {
		width: 50px;
		height: 50px;
		border-radius: 100%;
		text-align: center;
		line-height: 50px;
		background-color: #005E5E;
		color: #f2f2f2;
		margin: auto;
		font-size: 1.5em;
		margin-top: 30px
	}
	.steps h3 {
		color: #005E5E;
		font-size: 2em;
		font-family: 'Oswald', sans-serif;
		padding-bottom: 1em
	}
	.steps li {
		display: inline-block;
		width: 33.333%;
		margin-left: -4px;
		vertical-align: top;
		padding: 0 1em
	}
}
@media (min-width: 890px) {
	.footerInfo li {
		display: inline-block;
		width: 33.333%;
		margin-left: -4px;
		margin-top: 50px;
		vertical-align: middle
	}
}
@media (min-width: 1200px) {
	.heroFooter {
		text-align: center;
		background-size: cover;
		background-color: #CCC;
		background-image: url(images/footer_container_ship.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		height: 500px;
	}
	.wrapper {
		margin: 0 auto;
		width: 100%
	}
	.menu-link {
		display: none
	}
	.globalNav {
		display: block
	}
	.globalNav ul {
		float: right;
		text-align: right
	}
	.globalNav ul li {
		display: inline-block
	}
	.globalNav ul li a {
		color: #676767;
		text-decoration: none;
		display: block;
		padding: 0 2em;
		height: 84px;
		line-height: 84px;
		border-left: 1px solid #ddd
	}
	.hero {
		text-align: center;
		background-size: cover;
		background-position: center bottom;
		width: 100%;
		height: 1030px
	}
}
.form_utility_link {
	display: block;
	font-size: 12px;
	padding-top: 8px;
}
.btn_list li {
	display: inline-block;
	width: 100%;
	margin-left: -4px;
	padding: 1em;
}
.btn_list a {
	background-color: #005E5E;
	color: #f2f2f2;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 1em;
}
@media (min-width: 600px) {
	.btn_list li {
		width: 33.333%;
	}
}
.btn_list_4 li {
	display: inline-block;
	width: 100%;
	margin-left: -4px;
	padding: 1em;
}
.btn_list_4 a {
	background-color: #005E5E;
	color: #f2f2f2;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 1em;
}
@media (min-width: 600px) {
	.btn_list_4 li {
		width: 50%;
	}
}
@media (min-width: 800px) {
	.helper_margin_bottom {
		margin-bottom: 100px;
	}
}
table.listingsTable {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	

}
table.listingsTable caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
}
table.listingsTable tr {
	background: #f8f8f8;
	border: 1px solid #384E67;
	padding: .35em;
}
table.listingsTable th, table.listingsTable td {
	padding: .625em;
	text-align: center;
	color: #6C6C6C;
}
table.listingsTable th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #4D4D4D;
}
@media screen and (max-width: 600px) {

	table.listingsTable {
		border: 0;
	}
	table.listingsTable caption {
		font-size: 1.3em;
	}
	table.listingsTable thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	table.listingsTable tr {
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}
	table.listingsTable td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table.listingsTable td:before {
		/*
    * aria-label has no advantage, it won't be read inside a table.listingsTable
    content: attr(aria-label);
    */
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table.listingsTable td:last-child {
		border-bottom: 0;
	}
}
.listing_btn {
	display: block;
	background: #9F0E10;
	color: #f2f2f2;
	text-transform: uppercase;
	padding: 8px;
	margin-top: 8px;
	text-align: center;
}
.listingPrice {
	font-weight: bold;
	color: #AC1013 !important;
}
.listingView {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: auto;
	max-width: 24px;
}
input[type="radio"] {
	width: 50px;
}
.table_btn {
	color: #065646;
	padding: 6px;
}
.questions h3 {
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 12px;
}
.questions p {
	border-bottom: 1px solid #C8C8C8;
	margin-bottom: 16px;
	padding-bottom: 8px;
}
label {
	display: block;
}
.sidebar_navigation {
	padding-top: 8px;
	border-top: 1px solid #AEAEAE;
	border-bottom: 1px solid #AEAEAE;
}
.sidebar_navigation a {
	background-color: #005E5E;
	color: #f2f2f2;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 1em;
	margin-bottom: 8px;
}
.col_30 h3 {
	color: #005E5E;
	font-size: 18px;
	padding-bottom: 8px;
	text-align: center;
}
.box_callout {
	background: #D6D6D6;
	padding: 16px 16px 4px 16px;
	margin-top: 16px;
}
.box_callout h3 {
	color: #005E5E;
	font-size: 18px;
	border-bottom: 1px solid #cccccc;
}
.invoice {
	max-width: 860px;
	margin: auto;
	margin-bottom: 32px;
	margin-top: 32px;
}
.helper_float_left {
	float: left;
}
.helper_float_right {
	float: right;
}
.header_invoice {
	float: right;
	line-height: 92px;
	margin-right: 10px;
}
.helper_border {
	border-top: 1px solid #cccccc;
	padding-top: 32px;

}
.helper_float_left p, .helper_float_right p {
	font-size: 15px;
}
.helper_print {
	margin-top: 32px !important;
	margin-bottom: 32px !important;
}
/* ADAM */
input[type="radio"]{
    -webkit-appearance: radio;
}