@charset "utf-8";
/* green bags - Go green, There is no Planet B */
html { overflow-x: hidden; }
body { background-color: #f5f5f7; overflow-x: hidden; }
/* Header */
.navbar-default { background: none; border: none; margin-top: 50px; margin-bottom: 70px; }
.navbar-brand { padding: 0; margin-right: 100px; }
.navbar-brand img { width: 270px; margin-left: 15px; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #0b9444; background: none; }
.navbar-default .navbar-nav>li>a { font-family: 'Roboto', sans-serif; color: #1d1d1d; font-weight: 500; font-size: 15px; }
.enquiry-button a { border: 1px solid #0b9444; border-radius: 25px; color: #0b9444 !important; }
.green-rectangle-out { box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: none; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); }
.green-rectangle-out:before { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: absolute; z-index: -1; background: #0b9444; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius: 23px; }
.green-rectangle-out:hover, .green-rectangle-out:focus, .green-rectangle-out:active { color: #FFF !important; }
.green-rectangle-out:hover:before, .green-rectangle-out:focus:before, .green-rectangle-out:active:before { transform: scale(1); -webkit-transform: scale(1); }
.green-underline-from-center { transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); }
.green-underline-from-center:before { left: 51%; right: 51%; bottom: 0; background: #0b9444; height: 1px; content: ""; position: absolute; z-index: -1; -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; }
.green-underline-from-center:hover:before, .green-underline-from-center:focus:before, .green-underline-from-center:active:before { left: 0; right: 0; }
/* Banner */
.banner-left { background-color: #0b9444; font-family: 'Roboto', sans-serif; padding: 50px 50px 100px 100px; background-image: url(images/banner-left-bg-pattern.png); background-repeat: no-repeat; background-position: left 60%; border-radius: 75px 75px 75px 0px; }
.banner-left h1 { font-weight: 700; font-size: 48px; line-height: 1.3; color: #1d1d1d; }
.banner-left p { font-size: 18px; color: #014023; margin-top: 40px; }
.banner-img-1 img { margin-left: 200px; margin-top: 60px; padding-bottom: 50px; }
.banner-right img { display: block; margin-left: auto; margin-right: 0; margin-top: 25px; }
.banner-left-view-products { padding-top: 15px; }
.banner-left-view-products a { font-family: 'Roboto', sans-serif; font-size: 18px; color: #FFF; margin-top: 47px; float: left; }
.banner-left-view-products a:hover, .banner-left-view-products a:focus { text-decoration: none; }
/* Footer */
.footer-logo { margin-top: 50px; margin-bottom: 50px; }
.green-footer { font-family: 'Roboto', sans-serif; padding-bottom: 100px; background-image: url(images/footer-bg-pattern.png); background-repeat: no-repeat; background-position: right 70%; }
.green-footer h4 { font-weight: 700; color: #0b9444; margin-bottom: 25px; }
.green-footer p { font-size: 15px; line-height: 24px; color: #1d1d1d; }
.green-footer .col-md-4 { padding: 0 30px; }
.green-footer i { color: #444; font-size: 20px; }
.social i { color: #333; font-size: 27px; }
.copyright { margin-bottom: 50px; font-family: 'Roboto', sans-serif; font-size: 14px; color: #777; }
.copyright a { color: #1d1d1d; }
/* About */
.about-banner-right { background-color: #0b9444; font-family: 'Roboto', sans-serif; padding: 50px 100px 50px 50px; background-image: url(images/banner-left-bg-pattern.png); background-repeat: no-repeat; background-position: right 10%; border-radius: 75px 75px 0px 75px; }
.about-banner-right h6 { font-family: 'Roboto', sans-serif; color: #1d1d1d; font-weight: 400; font-size: 17px; }
.about-banner-right h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #1d1d1d; }
.about-banner-right p { font-size: 18px; color: #014023; margin-top: 40px; line-height: 1.7; }
.about-banner-right hr { border: none; background-color: #FFF; width: 70px; height: 1px; float: left; }
.about-banner-right h5 { font-family: 'Kalam', cursive; margin-top: 40px; font-size: 18px; font-weight: 700; color: #FFF; }
.about-banner-left img { margin-top: 25px; }
.about-mp { background-image: url(images/mp-bg-pattern.png); background-repeat: no-repeat; background-position: 95% 50%; padding-top: 50px; padding-bottom: 50px; }
.about-banner-right h6 { font-family: 'Roboto', sans-serif; color: #1d1d1d; font-weight: 400; font-size: 17px; }
.about-mp h6 { font-family: 'Roboto', sans-serif; color: #0b9444; font-weight: 400; font-size: 17px; }
.about-mp h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #1d1d1d; padding-bottom: 25px; }
.about-mp hr { border: none; background-color: #0b9444; width: 200px; height: 2px; float: left; margin-right: 50px; }
.about-mp .col-md-3 { height: 360px; border-radius: 37px 37px 0px 37px; font-family: 'Roboto', sans-serif; color: #FFF; padding: 37px 37px 0px 37px; line-height: 1.7; border: 5px solid #f5f5f7; }
.mp-due-to { font-size: 16px; }
.mp-the-eco { font-size: 20px; }
.mp-img img { display: block; margin-left: auto; margin-right: auto; }
/* Products */
.about-banner-right ul { font-size: 18px; color: #FFFFFF; margin-top: 40px; }
.about-banner-right li { line-height: 1.7; text-transform: uppercase; font-weight: 500; }
.products-gy { background-image: url(images/mp-bg-pattern.png); background-repeat: no-repeat; background-position: 95% 50%; padding-top: 50px; padding-bottom: 50px; }
.products-gy h6 { font-family: 'Roboto', sans-serif; color: #0b9444; font-weight: 400; font-size: 17px; }
.products-gy h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #1d1d1d; padding-bottom: 25px; }
.products-gy hr { border: none; background-color: #0b9444; width: 200px; height: 2px; float: left; margin-right: 50px; }
.products-gy .col-md-3 { margin-bottom: 20px; }
/* Contact */
.contact-header { background-color: #0b9444; font-family: 'Roboto', sans-serif; padding: 70px 100px; background-image: url(images/banner-left-bg-pattern.png); background-repeat: no-repeat; background-position: right 50%; border-radius: 75px 75px 0px 75px; }
.contact-header h6 { font-family: 'Roboto', sans-serif; color: #1d1d1d; font-weight: 400; font-size: 17px; }
.contact-header h1, .contact h1 { font-weight: 700; font-size: 36px; line-height: 1.3; color: #1d1d1d; }
.contact { padding-top: 50px; padding-bottom: 50px; }
.contact .col-md-5 { background-color: #dfdfe1; border-radius: 50px 50px 0px 50px; padding: 25px 30px 50px 30px; font-family: 'Roboto', sans-serif; }
input[type=text], [type=email] {
width: 100%;
border-radius: 10px;
padding: 20px;
margin-bottom:5px;
margin-top:5px;
border: 1px solid #d2d2d2;
color: #666;
font-size: 16px;
}
textarea { width: 100%; border-radius: 10px; padding: 20px; margin-bottom: 5px; margin-top: 5px; border: 1px solid #d2d2d2; color: #666; font-size: 16px; resize: none; height: 130px; }
input[type=submit] { border-radius: 10px; padding: 20px; margin-top: 5px; color: #fff; font-size: 16px; background-color: #0b9444; border: none; font-weight: 500; }
.contact .col-md-7 iframe { border-radius: 50px 50px 0px 50px; padding-left: 30px; }
.col-md-2 { width: 10%; }
@media screen and (min-width:0px) and (max-width:323px) {
body { display: none; }
}
@media screen and (min-width:324px) and (max-width:767px) {
.navbar-default { margin-top: 10px; margin-bottom: 10px; }
.navbar-brand { width: 300px; margin-bottom: 20px; }
.enquiry-button a { text-align: center; width: 50%; }
.banner-left { padding: 50px 25px; }
.banner-img-1 img { margin-left: 0px; }
.banner-left h1 { font-size: 38px; }
.banner-right-bg img { width: 70%; }
.banner-left-view-products a { margin-top: 0px; }
.green-footer .col-md-4 { margin-bottom: 50px; }
.green-footer { padding-bottom: 25px; background-position: right 95%; }
.green-footer .col-md-10 { padding-left: 0; }
.green-footer .col-md-2 { padding-right: 0; }
/* About */
.about-banner-right h1 { font-size: 26px; }
.about-banner-right { padding: 50px 25px; }
.about-banner-left img { margin-bottom: 25px; }
.about-banner-right hr { float: none; }
.about-banner-right h5 { font-size: 17px; text-align: center; }
.about-mp h1 { font-size: 26px; }
.mp-blank { display: none; }
/* Products */
.about-banner-right ul { font-size: 15px; }
/* Contact */
.contact-header { padding: 50px 25px; }
.contact-header h1, .contact h1 { font-size: 26px; }
.contact .col-md-5 { border-radius: 25px 25px 0px 25px; padding: 25px 15px 50px 15px; margin-bottom: 50px; }
.contact .col-md-7 iframe { border-radius: 0px 0px 0px 25px; height: 450px; }
input[type=text], [type=email] {
padding: 15px;
border-radius: 5px;
}
textarea { padding: 15px; border-radius: 5px; }
input[type=submit] { padding: 15px; border-radius: 5px; }
}
@media screen and (min-width:768px) and (max-width:1023px) {
.navbar-default { margin-top: 25px; margin-bottom: 25px; }
.navbar-brand { margin-bottom: 20px; }
.enquiry-button a { text-align: center; width: 30%; }
.banner-left { padding: 50px; }
.banner-right .col-md-12 { padding: 5px; }
.banner-right img { display: block; margin-left: 0; margin-right: auto; }
.banner-img-1 img { margin-left: 0; }
.green-footer .col-md-4 { margin-bottom: 50px; }
.green-footer { padding-bottom: 25px; }
/* About */
.about-banner-left img { margin-bottom: 25px; }
.mp-blank { display: none; }
.about-mp .col-md-3 { height: auto; padding: 37px }
/* Contact */
.contact .col-md-5 { margin-bottom: 50px; }
}
@media screen and (min-width:1024px) and (max-width:1365px) {
.navbar-default { margin-top: 35px; margin-bottom: 35px; }
.navbar-brand { margin-bottom: 20px; }
.enquiry-button a { text-align: center; width: 30%; }
.banner-img-1 img { margin-left: 3px; }
.banner-left-view-products a { margin-top: 30px; }
.green-footer .col-md-2 { padding-right: 0; }
/* About */
.about-mp .col-md-3 { height: 437px; padding: 37px 37px 0px 37px; }
}
@media screen and (min-width:768px) and (max-width:1365px) {
.navbar-header { float: none; }
.navbar-toggle { display: block; }
.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.navbar-collapse.collapse { display: none!important; }
.navbar-nav { float: none!important; margin: 7.5px -15px; }
.navbar-nav>li { float: none; }
.navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
.navbar-text { float: none; margin: 15px 0; }
.navbar-collapse.collapse.in { display: block!important; }
.collapsing { overflow: hidden!important; }
}
@media screen and (min-width:768px) and (max-width:991px) {
.col-md-2 { width: 5%; }
.col-md-7, .col-md-3, .col-md-5 { margin-right: 15px !important; }
.banner-left-view-products .col-md-5 { margin-right: -15px !important; }
.contact-header { margin-right: 15px !important; margin-left: 9px !important; }
}
@media screen and (min-width:480px) and (max-width:767px) {
.about-mp .col-md-3 { height: auto; padding-bottom: 30px; }
.green-footer .col-md-2 { width: 9%; }
.banner-left-view-products a { margin-top: 30px; }
.social .col-md-2 { width: 7% !important; }
}
@media screen and (min-width:324px) and (max-width:479px) {
.green-footer .col-md-2 { width: 16%; }
.social .col-md-2 { width: 11% !important; }
}