.pageout {
display: none;
}

#slidenav {
 width: 450;
 position: relative;
 top:-300px;
} 
.slideprev {
float: left;
}
.slidenext {
float: right;
}
.buckleslidecount {
position: absolute;
top:269px;
left:0px;
background-color: black;
color: white;
text-align: center;
font-size: 20px;
height:31px;
width:334px;
padding:10px;
margin:0;
}

#collection {
margin: 20px auto;
font-size: 20px;
text-align: center;
}

#slidecontainer {
    width: 334px;
//    height: 269px;
    height: 300px;
    border: 10px black solid; // 10px #029cc9 solid;
    overflow: hidden;
    margin: 0 auto;
    background: black;
    border-radius: 10px;
}

#slidewrapper {
//    width: 668px;
    transform: translate3d(0, 0, 0);
    transition: transform .5s ease-in-out;
    -webkit-transform: -webkit-translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -moz-transform: translate3d(0, 0, 0);
    -moz-transition: -moz-transform .5s ease-in-out;
    -ms-transform: translate3d(0, 0, 0);
    -ms-transition: -ms-transform .5s ease-in-out;
}
.slidecontent {
    position: relative;
    float: left;
    width: 334px;
//    height: 269px;
    height: 300px;
    white-space: normal;
    background-repeat: no-repeat;
}
.shiny:after {
  content: "";
  position: absolute;
//  top: -110%;
//  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
//  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
// good for modern safari? OK on chrome
    background: -webkit-linear-gradient(right,rgba(255, 255, 255, 0.0) 0.0,rgba(255, 255, 255, 0.0) 0.77,rgba(255, 255, 255, 0.5) 0.92,rgba(255, 255, 255, 0.0) 1.0);
//  background: -webkit-gradient(linear, left top, right bottom, rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 1.0));
//  background: -moz-linear-gradient(right,rgba(255, 255, 255, 0.0) 0%,rgba(255, 255, 255, 0.0) 77%,rgba(255, 255, 255, 0.5) 92%,rgba(255, 255, 255, 0.0) 100%);
// try for old safari makes gradient doesn't clip oval doesn't animate	background: -webkit-gradient(
//		linear, left top, right bottom,
//		from(rgba(0,0,0, .13)),
//		to(rgba(255, 255, 255, .13)));
 -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.shiny.doit1:after {
  animation: shine1 .8s 2;
}

.shiny.doit2:after {
  animation: shine2 .8s 2;
}

@keyframes shine1 {
  0% {
  opacity: 1;
  top: -110%;
  left: -210%;
  }
  100% {
  opacity: 1;
  top: -30%;
  left: -30%;
  }
}

@keyframes shine2 {
  0% {
  opacity: 1;
  top: -110%;
  left: -210%;
  }
  100% {
  opacity: 1;
  top: -30%;
  left: -30%;
  }
}

.buckleimg {
visibility: visible;
// float: right; 
position: absolute; 
top: 31px; 
left: 504px;
// display: inline-block;
width: 33px; 
height: 27px;  
// margin: 0px 0px 0px 10px; 
// border: solid black 1px;
 -webkit-border-radius: 50%;
  border-radius: 50%;
overflow: hidden;
cursor: pointer;
}

.bucklecontainer
{
 -webkit-transition: -webkit-transform 4s linear;
 -moz-transition: -moz-transform 4s linear;
//   transition-property: zoom;
//    transition-duration: 8s;
//    transition-timing-function: linear;
    -webkit-transition-delay: 4s;
    -moz-transition-delay: 4s;
//    transition-timing-function: ease;
// transition: all .5s ease-in-out;
    z-index: 1500;
    cursor: pointer;
}
.buckleshrink{
 -webkit-transform:translate(473px, -52px) scale(0.1);
 -moz-transform: translate(473px, -52px) scale(0.1);
transform:  translate(473px, -52px) scale(0.1);
}


.bucklegrow{
//  -webkit-transform: scale(0.05) rotate(0.1deg);
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
// zoom: 0.05;
// transition: all .2s ease-in-out;
//        -webkit-transform: scale(0.05);
//        -ms-transform: scale(0.05);
//        transform: scale(0.05);
}
.buckle {
//  image-rendering: -webkit-pixelated; // crisp-edges; // pixelated;
//  -moz-crisp-edges;
// for scaling up only?
  outline: none;
  background-image: url('images/buckle-wrangler-heads-trans.png');
  background-size: 334px 269px;
 -webkit-border-radius: 50%;
  border-radius: 50%;
    font-family: Serif;
   position: absolute;
 left: 295px; // 100px;
 top: -120px; // 50px;
//    margin: auto;
    text-align: center; 
// large    font-size: 50px;
    font-size: 25px;
    font-weight: bold;
// large	line-height: 50px; 
    line-height: 28px; // 25px;
// large	width:668px; 
// large	height:538px;
	width:334px; 
	height:269px;
    z-index: 1500;
  overflow: hidden;
}

.buckle p {
 margin-top: 20px;
}

.oldshadow {
    outline: none;
    color: #9c8468; //#eee7b1; //#ffff00; // for edge turns color on shrink so don't use black
//    text-shadow: -2px -2px 3px #fff, 2px 2px 2px #000;
    text-shadow: -2px -2px 2px #fff, 2px 2px 2px #000;
}

.myshadow {
    outline: none;
    color: #9c8468; //#eee7b1; //#ffff00; // for edge turns color on shrink so don't use black
//    text-shadow: -2px -2px 3px #fff, 2px 2px 2px #000;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.mytext {
// color: black;
//  color: #e8d84a; // #daa520; #eee7b1; //#ffff00; // for firefox where transparent and clip don't work
//  text-shadow: -2px -2px 2px #fff, 2px 2px 2px #000;
  outline: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
//  -moz-text-fill-color: transparent;
//  -moz-background-clip: text;
  text-fill-color: transparent;
  background-clip: text;
}


/*
@-moz-document url-prefix() {
    .mytext {
        color: black; // rgba(255,0,0,1); // rgba(221, 212, 147, 1); // #9c8468;
//    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    }
}

shrink works everywhere
gleem on click makes focus on safari onload doesn't work on edge
gleem on safari not showing gradient.
text clip and transparent don't work on firefox
*/

/**
 * Icon
 */

.icon {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  display: inline-block;
  
  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}

.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }

/**
 * The "shine" element
 */

.icon:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
  
}

/* Hover state - trigger effect */

.icon:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */

.icon:active:after {
  opacity: 0;
}

/**
 * The "shine" element
 */

.gleem:after {
//  cursor: pointer;
  content: "";
  position: absolute;
// left: 100px;
// top: 50px;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);

  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
// good for modern safari? OK on chrome
    background: -webkit-linear-gradient(right,rgba(255, 255, 255, 0.0) 0.0,rgba(255, 255, 255, 0.0) 0.77,rgba(255, 255, 255, 0.5) 0.92,rgba(255, 255, 255, 0.0) 1.0);
//  background: -webkit-gradient(linear, left top, right bottom, rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 1.0));
//  background: -moz-linear-gradient(right,rgba(255, 255, 255, 0.0) 0%,rgba(255, 255, 255, 0.0) 77%,rgba(255, 255, 255, 0.5) 92%,rgba(255, 255, 255, 0.0) 100%);
// try for old safari makes gradient doesn't clip oval doesn't animate	background: -webkit-gradient(
//		linear, left top, right bottom,
//		from(rgba(0,0,0, .13)),
//		to(rgba(255, 255, 255, .13)));
 -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

/* Hover state - trigger effect */

.gleem:focus:after {
  content: "";
  outline: none;
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 2s, 2s, 0.15s;
  transition-timing-function: ease;
  -webkit-transition-property: left, top, opacity;
  -webkit-transition-duration: 2s, 2s, 1s;
  -webkit-transition-timing-function: ease, ease, ease;
  -moz-transition-property: left, top, opacity;
  -moz-transition-duration: 2s, 2s, 0.15s;
  -moz-transition-timing-function: ease;
}

.gleem.doit:after {
  content: "";
  outline: none;
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 2s, 2s, 0.15s;
  transition-timing-function: ease;
  -webkit-transition-property: left, top, opacity;
  -webkit-transition-duration: 2s, 2s, 1s;
  -webkit-transition-timing-function: ease, ease, ease;
  -moz-transition-property: left, top, opacity;
  -moz-transition-duration: 2s, 2s, 0.15s;
  -moz-transition-timing-function: ease;
}

/* Active state */

/*
.gleem:active:after {
  opacity: 0;
}
*/

.gleem:active:after {
//  background: red;
  content: "";
  outline: none;
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 2s, 2s, 0.2s;
  transition-timing-function: ease;
  -webkit-transition-property: left, top, opacity;
  -webkit-transition-duration: 2s, 2s, 0.15s;
  -webkit-transition-timing-function: ease, ease, ease;
  -moz-transition-property: left, top, opacity;
  -moz-transition-duration: 2s, 2s, 0.15s;
  -moz-transition-timing-function: ease;
}

/* .gleem:after .glow:after {
  outline: none;
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 2s, 2s, 0.15s;
  transition-timing-function: ease;
  -webkit-transition-property: left, top, opacity;
  -webkit-transition-duration: 2s, 2s, 0.15s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: left, top, opacity;
  -moz-transition-duration: 2s, 2s, 0.15s;
  -moz-transition-timing-function: ease;
}
*/