
body{
	margin: 0;
}



#title_header{
	background: #000066;
	padding: 5px;
	padding-bottom: 105px;
	border-bottom: 5px solid red; 
	
}

#title_header img{
width: 150px;
height: 100px;
float: left;
}
.image{
	position: absolute;
	left: 5%;
}
.primary_nav li{
display: inline-block;
	padding: 10px;
	color: white;
	font-family: 'Roboto', sans-serif;


}
.primary_nav{
	position: absolute;
	top: 60px;
	left: 15%;

}

.nav{
	list-style: none;
	

}

.phone{
	position: absolute;
	color: white;
	top:0%;
	right: 1%;
	font-family: 'Roboto', sans-serif;
}

.phone a{
	text-decoration: none;
	color: white;

}
.phone a:hover{
	text-decoration: underline;
}

.phone a:visited{
	color: white;
}
/*End of main header styles */



/*Start of Homepage Styles*/
.banner_content{

	background:black;
	opacity: .75;
	padding:10px;
	/*position: absolute;*/
/*width: 100%;*/
/*top: 305px;*/
}






.banner_content p{

	color:white;
	font-size: 20px;
	font-family: 'Libre Franklin', sans-serif;
}



.primary_nav li a{
	text-decoration: none;
	color: white;
	padding: 10px;
}
.primary_nav li a:hover{
	color: gray;


}

.big-image{

	width: 100%;
}

.image-circle{

	border-radius: 50%;
	float: left;
	width: 200px;
	height: 250px;
}

.home-info p{

	font-family: 'Lato', sans-serif;
	padding-left: 50px;
	padding-right: 50px;
	text-align: justify;
}

#service{
	background: #ed0b0b;
	

}
.service-content{

	margin: 50px;
}
.service-content h1{

	color:white;
	font-size: 50px;
	font-family: 'Lato', sans-serif;
	
	border-bottom: 2px solid white;


}
.service-content li{
	color:white;
	font-family: 'Lato', sans-serif;
	padding: 10px;
	font-size: 20px;
}
table{
	padding-left: 50px;
	padding-right: 50px;

}
#three-parts{
	margin: 60px;
}
#three-parts h3{
	text-align: center;
	font-family: 'Lato', sans-serif;
	padding: 30px;
	border: 2px solid;

}
#three-parts a{
	text-decoration: none;
	color: black;

}
#three-parts a:visited{

	color: black;
}
#three-parts a:hover{
	text-decoration: underline;
}

/*.left-cir{

	height: 300px;
	width: 300px;
	border-radius: 300px;
	background-image: url(Wolco_Map2.jpg);
	/*background: black;

}



.left-cir:hover{
	opacity: .7;
	
}

.middle-cir{

	height: 300px;
	width: 300px;
	border-radius: 300px;
	background-image: url(retail.jpg);
	

}
.middle-cir:hover{
	opacity: .7;
	
}

.right-cir{

	height: 300px;
	width: 300px;
	border-radius: 300px;
	background-image: url(employee3.jpg);
	

}
.right-cir:hover{
	opacity: .7;
	
}
*/
/*End of Homepage Styles */



/*Start of About Page Styles */

#about-content {

	margin: 50px;
}

#about-content h1{
	font-size: 50px;
	font-family: 'Lato', sans-serif;
	border-bottom: 2px solid red;
}

#about-content h1::after {

	border-bottom: 2px solid red;
}

#about-content h3 {

	font-family: 'Lato', sans-serif;
}
#about-content p {

	font-family: 'Lato', sans-serif;
}

.left-half {
	float: left;
	width: 48.5%;
	margin-right: 3%;

}

.half{
padding-top: 1px;

}


#mission{

	background: red;


}
#mission h1{
	color: white;
	border-bottom: 2px solid white;
	font-size: 50px;
	font-family: 'Lato', sans-serif;
}

.mission-content{

	margin: 50px;
	padding: 10px;
}

.mission-content ul{

	color: white;
	font-family: 'Lato', sans-serif;
}

#values {

	background: white;

}
.values-content{
	
	margin: 50px;
}

.values-content img{

	width:200px;
	display: block;
	margin: 0 auto;
}
#values h1{
	color: black;
	border-bottom: 2px solid red;
	font-family:  'Lato', sans-serif;
	font-size: 50px;

}

.values-content p{

font-family: 'Lato', sans-serif;
}
.values-content h3{

	font-family: 'Lato', sans-serif;
}


#process h1{
	color: black;
	border-bottom: 2px solid red;
	font-family:  'Lato', sans-serif;
	font-size: 50px;

}

.process-content{
	margin: 50px;
	font-family: 'Lato', sans-serif;
}

.process-content li{
	list-style: none;
	padding-bottom: 10px;
}
.process-content h3{
	background: #000066;
	padding:20px;
	border-radius: 15px;
	color: white;
	text-align: center;
	display: block;
	margin:0 auto;
	margin-bottom: 10px;
}

