/* grey = #F2EBF1, dark grey = #B3ADB2, blue = #0468BF, positive green = #0ABF04, negative green = #236E21, orange = #F25430 */

* { padding: 0; margin: 0; font-family: 'Open Sans', Verdana, Helvetica, sans-serif; }

body { background-color: #F2EBF1; }

.top-bar { background-color: #0468BF; display: flex; width: 100%; align-items: center; }
.top-bar>* { padding: 20px; box-sizing: border-box; }
.top-bar>.title { flex-grow: 1; color: #F2EBF1; font-size: 0.9rem; }
.top-bar>.user { width: 200px; flex-grow: 0; text-align: right; font-size: 0.9rem; }
.top-bar>.user a { background-color: #F2EBF1; color: #0468BF; border-radius: 30px; display: inline-block; padding: 3px 10px; text-decoration: none; }

.header { height: 250px; position: relative; }
.header.header-with-image {}
.header.header-with-logo {}
.header.header-with-image.header-with-logo {}
.header>.image {}
.header>.image img {}
.header>.logo { position: absolute; top: 10%; left: 10%; }
.header>.logo img {}

.menu { margin: 20px 0 20px 0; }
.menu>ul { max-width: 800px; margin: 0 auto; list-style-type: none; text-align: center; font-size: 0; }
.menu>ul>li { display: inline-block; padding: 0 15px; }
.menu>ul>li>a { text-decoration: none; padding: 5px 10px; display: block; border-bottom: 2px solid #B3ADB2; font-size: 1.1rem; color: #B3ADB2; transition: color 0.8s, border-color 0.1s; }
.menu>ul>li>a:hover { border-color: #0468BF; color: #0468BF; }
.menu>ul>li.active {  }
.menu>ul>li.active>a { color: #0468BF; border-color: #0468BF; }

.page .text { max-width: 900px; margin: 20px auto; }
.page .text.center { max-width: 400px; text-align: center; }
.page .text h1 { font-size: 1.6rem; font-weight: 300; margin-bottom: 20px; }
.page .text h2 { font-size: 1.2rem; font-weight: 300; }
.page .text pre { font-family: 'Courier New', Courier, monospace; line-height: 2; width: 100%; overflow: auto; border: 1px solid #999999; background-color: #FFF; padding: 20px; box-sizing: border-box;}
.page .text p { line-height: 2; margin-bottom: 20px; }
.page .text a { color: #0468BF; text-decoration: underline; transition: color 0.8s; }
.page .text a:hover { color: #0ABF04; }

.page .table { max-width: 900px; margin: 20px auto; }
.page .table table { width: 100%; border-collapse: collapse; }
.page .table table thead th { text-align: left; padding: 10px; }
.page .table table tr { }
.page .table table tr td { background-color: #FFF; padding: 10px; border-top: 2px solid #F2EBF1; border-bottom: 2px solid #F2EBF1; }
.page .table table tr td button { color: #0468BF; background-color: #FFF; text-decoration: underline; cursor: pointer; font-size: 0.9rem; border: 0 none; }


.page .form  {}
.page .inline-form { display: inline-block;}
.page .form.form-container { max-width: 900px; margin: 20px auto; }
.page .form.form-center { max-width: 400px; margin: 20px auto; text-align: center; }

.page .form .form-row { margin: 20px 20px 20px 0; }
.page .form .form-row .label { display: block; padding-bottom: 5px; }
.page .form .form-row .label label { color: #000; }

.page .form .form-row input[type="text"],
.page .form .form-row input[type="email"],
.page .form .form-row textarea,
.page .form .form-row select,
.page .form .form-row.collection ul { width: 100%; max-width: 700px; padding: 10px 10px; border-radius: 2px; border: 0 none; box-sizing: border-box; }

.page .form .form-row input[type="text"]:focus,
.page .form .form-row input[type="email"]:focus,
.page .form .form-row select:focus,
.page .form .form-row textarea:focus { box-shadow: 0px 0px 40px -10px rgba(0,0,0,0.5); outline: 0 none; }

.page .form .form-row select { width: 150px; padding: 10px 10px; }
.page .form .form-row input[type="text"].title { font-size: 1.4rem; }
.page .form .form-row input[type="text"].money { width: 100px; }
.page .form .form-row textarea { height: 200px; }
.page .form .form-row.collection { }
.page .form .form-row.collection ul { border-radius: 2px; border: 1px solid #CCC; list-style-type: none; padding: 0; background-color: #FFF; }
.page .form .form-row.collection ul li { }
.page .form .form-row.collection ul li input { border-bottom: 1px dotted #CCC; border-radius: 0px; }
.page .form .form-row.collection ul li input:focus { box-shadow: none; border-bottom-color: #666; }
.page .form .form-row.collection button.add_item_link { background-color: #0468BF; color: #FFF; border-radius: 30px; padding: 4px 7px; display: inline-block; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; font-weight: 400; transition: 0.4s; border: 0 none; margin: 5px; cursor: pointer; }

.page .form .form-row .widget-with-label {}
.page .form .form-row .widget-with-label.checkbox {}
.page .form .form-row .widget-with-label.checkbox .label { display: inline; position: relative; z-index: 2; }
.page .form .form-row .widget-with-label.checkbox .label label { padding-left: 30px; }
.page .form .form-row .widget-with-label.checkbox .label label:before { position: absolute; left: 0; top: 0; height: 20px; width: 20px; content: ""; display: block; border: 2px solid #B3ADB2; border-radius: 2px; z-index: 0; }
.page .form .form-row .widget-with-label.checkbox input { height: 1px; width: 1px; opacity: 0.001; }
.page .form .form-row .widget-with-label.checkbox input:checked+.label label:before { background-color: #FFF; }
.page .form .form-row .widget-with-label.checkbox input:checked+.label label:after { position: absolute; left: 4px; top: 4px; height: 16px; width: 16px; content: ""; display: block; background-color: #0468BF; border-radius: 2px; z-index: 1; }
.page .form .buttons { padding-top: 20px; }
.page .form .buttons button { background-color: #0468BF; color: #FFF; border-radius: 30px; padding: 8px 15px; display: inline-block; text-decoration: none; font-size: 1.1rem; text-transform: uppercase; font-weight: 400; transition: 0.4s; border: 0 none; margin-right: 30px; cursor: pointer; }
.page .form .buttons button span { display: inline-block; position: relative; transition: 0.4s; }
.page .form .buttons button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -15px; transition: 0.5s; }
.page .form .buttons button:hover { background-color: #0ABF04; }
.page .form .buttons button:hover span { padding-right: 15px; }
.page .form .buttons button:hover span:after { opacity: 1; right: 0; }
.page .form .buttons .cancel { display: inline-block; color: #B3ADB2; transition: 0.4s;}
.page .form .buttons .cancel:hover { color: #000; }
.page .form .submit-disclaimer { font-size: 0.8rem; margin-top: 20px; text-align: center; }

.page .form .errors { font-weight: bold; list-style-type: none; color: #F25430; margin-top: 20px; }
.page .form .form-row .errors { margin-top: 0; margin-bottom: 10px; }


.page>.actions { margin: 20px 40px 20px 40px; border-bottom: 2px solid #F25430; border-top: 2px solid #F25430; background-color: transparent; padding: 20px; }
.page>.actions a,
.page>.actions button { text-decoration: none; font-weight: 600; background-color: #236E21; color: #FFFFFF; display: inline-block; border-radius: 30px; padding: 8px 15px; transition: 0.4s; border: 0 none; cursor: pointer; }
.page>.actions a span {}
.page>.actions a:hover,
.page>.actions button:hover { background-color: #0ABF04; }
.page>.actions label { font-size: 0.8rem; margin-right: 10px; }
.page>.actions label input[type="text"] { width: 100px; padding: 5px; }
.page>.actions label select { width: 150px; padding: 5px; }
.page>.actions label.checkbox { background-color: #B3ADB2; border-radius: 30px; padding: 4px 7px; }
.page>.actions label.checkbox input[type="checkbox"] { vertical-align: middle; }

.page>.message { background-color: #B3ADB2; max-width: 900px; margin: 20px auto; padding: 20px; box-sizing: border-box; border-radius: 4px; }
.page>.message button { text-decoration: none; font-weight: 600; background-color: #236E21; color: #FFFFFF; display: inline-block; border-radius: 30px; padding: 8px 15px; transition: 0.4s; cursor: pointer; border: 0 none; }
.page>.message button:hover { background-color: #0ABF04; }
.page>.message>.container { display: flex; align-items: center; }
.page>.message>.container>.message { flex-grow: 1; }
.page>.message>.container>.actions { flex-grow: 0; width: 250px; }

.page .cta-button { text-align: center; margin: 20px auto; }
.page .cta-button a { background-color: #0468BF; color: #FFF; border-radius: 30px; padding: 8px 15px; display: inline-block; text-decoration: none; font-size: 1.2rem; text-transform: uppercase; font-weight: 400; transition: 0.4s; }
.page .cta-button a span { display: inline-block; position: relative; transition: 0.4s; }
.page .cta-button a span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -15px; transition: 0.5s; }
.page .cta-button a:hover { background-color: #0ABF04; }
.page .cta-button a:hover span { padding-right: 15px; }
.page .cta-button a:hover span:after { opacity: 1; right: 0; }

.page .product-list { display: flex; list-style-type: none; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin: 20px 20px 20px 20px; }
.page .product-list>li { width: calc(50% - 40px); background-color: #FFF; box-sizing: border-box; position: relative; overflow: hidden; margin: 20px; flex-shrink: 10; border-radius: 1px; transition: 0.5s; }
.page .product-list>li:hover { box-shadow: 0px 0px 40px -10px rgba(0,0,0,0.5); }
.page .product-list>li .thumbnail { width: 100%; padding-top: 40%; position: relative; border-bottom: 1px solid #B3ADB2; }
.page .product-list>li .thumbnail .img { width: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; }
.page .product-list>li .thumbnail .img img { width: 100%; }
.page .product-list>li .content { padding: 15px 20px; }
.page .product-list>li .content h2 a { text-decoration: none; color: #000; }
.page .product-list>li .content p { color: #333; }
.page .product-list>li .content .variants { color: #999999; margin: 10px 0 0 0; font-size: 0.9rem; text-align: center; }
.page .product-list>li .content .nav { padding-top: 10px; }
@media screen and (max-width: 681px) {.page .product-list>li .content .nav form:not(:first-child) { margin-top: 10px; }}
.page .product-list>li .content .nav button.cta, .page .product-list>li .content .nav a.cta { background-color: #0468BF; color: #FFF;  border: none; border-radius: 30px; padding: 8px 15px; display: inline-block; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; font-weight: 400; transition: 0.4s; }
.page .product-list>li .content .nav button.cta span, .page .product-list>li .content .nav a.cta span { display: inline-block; position: relative; transition: 0.4s; }
.page .product-list>li .content .nav button.cta span:after, .page .product-list>li .content .nav a.cta span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -15px; transition: 0.5s; }
.page .product-list>li .content .nav button.cta:hover, .page .product-list>li .content .nav a.cta:hover { background-color: #0ABF04; cursor: pointer;}
.page .product-list>li .content .nav button.cta:hover span, .page .product-list>li .content .nav a.cta:hover span { padding-right: 15px; }
.page .product-list>li .content .nav button.cta:hover span:after, .page .product-list>li .content .nav a.cta:hover span:after { opacity: 1; right: 0; }
.page .product-list>li.invisible { filter: grayscale(80%) opacity(50%); }

.page .variant-list {}
.page .variant-list>ul { list-style-type: none; }
.page .variant-list>ul>li { background-color: #FFF; margin: 20px auto; max-width: 900px; box-sizing: border-box; display: flex; align-items: stretch;  border-radius: 1px; font-size: 0; }
.page .variant-list>ul>li:hover { box-shadow: 0px 0px 40px -10px rgba(0,0,0,0.5); }
.page .variant-list>ul>li>.info { flex-grow: 1; padding: 20px; }
.page .variant-list>ul>li>.info h3 { font-size: 1.2rem; }
.page .variant-list>ul>li>.info .badge { background-color: #F25430; color: #FFFFFF; font-size: 0.7rem; display: inline-block; font-weight: 600; padding: 1px 6px; border-radius: 30px; margin: 3px 0; }
.page .variant-list>ul>li>.price { flex-grow: 0; width: 100px; border-left: 1px solid #B3ADB2; padding: 20px; font-size: 1.2rem; text-align: right; }
.page .variant-list>ul>li>.actions  { flex-grow: 0; width: 150px; border-left: 1px solid #B3ADB2; padding: 20px; font-size: 0.8rem; }
.page .variant-list>ul>li>.actions a { color: #0468BF; }
.page .variant-list>ul>li>.actions a:hover { color: #0ABF04; }
.page .variant-list>ul>li.invisible { filter: grayscale(80%) opacity(50%); }

.page .order-list {}
.page .order-list>ul { list-style-type: none; }
.page .order-list>ul>li { background-color: #FFF; margin: 20px 40px; box-sizing: border-box; display: flex; align-items: stretch;  border-radius: 1px; font-size: 0; }
.page .order-list>ul>li:hover { box-shadow: 0px 0px 40px -10px rgba(0,0,0,0.5); }
.page .order-list>ul>li>div { font-size: 1.0rem; padding: 10px; }
.page .order-list>ul>li>div>a.full-area-link { display: block; width: 100%; height: 100%; margin: -10px; padding: 10px; color: #000; }
.page .order-list>ul>li>div>a.full-area-link:hover { color: #0468BF; }
.page .order-list>ul>li>div.number { flex-grow: 0; width: 50px; border-right: 1px solid #F2EBF1; }
.page .order-list>ul>li>div.number>a { font-size: 0.8rem; font-family: 'Courier New', Courier, monospace; color: #000; text-decoration: none;}
.page .order-list>ul>li>div.customer { flex-grow: 1; width: 200px; border-right: 1px solid #F2EBF1; }
.page .order-list>ul>li>div.amount { flex-grow: 0; width: 30px; border-right: 1px solid #F2EBF1; font-size: 1.2rem; text-align: right; }
.page .order-list>ul>li>div.product { flex-grow: 1; width: 200px; border-right: 1px solid #F2EBF1; }
.page .order-list>ul>li>div.product .sub { font-size: 0.9rem; }
.page .order-list>ul>li>div.status { flex-grow: 0; width: 170px; border-right: 1px solid #F2EBF1; font-size: 0; text-align: center;}
.page .order-list>ul>li>div.status .bar { display: flex; margin: 0 auto; width: 150px; margin-bottom: 5px; }
.page .order-list>ul>li>div.status .bar>div { width: 50px; height: 20px; background-color: #CCC; border-right: 1px dotted #FFF; }
.page .order-list>ul>li>div.status .bar>div:first-child { border-radius: 20px 0 0 20px; }
.page .order-list>ul>li>div.status .bar>div:last-child { border-right: 0 none; border-radius: 0 20px 20px 0; }
.page .order-list>ul>li>div.status .bar>div.active { background-color:  #0ABF04;}
.page .order-list>ul>li>div.status .description { font-size: 0.7rem; }
.page .order-list>ul>li>div.action { flex-grow: 0; width: 210px; font-size: 0.8rem; text-align: center; }
.page .order-list>ul>li>div.action button { background-color: #0468BF; color: #FFF; border-radius: 30px; padding: 8px 15px; display: inline-block; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; font-weight: 400; transition: 0.4s; border: 0 none; }
.page .order-list>ul>li>div.action button span { display: inline-block; position: relative; transition: 0.4s; }
.page .order-list>ul>li>div.action button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -15px; transition: 0.5s; }
.page .order-list>ul>li>div.action button:hover { background-color: #0ABF04; }
.page .order-list>ul>li>div.action button:hover span { padding-right: 15px; }
.page .order-list>ul>li>div.action button:hover span:after { opacity: 1; right: 0; }

.page .counters { max-width: 900px; margin: 20px auto; }
.page .counters ul { display: flex; width: 100%; align-items: top; justify-content: center; list-style-type: none; }
.page .counters ul li { width: 150px; margin: 20px; }
.page .counters ul li a { text-decoration: none; color: #000; }
.page .counters ul li a .counter { position: relative; width: 100px; height: 100px; display: block; background-color: #0468BF; border-radius: 100px; margin: 0 auto 20px auto; transition: 0.4s; }
.page .counters ul li a .counter span { color: #FFF; position: absolute; top: 50%; left: 0; text-align: center; width: 100%; margin-top: -20px; font-size: 30px; }
.page .counters ul li a .description { font-size: 0.9rem; text-align: center; }
.page .counters ul li a:hover { }
.page .counters ul li a:hover .counter { background-color: #0ABF04; }
.page .counters ul li a:hover .description {}

.page .pagination { max-width: 900px; margin: 20px auto; display: flex; }
.page .pagination .prev { width: 150px; text-align: left; flex-grow: 0; }
.page .pagination .total { text-align: center; flex-grow: 1; }
.page .pagination .next { width: 150px; text-align: right; flex-grow: 0; }
.page .pagination a { background-color: #236E21; color: #FFF; border-radius: 30px; padding: 3px 8px; text-decoration: none; transition: 0.4s;}
.page .pagination a:hover { background-color: #0ABF04; }