/*@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/opensanshebrew-bold-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bold-webfont.eot?#iefix') format('embedded-opentype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bold-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bold-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bold-webfont.svg#8b4b25a9e6dee2304c08fefb363a9190') format('svg'); 
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bolditalic-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bolditalic-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bolditalic-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-bolditalic-webfont.svg#c21c03ab7080535ee57497eccfdf86e3') format('svg'); 
       
  font-style:   italic;
  font-weight:  700;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabold-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabold-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabold-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabold-webfont.svg#f7e80113069d64680d94be62885b159d') format('svg'); 
       
  font-style:   normal;
  font-weight:  900;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabolditalic-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabolditalic-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabolditalic-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-extrabolditalic-webfont.svg#0aa7139bf6d3c365c59c140c3c8e269e') format('svg'); 
       
  font-style:   italic;
  font-weight:  900;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-italic-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-italic-webfont.eot?#iefix') format('embedded-opentype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-italic-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-italic-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-italic-webfont.svg#c710e2592c6201f5dff5fe5ae74e9d58') format('svg'); 
       
  font-style:   italic;
  font-weight:  400;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-light-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-light-webfont.eot?#iefix') format('embedded-opentype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-light-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-light-webfont.ttf')  format('truetype'), 
       url('/www/il/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-light-webfont.svg#1e3cbe1d61c0f2b766b8aff35f09f556') format('svg');
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Open Sans Hebrew';
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-lightitalic-webfont.eot'); 
  src: url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-lightitalic-webfont.woff') format('woff'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-lightitalic-webfont.ttf')  format('truetype'), 
       url('/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-lightitalic-webfont.svg#c137a74dd645478d57aebcd9a32af039') format('svg'); 
       
  font-style:   italic;
  font-weight:  200;
}*/

@font-face {
  font-family: Open_Sans_Hebrew;
  src: url('https://www.nespresso.com/il/media/html/heb/machine_assistance/fonts/opensanshebrew-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('https://www.nespresso.com/il/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.nespresso.com/il/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-regular-webfont.woff') format('woff'), /* Modern Browsers */
       url('https://www.nespresso.com/il/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://www.nespresso.com/il/media/html/heb/machine_assistance/fonts/open_sans_hebrew/opensanshebrew-regular-webfont.svg#265e1bf8eadfa92b8d955acd546bd2c3') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}


body{
    background:#000;
    font-family: 'Open Sans', sans-serif;
    /*min-height:3000px;*/
   width:996px;
margin:0 auto;
 
}



footer{
    max-width: 996px;
    margin: 0 auto;
}

.header {
   
    height: 8rem;
    border-bottom: 1px solid #3b3b3b;
    background-color: #090909;
    position: relative;
    top: 0;
    z-index: 1000;
    backface-visibility: hidden;
    margin: 0 auto;
}

.container {
    max-width: 100rem;
    width: 90%;
    margin: 0 auto;
    /* overflow: hidden; */
}
.header .container {
    height: 100%;
    position: relative;
}
.header__logo {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    -webkit-transition: opacity cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    transition: opacity cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}

.header__lang {
    position: absolute;
    right: 0;
    top: 2rem;
}

.header__lang img {
    display: block;
}

.header__btn-order {
    position: absolute;
    right: 0;
    bottom: -1px;
    display: block;
    line-height: 38px;
    height: 32px;
    padding: 0 4.5rem 0 6rem;
    box-sizing: border-box;
    background-size: auto 100%;
    background-position: top left;
    background-image: url('../Images/btn-header-order-btn@2x.png');
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
}

   .header__btn-order::after {
        width: 18px;
        right: 1.2rem;
        background-image: url('../Images/cup.png');
    }

   .dataspy
   {
       position:fixed;
       right: 10px;
       top: 45%;
       z-index:999
   }

   #myScrollspy a
   {
       color:#fff;
        cursor:pointer;
        background:#989898;
        border-radius:0px;
        width:25px;
        height:4px;
        line-height:4px;
        padding-top:0;
        padding-bottom: 0;
        margin-top:12px;

   }


      #introclick a.active
   {
     
        background:green;
 

   }
   

     /*#myScrollspy a.active
   {
     
        background:red;
 

   }*/
   

    #myScrollspy a:visited, #myScrollspy a:hover
    {
        height:8px;
    }

   #myScrollspy span
   {
       position: relative;
       right:80px;
       display:none;
   }

    #myScrollspy span:visited, #myScrollspy span:hover
    {
        display:block;
    }

   .nav-stacked>li
   {

   }
   .spy-link .nav > li > a:hover, .nav > li > a:focus
   {
       background-color:transparent;
      
   }



   #introclick:hover, #introclick:active
   {
       background: #fff;
   }

    #coffeeclick:hover, #coffeeclick:active
    {
        background: #9f7020;
    }

    #capsulclick:hover, #capsulclick:active
    {
        background:#7e9d71;
    }

    #climateclick:hover, #climateclick:active{
        background:#6298a5;
    }
    #climateclick.active
    {
         background:#6298a5;
         height:8px;
    }

     #capsulclick.active
     {
         background:#7f9d74;
         height:8px;
     }

     #coffeeclick.active
     {
          background: #9f7020;
          height:8px;
     }

     #introclick.active
     {
         background:#fff;
         height:8px;
     }

     .up-arrow
     {
             font-size: 15px;
    color: #fff;
    right:-7px;
    cursor:pointer;
     }

       .down-arrow
     {
             font-size: 15px;
    color: #fff;
    right: -7px;
    top:10px;
   margin: 0 auto;
    cursor:pointer;
     }

