@import url('/asset/css/reset.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  height:100%;
}

.grid2c {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	align-items:center;
}
.grid3c {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 15px;
}
.grid4c {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 15px;
}

.grid6c {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 15px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
	gap: 25px;
}

.top-rule{
	border-top:1px solid #dcdcdc;
}

strong{
font-weight:500;
}
content ul li{
padding:10px 5px;
}
main{
display:block;
min-height:calc(100vh - 400px);
}
.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
button{
border:0;
padding:10px 20px;
border-radius:50px;
}
a, a.hover, a.visited{
text-decoration:none;
}
.g2, .g3, .g4, .g5{
display:grid;
gap:20px;
}

.g2{
grid-template-columns:1fr 1fr;
}
.g4{
grid-template-columns:1fr 1fr 1fr 1fr;
}
.g5{
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}
.g5{
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}
.vp5{
padding-top:5px;
padding-bottom:5px;
}
.vp10{
padding-top:10px;
padding-bottom:10px;
}
.vp20{
padding-top:20px;
padding-bottom:20px;
}
.vp30{
padding-top:30px;
padding-bottom:30px;
}
.vp40{
padding-top:40px;
padding-bottom:40px;
}
.vp50{
padding-top:50px;
padding-bottom:50px;
}
.vp60{
padding-top:60px;
padding-bottom:60px;
}
.b_border{
border-bottom:1px solid #bbb;
}
.default{
color:#000;
background:#fff;
}
.defaultGrey{
color:#000;
background:#dcdcdc;
}
.darkGrey{
color:#fff;
background:#999;
}
.darkGrey svg{
fill:#fff;
}
.darkGrey a{
color:#fff;
}
.brandBlue{
color:#fff;
background:#3070c7;
}
.brandGreen{
color:#fff;
background:#b3c50e;
}
.brandTeal{
color:#fff;
background:#455c65;
}
topbar{
position:fixed;
	background:#fff;
width:100%;
top:0;
z-index:10;
	border-bottom:1px solid #dcdcdc;
}
mast{
display:grid;
grid-template-columns:300px 1fr 250px;
align-items:center;
background:#fff;
height:130px;

}
logo{
display:block;
margin:10px;
height:55px;
}
.svgContain svg{
height:100%;
width:auto;
}
.svgWidth svg{
height:auto;
width:100%;
}
nav{
text-align:center;
}
nav ul li{
display:inline-block;
}
nav ul li a{
display:block;
padding:10px;
text-decoration:none;
color:#000;
  font-weight: 400;
}
footerNav{
text-align:left;
}
footerNav ul li{
display:block;
}
footerNav ul li a{
display:block;
padding:10px 0;
text-decoration:none;
color:#000;
  font-weight: 300;
}
contain{
display:block;
margin:0 auto;
}
hero{
display:block;
position:relative;
}



.heroGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:150px;
color:#fff;
height:100%;
}

