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

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #ededed;
}

.topnav {
  overflow: hidden;
}

.topnav-right {
	float: right;
	font-size: 14px;
}

.navbar-brand {
	font-size:40px;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  border-bottom: 3px solid #52c7ee;
}

.topnav a.active {
  border-bottom: 3px solid #0099cc;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@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;
  }
}

.parallax-content {
  width: 100%;
  min-height: 100vh;
  background-size: cover;
}

.baner-content {
	width: 100%;
  	padding-top: 35vh;
  	text-align: center;
  	background-image: url(../images/banner_bg.jpg);
  	vertical-align: middle;
}

.baner-content .text-content {
	text-align: center;
}

.baner-content .text-content h2 {
	font-size: 36px;
	font-weight: 400;
	color: #fff;
}

.baner-content .text-content h2 span {
	font-weight: 700;
	color: #33c1cf!important;
}

.baner-content .text-content h2 em {
	font-style: normal;
	font-weight: 700;
	color: #f89624!important;
}

.baner-content .text-content p {
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	padding: 0px 25%;
}

.baner-content .text-content .primary-white-button {
	margin-top: 25px;
}

#home h1, h3 {
	color: white;
	font-style: italic;
}

#assets h1, #products h1, #contact h1 {
	color: black;
	text-align: center;
}

#assets {
	margin-top: 10px;
	margin-bottom: 10px;
}

@media screen and (min-width: 600px) {
  #grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 25px;
  justify-content: center;
	}
}


@media screen and (max-width: 600px) {
   #grid-container{
	   display: block;
      grid-template-colums: auto;
   }
} 

/*
See: https://stackoverflow.com/questions/67781524/responsive-two-column-css-grid 
https://www.w3schools.com/css/css_rwd_mediaqueries.asp 
*/

#text-boxes, #text-boxes-span {
	background-color: white;
	border-radius: 20px;
	padding: 15px 33px 15px 33px;
	color: 666666;
	font-weight: bold;
	max-width: 490px;
	/*margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;*/
}

#text-boxes-span {
	grid-column: 1 / span 2;
	max-width: 1065px;
}

#text-boxes h3, h4, p, ul, #text-boxes-span h3, h4, p, ul  {
	color: #575756;
	font-style: normal;
}

#text-boxes h3, #text-boxes-span h3 {
	font-size: 28px;
	margin-bottom: 3px;
}

#text-boxes h4, #text-boxes-span h4 {
	font-size: 23px;
}

#text-boxes p, ul, #text-boxes-span p, ul {
	font-size: 18px;
	line-height: 1.47059;
}

#picture-boxes {
	max-width: 556px;
	/*margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;*/
	object-fit:fill;
	
}

#picture-boxes-span {
	grid-column: 1 / span 2;
	max-width: 1131px;
	object-fit:fill;
}

@media screen and (max-width: 600px) {
	
	#picture-boxes-span, #picture-boxes {
		/*display: none;*/
		width: 87%;
		margin-top: 20px;
	   	margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#picture-boxes-span img, #picture-boxes img {
		max-width: 100%;
	}
	
	#text-boxes, #text-boxes-span {
		width: 70%;
		margin-top: 20px;
	   	margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#text-boxes img, #text-boxes-span img {
		max-width: 90%;
	}
} 

.pic-box {
	border-radius: 20px;
}

#contact {
	margin: 20px;
}

#contact fieldset {
	margin: 0;
	border: none;
	padding: 0;
}

.text-label, .textarea-label {
	font-size: 14pt;
	line-height: 5px;
}

.form-control {
	width: 450px;
	height: 30px;
	margin-top: 10px;
	margin-bottom: 30px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 2px solid #0099cc;
	background-color: none;
	
}

@media screen and (max-width: 600px) {
	.form-control {
		width: 80%;
	}
}

.submit-btn {
	width: 100px;
	height: 40px;
	border: none;
	background-color: #0099cc;
	color: white;
	font-size: 16px;
	border-radius: 10px;
	text-align: center;
	vertical-align: middle;
	
}

.submit-btn p {
	color: white;
}

a {
	text-decoration: underline;
	color: #575756;
}




#form-message-warning, #form-message-success {
  display: none; }

#form-message-warning {
  color: red; }

#form-message-success {
  color: #28a745;
  font-size: 18px;
  font-weight: bold; }

#client_logos {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: 110px;
	overflow: hidden;
}

.clients {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

#myTopnav img {
	max-width: 100%;
  	height: auto;
}