/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%;
}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

select, input, textarea {
  font: 99% sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

td, td img {
  vertical-align: top;
}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
}

body p, body span {
  font-size: 1.4rem;
}

body h1 {
  font-size: 3.2rem;
}

body h2 {
  font-size: 2.4rem;
}

body h3 {
  font-size: 1.9rem;
}

body h4 {
  font-size: 1.6rem;
}

body {
  overflow: hidden;
}

.main-width {
  max-width: 1200px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

header {
  width: 100%;
  height: auto;
  background-color: #e93864;
  color: #ffffff;
  position: fixed;
  z-index: 20;
}

header .main-width {
  display: flex;
  justify-content: space-between;
}

header .main-width .logo h1 {
  line-height: 6rem;
  font-weight: bold;
}

nav li {
  padding-left: 1rem;
  line-height: 6rem;
  font-size: 1.1rem;
  display: inline-block;
}

nav a {
  font-size: 1.1rem;
  color: #ffffff;
}

.show-menu {
  top: 3.7rem;
  left: 0;
  display: block;
  padding: 1.5rem 1.5rem 1.5rem 0;
  background-color: white;
  z-index: 50;
  position: absolute;
  color: #741c32;
}

.show-li {
  display: block;
}

#hamburger {
  font-size: 1.5rem;
  width: 3.6rem;
  height: 3.2rem;
  left: 0;
  top: 1.5rem;
  border: none;
  background: #e93864;
  cursor: pointer;
  display: none;
  outline: none;
  position: absolute;
  z-index: 25;
}

#hamburger:before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1em;
  height: 0.15em;
  background: #ffffff;
  box-shadow: 0 0.25em 0 0 #ffffff, 0 0.5em 0 0 #ffffff;
}

.show-menu + #hamburger:before {
  content: "x";
  background: transparent;
  box-shadow: none;
  border: none;
  top: 0.5rem;
  left: 1rem;
  color: #ffffff;
}

.about-us .fruit:hover,
.about-us .base:hover {
  animation: around 500ms 1 linear normal;
}

.apple {
  width: 6em;
  height: 5em;
  background-color: #ff4355;
  -moz-box-shadow: inset 0.2em -0.2em #cc1022;
  -webkit-box-shadow: inset 0.2em -0.2em #cc1022;
  box-shadow: inset 0.2em -0.2em #cc1022;
  border-radius: 2em 2em 3em 3em;
  position: absolute;
  top: 1em;
  left: 0.3em;
}

.apple:before {
  top: -.2em;
  left: 1.8em;
  content: "";
  width: 4.1em;
  height: 2.75em;
  background-color: inherit;
  border-radius: 3em 3em 0 0;
  position: absolute;
  -moz-box-shadow: -1.5em 0 0   #ff4355, inset .2em 0.2em  #ff4355;
  -webkit-box-shadow: -1.5em 0 0   #ff4355, inset .2em 0.2em  #ff4355;
  box-shadow: -1.5em 0 0   #ff4355, inset .2em 0.2em  #ff4355;
}

.apple:after {
  content: "";
  width: 0.2em;
  height: 1em;
  background-color: brown;
  position: absolute;
  z-index: 2;
  top: -0.5em;
  left: 3em;
}

.orange {
  width: 5.6em;
  height: 5.6em;
  border-radius: 50%;
  background-color: #ffb526;
  -moz-box-shadow: inset 0.2em -0.2em #cc8a0c;
  -webkit-box-shadow: inset 0.2em -0.2em #cc8a0c;
  box-shadow: inset 0.2em -0.2em #cc8a0c;
  position: absolute;
  top: 0.9em;
  left: 0.3em;
}

.orange:before {
  content: "";
  position: absolute;
  top: -1em;
  left: 3em;
  height: 0;
  width: 0;
  border: 1em solid #539e3d;
  border-radius: 50% 0 50% 0;
  border-bottom-color: #437512;
  border-right-color: #437512;
}

.banana {
  width: 6em;
  height: 6em;
  background-color: transparent;
  -moz-box-shadow: -1.1em 1.1em 0 0 #fcd110;
  -webkit-box-shadow: -1.1em 1.1em 0 0 #fcd110;
  box-shadow: -1.1em 1.1em 0 0 #fcd110;
  border-radius: 50%;
  position: absolute;
  top: -0.9em;
  left: 1.6em;
}

