@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
* {margin:0; padding: 0;}
body{font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background-image: url("../img/bg.jpg"); background-attachment: fixed}
clear { clear:both;}
.clear::after {  content: "";  clear: both;  display: table;}
.floatR { float:right !important}
.alignR { text-align:right}
.alignC { text-align:center}

.container { width: 1024px; margin: 0 auto; background:#fff; -webkit-box-shadow: 0px 10px 35px -8px rgba(0,0,0,0.30);
-moz-box-shadow: 0px 10px 35px -8px rgba(0,0,0,0.30);
box-shadow: 0px 10px 35px -8px rgba(0,0,0,0.30);}
.containerSmall { width: 768px; margin: 0 auto; background:#fff}

.row {margin-left:-15px; margin-right: -15px}

.col15 { width:15%; float:left; box-sizing:border-box; padding:0 15px}
.col20 { width:20%; float:left; box-sizing:border-box; padding:0 15px}
.col23 { width:23%; float:left; box-sizing:border-box; padding:0 15px}
.col25 { width:25%; float:left; box-sizing:border-box; padding:0 15px}
.col30 { width:30%; float:left; box-sizing:border-box; padding:0 15px}
.col33 { width:33.33%; float:left; box-sizing:border-box;  padding:0 15px}
.col35 { width:35%; float:left; box-sizing:border-box;  padding:0 15px}
.col40 { width:40%; float:left; box-sizing:border-box;  padding:0 15px}
.col50 { width:50%; float:left; box-sizing:border-box; padding:0 15px}
.col55 { width:55%; float:left; box-sizing:border-box;  padding:0 15px}
.col60 { width:60%; float:left; box-sizing:border-box;  padding:0 15px}
.col65 { width:65%; float:left; box-sizing:border-box;  padding:0 15px}
.col70 { width:70%; float:left; box-sizing:border-box;  padding:0 15px}
.col80 { width:80%; float:left; box-sizing:border-box;  padding:0 15px}
.col75 { width:75%; float:left; box-sizing:border-box;  padding:0 15px}
.col16 { width:16.66%; float:left; box-sizing:border-box;  padding:0 15px}
.col100 { width:100%; float:left; box-sizing:border-box; padding:0 15px}
a {text-decoration:none; }

.bold {font-weight:600}
.underline {text-decoration:underline}

h1, h2, h3 {color:#555; margin-bottom:20px;}
p {margin-bottom:20px; color: #272727; font-size: 18px}
.productCatH {background: #40a944; padding: 15px; color:#fff}


#main { margin: 0 auto; }
#sidemenu { }
#sidemenu ul { list-style-type: none; margin-top: 10px; text-align: right}
#sidemenu li {  box-sizing: border-box; display: inline-block}
#sidemenu li.selected { background: #ddd; }
#sidemenu a { text-decoration: none; display: block; font-weight: 600; color: #333; padding: 15px;}

.content { height: auto;  margin: 0 ; padding:50px;  box-sizing: border-box  }
header { top: 0; padding: 20px 50px; min-width: 200px;  }

.rightCont { }
.logoarea { width: 280px; }
.logoarea img {width:100%}

.decofont {font-family: 'Parisienne', cursive  !important; font-size: 40px; color: #40a944}

.mainSlider {height:400px; background: #F7F7F7; width: 100%; background: url("../img/main-banner.jpg"); background-size: cover}
.bannerInner {background-color:rgba(0,0,0,0.5); width: 100%; height: 100%; padding:100px 50px; box-sizing: border-box}
.pageBanner { border: 1px solid #E9E9E9; background-size: cover; background-repeat: no-repeat; }
.pageBanner  h1 {margin-bottom:0;  color: #fff}
.about {height: 300px; background: url("../img/rice-sri-lanka.jpg")}
.products {height: auto; background: url("../img/rice-sri-lanka.jpg") 50% 20%; background-size: cover}
.contact {height: auto; background: url("../img/contact-us.jpg"); background-size: cover}
.careers {height: auto; background: url("../img/careersbg.jpg"); background-size: cover; background-position:50%;}
.foodsafty {height: auto; background: url("../img/Food-Safety-Policy.jpg"); background-size: cover; background-position:50%;}


.productCards { margin-bottom: 70px}
.productCard { background:#F8F8F8; padding:30px; border-radius:10px; margin: 100px 0 0 0; border: 1px solid #E8E8E8}
.productCard h3 {background: #222b5c; padding: 10px; color:#fff; margin-right:-30px; margin-left: -30px; font-weight: 600}
.productCard p { font-size:16px}
.productImgTop {margin-top:-100px;}
.productImgTop img {width:100%}

a.button{ background:#222b5c; color:#fff; padding: 10px 20px; border-radius: 5px; display: block; width: 120px; text-align: center; margin: 0 auto}
a.button img { width: 14px; margin-left: 10px;}

footer { padding: 50px; margin-top:50px; background: url(../img/footer-bg.jpg) #232220; }
p.copyright {color:#CECECE; font-size:14px; margin-bottom: 0}
p.copyright a{color: #EFEFEF}

.moreProductInfo {background:#F8F8F8; padding: 30px; margin-top:30px; border: 1px solid #E8E8E8; border-radius:10px;}
.moreProductInfo p {margin-bottom:0}

.contactMore {background:#aa942f; padding: 30px; margin:0 0 30px 0; border: 1px solid #E8E8E8; border-radius:10px;}
.contactMore p {color:#FFF; margin-bottom: 0}
.contactForm input[type=text], select, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 20px;
    border: 1px solid #DDDDDD;
    font-size: 16px;
    outline: none;
    border-radius: 3px;
    background: #FAFAFA;
    color: #787878;
}
.contactForm label { font-size: 16px; position: absolute; padding: 2px; transition: 0.2s; top: 12px; margin-top: 0; left: 15px; visibility: hidden; opacity: 0; text-shadow: 3px 3px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;font-family: 'Montserrat', sans-serif;}
/*textarea + label { margin-left:-12px}*/
.lableDiv {  position: relative;  margin-bottom: 20px;}
.contactForm input[type=file] {background: #F7F7F7; border: 1px dashed #AEAEAE; padding: 15px; width: 100%; box-sizing: border-box; border-radius: 3px; font-size: 16px;}
#cv {display:none}
.contactForm input[type=file]::-webkit-file-upload-button { background: #BFBFBF; color: #333; padding: 10px; margin-right: 20px; border: 0; border-radius: 5px}

input:focus + label, textarea:focus + label  { margin-top: -22px; visibility: visible; opacity:1; font-size:12px;  padding: 5px }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { transition: 0.2s; font-family: 'Roboto', sans-serif;}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { visibility:hidden; opacity:0}


.contactForm button {width:100%; box-sizing: border-box;  background: #222b5c; color: #FFF; border: 0; outline: 0; padding: 17px; border-radius: 3px; cursor: pointer; letter-spacing: 1px; font-weight: 500; font-size: 16px}

.hamb { display: none;  float: right;  margin: 15px 0 0 0;}
.bar1, .bar2, .bar3 {width: 25px; height: 2px; border-radius: 3px; background-color: #304297; margin: 6px 0; transition: 0.4s;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-8px, 6px); transform: rotate(-45deg) translate(-8px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-5px, -4px); transform: rotate(45deg) translate(-5px, -4px);}
.copyrightArea { width:100%; background:#000000; padding:10px 50px; box-sizing: border-box}

.footerMenu {text-align: center}
.footerMenu li {display:inline-block}
.footerMenu li a{ color: #DCDCDC; padding: 20px; display: block}
.footerMenu li a:hover {text-decoration:underline}

.jobListing {margin-bottom:20px; padding:30px; border:1px solid #D6D6D6; background:#f8f8f8;}

@media only screen and (max-width: 767px) {
	h1 {font-size: 24px}
	h1 br {display:none}
	.container, .containerSmall {width:90%}
	.header, .main { width:100%}
	header {position:fixed; background:#FFF; -webkit-box-shadow: 1px 1px 6px rgb(0 0 0 / 10%); -moz-box-shadow: 1px 1px 6px rgba(0,0,0,.1); box-shadow: 1px 1px 6px rgb(0 0 0 / 10%); left: 0;  width: 100%;  padding: 10px 20px 0 20px;  box-sizing: border-box; z-index: 1;}
	.rightCont {padding:0; margin-top: 75px;}
	.content {width:95%; margin: 0 auto; padding: 20px; }
	.mainSlider {margin-top:30px; height: 200px}
	.logoarea {margin:0; width:100%}
	.logoarea img {width:200px}
	.hamb {display: block;}
	#sidemenu ul {margin-bottom:15px}
	#sidemenu a {border-bottom: 1px solid #ddd}
	nav {display:none}
	.col33, .col50 {width:100%}
	.contactMore p {font-size:16px}
	header .col30, header .col70  {width:100%}
	header.row{margin:0}
	.bannerInner {padding:30px 0}
	#sidemenu li { width: 100%; text-align: left;}
	.footerMenu li a {padding:5px}
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {	
	.container, .containerSmall {width:90%}
	header {min-width: 17%;}
	#sidemenu a {padding:10px}
	.content {width:95%; margin: 0 auto; padding: 30px; }
	.rightCont {padding:0;}
	.productCards .col33 {width:50%}
	.logoarea img {width:75%}
	
}