<div id="contactUs">
  <p>A [really] simple responsive horizontal menu ready for any device.</p>
  <div id="countrySelection">
    <div id="countrySelection-wrapper">
      <ul id="countrySelection-items" style="">
        <div id="countrySelector"></div>
        <li class="countrySelection-item active">
          <a href="#">Australia</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Canada</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Chile</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">France</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Germany</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Japan</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Scandinavia</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">South Africa
            </a>
        </li>
        <li class="countrySelection-item">
          <a href="#">Turkey</a>
        </li>
        <li class="countrySelection-item">
          <a href="#">UK &amp; Ireland</a>
        </li>
        <li class="countrySelection-item active">
          <a href="#">United States
            </a>
        </li>
      </ul>
      <div class="countrySelection-paddles">
        <button class="countrySelection-paddle-left icon-chevronleft" aria-hidden="true">
        </button>
        <button class="countrySelection-paddle-right icon-chevronright" aria-hidden="true">
        </button>
      </div>
    </div>
  </div>
  <p>For the sample only the background colour will change between countries</p>
</div>

html{
  background: rgb(175, 140, 115);
  transition: background 1s ease-in-out}
html, body  {
  height: 100%}

#scene{
  width: 900px;
}

#contactUs{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#contactUs #countrySelection {
  border-bottom: 1px solid #EFEBE8;
  border-top: 1px solid #EFEBE8;
  position: relative;
}

#contactUs #countrySelection #countrySelection-wrapper {
  overflow: hidden;
  height: 60px;
  padding: 0 30px;
}

#countrySelection-items {
    margin: 0 20px;
    padding: 1px 0;
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#contactUs #countrySelector {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}
.active p, .active a{
  color: #fff !important;
}

#contactUs #countrySelection ul li {
    display: inline-block;
    margin: 16px 24px;
}

#contactUs p, #contactUs a{
  color: #EFEBE8;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a, a:visited, p{
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.25px;
  font-family: 'Gill Sans',
  Calibri,
  'Helvetica Neue',
  Arial,
  sans-serif;
  font-weight: 100;
  text-align:center;
}
a{font-size: 1rem;}
p{font-size:1.5rem;}

.slick-prev, .icon-chevronleft {
    transform: rotate(180deg);
}
.icon-chevronleft, .icon-chevronright {
    background-image: url('http://www.res-testing.com/images/arrow.png');
    background-repeat: no-repeat;
    background-size: 20px;
}
.countrySelection-paddle-left, .countrySelection-paddle-right {
    cursor: pointer;
    border: none;
    position: absolute;
    top: 20px;
    background-color: transparent;
    width: 25px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    outline: none;
}
.slick-prev, .countrySelection-paddle-left {
    left: 0;
}
.arrow {
    width: 25px;
    margin-left: auto;
    margin-right: auto;
}
.slick-next, .countrySelection-paddle-right {
    right: 0;
}

$(function() {
  var items = $('#countrySelection-items').width();
  var itemSelected = document.getElementsByClassName('countrySelection-item');
  var backgroundColours = ["rgb(133, 105, 156)", "rgb(175, 140, 115)","rgb(151, 167, 109)","rgb(171, 100, 122)","rgb(105, 134, 156)","rgb(152, 189, 169)"]
  countriesPointerScroll($(itemSelected));
  $("#countrySelection-items").scrollLeft(200).delay(200).animate({
    scrollLeft: "-=200"
  }, 2000, "easeOutQuad");
 
  $('.countrySelection-paddle-right').click(function () {
    $("#countrySelection-items").animate({
      scrollLeft: '+='+items
    });
  });
  $('.countrySelection-paddle-left').click(function () {
    $( "#countrySelection-items" ).animate({
      scrollLeft: "-="+items
    });
  });

  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var scrolling = false;

    $(".countrySelection-paddle-right").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("right");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    $(".countrySelection-paddle-left").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("left");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    function scrollContent(direction) {
        var amount = (direction === "left" ? "-=3px" : "+=3px");
        $("#countrySelection-items").animate({
            scrollLeft: amount
        }, 1, function() {
            if (scrolling) {
                scrollContent(direction);
            }
        });
    }
  }
  
  $('.countrySelection-item').click(function () {
    $('#countrySelection').find('.active').removeClass('active');
    $(this).addClass("active");
    countriesPointerScroll($(this));
    newBackgroundColour(backgroundColours)
  });

});
var newBackgroundColour = function(backgroundColours){
  var newBackground = backgroundColours[Math.floor(Math.random()*backgroundColours.length)];
  if(newBackground != $("html").css("background-color")){
    $("html").css("background",newBackground);
  }else{
    newBackgroundColour(backgroundColours);
  }
}

function countriesPointerScroll(ele) {

  var parentScroll = $("#countrySelection-items").scrollLeft();
  var offset = ($(ele).offset().left - $('#countrySelection-items').offset().left);
  var totalelement = offset + $(ele).outerWidth()/2;

  var rt = (($(ele).offset().left) - ($('#countrySelection-wrapper').offset().left) + ($(ele).outerWidth())/2);
  $('#countrySelector').animate({
    left: totalelement + parentScroll
  })
}