body, h1, h2, h3, h4, h5, h6, input {
  font-family: 'Open Sans', sans-serif;
}

.bold { font-weight: bold!important; }
.uppercase { text-transform: uppercase; }
.green { color: #00c493!important; }
.red { color: #DB2828!important; }
.canceled { text-decoration: line-through; }
.no-padding-top { padding-top: 0!important; }
.no-padding-bottom { padding-bottom: 0!important; }
.no-padding { padding: 0!important; }
.no-margin { margin: 0; }
.no-margin-bottom { margin-bottom: 0!important; }
.text-left { text-align: left!important; }

.custom-dropdown-area {
  width: 100%;
}

.custom-dropdown-options {
  border-radius: 0;
  padding: 0;
}

.custom-dropdown-options li {
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}

.custom-dropdown-options li:hover {
  background-color: #dddddd;
}

.custom-dropdown-options li.selected:after {
  content: '\f00c';
  float: right;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 0.7rem;
  line-height: 1.2rem;
}

table td.collapsing, table th.collapsing {
  white-space: nowrap;
  width: 1px;
}

table tbody tr:nth-child(even) {
  /*background-color: rgba(0, 196, 147, 0.06);*/
  background-color: #f8f8f8;
}

input, textarea {
  border-radius: 0!important;
  box-shadow: none!important;
}

@media screen and (min-width: 40em) {
  .reveal.small {
    max-height: 85%;
  }
}

input + small {
  display: block;
  margin-bottom: 1rem;
  margin-top: -1rem;
}

main a {
  color: #00c493;
}

main a:hover {
  color: #007A5B;
}

main a.blue {
  color: #009cde;
}

main a.blue:hover {
  color: #005ea6; /*0070ba*/
}

h5 + small {
  display: block;
  margin-top: -0.7rem;
}

small + form {
  margin-top: 1rem;
}

/*
-------------------
MENU DO TOPO (REDES SOCIAIS, MINHA CONTA, BUSCA)
-------------------
*/
.top-menu {
  background-color: #00c493;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  text-transform: uppercase; 
}

.top-menu .social-items {
  margin-top: 0.5rem;
}

.top-menu a {
  margin-right: 0.3rem;
}

.top-menu, .top-menu a {
  color: #ffffff;
}

.top-menu form, .top-menu input {
  display: inline;
}

.top-menu input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline;
    font-size: 0.8rem;
    height: 1.7rem;
    margin: 0.2rem 0.5rem 0.2rem 1.5rem;
    width: 50%;
}

.top-menu a:hover, .top-menu button:hover {
  color: #007A5B;
}

.login-wrapper {
  /*background-color: #f00;*/
  cursor: pointer;
  display: inline;
  padding: 0.8rem;
  position: relative;
  text-align: left;
  z-index: 2;
}

.login-wrapper:hover > .login-box {
  display: block;
}

.login-wrapper .login-box {
  /*background-color: #f00;*/
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  width: 17rem;
}

.login-wrapper .login-box input {
    display: block;
    margin: 0;
    width: 100%;
}

.login-wrapper .login-box label {
  font-size: 0.8rem;
}

.login-wrapper .help-text {
  margin-top: 0.5rem;
  text-align: center;
}

.login-wrapper .login-box button:hover {
  color: #ffffff;
}

/*
-------------------
MENU PRINCIPAL & LOGO
-------------------
*/
.main-menu {
  /*background-color: #f4f4f4;*/
  padding: 1.5rem 0;
}

.bag-wrapper {
  position: relative;
}

.bag-wrapper .bag-label {
  background-color: #00c493;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 2px 6px;
  position: absolute;
  right: 9px;
  text-transform: uppercase;
  top: 0px;
}

.bag-button {
  background-color: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 500em;
  color: #333333;
  display: block;
  font-size: 1.6rem;
  height: 4rem;
  line-height: 3.6rem;
  text-align: center;
  width: 4rem;
}

.bag-button:hover {
  color: #00c493;
}

.menu-wrapper {
  clear: right;
  display: table;
  width: 100%;
}

.menu a {
  border-bottom: 1px solid #dcdcdc;
  color: #333333;
  font-size: 0.74rem;
  font-weight: bold;
  text-transform: uppercase;
}

.menu a:hover, .sub.menu a:hover {
  color: #00c493;
}

.sub.menu  a {
  border: none;
  color: #656464;
  font-size: 0.7rem;
  font-weight: normal;
  text-transform: uppercase;
}

/*
-------------------
CARROUSEL DE DESTAQUES
-------------------
*/

.orbit-bullets {
  bottom: 0;
  margin: 0;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  position: absolute;
  width: 100%;
}

.orbit-bullets:hover {
  background-color: hsla(0, 0%, 4%, 0.5);
}

.orbit-bullets button {
  background-color: #f4f4f4;
  height: 0.7rem;
  width: 0.7rem;
}

.orbit-bullets button.is-active, .orbit-bullets button:hover {
  background-color: #00c493;
}

.orbit-caption {
  display: none;
}

.orbit-next, .orbit-previous {
  border-radius: 500em;
  margin: 0 1rem;
  padding: 1rem 1.15rem;
}

/*
-------------------
CATEGORIAS EM DESTAQUE
-------------------
*/
.featured-category {
  background: #000;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  margin: 2rem 0;
  position: relative;
}

.featured-category a {
    background: transparent;
    height: 100%;
    position: absolute;
    width: 100%;
}

.featured-category .header {
  background: hsla(0, 0%, 4%, 0.5);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
  background: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
  bottom: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  padding: 1rem;
  position: absolute;
  text-transform: uppercase;
  width: 100%;
}

.featured-category .sub-header {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  margin-top: -0.5rem;
}

.featured-category .icon {
  font-weight: normal;
  margin-top: -0.75rem;
  position: absolute;
  right: 1rem;
  top: 50%;
}

.category-1 { background-image: url('../imagens/categorias/bikinis.jpg') }
.category-2 { background-image: url('../imagens/categorias/onepieces.jpg') }
.category-3 { background-image: url('../imagens/categorias/playsuits.jpg') }
.category-4 { background-image: url('../imagens/categorias/accessories.jpg') }

/*
-------------------
DIVISOR
-------------------
*/
.divider {
  margin-bottom: 2rem;
  position: relative;
}

.divider::before {
  border-bottom: 1px solid #bfbfbf;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
}

.divider span {
  background-color: #ffffff;
  color: #00c493;
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 9rem;
}

/*
-------------------
PRODUTOS
-------------------
*/
.large-3.product {
  width: 20%;
}

.product h4 {
  color: #656464;
  font-size: 0.8rem;
  margin-top: 0.6rem;
  text-transform: uppercase;
}

.product h4:hover {
  color: #00c493;
}

.product img {
  border: 0;
  height: 15rem;
  min-width: 100%;
}

.price {
  background-color: #f0f0f0;
  color: #333;
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.1rem 0;
  text-align: center;
  width: 48.5%;
}

.buy-btn {
  color: #00c493;
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.1rem 0;
  text-align: center;
  text-transform: uppercase;
  width: 48.5%;
}

.buy-btn i {
  margin-right: 0.4rem;
}

.buy-btn:hover {
  background-color: #00c493;
  color: #ffffff;
}

.columns.product {
  padding-bottom: 1.7031rem;
}

main.with-list ~ .footer {
  /*margin-top: 10rem;*/
  margin-top: 0.2969rem;
}

/*
-------------------
RODAPE
-------------------
*/
.footer {
  background-color: #00c493;
  color: #ffffff;
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-transform: uppercase;
}

.footer .menu > li > a, .footer a {
  border: none;
  color: #ffffff;
  display: inline-block;
  padding: 0.3rem 0;
}

.footer .menu > li > a:hover, .footer a:hover {
  color: #007A5B;
}

.copyrights {
  margin-top: 1.5rem;
}

.footer, .footer .menu > li > a {
  font-size: 0.8rem;
}

.footer p {
  margin-bottom: 0;
}

.footer .social a, .footer .payment-methods i {
  font-size: 1.3rem;
  margin-right: 0.3rem;
}

.footer .header {
  margin-bottom: 0.4rem;
}

.footer .payment-methods span {
  display: inline-block;
  padding: 0 0.2rem 0.2rem 0;
}

/*
-------------------
MENU LATERAL & LOGIN
-------------------
*/
.sidebar {
  font-size: 0.9rem;
}

.menu .title {
  color: #333333;
  text-transform: uppercase;
  border-bottom: 1px solid #333333;
  padding-bottom: 0.4rem;
}

.sidebar .menu a {
  color: #656464;
  font-weight: normal;
  padding-left: 0;
  text-transform: none;
}

.menu.vertical li:last-of-type > a {
  border: none;
}

.sidebar .menu a:hover {
  color: #00c493;
}

.login-box {
  background-color: #00c493;
  margin-top: 1rem;
  padding: 0.5rem 0.7rem;
}

.login-box, .login-box a, .login-box label, .login-box h4 {
  color: #ffffff;
  font-size: 0.9rem;
}

.login-box .password {
  margin-bottom: 0.5rem;
}

.login-box h4 {
  text-transform: uppercase;
}

.login-box a {
  font-size: 0.7rem;
  font-style: normal;
}

.login-box a:hover {
  color: #007A5B;
}

.login-box input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.7rem;
  height: 1.7rem;
  margin-bottom: 0rem;
}

