/* BASE CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
strong, b {font-weight:bold;font-weight:700;}

blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
body {font-family: 'Catamaran', sans-serif;font-weight:400;}
.clearfix {display: inline-block; clear: both;height: 0px;overflow: hidden;display: block;}
 strong, b {font-weight:700;}
em, i {font-style:italic;}
html {-webkit-text-size-adjust:100%;}
.cyantext {color:#009ad9;}
.greentext {color:#7b9c3e;}
.section {display:block;overflow:hidden;position: relative;}

#twitter {display:block; background:#fff;}
#twitter {padding:6em 0;}
#twitter #tw-widget1 ul li {width:50%;float:left;overflow:hidden;padding:0 1em;}
#twitter h2 {width:85%;margin:1em auto;text-align:center;font-size:2em;color:#445565;font-size:2.7em;font-weight:200;}
#twitter #tw-widget1 ul li p {font-family: 'Catamaran', sans-serif;line-height:1.4em;text-align:left;color:#445565;margin-bottom:.7em;width:85%;margin:.7em auto;font-size:1.2em;font-weight:100;}
#twitter #tw-widget1 ul li .wrapper {display:block;width:85%;margin:.7em auto;}
#twitter #tw-widget1 ul li .user {display:inline-block;margin-right:1em;}
#twitter #tw-widget1 ul li .user [title="@worldfresh1"] {display:none;}
#twitter #tw-widget1 ul li .user a {display:inline-block;font-family: 'Catamaran', sans-serif;color:#445565;font-size:1.5em;font-weight:400;}
#twitter #tw-widget1 ul li .user img {display:none;}
#twitter #tw-widget1 ul li .timePosted {display:inline-block;font-family: 'Catamaran', sans-serif;color:rgba(68,85,101,.4);font-size:1em;font-weight:400;font-style:italic;}
#twitter #tw-widget1 ul li .media {display:block;width:85%;margin:.7em auto;overflow:hidden;height:250px;position:relative;}
#twitter #tw-widget1 ul li .media img {position: absolute;top: 50%;left: 50%;margin-top: -350px; /* Half the height */margin-left: -250px; /* Half the width */max-width:100%;}


