@import url("https://fonts.googleapis.com/css?family=Damion|Lateef|Mirza:600|Kaushan+Script|Oleo+Script");

@Import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

html {

    -webkit-font-smoothing: antialiased

}

html body {

    font-family: 'PtSans', Arial, Helvetica, sans-serif;

    font-size: 16px;

    height: 100%;

    margin: 0 auto;

    text-rendering: geometricPrecision;

    background: #444

}

h1, h2, h3, h4, h5, h6 {

    margin: 0;

    padding-bottom: 20px;

    padding-top: 5px;

    color: #333;

    font-weight: normal;

    clear: both;

    line-height: 1.5

}

strong, b {

    font-weight: bold;

    font-size: 1.1em

}

h1 {

    font-size: 1.5em;

    font-weight: bold;

    letter-spacing: 1px

}

h3 {

    font-size: 1.25em

}

h2 {

    color: #037192;

    font-family: 'Mirza', cursive;

    background: #efefef;

    padding: 10px;

    line-height: 1;

    margin-bottom: 10px

}

p {

    font-size: .9em;

    line-height: 1.6;

    padding: 0 1% 1.38em;

    color: #323232

}

sup {

    vertical-align: super;

    font-size: .55em

}

a:link, a:visited {

    color: #009c82

}

a:hover {

    text-decoration: none!important

}

button, html [type="button"], [type="reset"], [type="submit"] {

    -webkit-appearance: button

}

#wrapper {

    min-width: 100%;

    font-family: 'Open Sans', sans-serif

}

#header #Logo {

    height: auto;

    width: 26%;

    max-width: 350px;

    min-width: 150px

}

#header #Logo img {

    display: block;

    width: 100%

}

#container {

    width: 100%;

    height: auto;

    background: 0

}

#page {

    width: 100%;

    margin: 0 auto

}

#PageTitle {

    padding: 0 2%;

    position: relative

}

#PageTitle h1 {

    color: #037192;

    font-weight: bold;

    padding: 30px 0 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

    border-bottom: 1px dotted #ccc;

    font-family: 'Open Sans', sans-serif

}

#PageBody {

    padding: 0 2% 2%

}

h2 strong {

    font-weight: 600;

    font-size: 1.5em

}

#PageBody h4 {

    color: #f64b7a;

    font-weight: bold;

    padding-bottom: 5px

}

ul li {

    list-style: inside;

    padding: 5px 2%;

    font-size: 1em;

    color: #1a1a1a

}

.row {

    width: 100%;

    clear: both;

    background: transparent;

    margin-right: 0!important;

    margin-left: 0!important

}

.column {

    background: transparent

}

.rowContents, #columnContainer {

    max-width: 1280px;

    margin: 0 auto;

    display: block

}

a.btn {

    color: #0c9c9c;

    display: inline-block;

    background: #fff;

    border: 1px solid #0c9c9c;

    padding: 10px 3%;

    border-radius: 3px;

    transition: .3s ease-in-out

}

a.btn:hover {

    background: #57ba84;

    color: #fff;

    transition: .3s ease-in-out

}

#successMessage div {

    padding: 7px;

    background: #a1f1a1;

    display: block;

    text-align: center;

    width: 50%;

    margin: 30px auto 0

}

#header {

    width: 100%;

    background: #fff;

    height: 100px;

    border-top: 50px solid #0c9c9c;

    box-shadow: -2px 1px 5px 2px #e2e2e2;

    position: relative

}

#headerContainer {

    height: 100%;

    width: 100%;

    max-width: 1280px

}

#header #ContactDetails p {

    display: inline-block;

    font-size: .9em

}

#header #ContactDetails a {

    font-size: 1.1em;

    padding: 0;

    color: #1a1a1a;

    margin-right: 15px

}

i.fa.fa-phone, i.fa.fa-envelope, i.fa.fa-user {

    padding: 0 10px;

    font-size: 1.2em;

    line-height: 1.5em

}

