.fa {
    
		font-family: 'FontAwesome', arial, helvetica;
		 font-display: swap;
}


html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
	font-display: swap;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,.4);
		background: #fff;
}

.box-shadow {box-shadow: 0px 0px 5px rgba(0,0,0,.4);}
#header img{
  width: 100%; /* Full width */
  transition: 0.2s;  
	max-width:741px;
}
 a.text-black {color:#000!important;}
#header span.tagline {font-size:18px;color:#000;text-align:center;font-style:italic;}

.text-black.address {font-size:16px;}
.text-black.phone {font-size:27px;}


.bg-grey {background-color: rgba(207,216,220,0.5);}
.bg-black {background-color:rgba(0,0,0,1);}
.display-3 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
		text-align: center;
		font-style: italic;
}
.lead {text-align: center;}
.navbar {border-top: 1px solid black;}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1);
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}
.jumbotron {margin-bottom: 0;}
.navbar-scroll {
  background-color: rgba(255,255,255,1);
  transition: background-color 0.5s;
}
#navbarResponsive.navbar-collapse{background: rgba (0,0,0,1)!important;}
.thumbnail img {height:auto!important;}
iframe { z-index: 1; }
iframe, img { width: 100%; border: 0; }
.map { -webkit-filter: grayscale(100%); height:400px}

/* ============================================================
  PRIMARY STRUCTURE
============================================================ */
.parallax-container {
  /*max-width: 960px;*/
	max-width: 1172px;
  margin: 0 auto;
	padding-left:1em;
	padding-right:1em;
}

/* ============================================================
  SECTIONS
============================================================ */


.polaroid p {color:#000;}
section.module:last-child {
  margin-bottom: 0;
}

section.module h1, section.module h2, h1, h2 {
  margin-bottom: 28px;
  font-family: "Times New Roman", Times, serif;
  font-size: 30px;
	font-display: swap;
}
section.module p {
  margin-bottom: 40px;
  font-size: 18px;

}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
  background-color: rgba(207,216,220,0.5);
	box-shadow: 0px 0px 5px rgba(0,0,0,.4);
	width:100%;

	margin:0 auto;
	text-align:center;
}
section.module.content:last-child {
  margin-bottom: 60px;
}
section.module.parallax {
  padding: 280px 0;
  background-position: 0 0;
}
section.module.parallax h2 {
font-family: 'Lora', serif;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,.7);
	font-display: swap;
}
section.module.parallax-sasal {
 /* background-image: url("../img/sasal.jpg");*/
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
	height:100vh;
}
section.module.parallax-carpet {
  /*background-image: url("../img/carpet.jpg");*/
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
		height:100vh;
}
section.module.parallax-hardwood {
  /*background-image: url("../img/hardwood.jpg");*/
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
	height:100vh;
}

section.module.parallax-vinyl {
 /* background-image: url("../img/vinyl.jpg");*/
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
	height:100vh;
}

section.module.parallax-store {
  background-image: url("../img/store.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
	height:100vh;
}

section.module.parallax-store5 {
  background-image: url("../img/store5.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;

}

section.module.parallax-tom {
  background-image: url("../img/tom.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 background-color: rgba(0,0,0,0.1);
  background-blend-mode: screen;
}

/*footer*/
.footer .container-fluid {
  height: auto;
	padding-top:1em;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

footer .container-fluid a {
  display: inline-block;
  color: #ddd;
  padding-left: 1em;
}
footer .container-fluid p {
  display: inline-block;
  color: #ddd;
  padding-left: 1em;
  padding-right: 2em;
}
.right {text-align: right;}
.center {text-align: center;}
.left {text-align: left;}


/* #imageGallery */

#imageGallery p {
    margin-top: 0;
    margin-bottom: 0;
}






ul#imageGallery {list-style:none;padding-inline-start: 0;margin-block-end: 0;margin:0  auto;    display: inline-flex;}
#imageGallery {
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 100%;
	text-align: center;
}

#imageGallery li {margin-bottom: 0}
#imageGallery img {
		margin: 0; 
		padding: 4px;
		/* max-height:248px; */
		width:auto; 
		max-width:250px;
	}

#overlay {

	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	text-align: center;
	z-index:4;
	overflow-y:scroll;
}

#overlay img {margin-top: 3%;width: 40%;}

#overlay p {
	color: lightgray;
	font-size: 15px;
	margin-top: 30px;
}

#overlay div {
  background: transparent;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#btnPrev {
	float: left;
	position: absolute;
	top: 35%;
	left: 8%;
	background-color: transparent;
	color: lightgray;
	border: transparent;
	font-size: 40px;
}

#btnNext {
	float: right;
	position: absolute;
	top: 35%;
	right: 8%;
	background-color: transparent;
	color: lightgray;
	border: transparent;
	font-size: 40px;
}

#btnPrev:focus,
#btnNext:focus,
#exit:focus {outline: none;}

#exit {
	position: absolute;
	top: 5%;
	right: 12%;
	background-color: rgba(0,0,0,.5);
	color: lightgray;
	border: transparent;
	font-size: 20px;
}


.imgal-container{
line-height:0;
-webkit-column-count:5;
-webkit-column-gap:0;
-moz-column-count:5;
-moz-column-gap:0;column-count:5;column-gap:0;
}
.imgal-img{   
border: 2px #fff solid;
width:100%;
height:auto;
transition:filter .2s;
}
.imgal-img:hover{
-webkit-filter:opacity(80%);
filter:opacity(80%);cursor:pointer;
}
.imgal-modal{
margin:auto;
position:absolute;
top:0;left:0;
bottom:0;
right:0;
background-color:#000;
color:#fff;
vertical-align:middle;
height:100vh;
width:100vw;
}
	#imgal-modal-close{
	display:inline;
	font-size:2rem;
	position:absolute;
	top:1rem;right:1.5rem;
	cursor:pointer;
	}
	.imgal-modal-img{
	width:100%;
	height:100%;
	object-fit:contain;
	}
	
	
	
	

