body {
	font-family: fb;
}
.st {
	font-family: fb;
	letter-spacing: 0.02em;
	color: #101010;
}
.ico {
	text-align: left;
	margin-left: 0;
	margin-bottom: 0.4em;
}
.ns-p {
	line-height: inherit;
	margin: 0;
	padding: 0;
}

.chart-div {
	padding: 0.5em;
	margin: 0.5em;
	width: 90%;
}

.chart-data {
	color: #5c7389;
	font-family: fb;
	padding: 1em;
	line-height: 1.4;
	padding-bottom: 0;
}

.chart-data em {
	font-size: 180%;
	font-weight: bold;
	font-family: fb;
	letter-spacing: 0.05em;
	width: 1.4em;
	display: inline-block;
}

form button {
	background-color: #2ECC71;
	border-radius: 1.5em;
	padding: 0.6em 1.5em;
}

.btn1 {
	line-height: 1.27;
	height: 7em;
	width: 7em;
	margin: 0.7em;
	line-height: 1.35;
	border-radius: 4em;
	box-shadow: none;
	transition: 1s ease all;
}



img {
	display: block;
}

.in {
	line-height: 1.45;
}



p {
	line-height: 1.68;
	margin-top: 1.5em;
	margin-bottom: 0.35em;
	text-align: justify;
	color: #333;
	letter-spacing: 0.0em;
}

article p {
	line-height: 1.7;
	margin-bottom: 1.6em;
	text-align: justify;
	text-align: left;
	color: #505050;
}
p em {
	font-family: fh;
	padding: 0 1px;
	border-bottom: 3px solid #00d99e;
}

li {
	color: #101010;
	letter-spacing: 0.02em;
}
ol {
	margin-top: 1.4em;
}
ol li {
	list-style: decimal;
	list-style-position: inside;
	text-indent: 3.75%;
	margin-top: 0.8em;
	text-align: left;
	color: #505050;
}
article ol li {
	text-align: left;
	color: #505050;
}
ol ul li {
	list-style: lower-alpha;	
	list-style-position: inside;
	text-indent: 7.5%;
}
figcaption {
	line-height: 1.5;
	color: #4a4e51;
	letter-spacing: 0.02em;
}

.li2 li {
	list-style-type: disc;
	list-style-position: inside;
	text-indent: 3.5%;
	line-height: 1.7;
	margin-top: 0.4em;
}

h1 {
	font-family: fh;
	line-height: 1.4;
}

h2 {
	font-family: fh;
	line-height: 1.4;
}
table {
	border-collapse: collapse;
	border: 0px solid #18cc8d;
}

table th {
	background-color: #18cc8d;
	color: white;
	font-family: fb2;
	font-weight: bold;
}

table td,
th {
	text-align: center;
	vertical-align: middle;
	border: 0px solid #18cc8d;
	padding: 1em 0.6em;
	margin: 0;
	color: #4f5f70;
	transition: 1s ease all;
}

table tr:hover {
	/*	font-size: 115%;*/
}

.td-desc {
	width: 12em;
	line-height: 1.5;
}

.tds {
	width: 6em;
	max-width: 6em;
	font-size: 84%;
	line-height: 1.5;
}

.display td {
	background-color: white;
}

.display img {
	height: 10em;
	width: auto;
	margin: 0 auto;
	display: block;
	transition: 1s ease-out all;
}

.display img:hover {
	height: 18em;
	width: auto;
	filter: saturate(150%);
}

.db-outer {}

.shdw {
	text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 5px 10px rgba(0, 0, 0, 0.1), 0px 12px 20px rgba(0, 0, 0, 0.1);
}

.elegantshadow {
	color: #131313;
	letter-spacing: 0.06em;
	text-shadow: 1px -1px 0 #767676, -1px 2px 1px #7b7a7a, -2px 4px 1px #999897, -3px 6px 1px #a3a1a1, -4px 8px 1px #b2b1b0, -5px 10px 1px #b2b1b0, -6px 12px 1px #c1bfbf, -7px 14px 1px #d4d2d1, -8px 16px 1px #e2e0df;
}

.elegantshadow2 {
	color: #131313;
	letter-spacing: 0.03em;
	text-shadow: 1px -1px 0 #767676, -1px 2px 1px #7b7a7a, -2px 4px 1px #999897, -3px 6px 1px #b2b1b0, -4px 8px 1px #e2e0df;
}

.deepshadow {
	color: #f9f9f9;
	letter-spacing: .1em;
	text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}

