/*
Theme Name: Livegreen
*/

@font-face {
font-family: 'GC';
src: url('fonts/gc.woff') format('woff');
}

@font-face {
font-family: 'TitilliumWeb';
src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'TitilliumWebBold';
src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
}


img {
border: 0;
display: block;
}

form {
margin: 0;
padding: 0;
}

table, td, input, textarea, select {
font-family: 'TitilliumWeb', sans-serif;
font-size: 1em;
}

p {
line-height: 34px;
margin:0;
padding: 14px 0 14px 0;
}
@media (max-width:1019px) {
 p {
 line-height: 24px;
 }
}

p a {
color: #86bc25;
text-transform: uppercase;
font-family: 'TitilliumWeb';
}

strong {
font-weight: normal;
font-family: 'TitilliumWebBold';
}

body {
margin: 0;
padding: 0;
font-family: 'TitilliumWeb', sans-serif;
font-size: 19px;
letter-spacing: 0.5px;
background: white;
color: #000;
text-align: center;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

@media (max-width:1019px) {
body {
font-size: 14px;
}
}

::selection {
color: white; 
background-color: #86bc25;
}

#topnavi {
background-color: #86bc25;
height: 80px;
position: relative;
display: none;
color: white;
font-family: 'GC', sans-serif;
min-width: 1020px;
}

#topnavi .navi {
position: absolute;
width: 1020px;
top: 24px;
left: 50%;
margin-left: -510px;
text-align: center;
}

#topnavi .lang-select {
position: absolute;
width: 200px;
top: 24px;
left: 32px;
text-align: left;
}

#topnavi .navi a,
.lang-select a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'GC', sans-serif;
font-size: 24px;
}
#topnavi .navi a {
padding: 0px 10px 0 10px;
}

.lang-select .active,
.navi .active {
color: #000000 !important;
cursor: default;
}
#topnavi .navi a:hover,
.lang-select a:hover {
color: #000000 !important;
}


#topnavi .social-wrap {
display: none;
}

@media (max-width:1019px) {
 #topnavi {
 height: 670px;
 min-height: 100vh;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 z-index: 1000;
 min-width: 320px;
 }
 #topnavi .navi,
 #topnavi .lang-select {
 font-size: 26px;
 }
 #topnavi .navi {
 position: static;
 top: auto;
 left: auto;
 width: auto;
 margin-left: 0px;
 padding-top: 90px;
 padding-bottom: 30px;
 text-align: center;
 }
 #topnavi .navi a {
 display: block;
 padding: 7px 10px 7px 10px;
 }
 #topnavi .navdot {
 display: none;
 }
 #topnavi .lang-select {
 position: static;
 top: auto;
 left: auto;
 width: auto;
 text-align: center;
 }
 #topnavi .social-wrap {
 margin-top: 38px;
 position: relative;
 display: block;
 height: 84px;
 text-transform: uppercase;
 }
 #topnavi .social {
 left: 50%;
 bottom: 0px;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 }
}












#menu-button {
z-index: 1000;
position: absolute;
right: 28px;
top: 17px;
width: 44px;
height: 44px;
}
@media (max-width:1019px) {
 #menu-button {
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  right: 22px;
  top: 11px;
 }
}

#menu-button span {
height: 3px;
border-radius: 1.5px;
width: 44px;
margin-left: -22px;
margin-top: -1.5px;
left: 22px;
top: 50%;
position: absolute;
background-color: #86bc25;
}
#menu-button #menu-line1 {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
}
#menu-button #menu-line3 {
transform: translateY(10px);
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
}


#wrapper {
position: relative;

}


.social {
position: absolute;
z-index: 1;
}
.social img {
float: left;
}
.social a + a img {
margin-left: 20px;
}

#social-head {
left: 28px;
top: 20px;
}
@media (max-width:1019px) {
 #social-head {
 display: none;
 }
}
#social-footer {
right: 30px;
top: 50%;
margin-top: -21px;
}
@media (max-width:1019px) {
 #social-footer {
 right: auto;
 left: 50%;
 top: 76px;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 }
}


#intro-section {
position: relative;
height: 1080px;
overflow: hidden;
}

#intro-section-in {
position: absolute;
left: 0;
width: 100%;
top: 50%;
margin-top: -565px;
height: 1130px;
overflow: hidden;
}