/* ****************************************** media *********************************/
@media (min-width: 576px){
		.jumbotron {padding:3.9em 2em;}
}
@media(max-width: 768px){
    .navbar {background-color: #fff !important; }
		.right,.center, .left {
  text-align: center;
	}

}

@media all and (min-width: 600px) {
  section.module h1, section.module h2, h1 {
    font-size: 42px;
  }
 
  /*section.module.parallax {
    padding: 280px 0;
		height:100vh;
  }*/
  section.module.parallax h2 {
    font-size: 96px;
  }
}


@media all and (max-width: 667px){
	section.module.parallax {
   padding: 35px 0;
    background-size: cover;
    background-attachment: inherit;
		background-position: 50% 0%!important;
	
	}
	.tagline, .text-black.address {font-size:12px;}
	.text-black.phone {font-size:1.2em;}
	.jumbotron {padding: 0!important;}
	section.module.parallax h2 {
	font-family: 'Lora', serif;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px black;
	font-display: swap;
}

}

@media all and (min-width: 960px) {
  section.module.parallax h2 {
    font-size: 5.9vw;
  }
}

@media (max-width: 991px) {
  	.jumbotron {padding:0;}
  }



@media(max-width: 768px){
    .col-md-4 {
      text-align: center;
      line-height: 30px;
  }
	
	
	section.module.parallax-store {
    background-image: url(../img/store.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-attachment: relative;
    background-size: cover;
    background-color: rgba(0,0,0,0.1);
    background-blend-mode: screen;
    min-height: 300px;
		height:auto;
}
	
	
	.fixed-top {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,.4);
    background: #fff;
}
	
	
}




@media (min-width: 200px) and (max-width: 768px) {

	#overlay img {
		margin-top: 1em;
		width: 80%;
	}

	#btnPrev {
		top: 50%;
		left: 8%;
		font-size: 20px;
	}


	#btnNext {
		top: 50%;
		right: 8%;
		font-size: 20px;
	}

}


@media (min-width: 768px) and (max-width: 1068px) {
	
	#overlay img {
		margin-top: 20%;
		width: 600px;
	}

	#btnPrev {
		top: 30%;
		left: 6%;
		font-size: 30px;
	}

	#btnNext {
		top: 30%;
		right: 6%;
		font-size: 30px;
	}

}

@media only screen and (max-width:768px){
	.imgal-container{
	line-height:0;
	-webkit-column-count:2;
	-webkit-column-gap:0;
	-moz-column-count:2;
	-moz-column-gap:0;
	column-count:2;
	column-gap:0;
	}
	
	#imageGallery {

	}
	
}

@media only screen and (min-width:768px){
	.imgal-container{
	line-height:0;
	-webkit-column-count:3;
	-webkit-column-gap:0;
	-moz-column-count:3;
	-moz-column-gap:0;
	column-count:3;
	column-gap:0;
	}
}
@media only screen and (min-width:992px){
	.imgal-container{
	line-height:0;
	-webkit-column-count:4;
	-webkit-column-gap:0;
	-moz-column-count:4;
	-moz-column-gap:0;
	column-count:4;
	column-gap:0;
	}
}
@media only screen and (min-width:1200px){
	.imgal-container{
	line-height:0;
	-webkit-column-count:5;
	-webkit-column-gap:0;
	-moz-column-count:5;
	-moz-column-gap:0;
	column-count:5;
	column-gap:0;
	}
}


/* ++++++++++++++++++++++++++++++++++++++ card gallery ------------------------------ */

div.polaroid {
  width: auto;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -webkit-transform: rotate(7deg); /* Safari */
  transform: rotate(7deg);
}

div.rotate_left {
  float: left;
  -ms-transform: rotate(-8deg); /* IE 9 */
  -webkit-transform: rotate(-8deg); /* Safari */
  transform: rotate(-8deg);
}

.cardrow { 
		width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


@media (max-width: 1465px){
.cardrow { 
		width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

@media (max-width: 1165px){
.cardrow { 
		width: 100%;
    max-width: 852px;
    margin: 0 auto;
}

@media (max-width: 881px){
.cardrow { 
		width: 100%;
    max-width: 568px;
    margin: 0 auto;
}

@media (max-width: 597px){
.cardrow { 
		width: 100%;
    max-width: 286px;
    margin: 0 auto;
}













$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;


		div.polaroid {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -webkit-transform: rotate(7deg); /* Safari */
  transform: rotate(7deg);
}

div.rotate_left {
  float: left;
  -ms-transform: rotate(-8deg); /* IE 9 */
  -webkit-transform: rotate(-8deg); /* Safari */
  transform: rotate(-8deg);
}

.cardrow { 
		width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


@media (max-width: 1465px){
.cardrow { 
		width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

@media (max-width: 1165px){
.cardrow { 
		width: 100%;
    max-width: 852px;
    margin: 0 auto;
}

@media (max-width: 881px){
.cardrow { 
		width: 100%;
    max-width: 568px;
    margin: 0 auto;
}

@media (max-width: 597px){
.cardrow { 
		width: 100%;
    max-width: 286px;
    margin: 0 auto;
}






ul#imageGallery {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
		max-width:100%;
}

#imageGallery {
    /* flex-flow: row wrap; */
    /* justify-content: space-around; */
    max-width: 100%;
    text-align: center;
}