/* (c)frylark 2018 -- glinter.ru */

html { font-size:calc(1.0em + 0.25vw); overflow:hidden !important; }
h1, h2, h3, h4, h5, h6 { font-family:OfficinaSans,sans-serif; font-weight:500; color:#334; 
  letter-spacing:-0.0250em; text-decoration:none; line-height:1.0em; margin:1rem 1rem; }
h1 { font-size:60px; font-size:calc(2.0em + 1.6vmin); }
h2 { font-size:42px; font-size:calc(1.8em + 1.4vmin); }
h3 { font-size:36px; font-size:calc(1.6em + 1.2vmin); }
h4 { font-size:32px; font-size:calc(1.4em + 1.0vmin); }
h5 { font-size:30px; font-size:calc(1.2em + 0.75vmin); }
h6 { font-size:24px; font-size:calc(1.1em + 0.5vmin); }
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b { font-weight:600; }

a { text-decoration:none; outline:none; color:#f30; 
 -khtml-user-drag:none; -webkit-user-drag:none; user-drag:none; cursor: pointer; }
a:hover { color:#fb0; }

a h1, a h2, a h3, a h4, a h5, a h6 { color:inherit; }

body { background-color:#fff; line-height:1.32em; overflow: hidden !important;
  color:#333; font-family:OfficinaSans, sans-serif; font-size:100%; font-weight:300;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  opacity:0; animation:start-show 1s ease-in forwards; animation-delay: .5s;}

@keyframes start-show { from {opacity:0;} to {opacity:1;} }

#wrapper { position:absolute; top:0; bottom:0; left:0; width:100%; height:100%; min-height:100%; max-height:100%; overflow:hidden; }
#scroller { position:absolute; z-index:1; -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;	user-select:none;	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none;	text-size-adjust:none; }
.iScrollVerticalScrollbar { width:5px!important; overflow:visible!important;
  right:12px!important; top:12px!important; bottom:12px!important; 
  background:rgba(255,208,136,0.25)!important; }
.iScrollIndicator { position:relative; width:5px!important; background:rgba(255,165,0,0.99)!important; 
  border:1px solid rgba(255,208,156,0.05) !important; border-radius:0 !important; }
.iScrollIndicator:hover { opacity:1; }
.iScrollIndicator::after { content:''; display:block; position:absolute; top:-2px; bottom:-2px; right:-9px; 
  width:17px; height:auto; background:transparent; }

section { display:block; position:relative; margin:-.05px; padding:2.5rem 0; background-color:#fff;
  background-repeat:no-repeat; background-position:center;/* -webkit-backface-visibility: hidden;*/
  /*-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
  background-attachment: scroll;*/ }
section:after { content:''; display:block; clear:both; }

.wrap { position:relative; width:80%; max-width:1100px; height:100%; margin:0 auto; }
.wrap img:not(.png) { width:100%; }
.wrap p  { text-align:justify; margin:1rem 0; hyphens:auto; }

.col   { display:inline-block; position:relative; padding:0; vertical-align:top; }
.col-1 { width:100%; }
.col-2 { width:calc(50% - 4px); }
.col-3 { width:calc(33.3% - 4px); }
.col-4 { width:calc(25% - 6px); }
.col-5 { width:calc(20% - 8px); }
.col p { margin:1rem 1rem; text-align:justify; }
.col p:last-child { margin:1rem 1rem 0 1rem; }
.col img { /*margin:1em auto;*/ }

.cover { line-height:0; margin:1.8em -4px; }
.cover:after { content:''; display:block; clear:both; }

.thumb, .item { display:inline-block; height:auto; border:1px solid transparent;
  /*-webkit-transition-duration: 0.75s; -moz-transition-duration: 0.75s;
  -ms-transition-duration: 0.75s; -o-transition-duration: 0.75s; transition-duration: 0.75s;*/ }
.thumb:hover, .item:hover { border:1px solid #fff; }

.item  { position:relative; background-color:transparent; }
.item:hover { border:1px solid #fff; }

.item h6 { display:inline-block; position:absolute; bottom:0; left:0; z-index:4; margin:10px 15px; 
  font-size:110%; font-weight:500; color:#fff; text-align:left; }
.item .caption { position:absolute; top:50%; left:50%; z-index:1; 
  width:0; height:0; background-color:rgba(255,215,0,.5); opacity:0;
  border-radius:100%;
  -webkit-transition-duration: 0.75s; -moz-transition-duration: 0.75s;
  -ms-transition-duration: 0.75s; -o-transition-duration: 0.75s; transition-duration: 0.75s; }
.item:hover .caption { top:0; left:0; height:100%; width:100%; border-radius:0; opacity:1; }

.item p { margin:.5em 0; }
.grid { position:relative; }
.grid:after { content:''; display:block; clear:both; }

.flexcenter { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex:1;
  -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; 
  -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; }



/* pages style */
section#page { margin:0; background-color:transparent;}
section#page img.prod { max-width:360px; margin-left:-2rem; }
section#page .col-2:first-child { width: 38%; }
section#page .col-2:last-child  { width: 60%; }

section#page table { margin:1rem; font-size: 80%; width:calc(100% - 2rem); }
section#page table tr { border-bottom: 1px solid #ddd; }
section#page table tr:first-child { border-top: 1px solid #ddd; }
section#page table td { padding: 5px 10px; }
section#page table td:first-child { padding-left: 0px; }
section#page table td:last-child { padding-right: 0px; }

section#page h5, section#page h6 { margin-top:2rem; }

section#page #footer { padding:25px 0 25px; min-height:inherit; }

/* prod page styles */
.fruit { background-attachment:fixed; background-repeat:no-repeat; 
  background-position: left bottom; background-size:40vw; /*transition: all .75s linear;*/ }
.blueberry   { background-color: rgba(105,65,125, .995); background-image: url(../../content/img/bg/blueberry_1.png); background-position: left -5px bottom -5px; }
.green-apple { background-color: rgba(145,190,10, .995); background-image: url(../../content/img/bg/apple_2.png); background-position: left -80px bottom -20px; }
.strawberry  { background-color: rgba(242,7,0,    .995); background-image: url(../../content/img/bg/straberry_2.png); background-position: left -20px bottom 20px; }
.lemon       { background-color: rgba(252,237,20, .995); background-image: url(../../content/img/bg/lemon_1.png); background-position: left 5px bottom -20px; }
.lychee      { background-color: rgba(255,152,144,.995); background-image: url(../../content/img/bg/lychee_5.png); background-position: left -40px bottom 5px; }
.orange      { background-color: rgba(255,148,6,  .995); background-image: url(../../content/img/bg/orange_3.png); background-position: left -40px bottom -20px; }
.peach       { background-color: rgba(255,117,100,.995); background-image: url(../../content/img/bg/peach_2.png); background-position: left -2px bottom -10px; }
.kiwi        { background-color: rgba(200,224,98, .995); background-image: url(../../content/img/bg/kiwi_1.png); background-position: left -5px bottom 0px; }
.mango       { background-color: rgba(250,185,2,  .995); background-image: url(../../content/img/bg/mango_2.png); background-position: left -5px bottom -5px; }
.guava       { background-color: rgba(255,108,175,.995); background-image: url(../../content/img/bg/guava_1.png); background-position: left -40px bottom -5px; }
.pineapple   { background-color: rgba(255,211,28, .995); background-image: url(../../content/img/bg/pineapple_1.png); background-position: left -80px bottom -20px; }
.soursop     { background-color: rgba(174,194,34, .995); background-image: url(../../content/img/bg/soursop_1.png); background-position: left -30px bottom 0px; }



/* content */
.container { margin:0px auto; position:relative; }
.svg_v { display:inline-block; width:100%; height:100vh; }
a.svgimg { border:none !important; }
a.svgimg img { display:inline-block; max-width:360px; }

.pict { display:inline-block; margin-bottom:80%;
  background-color:transparent; background-repeat:no-repeat; background-position:center;
  -webkit-background-size:contain; -moz-background-size:contain; 
  -o-background-size:contain; background-size:contain; background-attachment:scroll; }

.video-flow { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; clear:both; }
.video-flow iframe, .video-flow object, .video-flow embed { 
  position:absolute; top:0; left:0; width:100%; height:100%; border:none; z-index:1; }

.button, a.button { display:inline-block; cursor:pointer;  border-radius:2px; font-weight:300;
  padding:8px 15px 6px; margin:5px 0; text-align:center; color:#0bf; border:1px solid #0bf;
  white-space:pre-wrap; background:transparent; line-height: 1.8em; }
.button:hover, a.button:hover { color:#bcf; background:transparent; border-color:#bcf; }
.button:active, a.button:active { color:#fff; background-color:transparent; border-color:#fff; }

hr { display:block; border:none; height:3.0rem; margin:2rem;
  background: transparent url(/__inc/img/3v.svg) no-repeat center scroll; background-size:contain;}

/*  */
#header { /*position:fixed; top:0;*/ width:100%; z-index:5; background-color: rgba(255,255,255,0.15);}

#top { background-color:transparent; overflow:hidden;
/* Swiper base */
height:0; background:transparent; padding:0 0 62% 0; overflow:visible; }
#top .wrap { margin:0 auto; vertical-align:middle; height:100%; }
#top .wrap .qouter { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); white-space:nowrap }

#topslider { position:absolute; top:0; right:0; bottom:0; left:0; overflow:visible; }

/* Swiper customize */
.swiper-wrapper {height:inherit;}
.swiper-slide { background-position:center; background-size:cover; padding:2% 6% 10% 6%;
  display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;
  -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;
  -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; }
.swiper-container-dot .swiper-pagination-bullets,
.swiper-container-video-dot .swiper-pagination-bullets { bottom:-40px; left:0; width:100%; }

.swiper-container-dot { width:100%; height:100%; }
.swiper-slide h1, .swiper-slide h2 {color:#fff; font-size:calc(0.5rem + 4.0vmin);}




@media (min-aspect-ratio: 4/3) {
  #top { padding:0 0 56% 0; }
}

@media (min-aspect-ratio: 3/2) {
  #top { padding:0 0 46% 0; }
}

@media (min-aspect-ratio: 2/1) {
  #top { padding:0 0 40% 0; }
}

@media (max-aspect-ratio: 1/1) {
  #top { padding:0 0 72% 0; }
  .swiper-slide { padding:2% 10% 8% 10%; }
}

@media (max-aspect-ratio: 2/3) {
  #top { padding:0 0 98% 0; }
}



#middle { background:#fff; padding:2rem; pointer-events:none; }
#midle .wrap { max-width:800px; }

#footer { padding:30% 0 25px; background-color:transparent; min-height:480px; overflow:hidden; }
#footer .wrap { border-top:1px solid #fff; padding:1rem 1.5rem; background:rgba(255,255,255,.35); margin: 5rem auto 2rem; }

#footer a { color:#fff; }
#footer a:hover { color:#fb0; }

#top .cut-pict, #footer .cut-pict { position:absolute;  z-index:2; pointer-events:none; }
#top .cut-pict { bottom:-2px; left:0; }
#footer .cut-pict { top:-10px; left:0; }



/* inner for popup and login-form */
.inner {position:relative; background:transparent;}
.inner h3, .inner h4 {margin:20px 35px 10px; cursor:default;}
.inner form {margin:25px 35px;}
.inner form p, .page form p {margin:10px 0;}
 forms and elements 
input:focus, textarea:focus, input[type="text"]:focus {outline:0; z-index:1000;
  background:#ffe; color:#222; box-shadow:0 0 0 2px #0bf;}
input[type=submit]:focus {background:#ffe; color:#000;}

input, button, select, textarea {outline:0 none;}
form input, form textarea, .file_upload > mark {border:none;  
  resize:none; height:auto; margin:0; padding:10px;background-color:#fff; color:#333; 
  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
  -webkit-box-shadow:0 1px 0 0 #0bf; -moz-box-shadow:0 1px 0 0 #0bf; box-shadow:0 1px 0 0 #0bf;}
form input {width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
form textarea {width:100%; resize:vertical;
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
form .submit, input[type=submit], input[type=reset], a.submit {display:inline-block; width:auto;
  padding:10px 27px; cursor:pointer; background:#0bf; border-color:#0bf; 
  line-height:24px; color:#fff; border-radius:5px; 
  text-align:center; vertical-align:middle; border:0; font-size:15px;
   -webkit-transition:background .15s linear 0s, color .1s linear 0s;
      -moz-transition:background .15s linear 0s, color .1s linear 0s;
        -o-transition:background .15s linear 0s, color .1s linear 0s;
           transition:background .15s linear 0s, color .1s linear 0s;}
form .submit:hover, input[type=submit]:hover, .button:hover, input[type=reset]:hover {
  background:#08f; border-color:#08f; color:#fff;}
form .submit:active, input[type=submit]:active, .button:active {
  background-color:#fd5; border-color:#fd5; color:#fff;}
input[type=reset]:active {background: #fd5;}
form .submit i {font-size: 22px; line-height:23px;}
form a.submit {border-bottom:inherit;}

.file-upload {display:inline-block;position:relative;overflow:hidden;margin-right:10px;vertical-align:middle;}
.file-upload .button, .file_upload > mark {display:block;cursor:pointer;width: auto;}
.file-upload .button {float:left;box-sizing:border-box;-moz-box-sizing:border-box;height:100%;margin-right:15px;}
.file-upload > mark {background: transparent;color:#555;}
.file-upload input[type=file] {position:absolute;top:0;left:0;visibility:hidden;}
.file-upload a.button {margin:0;padding:10px 27px;line-height:inherit;line-height:23px;}

.fields-buttons {}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {color:#0bf;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color:transparent;}
input:-moz-placeholder, textarea:-moz-placeholder {color:#555;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#555;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#555;}

#send_message_form p span {display:inline-block;}
#send_message_form p span.union {border:1px solid #0bf;}
#send_message_form p span input,.capch-pic {display:inline-block; 
  height:38px; width:70px!important; margin:2px; vertical-align:middle; text-transform:uppercase;
  -webkit-box-shadow:0 0 0 0 #fff; -moz-box-shadow:0 0 0 0 #fff; box-shadow:0 0 0 0 #fff;}
#contact-submit {width:145px;}
.cwin {display:none; position:absolute; z-index:20; top:0; bottom:0; right:0; left:0; 
  text-align:center; cursor:pointer;}
.cwin p {display:inline-block; position:relative; color:#fff; 
  margin:65px; text-align:center; vertical-align:middle; line-height:1.3em; cursor:pointer;
  /*font-family:Roboto, HelveticaNeue, Exo2, Helvetica, Arial, sans-serif;*/ font-size:36px;}
.cwin i {font-size:65px; line-height:110px;}
#success {background:rgba(0,187,255,.75);}
#success p {text-align:center;}
#errmess {background:rgba(255,51,0,.75);}
#errmess p {text-align:center;}
/*  */



/* fancy customize */
iframe.fancybox-iframe {position:relative; border:0px solid transparent;}
iframe.fancybox-iframe:after {display:block; position:absolute; width:50px; height:20px; content:''; background-color: transparent; z-index:10000;}
.fancybox-container { font-family:inherit; }
.fancybox-bg { background:rgba(255,255,255,.87); opacity:0.0; transition: opacity 1.75s ease; }
.fancybox-is-open .fancybox-bg { opacity:1.0; transition: opacity 1.75s ease; }
.fancybox-navigation button::before { background: rgba(10,10,10,.15); }
.fancybox-slide--iframe { padding:0 0 0 0; }
.fancybox-caption p { text-align:left; margin:1.5em 0; hyphens:auto; }

@media (min-width:640px) { 
  .fancybox-image { margin: 0 0 0 -40%; width: 100%; }

/* fancy caption */
  .fancybox-caption { bottom:0; top:50px; left:55%; right:0; padding: 50px 55px 50px 25px;
    color: #fff; font-size:calc(0.70em + 0.45vmin); line-height:calc(1.2 + 0.5vmin); max-width: 480px; }
  .fancybox-caption::before { display:block; position: absolute; top:0; bottom:0; left:0; right:0;
    background-image:none; background-repeat:repeat-x; background-size:contain;
    content:''; pointer-events: none; z-index: -1; }
  .fancybox-caption::after { display:block; position:absolute; content:'';
    border-left: 1px solid rgba(255,255,255,0.3); border-bottom: none;
    left:0; right:0; top:50px; bottom:50px; }
}

.fancybox-caption h1, .fancybox-caption h2, .fancybox-caption h3, .fancybox-caption h4, .fancybox-caption h5, .fancybox-caption h6 { color:#fff; }
.fancybox-infobar { color:#fff; mix-blend-mode: luminosity; }

/*a#up.button, a#dwn.button {position:fixed; left:20px; top:20px; z-index:5; width:44px; height:44px; line-height:40px; margin:0; padding:0; border-width:1px; border-color:#778; color:#778; opacity:.25; border-radius:50%;}
a#dwn.button { top:80px; line-height: 44px; }
a#up.button:hover,  a#dwn.button:hover   {border-color:#778; background-color:#778; color:#fff; opacity:.85;}
a#up.button:active, a#dwn.button:active  {border-color:#0bf; background-color:#0bf; color:#fff; opacity:.85;}*/








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

@media (min-width:1440px) { 
  body  { font-size:108%; }
  #wrapper.fruit { background-size:560px; }
}

/*@media (max-width:1152px) {
  body  { font-size:112%; }
  .wrap { width:88%; }
   section#page .wrap { width:80%; }
}

@media (max-width:1024px) {
  body { font-size:102%; }
  .wrap { width:92%; }
   section#page .wrap { width:80%; }
  .col p {text-align:left;}
}*/

@media (max-width:960px) {
  body { font-size:106%; }
  /*h1, h2, h3, h4, h5, h6 { letter-spacing:0.001em; margin:.5em 0; }*/
  .wrap,  section#page .wrap { width: 88%; }
  .col-2, .col-3, center .col-3 {width:calc(50% - 4px);} 
  /*.col p { margin:1em 0; }*/
  .col p:last-child { margin:1em 0 0 0; }
  .item h6 { font-size:120%; font-weight:600; }
  .fancybox-slide--iframe { max-width: 100%; }
}

@media (max-width:768px) {
  .col-4, .col-5 { width:calc(25% - 4px); }
}

@media (max-width:640px) { 
  body { font-size:100%; }
  h1, h2, h3, h4, h5, h6 { margin:1rem 0; }
  section#page .wrap { width: 90%; }
  
  .col-2, .col-3, center .col-3, section#page .col-2:first-child, section#page .col-2:last-child {width:100%;} 
  .col p, section#page table { margin:1em 0; width: 100%; }
  .col p:last-child { margin:1em 0 0 0; }
  .item h6 { font-size:160%; font-weight:600; }
  .fancybox-slide--iframe { max-width: 100%; }
  section#page img.prod { max-width: 300px; margin-left:inherit; }
  #wrapper.fruit { background-image:none; }
}

@media (max-width:480px) {
  body { font-size:98%; }

  .iScrollVerticalScrollbar { width:2px!important; right:2px!important; top:8px!important; bottom:8px!important; }
  .wrap,  section .wrap { width:92%; }
  .inner form {margin:25px 20px;}
  .inner h3, .inner h4 {margin:20px 20px 10px;}
  .wrap p { text-align:left; }
}

@media (max-width:360px) { 
  body { font-size:94%; }
  .col-4, .col-5 { width:calc(50% - 4px); }
}
/* @end */