.sprite {
    background: url("../images/sprites_nespresso.png") no-repeat;
    position: relative;
    width: 16px;
    height: 11px;
}

.sprite-il-png {
    background-position: -162px -328px;
}

.side-nav {
    position: fixed;
    height: 10rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 3rem;
    z-index: 1000;
    right: 2rem;
    top: calc(50% - 7.25rem);
}

.side-nav__arrow.prev, .side-nav__arrow.next {
    font-family: "nespresso-tpc" !important;
    color: #fff;
    position: relative;
    font-size: 1.5em;
    -webkit-transition: opacity cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    transition: opacity cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    cursor: pointer;
}

.side-nav__arrow {
    height: 20%;
}

.side-nav__arrow, .side-nav__go-to-section {
    display: block;
}

.side-nav__go-to-section {
    height: 15%;
    position: relative;
}
.side-nav__arrow, .side-nav__go-to-section {
    display: block;
}
.side-nav__go-to-section {
    height: 15%;
    position: relative;
}
.side-nav__share {
    display: block;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 3rem;
    margin-top: 1.5rem;
    background: url("") no-repeat center;
    background: #3c3c3c;
    font-family: "nespresso-tpc" !important;
    color: #fff;
}

.commitment__subtitle {
    font-size: 20px;
    line-height:24px;
    font-weight: bold;
    margin-bottom: 33px;
    margin-top:0;
    color: #9f7020;
}

.commitment__title {
    font-size: 34px;
    color:#fff;
    width:100%;
    line-height:38px;
    margin-top:0;
    margin-bottom:0;
}

.commitment__ontitle {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    color:#fff;
   
}

.innovations__title {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
     color:#9f7020;
     padding:10px;
}

.innovation__subtitle {
    font-size: 1.4rem;
    font-weight: bold;
    width: 90%;
    text-transform: uppercase;
    margin-top: 2em;
    color:#9f7020;
}

.capsuls-title
{
    color:#7f9d74;
        font-size: 3.6rem;
}

.capsule-related-title
{
    color:#7f9d74;
}

.capsuls-subtitle{
        font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    color: #fff;
}
.innovation__link {
    font-size: 1.3rem;
    font-weight: bold;
    -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #989898;
    position: absolute;
    z-index: 2;
    bottom: 0;
    font-family: "Nespresso", Helvetica, Arial, sans-serif;
}

/*box design*/

    .artical
    {
         background-repeat:no-repeat;
    background-size:cover;
    height:138px;
    padding-right:0;
    padding-left:0;
    cursor:pointer;
    }


