<!-- svg code -->
<svg style="display: none;">
  <g id="logo-svg">
    <g id="light">
      <path id="on-off" style="fill:none;" d="M147.554,8.535c-0.224,0-0.445,0.014-0.671,0.016c-0.224-0.002-0.446-0.016-0.671-0.016
        c-33.582,0-60.803,26.096-60.803,58.287c0,20.183,6.758,37.54,24.279,51.003c6.01,4.622,4.754,32.108,6.714,33.772
        c1.304,1.11,59.53,1.235,60.965,0c1.947-1.673,0.7-29.15,6.713-33.772c17.518-13.463,24.275-30.82,24.275-51.003
        C208.355,34.631,181.134,8.535,147.554,8.535z"/>
      <g id="line">
        <path style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="M148.259,161.304h25.862
           M130.785,161.304h8.807 M152.033,174.98h19.711 M143.176,174.98h1.169 M191.496,49.184c-7.661-16.767-24.581-28.417-44.22-28.417
           M195.635,64.575c-0.119-1.223-0.284-2.434-0.492-3.628"/>
      </g>
      <g id="base">
        <path style="fill:none;stroke:#FFFFFF;stroke-miterlimit:10;" d="M162.031,190.962h-30.31c-2.595,0-4.699-3.387-4.699-7.564
          h39.709C166.731,187.575,164.627,190.962,162.031,190.962z M177.614,174.984c0-2.598-1.953-4.7-4.359-4.7H120.5
          c-2.408,0-4.359,2.103-4.359,4.7c0,2.594,1.951,4.696,4.359,4.696h52.754C175.661,179.681,177.614,177.578,177.614,174.984z
           M180.011,161.306c0-2.597-2.105-4.7-4.699-4.7h-56.869c-2.596,0-4.699,2.104-4.699,4.7c0,2.595,2.103,4.697,4.699,4.697h56.869
          C177.906,166.003,180.011,163.9,180.011,161.306z M147.554,8.535c-0.224,0-0.445,0.014-0.671,0.016
          c-0.224-0.002-0.446-0.016-0.671-0.016c-33.582,0-60.803,26.096-60.803,58.287c0,20.183,6.758,37.54,24.279,51.003
          c6.01,4.622,4.754,32.108,6.714,33.772c1.304,1.11,59.53,1.235,60.965,0c1.947-1.673,0.7-29.15,6.713-33.772
          c17.518-13.463,24.275-30.82,24.275-51.003C208.355,34.631,181.134,8.535,147.554,8.535z"/>
      </g>
    </g>
    <g id="trebol">
      <path style="fill:#95B634;" d="M143.207,148.052c0.33-1.933,3.691-12.021,4.037-39.265c0.272-21.457-3.261-33.398-2.919-34.598
        c1.362,1.152,5.262,12.211,6.332,37.182c1.017,23.727-1.47,35.389-1.819,37.064C148.003,152.44,142.73,150.846,143.207,148.052z
         M117.252,85.896c10.43-8.502,24.253-11.782,24.253-11.782s3.895-1.041-2.273-3.208c-8.87-3.115-20.47-2.215-29.503,3.426
        c-9.031,5.637-7.865,20.056-1.884,19.262c1.5,2.051-2.873,9.02,10.01,10.046c10.437,0.833,26.5-20.884,25.099-29.135
        C142.954,74.506,130.826,76.976,117.252,85.896z M145.928,74.162c1.428,7.458,25.88,24.315,35.594,20.934
        c11.995-4.175,5.473-9.765,6.223-12.102c5.992-0.721,2.28-14.818-8.255-17.98c-10.539-3.163-21.951-1.153-29.401,4.027
        c-5.182,3.603-4.078,3.931-4.078,3.931s17.311-0.578,30.146,4.98C160.172,72.771,145.928,74.162,145.928,74.162z M145.4,71.164
        c8.437-2.869,17.081-20.129,9.508-28.588c-7.102-7.931-13.237-3.349-14.272-1.412c-3.779-3.534-15.915,1.992-16.095,10.107
        c-0.182,8.117,3.479,13.76,10.982,17.704c5.219,2.744,8.243,2.446,8.243,2.446s3.396-8.832-3.45-21.147
        C146.847,58.316,145.4,71.164,145.4,71.164z"/>
    </g>
    <g id="text">
      <path style="fill:#FFFFFF;" d="M7.957,140.303h14.137v24.908h10.088c1.326,0,2.315-0.227,2.966-0.681
        c0.651-0.454,0.977-1.135,0.977-2.043c0-1.86-1.126-3.795-3.375-5.806c-2.25-2.011-5.683-4.151-10.301-6.422
        c4.073-2.4,6.998-4.351,8.773-5.854c1.777-1.502,2.665-2.762,2.665-3.778c0-0.799-0.326-1.389-0.977-1.768
        c-0.651-0.378-1.688-0.567-3.108-0.567H5.435L8.703,127.2h23.8c5.682,0,9.963,0.92,12.841,2.757
        c2.877,1.838,4.316,4.573,4.316,8.206c0,2.161-0.557,4.173-1.67,6.031c-1.114,1.86-2.865,3.687-5.256,5.481
        c3.055,1.946,5.386,4.142,6.997,6.584c1.61,2.443,2.416,4.983,2.416,7.622c0,2.292-0.509,4.308-1.528,6.049
        c-1.017,1.74-2.521,3.15-4.511,4.231c-1.492,0.822-3.434,1.406-5.826,1.752s-6.228,0.519-11.508,0.519H7.957V140.303z
         M81.096,176.433c-3.647,0-6.962-0.491-9.946-1.476c-2.984-0.984-5.565-2.438-7.744-4.362c-2.416-2.141-4.269-4.671-5.559-7.59
        c-1.291-2.918-1.937-6.032-1.937-9.34c0-5.06,1.511-8.752,4.53-11.075c3.019-2.324,7.797-3.486,14.332-3.486
        c5.992,0,10.313,0.799,12.966,2.4c2.651,1.6,3.978,4.183,3.978,7.75c0,3.093-1.167,6.011-3.5,8.758
        c-2.333,2.745-5.867,5.362-10.603,7.848c0.64,0.26,1.355,0.449,2.149,0.568c0.793,0.119,1.723,0.178,2.789,0.178h7.032
        l-2.984,9.827H81.096z M69.16,159.017c3.007-1.427,5.322-2.859,6.945-4.297c1.622-1.438,2.434-2.773,2.434-4.006
        c0-0.735-0.355-1.302-1.066-1.702s-1.717-0.601-3.019-0.601c-1.942,0-3.481,0.558-4.618,1.671
        c-1.138,1.113-1.705,2.632-1.705,4.556c0,0.735,0.082,1.454,0.248,2.157C68.544,157.498,68.805,158.238,69.16,159.017z
         M237.485,176.433c-5.731,0-10.64-0.604-14.725-1.815c-4.084-1.212-7.572-3.081-10.461-5.611c-3.434-3.049-6.05-6.487-7.85-10.313
        c-1.8-3.827-2.7-7.881-2.7-12.162c0-3.287,0.58-6.212,1.74-8.773c1.161-2.562,2.865-4.708,5.115-6.437
        c1.919-1.449,4.192-2.498,6.82-3.147c2.63-0.648,6.099-0.973,10.408-0.973h17.121l3.41,11.254h-18.72
        c-4.12,0-7.063,0.703-8.827,2.108c-1.765,1.405-2.646,3.729-2.646,6.973c0,4.8,1.534,8.789,4.6,11.968
        c3.067,3.178,7.158,5.017,12.273,5.514v-11.352h-5.755v-10.897h19.716v33.665H237.485z M255.956,139.492h13.177v1.881
        c0.854-0.756,1.913-1.324,3.18-1.703c1.267-0.377,2.729-0.566,4.388-0.566h0.781v10.281c-1.942,0.043-3.606,0.377-4.991,1.005
        c-1.385,0.627-2.504,1.557-3.357,2.789v23.254h-13.177V139.492z M306.36,176.433c-3.647,0-6.963-0.491-9.946-1.476
        s-5.565-2.438-7.743-4.362c-2.417-2.141-4.269-4.671-5.559-7.59c-1.292-2.918-1.937-6.032-1.937-9.34
        c0-5.06,1.51-8.752,4.528-11.075c3.02-2.324,7.798-3.486,14.333-3.486c5.992,0,10.313,0.799,12.967,2.4
        c2.651,1.6,3.978,4.183,3.978,7.75c0,3.093-1.167,6.011-3.499,8.758c-2.333,2.745-5.867,5.362-10.604,7.848
        c0.64,0.26,1.356,0.449,2.148,0.568c0.794,0.119,1.724,0.178,2.79,0.178h7.032l-2.984,9.827H306.36z M294.426,159.017
        c3.006-1.427,5.321-2.859,6.943-4.297s2.434-2.773,2.434-4.006c0-0.735-0.354-1.302-1.065-1.702s-1.718-0.601-3.019-0.601
        c-1.942,0-3.481,0.558-4.617,1.671c-1.139,1.113-1.706,2.632-1.706,4.556c0,0.735,0.082,1.454,0.249,2.157
        C293.809,157.498,294.069,158.238,294.426,159.017z M344.759,176.433c-3.647,0-6.963-0.491-9.946-1.476s-5.564-2.438-7.742-4.362
        c-2.417-2.141-4.27-4.671-5.56-7.59c-1.291-2.918-1.938-6.032-1.938-9.34c0-5.06,1.511-8.752,4.53-11.075
        c3.019-2.324,7.797-3.486,14.332-3.486c5.992,0,10.314,0.799,12.967,2.4c2.65,1.6,3.978,4.183,3.978,7.75
        c0,3.093-1.167,6.011-3.499,8.758c-2.333,2.745-5.867,5.362-10.604,7.848c0.64,0.26,1.355,0.449,2.148,0.568
        c0.794,0.119,1.724,0.178,2.79,0.178h7.032l-2.984,9.827H344.759z M332.823,159.017c3.008-1.427,5.322-2.859,6.944-4.297
        s2.434-2.773,2.434-4.006c0-0.735-0.354-1.302-1.065-1.702s-1.717-0.601-3.019-0.601c-1.942,0-3.481,0.558-4.618,1.671
        c-1.138,1.113-1.705,2.632-1.705,4.556c0,0.735,0.083,1.454,0.248,2.157S332.468,158.238,332.823,159.017z M360.389,139.492h18.755
        c5.707,0,9.69,1.061,11.953,3.179c2.261,2.119,3.392,5.87,3.392,11.254v22.508h-12.93v-20.789c0-2.832-0.355-4.557-1.064-5.173
        c-0.711-0.616-2.039-0.924-3.979-0.924h-3.198v26.886h-12.929V139.492z"/>
    </g>
  </g>
  <!-- symbols -->
  <symbol  id="clouds-back" viewBox="-360.318 -89.013 720.637 178.025">
    <path style="fill:#EDD2B6;" d="M-116.231-54.054c0-19.309-16.434-34.959-36.707-34.959h-170.675v0.044
      c-20.425,0.916-36.706,17.76-36.706,38.41c0,21.238,17.217,38.455,38.456,38.455c7.508,0,14.511-2.162,20.431-5.882
      c2.832,32.403,30.018,57.828,63.158,57.828c33.516,0,60.941-26.007,63.241-58.938h22.096
      C-132.665-19.096-116.231-34.748-116.231-54.054z M184.409,21.342c0-13.913,11.844-25.193,26.454-25.193h123.002v0.032
      c14.72,0.659,26.453,12.799,26.453,27.681c0,15.307-12.407,27.714-27.713,27.714c-5.411,0-10.459-1.557-14.726-4.24
      c-2.04,23.353-21.632,41.676-45.517,41.676c-24.155,0-43.919-18.744-45.576-42.477h-15.924
      C196.253,46.536,184.409,35.257,184.409,21.342z"/>
  </symbol>
  <symbol  id="clouds-front" viewBox="-194.985 -131.474 389.969 262.948">
    <path style="fill:#EDD2B6;" d="M194.984-110.297c0,11.661-9.453,21.113-21.114,21.113v0.014h-6.325
      c0.29,2.146,0.451,4.332,0.451,6.557c0,26.984-21.875,48.858-48.859,48.858c-26.985,0-48.86-21.875-48.86-48.858
      c0-1.565,0.081-3.111,0.227-4.638c-4.287,12.737-16.316,21.915-30.498,21.915c-14.8,0-27.259-9.996-31.013-23.601
      c-4.331,3.928-10.079,6.324-16.388,6.324c-13.475,0-24.398-10.924-24.398-24.399s10.924-24.399,24.398-24.399H116.66
      c0.82-0.04,1.646-0.062,2.477-0.062s1.655,0.022,2.476,0.062h52.258l0,0C185.531-131.412,194.984-121.959,194.984-110.297z
       M-181.384,68.57L-181.384,68.57h33.66c0.529-0.026,1.061-0.041,1.595-0.041s1.067,0.015,1.595,0.041h79.907
      c8.68,0,15.717,7.036,15.717,15.715c0,8.68-7.037,15.717-15.717,15.717c-4.063,0-7.766-1.542-10.557-4.073
      c-2.417,8.764-10.441,15.202-19.975,15.202c-9.136,0-16.883-5.912-19.645-14.117c0.093,0.984,0.145,1.979,0.145,2.988
      c0,17.381-14.09,31.471-31.471,31.471s-31.472-14.09-31.472-31.471c0-1.433,0.104-2.842,0.29-4.224h-4.073V95.77
      c-7.512,0-13.601-6.088-13.601-13.6S-188.896,68.57-181.384,68.57z"/>
  </symbol>
  <symbol  id="mounts" viewBox="-268.295 -157.145 536.59 314.289">
    <path style="fill:#833137;" d="M-28.28-157.145h-120.223h-119.792l119.792,257.61l0.214,0.461L-28.28-157.145z M122.144,157.144
      l-0.26-0.561L-24.004-157.145h145.888h146.411L122.144,157.144z"/>
    <path style="fill:#9F4544;" d="M-28.28-157.145h-120.223v257.61l0.214,0.461L-28.28-157.145z M122.144,157.144l-0.26-0.561
      v-313.728h146.411L122.144,157.144z"/>
    <path style="fill:#9A5049;" d="M-99.106-4.837l-27.856,13.098l-21.325-25.494l-0.215,0.215l-25.418,25.279l-24.408-14.945
      l49.826,107.15l0.214,0.461L-99.106-4.837z M122.144,157.144l-0.26-0.561L61.203,26.091l29.725,18.201l30.956-30.787l0.262-0.26
      l25.97,31.046l33.925-15.951L122.144,157.144z"/>
    <path style="fill:#AF6F56;" d="M-99.106-4.837l-27.856,13.098l-21.325-25.494l-0.215,0.215v117.484l0.214,0.461L-99.106-4.837z
       M122.144,157.144l-0.26-0.561V13.505l0.262-0.26l25.97,31.046l33.925-15.951L122.144,157.144z"/>
  </symbol>
  <symbol  id="small-hills" viewBox="-280.679 -48.945 561.357 97.89">
    <path style="fill:#230000;" d="M-117.896-48.945h-81.392h-81.391C-261.541-19.616-246.262,3.768-245.71,4.5
      c10.59,14.089,27.441,23.203,46.422,23.203c18.981,0,35.833-9.114,46.423-23.203C-152.313,3.768-137.034-19.616-117.896-48.945z
       M245.71,4.5c-10.59,14.089-27.441,23.203-46.423,23.203S163.455,18.589,152.864,4.5c-0.551-0.732-15.832-24.116-34.969-53.445
      h81.392h81.392C261.542-19.616,246.261,3.768,245.71,4.5z M37.205,25.743C26.614,39.831,9.764,48.945-9.218,48.945
      S-45.05,39.831-55.64,25.743c-0.68-0.904-23.747-36.232-48.826-74.688h95.248h95.249C60.949-10.489,37.885,24.839,37.205,25.743z"
      />
    <path style="fill:#3F0B14;" d="M-199.288-48.945v76.648c18.981,0,35.833-9.114,46.423-23.203
      c0.552-0.732,15.831-24.116,34.969-53.445H-199.288z M280.679-48.945C261.542-19.616,246.261,3.768,245.71,4.5
      c-10.59,14.089-27.441,23.203-46.423,23.203v-76.648H280.679z M86.031-48.945C60.949-10.489,37.885,24.839,37.205,25.743
      C26.614,39.831,9.764,48.945-9.218,48.945v-97.891H86.031z"/>
  </symbol>
  <symbol  id="sun" viewBox="-228.044 -190.563 456.088 381.126">
    <path style="fill:#E1B284;" d="M-163.23-37.481c0,90.15,73.081,163.23,163.23,163.23c90.15,0,163.23-73.081,163.23-163.23
      c0-70.185-44.301-130.021-106.464-153.082h112.258c36.675,40.47,59.02,94.165,59.02,153.081
      c0,125.947-102.097,228.045-228.043,228.045c-125.945,0-228.045-102.098-228.045-228.045c0-58.916,22.346-112.611,59.021-153.081
      h112.258C-118.929-167.502-163.23-107.666-163.23-37.481z"/>
    <path style="fill:#DAA071;" d="M163.23-37.481c0,90.15-73.08,163.23-163.23,163.23c-90.149,0-163.23-73.081-163.23-163.23
      c0-70.185,44.301-130.021,106.464-153.082H56.767C118.93-167.502,163.23-107.666,163.23-37.481z M0-132.868
      c-52.68,0-95.386,42.708-95.386,95.387c0,52.681,42.706,95.386,95.386,95.386c52.68,0,95.385-42.705,95.385-95.386
      C95.385-90.16,52.68-132.868,0-132.868z"/>
    <path style="fill:#CD7746;" d="M0,57.904c-52.68,0-95.386-42.705-95.386-95.386c0-52.679,42.706-95.387,95.386-95.387
      c52.68,0,95.385,42.708,95.385,95.387C95.385,15.199,52.68,57.904,0,57.904z"/>
  </symbol>
  <symbol  id="trees" viewBox="-11.267 -16.899 22.532 33.798">
    <polygon style="fill:#772A29;" points="11.266,-9.993 6.415,-2.135 9.388,-2.135 4.894,5.148 7.251,5.148 0,16.898 -7.252,5.148 
      -4.895,5.148 -9.388,-2.135 -6.415,-2.135 -11.267,-9.993 -2.168,-9.993 -2.168,-16.899 2.167,-16.899 2.167,-9.993   "/>
    <polygon style="fill:#BA6C3E;" points="6.415,-2.135 9.388,-2.135 4.894,5.148 7.251,5.148 0,16.898 0,-9.993 11.266,-9.993  "/>
  </symbol>
