@charset "UTF-8";
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O                 COLORS LIST                 O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */
.colorsList {
  padding: 45px 45px 0 45px;
  text-align: center; }
  .colorsList li {
    display: block;
    padding: 0 0 45px 0; }
    .colorsList li .imgHolder {
      background: #000;
      overflow: hidden;
      transition: all 0.2s ease-in-out; }
    .colorsList li .img {
      width: 100%;
      transition: all 0.2s ease-in-out;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto; }
      .colorsList li .img img {
        width: 100%;
        transition: all 0.2s ease-in-out; }
    .colorsList li a {
      display: block;
      width: 100%;
      overflow: hidden; }
      .colorsList li a:hover .imgHolder {
        border-radius: 15px; }
      .colorsList li a:hover .img {
        background-size: 110% auto;
        opacity: 0.9; }
        .colorsList li a:hover .img img {
          opacity: 0; }
    .colorsList li h3 {
      height: 68px;
      text-align: center;
      display: block;
      padding: 10px 0 0 0;
      font: 600 18px/118% "HelveticaNeue", sans-serif;
      color: #000;
      text-transform: uppercase; }

/* nunununununununununununununununununununununununununununununununununun */
/* .o° .o° .o° .o° .o° .o° Color list responsive °o. °o. °o. °o. °o. °o. */
/* nunununununununununununununununununununununununununununununununununun */
@media all and (max-width: 920px) {
  .colorsList {
    padding: 30px 15px 0 15px; }
    .colorsList li h3 {
      font-size: 16px;
      height: auto; } }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O                  COLOR PAGE                 O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */
.colorContent {
  padding: 0 45px 0 45px; }
  .colorContent::after {
    content: '';
    display: block;
    height: 1px;
    line-height: 0;
    font-size: 0; }
  .colorContent p {
    font: 400 19px/118% "HelveticaNeue", sans-serif;
    color: #000;
    padding: 0 0 40px 0; }
    .colorContent p strong {
      font-weight: 600; }
    .colorContent p a {
      font-weight: 600;
      color: #3090A6;
      text-decoration: underline; }

.colorRange {
  margin: 0 0 45px 0;
  position: relative; }
  .colorRange img {
    width: 100%;
    cursor: pointer; }
  .colorRange .colorRangeZoom {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 15px;
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);
    z-index: 10;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: opacity 0.3s ease-out, width 0.05s ease-out, height 0.05s ease-out; }
  .colorRange:hover .colorRangeZoom {
    opacity: 1;
    width: 120%;
    height: auto;
    transition: opacity 0.2s ease-in, width 0.5s ease-in, height 0.5s ease-in; }

/* nunununununununununununununununununununununununununununununununununun */
/* .o° .o° .o° .o° .o° .o° Color page responsive °o. °o. °o. °o. °o. °o. */
/* nunununununununununununununununununununununununununununununununununun */
@media all and (max-width: 1220px) {
  .colorContent p {
    font-size: 16px;
    padding: 0 0 30px 0; } }
@media all and (max-width: 920px) {
  .colorContent {
    padding: 0 15px; }
    .colorContent p {
      padding: 0 0 20px 0; } }

/*# sourceMappingURL=colors.css.map */