/*
Theme Name: logiscargo-child
Template: logiscargo
*/

/*
	Overright of styles
*/
body:not(.custom-background-image):before, 
body:not(.custom-background-image):after {
	content: none;
}
.site {
	margin: 0px;
}

/*
	Custom Styles
*/
.overallwrapper{
	position:relative;
	max-width:1200px;
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0 20px;
}

body {
	background-color: #efefef;
	margin:0; 
	padding:0;
}
select {
	padding: 5px 20px 4px 10px;
}

/* INTERACTIVE MENU */
.selector { 
	display: block ruby; 
	float: left; 
	margin: 4px 4px 4px 15px; 
}

#header2 {
	background-color: #13324C;  
}
#map { 
	position:absolute;
	top:115.5px; 
	bottom:0px; 
	width:100%;
}
.page-template-typologies-map #map { 
/*	position:absolute; */
/*	top: 129px;
    bottom: 129px;*/
/*    left: -370px;*/
/*    width: 100vw !important; */
}
#menu-container {
	top: 127px !important;
	left:0;
	right: 0;
	display: flex;
	width: 100%;
	height: 65px;
	position: fixed;
	background-color: white;
	padding: 8px;
	border-radius: 0;
	border: rgb(221, 221, 221);
	box-shadow: 0px 0px 0px 2px rgb(221, 221, 221);
	color: #222;
	font-family: 'Open Sans', Arial, sans-serif;
	z-index: 1;
}
#menu-container h4 {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: center;
    width: 65%;
    font-size: 2rem;
    line-height: initial;
}
#menu-container h4 em {
	font-style: italic;
}
#attribution {
	left: auto;
    right: 0;
    display: block;
	width: 100%;
	height: 255px;
	max-width: 228px;
    position: fixed;
    background-color: rgba(255,255,255,.85);
    padding: 8px;
    border-radius: 0;
    border: rgb(221, 221, 221);
    box-shadow: 0px 0px 0px 2px rgb(221 221 221);
    color: #222;
    font-family: 'Open Sans', Arial, sans-serif;
    z-index: 1;
    padding: 10px 15px;
    bottom: 131px;
    text-align: left;
}
@media screen and (max-width: 1024px) {
	#menu-container {
		top: 92px !important;
	}	
	#attribution {
		bottom: 117px;
	}
}


#attribution .left,
#attribution .right {
	width: 50%;
}
#attribution .left {
	float: left;
}
#attribution h6 {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: left;
    margin: 0 !important;
	float: none;
	font-size: 1.5rem !important;
    line-height: 1.3em;
}
#attribution h6 em {
	font-style: italic;
}
#attribution .legend {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.5em;
	margin: 10px 0 0 0 !important;
    padding-top: 10px;
    border-top: 1px dotted #666;
}
#attribution ul {
	list-style: none;
	padding-left: 20px;
}
#attribution ul li {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: left;
    font-size: 1.25rem;
    line-height: 2em;
    margin: 0 !important;
	position: relative;
}
#attribution ul li:nth-of-type(1)::before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    background-image: url('assets/img/mapbox-icon.png');
    background-size: cover;
    background-position: center;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
}
#attribution ul li:nth-of-type(2)::before {
	content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url(img/img_non-member.png);
    background-size: contain;
    background-position: center;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
}
#attribution ul li:nth-of-type(3)::before {
    content: '';
    width: 20px;
    height: 25px;
    position: absolute;
    background-image: url('assets/img/img_nav-waterways.png');
    background-size: cover;
    background-position: center;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
}
#attribution div.irpt {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 10px 0 !important;
}
#attribution span {
	font-family: "Open Sans", sans-serif;
	color: #aaa;
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 !important;
}

#menu {
	position:absolute;
	left:auto;
	right: 10px;
	display: flex;
	width: 35%;
	height: auto;
	max-width: 450px;
	min-width: 450px;
	background-color: white;
	padding: 4px;
	border-radius: 4px;
	border: rgb(221, 221, 221);
	box-shadow: 0px 0px 0px 2px rgb(221, 221, 221);
	color: #222;
	font-family: 'Open Sans', Arial, sans-serif;
}
.marker {
	background-size: cover;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	top: -20px;
}
.marker.hide {
	display: none;
}
.mapboxgl-popup {
	width: 100%;
	max-width: 250px !important;
}

.mapboxgl-popup-content {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	width: 100%;
}
.bottom-bar {
    padding: 27px 0;
    border-top: 1px solid #161F27;
    background: #10151B;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
}
.pull-left,
.pull-right {
	margin: 0 30px;
}


