/* @font-face{font-family: 'Circular Std Medium'; src: url('circular-std-medium-500.ttf');} */
/* @font-face {
	font-family: "Circular Std Medium";
	src: url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.eot");
	src: url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.eot?#iefix") format("embedded-opentype"),
		 url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.woff2") format("woff2"),
		 url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.woff") format("woff"),
		 url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.ttf") format("truetype"),
		 url("//db.onlinewebfonts.com/t/9475d6a0b79c164f9f605673714e75d9.svg#Circular Std Medium") format("svg"); }
*, html, body{margin: 0; box-sizing: border-box; font-family: 'Circular Std Medium';}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col20{float:left; padding:10px;}
.col12 {width:100%;}.col11 {width:91.66666667%;}.col10 {width: 83.33333333%;}.col9 {width: 75%;}.col8 {width: 66.66666667%;}.col7 {Width: 58.33333333%;}.col6 {width: 50%;}.col5 {width: 41.66666667%;}.col4 {width: 33.33333333%;}.col3 {width: 25%;}.col2 {width: 16.66666667%;}.col1 {width: 8.33333333%;}

header {width: 100%; background-color: #FFF; z-index: 50; position: fixed; padding: 15px 0; top: 0; transition: .3s; transition-timing-function: cubic-bezier(.58,.3,.005,1);}
.max1440{width: 100%; max-width: 1440px; margin: auto}
.max800{width: 100%; max-width: 800px; margin: auto}
.alignRight{text-align: right;}
a.btn{padding: 10px 20px; text-transform: uppercase; text-decoration: none; font-size: 16px; display: inline-block;}
.logo a:hover{filter: invert(49%) sepia(82%) saturate(1620%) hue-rotate(157deg) brightness(97%) contrast(102%)}
a.btnPink{background-color: #de3081; color: #FFF; font-style: italic; border-radius: 3px; margin-top: 5px;}
a.btnPink:hover{background-color: #f4328c;}

a.btnRed{background-color: #ED145B; color: #FFF; font-weight: bold; padding: 15px 30px; margin-bottom: 15px;}
a.btnRed:hover{background-color: #9CCD56;}

a.btnBlue{background-color: #1A75A3; color: #FFF; font-weight: bold; padding: 15px 30px;}
a.btnBlue:hover{background-color: #9CCD56;}

ul.menu{margin: 0; list-style: none; padding: 12px 0; text-align: center;}
ul.menu li{display: inline; position: relative;}
ul.menu li:not(:last-child){margin-right: 10px;}
ul.menu li a{font-weight: bold; color: #00275e; text-decoration: none; font-size:15px;}
ul.menu li a:after{background-color: #0e74b4; content: ""; bottom: -15px; height: 3px; width: 100%; left: 0; position: absolute; transition: .3s; transition-timing-function: cubic-bezier(.58,.3,.005,1); opacity: 0;}
ul.menu li a:hover::after{opacity: 1;} */

