body, p, .pdttext, .pdtname, .pdtprice .nav, .footer, .modal{
      font-family: 'Pontano Sans', sans-serif;

  /**
      font-family: 'Pontano Sans', sans-serif;

  font-family: 'Andika', sans-serif;

  font-family: 'Cabin Condensed', sans-serif;
    font-family: 'Molengo', sans-serif;

  font-family: 'Signika Negative', sans-serif;
  font-family: 'Andika', sans-serif
  **/
}

/*For logo*/
#pff {
  margin-left: 8px;
  margin-right: 20px;
  background-image: url("https://photos.smugmug.com/photos/i-5w5bGr6/0/L/i-5w5bGr6-L.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: center center; 
  float: left;
  width:100px;
  display: block;
  /* vertically center text */
  letter-spacing: 1px;
}
/* For iphone icon */
#phoneicon{
  height: 50px;
  width: 50px;
  background-image: url("https://photos.smugmug.com/photos/i-qjK4PKB/0/S/i-qjK4PKB-S.png");
  background-size:15px;
  background-repeat: no-repeat;
  background-position: center center; 
}
#flag-ww{
  display:inline-block;
  height: 50px;
  width: 50px;
  background-image: url(/img/worldwide.svg);
  background-size:20px;
  background-repeat: no-repeat;
  background-position: center center; 
}
#flag-sg{
  display:inline-block;
  height: 50px;
  width: 50px;
  background-image: url(/img/flag-sg.svg);
  background-size:20px;
  background-repeat: no-repeat;
  background-position: center center; 
}
/* navbar font color */
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .dropdown-menu>li>a, .navbar-default .navbar-nav>li>a, .multi-column-dropdown>li>a 

{
  color:#53bbb6;
}
.navbar-default {
  /* z-index is 15 for carousel-indicator */
  z-index: 100;
  opacity: 0.9;
  background-color: transparent;
  border-color: transparent !important;
}
/* hover effect for navbar */
#navibar.nav:hover .navbar-default{
  background-color: white;
  transition-duration: 0.3s;
   transition-timing-function: ease;
}

.nav {
  text-align: center;
}

.navbar-nav {
  float:none;
  display: inline-block;
}

/* nav bar dropdown padding */
.multi-column-dropdown>li>a {
  padding: 8px 20px;
}
.dropdown-menu .divider {
margin: 9px 15px;}
/* hover color */
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  color: darkgreen;
}
/* remove border color*/
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border: none !important;
}

/* remove padding for hero image*/
.jumbotron {
  padding:0;
}
/*remove margin below nav bar*/
.navbar {
  margin-bottom: 0px;
}
.noFocus {
  pointer-events: none;
}
.multi-column-dropdown {
    	text-decoration: none;
    	list-style-type: none;
    	-webkit-padding-start: 10px;

    	}
.multi-column-dropdown li a {
    	display: block;
    	clear: both;
    	line-height: 1.428571429;
    	white-space: normal;
    }
.dropdown-menu {
	padding:15px;
	right:0;
	left:auto;
}
.multi-column-dropdown>li>a {
	padding: 8px 20px;

}    
.shopall-menu {
	min-width: 700px;
}
@media only screen and (max-width: 767px) {

/** remove the min-width from the collapsed navbar **/
	.shopall-menu {
		min-width: unset;
	}
/** change the colour of the links to gray for mobile **/	
	.multi-column-dropdown>li>a {
	color: #777;
	}
}

.multi-column-dropdown>li>a:hover, .multi-column-dropdown>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

/* position navbar over carousel*/

#navibar>.navbar {
  position: absolute;
  top:0;
  right: 0;
  left:0;
}
/* remove gradient behind arrow */
.carousel-control.left, .carousel-control.right {
    background-image: none
}
/* Set hero image height to fixed*/
.carousel-inner {
  height: 100vh;
  min-width:100%;
 }