.ib {
	display: inline-block;
}

.heart {
	content: "";
	display: inline-block;
	background: url('../img/ico/heart_red.png');
	background-size: 100%;
	height: 1.5em;
	width: 1.5em;
	padding-bottom: 0;
	margin-bottom: -0.25em;
}

@keyframes appeardis {
	0% {
		opacity: 0.1;
		bottom: 2.4vw;
	}
	30% {
		opacity: 1;
		bottom: 0.1vw;
	}
	70% {
		opacity: 1;
		bottom: 0.1vw;
	}
	100% {
		opacity: 0.1;
		bottom: 2.4vw;
	}
}

.ordersys .help {
	width: 90%;
	margin-left: 5%;
	line-height: 1.35;
	font-size: 90%;
	margin-bottom: 2em;
}

@keyframes tilerotate {
	10% {
		transform: rotateX(30deg) rotateY(0deg);
	}
	30% {
		transform: rotateX(0deg) rotateY(30deg);
	}
	50% {
		transform: rotateX(30deg) rotateY(0deg);
	}
	70% {
		transform: rotateX(0deg) rotateY(-30deg);
	}
	90% {
		transform: rotateX(0deg) rotateY(0deg);
	}
}


.ordersys .space .in {
	line-height: 1.65;
	margin-bottom: 0.5em;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.45), 0 3px 12px 0 rgba(0, 0, 0, 0.3);
	transition: 0.7;
	padding-bottom: 1.8em;
}

.ordersys .space .title {
	margin-bottom: 1.5em;
}

.ordersys .space .in .st {
	margin: 0.8em 0;
	font-family: fb;
	color: #545454;
}

.ordersys .space .in .img {
	padding-bottom: 1.5em;
}



.ml5 {
  position: relative;
	font-family: fb2;
	line-height: 1.5;
	color: #ffffff;
	letter-spacing: 0.03em;
	text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.ml5 .text-wrapper {
  position: relative;
  display: inline-block;
	padding: 0.3em;
  padding-top: 0.1em;
  padding-bottom: 0.15em;
  line-height: 1em;
}
.ml5 .line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3px;
  width: 100%;
background-color: white;
  transform-origin: 0.5 0;
}
.ml5 .ampersand {
	color: #ffe500;
}
.ml5 strong {
	color: #ffe500;
}
.ml5 .letters {
  display: inline-block;
  opacity: 0;
}
@media all and (max-width: 375px) {
	.ml5 {
		font-size: 100%;
	}
}




.styleslogans {
}
.styleslogans .img {
	margin: 1% 0;
}
.styleslogans .en span {
	display: inline-block;
}
.styleslogans .en {
	font-family: fs;
	letter-spacing: -0.03em;
}
.styleslogans .img img {
	filter: saturate(1.35);
}
.styleslogans .si {
	margin-top: 2%;
	color: black;
}
.styleslogans .right .largeimg img {
	position: absolute;
	float: right;
	right: 0;
	text-align: right;
	width: 190%;
}
.styleslogans .right {
	position: relative;
	float: right;
	text-align: right;
}
.styleslogans .left {
	float: left;
}
.styleslogans .fontnormal {
	letter-spacing: -0.025em;
	font-family: fh;
	margin-top: 3.5%;
	color: black;
	line-height: 1.54;	
}


.orange {
	color: #f9a600;
}
.red {
	color: crimson;
}
.green {
	color: #0ac96c;
}


.navmain {
	box-shadow: -4px 4px 30px 2px rgba(195,206,217,0.8);
}
nav a {
  padding: 0.64em 1.15em;
	line-height: 1.2;
	margin: 0;
  display: inline-block;
  position: relative;
  z-index: 3;
	font-family: fh;
  transition: 0.8s ease-out all;
}
nav a:hover {
	font-size: 108%;
	font-family: fh;
	background-color: #84d100;
	color: white;
}
nav {
	padding: 0;
  	text-align: center;
	background-color: white;
}
nav ul {
	text-transform: uppercase;
}
nav ul li {
  list-style: none;
	margin: 0;
  display: inline-block;
  position: relative;
}

@media all and (max-width: 640px) {
	.navmain a {
  padding: 0.46em 0.75em;
		text-transform: capitalize;
		letter-spacing: -0.015em;
	}
}

.title {
	text-align: center;
	padding: 1.5em 0;
	line-height: 1.45;
}


