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

.body {
width: 360px;
height: auto;
left:0;
right:0;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
}

html {
font-family:sans-serif;
line-height:1.15;
-webkit-tap-highlight-color:rgba(0,0,0,0);
background: #00536d;
object-fit: cover;
background-size: 100% 100%;
background-repeat: repeat;
}

.clearfix

.w3_footer_grids{
position: relative;
width: 100%;
left:-300px;
}

.logo-header {
background-image: url(../images/logo.webp);
border-radius: 100%;
width: 50px;
height: 50px;
margin-block: -4px;
margin-inline: 10px;
position: absolute;
display: flex;
object-fit: contain;
background-size: 100% 100%;
background-repeat: no-repeat;
}

.logo-gdp-sidebar-menu {
object-fit: contain;
}

.icon-home-bawah {
margin-block: 47px;
}

.icon-home-bawah:hover {
margin-block: 47px;
fill:#fff;
}

.icon-home-bawah:focus {
margin-block: 47px;
fill: #fff;
}


.icon-admin-bawah {
margin-block: 47px;
}

.icon-admin-bawah:hover {
margin-block: 47px;
fill:#fff;
}

.icon-admin-bawah:focus {
margin-block: 47px;
fill: #fff;
}

.deskripsi-produk{
width: 100%;
font-size: 12.5px;
font-weight: 600;
}

.nama-produk {
width: 100%;
font-size: 17px;
font-weight: 600;
}

.harga-produk{
color: #fff;
background: #090808;
font-size: 15px;
font-weight: bold;
display: block;
margin-block: 5px;
box-shadow: 0 -3px 2px #b59153;
}

.harga-produk:hover{
color: #11d32a;
background: #090808;
font-size: 15px;
margin-block: 5px;
font-weight: bold;
display: block;
box-shadow: 0 -3px 2px #b59153;
}

.harga-produk-before{
margin-block: 3px;
color: #ccaa46;
background: #090808;
font-size: 15px;
display: block;
text-decoration-line:line-through;
box-shadow: 0 -3px 2px #b59153;
}

ul li,
ol li {
font-size: 14px;
}

p {
margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: arial;
margin: 0;
font-weight: 700;
}

ul,
label {
margin: 0;
padding: 0;
}

body a:hover {
text-decoration: none;
}

/*-- header --*/
span.glyphicon.glyphicon-shopping-cart.my-cart-icon.my-cart-icon-affix {
position: relative !important;
}

.btn-danger {
color: #fff;
background-color: #3399cc;
border-color: #3399cc;
}

.modal-dialog {
width: 850px;
margin: 75px auto 30px;
}

.snipcart-thumb a {
display: grid;
text-align: center;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;
bottom:0;
position: relative;
}


i.badge.badge-notify.my-cart-badge {
font-style: normal;
background: #3399cc;
font-size: 14px;
position: relative;
top: -10px;
right: -22px;
}

.product_list_header span {
font-size: 1em;
color: #fff;
top: 1em;
}

input[type="submit"],
#PPMiniCart .minicart-submit,
.w3ls_vegetables ul li a,
input[type="reset"],
.agileinfo_mail_grid_left ul li a,
.events_bottom_left2 ul li a,
.w3ls_service_grids1_right a,
ul.agileits_social_icons li a,
.w3l_banner_nav_right_banner_pet a,
.w3ls_w3l_banner_nav_right_grid_head_grid ul li a,
.products-breadcrumb ul li a,
.w3_footer_grid ul li a,
.w3l_fresh_vegetables_grid ul li a,
.wthree_footer_copy p a,
.agile_top_brand_left_grid1 .button,
.w3ls_logo_products_left1 ul.special_items li a,
.w3ls_logo_products_left1 ul.phone_email li a {
transition: 0.5s ease-in;
}

.agileits_header {
background:#000000cc;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
display: block;
margin: 5px;
border: solid 2px #4182a2;
border-radius: 5px;
box-shadow: 0px 6px 6px #c09243;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;
bottom:0;
width: 350px;
height: 10vh;
text-align: center;
}

.judul {
position: relative;
display: flex;
margin-top: 5px;
width: 79%;
margin-left: 70px;
font-family: "Galada", serif;
font-size: 3rem;
float: left;
text-align: center;
font-weight: 500; 
color: #f2f2f2;
text-shadow: -2px 3px 6px #0060e5;
}

.judul:hover {
position: relative;
display: flex;
margin-top: 5px;
width: 79%;
margin-left: 70px;
font-family: "Galada", serif;
font-size: 3rem;
float: left;
text-align: center;
font-weight: 500; 
color: #60a7be;
text-shadow: -2px 3px 3px #2400c98c;
}

.judul:focus {
position: relative;
display: flex;
margin-top: 5px;
width: 79%;
margin-left: 70px;
font-family: "Galada", serif;
font-size: 3rem;
float: left;
text-align: center;
font-weight: 500; 
color: #fff;
text-shadow: -2px 3px 3px #00000026;
}

.w3l_offers {
float: left;
padding: 9px 0;
width: 47%;
}

.w3l_offers p {
font-size: 15px;
color: #000;
}

.w3l_offers p a {
color: #123c8b;
text-decoration: none;
}

.w3l_search {
float: right;
width: 25.33%;
margin: 0em 0 0em 0em;
}

.w3l_search input[type="search"] {
width: 83%;
padding: 10px;
font-size: 14px;
color: #000;
outline: none;
border: 1px solid #cccccc;
background: none;
transition: 0.5s all;
}

i.fa.fa-angle-right {
font-size: 15px;
margin-right: 5px;
}

i.fa.fa-phone {
margin-right: 10px;
font-size: 20px;
}

.agile-login {
float: left;
width: 40%;
text-align: center;
padding: 9px 0;
}

.agile-login ul li {
display: inline-block;
padding: 0em 1em;
}

.agile-login ul li a {
font-size: 1em;
text-transform: capitalize;
color: #fff;
text-decoration: none;
border: solid 2px #5c7db5;
border-radius: 5px;
padding: 5px;
background: #000000;
}

.agile-login:hover ul li a {
font-size: 1em;
text-transform: capitalize;
color: #b2ff00;
text-decoration: none;
border: solid 2px #ddd;
border-radius: 5px;
padding: 5px;
background: #000000;
}

.kontak-admin-header{
 position: relative;
 display: flex;
 font-size: 13px;
 color: #fff;
 width: 108px;
 text-align: center;
 justify-content: center;
 z-index: 9999;
 top: -7.6px;
 left: 35px;
 background: #000000;
 padding: 5.5px;
 border: solid 2px #5c7db5;
 border-radius: 5px;
}

.kontak-admin-header:hover{
 position: relative;
 display: flex;
 font-size: 13px;
 color: #00ff40;
 width: 108px;
 text-align: center;
 justify-content: center;
 z-index: 9999;
 top: -9px;
 left: 35px;
 background: #000;
 padding: 5.5px;
 border: solid 2px #5c7db5;
 border-radius: 5px;
}

.w3l_search input[type="search"] {
margin-top: 0px;
}

.w3l_search i.fa.fa-search {
  width: 90%;
  position: relative;
  display: contents;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
}

button.w3l_search {
border: none;
position: relative;
top: 4px;
right: 11px;
width: 47px;
height: 43px;
outline: none;
box-shadow: none;
background: #00e58b;
padding: 0;
border-radius: inherit;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
transition: 0.5s all;
}

.btn-default:hover {
background-color: #000;
border: none;
}

.cart-wthree .fa {
font-size: 34px;
margin-top: 7px;
}

button.w3view-cart:focus {
outline: none;
}

.logo_products {
position: relative;
display: block;
}

.w3ls_logo_products_left {float: left;text-align: center;width: 33.33%;}

.w3ls_logo_products_left h1 a {
text-decoration: none;
display: block;
line-height: 1;
}

.w3ls_logo_products_left1 {
float: left;
margin-top: 0.6em;
width: 33.33%;
}

.w3ls_logo_products_left1 ul.phone_email li {display: inline-block;color: #212121;}

/*-- //header --*/
.navbar-default .navbar-nav > li > a {
color: #000;
font-size: 16px;
font-weight: 500;
}

.logo-nav-left1 ul li.active a.act {
color: #000 !important;
}

.multi-column-dropdown li a {
color: #999 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #000 !important;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border: none;
}

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 10px;
border: 1px solid transparent;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
color: #fff;
}

.navbar-default {
background: none;
border: none;
}

.navbar-collapse {
padding: 0;
}

ul.multi-column-dropdown h6 {
font-size: 20px;
color: #8fa382;
margin: 0 0 0em;
padding-bottom: 1em;
border-bottom: 1px solid #e4e4e4;
text-transform: capitalize;
}

.multi-column-dropdown li {
list-style-type: none;
margin: 14px 0;
}

.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #000 !important;
white-space: normal;
font-weight: 500 !important;
}

.dropdown-menu.columns-3 {
min-width: 190px;
padding: 20px 30px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background: none;
border: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
}

.nav > li > a:hover,
.nav > li > a:focus {
background: none;
color: #5590ad !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000;
}

.multi-gd-img img {
width: 100%;
}

.navigation-agileits {
background: #ffffff;
}

.navbar-nav > li {
float: left;
margin-left: 17px;
}

.navbar-nav > li:nth-child(1) {
margin-left: 0px;
}

/*-- banner --*/
.navbar-collapse {
padding: 0;
box-shadow: none;
}

.navbar {
margin-bottom: 0;
border: none;
}

.w3view-cart{
position:relative;
display:flex;
font-size: 36px;
color: #000;
width: 40px;
height: 59px;
background: #5c7db5;
border: solid 1px #5c7db5;
z-index: 9999;
top: -12%;
padding: 9px;
padding-inline: 2px;
right: -2px;
}

.w3view-cart:hover{
position:relative;
display:flex;
font-size: 36px;
color: #ffffff;
width: 40px;
height: 59px;
background: #5c7db5;
border: solid 1px #5c7db5;
z-index: 9999;
top: -12%;
padding: 9px;
padding-inline: 2px;
right: -2px;
}


/*-- top-brands --*/
.tag {
position: relative;
top: -1%;
right: 10%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {position: relative;display: block;justify-content: center;justify-self: center;align-content: center;align-self: center;left:0;right:0;text-align: center;color: #212121;padding-bottom: 0.5em;font-size: 2.5em;text-transform: uppercase;}

.top-brands h2:after,
.newproducts-w3agile h3:after,
.login h2:after,
.register h2:after,
.faq-w3agile h3:after,
.brands h3:after {
content: "";
position: relative;
display: contents;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
background: #3399cc;
height: 2px;
width: 15%;
position: relative;
bottom: 0%;
left: 43%;
}

.agile_top_brand_left_grid {
position: relative;
width: 100%;
}

.agile_top_brand_left_grid_pos {
position: relative;
display: block;
top: 0%;
right: 0%;
width: 100%;
z-index: 1;
}

.agile_top_brand_left_grid1 {
position: relative;
display: block;
width: 100%;
height: auto;
top:0;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
}

.agile_top_brand_left_grid1 img {
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
object-fit: contain;
width: 100%;
}

.top-brands {
background-image: url(../images/bg-produk.jpg);
object-fit: contain;

padding: 1em 0;
}

.agile_top_brand_left_grid1 h4,
.agileinfo_single_right_snipcart h4 {
font-weight: 600;
font-size: 1em;
color: #fff;
position: relative;
display: block;
left:0;
right:0;
text-align: center;
background: #000;
border-radius: 2px;
}

.agile_top_brand_left_grid1 h4 span,
.agileinfo_single_right_snipcart h4 span {
font-weight: 300;
color: #000000;
position: relative;
display: block;
text-decoration: line-through;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
text-align: center;
left:0;
right:0;
font-weight: 600;
padding: 2px;
}

/*-- cart --*/
.product_list_header {
float: right;
position: relative;
display: block;
}

.snipcart-details {
position: relative;
display:  block;
text-align: center;
margin: 0.5em auto 1em;
width: 77%;
margin-block: 8px;
margin-top: -6px;
}

.btn-danger.my-cart-btn:focus {
outline: none;
}

.snipcart-details input.button {
font-size: 14px;
color: #fff;
background: #3399cc;
text-decoration: none;
position: relative;
border: solid 2px #ddd;
border-radius: 20px 0px 20px 0px;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;
bottom:0;
width: 100%;
padding: 6px;
outline: none;
}


.column div.agile_top_brand_left_grid {
position: relative;
display: block;
width: 100%;
height: auto;
}

.agile_top_brand_left_grid figure {
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
z-index: 0;
}

/* Shine */
.hover14 figure {position: relative;width: 100%;padding-inline: 0px;}

.hover14 figure::before {position: relative;top: 0;left: -75%;z-index: 2;display: block;content: "";width: 50%;height: 100%;background: -webkit-linear-gradient(
left,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}

.hover14 figure:hover::before,
.top_brand_left:hover .hover14 figure::before {
-webkit-animation: shine 0.75s;
animation: shine 0.75s;
}

@-webkit-keyframes shine {
100% {
  left: 125%;
}
}

@keyframes shine {
100% {
left: 125%;
}
}

/*-- //top-brands --*/
div#myTabContent {
width: 100%;
}

.nav-tabs > li {
width: 50%;
}

.nav-tabs > li > a {
margin: 0 0px;
padding: 10px 53px;
line-height: 1.42857143;
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-weight: 600;
border: 0px solid transparent;
border-radius: 0px 0px 0 0;
color: #016773;
}

.nav-tabs > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background: #8fa382;
color: #fff;
border: 0px solid transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
background: #8fa382;
border: 0px solid transparent;
}

.nav-tabs {
border-bottom: 1px solid #fff;
}

.grid_3.grid_5 {
max-width: 350px;
border: 3px solid #3a7490;
border-radius: 10px;
margin: 3px;
left: 0;
right:0;
float: center;
}

p.w3l-ad {
font-size: 14px;
color: #777;
width: 42%;
line-height: 28px;
}
.agile_top_brands_grids {
max-width: 100%;
position: relative;
display: block;
}

.hover14.column {
position: relative;
display: contents;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right: 0;
top:0;
bottom:0;
}

.stars {
text-align: center;
margin-bottom: 5px;
}

i.blue-star {
color: #c1b23d;
letter-spacing: 1.4px;
}

i.gray-star {
color: #808080;
}



/* Sweep To Top */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}

.hvr-sweep-to-top:before {
content: "";
position: relative;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f19e1f;
border-radius: 50%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-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;
}

.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}

.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before,
.services-grid:hover .hvr-sweep-to-top:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}

.ban-text2 {
position: relative;
top: 14%;
left: 45%;
background: #3399cc;
padding: 1.5em;
border-radius: 60px;
text-align: center;
width: 18%;
}

/*--causel--*/
.carousel-indicators {
position: relative;
bottom: -45px;
left: 48%;
z-index: 15;
width: auto;
padding-left: 0;
margin: 0;
text-align: center;
list-style: none;
}

.carousel-indicators li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
text-indent: -999px;
cursor: pointer;
background-color: #029241;
border: none;
border-radius: 10px;
}

.carousel-indicators .active {
background-color: #fab005;
margin: 0 6px;
}

/*-- footer --*/
.footer {
color: #fff;
background: #000;
}
/*-- //footer --*/

.newproducts-w3agile {
padding: 5em 0;
background: #f5f5f5;
}

.breadcrumb1 li span {
left: 0em;
padding-right: 1em;
color: #00aaff;
}

.breadcrumbs {
padding: 1.5em 0;
background: #f5f5f5;
}

.breadcrumb {
margin-bottom: 0 !important;
padding: 0 !important;
}

.breadcrumb1 li {
font-size: 1.6em;
background: #161313;
padding: 3px;
border-radius: 4px;
border: solid 2px #a6a3a5;
box-shadow: -2.3px 2.3px 3px #00000080;
color: #999;
}

.breadcrumb1 li a {
color: #fff;
text-decoration: none;
}

