*,:before,:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
* {-webkit-font-smoothing: antialiased;}



/* ==========================================================================
   Base styles
   ========================================================================== */

html {font-family: 'Cormorant', Arial, sans-serif; font-size: 16px; color: #222; line-height: 1.4;}

::-moz-selection {background: #b3d4fc; text-shadow: none;}
::selection {background: #b3d4fc; text-shadow: none;}

hr {display: block; height: 1px; margin: 30px 0; padding: 0; border: 0; border-top: 1px solid #e6e7e8;}

audio, canvas, iframe, img, svg, video {vertical-align: middle;}

fieldset {margin: 0; padding: 0; border: 0;}
textarea {resize: vertical;}
.wrapper {max-width: 1360px; margin: 0px auto;}
.wrapper.smaller{max-width: 800px; margin: 0px auto}

.margin-top {margin-top: 80px!important;}
.margin-bottom {margin-bottom: 80px!important;}
.border-top {border-top: 1px solid #ddd;}

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

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {margin: 0.2em 0; padding: 0.2em 0; background: #ccc; color: #000;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body.products{padding:0px; overflow: auto}
a {color: #222; text-decoration: none; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
a:hover {color: #999;}

header {height: 140px;}
header .logo {width: 190px; margin-left: -95px; position: absolute; top: 25px; left: 50%;}
header nav {text-align: center;}
header nav .menu {display: none;}
header nav ul {display: inline-block; margin: 70px 30px 30px 30px; padding: 0; list-style: none;}
header nav li {margin: 0 30px; font-size: 16px; position: relative; float: left;}
header nav li:nth-child(2) {margin-right: 160px;}
header nav li:nth-child(3) {margin-left: 160px;}
header nav li a {font-family: 'Cormorant', Arial, sans-serif; color: #151515; text-transform: uppercase; float: left;}
header nav li.active > a {color: #000;}
header nav ul ul {display: none; width: 210px; margin: 0; padding: 15px 0 0; text-align: left; position: absolute; top: 14px; left: -20px; z-index: 99999;}
.has-submenu:after {content: "\f3d0"; margin-left: 10px; font-family: Ionicons; font-weight: bold;}
.mobile-submenu .has-submenu:after {content: '';}
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 .basket {position: absolute; top: 60px; right: 140px;}
header .basket span {display: block; width: 100%; font-size: 10px; text-align: center; position: absolute; top: 8px;}
header .account {font-size: 23px; position: absolute; top: 60px; right: 100px;}
header .langs {position: absolute; top: 20px; right: 100px;}
header .langs .active {color: #000;}
header .subscribe-newsletter {display: none; text-transform: uppercase; position: absolute; top: 30px; right: 130px;}
header .transport {position: absolute; top:20px; left: 100px; padding-left: 28px;}
header .transport:before {content: "\f100"; font-family: 'Flaticon'; font-size: 20px; position: absolute; top:-3px; left: 0px;}


@media only screen and (min-width: 1025px){
  header {height: auto}
  header nav ul {margin: 70px 30px 0px 30px}
  header .logo {display: none;}
  header li.logo-holder {position: relative; top: -40px; margin: 0px 40px}
  header .nav-logo {display: block; width: 190px; }
  header nav ul {display: flex; justify-content: center;}
  header nav li {margin: 0 20px!important}
  header .langs {right: 200px}
  header .basket, header .account {top: 17px;}
} 

/* ==========================================================================
   GRID
   ========================================================================== */

.col-1-2 {width: 50%; float: left;}
.col-2-3 {width: 66.6666%; margin-bottom: 30px; padding-right: 30px; float: left;}
.col-1-3 {width: 33.3333%; margin-bottom: 30px; float: left;}
.col-1-3:nth-child(3n+1) {clear: left;}

.col-1-4 {width: 25%; float: left;}
.col-1-4:nth-child(4n+1) {clear: left;}
.col-1-5 {width: 20%; float: left;}
.col-2-5 {width: 40%; float: left;}
.col-1-6 {width: 16.666666666%; float: left;}
.col-4-5 {width: 80%; float: left;}



.jconfirm .homepub .jconfirm-box div.content {
    padding: 10px!important;
}


.cc_main_text {margin-bottom: 60px;}
.lightbox_confirm{
  position: fixed;
    width: 100%;
    height: 100vh;
    background: #00000059;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;

}

.lightbox_confirm .lightbox_confirm_content {
    background: #fff;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 4px;
    max-width: 700px;
    font-size: 12px;
    text-align: center;
    font-size: 15px!important;
    max-width: 90%;
}
.lightbox_confirm .lightbox_confirm_content p {
  margin: 0px;
}

.lightbox_confirm .button {
  display: inline-block;
    background: #eaeaea;
    color: #000;
    padding: 8px 20px;
    border-radius: 2px;
    border: 1px solid #737373;
    margin: 20px 0px 0px 0px;
    font-weight: normal;
    cursor: pointer;
    transition: all 1s ease;
}
.lightbox_confirm .button:hover{
  opacity: 0.7;
}

.lightbox_confirm .account_del_button {
  background: #000;
  color: #fff;
  margin-right: 5px;
  border: 0px none;
}

.lightbox_confirm .account_cancel_button {
  background: #7b7a7a;
  color: #fff;
  margin-left: 5px;
  border: 0px none;
}

.lightbox_confirm .lightbox_info{
  margin: 20px 0px 0px 0px;
}


.downloaduserdata.button, .deleteaccount.button{
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 40px;
  transition: all 0.5s ease;
  cursor: pointer;
}

.downloaduserdata.button:hover, .deleteaccount.button:hover{

    background: #000;
    color: #fff;
}

.privacy_agree {text-align: left; padding-left: 16px;}
.privacy_agree a {text-decoration: underline!important}
.consent_check{width: auto!important; padding: 0px!important; margin: 0px 5px 0px 0px;}
.jconfirm .jconfirm-box div.content{max-height: 100vh!important; overflow: auto!important;}
.jconfirm .jconfirm-box div.closeIcon{z-index: 999999!important}

.history-made {display:flex; max-width: 800px; margin: 0px auto 40px auto; flex-wrap: wrap;}
.history-made .flexcol {flex: 0 0 25%; padding: 20px; text-align: center;}
.history-made .flexcol img {width: 40px;}
.history-made .flexcol h2 {font-weight: 400}




/* ==========================================================================
   Main
   ========================================================================== */

.main {overflow: hidden; position: relative;}

.banner {position: relative;}
.banner .slide {display: none; width: 100%; height: 700px; background-position: bottom; background-repeat: no-repeat; background-size: cover;}
.banner .first-slide {display: block;}
.banner .text {display: flex; width: 100%; height: 100%; font-size: 70px; text-align: center; line-height: 110%;; align-items: center; justify-content: center; font-weight: 300; }
.banner .smaller, .info p.smaller {font-size: 30px; margin-top: -30px;}
.banner img {width: 100%;}
.cycle-pager {text-align: center; position: absolute; right: 0; bottom: 0; left: 0; z-index: 999;}
.cycle-pager span {display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: rgba(20, 20, 20, 0.15); border-radius: 100%; text-indent: -9999px; cursor: pointer;}
.cycle-pager .cycle-pager-active {background: #000;}


.home-highlights {display: flex; width: 100%; height: 700px; padding: 15px; flex-flow: column wrap; font-weight: 300}
.highlight {display: flex; width: calc((100% - 15px * 6) / 3); height: calc((100% - 15px * 4) / 2); margin: 15px; padding: 30px; background-size: cover; background-position: center; font-size: 30px; line-height: 42px; text-transform: uppercase; align-items: flex-end;}

.highlight.height-2-3 {height: calc((100% - 15px * 4) / 3 * 2);}
.highlight.height-1-3 {height: calc((100% - 15px * 4) / 3);}
.highlight.height-6-10 {height: calc((100% - 15px * 4) / 10 * 6);}
.highlight.height-4-10 {height: calc((100% - 15px * 4) / 10 * 4);}

.highlight.green {background: #dce8e1; align-items: center; justify-content: center; text-transform: none; font-size: 26px; line-height: 140%;}
.highlight.pink {background: #f5e4e2; align-items: center; justify-content: center; text-transform: none;}
.highlight.text-right {justify-content: flex-end;}


.quote-large {padding: 40px 40px 65px; font-size: 48px; text-align: center; font-weight: 300; line-height: 110%;}
.info .quote-large {text-align: justify!important;}

.products .quote-large {padding: 30px 60px 45px; font-size: 45px;}
.products .quote-large span {display: block; font-size: 30px;}

.gallery-grid {overflow: hidden;}
.gallery-grid img {width: 100%;}
.col-5 .item {width: 20%; float: left;}


 .parcerias{text-align: center; margin: 20px auto 40px auto; width: 900px; max-width: 90%; position: relative; }
 .parcerias img {max-width: 240px; max-height: 60px;}
.parcerias .prev {position: absolute; left: -100px; top:52%; font-size: 30px;}
.parcerias .next {position: absolute; right: -100px; top:52%; font-size: 30px}
.carousel {height: 60px; overflow: hidden;}

.testimonial {margin-top: 20px;}
.testimonial:first-of-type {margin-top: 0px;}
.testimonials img {border-radius: 50%; width: 70px;}
.testimonial_photo {width: 80px; float: left;}
.testimonial_text {padding-left: 90px; }

.products {padding: 20px 15px 15px; overflow: hidden; clear: both;}
.products h2 {margin-top: 30px; font-size: 35px; font-weight: 600; color: rgb(21, 21, 21); line-height: 30px; text-transform: uppercase; text-align: center;}
.products h3, h3.upper {margin: 0; font-size: 20px; font-weight: normal; color: #141414; text-transform: uppercase;}
.product {width: 25%; padding: 25px; position: relative; float: left;}
.product a {display: inline-block; background: rgba(156, 160, 153, 0.04);}
.product img {width: 100%;}
.product .content {padding: 15px 0 0; background: #fff; font-weight: 300}
.product .content .price, .discountprice {margin-left: 0px; font-size: 20px; float:right;}

.subtitle {font-size: 20px;}

.oldprice {display: block; text-decoration: line-through;}

aside {width: 340px; height: 100%; padding: 30px; background: #f5f5f5; position: absolute;}
aside h3 {margin: 60px 0 20px; font-size: 13px; font-weight: 300; color: #151515; text-align: center; text-transform: uppercase;}
aside h3:first-child {margin: 0 0 20px;}
aside ul {padding: 0; list-style: none;}
aside ul li {margin: 0 0 20px; font-family: Verdana; font-size: 14px; font-weight: 300; line-height: 22px;}
aside ul ul {padding: 10px 0 0 15px;}
aside ul ul li {margin: 0;}
aside ul .active > a {color: #000;}

.container .product {width: 33.333%;}
.container .product:nth-child(3n+1) {clear: left;}

.product-wrapper {max-width: 1350px; margin: 0 auto; overflow: hidden;}

.product-image {width: 50%; padding: 30px; float: left;}
.product-image img {width: 100%; background: rgba(156, 160, 153, 0.04); margin-bottom: 30px;}
.product-image ul {margin: 0; padding: 0; list-style: none;}


.submenu-cats {margin: 40px 0 0 40px;}
.submenu-cats ul {list-style: none; padding: 0; margin: 0; display: flex; justify-content: center;}
.submenu-cats ul li {text-transform: uppercase; margin-right: 30px;}
.submenu-cats ul li:last-of-type {margin-right: 0}
.submenu-cats a.active {border-bottom: 1px solid #000;}


.flexslider:hover .zoomslide {opacity: 1}

.zoomslide {position: absolute; top: 50%; left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform:translateX(-50%) translateY(-50%);
	transform:translateX(-50%) translateY(-50%);
	z-index: 9999;
	display: inline-none; opacity: 0;
	-webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;
	font-size: 32px;
    background: rgba(255, 255, 255, 0.63);
    padding-top: 20px;
    border-radius: 80px;
    width: 80px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
    pointer-events: none;}

#zoomContainer {background: #FFF; position: fixed; overflow: hidden; cursor: url(../img/zoom_out.png?v=2),crosshair; height: 100%; width: 100%; top:0px; left:0px; z-index:9999; display:none; margin:0px; padding:0px;}
#imagePan {position:relative; margin:0px; padding:0px;}
#imagePan  img{margin:0px; padding:0px;}

.product-info {width: 50%; padding: 30px; float: left;}
.product-info h1 {margin-top: 0; font-size: 24px; font-weight: normal; line-height: 1;}
.product-info .line {width: 38px; height: 1px; margin: 0 auto 25px; background: #000;}
.product-info .price {font-size: 24px;}
.product-info .price_right{float: right; text-align: right;}
.product-info .personalization_price{display: none;}

.product-info .info {font-size: 20px;}
.product-info form {width: 232px; margin: 20px 0 0;}
.add-to-bag {width: 232px; margin: 0; padding: 11px 14px; background: #000; border: none; font-size: 14px; font-weight: bold; color: #fff; text-align: left; text-transform: uppercase; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
.add-to-bag:hover {background: #000;}

.more-info {display: flex; margin: 30px 0;}
.view-details+.more-info {margin-top: 0px;}

.more-info h4 {margin: 0; padding: 0;}
.more-info p {margin: 0 30px 0 0; padding: 0;}
.more-info div {box-sizing: border-box; padding-left: 10px;}
.more-info ul {margin: 10px 0px 0px 0px; padding: 0px; list-style-type: none}
.more-info ul li{padding-left: 10px; position: relative;}
.more-info ul li:before{content: "\f3d3";
    font-family: 'Ionicons';
    font-size: 11px;
    position: absolute;
    left: 0px;
    top: 4px;}

.pages .info, body.info .info, body.faq .info {font-size: 20px; max-width: 800px; margin: 80px auto 30px auto; text-align: justify}
.pages .info p, body.info .info p {margin-bottom: 30px;}
.products .info{text-align: justify;}


.info .info table, .sizeguides table {border: 0px none;}
.info .info table td, .sizeguides table td {padding: 12px 8px; font-size: 16px; border:0px none; border-bottom: 1px solid #f1f1f1;}
.info .info table.envios td {font-size: 20px}
.info .disclaimer {font-size: 16px;}
.sizeguides table td {font-size: 15px;}

.accordion {border-top: 1px solid #000;}
.accordion-wrapper {border-bottom: 1px solid #000;}
.accordion-toggle {padding: 10px 40px 10px 0px; font-size: 20px; font-weight: normal; cursor: pointer; position: relative;}
.accordion-toggle i {font-size: 14px; font-weight: normal; position: absolute; top: 15px; right: 2px;}
.accordion-toggle i:before {font-weight: normal;}
.accordion-content {display: none; padding: 5px 0; font-size: 20px;}
.accordion-content.default {display: block;}
.accordion-content a, .accordion-content a span {font-weight: bold!important;}

.personalization-box {padding: 20px; box-sizing: border-box; background: #f1f1f1; margin: 40px 0px 40px 0px; text-align: left;}
.personalization-box h2, .personalization-content h2{font-size: 26px!important; font-style: italic!important; text-transform: none; text-align: left; font-weight: 300!important; margin: 0px 0px 10px 0px;}
.personalization-content h2 {margin-top: 10px!important;}

.personalization-box input,  .personalization-content input {width: 90%; padding: 11px; text-transform: uppercase; font-size: 14px;}

.personalization-box button,  .personalization-content button {    margin: 0;
    padding: 11px 14px;
    background: #000;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    text-transform: uppercase; width: 90%;}



.personalization-content{ width: 100%;  margin: 0px auto; background: #fff; box-sizing: border-box; text-align: left}
.personalization-content  img{width: 370px; margin: 0px auto;}
.personalization-content label{font-size: 14px; margin-bottom: 10px; display: block; margin-top: 10px; width: 100%!important; text-transform: uppercase;}

.personalization-content input {display: block; margin-bottom: 20px;}
.personalization-photo {position: relative; text-align: center}

.personalization-photo .iniciais {
    position: absolute;
    top: 210px;
    right: 70px;
    transform: rotate(-53deg);
    font-weight: bolder;
    color: #f2a6b4;
    font-size: 22px; text-transform: uppercase;
}

  .opensans{font-family: 'Open Sans';}
  .serif {font-family:  'Pinyon Script', cursive;}

  .iniciais.id1{top: 160px; right: 106px; transform: rotate(47deg); color:#d0c2c7}
  .iniciais.id1.white{color:#d0c2c7}
  .iniciais.id1.green{color:#bccac2}
  .iniciais.id1.pink{color:#d6b1c6}

  .iniciais.id3{top: 183px; right: 88px; transform: rotate(26deg); color:#d0c2c7}
  .iniciais.id3.white{color:#d0c2c7}
  .iniciais.id3.green{color:#bccac2}
  .iniciais.id3.pink{color:#d6b1c6}


  .iniciais.id4{top: 134px; right: 300px; transform: rotate(13deg); color:#d0c2c7}
  .iniciais.id5{top: 231px; right: 62px; transform: rotate(-53deg); color:#d0c2c7}
  .iniciais.id6{top: 150px; right: 130px; transform: rotate(-1deg); color:#d0c2c7}
  .iniciais.id6.white{color:#d0c2c7}
  .iniciais.id6.green{color:#bccac2}
  .iniciais.id6.pink{color:#d6b1c6}


  .iniciais.id7{top: 100px; right: 140px; transform: rotate(-1deg); color:#d0c2c7}
  .iniciais.id7.white{color:#d0c2c7}
  .iniciais.id7.green{color:#bccac2}
  .iniciais.id7.pink{color:#d6b1c6}

  .iniciais.id10{ top: 250px; right: 180px; transform: rotate(-1deg); color: #d695a1;}
  .iniciais.id13{ top: 219px; right: 70px; transform: rotate(-49deg); color: #66a09a;}
  .iniciais.id14{top: 250px; right: 200px; transform: rotate(1deg); color: #66a09a;}
  .iniciais.id16{ top: 219px; right: 70px; transform: rotate(-49deg); color: #66a09a;}

  .iniciais.id11{ top: 212px; right: 269px; transform: rotate(0deg); color: #bb6760;}
  .iniciais.id15{ top: 212px; right: 269px; transform: rotate(0deg); color: #5e7775;}


  .iniciais.id20{top: 187px; right: 186px; transform: rotate(0deg); color:#d0c2c7}
  .iniciais.id20.green{color:#96a99e}
  .iniciais.id20.pink{color:#d28db4}

  .iniciais.id21{top: 147px; right: 146px; transform: rotate(0deg); color:#d0c2c7}
   .iniciais.id21.white{color:#d0c2c7}
  .iniciais.id21.green{color:#bccac2}
  .iniciais.id21.pink{color:#d28db4}

  .iniciais.id22, .iniciais.id26{ top: 203px; right: 70px; transform: rotate(-55deg); color: #ab9c84;}
  .iniciais.id23{ top: 250px; right: 260px; transform: rotate(0deg); color: #ab9c84;}
  .iniciais.id25{ top: 229px; right: 269px; transform: rotate(0deg); color: #ab9c84;}


  .iniciais.id30, .iniciais.id31{ color: #daa82c; top:190px; right: 62px; transform: rotate(-55deg);}
  .personalization-content .colors .color.yellow {background: #e9c05c;}
  .personalization-content .colors .color.blue {background: #0a171f;}

   .iniciais.id33 {top: 212px; right: 269px; transform: rotate(0deg); color: #daa82c;}

    .iniciais.id34{ top: 240px;
    right: 160px;
    transform: rotate(1deg);
    color: #daa82c;}

    .iniciais.id57,  .iniciais.id59{
    right: 256px;
    top: 178px;
    transform: rotate(0deg);
    font-size: 18px;
    color: #0a171f;
}

 .iniciais.id59{
  
    color: #9eb2a6;
}

  #personalization-cancel-btn {background: #f1f1f1; color: #aba9a9; width: 37%; margin-right: 1%; display: inline-block!important;}
  #personalization-apply-btn {width: 50%; display: inline-block!important;}

  .products .info a {border-bottom:1px solid #656565;}

  .personalization-content .colors {margin-bottom: 20px; display: inline-block; vertical-align: top; margin-right: 20px;}
  .personalization-content .colors .color {display: inline-block; width:30px; height: 30px; -webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px; margin-left: 5px; cursor: pointer;}

.personalization-content .colors .color.white{background: #FFF; border: 1px solid #f1f1f1}
.personalization-content .colors .color.pink{background: #e4d1dc;  border: 1px solid #e4d1dc}
.personalization-content .colors .color.green{background: #dce8e1;  border: 1px solid #dce8e1}
.personalization-content .colors .color.gray{background: #ddd;  border: 1px solid #ccc}
.personalization-content .colors .color.cream{background: #d8d1c4;border: 1px solid #cbbca5;}

.personalization-content .colors .color.active {border: 1px solid #bcbaba!important;}
.personalization-content .colors label, .personalization-content .fonts label {display: block; width:140px;}
.iniciais.gray {color: #9e9e9e!important}
.iniciais.cream {color:  #d8d1c4!important;}

.personalization-content .fonts {display: inline-block; text-align: left; vertical-align: top;}
 .personalization-content .fonts .font {display: inline-block; text-align: left; font-size: 20px; cursor: pointer; margin-right: 10px; color: #6f6e6e}
.personalization-content .fonts .font.active {color: #000; border-bottom: 1px solid #000}
.personalization-content .fonts .font.serif {font-size: 23px;}


.theprice {float:right;}
/* ---------------------------------------------------------------------- */
/*  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: #F9F9F9;}

.options {display: none; min-width: 210px; max-height: 300px; margin: 0; padding: 0; background-color: #F9F9F9; border-top: 1px solid #c4ccc7; 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 #c4ccc7; border-top: none; font-weight: normal;}
.options li:hover {background: #dce8e1; color: #000;}

.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 #c4ccc7}
.productoptions .block:last-child {margin-right: 0;}
.productoptions .block label {display: table-cell; width: 50%; padding: 8px 14px; background: #dce8e1; border-right: 1px solid #c4ccc7; font-size: 14px; font-weight: normal; color: #000; text-transform: uppercase;}

.productoptions .full-custom-select .select {padding: 8px; top: 0;}
.productoptions .full-custom-select .styledSelect {padding: 10px 20px;}
.productoptions .full-custom-select .styledSelect:after {top: 18px; right: 6px;}
.productoptions .full-custom-select .options {min-width: 117px;}
.productoptions .full-custom-select .options li {padding: 8px 10px;}

.sizeguide {display: block; margin: 0px 0px 15px 0px; font-size: 14px; cursor: pointer;}

.grey{background: #dce8e1; margin-top: 30px;}
.grey .info {margin-top: 0px; padding: 30px 0px 10px 0px; margin-bottom: 0px;}

.prod20 .productoptions .block {width:383px;}
.prod20 .productoptions .block label {width: 45%; font-size: 13px;}
.smalltext {font-size: 16px;}

/* ==========================================================================
   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  */
/* ------------------------------------  */



.page {padding: 15px 15px 0; overflow: hidden;}
.page:last-child {padding-bottom: 15px;}
.page h2 {margin-top: 30px; font-size: 35px; font-weight: 600; color: rgb(21, 21, 21); line-height: 30px; text-transform: uppercase; text-align: center;}
.page .img-right {width: 50%; padding: 30px 30px 30px 40px; float: right;}
.page .img-left {width: 50%; padding: 30px 40px 30px 30px; float: left;}
.page .small {width: 25%;}
.page .text {display: block;}
.page .text a {color: #000;}

.map {height: 400px;}

footer {display: flex; justify-content: space-between; padding: 30px; background: #272b27; font-weight: bold; color: #FFF; overflow: hidden;}
footer a {color: #FFF;}
footer a:hover {color: #bbcbc3;}

footer div[class^='col'] {width: auto; padding: 0 15px;}
footer > div:last-child {width: 20%;}

footer h4 {margin: 0; text-transform: uppercase;}

footer .social-footer {text-align: right; margin-top: 20px;}

footer input {width: 100%; margin: 10px 0; padding: 4px 6px; background: #333; border: none; color: #ADADAD;}
footer button {width: 100%; padding: 4px 6px; background: #dce8e1; border: none; font-weight: normal; color: #000; text-align: left; clear: left; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
footer button:hover {background: #333; color: #ADADAD;}

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




footer .icon {margin: 0 5px; color: #FFF; font-size: 20px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
footer .facebook .icon:hover {color: #3B5998;}
footer .twitter .icon:hover {color: #00ACED;}
footer .instagram .icon:hover {color: #3F729B;}

.left {width: 60px; height: 100%; position: fixed; top: 0; left: 0;}
.right {width: 60px; height: 100%; position: fixed; top: 0; right: 0;}
.left div {display: inline-block; width: 300px; height: 12px; margin-top: 150px; font-size: 11px; font-weight: normal; color: #909090; line-height: 12px; letter-spacing: 0.8px; text-transform: uppercase; text-align: center; position: absolute; top: 50%; left: 24px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.right div {display: inline-block; width: 300px; height: 12px; margin-top: 150px; font-size: 11px; font-weight: normal; color: #909090; line-height: 12px; letter-spacing: 0.8px; text-transform: uppercase; text-align: center; position: absolute; top: 50%; right: 34px; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;}
.right div a {color: #909090;}


/* ==========================================================================
   Blog
   ========================================================================== */

.blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 60px; margin: 0 auto; padding: 30px 10% 60px;}

article {display: flex; flex-flow: column; text-align: center; padding-bottom: 30px; background: #dce8e152;}

article h1 {margin: 25px 0 0; font-size: 24px; font-weight: normal; color: #141414; text-transform: uppercase; padding: 0px 30px}
article time {margin-bottom: 25px;}

article .text {font-size: 20px;}
article .text p {margin-bottom: 15px;}

article figure {width: 100%; height: 0; margin: 0; padding-top: 66%; order: -1; position: relative;}
article figure img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; object-position: top}

article > a {align-self: center; margin-top: auto; padding: 10px 35px; border: 1px solid #272b27; font-size: 14px; color: #000; text-transform: uppercase;}

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

    .blog-grid {padding: 30px 0 60px; grid-template-columns: 1fr;}

    article h1 {text-align: center!important;}

}


/* ==========================================================================
   Store
   ========================================================================== */

.basket-overlay {display: none; width: 300px; padding: 30px; background: #F9F9F9; border: 4px solid #dce8e1; position: absolute; top: 80px; right: 60px; z-index: 9999;}
.basket-overlay h1 {margin: 0 0 20px; font-size: 23px; font-weight: 300; text-align: center; text-transform: uppercase;}

.basket-products {padding: 10px 0 10px; border-bottom: 1px solid #d2ddd7;}

.basket-item {margin-bottom: 20px; overflow: hidden; position: relative;}
.basket-item-delete {font-size: 17px; color: #000; position: absolute; top: -2px; right: 0;}
.basket-item-img {width: 70px; height: 80px; margin-right: 20px; background-size: cover; 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; padding-left: 40px; vertical-align: middle;}

.basket-item-content {width: 120px; 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;}
.basket-bt-checkout {display: block; width: 100%; padding: 8px; background: #dce8e1; font-weight: normal; color: #000; text-transform: uppercase; text-align: center; float: left;}

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

.basket-quantity {width: 120px; margin-top: 15px; overflow: hidden; float: left;}

.quantity-container span.quantity-add, .quantity-container span.quantity-remove {min-width: 18px; padding: 0 8px; background: #000; border: 1px solid #000; font-weight: bold; color: #FFF; line-height: 14px; text-align: center; cursor: pointer; float: left; -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 {min-width: 18px; padding: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 13px; text-align: center; float: left;}

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}



/* ==========================================================================
   ORDER
   ========================================================================== */

.order {padding: 20px 30px; overflow: hidden;}
.order h2 {font-size: 22px; font-weight: normal;}

.order .basket-header {width: 94%; margin-bottom: 10px; font-size: 16px; 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; width: 200px; max-width: 96%}

.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: #F9F9F9;}
.order .basket-aside h2 {margin: 0 0 40px;}
.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%;}

.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:0px; border-top: 1px solid #000; border-bottom: 1px solid #000; float: left;  min-width: 30px; text-align: center;}

.basket .quantity-container{margin-top: 10px}


.order .voucher {padding: 40px; background: #F9F9F9; margin-top: 20px;}
.order .voucher h2 {margin: 0 0 40px;}
.order .voucher h3 {margin: 0 0 10px; font-size: 13px;}
.order .voucher button, .order .voucher input{width: 100%;}
.order .voucher input {padding: 10px;}
.order .voucher input.error {border: 1px solid red}
/* ==========================================================================
   FORM
   ========================================================================== */

form input[type="text"], form input[type="password"] {padding: 7px; background: none; 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, form textarea.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;}

form.contact-form input, form.contact-form textarea  {width: 100%; margin-bottom: 10px; padding: 6px 10px; background: none; border: 1px solid #000; font-size: 20px;}
form.contact-form button {background: #000; border: none; font-weight: bold; color: #FFF; font-size: 20px;}
form.contact-form button:hover {background: #828282;}
form.contact-form label.error {display: none!important;}


/* ==========================================================================
   POPUP
   ========================================================================== */
#popup {width: 700px;  padding:20px; box-sizing: border-box; background: #fff; overflow: hidden; text-align: center}
#popup img {width: 100%;}
#popup h1 {font-size:50px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;}
#popup h2 {font-size:23px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;}
#popup h5, #popup h6 {font-weight: normal; margin: 0px;}
#popup p {font-size: 20px; margin-bottom: 0px; }
#popup .pop_textonly h1, #popup .pop_textonly h2 {color: #000;}

#popup .popup_imagecontainer {width: 100%; height: 450px; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; background: #000;}
#popup .popup_imagecontainer:before {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    opacity : 0.5;
    background-repeat: no-repeat; background-size: cover;
    margin: 20px;
}

#popup .popup_imagecontainer .pop_content {opacity: 1; position: absolute; transform: translateX(-50%) translateY(-50%); left: 50%; top: 50%; width: 100%;  padding: 40px; box-sizing: border-box}
#popup .popup_imagecontainer .pop_content p {padding: 20px;}
#popup .pop_content_single {padding: 20px}
#popup .col-1-2.pop_content_single {display: flex; justify-content: center; align-items: center; height: 400px;}


#popup .pop_newsletter {background:#dde8e1;}
#popup .pop_newsletter h1, #popup .pop_newsletter h2 {color: #000; }
#popup .pop_newsletter h1 {font-size: 27px; font-weight: 600;}
#popup .pop_newsletter h2 {font-size: 20px; font-weight: 300;}

#popup .pop_newsletter input {width: 80%; padding: 8px 8px; margin: 10px 0px; text-align: center; border: 0px none;}
 #popup .pop_newsletter button {width: 80%; padding: 8px 8px; margin: 10px 0px; border: 0px none; background: #aeb5b1; margin: 0px;}

/* ==========================================================================
   MODAL
   ========================================================================== */
#modal, .modal{width:400px; height:auto; min-height:200px; background:#FFF; position:fixed; z-index:10000; top: 120px; left: 50%; margin-left:-200px; border:1px solid #DDD; padding:30px; box-shadow:-2px 4px 12px 0px #666; font-size:12px; box-sizing:border-box;

  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
   -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

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

.jconfirm {text-align: center}
.jconfirm h2{margin-top: 0px; font-size: 22px; font-weight: bold; line-height: 27px;}
.jconfirm label{display: inline-block; width:100px}
.jconfirm input {width: 90%; margin-bottom: 20px; font-size: 13px!important; padding: 7px!important; background: none!important; border: 1px solid #000;}
.jconfirm button{display: block; width: 90%; padding: 8px; background: #dce8e1; font-weight: normal; color: #000; text-transform: uppercase; text-align: center; text-shadow:none !important; border:none !important; box-shadow:none !important; margin: 0px auto; -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: #dce8e1;}
.jconfirm .smallinfo{opacity: 0.7}
.jconfirm div.errorFeedback{width:90%; margin: 0px auto 10px}


.resetpasswordbox {text-align: center; min-height: calc(100vh - 348px);}
#resetpassword{width: 50%; margin: 0px auto; text-align: center;}
#resetpassword input{width:80%; margin: 0px auto; float: none; margin-bottom: 20px; }
#resetpassword button {margin: 0px auto;}

/* ==========================================================================
   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: #dce8e1; font-weight: normal; color: #000; 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; text-transform: uppercase;}
.order button:hover {background: #dce8e1;}
.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; padding: 0; text-align: center; position: relative;}
ul.checkout-bar:before {border-top: 1px solid #000; content: ""; margin: 0 auto; position: absolute; top: 30%; left: -10px; right: 0; bottom: 0; width: 65%; z-index: 0;}
ul.checkout-bar li {color: #000; display: inline-block; font-size: 16px; padding: 14px 20px 14px 80px; position: relative; margin: 50px 0 0; padding: 0; text-align: center; width: 19%;}
ul.checkout-bar li:before {background: #F9F9F9; 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; font-family: 'Times New Roman', serif;}
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 {background: #F9F9F9; z-index: 200; color: #CECECE; border: 2px solid #CECECE;}
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, #basket_aside .voucher-discount{padding: 10px}
#basket_aside .basket-estimated-shipping span, #basket_aside .basket-payment-costs span, #basket_aside .voucher-discount 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; overflow: hidden;}
.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: #dce8e1; color: #000;}

.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: #dce8e1; color: #000;}

.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: 0px;}

.payment-method ul{margin: 0px; padding: 0px;}
.payment-method {padding: 0px 0px 20px 0px; position: relative}
.payment-method li{margin-right: 30px; 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("../img/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;}


.radio-col {width: 100px; display: inline-block; margin-bottom: 20px;}
.gift-message-box{margin-bottom: 20px;}
.gift-message-box img {max-width: 90%;}
.gift-info textarea {width: 100%; height: 120px; border: 1px solid #ddd; margin-bottom: 4px; margin-top: 10px; box-sizing: border-box; padding: 10px;}
.gift-chars-info {font-size: 13px;}

.gift-message-box.normal .photo-normal-gift{display: block;}
.gift-message-box.normal .photo-gift-gift{display: none;}

.gift-message-box.gift .photo-normal-gift{display: none;}
.gift-message-box.gift .photo-gift-gift{display: block;}


ul.order_mbref{width: 240px; margin: 20px auto; list-style-type: none; text-align: left}
ul.order_mbref li {padding: 5px 0px; border-bottom:1px solid #ddd;}
ul.order_mbref li span {width:100px; display: inline-block}
/* ==========================================================================
   CLIENTS AREA
   ========================================================================== */
.clientsarea {min-height: calc(100vh - 348px);}

.clientsarea h1 {text-align: center;}

nav.clientsarenav{text-align: center;}
nav.clientsarenav ul {list-style-type: none; padding: 0px; margin: 0px;}
nav.clientsarenav ul li {display: inline-block; margin: 0px 5px;}
nav.clientsarenav ul li a.active{border-bottom: 1px solid #222;}

.order-history{max-width: 80%; margin: 0px auto;}
.order-history-item{border-bottom: 1px solid #dce8e1; padding: 20px 0px;}
.order-history-item h3.date{ margin: 0px 0px 6px 0px;}
.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: 14px; font-weight: bold;}
.order-history-item .status{float: left; width:150px; text-align: right}
.order-history-item .status span{display: block; font-size: 14px; font-weight: bold;}
.order-history-item .details{float: left; width:150px; text-align: left;}

.order-history-item .view-order-details {background: #dce8e1; padding: 4px 8px; color: #000; 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: 13px; text-transform: uppercase;}

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

.order-status{background: #dce8e1; padding: 6px 18px; color: #000; 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;}


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

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


/* ==========================================================================
   404 PAGE NOT FOUND
   ========================================================================== */


.error404 {height: 100%; text-align: center;}
.error404:before {content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle;}
.error404 .centered {display: inline-block; width: 420px; vertical-align: middle; max-width: 90%;}

.error404 .centered > a {display: block; border-bottom: 2px solid #000;}
.error404 .logo {width: 340px; max-width: 80%;}
.error404 .center {width: 430px; margin: 30px auto 0; max-width: 90%;}
.error404 h1 {margin: 0; padding: 20px 0 10px; font-size: 24px; text-transform: none;}

/*!
 * 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 .container {width: auto; float: none;}
.jconfirm-box-container {width: 400px; margin: 0px auto;}
.jconfirm-box-container.large-modal {width: 700px;}
.jconfirm-box-container.personalization-modal {width: 900px;}
.personalization-modal .jconfirm-box {background: #fff!important;}


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:#F9F9F9;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;z-index: 9999;}.jconfirm .jconfirm-box div.closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.title{font-size:24px;font-weight:bold;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:'...';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}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-close,.mfp-preloader{text-align:center;position:absolute}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;top:50%;width:auto;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;right:0;top:0;text-decoration:none;opacity:.65;filter:alpha(opacity=65);padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;filter:alpha(opacity=65);margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1;filter:alpha(opacity=100)}.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow .mfp-a,.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow .mfp-b,.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left .mfp-b,.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right .mfp-b,.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{position:absolute;left:0;top:40px;bottom:40px;right:0;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}

/* -----------------------------------------------
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; 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;}
}



/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

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

video{max-height: 720px;}
header li.logo-holder {display: none;}

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


.table-container {overflow-y: scroll;}
.table-container::-webkit-scrollbar
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
}

.table-container::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
}


	h1 {text-align: left!important;}

	.parcerias{max-width: 100%;}
	.parcerias img {max-width: 190px; max-height: 50px;}
	.parcerias .prev {position: absolute; left: 10px; top:59%; font-size: 20px;}
	.parcerias .next {position: absolute; right: 10px; top:59%; font-size: 20px}
	.carousel {height: 50px; overflow: hidden;}

  .submenu-cats{margin: 20px 0 0 0;}
  .submenu-cats ul li {margin-right: 14px;}
  .submenu-cats ul li:last-of-type {margin-right: 0}
 
	.lity-container {max-width: 90%!important;}
	#popup {width: 100%; min-width: 90vw}
	#popup .col-1-2 {width: 100%; float: none;}
	#popup .col-1-2.pop_content_single {height: auto; display: inline;}
	#popup h1 {font-size: 30px;}
	#popup h2 {font-size: 20px;}
	#popup p {font-size: 16px;}
	.lity-close {color: #000!important; top:20px!important;}


    header {text-align: center;}
    header .logo {width: 170px; margin: 100px 0 0; position: static;}
    header nav .menu {display: inline; font-size: 28px; position: absolute; top: 48px; right: 20px;}
    header nav ul {display: none; width: calc(100% - 40px); margin: 0 20px 30px; background: #FFF; border: 1px solid #000; border-bottom: none; position: fixed; top: 100px; left: 0; z-index: 999;}
    header nav ul li {width: 100%; margin: 0!important; padding: 0; border-bottom: 1px solid #000; text-align: left; float: none;}
    header nav ul li a {display: block; height: 20px; margin: 12px 20px; padding: 0; float: none;}
    header nav ul ul {display: none; width: 100%; margin: 0; padding: 0; background: #FFF; border: none; position: static; z-index: 999; float: none;}
    header nav ul ul li {display: block; border: none;}
    header nav ul ul li a {height: 24px; margin: 0; padding: 0;}
    .has-submenu:after {content: '';}
    header .basket {top: 50px; right: auto; left: 60px;}
    header .langs {right: 20px;}
    header .account {top: 50px; right: auto; left: 20px;}
    header .transport {font-size: 11px; line-height: 16px; left: 20px; padding-left: 24px;}
	header .transport:before {content: "\f100"; font-family: 'Flaticon'; font-size: 17px; position: absolute; top:0px; left: 0px;}

    .home-highlights {display: block; height: auto; padding: 0;}
    .highlight {width: 100%; height: 250px!important; margin: 15px 0; font-size: 26px; line-height: 30px;}

    .quote-large {padding: 30px 0 55px; font-size: 30px; margin-bottom: 30px;}
    .info .quote-large {padding: 0 0 40px!important; font-size: 30px;}
    .product-wrapper:last-of-type .info.margin-bottom p:last-of-type  {}

    .info.margin-bottom .quote-large {padding: 0 0 0px!important; }
    .banner .smaller, .info p.smaller {margin: -20px 0 0; font-size: 24px;}

    .pages .info, body.info .info, body.faq .info {margin: 40px auto 30px auto;}

    .easyhtml5video {height: 160px;}

    .gallery-grid.col-5 {margin-bottom: 30px;}
    .gallery-grid.col-5 .item {width: 50%;}

    .main {margin: 70px 20px 0;}

    .banner .slide {height: 210px!important;}

    aside {display: none;}
    .container {width: 100%;}
    .container .product {width: 100%;}

    .products {padding: 20px 0px 15px;}
    .products h3 {margin: 0;}
    .product {width: 100%; padding: 0;}

    .product .overlay {background: none; opacity: 1; position: static;}
    .product:hover .overlay {width: 100%;}
    .product .content {padding: 20px 0;}

    .product-image {width: 100%; padding: 0;}
    .product-info {width: 100%; padding: 0 0 30px;}
    .product-info h1 {margin-top: 0;}

    .pages .grey {padding: 0 30px;}
    .pages .grey .info {margin: 0;}

    .products .quote-large {padding: 30px 0 45px; font-size: 30px;}
    .products .quote-large span {display: block; font-size: 20px;}



    .product-info .price_right {line-height: 1; margin-left: 10px}
    .product-info form {width: 100%; margin: 30px 0 0;}
    .add-to-bag {width: 100%;}

    .more-info {display: block; margin: 0;}
    .more-info > div {margin-top: 20px;}

    .personalization-box .col-1-2 {width: 100%; float: none;}
    .personalization-box input, .personalization-content input {width: 100%; margin-bottom: 10px;}
    .personalization-box button, .personalization-content button {width: 100%;}

    .jconfirm-box-container.personalization-modal {width: auto;}
    .personalization-content img {width: 280px;}
    #personalization-cancel-btn {width: 35%;}
    #personalization-apply-btn {width: 62%;}

	.personalization-photo {max-width: 300px;}
	.iniciais.id1 {top: 110px; right: 56px;}
	.iniciais.id3 {top: 133px; right: 38px;}
	.iniciais.id4 {top: 96px; right: 199px; font-size: 19px;}
	.iniciais.id5 {top: 171px; right: 29px;}
	.iniciais.id6 {top: 120px; right: 90px;}
	.iniciais.id7 {top: 90px; right: 100px;}
	.iniciais.id9 {top: 156px; right: 26px;}
	.iniciais.id10 {top: 190px; right: 115px;}
	.iniciais.id11 {top: 157px; right: 160px;}
	.iniciais.id12 {top: 160px; right: 32px;}
	.iniciais.id13 {top: 162px; right: 32px;}
	.iniciais.id14 {top: 185px; right: 130px;}
	.iniciais.id15 {top: 157px; right: 160px;}
	.iniciais.id16 {top: 162px; right: 32px;}
	.iniciais.id20 {top: 187px; right: 186px;}
	.iniciais.id21 {top: 107px; right: 100px;}

    .iniciais.id22, .iniciais.id26 {top: 148px; right: 30px}
    .iniciais.id23 {top: 180px; right: 170px;}
    .iniciais.id25 {top: 170px; right: 165px;}

    .iniciais.id30,  .iniciais.id31 {top: 140px; right: 27px; font-size: 19px}
    .iniciais.id33 {    top: 157px; right: 160px;}
.iniciais.id34{ top: 180px;
    right: 100px;}


    .related-products > h3 {margin-bottom: 20px;}
    .related-products .product {width: 100%;}
    .related-products .product:nth-child(2n+1) {clear: both;}
    .related-products .product .content {padding: 20px 0;}
    .related-products .product .content h3 {font-size: 20px; line-height: 25px;}
    .related-products .product .content .price {font-size: 16px;}

    .page h2 {margin-top: 10px; padding: 0 10px; font-size: 25px;}
    .page .img-right, .page .small {width: 100%; padding: 0 0 30px;}

    .page .text {padding: 10px; font-size: 14px; line-height: 22px;}

    .jconfirm-box-container.large-modal {width: 100%;}
    .jconfirm .jconfirm-box {margin: 0!important;}
    .jconfirm .col-1-2 {width: 100%; float: none;}
    .jconfirm .loginbox {margin-top: 0;}
    .register {margin-top: 20px;}

    strong {display: inline!important;}

    .left, .right {width: 30px;}
    .left div {font-size: 9px; left: 10px;}
    .right div {font-size: 9px; right: 20px;}

    .basket-overlay {width: auto; padding: 20px; top: 90px; right: 20px; left: 20px;}
    .basket-overlay h1 {margin: 0 0 10px; font-size: 22px;}
    .basket-total-value {margin: 10px 0px 20px;}

    .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: 100px;}
    .order .basket-item-img {display: none;}
    .order .basket-item-content {max-width: 100px; float: left;}
    .order .basket-quantity-header, .order .basket-quantity {width: 100px; 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;}

    #user-address, .billing-address, .shipping-address {padding: 50px 0 20px 0}


	#payment-1 .col-1-4{width:36%;}

    .jconfirm .jconfirm-box div.content {padding: 20px;}
    .jconfirm .jconfirm-box {margin: 0!important;}
    .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%;}


    .clientsarea aside {display: block; min-height: auto!important; height: auto; padding-bottom: 0; position: static;}

    .order-history {padding: 0 15px!important;}

    .order-history-item .info, .order-history-item .details {width: 100%;}
    .order-history-item h3.date {font-size: 14px;}
    .order-history-item .view-order-details {width: 100%; text-align: center;}
    .order-history-item .status {width: 50%; margin-top: 10px; text-align: left;}
    .order-history-item .total {width: 50%; margin-top: 10px;}

    .clientsarea .container {padding: 15px!important;}
    .clientsarea .page h2 {margin-top: 30px!important;}
    .clientsarea .page > span {display: block; padding-top: 20px; clear: both;}

    .order-items td.img {width: 60px;}
    .order-items td.img img {width: 50px!important;}

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

    footer {display: block; padding: 30px 5px;}

    footer div[class^='col'] {width: 50%; padding: 0 15px 25px;}
    footer > div:last-child {width: 100%; padding: 25px 15px 0; clear: both; float: none;}
    .history-made .flexcol {flex: 0 0 50%; padding: 10px;}


}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *, *:before, *:after {background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;}
    a, a:visited {text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    a[href^="#"]:after, a[href^="javascript:"]:after {content: "";}
    pre, blockquote {border: 1px solid #999; page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr, img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    p, h2, h3 {orphans: 3; widows: 3;}
    h2, h3 {page-break-after: avoid;}
}



/*! Lity - v2.2.2 - 2017-07-17
* http://sorgalla.com/lity/
* Copyright (c) 2015-2017 Jan Sorgalla; Licensed MIT */
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.5);
  outline: none !important;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.lity.lity-opened {
  opacity: 1;
}
.lity.lity-closed {
  opacity: 0;
}
.lity * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}
.lity-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.lity-loading .lity-loader {
  opacity: 1;
}
.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}
.lity-content {
  z-index: 9993;
  width: 100%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
}
.lity-loading .lity-content,
.lity-closed .lity-content {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
}
.lity-content:after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
}
.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 20px;
  top: 10px;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}
/* iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  width: 90%;
  max-width: 964px;
}
.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}
.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}
.lity-hide {
  display: none;
}