.beliefs {    
	padding: 3% 2%;
	padding-bottom: 6%;
	background: linear-gradient(270deg, #FFE53B 0%, #fd3838 73%);
}
.beliefs .title h1 {
	margin-bottom: 2.75%;
}
.beliefs .title .st {
	color: white;
}
.beliefs .title {
	color: white;
	margin-bottom: 5%;
}
.beliefs .in {	
	text-align: center;
	line-height: 1.7;
	margin-bottom: 6.4%;
	background-color: white;
	padding: 3% 1.4%;
	border-radius: 0.7em;
	box-shadow: 3px 3px 60px 1px rgba(70,70,70,0.6);
}



.best {
	display: block;
	height: 100vh;
	overflow: hidden;
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
	background: url('../img/Food-Event-Catering-Moratuwa-Sri-Lanka.jpg');
	background-size: cover;
	background-attachment: fixed;
}
.best .cover {
	z-index: 2;
	display: block;
	height: 100vh;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: rgba(250,250,250,0.84);
	background-size: cover;
	background-attachment: fixed;
	transition: 1s cubic-bezier(0.6, 0.04, 0.6, 0.7) all; 
	animation: 7.5s cubic-bezier(0.6, 0.2, 0.6, 0.7) appeardis 5;
}
.best .cover:hover > .imgfloat {
	display: block;
}

@keyframes appeardis {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.75;
	}
	100% {
		opacity: 1;
	}
}