.login-box input.is-invalid-input:not(:focus) {
  background-color: #fefefe;
  border: 1px solid #c60f13;
}

.login-box p {
  font-size: 0.7rem;
  line-height: 1.0rem;
  margin-bottom: 0rem;
}

.login-box button {
  background-color: #333;
  border: 1px solid transparent;
  border-radius: 0;
  margin-top: 0.5rem;
  padding: 0.4rem;
  text-transform: uppercase;
  width: 100%;
}

.login-box button:hover {
  background-color: transparent;
  border: 1px solid #333;
  color: #333!important;
}

.login-box p ~ form {
  margin-top: 1rem;
}

.login-box .divider {
  margin-bottom: 1.5rem;
  margin-top: 0.8rem;
}

.login-box .divider::before {
  border-color: #ffffff;
}

/*
-------------------
DETALHES
-------------------
*/
.breadcrumbs {
  font-size: 0.8rem;
  margin-bottom: 0;
}

h3.product-name {
  text-transform: uppercase;
}

.featured-price {
  margin-top: -0.6rem;
}

.product-img {
  max-height: 16rem;
  width: 100%;
}

.secondary-picture {
  cursor: pointer;
}

.product-infos .buy-btn, .bill .buy-btn {
  background-color: #00c493;
  border: 1px solid transparent;
  border-radius: 0;
  color: #ffffff;
  display: block;
  line-height: inherit;
  margin-top: 1rem;
  padding: 0.5rem;
  width: 100%;
}

