@charset "UTF-8";
/* CSS Document */

html {
	font-family: 'Nunito', sans-serif;
}

button {
	color:black;
	border-radius: 3px;
	background-color: #CFD7E4;;
	box-shadow: 0 5px #999;
	cursor: pointer;
	border: none;
	width: 25%;
	height: 32px;
	font-size: 1.2em;
	
}

button:active {
background-color: #879BBB;
  box-shadow: 0 1px #666;
  transform: translateY(4px);
}

input{
	border:none;
	font-size: 1.2em;
	border-radius: 4px;
	height: 32px;
}

input[type=text]:focus {
	background-color: #CFD7E4;
	border:none;
}


h1 {
	text-align: center;
	color: #214F70;
}

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

a:active {
	color:white;
}

/*General CSS Forms */


.form-title {
    text-align: center;
}

.form {
    width: 70%;
    height: 480px;
    background-color: #214F70;
    margin: auto;
    max-width: 700px;
    box-shadow: 4px 4px grey;

}

.form img {
    height: auto;
    width: 290px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form p {
    color:white;
}

.form input {
    border-radius: 5px;
    width: 70%;
    border: 0px solid white;
    height: 30px;
    padding-left: 10px;
    margin-left:10px;
    margin-top: 10px;
    display: block;
}

.form input:focus {
    outline: 0;
    background-color: #E1D9D1;
}

.form textarea {
    border-radius: 5px;
    width: 70%;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form textarea:focus {
    outline: 0;
    background-color: #E1D9D1;
}

.form label {
    color: white;
    margin-left: 10px;
}

.form button {
    display: block;
    background-color: #CFD7E4;
    color: black;
    border-radius: 5px;
    width: 50%;
    outline: 0;
    border: 0;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 3px 3px grey;
}

.form select {
    margin-left: 10px;
    margin-bottom: 9px;
    width: 50%;
    outline: 0;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.main-header {
}

.upper-header {
	
	width: 101%;
	height: 2em;
	color: white;
	background-color: #CFD7E4;
	text-align: left;
	margin-top: -7px;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: -17px;
	
}

.upper-header h4 {
	margin-top: 2px;
	padding-left: 10px;
	display: inline;
	padding-top: 14px;
}

.upper-header a {
	text-decoration: none;
	color: #214F70;
}

.upper-header a:hover {
	color:white;
}

.upper-header img {
	float: right;
	display: inline;
}

.upper-header img:hover {
	cursor: pointer;
	opacity: 50%;
}

.lower-header {
	width: 101%;
	height: 7em;
	background-color: #214F70;
	margin-left: -10px;
	margin-right: -10px;
	border-bottom: 2px solid white;
}

.lower-header img {
	float:left;
	margin-top: 10px;
}

@media only screen and (max-width:950px) {
		.lower-header img {
			height: 20%;
			width: 40%;
	}
}

.lower-header img:hover {
	cursor: pointer;
	opacity: 90%;
}

.lower-header li:hover {
	text-decoration: underline;
	cursor: pointer;
	opacity: 70%;
	transition: 1.0s;
}


.lower-header li {
	list-style: none;
	color: white;
	font-variant-caps: small-caps;
	padding: 33px 8px 0px 8px;
	font-size: 1.5vw;
	display: inline;
	float:right;
	margin-top: 6px;
}

/*This is here as placeholder to hide the search page until dev is complete */
.lower-header li:nth-child(6)
{
	display: none;
}

.lower-header li:nth-child(2)
{
	display: none;
}


.lower-header ul {
	margin-right: 2em;
}

.hero-image {
	width: 100%;
	margin-left: -10px;
}

.about-us {
	color: white;
	background: #214F70;
	width: 101%;
	margin-left: -10px;
	margin-top: -5px;
	height: 25em;
	border-top: 2px solid white;
}

.about-us h3 {
	padding-top: 20px;
	font-variant-caps: small-caps;
	text-decoration: underline;
	color: white;
	font-size: calc(1.5vw + 1.5vh);
	text-align: center;
}

.about-us p {
	text-align: justify;
	padding: 10px;
	margin-right: 30px;
	margin-left: 30px;
	font-size: calc(0.8vw + 0.8vh);
}

.about-us img {
	float: left;
	margin-top: -55px;
	margin-left: 20px;
	margin-right: 10px;
}

@media only screen and (max-width:950px) {
		.about-us img {
		display: none;
	}
}

@media only screen and (max-width:950px) {
		.about-us h3 {
		margin-top: 40px;
			padding-top: 60px;
	}
}

.signup {
	color:white;
	background-color: #214F70;
	width: 101%;
	margin-left: -8px;
	text-align: center;
}

.signup form {
	padding-bottom: 25px;
}

.signup button {
	margin-top: 10px;
}

.signup h2 {
	padding-top:15px;
}

.industry {
	width: 100%;
	display: inline-block;
	text-align: center;
	margin-top: 100px;
}

.industry h1 {
	padding-bottom: 40px;
	margin-top: -22px;
}

.sub-industry {
	width: 40%;
	max-width: 660px;
	height: 19em;
	background-color: #214F70;
	color:white;
	display: inline-block;
	margin: 10px;
	box-shadow: 5px 10px 18px #888888;
}

@media only screen and (max-width:950px) {
		.sub-industry {
		width: 80%;
		height: auto;
	}
}	

.sub-industry img:hover {
	filter: brightness(200%);
	cursor: grabbing;
	transition: 1.5s;
}

.sub-industry > img {
	height: auto;
	width: 75%;
	max-height: 100%;
	margin-top: 23px;
}

.solutions-blog {
	display: flex;
	flex-wrap: wrap;
	margin-top: 100px;
	font-size: 30px;
	text-align: center;
}


.blog-post {
	flex: 10%;
	margin: 20px;
	background-color: #CFD7E4;
	border-radius: 8px;
	box-shadow: 5px 10px 18px #888888;
}

.blog-post img {
	outline: 2px solid grey;
}

.blog-post p {
	padding: 0px 5px;
	height: 15%;
}


.solutions-blog h1 {
	padding-bottom: 30px;
}

.solutions-blog p {
	font-size: calc(0.7vw + 0.7vh);
}

.solutions-blog button {
	color: white;
	font-size: 1em;
	width: 90%;
	background-color: #214F70;
	margin-top: 14px;
}

.solutions-blog a {
	color:white;
}

.blog-title {
	margin-top: 70px;
	margin-bottom: -25px;
}

@media (max-width: 1000px) {
	.blog-post {
		flex:80%;
	}
}

.grid-container-two {
		display: grid;
		grid-template-columns: 45% 35% 20%;
		grid-template-rows: 300px 300px 300px;
		margin-top: 50px;
		max-width: 1300px;
		
	}	
	
	.grid-item-second {
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
	transition: transform .6s;
	margin: 3px;	
	}
	
	.grid-item-second:hover {
		transform: scale(1.2);
		cursor: pointer;
	}
	

.grid-item-second > img {
	object-fit: contain;
	height: 100%;
	width: 100%;

}

.grid-item-third > img {
	object-fit: contain;
	height: 100%;
	width: 100%;

}
	
.grid-container-three {
		display: grid;
		grid-template-columns: 20% 35% 45%;
	grid-template-rows: 300px 300px 300px;
	margin-top: -605px;
	margin-bottom: -500px;
	max-width: 1300px;
		
	}	
	
	.grid-item-third {
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
		margin: 3px;
		transition: transform .6s;
	}	
	
	.grid-item-third:hover {
		transform: scale(1.2);
		cursor: pointer;
	}
	
@media only screen and (max-width:950px) {
		.grid-container-two {
		display: grid;
   		 grid-template-columns: 1fr;
	}
}

@media only screen and (max-width:950px) {
		.grid-container-three {
		display: grid;
   		 grid-template-columns: 1fr;
		margin-top: 0px;
			margin-bottom: 200px;
	}
}	


.vendor {
  display: grid;
  text-align: center;
	grid-template-columns: 30% 30% 30%;
	margin: 0px 10% 150px 18%;
}

@media only screen and (max-width:1210px) {
		.vendor {
		display: grid;
   		 grid-template-columns: 1fr;
	}
}	

.single-vendor {
	
}

.contact-us {
	display: flex;
}

.contact-left h2  {
	color: #214F70;
	text-align: center;
	padding-top: 37px;
}

.contact-left {
	width: 25%;
	text-align: justify;
	border-right: 1px solid grey;
	padding-right: 35px;
	height: 470px;
	margin: auto;
	margin-right: -150px;
}

.contact-left #blue-contact {
	color: #214F70;
}

.contact-left #blue-link {
	color: white;
	background-color: #214F70;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
}

@media only screen and (max-width: 1100px){
	.contact-left {
		display: none;
	}
}

.contact form {
	margin-top: 50px;
	width: 45%;
	margin:auto;
	background-color: #214F70;
	height: 400px;
}

.footer_spacer {
	width: 101%;
	background-color: #CFD7E4;
	height: 10px;
	margin: 50px -5px -50px -5px;
	clear: both;
}

.footer {
		display: grid;
		grid-template-columns: 25% 10% 10% 55%;
		grid-template-rows: 35px 35px 35px 35px;
		background-color: #214F70;
	margin: 50px -5px -5px -5px;
	clear: both;
}

@media only screen and (max-width:1210px) {
		.footer {
		display: grid;
   		grid-template-columns: 1fr;
		grid-template-rows: auto;
			text-align: center;
	}
}

.footer  a:hover {
	opacity: 50%;
}

.footer-left img {
	margin-top: 30px;
	margin-left: 5px;
}

.footer-middle-left  {
	margin-top: 23px;
}

.footer-middle-left p {
	font-size: calc(0.5vh + 0.5vw);
	line-height: 50%;
	color:white;
}

.footer-middle-left p:nth-child(1){
	display: none;
}

.footer-middle-right p:nth-child(1){
	display: none;
}

.footer-middle-right  {
	margin-top: 23px;
}

.footer-middle-right p {
	font-size: calc(0.5vh + 0.5vw);
	line-height: 50%;
	color:white;

}
.footer-right {
	margin-top: 50px;
	margin-right: 20px;
}

.footer-right img {
	filter: brightness(0) invert(1);
	float: right;
}

.footer-right img:hover {
	cursor: pointer;
	opacity: 50%;
}

@media only screen and (max-width:1210px) {
		.footer-right img {
		float: none;
			margin-bottom: 10px;
	}
}

/* Start of CSS for the TEAM section*/

.the-team {
    display: grid;
    grid-template-columns: 33% 33%;
    justify-content: center;
    column-gap: 19px;
	margin-top: 50px;
}

@media screen and (max-width: 800px) {
    .the-team {
        grid-template-columns: 66%;
    }
}

.member {
    width: 100%;
	margin: 10px;
}

.member h2 {
    color: #214F70;
    text-align: center;
}

.grey-column {
    background-color: rgba(211, 211, 211, 0.173);
    height: 440px;
    border-radius: 5px;
}

.grey-column h3 {
    text-align: center;
}

.grey-column p {
    text-align: justify;
    padding: 10px;
	font-size: calc(0.5vh + 0.5vw);
}

/* end team section */ 

/* Start of BLOG CSS*/

   .blog-whole-page {
       height: auto;
   }

   .blog-whole-page ul {
       list-style: none;
   }

   .left-blog {
    width: 210px;
    height: 77%;
    margin-left: -10px;
	   margin-top: 50px;
    float: left;
    position: fixed;
   }

@media only screen and (max-width: 600px) {
    .left-blog {
        display: none;
    }
}

   .left-blog form {
       background-color: #214F70;
       margin: 5px 5px 5px 9px;
       height: 420px;
       max-width: 190px;
       color:white;
       text-align: center;
       width: 85%;
	   border-radius: 5px;
   }

.left-blog h5 {
	padding: 9px;
}

   .left-blog form button {
       background-color: #CFD7e4;
       border: none;
       border-radius: 4px;
       margin-top: 12px;
       width: 50%;
       box-shadow: 0 3px #999;
   }

   .left-blog form button:active {
       transform: translateY(2px);
   }

   .left-blog form input {
       outline: none;
       border-radius: 3px;
       border: 0px solid white;
       margin: 2px 0px;
	   width: 80%;
   }

   .left-blog form input:focus {
       background-color: #CFD7E4;
   }

   .left-blog h4 {
       margin-left: 23px;
   }

   .left-blog hr {
       width: 80%;
   }

   .left-blog img {
       margin-left: 12px;
       margin-top: 17px;
   }

   .left-blog a {
    text-decoration: none;
    color: black;
   }

   .left-blog a:hover {
       color: #214F70;
       text-decoration: underline;
   }

   .right-blog {
       float: left;
       margin-left: 250px;
       margin-top: 20px;

   }
   
   @media only screen and (max-width: 600px) {
    .right-blog {
        margin-left: 10px;
    }
}

.right-blog hr {
    width: 100%;
	margin-bottom: 30px;
	margin-top: 30px;
}

.right-blog #date {
    color: grey;
    font-size: smaller;
}