.best .in {
	height: 100vh;
	margin: 0;
	padding: 0;
	width: 33.12%;
	display: inline-block;
	z-index: 3;
	line-height: 1.54;
	text-align: center;
	position: relative;
	transition: 1.2s cubic-bezier(0.6, 0.04, 0.6, 0.6) all; 
}
@media all and (min-width: 1500px) {
	.best .in {
		padding: 0;	
	}
.best .cover {
	padding: 0;
	}
}
@media all and (max-width: 1200px) {
	.best .in {
		width: 32.95%;
	}
}
@media all and (max-width: 800px) {
	.best .in {
		width: 32.68%;
	}
}
@media all and (max-width: 450px) {
	.best .in {
		width: 32.45%;
	}
}
.best .title {
	padding: 0;
	margin: 0;
}
.best .title h1 {
	position: absolute;
	z-index: 21;
   top: 1.2%;
   left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
	color: black;
	line-height: 1.05;
	font-family: fs;
	margin-top: 0%;
	border-bottom: 2px solid white;
}
.best .title h1 span {
	color: #ffe900;
	font-family: fh;
}
.best .title .imgico {
	text-align: left;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 7em;
	margin-left: -43%;
}
.best .title .imgico img {
	position: absolute;
	width: 50%;
	z-index: 25;
	animation: floatmove3 5s cubic-bezier(0.5,1,0.5,1) infinite;
}
.best .title .icoleft {
	top: 1%;
	left: -7.8%;
}
.best .title .icoright {
	top: 7%;
	left: 17%;
	width: 6em;
}
.best .title .icoleft2 {
	top: 12.5%;
	left:  4%;
	width: 9em;
}
.best .in em {
	font-family: fh;
	letter-spacing: -0.025em;
	padding: 0.35%;
	position: relative;
   top: 60%;
   left: 50%;
	width: 100%;
	line-height: 1.35;
	display: block;
	transform: translate(-50%, -50%);
	transition: 0.6s cubic-bezier(0.6, 0.04, 0.6, 0.33) all; 
}
.best .imgico {
	position: absolute;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	bottom: 7%;
	width: 14%;
	margin-left: 43%;
}
.best .imgico img {
	text-align: center;
	position: relative;
	height: auto;
}
.best .one:hover{
	background: url('../img/drink-beverage-cocktail-catering-event-moratuwa-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.best .in:hover > em{
	width: 100%;
	display: block;
	font-size: 120%;
	padding: 3% 1.5%;
	background-color: #ffe100;
	line-height: 1.32;
	opacity: 0.96;
}
.best .two:hover{
	background: url('../img/rice-meal-event-catering-moratuwa-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.best .three:hover{
	background: url('../img/party-birthday-moratuwa-catering-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.best .one {
	animation: best1 4s cubic-bezier(0,0,.3,1) 1;
}
.best .two {
	animation: best2 5s cubic-bezier(0,0,.3,1) 1;
}
.best .three {
	animation: best3 6s cubic-bezier(0,0,.3,1) 1;
}
.best .imgfloat {
	display: none;
	top: 15%;
	position: relative;
	animation: 7.5s cubic-bezier(0.6, 0.2, 0.6, 0.7) floatmove1 infinite;
}
.best .imgfloat img {
	width: 10em;
	position: absolute;
	z-index: 6;
	opacity: 0.9;
}

@keyframes best1 {
  0% {
  }
  70% {
	background: url('../img/drink-beverage-cocktail-catering-event-moratuwa-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
}
@keyframes best2 {
  0% {
  }
  86% {
	background: url('../img/rice-meal-event-catering-moratuwa-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
}
@keyframes best3 {
  0% {
  }
  100% {
	background: url('../img/party-birthday-moratuwa-catering-bla.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
}



.contactinfo {
	padding: 10% 0;
	text-align: center;
	line-height: 1.45;
	background: linear-gradient(90deg, rgba(57,57,57,0.5) 0%, rgba(8,9,9,0.35) 100%), url('../img/food-catering-spoon-items-Moratuwa-Katubedda.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: top;
}
.contactinfo .in {
	color: white;
	padding: 3% 1%;
	border-radius: 0.3em;
	box-shadow: -5px 3px 57px 2px rgba(235,243,245,0.57);
}
.contactinfo span {
	display: block;
	font-family: fh2;
	margin: 6% 0;
	line-height: 1.4;
} 
@media all and (max-width: 800px) {
	.contactinfo .in {
		width: 60%;
		margin-left: 20%;
		margin-bottom: 10%;
	}
}
@media all and (max-width: 500px) {
	.contactinfo .in {
		width: 75%;
		margin-left: 12.5%;
		margin-bottom: 10%;
	}
}



.cover1 {
	display: block;
	height: 90vh;
	position: relative;
	z-index: -4;
	background: linear-gradient(90deg, rgba(77,77,77,0.15) 0%, rgba(78,93,99,0.15) 100%), url('../img/food-catering-spoon-items-Moratuwa-Katubedda.jpg');
	background-size: cover;
}
.niko .title {
	position: absolute;
	z-index: -4;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.niko .title em {
	font-family: fh;
	color: white;
	line-height: 1.35;
}
.niko .title .word1 {
	color: crimson;
}



.chefbox {
	padding: 2% 0;
	padding-bottom: 8%;
	position: relative;
}
.chefbox .title h2 {
	padding: 2.1% 1.5%;
	color: crimson;
	font-family: fh;
	letter-spacing: -0.035em;
}
.chefbox .in {
	padding-top: 1%;
	margin-bottom: 16%;
	border: 0px solid white;
	box-shadow: -5px 4px 43px 2px rgba(195,206,217,0.9);
	background: url("../img/redback.jpg");
	background-attachment: fixed;
	background-position: center;
	background-size: contain;
}
@media all and (max-width: 1000px) {
.chefbox .in {
	background-attachment: scroll;
	background-size: cover;
	}
}
.chefbox .inner {
	padding: 5%;
	line-height: 1.65;
}
.chefbox .in p {
	color: white;
	text-align: center;
}
.chefbox .in em {
	color: white;
	font-family: fh;
	text-transform: uppercase;
}
.chefbox .in .link {
	padding: 8% 3.2%;
	background-color: white;
	color: #5a6a75;
	line-height: 1.65;
	padding-bottom: 9%;
}
@media all and (max-width: 780px) {
	.chefbox .in {
		width: 54%;
		margin-left: 23%;	
	}
}
@media all and (max-width: 540px) {
	.chefbox .in {
		width: 70%;
		margin-left: 15%;	
	}
}





.footer {
	text-align: center;
	background-color: #333;
background: linear-gradient(270deg, rgba(60,68,75,0.78) 0%, rgba(19,19,19,0.57) 100%), url("../img/food-catering-spoon-items-Moratuwa-Katubedda.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	padding: 5% 2%;
	padding-bottom: 3.5%;
}
.footer .in {
	color: white;
	margin-bottom: 1.75%;
}
.footer .name {
	font-family: fh;
	margin-bottom: 1%;
}
.footer .link a {
	color: white;
	background-color: #12e281;
	padding: 0.6% 1.15%;
	border-radius: 1.2em;
	box-shadow: 0px 2px 25px rgba(70,170, 140, 0.84);
	transition: 0.6s cubic-bezier(0.6, 0.04, 0.6, 0.33) all; 
}
.footer .link a:hover {
	font-size: 115%;
	font-family: fh;
	color: black;
	background-color: #ffe100;
}



.headertitle {
	text-align: center;
	padding: 0.35% 0.9%;
	padding-bottom: 0.2%;
	margin-bottom: 0.5%;
}
.headertitle span {
	font-family: fs2;
	letter-spacing: 0em;
	margin-right: 0.5%;
}

strong {
	color: #84d100;	
}


.imgwide {
	text-align: center;
	color: white;
	font-family: fh;
	height: 24em;
	background: url('../img/food-catering-moratuwa-sri-lanka-wide.jpg');
	background-position: top;
	background-size: cover;
	background-attachment: fixed;
}
.imgwide .text {
	letter-spacing: -0.035em;
	position: relative;
	top: 42%;
}
@media all and (max-width: 1400px) {
.imgwide {
	height: 17em;
	}
}

@media all and (max-width: 800px) {
.imgwide {
	height: 12em;
	background-attachment: scroll;
	}
}

.homearticle {
	padding: 3% 0;
	padding-bottom: 2%;
}
.homearticle article {
}
.homearticle header {
	letter-spacing: -0.08em;
	text-align: center;
}
.homearticle section h2 {
	text-align: left;
	letter-spacing: -0.025em;
}
.homearticle section {
	padding: 2.1% 2.4%;
	background-color: white;
	text-align: left;
}
.homearticle h2 span {
	padding: 3px 9px;
	padding-bottom: 6px;
	margin: 0 2px;
	border-radius: 0.25em;
	color: white;
	background-color: #12e281;
}
.homearticle h1 span {
	color: #02d874;
}
@media all and (max-width: 680px) {
	.homearticle section {
		width: 100%;
		margin: 0;
		margin-bottom: 14%;
		padding: 3% 5.7%;
		padding-top: 6%;
	}	
}





.locations {
	padding: 7.5% 0;
	position: relative;
	z-index: -7;
	background: #f9e22f;
	background-attachment: fixed;
	background-size: 27%;
	background-position: top left;
}
.locations .mesa {
	border-top: 0em solid #f9e22f;
	padding: 0.5em 0;
	position: relative;
}
.locations .title em {
	color: orangered;
}
.locations .map img {
	margin-bottom: 4.5%;
	z-index: 0;
	filter: brightness(1.25) grayscale(0.1) saturate(1.35) contrast(1.2);
	transition: 0.6s cubic-bezier(0.6, 0.04, 0.6, 0.33) all; 
}
.locations .map img:hover {
}
.locations .title {
	padding-top: 0;
}
.locations .title h1 {
	color: black;
	text-align: center;
	line-height: 1.2;
	font-family: fh;
	font-weight: bold;
	padding: 0.45em 0;
}
.locations .title span {
	display: block;
	margin-top: 0em;
}
.locations .in {
	background-color: white;
	position: relative;
	padding-bottom: 5%;
	margin-bottom: 3.75em;
	padding-top: 0em;
}
.locations .in em {
	padding: 2.4% 2.7%;
	text-align: right;
	z-index: 2;
	color: black;
	display: block;	
	margin-bottom: 0.1em;
	font-family: fh;
	font-weight: bold;
	letter-spacing: -0.015em;
}
.locations .in p {
	text-align: left;
	padding: 0 3%;
}
.locations .nbr {
	position: absolute;
	z-index: 1;
	top: -8%;
	line-height: 0.8;
	opacity: 0.86;
	left: -0.5em;
	color: crimson;
	opacity: 0.82;
	font-family: fh2;
}
@media all and (max-width: 680px) {
	.locations .in {
		margin-bottom: 16%;
	}
	.locations .in em {
		font-size: 1.6em;
	}
	.locations .nbr {
		font-size: 7.5em;
		margin-left: 9%;
	}	
@media all and (max-width: 450px) {
	.locations .nbr {
		margin-left: 10.8%;
	}	
	.locations .in em {
		font-size: 1.32em;
	}
}

}




.mapsrilanka {
	position: relative;
	background-color: #4eb4ff;
}
.mapsrilanka .text {
	position: absolute;
	color: white;
	top: 8%;
	left: 2.8%;
	font-family: fb;
	line-height: 1.6;
}
.mapsrilanka .img {
	margin-right: 0%;
}
.mapsrilanka span {
	display: inline-block;
}
@media all and (max-width: 800px) {	
	.mapsrilanka .text {
		width: 80%;
		border-radius: 0.25em;
		padding: 5.7% 6%;
		position: relative;
		top: 0;
		left: 0;
		margin: 8% auto;
		margin-bottom: 0%;
		text-align: center;
		color: black;
		font-family: fb;
		background-color: #fff100;
		box-shadow: 0px 18px 80px rgba(70, 10, 10, 0.7);
	}
}



.menu .menustand {
    background: linear-gradient(90deg, rgba(255, 42,0,0.9) 0%, rgba(230,250,0,0.9) 100%), url("../img/blacaterers-moratuwa-building-2a.jpg"); 
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	padding-top: 0%;
	margin-top: 0;
	margin-bottom: -4%;
}
.menu section .title h2 {
	font-family: fh2;
	letter-spacing: 0.15em;
	line-height: 1.2;
	color: #a3b0ba;
	margin-bottom: -2.8%;
	text-transform: uppercase;
}
.menu .soup .title h2 {
	color: white;
}
.menu .soup .title .st {
	background-color: #f7b016;
}
.menu .latest-specials .title h2 {
	color: rgb(255, 255, 255);
	letter-spacing: 0.01em;
}
.menu .latest-specials .title .st {
	background-color: #fff;
}
.menu section .title .st {
	background-color: #a3b0ba;
	color: white;
	padding: 1% 0.5%;
	padding-top: 1.15%;
	font-family: fb;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 3%;
}
.menupage .menu section {
	padding: 6% 0%;
	padding-bottom: 8%;
}
.menu .rice {
    background: url("../img/rice-moratuwa-katubedda-order.jpg"); 
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}
.menu .soup {
    background: url("../img/vegetable-soup-moratuwa-order.jpg"); 
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}
.menu .latest-specials {
    background: url("../img/srilanka/srilanka-best-moratuwa-colombo-food-catering-traditional-BLA.jpg"); 
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom center;
}
.menupage .menu .in {
	color: #515456;
	border-radius: .0;
	background-color: white;
	margin-bottom: 6%;
	padding: 2.4% 1%;
	letter-spacing: 0.005em;
}
@media all and (min-width: 780px) {
	.menupage .menu .rice .in {
		padding: 2.1% 1%;
		height: 16.8em;
	}
}

.menu .in .ptn img {
	height: auto;
	width: 20%;
	display: inline-block;
}
.menu .in .ptnr {
	margin-left: -1.2%;
}
.menu .latest-specials .in .ptn img {
	height: auto;
	width: 48%;
	display: inline-block;
}
.menu .in em {
	font-family: fh;
	letter-spacing: -0.015em;
	display: inline-block;
	padding: 2.4% 5.7%;
	margin-bottom: 3%;
	color: #859099;
	background-color: white;
}
.menu .latest-specials .in em {
	font-family: fh;
	letter-spacing: -0.015em;
	display: inline-block;
	padding: 2.4% 5.7%;
	margin-bottom: 1.25%;
	color: #859099;
	background-color: white;
}
.menu .in .text {
	margin-top: 5%;
	width: 90%;
	margin-left: 5%;
}
@media all and (max-width: 780px) {
	.menupage .menu .in {
		width: 60%;
		margin-left: 20%;
	padding: 10% 2.5%;
	padding-bottom: 12%;
		margin-bottom: 15%;
	}
	.menu .in em { 
		font-size: 1.5em;
	}
}
@media all and (max-width: 480px) {
	.menupage .menu .in {
		width: 70%;
		margin-left: 15%;
	padding: 10% 2.5%;
	padding-bottom: 12%;
		margin-bottom: 15%;
	}
	.menu .in em { 
		font-size: 1.35em;
	}
}




.pancover {
    background: url("../img/kitchen-moratuwa-catering.jpg"); 
	background-attachment: fixed;
	background-size: 100%;
	background-position: bottom;
	padding: 10% 0;
	padding-top: 2.5%;
}
.pancover .title {
	font-family: fh;
	letter-spacing: -0.03em;
}
.pan .text {
	text-align: center;
	padding-right: 30%;
	line-height: 1.5;
	font-family: fb;
}
.pan .img {
	margin-top: 2%;
}
.panslogan .img img {
transition: 3s cubic-bezier(.57,.21,.69,1.4) all;
	animation: floatmove6 3.75s cubic-bezier(.57,.21,.69,1.4) 15;
	animation-play-state: running; 
}

.panslogan .img img:hover {
	width: 150%;
	margin-left: -25%;
	animation-play-state: running; 
}
@media all and (max-width: 780px) {
	.panslogan .img {
		width: 29.3%;
		margin: 0 2%;
		margin-bottom: 10%;
	}
}

@media all and (max-width: 480px) {
	.panslogan .img {
		width: 50%;
		margin-left: 25%;
		margin-bottom: 10%;
	}
}



.spices {
	color: #00D99E;	
}
.spices .title h2 {
	font-family: fh;
}
.spices .text p {
	letter-spacing: 0em;
	text-align: left;
}


.timeline .title h1 {
	margin-bottom: 2%;
}
.timeline .title h1 span {
	color: #84d100;
}
.timeline h3 {
	letter-spacing: -0.015em;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 4.2%;
	margin-top: 6.8%;
}
.timeline h3 span {
	color: #84d100;
}
.timeline .in {
	margin-top: 3%;
}
.timeline .img {	
	box-shadow: -5px 4px 43px 2px rgba(195,206,217,0.96);
}
.timeline .text {
	text-align: left;
	padding: 2.4% 1.5%;
	padding-bottom: 5.4%;
}
.timeline .text p {	
	text-align: left;
	letter-spacing: 0.005em;
	color: #5a6a75;
}
.timeline .text li {	
	text-align: left;
	letter-spacing: 0.005em;
	color: #5a6a75;
}




.game {
	position: relative;
	padding: 8% 3%;
	padding-bottom: 12%;
	background-color: #ffd100;
	color: white;
}
.game .text {
	margin-top: 0;
	font-family: fs;
	letter-spacing: 0.03em;
}
.game .text div {
	padding-bottom: 0em;
	line-height: 1;
	padding: 0.25em 0;
	margin-top: 0.3em;
	display: block;
	transition: 0.5s cubic-bezier(0.1, 0.04, 0.45, 0.3) all; 
}
.game .text div:before {
    content: "";
    display: inline-block;
    background: url("../img/ico/icons8-hand-up-80.png") no-repeat;
    width: 2em;
    height: 2em;
    float: none;
		left: 25%;
	position: absolute;
    margin: 0 0 0 0;
	animation: floatmove6 7s cubic-bezier(0,0,.3,1) 15;
}
.game .imghand {
	position: absolute;
	left: 32%;
	width: 2em;
}
.imggame {
	width: 4%;
	right: 1%;
	top: 10vh;
	position: absolute;
	opacity: 0.3;
	transition: 0.7s cubic-bezier(0.1, 0.04, 0.45, 0.3) all; 
}
#imghealthy {
	top: 20vh;
	animation: floatmove5 7s cubic-bezier(0,0,.3,1) 15;
}
#imggarnish {
	top: 30vh;
	animation: floatmove4 7s cubic-bezier(0,0,.3,1) 15;
}
#imgcare {
	top: 40vh;
	animation: floatmove5 7s cubic-bezier(0,0,.3,1) 15;
}
#imghappy {
	top: 50vh;
	animation: floatmove3 7s cubic-bezier(0,0,.3,1) 15;
}
.timely {
	animation: floatmove5 7s cubic-bezier(0,0,.3,1) 15;
}
.healthy {
	animation: floatmove4 7s cubic-bezier(0,0,.3,1) 15;
}
.garnish {
	animation: floatmove5 7s cubic-bezier(0,0,.3,1) 15;
}
.care {
	animation: floatmove4 7s cubic-bezier(0,0,.3,1) 15;
}
.happy {
	animation: floatmove6 7s cubic-bezier(0,0,.3,1) 15;
}
.timely:hover + #imgtimely {
	position: absolute;
	opacity: 0.95;
	width: 15%;
	right: 10%;
	top: 50vh;
}
.healthy:hover + #imghealthy {
	position: absolute;
	opacity: 0.95;
	width: 15%;
	right: 10%;
	top: 50vh;
}
.garnish:hover + #imggarnish {
	position: absolute;loc
	opacity: 0.95;
	width: 15%;
	right: 10%;
	top: 50vh;
}
.care:hover + #imgcare {
	position: absolute;
	opacity: 0.95;
	width: 15%;
	right: 10%;
	top: 50vh;
}
.happy:hover + #imghappy {
	position: absolute;
	opacity: 0.95;
	width: 15%;
	right: 10%;
	top: 57vh;
}
.game .text div:hover {
	background-color: white;
	color: black;
	font-size: 120%;
	letter-spacing: 0.05em;
}





.unique {
	padding: 17em 01%;
	background-color:  rgba(195,206,217,0);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}loca
.unique .in {
	background-color: white;l
	margin-bottom: 6%;
	padding: 3%;
	box-shadow: -4px 4px 30px 3px rgba(195,206,217,0.4);
	transition: 0.6s cubic-bezier(0.6, 0.04, 0.6, 0.33) all; 
}
.unique .odd {
	background-color: #00d99e;
	color: white;	
}
.unique .imgico img {
	width: 50%;
	margin-left: 25%;
}
.unique span {
	display: inline-block;
	margin-bottom: 5%;
	font-family: fb2;
	color: #00d99e;
	font-weight: bold;
	letter-spacing: -0.01em;
}
.unique .odd span {
	color: white;	
}
.unique .odd p {
	color: white;	
}
.unique .in:hover {
	background-color: #00d99e;
	color: white;
}
.unique .in:hover > span {
	color: white;
}
.unique .in:hover > p {
	color: white;
}
.unique .in:hover > .imgico img {
	filter: brightness(1.4) grayscale(1);
}
.unique .odd:hover {
	background-color: white;
	color: #00d99e;
}
.unique .odd:hover > span{
	color: #00d99e;
}
.unique .odd:hover > p{
	color: #00d99e;
}
.unique .in:hover > .imgico img {
	filter: contrast(1.4) grayscale(0);
}


.webpc .text {
	line-height: 1.65;
	letter-spacing: -0.01em;
}
.webpc .title {
	padding-bottom: 0;
	margin-bottom: 0;
}
.webpc {
	padding-top: 4%;
}








.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}



.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


.imgfloat2 {
	position: relative;
}
.imgfloat2 img {
	width: 15%;
	position: fixed;
	right: 2%;
	top: 2%;
	z-index: -3;
	margin-bottom: 0em;
	animation: floatmove2 7s cubic-bezier(0,0,.3,1) infinite;
	transform: rotate3d(1,0,0,0deg) rotate3d(0,0,1,10deg);
}

	

@keyframes floatmove1 {
  0% {
    transform: translateX(0%)
  }
  100% {
    transform: translateX(100%)
  }
}

@keyframes floatmove2 {
	0% {
		transform:translate3d(0, 0, 0);
	}
	50% {
		transform:translate3d(10px, 300px, 5px);
	}
	100% {
		transform:translate3d(0, 0, 0);
	}
}

@keyframes floatmove3 {
	0% {
		transform:translate3d(0, 0, 0);
	}
	50% {
		transform:translate3d(8px, 18px, 0px);
	}
	100% {
		transform:translate3d(0, 0, 0);
	}
}

@keyframes floatmove4 {
	0% {
		transform:translate3d(0, 0, 0);
	}
	50% {
		transform:translate3d(-8px, 8px, 2px);
	}
	100% {
		transform:translate3d(0, 0, 0);
	}
}

@keyframes floatmove5 {
	0% {
		transform:translate3d(0, 0, 0);
	}
	50% {
		transform:translate3d(9px, -6px, 0px);
	}
	100% {
		transform:translate3d(0, 0, 0);
	}
}

@keyframes floatmove6 {
	0% {
		transform:translate3d(0, 0, 0);
	}
	50% {
		transform:translate3d(-40px, 2px, 0px);
	}
	100% {
		transform:translate3d(0, 0, 0);
	}
}



.scale-up-ver-top {
	-webkit-animation: scale-up-ver-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation-delay: 0.5s
}
@keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}





.slide-bottom {
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 0;
  }
  50% {
    -webkit-transform: translateY(70px);
            transform: translateY(70px);
	  opacity: 1;
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 1;
  }
  }
}


.slide-bottom {
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 0;
  }
  50% {
    -webkit-transform: translateY(70px);
            transform: translateY(70px);
	  opacity: 1;
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 1;
  }
  }
}


.slide-bottom2 {
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: slide-bottom 1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	animation-delay: 1.5s
}

@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 0;
  }
  50% {
    -webkit-transform: translateY(70px);
            transform: translateY(70px);
	  opacity: 1;
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
	  opacity: 1;
  }
  }
}


.post {
	background-color: #F9E22F;
}


/* MAY 2021 */
.msg-important { 
	background-color: #4D403A;
	color: #fcfcfc;
	line-height: 1.48;
}
.msg-important .heading {
	font-family: fh;
	letter-spacing: -0.007em;
	line-height: 1.15;
}