@charset "UTF-8";
/* CSS Document */
/*colors: blue green 168d8e, darker green 006865, button blue 63c1c1, shadow 1b1b66, DARK GRADIENT: background: rgb(0,104,101);
background: -moz-linear-gradient(90deg, rgba(0,104,101,1) 0%, rgba(18,36,68,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,104,101,1) 0%, rgba(18,36,68,1) 100%);
background: linear-gradient(90deg, rgba(0,104,101,1) 0%, rgba(18,36,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#006865",endColorstr="#122444",GradientType=1);
LIGHT GRADIENT
background: rgb(245,247,250);
background: -moz-linear-gradient(90deg, rgba(245,247,250,1) 0%, rgba(220,226,235,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(245,247,250,1) 0%, rgba(220,226,235,1) 100%);
background: linear-gradient(90deg, rgba(245,247,250,1) 0%, rgba(220,226,235,1) 100%);
filter: progid:DXImageTransforem.Microsoft.gradient(startColorstr="#f5f7fa",endColorstr="#dce2eb",GradientType=1);


#curve_up{
	fill:#50c6d8;
	d: path("M 0 200 C 250 100 600 100 800 200 L 800 400 L 0 400 Z");

#curve_down {
	fill: blue;
    d: path("M 0 200 C 200 300 600 300 800 200 L 800 400 L 0 400 Z");
  }
*/

*{
	padding:0;
	margin:0;
	font-family: 'Montserrat', sans-serif;
	position: relative;
	font-size: 14px;
	overflow-x: hidden;
}


html, body{
    height: auto;
    min-height: 100%;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;

}

h3{
	font-weight: 500;
	font-size: 5.2em;
	letter-spacing: 4px;

}

h4{
	font-size: 3em;
	font-weight: 300;
}



a{
	text-decoration: none;
	cursor: pointer;
}

/*NAVIGATION*/



.topnav {
	width: 100%;
	background-color: #168d8e;
	overflow: hidden;
	-ms-box-shadow: 0px 6px 6px -4px rgb(14,53,58);
	-webkit-box-shadow: 0px 6px 6px -4px rgb(14,53,58);
	-moz-box-shadow: 0px 6px 6px -4px rgb(14,53,58);
	box-shadow: 0px 6px 6px -4px rgb(14,53,58);
}

div#myTopnav.topnav{
	height: auto;
	min-height: 56px;
}

.topnav a {
	float: right;
	right: 30px;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 20px;
	font-weight: 300;
	overflow: hidden;
}

.navlink{

}


.navlink:before, .navlink:after {
	display:block;
	content: '';
	border-bottom: solid 1px #b4d4cf;
	transform: scaleX(0);  
	transition: transform 200ms ease-in-out;
	padding: 0;


}

.navlink:hover:before, .navlink:hover:after {
	transform: scaleX(1);
	
}


.navlink_on {
	border-bottom: 1px solid #b4d4cf;
	border-top: 1px solid #b4d4cf;
	
}

.topnav .icon {
	display: none;
	position: absolute;
	top: 0;
	right: 30px;
	cursor: pointer;
	width: 30px;
	height: auto;
	min-height: 30px;
}

.bar1, .bar2, .bar3 {
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background-color: white;
	margin: 6px 0;
	transition: 0.4s;
}



/* Rotate first bar */
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-8px, 6px) ;
	-moz-transform: rotate(-45deg) translate(-8px, 6px) ;
	-ms-transform: rotate(-45deg) translate(-8px, 6px) ;
	transform: rotate(-45deg) translate(-8px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -6px) ;
	-moz-transform: rotate(45deg) translate(-6px, -6px) ;
	-ms-transform: rotate(45deg) translate(-6px, -6px) ;
	transform: rotate(45deg) translate(-6px, -6px) ;
}


/*BODY*/



.landing{
	height: auto;
	width: 100%;
	top: 0;
	right: 0;
	left: 0;
}

.landing img{
	position: relative;
	top: 0;
	right: 0;
}

#landing_art {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	width: 100%;
	height: 100%;
	
}

.landing_title{
	z-index: 3;
	position: absolute;
	height: 200px;
	width: 70%;
	top: 0;
	margin-top: 15%;
	text-align: center;
}

.landing_title h3{
	position: relative;
	text-transform: uppercase;
	color: white;
}

.landing_title h4{
	position: relative;
	color: white;
	width: 100%;
}