#intro-stage {
position: absolute;
left: 50%;
top: 0px;
width: 1340px;
height: 800px;
margin-left: -718px;
z-index: 2;
}
#Stage {
background-color: transparent !important;
}

@media (max-width:1380px) {
 #intro-stage {
 transform: scale(0.8) translateY(-100px);
 -webkit-transform: scale(0.8) translateY(-100px);
 -ms-transform: scale(0.8) translateY(-100px);
     margin-left: -708px;
 }
}

@media (max-width:1019px) {
 #intro-section {
 height: 670px;
 }
 #intro-section-in {
 position: static !important;
 margin-top: 0px !important;
 height: 670px;
 left: auto;
 top: auto;
 }
}


#intro-stage-mobile {
position: absolute;
top: 190px;
left: 0;
width: 100%;
}
.mobile-pack-pic {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
    transform: translateX(-27px);
    -webkit-transform: translateX(-27px);
    -ms-transform: translateX(-27px);
}
#intro-stage-mobile .hi-pv-paging {
    bottom: -20px !important;
}



#intro-title h2 {
padding-top: 830px;
font-size: 48px;
}
@media (max-width:1380px) {
 #intro-title h2 {
  padding-top: 680px;
  font-size: 40px;
 }
}
@media (max-width:1019px) {
 #intro-title h2 {
  padding-top: 523px;
  font-size: 22px;
 }
}

#shopbutton {
position: absolute;
z-index: 99;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
left: 50%;
margin-left: 605px;
}

@media (max-width:1550px) {
 #shopbutton {
    left: calc(50% + 260px);
    margin-left: 0px;
    top: 14.5%;
 }
}

@media (max-width:1380px) {
 #shopbutton {
    left: calc(50% + 480px);
    margin-left: 0px;
    width: 120px;
    height: 120px;
    top: 41%;
 }
}

@media (max-width:1250px) {
 #shopbutton {
    left: calc(50% + 209px);
    margin-left: 0px;
    top: 11.5%;
 }
}


@media (max-width:1019px) {
 #shopbutton {
    width: 80px;
    height: 80px;
    right: auto;
    left: calc(50% + 90px);
    top: 50%;
    margin-left: 0px;
    margin-top: 10px;
 }
}

@media (max-width:359px) {
 #shopbutton {
    left: calc(50% + 65px);
 }
}

.black {
color: #000;
}
.green {
color: #86bc25;
}

.centerpic-before {
height: 25px;
}
.centerpic-after {
height: 20px;
}
.centerpic {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

@media (max-width:1019px) {
 .centerpic-before {
 height: 40px;
 }

}


#green-bar {
position: relative;
background-color: #86bc25;
min-width: 1020px;
min-height: 220px;
}
#green-bar-in {
min-height: 220px;
}
.green-bar-icon {
position: absolute;
top: 46px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
text-align: center;
min-width: 240px;
text-decoration: none;
}
.green-bar-icon img {
display: inline;
}
#gbi-1 {
margin-left: -350px;
}
#gbi-3 {
margin-left: 350px;
}
.green-bar-icon-title {
color: white;
text-transform: uppercase;
font-family: 'GC';
font-weight: normal;
letter-spacing: 1px;
text-align: center;
white-space: nowrap;
padding-top:5px;
font-size: 32px;
}

#green-bar-cols {
max-width: 1020px;
margin: 0 auto;
}
.green-bar-col {
float: left;
width: calc((100% - 40px) / 3);
line-height: 34px;
}
#gbc-2,
#gbc-3 {
margin-left: 20px;
}

#green-bar-text {
display: none;
padding-bottom: 40px;
color: white;
}



@media (max-width:1019px) {
 #green-bar {
  min-width: 320px;
  min-height: 110px;
  width: 100%;
  overflow: hidden;
 }
 #green-bar-in {
 min-height: 110px;
 }

 .green-bar-icon {
  top: 23px;
  min-width: 120px;
  
 }
 .green-bar-icon img {
  width: 40px;
  height: 40px;
 }
 .green-bar-icon-title {
  font-size: 13px;
  padding-top: 0px;
  letter-spacing: 0.5px;
 }
 #gbi-1 {
 margin-left: 0px;
 left: 16%;
 }
 #gbi-3 {
 margin-left: 0px;
 left: 84%;
 }

 .green-bar-col {
 display: none;
 margin: 0 auto !important;
 float: none;
 line-height: 24px;
 width: auto;
 min-width: 0;
 max-width: 500px;
 padding: 0 20px 0 20px;
 }

}