/*-- login --*/
.login-form-grids {
width: 45%;
padding: 3em;
background: #f7f7f9;
margin: 3em auto 0;
}

.login-form-grids input[type="email"],
.login-form-grids input[type="password"],
.login-form-grids input[type="text"] {
outline: none;
border: 1px solid #dbdbdb;
padding: 10px 10px 10px 10px;
font-size: 14px;
color: #999;
display: block;
width: 100%;
}

.login-form-grids input[type="password"] {
margin: 1em 0 0;
}

.forgot {
margin: 1.5em 0 0;
}

.login-form-grids input[type="submit"] {
outline: none;
border: none;
padding: 10px 0;
font-size: 1em;
color: #fff;
display: block;
width: 100%;
background: #3399cc;
margin: 1.5em 0 0;
}

.login-form-grids input[type="submit"]:hover {
background: #8fa382;
}

.login-form-grids ::-webkit-input-placeholder {
color: #999;
}

.forgot a {
color: #212121;
font-size: 14px;
text-decoration: none;
}

.forgot a:hover {
color: #d8703f;
}

.login h4 {
margin: 2em 0 0.5em;
font-size: 1.5em;
color: #212121;
text-align: center;
text-transform: uppercase;
}

.login p {
font-size: 14px;
color: #999;
line-height: 1.8em;
margin: 0;
text-align: center;
}

.login p a {
color: #8fa382;
text-decoration: none;
font-size: 1.2em;
padding: 0 0.5em;
}

.login p a:hover {
color: #212121;
}

.login p a span {
top: 0.1em;
font-size: 0.7em;
left: 0.3em;
}

.login {
padding: 5em 0;
}

/*-- //login --*/
/*-- register --*/
.register {
padding: 5em 0;
}

.login-form-grids h5,
.login-form-grids h6 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
margin: 0 0 2em;
}

.login-form-grids input[type="text"] {
background: url(../images/img-sp.png) no-repeat 5px -259px #fff;
}

.login-form-grids input[type="text"]:nth-child(2) {
background: url(../images/img-sp.png) no-repeat 0px -298px #fff;
margin: 1em 0;
}

.register-check-box label {
font-size: 14px;
font-weight: 500;
color: #999;
margin: 1.5em 0 0 0em;
}

.checkbox {
position: relative;
padding-left: 38px !important;
cursor: pointer;
}

.checkbox i {
position: relative;
bottom: -2px;
left: 0;
display: block;
width: 25px;
height: 25px;
outline: none;
border: 2px solid #ededed;
background: #fff;
}

.checkbox input + i:after,
.radio input + i:after {
position: relative;
opacity: 0;
transition: opacity 0.1s;
}

.checkbox input:checked + i:after,
.radio input:checked + i:after {
opacity: 1;
}

.checkbox input,
.radio input {
position: relative;
left: -9999px;
}

.checkbox input + i:after {
content: "";
background: url("../images/check.png") no-repeat 1px 2px;
top: 0px;
left: 2px;
width: 16px;
height: 16px;
font: normal 12px/16px FontAwesome;
text-align: center;
}

.login-form-grids h6 {
margin: 3em 0 2em !important;
}

.login-form-grids input[type="password"]:nth-child(3) {
margin: 1em 0;
}

.register-home {
margin: 2em 0 0;
text-align: center;
}

.register-home a {
padding: 8px 45px;
background: #9f9f9f;
color: #fff;
font-size: 1em;
text-decoration: none;
}

.register-home a:hover {
background: #8fa382;
}

/*-- //register --*/
/*-- checkout --*/
.checkout h2 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
margin: 0 0 3em;
}

.checkout h2 span {
color: #3399cc;
}

table.timetable_sub {
width: 100%;
margin: 0 auto;
}

.timetable_sub thead {
background: #004284;
}

.timetable_sub th {
background: #8fa382;
color: #fff !important;
text-transform: capitalize;
font-size: 13px;
border-right: 1px solid #8fa382;
}

.timetable_sub th,
.timetable_sub td {
text-align: center;
padding: 7px;
font-size: 14px;
color: #212121;
}

.timetable_sub td {
border: 1px solid #cdcdcd;
}

td.invert-image a img {
width: 30%;
margin: 0 auto;
}

.rem {
position: relative;
}

.close1,
.close2,
.close3 {
background: url("../images/close_1.png") no-repeat 0px 0px;
cursor: pointer;
width: 28px;
height: 28px;
position: relative;
right: 15px;
top: -13px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}

/*-- quantity-starts --*/
.value-minus,
.value-plus {
height: 40px;
line-height: 24px;
width: 40px;
margin-right: 3px;
display: inline-block;
cursor: pointer;
position: relative;
font-size: 18px;
color: #fff;
text-align: center;
border: 1px solid #b2b2b2;
vertical-align: bottom;
}

.quantity-select .entry.value-minus:before,
.quantity-select .entry.value-plus:before {
content: "";
width: 13px;
height: 2px;
background: #000;
left: 50%;
margin-left: -7px;
top: 50%;
margin-top: -0.5px;
position: relative;
}

.quantity-select .entry.value-plus:after {
content: "";
height: 13px;
width: 2px;
background: #000;
left: 50%;
margin-left: -1.4px;
top: 50%;
margin-top: -6.2px;
position: relative;
}

.value {
cursor: default;
width: 40px;
height: 40px;
padding: 8px 0px;
color: #a9a9a9;
line-height: 24px;
border: 1px solid #e5e5e5;
background-color: #e5e5e5;
text-align: center;
display: inline-block;
margin-right: 3px;
}

.quantity-select .entry.value-minus:hover,
.quantity-select .entry.value-plus:hover {
background: #e5e5e5;
}

.quantity-select .entry.value-minus {
margin-left: 0;
}

/*-- quantity-end --*/
.checkout-left-basket h4 {
padding: 1em;
background: #3399cc;
font-size: 1.1em;
color: #fff;
text-transform: uppercase;
text-align: center;
margin: 0 0 1em;
}

.checkout-left {
margin: 2em 0 0;
}

.checkout-left-basket ul li {
list-style-type: none;
margin-bottom: 1em;
font-size: 14px;
color: #999;
}

.checkout-left-basket {
float: left;
width: 25%;
}

.checkout-right-basket {
float: right;
margin: 8em 0 0 0em;
}

.checkout-left-basket ul li span {
float: right;
}

.checkout-left-basket ul li:nth-child(5) {
font-size: 1em;
color: #212121;
font-weight: 600;
padding: 1em 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 2em 0 0;
}

.checkout-right-basket a {
padding: 10px 30px;
color: #fff;
font-size: 1em;
background: #212121;
text-decoration: none;
}

.checkout-right-basket a:hover {
background: #8fa382;
}

.checkout-right-basket a span {
left: -0.5em;
top: 0.1em;
}

.checkout {
padding: 5em 0;
}

/*-- //checkout --*/
/*-- faq --*/
h3.w3ls-title.w3ls-title1 {
text-align: center;
margin: 0 0 1.5em;
font-size: 2.5em;
}

.faq > li > a {
width: 100%;
display: block;
position: relative;
color: #fff;
font-size: 1em;
font-weight: 400;
text-decoration: none;
}

.faq-w3agile .faq li {
margin-top: 2em;
list-style-type: decimal;
padding-left: 0.5em;
}

.faq-w3agile .faq > li > a {
color: #999;
}

.faq-w3agile .faq li li.subitem1 {
display: block;
margin-top: 1em;
}

.faq-w3agile {
padding: 5em 0;
}

ul.faq {
margin-top: 5em;
}

/*-- //faq-page --*/
/*-- single --*/
.agileinfo_single h2 {
font-size: 1.8em;
color: #212121;
line-height: 1.5em;
text-transform: uppercase;
margin-bottom: 1em;
}

.agileinfo_single_left {
padding: 2em;
box-shadow: 0px 0px 5px #b2afaf;
}

/*-- Ratings --*/
.rating1 {
direction: ltr;
}

.starRating:not(old) {
display: inline-block;
height: 17px;
width: 100px;
overflow: hidden;
}

.starRating:not(old) > input {
margin-right: -26%;
opacity: 0;
}

.starRating:not(old) > label {
float: right;
background: url(../images/star.png);
background-size: contain;
margin-right: 2px;
}

.starRating:not(old) > label:before {
content: "";
display: block;
width: 16px;
height: 16px;
background: url(../images/star1.png);
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before {
opacity: 1;
}


/*-- //Ratings --*/
.agileinfo_single_right {
padding-left: 5em;
}

.agileinfo_single_right_snipcart {
margin: 0 0 2em;
}

.agileinfo_single_right_details {
margin: 0 !important;
width: 25% !important;
}

.w3agile_description h4 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
}

.w3agile_description p {
font-size: 14px;
color: #999;
line-height: 2em;
margin: 0.5em 0 0;
width: 80%;
}

.w3agile_description {
margin: 2em 0;
}

.w3ls_w3l_banner_nav_right_grid_popular {
background: #f5f5f5;
padding: 5em 0 !important;
}


/*-- //single --*/
.brands {
padding: 5em 0;
background: #eed3b6;
}

.brands-w3l {
text-align: center;
}

.brands-w3l p a {
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
color: #39c;
background: #fff;
padding: 16px;
display: block;
border: 1px solid #e1e1e1;
}

.brands-w3l p a:hover {
box-shadow: 0 0 6px 1px #b6b6b6;
}

.brands-agile-1 {
margin: 20px 0;
}

.brands-agile {
margin-top: 5em;
}


/*-- products --*/
.products {
padding: 5em 0;
}

.sorting {
float: right;
width: 35%;
}

.sorting-left {
float: right;
margin-right: 2em;
width: 25%;
}

select#country,
select#country1 {
border: 1px solid #212121;
outline: none;
font-size: 14px;
color: #212121;
padding: 0.5em;
width: 100%;
cursor: pointer;
}

.products-right-grids {
margin-bottom: 2em;
}

.numbering {
text-align: right;
}

ul.paging {
margin: 4em auto 0;
}

.paging > .active > a,
.paging > .active > a:hover {
background-color: #ffc229;
border-color: #edb62b;
}

.pagination > li > a {
color: #212121;
}

.categories,
.new-products {
border: 1px solid #999;
}

.categories h2 {
font-size: 1.5em;
color: #212121;
margin: 0;
padding: 0.5em;
background: #f5f5f5;
text-transform: uppercase;
text-align: center;
letter-spacing: 5px;
}

.filter-price h3 {
background: none;
}

.categories ul.cate,
.new-products-grids {
padding: 2em;
}

.categories ul li {
display: block;
color: #999;
font-size: 14px;
margin-bottom: 1em;
}

.categories ul li a {
color: #999;
text-decoration: none;
}

.categories ul li a:hover {
color: #3399cc;
}

.categories ul li span {
float: right;
}

ul.cate ul {
margin-left: 2em;
}

ul.dropdown-menu1 li {
display: block;
font-size: 14px;
}

ul.dropdown-menu1 li a {
color: #212121;
text-decoration: none;
}

input#amount {
outline: none;
margin: 0 auto;
text-align: center;
width: 100%;
}

.new-products-grid-left {
float: left;
width: 35%;
}

.new-products-grid-right {
float: right;
width: 60%;
}

/*-- //products --*/
/*-- about --*/
.about,
.about-team,
.contact,
.codes {
padding: 5em 0;
}

h3.w3_agile_header,
h2.w3_agile_header {
text-align: center;
color: #212121;
padding-bottom: 0.5em;
position: relative;
font-size: 2.5em;
text-transform: uppercase;
}

h3.w3_agile_header:after,
h2.w3_agile_header:after {
content: "";
background: #3399cc;
height: 2px;
width: 15%;
position: relative;
bottom: 0%;
left: 43%;
}

.icons {
margin: 50px 0;
}

.about-agileinfo {
margin-top: 4em;
}

.about .grid-top h4 {
font-size: 1.5em;
color: #222;
letter-spacing: 4px;
}

.about img {
width: 100%;
}

.about-w3imgs {
padding: 0;
overflow: hidden;
}

.about .grid-top p {
font-size: 1em;
color: #999;
line-height: 1.8em;
margin: 1em 0 2.5em;
}

.about .grid-top p.top {
margin: 1em 0;
}

.offic-time {
text-align: center;
}

.time-top {
padding: 1em;
background-color: #8fa382;
}

.time-top h4 {
font-size: 1.7em;
color: #fff;
}

.time-bottom {
padding: 1.6em 2em;
background-color: #212121;
}

.time-bottom h5 {
font-size: 1.1em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
}

.time-bottom p {
font-size: 1em;
color: #bbbbbb;
margin-top: 0.5em;
line-height: 1.8em;
}

/*-- //about-page --*/
.testi {
width: 100%;
margin-top: 3em;
position: relative;
}

.testi h3.w3ls-title1 {
text-align: left;
font-size: 2.5em;
}

.testi h4 {
color: #ffffff;
font-size: 1.4em;
letter-spacing: 1px;
}

.testi p {
font-style: italic;
color: #000;
font-size: 1em;
margin-top: 1em;
line-height: 1.5em;
font-weight: 300;
}

.testi-subscript p {
margin: 1em 2.8em 0 0;
}

.testi p a {
font-size: 1em;
font-weight: 600;
color: #000;
margin: 0 5px;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.testi p a:hover {
color: #fff;
}

.testi-subscript {
position: relative;
display: inline-block;
}

.testi span.w3-agilesub {
position: relative;
background: url(../images/icon3.png) no-repeat 0px 0px;
display: block;
width: 30px;
height: 29px;
top: 0%;
right: 0%;
}

.testi-slider {
padding: 4em 2em 3em;
background: #3399cc;
margin-top: 2em;
}

/*-- slider start here --*/
#slider3,
#slider4 {
margin: 0 auto;
}

.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0, 0, 0, 0.25);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}

.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}

.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}

.rslides_tabs li:first-child {
margin-left: 0;
}

.rslides_tabs .rslides_here a {
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: bold;
}

.events {
list-style: none;
}

.callbacks_container {
float: left;
width: 100%;
}

.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.callbacks li {
position: relative;
width: 100%;
left: 0;
top: 0;
}

.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}

.callbacks_nav {
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 15%;
right: 0%;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 30px;
width: 25px;
background: url("../images/icon1.png") no-repeat center center;
}

.callbacks_nav:active {
opacity: 1;
}

.callbacks_nav.next {
right: 7%;
background: url("../images/icon2.png") no-repeat center center;
}

#slider3-pager a,
#slider4-pager a {
display: inline-block;
}

#slider3-pager span,
#slider4-pager span {
float: left;
}

#slider3-pager span,
#slider4-pager span {
width: 100px;
height: 15px;
background: #fff;
display: inline-block;
border-radius: 30em;
opacity: 0.6;
}

#slider3-pager .rslides_here a,
#slider4-pager .rslides_here a {
background: #fff;
border-radius: 30em;
opacity: 1;
}

#slider3-pager a,
#slider4-pager a {
padding: 0;
}

#slider3-pager li,
#slider4-pager li {
display: inline-block;
}

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
position: relative;
display: block;
float: left;
}

.rslides img {
height: auto;
border: 0;
width: 100%;
}

.callbacks_tabs a {
font-size: 30px;
color: #70664c;
font-weight: 600;
padding: 0px 18px;
background: rgba(222, 208, 157, 0.89);
}