/*
	Typologies Map
*/
.typology-map-teaser {
	background-color: #ffffff;
    margin: 0 15px 40px 15px;
    width: 100%;
    max-width: 1140px;
    border-radius: 8px;
    padding: 10px 30px 40px;
    -webkit-box-shadow: 0px 3px 7px 2px rgba(230,230,230,1);
	-moz-box-shadow: 0px 3px 7px 2px rgba(230,230,230,1);
	box-shadow: 0px 3px 7px 2px rgba(230,230,230,1);
}

.page-template-typologies-map a:focus {
	outline: 1px dotted #23527c;
	outline-offset: initial;
}
.page-template-typologies-map #overall_legend_wrapper{
	position: fixed;
/*    bottom: 0px;*/
    top: 128px;
    left: auto;
    right: 0;
    z-index: 9;
    max-width: 320px;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0px 0px 0px 2px rgb(221 221 221);
    padding: 10px 15px 10px 28px;
    width: 100%;
    box-shadow: -4px 0px 5px 0px rgb(0 0 0 / 20%);
    transition: 250ms;
    overflow: auto;
}
#overall_legend_wrapper.visible {
	 height: 600px; 
	right: 0;
}
#overall_legend_wrapper.not-visible {
	right: -300px;
}
#overall_legend_wrapper .exp-coll {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
	width: 115px;
    max-width: 115px;
    height: 20px;
    border-radius: 0 0 4px 4px;
    position: absolute;
    margin: 0 0 0 auto;
    left: -48px;
    transform: rotate(-90deg);
    top: 45%;
    z-index: 1;
}
#overall_legend_wrapper.visible .exp-coll {
	background-color: rgb(19,50,76);
}
#overall_legend_wrapper.not-visible .exp-coll {
	background-color: rgb(19,50,76);
}
#overall_legend_wrapper.visible .exp-coll .hide-text {
	color: rgb(255,255,255);
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 1.35rem;
	display: block;
}
#overall_legend_wrapper.not-visible .exp-coll .show-text {
	color: rgb(255,255,255);
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 1.35rem;
	display: block;
}
#overall_legend_wrapper.visible .exp-coll .show-text,
#overall_legend_wrapper.not-visible .exp-coll .hide-text {
	display: none;
}
#overall_legend_wrapper.visible .exp-coll .hide-text::before {
	color: rgb(255,255,255);
	padding: 0 50px;
	font: normal normal normal 14px/1.55 FontAwesome;
	content:  '\f078';
}
#overall_legend_wrapper.not-visible .exp-coll .show-text::before {
	color: rgb(255,255,255);
	padding: 0 50px;
	font: normal normal normal 14px/1.55 FontAwesome;
	content:  '\f077';
}


.page-template-typologies-map .typology_legend_wrapper{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page-template-typologies-map .typology_legend_wrapper .icons{
	display: inline-flex;
    align-items:center;
	width: 49%;
	margin: 8px 0;
    cursor:pointer;
	justify-content: flex-start;
	background-color: #ffffff;	
}
.page-template-typologies-map .typology_legend_wrapper .icons:before{
	background-size: contain !important;
    background-position: center center !important;
	background-repeat:no-repeat !important;
	width:40px;
	height:40px;
	display:inline-block;
}
.page-template-typologies-map .typology_legend_wrapper .icons span{
	padding: 0 5px 0 5px;
	font-size: 0.75rem;
	line-height: 1.3em;
}
.page-template-typologies-map .typology_legend_wrapper .icon1{
	border: 2px solid #CDA023;
}
.page-template-typologies-map .typology_legend_wrapper .icon1:before{
	content:'';
	background:#CDA023 url('assets/img/typomap_icon1.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon1.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon1.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon2{
	border: 2px solid #62A25D;
}
.page-template-typologies-map .typology_legend_wrapper .icon2:before{
	content:'';
	background:#62A25D url('assets/img/typomap_icon3.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon2.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon3.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon3{
	border: 2px solid #25A0B0;
}
.page-template-typologies-map .typology_legend_wrapper .icon3:before{
	content:'';
	background:#25A0B0 url('assets/img/typomap_icon5.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon3.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon5.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon4{
	border: 2px solid #DD6837;
}
.page-template-typologies-map .typology_legend_wrapper .icon4:before{
	content:'';
	background:#DD6837 url('assets/img/typomap_icon2.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon4.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon2.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon5{
	border: 2px solid #604B8A;
}
.page-template-typologies-map .typology_legend_wrapper .icon5:before{
	content:'';
	background:#604B8A url('assets/img/typomap_icon4.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon5.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon4.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon6{
	border: 2px solid #191769;
}
.page-template-typologies-map .typology_legend_wrapper .icon6:before{
	content:'';
	background:#191769 url('assets/img/typomap_icon6.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon6.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon6.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon7{
	border: 2px solid #BB0611;
}
.page-template-typologies-map .typology_legend_wrapper .icon7:before{
	content:'';
	background:#BB0611 url('assets/img/typomap_icon7.png');
}
.page-template-typologies-map .typology_legend_wrapper .icon7.activegray:before{
	background:#9B9EA1 url('assets/img/typomap_icon7.png');
}

.page-template-typologies-map .typology_legend_wrapper .icon1.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon2.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon3.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon4.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon5.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon6.activegray,
.page-template-typologies-map .typology_legend_wrapper .icon7.activegray{
	border: 2px solid #9B9EA1;
	background:#E4E5E6;
}
.dim {
	filter: grayscale(100%);
	filter: alpha(opacity=50);
	opacity: .5;
	cursor: default !important;
}
#breakbulk.dim,
#s_container.dim {
	filter: alpha(opacity=35);
	opacity: .35;
}