</svg>

<!-- main body -->
<div class="site-header__top-menu">
    <div class="customized-select">
      <span class="[ select__placeholder ]  [ js-select ]">Background</span>
        <ul class="select__list">
          <li class="[ select__list__item ]  is-active  [ js-color ]" data-highlight="one" data-color="color--pink">pink light</li>
          <li class="[ select__list__item ]  [ js-color ]" data-highlight="two" data-color="color--green">green light</li>
          <li class="[ select__list__item ]  [ js-color ]" data-highlight="three" data-color="color--yellow">green yellow</li>
        </ul>
      <input type="hidden" />
    </div>
  </div>
<div class="site-header">
  <div class="site-header__logo">
    <svg class="svg-scalable" version="1.1" id="svg-animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200" style="enable-background:new 0 0 400 200;" xml:space="preserve">
      <use class="base" xlink:href="#base" x="0" y="0"/>
      <use class="on-off" xlink:href="#on-off" x="0" y="0"/>
      <use class="line" xlink:href="#line" x="0" y="0"/>
      <use class="trebol" xlink:href="#trebol" x="0" y="0"/>
      <use class="text" xlink:href="#text" x="0" y="0"/>
    </svg>
  </div>
  <div class="menu-bar-mobile">
    <div class="[ nav-icon ]  [ js-menu-nav ]">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="menu-bar-mobile__logo">
      <svg class="svg-scalable" id="svg-animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
        <use class="base" xlink:href="#base" x="-46" y="0"/>
        <use class="on-off" xlink:href="#on-off" x="-46" y="0"/>
        <use class="line" xlink:href="#line" x="-46" y="0"/>
        <use class="trebol" xlink:href="#trebol" x="-46" y="0"/>
      </svg>
    </div>
  </div>
  <div class="menu-bar">
    <ul class="[ nav-list ] [ nav-list--hide ]  [ display--row  display--col ]">
        <li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
          <span class="nav-link__text">item1</span>
          <ul class="nav-list__item--subnav">
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
          </ul>
        </li>
        <li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
          <span class="nav-link__text">item2</span>
          <ul class="nav-list__item--subnav">
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
          </ul>
        </li>
        <li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
          <span class="nav-link__text">item3</span>
          <ul class="nav-list__item--subnav">
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item3</span></a></li>
          </ul>
        </li>
        <li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
          <span class="nav-link__text">item4</span>
          <ul class="nav-list__item--subnav">
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item3</span></a></li>
            <li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item4</span></a></li>
          </ul>
        </li> 
        <li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
          <span class="nav-link__text">codepen</span>
          <ul class="nav-list__item--subnav">
            <li class="subnav__item"><a class="nav-links" href="https://codepen.io/druArt/" target="_blank">
                <span class="nav-link__text">profile</span>
              </a>
            </li>
            <li class="subnav__item"><a class="nav-links" href="https://codepen.io/druArt/pen/VbVjxx" target="_blank">
                <span class="nav-link__text">simple-bar</span>
              </a>
            </li>
            <li class="subnav__item"><a class="nav-links" href="http://codepen.io/druArt/pen/vxyKdY" target="_blank">
                <span class="nav-link__text">slide-bar</span>
              </a>
            </li>
            <li class="subnav__item"><a class="nav-links" href=""><span class="nav-link__text">item4</span></a></li>
            <li class="subnav__item"><a class="nav-links" href=""><span class="nav-link__text">item5</span></a></li>  
          </ul>
        </li>
        <li class="[ nav-list__item ]  [ align-to--right ]  [ border--dark-b  border--light-t ]">
          <span class="nav-link__text">login</span>
        </li>
      </ul>
  </div>