.banana:before {
  content: "";
  width: 0.3em;
  height: 0.3em;
  transform: rotate(45deg);
  background-color: #937714;
  position: absolute;
  top: 5.4em;
  left: 4.3em;
  z-index: 1;
}

.banana:after {
  content: "";
  width: 0.4em;
  height: 0.8em;
  transform: rotate(31deg);
  background-color: #b3bb03;
  position: absolute;
  top: 1.1em;
  left: 0.2em;
  z-index: 1;
}

.banana-line {
  width: 5.5em;
  height: 5.8em;
  background-color: transparent;
  -moz-box-shadow: -0.4em 0.4em 0 0 #ffe23c;
  -webkit-box-shadow: -0.4em 0.4em 0 0 #ffe23c;
  box-shadow: -0.4em 0.4em 0 0 #ffe23c;
  border-radius: 50%;
  position: absolute;
  top: -0.7em;
  left: 1.7em;
  transform: rotate(-4deg);
}

.lemon {
  width: 5.1em;
  height: 5.1em;
  margin: 0.8em;
  background-color: #ffe135;
  border-radius: 50% 15%;
  -moz-box-shadow: inset 0.2em 0.2em #ccb42a;
  -webkit-box-shadow: inset 0.2em 0.2em #ccb42a;
  box-shadow: inset 0.2em 0.2em #ccb42a;
  transform: rotate(225deg);
  position: absolute;
}

.pear {
  width: 5.4em;
  height: 5.4em;
  margin-top: 1.2em;
  background-color: #d7c322;
  border-radius: 50% 15% 50% 50%;
  transform: rotate(-45deg);
  -moz-box-shadow: inset 0.15em 0.25em #c3b11f;
  -webkit-box-shadow: inset 0.15em 0.25em #c3b11f;
  box-shadow: inset 0.15em 0.25em #c3b11f;
  position: absolute;
  left: 0.6em;
}

.pear:after {
  content: "";
  width: 0.2em;
  height: 1em;
  background-color: brown;
  position: absolute;
  z-index: 2;
  top: -0.2em;
  left: 5.1em;
  transform: rotate(45deg);
}

.strawberry {
  width: 5em;
  height: 5em;
  margin-top: 0.7em;
  background-color: #ed2607;
  border-radius: 50% 15% 50% 50%;
  transform: rotate(135deg);
  -moz-box-shadow: inset -0.15em -0.25em #C62106;
  -webkit-box-shadow: inset -0.15em -0.25em #C62106;
  box-shadow: inset -0.15em -0.25em #C62106;
  position: absolute;
  left: 0.6em;
}

.strawberry:before {
  content: "";
  position: absolute;
  top: 3.5em;
  left: 2em;
  width: .3em;
  height: .3em;
  background-color: white;
  border-radius: 50%;
  -moz-box-shadow: 1.7em 0 0 0 white, -1em -2.8em 0 0 white, 2.5em -1.5em 0 0 white,
 2em -2.5em 0 0 white, 0.75em -1.5em 0 0 white, -1em -1em 0 0 white, 0.8em -3.2em 0 0 white;
  -webkit-box-shadow: 1.7em 0 0 0 white, -1em -2.8em 0 0 white, 2.5em -1.5em 0 0 white,
 2em -2.5em 0 0 white, 0.75em -1.5em 0 0 white, -1em -1em 0 0 white, 0.8em -3.2em 0 0 white;
  box-shadow: 1.7em 0 0 0 white, -1em -2.8em 0 0 white, 2.5em -1.5em 0 0 white,
 2em -2.5em 0 0 white, 0.75em -1.5em 0 0 white, -1em -1em 0 0 white, 0.8em -3.2em 0 0 white;
}

.leaf-up {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 1.5em solid #539e3d;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 0 solid transparent;
}

.strawberry-leaf-up {
  top: 0.3em;
  left: 2.3em;
}

.leaf-down {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 1.5em solid #539e3d;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 0 solid transparent;
}

.strawberry-leaf-down {
  top: 0.8em;
  left: 2.3em;
}

