/* head */
.viptera-revamp .section-head {
    background-image: url(../img/viptera/bg_hero.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    height: 100%;
    position: relative;
}
    .viptera-revamp .section-head:before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../img/viptera/bg_above-outline.svg);
        background-repeat: no-repeat;
        background-size: 200px auto;
        background-position: center top;
        background-attachment: fixed;
        z-index: -1;
        pointer-events: none;
    }
    .viptera-revamp .section-head:after {
        content: '';
        height: 14em;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
        z-index: -1;
        pointer-events: none;
    }
.viptera-revamp .section-head .grid {
    grid-template-areas:
        "copy"
        "image"
        "list";
}

.viptera-revamp .section-head .content{
}
.viptera-revamp .section-head .copy{grid-area: copy;}
.viptera-revamp .section-head .copy h1{width: 92%;}
.viptera-revamp .section-head .copy p{width: 80%;}

.viptera-revamp .section-head .copy img{
  width: 55%;
  max-width: 220px;
  margin: 3rem 0;
}

.viptera-revamp .section-head .image{
  grid-area: image;
}

.viptera-revamp .section-head ul{
    grid-area: list;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.viptera-revamp .section-head ul li {
    position: relative;
    padding: calc(var(--box-padding) * .4);
}

.viptera-revamp .section-head ul li h6 {
  color: #00853F;
  margin:1em 0;
}

@media (min-width: 640px) {
  .viptera-revamp .section-head .grid {
      grid-template-columns: 1fr 50%;
      grid-template-areas:
          "copy image"
          "list list";
  }
  .viptera-revamp .section-head ul {
      grid-template-columns: 1fr 1fr 1fr;
  }
  .viptera-revamp .section-head ul li:nth-of-type(2) {
    background-color: #F4F4F4;
  }
}


/* Section 2 */
.viptera-revamp .section-2 .grid {
    grid-template-areas:
        "copy"
        "image"
        "corn"
        "slides"
        "break";
}

.viptera-revamp .section-2 .copy {grid-area: copy;width: 80%;}
.viptera-revamp .section-2 .break {grid-area: break;justify-self: center;}
.viptera-revamp .section-2 .image {grid-area: image;text-align: right;}
.viptera-revamp .section-2 .image img{width: 50%; margin: 0 0 0 auto;box-shadow: 0px 44px 44px -20px rgba(0, 0, 0, 0.25);}
.viptera-revamp .section-2 .slider {grid-area: slides;justify-self: center; width: 100%; max-width: 850px;}

.viptera-revamp .section-2 .corn {
    position:relative;
    grid-area: corn;
    max-width: 870px;
    margin: 3rem auto;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 2.5em;
    grid-template-areas:
        "graph graph graph"
        "btn-0 btn-1 btn-2";
}

.viptera-revamp .section-2 .corn .graph{
  display: none;
  grid-area: graph;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  text-align: center;
  pointer-events:none;
}

.viptera-revamp .section-2 .corn .graph.background{
  display: block;
  position: relative;
  z-index: 1;
}

.viptera-revamp .section-2 .corn .graph img.mobile{
  margin: 0 auto;
  width: auto;
  height: 100%;
  max-height: 600px;
}
.viptera-revamp .section-2 .corn .graph.is-active{
  display: block;
  z-index: 2;
}
.viptera-revamp .section-2 .corn .graph.is-next{
  display: block;
  z-index: 3;
}

.viptera-revamp .section-2 .corn .graph-btn{
  background-color: #f4f4f4;
  font-size: 70%;
  font-weight: 600;
  text-align: center;
  line-height: 1em;
  padding: 9px;
  transition: all .25s;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
  flex-flow: wrap;
}
.viptera-revamp .section-2 .corn .graph-btn span{
  display: inline-block;
  transition: all .25s;
}

.viptera-revamp .section-2 .corn .graph-btn:hover{
  background-color: #D9D9D9;
}

.viptera-revamp .section-2 .corn .graph-btn.is-active{
  color: #fff;
  background: #666769;
  box-shadow: 0px 30px 30px -20px rgba(0, 0, 0, 0.25);
  transform: scale(1, 2);
}
.viptera-revamp .section-2 .corn .graph-btn.is-active span{
  transform: scale(1, .5);
}


.viptera-revamp .section-2 .corn .btn-0{
  grid-area: btn-0;
  line-height: 1.25em;
}
.viptera-revamp .section-2 .corn .btn-0.is-active{
  background: linear-gradient(284.52deg, #B0BC22 2.85%, #00853F 42.46%);
  flex-flow: column;
}
.viptera-revamp .section-2 .corn .btn-0 span:first-of-type{
  border: 0px solid #2E2E2E;
  border-right-width: 1px;
  padding: 0 1em 0 0;
  margin: 0 1em 0 0;
}

.viptera-revamp .section-2 .corn .btn-0 span:nth-of-type(2){
  margin: 0 1em 0 0;
}

.viptera-revamp .section-2 .corn .btn-0.is-active span{
  display: block;
  font-size: 120%;
  margin: -.5em 0;
}
.viptera-revamp .section-2 .corn .btn-0.is-active span:first-of-type{
  border-bottom-width: 2px;
  border-right-width: 0;
  border-color: #fff;
  padding: 0 0 .5em;
  margin: -.75em 0 .5em;
}
.viptera-revamp .section-2 .corn .btn-0.is-active span:nth-of-type(2){
  font-size: 200%;
  margin: -.6em 0 .1em;
}

.viptera-revamp .section-2 .corn .btn-1{
  grid-area: btn-1;
}
.viptera-revamp .section-2 .corn .btn-2{
  grid-area: btn-2;
}

.viptera-revamp .section-2 .corn .graph .wide{display: none;}
@media (min-width: 640px) {
  .viptera-revamp .section-2 .grid{
      grid-template-columns: 55% 1fr;
      grid-template-areas:
          "copy image"
          "corn corn"
          "slides slides"
          "break break";
  }
  .viptera-revamp .section-2 .corn .graph .mobile{display: none;}
  .viptera-revamp .section-2 .corn .graph .wide{display: block;}
  .viptera-revamp .section-2 .corn .graph#corn-2{ left: -1px; }
}


/* Section 3 */
.viptera-revamp .section-3 {

    padding-top: calc(var(--grid-pad-vert) * 2);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 30%, rgba(244,244,244,0.8) 70%, rgba(244,244,244,1) 100%),
                linear-gradient(247deg, rgba(176,188,34,1) 64%, rgba(0,133,63,1) 84%);
}


    .viptera-revamp .section-3:before {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        content: '';
        background-image: url(../img/traits/bg_brand-mark-horizontal.png);
        background-repeat: no-repeat;
        background-size: auto auto;
        background-position: left -14rem top 1rem;
        pointer-events: none;
    }
.viptera-revamp .section-3 .grid{
    grid-template-areas:
        "copy"
        "image"
        "video";
}
.viptera-revamp .section-3 .copy {grid-area: copy;width: 80%;}
.viptera-revamp .section-3 .image {grid-area: image; display: none}
.viptera-revamp .section-3 .video-player {grid-area: video;}

@media (min-width: 640px) {
  .viptera-revamp .section-3 .grid{
      grid-template-columns: 58% 1fr;
      grid-template-areas:
          "copy image"
          "video video";
  }
  .viptera-revamp .section-3 .image {display: block}
}


/* Section 4 */
.viptera-revamp .section-4 {
  background: linear-gradient(180deg, rgba(244,244,244,1) 0%, rgba(244,244,244,0) 65%);
}
.viptera-revamp .section-4 .grid{
    grid-template-areas:
        "copy"
        "image"
        "table";
}

.viptera-revamp .section-4 .copy {grid-area: copy;}
.viptera-revamp .section-4 .image {grid-area: image; background: linear-gradient(180deg, #F4F4F4 0%, rgba(244, 244, 244, 0) 100%);text-align: center; padding: calc(var(--box-padding) * 1);}
.viptera-revamp .section-4 .image img{width: 100%; max-width: 250px; height: auto;margin: 0 auto;}
.viptera-revamp .section-4 .table {
  grid-area: table;
  background-color: #FFFFFF;
  padding: 3rem 2rem;
  box-shadow: 0px 44px 44px -20px rgb(0 0 0 / 15%);
}

@media (min-width: 640px) {
  .viptera-revamp .section-4 .grid{
      grid-template-columns: 58% 1fr;
      grid-template-areas:
          "copy image"
          "table table";
  }
}


/* Section 5 */
.viptera-revamp .section-5 {
    background-image: url(../img/traits/bg_helix.svg);
    background-repeat: no-repeat;
    background-size: auto 70vh;
    background-position: center center;
    background-attachment: fixed;
}
    .viptera-revamp .section-5:before {
        content: '';
        height: 4em;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
        pointer-events: none;
        z-index:-1;
    }
.viptera-revamp .section-5 .grid{
    grid-template-areas:
        "list"
        "break"
        "link-1"
        "link-2"
        "dealer"
        "agreement"
        "legal";
}

.viptera-revamp .section-5 .list-holder {
  grid-area: list; 
  border: 5px solid #B0BC22;
  padding: 1rem;
  background-color: #fff;
  background-image: url("../img/traits/tag_syngenta.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: top left;
}

.viptera-revamp .section-5 .list-holder h5{margin-top: clamp(1rem, 7.622641509433962rem + -9.056603773584907vw, 4rem);}

.viptera-revamp .section-5 .list-holder ul{
    list-style-type: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
    padding: var(--grid-gap);
}
.viptera-revamp .section-5 .list-holder ul li img{
  display: block;
  width: 80%;
  max-width: 220px;
  max-height: 75px;
}
.viptera-revamp .section-5 .list-holder ul li span{
  display: inline-block;
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid #000;
  font-size: .75em;

}
.viptera-revamp .section-5 .mid-break {grid-area: break;}
.viptera-revamp .section-5 .link-over-1 {grid-area: link-1;}
.viptera-revamp .section-5 .link-over-2 {grid-area: link-2;}

@media (min-width: 640px) {
  .viptera-revamp .section-5 .grid{
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "list list"
        "break break"
        "link-1 link-2"
        ". ."
        ". ."
        "dealer agreement"
        ". ."
        "legal legal";
  }
  .viptera-revamp .section-5 .list-holder ul{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1170px) {
  .viptera-revamp .section-5 .list-holder ul{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/*
.viptera-revamp .section-head {display: none;}
.viptera-revamp .section-2 {display: none;}
.viptera-revamp .section-3 {display: none;}
.viptera-revamp .section-4 {display: none;}
.viptera-revamp .section-5 {display: none;}*/