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

/*body {
    height:100%;
    margin: 0;
    padding:0;
    font-family: Helvetica, sans-serif;
    background-color: #CCCCCC;
}
a {
	text-decoration:none ;
	color: inherit;
}
.container{
   max-width: 1300px;
    background:#FFFFFF; 
   /* width: 100%;*/
  /*  margin: auto;
    padding-top: 50px;
    padding-left: 25px;
    padding-right: 25px;
}*/
.singleContainer{
	min-height:100%;
   max-width: 1300px;
    /*background:#FFFFFF; 
    width: 100%;*/
    margin: auto;
    position: relative;
    xpadding-top: 12vw;
    padding-left: 25px;
    padding-right: 25px;
}
.row{
	min-width:350px;
	border: 1px solid #CCCCCC;
	background:#CCCCCC;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
	padding:20px 5px;
}
/*----- add css --*/
.btn{
    display: inline-block;
    background: #666;
    color: #fff;
    padding: 8px 30px;
    margin: 5px 0;
    border-radius: 30px;
    transition: background 0.5s;
}
.btn:hover{
    background: #563434;
}
.page-btn span:hover{
    background: #ff523b;
    color: #fff;
}
/*.header{
    background: radial-gradient(#fff, #ccc);
}
.header .row{
    margin-top: 70px;
}*/
/*------single product page----*/
.single-product{
    margin-top: 20px;
    background: #fff;
}
.single-product .col{
    padding: 0;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
}
.single-product h3{
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.single-product select{
    display: block;
    padding: 10px;
    margin-top: 20px;
}
.single-product input{
    /*width: 50px;
    height: 40px;*/
    /*padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;*/
    border: 1px solid #ff523b;
}
input:focus{
    outline: none;
}
.single-product .fa{
    color: #ff523b;
    scroll-margin-left: 10px;
}
.small-img-row{
    display: flex;
    padding: 5px 0;
    justify-content: space-between;
}
/*------end----*/

.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
/*-------------*/
.col-sp{
  width: 48%;
  min-width:340px;
}
.col-sp h1{  
	/*font-family: 'Libre Baskerville', serif;*/
    font-family: 'EB Garamond', serif; 
    /*font-family: 'Baskervville', serif; */
    font-size: 30px;
	color:#666666 ;
    line-height: 40px;
    margin: 15px 0;
}

.col-sp h4{
}
.col-sp .instruction{
	top:-15px;
}
.col-sp p{
    color: rgb(66, 66, 66);  
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Libre Baskerville', serif;
    /*font-family: 'EB Garamond', serif; */
   /* font-family: 'Baskervville', serif; */     
   font-size: 0.8em;
}
.col-sp h5{
    color: rgb(66, 66, 66);
    margin-top: 5px;
    font-size: 10px;
    font-weight: normal;
    font-style: italic;
}
.col-sp h6{
    color: rgb(66, 66, 66);
    font-size: 12px;
    font-weight: normal;
    line-height: 0.1;
}
.col-sp .terms{
	text-align:left ;
    color: rgb(66, 66, 66);
    font-size: 12px;
    font-weight: normal;
   /* line-height: 0.1;*/
}
.col-sp .terms a:hover{
    font-weight: bold;
}
.imgBox{
	padding: 0 15px;
    flex-basis: 48%;
	overflow:hidden;
    min-width: 300px;
}
.checkoutForm h3{
    font-size: 14px;
    margin-bottom: -50px;
}
/*.imgBox{
	width:720px;
	margin: 50px auto 20px;
}*/
/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}
.imgBox img{
    /*max-width: 100%;*/
	width: 100%;
    margin: 0;
  transition: transform .5s ease;
}
/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
  transform: scale(1.5);
}

.imgBox :hover{
    /*transform: scale(1.7) translateX(-10%);*/
  transform: scale(1.5);
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

.thumb li :hover{
    transform: scale(1.2)
	/*width: 100%;
	border: 4px solid #fff;
	box-shadow: 0 5px 25px rgba(0,0,0,.5);*/
}
.imgBox h1{
		
}
/*------  superseeded by thumb class
.small-img-col{ 
    flex-basis: 20%;
    cursor: pointer;
}
.small-img-row{
  display: flex;
  width: 100%;
  align-items: center;
	padding:5px 0;
}
.small-img-col{ 
	padding: 0;
    flex-basis: 24%;
    min-width: 300px;
}
Demo css ----*/


ul.thumb{
	margin:0 auto;
	padding:0;
    display:flex;
    align-items: center;
    justify-content: center;
}
ul.thumb li{
  list-style: none;
  flex-basis: 20%;
  margin: 0;
}
ul.thumb li img{
  width: 90%;
  /*border: 5px solid #fff;*/
  padding-top:15px;
  cursor: pointer;
  transition:all .3s ease-in-out 0s;
  }
  /*box-shadow: 0 5px 25px rgba(0,0,0,.5);*/

ul.thumb li img :hover{
    transform: scale(2);
}
@media screen and (max-width: 780px) {
    .single-product{
        /*background: #f0ff;*/
    }
    .col-sp{
        width: 85%;
      }
    .singleContainer{
        /*padding-top: 1vw;*/
     } 
}
/*
.imgBox{
	width:720px;
	margin: 50px auto 20px;
}
.imgBox img{
	width: 100%;
	border: 4px solid #fff;
	box-shadow: 0 5px 25px rgba(0,0,0,.5);
}
ul.thumb{
	margin:0 auto;
	padding:0;
  display:flex;
  align-items: center;
  justify-content: center;
}
ul.thumb li{
  list-style: none;
  margin: 0 10px;
}
ul.thumb li img{
	border: 4px solid #fff;
  box-shadow: 0 5px 25px rgba(0,0,0,.5);
}
*/