.body_1{
	height: auto;
	padding-bottom: 140px;
	width: 100%;
	overflow: hidden;
}

.company{
	width: 50%;
	height: auto;
	float: right;
	margin-right: 40px;
	overflow: hidden;

}

.wave {
	height: 25px;
	width: 40px;
	background-image: url("../img/wave.svg");
	background-repeat: space;	
	position:relative;

}

#body_company_top{
	left: 40%;
	margin-top: 30px;
}

.company h3{
	font-family: 'Lora', serif;
	font-size: 2.5em;
	color: #168d8e;
	letter-spacing: 1px;
	text-align: left;
	margin-top: 30px;
	position: relative;
	line-height: 3em;
}

.company p{
	font-size: 1.5em;
	font-weight: 300;
	text-align: left;
	position: relative;
	margin-top: 15px;
	line-height: 1.5em;
	width: 75%;
}


.body_history{
	background-image: url('../img/body.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 600px;
	height: auto;
}

.history{
	float: left;
	margin-left: 100px;
	
}
.body_history h3{
	font-family: 'Lora', serif;
	font-size: 2.5em;
	color: #168d8e;
	letter-spacing: 1px;
	text-align: left;
	position: relative;
	margin-top: 50px;
	line-height: 3em;

}

.body_history p{
	font-size: 1.5em;
	font-weight: 300;
	text-align: left;
	position: relative;
	margin-top: 15px;
	line-height: 1.5em;
	width: 60%;
	height: auto;
	
}

#body_history_top{
	left: 80%;
	margin-top: 60px;
}

#body_history_bottom{
	left: 10%;
	transform: translate(0,30px);
}

.title_services h3{
	font-family: 'Lora', serif;
	font-size: 2.3em;
	color: #168d8e;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 30px;
	position: relative;
}


.body_services {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 700px;
	height: auto;
	margin: 70px auto 50px auto;
	justify-content: center;
}
.service_icon{
	align-content: center;
	text-align: center;
	font-weight: 300;
	margin: 40px;
	width: 150px;
}
.service_icon p{
		font-size: 1.3em;

}

.service_icon img{
	height: 150px;
	width: 150px;
	margin-bottom: 20px;
}

.button{
	display: block;
	width: 180px;
	height: 50px;
	padding-top: 20px;
	background-color: #63c1c1;
	border-radius: 6px;
	margin: 0 auto;
	float: clear;
	text-align: center;
	-webkit-box-shadow: 0px 6px 8px -4px rgba(14,53,58,0.6);
	-moz-box-shadow: 0px 6px 8px -4px rgba(14,53,58,0.6);
	-ms-box-shadow: 0px 6px 8px -4px rgba(14,53,58,0.6);
	box-shadow: 0px 6px 8px -4px rgba(14,53,58,0.6);

	
}

.button h4{
	display: block;
	color: white;
	font-size: 1.6em;
	
}
.read:hover {
	letter-spacing: 0.1em;
}

.button:hover{
	background-color: #34ada7;
}

.read:before, .read:after {
	display:block;
	content: '';
	border-bottom: solid 1px white;
	transform: scaleX(0);  
	transition: transform 200ms ease-in-out;

}

.read:hover:before, .read:hover:after {
	transform: scaleX(0.8);
	
}

 
/*FOOTER*/

footer {
	background-image: url('../img/footer.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 400px;
	height: auto;
	top: 100%;
	bottom: 0 !important;
	justify-content: center;
	display: block;
	align-content: center;
	text-align: center;
	margin: 120px auto 0 auto;
	overflow: hidden;
	z-index: 5;
}

#footer_parallax{
	margin: 0 auto;
	min-height: 320px;
}

.footer_box{
	width: 100%;
	height: 150px;
	bottom: 40px;
	left: 0;
	right: 0;
	justify-content: center;
	align-content: center;
	display: inline-flex;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
}

.footer_left{
	margin-top: 30px;
	width: 80px;
	justify-content: center;
	right: 20px;
	
}
.footer_right{
	margin-top: 30px;
	width: 200px;
	justify-content: center;
	left: 5px;
}

.footer_left li, .footer_right li {
	text-align: center;
	margin: 15px 0;
}

.footer_left a, .footer_right a{
	color: white;
	opacity: 0.8;
	font-weight: 300;

}


.footer_logo img{
	width: 100%;
	height: auto;
}

.footer_logo{
	width: 100px;
	height: auto;
	margin-left: 10px;



}



/*GALLERY*/