/* NAVIGATION */
.tel {text-align:right;font-size:1.6em;color:#445565;padding:2.5em .7em .5em 1em;font-weight:500;}
header {display:block;position:fixed;top:0;left:0;width:100%;background:#fff;padding:1em 0 .2em 0;z-index:20000;-webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.20);
-moz-box-shadow:0px 1px 1px 0px rgba(50, 50, 50, 0.20);box-shadow:0px 1px 1px 0px rgba(50, 50, 50, 0.20);min-height:157px}
header .bottomline {position:absolute;bottom:-29px;background:url(../../images/menubottomline.png) top center repeat-x;width:100%;height:29px;}
.logorelative {position:relative;height:30px;}
.logo {display:block;width:84%;margin:.3em auto;position:absolute;}
nav {position:relative;min-height:50px;}
nav ul {display:block;text-align:right;margin-top:1em;position:absolute;bottom:0;right:0;}
nav li {display:inline-block;padding:.6em 1em;}
nav li a {text-decoration:none;color:#7b9c3e;padding-bottom:.6em;font-size:1.4em;font-weight:500;}
nav li a:hover {text-decoration:none;color:#999;}

/* HOVER EFFECTS */
.hvr-underline-from-center {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;position: relative;overflow: hidden;}
.hvr-underline-from-center:before {content: "";position: absolute;z-index: -1;left: 50%;right: 50%;bottom: 0;background: #7b9c3e;height: 2px;-webkit-transition-property: left, right;transition-property: left, right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {left: 0;right: 0;}
@-webkit-keyframes hvr-push {
  50% {-webkit-transform: scale(0.8);transform: scale(0.8);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes hvr-push {
  50% {-webkit-transform: scale(0.8);transform: scale(0.8);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
.hvr-push {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;}
.hvr-push:hover, .hvr-push:focus, .hvr-push:active {-webkit-animation-name: hvr-push;animation-name: hvr-push;-webkit-animation-duration: 0.3s;animation-duration: 0.3s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}
section img {-webkit-transition: all 1s ease; /* Safari and Chrome */-moz-transition: all 1s ease; /* Firefox */-ms-transition: all 1s ease; /* IE 9 */-o-transition: all 1s ease; /* Opera */transition: all 1s ease;
}

section img:hover {-webkit-transform:scale(1.25); /* Safari and Chrome */-moz-transform:scale(1.25); /* Firefox */-ms-transform:scale(1.25); /* IE 9 */-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}

/* PARRALAX */
.parallax-window {min-height: 800px;min-height:95vh;background: transparent;}
.overlaywrapper {padding:3em 0 7em 0}
.parallax-window h1 {width:80%;margin:0 auto;text-align:center;font-size:3.5em;color:#fff;font-weight:100;letter-spacing:-1px;background:url(../../images/h1background.png) top center no-repeat;line-height:3em;}
.parallax-window p {width:80%;margin:1em auto;text-align:left;font-size:1.3em;color:#333;font-weight:500;letter-spacing:-1px;}
.parallax-window .hero {position:relative;top:500px;padding:8em 0;}
.imagegallery {background:#fff;}
.section a {text-decoration:none;}
/* ABOUT */
#aboutworldfresh {margin-top:-23px;}
#about {background:#445565;}
#aboutworldfresh .topline {display:block;height:23px;background:url(../../images/graytopline.png) center top repeat-x;width:100%;}
.about p {font-family: 'Catamaran', sans-serif;line-height:1.4em;text-align:left;color:#fff;margin-bottom:.7em;width:85%;margin:.7em auto;font-size:1.2em;font-weight:100;}
p.flag {color:#7b9c3e;font-weight:400;}
.about .bit-2 {padding:0 1em;}
.about h2 {width:85%;margin:1em auto;text-align:center;font-size:2em;color:#7b9c3e;font-size:2.7em;font-weight:200;}
.scroll {text-align:center;color:#fff;font-size:1.4em;display:block;margin-top:1em;}
.services .bit-7 img {cursor:pointer;}

/* SERVICES */
#products {margin-top:-23px;}
#services {background:#7b9c3e;}
#products .topline {display:block;height:23px;background:url(../../images/greentopline.png) center top repeat-x;width:100%;}
.services p {font-family: 'Catamaran', sans-serif;line-height:1.6em;text-align:center;color:#666;}
.services .bit-7 {text-align:center;margin-bottom:1em;}
.services .bit-7 img {width:60%;}
.services h2 {width:80%;margin:1em auto 1.4em auto;text-align:center;font-size:1.6em;color:#445565;font-weight:300;}
.services .producttxt {display:block;text-align:center;color:#fff;margin-top:.6em;font-weight:100;}

/* CAROUSEL */
#carousel {}
.owl-item div span {position:absolute;top:45%;left:50%;color:#fff;font-size:3em;z-index:19001;background:url(../../images/product-background.png) top center no-repeat;min-width:520px;font-weight:600;min-height:92px;padding-top:.5em;text-align:center;margin-left:-250px;}

/* IMAGE GALLERY */
.gridcontain {position:relative;width:33.33%;overflow:hidden;float:left;}
.grid {position:relative;width:100%;display:block;float:left;}
.show {margin:10px auto 5px;display:block;}
.view {text-align: center;cursor: default;width: 100%;display: inline;clear:both;}
.view .mask1 {width: 100%;height: auto;display:block;position: absolute;overflow: hidden;top: 0;bottom:0;}
.view img {display: block;position: relative;}
.view .mask1 img {width:30%;}
.view-first img {-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;-ms-transition: all 0.2s linear;transition: all 0.2s linear;}
.view-first .mask1 {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=40);opacity: .0;background-color: rgba(15, 15, 15, 0.81);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;width:100%;padding-top:80px;height:auto;cursor:pointer;}
/*.view-first .mask1:hover,  .view-first .mask1:focus {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:0.9;filter:alpha(opacity=90); /* For IE8 and earlier */-webkit-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-ms-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}*/
.nav1 {display:none;}

/* MENU CSS */
.c-hamburger-wrapper {display:none;float:right;margin-top:0;margin-right:2em;position:absolute;top:1em;right:0;}
.c-hamburger {display: block;position: relative;overflow: hidden;margin: 0;padding: 0;width: 50px;height: 50px;font-size: 0;text-indent: -9999px;appearance: none;box-shado none;border-radius: none;border: none;cursor: pointer;transition: background 0.3s;}
.c-hamburger:focus {outline: none;}
.c-hamburger span {display: block;position: absolute;top: 15px;left: 0;right: 18px;height: 5px;background: #445565;width:80%;}
.c-hamburger span::before,
.c-hamburger span::after {position: absolute;display: block;left: 0;width: 100%;height: 5px;background-color: #445565;content: "";}
.c-hamburger span::before {top: -11px;}
.c-hamburger span::after {bottom: -11px;}
/*MENU ANIMATION*/
.c-hamburger--htx {background: none;}
.c-hamburger--htx span {transition: background 0s 0.3s;}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {transition-duration: 0.3s, 0.3s;transition-delay: 0.3s, 0s;}
.c-hamburger--htx span::before {transition-property: top, transform;}
.c-hamburger--htx span::after {transition-property: bottom, transform;}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {background: none;}
.c-hamburger--htx.is-active span {background: none;}
.c-hamburger--htx.is-active span::before {top: 0;transform: rotate(45deg);}
.c-hamburger--htx.is-active span::after {bottom: 0;transform: rotate(-45deg); }
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after {transition-delay: 0s, 0.3s;}


/* CONTACT */
#contactsection .bottomline {position:absolute;bottom:0;display:block;height:23px;background:url(../../images/graytopline.png) center top repeat-x;width:100%;}
#contact {display:block;padding:4em auto;background:#7b9c3e;}

 /* FORM */
form {display:block;margin:3em 0 7em 0;}
.lozenge {display:inline-block;border:solid 1px #fff;border-radius: 20px;padding:5px 10px;width:95%;margin-bottom:20px;margin-right:2.5727%; /*23px;*/}
input, textarea {background:#7b9c3e;color:#fff;font-size:1em;padding:.4em;}
.lozenge2 {display:inline-block;border:solid 1px #fff;border-radius: 20px;padding:5px 10px;width:95%;margin-bottom:20px;}
.lozenge label,
.lozenge2 label,
label {color:#fff;vertical-align:middle;font-size:1.2em;padding:.4em;}
.lozenge textarea,
.lozenge2 textarea {border:none;vertical-align:middle;width:90%;height:80px;}
.lozenge input,
.lozenge2 input {height:30px;border:none;vertical-align:middle;width:75%;}
.enquire {width:98%;margin-right:0;}
.cap {font-size:14px;vertical-align:middle;color:#fff;text-align:center;font-size:1em;width:100%!important}
.cap a {color:#fff;}
.btn {background-color:#445565;padding:15px;color:#fff;font-size:1.7em;border-radius:20px;border:none;display:block;margin:2em auto;width:300px;cursor:pointer;font-family: 'Shadows Into Light Two', cursive;letter-spacing:2px;}
#captchaimg {margin-bottom:10px;margin-top:12px;vertical-align:middle;background:#fff}
.captchawrapper {display:block;text-align:center;margin-bottom:1em}
#content {min-height:400px;}
.contact h2 {font-size:2.4em;color:#fff;text-align:center;margin:4em 0 0 0;font-family: 'Shadows Into Light Two', cursive;line-height:2em;}
.contact p {font-size:1.2em;color:#445565;text-align:center;}
.error {display:block;color:#445565!important;}

/* FOOTER */
#footer {background:#445565;display:block;padding:4em 0;}
#footer .details {text-align:right;line-height:1.3em;color:#fff;}
#footer ul {display:block;text-align:left;margin-top:2em;}
#footer li {display:inline-block;padding:.6em 1em;}
#footer li a {text-decoration:none;color:#fff;padding-bottom:.6em;}
#footer li a:hover {text-decoration:none;color:#445565;}
#footer .finedesign {font-size:.7em;color:#fff;padding-left:1.7em;}
#footer .finedesign a {color:#fff;}
#footer .subheader {font-size:1em;color:#fff;margin:0 0 1em 1em;}
#footer .tel {font-size:1.4em;color:#fff;text-align:right;margin-top:1em;padding:0;}
#footer .tel a {font-size:.7em;color:#fff;text-decoration:none;}




@media (max-width: 30em) {
  #twitter #tw-widget1 ul li .wrapper {text-align:center;}
    #twitter #tw-widget1 ul li p {text-align:center;}
  nav {display:none;width:100%;position:absolute;top:75px;background:#fff;padding-bottom:1.4em;-webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow:0px 1px 2px 0px rgba(50, 50, 50, 0.3);box-shadow:0px 1px 2px 0px rgba(50, 50, 50, 0.3);z-index:19000;}
  .c-hamburger-wrapper {display:block;}
  nav ul {display:block;text-align:right;margin-top:1em;position:relative;}
  nav ul li {display:block;list-style: none;text-align:center;padding:.3em 1em}
  .logo {display:block;width:50%;margin:0 auto 0 1em;}
  header {min-height: 120px;}
  .parallax-window .hero {position:relative;top:100px!important;top:20vh!important;padding:8em 0;}
  .gridcontain {width:100%}
  .parallax-window p {width:60%;margin:1em 0 0 2em;}
  #contact {padding:4em 1em;}
  .lozenge label, .lozenge2 label {display:block;text-align:center;margin-bottom:.3em;}
  .lozenge, .lozenge2 {margin-right:0;width:98%}
  .lozenge input, .lozenge2 input {width:100%;text-align:center;}
   #footer {padding:2em;text-align:center;}
   #footer .details {text-align:center;margin-top:2em;}
   #footer ul {text-align:center;margin-bottom:2em;}
   #footer li {padding:.1em 1em;}
   #footer .tel {text-align:center;}
   .parallax-window h1 {width:100%;margin:0 auto;text-align:center;font-size:260%;color:#fff;font-weight:200;letter-spacing:-1px;line-height:1.2em;min-height:200px;background-size:265%;padding-top:10%;}
   .tel {display:none;}
   .logorelative {z-index:200;}
   form {display:block;margin:1em 0 4em 0;}
   .owl-carousel .owl-wrapper-outer.autoHeight{min-height:75vh;}
   .owl-item img {min-height:75vh;width:auto!important;}
   .owl-item div span {position:absolute;top:35%;left:50%;color:#fff;font-size:2.4em;z-index:19001;background:url(../../images/product-background.png) top center no-repeat;min-width:520px;font-weight:600;min-height:92px;padding-top:.4em;text-align:center;margin-left:-250px;background-size:70%;}
   .about p {text-align:center;}
   .contact h2 {margin-top:0;}
   #twitter #tw-widget1 ul li {width:100%;float:left;overflow:hidden;padding:0 1em;}
   #twitter #tw-widget1 ul li .media img {position: absolute;top: 50%;left: 50%;margin-top: -350px; /* Half the height */margin-left: -170px; /* Half the width */max-width:120%;}
 }
@media (min-width: 30em) and (max-width: 40em) {
   .logo {display: block;width: 45%;margin: 0 auto 0 1em;}
   .tel {display:none;}
   .parallax-window h1 {line-height:1.2em;background-size:160%!important;min-height:150px;width:100%!important;padding-top:.7em!important;}
}
 @media (min-width: 30em) and (max-width: 60em) {
  nav {display:none;width:100%;position:absolute;top:86px;background:#fff;padding-bottom:1.4em;-webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow:0px 1px 2px 0px rgba(50, 50, 50, 0.3);box-shadow:0px 1px 2px 0px rgba(50, 50, 50, 0.3);z-index:18000}
  .c-hamburger-wrapper {display:block;}
  nav ul {display:block;text-align:right;margin-top:1em;position:relative;}
  nav ul li {display:block;list-style: none;text-align:center;padding:.3em 1em}
  .logo {display:block;width:70%;margin:0 auto 0 2em;}
  .about p {width:80%;margin:1em auto;}
  .logo {display:block;width:220px;;margin:0 auto 0 1em;}
  .parallax-window .hero {position:relative;top:200px;top:15vh;padding:8em 0;}
  .parallax-window h1 {width:90%;font-size:2.7em;padding-top:0;background-size:100%;}
  .gridcontain {width:50%;}
  .parallax-window {min-height:600px;}
    #contact {padding:4em 2em;}
      .lozenge label, .lozenge2 label {display:block;text-align:center;margin-bottom:.3em;}
     .lozenge {margin-right:0;width:98%}
     .lozenge2 {margin-right:0;width:100%}
     .lozenge, .lozenge2 input, .lozenge2 input {width:100%;text-align:center;}
      #footer {padding:2em;text-align:center;}
      #footer .details {text-align:center;margin-top:2em;}
      #footer ul {text-align:center;}
      #footer .tel {text-align:center;}
      .tel {margin-right:1.6em;width:100%;}
       form {display:block;margin:1em 0 4em 0;}
       .owl-item img {min-height:40vh;width:auto!important;}
       .owl-item div span {top:45%;}
       #twitter #tw-widget1 ul li {width:100%;float:left;overflow:hidden;padding:0 1em;}
       #twitter #tw-widget1 ul li .media img {position: absolute;top: 50%;left: 50%;margin-top: -350px; /* Half the height */margin-left: -320px; /* Half the width */max-width:120%;}
 }

 @media (min-width: 60em) and (max-width: 89em) {
  .about p {width:80%;margin:0 auto;}
  nav ul {right:2em;}
  .logo {display:block;width:245px;margin:0 auto 0 2em;}
  form {display:block;margin:4em 2em;}
   #footer {padding:2em;}
  .tel {margin-right:1.2em;}
  #twitter #tw-widget1 ul li {width:50%;float:left;overflow:hidden;padding:0 1em;}
 }

  @media (min-width: 110em)  {
     .parallax-window .hero {position: relative;top: 900px;top:30vh;padding: 8em 0;}
     .parallax-window h1 {font-weight:100;width:75%}
  }

  @media (max-height: 960px)  {
    .parallax-window .hero {top:200px;}
  }