body {
    font-family: 'Poppins', sans-serif;
    color:#212529;
    font-size: 13px;
}

* {
    transition: .5s;
}

img {
    width: 100%;
}

.logo{
    width: 100px;
    display: inline-block;
    background: #ffffffc9;
    border-radius: 0px 0px 99px 99px;
    padding: 15px;
}

.parralex {
    height: 100vh;
    /* background: #000; */

    width: 100%;
    z-index: 0;
    /* padding: 20vh 0vh; */
    background-image: url(images/background/back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.parralex1 {
    height: 100vh;
    background: #1d1d1d;
    position: relative;
    top: 100vh;
    z-index: 1;
    padding: 20vh 0vh;
    background-image: url(images/background/back2.jpg);
    background-size: cover;
}

.parralex2 {
    height: 100vh;
    background: #00a3fb;
    position: relative;
    top: 100vh;
    z-index: 1;
    /* padding: 20vh 0vh; */
}

.menu {
    float: right;
    padding: 40px 0px;
}

.menu li {
    display: inline-block;
    margin-left: 35px;
}

a {
    color: #242424;
    text-decoration: none;
}

a:hover {
    color: #000;
    transition: .5s;
}

.content {
    padding-top: 20vh;
    /* text-align: center; */
    width: 40%;
    /* margin: 0 auto; */
    display: inline-block;
}

.display {
    padding: 10px 0px;
    position: fixed;
    width: 100%;
    background: #ffffff;
    z-index: 11;
    color: #242424;
    text-decoration: underline;
}

.display p {
    margin: 0px;
    font-size: 14px;
}

.bottom-content {
    margin: 0 auto;
    width: 60%;
    text-align: center;
    display: flex;
    justify-content: center;
}

a.normal {
    background: #ffffffde;
    padding: 10px 20px;
    border-radius: 99px;
    display: inline-block;
    margin-right: 10px;
}

a.filled {
    background: #242424;
    padding: 10px 20px;
    border-radius: 99px;
    color: #fff;
    display: inline-block;
}

.fixed {
    position: fixed;
    width: 100%;
    top: 80px;
    z-index: 11;
}

.menu li a {
    color: #fff;
    font-weight: 500;
}

h1.topic-white {
    color: #fff;
    font-weight: 600;
}

p.white {
    color: #ffffff;
    font-weight: 700;
}

.content-main {
    margin-top: 10vh;
    /* text-align: center; */
    /* width: 40%; */
    /* margin: 0 auto; */
    margin-bottom: 20vh;
}

p.small-white {
    font-size: 12px;
    color: #fff;
    text-align: center;
}

.details .hydrated {
    color: #fff;
    text-align: center;
    font-size: 45px;
}

.details {
    text-align: center;
    margin-top: 30px;
}

.content-no-padding {
    padding-top: 20vh;
    /* text-align: center; */
    width: 50%;
    /* margin: 0 auto; */
    display: inline-block;
}

.polka {
    background-image: radial-gradient(#0000002e 20%, transparent 0), 
    radial-gradient(#00000069 20%, #00000047 0);
    background-size: 8px 8px;
    background-position: 0 0, 20px 20px;
}

.position-absolute {
    width: 100%;
}

a.filled-1 {
    background: #242424;
    padding: 7px 20px;
    border-radius: 99px;
    color: #fff;
    display: inline-block;
}

            * {
                margin:0;
                padding:0;
                border:0;
            }

            header {
                /* height:120px; */
                /* background-color:#F00; */
            }

            section {
                height:100vh;
            }
            section:nth-child(1){
                /* background-color:#0F0; */
            }
            section:nth-child(2){
                background-color:#FF0;
            }
            section:nth-child(3){
                background-color: #222;
                background-image: url(images/background/box.gif);
                background-repeat: no-repeat;
                background-position: left; 
            }

            section:nth-child(4){
                background-color: #00000073;
                background-image: url(images/background/award-transparent.png);
                background-repeat: no-repeat;
                background-size: cover;
            }           

            footer {
                height:320px;
                background-color:#00F;
            }


.box-image {
    width: 60%;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    margin-top: -60vh;
    margin-bottom: -60vh;
}

.content-padding {
    padding-top: 20vh;
    /* text-align: center; */
    width: 100%;
    /* margin: 0 auto; */
    display: inline-block; */
}

.box-image-det {
    margin-bottom: 20px;
    text-align: center;
}

.box-image-det img {
    width: 80%;
    text-align: center;
}

.content-padding-1 {
    padding-top: 30vh;
    text-align: center;
    margin: 0 auto;
    /* display: inline-block; */
}

.background-in {
    background-image: url(images/background/back-in.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

section.cd-intro-in {
    height: auto;
}

.content-padding-in {
    padding: 250px 0px 100px 0px;
}

.content-padding-in h1 {
    font-size: 3.5rem;
    color: #ffffff;
    font-weight: 700;
}

.padding-in {
    padding: 80px 0px;
}

.image-zoom {
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 2px 2px 8px #00000026;
    border: 1px solid #dbdbdb;
}

.image-zoom:hover {
    cursor: zoom-out;
    transform: scale(1.1);
    transition: .5s;
    opacity: 0.9;
    box-shadow: 2px 2px 8px #00000026;
    border: 1px solid #dbdbdb;
}

.cat-body a {
    width: 100%;
    display: inline-block;
}

.cat-body a {
    width: 100%;
    display: inline-block;
    padding-left: 20px;
    margin-top: 15px;
    font-size: 11px;
}

.cat-body a:hover:before {content: '>';transition: .5s;/* position: absolute; */margin-left: -20px;color: #ffffff;background: #96c83c;width: inherit;padding:0px 10px;border-radius: 0px 99px 99px 0px;margin-right: 10px;}

.cat-body a:before {content: '>';margin-left: -20px;color: #96c83c;margin-right: 10px;}

.cat-header {
    padding: 15px;
    /* border-bottom: 1px solid #dbdbdb; */
    /* background: #dbdbdb; */
    font-weight: 300;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 0px;
}

.cat-cont {
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 2px 8px #00000026;
    position: sticky;
    top: 150px;
}

.cat-body {
    padding: 15px;
    padding-top: 0px;
}

.margin-left-30 {
    margin-left: 30px;
}

.background-green {
    background: #242424;
    padding:40px;
    color:#fff;
}

.contact-icon {margin-right: 20px;font-size: 25px;line-height: 1;}

.contact-main {
    display: flex;
}


/* form starting stylings ------------------------------- */
.group            { 
  position:relative; 
  margin-bottom:45px; 
}
input               {
  padding: 10px 0px 10px 0px;
  display:block;
  width: 100%;
  border:none;
  border-bottom:1px solid #757575;
  background: none;
}
input:focus         { outline:none; }

/* LABEL ======================================= */
label                {
  color:#999; 
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label        {
  top:-20px;
  font-size:12px;
  color:#96c83c;
}

/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:300px; }
.bar:before, .bar:after     {
  content:'';
  height:2px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#96c83c; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:34%;
}
.bar:after {
  right:0%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:100%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#96c83c; }
  to    { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#96c83c; }
  to    { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#96c83c; }
  to    { width:0; background:transparent; }
}

button.button-normal {
    background: #242424;
    padding: 10px 20px;
    border-radius: 99px;
    color: #fff;
    display: inline-block;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index:-1;
}

#myVideo1 {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index:-1;
}

.footer {
    color: #fff;
    background: #242424;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.footer p {
    margin: 0px;
}

.menu li a:hover {
    color: #96c83c;
}

.menu li a.filled-1:hover,a.filled-1:hover {
    background: #7fa933;
    color: #fff;
}

button#whatsappFormSubmit {
    background: #242424;
    padding: 10px 20px;
    border-radius: 99px;
    color: #fff;
    display: inline-block;
}

.quote {
    background: #dbdbdb;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 2px 2px 8px #00000026;
}

.background-quote {
    background-image: url(images/background/quoteback.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

select#product{
    padding: 10px 0px 10px 0px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #757575;
    background: none;
    color: #212529;
}

p.product-name {
    text-align: center;
    margin: 10px 0px 30px 0px;
}

button#pills-profile-tab {
    background: #000;
    color: #fff;
}

button#pills-contact-tab {
    background: #000;
    margin-left: 15px;
    color: #fff;
}

.main-holder {
    text-align: center;
    display: table;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}

.on-top {
    /* vertical-align: top; */
    /* display: table-cell; */
    height: 28vw;
    margin-top: 5rem;
}

h1.topic {
    font-weight: 800;
    text-align: center;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0px;
}

.buy-det-main {
    display: flex;
    justify-content: center;
}

.buy-left {width: 20%;margin: 0px 20px;text-align: center;}
.buy-left-50 {width: 50%;margin: 0px 20px;text-align: center;}
.buy-right {
    width: 20%;
    margin: 0px 20px;
}

a.opt-1 {
    background: #000000c7;
    display: block;
    color: #fff;
    border-radius: 99px;
    padding: 7px;
    text-transform: uppercase;
}

a.opt-2 {
    background: #ffffffc7;
    display: block;
    color: #242424;
    border-radius: 99px;
    padding: 7px;
    text-transform: uppercase;
}

.downArrow{
	bottom: 45%;
	left: 50%;
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}

.on-bottom {
    margin-bottom: 30px;
}

p.why {font-size: 2.5rem;font-weight: 700;}

.position-absolute-1 {
    position: absolute;
    z-index: 1;
    width: 100%;
    margin-top: 60px;
}

.position-slider-absolute {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 200px;
}

.white-overlay {
    /* background: #ffffff8f; */
}

input#formFile {
    font-size: 12px;
}

.form-control {
    font-size: 14px;
}


p.topic {
    text-align: center;
}

.on-top-1 {
    height: 10vw;
    margin-top: 5rem;
}

.on-top-2 {
    margin-bottom: 2rem;
}

















@media only screen and (max-width: 600px) {
.buy-left {width: 100%;margin: 0px 0px 20px 0px;}

.buy-right {
    width: 20%;
    margin: 0px 20px;
}

a.opt-1 {
    background: #000000c7;
    display: block;
    color: #fff;
    border-radius: 99px;
    padding: 20px;
    text-transform: uppercase;
}

a.opt-2 {
    background: #ffffffc7;
    display: block;
    color: #242424;
    border-radius: 99px;
    padding: 20px;
    text-transform: uppercase;
}

.downArrow{
	bottom: 0;
	position: absolute;
	/* width: 100%; */
	left: 45%;
}

.buy-det-main {
    display: inline-block;
    justify-content: center;
}
.on-bottom {
    margin-bottom: 30px;
    position: absolute;
    bottom: 20px;
    width: 94%;
}

.on-top-1 {
    height: 10
vw
;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
}