.aloe-social-media-container {

    right: 0;

    left: auto!important;

    text-align: right

}

.aloe-social-media-container h3 {

    color: #0c9c9c;

    font-size: .9em!important;

    margin: 0!important;

    text-align: center;

    padding-bottom: 7px

}

.aloe-social-media a {

    position: relative;

    display: block;

    color: #0c9c9c;

    text-decoration: none;

    width: 30px;

    height: 30px;

    margin: 0 5px

}

.aloe-social-media a:hover, .aloe--social-media a:focus {

    color: #bd9000;

    -webkit-transition: .3s ease;

    transition: .3s ease

}

.aloe-social-media a:after {

    content: "";

    position: absolute;

    font: normal 28px/1 FontAwesome;

    color: inherit;

    top: 0;

    right: 0;

    text-decoration: none;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased

}

.aloe-linkedin a:after {

    content: "\f08c"

}

.aloe-googleplus a:after {

    content: "\f0d4"

}

.aloe-facebook a:after {

    content: "\f082 "

}

.aloe-twitter a:after {

    content: "\f081 "

}

#headerSocialmedia ul {

    margin-bottom: 0

}

#headerSocialmedia li {

    display: inline-block;

    padding: 0

}

#header #logotag {

    width: 50%

}

#header #logotag p {

    font-size: .85em;

    color: #039446

}

#navigation {

    background: 0;

    position: relative;

    height: 0;

    width: 100%;

    max-width: 1280px;

    margin: 0 auto

}

#navigation ul li {

    position: relative

}

#navigation ul.level0 {

    position: absolute;

    top: -150px;

    width: auto;

    height: auto

}

#navigation ul li.level0 {

    min-width: 50px;

    width: auto

}

#navigation ul li a.active, #navigation ul li:hover {

    background: #fff;

    transition: .3s ease-in-out

}

#navigation ul li:hover {

    background: #f3f3f3

}

#navigation ul.level1 li a.active {

    background: 0

}

#navigation ul li.level0 a.active, #navigation ul li.level0:hover a {

    color: #1e1e1e

}

#navigation ul li.level0 a {

    min-width: 50px;

    color: #fff;

    text-align: center;

    padding: 8px 25px;

    font-size: 1.1em;

    font-family: 'Lato', sans-serif

}

#navigation ul li.hasChildren.level0 ul.level1 {

    position: absolute;

    top: 100px;

    left: 58%;

    transform: translateX(-58%);

    right: auto!important;

    width: 192px;

    background: #57ba84;

    z-index: 9999;

    height: auto;

    visibility: hidden;

    opacity: 0;

    box-shadow: inset 0 0 13px #0c9c9c

}

#navigation ul li.hasChildren.level0:hover ul.level1, #navigation ul li.hasChildren.level1:hover ul.level2 {

    display: block;

    visibility: visible;

    opacity: 1;

    transition: .3s ease-in-out;

    top: 50px

}

#navigation ul li.level1 li {

    width: 100%

}

#navigation ul li.level1 a, #navigation ul li.level2 a {

    width: 182px;

    padding: 10px 5px;

    color: #1e1e1e;

    border-bottom: 1px solid #fff;

    font-size: 1.1em;

    line-height: 1.5

}

#navigation ul li.last.level1 a, #navigation ul li.last.level2 a {

    border-bottom: 0

}

#navigation ul li.first.level2 a {

    border-bottom: 1px solid #fff

}

#navigation ul li.hasChildren.level1 ul.level2 {

    position: absolute;

    top: 0;

    left: 99%;

    right: auto!important;

    width: 269px;

    background: #e8e8e8;

    z-index: 9999;

    height: auto;

    visibility: hidden;

    opacity: 0

}

#navigation li.level1:hover, #navigation li.level2:hover {

    background: #084c4c

}

#navigation ul.level1 li.level1 a {

    color: #fff

}

#navigation ul li.level2 a {

    font-size: .95em

}