</div>

<section class="section">
  <div class="section__header">
    <h1 class="section__header__title  font-effect-3d-float">Climate</h1>
    <h1 class="section__header__title  font-effect-3d-float"><span class="first-letter">C</span><span>h</span><span>a</span><span>n</span><span>g</span><span>e</span></h1> 
  </div>
  <div class="section__body">
    <div class="wrap-planet">
      <div class="planet">
        <div class="planet-base">
          <div class="planet-base__shadow"></div>
        </div>
        <div class="spots">
          <span class="spot spot--one"></span>
          <span class="spot spot--two"></span>
          <span class="spot spot--three"></span>
          <span class="spot spot--four"></span>
          <span class="spot spot--five"></span>
          <span class="spot spot--six"></span>
          <span class="spot spot--seven"></span>
          <span class="spot spot--eigth"></span>
        </div>
        <div class="card  card-flip">
          <div class="card__content  card__content--flip">
            <div class="card-flip__panel  card-flip__panel--front">
              <h1>don't make the planet looks like a Cheese! put some green on.</h1>
            </div>
            <div class="card-flip__panel  card-flip__panel--back">
              <h1>it's better!</h1>
              <div class="wrap-tree">
                <div class="tree">
                  <div class="tree__stamb"></div>
                  <div class="tree__branch tree__branch--1"></div>
                  <div class="tree__branch tree__branch--2"></div>
                  <div class="tree__branch tree__branch--3"></div>
                  <div class="tree__branch tree__branch--4"></div>
                </div>
                <div class="tree">
                  <div class="tree__stamb"></div>
                  <div class="tree__branch tree__branch--1"></div>
                  <div class="tree__branch tree__branch--2"></div>
                  <div class="tree__branch tree__branch--3"></div>
                  <div class="tree__branch tree__branch--4"></div>
                </div>
                <div class="background">
                  <svg class="svg-scalable" version="1.1" id="background-svg-druart.2018" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;"
                   xml:space="preserve">  
                    <use xlink:href="#sun"  width="456.088" height="381.126" x="-228.044" y="-190.563" transform="matrix(1.2764 0 0 -1.2764 408.9678 355.8848)" style="overflow:visible;"/>
                    <use xlink:href="#clouds-back"  width="720.637" height="178.025" x="-360.318" y="-89.013" transform="matrix(1 0 0 -1 404.79 209.6367)" style="overflow:visible;"/>
                    <use xlink:href="#mounts"  width="536.59" height="314.289" x="-268.295" y="-157.145" transform="matrix(1.2764 0 0 -1.2764 401.3838 352.0635)" style="overflow:visible;"/>
                    <use xlink:href="#small-hills"  width="561.357" height="97.89" x="-280.679" y="-48.945" transform="matrix(1.2764 0 0 -1.2764 393.7275 490.1719)" style="overflow:visible;"/>
                    <line style="fill:none;stroke:#230000;stroke-width:60;stroke-linecap:round;stroke-miterlimit:10;" x1="31.874" y1="568.662" x2="767.897" y2="568.662"/>
                    <use xlink:href="#clouds-front"  width="389.969" height="262.948" x="-194.985" y="-131.474" transform="matrix(1.2764 0 0 -1.2764 520.9424 219.7905)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.2764 0 0 -1.2764 640.5947 529.7734)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.448 0 0 -2.448 269.5283 517.6592)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.2962 0 0 -2.2962 426.2119 520.3477)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.8297 0 0 -1.8297 506.4404 520.4082)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.7513 0 0 -2.7513 45.2017 525.3652)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.8297 0 0 -1.8297 180.0029 520.4102)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 329.7656 529.7734)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 549.9863 529.7734)" style="overflow:visible;"/>
                    <use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 690.7686 534.0117)" style="overflow:visible;"/>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