.callbacks_here a:after {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

.callbacks_tabs a:hover,
.callbacks_tabs a:active {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

.callbacks_tabs a:after {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

li.callbacks1_s1.callbacks_here a.callbacks1_s1:after,
li.callbacks1_s1.callbacks_here a.callbacks1_s1:active {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

li.callbacks1_s1.callbacks_here a.callbacks1_s1:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s4.active,
a.callbacks1_s4:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s2.active,
a.callbacks1_s2:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s3.active,
a.callbacks1_s3:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

/*--//slider end here--*/
/*-- about-slid --*/
.about-slid {
background: url(../images/22.jpg) no-repeat 0px center fixed;
background-size: cover;
text-align: center;
padding: 6em 0;
}

.about-slid-info {
width: 75%;
margin: 0 auto;
}

.about-slid h2 {
color: #fff;
font-size: 3.5em;
font-family: "Abel", sans-serif;
}

.about-slid p {
color: #fff;
font-size: 1em;
margin-top: 2em;
line-height: 1.8em;
}

/*-- team-agileitsinfo --*/
.team-agileitsinfo {
margin-top: 4em;
}

.about-team-grids {
background: #3399cc;
padding: 2em 1em;
margin-left: 5px;
width: 24.5%;
}

.about-team-grids img {
width: 100%;
}

.about-team-grids h4 {
color: #000;
font-size: 1.1em;
margin: 1.5em 0 0.5em;
}

.about-team-grids h4 span {
font-size: 1.3em;
color: #000;
margin-right: 10px;
}

.team-w3lstext h6 {
color: #67686b;
font-size: 16px;
font-weight: 400;
margin: 0;
letter-spacing: 0px;
}

.about-team-grids p {
color: #fff;
font-size: 14px;
line-height: 1.8em;
font-weight: 400;
margin-top: 1em;
}

.about-grid1 .thumb .caption {
float: left;
width: 100%;
height: 70px;
position: relative;
left: 0;
bottom: 0;
padding: 13px 30px;
text-align: center;
background-color: rgba(81, 92, 142, 0.55);
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.about-grid1 .thumb:hover .caption {
height: 100%;
padding: 40px 30px;
opacity: 1;
visibility: visible;
}

.caption {
opacity: 0;
top: 0%;
position: relative;
background-color: rgba(51, 153, 204, 0.58);
width: 100%;
left: 0;
text-align: center;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.social-icons ul li {
display: inline-block;
font-size: inherit;
text-align: center;
margin: 0;
}

.social-icons ul li a.fa {
font-size: 1em;
color: #fff;
line-height: 2.6em;
}

.social-icons.caption ul li a.fa {
margin: 0 0.5em;
line-height: inherit;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.about-team-grids:hover .caption {
display: block;
top: 49.2%;
opacity: 1;
}

.caption ul {
padding: 1em 0;
}

.caption ul li a:hover {
color: #000;
}

/*-- contact --*/
.agile_map iframe {
width: 100%;
min-height: 580px;
}

.w3_agileits_contact_grid_left {
padding: 0;
position: relative;
}

.agileits_w3layouts_map_pos {
position: relative;
right: -15%;
top: 22%;
width: 50%;
padding: 2em;
background: #3399cc;
}

.agileits_w3layouts_map_pos h3 {
font-size: 1.5em;
color: #212121;
}

.agileits_w3layouts_map_pos p {
color: #fff;
line-height: 2em;
margin: 0.5em 0 1.5em;
font-weight: 600;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li {
list-style-type: none;
margin-bottom: 1em;
color: #fff;
font-weight: 600;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li i {
padding-right: 1em;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li a {
color: #fff;
text-decoration: none;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li a:hover {
color: #212121;
}

.w3_agile_social_icons_contact ul li a {
text-align: center;
}

.agileits_w3layouts_map_pos1 {
padding: 2em;
border: 3px double #fff;
}

.w3_agileits_contact_grid_right {
padding: 0 4em 0 12em;
}

.w3_agileits_contact_grid_right form {
padding: 1em 0 0;
}

/*-- effect --*/
.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 0;
max-width: 100%;
width: calc(100% - 0em);
vertical-align: top;
}

.input__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-size: 14px;
}

.input__field:focus {
outline: none;
}

.input__label {
display: inline-block;
padding: 0 1em;
width: 40%;
color: #212121;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.input__label-content {
position: relative;
display: block;
padding: 1em 0;
width: 100%;
}

/* Ichiro */
.input--ichiro {
margin-top: 2em;
}

.input__field--ichiro {
position: relative;
top: 4px;
left: 4px;
z-index: 100;
display: block;
padding: 0 1em;
width: calc(100% - 8px);
height: calc(100% - 8px);
background: #fff;
color: #212121;
opacity: 0;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}

.input__label--ichiro {
width: 100%;
text-align: left;
cursor: text;
}

.input__label--ichiro::before {
content: "";
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f5f5f5;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
border: 1px solid #e4e4e4;
}

.input__label-content--ichiro {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__field--ichiro:focus,
.input--filled .input__field--ichiro {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

.input__field--ichiro:focus + .input__label--ichiro,
.input--filled .input__label--ichiro {
cursor: default;
pointer-events: none;
}

.input__field--ichiro:focus + .input__label--ichiro::before,
.input--filled .input__label--ichiro::before {
-webkit-transform: scale3d(1, 1.5, 1);
transform: scale3d(1, 1.5, 1);
border: none;
}

.input__field--ichiro:focus
+ .input__label--ichiro
.input__label-content--ichiro,
.input--filled .input__label-content--ichiro {
-webkit-transform: translate3d(0, -2.4em, 0) scale3d(0.8, 0.8, 1);
transform: translate3d(0, -2.4em, 0) scale3d(0.8, 0.8, 1) translateZ(1px);
}

.w3_agileits_contact_grid_right textarea::-webkit-input-placeholder {
color: #212121 !important;
}

.w3_agileits_contact_grid_right input[type="submit"] {
outline: none;
width: 100%;
background: #212121;
color: #fff;
padding: 0.8em 0;
font-size: 1em;
font-weight: bold;
border: none;
text-transform: uppercase;
margin: 1em 0 0;
letter-spacing: 5px;
}

.w3_agileits_contact_grid_right input[type="submit"]:hover {
background: #3399cc;
}

/*-- //contact --*/
/*-- social-icons --*/
.w3_agile_social_icons ul li {
display: inline-block;
}

.icon {
display: inline-block;
vertical-align: top;
overflow: hidden;
width: 35px;
height: 35px;
}

.icon-cube {
position: relative;
-webkit-perspective: 100px;
perspective: 100px;
overflow: visible;
}

/*-- agileits --*/
.icon-cube::before,
.icon-cube::after {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: FontAwesome;
font-size: 1em;
-webkit-transition: all 0.3s;
transition: all 0.3s;
line-height: 2.6em;
}

.icon-cube::before {
z-index: 2;
background-color: #fff;
}

.icon-cube::after {
z-index: 1;
opacity: 0;
-webkit-transform: translateY(25px) rotateX(-90deg);
transform: translateY(25px) rotateX(-90deg);
}

.icon-cube:hover::before {
opacity: 0;
-webkit-transform: translateY(-25px) rotateX(90deg);
transform: translateY(-25px) rotateX(90deg);
}

.icon-cube:hover::after {
opacity: 1;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}

/*-- facebook --*/
/*-- w3layouts --*/
.icon-cube.agile_facebook::before,
.icon-cube.agile_facebook::after {
content: "\f09a";
color: #3b5998;
}

.icon-cube.agile_facebook::after {
background-color: #3b5998;
color: #fff;
}

/*-- rss --*/
.icon-cube.agile_rss::before,
.icon-cube.agile_rss::after {
content: "\f09e";
color: #f26522;
}

.icon-cube.agile_rss::after {
background-color: #f26522;
color: #fff;
}

/*-- instagram --*/
.icon-cube.agile_instagram::before,
.icon-cube.agile_instagram::after {
content: "\f16d";
color: #833ab4;
}

.icon-cube.agile_instagram::after {
background-color: #833ab4;
color: #fff;
}

/*-- t --*/
.icon-cube.agile_t::before,
.icon-cube.agile_t::after {
content: "\f173";
color: #35465c;
}

.icon-cube.agile_t::after {
background-color: #35465c;
color: #fff;
}

/*-- //social-icons --*/
/*-- icons --*/
.codes a {
color: #999;
}

.icon-box {
padding: 8px 15px;
background: rgba(149, 149, 149, 0.18);
margin: 1em 0 1em 0;
border: 5px solid #ffffff;
text-align: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 13px;
cursor: pointer;
}

.icon-box:hover i.fa {
color: #fff !important;
}

.icon-box:hover a.agile-icon {
color: #fff !important;
}

.codes .bs-glyphicons li {
float: left;
width: 12.5%;
height: 115px;
padding: 10px;
line-height: 1.4;
text-align: center;
font-size: 12px;
list-style-type: none;
}

.codes .bs-glyphicons .glyphicon {
margin-top: 5px;
margin-bottom: 10px;
font-size: 24px;
}

.codes .glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
}

.codes .bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
word-wrap: break-word;
}

h4.m-sing {
text-align: left;
}

h3.icon-subheading {
font-size: 28px;
color: #8fa382 !important;
margin: 30px 0 15px;
font-weight: 600;
letter-spacing: 2px;
}

h3.agileits-icons-title {
text-align: center;
font-size: 33px;
color: #222222;
font-weight: 600;
letter-spacing: 2px;
}

.icons a {
color: #999;
}

.icon-box i {
margin-right: 10px !important;
font-size: 20px !important;
color: #282a2b !important;
}

.bs-glyphicons li {
float: left;
width: 18%;
height: 115px;
padding: 10px;
line-height: 1.4;
text-align: center;
font-size: 12px;
list-style-type: none;
background: rgba(149, 149, 149, 0.18);
margin: 1%;
}

.bs-glyphicons .glyphicon {
margin-top: 5px;
margin-bottom: 10px;
font-size: 24px;
color: #282a2b;
}

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
}

.bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
word-wrap: break-word;
}

h3.icon-subheading {
  font-size: 22px;
}

@media (max-width: 768px) {
h3.agileits-icons-title {
  font-size: 28px;
}

h3.icon-subheading {
  font-size: 25px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.icon-box {
  margin: 0;
}
}

@media (max-width: 640px) {
.icon-box {
  float: left;
  width: 50%;
}
}

@media (max-width: 480px) {
.bs-glyphicons li {
  width: 31%;
}
.icon-box {
  float: none;
  width: 100%;
}
}

@media (max-width: 414px) {
h3.agileits-icons-title {
  font-size: 23px;
}

h3.icon-subheading {
  font-size: 18px;
}
.bs-glyphicons li {
  width: 31.33%;
}
}

@media (max-width: 384px) {
.icon-box {
  float: none;
  width: 100%;
}
}

/*-- //icons --*/
.w3_wthree_agileits_icons.main-grid-border {
padding: 5em 0;
}


/*-----Start-responsive-design------*/
@media (max-width: 200px) {
}
@media (max-width: 300px) {
}
@media (max-width: 360px) {
}
@media (max-width: 380px) {
}
@media (max-width: 400px) {
}
@media (max-width: 420px) {
}
@media (max-width: 440px) {
}
@media (max-width: 460px) {
}
@media (max-width: 480px) {
}
@media (max-width: 500px) {
}
@media (max-width: 520px) {
}
@media (max-width: 540px) {
}
@media (max-width: 560px) {
}
@media (max-width: 580px) {
}
@media (max-width: 600px) {
}
@media (max-width: 620px) {
}
@media (max-width: 640px) {
}
@media (max-width: 660px) {
}
@media (max-width: 680px) {
}
@media (max-width: 700px) {
}
@media (max-width: 720px) {
}
@media (max-width: 740px) {
}
@media (max-width: 760px) {
}
@media (max-width: 780px) {
}
@media (max-width: 800px) {
}
@media (max-width: 820px) {
}
@media (max-width: 840px) {
}
@media (max-width: 860px) {
}
@media (max-width: 880px) {
}
@media (max-width: 900px) {
}
@media (max-width: 920px) {
}
@media (max-width: 940px) {
}
@media (max-width: 960px) {
}
@media (max-width: 980px) {
}
@media (max-width: 1000px) {
}

@media (max-width: 1680px) {
}
@media (max-width: 1600px) {
}
@media (max-width: 1440px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1080px) {
#PPMiniCart {
 left: 42% !important;
}

#Awesome h4 {
 padding: 1.9em 0 0;
}

.w3ls_logo_products_left h1 a {
  font-size: 34px;
}

.navbar-nav > li {
  margin-left: 8px;
}

.nav > li > a {
  padding: 10px 8px !important;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 2em;
}

.w3_footer_grid h3 {
  font-size: 1.4em;
}

.products-right {
  padding: 0;
}

.snipcart-details {
  width: 81%;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 2em;
}

.w3_agileits_contact_grid_right {
  padding: 0 2em 0 6em;
}

.agileits_w3layouts_map_pos {
  width: 65%;
}

.about-team-grids {
  width: 24.4%;
}

.about-team-grids h4 {
  font-size: 0.9em;
}

.about-team-grids:hover .caption {
  top: 42.2%;
}

.testi h4 {
  font-size: 1.1em;
}
}

@media (max-width: 1024px) {
}

.w3l_offers {
  width: 52%;
}

.agile-login {
padding: 6px 0;
justify-content:left;
justify-self: left;
align-content: left;
align-self: left;
left:0;
float:left;
text-align:left;
top: -44px;
position: relative;
display: flex;
z-index: 2;
}

.w3ls_logo_products_left h1 a {
font-size: 30px; 
position: relative;
display: block;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
text-align: center;
}

i.fa.fa-phone {
  margin-right: 7px;
  font-size: 15px;
}

ul.phone_email li {
  font-size: 13px;
}

.w3ls_logo_products_left1 {
  margin-top: 0;
  width: 38%;
}

.w3l_search {
  width: 27%;
  margin: 0em 0 0em 0em;
}

.navbar-default .navbar-nav > li > a {
  font-size: 14px;
}

.nav > li > a {
  padding: 10px 2px !important;
}

.navbar-nav > li {
  margin-left: 5px;
}

.navbar {
  min-height: 43px;
  position: relative;
}

.top_brand_left {
  float: left;
  width: 100%;
}

.brands-agile-1 {
  margin: 0;
}

.w3layouts-brand {
  float: left;
  width: 33.33%;
  margin-bottom: 3%;
}

.top_brand_left-1 {
  width: 50%;
  float: left;
  margin-bottom: 3%;
}

.newproducts-w3agile {
  padding: 3em 0 2em;
}

.footer {
padding-top: 8px;
padding-bottom: 1px;
font-size: 12px;
left:0;
padding-left: 10px;
}

.w3_footer_grid {
  float: left;
  width: 50%;
  margin-bottom: 1em;
}

.footer-copy p {
  margin: 1.5em 0 0;
}

.ban-bottom3 {
  margin: 2em 0;
}

.products-left {
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.w3_agileits_contact_grid_right {
  padding: 0 1em 0 1em;
  margin-top: 2em;
}

.agileits_w3layouts_map_pos {
  right: 6%;
  width: 38%;
}

.about-w3imgs {
  float: left;
  width: 33.33%;
}

.about-wthree-grids {
  margin-top: 2em;
}

.about-slid h2 {
  font-size: 2.5em;
}

.about-slid-info {
  width: 100%;
}

.about-team-grids {
margin-left: 16px;
width: 47%;
float: left;
padding: 2em 2em;
margin-bottom: 20px;
}

.login-form-grids {
width: 65%;
}

.login h4 {
font-size: 1.3em;
}

.timetable_sub th,
.timetable_sub td {
font-size: 12px;
}

.checkout-left-basket {
width: 34%;
}

.agileinfo_single_left {
float: left;
width: 40%;
}

.agileinfo_single_right {
padding-left: 2em;
float: left;
width: 60%;
}

.agileinfo_single h2 {
font-size: 1.4em;
}

.w3agile_description p {
font-size: 14px;
width: 100%;
}

.agileinfo_single_right_details {
width: 36% !important;
}

p.w3l-ad {
  width: 80%;
}

.brands {
  padding: 3em 0;
}

.ban-bottom-w3l {
  padding: 3em 0;
}

.brands-agile {
  margin-top: 3em;
}

.grid_3.grid_5 {
  margin-top: 3em;
  padding-top: 10px;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.products {
  padding: 3em 0;
}

ul.paging {
  margin: 2em auto 0;
}

.about,
.about-team,
.contact,
.codes {
  padding: 3em 0;
}

.about-agileinfo {
  margin-top: 3em;
}

.team-agileitsinfo {
  margin-top: 3em;
}

.register {
  padding: 3em 0;
}

.login {
  padding: 3em 0;
}

.checkout {
  padding: 3em 0;
}

@media (max-width: 767px) {
.navbar-nav > li {
  float: none;
  margin-left: 0px;
  text-align: center;
}

.navbar-nav {
  margin: 0;
}

.about,
.about-team,
.contact,
.codes {
  padding: 3em 0;
}

.agileits_w3layouts_map_pos {
  width: 45%;
}

ul.faq {
  margin-top: 3em;
  padding: 0 1.5em;
}

.faq-w3agile {
  padding: 3em 0em;
}

.navbar-nav .open .dropdown-menu {
  background: #fff;
}

.w3l_offers p {
  font-size: 15px;
}

.w3ls_logo_products_left h1 a {
  color: #000;
  float: right;
  right:0;
  top:-100px;
  font-size: 29px;
  padding: 7px;
  position: relative;
  display: flex;
}

.skdslider {
  height: 281px;
}

.snipcart-details {
 width: 80%;
}

.agile_top_brand_left_grid1 h4,
.agileinfo_single_right_snipcart h4 {
  font-size: 0.9em;
}

.value {
  width: 27px;
  height: 27px;
  padding: 8px 0px;
  line-height: 13px;
}

.value-minus,
.value-plus {
  height: 27px;
  line-height: 13px;
  width: 27px;
  font-size: 16px;
}

.agileinfo_single h2 {
  font-size: 1.3em;
}
}

#PPMiniCart form {
  max-height: 165px !important;
}

.agile-login {
  width: 37%;
}

.w3l_offers {
  width: 56%;
}

.agile-login ul li {
  padding: 0em 0.4em;
}

.w3ls_logo_products_left1 {
  width: 100%;
  text-align: center;
}

.w3ls_logo_products_left {
  width: 100%;
  margin: 20px 0;
}


.w3l_search {
  width: 90%;
  position: relative;
  display: contents;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.top_brand_left {
  position: fixed;
  flex:auto;
  display:grid;
  width: 100%;
  margin-inline: 5px;
  background-size: 100% 100%;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  right:0;
  top:0;
  bottom:0;
  text-align: center;
  border: solid 3px #4f8ba9;
  margin-block: 10px;
  border-radius: 10px;
  background-image: url(../images/bg-card.webp);
  object-fit: contain;
  background-repeat: no-repeat;
  box-shadow: -3px 3px 2px #00000063;
}

.snipcart-details input.button {
  width: 100%;
}

.agileits_w3layouts_map_pos {
  width: 51%;
}

.login-form-grids {
  width: 71%;
}

.checkout-left-basket {
  width: 42%;
}

.agileinfo_single h2 {
  font-size: 1.2em;
}

.agileinfo_single_right_details {
  width: 73% !important;
  text-align: left;
}

@media (max-width: 640px) {
#PPMiniCart form {
  max-height: 400px !important;
}

.w3l_offers {
  width: 100%;
  text-align: center;
}

.agile-login {
  width: 38%;
}

.about .grid-top h4 {
  font-size: 1.3em;
}

.about-slid h2 {
  font-size: 2em;
}

.about-slid {
  padding: 4em 0;
}

.about-slid p {
  font-size: 0.9em;
}

.login-form-grids {
  width: 76%;
}

.agileinfo_single_left {
  padding: 1em;
}

.agileinfo_single_right {
  padding-left: 1em;
}
}

@media (max-width: 600px) {
#PPMiniCart form {
  width: 506px !important;
}

#PPMiniCart {
  left: 41% !important;
}

#PPMiniCart ul {
  width: 464px !important;
}

#PPMiniCart form {
  max-height: 210px !important;
}

.agile-login {
  width: 40%;
}

.value-minus,
.value-plus {
  height: 22px;
  width: 22px;
}

.value {
  width: 22px;
  height: 22px;
  line-height: 6px;
}
}

@media (max-width: 568px) {
#PPMiniCart form {
  max-height: 100px !important;
}

.snipcart-details input.button {
  width: 100%;
}

.agile-login {
  width: 100%;
}

.agileits_w3layouts_map_pos {
  width: 100%;
}

.about-team-grids {
  width: 100%;
}

.checkout-left-basket {
  width: 100%;
}

td.invert-image a img {
  width: 100%;
}

.timetable_sub th,
.timetable_sub td {
  width: 50px;
}

.value {
  width: 17px;
  height: 17px;
  line-height: 0px;
}

.value-minus,
.value-plus {
  height: 17px;
  width: 17px;
}

.timetable_sub th,
.timetable_sub td {
  padding: 7px 0px;
}
}

.w3layouts-brand {
  float: left;
  width: 50%;
  margin-bottom: 3%;
}

.nav-tabs > li > a {
  font-size: 14px;
}

.w3l_search input[type="search"] {
  width: 78%;
  height: 34px;
  position: relative;
  display: block;
  left:0;
  right:0;
  color: #000000;
  border: solid 2px #226e94c4;
  box-shadow: -3px 3px 4px #29769cb5;;
  background: #ffffff;
  border-radius: 6px;
  margin-right: 65px;
  text-align: center;
  justify-content: center;
  justify-self: center;
  margin-block: -3px;
}

.agile-login {
  width: 50%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 1.7em;
}

p.w3l-ad {
  width: 100%;
}

.grid_3.grid_5 h5 {
  font-size: 18px;
  background-size: 100% 100%;
  position: relative;
  width: 350px;
  overflow: hidden;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.w3_footer_grid {
  width: 100%;
}

.w3_footer_grid h3 {
  margin-bottom: 1em;
}

.sorting {
  width: 44%;
}

.sorting-left {
  width: 42%;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 1.7em;
}

.agileits_w3layouts_map_pos {
  width: 70%;
}

.login-form-grids {
  width: 90%;
}

.checkout-right-basket {
  margin: 3em 0 0 0em;
}

.agileinfo_single_left {
  width: 100%;
  margin-bottom: 2em;
  padding: 3em 4em;
}

.agileinfo_single_right {
  padding-left: 0em;
  width: 100%;
}

.agile-login {
  width: 61%;
}


.w3ls_logo_products_left {
  margin: 20px 0;
}

.ban-text1 h4 {
  font-size: 16px;
}

.ban-text1 {
  left: 18%;
}

.footer-copy p {
  font-size: 14px;
}

.agileits_w3layouts_map_pos {
  width: 80%;
}

.about-wthree-grids {
  margin-top: 0em;
}

.about .grid-top h4 {
  font-size: 1.1em;
  line-height: 24px;
}

.about .grid-top p {
  font-size: 0.875em;
}

.about-team-grids {
  width: 80%;
}

.login-form-grids {
  padding: 2em;
}

.checkout h2 {
  font-size: 0.95em;
  margin: 0 0 2em;
}

.value-minus,
.value-plus {
  margin: 4px 15px;
  display: inline-block;
}

.value {
  margin: 4px 15px;
  display: inline-block;
}

.quantity-select .entry.value-minus {
  margin-left: 15px;
}

.checkout-left-basket {
  width: 100%;
}

.agileinfo_single_left {
  padding: 2em 2em;
}

@media (max-width: 384px) {
#PPMiniCart form {
  width: 300px !important;
  padding: 10px 10px 40px !important;
}

#PPMiniCart ul {
  width: 278px !important;
}

#PPMiniCart .minicart-remove {
  width: 11px !important;
  height: 11px !important;
  line-height: 0;
  margin: 3px 0 0 !important;
}

#PPMiniCart {
  left: 64% !important;
}

