@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Hind:400,700');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
*{
	margin:0px;
	padding: 0px;
	list-style: none;
	border:0px;
	font-family: "Source Sans Pro",sans-serif;
	text-decoration: none;
}

body,html{
	background-color: #fff;
	height: 100%;	
}

.wrapper{
	position: relative;
	height: 100%;
}

.container{
	width: 70%;
	margin: 0 auto;
}

.clear{
	clear: both;
}

#scroll-up-button{
	position:fixed;
	z-index:500;
	bottom:35px;
	right:35px;
	background:#FD6A08;
	padding:7px 15px;
	font-size:20px;
	color:#f9f9f9;
	cursor:pointer;
	transition:100ms all;
}

#scroll-up-button:active{
	background:#fc8c41;
	padding:12px 15px;
	border-top-right-radius:100%;
	border-top-left-radius:100%;
}

/*TOP BAND*/
section.top-band{
	line-height: 39px;
	border-bottom: 1px solid #ccc;
}

section.top-band .phone{
	float: left;
	font-size: 14px;
	color: #3F444F;
	margin-top: 3px;
	font-family: "Source Sans Pro","Hind";
	font-weight: 400;
}

section.top-band .q-info{
	float: right;
	font-size: 14px;
	color: #3F444F;
	margin-top: 3px;
	font-family: "Source Sans Pro","Hind";
	font-weight: 400;
}

section.top-band .q-info span,
section.top-band .q-info span a{
	margin-left: 1px;
	margin-right: 1px;
	font-size: 13px;
	transition:300ms all;
}

section.top-band .q-info span a:hover{
	color: #3F444F;
}

section.top-band .q-info a{
	margin-right: 15px;
	font-size: 15px;
	color: #199DD4;
	transition:300ms all;
}

section.top-band .q-info a:hover{
	color:#3F444F;
}

/*HEADER*/
header{	
	position: relative;
	height: 250px;
	overflow: hidden;
	z-index: 5;
}

.home{
	position: absolute !important;
	overflow: visible;
	width: 100%;
}


header #header-logo{
	width: 250px;
	height: 240px;
	box-sizing: border-box;
	text-align: center;
	float: left;
	margin-left: 100px;

}

header #header-logo img{
	width: 100%;
	height: 100%;

}

header nav{
	float: right;
	line-height:50px;
	min-width:450px;
	max-width:600px;
	margin: 110px 0;
	margin-right: 100px;
}

header nav a{
	font-size: 16px;
	font-family: "Hind","Source Sans Pro";
	font-weight: 700;
	margin: 0px 15px;
	color: #444;
	display: block;
	float: left;
	transition: 600ms all;
	border-bottom: 2px solid transparent;
}

header nav a:hover{
	border-bottom: 2px solid #444;
}

.second-color{
	font-size: 16px;
	font-family: "Hind","Source Sans Pro";
	font-weight: 700;
	margin: 0px 15px;
	color: #f7f7f7;
	display: block;
	float: left;
	transition: 600ms all;
	border-bottom: 2px solid transparent;
}

.active-page:hover{
	border-bottom: 2px solid #fff;
}



/*SLIDER*/

section.slider{
	width: 100%;
	height: 800px;
	overflow: hidden;
	position: relative;
}

section.slider .opacity-effect{
	position: absolute;
	width: 100%;
	height: 800px;
	top: 0;
	left: 0;
	background-color:rgba(0,0,0,0.3);
	z-index: 2;

}

section.slider ul.slider-list{
	overflow: hidden;
}

section.slider ul.slider-list li {
	width: 100%;
	float: left;
}

section.slider ul.slider-list li img{
	width: 100%;
	height: 100%;
}


section.slider .slider-right-btn:active{
	background: rgba(0,0,0,0.4);
}

section.slider .slider-left-btn:active{
	background: rgba(0,0,0,0.4);
}

/*CARGO CONTAINERS*/
section.cargo-containers{
	min-height: 250px;
	background: #fff;
	position: relative;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 50px;
	box-sizing: border-box;

}

section.cargo-containers div.cargo-co{
	width: 250px;
	height: 250px;
	display: inline-block;
	text-align: center;
	overflow: hidden;
}

