/*--------CSS Reset--------*/

*{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}

/*--------Set styles for the whole page--------*/

html{
    background-color: white;
/*    background-repeat: repeat;*/
    vertical-align:top;
}

body {
    font-family: 'Raleway';
    color:#0E0E0E;
}

a { 
    text-decoration: none;
    color: inherit;
}

.clearfix{
    overflow:auto; /*--modern browser--*/
/*
    content: "";
    display: table;
    clear: both;
*/
}

.image-frame img{
    width:100%;
    max-width: 200px
}

.page-margin {
	margin-left:10%;
	margin-right:10%;
}

.contact-form.mobile{
	display:none;
}

/*--------Set Typography--------*/

h1, h2, h3, h4, h5, p, li, nav, a{
    font-family: 'Helvetica', sans-serif;
    margin:0px;
    line-height:1.2;
}

p, li{
    font-family: 'Helvetica', sans-serif;
    margin:0px;
    line-height:1.3;
}

h1{
    font-size:36px;
    font-weight: 900;
}

h2{
    font-size:28px;
    font-weight: 900;   
}

h3{
    font-size:20px;
    font-weight: 600;
}

h4{
    font-size:18px;
    font-weight: 600;
}

h5{
    font-size:16px;
    font-weight: 400;
}

p, li{
    font-size:14px;
    font-weight: 400;
}

a{
	font-weight: 600;
} 

@media (max-width:900px){	

	h3{
    font-size:19px;
    font-weight: 600;
	}

	p, li{
	    font-size:13px;
	    font-weight: 400;
	}
}


/*--------Set styles common to Columns --------*/

.one-sixth{
	width: 16.67%;
	display:inline-block;
}

.one-fifth{
	width: 20%;
	display:inline-block;
}

.one-quarter{
	width: 25%;
	display:inline-block;
}

.one-third{
	width: 33.33%;
	display:inline-block;
}

.two-third{
	width:66.66%;
	display:inline-block;
}

.half{
	width:50%;
	display:inline-block;
}

.full{
	width:100%;
	display:block;
}

@media (max-width:500px){
	
	.one-third, .one-quarter, .two-third, .half, .full{
		width: 100%;
		display:inline-block;
	}
}


/*--------Header Section--------*/

.header-container{
	height:100px;
	/*border-bottom:1px solid grey;*/
	vertical-align: top;
}

.logo-container{
	display:inline-block;
	height:100px;
	width:200px;
    position: relative;
    left: 30px;
}

.image-frame.logo{
 	height:100px;
 	overflow: hidden;
	display:inline-block;
	padding:5px 10px;
}

.home-nav{
	text-align:center;
    top: 80%;
}

.home-nav a{
	margin:0px 3%;
	font-size: 18px;
	color: #329e9e;
	/*color:teal;*/
}

.contact-details {
	text-align:right;
	display: inline-block;
	float:right;
	padding:20px 5% 20px 10px;
	vertical-align: bottom;
	width:30%;
}

.contact-details .phone{
	padding-bottom:10px;
	border-bottom:1px solid grey;
}

.contact-details .phone:after {
	content: "";
	display: table;
	clear: both;
}

.contact-details .email{
	padding-top:10px;
}

@media (max-width:1120px){	

	.contact-details{
	padding-right:2%; /*----Magic number, same as contact details------*/
	}

}

@media (max-width:900px){	

	.contact-details h4, .home-nav a{
		font-size:16px;
	}

}

@media (max-width:600px){

	.home-nav{
		display:none;
	}

	.header-container{
		border-bottom:none;
	}

	.logo-container.one-sixth{
		width: 200px;
	/*	margin:0 auto;
		display:block;*/
	}

/*	.contact-details {
		margin:0 auto;
		display:block;
		float:right;
		width:100%;
		text-align:center;
	}*/

	.contact-details .phone{
		border:hidden;
	}

	.contact-details h4, .home-nav a{
		font-size:14px;
	}

}