ul.level1:before {

    border-right: 8px solid transparent;

    border-left: 8px solid transparent;

    border-bottom: 8px solid #0c9c9c;

    content: "";

    top: -8px;

    position: absolute

}

#footer {

    width: 98%;

    height: auto;

    color: #FFF;

    background: #084c4c;

    font-size: .85em;

    line-height: 1.35em;

    padding: 1%

}

#footerContainer {

    width: 100%;

    max-width: 1280px;

    height: 250px

}

span.remove {

    display: none

}

#footerContainer li {

    padding: 0

}

.footer-links h3, #FooterReachUs h3 {

    font-size: 1.2em;

    padding: 0 7px 7px;

    font-weight: bold;

    color: #fff

}

.footer-links {

    float: left;

    margin-left: 18%

}

#FooterMenuOne {

    margin-left: 0

}

.footer-links li {

    display: block

}

.footer-links li a {

    display: block;

    color: #fff;

    font-size: 1.2em;

    padding: 7px

}

#footer #FooterReachUs {

    float: right;

    text-align: right

}

#footer #FooterReachUs ul li {

    list-style: none;

    color: #fff;

    font-size: 1.3em

}

#footer #copyright {

    bottom: 0;

    position: absolute;

    width: 100%

}

#footer #copyright p {

    padding: 15px 0 3px;

    border-top: 1px solid #fff;

    text-align: center;

    color: #fff;

    font-size: 1.2em

}

#togglebutton {

    display: none

}

#togglebutton {

    position: absolute;

    right: 0;

    width: 50px;

    left: auto!important

}

#togglebutton a {

    display: block

}

.About #column1 {

    width: 23%!important;

    padding-left: 2%

}

#AboutSubmenumenublock {

    padding-top: 30px

}

div#AboutSubmenumenublock:before {

    content: "ABOUT US";

    padding: 0 0 20px;

    font-size: 1.5em;

    font-weight: 700;

    color: #037192;

    border-bottom: 1px dotted #ccc;

    display: block

}

#AboutSubmenumenublock ul {

    padding-top: 30px

}

#AboutSubmenumenublock ul li {

    list-style: none;

    display: block;

    margin-bottom: 10px;

    padding: 0

}

#AboutSubmenumenublock ul li a {

    display: block;

    padding: 10px 5%;

    color: #fff;

    background: #084c4c;

    border: 2px solid #084c4c;

    color: #fff;

    box-shadow: inset 1px 1px 13px 1px #009c82;

    border-radius: 5px

}

#AboutSubmenumenublock ul li a:hover {

    background: #fff;

    color: #084c4c;

    box-shadow: none;

    transition: .2s ease-in-out

}

.About #page {

    background: url(../aloe-naturals/922ae68e-8add-47d1-896f-26427851e318_1001_655.png);

    background-size: cover

}

#accordion a {

    display: block;

    background: #e0edd8;

    color: #084c4c;

    padding: 10px;

    border-bottom: 1px dotted #c4d0bd

}

#accordion div {

    display: none;

    line-height: 1.6;

    font-size: .9em;

    padding: 8px 17px 10px;

    color: #323232;

    background: #fff;

    box-shadow: 4px 4px 6px 0 #ccc;

    margin-bottom: 10px

}

.director_photo {

    padding: 10px 1%;

    border-radius: 5px;

    box-shadow: 1px 2px 4px 2px #999

}

.director_photo h2 {

    font-weight: bold;

    padding: 0 0 10px;

    font-family: 'Open Sans', sans-serif;

    line-height: 1.5;

    background: 0;

    margin-bottom: 0

}

.director_photo img {

    padding-bottom: 15px;

    width: 100%

}

.director_photo .pic_div {

    width: 21%;

    text-align: center;

    display: inline-block;

    background: #f9f9f9;

    padding: 8px;

    border: 1px dotted #adadad

}

.director_photo .info {

    display: inline-block;

    width: 71%;

    padding: 0 2%;

    vertical-align: top

}