section.one{width: 100%; float: left; position: relative; height: 950px; overflow: hidden;}
section.one h1{margin: 0; padding: 20px 0; color: #FFF; font-size: 18px; font-weight: bold; text-transform: uppercase;}
section.one h2{margin: 0; padding:0; color: #FFF; font-size: 75px; letter-spacing: -0.5px; text-transform: uppercase;}
section.one span{display: inline-block; position: relative;}
section.one span path { fill: none;	stroke:#9ccd56; stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round;}
section.one h2.second{color: #9ccd56}
svg {position: absolute; top: 55%; left: 50%; width: calc(100% + 20px); height: calc(100% + 20px); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow: visible; transition: fill 120ms ease-in-out; fill: currentColor;}
section.one p{color: #FFF;  font-size: 22px; line-height: 1.3em; margin: 60px 0 30px 0}
section.one .overlay{background-color: #000; opacity: 0.5; width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;}
section.one video{object-fit: cover; bottom: 0; right: 0; min-height: 100%; width: 100%; height: auto;}
section.one .max1440{position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, 0); padding-top:175px;}

section.two{width: 100%; float: left; padding: 20px 0; position: relative; background-image: url(../im/FoodCostIngredientsOnSpoons.jpg); background-position: center left; background-repeat: no-repeat; background-size: 50vw auto;}
section.two h2{font-size: 35px; color: #1A75A3; font-weight: bold; margin: 0; padding:50px 0; text-transform: uppercase; text-align: center; position: relative; z-index: 2;}
section.two p{color: #54595F; font-size: 22px; line-height: 1.8em; margin:0 0 50px 0; text-align: center; position: relative; z-index: 2;}
section.two video{object-fit: cover; bottom: 0; right: 0; width: 100%; height: auto;}
section.two .overlay{background-image: url(../im/FoodCostingProcessSpaghetti.jpg); background-position: top right; background-repeat: no-repeat; background-size: 25vw auto; position: absolute; height: 100%; width: 20%; top: 0; right: 0;}
section.two .intro {position:relative; left:50%; transform:translateX(-50%); font-size:35px; width: fit-content; white-space: nowrap};


/* mobile menu */
/* .hamb{cursor: pointer; float: right; padding:20px 10px 10px 10px;}
.hamb-line {background: #000; display: block; height: 4px; position: relative; width: 30px;}
.hamb-line::before,
.hamb-line::after{background:#000; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;}
.hamb-line::before{top: 10px;}
.hamb-line::after{top: -10px;}
.side-menu {display: none;} */

/* Toggle menu icon */
/* .side-menu:checked ~ nav{max-height: 100%; display: block}
.side-menu:checked ~ .hamb .hamb-line {background: transparent;}
.side-menu:checked ~ .hamb .hamb-line::before {transform: rotate(-45deg); top:0;}
.side-menu:checked ~ .hamb .hamb-line::after {transform: rotate(45deg); top:0;}
label.hamb{display: none}
.centerMobile{float: left}

.form{border-radius: 10px; padding:20px; background: linear-gradient(0deg, rgba(0,57,128,1) 0%, rgba(0,104,172,1) 100%); width: 100%; max-width: 400px; margin: auto; display: flex; position: relative; z-index: 5;}
.form h3{font-size: 30px; color: #FFF; padding: 0 10px;}
.form label{width: 100%; color: #FFF; display: block; margin-bottom: 5px;}
.form input[type='text']{width: 100%; border-radius: 5px; border: 0; padding:10px;}
.form input[type='submit']{width: 100%; border-radius: 5px; border: 0; padding:15px; background-color:#88b941; color: #FFF; font-weight: bold; cursor: pointer; font-size:20px;}
.form input[type='submit']:hover{background-color: #709935;} */

/* FOOTER  */
/* footer{background: linear-gradient(to right, #003078, #006aab, #003078); width: 100%; float: left; color: #FFF; font-size: 0.8em; display: flex;}
footer .col80px{width: 80px; float: left;}
footer .col6{width: 50%; float: left;}
footer .col3{width: 25%; float: left;}
footer a{color: #FFF; text-decoration: none;}
footer a:hover{color: #FFF; text-decoration: underline;}
footer a:hover > img{opacity: 0.8}
footer .flexEffectLeft{text-align: left; align-items: center; display: flex; justify-content: flex-start;}
footer .flexEffectLeft a{margin-right: 10px;}

footer .flexEffectRight{text-align: right;	align-items: end; display: flex; justify-content: end;}
footer .flexEffectRight a{margin-right: 10px;}
*/
/*END FOOTER*/
@media screen and (max-width:1000px) and (min-width: 0){
  section.one .max1440{padding-top:195px;}
  section.two h2{font-size: 25px; line-height: 1.4em; } 
  section.two p{font-size: 16px;}
}


@media screen and (max-width:1330px) and (min-width: 0){
  /* header{position: absolute;}
  header .col2{width: 50%;}
  header .col8{width: 50%;} */

  section.one h2{font-size: 50px;}
  section.one p{font-size: 18px;  margin: 45px 0 45px 0}
  
  /* nav, header .col2.alignRight{display: none;}
  nav {width: 100%; position: absolute; left: 0; top: 96px; background-color: #FFF;}
  ul.menu{text-align: left; padding: 0; background-color: #FFF;}
  ul.menu li{display: block; padding:0px; border-top: 1px solid #eee}
  ul.menu li:not(:last-child){margin-right: 0;}
  ul.menu li a{padding: 10px; display: block;}
  ul.menu li a:hover{background-color: #fbfbfb;}
  ul.menu li a:hover::after{opacity: 0;} */
  
  
  /* label.hamb{display:block}
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col20{width:100%} */
  section.two .max800{padding: 0 20px;}
}

@media screen and (max-width:800px) and (min-width: 0){
  /* .centerMobile{width: 100%; text-align: center;}
  a.btnBlue{margin-left:0px;} */
  section.two, section.two .overlay{background-image: unset;}
}