@media (max-width:374px) {
 .green-bar-icon-title {
 width: 120px;
 white-space: normal;
 }
 #green-bar {
 min-height: 128px;
 }
 #green-bar-in {
 min-height: 128px;
 }
}

.bigpic-wrapper {
min-width: 1020px;
height: 720px;
overflow: hidden;
position: relative;
}
.bigpic {
left: 0;
top: 0;
position: relative;
height: 720px;
min-width: 1020px;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width:1019px) {
 .bigpic {
  min-width: 320px;
  height: 300px;
 }
 .bigpic-wrapper {
  min-width: 320px;
  height: 300px;
 }
}

@media (max-width:1019px) {
 .pic-align-10 {background-position: 10% 0%;}
 .pic-align-20 {background-position: 20% 0%;}
 .pic-align-30 {background-position: 30% 0%;}
 .pic-align-40 {background-position: 40% 0%;}
 .pic-align-50 {background-position: 50% 0%;}
 .pic-align-60 {background-position: 60% 0%;}
 .pic-align-70 {background-position: 70% 0%;}
 .pic-align-80 {background-position: 80% 0%;}
 .pic-align-90 {background-position: 90% 0%;}
}

.title-circle {
z-index: 120;
background-color: #86bc25;
position: absolute;
width: 220px;
height: 220px;
margin-left: -110px;
margin-top: -110px;
border-radius: 110px;
left: 66%;
top: 50%;
text-transform: uppercase;
font-family: 'GC';
font-weight: normal;
}
.title-circle span {
white-space: nowrap;
color: white;
text-transform: uppercase;
font-size: 32px;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.title-circle-left {
left: 33%;
}

.title-small span {
font-size: 28px !important;
}
.title-xsmall span {
font-size: 24px !important;
}

@media (max-width:1019px) {
 .title-circle {
 transform: scale(0.5);
 -webkit-transform: scale(0.5);
 -ms-transform: scale(0.5);
 left: 75%;
 }
 .title-circle-left {
 left: 25%;
 }
}


.section {
min-height: 600px;
min-width: 1020px;
position: relative;
}
@media (max-width:1019px) {
 .section {
  min-width: 320px;
  min-height: 0px;
 }
}

#faq {
background-color: #F5F2ED;
}


h2 {
color: #86bc25;
font-size: 60px;
text-transform: uppercase;
font-family: 'GC';
font-weight: normal;
letter-spacing: 1.2px;
margin: 0;
}
h2 em {
font-style: normal;
color: black;
}
@media (max-width:1019px) {
 h2 {
  font-size: 40px;
 }
}

.content {
width: 1000px;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 70px;
}

#faq .content {
padding-bottom: 110px;
}

@media (max-width:1019px) {
 .content {
  width: calc(100vw - 50px);
  padding-top: 20px;
  padding-bottom: 40px;
 }

 #faq .content {
 padding-bottom: 70px;
 }
}

.col1of3 {
float: left;
width: 32%;
margin-right: 1.99%;
}
.col2of3 {
float: left;
width: 32%;
}
.col3of3 {
float: left;
width: 32%;
margin-left: 1.99%;
}

.col1of2 {
float: left;
width: 48%;
}
.col2of2 {
float: right;
width: 48%;
}


@media (max-width:1019px) {
 .col1of3, .col2of3, .col3of3, .col1of2, .col2of2 {
 float: none;
 width: auto;
 margin: 0 !important;
 }
 .col2of3, .col3of3, .col2of2 {
 padding-top: 15px;
 }
}


#section-dots {
opacity: 0;
position: fixed;
right: 40px;
top: 50%;
width: 14px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
z-index: 2000;
}

@media (max-width:1100px) {
 #section-dots {
  width: 0px;
  overflow: hidden;
  visibility: hidden;
 }
}

#section-dots a {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
overflow: hidden;
display: block;
border-radius: 7px;
background-color: white;
border: 3px #86bc25 solid;
box-sizing: border-box;
}
#section-dots a + a {
margin-top: 32px;
}
#section-label {
background-color: white;
padding: 2px 46px 2px 13px;
border-radius: 20px;
text-transform: uppercase;
font-family: 'TitilliumWeb';
color: #86bc25;
position: absolute;
right: -10px;
top: 0px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
display: none;
white-space: nowrap;
}


