@font-face {
font-family: 'GothamCondensed-Book';
src: url('fonts/GothamCondensed-Book.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/*
@font-face {
font-family: 'GothamCondensed-Light';
src: url('fonts/GothamCondensed-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}*/
@font-face {
font-family: 'GothamCondensed-Medium';
src: url('fonts/GothamCondensed-Medium.otf') format('opentype');
font-weight: normal;
font-style: normal;
}


strong {
font-weight: normal;
font-family: 'GothamCondensed-Medium', sans-serif;
}

img {
border: 0;
display: block;
}

form {
margin: 0;
padding: 0;
}

table, td, input, textarea, select {
font-family: 'GothamCondensed-Book', sans-serif;
font-size: 1em;
}
input, textarea, select {
color: #002a5c;
background-color: white;
letter-spacing: 1px;
border: 1px #002a5c solid;
}
::placeholder { color: #667f9d;}
::-webkit-input-placeholder { color: #667f9d;}
:-ms-input-placeholder { color: #667f9d;}
::-ms-input-placeholder { color: #667f9d;}
:-moz-placeholder { color: #667f9d;}
::-moz-placeholder { color: #667f9d;}



table {
margin-top: 8px;
}
td {
padding-right: 10px;
line-height: 140%;
}
td:last-child {
padding-right: 0px;
}

p {
line-height: 150%;
margin:0;
padding: 8px 0 8px 0;
}

a {
color: #e3010f;
text-decoration: none;
}
.section p a {
color: white;
text-decoration: underline;
font-family: 'GothamCondensed-Medium', sans-serif;
}


body {
margin: 0;
padding: 0;
font-family: 'GothamCondensed-Book', sans-serif;
font-size: 22px;
letter-spacing: 0.5px;
background-color: white;
color: #002a5c;
text-align: center;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}


#header {
top: 0px;
left: 0px;
width: 100%;
position: fixed;
height: 140px;
z-index: 50;
transition: height 0.3s ease;
}

.header-minimized #header {
height: 64px;
}

#header-space {
height: 140px;
transition: height 0.3s ease;
}
.header-minimized #header-space {
height: 64px;
}
#footer-space {
height: 0px;
transition: height 0.3s ease;
}
.header-minimized #footer-space {
height: 76px;
}


#header-in {
position: relative;
z-index: 52;
margin: 0 auto;
max-width: 1300px;
height: 68px;
overflow: hidden;
transition: height 0.3s ease;
}

.header-minimized:not(.header-expanded) #header-in {
height: 58px;
}


/* EXPANDED MENU HEIGHT */
.header-expanded #header {
height: 300px !important;
}
.header-expanded #header #header-in {
height: 300px !important;
}


#navi {
 padding: 12px 0 0 0;
 margin: 0;
 list-style-type: none;
 display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-justify-content: space-around;
	justify-content:space-around;

transition: padding 0.3s ease;
}
.header-minimized:not(.header-expanded) #navi {
padding-top: 2px;
}

#navi > li {
 padding: 0;
 margin: 0px;
display: inline-block;
	-webkit-flex: none;
	flex: none;
text-align: center;
}

#navi a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
#navi > li > a { 
font-size: 1.27em;
display: block;
padding: 0.6em;
letter-spacing: 0.04em;
border-bottom: 1px #002a5c solid;
transition: border 0.3s ease;
}
.header-expanded #navi > li > a { 
border-bottom-color: #ffffff;
}


#navi ul {
 padding: 20px 0;
 margin: 0;
 list-style-type: none;
}
#navi ul a {
font-size: 0.9em;
color: #002a5c !important;
display: block;
padding: 4px 0px;
letter-spacing: 0.4px;
transition: color 0.3s ease;
}

.header-expanded #navi ul a {
color: #ffffff !important;
}
#navi .current_page_item > a,
#navi .current_page_parent > a,
#navi li .active-section {
color: #99ccfe;
}

.header-expanded #navi .current_page_item > a,
.header-expanded #navi .current_page_parent > a,
.header-expanded #navi li .active-section {
color: #99ccfe !important;
}