section.cargo-containers div.cargo-co div.cargo-co-img{
	max-width: 100%;
	height: 150px;
	box-sizing: border-box;
	padding: 0 25px;
}

section.cargo-containers div.cargo-co div.cargo-co-img img{
	max-width: 100%;
	box-sizing: border-box;
	max-height: 150px;
	transition: 300ms all;
}

div.cargo-co-img:hover img{
	transform: scale(1.1);
}

section.cargo-containers div.cargo-co span.cargo-co-name{
	max-width: 100%;
	height: 50px;
	margin-top: 10px;
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: #555;
	font-family: "Hind","Source Sans Pro";
}

/*********ABOUT US***********/
section.site-map{
	max-height: 100px;
	background: #3C414C;
	overflow: hidden;
	height: 100px;
}

section.site-map h1{
	color: #f9f9f9;
	font-size: 38px;
	float: left;
	font-weight: 600;
	line-height: 100px;
}

section.site-map div.site-map-path{
	float: right;
	font-size: 13px;
	font-weight: 400;
	line-height: 100px;
}

section.site-map div.site-map-path a{
	color: #f9f9f9;
	display: inline-block;
	font-size: 14px;
	margin-right: 5px;
	font-family: "Hind","Source Sans Pro";
}


section.site-map div.site-map-path span a:hover{
	border-bottom: 2px solid red;
}

section.site-map div.site-map-path span{
	color: #ccc;
	font-size: 14px;
	margin-left: 5px;
}

section.content-wrapper{
	min-height: 300px;
	padding: 75px 0;
	position: relative;
	background-color: #fff;
}

.content-text{
	font-size: 17px;
	font-weight: 500;
	line-height: 24px;
	color: #222222;
}

.content-list{
	padding: 0 20px;
}

.content-list li{
	font-size: 16px;
	font-weight: 300;
	line-height: 23px;
	color: #222222;
	list-style-type: square;
}


/*CONTACT*/
.contact-form{
	float: left;
}

.field{
	position: relative;
	margin-bottom: 15px;
	margin-top: 15px;
}

.field label{
	position: absolute;
	top: 17px;
	left: 10px;
	color: #959899;
	font-size: 16px;
	transition: 300ms all;
}

.field input:focus + label{
	position: absolute;
	top: -10px;
	left: 10px;
	font-size: 16px;
	color: #959899;
	transition: 300ms all;
	background-color: #fff;
}

.field input:valid + label{
	position: absolute;
	top: -10px;
	left: 10px;
	font-size: 16px;
	color: #959899;
	transition: 300ms all;
	background-color: #fff;
}

.contact-form input[type="text"],
.contact-form input[type="email"]
{
	height: 50px;
	width: 500px;
	border:1px solid #d1d1d1;
	border-radius: 2px;
	text-indent: 15px;
	font-size: 18px;
	outline: none;
}

.contact-form textarea#message{
	width: 500px;
	padding: 5px;
	box-sizing: border-box;
	height: 150px;
	border:1px solid #d1d1d1;
	border-radius: 2px;
	outline:none;
	font-size: 16px;
	color: #444;
}

.field-submit{
	height: 50px;
	position: relative;
}

.field-submit span{
	position: absolute;
	right: 20px;
	top: 9px;
	font-size: 35px;
	color: #f9f9f9;
}

.contact-form input[type="submit"]
{
	height: 60px;
	width: 500px;
	color: #f9f9f9;
	border:2px solid #1A9DD4;
	background-color: #1A9DD4;
	font-weight: 600;
	border-radius: 2px;
	text-indent: 10px;
	font-size: 20px;
	text-align: left;
	outline: none;
	transition:200ms all;
	cursor: pointer;
}

.contact-form input[type="submit"]:hover{
	background-color: #fff;
	color: #1A9DD4
}

.contact-form input[type="submit"]:hover + span{
	color: #1A9DD4
}

.contact-text{
	float: right;
	margin-top: 30px;
	max-height: 300px;

}

.contact-text span{
	font-size: 18px;
	display: block;
	color: #5e5e5e;
}

