html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }


body {
    line-height:1;
    font-family: 'Open Sans', sans-serif;
    /* cursor: url(../imgs/ring.svg), auto;*/
    /*-moz-cursor: url(../imgs/ring.svg), auto;*/
   color: #333;
    overflow-x: hidden !Important;
}
html {
  scroll-behavior: smooth;
}
body, html {
    width: 100%;
    height: 100%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
.error{
    color:red!important;
    font-size:12px !important;
}

#circularcursor {
  background-color: transparent;
  border:4px solid #999;    
  height:30px;
  width:30px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  position: absolute;
  z-index: 1;
    
}

/*
#cube {
  background-color: transparent;
  background-image: url(../images/catering-icon.png);
    background-repeat: no-repeat;
  height:101px;
  width:101px;
  
  position:absolute;
  top:50%;
  left:50%;   
  z-index: 9999;
}
*/
.circleBase {
    border-radius: 50%;
}
.roundCursor {
    width: 20px;
    height: 20px;
    background: red;
    border: 0px solid #000;
    display: none;
}
nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
   
    text-decoration: none;
    background:transparent;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    cursor: pointer;
/*
    cursor: url(../imgs/ring.svg), auto;
    -moz-cursor: url(../imgs/ring.svg), auto;
*/
    
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#666;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#666; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}
h1, h2, h3, h4, h5, h6 {
    color: #666;
}
.wrapperf {
    width: 98%;
    margin: auto;
}
.wrapper {
    max-width: 1300px;
    width: 95%;
    margin: auto;
}
.split {
    clear: both;
}
.colm3 {
    float: left;
    width: 32.9%;
    margin: 0.2%;      
}
.colm5 {
    float: left;
    width: 19.9%;
    margin: 0.2%;      
}
.colm4 {
    float: left;
    width: 24.6%;
    margin: 0.2%;      
}
.leftpanel {
    width: 75%;
    float: left;
}
.rightpanel {
    width: 24%;
    float: right;
}
.formprop {
    width: 100%;
}
.formprop fieldset {
    padding: 20px;
    box-sizing: border-box;
    border: solid 4px #eee;
    margin: 10px 0 20px 0px;
}
.formprop legend {
    font-size: 20px;
    font-weight: 600;
    color: #313234;
    padding:  0 10px;
}
.formprop .fhead {
    width: 100%;
    text-transform: uppercase;
    display: block;
    font-size: 13px;
    padding:  0 0 8px 0px;
    color: #666;
}
.formprop input[type="text"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="text"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop input[type="tel"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="tel"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop input[type="email"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="email"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop input[type="number"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="number"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}

.formprop input[type="date"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="date"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop input[type="time"] {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop input[type="time"]:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop select {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
}
.formprop select:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop textarea {
    width: 100%;
    font-size: 15px;
    padding:  10px;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #ccc;
    font-family: "Archivo", serif;
    outline: none;
    margin-bottom: 20px;
    resize: none
}
.formprop textarea:focus {
    border: solid 1px #ddd;
    background-color: #f7f7f7
}
.formprop button {
    font-size: 16px;
    padding:  10px 25px;
    box-sizing: border-box;
    color: #fff;
    border: solid 1px #313234;
    background-color: #313234;
    font-family: "Archivo", serif;
    outline: none;
  
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}
.formprop button:hover {
    border: solid 1px #ddd;
    background-color: #f7f7f7;
    color: #313234;
}
.stextlab {
    font-size: 14px;
    line-height: 29px;
}
.packboxslide {
    background-color: #f7f7f7;
    box-shadow: 0 2px 3px #ccc;
    padding: 20px;
    box-sizing: border-box;
    margin: 18px 0 0 0px;
}
.packboxslide h5 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    margin-bottom: 15px;
}
.packboxslide .packinfobox {
    font-size: 12px;
    color: #666;
    line-height: 18px;
}
.packboxslide .packinfobox span {
    padding: 5px 0px;
    font-size: 14px;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.fleft {
    float: left;
    width: 49%;
}
.fright {
    float: right;
    width: 49%;
}
/*vegetables start*/
.vegetables {
  display: block;
  position: absolute;
}
.tom_top {
  z-index: 3;
  top: -65px;
  left: -30px;
    width: 160px;
}
.gspicy_top {
  z-index: 99;
  top: -35px;
  right: -100px;
}
.on_top {
  z-index: 1;
  top: -95px;
  right: 0px;
}

.leaf_left {
  z-index: 1;
  top: 70px;
  left: -100px;
}
.mash_left {
  z-index: 1;
  top: 100px;
  left: -20px;
}
.gspicy_left {
  z-index: 2;
  top: 130px;
  left: -220px;
}
.on_left {
  z-index: 22;
  top: 310px;
  left: -210px;
}
.cap_left {
  z-index: 44;
  top: 620px;
  left: -70px;
}

.rspicy_right {
  z-index: 1;
  top: 130px;
  left: -30px;
}
.tom_right {
  z-index: 55;
  top: 44px;
  right: -11px;
}
.perse_right {
  z-index: 1;
  top: 100px;
  right: -80px;
}
.gspicy_right {
  z-index: 1;
  top: 100px;
  right: -90px;
}
.coli_right {
  z-index: 1;
  top: 175px;
  right: -195px;
}
.gcap_right {
  z-index: 55;
  top: 350px;
  right: -110px;
}
.cap_right {
  z-index: 44;
  top: 450px;
  right: -30px;
}
.mash_right {
  z-index: 4;
  top: 525px;
  right: -250px;
}
.basil_right {
  z-index: 1;
  top: 650px;
  right: -190px;
}
.vegetables > * {
  position: absolute;
}
/*vegetables end*/
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.fheader {
    background: rgba(245,245,245,0.8);
    box-shadow: 0 2px 3px #ccc;
     backdrop-filter: blur(20px);
    z-index: 999 !Important;
}
.fheader .logo {
    display: none;
}
.fheader .hlogo {
    display: block;
}
.fheader nav {
  text-align: right;
  margin: 0px 0 0 0px;
}
.fheader nav ul li a {
	color: #293a54;
}
.fheader nav ul li a:hover {
	color: #fff;
}
.fheader .activelink {
    background-color: #293a54;
    color: #fff !important;
}
.fheader :hover.activelink {
    color: #293a54 !important;
    background-color: #fff;
}
header {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    padding: 15px 0px;
    z-index: 99;
    background-image: url(../imgs/top-gradiant-gray.png);
   
    background-repeat: repeat-x;
/*    background: #48484a;*/
/*    backdrop-filter: blur(10px);*/
}
.hlogo {
    position: absolute;
    width: 140px;
    top: 8px;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    display: none;
}
.hlogo img {
    width: 100%;
}

.logo {
    position: absolute;
    width: 260px;
    top: 10px;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
.logo img {
    width: 100%;
}
nav {
    text-align: right;
    margin: 25px 0 0 0px;
}
nav ul {
    width: auto;
}
nav ul li {
    list-style: none;
    display: inline-block;
}
/*
nav ul li a {
    color: #fff;
    padding: 10px 15px;
    display: block;
    

    font-size: 18px;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 1.5px;
}
nav ul li a:hover {
    color: rgba(255,255,255,0.5);
    
}
*/
nav ul li a {
	position: relative;
	display: inline-block;
	margin: 4px 0px;
    padding: 8px 14px !important;
	outline: none;
	color: #fff;
    font-family: "Archivo", serif;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 16px;
    letter-spacing: -0.2px;
    border-radius: 4px;
}
nav ul li span {
	position: relative;
	display: inline-block;
	margin: 4px 0px;
    padding: 8px 14px !important;
	outline: none;
	color: #fff;
    font-family: "Archivo", serif;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 16px;
    letter-spacing: -0.2px;
    border-radius: 4px;
}
nav ul li a:hover,
nav ul li a:focus {
	outline: none;
    color: rgba(255,255,255,0.5);
    background-color: #293a54;
}
nav ul li:hover > a {
    color: #fff;
    background-color: #293a54;
}
nav ul li:hover ul {
    display: block;
}
nav ul ul {
    display: none;
    position: absolute;
    box-shadow: 0 2px 2px #ccc;
    padding: 10px !important;
    box-sizing: border-box;
    background-color: #fff;
    margin-left: 0px;
    z-index: 9999;
}
nav ul ul li {
    float: none;
    display: block;
    text-align: left;
    
}
nav ul ul li a {
    font-size: 14px;
    padding: 10px;
    color: #333 !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-transform: none;
    margin: 0px;
    letter-spacing: 0.5px;
    
}
nav ul ul li a:hover {
    background-color: #293a54;
    color: #fff !important;
}
.activelink {
    background-color: #fff;
    color: #293a54 !important;
}
:hover.activelink {
    color: #fff !important;
}
/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
	color: rgba(255,255,255,1);
	text-shadow: none;
	padding: 0px 0;
}

.cl-effect-17 a::before {
	color: #fff;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 100%;
	height: 2px;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateY(5px);
	-moz-transform: translateY(5px);
	transform: translateY(5px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-17 a:hover::before,
.cl-effect-17 a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	transform: translateY(-2px);
}

.cl-effect-17 a:hover::after,
.cl-effect-17 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
.imainscreen {
    width: 100%;
    height: 50%;
    background-color: #212020;
    background-repeat: no-repeat;
    background-position: top -50px center;
    background-size: 100%;
    background-attachment: fixed;
   
}
.imaincontent {
  height: auto;
  width: 1280px;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  left: 50%;
  top: 30%;
  color: #fff;
  text-align: center;
    z-index: 1;
}
.imaincontent h1 {
  font-size: 40px;
  font-family: "Archivo", serif;
  font-weight: 600;
  line-height: 30px;
  margin:  0 0 10px 0px;
    color: #fff;
    letter-spacing: -1px;
}
.imaincontent h2 {
  font-size: 20px;
  font-family: "Archivo", serif;
  font-weight: 100;
  line-height: 40px;
  margin:  0 0 20px 0px;
    color: #fff;
    letter-spacing: 0.5px;
}
.mainscreen {
    width: 100%;
    height: 100%;
    background-color: #212020;
    overflow-y: hidden !Important;
}
.mainscreen video {
 position: absolute;
    top: 100%;
    left: 100%;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.5;
    width: auto;
    height: auto;
    -ms-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}

.maincontent {
  height: auto;
  width: 1280px;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  left: 50%;
  top: 60%;
  color: #fff;
  text-align: center;
    z-index: 1;
}
.maincontent h1 {
  font-size: 50px;
  font-family: "Archivo", serif;
  font-weight: 600;
  line-height: 40px;
  margin:  0 0 10px 0px;
    color: #fff;
    letter-spacing: -1px;
}
.maincontent h2 {
  font-size: 25px;
  font-family: "Archivo", serif;
  font-weight: 100;
  line-height: 40px;
  margin:  0 0 20px 0px;
    color: #fff;
    letter-spacing: 0.5px;
}
.mcat {
    margin: 50px 0px 0 0px;
    overflow: hidden;
}
.mcat ul {
    width: auto;
    margin: 0px;
    padding: 0px;
}
.mcat ul li {
    width: auto;
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 24%;
    margin: 0.5%;
    float: left;
    text-align: left;
    background: rgba(0,0,0,0.3);
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
.mcat ul li:hover {
    transform: scale(0.9);
    background: rgba(41,58,84,0.6);
}
.mcat ul li img {
    width: 25%;
}
.mcat ul li h3 {
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    margin: 0 0 11px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mcat ul li h3:hover {
    color: rgba(255,255,255,0.3);
}
.mcat ul li p {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-weight: 400;
}
.cateringsol {
    width: 100%;
    padding: 50px 0px;
    background-color: #f1f1f1;
}
.cateringsol h2 {
    font-size: 44px;
    color: #293a54;
    font-weight: 700;
    margin: 0 0 20px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.pcs {
    padding: 50px 0px 100px 0px;
    width: 100%;
    background-image: url(../images/cateringbg.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    overflow: hidden;
}
.pcs h2 {
    font-size: 44px;
    color: #293a54;
    font-weight: 700;
    margin: 0 0 0px -20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pcslogo {
    text-align: center;
    width: 100%;
}
.pcslogo img {
    max-width: 500px;
    width: 75%;
    margin: auto;
}
.pcs h3 {
    font-size: 55px;
    color: #666;
    font-weight: 100;
    margin: 0 0 5px 0px;
    letter-spacing: 0.5px;
    font-family: "Great Vibes", cursive;
}
.pcs h4 {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    margin: 0 0 10px 0px;
    letter-spacing: 0.5px;
}
.pcs p {
    font-size: 16px;
    margin: 0 0 20px 0px;
    letter-spacing: 0.5px;
    line-height: 26px;
    font-family: "Archivo", serif;
}
.colm2 {
    width: 49%;
    margin: 0.5%;
    float: left;
}
.itemthumb {
    width: 22%;
    float: left;
}
.itemthumb img {
    width: 100%;
}
.feature-copy {
    float: right;
    width: 76%;
}
.feature-copy h5 {
  font-size: 20px;
  color: #293a54;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.feature-copy p {
  font-size: 14px !important;
  color: #333;
  margin-bottom: 5px;
  min-height: 60px;
  line-height: 22px;
  color: #666;
}
.feature-copy .price {
  font-size: 18px;
  font-weight: 700;
    background-color: #293a54;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
}
.graybg {
     background-color: #f9f9f9;
}
.ipage {
    padding: 50px 0px 100px 0px;
    width: 100%;
   
}
.ipage h2 {
    font-size: 44px;
    color: #293a54;
    font-weight: 700;
    margin: 0 0 0px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ipage h3 {
    font-size: 55px;
    color: #666;
    font-weight: 100;
    margin: 0 0 5px 0px;
    letter-spacing: 0.5px;
    font-family: "Great Vibes", cursive;
}
.ipage h4 {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    margin: 0 0 10px 0px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ipage h5 {
    font-size: 20px;
   
    font-weight: 600;
    margin: 0 0 10px 0px;
}
.ipage h6 {
    font-size: 18px;
    color: #333;
    font-weight: 100;
    margin: 0 0 10px 0px;
}
.ipage p {
    font-size: 16px;
    margin: 0 0 20px 0px;
    letter-spacing: 0.5px;
    line-height: 26px;
    font-family: "Archivo", serif;
}
.ipage ul  {
    padding: 0px ;
    margin: 0 0 0px 25px ;
}
.ipage ul li {
    font-size: 16px;
    margin: 10px 0 10px 0px ;
    letter-spacing: 0.5px;
    line-height: 26px;
    font-family: "Archivo", serif;
}
.homeleftcontent {
    width: 49%;
    float: left;
}
.picrf {
    float: right;
    margin-left: 1%;
    width: 50%;
    box-shadow: 0 1px 2px #ccc;
    padding: 8px;
    box-sizing: border-box;
}
.picr {
    float: right;
    margin-left: 1%;
    width: 50%;
}
.picrs {
    float: right;
    margin-left: 1%;
    width: 22%;
}
.picls {
    float: left;
    margin-right: 1%;
    width: 33%;
    margin-bottom: 100px;
}
.picrcircle {
    border-radius: 50%;
    width: 100%;
    position: relative;
    z-index: 2;
    top: 40px;
}
.picrcirclebor {
    width: 90%;
    position: relative;
    margin-top: -520px !important;
    margin-left: 30px;
    border-radius: 20px;
    animation: spin 50s infinite linear;
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.padlr {
    padding: 20px 100px;
    box-sizing: border-box;
}
.concerns {
    width: 100%;
}
.concerns ul {
    width: auto;
    
}
.concerns ul li {
    width: 33%;
    float: left;
    list-style: none;
    text-align: center;
}
.concerns ul li .lone {
    width: 200px;
}
.concerns ul li .ltwo {
    width: 86px;
}
.concerns ul li .lthree {
    width: 133px;
}
.concerns ul li h3 {
    font-size: 22px;
    margin: 5px 0 10px 0px;
}

@media screen and (max-width: 750px) {
.vegetables {
  display: block;
  position: absolute;
    display: none;
}    
.concerns ul li {
    width: 100%;
    float: none;
    list-style: none;
    text-align: center;
    margin-bottom: 25px;
}    
.mainscreen {
/*
  position: relative;
  width: 100%;
  height: 400px;
*/
  overflow: hidden;
  }
.main {
    width: 100%;
    height: 400px;
    margin: 32px 0 0 0px;
}
.main img {
    width: 100%;
    height: 400px !important;
}    

    .pull-right, .pull-left {
        float: none;
        width: 100%;
        text-align: center;
    }
.maincontent {
  height: auto;
  width: 300px;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  left: 50%;
  top: 50% !Important;
  color: #fff;
  text-align: center;
    z-index: 11;
}
.maincontent h1 {
  font-size: 33px;
  font-family: "Archivo", serif;
  font-weight: 600;
  line-height: 33px;
  margin: 0 0 10px 0px;
  color: #fff;
  letter-spacing: -1px;
}    
.maincontent h2 {
  font-size: 16px;
  font-family: "Archivo", serif;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 20px 0px;
  color: #fff;
  letter-spacing: 0.5px;
}    
    
    
}

#leftrob {	
	visibility:hidden;
}
.leftrob {
    position: absolute;
    left: -160px;
    	animation: 1s lsa ;
	-webkit-animation: 1s lsa;

    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
	visibility:visible !important;	
}
.leftrob img {
    width: 350px;
}
@-webkit-keyframes lsa {
0% {
    -webkit-transform: translateX(-50%);
	opacity: 0;
}
100% {
    -webkit-transform: translate(0px,0px);
	opacity: 1;
}

}

@keyframes lsa {
0% {
    transform: translateX(-50%);
	opacity: 0;
}
100% {
	transform:translate(0px, 0px);
	opacity: 1;
}
}
#righthand {	
	visibility:hidden;
}
.righthand {
    position: absolute;
    right: -160px;
    margin-top: -350px;
    	animation: 1s rsa ;
	-webkit-animation: 1s rsa;
	
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
	visibility:visible !important;
	opacity: 0;
   
}
.righthand img {
    width: 400px;
   
}
@-webkit-keyframes rsa {
0% {
    -webkit-transform: translateX(50%);
	opacity: 0;
}
100% {
    -webkit-transform: translate(0px,0px);
	opacity: 1;
}

}

@keyframes rsa {
0% {
    transform: translateX(50%);
	opacity: 0;
}
100% {
	transform:translate(0px, 0px);
	opacity: 1;
}
}
.hline {
  border-top: dashed 1px #ccc;
  padding-bottom: 25px;
}
.map {
    width: 100%;
    margin-top: 25px;
}
.tablink {
    width: 100%;
}
.tablink a {
    padding: 8px 20px 10px 20px;
    display: inline-block;
    font-size: 16px;
    font-family: "Archivo", serif;
    font-weight: 600;
    margin: 0 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wlink {
    background-color: #fff;
    color: #666;
}
:hover.wlink {
    background-color: #333;
    color: #fff;
}
.dlink {
    border: solid 1px rgba(41,58,84,0.5);
    color: #fff;
    background-color: #293a54;
}
:hover.dlink {
    background-color: #fff;
    color: #293a54;
}
.dlinkrev {
    border: solid 1px rgba(41,58,84,0.5);
    color: #293a54;
    
}
:hover.dlinkrev {
    background-color: #293a54;
    color: #fff;
}
.dflink {
    color: #fff;
    background: #49474a
}
:hover.dflink {
    background-color: #000;
    color: #fff;
}
.whyus {
    width: 100%;
    min-height: 400px;
    background-color: #293a54;
    padding: 100px 0px;
  background-image: url('../images/left-dishes.png');
    background-repeat: no-repeat;
    background-position: bottom left;
}
.whyus h2 {
    font-size: 44px;
    color: #fff;
    font-weight: 700;
    margin: 0 0 30px 0px;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-align: right;
}
.foodplate {
    float: left;
    margin-left: -250px;
}
.foodplate img {
    animation: spin 50s infinite linear;
}
.whyus p {
    color: rgba(255,255,255,0.7);
    margin: 0 0 0px 0px;
    font-size: 20px;
    margin: 0 0 20px 0px;
    letter-spacing: 0.5px;
    line-height: 26px;
    font-family: "Archivo", serif;
  
}
.whyus ul {
    width: 75%;
    margin-bottom: 30px;
    text-align: right;
    float: right;
}
.whyus ul li {
    width: 100%;
    padding: 5px 0px;
}
.whyus ul li h3 {
    font-size: 33px;
    font-weight: 100;
    margin: 0 0 0px 0px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    
}
.pg {
    padding: 50px 0px 0px 0px;
    width: 100%;
}
.pg h2 {
    font-size: 44px;
    color: #293a54;
    font-weight: 700;
    margin: 0 0 40px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.gp {
    width: 100%;
}
.gp ul {
    width: auto;
    padding: 0px;
    margin: 0px;
}
.gp ul li {
    width: 24.8%;
    margin: 0.1% 0.1%;
    float: left;
    list-style: none;
    background-color: #f7f7f7;
}
.gp ul li img {
    width: 100%;
    border: solid 1px #ddd;
    padding: 4px;
    box-sizing: border-box;
}
.gp ul li a h3 {
    font-size: 22px;
    letter-spacing: -1px;
    font-family: 'Playfair Display', serif;
    font-weight: 100;
}
.gp ul li a span {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gp ul li a:hover {
    text-decoration: none;
}
/* Accordinan custom css start */

.ui-accordion .ui-accordion-header {
    margin: 5px 0 0 0 !Important;
    padding: 0.5em .5em 0.5em 0em !Important;
    font-size: 18px !Important;
    font-weight: 600;
    
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #313234 !Important;
    background: #313234 !Important;
    font-weight: normal;
    color: #ffffff;
}

/* Accordinan custom css end */
.grid {
	position: relative;
	margin: 0 auto;
	padding: 0px;
	
	list-style: none;
	text-align: center;
}
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 0.5%;
	max-height: 320px;
	width: 32%;
	background: #000;
	text-align: center;
	cursor: pointer;
}    
.figurefour {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 0.5%;
	height: 460px;
	width: 24% !important;
	background: #3085a3;
	text-align: left !important;
	cursor: pointer;
}
.figurefive {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 0.5%;
	height: 300px;
	width: 19% !important;
	background: #3085a3;
	text-align: left !important;
	cursor: pointer;
}
.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h3 {
	word-spacing: -0.15em;
	font-weight: 600;
    font-size: 20px !important;
   
}

.grid figure h3 span {
	font-weight: 800;
}

.grid figure h3,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
	background: #000;
}

figure.effect-milo img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    opacity: 0.7;
}

figure.effect-milo:hover img {
	opacity: 0.2;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h3 {
	position: absolute;
   font-family: "Archivo", serif;
	right: 0;
	bottom: 0;
	padding: 1em 1.2em;
    font-size: 20px !Important;
    letter-spacing: 1px;
    color: #fff;
    text-align: right;
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	width: 100%;
    line-height: 20px;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.cf7 {
    color: rgba(255,255,255,0.9);
}
.cf6 {
    color: rgba(255,255,255,0.8);
}
.cf5 {
    color: rgba(255,255,255,0.7);
}
.cf4 {
    color: rgba(255,255,255,0.6);
}
.cf3 {
    color: rgba(255,255,255,0.5);
}
.cf2 {
    color: rgba(255,255,255,0.4);
}
.copyright {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    float: left;
    margin: 3px 0 0 0px;
}
.copyright a {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    text-transform: uppercase;
}
.copyright a:hover {
    color: rgba(255,255,255,1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: normal !important;
}
.social {
    float: right;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}
.social a {
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    padding: 0 10px;
}
.social a:hover {
    color: rgba(255,255,255,1);
    font-size: 18px;
    padding: 0 10px;
}
.top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    z-index: 999;
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
    text-align: center;
    line-height: 40px;
    display: none;
}
.top a {
    font-size: 30px;
    color: rgba(255,255,255,0.7);
    display: block;
    padding-bottom: 5px;
    
}
.top a:hover {
    font-size: 50px;
    opacity: 0.5;
}
footer {
    width: 100%;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    border-top: solid 1px rgba(84,84,84,0.3);
    z-index: 9999 !Important;
    background: rgba(38,38,38,0.9);
}
.mobmenu {
    display: none;
}
.callta {
    display: none;
}
.mobmenuclose {
    display: none;
}
@media screen and (max-width: 1366px) {    
      
}
@media screen and (max-width: 1280px) {
    
}
@media screen and (max-width: 950px){	
.callta {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #fff;
    font-size: 25px;
    display: block;
}    
.callta a {
    color: #fff;
    font-size: 25px;
}     
.mobmenu {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
    font-size: 25px;
    display: block;
}    
.mobmenuclose {
    display: block;
}    
.fheader {
  padding: 10px 0 5px 0px;
}    
.fheader .callta a {
    color: #333;
}    
    
.fheader .mobmenu {

    color: #333;

}     
header {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0;
  padding: 0px 0px 5px 0px;
  z-index: 99;
  background-image: url(../imgs/top-gradiant-gray.png);
  background-repeat: repeat-x;
  background: #48484a;

}    
.hlogo {
  position: relative;
  width: 140px;
  top: inherit;
  margin: auto;
  display: none;
}    
 .logo {
     position: absolute;
    width: 100%;
    top: 10px;
     left: 0;
     text-align: center
  }   
.logo img {
  width: 222px;
}    
.fheader nav {
  text-align: center;
  margin: 0px 0 0 0px;
  height: auto;
}    
nav {
  text-align: right;
  margin: 0px 0 0 0px;
  position: fixed;
  background-color: rbga(0,0,0,0.9);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  backdrop-filter: blur(20px);
    padding: 25px;
    display: none;
}    
nav ul li {
  list-style: none;
  display: block;
    text-align: center;
  
}    
   
.tom_top {
  z-index: 3;
  top: -15px;
  left: 225px;
  width: 75px;
}
.gspicy_top {
  z-index: 99;
  top: -15px;
  left: 245px;
  width: 75px;
}
.on_top {
  z-index: 1;
  top: -25px;
  left: 75px;
  width: 75px;
}    
.leaf_left {
  z-index: 1;
  top: 100px;
  left: -10px;
    width: 100px;
}
.mash_left {
  z-index: 1;
  top: 170px;
  left: -10px;
    width: 95px;
}
.gspicy_left {
  z-index: 2;
  top: 250px;
  left: -90px;
    width: 160px;
}
.on_left {
  z-index: 22;
  top: 355px;
  left: -115px;
  width: 190px;
}
.cap_left {
  z-index: 44;
  top: 500px;
  left: -10px;
  width: 110px;
}   
.rspicy_right {
  z-index: 1;
  top: 130px;
  left: -30px;
  width: 100px;    
}    
  
.tom_right {
  z-index: 55;
  top: 140px;
  right: 0px;
  width: 75px;        
}
.perse_right {
  z-index: 1;
  top: 90px;
  right: -10px;
  width: 90px;        
}
.gspicy_right {
  z-index: 1;
  top: 222px;
  right: -10px;
  width: 75px;        
}
.coli_right {
  z-index: 1;
  top: 275px;
  right: -25px;
  width: 120px;        
}
.gcap_right {
  z-index: 55;
  top: 350px;
  right: -40px;
  width: 75px;        
}
.cap_right {
  z-index: 44;
  top: 400px;
  right: -10px;
  width: 75px;        
}
.mash_right {
  z-index: 4;
  top: 490px;
  right: -70px;
  width: 155px;        
}
.basil_right {
  z-index: 1;
  top: 555px;
  right: -30px;
  width: 120px;        
}    
    
   
.on_bot {
    z-index: 2;
    bottom: -420px;
    left: -160px;
    position: absolute;
}   
.tom_bot {
    z-index: 3;
    bottom: -200px;
    left: -160px;
    position: absolute;
    width: 180px;
}    
.coli_bot {
    z-index: 3;
    bottom: 200px;
    left: -200px;
    position: absolute;
    display: none;
}    
.cap_bot {
    z-index: 5;
    bottom: 215px;
    right: -125px;
    position: absolute;
}    
.mcat {
  margin: 50px 0px 0 0px;
  overflow: hidden;
    display: none;
}    
.mcat ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 100%;
  margin: 2.5% 0px;
  float: none;
  text-align: center;
  background: rgba(0,0,0,0.3);
  padding: 5px;
  box-sizing: border-box;
} 
.mcat ul li h3 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  margin: 0 0 11px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.leftrob img {
  width: 150px;
}    
.padlr {
  padding: 20px;
  box-sizing: border-box;
}    
.picr {
  float: none;
  margin-left: 0%;
  margin-bottom: 15%;
  width: 92%;
}
.picrcirclebor {
  width: 90%;
  position: relative;
  margin-top: -520px !important;
  margin-left: 20px;
  border-radius: 20px;
/*  animation: spin 50s infinite linear;*/
}    
.homeleftcontent {
  width: 100%;
  float: none;
}    
.pcs {
  padding: 50px 0px 50px 0px;
}    
.righthand {
  position: absolute;
  right: -160px;
  margin-top: -150px;
    display: none;
}    
#righthand {
  visibility: hidden;
    display: none;
}    
.righthand img {
  width: 343px;
}    
.cateringsol h2 {
  font-size: 33px;
  color: #293a54;
  font-weight: 600;
  margin: 0 0 20px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}    
.figurefour {
  position: relative;
  float: none;
  overflow: hidden;
  margin: 20px auto;
  height: 460px;
  width: 98% !important;
  background: #3085a3;
  text-align: left !important;
  cursor: pointer;
}    
.whyus {
  width: 100%;
  min-height: 400px;
  background-color: #293a54;
  padding: 50px 0px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: bottom left;
}    
.foodplate {
    width: 100%;
  float: none;
  margin-left: 0px;
  text-align: center;
}   
.foodplate img {
  width: 95%;
  animation: none;
}     
.whyus h2 {
  font-size: 33px;
  color: #fff;
  font-weight: 600;
  margin: 20px 0 30px 0px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  text-align: center;
}    
.whyus ul {
  width: 100%;
  margin-bottom: 30px;
  text-align: center;
  float: none;
}    
.cateringsol {
    width: 100%;
    padding: 50px 0px 0 0px;
    background-color: #f1f1f1;
}    
.whyus ul li h3 {
  font-size: 22px;
  font-weight: 100;
  margin: 0 0 0px 0px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}    
.text-right {
  text-align: center;
}    
.pg h2 {
  font-size: 30px;
  color: #293a54;
  font-weight: 700;
  margin: 0 0 30px 0px;
  text-transform: uppercase;
  letter-spacing: normal;
  text-align: center;
}
.gp ul li {
  width: 95%;
  margin: 0.1% auto;
  float: none;
  list-style: none;
  background-color: #f7f7f7;
}    
.tablink a {
  padding: 8px 15px 8px 15px;
  display: inline-block;
  font-size: 14px;
  font-family: "Archivo", serif;
  font-weight: 600;
  margin: 0 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}    
.pg {
  padding: 0px 0px 0px 0px;
  width: 100%;
}    
.copyright {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
    line-height: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  float: none;
  margin: 4px 0 8px 0px;
    text-align: center;
}    
.social {
  float: none;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
    text-align: center;
}    
}