.aloecorp_left ul li {

    padding: 20px 2% 0;

    font-size: 1.1em;

    color: #1a1a1a;

    position: relative;

    width: 34%;

    display: inline-block;

    padding-left: 11%;

    vertical-align: top;

    margin-bottom: 40px;

    margin-left: 2%;

    border-top: 2px solid #037192;

    min-height: 60px;

    border-right: 2px solid #037192

}

.aloecorp_left li:before {

    font-size: 4em;

    font-weight: 700;

    display: inline-block;

    position: absolute;

    left: 0;

    vertical-align: top;

    top: -3px;

    line-height: 1;

    background: #fff;

    width: 23.5%

}

.aloecorp_left li:nth-child(1):before {

    content: "01";

    color: #f9a73e

}

.aloecorp_left li:nth-child(2):before {

    content: "02";

    color: #b59f01

}

.aloecorp_left li:nth-child(3):before {

    content: "03";

    color: #2cc4af

}

.aloecorp_left li:nth-child(4):before {

    content: "04";

    color: #3bc7e2

}

.aloecorp_left li:nth-child(5):before {

    content: "05";

    color: #2894ff

}

.aloecorp_left li:nth-child(6):before {

    content: "06";

    color: #817299

}

.aloecorp_left li:nth-child(7):before {

    content: "07";

    color: #bf212f

}

.aloecorp_left li:nth-child(8):before {

    content: "08";

    color: #8fa96a

}

.aloecorp_left li span {

    color: #fff;

    position: absolute;

    top: -14px;

    display: block;

    width: 58%;

    padding: 2px 5px;

    border-radius: 3px

}

.aloecorp_left li:nth-child(1) span {

    background: #f9a73e

}

.aloecorp_left li:nth-child(2) span {

    background: #b59f01

}

.aloecorp_left li:nth-child(3) span {

    background: #2cc4af

}

.aloecorp_left li:nth-child(4) span {

    background: #3bc7e2

}

.aloecorp_left li:nth-child(5) span {

    background: #2894ff

}

.aloecorp_left li:nth-child(6) span {

    background: #817299

}

.aloecorp_left li:nth-child(7) span {

    background: #bf212f

}

.aloecorp_left li:nth-child(8) span {

    background: #97af75

}

.aloecorp_left ul li:nth-child(9) {

    width: 84%

}

.aloecorp_left li:nth-child(9):before {

    content: "09";

    color: #433214;

    width: 11.5%

}

.aloecorp_left li:nth-child(9) span {

    background: #433214;

    width: 28.2%

}

.aloecorp_left ul li:nth-child(9) img {

    width: 100%

}

img.activlogo {

    width: 15%;

    vertical-align: bottom

}

.ActivealoeTM #PageTitle h1:before, .Qmatrix #PageTitle h1:before, .AloecorpIntro #PageTitle h1:before, .Juice #PageTitle h1:before {

    content: "";

    background: url(../aloe-naturals/85583e72-65b2-4e42-b87f-eff184778988_246_72.jpg)no-repeat;

    width: 184px;

    height: 53px;

    position: absolute;

    background-size: 95%;

    top: 12px;

    left: 21px

}

.Qmatrix #PageTitle h1:before {

    background: url(../aloe-naturals/5a7bd5a2-5454-49e6-afd7-ffb08a5cea8f_246_72.jpg)no-repeat;

    background-size: 95%;

    left: 10px

}

.AloecorpIntro #PageTitle h1:before {

    background: url(../aloe-naturals/1d3a00f3-d3f5-436c-b079-890648195e51_300_40.png)no-repeat;

    width: 251px;

    background-size: 77%;

    background-size: 95%;

    top: 25px

}

.Juice #PageTitle h1 {

    padding-left: 172px

}

ul.note {

    background: #e7f7c5;

    padding: 5px;

    border-radius: 5px;

    box-shadow: 1px 1px 3px #999

}

ul.note li {

    font-weight: 600

}

.sa {

    width: 33%;

    display: inline-block;

    vertical-align: top

}