.contact-text .address{
	max-width: 250px;
	margin-right: 100px;
	overflow: hidden;
	float: left;
}

.contact-text .address h2{
	color: #3C414C;
	font-size: 20px;
	margin-bottom: 0px;
	font-family: "Hind","Source Sans Pro";
}

.contact-text .address p{
	color: #5e5e5e;
	font-size:14px;
	padding: 2px;
}

.bank-address{
	max-height: 300px;
	float: right;
}

.bank-address h2{
	color: #3C414C;
	font-size: 20px;
	margin-bottom: 0px;
	font-family: "Hind","Source Sans Pro";
}

.bank-address p{
	color: #5e5e5e;
	font-size:14px;
	padding: 2px;	
}

/*CONTAINER TYPES*/
section.container-types-text{
	max-height: 100px;
	padding-top: 50px;
	padding-bottom: 20px

}

/*CONTAINER INFO*/
section.container-list{
	min-height: 500px;
	padding-top: 50px;
	position: relative;
}

section.container-list ul.list{
	width: 15%;
	max-height: 100%;
	float: left;
	background-color: #eee;
	padding: 20px;
	box-sizing: border-box;
}

section.container-list ul li{
	margin-bottom: 5px;
}



section.container-list ul li a{
	font-size: 14px;
	color: #5296D9;
	transition: 150ms all;
	border-bottom: 2px solid transparent;
}

section.container-list ul li a:hover{
	border-bottom: 2px solid #5296D9;
}

section.container-list .container-img{
	width: 85%;
	overflow: hidden;
	text-align: center;
	float: right;
	margin-bottom: 25px;
	box-sizing: border-box;	
}

section.container-list .container-img img{
	max-height: 100%;
}

/*FOOTER*/
footer{
	background: #3C414C;
	min-height: 200px;
	overflow: hidden;
	position: relative;
}

footer .contact{
	width: 300px;
	height: 100px;
	float: right;
	margin-top: 50px;
}

footer .contact span{
	font-size: 14px;
	display: block;
	color: #a5a9aa;
	font-family: "Hind","Source Sans Pro";
}

footer .social-accounts{
	overflow: hidden;
	margin-top: 10px;

}

footer .social-accounts a.twitter{
	font-size: 16px;
	padding: 4px 5px;
	border-radius: 1px;u
	display: inline-block;
	margin-right: 1px;
	margin-left: 1px;
	color: #fff;
	background: #58C0DA;
}

footer .social-accounts a.facebook{
	font-size: 16px;
	padding: 4px 5px;
	border-radius: 1px;
	display: inline-block;
	margin-right: 1px;
	margin-left: 1px;
	color: #fff;
	background: #6385B3;
}

footer .social-accounts a.mail{
	font-size: 16px;
	padding: 4px 5px;
	border-radius: 1px;
	display: inline-block;
	margin-right: 1px;
	margin-left: 1px;
	color: #fff;
	background: #CCD0D1;
}

footer .social-accounts a.linkedin{
	font-size: 16px;
	padding: 4px 5px;
	border-radius: 1px;
	display: inline-block;
	margin-right: 1px;
	margin-left: 1px;
	color: #fff;
	background: #3A4D78;
}

footer .address{
	width: 250px;
	height: auto;
	float: right;
	margin-right: 10px;
	margin-top: 50px;
	font-family: "Hind","Source Sans Pro";
}

footer .address .address-header{
	font-size: 18px;
	font-weight: 600;
	color: #f9f9f9;
	letter-spacing: 1px;
	font-family: "Hind","Source Sans Pro";
}

footer .address p{
	font-size: 14px;
	color: #a5a9aa;
	line-height: 1.5;
}

footer #copyrights{
	width: 30%;
	text-align: center;
	float: left;
	font-size: 14px;
	color: #a5a9aa;
	font-family: "Hind","Source Sans Pro";
	margin: 70px 0px;
}

/*devloper signature*/
footer #dev-sign{
	position: absolute;
	right: 10px;
	bottom: 4px;
	font-size: 9px;
	color: #c6c6c6;
	font-family: 'Indie Flower', cursive;
}

footer #dev-sign a{
	color: #eee;
	font-family: 'Indie Flower', cursive;
}