/*
 * Kiwiparty 2019
 * Alsacréations - WdStr
 */

/* --- Reset - KNACSS based on Bootstrap reboot --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  text-wrap: balance;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
  appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
  appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}


/* --- Base --- */

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.woff2') format('woff2'),
    url('/fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Bold.woff2') format('woff2'),
    url('/fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* ----------------------------- */
/* ==Base (basic styles)         */
/* ----------------------------- */
/* switching to border-box model for all elements */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  /* avoid min-width: auto on flex and grid children */
  min-width: 0;
  min-height: 0;
}

html {
  /* set base font-size to equiv "10px", which is adapted to rem unit */
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  font-size: calc(1em * 0.625);
}

body {
  margin: 0;
  font-size: 1.4rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.5;
}

@media (min-width: 576px) {
  body {
    font-size: 1.6rem;
  }
}

body {
  color: #4a4a4a;
  background: #f5f5f5;
  font-family: Lato, Arial, sans-serif;
}

img {
  max-width: 100%;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/*-- Titles --*/
h1,
h2,
h3,
h4,
h5,
.title,
.footer-title {
  font-family: Lato, Arial, sans-serif;
  font-weight: bold;
}

h1,
.h1-like {
  font-size: 3.2rem;
}

h2,
.h2-like {
  font-size: 2.4rem;
}

h3,
.h3-like {
  font-size: 2.0rem;
}

h4,
.h4-like {
  font-size: 1.8rem;
}

h5,
.h5-like {
  font-size: 1.6rem;
}

p {
  font-size: 1.4rem;
}

@media (min-width: 576px) {

  h1,
  .h1-like {
    font-size: 3.6rem;
  }

  h2,
  .h2-like {
    font-size: 3rem;
  }

  h3,
  .h3-like {
    font-size: 2.4rem;
  }

  h4,
  .h4-like {
    font-size: 2rem;
  }

  h5,
  .h5-like {
    font-size: 1.8rem;
  }

  p {
    font-size: 1.6rem;
  }
}

.line-through {
  text-decoration: line-through;
}

/* ----------------------------- */
/* ==Buttons                     */
/* ----------------------------- */
/* preferably use <button> for buttons !*/
/* use .btn-- or .button-- classes for variants */
.btn,
.button,
[type="button"],
button,
.btn--primary,
.button--primary,
.btn--success,
.button--success,
.btn--info,
.button--info,
.btn--warning,
.button--warning,
.btn--danger,
.button--danger,
.btn--inverse,
.button--inverse,
.btn--ghost,
.button--ghost,
.btn--ghost-primary {
  display: inline-block;
  padding: 1rem 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.25s;
  transition-property: box-shadow, background-color, color, border;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: #212529;
  border: none;
  border-radius: 0;
  background-color: #e7e9ed;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
}

.btn:focus,
.button:focus,
[type="button"]:focus,
button:focus {
  -webkit-tap-highlight-color: transparent;
}

.btn--primary,
.button--primary {
  background-color: #a5bb27;
  color: #fff;
  box-shadow: none;
}

.btn--primary:active,
.btn--primary:focus,
.btn--primary:hover,
.button--primary:active,
.button--primary:focus,
.button--primary:hover {
  background-color: #80911e;
  color: #fff;
}

.btn--success,
.button--success {
  background-color: #5CB85C;
  color: #fff;
  box-shadow: none;
}

.btn--success:active,
.btn--success:focus,
.btn--success:hover,
.button--success:active,
.button--success:focus,
.button--success:hover {
  background-color: #449d44;
}

.btn--info,
.button--info {
  background-color: #5BC0DE;
  color: #fff;
  box-shadow: none;
}

.btn--info:active,
.btn--info:focus,
.btn--info:hover,
.button--info:active,
.button--info:focus,
.button--info:hover {
  background-color: #31b0d5;
}

.btn--warning,
.button--warning {
  background-color: #F0AD4E;
  color: #fff;
  box-shadow: none;
}

.btn--warning:active,
.btn--warning:focus,
.btn--warning:hover,
.button--warning:active,
.button--warning:focus,
.button--warning:hover {
  background-color: #ec971f;
}

.btn--danger,
.button--danger {
  background-color: #D9534F;
  color: #fff;
  box-shadow: none;
}

.btn--danger:active,
.btn--danger:focus,
.btn--danger:hover,
.button--danger:active,
.button--danger:focus,
.button--danger:hover {
  background-color: #c9302c;
}

.btn--inverse,
.button--inverse {
  background-color: #333;
  color: #fff;
  box-shadow: none;
}

.btn--inverse:active,
.btn--inverse:focus,
.btn--inverse:hover,
.button--inverse:active,
.button--inverse:focus,
.button--inverse:hover {
  background-color: #1a1a1a;
}

.btn--ghost,
.button--ghost {
  background-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 1px #fff inset;
}

.btn--ghost:active,
.btn--ghost:focus,
.btn--ghost:hover,
.button--ghost:active,
.button--ghost:focus,
.button--ghost:hover {
  background-color: transparent;
}

.btn--ghost-primary,
.button--ghost-primary {
  background-color: transparent;
  color: #80911e;
  box-shadow: 0 0 0 2px #a5bb27 inset;
}

.btn--ghost-primary:active,
.btn--ghost-primary:focus,
.btn--ghost-primary:hover,
.button--ghost-primary:active,
.button--ghost-primary:focus,
.button--ghost-primary:hover {
  background-color: transparent;
  color: #80911e;
}

.btn--small,
.button--small {
  padding: 0.7rem 1rem;
  font-size: .8em;
}

.btn--big,
.button--big {
  padding: 1.5rem 2rem;
  font-size: 1.4em;
}

.btn--block,
.button--block {
  width: 100% !important;
  display: block;
}

.btn--unstyled,
.button--unstyled {
  padding: 0;
  border: none;
  text-align: left;
  background: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn--unstyled:focus,
.button--unstyled:focus {
  box-shadow: none;
  outline: none;
}

a[class*="btn--"]:hover,
a[class*="btn--"]:focus,
a[class*="btn--"]:active {
  text-decoration: none;
}


/* --- UTILES --- */

.content-wrapper {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.mbn {
  margin-bottom: 0;
}

/* --- Header --- */
.header {
  position: relative;
  padding-top: 9.5%;
  background: url('/img/wait-pattern.png') fixed center -40% repeat;
}

@media screen and (min-width: 576px) {
  .header {
    -webkit-animation-name: header-pattern-slide;
    animation-name: header-pattern-slide;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }
}

@media screen and (max-width: 576px) {
  .header {
    background-size: 40%;
  }
}

@-webkit-keyframes header-pattern-slide {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 432px -408px;
  }
}

@keyframes header-pattern-slide {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 432px -408px;
  }
}

.header .header-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: skewY(5deg);
  bottom: -52%;
}