banner{
display:block;
text-align:center;
}
banner img{
width:90%;
}
feature{
padding:110px 0 0 10px;
line-height:30px;
}
feature h1{
line-height:40px;
}
tag{
display:block;
padding:20px 0;
font-weight:500;
font-size:20px;
}
tag::before{
content:"Source. Revive. Thrive.";
}
.heroWoman{
background:url(/asset/img/hero_woman.png) no-repeat center bottom;
background-size:490px;
height:100%;
}
.skew2Contain{
position: absolute;
left:0;
bottom:0;
width:100%;
background: linear-gradient(60deg,#b3c50e 50%,transparent 50%);
}
.skew2 {
display:inline-grid;
color:#fff;
font-size:18px;
height: 50px; 
background: linear-gradient(60deg,#b3c50e calc(100% - 50px),transparent 50px);
overflow: hidden;
align-items:center;
padding-right:100px;
}

.blue{
background:#3070c7;
}
content{
display:block;
line-height:24px;
}
content h2{
padding:10px 0;
}
ph{
}
footer{
}

h1{
font-weight:700;
font-size:35px;
}
h1 span{
display:block;
font-weight:300;
padding:2px 0;
}
h2{
font-weight:700;
font-size:24px;
}
h3{
font-weight:500;
	font-size:16px;
}
h4{
}


@media (min-width: 320px) {
contain{
width:320px;
}
}

@media (min-width: 576px) { 
contain{
width:500px;
}
}

@media (min-width: 768px) {
contain{
width:700px;
}
}

@media (min-width: 992px) { 
contain{
width:900px;
}
}

@media (min-width: 1200px) { 
contain{
width:1200px;
}
}

body{
height:100vh;
color:#000;
font-family: 'Open Sans';
}
.cropsGrown{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 25px;
}
.cropsGrown label{
font-weight:300;
padding:0;
margin:0;
}
header{

position:fixed;
width:100vw;
background:#fff;
border-bottom:1px solid #dcdcdc;
z-index:2;
}
main{
position:relative;
z-index:1;
padding:150px 0 0 0;

}
footer{
background:#455c65;
color:#fff;
min-height:500px;
font-size:14px;
margin-top:150px;
}
content{
display:block;
position:relative;
max-width:1440px;
margin:0 auto;
font-weight:300;
line-height:30px;
font-size:18px
}
content p{
font-weight:300;
line-height:30px;
font-size:18px
}
footer content{
padding:30px;
}
footer h3{
	margin-bottom:10px;
}
.rsp{
width:100%;
height:auto;
}
topnav{
text-align:center;
font-size:16px;
font-weight:400;
}
topnav ul{
margin:0;
padding:0;
text-indent:0;
}
topnav ul li{
display:inline-block;
}
topnav ul li a{
text-decoration:none;
margin:0 15px;
color:#000;
}
topnav ul li a:hover{
text-decoration:none;
color:#000;
}
topright{
font-size:16px;
font-weight:400;
}
topright ul{
margin:0;
padding:0;
text-indent:0;
}
topright ul li{
display:inline-block;
}
topright ul li a{
text-decoration:none;
margin:0 15px;
color:#000;
}
topright ul li a:hover{
text-decoration:none; 
color:#000;
}
h1{
font-weight:300;
letter-spacing:-1px;
margin:20px 0;
}
h1 span{
display:block;
font-weight:600;
letter-spacing:-1px;
}
.grnBtn{
border-radius:100px;
background:#83be66;
text-transform:uppercase;
font-weight:600;
padding:10px 20px;
color:#fff;
display:inline-block;
margin:20px 0 0 0;
}
.blueBtn{
border-radius:100px;
background:#1473e6;
text-transform:uppercase;
font-weight:600;
padding:10px 20px;
color:#fff;
display:inline-block;
margin:20px 0 0 0;
}
.grnBtnSM{
border-radius:100px;
background:#83be66;
text-transform:uppercase;
font-weight:600;
padding:5px 15px;
color:#fff;
display:inline-block;
}
.grnBtnXSM{
border-radius:100px;
background:#83be66;
text-transform:uppercase;
font-size:12px;
font-weight:600;
padding:2px 12px;
color:#fff;
display: inline-block;
position:absolute;
left:15px;
bottom:10px;
}
.blueBtnXSM{
border-radius:100px;
background:#1473e6;
text-transform:uppercase;
font-size:12px;
font-weight:600;
padding:2px 12px;
color:#fff;
display: inline-block;
position:absolute;
left:15px;
bottom:10px;
}
.footerLink{
font-size:14px;
margin:5px 0;
}
.footerHead{
padding:20px 0 0 0;
font-weight:600;
}
.calloutList{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin:30px;
gap:20px;
}
.callout{
border-radius:4px;
background:#9bcedf;
min-height:250px;
text-align:center;
padding:20px;
}
bcnav{
background:#f1f1f1;
display:block;
border-radius:4px;
padding:0 20px 0 30px;
font-size:14px;
color:#000;
font-weight:600;
display:grid;
grid-template-columns: 1fr 200px;
}
bcnav a, bcnav a:hover{
color:#000;
text-decoration:none;
}
bcnav span{
display:inline-block;
}
bcnav span::before{
content:"/";
margin:0 10px 0 10px;
}
bcnav span:first-child::before{
content:"";
margin:0;
}
smmenu{
display:none;
margin:0 auto;
cursor:pointer;
}
.functionList{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin:30px;
gap:20px;
}
.function{
border:1px solid #dcdcdc;
padding:10px 20px;
border-radius:4px;
font-size:16px;
line-height:24px;
position:relative;
}
.function h3{
border-bottom:1px solid #dcdcdc;
font-size:16px;
padding:0px 0px 5px 0;
}
#headerContent{
display:grid;
grid-template-columns: 180px 1fr 180px;
align-items:center;
height:130px;
margin:0 50px;
}
#featureContent{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
align-items:center;
margin:40px 60px;
gap:15px;
}
h2{
font-weight:300;

letter-spacing:-1px;
}
h2 span{
font-weight:600;
}
h3{
font-weight:500;

}
.video-container {
    width: 100%;
    aspect-ratio:7/3;
    position: relative;
    border-radius:4px;
    margin:0 20px;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:4px;
  z-index:1;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
display:grid;
align-items:center;
justify-items:center;
  z-index: 2;
  position: absolute;
  text-align: center;
  width:100%;
  height:100%;
  color:#fff;
  top:0;
  opacity:1;
  left:0;

}
.video-container .caption img{
width:56%;
  filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.6));
  animation-name:logo;
