/* Custom select *//* Read the article: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/ *//* Demo: http://tympanus.net/Development/SelectInspiration/ *//* GitHub: https://github.com/codrops/SelectInspiration *//* Custom select skin: fullscreen color picker (adjusted for fullscreen form) */div.cs-skin-boxes {  background: transparent;  font-size: 0.65em;  font-weight: 700;  max-width: 300px;  z-index: 2000;  color: #fff;}@media screen and (max-width: 30em) {  div.cs-skin-boxes { font-size: 1em; }}.cs-skin-boxes >span {  border: 1px solid #fff;  width: 214px;  height: 214px;  font-size: 0.5em;  padding: 0 0 0 10px;  background: #46BE8A;}.overview .cs-skin-boxes >span {  font-size: inherit;}div.cs-skin-boxes:focus >span {  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);}.cs-skin-boxes >span::before {  content: '';  display: block;  padding-top: 187px;  margin-left: -10px;  box-shadow: 0 25px 0 #585B9C, inset 0 -10px #585B9C;}.cs-skin-boxes >span::after,.cs-skin-boxes.cs-active >span::after {  top: auto;  -webkit-transform: none;  transform: none;}.cs-skin-boxes .cs-options {  position: fixed;  width: 100%;  height: 100%;  top: 0;  left: 0;  overflow: auto;  background: #3b3f45;  font-size: 12px;  opacity: 0;  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;  transition: opacity 0.3s, visibility 0s 0.3s;}.cs-skin-boxes.cs-active .cs-options {  opacity: 1;  -webkit-transition: opacity 0.3s;  transition: opacity 0.3s;}.cs-skin-boxes .cs-options ul {  position: absolute;  width: 100%;  height: 100%;  padding: 10px;}.cs-skin-boxes .cs-options li {  width: 20%;  height: 25%;  float: left;  position: relative;  cursor: pointer;  border-radius: 14px;  overflow: hidden;  opacity: 0;  color: rgba(255,255,255,0.6);  border: 10px solid transparent;  background-clip: padding-box;  -webkit-transform: scale3d(0.8,0.8,1);  transform: scale3d(0.8,0.8,1);  box-shadow: inset 0 -6em 0 -2em #282b30, inset 0 -1px 1px #000;  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;  transition: transform 0.3s, opacity 0.3s;}@media screen and (max-width: 30em) {  .cs-skin-boxes .cs-options li { box-shadow: none; border-width: 3px; border-radius: 8px;}}.cs-skin-boxes.cs-active .cs-options li {  opacity: 1;  -webkit-transform: scale3d(1,1,1);  transform: scale3d(1,1,1);}.cs-skin-boxes.cs-active .cs-options li:nth-child(2) {  -webkit-transition-delay: 0.01s;  transition-delay: 0.01s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(3) {  -webkit-transition-delay: 0.02s;  transition-delay: 0.02s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(4) {  -webkit-transition-delay: 0.03s;  transition-delay: 0.03s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(5) {  -webkit-transition-delay: 0.04s;  transition-delay: 0.04s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(6) {  -webkit-transition-delay: 0.05s;  transition-delay: 0.05s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(7) {  -webkit-transition-delay: 0.06s;  transition-delay: 0.06s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(8) {  -webkit-transition-delay: 0.07s;  transition-delay: 0.07s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(9) {  -webkit-transition-delay: 0.08s;  transition-delay: 0.08s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(10) {  -webkit-transition-delay: 0.09s;  transition-delay: 0.09s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(11) {  -webkit-transition-delay: 0.1s;  transition-delay: 0.1s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(12) {  -webkit-transition-delay: 0.11s;  transition-delay: 0.11s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(13) {  -webkit-transition-delay: 0.12s;  transition-delay: 0.12s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(14) {  -webkit-transition-delay: 0.13s;  transition-delay: 0.13s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(15) {  -webkit-transition-delay: 0.14s;  transition-delay: 0.14s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(16) {  -webkit-transition-delay: 0.15s;  transition-delay: 0.15s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(17) {  -webkit-transition-delay: 0.16s;  transition-delay: 0.16s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(18) {  -webkit-transition-delay: 0.17s;  transition-delay: 0.17s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(19) {  -webkit-transition-delay: 0.18s;  transition-delay: 0.18s;}.cs-skin-boxes.cs-active .cs-options li:nth-child(20) {  -webkit-transition-delay: 0.19s;  transition-delay: 0.19s;}.cs-skin-boxes .cs-options li.cs-selected::after {  content: '\2714';  color: rgba(0,0,0,0.1);  position: absolute;  font-size: 2em;  top: 50%;  left: 50%;  -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-1em,0);  transform: translate3d(-50%,-50%,0) translate3d(0,-1em,0);}.cs-skin-boxes .cs-options li.cs-selected span::after {  content: '';}@media screen and (max-width: 30em) {  .cs-skin-boxes .cs-options li.cs-selected::after {    -webkit-transform: translate3d(-50%,-50%,0);    transform: translate3d(-50%,-50%,0);  }}.cs-skin-boxes .cs-options li.color-588c75 {  background-color: #588c75;}.cs-skin-boxes .cs-options li.color-b0c47f {  background-color: #b0c47f;}.cs-skin-boxes .cs-options li.color-f3e395 {  background-color: #f3e395;}.cs-skin-boxes .cs-options li.color-f3ae73 {  background-color: #f3ae73;}.cs-skin-boxes .cs-options li.color-da645a {  background-color: #da645a;}.cs-skin-boxes .cs-options li.color-79a38f {  background-color: #79a38f;}.cs-skin-boxes .cs-options li.color-c1d099 {  background-color: #c1d099;}.cs-skin-boxes .cs-options li.color-f5eaaa {  background-color: #f5eaaa;}.cs-skin-boxes .cs-options li.color-f5be8f {  background-color: #f5be8f;}.cs-skin-boxes .cs-options li.color-e1837b {  background-color: #e1837b;}.cs-skin-boxes .cs-options li.color-9bbaab {  background-color: #9bbaab;}.cs-skin-boxes .cs-options li.color-d1dcb2 {  background-color: #d1dcb2;}.cs-skin-boxes .cs-options li.color-f9eec0 {  background-color: #f9eec0;}.cs-skin-boxes .cs-options li.color-f7cda9 {  background-color: #f7cda9;}.cs-skin-boxes .cs-options li.color-e8a19b {  background-color: #e8a19b;}.cs-skin-boxes .cs-options li.color-bdd1c8 {  background-color: #bdd1c8;}.cs-skin-boxes .cs-options li.color-e1e7cd {  background-color: #e1e7cd;}.cs-skin-boxes .cs-options li.color-faf4d4 {  background-color: #faf4d4;}.cs-skin-boxes .cs-options li.color-fbdfc9 {  background-color: #fbdfc9;}.cs-skin-boxes .cs-options li.color-f1c1bd {  background-color: #f1c1bd;}.cs-skin-boxes .cs-options span {  position: absolute;  bottom: 0;  width: 100%;  line-height: 2em;  text-transform: uppercase;  letter-spacing: 1px;}@media screen and (max-width: 30em) {  .cs-skin-boxes .cs-options span { display: none; }}.cs-skin-boxes .cs-options li span:hover,.cs-skin-boxes li.cs-focus span,.cs-skin-boxes li.cs-selected span {  color: #fff;}