.logo-container {
  text-align: center;
  position: relative;
  bottom: -1px;
  overflow: hidden;
}

.logo-container::before {
  content: "";
  position: absolute;
  transform: skewY(5deg);
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .25);
  width: 100%;
  left: 0;
  top: -48%;
  height: 100%;
  z-index: 2;
}

.logo-container h1 {
  margin-bottom: 0;
}

.logo-container img {
  position: relative;
  z-index: 3;
  max-width: 80%;
}

.logo-shapes {
  position: relative;
  z-index: 3;
  width: 95rem;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}



/* --- Newsletter --- */
.newsletter {
  text-align: center;
  margin-bottom: 8rem;
  padding: 0 1rem;
}

.newsletter .title {
  color: #a21328;
  margin-bottom: 1.5rem;
}

.newsletter form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.newsletter input[type="email"] {
  border: 0;
  padding: .5em 1em;
  font-size: 1.25rem;
  width: 20rem;
}

.newsletter button {
  padding: .5em 1.8em;
  font-size: .88rem;
  font-weight: bold;
  background: #738f08;
  border: 0;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}

.newsletter button:hover,
.newsletter button:focus {
  background: #a21328;
}

.newsletter .info {
  font-size: .81em;
  margin-top: .5rem;
}



/* --- Sponsoring --- */

.sponsoring {
  text-align: center;
  margin-bottom: 8rem;
}

.sponsoring .title {
  /* color: #a21328; */
  margin-bottom: 2rem;
}

.sponsoring-caption {
  max-width: 700px;
  margin: 0 auto 2rem;
}

.sponsoring-buttons [class*="btn"] {
  flex: 0 1 auto;
  margin: 1rem;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  /*cubic-bezier(0, 0.5, 0.24, 1.3);*/
  -webkit-animation-duration: .25s;
  animation-duration: .25s;
  white-space: normal;
}

.sponsoring-buttons [class*="btn"]:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@media (min-width: 576px) {

  .sponsoring-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}



/* --- Footer logo alsa --- */