.process-content section a{
	text-decoration: none;

}
.process-content section:target p{
	display: block;
}


/*End of About Page Styles */

/*Start of Service and Advantage Page Styles */


#retail h1{

	color: black;
	border-bottom: 2px solid red;
	font-family:  'Lato', sans-serif;
	font-size: 50px;

}

.retail-content{
	margin: 50px;
}

.retail-content h3{
	font-family: 'Lato', sans-serif;

}

.retail-content p{
	font-family: 'Lato', sans-serif;
}
.retail-content li{
	font-family: 'Lato', sans-serif;
	padding: 5px;
}

.retail-left {

	float: left;
	width: 33%;
	padding-right: 5px;
}
.retail-middle{
	display: inline-block;
	width: 33%;

}
.retail-right{
	float: right;
	width: 33%;
}

@media screen and (max-width: 768px){
	
	.retail-left {

	float: left;
	width: 47.5%;
	padding-right: 5px;
	}

	.retail-middle{
	display: inline-block;
	width: 48%;
}
.retail-right{
	display: block;
	margin: 0 auto;
	width: 50%;
	float: none;
}
}
@media screen and (max-width: 525px){
	.retail-left {

	float: none;
	width: 100%;
	padding-right: 5px;
	}

	.retail-middle{
	display: inline-block;
	width: 100%;
}

#contact iframe{
	width: 300px;
	height:200px;

}
}




#advantages{

	background: #000066;
}

.advantages-content{

	margin: 50px;
}

.advantages-content h1{
	color: white;
	border-bottom: 2px solid white;
	font-family:  'Lato', sans-serif;
	font-size: 50px;
}

.advantages-content li{
	font-family:  'Lato', sans-serif;
	color: white;
	padding: 5px;
}

.left {

	float: left;
	width: 33%;
	padding-right: 5px;
}
.middle{
	display: inline-block;
	width: 33%;

}
.right{
	float: right;
	width: 33%;
}
@media screen and (max-width: 633px){
		.left{
			width: 100%;
			float:none;
			}
			.middle{
				width: 100%;
			}
			.right{
				float: none;
				width: 100%;
			}
			.retail-right{
				width: 100%;
			}

}


.retail-content img{

	width:320px;
	height: 350px;
}







/*End of Service and Advantages Page Styles */

/*Start of Employment Page Styles */

#jobs {

	margin: 50px;
}
#jobs h1{
	
	border-bottom: 2px solid red;
	font-size: 50px;
	font-family: 'Lato', sans-serif;
}
.description h3{
	font-family: 'Lato', sans-serif;

}

.description a{
text-decoration: none;
color: black;
}
.description a:hover{
	text-decoration: underline;
}
.description a:visited{

	color: black;
}
.description p{

	font-family: 'Lato', sans-serif;
}

.description{
	border-bottom: 1px solid grey;
}

#jobdescription{
	margin: 50px;
	font-family: 'Lato', sans-serif;
}

#application{
	margin: 50px;
}

#application h1{


	border-bottom: 2px solid red;
	font-size: 50px;
	font-family: 'Lato', sans-serif;
}
form{
	font-family: 'Lato', sans-serif;

}
fieldset{

	list-style: none;
	border:none;
}
fieldset ul{
	list-style: none;
}
label.left{
	float:none;
	width:0%;
	padding-right: 0px;
}
form p{
	font-family: 'Lato', sans-serif;


}
input[type="text"]{
	padding: 10px;
	margin-top: 10px;
	border:solid 1px black;
	width: 50%;
}
input[name="Name"]{
	width:50%;
}
input[name="YourName"]{
	width:45%;
	float: left;
	margin-right: 3px;
}
input[name="Company"]{
	width: 45%;
}
#inquiry input[name = "Email"]{
	float:left;
	margin-right: 3px;
	width:45%;
}

input[type='password']{

}
#inquiry input[name = "Phone"]{
	width: 45%;
}
input[name="City"]{
	width:50%;
	
}
.middleColumn{
	margin:10px;
}


input[name="State"]{
	width: 50%;
}

input[name="Zip"]{
	width: 50%;
}
input[name = "Email"]{
	width: 50%;
	padding: 10px;
	margin-top: 10px;
	border:solid 1px black;
}
input[name="Phone"]{
	width: 50%;
}

input[type="submit"]{
	display: block;
	margin: 0 auto;
	background-color: #000066;
	padding: 15px;
	border: none;
	border-radius: 10px;
	width: 50%;
	color: white;
	font-family: 'Lato', sans-serif;
	cursor: pointer;
	margin-top:10px; 
	font-size: 25px;
}

textarea {
	width: 94%;
}


/*End of Employment Page Styles */