.page_title {
	text-transform: uppercase;
	color: #168d8e;
	font-size: 3em;
	z-index: 2;
	position: absolute;
	text-align: center;
	display: block;
	margin: 80px auto 0 auto;
	width: 100%;
	height: auto;
	
}

.pages_top{
	background-image: url('../img/top.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 300px;
}

#wrapper {
	width: auto;
	max-width: 780px;
	margin: 0 auto; /*centers the div horizontally in all browsers (except IE)*/
	background:#fff; 
	text-align:center; /*resets text alignment from body tag */
	border-top:none; 
	padding:25px; 

	/*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
	
}

#wrapper ul{
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;

}

#wrapper ul li{
	display: inline-flex;
	padding: 10px;
	width: 240px;
	height: 240px;
	overflow: hidden !important;

}


#wrapper ul li img:hover{
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;

}

#wrapper ul li img.img_wide{
	height: 100%;
	
}

#wrapper ul li img.img_tall{
	width: 100%;
	top: -50%;
}

.lightbox_trigger{
	overflow: hidden;
}

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%;
    height:100%; 
	padding-top: 50px;
    background: rgba(0,0,0,0.8); 
    text-align:center;
}

#lightbox img {
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
	-ms-box-shadow:0 0 25px #111;
	box-shadow:0 0 25px #111;
	width: 90%;
    max-width:940px;
	z-index: 200;
}


/*SERVICES*/


.service {
	width: 100%;
	margin: 80px 0;
	padding-top: 30px;
	overflow: hidden;
	z-index: 4;
	max-height: 300px;
	display: inline-block;
}

.service .service_text{
	float: right;
position: relative;	
}

.service img{
	float: left;
position: relative;
	vertical-align: middle;
	left: 25%;
}

.service_body .service_text{
	float: left;
	left: 20%;
	margin-top: 200px;
}

.service_body img{
	float: right;
	margin-right: 20%;
		margin-top: 150px;

}
.service_text {
	width: 50%;
	min-height: 300px;
	text-align: left;

}


.service_text h3{
	font-family: 'Lora', serif;
	font-size: 2.3em;
	font-style: italic;
	color: #168d8e;
	letter-spacing: 1px;
}

.service_text p{
	font-size: 1.3em;
	font-weight: 300;
	text-align: left;
	margin-top: 15px;
	line-height: 27px;
	width: 75%;
}

.service_body{
	background-image: url('../img/body.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 600px;
	overflow: hidden;
}

img.vessel{
	display: block;
	width: 200px;
}

img.bulk {
	display: block;
	height: 150px;
}

img.logistics{
	display: block;
	height: 150px;
}

img.warehouse{
	display: block;
	width: 175px;
}

img.freight{
	display: block;
	width: 200px;
}

img.cargo{
	display: block;
	width: 200px;
}

/* CONTACT*/

.contact_title{
	width: 100%;
	margin: 80px auto 0 auto;
	z-index: 25;
	display: block;
	text-align: center;
	
}

.contact_title h3{
	display: inline-block;
	font-family: 'Lora', serif;
	font-size: 2.3em;
	font-style: italic;
	color: #168d8e;
	letter-spacing: 1px;
	margin-top: 10px;
	text-align: left;
}

.contact_form{
	width: auto;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.contact_form ul{
	margin-top: 10px;
	overflow-x: hidden;
}

form {
	display: inline-block;
	text-align: left;
	margin: 0 auto;
}
.contact_form label{
	font-size: 1.2em;
	font-weight: 300;

}
.contact_form ul li{
	margin: 40px;
}

.contact_form input, .contact_form textarea{
	margin-top: 10px;
	padding: 5px;
	font-style: italic;
	font-weight: lighter;
}



.contact_form #number{
	margin-right: 20px;
}

#message {
	height: 150px;
	width: 500px;
}

#submit {
	display: block;
	color: white;
	font-family: 'montserrat';
	font-weight: 300;
	font-style: normal;
	font-size: 1.6em;
	cursor: pointer;
	margin: 10px auto;
	border: none;
	text-align: center;
}

.input{
	background-color: #f5f7fa;
}

#submit:hover{
	background-color: #34ada7;
}

#submit:before, #submit:after {
	display:block;
	content: '';
	border-bottom: solid 1px white;
	transform: scaleX(0);  
	transition: transform 200ms ease-in-out;

}

#submit:hover:before, #submit:hover:after {
	transform: scaleX(0.8);
	
}