.footer {
  background: #fff;
  padding: 1.5rem 2rem;
  text-align: center
}

.footer-about-text {
  text-align: center;
  margin-bottom: 2rem;
}

.footer-about-text a:hover,
.footer-about-text a:focus,
.footer-about-text a:active {
  text-decoration: none;
  opacity: .6;
  transition: opacity .25s;
}

.footer-logo-alsa {
  height: 1.8rem;
  width: auto;
  margin: 0 .5rem;
}

.footer-logo-wdstr {
  height: 2.4rem;
  width: auto;
  margin: 0 0 0 .5rem;
  vertical-align: middle;
}

.footer-archives-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-archives-list li {
  display: inline-block;
  margin: .2rem .5rem;
}




/* --- Responsive --- */

@media (max-width: 640px) {
  .header {
    margin-bottom: 2rem;
  }

  .newsletter {
    margin-bottom: 4rem;
  }

  .newsletter .title {
    font-size: 1.6rem;
  }

  .newsletter form {
    flex-direction: column;
  }

  .newsletter input[type="email"] {
    width: 100%;
  }
}


/* ---------------------------------------------- */
/* ---------------- ANIMATIONS ------------------ */

@-webkit-keyframes bounce {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(.95);
  }

  80% {
    transform: scale(1.05);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(.95);
  }

  80% {
    transform: scale(1.05);
  }
}


/* --- LOGO --- */

/* Transform origins according to position in SVG */
.logo-shapes #logo-kiwiparty {
  transform-origin: 112px 50px;
}

.logo-shapes #ribbon {
  transform-origin: 95px 25px;
}

.logo-shapes #bottle {
  transform-origin: 17px 80px;
}

.logo-shapes #kiwi-left {
  transform-origin: 19px 19px;
}

.logo-shapes #kiwi-right {
  transform-origin: 15.5px 15.5px;
}

.logo-shapes #LA {
  transform-origin: 76px 40px;
}

/* Transform translate according to their position in SVG */
.logo-shapes #logo-kiwiparty {
  transform: translate(77px, 24px);
}

.logo-shapes #ribbon {
  transform: translate(107px, 104px);
}

.logo-shapes #bottle {
  transform: translate(28px, 21px);
}

.logo-shapes #kiwi-left {
  transform: translate(47px, 119px);
}

.logo-shapes #kiwi-right {
  transform: translate(278px, 88px);
}

.logo-shapes #LA {
  transform: translate(-2px, 0px) scale(1.2);
}


/* Animation when page appear, added by JS */

/* Entrance animations  */

.logo-shapes #logo-kiwiparty.entrance-animation,
.logo-shapes #ribbon.entrance-animation,
.logo-shapes #bottle.entrance-animation,
.logo-shapes #kiwi-left.entrance-animation,
.logo-shapes #kiwi-right.entrance-animation,
.logo-shapes #LA.entrance-animation {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.5);
  animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.5);
}

.logo-shapes #logo-kiwiparty.entrance-animation {
  -webkit-animation-name: woop-in-logo;
  animation-name: woop-in-logo;
}

.logo-shapes #ribbon.entrance-animation {
  -webkit-animation-name: woop-in-ribbon;
  animation-name: woop-in-ribbon;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.2);
  animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.2);
}

.logo-shapes #bottle {
  -webkit-animation-name: woop-in-bottle;
  animation-name: woop-in-bottle;
  -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.5);
  animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.5);
}

.logo-shapes #kiwi-left.entrance-animation {
  -webkit-animation-name: woop-in-kiwil;
  animation-name: woop-in-kiwil;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.logo-shapes #kiwi-right.entrance-animation {
  -webkit-animation-name: woop-in-kiwir;
  animation-name: woop-in-kiwir;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.logo-shapes #LA.entrance-animation {
  -webkit-animation-name: slide-in-la;
  animation-name: slide-in-la;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.3);
  animation-timing-function: cubic-bezier(0, 0.5, 0.24, 1.3);
}

@-webkit-keyframes woop-in-logo {
  0% {
    transform: translate(77px, 24px) scale(0);
  }

  100% {
    transform: translate(77px, 24px) scale(1);
  }
}

@keyframes woop-in-logo {
  0% {
    transform: translate(77px, 24px) scale(0);
  }

  100% {
    transform: translate(77px, 24px) scale(1);
  }
}

@-webkit-keyframes woop-in-ribbon {
  0% {
    transform: translate(350px, 104px) rotate(30deg);
  }

  100% {
    transform: translate(107px, 104px) rotate(0deg);
  }
}