.blueberry {
  position: absolute;
  width: 6em;
  height: 5.5em;
  top: 0.6em;
  left: 0.4em;
  border-radius: 50%;
  background-color: #89a2ca;
  -moz-box-shadow: inset 0.2em -0.2em #6081B8;
  -webkit-box-shadow: inset 0.2em -0.2em #6081B8;
  box-shadow: inset 0.2em -0.2em #6081B8;
}

.blueberry:before {
  content: "";
  width: 2em;
  height: 1em;
  left: 2em;
  position: absolute;
  background-color: #3e4d64;
  border-radius: 50%;
}

.peach {
  width: 6em;
  height: 5em;
  background-color: #fca049;
  -moz-box-shadow: inset 0.2em -0.2em #c9803a;
  -webkit-box-shadow: inset 0.2em -0.2em #c9803a;
  box-shadow: inset 0.2em -0.2em #c9803a;
  border-radius: 2.5em 2.5em 3em 3em;
  position: absolute;
  top: 1.3em;
  left: 0.3em;
}

.peach:before {
  content: "";
  position: absolute;
  top: -1.7em;
  left: 3em;
  height: 0;
  width: 0;
  border: 1em solid #539e3d;
  border-radius: 50% 0 50% 0;
  border-bottom-color: #437512;
  border-right-color: #437512;
}

.cherry {
  width: 3em;
  height: 2.5em;
  background-color: #c20e2b;
  -moz-box-shadow: inset 0.2em -0.2em #9b0b22;
  -webkit-box-shadow: inset 0.2em -0.2em #9b0b22;
  box-shadow: inset 0.2em -0.2em #9b0b22;
  border-radius: 2.5em 2.5em 4em 4em;
  position: absolute;
}

.cherry1 {
  top: 3em;
  left: 0.2em;
  transform: rotate(15deg);
}

.cherry2 {
  top: 3em;
  left: 3.4em;
  transform: rotate(-15deg);
}

.cherry1:before {
  content: "";
  width: 1em;
  height: 2.8em;
  background-color: transparent;
  -moz-box-shadow: .2em -.1em 0 0 #539e3d;
  -webkit-box-shadow: .2em -.1em 0 0 #539e3d;
  box-shadow: .2em -.1em 0 0 #539e3d;
  border-radius: 50%;
  position: absolute;
  top: -2.6em;
  left: 1em;
  transform: rotate(19deg);
}

.cherry2:before {
  content: "";
  width: 1em;
  height: 2.8em;
  background-color: transparent;
  -moz-box-shadow: .2em -.1em 0 0 #539e3d;
  -webkit-box-shadow: .2em -.1em 0 0 #539e3d;
  box-shadow: .2em -.1em 0 0 #539e3d;
  border-radius: 50%;
  position: absolute;
  top: -2.5em;
  left: 0.5em;
  transform: rotate(-12deg);
}

.cherry-join {
  width: 0.7em;
  height: 0.4em;
  top: 0.6em;
  left: 3.1em;
  position: absolute;
  background-color: #724126;
  border-radius: 20%;
  transform: rotate(-12deg);
}

.berry {
  width: 1.7em;
  height: 3.5em;
  border-radius: 10% 10% 50% 50%;
  position: absolute;
  left: 2.7em;
  top: 1.1em;
  z-index: 1;
}

.raspberry {
  background-color: #d33653;
  border-left: 0.3em solid #d33653;
  border-right: 0.3em solid #d33653;
}

.berry-ball {
  width: 1.3em;
  height: 1.3em;
  position: absolute;
  border-radius: 50%;
}

.berry-ball1 {
  top: 4.1em;
  left: 2.6em;
}

.berry-ball2 {
  top: 4.1em;
  left: 3.4em;
}

.berry-ball3 {
  top: 3.4em;
  left: 2.1em;
}

.berry-ball4 {
  top: 3.4em;
  left: 3.8em;
}

.berry-ball5 {
  top: 2.4em;
  left: 1.8em;
}

.berry-ball6 {
  top: 2.4em;
  left: 4.1em;
}

.berry-ball7 {
  top: 1.5em;
  left: 2em;
}

.berry-ball8 {
  top: 1.5em;
  left: 3.9em;
}