@media (max-width:720px){

	.header-container{
		border-bottom:none;
	}

	.logo-container.one-sixth{
		width: 200px;
		margin:0 auto;
		display:block;
	}

	.contact-details {
		margin:0 auto;
		display:block;
		float:right;
		width:100%;
		text-align:center;
	}

}
/*--------Above The Fold Image--------*/


.hero-image .image-frame{
	/*height:450px;*/
	display:block;
	width:100%;
	overflow:hidden;
	background: url(../images/hero-resized2.jpg) no-repeat center center fixed;
	background-size: cover;
}

.headline-frame{
    padding:50px 0px;
    text-align:center;
    /*height:350px;*/
    margin:50px 0% 50px 0%;
    /*width:66.67%;*/
}

.headline-text{
	margin-bottom:40px;
	color:white;
}

.headline-subtext{
	margin-bottom:40px;
	color:white;
	margin-bottom:70px;
}

.headline-action{
	color:white;
}

@media (max-width:1120px){	

	.headline-frame{
    margin:20px 10% 20px 10%;
	}

}

@media (max-width:850px){	

	.headline.two-third{
		width:60%
	}

	.contact-form.one-third{
		width:40%;
	}

}

@media (max-width:720px){	


	.hero-image .image-frame{
	height:auto;
	display:inline-block;
	}

	.headline-frame{
    	padding:20px 0px;
    	margin:50px 10% 20px 10%;
	}

	.headline.two-third{
		width:100%
	}

	.headline-subtext{
		color:white;
		margin-bottom:50px;
	}

	.headline-subtext h2{
		font-size: 24px;
	}

	.contact-form.one-third{
		width:100%;
	}
}


/*--------Contact Form--------*/

.contact-form{
	opacity: 0.90;
	text-align:center;
	/*height:400px;*/
	vertical-align: top;
	padding-right:5%; /*----Magic number, same as contact details------*/
}

.contact-form form{
	width:100%;
}

.contact-form .field{
	margin:10px 0px 10px 0px;
}

.contact-form .field.first-field{
	padding-top:15px;
}

.contact-form h5{
	text-align:left;
	color:white;
}

.contact-form input, .contact-form textarea{
	width:100%;
	height:30px;
	padding-bottom:10px;
	padding-right: 3%;
	border:1px solid grey;
    background-color: white;
    font-size:16px;
    text-align: left;
}

.contact-form textarea{
	height:100px;
}

.contact-form button{
	width:50%;
	height:35px;
	border-radius: 2px;
	font-size: 14px;
	background-color:#329e9e;;
	color:white;
}

.submit-button{
	text-align: right;
}

.contact-form.mobile{
	background: #F6F7F8;
	text-align: center;
	width:100%;
	padding: 20px 0px;
}

.contact-form.mobile form{
	width:70%;
	margin:0 auto;
}

.contact-form.mobile h5{
	color:#0E0E0E;
}

@media (max-width:1120px){	

	.contact-form{
	padding-right:2%; /*----Magic number, same as contact details------*/
	}

}

@media (max-width:900px){	

	.contact-form textarea{
		height:100px;
	}

}

@media (max-width: 720px){

/*	.contact-form.mobile{
		display:inline-block;
	}*/

	.contact-form form{
		width:80%;
		margin:0 auto;
	}

	.contact-form button{
		margin-bottom:30px;
		width:100%;
	}

}

/*--------Section Banner--------*/

.section-banner{
	padding:40px 3%;
	display: inline-block;
}

@media (max-width:1120px){	

	.section-banner{
	padding:40px 1% 20px;
	}

}

/*--------Services--------*/

.section-banner.services{
	/*background:green;*/
}

.section-header{
	padding:0px 5% 15px;
	text-align: center;
	color:teal;
}

.all-services-container{
	/*height:520px;*/	
}