#header-bg {
z-index: 50;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 340px;
background: rgb(6,78,143);
background: -moz-linear-gradient(top, rgba(6,78,143,1) 0%, rgba(0,42,92,1) 66%, rgba(0,42,92,1) 100%);
background: -webkit-linear-gradient(top, rgba(6,78,143,1) 0%,rgba(0,42,92,1) 66%,rgba(0,42,92,1) 100%);
background: linear-gradient(to bottom, rgba(6,78,143,1) 0%,rgba(0,42,92,1) 66%,rgba(0,42,92,1) 100%);
}

#header-shine {
pointer-events: none;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 56px;
z-index: 58;
background: -moz-linear-gradient(top, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.15) 42%, rgba(255,255,255,0) 96%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.38) 0%,rgba(255,255,255,0.15) 42%,rgba(255,255,255,0) 96%);
background: linear-gradient(to bottom, rgba(255,255,255,0.38) 0%,rgba(255,255,255,0.15) 42%,rgba(255,255,255,0) 96%);
}

#logo {
z-index: 60;
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 144px;
margin-top: 5px;
background: transparent url(images/sinziger-logo.png) center center no-repeat;
background-size: contain;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transition: transform 0.3s ease, -webkit-transform 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 1000px) {
 .header-minimized:not(.header-expanded) #logo {
 transform: translate(-50%, -50%) scale(0.1);
 -webkit-transform: translate(-50%, -50%) scale(0.1);
 opacity: 0;
 }
}

@media (max-width: 999px) {
 #logo {
 margin-top: 3px;
 width: 180px;
 height: 108px;
 }

 #header {
 background-color: rgba(6,78,143,1); 
 position: absolute;
 }

 #header,
 .header-minimized #header,
 #header-space,
 #footer-space {
 display: block !important;
 height: 80px !important;
 transition-duration: 0s;
 }

 #header-in {
 height: auto !important;
 }


 #navi {
 display: none;
 }
 .header-expanded #navi {
 display: block;
 padding-bottom: 80px;
 }
 .header-expanded #header,
 .header-expanded #header #header-in {
  height: auto !important;
 }
 #navi > li {
 display: block;
 padding-top: 20px;
 }
 #navi > li:first-child {
 padding-top: 0px;
 }
 #navi > li > a {
 padding-top: 18px;
 padding-bottom: 6px;
 display: inline-block;
 }
 #navi ul {
 padding-top: 6px;
 padding-bottom: 0px;
 }
}




h1, h2, h3 {
font-size: 38px;
text-transform: uppercase;
font-family: 'GothamCondensed-Medium', sans-serif;
font-weight: normal;
letter-spacing: 1.2px;
margin: 0;
padding: 30px 0px;
}
h2 {
font-size: 31px;
letter-spacing: 1px;
padding: 24px 0px 8px 0px;
}
h3 {
font-size: 22px;
letter-spacing: 0.8px;
padding: 16px 0px 8px 0px;
}

h2:first-child,
h3:first-child {
padding-top: 8px;
}


h2 + h3 {
padding-top: 0px;
}



.tri-headline-wrap {
padding: 55px 50px 35px 50px;
}

.tri-headline {
position: relative;
display:inline-block;
margin: 0 auto;
padding: 0px 20px !important;
height: 46px;
line-height: 45px;
color: #032a63;
text-transform: uppercase;
font-family: 'GothamCondensed-Medium', sans-serif;
font-weight: normal;
font-size: 31px;
letter-spacing: 1px;
box-sizing: border-box;
background: transparent url(images/headline-blue.svg) center center no-repeat;

}
.tri-headline-l {
background: transparent url(images/headline-blue.svg) left center no-repeat;
position: absolute;
width: 41px;
top: 0px;
height: 100%;
left: -40px;
}
.tri-headline-r {
background: transparent url(images/headline-blue.svg) right center no-repeat;
position: absolute;
width: 41px;
top: 0px;
height: 100%;
right: -40px;
}