.raspberry-leaf-up {
  top: 0.5em;
  left: 2.6em;
  z-index: 2;
}

.raspberry-leaf-down {
  top: 1em;
  left: 2.6em;
  z-index: 2;
}

.raspberry-ball:nth-child(2n+0) {
  -moz-box-shadow: inset 0.1em -0.1em #a82b42;
  -webkit-box-shadow: inset 0.1em -0.1em #a82b42;
  box-shadow: inset 0.1em -0.1em #a82b42;
}

.raspberry-ball {
  background-color: #d33653;
}

.blackberry-ball,
.blackberry {
  background-color: #5d46a0;
}

.blackberry {
  border-left: 0.3em solid #5d46a0;
  border-right: 0.3em solid #5d46a0;
}

.blackberry-ball:nth-child(2n+0) {
  -moz-box-shadow: inset 0.1em -0.1em #3d2475;
  -webkit-box-shadow: inset 0.1em -0.1em #3d2475;
  box-shadow: inset 0.1em -0.1em #3d2475;
}

.yoghurt {
  width: 2.5em;
  height: 4em;
  top: 2.2em;
  left: 1em;
  position: absolute;
  border: 0.1em solid #545454;
  background-color: white;
}

.yoghurt:after {
  content: "";
  width: 0.8em;
  height: 4em;
  top: -0.5em;
  left: 2.4em;
  position: absolute;
  border: 0.1em solid #545454;
  transform: skewY(-45deg);
  background-color: white;
}

.upper-part {
  width: 1.2em;
  height: 1.8em;
  top: 0.3em;
  left: 2.6em;
  position: absolute;
  border: 0.1em solid #545454;
  transform: rotate(-45deg);
  background-color: white;
}

.upper-part:before {
  content: "";
  width: 0em;
  height: 1.8em;
  top: -0.9em;
  left: -1em;
  position: absolute;
  border-right: 0.1em solid #545454;
  transform: rotate(90deg);
}

.hair-behind {
  width: 4.4em;
  height: 5em;
  background-color: #733f24;
  border-radius: 50% 50% 20% 20%;
  position: absolute;
  left: 1em;
}

.face {
  width: 3.3em;
  height: 4.1em;
  background-color: #ffddbe;
  border-radius: 50%;
  position: absolute;
  left: 1.5em;
  top: 0.6em;
  z-index: 2;
}

.hair-fringe {
  width: 2.7em;
  height: 1em;
  background-color: #733f24;
  border-radius: 50% 50% 50%  50%;
  position: absolute;
  z-index: 3;
  top: 0.6em;
  left: 2.2em;
  transform: rotate(15deg);
}

.hair-fringe-left {
  width: 1.7em;
  height: 0.4em;
  background-color: #733f24;
  border-radius: 50% 10% 20%  50%;
  position: absolute;
  z-index: 3;
  top: 1.4em;
  left: 0.95em;
  transform: rotate(-55deg);
}

.eyebrow {
  width: 0.8em;
  height: 0.08em;
  background-color: #733f24;
  position: absolute;
  z-index: 7;
}

.eyebrow-left {
  top: 2em;
  left: 2em;
}

.eyebrow-right {
  top: 2em;
  left: 3.7em;
}

.eye {
  width: 0.8em;
  height: 0.4em;
  border-radius: 0 0 50% 50%;
  background-color: white;
  border-top: 0.05em solid #733f24;
  position: absolute;
  z-index: 3;
}

.eye-left {
  top: 2.3em;
  left: 2em;
  border-left: 0.05em solid #733f24;
}

.blink {
  width: 0.85em;
  height: 0.5em;
  background-color: #ffddbe;
  border-bottom: 0.05em solid #733f24;
  position: absolute;
  top: -0.5em;
  left: -0.05em;
  z-index: 6;
  display: none;
}

.eye-right {
  top: 2.3em;
  left: 3.7em;
  border-right: 0.05em solid #733f24;
}

.eye-inside {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: #4b642c;
  position: absolute;
  z-index: 5;
}

.eye-inside-left {
  top: -0.03em;
  left: 0.15em;
}

.eye-inside-right {
  top: -0.03em;
  left: 0.2em;
}