.right-blog #article-sample {
    max-width: 90%;
}

.right-blog #link {
    background-color: #CFD7e4;
    border: none;
    border-radius: 4px;
    margin-top: 12px;
    box-shadow: 0 3px #999;
    text-decoration: none;
    color: black;
}

#industry-button {
    color: white;
    background-color: #214F70;
    height: 20px;
    width: 160px;
    text-align: center;
    font-style: italic;
    border-radius: 5px;
}

/*End of BLOG Css */ 

/*Product grid CSS */

.product-line {
    width: 90%;
    margin: 50px auto 50px auto;
    background-color: #cdcdcd59;
    height: 600px;
	padding-top: 70px;
	border-radius:10px;
}

.product-line hr {
    width: 90%;
}

.product-line img {
    padding-left: 33px;
    padding-top: 15px;
	margin-top: 25px;
}

@media only screen and (max-width: 600px) {
    .product-line {
        height: auto;
    }
} 

.product-grid {
   display: grid;
   grid-template-columns: 22.5% 22.5% 22.5% 22.5%; 
	padding: 30px;
}

@media only screen and (max-width: 600px){
    .product-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.product-grid-item {
    text-align: center;
}


.product-grid-item h4 {
    color: white;
    background-color: #214F70;
    width: 140px;
    margin-left: 33px;
}

.product-grid-item ul {
    list-style: none;
    line-height: 27px;
	text-align: left;
}

.vendor-details {
	width: 90%;
	background-color:#cdcdcd59;
	height: 200px;
	margin: auto;
	border-radius: 10px;
	margin-bottom: -22px;
	margin-top: 50px;
	display: grid;
	grid-template-columns: 25% 70%;
}

.vendor-left {
	margin-top: 25px;
	margin-left: 50px;
}

#vendor-link {
	margin-left: 70px;
	background-color: #214F70;
	padding: 0px 10px;
	border-radius: 5px;
}

.vendor-right {
	margin-top: 35px;
}

@media only screen and (max-width: 800px){
	.vendor-details {
		grid-template-columns: 1fr;
		height: 400px;
	}
}

@media only screen and (max-width: 800px){
	.vendor-right {
		text-align: center;
		margin-top: -30px;
		padding: 10px;
	}
}

@media only screen and (max-width: 800px){
	.vendor-left {
		text-align: center;
	}
}

.spacer {
	height: 100px;
	width: 100%;
}

.blog-post-container {
		width: 90%;
		height: auto;
		margin: auto;
	}
	
	.blog-post-right {

		
	}
	
	.blog-post-right h2 {
		padding-top: 30px;
	}
	
	.blog-post-right p {
		text-align: justify;
		padding: 0px 30px;
	}
	
	.blog-post-left {
		float: left;
		width: 15%;
		height: 1600px;
		margin-right: 50px;
		padding-top: 30px;
		
	}
	
	.blog-post-left hr {
		width: 90%;
	}

	
	@media only screen and (max-width: 800px) {
		.blog-post-left {
			display: none;
		}
	}
	
	.share {
		width: 90%;
		height: auto;
		font-style: oblique;
	}
	
	.share img {
		float: right;
	}

.blog-post-left a {
	color: gray;
}