.artical:visited{

}
.artical:hover{
    opacity:0.8;
}
.artical-1 {
    background-image: url('../Images/real_farmer_1.jpg');
}
.artical-2 {
    background-image: url('../Images/aaa_sustainability_1.jpg');
}
.artical-3 {
    background-image: url('../Images/farmer_future_1.jpg');
 
}

.related-box-title
{
    color: #000;
    font-size:13px;
    line-height:14px;
}

.related-box-title-1
{
    font-size:15px;
    color: #9f7020;
    text-transform: uppercase;
    font-weight: bold;
}

.related-box-link
{
    position:absolute;
    top:111px;
}

.related-box-link a
{
    color: #989898;
}

.related-box-link a:hover
{
    color:#000;
    text-decoration:none;
}
.artical-content
{
    min-height:140px;
}


/*intro*/
.intro{
    height:400px;
    position: relative;
    top:100px;
    width:calc(100% - 53rem);
    box-sizing:border-box;
}

.intro::before
{
  width:400px;
  content:"";
  color:#fff;
    height:4px;
    background:#fff;
    animation-name: topborder;
    animation-duration: 0.6s;
   animation-direction: alternate;
   animation-fill-mode:backwards;
   position:absolute;
   
}

.intro::after
{
    content:"";
  /*color:#fff;*/  
     width:4px;
    height:259px;
    position:absolute;
    right:-52px;
    background:#fff;
    animation-name: rightborder;
    animation-duration: 0.6s;
    animation-delay:0.7s;
   animation-direction: alternate;
   animation-fill-mode: backwards;
}
.intro-text
{
    position:absolute;
    left:83px;
    top:50px;
    width:90%;
    animation-name: intro;
    animation-duration:1s;
    animation-fill-mode:backwards;
    animation-delay:0.7s;
}

@-webkit-keyframes intro
{
    0%{top:100px; opacity:0;}
    100%{top:50px; opacity:1;}
}

@keyframes intro
{
      0%{top:100px; opacity:0;}
    100%{top:50px; opacity:1;}
}
.animated-line-top{
   width:400px;
    height:5px;
    background:#fff;
    animation-name: topborder;
    animation-duration: 0.6s;
   animation-direction: alternate;
   animation-fill-mode:backwards;
   position:absolute;
    left:100px;
    
}

@-webkit-keyframes topborder {
      0%   {width:0px;  top:0}
    100% {width:400px;  top:0;}
}

/* Standard syntax */
@keyframes topborder {
      0%   {width:0px;  top:0}
    100% {width:400px;  top:0;}
}

.animated-line-right{
   width:4px;
    height:259px;
    background:#fff;
    animation-name: rightborder;
    animation-duration: 0.6s;
    animation-delay:0.6s;
   animation-direction: alternate;
   animation-fill-mode: backwards;
   position:relative;
  left:400px;
    
}

@-webkit-keyframes rightborder {
    0%   {height:0px;}
    100% { height:259px; }
}

/* Standard syntax */
@keyframes rightborder {
   0%   {height:0px;}
    100% {height:259px; }
}

.intro-img {
    right: 50px;
    top: 0;
    animation-name: introimg;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    animation-delay: 1s;
 height:572px;
    background-image: url('../Images/intro.jpg');
    background-size:cover;
    
}

.intro-img img
{
    width:100%;
   
}

@-webkit-keyframes introimg
{
    0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}

@keyframes introimg
{
      0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}
.commitment__scroll {
    display: inline-block;
    font-weight: bold;
    font-size: 13px;
    margin-top: 27px;
    color:#fff;
}