/*keep hero image 100vh*/
#hero-container-atf{
  height:100vh;
  background-color: black;
  position: relative;
  z-index: 1;
}
#herohomepage.hero {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 1;
}  
@media (min-width: 670px) and (max-width: 950px) /**670px to 950px**/{
  .hero{
     height: 100vh;
     position: relative;
  }
}
/*Text on hero image*/
.hero-text {
  color: #f62459;
  font-size: 2em;
}
/*Button on hero image*/
#hero-btn>.btn {
  width:135px;
  border-radius: 4px;
  background-color: #f62459;
  padding: 9px 12px;
  border: 0px;
}
.btn-info {
  border-color: transparent;
}
a.btn.btn-info:hover #hero-btn>.btn {
 background-color: white;
}
/**Message Bar**/
.messagebar {
  position: absolute;
  width:100%;
  bottom:0px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: white;
  opacity:0.8;
  letter-spacing: .2rem;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase; 
  z-index: 5;
}

.btmbanner {
  color:#474747;
}

.main {
  position:relative;
  top:5vh;
  z-index:-10;
  width:100%;
  background-color: #F62459;
  color: white;
  letter-spacing: .3rem;
  font-weight: bold;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-transform: uppercase; 
  text-align: center;
}
.shopallheader {
  font-size:1.9em;
}
@media screen and (max-width: 585px){

.messagebar {
  font-size: 0.8rem;
  letter-spacing: 0.1rem;}
}
/* remove bootstrap default border radius*/
.navbar {
  border-radius: 0px;
}
#myCarousel{
 /* z-index: 5;*/
}
/* shift carousel indicator up*/
.carousel-indicators {
  /*z-index: 10;*/
  bottom:50px;
  left:40%;
  width: 20%;
  margin-left: 0%;
}
/*carousel caption*/
.carousel-caption {
 color: white;
 position: relative;
 background-color: none;
 left:0%;
 right: 0%;
 top: 50vh;
}
.hero-caption3 {
  color: white;
}

.carousel-control.right, .carousel-control.left{
  top:50px;
}

/** fade in fade out transitions **/
.carousel-inner > .item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
  z-index: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}
.carousel-inner > .item:first-of-type {
  position: relative;
}
.carousel-inner > .active {
  opacity: 1;
  z-index: 3;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
  left: 0;
  z-index: 2;
}
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  z-index: 1;
}
.carousel-control {
  z-index: 4;
}


/**grid view**/
.wrapper {
  top:5vh;
  background-color:none;
  width: 90%;
  position:relative;
  left:5%;
  height:100%;
  overflow: hidden;
}
.square {
    float:left;
    position: relative;
    width: 33.3%;
    padding-bottom : 35%; /* = width for a 1:1 aspect ratio */
    background-color:white;
    overflow:hidden;
}
.content {
    position:absolute;
    height:100%; /* = 100% - 2*5% padding */
    width:100%; /* = 100% - 2*5% padding */
    padding: 5%;
    background-color:none;
}
.pdttext {
  position: relative;
  float:left;
  display: block;
  top:10px;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .5px;
  color: #474747;
}
.pdtprice {
  position: relative;
  float: left;
  clear: left;
  display: inline-block;
  top:10px;
  font-size: 1.2rem;
  font-weight: none;
  letter-spacing: .5px;
  color: #474747;
}
.pdtnamecontainer {
  position: relative;
  float:right;
  margin: auto;
  top:10px;
  border-radius: 4px;
  display: inline-block;
  height: 34px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  width: 95px;
  background-color: #DCDCDC;
  z-index:1;}