.tri-headline-white,
.tri-headline-white .tri-headline-l,
.tri-headline-white .tri-headline-r {
background-image: url(images/headline-white.svg);
}


.tri-headline-button {
padding: 0px 8px !important;
font-family: 'GothamCondensed-Book', sans-serif;
cursor: pointer;
}

.tri-headline-active,
.tri-headline-active .tri-headline-l,
.tri-headline-active .tri-headline-r {
background-image: url(images/headline-blue-active.svg);
color: white;
cursor: default;
font-family: 'GothamCondensed-Medium', sans-serif;
}


@media (max-width:999px) {
 .tri-headline {
    padding: 0px 2px !important;
    font-size: 26px;
 }
}

.intro {
position: relative;
max-width: 560px;
padding: 0px 20px;
box-sizing: border-box;
margin: 0 auto;
}
.wide-intro,
.content,
.content-split {
position: relative;
max-width: 720px;
padding: 0px 20px;
box-sizing: border-box;
margin: 0 auto;
}
.content-split {
max-width: 1200px;
}
.content-split-l {
float: left;
width: 45%;
}
.content-split-r {
float: right;
width: 45%;
}


@media (max-width:999px) {
 .content-split-l {
 padding-bottom: 16px;
 }
 .content-split-l,
 .content-split-r {
 float: none;
 width: 100% !important;
 }
}


.intro h1, .intro h2, .intro p,
.wide-intro h1, .wide-intro h2, .wide-intro p {
position:relative;
z-index: 1;
/*text-shadow: 0px 0px 6px #fff;*/
}



#homeintro {
background: #014b8b;
background: -moz-linear-gradient(top, #014b8b 0%, #034079 50%, #04305d 75%, #06254c 100%);
background: -webkit-linear-gradient(top, #014b8b 0%,#034079 50%,#04305d 75%,#06254c 100%);
background: linear-gradient(to bottom, #014b8b 0%,#034079 50%,#04305d 75%,#06254c 100%);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#homeintro-logo {
width: 480px;
height: 288px;
position: absolute;
opacity: 0.01;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.homeintro-ani #homeintro-logo {
transform: translate(-50%, -50%) scale(0.1);
-webkit-transform: translate(-50%, -50%) scale(0.1);
}

@media (max-width: 512px) {
 #homeintro-logo {
 width: 240px;
 height: 144px;
 }
}


.section-wrapper {
padding-bottom: 35px;
}

.section-wrapper + .section-wrapper {
margin-top: 50px;
}

.section {
position: relative;
overflow: hidden;
height:640px;
color: white;
background: #014b8b;
background: -moz-linear-gradient(top, #014b8b 0%, #034079 50%, #04305d 75%, #06254c 100%);
background: -webkit-linear-gradient(top, #014b8b 0%,#034079 50%,#04305d 75%,#06254c 100%);
background: linear-gradient(to bottom, #014b8b 0%,#034079 50%,#04305d 75%,#06254c 100%);
}
.ground-shine {
position: absolute;
bottom: 10px;
left: 0px;
height: 110px;
width: 75%;
background: -moz-radial-gradient(center, ellipse cover, rgba(1,114,179,0.28) 0%, rgba(1,114,179,0) 72%, rgba(1,114,179,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(1,114,179,0.28) 0%,rgba(1,114,179,0) 72%,rgba(1,114,179,0) 100%);
background: radial-gradient(ellipse at center, rgba(1,114,179,0.28) 0%,rgba(1,114,179,0) 72%,rgba(1,114,179,0) 100%);
}



.bigspace {
height: 40px;
}
.medspace {
height: 24px;
}
.smallspace {
height: 12px;
}
@media (min-width: 1400px) {
 .bigspace {
 height: 50px;
 }
 .medspace {
 height: 32px;
 }
 .smallspace {
 height: 16px;
 }
}
@media (max-width: 999px) {
 .bigspace {
 height: 25px;
 }
 .medspace {
 height: 16px;
 }
 .smallspace {
 height: 8px;
 }
}

.section-sep {
margin: 0 auto;
max-width: 1000px;
height: 2px;
background: -moz-linear-gradient(left, rgba(0,42,92,0) 0%, rgba(0,42,92,1) 10%, rgba(0,42,92,1) 90%, rgba(0,42,92,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,42,92,0) 0%,rgba(0,42,92,1) 10%,rgba(0,42,92,1) 90%,rgba(0,42,92,0) 100%);
background: linear-gradient(to right, rgba(0,42,92,0) 0%,rgba(0,42,92,1) 10%,rgba(0,42,92,1) 90%,rgba(0,42,92,0) 100%);
}



#footer {
text-align: center;
}
#footer-links {
padding: 14px 0px;
background-color: #002a5c;
margin: 0px;
list-style-type: none;
}
#footer-links ul {
display: inline-block;
padding: 10px;
list-style-type: none;
text-align: left;
	vertical-align: top;
}

#footer-links li {
display: block;
padding: 6px 15px;
margin: 0;
}

@media (max-width: 999px) {
 #footer-links li {
 display: block;
 padding: 15px 0px;
 }
}