#PPMiniCart .minicart-item a {
  font-size: 13px;
}

#PPMiniCart .minicart-attributes li {
  font-size: 12px;
}

span.minicart-price {
  font-size: 12px;
}

#PPMiniCart .minicart-quantity {
  font-size: 11px;
}

.w3l_offers p {
  font-size: 12px;
}

.w3layouts-foot {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.payment-w3ls {
  width: 100%;
  text-align: center;
}

.payment-w3ls img {
  display: inline-block;
}

.agileits_w3layouts_map_pos {
  width: 90%;
}

.about-slid h2 {
  font-size: 1.5em;
}

.about-slid p {
  font-size: 0.875em;
}

.login-form-grids {
  width: 95%;
}
.checkout h2 {
  font-size: 0.9em;
}
}

@media (max-width: 375px) {
.login-form-grids {
  width: 100%;
}

.checkout h2 {
  font-size: 0.875em;
}

.agileinfo_single_left {
  padding: 1em 1em;
}

.agileinfo_single h2 {
  font-size: 1.1em;
}
}

@media (max-width: 320px) {
#PPMiniCart form {
  width: 285px !important;
}

#PPMiniCart ul {
  width: 263px !important;
}

#PPMiniCart {
  left: 69% !important;
}

#PPMiniCart .minicart-subtotal {
  padding-left: 5px !important;
  font-size: 13px !important;
}

.agile-login {
  width: 79%;
}

.w3l_offers p {
  font-size: 10px;
}

.w3l_offers {
  padding: 9px 0 5px;
}

.w3ls_logo_products_left {
  margin: 3px 0 12px;
}

.w3l_search input[type="search"] {
  width: 83%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 1.4em;
}

.nav-tabs > li > a {
  font-size: 12px;
}

div#myTabContent {
  padding: 20px 20px;
}

p.w3l-ad {
  font-size: 13px;
  line-height: 24px;
}

.ban-text1 h4 {
  font-size: 14px;
}

.ban-text1 {
  left: 17%;
  padding: 8px 18px;
}

.top-brands {
  padding: 2em 0;
}

.grid_3.grid_5 {
  margin-top: 2em;
}

.ban-bottom-w3l {
  padding: 2em 0;
}

.brands {
  padding: 2em 0;
}

.w3layouts-brand {
  width: 46%;
  padding: 0;
  margin: 2%;
}

.brands-agile {
  margin-top: 2em;
}

.newproducts-w3agile {
  padding: 2em 0 1em;
}

.footer-copy p {
  margin: 0 0 0;
}

.footer {
  padding: 2em 0 1.5em;
}

.w3_footer_grid h3 {
  font-size: 1.3em;
}

.w3_footer_grid {
  padding: 0;
}

.sorting-left {
  width: 47%;
  margin-right: 2%;
}

.sorting {
  width: 51%;
}

.products {
  padding: 2em 0;
}

.categories ul.cate,
.new-products-grids {
  padding: 1em;
}

ul.cate ul {
  margin-left: 1.5em;
}

.about,
.about-team,
.contact,
.codes {
  padding: 2em 0;
}

.agileits_w3layouts_map_pos1 {
  padding: 1em;
}

.agileits_w3layouts_map_pos {
  padding: 1em;
}

.agileits_w3layouts_map_pos {
  top: 13%;
}

.agile_map iframe {
  min-height: 430px;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 1.4em;
}

.about-agileinfo {
  margin-top: 2em;
}

.about-wthree-grids {
  padding: 0;
}

.about .grid-top h4 {
  font-size: 1em;
  letter-spacing: 1px;
}

.time-top h4 {
  font-size: 1.5em;
}

.about-slid {
  padding: 3em 0;
}

.about-slid h2 {
  font-size: 1.3em;
}

.about-team-grids {
  width: 100%;
}

.faq-w3agile {
  padding: 2em 0em;
}

ul.faq {
  margin-top: 2em;
  padding: 0 1em;
}

.faq-w3agile .faq li {
  margin-top: 1em;
}

.faq > li > a {
  line-height: 23px;
}

.register {
  padding: 2em 0;
}

.login-form-grids {
  margin: 2em auto 0;
}

.login-form-grids {
  padding: 1.2em;
}

.register-check-box label {
  font-size: 13px;
}

.checkbox {
  padding-left: 30px !important;
}

.login {
  padding: 2em 0;
}

.login p a {
  font-size: 1em;
}

.checkout h2 {
  font-size: 0.875em;
  line-height: 22px;
}

.checkout {
  padding: 2em 0;
}

.value-minus,
.value-plus {
  margin: 4px 10px;
}

.quantity-select .entry.value-minus {
  margin-left: 10px;
}

.value {
  margin: 4px 10px;
}

td.invert-image a img {
  width: 72%;
}

.agileinfo_single h2 {
  font-size: 0.95em;
}

.w3agile_description h4 {
  font-size: 0.875em;
}

.w3agile_description {
  margin: 1em 0;
}

.w3agile_description p {
  font-size: 13px;
}
}




/* Marque Text Berjalan Support Play / Pause, Ketika Di Arahkan Cursor Mouse - Start */
@-webkit-keyframes ticker {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
  }

  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
  }

  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }
}

.ticker-heading {
  position: relative;
  width: 7%;
  background: #5c7db5;
  display: block;
  left: 0;
  top: -2.5px;
  bottom:0;
  z-index: 2;
  color: white;
  font-size: 1.5rem;
  text-align: center;
  justify-content: center;
  justify-self: center;
  border: solid 1px #5c7db5;
}

.ticker-wrap .ticker__item:before {
  content: "";
  height: 11px;
  width: 11px;
  display: inline-block;
  background-color: green;
  border-radius: 100%;
  position: relative;
  margin-right: 65px;
  top: 1.1px;
}

.ticker-heading:after {
  position: relative;
  margin-left: 40px;
}

.ticker-wrap {
  object-fit: contain;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  background-color: #ffffff;
  border: solid 2px #5c7db5;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.ticker-wrap .ticker:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.ticker-wrap .ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 10%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 34s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 1.5rem;
  top: -1.8px;
  font-size: 1.5rem;
  margin-bottom: -20px;
  color: #000;
}
/* Marque Text Berjalan Support Play / Pause, Ketika Di Arahkan Cursor Mouse - End */



/* List Border Dan Layout - Outline Produk - Start */
.layout-border-pencarian {
max-width: 350px;
border: 3px solid #3a7490;
border-radius: 10px;
margin: 3px;
left: 0;
right:0;
float: center;
}
/* List Border Dan Layout - Outline Produk - End */