#logo {
position: absolute;
top:40px;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 1;
}


#scroll-desktop {
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
#scroll-mobile {
position: absolute;
bottom:35px;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}



@media (max-width:1380px) {
 #logo {
  width: 216px;
  height: 200px;
 }
 #scroll-desktop {
     bottom: 275px;
 }
}

@media (max-width:1019px) {
 #logo {
  width: 140px;
  height: 130px;
  top: 24px;
  /*
  width: 220px;
  height: 203px;
  */
 }
}
/*
@media (max-width:400px) {
 #logo {
  width: 140px;
  height: 130px;
 }
}
*/

#footer {
min-width: 1020px;
position: relative;
height: 120px;
background-color: #86bc25;
color: white;
font-family: 'TitilliumWeb';
}
#footer-l {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#footer-c {
position: absolute;
left: 50%;
width: 260px;
margin-left: -130px;
text-align: center;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
#footer-r {
position: absolute;
right: 224px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
text-transform: uppercase;
}

#footer a {
color: white;
text-decoration: underline;
text-transform: uppercase;
}
#footer-l a,
#footer-c a {
padding-left: 10px;
padding-right: 10px;
}

@media (max-width:1019px) {
 #footer {
  min-width: 320px;
  height: 170px;
 }
 #footer-l {
 left: 10px;
 width: auto;
 top: auto;
 bottom: 15px;
 transform: translateY(0);
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 }
 #footer-c {
 left: auto;
 width: auto;
 margin-left: 0px;
 top: auto;
 right: 10px;
 bottom: 15px;
 transform: translateY(0);
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 }
 #footer-l a,
 #footer-c a {
 padding-left: 5px;
 padding-right: 5px;
 font-size: 13px;
 }

 #footer-r {
 right: auto !important;
 white-space: nowrap;
 left: 50%;
 top: 24px;
 transform: translateX(-50%)  translateY(0);
 -webkit-transform: translateX(-50%)  translateY(0);
 -ms-transform: translateX(-50%)  translateY(0);
 }
 #footer .social {
 white-space: nowrap;
 }
 #footer .social img {
 float: none;
 display: inline;
 } 
}

@media (max-width:374px) {
 #footer-c {
 display: none;
 }
}



@media (max-width:599px) {
 .woocommerce #footer-c {
 display: none;
 }
}
@media (min-width:1020px) and (max-width:1599px) {
 .woocommerce #footer-c {
 display: none;
 }
}





.accordion {
padding-top: 20px;
max-width: 1020px;
margin: 0 auto;
border-bottom: 1px #b9b6ac solid;
}

.acc_head {
border-top: 1px #b9b6ac solid;
padding: 22px 0 22px 0;
display: block;
color: #000;
text-decoration: none;
text-align: center;
}
.acc_content {
display: none;
background-color: white;
padding: 24px 40px 40px 40px;
text-align: center;
border-top: 1px #b9b6ac solid;
}

.close-this-p {
padding-top: 16px;
padding-bottom: 0px;
}




/* pageview */
.pageview .page {
display: none;

}
.pageview {
  width: 100%;
  height: 600px;
-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%;
}

.hi-pv-paging {
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 900;
}
.hi-pv-bullet {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
overflow: hidden;
display: block;
border-radius: 7px;
background-color: white;
border: 3px #86bc25 solid;
box-sizing: border-box;
float: left;
}
.hi-pv-bullet + .hi-pv-bullet {
margin-left: 32px;
}
.hi-pv-bullet-active {
transform:  scale(1.25);
-webkit-transform:  scale(1.25);
-ms-transform:  scale(1.25);
background-color: #86bc25;
}

@media (max-width:1019px) {
.pageview {
  height: 300px;
  margin-bottom: 20px;
 }
 .hi-pv-bullet {
 border-width: 2px;
 }
}



.terms_content {
min-width: 1020px;
display: none;
padding: 30px 0 30px 0;
}
@media (max-width:1019px) {
 .terms_content {
  min-width: 320px;
 }
}

.mobile-only {
display: none;
visibility: hidden;
width: 0px;
overflow: hidden;
}

@media (max-width:1019px) {
 .mobile-only {
 display: block;
 width: auto;
 overflow: visible;
 visibility: visible;
 }
 .desktop-only {
 display: none;
 visibility: hidden;
 width: 0px;
 overflow: hidden;
 }
}