/* Shopping Card Product Listing section within Post */

.shop-gallery{
	padding: 0px 0px 0px 0px;
	text-align: center;
	width: 200%;
	margin-left: -50%;
}

.shop-card{
    margin: 0 auto;
	display: inline-block;
	width: 20%;
	padding: 10px 2%;
	vertical-align: top;
}

.shop-card a{
    text-decoration: none;
	color: #383838;
	transition: .3s ease;
}

.shop-card a:hover{
	color: #AF597B;
}

.shop-card-image{
	height: 350px;
	width: 100%;
	margin-bottom: 5px;
	border: 1px solid #AF597B;
	box-shadow: 5px 5px #AF597B;
	background-size: auto 100%;
    background-position: center;
	overflow: hidden;
}

.shop-card-image img{
    height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Wide Image section within Post */

.wide-image{
    padding: 0px 0px 0px 0px;
	text-align: center;
	width: 150%;
	/*height: 750px;*/
	height: auto;
	margin-left: -25%;
	background-color: transparent;
	/*margin-bottom: 5px;
	border: 1px solid #AF597B;
	box-shadow: 5px 5px #AF597B;*/
	background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
	overflow: hidden;
}

/*.wide-image img{
    width:200%;
    height:auto;
}*/

/* Parallax Wide Image section within Post */

.parallax-wide-image{
	width: 200%;
	height: 570px;
	margin-left: -50%;
    background: transparent;
}

/* Shop Now Buttons - START */
.shop-now-2{
	width: 100%;
	height: 100%;
	padding: 20px 0;
	text-align: center;
	font-family: "jaf-bernina-sans-comp", sans-serif;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 17px;
}

.shop-now-2-button{
	width: 200px;
	height: auto;
	text-align: center;
	padding: 10px 20px;
	margin: 5px 15px;
	background-color: white;
	color: black;
	border: 3px solid black;
	text-decoration: none;
}

.shop-now-2-button:hover{
	background-color: black;
	color: white;
}
/* Shop Now Buttons - END */


/* Image Gallery With Arrows - START */

.gallerywrapper {
     width:500px;
     height:500px;
     margin:0 auto;
     position:relative;
	/*background-color: lightblue;*/
 } 

 .gallerywrapper .gallery1 {
     position:absolute;
     left:0;
     top:0;
     height:500px; /* Important to have height! Maximises the window so that other images are hidden */
     width:500px;
     overflow:hidden;
     text-align:center;
 } 

 .gallerywrapper .gallery1 div {
     padding-top:0px; 
     position:relative;
 } 

 .gallerywrapper .gallery1 div img {
     clear:both; 
     display:block; 
     margin:0 auto; 
	 height: 500px;
	 width: auto;
 }

 .gallery1 .previous{
	 margin-top:-250px;
	 float:left;
     text-decoration:none;
 } 

 .gallery1 .next{
	 margin-top:-250px;
	 float:right;
     text-decoration:none;
 }

/* Image Gallery With Arrows - END */


@media screen and  (max-width:500px){
    .shop-gallery{
	    margin-left: 0;
	    width: auto;
	    overflow-x: auto;
    	overflow-y: hidden;
  	    white-space: nowrap;
	    -webkit-overflow-scrolling: touch;
	}
	.shop-card{
    	width: 65%;
    	word-wrap: break-word;
    }
    .wide-image{
        width: 100%;
        height: 230px;
        margin: 0 auto;
    }
    .parallax-wide-image{
        width: 100%;
        height: 500px;
        margin: 0 auto;
    }
    .two-wide-gallery{
	    width: auto;
	    margin-left: 0;
	    overflow-x: auto;
    	overflow-y: hidden;
	    white-space: nowrap;
	    -webkit-overflow-scrolling: touch;
    }
    .two-wide-card{
        padding: 10px 2%;
        width: 70%;
    }
    .two-wide-image{
        height: 350px;
    }
}

@media (max-width:930px) and (min-width:501px){
    .shop-gallery{
	    margin-left: 0;
	    width: auto;
	    overflow-x: auto;
    	overflow-y: hidden;
  	    white-space: nowrap;
	    -webkit-overflow-scrolling: touch;
	}
	.shop-card{
    	width: 230px;
    	word-wrap: break-word;
    }
    .wide-image{
        width: 100%;
        height: 230px;
        margin: 0 auto;
    }
    .parallax-wide-image{
        width: 100%;
        height: 500px;
        margin: 0 auto;
    }
}

@media (max-width:1160px) and (min-width:931px){
    .shop-gallery{
	    margin-left: 0;
	    width: auto;
	    overflow-x: auto;
    	overflow-y: hidden;
  	    white-space: nowrap;
	    -webkit-overflow-scrolling: touch;
	}
	.shop-card{
	    width: 230px;
    	word-wrap: break-word;
    }
    .wide-image{
        width: 100%;
        height: 230px;
        margin: 0 auto;
    }
    .parallax-wide-image{
        width: 100%;
        height: 500px;
        margin: 0 auto;
    }
}