animation-duration:5s;
}
@keyframes logo {
  0%   {opacity:0; margin-top:-100px;}
   70%   {opacity:0; margin-top:-100px;}
  100% {opacity:1; margin-top:0;}
}
@media only screen and (max-width: 900px) {
topnav ul li a {
    margin: 0 5px;
}
}
@media only screen and (max-width: 800px) {
topnav{
display:none;
}
smmenu{
display:inline-block;
}
.video-container .caption img{
width:75%;
}
.video-container {
    aspect-ratio:7/4;
}
}
@media only screen and (max-width: 700px) {
.video-container .caption img{
width:80%;
}
#headerContent{
margin:0 20px;
}
.video-container {
    aspect-ratio:7/5;
}
}
.body2Col{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
margin:30px 50px;
gap:20px;
}
.body3Col{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin:30px 50px;
gap:20px;
}
.solutionDetail{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin:30px 50px;
gap:10px;
}
.solutionDetail>div{
      border: 1px solid #dcdcdc;
      padding: 15px 15px 15px 15px;
      border-radius:4px;
    }
label{
padding-top:10px;
font-weight:600;
}
.newsList{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
margin:30px;
gap:20px;
}
.news{
border:1px solid #dcdcdc;
padding:10px 20px;
border-radius:4px;
font-size:16px;
line-height:24px;
position:relative;
}
.news p{
font-weight:600;
font-size:16px;
}
.news p span{
display:block;
font-size:12px;
text-transform:uppercase;
font-weight:300;
}
.news h3{
border-bottom:1px solid #dcdcdc;
font-size:16px;
padding:0px 0px 5px 0;
font-weight:300;
}
navbody{
display:grid;
grid-template-columns: 200px 1fr;
gap:20px;
}
.solutionNav{
margin:10px 0 0 60px;
}
footer a{
color:#fff;
}
footer a:hover{
color:#fff;
}
footer a:visited{
color:#fff;
}
smallnav{
	display:none;
	position:absolute;
	top:130px;
	left:0;
	width:100%;
	background:#fff;
	box-shadow:0 4px 4px #888;
}
smallnav ul{
margin:0;
padding:0;
text-indent:0;
}
smallnav ul li{
display:block;
text-align:center;
padding:20px;
border-top:1px solid #dcdcdc;
}
smallnav ul li a{
display:block;
width:100%;
text-decoration:none;
margin:0 15px;
color:#000;
}
smallnav ul li a:hover{
text-decoration:none;
color:#000;
}
.solution{
padding:3px;
border-top:0px;
}

        @media (max-width: 800px) {
navbody{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
          navbody > div:first-child {
                display: none;
            }
        }
footer ul li{
	margin-bottom:10px;
}