.commitment__scroll:visited, .commitment__scroll:hover, .commitment__scroll:active{
    color:#fff;
    text-decoration:none;
}
    .commitment__scroll::after {
        content: '';
        display: block;
        margin: 16px;
        height: 8px;
        background-image: url('../Images/arrow-down@2x.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .clear
    {
        clear:both;
    }
    /*coffee*/

#intro{
      position: relative;
}
    #coffee
    {
        min-height:720px;
    }

.coffee-img {
  
    min-height:600px;
   width:100%;
    
    position:relative;
}

#coffee-anchor
{
    position:relative;
}
.coffee-anchor
{
    padding-left:0;
    padding-right:0;
}

.coffee-anchor::before{
    content:"";
    width:895px;
    height:4px;
    color:#9f7020;
    background:#9f7020;
    animation-name: coffeetop;
    animation-duration: 0.6s;
   animation-direction: alternate;
    animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   right:0;
}

.coffee-anchor::after
{
    content:"";  
    width:4px;
    height:412px;
    background:#9f7020;
    animation-name: coffeeright;
    animation-duration: 0.6s;
   animation-direction: alternate;
   animation-delay:0.8s;
   animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   right:895px;
}

.coffee-bg {
    background-image: url('../Images/coffee.jpg');
    background-size:cover;
    width:502px;
    height:720px;
    min-width:200px;

    position:absolute;
    top:0;
    right:0;
    z-index: -333;
       animation-name: coffeeimg;
    animation-duration:1.5s;
    animation-fill-mode:backwards;
    animation-delay:1s;
}

.coffee-text{
    position:absolute;
    left:183px;
    top:160px;
    width:300px;
     animation-name: coffee;
    animation-duration:1s;
    animation-fill-mode:backwards;
    animation-delay:1s;
}

.coffee-link
  {
      position:absolute;
    color:#9f7020;
        top: 370px;
    left: 185px;
      width:100px;
      height:20px;
  }

.coffee-link a span
{
    color:#9f7020;
}
.coffee-link a:hover
{
    text-decoration:none;
}

.coffee-text .commitment__title
{
    color:#9f7020;
}

@-webkit-keyframes coffee
{
    0%{top:210px; opacity:0;}
    100%{top:160px; opacity:1;}
}

@keyframes coffee
{
      0%{top:210px; opacity:0;}
    100%{top:160px; opacity:1;}
}

.coffee-line-top{
     width:897px;
    height:5px;
    background:#9f7020;
    animation-name: coffeetop;
    animation-duration: 1s;
   animation-direction: alternate;
    animation-fill-mode:backwards;
   position:relative;
   top:100px;
   right:-99px;
}

@-webkit-keyframes coffeetop {
    0%   {width:0px;  }
    100% {width:897px;  }
}

/* Standard syntax */
@keyframes coffeetop {
    0%   {width:0px;  }
    100% {width:897px;  }
}

.coffee-line-right{
     width:5px;
    height:400px;
    background:#9f7020;
    animation-name: coffeeright;
    animation-duration: 1s;
   animation-direction: alternate;
   animation-delay:1s;
   animation-fill-mode:backwards;
   position:relative;
   top:100px;
   right:-99px;

}

@-webkit-keyframes coffeeright {
    0%   {height:0px; }
    100% {height:400px;  }
}

/* Standard syntax */
@keyframes coffeeright {
    0%   {height:0px; }
    100% {height:400px; }
}

@-webkit-keyframes coffeeimg
{
    0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}

@keyframes coffeeimg
{
      0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}


    /*capsuls*/

    #capsuls
    {
        min-height: 723px;
        position: relative;
    }
    #capsul-box
    {
        min-height:265px;
        position: relative;
    }
    .capsul-div{
        padding-left:0;
    }
    .capsuls-img {
    height:600px;
   width:100%;
    
    position:relative;
}

.capsuls-bg {
    background-image: url('../Images/capsules.jpg');
    background-repeat:no-repeat;
    background-size: 840px;
    background-position:left;
    width: 100%;
    height: 723px;
    width:490px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -333;
    animation-name: coffeeimg;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
}

.capsuls-text{
    position:absolute;
    right:160px;
    top:150px;
    width:300px;
     animation-name: coffee;
    animation-duration:2s;
    animation-fill-mode:backwards;
    animation-delay:1.5s;
}

.capsul-link
  {
      position:absolute;
   float:right;
   /*right:10%;
     bottom: 0px;*/
       right: 357px;
    top: 554px;
      width:100px;
      height:20px;
  }

.capsul-link a span
{
    color:#7f9d74;
}
.capsul-link a:hover
{
    text-decoration:none;
}
.capsuls-content
{
    font-size: 1.6rem;
    margin-top: 2.5em;
    line-height: 1.8em;
    color:#fff;
}
.capsul-div::before{
    content:"";
    width:90%;
    height:4px;
    color:#7f9d74;
    background:#809c76;
    animation-name: capsulstop;
    animation-duration: 0.6s;
   animation-direction: alternate;
    animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   left:0;
}

.capsul-div::after
{
    content:"";  
    width:4px;
    height:500px;
    background:#7f9d74;
    animation-name: capsulsright;
    animation-duration: 0.6s;
   animation-direction: alternate;
   animation-delay:0.7s;
   animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   left:90%;
}
.capsuls-line-top{
   width:90%;
    height:5px;
    background:#a3ba94;
    animation-name: capsulstop;
    animation-duration: 1s;
   animation-direction: alternate;
   top:110px;
    position:relative;
    
}

@-webkit-keyframes capsulstop {
    0%   { width:0;}
    100% { width:90%;}
}

/* Standard syntax */
@keyframes capsulstop {
0%   { width:0;}
    100% { width:90%;}
}

.capsuls-line-right{
   width:5px;
    height:500px;
    background:#a3ba94;
    animation-name: capsulsright;
    animation-duration: 1s;
    animation-delay:1s;
   animation-direction: alternate;
   animation-fill-mode: backwards;
   position:relative;
  left:885px;
   top:110px;
    
}
@-webkit-keyframes capsulsright {
    0%   {height:0px;}
    100% {height:500px; }
}

/* Standard syntax */
@keyframes capsulsright {
   0%   {height:0px;}
    100% {height:500px; }
}


.capsul-active
{
     height: 8px; 
     background: #7e9d71;
}

/*capsul box*/

.capsul-related
{
    background:#fff;
    width: 560px;
    height:360px;
    position:relative;
   margin-top: -95px;
    left: 55%;
      animation-name: capsulbox;
       animation-duration: 1.5s;
   animation-direction: alternate;
   animation-fill-mode: backwards;
   padding:15px 40px 15px 40px;
}


    

    @-webkit-keyframes capsulbox
    {
        0%{top:60px; opacity:0;}
    100%{top:0px; opacity:1;}
    }

    @keyframes capsulbox
    {
        0%{top:60px; opacity:0;}
    100%{top:0px; opacity:1;}
    }

    /*climate*/

    #climate
    {
        min-height:720px;
        max-width: 1010px;
        position: relative;
    }

   
    .climate-img {
  
    height:600px;
   width:100%;
    
    position:relative;
}


.climate-bg {
    background-image: url('../Images/climat.jpg');
    background-size: cover;
    width: 456px;
    height: 720px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -333;
    animation-name: climateimg;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    animation-delay: 2s;
}

.climate-div
{
    position:relative;
}
.climate-div::before
{
    content:"";  
    width:90%;
    height:4px;
    background:#6099a4;
    animation-name: climatetop;
    animation-duration: 1s;
   animation-direction: alternate;
       animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   left:10%;
}

@-webkit-keyframes climatetop {
     0%   {left:100%; width:0px;  }
    100% {left:10%; width:90%;  }
}
/* Standard syntax */
@keyframes climatetop {
     0%   {left:100%; width:0px;  }
    100% {left:10%; width:90%;  }
}

.climate-div::after
{
    content:"";     
    width:4px;
    height:400px;
    background:#6099a4;
    animation-name: climateright;
    animation-duration: 1s;
   animation-direction: alternate;
   animation-delay:1s;
   animation-fill-mode:backwards;
   position:absolute;
   top:100px;
   left:10%;
}

@-webkit-keyframes climateright {
    0%   {height:0px; }
    100% {height:375px;  }
}

/* Standard syntax */
@keyframes climateright {
    0%   {height:0px; }
    100% {height:375px; }
}

.climate-text{
    position:absolute;
    left:180px;
    top:110px;
    width:300px;
     animation-name: climate;
    animation-duration:2s;
    animation-fill-mode:backwards;
    animation-delay:1.5s;
}

.climate-link
  {
         position: absolute;
    color: #6298a5;
    top: 260px;
    width: 100px;
    height: 20px;
    left: 180px;
  }

.climate-link a span
{
    color:#6298a5;
}

.climate-text .commitment__title
{
    color:#6099a4;
}

@-webkit-keyframes climate
{
    0%{top:150px; opacity:0;}
    100%{top:110px; opacity:1;}
}

@keyframes climate
{
      0%{top:150px; opacity:0;}
    100%{top:110px; opacity:1;}
}

.climate-line-top{
     width:895px;
    height:5px;
    background:#6099a4;
    animation-name: climatetop;
    animation-duration: 1s;
   animation-direction: alternate;
       animation-fill-mode:backwards;
   position:relative;
   top:100px;
   right:-100px;
}



.climate-title
{
    color:#6298a5;
    line-height:38px;
    font-size:34px;
}

.climate-subtitle
{
    font-weight: bold;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    color: #fff;
    font-size:14px;

}



.climate-line-right{
     width:5px;
    height:400px;
    background:#6099a4;
    animation-name: climateright;
    animation-duration: 1s;
   animation-direction: alternate;
   animation-delay:1s;
   animation-fill-mode:backwards;
   position:relative;
   top:100px;
   right:-100px;
}



@-webkit-keyframes climateimg
{
    0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}

@keyframes climateimg
{
      0%{top:80px; opacity:0;}
    100%{top:0; opacity:1;}
}

.climate-related
{
        background: #fff;
    width: 560px;
    height: 240px;
    position: relative;
    /*margin-top: -95px;*/
    padding:12px;
    animation-name: capsulbox;
    animation-duration: 1.5s;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    
}

#climate-box {
    min-height: 375px;
    margin-top:-150px;
    position: relative;
}