.pdtname {
  width: 95px;
  font-size: 1.3rem;
  font-weight: medium;
  display: inline-block;
  position: relative;
  line-height:34px;
  letter-spacing: 1px;
  top: 50%;
  background-color:none;
  color: #696969;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); 
  z-index:2;
}
.pdtnamecontainer:hover {
  background-color: #53bbb6; 
}
.pdtnamecontainer .pdtname:hover {
  color:white;
}
.square:hover .pdtname {
  color:white;
}
.square:hover .pdtnamecontainer {
  background-color: #53bbb6; 
}
.content:hover .pdtnamecontainer {
   transition-duration: 0.3s;
   transition-timing-function: ease;
   background-color: #53bbb6;}

.story {
   top: 5vh;
   padding: 5%;
}

@media (hover){
  #productimgClassics:hover #productimgClassics-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
   #productimgSmallvintages:hover #productimgSmallvintages-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #productimgLargevintages:hover #productimgLargevintages-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;   
  }
  #productimgWidevintages:hover #productimgWidevintages-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;   
  }
  #productimgSmallsquares:hover #productimgSmallsquares-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgLargesquares:hover #productimgLargesquares-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;       
  }
  #productimgPhotostrips:hover #productimgPhotostrips-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;        
  }
  #productimgJumboPhotostrips:hover #productimgJumboPhotostrips-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;        
  }
  #productimgSmallies:hover #productimgSmallies-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgBiggie:hover #productimgBiggie-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgWeddingPhoto:hover #productimgWeddingPhoto-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
   #productimgMagnets:hover #productimgMagnets-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
   #productimgThickMagnets:hover #productimgThickMagnets-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgSticker:hover #productimgSticker-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgGreetingCards:hover #productimgGreetingCards-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgPhotoCalendars:hover #productimgPhotoCalendars-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgPremiumprints:hover #productimgPremiumprints-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgMiniSquareframe:hover #productimgMiniSquareframe-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgFramedPrints:hover #productimgFramedPrints-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  } 
  #productimgSquareframe:hover #productimgSquareframe-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgPhotoTiles:hover #productimgPhotoTiles-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgInstaframe:hover #productimgInstaframe-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgPosters:hover #productimgPosters-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgCustomizedCollage:hover #productimgCustomizedCollage-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgIkeaPhotoSizes:hover #productimgIkeaPhotoSizes-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgFineArt:hover #productimgFineArt-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
   #productimgPhotoCube:hover #productimgPhotoCube-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgWood:hover #productimgWood-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgMetalPrints:hover #productimgMetalPrints-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;     
  }
  #productimgCanvas:hover #productimgCanvas-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #mysteryGift:hover #mysteryGift-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #woodenHanger:hover #woodenHanger-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #basicPhotoFrame:hover #basicPhotoFrame-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #classicPhotoFrame:hover #classicPhotoFrame-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #acrylicPhotoframe:hover #acrylicPhotoframe-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #metalPhotoFrame:hover #metalPhotoFrame-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #photoCubeVday:hover #photoCubeVday-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #smallVintageVday20:hover #smallVintageVday20-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }
  #smallVintageVday20:hover #smallVintageVday20-secondary{
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

}
  