/* Deskripsi Undangan Tulisan Ngetik Sendiri - Start */
.deskripsi-undangan2 {
line-height: 21px;
font-size: 1.7vh;
font-weight: bold;
padding: 5px;
word-spacing: 0.08rem;
background: #226e94d9;
color: #ffffff;
width: 98%;
height: 100%;
border: solid 2px #226e94;
border-radius: 4px;
box-shadow: -2px 2px 4px #6b675d;
margin-bottom:-50px;
position: relative;
display: block;
justify-self: center;
align-self: center;
align-content: center;
justify-content: center;
text-align: center;
text-decoration: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Deskripsi Undangan Tulisan Ngetik Sendiri - End */


.text-harga-diskon{
font-size: 18px;
margin-bottom: 30px;
}

.text-harga-normal{
font-size: 15px;
}



/* Bottom Navbar Menu - Start */
* {margin: 0%;padding: 0%;}

.clearfix

.w3_footer_grids{
position: relative;
width: 100%;
left:-300px;
}

.logo-gdp-sidebar-menu {
object-fit: contain;
}

.text-header {
border: solid 2px #171717;
border-radius: 10px;
padding: 3px;
width: 320px;
text-align: center;
font-family: "Galada", serif;
box-shadow: 0px 2.2px 2px #b59153;
font-size: 22px;
background: #000;
color: #b59153;
z-index: 999;
margin-top: 15px;
text-align: center;
margin-left: auto;
margin-right: auto;
justify-content: center;
justify-items: center;
align-content: center;
align-self: center;
}

.text-header:hover {
border: solid 2px #171717;
border-radius: 10px;
padding: 3px;
width: 320px;
text-align: center;
font-family: "Galada", serif;
box-shadow: 0px 2.2px 2px #b59153;
font-size: 22px;
background: #000;
color: #fff;
z-index: 999;
margin-top: 15px;
text-align: center;
margin-left: auto;
margin-right: auto;
justify-content: center;
justify-items: center;
align-content: center;
align-self: center;
}

.deskripsi-produk{
color: #000;
width: 100%;
font-size: 12.5px;
font-weight: 600;
}

.nama-produk {
width: 100%;
font-size: 17px;
font-weight: 600;
color: #000;
}


ul li,
ol li {
font-size: 14px;
}

p {
margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: arial;
margin: 0;
font-weight: 700;
}

ul,
label {
margin: 0;
padding: 0;
}

/*-- header --*/
span.glyphicon.glyphicon-shopping-cart.my-cart-icon.my-cart-icon-affix {
position: relative !important;
}

.btn-danger {
color: #fff;
background-color: #3399cc;
border-color: #3399cc;
}

.modal-dialog {
width: 850px;
margin: 75px auto 30px;
}

.snipcart-thumb a {
display: grid;
text-align: center;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;
bottom:0;
position: relative;
}

.my-cart-icon-affix i {
background: #8fa382 !important;
}

i.badge.badge-notify.my-cart-badge {
font-style: normal;
background: #3399cc;
font-size: 14px;
position: absolute;
top: -10px;
right: -22px;
}

.product_list_header span {
font-size: 1em;
color: #fff;
top: 1em;
}

input[type="submit"],
#PPMiniCart .minicart-submit,
.w3ls_vegetables ul li a,
input[type="reset"],
.agileinfo_mail_grid_left ul li a,
.events_bottom_left2 ul li a,
.w3ls_service_grids1_right a,
ul.agileits_social_icons li a,
.w3l_banner_nav_right_banner_pet a,
.w3ls_w3l_banner_nav_right_grid_head_grid ul li a,
.products-breadcrumb ul li a,
.w3_footer_grid ul li a,
.w3l_fresh_vegetables_grid ul li a,
.wthree_footer_copy p a,
.agile_top_brand_left_grid1 .button,
.w3ls_logo_products_left1 ul.special_items li a,
.w3ls_logo_products_left1 ul.phone_email li a {
transition: 0.5s ease-in;
}

button.btn.btn-default.search {
width: 57px;
height: 32px;
background-size: 20px 30px;
background: #000000;
color: #fff;
border-radius: 4px;
position:absolute;
right:0;
padding-right: 52px;
padding-top: 0;
justify-content: center;
justify-self: center;
align-items: center;
align-content: center;
margin-block:-2px;
margin-right: 7px;
}

button.btn.btn-default.search:hover {
background: #1d1d1d;
color: #000;
}

.agile-login {
float: left;
width: 40%;
text-align: center;
padding: 9px 0;
}

.agile-login ul li {
display: inline-block;
padding: 0em 1em;
}

.agile-login ul li a {
font-size: 1em;
text-transform: capitalize;
color: #fff;
text-decoration: none;
border: solid 2px #5c7db5;
border-radius: 5px;
padding: 5px;
background: #000000;
}

.agile-login:hover ul li a {
font-size: 1em;
text-transform: capitalize;
color: #b2ff00;
text-decoration: none;
border: solid 2px #ddd;
border-radius: 5px;
padding: 5px;
background: #000000;
}

.kontak-admin-header{
 position: absolute;
 display: flex;
 font-size: 13px;
 color: #fff;
 width: 108px;
 text-align: center;
 justify-content: center;
 z-index: 9999;
 top: -7.6px;
 left: 35px;
 background: #000000;
 padding: 5.5px;
 border: solid 2px #5c7db5;
 border-radius: 5px;
}

.kontak-admin-header:hover{
 position: absolute;
 display: flex;
 font-size: 13px;
 color: #00ff40;
 width: 108px;
 text-align: center;
 justify-content: center;
 z-index: 9999;
 top: -9px;
 left: 35px;
 background: #000;
 padding: 5.5px;
 border: solid 2px #5c7db5;
 border-radius: 5px;
}

.w3l_search input[type="search"] {
margin-top: 0px;
}

.w3l_search i.fa.fa-search {
  width: 90%;
  position: absolute;
  display: contents;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
}

button.w3l_search {
border: none;
position: absolute;
top: 4px;
right: 11px;
width: 47px;
height: 43px;
outline: none;
box-shadow: none;
background: #00e58b;
padding: 0;
border-radius: inherit;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
transition: 0.5s all;
}

.btn-default:hover {
background-color: #000;
border: none;
}

.cart-wthree .fa {
font-size: 34px;
margin-top: 7px;
}

button.w3view-cart:focus {
outline: none;
}

.logo_products {
position: absolute;
display: block;
}

.w3ls_logo_products_left {float: left;text-align: center;width: 33.33%;}

.w3ls_logo_products_left h1 a {
text-decoration: none;
display: block;
line-height: 1;
}

.w3ls_logo_products_left1 {
float: left;
margin-top: 0.6em;
width: 33.33%;
}

.w3ls_logo_products_left1 ul.phone_email li {display: inline-block;color: #212121;}

/*-- //header --*/
.navbar-default .navbar-nav > li > a {
color: #000;
font-size: 16px;
font-weight: 500;
}

.logo-nav-left1 ul li.active a.act {
color: #000 !important;
}

.multi-column-dropdown li a {
color: #999 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #000 !important;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border: none;
}

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 10px;
border: 1px solid transparent;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
color: #fff;
}

.navbar-default {
background: none;
border: none;
}

.navbar-collapse {
padding: 0;
}

ul.multi-column-dropdown h6 {
font-size: 20px;
color: #8fa382;
margin: 0 0 0em;
padding-bottom: 1em;
border-bottom: 1px solid #e4e4e4;
text-transform: capitalize;
}

.multi-column-dropdown li {
list-style-type: none;
margin: 14px 0;
}

.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #000 !important;
white-space: normal;
font-weight: 500 !important;
}

.dropdown-menu.columns-3 {
min-width: 190px;
padding: 20px 30px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background: none;
border: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
}

.nav > li > a:hover,
.nav > li > a:focus {
background: none;
color: #5590ad !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000;
}

.multi-gd-img img {
width: 100%;
}

.navigation-agileits {
background: #ffffff;
}

.navbar-nav > li {
float: left;
margin-left: 17px;
}

.navbar-nav > li:nth-child(1) {
margin-left: 0px;
}

/*-- banner --*/
.navbar-collapse {
padding: 0;
box-shadow: none;
}

.navbar {
margin-bottom: 0;
border: none;
}

.w3view-cart{
position:absolute;
display:flex;
font-size: 36px;
color: #000;
width: 40px;
height: 59px;
background: #5c7db5;
border: solid 1px #5c7db5;
z-index: 9999;
top: -12%;
padding: 9px;
padding-inline: 2px;
right: -2px;
}

.w3view-cart:hover{
position:absolute;
display:flex;
font-size: 36px;
color: #ffffff;
width: 40px;
height: 59px;
background: #5c7db5;
border: solid 1px #5c7db5;
z-index: 9999;
top: -12%;
padding: 9px;
padding-inline: 2px;
right: -2px;
}


/*-- top-brands --*/
.tag {
position: absolute;
top: -1%;
right: 10%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {position: absolute;display: block;justify-content: center;justify-self: center;align-content: center;align-self: center;left:0;right:0;text-align: center;color: #212121;padding-bottom: 0.5em;font-size: 2.5em;text-transform: uppercase;}

.top-brands h2:after,
.newproducts-w3agile h3:after,
.login h2:after,
.register h2:after,
.faq-w3agile h3:after,
.brands h3:after {
content: "";
position: absolute;
display: contents;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
background: #3399cc;
height: 2px;
width: 15%;
bottom: 0%;
left: 43%;
}

.agile_top_brand_left_grid {
position: relative;
width: 100%;
}

.agile_top_brand_left_grid_pos {
position: relative;
display: block;
top: 0%;
right: 0%;
width: 100%;
z-index: 1;
}

.agile_top_brand_left_grid1 {
position: relative;
display: block;
width: 100%;
height: auto;
top:0;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
}

.agile_top_brand_left_grid1 img {
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
object-fit: contain;
width: 100%;
}

.top-brands {
background-image: url(../images/bg-produk.jpg);
object-fit: contain;
padding: 0;
}

.agile_top_brand_left_grid1 h4,
.agileinfo_single_right_snipcart h4 {
font-weight: 600;
font-size: 1em;
color: #000;
position: relative;
display: block;
left:0;
right:0;
text-align: center;
background: #e8e8e800;
border-radius: 2px;
}

.agile_top_brand_left_grid1 h4 span,
.agileinfo_single_right_snipcart h4 span {
font-weight: 300;
color: #262626;
position: absolute;
display: block;
text-decoration: line-through;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
text-align: center;
left:0;
right:0;
font-weight: 600;
padding: 2px;
}



.snipcart-details input.button {
font-size: 14px;
color: #fff;
background: #000;
text-decoration: none;
position: relative;
border: solid 2px #b59153;
border-radius: 20px;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;bottom:0;
width: 100%;
padding: 5px;
outline: none;
box-shadow: -2px 3px 2px #000;
}

.snipcart-details input.button:hover {
font-size: 14px;
color: #000;
background: #dedbdb;
text-decoration: none;
position: relative;
border: solid 2px #b59153;
border-radius: 20px;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
top:0;
bottom:0;
width: 100%;
padding: 5px;
outline: none;
box-shadow: -2px 3px 2px #000;
}


.column div.agile_top_brand_left_grid {
position: relative;
display: block;
width: 100%;
height: auto;
}

.agile_top_brand_left_grid figure {
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
z-index: 0;
}

/* Shine */
.hover14 figure {position: relative;width: 100%;padding-inline: 0px;}

.hover14 figure::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: "";width: 50%;height: 100%;background: -webkit-linear-gradient(
left,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 100%
);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}

.hover14 figure:hover::before,
.top_brand_left:hover .hover14 figure::before {
-webkit-animation: shine 0.75s;
animation: shine 0.75s;
}

@-webkit-keyframes shine {
100% {
  left: 125%;
}
}

@keyframes shine {
100% {
left: 125%;
}
}

/*-- //top-brands --*/
div#myTabContent {
width: 100%;
}

.nav-tabs > li {
width: 50%;
}

.nav-tabs > li > a {
margin: 0 0px;
padding: 10px 53px;
line-height: 1.42857143;
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-weight: 600;
border: 0px solid transparent;
border-radius: 0px 0px 0 0;
color: #016773;
}

.nav-tabs > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background: #8fa382;
color: #fff;
border: 0px solid transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
background: #8fa382;
border: 0px solid transparent;
}

.nav-tabs {
border-bottom: 1px solid #fff;
}

.grid_3.grid_5 {
width: 350px;
border: 3px solid #3a7490;
background: #ffffffb5;
border-radius: 10px;
margin: 3px;
left: 0;
right:0;
float: center;
}

p.w3l-ad {
font-size: 14px;
color: #777;
width: 42%;
line-height: 28px;
}
.agile_top_brands_grids {
max-width: 100%;
position: relative;
display: block;
}

.hover14.column {
position: relative;
display: contents;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right: 0;
top:0;
bottom:0;
}

.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}

.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before,
.services-grid:hover .hvr-sweep-to-top:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}

.ban-text2 {
position: relative;
top: 14%;
left: 45%;
background: #3399cc;
padding: 1.5em;
border-radius: 60px;
text-align: center;
width: 18%;
}

/*--causel--*/
.carousel-indicators {
position: relative;
bottom: -45px;
left: 48%;
z-index: 15;
width: auto;
padding-left: 0;
margin: 0;
text-align: center;
list-style: none;
}

.carousel-indicators li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
text-indent: -999px;
cursor: pointer;
background-color: #029241;
border: none;
border-radius: 10px;
}

.carousel-indicators .active {
background-color: #fab005;
margin: 0 6px;
}

/*-- footer --*/
.footer {
color: #fff;
background: #000;
}
/*-- //footer --*/

.newproducts-w3agile {
padding: 5em 0;
background: #f5f5f5;
}

.breadcrumb1 li span {
left: 0em;
padding-right: 1em;
color: #00aaff;
}

.breadcrumbs {
padding: 1.5em 0;
background: #f5f5f5;
}

.breadcrumb {
margin-bottom: 0 !important;
padding: 0 !important;
}

.breadcrumb1 li {
font-size: 1.6em;
background: #161313;
padding: 3px;
border-radius: 4px;
border: solid 2px #a6a3a5;
box-shadow: -2.3px 2.3px 3px #00000080;
color: #999;
}

.breadcrumb1 li a {
color: #fff;
text-decoration: none;
}

/*-- login --*/
.login-form-grids {
width: 45%;
padding: 3em;
background: #f7f7f9;
margin: 3em auto 0;
}

.login-form-grids input[type="email"],
.login-form-grids input[type="password"],
.login-form-grids input[type="text"] {
outline: none;
border: 1px solid #dbdbdb;
padding: 10px 10px 10px 10px;
font-size: 14px;
color: #999;
display: block;
width: 100%;
}

.login-form-grids input[type="password"] {
margin: 1em 0 0;
}

.forgot {
margin: 1.5em 0 0;
}

.login-form-grids input[type="submit"] {
outline: none;
border: none;
padding: 10px 0;
font-size: 1em;
color: #fff;
display: block;
width: 100%;
background: #3399cc;
margin: 1.5em 0 0;
}

.login-form-grids ::-webkit-input-placeholder {
color: #999;
}

.forgot a {
color: #212121;
font-size: 14px;
text-decoration: none;
}

.forgot a:hover {
color: #d8703f;
}

.login h4 {
margin: 2em 0 0.5em;
font-size: 1.5em;
color: #212121;
text-align: center;
text-transform: uppercase;
}

.login p {
font-size: 14px;
color: #999;
line-height: 1.8em;
margin: 0;
text-align: center;
}

.login p a {
color: #8fa382;
text-decoration: none;
font-size: 1.2em;
padding: 0 0.5em;
}

.login p a:hover {
color: #212121;
}

.login p a span {
top: 0.1em;
font-size: 0.7em;
left: 0.3em;
}

.login {
padding: 5em 0;
}

/*-- //login --*/
/*-- register --*/
.register {
padding: 5em 0;
}

.login-form-grids h5,
.login-form-grids h6 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
margin: 0 0 2em;
}

.login-form-grids input[type="text"] {
background: url(../images/img-sp.png) no-repeat 5px -259px #fff;
}

.login-form-grids input[type="text"]:nth-child(2) {
background: url(../images/img-sp.png) no-repeat 0px -298px #fff;
margin: 1em 0;
}

.register-check-box label {
font-size: 14px;
font-weight: 500;
color: #999;
margin: 1.5em 0 0 0em;
}

.checkbox {
position: relative;
padding-left: 38px !important;
cursor: pointer;
}

.checkbox i {
position: relative;
bottom: -2px;
left: 0;
display: block;
width: 25px;
height: 25px;
outline: none;
border: 2px solid #ededed;
background: #fff;
}

.checkbox input + i:after,
.radio input + i:after {
position: relative;
opacity: 0;
transition: opacity 0.1s;
}

.checkbox input:checked + i:after,
.radio input:checked + i:after {
opacity: 1;
}

.checkbox input,
.radio input {
position: relative;
left: -9999px;
}

.checkbox input + i:after {
content: "";
background: url("../images/check.png") no-repeat 1px 2px;
top: 0px;
left: 2px;
width: 16px;
height: 16px;
font: normal 12px/16px FontAwesome;
text-align: center;
}

.login-form-grids h6 {
margin: 3em 0 2em !important;
}

.login-form-grids input[type="password"]:nth-child(3) {
margin: 1em 0;
}

.register-home {
margin: 2em 0 0;
text-align: center;
}

.register-home a {
padding: 8px 45px;
background: #9f9f9f;
color: #fff;
font-size: 1em;
text-decoration: none;
}

