html {
  height: 100%;
}
body {
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
 /* overflow: hidden; */
 overflow-x: hidden;
  overflow-y: visible;
  -webkit-transition: .3s;
  transition: .3s;
}
:before,
:after,
div {
	box-sizing: border-box;
}
.page-header {
	font-size: 1.2em;
	text-align: center;
	z-index: 99;
	margin-right: 1%;
	margin-left: 1%;
	padding: 22px;
}
.page-header h1 {
  display: inline-block;
  font-size: 20px;
  border-bottom: 1px solid #333;
  color: #ffffff;
  line-height: 1.1;
}
.page-content {
	padding: 0 1.0 em;
}
.controls {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
  z-index: 999;
}

.card {
  width: 96vmin;
  height: 64vmin;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  box-shadow: 0 0 0 80em rgba(34, 34, 34, 1.0), 0 10px 40px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}

.card .spacer {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: white;
  box-shadow: 0 1px 0 0 white;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card .image-container {
	position: relative;
	width: 100%;
	height: auto;
}

.card .image-container > img {
  position: relative;
  z-index: 99;
}

.card .image-container img {
  display: block;
  width: 100%;
}

.card .image-container .color-name {
	position: absolute;
	z-index: 999;
	color: #EDEADE;
	width: 100%;
	bottom: 8%;
	text-align: center;
	font-size: 14px;
}

.card .image-container .shading-container img {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.card .image-container .shading-container .gradient {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: -webkit-linear-gradient(left, #3c4144 0%, #535a5e 32%, rgba(105, 113, 119, 0.41) 50%, rgba(105, 113, 119, 0) 73%, rgba(105, 113, 119, 0.18) 100%);
  background: linear-gradient(to right, #3c4144 0%, #535a5e 32%, rgba(105, 113, 119, 0.41) 50%, rgba(105, 113, 119, 0) 73%, rgba(105, 113, 119, 0.18) 100%);
  opacity: .2;
}

.color-picker {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 2em 0;
	background: rgba(85, 85, 85, 0.2);
	background-image: url('leather.png');
}

.color-picker div[class^="swatch-"],
.color-picker div[class*=" swatch-"] {
  border-radius: 50%;
  width: 46px;
  height: 46px;
  margin: 4px;
  padding: 0;
  position: relative;
}

.color-picker div[class^="swatch-"]:hover li,
.color-picker div[class*=" swatch-"]:hover li {
  opacity: 1!important;
}
.color-picker div[class^="swatch-"] > ul,
.color-picker div[class*=" swatch-"] > ul {
  -webkit-transition: .2s;
  transition: .2s;
  z-index: 99;
  position: absolute;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  padding: 0;
  left: -4px;
  top: -112px;
}
.color-picker div[class^="swatch-"] > ul:hover,
.color-picker div[class*=" swatch-"] > ul:hover {
  z-index: 999;
}



.color-picker div[class^="swatch-"] > ul > li,
.color-picker div[class*=" swatch-"] > ul > li {
  height: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  margin: 4px;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.3);
  display: block;
  background: pink;
  opacity: 0;
  position: relative;
  cursor: pointer;
}
.color-picker div[class^="swatch-"] > ul > li:after,
.color-picker div[class*=" swatch-"] > ul > li:after {
  position: absolute;
  left: 60px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 13px;
  content: attr(data-tooltip);
  opacity: 0;
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
  white-space: nowrap;
  padding: 4px 10px 5px;
  -webkit-transition: .2s;
  transition: .2s;
  top: 14px;
  font-family: sans-serif;
  pointer-events: none;
}
.color-picker div[class^="swatch-"] > ul > li:hover,
.color-picker div[class*=" swatch-"] > ul > li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.color-picker div[class^="swatch-"] > ul > li:hover:after,
.color-picker div[class*=" swatch-"] > ul > li:hover:after {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.color-picker div[class^="swatch-"] > ul > li:active,
.color-picker div[class*=" swatch-"] > ul > li:active {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.color-picker div[class^="swatch-"] > ul > li.centered,
.color-picker div[class*=" swatch-"] > ul > li.centered {
  opacity: 1;
}
.color-picker div[class^="swatch-"] > ul > li.active,
.color-picker div[class*=" swatch-"] > ul > li.active {
  background-image: url('3d/active-black.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}


.color-picker .swatch-k .subswatch-1 {
  background: #fff;
}
.color-picker .swatch-k .subswatch-2 {
  background: #E8E8E8;
}
.color-picker .swatch-k .subswatch-3 {
  background: #000;
}
.color-picker .swatch-k .subswatch-3.active {
  background-image: url(3d/active-white.png) !important;
}

.color-picker .swatch-k .subswatch-4 {
	background: #D1CAB0;
}
.color-picker .swatch-k .subswatch-5 {
  background: #9C9F84;
}




.color-picker .swatch-or .subswatch-1 {
	background-color: #FFFDE7;
}
.color-picker .swatch-or .subswatch-2 {
  background: #FAFAD2;
}
.color-picker .swatch-or .subswatch-2.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-or .subswatch-3 {
  background: #fbf7ce;
}
.color-picker .swatch-or .subswatch-4 {
	background: #f6f1bf;
}
.color-picker .swatch-or .subswatch-5 {
  background: #fff8b6;
}




.color-picker .swatch-ga .subswatch-1 {
  background: #fdfae3;
}
.color-picker .swatch-ga .subswatch-1.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-ga .subswatch-2 {
  background: #fdf1cf;
}
.color-picker .swatch-ga .subswatch-2.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-ga .subswatch-3 {
  background: #f7e9c1;
}
.color-picker .swatch-ga .subswatch-4 {
  background: #fce9b6;
}
.color-picker .swatch-ga .subswatch-5 {
  background: #f7df9b;
}



.color-picker .swatch-ve .subswatch-1 {
  background: #FCF3E8;
}
.color-picker .swatch-ve .subswatch-1.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-ve .subswatch-2 {
  background: #FBEFE0;
}
.color-picker .swatch-ve .subswatch-2.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-ve .subswatch-3 {
  background: #F9E7D1;
}
.color-picker .swatch-ve .subswatch-4 {
  background: #f3deb8;
}
.color-picker .swatch-ve .subswatch-5 {
  background: #f6d9b5;
}



.color-picker .swatch-al .subswatch-1 {
  background: #d6dff6;
}
.color-picker .swatch-al .subswatch-1.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-al .subswatch-2 {
  background: #829de4;
}
.color-picker .swatch-al .subswatch-2.active {
  background-image: url(3d/active-black.png) !important;
}
.color-picker .swatch-al .subswatch-3 {
  background: #2e5bd2;
}
.color-picker .swatch-al .subswatch-4 {
  background: #1c377e;
}
.color-picker .swatch-al .subswatch-5 {
  background: #09122b;
}



.color-picker .swatch-vi .subswatch-1 {
  background: #666633;
}
.color-picker .swatch-vi .subswatch-1.active {
  background-image: url(3d/active-white.png) !important;
}
.color-picker .swatch-vi .subswatch-2 {
  background: #003333;
}
.color-picker .swatch-vi .subswatch-2.active {
  background-image: url(3d/active-white.png) !important;
}
.color-picker .swatch-vi .subswatch-3 {
  background: #3399FF;
}
.color-picker .swatch-vi .subswatch-4 {
  background: #4d1900;
}
.color-picker .swatch-vi .subswatch-4.active {
  background-image: url(3d/active-white.png) !important;
}
.color-picker .swatch-vi .subswatch-5 {
  background: #990000;
}
.color-picker .swatch-vi .subswatch-5.active {
  background-image: url(3d/active-white.png) !important;
}



.color-picker .main-swatches {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  margin: 0 auto;
}
.ripple {
  position: absolute;
  left: -300em;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
          transform: translateX(-50%) translateY(-50%) scale(0.1);
  border-radius: 50%;
  width: 400px;
  height: 400px;
  z-index: -1;
}
.ripple.scaling {
  -webkit-animation: scale 1.4s;
          animation: scale 1.4s;
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
            transform: translateX(-50%) translateY(-50%) scale(0.1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(7);
            transform: translateX(-50%) translateY(-50%) scale(7);
  }
}
@keyframes scale {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
            transform: translateX(-50%) translateY(-50%) scale(0.1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(7);
            transform: translateX(-50%) translateY(-50%) scale(7);
  }
}
.hidden {
	opacity: 0;
	pointer-events: none;
}
.page-header2 {
	margin: 8px;
	font-size: 1.125em;
	text-align: center;
	z-index: 99;
	color: #DFE1C8;
	padding: 20px;
	text-align: left;
}
.page-header3 {
	margin: 8px;
	font-size: 20px;
    font-style: italic;
   	color: #DFE1C8;
    z-index: 99;
	padding: 20px;

}