/*Start of Partners Page Styles */
#map {
margin: 50px;



}
#map img{
	width: 100%;

}
#map h1{
	font-size: 50px;
	font-family: 'Lato', sans-serif;
	border-bottom: 2px solid red;


}
#partners{
	margin: 50px;
}

#partners h1{
	
	font-size: 50px;
	font-family: 'Lato', sans-serif;
	border-bottom: 2px solid red;
}









/*End of Partners Page Styles */

#contact{
	margin: 50px;

}
#contact h1{

	
	border-bottom: 2px solid red;
	font-family:  'Lato', sans-serif;
	font-size: 50px;
}





footer {
	background: #000066;
	color: white;
	text-align: center;
	font-family: 'Lato', sans-serif;

}

footer p{
	margin: 0;
	padding: 10px;
}

/* Start of Responsive Styles */

@media screen and (max-width:1024px){


#title_header img{
	width: 120px;
	height: 70px;
	margin-top: 5px;
}
.primary_nav{
	left: 8%;
	top: 60px;
	}
}

@media screen and (max-width: 768px){

	#title_header img{
		width: 100px;
		height: 50px;
	}

	.primary_nav{
	left: 0%;
	
	}
	.left-half{
		float: none;
		width: 100%;
		margin-right: 0%;
	
	}
	.banner-content{
		top: 235px;
	}
	input[type="submit"]{
		width:100%;
	}
	}


	@media screen and (max-width:628px){

		input[id="fname"]{
		width: 95%;

	}


	input[name="YourName"]{
	width:100%;
	
}
input[name="Company"]{
	width: 100%;
}
#inquiry input[name = "Email"]{
	
	width:100%;
}
#inquiry input[name = "Phone"]{
	width: 100%;
}

input[id="lname"]{
	width: 95%;
		
	}
input[id="address"]{
		width: 95%;
	}
input[id="city"]{
		width: 50%;
	}
input[id="state"]{
		width: 22%
	}
input[id="zip"]{
		width: 12%;
	}
input[id="email"]{
		width: 58%;
	}
input[id="phone"]{
		width: 30.5%;
	}
	}
@media screen and (max-width:628px){
	input[id="zip"]{
		width: 10%;
	}
	input[id="email"]{
		width: 56%;
	}

}
#item1p{
	display: none;
}

.menubtn {
    background-color: #000066;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;

}
.menubtn i{
	padding-right: 2px;
}
.menu {
    position: relative;
    display: inline-block;
    float: right;
    display: none;
}

.menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
   font-family: 'Roboto', sans-serif;
    z-index: 1;
}

.menu-content a {
    color: white;
    background: #000066;
    border-bottom: 1px solid red;
    
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.menu-content a:hover {opacity: .6;}

.menu:hover .menu-content {
    display: block;
}

.menu:hover .menubtn {
    opacity: .6;
}
@media screen and (max-width:894px){
	.primary_nav{
		left: 0%;
	}

}
@media(max-width:824px){
.primary_nav{
	display: none;
}
	.menu{
		top: 80px;
		right:78px;
		display: inline-block;
	}
	#title_header{
		padding-bottom: 120px;
	}
}

.details{
	display: none;
}

.contact-left-half{
	float: left;
	margin-right: 10%;
	font-family: 'Lato', sans-serif;
}
.contact-content{
	max-width: 75%;
	display: block;
	margin: 0 auto;
}

#inquiry h1{

	border-bottom: 2px solid red;
	font-size: 50px;
	font-family: 'Lato', sans-serif;

}

#inquiry{
	margin: 50px; 
}

label.right{
	float:none;
}
input[name = "Password"]{
	width: 50%;
	padding: 10px;
	margin-top: 10px;
	border:solid 1px black;
}

input[name="MonFrom"]{
	padding: 1px;
}

#Form_ReturnForm_Documents_Holder{

	/*float: left;*/
	margin-top: 10px;

}
#bottom h3{
	display: inline;
	background: #000066;
	padding: 10px;
	border-radius: 15px;
	color: white;
	text-align: center;
	
	font-family: 'Lato', sans-serif;
	
	
}

#bottom{

	text-align: center;
}

#bottom a {
	text-decoration: none;
}

#bottom h2{

	font-family: 'Lato', sans-serif;
} 

.slick-slide img{
	display: block;
	margin: 0 auto;
	width: 300px;
	height: 150px;
}
.slick-next:before{

	font-family: FontAwesome;
	content: "\F105"
}

#jobs h3 {

	font-family: 'Lato', sans-serif;
}
#jobs p {
	font-family: 'Lato', sans-serif;
}
#return {

	background: #000066;
	padding:20px;
	border-radius: 15px;
	color: white;
	text-align: center;
	display: block;
	margin:0 auto;
	margin-bottom: 10px;
	width: 50%;
	text-decoration: none;
}
#return-content {
	margin: 50px;
	font-family: 'Lato', sans-serif;
}