.sa_right {

    float: right

}

.sa_content {

    background: url(../aloe-naturals/de77ca3b-ec20-4e5f-b7d8-0a5e16953030_396_400.png)no-repeat center

}

.Index #page {

    box-shadow: none

}

#row0 .rowContents {

    max-width: 100%

}

.slideshow, .slideshow .slideshowContainer {

    width: 100%;

    min-width: 950px;

    margin: 0 auto;

    max-height: 421px;

    overflow: hidden;

    background: #f3f3f3;

    position: relative;

    z-index: 0

}

.SlideshowController .ControllerButton {

    top: 50%;

    position: absolute;

    cursor: pointer

}

.SlideshowController #previousSlideButton {

    left: 10px

}

.SlideshowController #nextSlideButton {

    right: 10px;

    left: auto

}

#pauseSlideshowButton, #playSlideshowButton {

    display: none

}

.slideContent {

    position: relative;

    max-height: 421px;

    overflow: hidden

}

.slideContentContainer {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: 1

}

.slick-track {

    display: block;

    right: 0

}

.slideContent img {

    width: 100%;

    height: auto

}

.caption .slide {

    position: absolute;

    top: 25%;

    margin-left: 10%;

    width: 29%;

    right: 0;

    left: 0;

    padding: 15px 1%;

    font-family: 'Raleway', sans-serif;

    display: none

}

.caption .slide p {

    font-size: 1.8em;

    line-height: 1.8;

    font-family: 'Oleo Script', cursive

}

.caption h2 {

    color: #fff;

    font-size: 2.5em;

    font-weight: bold

}

.caption p {

    color: #059141;

    padding-bottom: 0

}

.caption p strong {

    color: #f68d4b

}

.caption a {

    color: #fff;

    display: inline-block;

    background: #bd9000;

    padding: 10px;

    border-radius: 3px;

    font-size: .95em;

    position: relative;

    z-index: 1;

    text-align: center;

    border: 0;

    margin-top: 10px

}

.Index #row2, .Index #row1 {

    background: #f5f5f5

}

.Index #row2 {

    padding-bottom: 20px

}

.represent {

    box-shadow: 2px 2px 5px #a5a4a4;

    margin: 0 0 40px;

    background-size: 26%

}

.green_section {

    width: 30%;

    text-align: center;

    background: #0c9c9c

}

.content {

    width: 49%

}

.part {

    display: inline-block;

    vertical-align: top;

    padding: 20px 1%;

    min-height: 215px

}

.part h2 {

    color: #fff;

    font-size: 1.5em;

    padding: 10px 89px;

    background: 0;

    font-family: 'Open Sans', sans-serif;

    line-height: 1.5

}

.part h3 {

    color: #037192;

    text-transform: uppercase;

    font-weight: bold

}

.part img {

    width: 100%;

    max-width: 250px

}

#AloecorpOne {

    background: #fff url(../aloe-naturals/a6514c33-b67b-4d7a-a5ce-92be480aa0cb_300_200.jpg)no-repeat right center;

    background-size: 15%;

    background-position-x: 98%

}

#AloecorpTwo {

    background: #fff url(../aloe-naturals/71ad28c1-bb08-41bd-bddf-e9e47226f642_638_122.jpg)no-repeat left bottom

}

#AloecorpThree {

    background: #fff url(../aloe-naturals/9cedd2d2-7537-4da4-86f6-ab686326ac15_454_270.jpg)no-repeat right center

}

#AloecorpTwo {

    text-align: right

}

#Aloeorp_Logo p {

    padding: 35px 0;

    text-align: center

}

#Products {

    text-align: center;

    padding: 30px 0

}

#Products h3 {

    text-transform: uppercase;

    font-size: 1.5em;

    color: #037192;

    padding: 15px 0;

    font-weight: bold

}

.holder {

    position: relative;

    width: 22.7%;

    display: inline-block;

    vertical-align: top;

    margin: 25px 1%

}