@keyframes woop-in-ribbon {
  0% {
    transform: translate(350px, 104px) rotate(30deg);
  }

  100% {
    transform: translate(107px, 104px) rotate(0deg);
  }
}

@-webkit-keyframes woop-in-bottle {
  0% {
    transform: translate(28px, 21px) scale(0) rotate(0);
  }

  60% {
    transform: translate(28px, 21px) scale(1.1) rotate(-10deg);
  }

  100% {
    transform: translate(28px, 21px) scale(1) rotate(0);
  }
}

@keyframes woop-in-bottle {
  0% {
    transform: translate(28px, 21px) scale(0) rotate(0);
  }

  60% {
    transform: translate(28px, 21px) scale(1.1) rotate(-10deg);
  }

  100% {
    transform: translate(28px, 21px) scale(1) rotate(0);
  }
}

@-webkit-keyframes woop-in-kiwil {
  0% {
    transform: translate(47px, 119px) scale(0);
  }

  60% {
    transform: translate(47px, 119px) scale(1.4);
  }

  100% {
    transform: translate(47px, 119px) scale(1);
  }
}

@keyframes woop-in-kiwil {
  0% {
    transform: translate(47px, 119px) scale(0);
  }

  60% {
    transform: translate(47px, 119px) scale(1.4);
  }

  100% {
    transform: translate(47px, 119px) scale(1);
  }
}

@-webkit-keyframes woop-in-kiwir {
  0% {
    transform: translate(278px, 88px) scale(0);
  }

  60% {
    transform: translate(278px, 88px) scale(1.4);
  }

  100% {
    transform: translate(278px, 88px) scale(1);
  }
}

@keyframes woop-in-kiwir {
  0% {
    transform: translate(278px, 88px) scale(0);
  }

  60% {
    transform: translate(278px, 88px) scale(1.4);
  }

  100% {
    transform: translate(278px, 88px) scale(1);
  }
}

@-webkit-keyframes slide-in-la {
  0% {
    transform: translate(-2px, 100px) scale(1.2);
    opacity: 0;
  }

  100% {
    transform: translate(-2px, 0) scale(1.2);
    opacity: 1;
  }
}

@keyframes slide-in-la {
  0% {
    transform: translate(-2px, 100px) scale(1.2);
    opacity: 0;
  }

  100% {
    transform: translate(-2px, 0) scale(1.2);
    opacity: 1;
  }
}




/* No ineraction animations */

@media screen and (min-width: 576px) {
  .logo-shapes #logo-kiwiparty:not(.entrance-animation),
  .logo-shapes #ribbon:not(.entrance-animation),
  .logo-shapes #bottle:not(.entrance-animation),
  .logo-shapes #kiwi-left:not(.entrance-animation),
  .logo-shapes #kiwi-right:not(.entrance-animation),
  .logo-shapes #LA:not(.entrance-animation) {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  .logo-shapes #logo-kiwiparty:not(.entrance-animation) {
    -webkit-animation-name: tossing-logo;
    animation-name: tossing-logo;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
  }

  .logo-shapes #ribbon:not(.entrance-animation) {
    -webkit-animation-name: tossing-ribbon;
    animation-name: tossing-ribbon;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }

  .logo-shapes #bottle:not(.entrance-animation) {
    -webkit-animation-name: tossing-bottle;
    animation-name: tossing-bottle;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  .logo-shapes #kiwi-left:not(.entrance-animation) {
    -webkit-animation-name: rotating-kiwil;
    animation-name: rotating-kiwil;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
  }

  .logo-shapes #kiwi-right:not(.entrance-animation) {
    -webkit-animation-name: rotating-kiwir;
    animation-name: rotating-kiwir;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
  }
}

@-webkit-keyframes tossing-logo {

  0%,
  100% {
    transform: translate(77px, 24px) rotate(0deg);
  }

  25% {
    transform: translate(77px, 24px) rotate(-1deg);
  }

  75% {
    transform: translate(77px, 24px) rotate(1deg);
  }
}

@keyframes tossing-logo {

  0%,
  100% {
    transform: translate(77px, 24px) rotate(0deg);
  }

  25% {
    transform: translate(77px, 24px) rotate(-1deg);
  }

  75% {
    transform: translate(77px, 24px) rotate(1deg);
  }
}

@-webkit-keyframes tossing-ribbon {

  0%,
  100% {
    transform: translate(107px, 104px) rotate(0deg);
  }

  50% {
    transform: translate(107px, 104px) rotate(2deg);
  }
}