.page-template-typologies-map #menu{
	width: 600px;
	max-width: 600px;
}

.page-template-typologies-map .selector{
    margin: 4px 4px 8px 8px;
    float: left;
    display: block;
}
.page-template-typologies-map .selector:after{
    margin: 0;
    content: '';
    background: #F7BE3D url(img/select_arrow.png);
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 15px !important;
    position: absolute;
}
.page-template-typologies-map .selector div {
	display: inline-block;
	width: auto;
	min-width: 65px;
}
.page-template-typologies-map .selector select {
	    padding: 5px 20px 4px 5px;
	    display: inline-block;
	    width: 180px;
}
.page-template-typologies-map #footer{
	display:none;
}
.page-template-typologies-map #overall_legend_wrapper #menu {
	display: inline-block;
    width: 275px;
    position: relative;
    min-width: 275px;
    left: auto;
    right: auto;
}
.page-template-typologies-map #menu-mobile-wrapper #menu-mobile {
	display: inline-block;
    width: 375px;
    position: relative;
    min-width: 375px;
    left: auto;
    right: auto;
}
.page-template-typologies-map #overall_legend_wrapper h2 {
	font-family: 'Alegreya', sans-serif;
	color: #555;
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    line-height: initial;
    margin-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #666;
}
.page-template-typologies-map #overall_legend_wrapper h4 {
	font-family: "Open Sans", sans-serif;
	color: #666;
    text-align: center;
    width: 100%;
    font-size: 0.75rem;
    line-height: initial;
/*     margin-bottom: 10px; */
}
.page-template-typologies-map #overall_legend_wrapper h2 em,
.page-template-typologies-map #overall_legend_wrapper h4 em {
	font-style: italic;
}
.page-template-typologies-map #overall_legend_wrapper hr.menuDiv {
	margin: 10px 0 15px;
    width: 100%;
    border-bottom: 2px solid #ccc;
}
@media screen and (max-width: 1024px) {
	.page-template-typologies-map #map {
	    position: absolute;
	    top: 92px;
	    bottom: 92px;
	    left: 0;
	    width: 100vw !important;
	}
	.page-template-typologies-map #overall_legend_wrapper {
    	bottom: 115px;
		top: 92px;
		overflow: auto;
    }
}

@media screen and (max-width: 640px) {
	.page-template-typologies-map #menu-mobile-wrapper {
		display: block;
		top: 90px;
		position: absolute;
		z-index: 1;
		width: 100%;
	    left: 0;
	    padding: 4px 8px;
	    background-color: rgba(255,255,255,.8);
	}
	#overall_legend_wrapper {
		display: none;
	}
	.page-template-typologies-map #menu-mobile-wrapper #menu-mobile {
	    position: relative;
	    right: 0;
	    left: 0;
	    display: block;
	    width: 100%;
	    height: 40px;
	    max-width: 100%;
	    min-width: 100%;
	    background-color: white;
	    padding: 4px;
	    border-radius: 4px;
	    border: rgb(221, 221, 221);
	    box-shadow: 0px 0px 0px 2px rgb(221 221 221);
	    color: #222;
	    font-family: "Roboto", sans-serif;
	    margin: 5px auto;
	}
	.page-template-typologies-map #menu-mobile-wrapper .selector {
		margin: 0 8px;
	}
	.page-template-typologies-map #menu-mobile-wrapper h4 {
	    font-family: "Roboto", sans-serif;
	    color: #666;
	    text-align: center;
	    width: 100%;
	    font-size: 1.75rem;
	    line-height: 1.4em;
	    font-style: italic;
	}
}
@media screen and (min-width: 641px) {
	#overall_legend_wrapper {
		display: block;
	}
	#menu-mobile-wrapper {
		display: none;
	}
}