.pr {

    border: 1px solid #0c9c9c;

    border-radius: 3px

}

.pr img {

    width: 100%;

    display: block

}

.pr h2 {

    background: #0c9c9c;

    color: #fff;

    padding: 10px 0;

    text-align: center;

    line-height: 1.5;

    font-family: 'Open Sans', sans-serif;

    margin-bottom: 0

}

a.text {

    position: absolute;

    top: 45px;

    background: rgba(0,0,0,0.76);

    opacity: 0;

    height: auto;

    line-height: 1.7em;

    text-align: center;

    color: #fff;

    padding: 54px 1%;

    font-size: .9em;

    transition: opacity .3s ease-in;

    border-radius: 0 0 3px 3px;

    display: block

}

.holder .pr:hover a.text {

    opacity: 1

}

.Index #row4 {

    background: #e7f7c5

}

#EnquireTag {

    padding: 25px 0

}

#EnquireTag p {

    color: #037192;

    font-size: 1.5em;

    width: 100%;

    display: inline;

    font-weight: bold

}

#EnquireTag a.btn {

    background: #0c9c9c;

    color: #fff;

    font-size: 1.3em;

    border: 0;

    float: right

}

#EnquireTag a.btn:hover {

    background: #57ba84

}

#AloeveraGelD, #AloeveraJuice {

    padding: 0 2%

}

.gel_content {

    width: 62%;

    display: inline-block;

    vertical-align: top;

    padding-right: 2%

}

.gel_content a, .left a {

    color: #fff;

    overflow: hidden;

    padding: 0 15px;

    position: relative;

    display: inline-block;

    font-weight: 700;

    text-transform: uppercase;

    margin-right: 10px;

    background: #85c227;

    background: -moz-linear-gradient(top, #42a5f5 0, #2196f3 100%);

    background: -webkit-linear-gradient(top, #85c127 0, #78c500 100%);

    background: linear-gradient(to bottom, #85c127 0, #78c500 100%);

filter:progid:DXImageTransform.M

}

.gel_content a span, .left a span {

    position: relative;

    display: inline-block;

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    transition: transform .3s;

    padding: 10px 0

}

.left a span {

    width: 340px;

    text-align: center

}

.gel_content a:hover, .left a:hover {

    background: #78c500;

    background: -moz-linear-gradient(top, #2196f3 0, #1976d2 100%);

    background: -webkit-linear-gradient(top, #78c500 0, #65a703 100%);

    background: linear-gradient(to bottom, #78c500 0, #65a703 100%);

filter:progid:DXImageTransform.M

}

.gel_content a img, .left a img {

    width: 28px;

    vertical-align: middle;

    padding-right: 10px

}

.gel_image {

    width: 32%;

    display: inline-block;

    vertical-align: top;

    padding-left: 3%

}

.gel_image img {

    width: 100%

}

tr {

    padding: 8px 8px 15px;

    display: block;

    border: 1px solid #e8a715;

    border-top: 0

}

tr:nth-child(odd) {

    background: rgba(232,167,21,0.1)

}

td:nth-child(2) {

    min-width: 237px

}

td {

    line-height: 1.6;

    font-size: .9em

}

th {

    display: block;

    text-align: center;

    color: #fff;

    font-size: 1.5em;

    font-family: initial;

    letter-spacing: 1px

}

tr:first-child {

    font-size: 1.1em;

    font-weight: bold;

    background: #bd9000;

    color: #fff;

    border: 0;

    text-transform: uppercase;

    padding: 10px

}

tr:first-child td:nth-child(2) {

    width: auto

}

td img {

    vertical-align: top;

    padding: 0 20px;

    max-width: 300px

}

td img.iconp {

    vertical-align: middle

}

.Juice #PageBody h4 {

    padding: 15px 2%;

    background: #f5f5f5;

    color: #000;

    font-weight: normal

}

.Juice #PageBody h4 strong {

    color: #f64b7a

}

table.aloeclass {

    width: 100%

}

.aloeclass tr {

    background: 0;

    padding: 5px 1% 25px;

    color: #323232;

    border: 0

}

.aloeclass td {

    display: block;

    width: 52%;

    padding: 10px 1%;

    margin: 0 auto;

    background: #e6f9ef;

    border-radius: 5px;

    margin-bottom: 10px;

    box-shadow: 1px 3px 4px #bfbdbd

}

#Aloe_benefit {

    text-align: center;

    padding-top: 25px

}

#Aloe_benefit p {

    display: inline-block;

    vertical-align: top

}

.ActivealoeTM #row3 {

    background: url(../aloe-naturals/ac40abd9-c34c-4e1d-a5ad-f05e4ea4b38a_666_739.png)no-repeat right bottom;

    background-size: 100%

}

#marquee {

    padding: 10px 0;

    background: #02923d;

    margin-bottom: 10px;

    font-weight: bold;

    color: #fff;

    font-size: .95em

}