@keyframes tossing-ribbon {

  0%,
  100% {
    transform: translate(107px, 104px) rotate(0deg);
  }

  50% {
    transform: translate(107px, 104px) rotate(2deg);
  }
}

@-webkit-keyframes tossing-bottle {

  0%,
  100% {
    transform: translate(28px, 21px) rotate(0deg);
  }

  50% {
    transform: translate(28px, 21px) rotate(-2deg);
  }
}

@keyframes tossing-bottle {

  0%,
  100% {
    transform: translate(28px, 21px) rotate(0deg);
  }

  50% {
    transform: translate(28px, 21px) rotate(-2deg);
  }
}

@-webkit-keyframes rotating-kiwil {
  0% {
    transform: translate(47px, 119px) rotate(0deg);
  }

  100% {
    transform: translate(47px, 119px) rotate(360deg);
  }
}

@keyframes rotating-kiwil {
  0% {
    transform: translate(47px, 119px) rotate(0deg);
  }

  100% {
    transform: translate(47px, 119px) rotate(360deg);
  }
}

@-webkit-keyframes rotating-kiwir {
  0% {
    transform: translate(278px, 88px) rotate(0deg);
  }

  100% {
    transform: translate(278px, 88px) rotate(-360deg);
  }
}

@keyframes rotating-kiwir {
  0% {
    transform: translate(278px, 88px) rotate(0deg);
  }

  100% {
    transform: translate(278px, 88px) rotate(-360deg);
  }
}




/* Hover animations */

@media screen and (min-width: 992px) {
  .logo-shapes #logo-kiwiparty:not(.entrance-animation):hover,
  .logo-shapes #ribbon:not(.entrance-animation):hover,
  .logo-shapes #bottle:not(.entrance-animation):hover,
  .logo-shapes #LA:not(.entrance-animation):hover {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

  .logo-shapes #logo-kiwiparty:not(.entrance-animation):hover {
    -webkit-animation-name: beat-logo;
    animation-name: beat-logo;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  .logo-shapes #ribbon:not(.entrance-animation):hover {
    -webkit-animation-name: bounce-ribbon;
    animation-name: bounce-ribbon;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  .logo-shapes #bottle:not(.entrance-animation):hover {
    -webkit-animation-name: shake-bottle;
    animation-name: shake-bottle;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
}


@-webkit-keyframes beat-logo {

  0%,
  100% {
    transform: translate(77px, 24px) scale(1);
  }

  10%,
  20% {
    transform: translate(77px, 24px) scale(.96) rotate(-3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: translate(77px, 24px) scale(1) rotate(3deg);
  }

  40%,
  60%,
  80% {
    transform: translate(77px, 24px) scale(1) rotate(-3deg);
  }
}

@keyframes beat-logo {

  0%,
  100% {
    transform: translate(77px, 24px) scale(1);
  }

  10%,
  20% {
    transform: translate(77px, 24px) scale(.96) rotate(-3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: translate(77px, 24px) scale(1) rotate(3deg);
  }

  40%,
  60%,
  80% {
    transform: translate(77px, 24px) scale(1) rotate(-3deg);
  }
}

@-webkit-keyframes bounce-ribbon {

  0%,
  100% {
    transform: translate(107px, 104px) scale(1) rotate(0);
  }

  10%,
  20% {
    transform: translate(107px, 104px) scale(1.05) rotate(-3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: translate(107px, 104px) scale(1) rotate(3deg);
  }

  40%,
  60%,
  80% {
    transform: translate(107px, 104px) scale(1) rotate(-3deg);
  }
}

@keyframes bounce-ribbon {

  0%,
  100% {
    transform: translate(107px, 104px) scale(1) rotate(0);
  }

  10%,
  20% {
    transform: translate(107px, 104px) scale(1.05) rotate(-3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: translate(107px, 104px) scale(1) rotate(3deg);
  }

  40%,
  60%,
  80% {
    transform: translate(107px, 104px) scale(1) rotate(-3deg);
  }
}

@-webkit-keyframes shake-bottle {

  0%,
  100% {
    transform: translate(28px, 21px) rotate(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(26px, 21px) rotate(-9deg);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate(30px, 21px) rotate(5deg);
  }
}

@keyframes shake-bottle {

  0%,
  100% {
    transform: translate(28px, 21px) rotate(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(26px, 21px) rotate(-9deg);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate(30px, 21px) rotate(5deg);
  }
}