/* ---------------------------------------------------------------------- */
/*	Reset & Clearfix (normalize.css v3.0.2)
/* ---------------------------------------------------------------------- */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

.clearfix:before, .clearfix:after {display: table;content: " ";}
.clearfix:after {clear: both;}
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}

*,:before,:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
table td{vertical-align: top;}

/* ---------------------------------------------------------------------- */
/*	Basic Elements & Classes
/* ---------------------------------------------------------------------- */

html{height:100%;}
body {
	background: #FFF;
	color: #333;
	font:13px/1.7 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	height:100%;
	width:100%;
	overflow-x:hidden;
}

::-moz-selection { background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none; }
::selection { background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none; }

a{color:#4E4D4D; transition:all 0.6s ease 0s; text-decoration:none; }
h1, h1 a {text-transform: none; font-weight: 300; font-size:50px; line-height: 120%; text-align: center; font-family: 'Abril Fatface', cursive;}
h2, h2 a {font-weight: 300; text-transform: none; font-size: 30px; text-align: left; margin: 0px 0px 20px 0px; color: #363636;}
h3, h3 a{color: #363636; font-size: 14px; font-weight: normal;  margin: 5px 0px; text-transform: none; line-height: 140%; letter-spacing: 1px}

h4, h4 a{color: #363636; font-size: 22px; font-weight: normal;  margin: 40px 0 35px 0; text-transform: none; line-height: 140%; font-family: 'Abril Fatface', cursive; letter-spacing: 1px; position: relative;}
h4:before{content: "";
    background: #333;
    width: 12px;
    height: 1px;
    position: absolute;
    bottom: 0;}
h5, h5 a {font-size:14px; text-transform:uppercase; margin:10px 0px 0px 0px; font-weight:400;}

.wrapper, .main {width: 1200px; max-width: 100%; margin: 0px auto; position: relative;}
.full {width: 100%;}
.no-margin{margin: 0px;}
.no-padding{padding:0px;}
.center{text-align: center;}
.margin-top{margin-top: 40px;}
.margin-bottom{margin-bottom: 40px;}

/* ---------------------------------------------------------------------- */
/*	GRID
/* ---------------------------------------------------------------------- */

.row {margin: 0 0 1.25em;}
.row:last-child {margin-bottom: 0;}
div[class*="col-"] {float: left; padding: .75em;}
div[class*="col-"] img{max-width: 100%; max-height: 100%;}

@media all and (min-width: 37em) {
  .col-2-3 {width: 66.66%;}
  .col-1-2 {width: 50%;}
  .col-1-3 {width: 33.33%;}
  .col-1-3:nth-child(3n+1){clear:left}
  .col-1-4 {width: 25%;}
  .col-1-4:nth-child(4n+1){clear:left}
  .col-3-4 {width: 75%;}
  .col-1-5 {width: 20%;}
  .col-1-5:nth-child(5n+1){clear:left}
  .col-1-8 {width: 12.5%;}
}


/* ---------------------------------------------------------------------- */
/*	Header
/* ---------------------------------------------------------------------- */
header{text-align:center; padding: 20px 0px; border-bottom: 1px solid rgb(238, 238, 238);}
header nav {text-align: center; position: absolute; left: 0px; top: 30px;}
header nav .menu {display: none;}
header nav ul {display: inline-block; margin:0px; padding: 0; list-style: none; float: right;}
header nav li {margin: 0 20px; position: relative; float: left;}
header nav li a {color: #151515; text-transform: uppercase; float: left; font-weight: bold; font-size: 14px;}
header nav li.active > a {color: #1AA97f;}



header nav ul ul {display:none; width: 400px; margin: 0; padding: 20px; text-align: left; position: absolute; top: 64px; left: -20px; z-index: 99999; background: #fff; border: 3px solid #f1f1f1}

header  ul.store-submenu li {display: block; padding: 14px 0px; float: left; width: 50%; margin: 0px;}
header  ul.store-submenu li a {font-size: 13px; float: none;}

ul.store-submenu>li:before {
    content: "";
    background: #333;
    width: 12px;
    height: 1px;
    position: absolute;
    bottom: 14px;
}


.has-submenu:after {content: "\f3d0"; margin-left: 10px; font-family: Ionicons; font-weight: bold; pointer-events: none;}
.mobile-submenu .has-submenu:after {content: '';}

.nav-mobile{display: none;}

.nav-primary>ul>li:nth-child(2){height: 70px;}

/*header nav ul ul li {margin: 0; padding: 0 20px; background: #FFF; float: none;}
header nav ul ul li:last-child {padding: 0 20px 10px;}
header nav ul ul li a {font-family: Verdana; font-size: 10px; font-weight: 400; color: #909090; line-height: 2; float: none;}
*/
header nav ul li:hover ul {display: block;}

header nav ul li.mobile-submenu ul {display: none;}

header .righthead{position: absolute; right: 0px; top:30px;}
header .basket, header .account {display: inline-block; margin-left: 10px; font-weight: bold; font-size: 12px;}
header .langs {position: absolute; top: -30px; right: 5px; }

header .search{display: inline-block;}
header .search form input {border:0px none; border-bottom: 1px solid #ddd; width: 110px;}
header button {    background: none!important; padding: 0px 4px; border: 0px none;}
header button:hover {border: 0px none;}
header button span {display: inline-block; color: #000; }

.account a:before {padding-right: 10px; font-size: 18px;}
.account a {margin-right: 5px;}
.account a.logout {margin-left: 5px;}
header .basket {cursor: pointer; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 0px 20px;}

.ion-ios-cart-outline:before {padding: 0px 10px; font-size: 18px;}
header basket{cursor: pointer;}

.ion-ios-search-strong:before {font-size: 18px;}

button.nav-mobile-bt{display: none}
button.nav-mobile-bt:hover{border:0px}

/* ---------------------------------------------------------------------- */
/*	Footer
/* ---------------------------------------------------------------------- */

footer{background: rgb(245, 246, 248); color: rgb(153, 153, 153); padding-bottom: 20px; margin-top: 40px;}
footer a{color: rgb(153, 153, 153); }
footer h5{font-weight: 900; text-transform: uppercase;margin: 20px 0px; color: #222}
footer ul{margin: 0px; padding: 0px; list-style-type: none;}
footer ul li{margin-bottom: 10px;}
footer .copyright {border-top: 1px solid rgb(238, 238, 238); padding-top: 20px; margin-top: 20px; color: rgba(34, 34, 34, 0.77)}
.payment {float:right;}
.payment span {display: inline-block; padding: 4px; border: 1px solid #777; border-radius: 4px; font-size: 18px;}


/* ---------------------------------------------------------------------- */
/*	Home
/* ---------------------------------------------------------------------- */
.banner {width: 100%; height: 400px;}
.banner .slide {width:100%; height: 400px; background-position: center!important; background-size: cover!important; background-attachment: fixed!important; transform: none!important; }
.banner .caption {width: 100%; text-align: center; color: #fff; pointer-events: none; height: 400px; display: flex; justify-content: center; align-content: center; font-family: "Abril Fatface", cursive; font-size: 90px; padding-top: 100px;}

.products .col-1-2.bigproduct {padding-left: 0px;}
.products .bigproduct img {width: 100%}
.products .col-1-2.smallproducts {padding-right: 0px;}
.products .smallproducts .col-1-2{padding-top: 0px; position: relative}
.products .smallproducts .col-1-2:nth-of-type(1), .products .smallproducts .col-1-2:nth-of-type(3){padding-left: 0px;}
.products .smallproducts .col-1-2:nth-of-type(2), .products .smallproducts .col-1-2:nth-of-type(4){padding-right: 0px;}
.price, .oldprice, .discountprice, .discount{font-family: 'Abril Fatface', cursive; font-size: 14px;}
.oldprice {color: rgb(153, 153, 153); text-decoration: line-through; font-size: 12px; margin: 0px 10px 0px 0px;}
.discount {font-size: 13px; color: rgb(242, 67, 74);}

.col-1-4, .col-1-5 {position: relative}

.label-newproduct { position: absolute; top: 20px; left: 20px; background-color: #8cd790;}
.label {
    display: inline;
    padding: 4px 6px;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em; z-index: 999;
}

.pub {margin-top: 40px;}
.pub .col-1-2{padding: 0px; margin: 0px; position: relative;}
.pub .col-1-2 img{width: 100%;}
.pub .col{margin-bottom: -5px; position: relative}
.pub .col-1-2 h2{position: absolute; top: 20px; right: 20px; font-family: "Abril Fatface", cursive; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; text-align: right;}
.pub .col-1-2 h2 span{display: block; text-decoration: underline; font-size: 12px; font-family: 'Lato'; letter-spacing: 0px;}
.pub .col-1-2.bigger h2{position: absolute; bottom: 20px; right: 20px; font-family: "Abril Fatface", cursive; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; text-align: right; top:inherit}


.banner2 {background: url(../images/banner-home.jpg) no-repeat;  background-position: center!important; background-size: cover!important; background-attachment: fixed!important; height: 400px; width: 100%; margin-top:40px;}
.banner2 .caption {width: 100%; text-align: center; color: #fff; pointer-events: none; height: 400px; display: flex; justify-content: center; align-content: center; font-family: "Abril Fatface", cursive; font-size: 90px; padding-top: 100px;}

.promo .col-1-2.bigproduct {padding-right: 0px;}
.promo .bigproduct img {width: 100%}
.promo .col-1-2.smallproducts {padding-left: 0px;}
.promo .smallproducts .col-1-2{padding-top: 0px; position: relative}
.promo .smallproducts .col-1-2:nth-of-type(1), .promo .smallproducts .col-1-2:nth-of-type(3){padding-left: 0px;}
.promo .smallproducts .col-1-2:nth-of-type(2), .promo .smallproducts .col-1-2:nth-of-type(4){padding-right: 0px;}


/* ---------------------------------------------------------------------- */
/*	Quick Basket
/* ---------------------------------------------------------------------- */


.basket-overlay {
    position: fixed;
    z-index: 2222;
    display: block;
    top: 0;
    height: 100%;
    width: 375px;
    padding: 40px;
    font-size: 14px;
    background-color: #fff;
    right:0px;
	box-sizing: border-box;
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    -o-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -webkit-transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
}

.basket-overlay.opencart{right: 375px;}

.basket-overlay .basket-item-content{width: 180px}
.basket-overlay .basket-quantity {display: block!important; margin-left: 90px;}
.basket-overlay .price{display: block!important;}

.basket-overlay h4{margin-top: 0px;}

.basket-products {padding: 10px 0 10px; border-bottom: 1px solid rgb(238, 238, 238);}

.basket-item {margin-bottom: 20px; overflow: hidden; position: relative;}
.basket-item-delete {font-size: 12px; color: #000; position: absolute; top: 0; right: 0;}
.basket-item-img {width: 70px; height: 80px; margin-right: 20px; background-size: contain; background-repeat: no-repeat; overflow: hidden; position: relative; float: left;}

.basket .basket-product {display: table-cell; width: 270px; vertical-align: middle;}
.basket .basket-quantity {display: table-cell; width: 140px;  vertical-align: middle;}

.basket-item-content { float: left;}
.basket-item-content h3 {margin: 0; font-size: 12px; line-height: 12px; text-transform: uppercase;}
.basket-item-content p, .basket-item-content .price {margin: 0;}

.basket-total-text {margin: 15px 0 40px; font-size: 13px; font-weight: normal; text-transform: uppercase; float: left;}
.basket-total-value {margin: 15px 0px 30px; font-size: 15px; font-weight: normal; text-transform: uppercase; float: right;}

.basket-bt-continue {display: block; width: 100%; margin-bottom: 10px; padding: 8px; background: #FFF; font-weight: normal; text-transform: uppercase; text-align: center; float: left; border:1px solid rgb(238, 238, 238)}
.basket-bt-checkout:hover {color: #333; background: #fff; border: 4px solid #333;}

.basket-bt-checkout {display: block; width: 100%; padding: 6px ; background: #333; font-weight: normal; color: #FFF; text-transform: uppercase; text-align: center; float: left; border: 4px solid #333;}

.order button.basket-bt-process-preorder  {width:100%}





.quantity-container{font-size: 12px;}
.quantity-container span.quantity-add, .quantity-container span.quantity-remove {background: #000; font-weight: bold; padding: 2px 8px; cursor: pointer; color: #fff; float: left; border: 1px solid #000; min-width: 30px; text-align: center; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
.quantity-container span.quantity-add:hover, .quantity-container span.quantity-remove:hover {background: #828282; border-color: #828282;}

.quantity-container span.quantity{padding:2px 8px; border-top: 1px solid #000; border-bottom: 1px solid #000; float: left;  min-width: 30px; text-align: center;}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0,0,0,0.1);
    z-index: 1000;
    visibility: hidden;
    will-change: opacity;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.3s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
    transition: opacity 0.3s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
}
.bg-overlay.active {opacity: 1; filter: alpha(opacity=1); visibility: visible}
/* ==========================================================================
   ORDER
   ========================================================================== */

.order {padding: 20px 10px;}
.order h2 {font-size: 22px; font-weight: normal; font-family: "Abril Fatface", cursive; margin-top: 20px;}

.order .basket-header {width: 94%; margin-bottom: 10px; font-size: 13px; font-weight: normal; text-transform: uppercase;}
.order .basket-products{width: 94%;}

.order .basket-product-header, .order .basket-product {display: table-cell; width: 350px; vertical-align: middle;}
.order .basket-quantity-header, .order .basket-quantity, .order .basket-total-header, .order .basket-total, .order .basket-unit-header, .order .basket-unit {display: table-cell; width: 120px; padding-left: 40px; vertical-align: middle;}
.order .basket-quantity-header, .order .basket-quantity {width: 220px;}
.order .basket-total-header, .order .basket-total {text-align: right;}
span.stock-error{font-size: 12px; display: block; padding-top: 10px; float: none; clear: both;}

.order .basket-item {display: table;}
.order .basket-item-content {margin-top: 12px; max-width: 210px}

.order .basket-bt-refresh {display: block; width: 200px; margin-top: 30px; padding: 8px; background: #FFF; font-size: 13px; font-weight: normal; text-align: center; float: right;}

.order .basket-aside {padding: 40px; background: rgb(245, 246, 248);}
.order .basket-aside h2 {margin: 0 0 40px; font-family: "Abril Fatface", cursive}
.order .basket-aside h3 {margin: 0 0 10px; font-size: 13px;}

.basket-shipping-costs {padding-bottom:10px; border-bottom: 1px solid #000;}
.basket-shipping-costs span {float: right;}
.basket-shipping-costs a {display: block; padding: 2px 0 2px 0; font-size: 14px; font-weight: normal;}
.basket-shipping-costs a span {display: block; width: 215px; float: left;}
.basket-shipping-costs a:after {content: "\f372"; margin-left: 15px; padding-right: 10px; font-family: 'Ionicons';}
.basket-shipping-costs a.clicked:after {content: "\f374";}

.order .basket-total-text {color: #000;}

.order .basket-bt-checkout {width: 100%;}

/* ---------------------------------------------------------------------- */
/*	Produtos
/* ---------------------------------------------------------------------- */

.breadcrumbs {padding: 10px 0px; text-transform: uppercase;}

.category-banner {width:100%; height: 300px; background-position: center!important; background-size: cover!important; background-attachment: fixed!important; transform: none!important;}
.category-banner span{width: 100%; text-align: center; color: #fff; pointer-events: none; height: 300px; display: flex; justify-content: center; align-content: center; font-size: 60px; padding-top: 100px; text-transform: uppercase; font-family: 'Abril Fatface', cursive}
.category-banner .slide {background-size: cover;}

aside{float: left; padding-top: 20px;}
aside>ul{margin: 0px; padding:0px; list-style-type: none}
aside>ul>li {text-transform: uppercase; font-weight: 900; margin-bottom: 20px; position: relative}
aside>ul>li>a:before{content: "";
    background: #333;
    width: 12px;
    height: 1px;
    position: absolute;
    bottom: 0;}
    
aside>ul>li>ul{margin:20px 0px 0px 0px; padding:0px; list-style-type: none}
aside>ul>li>ul>li{text-transform: none; font-weight: normal; position: relative; font-size: 14px; padding: 2px 0px;}
aside a {color: #333; position: relative}
aside .sub a{padding:7px 7px 7px 14px}
aside .sub a:before{display: block;
    content: ".";
    font-family: "Lato",sans-serif;
    position: absolute;
    top: 0;
    color: #999;
    left: 0;}

.product .img{overflow: hidden; width: 100%; height: 270px; text-align: center;}
.product img{-webkit-transition: opacity 1s,transform 1s; transition: opacity 1s,transform 1s;}
.product:hover img {
    -webkit-transform: scale3d(1.1,1.1,1);
    -moz-transform: scale3d(1.1,1.1,1);
    -ms-transform: scale3d(1.1,1.1,1);
    -o-transform: scale3d(1.1,1.1,1);
}
.products .product .content {text-align: center;}
.col-1-5 .product .img {height: 270px!important}
 /* ---------------------------------------------------------------------- */
/*	Produto
/* ---------------------------------------------------------------------- */


.product-image img{width: 100%}
.product-info{padding-left: 40px!important;} 
.product-info h1{text-align: left; margin: 0px; font-size: 40px;}
.product-info .price{display: block; padding: 20px 0px; font-size: 18px;}
.product-info button {margin: 20px 0px;}

button{    color: #fff;
    background: #333;
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 0;
    border: 2px solid transparent;
    text-align: center;
    font-weight: 700;
    font-family: "Lato",sans-serif;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    padding: 10px 25px;
    font-size: 14px;
    line-height: 1.57143;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}
    
button:hover{    border: 2px solid #333;
    background-color: #fff;
    color: #333;}
    
    
    
/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.order input{display: block; width: 80%}
.order input {display: block; margin-bottom: 20px;}
.order label {display: block; margin-bottom: 5px;}
.order button {display: block; width: 50%; padding: 8px; background: #000; font-weight: normal; color: #FFF; text-align: center;  text-shadow:none !important; border:none !important; box-shadow:none !important; margin-top: 20px; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
.order button:hover {background: #828282;}
.order input[type="checkbox"], .order input[type="radio"]{display: inline-block; margin-bottom: 0px; width: auto; margin-right: 10px;}

button span{display: none;}
button.loading span{display: block;}

#mainCartContent  {margin-top: 60px}

ul.checkout-bar {margin: 30px 20px; text-align: center; position: relative;}
ul.checkout-bar:before {border-top: 1px solid #000; content: ""; margin: 0 auto; position: absolute; top: 30%; left: 30px; right: 0; bottom: 0; width: 65%; z-index: -1;}
ul.checkout-bar li {color: #000; display: inline-block; font-size: 14px; padding: 14px 20px 14px 80px; position: relative; margin: 50px 0 0; padding: 0; text-align: center; width: 19%;}
ul.checkout-bar li:before {border: 2px solid #000; border-radius: 50%; color: #000; font-size: 14px; left: 40%; line-height: 29px; height: 32px;
 position: absolute; text-align: center; top: -45px; width: 32px; z-index: 200;  background: #fff;
}
ul.checkout-bar li.active {}
ul.checkout-bar li.active:before {background: #000; z-index: 199; color: #fff;}
ul.checkout-bar li.visited { color: rgb(134, 130, 130); border-color: rgb(134, 130, 130);}
ul.checkout-bar li.visited:before { z-index: 200; color: rgb(134, 130, 130); border: 1px solid rgb(134, 130, 130);}
ul.checkout-bar li:nth-child(1):before {content: "1";}
ul.checkout-bar li:nth-child(2):before {content: "2";}
ul.checkout-bar li:nth-child(3):before {content: "3";}
ul.checkout-bar li:nth-child(4):before {content: "4";}
ul.checkout-bar a {text-decoration: none;}

#basket_aside {border-left: 1px solid #959595; padding: 0px 0px 0px 40px}
#basket_aside .basket-item-img{border: 4px solid #FFF; overflow: hidden; position: relative; width: 76px; height: 89px;}
#basket_aside .basket-item {border: 0px none; padding: 0px; display: block;}
#basket_aside .basket-item-content{margin-top: 0px;}
#basket_aside .basket-products{padding: 10px 0px 10px}
#basket_aside .basket-estimated-shipping, #basket_aside .basket-payment-costs{padding: 10px}
#basket_aside .basket-estimated-shipping span, #basket_aside .basket-payment-costs span{float: right; text-align: right}
#basket_aside .basket-total-costs {padding:10px; background: #fff; font-weight: bold;}
#basket_aside .basket-total-costs span{float: right; text-align: right}

.custom-select.country, .custom-select.ptzone {width: 312px; border: 1px solid #000; margin-bottom: 20px;}
.custom-select.country select, .custom-select.ptzone select {padding: 7px; font-size: 13px;}
.custom-select.country::after, .custom-select.ptzone::after {margin-top: -10px; font-size: 15px; right: 10px;}

.client-info form, .shipping-info form {margin: 20px 0px;}
.client-info input, .shipping-info input{display: inline-block; width: 230px;}
.client-info label, .shipping-info label{display: inline-block; width:100px}
.client-info button, .shipping-info button {margin-left: 104px; margin-top: 0px; text-align: left; width: 230px;}

.client-info .custom-select.country, .shipping-address .custom-select.country, .custom-select.ptzone {display: inline-block; width: 230px;}
.client-info .custom-select.country select, .shipping-address .custom-select.country select, .custom-select.ptzone select  {padding: 3px 6px;}

.collapsible {border-top: 1px solid #000}
.collapsible.no-border{border-top: 0px none}

#user-address{padding: 0px 0px 20px 0px; position: relative}
#user-address a{position: absolute; top: 0px; right:0px; padding: 8px 10px; background: #000; color: #fff;}

.billing-address, .shipping-address {padding: 0px 0px 20px 0px; position: relative}
.shipping-address .billing-check {display: inline-block; width:30px; margin-bottom: 0px;}
.showShippingAddressForm{position: absolute; top: -10px; right:0px; padding: 8px 10px; background: #000; color: #fff;}

.shipping-method ul{margin: 0px; padding: 0px;}
.shipping-method {padding: 0px 0px 20px 0px; position: relative}
.shipping-method li{margin-right: 10px; list-style-type: none; float: left;}
.shipping-method li span{display: block; margin-left: 20px;}

.payment-method ul{margin: 0px; padding: 0px;}
.payment-method {padding: 0px 0px 20px 0px; position: relative}
.payment-method li{margin-right: 10px; list-style-type: none; float: left;}


#payment-method{margin-top: 20px; width: 450px;}
#payment-method label{margin-bottom:6px; display: block;}

#payment-method ul.cards li{ float: left;margin: 0 4px 0 0; list-style-type: none; box-sizing: border-box;}
#payment-method ul.cards li span{background-image: url("../images/credit-cards-@2x.png"); background-size: 300px 31px; background-position:0 0;   float: left; width: 47px; height: 31px; text-indent: -9999px;opacity: 0.6; box-sizing: border-box; }

#payment-method ul.cards {margin-bottom: 20px;}
#payment-method ul.cards li span.card.visa {background-position: 0 0}
#payment-method ul.cards li span.card.master-card {background-position: -100px 0}
#payment-method ul.cards li span.card.american-express {background-position: -50px 0}
#payment-method ul.cards li span.card.discover {background-position: -150px 0}
#payment-method ul.cards li span.card.jcb {background-position: -200px 0}
#payment-method ul.cards li span.card.diners-club {background-position: -250px 0}
#payment-method ul.cards li span.card-selected {opacity: 1}
#payment-method ul.cards li.text {font-size: 11px; line-height: 31px; color: #767676;}
#payment-method col-1-4 {margin-right: 10px; overflow: hidden;}

.my-hosted-fields-container {height: 25px; width:300px; margin-bottom: 1em; padding: 0 0.5em;}
#my-credit-card-field, #my-security-code-field, #my-expiration-field {border:1px solid #000;}
#my-security-code-field, #my-expiration-field {border:1px solid #000; width:100px;}
.my-hosted-fields-left {height: 25px; width:100px; margin-bottom: 1em; padding: 0 0.5em; border: 1px solid #000;}
.my-hosted-fields-container.braintree-hosted-fields-invalid {background-color: rgba(242, 102, 102, 0.31)!important}
.my-hosted-fields-container.braintree-hosted-fields-valid {border-color: limegreen;}


/* ==========================================================================
   CLIENTS AREA
   ========================================================================== */
.order-history{}
.order-history-item{border-bottom: 1px solid #000; padding: 20px 0px;}
.order-history-item h3.date{ margin: 0px 0px 6px 0px; text-transform: none}
.order-history-item .info{float: left; width: 50%;}
.order-history-item .total{float: right; text-align: right;}
.order-history-item .total span{display: block; font-size: 16px; font-weight: bold;}
.order-history-item .status{float: left; width:150px; text-align: right}
.order-history-item .status span{display: block; font-size: 16px; font-weight: bold;}
.order-history-item .details{float: left; width:150px; text-align: left;}

.order-history-item .view-order-details {background: #000; padding: 4px 8px; color: #fff; margin: 10px 0 0 0; display: inline-block}

.order-details-address {margin-top: 30px;}

.order-items {width:100%; margin-top: 60px; padding-right: 20px; border-bottom: 1px solid #000; border-collapse: separate;}
.order-items th {padding-bottom: 20px; font-size: 13px; font-weight: normal; text-transform: uppercase;}
.order-items td {padding-bottom: 20px;}
.order-items td td {padding-bottom: 0;}
.order-items td img {border:4px solid #FFF}
.order-items td.img {width:90px;}
.order-items h3 {margin: 0; font-size: 18px; font-weight: normal;}

.order-info {margin-top: 30px; border-collapse: separate;}
.order-info table {padding: 20px; background: #FFF; border-collapse: separate;}

.order-status{background: #000; padding: 6px 18px; color: #fff; float: right}

table.order-items-list.small-table {width: 300px;float: right;}
table.order-items-list.small-table td{text-align: right; border-bottom: 1px solid #000; padding: 20px 0px;}

.change-password {margin-top: 20px; clear: both;}
.change-password p {font-size: 13px;}
.change-password button {margin-top: 40px;}



/* ==========================================================================
   MODAL
   ========================================================================== */

.jconfirm {text-align: left}
.jconfirm label{display: inline-block; width:100px}
.jconfirm input {width: 90%; margin-bottom: 20px; font-size: 13px!important; padding: 7px!important; border: 1px solid #000;}
.jconfirm button{display: block; width: 90%; padding: 8px; background: #000; font-weight: normal; color: #FFF; text-align: center; text-shadow:none !important; border:none !important; box-shadow:none !important; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
.jconfirm button:hover {background: #828282;}
.jconfirm .smallinfo{opacity: 0.7}
.jconfirm div.errorFeedback{width:90%; margin: 0px auto 10px}


#resetpassword{width: 50%; margin: 0px auto;}
#resetpassword input{width:80%; margin: 0px auto; float: none; margin-bottom: 20px;}
#resetpassword button {margin: 0px auto;}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.register .custom-select.country {display: block; width: 90%; margin: 0 0 20px;}



/* ==========================================================================
   FORM
   ========================================================================== */

form input[type="text"], form input[type="password"] {padding: 7px; background: #fff; border: 1px solid #000; font-size: 13px;}
form input[type="submit"] {padding: 8px 12px; background-color: #000; border: none; color: #FFF; font-size: 14px; line-height: 16px; -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
form input[type="submit"]:hover {background: #828282;}
form input.error{background-color: rgba(242, 102, 102, 0.31)!important}
form span.error{display: none!important;}
div.errorFeedback{padding: 6px 10px; background-color: rgba(242, 102, 102, 0.31); box-sizing: border-box; width: 80%}

::-webkit-input-placeholder {color: #000;}
:-moz-placeholder {color: #000;}
::-moz-placeholder {color: #000;}
:-ms-input-placeholder {color: #000;}

/* ---------------------------------------------------------------------- */
/*  Select
/* ---------------------------------------------------------------------- */

.s-hidden {padding-right: 10px;visibility: hidden;}
.select {display: inline-block; width: 100%; padding: 4px; color: black; text-align: left; cursor: pointer; position: relative; top: 1px;}

.styledSelect {padding: 4px 6px; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.styledSelect:after {content: ''; width: 0; height: 0; border: 5px solid transparent; border-color: black transparent transparent transparent; position: absolute; top: 10px; right: 6px;}
.styledSelect:active, .styledSelect.active {background-color: #fff;}

.options {display: none; min-width: 210px; max-height: 200px; margin: 0; padding: 0; background-color: #fff; border-top: 1px solid #000; list-style: none; overflow-y: scroll; position: absolute; top: 100%; right: 0; left: -1px; z-index: 999;}
.options li {margin: 0 0; padding: 4px 6px; border: 1px solid #000; border-top: none; font-weight: normal;}
.options li:hover {background: #000; color: #FFF;}

.items-per-page.full-custom-select {display: inline-block; width: 60px;}
.items-per-page .options {min-width: 62px;}
.order-by.full-custom-select {display: inline-block; width: 120px;}
.order-by .options {min-width: 122px;}

.productoptions .block {display: table; width: 100%; margin-bottom: 10px; border: 1px solid;}
.productoptions .block:last-child {margin-right: 0;}
.productoptions .block label {display: table-cell; width: 78px; padding: 8px 13px; background: #000; border-right: 1px solid #000; color: #FFF;}

.productoptions .full-custom-select .select {padding: 8px; top: 0;}
.productoptions .full-custom-select .styledSelect {padding: 8px 10px;}
.productoptions .full-custom-select .styledSelect:after {top: 15px;}
.productoptions .full-custom-select .options {min-width: 442px;}
.productoptions .full-custom-select .options li {padding: 4px 10px;}

.clientsarea h3{text-transform: uppercase}
.clientsarea aside {width: 20%; padding: 20px; margin-top: 40px;}
.clientsarea aside ul{list-style-type: none; margin: 0px; padding: 0px;}
.clientsarea .page {width: 80%; float: left;}
.clientsarea .order-items h3 {font-size: 15px;}
/* ==========================================================================
   SELECTS
   ========================================================================== */

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {display: table-cell; width: 440px; padding: 0; position: relative;}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {width: 100%; margin: 0; padding: .6em 1.9em .5em .8em; background: none; border: 1px solid transparent; border-radius: 0; line-height: 1.3; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; cursor: pointer;}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
    
.custom-select::after {content: "\f3d0"; width: 9px; height: 8px; margin-top: -12px; font-family: 'Ionicons'; font-size: 19px; font-weight: bold; position: absolute; top: 50%; right: 1em; z-index: 2; pointer-events:none;}

/* Focus style */
.custom-select select:focus {background-color: transparent; border: none; color: #222; outline: none;}

/* Set options to normal weight */
.custom-select option {font-weight:normal;}

/* ------------------------------------  */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ----------------------------------  */

/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .custom-select::after {display:none;}    

 /* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .custom-select select::-ms-expand {display: none;}
  .custom-select select:focus::-ms-value {background: transparent; color: #222;}
}  

/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() { 
  .custom-select {overflow: hidden;}
  .custom-select select {width: 120%; width: -moz-calc(100% + 3em); width: calc(100% + em);}
  
}

/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}

/* ------------------------------------  */
/*  END OF UGLY BROWSER-SPECIFIC HACKS  */
/* ------------------------------------  */


/* -----------------------------------------------
FlexSlider
----------------------------------------------- */

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
html[xmlns] .slides {display: block;} 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; float: left;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li:first-child {display: block;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative; zoom: 1;}
#flexslider {margin-bottom: 10px; overflow: hidden;}
#carousel.flexslider {margin: 0 0 10px; position: relative; zoom: 1;}

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

#carousel li {margin-right: 10px}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}
#carousel .flex-viewport{max-height:147px;}
#slider{margin-bottom:10px!important;}
#slider .flex-viewport{max-height:685px;}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; font-family: 'Ionicons'; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}

.flex-direction-nav .flex-next {right: 5px;}
.flex-direction-nav .flex-next:after {content: "\f125"; width: 30px; height: 30px; background: #FFF; text-align: center; line-height: 30px; text-indent: 0; float: left;}
.flex-direction-nav .flex-prev {left: 5px;}
.flex-direction-nav .flex-prev:after {content: "\f124"; width: 30px; height: 30px; background: #FFF; text-align: center; line-height: 30px; text-indent: 0; float: left;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .0!important; filter:alpha(opacity=0); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #828282; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover {background: #333; background: rgba(0,0,0,0.7);}
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}



/*!
 * jquery-confirm v1.7.5 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2015 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */
 .jconfirm-box-container {width: 400px; margin: 0px auto;}
 .jconfirm-box-container.large-modal {width: 700px;}
  .jconfirm-box-container.larger-modal {width: 800px;}
 body.jconfirm-noscroll{overflow:hidden!important}@-webkit-keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden}.jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:all .4s;transition:all .4s}.jconfirm .jconfirm-bg.seen{opacity:1}.jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto}.jconfirm .jconfirm-box{background:#fff;position:relative}.jconfirm .jconfirm-box div.closeIcon{height:20px;width:20px;position:absolute;top:6px;right:12px;cursor:pointer;opacity:.6;text-align:center;display:none;font-size:29px}.jconfirm .jconfirm-box div.closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.title{font-size:24px;font-weight:bold;font-family:'Didot';padding:30px 30px 0px 30pxs}.jconfirm .jconfirm-box div.content{padding:30px}.jconfirm .jconfirm-box div.content:empty{height:40px;position:relative;opacity:.6}.jconfirm .jconfirm-box div.content:empty:before{content: "\f29c";height:20px;width:20px;font-family:'Ionicons';position:absolute;left:50%;margin-left:-45px;-webkit-animation:jconfirm-rotate 1s infinite;animation:jconfirm-rotate 1s infinite}.jconfirm .jconfirm-box div.content:empty:after{content:'loading..';position:absolute;left:50%;margin-left:-15px}.jconfirm .jconfirm-box .buttons{padding:10px 15px}.jconfirm .jconfirm-box .buttons button+button{margin-left:5px}.jconfirm .jquery-clear{clear:both}.jconfirm.white .jconfirm-bg{background-color:rgba(0,0,0,0.2)}.jconfirm.white .jconfirm-box .buttons{float:right}.jconfirm.white .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.white .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#333}.jconfirm.white .jconfirm-box .buttons button.btn-default:hover{background:#ddd}.jconfirm.black .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.black .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white}.jconfirm.black .jconfirm-box .buttons{float:right}.jconfirm.black .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.black .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#fff;background:0}.jconfirm.black .jconfirm-box .buttons button.btn-default:hover{background:#828282}.jconfirm.hololight .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.hololight .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;overflow:hidden}.jconfirm.hololight .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.hololight .jconfirm-box .buttons{border-top:solid 2px #e7e7e7;width:100%;float:none;padding:0}.jconfirm.hololight .jconfirm-box .buttons button{margin:0;border:0;background:#fff;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#666}.jconfirm.hololight .jconfirm-box .buttons button+button{border-left:solid 2px #e7e7e7}.jconfirm.holodark .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.holodark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;background:#333;overflow:hidden}.jconfirm.holodark .jconfirm-box div.closeIcon{color:white}.jconfirm.holodark .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.holodark .jconfirm-box div.content{color:white}.jconfirm.holodark .jconfirm-box .buttons{border-top:solid 2px rgba(255,255,255,0.2);width:100%;float:none;padding:0}.jconfirm.holodark .jconfirm-box .buttons button{margin:0;border:0;background:#333;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#fff;text-shadow:none}.jconfirm.holodark .jconfirm-box .buttons button+button{border-left:solid 2px rgba(255,255,255,0.2)}.jconfirm .jconfirm-box.hilight{box-shadow:0 0 20px red}.jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:-webkit-transform,opacity,box-shadow;transition-property:transform,opacity,box-shadow}.jconfirm .jconfirm-box.anim-top,.jconfirm .jconfirm-box.anim-left,.jconfirm .jconfirm-box.anim-right,.jconfirm .jconfirm-box.anim-bottom,.jconfirm .jconfirm-box.anim-opacity,.jconfirm .jconfirm-box.anim-zoom,.jconfirm .jconfirm-box.anim-scale,.jconfirm .jconfirm-box.anim-none,.jconfirm .jconfirm-box.anim-rotate,.jconfirm .jconfirm-box.anim-rotatex,.jconfirm .jconfirm-box.anim-rotatey,.jconfirm .jconfirm-box.anim-scaley,.jconfirm .jconfirm-box.anim-scalex{opacity:0}.jconfirm .jconfirm-box.anim-rotate{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.jconfirm .jconfirm-box.anim-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-rotatey{-webkit-transform:rotatey(90deg);-ms-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scaley{-webkit-transform:scaley(1.5);-ms-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scalex{-webkit-transform:scalex(1.5);-ms-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-top{-webkit-transform:translate(0px,-100px);-ms-transform:translate(0px,-100px);transform:translate(0px,-100px)}.jconfirm .jconfirm-box.anim-left{-webkit-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px)}.jconfirm .jconfirm-box.anim-right{-webkit-transform:translate(100px,0px);-ms-transform:translate(100px,0px);transform:translate(100px,0px)}.jconfirm .jconfirm-box.anim-bottom{-webkit-transform:translate(0px,100px);-ms-transform:translate(0px,100px);transform:translate(0px,100px)}.jconfirm .jconfirm-box.anim-zoom{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.jconfirm .jconfirm-box.anim-scale{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.jconfirm .jconfirm-box.anim-none{display:none}.jconfirm.supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)}.jconfirm.supervan .jconfirm-box{background-color:transparent}.jconfirm.supervan .jconfirm-box div.closeIcon{color:white}.jconfirm.supervan .jconfirm-box div.title{text-align:center;color:white;font-size:28px;font-weight:normal}.jconfirm.supervan .jconfirm-box div.content{text-align:center;color:white}.jconfirm.supervan .jconfirm-box .buttons{text-align:center}.jconfirm.supervan .jconfirm-box .buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;width:25%;padding:10px}
 
 

.ion-spin, .ion-loading-a, .ion-loading-b, .ion-load-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }

@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); } }
@-o-keyframes spin { 0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); } }
@-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); } }
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); } }
.ion-loading-a { -webkit-animation-timing-function: steps(8, start); -moz-animation-timing-function: steps(8, start); animation-timing-function: steps(8, start); }

@media only screen and (max-width: 500px) {

    .wrapper {width: 100%; padding: 0 20px;}

    .nav-primary, .header-left, .header-right, .welcome .noticias {display: none;}

    .top-bar {display: none;}

    .logo {width: 160px; padding: 15px 30px 5px; margin-top: 10px;}

    .nav-mobile-bt {display: block; background: none; border: none; outline: none; position: absolute;  top: -15px;
    left: 20px;
    color: #000;}
    .nav-mobile-bt:after {content: '\f20e'; font-family: 'Ionicons'; font-size: 32px;}
.nav-mobile-bt:hover{border: 0px;}

    .nav-open .nav-primary {display: block; width: 220px; height: 100%; padding: 0 0 20px; background: #000; overflow-y: scroll; position: fixed; top: 0; left: 0; z-index: 99999;}
    body.nav-open {height: 100vh; overflow: hidden; position: relative; left: 0;}
    .submenu-open {overflow-y: scroll;}

	.nav-primary li.logosmall{display: none;}
    .nav-primary ul {margin: 0; float: none; width: 100%;}
    .nav-primary ul li ul{margin: 0; float: none; width: 100%; }
    
    
    .nav-primary ul:not(.nav-mobile) {margin-bottom: 10px; margin-top: 97px;}
    .nav-primary li {display: block; text-align: left; width: 100%; float: none; margin: 0px;}
    
    .nav-primary>ul>li>a {border-bottom: 1px solid #444}
    .nav-primary>ul.nav-mobile>li>a {border-bottom: 0px none}
    
   .nav-primary ul ul li:last-child {padding: 0px;}
    
    .nav-primary li a {display: block; width: 100%; margin: 0; padding: 10px; background: #000; font-size: 15px; color: #FFF; text-transform: none;}

    .nav-primary li ul {height: auto; margin: 0!important; padding: 0!important; background: transparent; border: none!important; overflow: hidden; position: static;}
    .nav-primary li ul li {width: 100%; margin: 0; background: none!important; text-align: left; padding: 0px;}
    
    .nav-primary li ul a {width: 100%; height: auto; padding: 8px 10px; border: none; color: #000; line-height: normal; color: #fff;}
    .nav-primary li ul a span {display: none;}

    .has-submenu {position: relative;}
    .has-submenu:after {content: "\f3d0"; font-family: 'Ionicons'; font-size: 16px; font-weight: bold; color: #FFF; position: absolute; top: 10px; right: 15px;}

.store-submenu .has-submenu:after {top:2px;}


    .nav-primary li.logosmall a {display: block; height: 57px; margin: 0px 70px 70px 0; background: #000 url('../img/andorinha_white.png') no-repeat 10px 16px; border-top: none; border-bottom: 1px solid #444; background-size: 47px; text-indent: -9999px;}

    .nav-mobile {display: block; padding-bottom: 40px!important; background: #000; position: static; bottom: 0;}
    .nav-mobile li:first-child {position: absolute; top: 2px; right: 0; padding-bottom: 5px;}
    .nav-mobile li a {padding: 8px 10px 0; border: none; font-size: 13px;}
    .submenu-open .nav-mobile {position: static;}

    .header-search {width: 100%; float: none; position: absolute; top: 46px; right: 0; padding: 10px; border-top: 1px solid #444; border-bottom: 1px solid #444;}
    
    
    .header-search input[type="text"] {width: 100%; background: #000; border-color: #FFF; font-size: 13px;}
    .header-search ::-webkit-input-placeholder {color: #FFF;}
    .header-search :-moz-placeholder {color: #FFF;}
    .header-search ::-moz-placeholder {color: #FFF;}
    .header-search :-ms-input-placeholder {color: #FFF;}
    .header-search button {display: none}

    .header-basket {display: none;}
    .header-basket-mobile {display: block; width: 70px; position: absolute; top: 45px; right: 20px;}

    h1 {padding: 20px 0; font-size: 36px;}
    h1.relatedtitle{font-size: 32px;}
    
    .home-title {font-size: 21px;}

    .welcome .banner {margin-top: -10px;}

    .novidades .col-1-5, .best-sellers .col-1-5, .brand-highlight .col-1-4, .home-stores .col-1-4 {width: 100%; margin-bottom: 20px; padding: 0;}
    /*.novidades .col-1-5:last-child {display: none;}*/

    aside, .main {width: 100%; padding: 40px 0 0; float: none;}
    .thumbnail-page-symbol {margin-left: 40px; float: right;}

    .page .col-2-3 {width: 100%; margin-bottom: 0;}

    .page .faq {width: 100%;}
    .page .faq .accordion-toggle {padding: 12px 40px 12px 0; font-size: 18px;}

    .home-text-highlight {width: 100%; padding: 0 0 30px;}
    .news .img, .news .content {width: 100%; padding: 40px 0 0; float: none;}

    .banner-crono .slide {padding: 20px 0;}

    .press-selection {width: 50%;}
    .press-selection img {width: 100%;}
    .col-1-3:nth-child(3n+1) {clear: none;}
    .col-1-3:nth-child(2n+1) {clear: left;}

    .category-banner .slide, .category-banner {height: 200px;}
    .category-banner .slide span {font-size: 30px;}

    .main .product {width: 100%; padding: 0 0 30px;}

    .products aside {display: none;}

    .items-per-page, .tool.orderby, .tool-bar.top {display: none;}
    .tool {width: 100%;}

    .product-image, .product-info {width: 100%; padding: 40px 0 0; float: none;}

    #flexslider {height: auto;}

    .add-to-bag {margin-top: 20px;}

    .more-info {margin-top: 40px;}

    .product-related .product {width: 100%; padding: 0 0 30px;}

    .basket {min-height: 100%; top: 0;}
    .basket .wrapper {width: 100%; min-height: 100%; background: transparent!important;}
    .basket .basket-content {width: 100%; padding: 0 20px;}
    .basket-close {right: 20px;}
    .basket .basket-item-img {display: none;}
    .basket .basket-quantity {width: 250px; padding-left: 0}
    .basket .basket-item-content {width: 160px; float: left;}

    .order {padding: 0;}

    ul.checkout-bar {margin: 20px 0; padding: 0;}
    ul.checkout-bar:before {width: 80%; top: 32%; left: 0;}
    ul.checkout-bar li {width: 24%; margin: 70px 0 0; vertical-align: top;}
    ul.checkout-bar li:before {left: 30%;}

    #mainCartContent .col-2-3 {width: 100%; padding: 0; float: none;}
    #mainCartContent .col-1-3 {width: 100%; float: none;}
    .order .basket-header, .order .basket-products {width: 100%;}

    .order .basket-unit-header, .order .basket-unit {display: none;}
    .order .basket-product-header, .order .basket-product {width: 340px;}
    .order .basket-item-img {display: none;}
    .order .basket-item-content {max-width: 160px; float: left;}
    .order .basket-quantity-header, .order .basket-quantity {width: 230px; padding-left: 10px;}
    .order .basket-total-header, .order .basket-total {width: 60px; padding-left: 10px;}

    .order .col-2-3, .order .col-1-2 {width: 100%; padding-right: 0; float: none;}

    .order input[type="text"], .order input[type="password"], .order button {width: 100%;}

    .cart #cart-view {display: none;}

    .client-info .custom-select.country, .shipping-address .custom-select.country, .custom-select.ptzone {width: 100%; margin-bottom: 15px; overflow: hidden;}
    .client-info button, .shipping-info button {margin-left: 0;}
    .client-info .custom-select.country select, .shipping-address .custom-select.country select, .custom-select.ptzone select  {padding: 6px;}

    #user-shipping-address {width: 150px;}

    #payment-method, .my-hosted-fields-container {width: 100%;}
    #payment-method ul.cards li.text {clear: both;}

    .order .custom-select.country {display: block; width: 100%; margin-bottom: 20px; border: 1px solid #000; overflow: hidden; clear: both;}

    .jconfirm .jconfirm-box {height: 100vh; margin: 0!important; overflow: scroll;}
    .jconfirm .col-1-2 {width: 100%; padding: 0 0 20px;}
    .jconfirm .register {padding: 0!important;}
    .jconfirm-box-container.large-modal, .jconfirm-box-container {width: 100%;}
    .register .custom-select.country {width: 100%;}
    .jconfirm form input[type="text"], .jconfirm form input[type="password"], .jconfirm button {width: 100%;}

    .jconfirm .jconfirm-box div.content {position: relative; top: 0px;  overflow: hidden;}

    input[type="text"], input[type="password"] {-webkit-appearance: none; border-radius: 0;}

    footer .wrapper {padding: 0 20px;}
    footer .footer-top {padding: 30px 0 10px;}
    footer .col-1-4 {width: 100%; margin-bottom: 20px;}
    footer .col-1-4.footer-menu {width: 50%;}
    .social {margin: 0 20px 0 0; float: left;}

    footer .partner {width: 100%; margin: 20px 0 0;}
    footer .partner img {width: 100%;}
    footer .design {margin-top: 30px; float: none;}

    form input[type="text"], form input[type="password"] {width: 150px;}

	.banner .caption {line-height: 100%;}
	.banner2 .caption{font-size: 60px; line-height: 100%;}
	.col-1-3, .col-1-4, .col-1-5 {width: 100%; max-width: 100%;}
.product-info h1 {font-family: 20px;}
.basket-overlay.opencart {right: 345px}
#mainCartContent .col-2-3 {padding: 10px;}
header .righthead {top: 0px;}
button.nav-mobile-bt {display: block}

.nav-primary>ul>li:nth-child(2) {height: auto;}

ul.store-submenu:first-of-type{display: block!important}

ul.store-submenu>li:before {background: none}
.langs {display: none;}
header .account {display: none;}
header .search {display: none;}
header .basket {border:0px none!important;}

ul.subsub>li>a {
    background: #333!important;
    border-bottom: 1px solid #444;
}


}


@media only screen and (max-width: 320px) {

    .top-bar p {font-size: 13px;}

    .basket .basket-content {padding: 0 20px 40px;}
    .basket .basket-quantity {padding-left: 0px;}

    .order .basket-quantity-header, .order .basket-quantity {width: 300px; padding-left: 0px;}
    #user-shipping-address {width: 100px;}
    .showShippingAddressForm {top: 3px;}

    .payment-info .col-1-4 {width: 50%;}

    footer  form input[type="text"], footer form input[type="password"] {width: 95px;}

}