.nose {
  width: 0.3em;
  height: 0.9em;
  border-left: 0.1em solid #fcb271;
  border-bottom: 0.1em solid #fcb271;
  border-radius: 10%;
  transform: skewX(-11deg);
  position: absolute;
  z-index: 5;
  top: 2.5em;
  left: 3em;
}

.mouth {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  box-shadow: -0.1em 0.1em 0 #f6767d;
  position: absolute;
  top: 3.5em;
  left: 2.9em;
  z-index: 5;
  transform: rotate(-45deg);
}

.ear {
  width: 0.3em;
  height: 0.7em;
  position: absolute;
  z-index: 3;
  background-color: #ffddbe;
  border-color: #CCB198;
}

.ear-left {
  top: 2.4em;
  left: 1.3em;
  border-radius: 50% 10% 10% 50%;
}

.ear-right {
  top: 2.4em;
  left: 4.7em;
  border-radius: 10% 50% 50% 10%;
}

.earing {
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background-color: #38e8bd;
  position: absolute;
  z-index: 5;
}

.earing-left {
  top: 3em;
  left: 1.4em;
}

.earing-right {
  top: 3em;
  left: 4.7em;
}

.neck {
  width: 1em;
  height: 1em;
  background-color: #ffddbe;
  position: absolute;
  top: 4.6em;
  left: 2.7em;
  z-index: 1;
}

.shoulders {
  width: 5.5em;
  height: 1.3em;
  background-color: #2aae8d;
  border-radius: 50% 50% 0 0;
  position: absolute;
  left: 0.5em;
  top: 5.4em;
  z-index: 2;
}

.cleavage {
  width: 2.3em;
  height: 0.5em;
  border-radius: 10% 10% 50% 50%;
  background-color: #ffddbe;
  position: absolute;
  top: 5.4em;
  left: 2.1em;
  z-index: 3;
}

.quotation {
  width: 100%;
  height: auto;
  padding: 2rem 0 2rem 0;
  background-color: #f187a2;
}

.quotation h2 {
  line-height: 6rem;
  font-style: italic;
  text-align: center;
  color: #ffffff;
  font-weight: lighter;
}

.main {
  overflow: hidden;
}

.mix {
  min-height: 100vh;
  width: 100%;
  padding-top: 12rem;
  overflow: hidden;
}

.mix .main-width {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container-fruits {
  width: 50%;
}

.container-fruits h4 {
  margin: 2rem 0 1.6rem 0;
}

.container-fruits p {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #741c32;
}

.container-fruits-items {
  width: 20rem;
  min-height: 19rem;
  margin-bottom: 3rem;
  position: relative;
}

.item {
  width: 6rem;
  height: 6rem;
  padding: 0.5rem 1rem 0.5rem 0;
  font-size: 0.7rem;
  display: inline-block;
  position: relative;
}

.item:hover {
  transform: scale(1.2, 1.2);
  cursor: pointer;
}

.yoghurt p {
  padding-top: 1em;
  font-size: 0.6em;
  text-align: center;
  color: black;
}

#move-glass-btn {
  display: none;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.4rem;
  background-color: #e93864;
  text-align: center;
}

.container-glass {
  width: 100%;
}