.register-home a:hover {
background: #8fa382;
}

/*-- //register --*/
/*-- checkout --*/
.checkout h2 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
margin: 0 0 3em;
}

.checkout h2 span {
color: #3399cc;
}

table.timetable_sub {
width: 100%;
margin: 0 auto;
}

.timetable_sub thead {
background: #004284;
}

.timetable_sub th {
background: #8fa382;
color: #fff !important;
text-transform: capitalize;
font-size: 13px;
border-right: 1px solid #8fa382;
}

.timetable_sub th,
.timetable_sub td {
text-align: center;
padding: 7px;
font-size: 14px;
color: #212121;
}

.timetable_sub td {
border: 1px solid #cdcdcd;
}

td.invert-image a img {
width: 30%;
margin: 0 auto;
}

.rem {
position: relative;
}

.close1,
.close2,
.close3 {
background: url("../images/close_1.png") no-repeat 0px 0px;
cursor: pointer;
width: 28px;
height: 28px;
position: relative;
right: 15px;
top: -13px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}

/*-- quantity-starts --*/
.value-minus,
.value-plus {
height: 40px;
line-height: 24px;
width: 40px;
margin-right: 3px;
display: inline-block;
cursor: pointer;
position: relative;
font-size: 18px;
color: #fff;
text-align: center;
border: 1px solid #b2b2b2;
vertical-align: bottom;
}

.quantity-select .entry.value-minus:before,
.quantity-select .entry.value-plus:before {
content: "";
width: 13px;
height: 2px;
background: #000;
left: 50%;
margin-left: -7px;
top: 50%;
margin-top: -0.5px;
position: relative;
}

.quantity-select .entry.value-plus:after {
content: "";
height: 13px;
width: 2px;
background: #000;
left: 50%;
margin-left: -1.4px;
top: 50%;
margin-top: -6.2px;
position: relative;
}

.value {
cursor: default;
width: 40px;
height: 40px;
padding: 8px 0px;
color: #a9a9a9;
line-height: 24px;
border: 1px solid #e5e5e5;
background-color: #e5e5e5;
text-align: center;
display: inline-block;
margin-right: 3px;
}

.quantity-select .entry.value-minus:hover,
.quantity-select .entry.value-plus:hover {
background: #e5e5e5;
}

.quantity-select .entry.value-minus {
margin-left: 0;
}

/*-- quantity-end --*/
.checkout-left-basket h4 {
padding: 1em;
background: #3399cc;
font-size: 1.1em;
color: #fff;
text-transform: uppercase;
text-align: center;
margin: 0 0 1em;
}

.checkout-left {
margin: 2em 0 0;
}

.checkout-left-basket ul li {
list-style-type: none;
margin-bottom: 1em;
font-size: 14px;
color: #999;
}

.checkout-left-basket {
float: left;
width: 25%;
}

.checkout-right-basket {
float: right;
margin: 8em 0 0 0em;
}

.checkout-left-basket ul li span {
float: right;
}

.checkout-left-basket ul li:nth-child(5) {
font-size: 1em;
color: #212121;
font-weight: 600;
padding: 1em 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 2em 0 0;
}

.checkout-right-basket a {
padding: 10px 30px;
color: #fff;
font-size: 1em;
background: #212121;
text-decoration: none;
}

.checkout-right-basket a:hover {
background: #8fa382;
}

.checkout-right-basket a span {
left: -0.5em;
top: 0.1em;
}

.checkout {
padding: 5em 0;
}

/*-- //checkout --*/
/*-- faq --*/
h3.w3ls-title.w3ls-title1 {
text-align: center;
margin: 0 0 1.5em;
font-size: 2.5em;
}

.faq > li > a {
width: 100%;
display: block;
position: relative;
color: #fff;
font-size: 1em;
font-weight: 400;
text-decoration: none;
}

.faq-w3agile .faq li {
margin-top: 2em;
list-style-type: decimal;
padding-left: 0.5em;
}

.faq-w3agile .faq > li > a {
color: #999;
}

.faq-w3agile .faq li li.subitem1 {
display: block;
margin-top: 1em;
}

.faq-w3agile {
padding: 5em 0;
}

ul.faq {
margin-top: 5em;
}

/*-- //faq-page --*/
/*-- single --*/
.agileinfo_single h2 {
font-size: 1.8em;
color: #212121;
line-height: 1.5em;
text-transform: uppercase;
margin-bottom: 1em;
}

.agileinfo_single_left {
padding: 2em;
box-shadow: 0px 0px 5px #b2afaf;
}

/*-- Ratings --*/
.rating1 {
direction: ltr;
}

.starRating:not(old) {
display: inline-block;
height: 17px;
width: 100px;
overflow: hidden;
}

.starRating:not(old) > input {
margin-right: -26%;
opacity: 0;
}

.starRating:not(old) > label {
float: right;
background: url(../images/star.png);
background-size: contain;
margin-right: 2px;
}

.starRating:not(old) > label:before {
content: "";
display: block;
width: 16px;
height: 16px;
background: url(../images/star1.png);
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before {
opacity: 1;
}


/*-- //Ratings --*/
.agileinfo_single_right {
padding-left: 5em;
}

.agileinfo_single_right_snipcart {
margin: 0 0 2em;
}

.agileinfo_single_right_details {
margin: 0 !important;
width: 25% !important;
}

.w3agile_description h4 {
font-size: 1em;
color: #212121;
text-transform: uppercase;
}

.w3agile_description p {
font-size: 14px;
color: #999;
line-height: 2em;
margin: 0.5em 0 0;
width: 80%;
}

.w3agile_description {
margin: 2em 0;
}

.w3ls_w3l_banner_nav_right_grid_popular {
background: #f5f5f5;
padding: 5em 0 !important;
}


/*-- //single --*/
.brands {
padding: 5em 0;
background: #eed3b6;
}

.brands-w3l {
text-align: center;
}

.brands-w3l p a {
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
color: #39c;
background: #fff;
padding: 16px;
display: block;
border: 1px solid #e1e1e1;
}

.brands-w3l p a:hover {
box-shadow: 0 0 6px 1px #b6b6b6;
}

.brands-agile-1 {
margin: 20px 0;
}

.brands-agile {
margin-top: 5em;
}


/*-- products --*/
.products {
padding: 5em 0;
}

.sorting {
float: right;
width: 35%;
}

.sorting-left {
float: right;
margin-right: 2em;
width: 25%;
}

select#country,
select#country1 {
border: 1px solid #212121;
outline: none;
font-size: 14px;
color: #212121;
padding: 0.5em;
width: 100%;
cursor: pointer;
}

.products-right-grids {
margin-bottom: 2em;
}

.numbering {
text-align: right;
}

ul.paging {
margin: 4em auto 0;
}

.paging > .active > a,
.paging > .active > a:hover {
background-color: #ffc229;
border-color: #edb62b;
}

.pagination > li > a {
color: #000000;
}

.categories,
.new-products {
border: 1px solid #999;
}

.categories h2 {
font-size: 1.5em;
color: #212121;
margin: 0;
padding: 0.5em;
background: #f5f5f5;
text-transform: uppercase;
text-align: center;
letter-spacing: 5px;
}

.filter-price h3 {
background: none;
}

.categories ul.cate,
.new-products-grids {
padding: 2em;
}

.categories ul li {
display: block;
color: #999;
font-size: 14px;
margin-bottom: 1em;
}

.categories ul li a {
color: #999;
text-decoration: none;
}

.categories ul li a:hover {
color: #3399cc;
}

.categories ul li span {
float: right;
}

ul.cate ul {
margin-left: 2em;
}

ul.dropdown-menu1 li {
display: block;
font-size: 14px;
}

ul.dropdown-menu1 li a {
color: #212121;
text-decoration: none;
}

input#amount {
outline: none;
margin: 0 auto;
text-align: center;
width: 100%;
}

.new-products-grid-left {
float: left;
width: 35%;
}

.new-products-grid-right {
float: right;
width: 60%;
}

/*-- //products --*/
/*-- about --*/
.about,
.about-team,
.contact,
.codes {
padding: 5em 0;
}

h3.w3_agile_header,
h2.w3_agile_header {
text-align: center;
color: #212121;
padding-bottom: 0.5em;
position: relative;
font-size: 2.5em;
text-transform: uppercase;
}

h3.w3_agile_header:after,
h2.w3_agile_header:after {
content: "";
background: #3399cc;
height: 2px;
width: 15%;
position: relative;
bottom: 0%;
left: 43%;
}

.icons {
margin: 50px 0;
}

.icons:hover {
 color: #fff;
}

.about-agileinfo {
margin-top: 4em;
}

.about .grid-top h4 {
font-size: 1.5em;
color: #222;
letter-spacing: 4px;
}

.about img {
width: 100%;
}

.about-w3imgs {
padding: 0;
overflow: hidden;
}

.about .grid-top p {
font-size: 1em;
color: #999;
line-height: 1.8em;
margin: 1em 0 2.5em;
}

.about .grid-top p.top {
margin: 1em 0;
}

.offic-time {
text-align: center;
}

.time-top {
padding: 1em;
background-color: #8fa382;
}

.time-top h4 {
font-size: 1.7em;
color: #fff;
}

.time-bottom {
padding: 1.6em 2em;
background-color: #212121;
}

.time-bottom h5 {
font-size: 1.1em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
}

.time-bottom p {
font-size: 1em;
color: #bbbbbb;
margin-top: 0.5em;
line-height: 1.8em;
}

/*-- //about-page --*/
.testi {
width: 100%;
margin-top: 3em;
position: relative;
}

.testi h3.w3ls-title1 {
text-align: left;
font-size: 2.5em;
}

.testi h4 {
color: #ffffff;
font-size: 1.4em;
letter-spacing: 1px;
}

.testi p {
font-style: italic;
color: #000;
font-size: 1em;
margin-top: 1em;
line-height: 1.5em;
font-weight: 300;
}

.testi-subscript p {
margin: 1em 2.8em 0 0;
}

.testi p a {
font-size: 1em;
font-weight: 600;
color: #000;
margin: 0 5px;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.testi p a:hover {
color: #fff;
}

.testi-subscript {
position: relative;
display: inline-block;
}

.testi span.w3-agilesub {
position: relative;
background: url(../images/icon3.png) no-repeat 0px 0px;
display: block;
width: 30px;
height: 29px;
top: 0%;
right: 0%;
}

.testi-slider {
padding: 4em 2em 3em;
background: #3399cc;
margin-top: 2em;
}

/*-- slider start here --*/
#slider3,
#slider4 {
margin: 0 auto;
}

.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0, 0, 0, 0.25);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}

.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}

.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}

.rslides_tabs li:first-child {
margin-left: 0;
}

.rslides_tabs .rslides_here a {
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: bold;
}

.events {
list-style: none;
}

.callbacks_container {
float: left;
width: 100%;
}

.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.callbacks li {
position: relative;
width: 100%;
left: 0;
top: 0;
}

.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}

.callbacks_nav {
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 15%;
right: 0%;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 30px;
width: 25px;
background: url("../images/icon1.png") no-repeat center center;
}

.callbacks_nav:active {
opacity: 1;
}

.callbacks_nav.next {
right: 7%;
background: url("../images/icon2.png") no-repeat center center;
}

#slider3-pager a,
#slider4-pager a {
display: inline-block;
}

#slider3-pager span,
#slider4-pager span {
float: left;
}

#slider3-pager span,
#slider4-pager span {
width: 100px;
height: 15px;
background: #fff;
display: inline-block;
border-radius: 30em;
opacity: 0.6;
}

#slider3-pager .rslides_here a,
#slider4-pager .rslides_here a {
background: #fff;
border-radius: 30em;
opacity: 1;
}

#slider3-pager a,
#slider4-pager a {
padding: 0;
}

#slider3-pager li,
#slider4-pager li {
display: inline-block;
}

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
position: relative;
display: block;
float: left;
}

.rslides img {
height: auto;
border: 0;
width: 100%;
}

.callbacks_tabs a {
font-size: 30px;
color: #70664c;
font-weight: 600;
padding: 0px 18px;
background: rgba(222, 208, 157, 0.89);
}