#marquee strong {

    font-size: 1em;

    color: #fff

}

.aloe_drinks {

    position: relative

}

.aloe_drinks div {

    display: inline-block;

    width: 36%;

    vertical-align: top

}

.aloe_drinks div:nth-child(1) {

    text-align: right

}

.aloe_drinks div:nth-child(2) {

    width: 26%;

    text-align: center

}

.aloe_drinks p {

    padding: 10px 3%;

    box-shadow: 1px 1px 3px 0 #86c327;

    background: #f1f9e1;

    color: #910000;

    font-size: 1.3em;

    font-family: 'Mirza', cursive;

    margin-bottom: 10px;

    border-radius: 5px

}

.aloe_drinks div strong {

    color: #00ab74

}

.aloe_drinks div p:nth-child(1) {

    box-shadow: none;

    background: 0

}

div#AloeveraJuiceFlavours {

    text-align: center

}

div#AloeveraJuiceFlavours h3 {

    font-size: 26px;

    font-family: 'Mirza', cursive;

    background: #efefef;

    color: #037192;

    padding: 10px;

    width: 94.5%;

    margin: 0 auto;

    margin: 30px auto

}

div#AloeveraJuiceFlavours img {

    width: 23%;

    box-shadow: 1px 1px 5px #adadad;

    margin: 1%

}

#AloeveraJuice .gel_content {

    width: 100%;

    padding-right: 0

}

div#AloeveraJuiceFlavours p.no_border img {

    width: auto;

    padding: 0;

    border: 0;

    border-radius: 0;

    margin: 0;

    box-shadow: 2px 3px 17px #adadad

}

#RTEFeatures {

    text-align: center;

    padding-bottom: 20px

}

.feature {

    width: 45%;

    margin: 20px 1%;

    display: inline-block;

    vertical-align: top;

    background: rgba(255,238,120,0.33);

    padding: 10px 1%

}

.feature img {

    vertical-align: middle

}

.feature p {

    display: inline-block;

    width: 73%;

    text-align: left;

    padding-left: 3%;

    vertical-align: middle;

    min-height: 124px;

    padding-bottom: 0

}

.RTE .row, .RTE .rowContents {

    position: relative

}

.RTE .rowContents {

    z-index: 1

}

.RTE #row2:before, .RTE #row2:after {

    content: "";

    background: url(../aloe-naturals/814bd335-ddfe-4856-848c-f0a375b0d675_115_410.png) left top;

    background-repeat-x: no-repeat;

    position: absolute;

    width: 100%;

    height: 100%

}

.RTE #row2:after {

    background: url(../aloe-naturals/9b77d7c0-6c00-4288-a4a2-e5eb557acd8f_115_410.png) right top;

    background-repeat-x: no-repeat;

    top: 0

}

.veg a.text {

    background: 0;

    top: 0;

    padding: 0

}

.veg:hover a.text {

    opacity: 1

}

.left, .right {

    display: inline-block;

    vertical-align: top

}

.left {

    width: 67%

}

.right {

    width: 30%;

    text-align: center

}