.reveal .bill, .reveal .bill .buy-btn {
  margin-top: 0;
}

.product-infos .buy-btn:not(.disabled):hover, .bill .buy-btn:not(.disabled):hover {
  background-color: transparent;
  border: 1px solid #00c493;
  color: #00c493;
}

.product-infos .buy-btn.disabled, .bill .buy-btn.disabled {
  background-color: rgba(0, 196, 147, 0.4);
  cursor: default;
}

.product-infos .buy-btn.grey, .bill .buy-btn.grey {
  background-color: #aaa;
}

.product-infos .buy-btn.grey:hover, .bill .buy-btn.grey:hover {
  background-color: transparent;
  border: 1px solid #aaa;
  color: #aaa;
}

.product-infos .buy-btn.blue, .bill .buy-btn.blue {
  background-color: #009cde;
}

.product-infos .buy-btn.blue:hover, .bill .buy-btn.blue:hover {
  background-color: transparent;
  border: 1px solid #009cde;
  color: #009cde;
}

.product-infos table {
  /*width: 30%;*/
}

.product-infos table, .product-infos table th, .product-infos table td {
  text-align: center;
}

.product-infos table thead tr:first-of-type th {
  border-bottom: 1px solid #f1f1f1;
}

/*.product-infos table tbody tr td, .product-infos table thead tr th {*/
.product-infos table tbody tr td {
  border-right: 1px solid #f1f1f1;
}

/*.product-infos table tbody tr td:last-of-type, .product-infos table thead tr th:last-of-type {*/
.product-infos table tbody tr td:last-of-type {
  border-right: none;
}

.product-infos .custom-dropdown-options li.disabled::after {
  content: 'Out of Stock';
  float: right;
}