.container-glass-photo {
  width: 100%;
  margin-right: 0;
  margin-bottom: 3rem;
  background-image: url("../images/kichen.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
}

.container-glass-items {
  width: 25rem;
  height: 6rem;
  margin: 0 auto;
  text-align: left;
}

.glass {
  width: 10rem;
  height: 20rem;
  margin: 0 auto;
  margin-top: 8rem;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0.5rem solid rgba(255, 255, 255, 0.5);
  border-bottom: 1.5rem solid rgba(255, 255, 255, 0.5);
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
  position: relative;
}

.straw {
  position: absolute;
  z-index: 15;
  height: 26rem;
  width: 1.5rem;
  top: -8rem;
  transform: rotate(15deg);
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
}

.glass-content-big {
  height: 16rem;
  margin-top: 2.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.glass-content-up,
.glass-content-big,
.glass-content {
  width: 9rem;
}

.glass-content {
  height: 0;
}

.glass-content-up,
.glass-content-big {
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
}

.gc4 {
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%;
}

.glass-content-up {
  height: 16rem;
  top: 0rem;
  position: absolute;
}

.fill1 {
  animation: fill 800ms 1 ease normal forwards;
}

.fill2 {
  animation: fill 800ms 1 ease normal forwards;
  animation-delay: 800ms;
}

.fill3 {
  animation: fill 800ms 1 ease normal forwards;
  animation-delay: 1600ms;
}

.fill4 {
  animation: fill 800ms 1 ease normal forwards;
  animation-delay: 2400ms;
}

.fill-big {
  opacity: 0;
  animation: mixBigGlass 4000ms 3200ms 1  ease normal forwards;
}

@keyframes fill {
  0% {
    height: 0;
  }
  100% {
    height: 4rem;
  }
}

@keyframes mixBigGlass {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.wave-moving {
  width: 9rem;
  height: 1rem;
  position: absolute;
  top: -0.4rem;
  display: block;
  animation: wave 500ms infinite  alternate;
}

@keyframes wave {
  from {
    transform: skew(0, -5deg);
  }
  to {
    transform: skew(0, 5deg);
  }
}

.shake {
  -ms-animation: shake 10ms 400 ease normal;
  -webkit-animation: shake 2ms 2000 ease normal;
  -moz-animation: shake 2ms 2000 ease normal;
  animation-delay: 3200ms;
}

@keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
    -moz-transform: translate(2px, 1px) rotate(0deg);
    -o-transform: translate(2px, 1px) rotate(0deg);
    -ms-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    -moz-transform: translate(-1px, -2px) rotate(-1deg);
    -o-transform: translate(-1px, -2px) rotate(-1deg);
    -ms-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
    -moz-transform: translate(-3px, 0px) rotate(1deg);
    -o-transform: translate(-3px, 0px) rotate(1deg);
    -ms-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
    -moz-transform: translate(0px, 2px) rotate(0deg);
    -o-transform: translate(0px, 2px) rotate(0deg);
    -ms-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    -moz-transform: translate(1px, -1px) rotate(1deg);
    -o-transform: translate(1px, -1px) rotate(1deg);
    -ms-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    -moz-transform: translate(-1px, 2px) rotate(-1deg);
    -o-transform: translate(-1px, 2px) rotate(-1deg);
    -ms-transform: translate(1px, -1px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
    -moz-transform: translate(-3px, 1px) rotate(0deg);
    -o-transform: translate(-3px, 1px) rotate(0deg);
    -ms-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
    -moz-transform: translate(2px, 1px) rotate(-1deg);
    -o-transform: translate(2px, 1px) rotate(-1deg);
    -ms-transform: translate(-3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    -moz-transform: translate(-1px, -1px) rotate(1deg);
    -o-transform: translate(-1px, -1px) rotate(-1deg);
    -ms-transform: translate(-1px, -1px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
    -moz-transform: translate(2px, 2px) rotate(0deg);
    -o-transform: translate(2px, 2px) rotate(0deg);
    -ms-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
    -moz-transform: translate(1px, -2px) rotate(-1deg);
    -o-transform: translate(1px, -2px) rotate(-1deg);
    -ms-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.fruit-around {
  animation: around 800ms infinite linear normal;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mixer {
  width: 18rem;
  height: 8rem;
  margin: 0 auto;
  padding-top: 2rem;
  background-color: #77032e;
  border-top-left-radius: 45%;
  border-top-right-radius: 45%;
}

.mix-btn {
  width: 8rem;
  height: 4rem;
  margin: 0 auto;
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 5%;
  text-align: center;
  background-color: white;
  line-height: 2rem;
  display: block;
  border: none;
  vertical-align: top;
  outline: none;
}

.mix-btn:hover {
  background-color: #ad6781;
}

.mix-press {
  font-size: 1.1rem;
  background-color: #ad6781;
}

.information-mix {
  width: 25rem;
  padding: 1rem;
  margin-top: 12rem;
  color: #fff;
  top: 0;
  background-color: #e93864;
  position: absolute;
  z-index: 20;
  display: none;
}

.information-mix h1 {
  font-size: 3rem;
  padding-bottom: 1rem;
}

.information-mix h2 {
  padding-bottom: 1rem;
}

.information-mix p {
  color: white;
  margin-bottom: 1rem;
}

.close-info-mix {
  font-size: 1.6rem;
  position: absolute;
  top: -0.3rem;
  left: 23.5rem;
  border: none;
  color: #e7e7e7;
  background-color: transparent;
}

.close-info-mix:hover {
  cursor: pointer;
}

.information-mix-mobile {
  width: 100%;
  color: white;
  text-align: left;
  background-color: #e93864;
  z-index: 11;
  display: none;
  position: relative;
}

.information-mix-mobile h1 {
  text-align: center;
  font-size: 2rem;
  padding-top: 1rem;
}

.information-mix-mobile h2 {
  font-size: 1.5rem;
}

.information-mix-mobile p {
  font-size: 1rem;
  color: white;
}

.information-mix-mobile .close-info-mix {
  font-size: 1.6rem;
}

.about-us {
  width: 100%;
  min-height: 100vh;
  padding-top: 11rem;
  padding-bottom: 2rem;
}

.container-all-items {
  width: 100%;
  height: 45rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.container-all-items .item {
  width: 10rem;
  height: 10rem;
  font-size: 1.5rem;
  display: block;
  position: relative;
}

.information-aboutUs,
.information-aboutMe {
  width: 100%;
  height: 100%;
  padding: 0 1rem 1rem 1rem;
  background-color: rgba(233, 56, 100, 0.9);
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  text-align: center;
  display: none;
}

.information-aboutUs h1,
.information-aboutMe h1 {
  padding-top: 3rem;
  text-align: center;
}

.information-aboutUs h2,
.information-aboutMe h2 {
  padding-top: 2.4rem;
}

.information-aboutUs span {
  font-size: 2.4rem;
}

.information-aboutUs p,
.information-aboutMe p {
  padding-top: 1rem;
}

.close-info-aboutUs {
  text-align: right;
  font-size: 1.5rem;
  border: none;
  background-color: transparent;
  color: #E7E7E7;
}

.close-info-aboutUs:hover {
  cursor: pointer;
}

.choosen {
  display: none;
}

@media (min-width: 600px) {
  .main-width nav {
    position: relative;
    display: block;
  }
}

@media (max-width: 600px) {
  html {
    font-size: 13px;
  }
  header {
    height: 15vh;
    position: static;
  }
  header .main-width {
    justify-content: center;
  }
  header nav li {
    font-size: 1.4rem;
  }
  header nav li a {
    color: #741c32;
    font-size: 1.4rem;
  }
  .mix {
    padding-top: 0rem;
    height: auto;
  }
  .mix .main-width {
    display: flex;
    flex-direction: column;
  }
  .mix .main-width .container-fruits {
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .mix .main-width .container-fruits .container-fruits-items {
    margin: 0 auto;
    text-align: center;
  }
  .mix .main-width .container-fruits p {
    margin-bottom: 0;
    text-align: center;
  }
  .mix .main-width .container-fruits .container-base-items {
    height: auto;
    margin: 0 auto;
    text-align: center;
  }
  .mix .main-width .container-fruits .choosen {
    display: block;
  }
  .mix .main-width .container-fruits #move-glass-btn {
    display: block;
  }
  .mix .container-glass {
    width: auto;
    height: 100vh;
    background-color: #e93864;
  }
  .mix .container-glass .container-glass-photo {
    margin-bottom: 0;
  }
  .container-glass-items {
    text-align: center;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  header {
    padding: 0 1rem 0 1rem;
  }
  .mix {
    padding-left: 1rem;
  }
}

@media screen and (max-width: 601px) and (max-width: 950px) {
  .container-glass {
    width: 55%;
  }
}

@media (max-width: 600px) {
  .about-us {
    padding-top: 0;
    padding-bottom: 0;
  }
  .container-all-items {
    height: 100vh;
  }
  .container-all-items .item {
    width: 8rem;
    height: 8rem;
    font-size: 1.3rem;
  }
  .container-all-items h1 {
    text-align: right;
  }
  .container-all-items .i-am {
    text-align: right;
  }
}

@media (max-width: 810px) {
  .quotation h2 {
    line-height: 4rem;
  }
}