/**hover for classics**/
#productimgClassics {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  
}
#productimgClassics-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for small vintages**/
#productimgSmallvintages {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgSmallvintages-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for large vintages**/
#productimgLargevintages {
  background-image: url('https://photos.smugmug.com/photos/i-GQ2L2RV/0/d16fb81c/L/i-GQ2L2RV-L.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgLargevintages-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for wide vintages**/
#productimgWidevintages {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgWidevintages-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for small squares**/
#productimgSmallsquares {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgSmallsquares-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for large squares**/
#productimgLargesquares {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgLargesquares-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for photo strips**/
#productimgPhotostrips {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPhotostrips-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for photo strips**/
#productimgJumboPhotostrips {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgJumboPhotostrips-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for smallies**/
#productimgSmallies {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgSmallies-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for biggies**/
#productimgBiggie {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgBiggie-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for wedding photocards**/
#productimgWeddingPhoto {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgWeddingPhoto-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for magnets**/
#productimgMagnets {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgMagnets-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for thick magnets**/
#productimgThickMagnets {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgThickMagnets-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for stickers**/
#productimgSticker {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgSticker-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for greeting cards**/
#productimgGreetingCards {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgGreetingCards-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for greeting cards**/
#productimgPhotoCalendars {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPhotoCalendars-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for premium prints**/
#productimgPremiumprints {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPremiumprints-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for square frames**/
#productimgMiniSquareframe {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgMiniSquareframe-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for framed prints**/
#productimgFramedPrints {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgFramedPrints-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for photo tiles**/
#productimgPhotoTiles {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPhotoTiles-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for square frames**/
#productimgSquareframe {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgSquareframe-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

/**hover for instaframes**/
#productimgInstaframe {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgInstaframe-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for posters**/
#productimgPosters {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPosters-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for customized collage**/
#productimgCustomizedCollage {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgCustomizedCollage-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for ikea photo sizes**/
#productimgIkeaPhotoSizes {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgIkeaPhotoSizes-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for fine art**/
#productimgFineArt {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgFineArt-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for photoCube**/
#productimgPhotoCube {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPhotoCube-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for wood**/
#productimgWood {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgWood-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for metal prints**/
#productimgMetalPrints {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgMetalPrints-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for popart**/
#productimgPopart {
  background-image: url('/img/product_pa.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgPopart-secondary {
  top:0;
  background-image: url('/img/product_pa1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for canvas**/
#productimgCanvas {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#productimgCanvas-secondary {
  top:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for mystery gifts**/
#mysteryGift {
  background-image: url('/img/SureWinCampaign-MobilePhoto1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#mysteryGift-secondary {
  top:0;
  background-image: url('/img/SureWinCampaign-MobilePhoto2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for wooden hangers**/
#woodenHanger {
  background-image: url('/img/jumbo-photostrips-folded.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#woodenHanger-secondary {
  top:0;
  background-image: url('/img/jumbo-photostrips-folded.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for basic photo frame**/
#basicPhotoFrame {
  background-image: url('/img/premium-background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#basicPhotoFrame-secondary {
  top:0;
  background-image: url('/img/premium-background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for classic photo frame**/
#classicPhotoFrame {
  background-image: url('/img/fine-art-print-2pics.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#classicPhotoFrame-secondary {
  top:0;
  background-image: url('/img/fine-art-print-2pics.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for acrylic photo frame**/
#acrylicPhotoframe {
  background-image: url('/img/AcrylicFrame_PhotoBundle_Mobile.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#acrylicPhotoframe-secondary {
  top:0;
  background-image: url('/img/AcrylicFrame_PhotoBundle_Mobile.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for metal photo frame**/
#metalPhotoFrame {
  background-image: url('/img/BrownFrame_PhotoBundle_Desktop.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#metalPhotoFrame-secondary {
  top:0;
  background-image: url('/img/BrownFrame_PhotoBundle_Desktop.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for small vintage vday**/
#smallVintageVday20 {
  background-image: url('/img/vdaySmallVintageWebsite.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#smallVintageVday20-secondary {
  top:0;
  background-image: url('/img/vdaySmallVintageWebsite.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for wide vintage vday**/
#wideVintageVday20 {
  background-image: url('/img/vdayWideVintageWebsite.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#wideVintageVday20-secondary {
  top:0;
  background-image: url('/img/vdayWideVintageWebsite.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
/**hover for photocube vday**/
#photoCubeVday {
  background-image: url('/img/vDayPhotocube.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:85%; /* = 100% - 2*5% padding */
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
#photoCubeVday-secondary {
  top:0;
  background-image: url('/img/vDayPhotocube.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color:none;
  height:100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

@media (min-width: 1050px) and (max-width: 1150px) /**1050px to 1150px**/{
  .pdttext {
   font-size:1em;
  }
  .pdtprice {
    font-size:0.8em;
  }
}
@media (min-width: 950px) and (max-width: 1050px) /**950px to 1050px**/{
  .pdttext {
   font-size:1em;
  }
  .pdtprice {
    font-size:0.8em;
  }
  .pdtname {
    font-size:0.8em;
    width:85px;
  }
  .pdtnamecontainer {
    width:85px;
  }
}
@media (min-width: 585px) and (max-width: 950px) /**585px to 950px**/{
  .pdtnamecontainer {
    width:80px;
    height:20px;
  }
   .pdttext {
    font-size:0.8em;
    top:5px;
  }
  .pdtprice {
    font-size:0.8em;
    top:5px;
  }
  .wrapper{
    width: 90%;
    position:relative;
    left:5%;
  }
  .pdtnamecontainer {
    display:none;
  }
  .main {
    padding-top: 1em;
    padding-bottom: 1em;  
  }
}
@media screen and (max-width: 585px) {
  .wrapper{
    width:90%;
    left:5%;
  }
  .content {
    height:100%;
  }
  .square {
    width:50%;
    padding-bottom : 50%;
    margin: 0%;
  }
  .pdtnamecontainer {
    display:none;
  }
  .pdttext {
    font-size:0.8em;
    top:1px;

  }
  .pdtprice {
    font-size:0.6em;
    top:1px;

  }
  .main {
    padding-top: 1em;
    padding-bottom: 1em;   
  }
}