#footer-links a {
color: white;
padding: 0px 15px;
text-transform: uppercase;
white-space: nowrap;
}
#footer a:hover {
/*color: #e3010f;*/
}
#gerri img {
display: inline;
vertical-align: middle;
margin-top: -2px;
margin-left: 2px;
}





/* pageview */
.pageview div.page {
display: none;
visibility: hidden;
}
.pageview {
width: 100%;
height: 100%;
-webkit-user-select: none;
user-select: none;
}
.hi-pv {
position: relative;
}
.hi-pv-in {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.hi-pv-page {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}

.hi-pv-paging {
position: absolute;
bottom: 35px;
right: calc(50% - 460px);
z-index: 30;
white-space: nowrap;
}
.hi-pv-bullet {
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 0.5px;
}
.hi-pv-bullet + .hi-pv-bullet {
margin-left: 28px;
}
.hi-pv-bullet-active .bullet-title {
opacity: 1;
}

.bullet-title {
opacity: 0.5;
transition: opacity 0.5s ease;
}
.fixed-width-bullets .hi-pv-bullet {
width: 100px;
}
.fixed-width-bullets .hi-pv-bullet + .hi-pv-bullet {
margin-left: 10px;
}

.hi-pv-button {
    z-index: 35;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
height: 32px;
width: 20px;
background: transparent url(images/tri.svg) center center no-repeat;
background-size: contain;
}
.hi-pv-previous {
left: 40px;
transform: translateY(-50%) scaleX(-1);
-webkit-transform: translateY(-50%) scaleX(-1);
}
.hi-pv-next {
right: 40px;
}
.hi-pv-button-exceeds {
opacity: 0.5;
}

@media (max-width: 1199px) {
 .hi-pv-button {
 display: none;
 width: 0px;
 }
}

.force-paging-hidden .hi-pv-paging {
display: none !important;
}

.multiline-bullet-titles .hi-pv-paging {
bottom: 25px;
}
.bullet-content {
display: none;
}


.title-pic {
background: transparent none left center no-repeat;
background-size: contain;
width: 100%;
}


.big-bottle {
position: absolute;
left: calc(50% - 300px);
top: 60px;
height: 520px;
width: 160px;
transform: translateY(-200%);
background: transparent none bottom center no-repeat;
background-size: contain;
z-index: 3;
transition: transform 0.4s ease;
}

.small-bottle {
position: absolute;
left: calc(50% - 470px);
top: 90px;
height: 460px;
width: 170px;
transform: translateY(-200%);
background: transparent none bottom center no-repeat;
background-size: contain;
z-index: 2;
transition: transform 0.4s ease;
transition-delay: 0.4s;
}
.small-bottle-wide {
left: calc(50% - 560px);
width: 290px;
}

.bottle-deco {
position: absolute;
    right: calc(50% + 280px);
bottom: 35px;
height: 250px;
width: 180px;
transform: translateY(150%) scale(1.7);
background: transparent none bottom center no-repeat;
background-size: contain;
z-index: 3;
transition: transform 0.65s ease;
transition-delay: 0.4s;
}


.reflection {
z-index: 1;
transform: translateY(297%) scaleY(-1);
opacity: 0.3;
transition: transform 0.4s ease;
}

.small-bottle.reflection {
transition-delay: 0.4s;
}
.bottle-deco.reflection {
transition-delay: 0.4s;
}

.revealed .big-bottle,
.revealed .small-bottle,
.revealed .bottle-deco {
transform: translateY(0%);
}
.revealed .reflection {
transform: translateY(97%) scaleY(-1);
}


.bottle-thumb {
width: 100%;
height: 110px;
margin-bottom: 6px;
background: transparent none bottom center no-repeat;
background-size: contain;
}

.cornerborder {
border: 40px #4886BB solid;
border-image: url(images/cornerborder.png) 20% stretch;
}
.section-red .cornerborder,
.section-lightblue .cornerborder,
.section-lemon .cornerborder,
.section-green .cornerborder {
border-image: url(images/cornerborder-white.png) 20% stretch;
}

.close {
position: absolute;
right: -13px;
top: -13px;
width: 26px;
height: 26px;
background: transparent url(images/iconmonstr-x-mark-6.svg) center center no-repeat;
background-size: contain;
}

.infolayer {
display: none;
position: absolute;
text-align: left;
width: 100%;
max-width: 100%;
box-sizing: border-box;
left: 0px;
top: 12px;
font-size: 18px;
}
.infolayer *:nth-child(2) {
padding-top: 0px !important;
}
.infolayer *:last-child {
padding-bottom: 0px !important;
}

.long-infolayer .infolayer {
    top: -38px;
    font-size: 16px;
}

.call-to-action {
display: inline-block;
margin-top: 20px;
font-size: 32px;
padding-left: 40px;
text-decoration: none !important;
background: transparent url(images/tri-red.svg) 0px 0px no-repeat;
background-size: contain;
animation: movetri 1s infinite;
transition: color 0.2s ease;
}

@keyframes movetri {
    0%  {background-position-x: 0px;}
    30% {background-position-x: 8px;}
    60% {background-position-x: 0px;}
}

.call-to-action:hover {
color: #e3010f;
}

.slider-half-pic {
position: absolute;
top: 5%;
height: 90%;
right: 0;
width: 50%;
background: transparent none center left no-repeat;
background-size: cover;
}

.slider-text {
position: absolute;
top: 50%;
left: calc(50% - 530px);
width: 480px;
font-size: 24px;
text-align: left;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

@media (max-width: 1199px) {
 .slider-text {
  left: calc(50% - 460px);
 }
 .slider-half-pic {
  width: 45%;
 }
}


.page-text {
position: absolute;
top: 52px;
left: calc(50% - 60px);
width: 540px;
text-align: left;
}

.short-page-texts .page-text {
top: 102px;
}

div.page a {
font-family: 'GothamCondensed-Medium', sans-serif;
color: white;
}

.infolayer-link {
background: transparent url(images/iconmonstr-plus-5.svg) left center no-repeat;
background-size: contain;
padding-left: 30px;
text-transform: uppercase;
text-decoration: none !important;
}




.section-red .tri-headline {
color: #e3010f;
}
.section-red .tri-headline,
.section-red .tri-headline-l,
.section-red .tri-headline-r {
background-image: url(images/headline-red.svg);
}

.section-red .section {
background: #ae0b04;
background: -moz-linear-gradient(top, #e3010f 0%, #ae0b04 75%, #ae0b04 100%);
background: -webkit-linear-gradient(top, #e3010f 0%,#ae0b04 75%,#ae0b04 100%);
background: linear-gradient(to bottom, #e3010f 0%,#ae0b04 75%,#ae0b04 100%);
}

.section-red .ground-shine,
.section-lightblue .ground-shine,
.section-lemon .ground-shine,
.section-green .ground-shine {
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 72%, rgba(255,255,255,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.16) 0%,rgba(255,255,255,0) 72%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.16) 0%,rgba(255,255,255,0) 72%,rgba(255,255,255,0) 100%);
}




.section-green .tri-headline {
color: #008f42;
}
.section-green .tri-headline,
.section-green .tri-headline-l,
.section-green .tri-headline-r {
background-image: url(images/headline-green.svg);
}

.section-green .section {
background: #007d31;
background: -moz-linear-gradient(top, #008f42 0%, #007d31 75%, #007d31 100%);
background: -webkit-linear-gradient(top, #008f42 0%,#007d31 75%,#007d31 100%);
background: linear-gradient(to bottom, #008f42 0%,#007d31 75%,#007d31 100%);
}




.section-lightblue .tri-headline {
color: #33a2d4;
}
.section-lightblue .tri-headline,
.section-lightblue .tri-headline-l,
.section-lightblue .tri-headline-r {
background-image: url(images/headline-lightblue1b26.svg?v2);
}

.section-lightblue .section {
background: #33a3c7;
background: linear-gradient(to bottom, #33a2d4 0%,#33a3c7 75%,#33a5c7 100%);
}




.section-lemon .tri-headline {
color: #b1d21e;
}
.section-lemon .tri-headline,
.section-lemon .tri-headline-l,
.section-lemon .tri-headline-r {
background-image: url(images/headline-lemon.svg);
}

.section-lemon .section {
background: #007d31;
background: -moz-linear-gradient(top, #b1d21e 0%, #afc21e 75%, #afc21e 100%);
background: -webkit-linear-gradient(top, #b1d21e 0%,#afc21e 75%,#afc21e 100%);
background: linear-gradient(to bottom, #b1d21e 0%,#afc21e 75%,#afc21e 100%);
}





.zitrone {
position: absolute;
left: calc(50% + 410px);
bottom: 0px;
width: 150px;
height: 180px;
z-index: 1;
background: transparent url(images/zitrone.png) center center no-repeat;
background-size: contain;
animation: floatinwater 2.7s infinite;
}

@keyframes floatinwater {
    0%  {transform: translateY(0px);}
    35% {transform: translateY(10px);}
    100% {transform: translateY(0px);}
}


.bubble {
position: absolute;
left: 50%;
opacity: 0;
bottom: -120px;
width: 30px;
height: 30px;
background: transparent url(images/bubbles.png) 0 0 no-repeat;
animation: bubbleup 3.5s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}

.low-opacity {
animation: bubbleuplowop 3.5s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}

.bubble-ani2 {
animation: bubbleup2 3.3s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}
.bubble-ani2.low-opacity  {
animation: bubbleup2lowop 3.3s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}


.bubble-ani3 {
animation: bubbleup3lowop 7.5s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}
.bubble-ani3.low-opacity {
animation: bubbleup3lowop 6.8s cubic-bezier(0.33, 0.38, 0.6, 0.69) infinite;
}

.bubble-2 {background-position: 0px -30px;}
.bubble-3 {background-position: 0px -60px;}
.bubble-4 {background-position: 0px -90px;}
.bubble-5 {background-position: 0px -120px;}
.bubble-6 {background-position: 0px -150px;}
.bubble-7 {background-position: 0px -180px;}
.bubble-8 {background-position: 0px -210px;}


@keyframes bubbleup {
    0%  {transform: translate(0px) rotate(2deg) scale(0.5); opacity: 0;}
    25% {transform: translate(-5px, -200px) rotate(8deg) scale(0.7); opacity: 1;}
    45% {transform: translate(10px, -380px) rotate(14deg) scale(0.8); }
    100% {transform: translate(-5px, -700px) rotate(16deg) scale(1);}
}

@keyframes bubbleup2 {
    0%  {transform: translate(0px) rotate(0deg) scale(0.5); opacity: 0;}
    28% {transform: translate(2px, -200px) rotate(2deg) scale(0.75); opacity: 1;}
    49% {transform: translate(6px, -380px) rotate(4deg) scale(0.85); }
    100% {transform: translate(0px, -700px) rotate(8deg) scale(1);}
}

@keyframes bubbleup3 {
    0%, 50%  {transform: translate(0px) rotate(50deg) scale(0.5); opacity: 0;}
    66% {transform: translate(-8px, -200px) rotate(45deg) scale(0.75); opacity: 1;}
    76% {transform: translate(2px, -380px) rotate(42deg) scale(0.95); }
    100% {transform: translate(-10px, -700px) rotate(41deg) scale(1.1);}
}

@keyframes bubbleuplowop {
    0%  {transform: translate(0px) rotate(2deg) scale(0.5); opacity: 0;}
    25% {transform: translate(-5px, -200px) rotate(8deg) scale(0.85); opacity: 0.68;}
    45% {transform: translate(10px, -380px) rotate(14deg) scale(0.95); }
    100% {transform: translate(-5px, -700px) rotate(16deg) scale(1);}
}

@keyframes bubbleup2lowop {
    0%  {transform: translate(0px) rotate(0deg) scale(0.5); opacity: 0;}
    28% {transform: translate(2px, -200px) rotate(2deg) scale(0.75); opacity: 0.65;}
    49% {transform: translate(6px, -380px) rotate(4deg) scale(0.95); }
    100% {transform: translate(0px, -700px) rotate(8deg) scale(1);}
}

@keyframes bubbleup3lowop {
    0%, 50%  {transform: translate(0px) rotate(50deg) scale(0.5); opacity: 0;}
    66% {transform: translate(-8px, -200px) rotate(45deg) scale(0.75); opacity: 0.7;}
    76% {transform: translate(2px, -380px) rotate(42deg) scale(0.85); }
    100% {transform: translate(-10px, -700px) rotate(41deg) scale(0.95);}
}




.mobile-only {
display: none;
}

.widescreen-only {
display: none;
}

@media (max-width: 999px) {
 .mobile-only {
 display: block;
 }
 .desktop-only {
 display: none;
 }
}

@media (min-width: 1200px) {
 .widescreen-only {
 display: block;
 }
}


.home-section {
height: 40vw;
min-height: 450px;
max-height: 600px;
}




#menu-button {
display: none;
z-index: 180;
position: absolute;
right: 19px;
top: 15px;
width: 44px;
height: 44px;
}

@media (max-width:999px) {
 #menu-button {
  display: block;
 }
 .mobile-hidden {
 display: none;
 }
}

#menu-button span {
height: 4px;
border-radius: 2px;
width: 34px;
margin-left: -17px;
margin-top: -1.5px;
left: 22px;
top: 50%;
position: absolute;
background-color: white;
}
#menu-button #menu-line1 {
transform: translateY(-13px);
-webkit-transform: translateY(-13px);
-ms-transform: translateY(-13px);
transition: transform ease 0.3s, -webkit-transform ease 0.3s, width ease 0.3s, margin-left ease 0.3s;
}
#menu-button #menu-line2 {
transition: opacity ease 0.3s;
transition-delay: 0.15s;
}
#menu-button #menu-line3 {
transform: translateY(13px);
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
transition: transform ease 0.3s, -webkit-transform ease 0.3s, width ease 0.3s, margin-left ease 0.3s;
}

.header-expanded #menu-button #menu-line1 {
transform: translateY(0px) rotate(45deg);
-webkit-transform: translateY(0px) rotate(45deg);
width: 44px;
margin-left: -22px;
transition: transform ease 0.3s, -webkit-transform ease 0.3s, width ease 0.3s, margin-left ease 0.3s;
}

.header-expanded #menu-button #menu-line2 {
opacity: 0;
transition: opacity ease 0.3s;
}

.header-expanded #menu-button #menu-line3 {
transform: translateY(0px) rotate(-45deg);
-webkit-transform: translateY(0px) rotate(-45deg);
width: 44px;
margin-left: -22px;
transition: transform ease 0.3s, -webkit-transform ease 0.3s, width ease 0.3s, margin-left ease 0.3s;
}


.mobile-bottle {
background: transparent none center center no-repeat;
background-size: contain;
height: 360px;
max-height: 90vh;
margin-top: 4px;
pointer-events: none;
}




@media (max-width:999px) {

 .section:not(.mobile-too), .pageview, div.page, .hi-pv-in {
  height: auto !important;
  min-height: 0px !important;
  max-height: 9999px !important;
  position: static !important;
  overflow: visible !important;
 }

 div.page {
 padding-top: 10px;
 padding-bottom: 10px;
 border-bottom: 1px white solid;
 display: block !important;
 }

 .slider-text,
 .page-text  {
 position: static;
 width: auto;
 padding: 20px;
text-align: center;
 transform: translateY(0%);
 -webkit-transform: translateY(0%);
 }

 .call-to-action {
    font-size: 26px;
 }

 .slider-half-pic {
 position: static;
 height: 200px;
 width: 100% !important;
 background-position: center center;
 background-size: contain;
 }
 .title-pic {
 margin-bottom: -10px;
 background-position: 50% 70%;
 }

 .home-pageview .hi-pv-paging,
 .section-pageview .hi-pv-paging,
 .home-pageview .hi-pv-button,
 .section-pageview .hi-pv-button {
  display: none !important;
 }

 .ground-shine,
 .big-bottle,
 .small-bottle,
 .bottle-deco {
 display: none;
 }

 .infolayer {
 position: relative;
 left: 0px !important;
 top: 0px !important;
 }

}


@media (max-width:399px) {
 .title-pic {
 margin-bottom: -25px;
 }
}


.content ul,
.content-split ul {
line-height: 150%;
list-style-type: none;
margin: 0;
padding: 8px 0px;
}

.content ul li::before,
.content-split ul li::before {
content: "• ";
padding-right: 10px;
}


.interaction-circle {
z-index: 2;
position: absolute;
background-color: #e70016;
width: 6vw;
height: 6vw;
max-width: 30px;
max-height: 30px;
border-radius: 15px;
animation: circlepulse 1.5s infinite;
transition: opacity 0.4s ease;
opacity: 0.7;
}

@media (min-width: 1000px) {
#interaction-text strong {
font-size: 26px;
}
}