/**
 *color
 */
$site-header-background-color: #222222;
$select-palceholder-background-color: #fff;
$select-palceholder-hover-background-color: #fdfdfd;
$body-background-color: #af425c;
$menu-bar-mobile-logo-background-color: #333;
$header-top-menu-background-color: #fff;
/**
 *@keyframes hidden color
 */
$keyframe-hidden-color: #fff;
//@keyframes lightOn color
$keyframes-lightOn-color: #e6fdc6;
/**
 *sizing
 */
$customized-selector-width: 220px;
$basis-spacing: 10px;
$half-spacing: $basis-spacing / 2;
$double-spacing: $basis-spacing * 2;
$body-height: 1100px;
$mobile-logo-width: 76px;
$mobile-logo-height: $mobile-logo-width;
$site-header-logo-fixed-width: 100px;
$site-header-logo-fixed-height: 60px;
/**
 *media query
 */
$screen-device--lg: 1000px;
$screen-device--md: 720px;
/**
 *typography
 */
$ff-openSans: 'Open Sans', sans-serif;
$ff-rommetto: 'Rammetto One', cursive;
$ff-montserrat: 'Montserrat', sans-serif;
$ff-oswald: 'Oswald', sans-serif;

/**
 *debug mode
 */
//svg {outline: 1px solid blue;}
//.site-header__logo {outline: 1px dotted red;}
//#be, #green {outline: 1px dotted green;}