.callbacks_here a:after {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

.callbacks_tabs a:hover,
.callbacks_tabs a:active {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

.callbacks_tabs a:after {
color: black;
text-decoration: none;
background: rgba(245, 179, 3, 0.56);
}

li.callbacks1_s1.callbacks_here a.callbacks1_s1:after,
li.callbacks1_s1.callbacks_here a.callbacks1_s1:active {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

li.callbacks1_s1.callbacks_here a.callbacks1_s1:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s4.active,
a.callbacks1_s4:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s2.active,
a.callbacks1_s2:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

a.callbacks1_s3.active,
a.callbacks1_s3:focus {
color: black;
background: rgba(245, 179, 3, 0.79);
text-decoration: none;
outline: none;
}

/*--//slider end here--*/
/*-- about-slid --*/
.about-slid {
background: url(../images/22.jpg) no-repeat 0px center fixed;
background-size: cover;
text-align: center;
padding: 6em 0;
}

.about-slid-info {
width: 75%;
margin: 0 auto;
}

.about-slid h2 {
color: #fff;
font-size: 3.5em;
font-family: "Abel", sans-serif;
}

.about-slid p {
color: #fff;
font-size: 1em;
margin-top: 2em;
line-height: 1.8em;
}

/*-- team-agileitsinfo --*/
.team-agileitsinfo {
margin-top: 4em;
}

.about-team-grids {
background: #3399cc;
padding: 2em 1em;
margin-left: 5px;
width: 24.5%;
}

.about-team-grids img {
width: 100%;
}

.about-team-grids h4 {
color: #000;
font-size: 1.1em;
margin: 1.5em 0 0.5em;
}

.about-team-grids h4 span {
font-size: 1.3em;
color: #000;
margin-right: 10px;
}

.team-w3lstext h6 {
color: #67686b;
font-size: 16px;
font-weight: 400;
margin: 0;
letter-spacing: 0px;
}

.about-team-grids p {
color: #fff;
font-size: 14px;
line-height: 1.8em;
font-weight: 400;
margin-top: 1em;
}

.about-grid1 .thumb .caption {
float: left;
width: 100%;
height: 70px;
position: relative;
left: 0;
bottom: 0;
padding: 13px 30px;
text-align: center;
background-color: rgba(81, 92, 142, 0.55);
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.about-grid1 .thumb:hover .caption {
height: 100%;
padding: 40px 30px;
opacity: 1;
visibility: visible;
}

.caption {
opacity: 0;
top: 0%;
position: relative;
background-color: rgba(51, 153, 204, 0.58);
width: 100%;
left: 0;
text-align: center;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.social-icons ul li {
display: inline-block;
font-size: inherit;
text-align: center;
margin: 0;
}

.social-icons ul li a.fa {
font-size: 1em;
color: #fff;
line-height: 2.6em;
}

.social-icons.caption ul li a.fa {
margin: 0 0.5em;
line-height: inherit;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
}

.about-team-grids:hover .caption {
display: block;
top: 49.2%;
opacity: 1;
}

.caption ul {
padding: 1em 0;
}

.caption ul li a:hover {
color: #000;
}

/*-- contact --*/
.agile_map iframe {
width: 100%;
min-height: 580px;
}

.w3_agileits_contact_grid_left {
padding: 0;
position: relative;
}

.agileits_w3layouts_map_pos {
position: relative;
right: -15%;
top: 22%;
width: 50%;
padding: 2em;
background: #3399cc;
}

.agileits_w3layouts_map_pos h3 {
font-size: 1.5em;
color: #212121;
}

.agileits_w3layouts_map_pos p {
color: #fff;
line-height: 2em;
margin: 0.5em 0 1.5em;
font-weight: 600;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li {
list-style-type: none;
margin-bottom: 1em;
color: #fff;
font-weight: 600;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li i {
padding-right: 1em;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li a {
color: #fff;
text-decoration: none;
}

.agileits_w3layouts_map_pos ul.wthree_contact_info_address li a:hover {
color: #212121;
}

.w3_agile_social_icons_contact ul li a {
text-align: center;
}

.agileits_w3layouts_map_pos1 {
padding: 2em;
border: 3px double #fff;
}

.w3_agileits_contact_grid_right {
padding: 0 4em 0 12em;
}

.w3_agileits_contact_grid_right form {
padding: 1em 0 0;
}

/*-- effect --*/
.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 0;
max-width: 100%;
width: calc(100% - 0em);
vertical-align: top;
}

.input__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-size: 14px;
}

.input__field:focus {
outline: none;
}

.input__label {
display: inline-block;
padding: 0 1em;
width: 40%;
color: #212121;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.input__label-content {
position: relative;
display: block;
padding: 1em 0;
width: 100%;
}

/* Ichiro */
.input--ichiro {
margin-top: 2em;
}

.input__field--ichiro {
position: relative;
top: 4px;
left: 4px;
z-index: 100;
display: block;
padding: 0 1em;
width: calc(100% - 8px);
height: calc(100% - 8px);
background: #fff;
color: #212121;
opacity: 0;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}

.input__label--ichiro {
width: 100%;
text-align: left;
cursor: text;
}

.input__label--ichiro::before {
content: "";
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f5f5f5;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
border: 1px solid #e4e4e4;
}

.input__label-content--ichiro {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__field--ichiro:focus,
.input--filled .input__field--ichiro {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

.input__field--ichiro:focus + .input__label--ichiro,
.input--filled .input__label--ichiro {
cursor: default;
pointer-events: none;
}

.input__field--ichiro:focus + .input__label--ichiro::before,
.input--filled .input__label--ichiro::before {
-webkit-transform: scale3d(1, 1.5, 1);
transform: scale3d(1, 1.5, 1);
border: none;
}

.input__field--ichiro:focus
+ .input__label--ichiro
.input__label-content--ichiro,
.input--filled .input__label-content--ichiro {
-webkit-transform: translate3d(0, -2.4em, 0) scale3d(0.8, 0.8, 1);
transform: translate3d(0, -2.4em, 0) scale3d(0.8, 0.8, 1) translateZ(1px);
}

.w3_agileits_contact_grid_right textarea::-webkit-input-placeholder {
color: #212121 !important;
}

.w3_agileits_contact_grid_right input[type="submit"] {
outline: none;
width: 100%;
background: #212121;
color: #fff;
padding: 0.8em 0;
font-size: 1em;
font-weight: bold;
border: none;
text-transform: uppercase;
margin: 1em 0 0;
letter-spacing: 5px;
}

.w3_agileits_contact_grid_right input[type="submit"]:hover {
background: #3399cc;
}

/*-- //contact --*/
/*-- social-icons --*/
.w3_agile_social_icons ul li {
display: inline-block;
}

.icon {
display: inline-block;
vertical-align: top;
overflow: hidden;
width: 35px;
height: 35px;
}

.icon-cube {
position: relative;
-webkit-perspective: 100px;
perspective: 100px;
overflow: visible;
}

/*-- agileits --*/
.icon-cube::before,
.icon-cube::after {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: FontAwesome;
font-size: 1em;
-webkit-transition: all 0.3s;
transition: all 0.3s;
line-height: 2.6em;
}

.icon-cube::before {
z-index: 2;
background-color: #fff;
}

.icon-cube::after {
z-index: 1;
opacity: 0;
-webkit-transform: translateY(25px) rotateX(-90deg);
transform: translateY(25px) rotateX(-90deg);
}

.icon-cube:hover::before {
opacity: 0;
-webkit-transform: translateY(-25px) rotateX(90deg);
transform: translateY(-25px) rotateX(90deg);
}

.icon-cube:hover::after {
opacity: 1;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}

/*-- facebook --*/
/*-- w3layouts --*/
.icon-cube.agile_facebook::before,
.icon-cube.agile_facebook::after {
content: "\f09a";
color: #3b5998;
}

.icon-cube.agile_facebook::after {
background-color: #3b5998;
color: #fff;
}

/*-- rss --*/
.icon-cube.agile_rss::before,
.icon-cube.agile_rss::after {
content: "\f09e";
color: #f26522;
}

.icon-cube.agile_rss::after {
background-color: #f26522;
color: #fff;
}

/*-- instagram --*/
.icon-cube.agile_instagram::before,
.icon-cube.agile_instagram::after {
content: "\f16d";
color: #833ab4;
}

.icon-cube.agile_instagram::after {
background-color: #833ab4;
color: #fff;
}

/*-- t --*/
.icon-cube.agile_t::before,
.icon-cube.agile_t::after {
content: "\f173";
color: #35465c;
}

.icon-cube.agile_t::after {
background-color: #35465c;
color: #fff;
}

/*-- //social-icons --*/
/*-- icons --*/
.codes a {
color: #999;
}

.icon-box {
padding: 8px 15px;
background: rgba(149, 149, 149, 0.18);
margin: 1em 0 1em 0;
border: 5px solid #ffffff;
text-align: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 13px;
cursor: pointer;
}

.icon-box:hover i.fa {
color: #fff !important;
}

.icon-box:hover a.agile-icon {
color: #fff !important;
}

.codes .bs-glyphicons li {
float: left;
width: 12.5%;
height: 115px;
padding: 10px;
line-height: 1.4;
text-align: center;
font-size: 12px;
list-style-type: none;
}

.codes .bs-glyphicons .glyphicon {
margin-top: 5px;
margin-bottom: 10px;
font-size: 24px;
}

.codes .glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
}

.codes .bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
word-wrap: break-word;
}

h4.m-sing {
text-align: left;
}

h3.icon-subheading {
font-size: 28px;
color: #8fa382 !important;
margin: 30px 0 15px;
font-weight: 600;
letter-spacing: 2px;
}

h3.agileits-icons-title {
text-align: center;
font-size: 33px;
color: #222222;
font-weight: 600;
letter-spacing: 2px;
}

.icons a {
color: #999;
}

.icon-box i {
margin-right: 10px !important;
font-size: 20px !important;
color: #282a2b !important;
}

.bs-glyphicons li {
float: left;
width: 18%;
height: 115px;
padding: 10px;
line-height: 1.4;
text-align: center;
font-size: 12px;
list-style-type: none;
background: rgba(149, 149, 149, 0.18);
margin: 1%;
}

.bs-glyphicons .glyphicon {
margin-top: 5px;
margin-bottom: 10px;
font-size: 24px;
color: #282a2b;
}

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #777;
}

.bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
word-wrap: break-word;
}

h3.icon-subheading {
  font-size: 22px;
}

@media (max-width: 768px) {
h3.agileits-icons-title {
  font-size: 28px;
}

h3.icon-subheading {
  font-size: 25px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.icon-box {
  margin: 0;
}
}

@media (max-width: 640px) {
.icon-box {
  float: left;
  width: 50%;
}
}

@media (max-width: 480px) {
.bs-glyphicons li {
  width: 31%;
}
.icon-box {
  float: none;
  width: 100%;
}
}

@media (max-width: 414px) {
h3.agileits-icons-title {
  font-size: 23px;
}

h3.icon-subheading {
  font-size: 18px;
}
.bs-glyphicons li {
  width: 31.33%;
}
}

@media (max-width: 384px) {
.icon-box {
  float: none;
  width: 100%;
}
}

/*-- //icons --*/
.w3_wthree_agileits_icons.main-grid-border {
padding: 5em 0;
}


/*-----Start-responsive-design------*/
@media (max-width: 200px) {
}
@media (max-width: 300px) {
}
@media (max-width: 360px) {
}
@media (max-width: 380px) {
}
@media (max-width: 400px) {
}
@media (max-width: 420px) {
}
@media (max-width: 440px) {
}
@media (max-width: 460px) {
}
@media (max-width: 480px) {
}
@media (max-width: 500px) {
}
@media (max-width: 520px) {
}
@media (max-width: 540px) {
}
@media (max-width: 560px) {
}
@media (max-width: 580px) {
}
@media (max-width: 600px) {
}
@media (max-width: 620px) {
}
@media (max-width: 640px) {
}
@media (max-width: 660px) {
}
@media (max-width: 680px) {
}
@media (max-width: 700px) {
}
@media (max-width: 720px) {
}
@media (max-width: 740px) {
}
@media (max-width: 760px) {
}
@media (max-width: 780px) {
}
@media (max-width: 800px) {
}
@media (max-width: 820px) {
}
@media (max-width: 840px) {
}
@media (max-width: 860px) {
}
@media (max-width: 880px) {
}
@media (max-width: 900px) {
}
@media (max-width: 920px) {
}
@media (max-width: 940px) {
}
@media (max-width: 960px) {
}
@media (max-width: 980px) {
}
@media (max-width: 1000px) {
}

@media (max-width: 1680px) {
}
@media (max-width: 1600px) {
}
@media (max-width: 1440px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1080px) {
#PPMiniCart {
 left: 42% !important;
}

#Awesome h4 {
 padding: 1.9em 0 0;
}

.w3ls_logo_products_left h1 a {
  font-size: 34px;
}

.navbar-nav > li {
  margin-left: 8px;
}

.nav > li > a {
  padding: 10px 8px !important;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 2em;
}

.w3_footer_grid h3 {
  font-size: 1.4em;
}

.products-right {
  padding: 0;
}

.snipcart-details {
  width: 81%;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 2em;
}

.w3_agileits_contact_grid_right {
  padding: 0 2em 0 6em;
}

.agileits_w3layouts_map_pos {
  width: 65%;
}

.about-team-grids {
  width: 24.4%;
}

.about-team-grids h4 {
  font-size: 0.9em;
}

.about-team-grids:hover .caption {
  top: 42.2%;
}

.testi h4 {
  font-size: 1.1em;
}
}

@media (max-width: 1024px) {
}

.w3l_offers {
  width: 52%;
}

.agile-login {
padding: 6px 0;
justify-content:left;
justify-self: left;
align-content: left;
align-self: left;
left:0;
float:left;
text-align:left;
top: -44px;
position: relative;
display: flex;
z-index: 2;
}

.w3ls_logo_products_left h1 a {
font-size: 30px; 
position: relative;
display: block;
justify-content: center;
justify-self: center;
align-content: center;
align-self: center;
left:0;
right:0;
text-align: center;
}

i.fa.fa-phone {
  margin-right: 7px;
  font-size: 15px;
}

ul.phone_email li {
  font-size: 13px;
}

.w3ls_logo_products_left1 {
  margin-top: 0;
  width: 38%;
}

.w3l_search {
  width: 27%;
  margin: 0em 0 0em 0em;
}

.navbar-default .navbar-nav > li > a {
  font-size: 14px;
}

.nav > li > a {
  padding: 10px 2px !important;
}

.navbar-nav > li {
  margin-left: 5px;
}

.navbar {
  left:0;
  right:0;
  display: sticky;
  width: 350px;
  height: 55px;
  margin-inline: 5px;
  position: fixed;
  min-height: 43px;
  border: solid 2px #4182a2;
  box-shadow: 0 4px 3px #005272;
  z-index: 9999999;
}

.top_brand_left {
  float: left;
  width: 100%;
}

.agile_top_brand_left_grid1 img {
  width: 140px;
  max-height: 140px;
  margin-top: 6px;
  border: solid 2px #005272;
  border-radius: 8px;
}

.brands-agile-1 {
  margin: 0;
}

.w3layouts-brand {
  float: left;
  width: 33.33%;
  margin-bottom: 3%;
}

.top_brand_left-1 {
  width: 50%;
  float: left;
  margin-bottom: 3%;
}

.newproducts-w3agile {
  padding: 3em 0 2em;
}

.footer {
padding-top: 8px;
padding-bottom: 90px;
font-size: 12px;
width: 350px;
left:0;
right:0;
justify-content: center;
justify-self: center;
border: solid 2px #fff;
padding-left: 10px;
border-radius: 20px 20px 0px 0px;
}

.w3_footer_grid {
  float: left;
  width: 50%;
  margin-bottom: 1em;
}

.footer-copy p {
  margin: 1.5em 0 0;
}

.ban-bottom3 {
  margin: 2em 0;
}

.products-left {
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.w3_agileits_contact_grid_right {
  padding: 0 1em 0 1em;
  margin-top: 2em;
}

.agileits_w3layouts_map_pos {
  right: 6%;
  width: 38%;
}

.about-w3imgs {
  float: left;
  width: 33.33%;
}

.about-wthree-grids {
  margin-top: 2em;
}

.about-slid h2 {
  font-size: 2.5em;
}

.about-slid-info {
  width: 100%;
}

.about-team-grids {
margin-left: 16px;
width: 47%;
float: left;
padding: 2em 2em;
margin-bottom: 20px;
}

.login-form-grids {
width: 65%;
}

.login h4 {
font-size: 1.3em;
}

.timetable_sub th,
.timetable_sub td {
font-size: 12px;
}

.checkout-left-basket {
width: 34%;
}

.agileinfo_single_left {
float: left;
width: 40%;
}

.agileinfo_single_right {
padding-left: 2em;
float: left;
width: 60%;
}

.agileinfo_single h2 {
font-size: 1.4em;
}

.w3agile_description p {
font-size: 14px;
width: 100%;
}

.agileinfo_single_right_details {
width: 36% !important;
}

p.w3l-ad {
  width: 80%;
}

.brands {
  padding: 3em 0;
}

.ban-bottom-w3l {
  padding: 3em 0;
}

.brands-agile {
  margin-top: 3em;
}

.grid_3.grid_5 {
  position: relative;
  display: block;
  margin-top: 2em;
  padding-top: 10px;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.products {
  padding: 3em 0;
}

ul.paging {
  margin: 2em auto 0;
}

.about,
.about-team,
.contact,
.codes {
  padding: 3em 0;
}

.about-agileinfo {
  margin-top: 3em;
}

.team-agileitsinfo {
  margin-top: 3em;
}

.register {
  padding: 3em 0;
}

.login {
  padding: 3em 0;
}

.checkout {
  padding: 3em 0;
}

@media (max-width: 767px) {
.navbar-nav > li {
  float: none;
  margin-left: 0px;
  text-align: center;
}

.navbar-nav {
  margin: 0;
}

.about,
.about-team,
.contact,
.codes {
  padding: 3em 0;
}

.agileits_w3layouts_map_pos {
  width: 45%;
}

ul.faq {
  margin-top: 3em;
  padding: 0 1.5em;
}

.faq-w3agile {
  padding: 3em 0em;
}

.navbar-nav .open .dropdown-menu {
  background: #fff;
}

.w3l_offers p {
  font-size: 15px;
}

.w3ls_logo_products_left h1 a {
  color: #000;
  float: right;
  right:0;
  top:-100px;
  font-size: 29px;
  padding: 7px;
  position: relative;
  display: flex;
}

.snipcart-details {
 width: 80%;
}

.agile_top_brand_left_grid1 h4,
.agileinfo_single_right_snipcart h4 {
  font-size: 0.9em;
}

.value {
  width: 27px;
  height: 27px;
  padding: 8px 0px;
  line-height: 13px;
}

.value-minus,
.value-plus {
  height: 27px;
  line-height: 13px;
  width: 27px;
  font-size: 16px;
}

.agileinfo_single h2 {
  font-size: 1.3em;
}
}

#PPMiniCart form {
  max-height: 165px !important;
}

.agile-login {
  width: 37%;
}

.w3l_offers {
  width: 56%;
}

.agile-login ul li {
  padding: 0em 0.4em;
}

.w3ls_logo_products_left1 {
  width: 100%;
  text-align: center;
}

.w3ls_logo_products_left {
  width: 100%;
  margin: 20px 0;
}


.w3l_search {
  width: 90%;
  position: relative;
  display: contents;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.top_brand_left {
  position: fixed;
  flex:auto;
  display:grid;
  width: 100%;
  margin-inline: 5px;
  background-size: 100% 100%;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  right:0;
  top:0;
  bottom:0;
  text-align: center;
  border: solid 3px #005272;
  margin-block: 5.5px;
  border-radius: 10px;
  background-image: url(../images/bg-card.webp);
  object-fit: contain;
  background-repeat: no-repeat;
  box-shadow: 0px 3px 0px #b59153;
}

.snipcart-details input.button {
  width: 100%;
}

.agileits_w3layouts_map_pos {
  width: 51%;
}

.login-form-grids {
  width: 71%;
}

.checkout-left-basket {
  width: 42%;
}

.agileinfo_single h2 {
  font-size: 1.2em;
}

.agileinfo_single_right_details {
  width: 73% !important;
  text-align: left;
}

@media (max-width: 640px) {
#PPMiniCart form {
  max-height: 400px !important;
}

.w3l_offers {
  width: 100%;
  text-align: center;
}

.agile-login {
  width: 38%;
}

.about .grid-top h4 {
  font-size: 1.3em;
}

.about-slid h2 {
  font-size: 2em;
}

.about-slid {
  padding: 4em 0;
}

.about-slid p {
  font-size: 0.9em;
}

.login-form-grids {
  width: 76%;
}

.agileinfo_single_left {
  padding: 1em;
}

.agileinfo_single_right {
  padding-left: 1em;
}
}

@media (max-width: 600px) {
#PPMiniCart form {
  width: 506px !important;
}

#PPMiniCart {
  left: 41% !important;
}

#PPMiniCart ul {
  width: 464px !important;
}

#PPMiniCart form {
  max-height: 210px !important;
}

.agile-login {
  width: 40%;
}

.value-minus,
.value-plus {
  height: 22px;
  width: 22px;
}

.value {
  width: 22px;
  height: 22px;
  line-height: 6px;
}
}