.details {
  margin-top: 1rem;
}

.details p {
  color: #777;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  text-align: justify;
}

.details p a {
  color: #777;
}

.details p a:hover, .details p a:active {
  color: #00c493;
}

.divider.detail {
  margin-bottom: 0;
  margin-top: 1rem;
}

.divider.without-margin {
  margin: 0;
}

.divider.dashed::before {
  border-bottom: 1px dashed #bfbfbf;
}

.actions {
  margin-top: 1rem;
}

.actions.menu a {
  border: none;
}

.btn {
  background-color: #00c493;
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  text-transform: uppercase;
}
.btn:hover {
  background-color: transparent;
  border: 1px solid #00c493;
  color: #00c493;
}

/*
-------------------
COMENTARIOS
-------------------
*/
.comment {
  color: #777;
  font-size: 0.7rem;
}

.comment h6 {
  color: #555;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

/*
-------------------
RODAPE FIXO
-------------------
*/
body {
  display:flex;
  flex-direction:column;
  height: auto;
  min-height:100vh;
}
main {
  flex: 1 0 auto;
}

/*
-------------------
CARRINHO DE COMPRAS
-------------------
*/
.shopping-bag, .shopping-bag input {
  font-size: 0.8rem;
}

.shopping-bag thead tr, .shopping-bag tfoot td {
  color: #555;
  text-transform: uppercase;
}

.shopping-bag input {
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  width: 5rem;
}

.shopping-bag .unit-price {
  font-weight: bold;
  text-align: center;
}

.basic-btn {
  color: #00c493;
  margin-right: 0.7rem;
  text-transform: uppercase;
}

.basic-btn:hover {
  color: #007A5B;
}

.basic-btn::last-of-type {
  margin-right: 0;
}

.shopping-bag .title {
  text-align: right;
}

.shopping-bag .total-price {
  text-align: center;
}

.shopping-bag-action, .shopping-bag-action input {
  font-size: 0.8rem;
}

.shopping-bag-action input {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.shopping-bag-action label {
  color: #555;
}

.shopping-bag-action small {
  display: block;
}

.shopping-bag-action .basic-btn {
  margin-right: 0;
  margin-top: 0.5rem;
}

.shopping-bag-action {
  margin: 1rem 0;
}

.bill {
  margin-top: 1rem;
}

.bill-item {
  color: #aaa;
  font-size: 0.7rem;
  margin-bottom: 0;
}

.bill-details {
  padding-top: 0.7rem;
}

.shopping-bag-action .custom-dropdown-area {
  margin: 1rem 0 0.5rem 0;
}
.shopping-bag-action .custom-dropdown-area, .shopping-bag-action .custom-dropdown-area button {
  text-align: left!important;
}

/*
-------------------
FAQS
-------------------
*/
.accordion-title {
  color: #333333;
  font-weight: bold;
  text-transform: uppercase;
}

.accordion-title:focus, .accordion-title:hover {
  background-color: #f8f8f8;
  color: #333333;
}

.accordion-content {
  font-size: 0.8rem;
}

.faqs h5{
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/*
-------------------
CHECKOUT PASSOS
-------------------
*/
.steps {
  background-color: #efefef;
  color: #777;
  font-size: 0.8rem;
}

.steps h3, .steps p {
  margin-bottom: 0;
}

.steps h3 {
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase;
}

.step {
  padding: 1rem!important;
  padding-left: 1.7rem!important;
  position: relative;
}

.step::before {
  content: '';
}

.step::after {
  content: '';
}

.step.active {
  background-color: #00c493;
  color: #ffffff;
}

.step span {
  background-color: #efefef;
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 2rem;
}

.step.active span::after {
  border-bottom: 2.5rem solid transparent;
  border-left: 2rem solid #00c493;
  border-top: 2.6rem solid transparent;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.step.active span::before {
  border-bottom: 2.5rem solid transparent;
  border-left: 2rem solid transparent;
  border-top: 2.6rem solid transparent;
}

.step span::before {
  border-bottom: 2.5rem solid transparent;
  border-left: 2rem solid #ffffff;
  border-top: 2.6rem solid transparent;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.step span::after {
  border-bottom: 2.5rem solid transparent;
  border-left: 2rem solid #efefef;
  border-top: 2.6rem solid transparent;
  content: '';
  display: block;
  position: absolute;
  right: 3px;
  top: 0;
}

.step.active.completed span::before {
  background-color: #00c493;
  border-left: 2rem solid #ffffff;
}

.step.active.completed span::after {
  right: 3px;
}

/*
-------------------
CHECKOUT FORMULARIOS
-------------------
*/
.checkout-forms h5 {
  color: #555;
}

.checkout-forms label {
  text-transform: uppercase;
}

.checkout-forms, .checkout-forms label, .checkout-forms input, .checkout-forms p {
  font-size: 0.8rem;
}

.checkout-forms input {
  border-radius: 0;
  box-shadow: none;
}

.checkout-forms p {
  margin-bottom: 0.1rem;
}

.checkout-forms p + h5 {
  margin-top: 2rem;
}

.checkout-forms .form {
  padding: 3rem 3rem 2rem 3rem;
}

.checkout-forms .basic-btn {
  font-style: normal;
}

.required::after {
	margin: -.2em 0 0 .2em;
  content: '*';
  color: #DB2828;
}

.error {
  font-size: 0.7rem;
}

/*
-------------------
ZOOM (MAGNIFY)
-------------------
*/
.magnify-lens, .lens-mobile {
  background-color: #ffffff!important;
}

.magnify-mobile {
  z-index: 3;
}

/*
-------------------
AREA CLIENTE
-------------------
*/
.my-account-column {
  width: 29.16%;
}

.client-area, .client-area input, .client-area textarea {
  font-size: 0.8rem!important;
}

.client-area label {
  text-transform: uppercase;
}

.client-area a ~ a {
  margin-left: 1rem;
}

.client-area tfoot {
  background: #ffffff;
  border: none;
}

.client-area tfoot td {
  font-weight: normal;
  padding-top: 0;
  padding-bottom: 0;
}

.client-area tfoot tr:first-of-type td {
  padding-top: 1rem;
} 

/*
-------------------
PAGINACAO
-------------------
*/
.pagination-wrapper {
  text-align: center;
}

.pagination {
  border-radius: 0;
}

.pagination input {
  font-size: 0.7rem;
  height: 2rem;
  line-height: 2rem;
  width: 10rem;
}

.pagination a, .pagination a.disabled, 
.pagination a:hover, .pagination a:active, .pagination a.disabled:hover, 
.pagination a.disabled:active,
.pagination a:focus, .pagination a:visited, .pagination a.disabled:focus, 
.pagination a.disabled:visited {
  background-image: none;
  border-radius: 0;
  height: 2rem;
  line-height: 2rem;
  padding: 0;
  width: 2rem;
}

.pagination a.disabled {
  background-color: #fafafa;
  color: #cccccc;
}

.pagination a:active, .pagination a:focus {
  background-color: #f3f3f3;
  color: #555;
}

.pagination a:active, .pagination a:focus {
  color: #555;
}

main .pagination a:hover {
  color: #555;
}

/*.pagination a {
  background: none;
  background-color: #00c493;
}

.pagination a.disabled {
  background: none;
  background-color: rgba(0, 196, 147, 0.4);
}*/






/*
--------------------------------------
--------------------------------------
--------------------------------------
IE 9
--------------------------------------
--------------------------------------
--------------------------------------
*/
.top-menu .social-items { margin-top: 0.7rem \ ; }
.top-menu input, .login-box input { height: 2.1rem \ ; }
.input-group-button,  .input-group-field, .input-group-label { display: block \ ; }

/*
--------------------------------------
--------------------------------------
--------------------------------------
IE 10 AND 11 LAYOUT CORRECTIONS
--------------------------------------
--------------------------------------
--------------------------------------
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body { flex: 1; }
  html {
    display: flex;
    flex-direction: column;
  }
  .top-menu .social-items { margin-top: 0.6rem; }
	.top-menu input, .login-box input { height: 2rem; }
}

/*
--------------------------------------
--------------------------------------
--------------------------------------
FIREFOX
--------------------------------------
--------------------------------------
--------------------------------------
*/
@-moz-document url-prefix() {
  .step.active span::before { border-bottom: 2.6rem solid transparent; }
}