/**external css
*https://codepen.io/druArt/pen/VbVjxx
*https://codepen.io/druArt/pen/YVMQNX
*/

/**
 *reset external css - https://codepen.io/druArt/pen/YVMQNX
 */
.customized-select,
.select__placeholder {
  width: $customized-selector-width;
  background-color: $select-palceholder-background-color;
}

.select__placeholder {
  
  &:hover {
    background-color: $select-palceholder-hover-background-color;
  } 
}

.select__placeholder,
.select__list {
  margin-right: 0;
  border-radius: 0;
}

.customized-select {
  margin-right: 0;
  font-family: $ff-openSans;
  font-weight: lighter;
  font-size: 1.2em;
}

.select__list {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.select__list__item {
  &:hover,
  &.is-active {
    border-radius: 2px;
    color: #fff;
  }
  
  &:hover:nth-of-type(1),
  &:nth-of-type(1).is-active {
    width: 110%;
    margin-left: -5%;
    background-color: $body-background-color;
  }
  
  &:hover:nth-of-type(2),
  &:nth-of-type(2).is-active {
    width: 110%;
    margin-left: -5%;
    background-color: #7caf4b;
  }
  
  &:hover:nth-of-type(3),
  &:nth-of-type(3).is-active {
    width: 110%;
    margin-left: -5%;
    background-color: #c5cb45;
  }
}

/**
 *reset external css - https://codepen.io/druArt/pen/VbVjxx
 */
.nav-list__item {
   
   &--subnav {
     display: block;
   }
  
  .nav-link__text {
    font-family: $ff-montserrat;
    font-weight: bold;
  }
}

.nav-list__item--subnav { 
  width: 100%;
  
  @media screen and (max-width: $screen-device--lg - 1) {
     position: static;
  }
}

.subnav__item {
  padding: 0;
  
  @media screen and (max-width: $screen-device--lg - 1) {
    
    &:first-of-type {
      margin-top: 10px;
    }
  
    &:last-of-type {
      margin-bottom: -10px;
    }
  }
  
  &.is-open {
    padding-bottom: 0;
    transition: all 0.8s ease;
  }
}

/**
 *reset external css - https://codepen.io/druArt/pen/eVOBgb
 */
.wrap-tree {
    background-color: transparent;
  z-index: -1;
}

.tree {
  &:nth-of-type(1) {
      @include tree(37px, 120px, 0, 14px, 18px, 140px, 8px, darken(#3b8e42, 5%), darken(#8e763b, 5%));
      animation: none;
      z-index: 10;
  }
  
  &:nth-of-type(2) {
      @include tree(33px, 180px, 0, 14px, 16px, 140px, 8px, #3b8e42, #8e763b);
      animation: none;
      z-index: 10;
  }
  
  .card-flip:hover & {
    animation: growup 3.3s 0s linear;
  }
  
}

/**
 *new css elements
 */
.nav-links {
  position: relative;
  display: block;
  padding: 0.8rem;
  padding-left: 0;
  padding-right: 0;
  color: #999;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  letter-spacing: 0.8px;
  z-index: 1;
    overflow: hidden;
  transition: color 300ms;
  cursor: pointer;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #999;
    z-index: -1;
    transition: width 300ms;
    opacity: 0.1;
  }
  
  &:hover {
    color: #fbfbfb;
  }
  
  &:hover::before {
    width: 100%;
  }
}


/**
 *basis
 */
body {
  height: $body-height;
  background-color: $body-background-color;
  -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  margin-top: 55px;
}

.color {
  &--green {
    background-color: #7caf4b;
  }
  
  &--yellow {
    background-color: #c5cb45;
  }
}

.svg-scalable {
  width: 100%;
  height: 100%;
}


/**
*fixed header
*/
.site-header {
  position: relative;
  width: 100%;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: $menu-bar-mobile-logo-background-color;
  transition: background 0.6s ease-in-out;
  
  @media screen and (max-width: $screen-device--lg - 1) {
    background-color: transparent !important;
  }
  
  &.is-fixed {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    animation: fadeInBottom 1s ease-in-out;
    z-index: 999;
    
    @media screen and (min-width: $screen-device--lg) {
      top: 0;
    }

    .site-header__logo {
      width: $site-header-logo-fixed-width;
      height: $site-header-logo-fixed-height;
      margin: $half-spacing;
      transition: all 0.6s ease-in-out;

      @media screen and (min-width: $screen-device--lg) {
        animation: zoomOut 3s ease alternate, size 5s ease forwards;
      }

      @media screen and (max-width: $screen-device--lg - 1) {
        height: 0;
        margin: 0;
      }
    }

    .text {
      @media screen and (min-width: $screen-device--lg) {
        animation: hidden 2s ease forwards;
      }
    }

    .on-off {
      @media screen and (min-width: $screen-device--lg) {
        animation: lightOn 1s ease forwards;
      }

      @media screen and (max-width: $screen-device--lg - 1) {
        animation: lightOn 1s ease forwards;
      }
    }
  }
}

.site-header__top-menu {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: $header-top-menu-background-color;
  font-family: $ff-montserrat !important;
  opacity: 0.8;
  z-index: 9;
  
  &:hover {
    z-index: 999;
  }
  
  .site-header.is-fixed & {
    visibility: hidden;
  }
}

.menu-bar {
  font-weight: normal !important;
  z-index: 9;
}

.site-header__logo {
  display: inline-block;
  margin: $double-spacing;
  
  @media screen and (min-width: $screen-device--lg) {
    transition: all 0.6s ease-in-out;//smoothing element resizing when site header is fixed
    animation: zoomIn 2s ease alternate;
  }
  
  @media screen and (max-width: $screen-device--lg - 1) {
    margin: 0;
    padding: 0;
    
    .svg-scalable {
      display: none;
    }
    
    use.text {
      display: none;
    }
  } 
}

.menu-bar-mobile {
  @media screen and (max-width: $screen-device--lg - 1) {
    position: relative;
    
    .menu-bar-mobile__logo {
      position: absolute;
      top: 50%;
      left: calc(50% - #{$nav-icon-size});
      transform: translateX(-50%);
      width: $mobile-logo-width;
      height: $mobile-logo-height;
      padding: $basis-spacing;
      border-radius: 50%;
      background-image: linear-gradient(
        to right,
        lighten($menu-bar-mobile-logo-background-color, 1%) 50%,
        transparent 50%,
        darken($menu-bar-mobile-logo-background-color, 1%) 50%
      );
      animation: fadeInUp 1s ease forwards;
      cursor: pointer;
      z-index: 99 ;
      
      &:hover {
        z-index: 999;
      }
    }
  }

  @media screen and (min-width: $screen-device--lg) {
    .svg-scalable {
      display: none;
    }
  }
}

.on-off {
  fill: none;
}

/**
 *section
 */
.section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 120px 580px;
  overflow: hidden;
  background-image: linear-gradient(86deg, #324575, darken(#324575, 10%));
  z-index: 0;
  opacity: 0.8;
  
  @media screen and (min-width: 480px) and (max-width: 600px - 1) {
    grid-template-rows: 140px 580px;
  }
  
  @media screen and (min-width: 600px) and (max-width: $screen-device--lg - 1) {
    grid-template-rows: 160px 580px;
  }
  
  @media screen and (min-width: $screen-device--lg) {
    grid-template-rows: 180px 580px;
  }
}

.section__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  color: #fbfbfb;
}

$color-bottom: #4ca8f5;
$color-top: #1d3f5c;

.section__header__title {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  padding-left: 5px;
  padding-right: 5px;
  word-break: none;
  font-family: $ff-rommetto; //'Sigmar One', cursive;
  letter-spacing: -2.6px;
  font-size: 4em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.8rem;
  
  //&:last-child {
  //  margin-top: 0;
  //}
  
  
  //.first-letter {
  //  font-size: 1.4em;
  //}
  
  @media screen and (min-width: 600px) and (max-width: $screen-device--lg - 1) {
    font-size: 4em;
    text-align: center;
  
    //&:first-child {
    //  text-align: right;
    //}
  }
  
  @media screen and (min-width: $screen-device--lg) {
    font-size: 6em;
    text-align: center;
  
    //&:first-child {
    //  text-align: right;
    //}
  }
  
  span {
    animation: bobbing 3s ease-in-out infinite alternate;
    display: inline-block;
    background-image: -webkit-linear-gradient(92deg, $color-bottom, $color-top);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform-origin: 50% 100%;
    
    @for $i from 1 through 20 {
      &:nth-of-type(#{$i}) {
        animation-delay:#{$i / -1.5}s;
      }
    }
  }
}

.font-effect-3d-float {
  text-shadow: 0.03em 0.04em 0.01em rgba(0,0,0,0.2), 0 0.1em 0.2em rgba(0,0,0,0.05);
}

.section__body {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
/*
 **planet
 */
$basis-size: 320px;
$planetColor: #f77035;//rgb(209, 70, 22)
$darkPlanetColor: darken($planetColor, 5%);
$darkerPlanetColor: darken($planetColor, 10%);
$darkestPlannetColor: darken($planetColor, 15%);//
.wrap-planet,
.planet {
  display: flex;
  justify-content: center;
}

.wrap-planet {
  margin: 0;
  pointer-event: none;
  z-index: -99;
}

.planet {
  align-items: center;
  position: relative;
  height: $basis-size;
  width: $basis-size;
  margin: 0;
  animation: bounce 2s infinite;
}

.planet-base {
  position: relative;
  height: $basis-size;
  width: $basis-size;
  border-radius: 100%;
  background-color: $planetColor;
  background-image: radial-gradient(
    circle at 0 20%,
    $planetColor 0%,
    transparent 65%,
    $darkPlanetColor 65%
  );
}

.planet-base__shadow {
  position: absolute;
  bottom: -20%;
  left: 50%;
  
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40%;
    transform: translateX(-50%);
    width: $basis-size / 2;
    height: $basis-size / 8;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.1);
    animation: shadow 2s infinite;
  }
}

.spot {
  position: absolute;
  border-radius: 100%;
  background-color: $darkPlanetColor;
  background-image: radial-gradient(
    circle at 100% 80%,
    $darkerPlanetColor 0%,
    $darkerPlanetColor 65%,
    $darkestPlannetColor 65%
  );
  
  &--one {
    height: $basis-size / 8;
    width: $basis-size / 8;
    top: 15%;
    left: 40%;
  }
  
  &--two {
    height: $basis-size / 4;
    width: $basis-size / 4;
    top: 63%;
    left: 48%;
  }
  
  &--three {
    height: $basis-size / 4;
    width: $basis-size / 4;
    top: 28%;
    left: 14%;
  }
  
  &--four {
    height: $basis-size / 6;
    width: $basis-size / 6;
    top: 64%;
    left: 15%;
  }
  
  &--five {
    height: $basis-size / 7;
    width: $basis-size / 7;
    top: 38%;
    left: 73%;
  }
  
  &--six {
    height: $basis-size / 14;
    width: $basis-size / 14;
    top: 17%;
    left: 20%;
  }
  
  &--seven {
    height: $basis-size / 16;
    width: $basis-size / 16;
    top: 63%;
    left: 35%;
  }
  
  &--eigth {
    height: $basis-size / 16;
    width: $basis-size / 16;
    top: 48%;
    left: 56%;
  }
}

/**
 *card
 */
.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  left: -10%;
  width: 120%;
  height: 110%;
    margin: 0;
  padding: 1em;
  padding-top: 2em;
  color: #fbfbfb;
  font-family: $ff-oswald;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  animation: zoomIn 0.8s ease-in-out;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
    
  @media screen and (min-width: 400px) and (max-width: 720px - 1) {
    width: 120%;
  }
    
  @media screen and (min-width: 720px) and (max-width: $screen-device--lg - 1) {
    width: 140%;
    top: 0;
    left: 28%;
  }
  
  @media screen and (min-width: $screen-device--lg) {
    width: 180%;
    top: 0;
    left: 36%;
    
    h1 {
      font-size: 2.2em;
    }
  }
    
  h1 {
    margin: 0;
    font-size: 1.6em;
  }
}

.card__content {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
  height: 100%;
    padding: 20px;
  
  &--flip {
    overflow: visible;
    position: relative;
    transform-style: preserve-3d;
    transition: 0.25s;
  }
  
  .card-flip:hover & {
    transform: rotateY(180deg);
    transition: transform 0.8s ease;
    overflow: visible;
    z-index: 99;
  }
}

.card-flip {
    //perspective: 1000;
}

.card-flip__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    border: 1px solid #ecf0f1;
    border-radius: 10px;
    color: #333;
    text-align: center;
    overflow: visible;
    backface-visibility: hidden;

  &--front {
    transform: rotateY(0deg);
    background-color: #f9eff6;
    opacity: 0.6;
    z-index: 2;
  }

  &--back {
    height: 80%;
    transform: rotateY(-180deg);
    background-color: #f9eff6;
  }
}