@media (max-width: 568px) {
#PPMiniCart form {
  max-height: 100px !important;
}

.snipcart-details input.button {
  width: 100%;
}

.agile-login {
  width: 100%;
}

.agileits_w3layouts_map_pos {
  width: 100%;
}

.about-team-grids {
  width: 100%;
}

.checkout-left-basket {
  width: 100%;
}

td.invert-image a img {
  width: 100%;
}

.timetable_sub th,
.timetable_sub td {
  width: 50px;
}

.value {
  width: 17px;
  height: 17px;
  line-height: 0px;
}

.value-minus,
.value-plus {
  height: 17px;
  width: 17px;
}

.timetable_sub th,
.timetable_sub td {
  padding: 7px 0px;
}
}

.w3layouts-brand {
  float: left;
  width: 50%;
  margin-bottom: 3%;
}

.nav-tabs > li > a {
  font-size: 14px;
}

.w3l_search input[type="search"] {
  width: 78%;
  height: 34px;
  position: absolute;
  display: block;
  left:0;
  right:0;
  color: #000000;
  border: solid 2px #226e94c4;
  background: #ffffff;
  border-radius: 6px;
  margin-right: 65px;
  text-align: center;
  justify-content: center;
  justify-self: center;
  margin-block: -3px;
}

.agile-login {
  width: 50%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 1.7em;
}

p.w3l-ad {
  width: 100%;
}

.grid_3.grid_5 h5 {
  font-size: 18px;
  background-size: 100% 100%;
  position: relative;
  width: 350px;
  overflow: hidden;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.w3_footer_grid {
  width: 100%;
}

.w3_footer_grid h3 {
  margin-bottom: 1em;
}

.sorting {
  width: 44%;
}

.sorting-left {
  width: 42%;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 1.7em;
}

.agileits_w3layouts_map_pos {
  width: 70%;
}

.login-form-grids {
  width: 90%;
}

.checkout-right-basket {
  margin: 3em 0 0 0em;
}

.agileinfo_single_left {
  width: 100%;
  margin-bottom: 2em;
  padding: 3em 4em;
}

.agileinfo_single_right {
  padding-left: 0em;
  width: 100%;
}

.agile-login {
  width: 61%;
}


.w3ls_logo_products_left {
  margin: 20px 0;
}

.ban-text1 h4 {
  font-size: 16px;
}

.ban-text1 {
  left: 18%;
}

.footer-copy p {
  font-size: 14px;
}

.agileits_w3layouts_map_pos {
  width: 80%;
}

.about-wthree-grids {
  margin-top: 0em;
}

.about .grid-top h4 {
  font-size: 1.1em;
  line-height: 24px;
}

.about .grid-top p {
  font-size: 0.875em;
}

.about-team-grids {
  width: 80%;
}

.login-form-grids {
  padding: 2em;
}

.checkout h2 {
  font-size: 0.95em;
  margin: 0 0 2em;
}

.value-minus,
.value-plus {
  margin: 4px 15px;
  display: inline-block;
}

.value {
  margin: 4px 15px;
  display: inline-block;
}

.quantity-select .entry.value-minus {
  margin-left: 15px;
}

.checkout-left-basket {
  width: 100%;
}

.agileinfo_single_left {
  padding: 2em 2em;
}

@media (max-width: 384px) {
#PPMiniCart form {
  width: 300px !important;
  padding: 10px 10px 40px !important;
}

#PPMiniCart ul {
  width: 278px !important;
}

#PPMiniCart .minicart-remove {
  width: 11px !important;
  height: 11px !important;
  line-height: 0;
  margin: 3px 0 0 !important;
}

#PPMiniCart {
  left: 64% !important;
}

#PPMiniCart .minicart-item a {
  font-size: 13px;
}

#PPMiniCart .minicart-attributes li {
  font-size: 12px;
}

span.minicart-price {
  font-size: 12px;
}

#PPMiniCart .minicart-quantity {
  font-size: 11px;
}

.w3l_offers p {
  font-size: 12px;
}

.w3layouts-foot {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.payment-w3ls {
  width: 100%;
  text-align: center;
}

.payment-w3ls img {
  display: inline-block;
}

.agileits_w3layouts_map_pos {
  width: 90%;
}

.about-slid h2 {
  font-size: 1.5em;
}

.about-slid p {
  font-size: 0.875em;
}

.login-form-grids {
  width: 95%;
}
.checkout h2 {
  font-size: 0.9em;
}
}

@media (max-width: 375px) {
.login-form-grids {
  width: 100%;
}

.checkout h2 {
  font-size: 0.875em;
}

.agileinfo_single_left {
  padding: 1em 1em;
}

.agileinfo_single h2 {
  font-size: 1.1em;
}
}

@media (max-width: 320px) {
#PPMiniCart form {
  width: 285px !important;
}

#PPMiniCart ul {
  width: 263px !important;
}

#PPMiniCart {
  left: 69% !important;
}

#PPMiniCart .minicart-subtotal {
  padding-left: 5px !important;
  font-size: 13px !important;
}

.agile-login {
  width: 79%;
}

.w3l_offers p {
  font-size: 10px;
}

.w3l_offers {
  padding: 9px 0 5px;
}

.w3ls_logo_products_left {
  margin: 3px 0 12px;
}

.w3l_search input[type="search"] {
  width: 83%;
}

.top-brands h2,
.newproducts-w3agile h3,
.login h2,
.register h2,
.faq-w3agile h3,
.brands h3 {
  font-size: 1.4em;
}

.nav-tabs > li > a {
  font-size: 12px;
}

div#myTabContent {
  padding: 20px 20px;
}

p.w3l-ad {
  font-size: 13px;
  line-height: 24px;
}

.ban-text1 h4 {
  font-size: 14px;
}

.ban-text1 {
  left: 17%;
  padding: 8px 18px;
}

.top-brands {
  padding: 2em 0;
}

.grid_3.grid_5 {
  margin-top: 2em;
}

.ban-bottom-w3l {
  padding: 2em 0;
}

.brands {
  padding: 2em 0;
}

.w3layouts-brand {
  width: 46%;
  padding: 0;
  margin: 2%;
}

.brands-agile {
  margin-top: 2em;
}

.newproducts-w3agile {
  padding: 2em 0 1em;
}

.footer-copy p {
  margin: 0 0 0;
}

.footer {
  padding: 2em 0 1.5em;
}

.w3_footer_grid h3 {
  font-size: 1.3em;
}

.w3_footer_grid {
  padding: 0;
}

.sorting-left {
  width: 47%;
  margin-right: 2%;
}

.sorting {
  width: 51%;
}

.products {
  padding: 2em 0;
}

.categories ul.cate,
.new-products-grids {
  padding: 1em;
}

ul.cate ul {
  margin-left: 1.5em;
}

.about,
.about-team,
.contact,
.codes {
  padding: 2em 0;
}

.agileits_w3layouts_map_pos1 {
  padding: 1em;
}

.agileits_w3layouts_map_pos {
  padding: 1em;
}

.agileits_w3layouts_map_pos {
  top: 13%;
}

.agile_map iframe {
  min-height: 430px;
}

h3.w3_agile_header,
h2.w3_agile_header {
  font-size: 1.4em;
}

.about-agileinfo {
  margin-top: 2em;
}

.about-wthree-grids {
  padding: 0;
}

.about .grid-top h4 {
  font-size: 1em;
  letter-spacing: 1px;
}

.time-top h4 {
  font-size: 1.5em;
}

.about-slid {
  padding: 3em 0;
}

.about-slid h2 {
  font-size: 1.3em;
}

.about-team-grids {
  width: 100%;
}

.faq-w3agile {
  padding: 2em 0em;
}

ul.faq {
  margin-top: 2em;
  padding: 0 1em;
}

.faq-w3agile .faq li {
  margin-top: 1em;
}

.faq > li > a {
  line-height: 23px;
}

.register {
  padding: 2em 0;
}

.login-form-grids {
  margin: 2em auto 0;
}

.login-form-grids {
  padding: 1.2em;
}

.register-check-box label {
  font-size: 13px;
}

.checkbox {
  padding-left: 30px !important;
}

.login {
  padding: 2em 0;
}

.login p a {
  font-size: 1em;
}

.checkout h2 {
  font-size: 0.875em;
  line-height: 22px;
}

.checkout {
  padding: 2em 0;
}

.value-minus,
.value-plus {
  margin: 4px 10px;
}

.quantity-select .entry.value-minus {
  margin-left: 10px;
}

.value {
  margin: 4px 10px;
}

td.invert-image a img {
  width: 72%;
}

.agileinfo_single h2 {
  font-size: 0.95em;
}

.w3agile_description h4 {
  font-size: 0.875em;
}

.w3agile_description {
  margin: 1em 0;
}

.w3agile_description p {
  font-size: 13px;
}
}




/* Marque Text Berjalan Support Play / Pause, Ketika Di Arahkan Cursor Mouse - Start */
@-webkit-keyframes ticker {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
  }

  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
  }

  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }
}

.ticker-heading {
  position: absolute;
  width: 7%;
  background: #5c7db5;
  display: block;
  left: 0;
  top: -2.5px;
  bottom:0;
  z-index: 2;
  color: white;
  font-size: 1.5rem;
  text-align: center;
  justify-content: center;
  justify-self: center;
  border: solid 1px #5c7db5;
}

.ticker-wrap .ticker__item:before {
  content: "";
  height: 11px;
  width: 11px;
  display: inline-block;
  background-color: green;
  border-radius: 100%;
  position: relative;
  margin-right: 65px;
  top: 1.1px;
}

.ticker-heading:after {
  position: relative;
  margin-left: 40px;
}

.ticker-wrap {
  object-fit: contain;
  position: relative;
  display: block;
  width: 350px;
  margin-inline: 5px;
  overflow: hidden;
  text-align: center;
  justify-content: center;
  justify-self: center;
  align-content: center;
  align-self: center;
  background-color: #ffffff;
  border: solid 2px #5c7db5;
  box-shadow: 0 3px 3px #005272;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.ticker-wrap .ticker:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.ticker-wrap .ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 10%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 34s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 1.5rem;
  top: -1.8px;
  font-size: 1.5rem;
  margin-bottom: -20px;
  color: #000;
}
/* Marque Text Berjalan Support Play / Pause, Ketika Di Arahkan Cursor Mouse - End */



/* List Border Dan Layout - Outline Produk - Start */
.layout-border-pencarian {
max-width: 350px;
border: 3px solid #3a7490;
border-radius: 10px;
margin: 3px;
left: 0;
right:0;
float: center;
}
/* List Border Dan Layout - Outline Produk - End */



/* Deskripsi Undangan Tulisan Ngetik Sendiri - Start */
.deskripsi-undangan2 {
line-height: 21px;
font-size: 1.7vh;
font-weight: bold;
padding: 5px;
word-spacing: 0.08rem;
background: #000;
color: #ffffff;
width: 97%;
height: 100%;
border: solid 2px #b59153;
border-radius: 8px;
box-shadow: -3px 3px 2px #2c3336;
margin-bottom:-50px;
position: relative;
display: block;
justify-self: center;
align-self: center;
align-content: center;
justify-content: center;
text-align: center;
text-decoration: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Deskripsi Undangan Tulisan Ngetik Sendiri - End */


.text-harga-diskon{
font-size: 18px;
margin-bottom: 30px;
}

.text-harga-normal{
font-size: 15px;
}



/* Bottom Navbar Menu - Start */
.container-navbar {
position: fixed;
width: 100%;
background: #4e89a6;
border-radius: 80px 80px 0px 0px;
border: solid 3px #ccccccb0;
padding-top: 40px;
box-sizing: border-box;
box-shadow: 0px 0px 30px 0px rgb(0 50 255);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
}

.container-navbar::after {
content: '';
left: 50%;
top: -14px;
width: 45px;
height: 4px;
background: rgba(0,0,0,.2);
position: relative;
transform: translate(-50%);
border-radius: 20px;
}

.container-navbar p {
width: 70%;
padding-top: 20px;
font-size: .8rem;
text-align: center;
font-weight: 500;
opacity: .7;
}

.container-navbar img {
width: 75%;
}

.container-navbar button {
padding: 12px 30px;
background: rgb(232, 76, 79);
color: #fff;
border: 0px;
margin-top: 20px;
border-radius: 17px;
}

.container-navbar::before {
content: '';
left: 0px;
bottom: -150px;
width: 100%;
height: 150px;
background: #fff;
position: relative;
}

.bottom-navbar {
position: fixed;
bottom: 0px;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
background: #4088ab;
border: solid 3px #ffffff33;
border-radius: 30px 30px 0px 0px;
padding: 10px 0px;
box-shadow: 0px -5px 8px #00070af7;
z-index: 9;
}

.bottom-navbar button {
width: 50px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
color: #fff;
background: transparent;
transition: all .25s ease;
border-radius: 10px 0px 10px 0px;
box-shadow: 3px 3px #000;
border: solid 2px #ffffff;
background: #000000;
}

.bottom-navbar button:hover {
width: 50px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
color: #0093ff;
background: transparent;
transition: all .15s ease;
border-radius: 10px 0px 10px 0px;
box-shadow: 3px 3px #000;
border: solid 2px #22ed00;
background: #000000;
}



.bottom-navbar button:active:not(.float) {
transform: scale(1.2);
}

.bottom-navbar button.float {
margin-top: -35px;
background: rgb(0 0 0);
border: solid 5px #4088ab;
box-shadow: 5px 5px #000000;
color: #fff;
border-radius: 15px 15px 0px;
height: 60px;
width: 60px;
}

button.float:hover {

background: rgb(255 255 255);
border: solid 5px #4088ab;
box-shadow: 5px 5px #000000;
color: #000;
border-radius: 15px 15px 0px;
height: 60px;
width: 60px;
}

.bottom-navbar button.active {
color: rgb(37 255 0);
border-radius: 10px 0px 10px 0px;
box-shadow: 3px 3px #000;
border: solid 2px #22ee00;
background: #000000;
}
.bottom-navbar button i {
font-size: 1.5rem;
pointer-events: none;
}

.con-effect {
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}

.effect {
width: 50px;
height: 50px;
position: relative;
left: 13px;
border-radius: 100px;
}
/* Bottom Navbar Menu - End */