.artical-climate {
    background-image: url('../Images/agroforestry_1.jpg');
    height:138px;
    background-size:cover;
}


.all-innovations
{
    width:800px;
    height:50px;
    line-height:14px;
    margin:0 auto;
    border: 5px solid #fff;
    margin-bottom:120px;
    transform:translate3d(0, 0, 0);
    opacity:1;
   transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.inno-link-bar
{
display: inline-block;
width:100%;
  background: none;
  height:40px;
  position: relative;
  transition:background 0.5s ease;
  
   
}

.inno-link-bar a
{
    padding-left:45%;
  
    width:100%;
    line-height:40px;
    display:block;
    color:#fff;
}

.inno-link-bar a:hover
{
       color:#000;
       text-decoration:none;
}
.inno-link-bar:hover
{
background-size:100%;
     background:#fff; 
  
}

.inno-link-bar::after {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  transform-origin:left;
  transition:width 0.25s ease;
  z-index:-1;
  
}
.inno-link-bar:hover::after {
  width: 100%;
}


@-webkit-keyframes innovations
{
    0%{background-position: 0; background:#000;}
    100%{background-position: center; background:#fff;}
}

@keyframes innovations
{
      0%{background-position: 0; background:#000;}
    100%{background-position: center; background:#fff;}
}
    /*farmer box*/

    #farmers{
        min-height:360px;
        position: relative;
        top:-50px;
    }
    .farmer-div
    {
        width:100%;
    }
    .farmer
    {
        width:800px;
        height:360px;
        margin:0 auto;
        position:relative;
       background: #fff;
       
       animation-name: farmer;
       animation-duration: 1.5s;
   animation-direction: alternate;
   display:block;
 
    }

    @-webkit-keyframes farmer
    {
        0%{top:60px; opacity:0;}
    100%{top:0px; opacity:1;}
    }

    @keyframes farmer
    {
        0%{top:60px; opacity:0;}
    100%{top:0px; opacity:1;}
    }


/*footer*/
.sticky-menu
{
        
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    max-width: 996px;
    height: 50px;
    background-color: #1c1c1c;
    color: #fff;
    z-index: 500;
    /*padding-left:85px;*/
    /*position:fixed;*/
   
}

.sticky-menu ul
{
    height:100%;
    margin:0;
   padding:0;
}

.sticky-menu li
{
    width:29%;
    display:inline-block;
    list-style-type:none;
    text-align: center;
    height:100%;

}

.sticky-menu li:last-child
{
    background:#e9e0cf;
    width:9%;
}
.sticky-menu li a{
    margin-top:10px;
 font-weight: bold;
 font-size:15px;
 line-height:38px;
 color: #9f7020;
}

.sticky-menu li a:hover
{
    text-decoration:none;
}


.manifests-block
{
    width: 800px;
    /*height:540px;*/
    margin: 0 auto;
    position: relative;
    z-index: 10;
    color:#fff;
}



.manifest {
    /*width: 33.33%;*/
    height: 700px;
    position: relative;
    float: left;
    -webkit-perspective: 600px;
    perspective: 600px;
    background-size:cover;
    color:#000;
}

.manifest-1 {
    background-image: url('../Images/letter.jpg');

    
}

.manifest-2 {
    background-image: url('../Images/commitments.jpg');
}

.manifest-3 {
    background-image: url('../Images/innovations.jpg');
}

.manifest-square
{
    background:#fff;
position:absolute;
bottom:0;
right:0;
width:90%;
    height:330px;
    padding:35px;
        /*transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
             transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), 
            color 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
             background 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);*/
        opacity:1;
        color:#989898;

}

@keyframes manifest
{
    0%{ background:transparent;   transform: rotateY( -35deg ); }
    100%{ background:#fff;   transform: rotateY( 0 );  }
}
#manifest-anchor.active .manifest-square
{
    opacity:1;
         animation-name: manifest;
        animation-duration: 1s;
        animation-direction: alternate;
        
       

       
  
}
.manifest-square:hover
{
 
    transition: height linear 0.3s;
    height:370px;
}

/*.fadeout{
display:none;
  opacity: 0;
  transition: display 0s 2s, opacity 2s linear;
}*/

/*text colors*/
.green-text
{
    color:#7f9d74;
}

.aqua-text
{
    color:#6298a5;
}


.gold-text
{
    color:#9f7020;
}


 @media screen and (max-width: 990px) 
{
     body{
         width:100%;
         overflow: hidden;
     }
   
.intro
    {
        top: -1103px;
    /*left: 289px;*/
    z-index:1;
    }
.intro-img{
    width: 100%;
    /*right: 224px;
     height:1275px;*/
    background-position: -16rem center;
}

.intro
{
    width: calc(100% - 33rem)
}
.intro::before
{
    width:100%;
    height:5px;
    bottom: -120px;
}.intro::after
 {
     width:5px;
     right:-24px;
 }


 .commitment__title
 {
     font-size:27px;
 }
 .commitment__subtitle
 {
     font-size:48px;
 }

 .coffee-bg{
      width:100%;
      height: 520px;
 }

 .commitment__scroll{
     font-size:37px;
 }
  #intro
  {
      max-height:613px;
      /* overflow: hidden; */
  }

  .coffee-anchor
  {
      min-height:850px;
  }
   .coffee-anchor::before
   {
       height:5px;
       top: 50px;
       width:90%;
   }
  .coffee-anchor::after
  {
    height:698px;
       right: 90%;
       top:50px;
  }

  .coffee-text{
         left: 14%;
          top: 558px;
  }

  .commitment__ontitle
  {
      font-size:12px;
  }

    #farmers {
        min-height: 286px;
        top:0;
    }

  @-webkit-keyframes coffee
{
    0%{top:770px; opacity:0;}
    100%{top:723px; opacity:1;}
}

@keyframes coffee
{
      0%{top:770px; opacity:0;}
    100%{top:723px; opacity:1;}
}
  @-webkit-keyframes coffeeright {
    0%   {height:0px; }
    100% {height:1000px;  }
}

/* Standard syntax */
@keyframes coffeeright {
    0%   {height:0px; }
    100% {height:1000px; }
}

.farmer
{
    width:100%;
       height: 285px;
    margin-top:0;

}

.artical{
    height: 56px;
    background-size:contain;
}

    .innovations__title {
        font-size: 15px;
    }

    .related-box-title-1 {
        font-size: 9px;
    }
    .related-box-title {
        font-size: 11px;
    }
    .related-box-link {
        
        top: 129px;
    }

.capsuls-bg
{
    width: 100%;
    background-size:cover;
}

.capsul-related
{
    width:100%;
    height:318px;margin-top:0;
    left:0;
    top:70px;
}

   @-webkit-keyframes capsulbox
    {
        0%{top:130px; opacity:0;}
    100%{top:70px; opacity:1;}
    }

    @keyframes capsulbox
    {
        0%{top:130px; opacity:0;}
    100%{top:70px; opacity:1;}
    }
.capsul-white-box
{
    padding-left:0;
    padding-right:0;
}

.capsuls-text
{
    position: absolute;
    /* left: 140px; */
    right: 16%;
    top: 600px;
    animation-name: cupsul;
}

@-webkit-keyframes capsulsright {
    0%   {height:0px;}
    100% {height:941px; }
}

/* Standard syntax */
@keyframes capsulsright {
   0%   {height:0px;}
    100% {height:941px; }
}

.capsul-div
{
    min-height:1000px;
}
.capsul-div::after
{
    height:951px;
        top: 50px;
}
.capsuls-bg
{
    height:550px;
    background-size:cover;
}

.capsul-div::before
{
    height:5px;
    top: 50px;
}



@-webkit-keyframes cupsul
{
    0%{top:650px; opacity:0;}
    100%{top:600px; opacity:1;}
}

@keyframes coffee
{
      0%{top:770px; opacity:0;}
    100%{top:723px; opacity:1;}
}

#capsul-box
{
    min-height:388px;
}

.capsul-article{
    height: 71px;
    background-size: contain;
}    

.climate-bg
{
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
   height: 466px;
}

.climate-div::before
{
    height:5px;
    top:50px;
}
.climate-div::after
{
      
    height:690px;
   top:50px;
}

.all-innovations
{
    width:auto;
    margin-top:20px;
    margin-bottom:50px;
}


    .inno-link-bar a {
        padding-left: 37%;
    }
@-webkit-keyframes climateright {
    0%   {height:0px; }
    100% {height:1000px;  }
}

/* Standard syntax */
@keyframes climateright {
    0%   {height:0px; }
    100% {height:1000px; }
}

.climate-text{
    left: 15%;
    top: 467px;
}

@-webkit-keyframes climate
{
    0%{top:650px; opacity:0;}
    100%{top:630px; opacity:1;}
}

@keyframes climate
{
      0%{top:650px; opacity:0;}
    100%{top:630px; opacity:1;}
}
#climate
{
   min-height: 950px;
}

.climate-related
{
        height: 320px;
        width:auto;
}

.sticky-menu li
{
    width:100%;
}
#climate-box {
    min-height: 175px;
}

.sticky-menu{
    height:auto;
    padding-bottom: 1em;
}

.sticky-menu li:last-child
{
    width:100%;
}

.manifest-square
{
    height:47%;

}
.manifest
{
    width:100%;
    height:590px;
 
    background-repeat: no-repeat;
}

.manifests-block{
    width: 100%;
}

.coffee-link
{
  
width: 117px;
  
border-top: 2px solid #9f7020;
  
border-right: 2px solid #9f7020;
  
border-bottom: 2px solid #9f7020;
  
padding: 12px 10px 10px 19px;
  
height: 50px;
  
left:10%;
top:698px;
}

.capsul-link {
   
width: 117px;
   
border-top: 2px solid #7f9d74;
   
border-left: 2px solid #7f9d74;
   
border-bottom: 2px solid #7f9d74;
   
padding: 12px 10px 10px 19px;
   
height: 50px;
   
top:951px;
right:10%;

}

    .capsuls-title {
      
        font-size: 27px;
    }
.coffe-link a span
{
   
}

.climate-link{
     width: 115px;
    border-top: 3px solid #6298a5;
    border-right: 3px solid #6298a5;
    border-bottom: 3px solid #6298a5;
    padding: 10px 10px 10px 19px;
    height: 50px;
    left: 10%;
    top: 690px;
    position: absolute;
}
.dataspy
{
    display:none;
}
}