/**
 * animate
 */
@keyframes zoomIn {
  from {
    transform: scale3d(0.3,0.3,0.3);
    opacity: 0; 
  }
  50% {
    transform: none;
  }
}
.animation-zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomOut {
  from {
    transform: none;
  }
  40% {
    transform: scale3d(0.3,0.3,0.3);
    opacity: 0;
  }
}
.animation-zoomOut {
  animation-name: zoomOut;
}

@keyframes hidden {
  from {
    fill: transparentize($keyframe-hidden-color, 0.8);
  }
  100% {
    fill: transparentize($keyframe-hidden-color, 1);
  }
}
.animation-hidden {
  animation-name: hidden;
}

@keyframes lightOn {
  from,
  to {
    fill: none;
  }
  
  80% {
    fill: transparentize($keyframes-lightOn-color, 1);
  }
  
  100% {
    fill: transparentize($keyframes-lightOn-color, 0.6);
  }
}
.animation-lightOn {
  animation-name: lightOn;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3,0.3,0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate-zoomIn {
  animation-name: zoomIn;
}

@keyframes bobbing {
  0%{
    transform: translateY(10px) rotate(5deg);
  }
  50% {
    transform: translateY(0px) scale(0.8);
  }
  100%{
    transform: translateY(-10px) rotate(-5deg);
    }
}
.animate-bobbing {
  animation-name: bobbing;
}

@keyframes fadeInUp {
  from,
  30% {
    opacity: 0;
    transform: translate3d(0,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,-50%,0);
  }
}
.animate-fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInBottom {
  from,
  30% {
    opacity: 0;
    transform: translate3d(0,-20%,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.animate-fadeInBottom {
  animation-name: fadeInBottom;
}

@keyframes bounce {
  0% {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}
.animate-bounce {
  animation-name: bounce;
}

@keyframes shadow {
  0% {
    transform: translate3d(0,0,0) scale(0.9);
  }
  50% {
    transform: translate3d(0,-5px,0) scale(1);
  }
  100% {
    transform: translate3d(0,0,0) scale(0.9);
  }
}
.animate-shadow {
  animation-name: shadow;
}

/**
*it use external js
$https://codepen.io/druArt/pen/VbVjxx
$https://codepen.io/druArt/pen/YVMQNX
*/
//on scroll menu bar fixed
var amountScrolled = 10;
$(this).on('scroll',function() {    
  var scroll = $(this).scrollTop();
  if (scroll >= amountScrolled) {
    $(".site-header").addClass("is-fixed  is-animated");
    $(".customized-select").removeClass("is-open");
    $(".nav-list").removeClass("is-open");
    $('.js-menu-nav').removeClass('is-open');
  } else {
    $(".site-header").removeClass("is-fixed");
  }
});
  
//hamburger animate 
$('.js-menu-nav').click(function(e) {
  e.preventDefault();
  //animation nav icon
  $(this).toggleClass('is-open');
  //display nav-list
  $('.nav-list').toggleClass('is-open');
});
  
//display submenu acordion
$('.subnav__item').hide();
$('.js-show').on('click', function() {
  var navList = $(this);
  var showItems = navList.hasClass('is-open');
  $('.subnav__item').slideUp();
  $('.nav-list__item').removeClass('is-open');
  if (showItems) {
    navList.find('.subnav__item').slideUp();
  } else {
    navList.addClass('is-open');
    navList.find('.subnav__item').slideDown();
  }
  return false;
});

// change background color
$(".js-color").on("click", function() {
  var colorBackground = $("body");
  var selectOpen = $(this).closest(".customized-select");
  colorBackground.removeClass();
  colorBackground.addClass($(this).attr("data-color"));
  selectOpen
    .removeClass("is-open")
    .find(".select__placeholder")
    .text($(this).text());
  selectOpen.find("input[type=hidden]").attr("value", $(this).attr("data-value"));
  
  $(".select__list__item").removeClass("is-active");
  var color_id = $(this).attr('data-highlight');
  $('[data-highlight="' + color_id + '"]').toggleClass('is-active');
});