.pageout {
 width 100%;
 height: 1px;
 float:none;
 page-break-after:always;
}

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

#printbucklesdiv {
margin: auto;
text-align: center;
width: 800px;
}

#printribbondiv {
margin: auto;
text-align: center;
width: 250px;
height: 460px;
font-size: 50px;
line-height: 250px;
}

.buckleslidecount {
position: absolute;
top:269px;
left:0px;
background-color: white;
color: black;
text-align: center;
font-size: 20px;
height:20px;
width:334px;
padding:0; 
margin:0;
}

#collection {
display: none;
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;
//    border: 1px black solid;
    padding:0px 5px 0px 5px; //  10px;
    float: left;
//    display: inline-block;
// display:table-cell;
// display: block;
    width: 334px;
    height: 325px; // 300px;
//    white-space: normal;
    background-repeat: no-repeat;
}

.shiny:after {
display: none;
}


.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-grayscale-bright.png');
  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: #eeeeee; // black; // #9c8468; //#eee7b1; //#ffff00;
//    text-shadow: -2px -2px 3px #fff, 2px 2px 2px #000;
//    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
// -webkit-text-stroke: .5px white;
 -webkit-text-stroke: .8px #9c8468;
//  -webkit-text-fill-color: transparent;
//  text-fill-color: transparent;
  -webkit-text-fill-color: rgba(255,255,255, .5);
  text-fill-color:  rgba(255,255,255, .5);
}

.mytext {
display: none;
//  outline: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
//  -moz-text-fill-color: transparent;
//  -moz-background-clip: text;
  text-fill-color: transparent;
// -webkit-text-stroke: .5px white;
 -webkit-text-stroke: 1px white;
 -webkit-text-stroke: .5px #9c8468;
  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;
}
*/