.service-container{
	margin-bottom:20px; 
	vertical-align:middle;
	padding-left:40px;
}

.service-container:nth-last-child(-n+2) {
	margin-bottom: 0;
}

.service-icon.image-frame{
	padding:40px 20px;
	height:120px;
	width:120px;
}

.service-icon img{
	width:100%;
}

.service-description{
	vertical-align:top;
	padding:20px 20px;
}

.service-description .heading{
	margin-bottom:8px;
}

@media (max-width:1120px){	

	.service-description{
		padding:20px 10px;
	}

}

@media (max-width:900px){	
	
	.services h3{
		font-size:19px;
	}

	.services p{
		font-size:13px;
	}

}

@media (max-width:740px){	

 	.all-services-container{
		/*height:1000px;*/
	}

	.service-container.half{
	 	width:100%;
	 	display:inline-block;
	 	margin:0px;
	 	padding-left:0px;
 	}

 	.service-icon.image-frame{
 		width:100%;
 		display:block;
 		margin: 0 auto;
 		height:100px;
		width:100px;
 	}

 	.service-description{
		text-align:center;
		width:100%;
		margin: 0 auto;
	}

	.service-description .mobile-hide{
		display:none;
	}

	.service-container.mobile-hide{
		display:none;
	}

}


/*--------Industries--------*/

.section-banner.industries{
	background-color:#c7c7c7;
}

.industry-card{
	padding:10px;
	vertical-align: top;
}

.industries.image-frame{
	/*height:150px; */
	margin:30px 10%;
	/*overflow:none;*/
}


.industry-description{
	text-align: center;
	margin:30px 8%;
}

.industry-description p{
	margin-top:15px;
}

@media (max-width:1080px){	

	.industry-card{
		padding:5px;
	}

	.industry-description{
	margin:30px 2%;
	}

}

@media (max-width:900px){	

	.industries.image-frame{
		height:130px;
		display:inline-block;
		overflow:none;
	}
}

@media (max-width:740px){	

	.industry-card.one-quarter{
		width:100%;
		padding:10px 5%;
	}

}

/*--------Credibilty--------*/

.credibility .image-frame{
	height:400px;
	display:block;
	overflow:hidden;
	background: url(../images/credibility.png) no-repeat center center;
	background-size: cover;
}

.credibilty-img-container{
	margin-top:120px;
}

.credibilty-img-container .one-quarter{
	vertical-align: top;
	padding:0px 2%;
}

.credibility-description{
	text-align: center;
}

.credibility-description h3{
	font-size:80px;
	font-weight:400;
	color:#E5A632;
	margin-bottom:15px;
}

.credibility-description h5{
	font-size:20px;
	font-style:bold;
	color:#F6F7F8;
}

@media (max-width:1080px){	

	.credibility-description h5{
	font-size:18px;
	}
}

@media (max-width:740px){	

	.credibility .image-frame{
		height:500px;
		/*background-size: contain;*/
	}

	.credibilty-img-container{
		margin-top:50px;
	}

	.credibility .one-quarter{
		width:50%;
		margin:20px 0px;
		padding:3%;
	}

	.credibility-description h3{
		font-size:60px;
	}

.credibility-description h5{
		font-size:18px;
	}
}

/*-------Contact Button--------*/

footer{
	margin:50px 40px;
}

.contact.button{
	text-align: center;
}

.contact a{
	/*margin:20px 20px;*/
	font-size:20px;
	font-weight:bold;
	color: #329e9e;
}

.top-of-page{
	margin:20px;
	text-align: center;
}

.clear_work{
    text-align: center
}
.safefoodpro{
    text-align: center;
    position: relative;
    top: 50px;
}
@media only screen and (max-width: 600px) {
    .section-banner.industries{
        padding-top:100px;
    }
}

.topnav {
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  color: #449b9b;
  text-align: center;
  padding: 10px 0px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (min-width: 990px) {
    .topnav{
        top:40px; 
    }
}