.Productrange #page {

    padding-bottom: 20px

}

#RTEProductRange {

    text-align: center;

    height: 100%

}

.hovereffect {

    width: 31%;

    height: 100%;

    overflow: hidden;

    position: relative;

    text-align: center;

    cursor: default;

    display: inline-block;

    margin: 0 1% 20px

}

.hovereffect .overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0

}

.hovereffect:hover .overlay {

    background-color: rgba(48,152,157,0.4)

}

.hovereffect img {

    display: block;

    position: relative;

    width: 100%;

    height: 100%

}

.hovereffect h2 {

    margin-top: 17%;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

    position: relative;

    padding: 10px;

    background: rgba(0,0,0,0.6);

    -webkit-transform: translateY(45px);

    -ms-transform: translateY(45px);

    transform: translateY(45px);

    -webkit-transition: all .4s cubic-bezier(0.88, -0.99, 0, 1.81);

    transition: all .4s cubic-bezier(0.88, -0.99, 0, 1.81);

    line-height: 1.5;

    font-family: 'Open', sans-serif

}

.hovereffect:hover h2 {

    -webkit-transform: translateY(5px);

    -ms-transform: translateY(5px);

    transform: translateY(5px);

    margin-top: 10%

}

.hovereffect a.info {

    display: inline-block;

    text-decoration: none;

    text-transform: uppercase;

    color: #fff;

    border: 1px solid #fff;

    background-color: transparent;

    opacity: 0;

    filter: alpha(opacity=0);

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    -webkit-transition: all .4s cubic-bezier(0.88, -0.99, 0, 1.81);

    transition: all .4s cubic-bezier(0.88, -0.99, 0, 1.81);

    font-weight: normal;

    margin: -66px 0 0 0;

    padding: 105px 137px

}

.hovereffect:hover a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1)

}

.hovereffect a.info:hover {

    box-shadow: 0 0 5px #fff

}

.veg {

    width: 20%;

    display: inline-block;

    vertical-align: top;

    margin: 10px 2%;

    text-align: center;

    position: relative

}

.veg img {

    width: 100%

}

.rte {

    text-align: center

}

.rte h2 {

    font-size: .95em;

    background: #bd9000;

    padding: 5px;

    border-radius: 3px;

    color: #fff;

    margin: 10px 0;

    line-height: 1.5;

    font-family: 'Open', sans-serif

}

div#ContactForm, #Contactdetails {

    width: 96%;

    display: inline-block;

    vertical-align: top;

    margin: 0 2% 20px

}

fieldset {

    border: 0

}

#SecureTokenElementRow, #PageItemNameElementRow {

    display: none

}

iframe {

    width: 90%;

    height: 300px

}

label.formElementlabel {

    width: 26%;

    padding: 10px 0;

    font-size: .9em

}

form input {

    width: 64%;

    padding: 10px 1%;

    color: #323232

}

.mandatoryStar {

    color: #C00

}

form textarea, form select {

    width: 64.5%;

    padding: 10px 1%;

    font-family: inherit;

    color: #323232

}

form select {

    width: 66.5%;

    margin: 5px 5px 5px 0

}

form input.submitbutton {

    background: #009c82;

    transition: .3s ease-in-out;

    color: #fff;

    border: 0;

    margin-left: 27%;

    padding: 10px 20px;

    font-size: .95em;

    border-radius: 3px

}

form input.submitbutton:hover {

    background: #57ba84;

    transition: .3s ease-in-out;

    cursor: pointer

}

.formErrorContent {

    background: #2D2D2D;

    letter-spacing: .5px;

    padding: 5px;

    color: #FFF;

    border-radius: 5px;

    font-size: .7em;

    line-height: 1.3em

}

#nameElementRow {

    display: none

}

#ContactForm h3 {

    color: #037192;

    font-family: 'Mirza', cursive;

    background: #efefef;

    padding: 10px;

    line-height: 1;

    margin-bottom: 10px;

    font-weight: 600;

    font-size: 1.6em

}