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

html {
	font-size: 16px;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	scroll-behavior: smooth;
	
}

body {
    font-family: proxima-nova,sans-serif;
	font-weight: 300;
	text-align: center;
	background-color: #fff;
	color: #4d4e50;
	letter-spacing: auto;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	overflow-x: hidden;

}

#quotesec {
	font-size:32px !important;
	padding-bottom:0px !important;
	font-weight: 100;
}

#quotesec2 {
	font-size:16px !important;
	padding-top:0px !important;
	font-weight: 100;
}

#quotesec3 {
	padding-top:20px !important;
	font-weight: 100;
}

.navbar.navbar-1 .navbar-toggler-icon {
  background-image: url('https://mdbootstrap.com/img/svg/hamburger2.svg?color=333333');
}

.navbar-light .navbar-toggler {
	border: none !important;
}

p {
	font-size: 1.4em;
	font-weight: 300;
	letter-spacing: 1px;
}

 hr{
        height: 2px;
        background-color: #acd582;
        border: none;
}

a:hover {
	text-decoration: none;
	color: #acd582;
}

a {
	color:#4d4e50;
}

.text a {
	color:#ffffff;
}

#headerlogo img {
	max-width: 800px;
	margin: auto;
	padding-top:10px;
}

.subhead {
	font-size: 1.8em;
	padding-bottom: 30px;
	font-weight: 300;
}

.top4img {
		max-width: 100%;
		display: block;
  		width: 100%;
  		height: auto;
	}
	
.overlay {
 		 position: absolute;
  		top: 0;
  		bottom: 0;
  		left: 0;
  		right: 0;
  		height: 100%;
  		width: 100%;
  		opacity: 0;
  		transition: .5s ease;
  		background-color: #4d4e50;
}

.top4container {
		position: relative;
	}

.top4container:hover .overlay {
 		 opacity: .95;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  line-height: 100%;
}

#top4 {
	margin: 0;
	padding-bottom: 60px;
}

#hpgreen {
	background-color: #acd582;
	padding-top: 60px;
	padding-bottom: 60px;
}

#hpgreen p {
	max-width: 800px;
	margin: auto;
	padding-top:10px;
}


#hpgreen h1 {
	font-size: 4em;
	padding-bottom: 10px;
}

#hpgreen h2 {
	font-size: 1.8em;
	padding-bottom: 10px;
}

.servicelink {
	font-weight: bold;
}

.services {
	max-width: 1200px;
	margin: auto;
	padding-top:20px;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px;
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.gallery .images .img:hover img {
  transform: scale(1.1);
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

#gallery{
  -webkit-column-count:4;
  -moz-column-count:4;
  column-count:4;
  
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
	pointer-events: none; 

	

}
@media (max-width:1200px){
  #gallery{
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:800px){
  #gallery{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:600px){
  #gallery{
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
}  
}
#gallery img {
  width:100%;
  height:auto;
  margin: 5px auto;
  box-shadow:-3px 5px 15px #6f6f6f;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

#awards {
	padding-top:80px;
}

.logoaward {
	max-width: 100%; 
	pointer-events: none; 
	margin: auto;
	padding: 10px;
}

.footerlinklist {
	margin: auto;
	padding-top:20px;
}

.footercopyright {
	padding-top:20px;
	font-size: 8px;
}

.list-group-item {
	border: none !important;
}

.advertising {
	background: url("../images/homepage/AdBanner.jpg") no-repeat center center;
	background-size: cover;
	background-color: #4d4e50;
	color: #ffffff;
}

.design {
	background: url("../images/homepage/DesignBanner.jpg") no-repeat center center;
	background-size: cover;
	background-color: #4d4e50;
	color: #ffffff;
}

.directresponse {
	background: url("../images/homepage/DRBanner.jpg") no-repeat center center;
	background-size: cover;
	background-color: #4d4e50;
	color: #ffffff;
}

.branding {
	background: url("../images/homepage/BrandingBanner.jpg") no-repeat center center;
	background-size: cover;
	background-color: #4d4e50;
	color: #ffffff;
}

.about {
	background-color: #acd582 !important;
	padding-top: 20px;
	padding-bottom: 60px;
	color: #ffffff;
}

.contact {
	background-color: #acd582 !important;
	padding-top: 60px;
	padding-bottom: 60px;
	color: #ffffff;
}

.contact a {
	color: #ffffff;
}

.gallery2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery2 .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 3 410px;
  list-style: none;
}
.gallery2 .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery2 .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.gallery2 .images .img:hover img {
  transform: scale(1.1);
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
  .gallery2 .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

#gallery2{
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
  
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
	pointer-events: none; 

	

}
@media (max-width:1200px){
  #gallery2{
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:800px){
  #gallery2{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:600px){
  #gallery2{
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
}  
}
#gallery2 img {
  width:100%;
  height:auto;
  margin: 5px auto;
  box-shadow:-3px 5px 15px #6f6f6f;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.subsec2 p {
	max-width: 800px;
	margin: auto;
	padding-top:10px;
}


.subsec2 h1 {
	font-size: 4em;
	padding-bottom: 10px;
}

.subsec2 h2 {
	font-size: 1.8em;
	padding-bottom: 10px;
}

.contact a:hover {
	color: #ffffff;
}