@media screen and (max-width: 580px) {
	.page-template-typologies-map #menu-mobile-wrapper .selector select {
	    padding: 5px 20px 4px 5px;
	    display: inline-block;
	    width: 120px;
	}
	.page-template-typologies-map #menu-mobile-wrapper .selector div {
	    display: inline-block;
	    width: auto;
	    min-width: auto;
	}
	.page-template-typologies-map #menu-mobile-wrapper .selector {
	    margin: 0 4px;
	}
}
@media screen and (max-width: 414px) {
	.page-template-typologies-map #menu-mobile-wrapper {
		top: 74px;
	}
	.page-template-typologies-map #map {
	    position: absolute;
	    top: 74px;
	    bottom: 202px;
	    left: 0;
	    width: 100vw !important;
	}
	.page-template-typologies-map .bottom-bar .pull-left, 
	.page-template-typologies-map .bottom-bar .pull-right {
	    margin: 0;
	}
}

.page-template-typologies-map .mapboxgl-popup {
    width: 100%;
    max-width: 475px !important;
}

.page-template-typologies-map .mapboxgl-popup img.nawe_logo {
	width:60px; 
	height: auto; 
	margin: 10px 5px 0 0; 
	float: right;
}
.page-template-typologies-map .mapboxgl-popup hr {
	border: 2px solid #f7be3d; 
	width: 55px; 
	left: 15px; 
	position: absolute; 
	top: 55px;
}
.page-template-typologies-map .mapboxgl-popup p.nawe_members {
	text-align: left; 
	margin-top: 10px; 
	color: #888888;
 }
 .page-template-typologies-map .mapboxgl-popup h5 {
 	font-family: Open Sans, sans-serif; 
 	text-align: left; 
 	margin-bottom: 20px; 
 	color: #222222;
 }
 .page-template-typologies-map .mapboxgl-popup h5 p {
	 display: none;
 }
 .page-template-typologies-map .mapboxgl-popup h5 p.s_container,
 .page-template-typologies-map .mapboxgl-popup h5 p.roro,
 .page-template-typologies-map .mapboxgl-popup h5 p.drybulk,
 .page-template-typologies-map .mapboxgl-popup h5 p.breakbulk,
 .page-template-typologies-map .mapboxgl-popup h5 p.liquid,
 .page-template-typologies-map .mapboxgl-popup h5 p.cruise {
	 display: block;
 }
 
 .page-template-typologies-map #clear {
 	background-color: #369fcc;
    color: white;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    margin-top: 5px;
    transition: 250ms;
    width: 100%;
 }
 .page-template-typologies-map #clear:hover,
 .page-template-typologies-map #clear:active {
 	color: #369fcc !important;
    border: 1px solid #369fcc;
    background-color: white;
 }
 
/*
.page-template-typologies-map .mapboxgl-popup ul {
    height: 34px;
    width: auto;
    max-width: 200px !important;
    margin: 0;
    padding: 0;
    list-style: none;
}
*/
.page-template-typologies-map .mapboxgl-popup-content {
	padding: 10px 15px 15px;
}
.page-template-typologies-map .mapboxgl-popup p span {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p span img.s_container {
/*     background-color: #BB0611; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p span img.roro {
/* 	background-color: #25A0B0; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p span img.drybulk {
/* 	background-color: #DD6837; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p span img.breakbulk {
/*     background-color: #191769; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p span img.liquid {
/* 	background-color: #62A25D; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p span img.cruise {
/* 	background-color: #CDA023; */
    display: none;
    width: 32px;
	height: auto;
    margin: 0 3px;
}
.page-template-typologies-map .mapboxgl-popup p.s_container span img.s_container {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p.roro span img.roro {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p.drybulk span img.drybulk {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p.breakbulk span img.breakbulk {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p.liquid span img.liquid {
    display: inline-block;
}
.page-template-typologies-map .mapboxgl-popup p.cruise span img.cruise {
    display: inline-block;
}



@media screen and (max-width: 1210px) {
	#header2 .pull-left {
		margin-right: 0;
	}
	#header2 .pull-right {
		margin-left: 0;
	}
	#header2 .nav-holder .nav-footer ul.nav > li > a {
		font-size: 14px;
		padding: 0 8px;
	}
}
@media screen and (max-width: 1024px) {
	#header2 .logo img {
		max-width: 90%;
	}
	#header2 .nav-holder {
		top: 0 !important;
	}
	#header2 .logo {
    	padding: 6px 0;
	}
	#menu-container h4 {
		width: 50%;
		font-size: 1.8rem;
		line-height: initial;
		margin: 0;
	}
	#menu {
		position: relative;
		width: 35%;
		max-width: 380px;
		min-width: 380px;
		margin-left: auto;
	}
	select {
		padding: 3px 10px 2px 5px;
		max-width: 170px;
	}
	.bottom-bar .thm-container .pull-left img {
		max-width: 80%;
	}
	.marker {
		background-size: cover;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		cursor: pointer;
		top: -15px;
	}
}
@media (max-width:768px){ 

}