Interactive Customer Feedback Form (For a pet store)

index.haml

.loader
  .loader_inner
    %img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
    %img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l1.png'}
    %img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw2.png'}
    %img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l2.png'}
    %img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
    %img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l3.png'}
    .div Loading feedback form...
.tut
  .tut_inner
    %h2 Drag the characters mouths to reflect your satisfaction
    %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Dec_31,_2015_22:28.gif'}
    %p Ok
.question
  %p ?
.feedbackform
  .feedbackform_slide.first.active_slide
    %img.sb.monkey{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
    .grad.monkey
    .feedbackform_slide__inner
      %h1.question_s
      %h2 Drag the cheeky monkeys mouth up or down to reflect your satisfaction!
      .character
        .character_image
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/monkey.svg'}
        .character_smile
          .smiler_input
            %input.monkey{:max => "20", :min => "0", :type => "range"}
            %svg.smile.monkey{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
      .rating.monkey
        %span Average
        %img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
  .feedbackform_slide
    %img.sb.rabbit{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/circback.svg"}
    .grad.rabbit
    .feedbackform_slide__inner
      %h1.question_s 
      %h2 Drag the fluffy rabbits mouth up or down to reflect your satisfaction!
      .character.rabbit
        .character_image
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rabbit.svg'}
        .character_smile
          .smiler_input
            %input.rabbit{:max => "20", :min => "0", :type => "range"}
            %svg.smile.rabbit{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
      .rating.rabbit
        %span Average
        %img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
        %img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
  .feedbackform_slide
    %img.sb.panda{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/hexback.svg"}
    .grad.panda
    .feedbackform_slide__inner
      %h1.question_s 
      %h2 Drag the shy pandas mouth up or down to reflect your satisfaction!
      .character
        .character_image
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/panda.svg'}
        .character_smile
          .smiler_input
            %input.panda{:max => "20", :min => "0", :type => "range"}
            %svg.smile.panda{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
      .rating.panda
        %span Average
        %img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
        %img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
  .feedbackform_slide
    %img.sb.lion{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
    .grad.lion
    .feedbackform_slide__inner
      %h1.question_s 
      %h2 Drag the lions mouth up or down to reflect your satisfaction!
      .character
        .character_image
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lion.svg'}
        .character_smile
          .smiler_input
            %input.lion{:max => "20", :min => "0", :type => "range"}
            %svg.smile.lion{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
      .rating.lion
        %span Average
        %img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
        %img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
  .feedbackform_slide
    .feedbackform_slide__inner
      .col_left
        %img.board{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/resultboard.png'}
        .summary
      .col_right
        .rating.end
          %span Thankyou!
          %img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
          %a{:href => 'https://codepen.io/jcoulterdesign/',:target => '_blank'} Follow me on Codepen for more cool stuff!
    

interactive-customer-feedback-form-for-a-pet-store.markdown

Interactive Customer Feedback Form (For a pet store)

Takes the edge off those boring customer feedback forms :) Grab the smilies and move them up or down to reflect how happy you are!!

A Pen by Jamie Coulter on CodePen.

License.

DEMO https://codemyui.com/cute-animals-interactive-review-form-drag-mouth-up-or-down/

script.js

/* ======================================

Super Fresh Customer Feedback Concept
Author: Jamie Coulter
Date: 01.01.2016
Version: 1.0

========================================= */

// Preloader

var preload_time = 3000; // How long preload is shown
var preload_fade_speed = 400; // Preload fadeout speed

setTimeout(function(){
  $('.loader').fadeOut(preload_fade_speed); // Fade out preloader
  open_modal(); // Open tutorial
},preload_time);

// End preloader

// Tutorial modal

function open_modal(){
  $('.tut').addClass('poptut'); // Remove
  $('.question').fadeOut(400); // Fadeout
}

function close_modal(){
  $('.question').fadeIn(400); // Fadeout
  $('.tut').removeClass('poptut'); // Remove
  $('h1,h2').addClass('popone'); // Intro
  $('.character').addClass('poptwo'); // Intro
  $('.rating').addClass('popthree'); // Intro
  $('.next,.prev').addClass('popfour'); // Intro
}

$('.tut p').click(function(){
  close_modal(); // Close modal
});

$('.question p').click(function(){
  open_modal(); // Open modal
})

// End tutorial modal

// Page slider

var slide_amount = $('.feedbackform_slide').length; // Slide count
var window_width = $(window).width(); // Init window width
var current_x = 0; // Current x value of slides
var current_position = 0; // Current position

$('.feedbackform').css('width',window_width * slide_amount + 'px'); // Set up the slides
$('.feedbackform_slide').css('width',window_width + 'px'); // Set up the slides

$('.next').click(function(){
  update_answers();
  var window_width = $(window).width(); // Re assess window width
  if(current_position < slide_amount - 1){
    current_position++;
    current_x = current_position * window_width;
    $('.feedbackform_slide').css('right',current_x);
    $('.active_slide').removeClass('active_slide').next().addClass('active_slide');
    setTimeout(function(){
      $('.active_slide').find('.popone').removeClass('popone'); // Reset animations
      $('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
      $('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
      $('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
    },10)
    setTimeout(function(){
      $('h1,h2').addClass('popone'); // Reset animations
      $('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
      $('.rating').addClass('popthree'); // Reset animations
      $('.next,.prev').addClass('popfour'); // Reset animations
    },410)
  }
});

$('.prev').click(function(){
  update_answers();
  var window_width = $(window).width();
  if(current_position > 0){
    current_position--;
    current_x = current_position * window_width;
    $('.feedbackform_slide').css('right',current_x);
    $('.active_slide').removeClass('active_slide').prev().addClass('active_slide');
    setTimeout(function(){
      $('.active_slide').find('.popone').removeClass('popone'); // Reset animations
      $('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
      $('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
      $('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
    },10)
    setTimeout(function(){
      $('h1,h2').addClass('popone'); // Reset animations
      $('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
      $('.rating').addClass('popthree'); // Reset animations
      $('.next,.prev').addClass('popfour'); // Reset animations
    },410)
  }
});

$(window).resize(function(){ // Responisivity
  var window_width = $(window).width(); // Window width
  $('.feedbackform').css('width',window_width * slide_amount + 'px'); // Re jig slide sizes
  $('.feedbackform_slide').css('width',window_width + 'px'); // Re jig slide sizes
  current_position = 0; // Reset
  current_x = current_position * window_width; // Reset
  $('.feedbackform_slide').css('right',current_x); // Reset
  $('.active_slide').removeClass('active_slide')
  $('.first').addClass('active_slide');
});

// End page slider

// Questions

var questions = ['How satisfied are you with our services?','How satisfied are you with your pet?','How were our staff?','How was the cleanliness of our store?']
var q = 0;

$('.question_s').each(function(){
  $(this).html(questions[q])
  q++;
})

// Summary
var answers = []

var animals = ['monkey','rabbit','panda','lion']
for(i = 0; i < animals.length; i++){
  answers[animals[i]] = ['Average'] 
}

function update_answers(){
   $('.summary').html('');
  for(i = 0; i < questions.length; i++){
    $('.summary').append('<p>' + questions[i] + '</p><p class="answer_p">' + answers[animals[i]][0] + '</p>')
  }
}
// Messages

var monkey_messages = ['terrible','bad','not great','average','good','excellent','amazing']; // Monkey array
var rabbit_messages = ['dissapointed','unhappy','not great','average','pleased','happy','super happy']; // Rabbit array
var panda_messages = ['terrible','bad','not great','average','good','excellent','amazing']; // Panda array
var lion_messages = ['very dirty','dirty','needs work','average','clean','very clean','Superb']; // Lion array

// The smile

$('input').mousedown(function(){
  $('input').css('cursor','-webkit-grabbing'); // Change cursor
  $('input').css('cursor','-moz-grabbing'); // Change cursor
});

$('input').mouseup(function(){
  $('input').css('cursor','-webkit-grab'); // Change cursor
  $('input').css('cursor','-moz-grab'); // Change cursor
});

var smile_value;

$('input').mousedown(function(){
  var active_smile = $(this).attr('class').split(' ').pop(); // Get active smile
  s = setInterval(function(){
    // Change smile svg coords
    smile_value = $('input.' + active_smile).val(); // Get the value
    $('.smile.' + active_smile + ' path').attr('d','M10 10 C 20 ' + smile_value + ', 40 ' + smile_value + ', 50 10');
    // Select relevant array
    if(active_smile == 'monkey'){
      var active_array = monkey_messages; // Monkey array
    } else if(active_smile == 'rabbit'){
      var active_array = rabbit_messages; // Rabbit array
    } else if(active_smile == 'panda'){
      var active_array = panda_messages; // Panda array
    } else if(active_smile == 'lion'){
      var active_array = lion_messages; // Lion array
    }
    answers[active_smile] = [$('.rating.' + active_smile + ' span').html()]; // Push to answers
    $('.sb.' + active_smile).css('opacity',(smile_value/60)); // Pattern opacity
    $('.grad.' + active_smile).css('opacity',(smile_value/40)); // Gradient opacity
    if(smile_value == 0){
      // Worst
      $('.rating.' + active_smile + ' span').html(active_array[0]); // Set message
    } else if(smile_value < 10 && smile_value > 5){
      // Bad
      $('.rating.' + active_smile + ' span').html(active_array[1]); // Set message
    } else if(smile_value < 5 && smile_value > 0){
      // Not good
      $('.rating.' + active_smile + ' span').html(active_array[2]); // Set message
    } else if(smile_value == 10){
      // Average
      $('.rating.' + active_smile + ' span').html(active_array[3]); // Set message
    } else if(smile_value > 10 && smile_value < 15){
      // Good
      $('.rating.' + active_smile + ' span').html(active_array[4]); // Set message
    } else if(smile_value > 15 && smile_value < 20){
      // Very good
      $('.rating.' + active_smile + ' span').html(active_array[5]); // Set message
    } else if(smile_value== 20){
      // Amazing
      $('.rating.' + active_smile + ' span').html(active_array[6]); // Set message
    }        
  },10)
});

// Clear interval

$('input').mouseup(function(){
  clearInterval(s); // Clear intervals
});


// To do
// Code tidy
// CBT CDT
// Finish last slide

// Would be nice
// Things appear on the board, banans etc
// summary page?
// Eyes follow you?

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

// Fonts

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Crete+Round);

//Styles
.question{
  position:absolute;
  top:20px;
  right:20px;
  z-index:3;
  display:none;
  p{font-size:40px;color:white;cursor:pointer;margin:0;}
}
.tut{
  background:white;
  padding:0px;
  width:760px;
  margin:auto;
  transition:all .3s;
  //display:none;
  border-radius:7px;
  text-align:center;
  position:absolute;
  top:50%;
  transform:translateY(-50%) scale(0);
  left:0;
  right:0;
  z-index:3;
  h2{
    font-size: 20px;
    color: #C39681;
    width: 370px;
    margin: 50px auto 30px auto;
  }
  p{
    color: #C39681;
    border-top: 1px solid #FCF1EC;
    border-bottom-right-radius: 7px;
    padding-top: 30px;
    border-bottom-left-radius: 7px;
    background: #FFF3ED;
    transition:all .3s;
    cursor: pointer;
    margin: 20px 0px 0px 0px;
    padding-bottom: 30px;
    &:hover{
      background:#7B6358;
      color:white;
    }
  }
}
.loader{
  position:fixed;
  z-index:3;
  width:100%;
  height:100%;
  background:#c39681;
  &_inner{
    text-align:center;
    position:absolute;
    left:0;
    right:0;
    top:50%;
    transform:translateY(-50%);
    margin:auto;
    div{
      color: rgba(255, 255, 255, 0.52);
      font-size: 16px;
      margin-top: 40px;
      opacity:0;
      animation:load .6s .3s forwards
    }
    .pawone{
      top:-10px;
    }
    .pawtwo{}
    img{
      margin-right:17px;
      width:30px;
      position:relative;
      opacity:0;
      @for $i from 1 through 10{
        &:nth-of-type(#{$i}){

          animation: load 1s (0.4s + $i/3) linear forwards;
        }
      }
      @keyframes load{
        0%{opacity:0}
        100%{opacity:1}
      }
    }
  }
}

body{
  font-family: 'Varela Round', sans-serif;
  padding:0;
  margin:0;
  overflow:hidden;
  .feedbackform{
    .end{
      width: 400px !important;
      height: 75px;
      img{
        top: 42px !important;
      }
    }
    &_slide{
      overflow:hidden;
      float:left;
      height:100vh;
      right:0;
      position:relative;
      background:rgb(195,150,129);
      transition:all .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
      .sb{
        width:200px;
        height:200px;
        position:absolute;
        left:0;
        top:50%;
        transform:scale(12);
        right:0;
        opacity:0.166667;
        transition:all .3s;
        animation:spin 40s linear infinite;
        margin:auto;
        transform-origin: center;
      }
      .grad.monkey{
        background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
        background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        opacity:0.25;
        transition:all .3s;
        top:0;

      }
      .grad.rabbit{
        background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
        background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        opacity:0.25;
        transition:all .3s;
        top:0;

      }
      .grad.panda{
        background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
        background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        opacity:0.25;
        transition:all .3s;
        top:0;

      }
      .grad.lion{
        background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
        background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        opacity:0.25;
        transition:all .3s;
        top:0;

      }
      &__inner{
        position:absolute;
        top:50%;
        left:0;
        right:0;
        width:780px;
        margin:auto;
        text-align:center;
        transform:translateY(-50%);
        h1{
          margin:0;
          font-size:22px;
          color:white;
          margin-bottom:6px;
          transform:scale(0)
        }
        h2{
          margin:0;
          color: rgba(0, 0, 0, 0.42);
          transform:scale(0);
          font-size:14px;
        }
        .rating{
          transform:scale(0);
          img{
            position: absolute;
            transition:all .3s;
            right: -10px;
            top: 19px;
            cursor: pointer;
            width: 50px;
            &:hover{
              right:-14px;
            }
          }
          .prev{
            left:-10px;
            &:hover{
              left:-14px;
            }
          }
          .prev,.next{
            transform:scale(0);
          }

          font-family: 'Crete Round', serif;
          color:#745226;
          position:relative;
          left:0px;
          font-size:26px;
          border-radius:4px;
          width:260px;
          padding:30px;
          background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/board.png');
          background-size:cover;
          margin:0 auto;
          text-transform:uppercase;
        }
        .character.rabbit{
          width: 156px;
        } .character{
          width:180px;
          transform:scale(0);
          margin:0px auto -40px auto;
          margin-top:30px;
          position:relative;
          &_smile{
            position:absolute;
            z-index:2;
            top:0;
            .smile.monkey{
              position: absolute;
              top: 119px;
              left: 61px;
            }
            .smile.panda{
              position: absolute;
              top: 129px;
              left: 63px;
            }
            .smile.lion{
              position: absolute;
              top: 122px;
              left: 60px;
            }
            .smile.rabbit{
              position: absolute;
              top: 164px;
              left: 49px;
            }
            input{

            }
            @-moz-document url-prefix() {
              input.monkey{
                transform: rotate(90deg) !important;
                width: 96px !important;
                top: 121px !important;
                cursor: grab !important;
                position: relative !important;
                z-index: 1 !important;
                opacity: 0 !important;
                left: 35px !important;
              }
              input.rabbit{
                transform: rotate(90deg) !important;
                width: 96px !important;
                top: 165px !important;
                position: relative !important;
                z-index: 1 !important;
                opacity: 0 !important;
                left: 22px !important;
              }
              input.panda{
                transform: rotate(90deg) !important;
                width: 96px !important;
                top: 131px !important;
                position: relative !important;
                z-index: 1 !important;
                opacity: 0 !important;
                left: 36px !important;
              }
              input.lion{
                transform: rotate(90deg) !important;
                width: 96px !important;
                top: 124px !important;
                position: relative !important;
                z-index: 1 !important;
                opacity: 0 !important;
                left: 33px!important;
              }
            }
            input.monkey{
              transform:rotate(90deg);
              width:96px;
              top: 30px;
              cursor: -webkit-grab; cursor: -moz-grab;
              position:relative;
              z-index:1;
              opacity:0;

            }
            input.rabbit{
              transform:rotate(90deg);
              width:96px;
              top: 78px;
              position:relative;
              z-index:1;
              opacity:0;
            }
            input.panda{
              transform:rotate(90deg);
              width:96px;
              top: 42px;
              position:relative;
              z-index:1;
              opacity:0;
            }
            input.lion{
              -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
              width: 96px;
              top: 36px;
              position: relative;
              z-index: 1;
              opacity: 0;
            }
            input[type=range]::-webkit-slider-runnable-track {
              width:80px;
              height: 190px;
              //cursor: grab;
              box-shadow: none;
              background: transparent;
              border-radius: 1.3px;
              border: none;
            }
            input[type=range]::-moz-range-track{
              width:80px;
              height: 190px;
              box-shadow: none;
              background: transparent;
              border-radius: 1.3px;
              border: none;
            }
          }
        }
      }
    }
  }
}

// Animations

.poptut{

  animation: poptut 1s .4s forwards;

}
.popone{

  animation: pop 1s .4s forwards;

}
.poptwo{
  animation: pop 1s .6s forwards;

}
.popthree{
  animation: pop 1s .8s forwards;

}
.popfour{
  animation: pop 1s 1s forwards;

}
@keyframes pop{
  0%{transform:scale(0);}
  25%{transform:scale(1.2);}
  50%{transform:scale(.9);}
  75%{transform:scale(1.1);}
  100%{transform:scale(1);}
}
@keyframes poptut{
  0%{transform:translateY(-50%) scale(0);}
  25%{transform:translateY(-50%) scale(1.2);}
  50%{transform:translateY(-50%) scale(.9);}
  75%{transform:translateY(-50%) scale(1.1);}
  100%{transform:translateY(-50%) scale(1);}
}
a.follow{
  background: #4BE8AC !important;
  box-shadow: 0px 3px 0px #39BF8C !important;
}
a.download,a.follow{    transform:scale(0);
  &:hover{
    background: #88614F;
  }
  text-align: center;
  margin-top: 80px;
  width: 200px;
  float: left;
  display: inline-block;
  padding: 26px 30px;
  background: #845E4C;
  box-shadow: 0px 3px 0px #744A37;
  color: white;
  font-weight: 900;
  font-family: 'nunito';
  text-decoration: none;
  border-radius: 4px;
  margin-left: 22px;}

// summary
.summary{
  position: relative;
  padding: 0px 50px;
  margin-top: 78px;
}
.col_left{
  width: 400px;
  position: relative;
  height: 510px;
  padding: 9px 0px 0px 0px;
  margin: 0 auto;
  text-align: left;
  font-family: 'Crete Round', serif;
  color: white;
  font-size: 19px;
  .board{
    position:absolute;
    top:0;
    left:0;
    width:100%;
  }
  p{
    margin:0;
  }
  margin:0 auto;
  text-align: left;
  font-family: 'Crete Round', serif;
  color: white;
  font-size: 19px;
  .answer_p{
    font-size:28px;    font-size: 19px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 9px;
    margin-bottom: 6px !important;
    color: #4BE8AC;
  }
}
.col_right{
  width: 453px;
  position: absolute;
  bottom: -27px;
  left: 159px;
  margin: 0 auto;
  a{
    color: white;
    font-size: 14px;
    display: block;
    margin: 14px;
  }
}