.edge{
	background-image: url('../img/edge.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 150px;
	overflow: hidden;
	z-index: 20;
	padding-top: 10px;
	
}

.parallax {
	background-image: url("../img/map.svg");
	min-height: 600px; 
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 4;
	bottom: 0;
	margin-top: -100px;
	margin-bottom: -150px;
	text-align: center;
}

.parallax h3{
	font-family: 'Lora', serif;
	font-size: 2.3em;
	font-style: italic;
	color: #168d8e;
	letter-spacing: 1px;
	margin: 150px auto 0 auto;
}

.parallax h5{
	font-size: 1.3em;
	font-weight: 600;
	text-align: center;
	margin: 15px auto;
	line-height: 27px;
	width: 75%;
	color: #168d8e;
	
}

.parallax ul{
	margin: 40px auto 0 auto;
	width: 75%;
	justify-content: center;
	float: none;
}

.parallax li{
	min-width: 150px;
		display: inline-block;
	margin: auto;
	text-align: center;
	vertical-align: middle;


}
.parallax p{
	font-size: 1.3em;
	font-weight: 300;
	text-align: left;
	margin-top: 15px;
	line-height: 27px;
	width: 75%;
}

@media (max-width: 1024px){
	h3{
		font-size: 3.5em;
	}

	h4{
		font-size: 2em;
	}
	.company p,.service_text p{
		width:100%;
	}

}


@media (max-width: 768px){


      .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
	.topnav.responsive {position: relative;}

	.topnav.responsive a.icon {
		position: absolute;
		right: 30px;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: center;	
	}
	.navlink:before,.navlink:after,.navlink:hover,.navlink:hover:before,.navlink:hover:after,.navlink_on {
		border: none;
	}
		.body_history{

		overflow: hidden;
		object-fit: cover;

	}
	.footer_left{
	width: 70px;
	justify-content: center;
	margin-left: 15px;
	right: 10px;	
}
	.footer_right{
		left: 0;
	}


	.service {
		width: 100%;
		margin: 80px 0;
		padding: 30px 0;
		overflow: hidden;
		z-index: 4;
		max-height: 300px;
		display: inline-block;
	}

	.service img{
		float: none;
		position: relative;
		left: 0;
		margin: auto 80% auto 20% ;
		margin-bottom: 40px;

	}

	.service_body .service_text{
		float: none;
		margin: 0;
		margin-bottom: 150px;
	}

	.service .service_text{
		margin-bottom: 150px;

	}
	
	.service_body img{
		float: none;
		margin: auto 80% auto 20% ;
		margin-top: 100px;
		margin-bottom: 40px;
		position: relative;
	}
	
	.service_text {
		width: 80%;
		min-height: 300px;
		text-align: left;
		position: relative;
	}
	
	.service_text p{
		font-size: 1.3em;
		font-weight: 300;
		text-align: left;
		margin-top: 15px;
		line-height: 27px;
		width: 75%;
	}
	
	#wrapper ul li{
		display: flex;
		margin: auto;

	}
}


	
@media (max-width: 650px){

	.contact_title h3{
		margin: auto 20%;
	}
	h4{
		font-size: 1.1em;
	}

	.body_services{
		min-width: 350px;
		margin: 30px auto 50px auto;
		justify-content: center;
	}


	.history,.company,.company p,.company h3,.body_history h3,.body_history p{
		margin: 0 10%;
		width: 80%;
	}
	.service_icon{
	margin: 20px 10px;
	}
	.service_icon p{
		font-size: 0.9em;
	}
	.service_icon img{
		height: 100px;
		width: 100px;
		margin-bottom: 15px;
	}
	#message{
		width: auto;
		min-width: 70%;
	}
	.body_history{
		height: auto;
		min-height: 800px;
	}
}

@media (max-width : 465px ){
    
    .landing,.landing_art{
        overflow: hidden;
    }
    
    .landing_title{
        padding-top: 0;
        margin-top: 40px;
    }
    .landing_title h3{
        font-size: 2.5em;
    }


	.contact_title{
		left:10%;
	}
	
	#vessel {
	    margin-top: 15px;
	    margin-bottom: 15px;
	    padding-bottom: 100px;

	}
	#vessel_text {
	    overflow: visible;

	}
    #logistics {
        margin:-15px 0 15px 0;
        padding:0 0 100px 0;
    }
    #freight{
        margin:-15px 0 15px 0;
        padding:0 0 100px 0;
    }
	

}