.interaction-circle:hover,
.interaction-circle-active {
opacity: 1;
}

@keyframes circlepulse {
    0%  {transform: translate(-200%, -50%) scale(0.85); }
    40% {transform: translate(-200%, -50%) scale(1.1);}
    100% {transform: translate(-200%, -50%) scale(0.85);}
}




.condense-and-center-slides .section, .condense-and-center-slides .pageview, .condense-and-center-slides  div.page, .condense-and-center-slides .hi-pv-in {
  height: auto !important;
  min-height: 0px !important;
  max-height: 9999px !important;
  position: static !important;
  overflow: visible !important;
 }

.condense-and-center-slides .page-text {
    position: static;
    width: auto;
    max-width: 780px;
    text-align: center;
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 24px;
}

.page-item-87 {
	display: none;
}

#insta svg,
#fb svg {
display:block;
width:1em;
height:1em;
}
#insta,
#fb {
	transition: top 0.3s ease;
	position: absolute;
	top: 1.5em;
	right: 4em;
}
#insta {
right: 2em;
}

@media (min-width: 1000px) {
.header-minimized:not(.header-expanded) #insta,
.header-minimized:not(.header-expanded) #fb {
top: 1em;
}
}


@media (max-width: 1150px) {
  #navi {
   	font-size:0.9em;
  }
  #insta,
  #fb {
    top: 1.35em;
  }
}
@media (max-width: 999px) {
  #insta {
	top: 1.1em;
		font-size: 1.2em;
		right: auto;
		left: 3em;
  }
  #fb {
		top: 1.1em;
		font-size: 1.2em;
		right: auto;
		left: 1em;
  }
}