/*!
Theme Name: Surf Mall Theme
Theme URI: http://underscores.me/
Author: Wayne Goodman
Author URI: http://waynegoodman.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: surf-mall
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Surf Mall Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */

.contentArea .left {text-align:left}
.contentArea .center {text-align:center}
.contentArea .right {text-align:right}


.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* surf custom styles  */
	
	:root { 

  --blue: #3193bf;
  --blueBG: #08a8f2;
  --red: #d3337b;
   --greenBG: #1abc9c;
  --purple: #9255ad;

}
	
.has-blue-color, .blue {color:var(--blue);}
.light-blue, .has-light-blue-color {color:var(--blueBG);}
.purple, .has-purple-color {color:var(--purple);}
.green, .has-green-color {color:var(--greenBG);}
.red, .has-red-color {color:var(--red);}
.white, .has-white-color {color:#fff}
.black, .has-black-color {color:#000}

	
html, body { margin:0; padding:0; font-family: 'Open Sans', sans-serif; font-size:16px}
* {  -webkit-box-sizing: border-box; box-sizing: border-box; }	
body {   position:relative; width:vw; 
	display: flex; flex-direction:column}

.contentArea a {color:var(--red);}
.contentArea a:hover  {color:var(--purple);}

.contentArea p {margin:0 0 16px; font-size:1.1em}

.wp-element-caption {text-align:center}

img { max-width:100%; height:auto}
.clearFix:after {visibility:hidden; display:block; font-size:0; content:""; clear: both; height:0 }
.wrapper {  overflow:hidden; width:100%; min-height:100%; }

h1 {  font-family: 'Playball', cursive; font-size:49px;  text-shadow: 2px 1px 2px rgba(0,0,0,0.07);  line-height:104%;  
		color:var(--blue); 
font-size: clamp(46px, 3.8vw, 70px); 
	margin:0 auto 32px auto;
	text-align:center;
	letter-spacing:0 !important;
	font-weight:400px !important;
	}

h2 { margin:32px auto 16px;  font-family: 'Playball', cursive;   text-shadow: 2px 1px 2px rgba(0,0,0,0.07);  line-height:104%;  
		color:var(--blue); font-size: clamp(36px, 3.2vw, 50px); padding:42px auto;
	font-weight:400px !important;}

@media (pointer:none), (pointer:coarse) {
	h1, h2 {letter-spacing: -.04em !important}
}



.alignwide, .alignfull {  width:  100vw; max-width:  100vw; margin-left:  calc(50% - 50vw);}

.wp-block-separator {margin:32px auto}

.footer h2 {font:inherit; color:#fff; font-size:24px; font-weight:600; line-height:1.5; margin:0 auto 11px}

	h1.angled {text-align:left; margin:0 0 42px 0;  line-height:104%;  
	-ms-transform: rotate(-4deg); /* IE 9 */
  -webkit-transform: rotate(-4deg); /* Safari */
  transform: rotate(-4deg); /* Standard syntax */
font-size: clamp(38px, 3.85vw, 51px)
	}
  .secondLine { margin-left:1em}

.seccondaryTopImage {max-width:1600px; margin:32px auto 8px auto; padding:0 4%; display:block; position:relative }
	
.header{  height:118px; width:100%; position:relative; display:block;
background: rgb(8,16,43); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(8,16,43,1) 0%, rgba(41,137,216,1) 50%, rgba(175,167,231,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(8,16,43,1) 0%,rgba(41,137,216,1) 50%,rgba(175,167,231,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(8,16,43,1) 0%,rgba(41,137,216,1) 50%,rgba(175,167,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08102b', endColorstr='#afa7e7',GradientType=0 ); /* IE6-9 */
overflow:visible;
-webkit-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);
-moz-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);
box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);
}
	
	.utilityNav { display:none; position:absolute; right:3%; top:22px; }
	.utilityNav ul { display:flex; flex-direction:row; list-style:none; margin:0; padding:0}
	.utilityNav ul li a {font-size:.9em; color:#fff; padding:0 16px; text-decoration:none; text-transform:uppercase; border-right:#ff99ff 1px solid; line-height:100% }
	.utilityNav ul li:last-child a { border-right:none}
	
.header:before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

.logo img { width:100%; height:auto }
.logo { max-width:400px; margin:auto; padding:0 18px; position:absolute; left:0; right:0; bottom:-14px}
.topNav { width:100%; height:44px; background:#3B89C5  url('https://surfmallocnj.com/wp-content/themes/surf-mall/images/footer-grunge.jpg'); background-size:100%;  overflow:visible; border-top:5px solid #133657; border-top:5px solid rgba(0, 0, 0, 0.4);
border-bottom:5px solid #133657; border-bottom:5px solid rgba(0, 0, 0, 0.4);
}
	
	.weatherWidget { position:absolute; bottom:92px; left:0; right:0; margin:auto;  width:260px;margin: 8px auto; display: flex;  align-items: center;
  justify-content: center; flex-direction:column;}
	.moreWeatherLink {font-size:.9em; margin:-9px auto 0 auto; text-align:center; width:100%}
	a.moreWeatherLink {text-align:center; color:#fff; text-decoration:none; text-transform:uppercase}
	a.moreWeatherLink:hover {color:#ff99ff}

.main { width:100%;   background-size:100%; background-repeat:repeat-y; overflow:hidden; padding-bottom:32px}
.site {background:#f0eadf url('https://surfmallocnj.com/wp-content/themes/surf-mall/images/beige-grunge2.jpg');}
	
	.contentArea {min-height:200px; margin:32px 4%; position:relative}
.homepageImage img { width:100%; height:auto; margin:0; padding:0;  -webkit-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);-moz-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47); /*max-width:1640px;*/ margin:0 auto}
.homepageImage { width:100%; height:auto;margin:0; padding:0; text-align:center; background:#000}

.topImage {margin:32px 4% 42px; dislay:flex; text-align:center;}
.topImage img { width:100%; height:auto; margin:0; padding:0;  -webkit-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);-moz-box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47);box-shadow: -2px 4px 8px 0px rgba(0,0,0,0.47); margin:0 auto; flex-grow: 1; }

.footer {   background:#254C99 url('https://surfmallocnj.com/wp-content/themes/surf-mall/images/footer-grunge.jpg'); background-size:100%; background-repeat:repeat-y; border-top:4px solid #f9ca5e; padding:1.5%;  }
.footerContain { max-width:1200px; margin:0 auto; }
.footer1, .footer2, .footer3 { background:#2f8eb8; min-height:400px; margin:32px auto;   box-sizing: border-box; padding:1%; color:#fff; text-align:center; font-weight:600;  width:90%; padding:22px; max-width:360px; }

/* suasion by-line */
.suasion {color:#fff; font-size:.9em !important; text-align:center; padding:8px 0}
.suasion a {display:block; color:#fff; }

	@media (min-width: 600px) {
		.suasion a {display:inline-block;}
}
	
	.footer1, .footer3 {display: flex;  align-items: center;
  justify-content: center; flex-direction:column}


.footer3  { font-size:.7em; line-height:16px; font-weight:400}
.footer3 p {margin:0; padding:0}
.wpcf7-submit, input[type="submit"], .submitStyle imput  {background:var(--greenBG); color:#fff; padding:6px 11px; font-size:18px; border:#1px solid #045685; text-transform:uppercase; width:auto; margin:8px auto; text-align:center}
.submitStyle {display: flex;  justify-content: center;}

.optIn {text-align:left; padding-left:11px}
.wpcf7-spinner {display:block}
.wpcf7-submit:hover {background:#000; }
.footer3 input[type=text], input[type=email]{ width:90%; height:26px; margin:8px auto}
.footer4 {height:88px}
.contactSubmit input[type=text] { width:88px}
.footer1 { font-size:22px; line-height:33px;  text-transform:uppercase}
.footer1 .hours  {margin:4px auto }
.footer1 .hours  a { text-decoration:none; color:#fff}
.footer1 .hours  p {margin:6px auto}
.footer1 .emailBtn {margin: 4px auto 8px}
.footer1 h2 {margin:0 auto 8px}
  .google-maps {
        position: relative;
        padding-bottom: 72%; 
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
		right:0;
		bottom:0;
        width: 100% !important;
        height: 100% !important;
    }
	
	 a.directionsLink {color:#fff; padding:9px 0 0 !important; display:block}
	.gold-rule { width:90%; height:3px; background:#fcd060; margin:26px auto}
	
	
	

	 ul li.storeColor:nth-child(1), ul li.storeColor:nth-child(5),  ul li.storeColor:nth-child(9),  ul li.storeColor:nth-child(13) {  background-color:var(--blueBG)}
	ul li.storeColor:nth-child(2),	ul li.storeColor:nth-child(6), ul li.storeColor:nth-child(10),  ul li.storeColor:nth-child(14) { background-color:var(--red)}
	ul li.storeColor:nth-child(3),ul li.storeColor:nth-child(7),  ul li.storeColor:nth-child(11),  ul li.storeColor:nth-child(15) {  background-color:var(--greenBG)}
	ul li.storeColor:nth-child(4),ul li.storeColor:nth-child(8),  ul li.storeColor:nth-child(12),  ul li.storeColor:nth-child(16) { background-color: var(--purple)}



	@media (min-width: 1180px) {
	 ul.storeGrid li.storeColor:nth-child(11), ul.storeGrid li.storeColor:nth-child(5),    ul.storeGrid li.storeColor:nth-child(13) {  background-color:var(--greenBG)}
   ul li.storeColor:nth-child(10),  ul.storeGrid li.storeColor:nth-child(8), ul.storeGrid li.storeColor:nth-child(14) { background-color:var(--red)}
	ul.storeGrid li.storeColor:nth-child(6),   ul.storeGrid li.storeColor:nth-child(15) {  background-color:var(--purple)}
	   ul.storeGrid li.storeColor:nth-child(9), ul.storeGrid li.storeColor:nth-child(7),  ul.storeGrid  ul.storeGrid li.storeColor:nth-child(12),  ul.storeGrid li.storeColor:nth-child(16) { background-color: var(--blueBG)}
          }

	
	
	@media (min-width: 820px) {
		
		.twoColumn {display:flex; flex-direction:row;  gap: 38px;}
		.twoColumn .col1 { width:60%; align-items: center;}
		.twoColumn .col2 { width:40%; align-items: center;}
		
		
		.contentArea { margin:42px 8%; min-height:300px}
		.topImage  { margin:38px 8% 52px; }
		
		.weatherWidget { position:absolute; bottom:inherit; top:0; left:0; }
		.header {height:144px}
		.utilityNav { display:block;}
		.weatherWidget { margin: 11px 4%}
		.footer4 {height:0}
	
		.logo { max-width:420px; bottom:-18px}

	.footerContain {  display: flex;  justify-content: center; flex-direction:row;  flex-wrap: wrap;}
		.footer1, .footer2, .footer3 {width:32%; height:auto; min-height:auto}
		
}
	
@media (min-width: 1080px) {
	.seccondaryTopImage { margin:42px auto 32px auto;}
	     h1.angled { text-indent: -22px; margin-bottom:62px; }
			
		.logo { max-width:540px;}
	}
	
	@media (min-width: 1200px) {
		h1.angled { text-indent: -66px;}
	}

/* video css  */

h2.videoHeadline {font-family:arial, sans serif; text-align:center; text-transform:uppercase; margin:0 auto 8px; font-size:24px}

.videoWrapper1 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin:auto;
}
.videoWrapper1 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* store grid */

ul.storeGrid {margin:0; list-style:none;  gap: 11px 1%; display:flex; align-items: center;  justify-content: center; flex-wrap:wrap;  align-items: center; max-width:1600px; margin:42px auto; padding:0 4%;  position:relative; flex-direction:row; }
		
.storeGrid li {width:88%; min-height:288px;  background:#ccc; display: flex;  align-items: center;justify-content: center; flex-direction:column; color:#fff; padding:22px; position:relative; text-shadow: 2px 2px 3px rgba(0,0,0,0.57); align-self: stretch;}
		
@media (min-width: 520px) {
		.storeGrid li {width:49%;}
}
		
@media (min-width: 920px) {
		.storeGrid li {width:32%;}
}
@media (min-width: 1180px) {
		.storeGrid li {width:24%;}
		}

/* gallery work */

.whiteBreakout {  position: relative; }


.clarification {text-align:center; width:88%; margin:0 auto 22px}

		.gridCol_item{  display:inline-block; margin:4% 3%;position:relative; padding:0 0;  width: 94%; }
		.gridCol_item img {margin:0; padding:0}
		.whiteBreakout { padding:0 0 44px}
	.grid_col3, .grid_col4 {columns: 1;  }
	.gridCol_item img:hover, .gridCol_item:hover img { transform: scale(1.03);   transition: .8s; }

	
	@media only screen and (min-width: 480px) { .grid_col3, .grid_col4{  columns: 2 200px;} }
	@media only screen and (min-width: 640px) { .grid_col3, .grid_col4{  columns: 3 200px; }
    
		.columns2, .columns3{  
			columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;}
		
}
	 @media only screen and (min-width: 1180px) { .grid_col4 {  columns: 4 200px; } 
.columns3{  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;}
} 
 @media only screen and (min-width: 1500px) { .single .content, .project_template .content { max-width:1480px; margin:auto} } 
		
	.gallerytem3 img {padding:4px 0}

/* social media */
.hidden{ position: absolute !important;  clip: rect(1px, 1px, 1px, 1px); }
	  ul.social {  list-style:none;  padding:0; display:flex; flex-direction:row; gap:4px;  right:4%; z-index:999999;  margin: 12px auto ;  width:100%; overflow:hidden; text-align:center; justify-content: center;}
ul.footerSocial {  list-style:none;  padding:0; display:block;  position:relative; z-index:999999; width:100px;  text-align:center; overflow:hidden; width:200px; margin: 0 auto 52px auto; display:flex; flex-direction:row; gap:3px}

.social li, .footerSocial li {  margin:0 1px; padding:0;}

   .social a, .footerSocial a{ font-size:1.1em; font-weight:bold; color:#11497e;  display:inline-block !important; }

.social li a, .footerSocial li a { min-width:26px;  font-size:1em; background:#1abc9c;  padding:3px 3px; color:#fff !important;  display:inline-block; text-align:center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
		.social li a:hover, .footerSocial li a:hover { background:#d3337b; }
		

		 @media screen and (min-width:820px){
			 ul.social { position:absolute;   top:57px; margin: 0; width:auto;} 
			 .social li a, .footerSocial li a { min-width:27px;  font-size:1.1em; padding:3px 1px;}
		}

a.viewAll {text-align:center; color:var(--red); text-decoration:none; text-transform:uppercase; display:block; margin:22px auto 42px}
.storeSection a.viewAll {margin:-8px auto 42px}


/* news page */	

.newsPageUL {list-style:none; margin:0; padding:0}
.newsPageUL li {margin:32px auto !important; padding-bottom:32px; border-bottom:1px solid  var(--blue); max-width:920px}
.newsPageUL li:last-child {border-bottom:none }
/* slick sliders */

	section.storeCarousel {margin:48px auto}
	
	ul.carouselSlick, ul.newsCarousel { padding:0; list-style:none; margin:0 4% }
	.slick { max-width:96%}
	
	.newsCarousel li {background:#fff; min-height:200px; padding:22px;  position:relative; border:1px solid var(--greenBG);}
	.newsCarousel h3{ color:var(--blue);  font-size: clamp(17px, 2vw, 21px); line-height:1.1; margin:0 auto 8px }
	.carouselUL .storeColor {min-height: 288px; width:100%; background:#ccc; display: flex !important;  align-items: center; justify-content: center; flex-direction:column; color:#fff; padding:22px; position:relative; text-shadow: 2px 2px 3px rgba(0,0,0,0.57);}
h3.newsItemHead {font-size:18px !important; text-align:center; margin-bottom:17px}
	

	
	.newsCarousel p {margin:6px 0 8px}
	.newsItems {text-align:center}
	 .newsImage {max-width:200px; max-height:160px; width:auto;  height:auto;  margin:0 auto 16px;}
.newsImage img { max-width:200px; max-height:160px; width:auto;  height:auto; margin:auto }
	
	.carouselUL .storeColor p, .storeGrid p {text-align:center; margin:0 auto 8px; font-size: clamp(17px, 2vw, 22px); line-height:1.2}
	.carouselUL .storeColor h3, .storeGrid .storeColor h3 {font-size: clamp(21px, 2.2vw, 28px); text-align:center; line-height:1.1; text-transform:uppercase; margin:0 auto 11px}
	.carouselUL  a, .storeGrid a {position:absolute; top:0; right:0; bottom:0; left:0}
.storeCarousel h2, .storeCarousel h2 {text-align:center}
	
	.carouselUL a span, .storeGrid a span{
      position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
		}
	.details {text-transform:uppercase}
	
		@media (min-width: 480px) {
		.newsItems {  display:flex; flex-direction:row-reverse;  gap: 12px; text-align:left}
		.newsImage {margin:0 auto 0;max-width:240px; max-height:160px; width:auto;  height:auto;  }
			.newsContent { width:auto; flex:1}
	}


	.slick-track { display: flex !important;  }
ul.newsCarousel .slick-slide { height: inherit !important; } 



.slick-prev:before, .slick-next:before {color:#ccc !important }
.slick-prev {
    left: -24px !important;
	z-index:99999;
  top:50%  !important;
	min-height:48px !important;
	padding-bottom:22px
	
}
.slick-next {
    right: -2px !important;
	z-index:99999;
    top:50%  !important;
	min-height:48px !important;
	padding:0 !important;
	
}
.slick-prev, .slick-next { }
			
.slick-prev:before, .slick-next:before { width:45px; height:45px;  content: '';  display: block; border:none !important; opacity:.5}
button:hover.slick-prev:before, button:hover.slick-next:before {   content: '';  display: block; border:none !important; opacity:.8}
.slick-prev:before {background:url('https://surfmallocnj.com/wp-content/themes/surf-mall/images/arrow-work/left-arrow1.svg') }
.slick-next:before {background:url('https://surfmallocnj.com/wp-content/themes/surf-mall/images/arrow-work/right-arrow1.svg') }

.slick-lightbox .slick-prev {margin-left:38px !important}
.slick-lightbox .slick-next {margin-right:42px !important}
	
/* contact us */

/* Contact Form 7  */

.divform {max-width:640px; margin:auto}
.divform p {margin:0 3px}
.wpcf7-spinner {position:absolute !important}
.wpcf7-form .input-text,
.wpcf7-form input[type="text"],
.wpcf7-form input[type=".wpcf7-form input"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
	font-size: 1.3em;
	margin-bottom: 15px !important;
}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"] {height:42px; width:100%}

.wpcf7-form input[type="email"] {margin-top:0 !important}
.wpcf7-form textarea { Width:98%}

@media (min-width: 800px) {
.c {width:48%; margin:0 1%; float:left}
	.wpcf7-form textarea {margin:0 1%}
}

.eut-one-third.eut-last-column,
.eut-one-half.eut-last-column {
	margin-right: 0;
}

fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 30px;
	padding: 15px;
}

legend {
	white-space: normal;
}

.eut-search {
	position: relative;
	display: block;
	max-width: 430px;
	margin: 0 auto;
}

.eut-search input[type='text'] {
	width: 100%;
	height: 45px;
	padding-left: 30px;
	padding-right: 35%;
}

.wpcf7-form .input-text, .wpcf7-form input[type="text"], .wpcf7-form input[type=".wpcf7-form input"], .wpcf7-form input[type="password"], .wpcf7-form input[type="email"], .wpcf7-form input[type="number"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="search"], .wpcf7-form textarea, .wpcf7-form select, textarea {max-width:100%; border: 1px solid #669966;}

.wpcf7-form label {display:block}

.eut-one-third {text-align:center}

@media (min-width: 640px) {
	
.eut-one-third {
	width: 32.666666%;
	float: left;
	margin-right: 1%;
}

.eut-one-half {
	width: 49%;
	float: left;
	margin-right: 2%;
}
}

/* video option */
.videoWrapper3a {max-height:100%; max-height:100%; padding:0 4%}
.videoWrapper3 video {
    width:auto;
	height:auto;
	max-width: 100%;
	max-height: 100%;
	margin:auto;
	border:2px solid #9255ad;
	display:block;
}

/* to hide recapcha */
.grecaptcha-badge { opacity:0;}
.page-id-154 .grecaptcha-badge { opacity:1;}

/* homepage banner */

		.homepageImage {background:#d3337b }
		.homeBanner {position:relative; width:100vw; background:#d3337b; height:auto; color:#fff; padding:22px 4% 24px; text-align:center; line-height:1.3; font-weight:bold; font-size:clamp(18px, 3vw, 26px); }
		.homeBanner p{margin:0; }
		.homeBanner p a {color:#fff}

/* store nex and previous nav  */

	.nav-links {display:flex; flex-direction:row;   justify-content: center;} 
	.nav-links a {text-Decoration:none; text-transform:uppercase}
	.nav-previous, .nav-next {margin:0 22px}
.projectsNav .nav-previous, .projectsNav .nav-next {margin:0 11px}
  .nav-previous:before {content:'«'; padding-right:8px}
	.nav-next:after, .project-link:after  {content:'»'; padding-left:8px}

.nav-links.projectsNav{display:block; text-align:center}
.nav-links.projectsNav .pipe {visibility:hidden}
@media only screen and (min-width: 820px) {
	.nav-links.projectsNav{display:flex; flex-direction:row;   justify-content: center;}
	.nav-links.projectsNav .pipe {visibility:visible}
	.project-link:after  {content:''; }
}

/* for the revised js gallery block */

  /* clearfix */
.grid_col4:after { display: block; content: ''; clear: both;}

.grid-sizer {height:0 !important; margin-top:-2%}
		  
.grid-sizer,.gallerytem4 {width: 100%;margin-bottom:5px ;}

@media (min-width: 480px) {
.grid-sizer,.gallerytem4 {width: 50%;width: calc(50% - 10px);}
}
@media (min-width: 820px) {
.grid-sizer, .gallerytem4 {width: calc(33.333333333333333% - 7px);}
		  }