﻿

*:before, *:after {
	box-sizing: border-box;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea, select {
	height: 50px;
	border: none;
	padding: 0 20px;
	vertical-align: middle;
	font-size: 15px;
    color: #909090;
    font-family: 'Lato', sans-serif;
    background: #f0f0f0;
}
textarea {
    min-height: 150px;
    padding: 20px;
}
select {
	min-width: 70px;
    -webkit-appearance: none; 
    -moz-appearance: none;
    /*appearance: none;*/
    padding: 0 35px 0 20px;
    background-image: url('../img/arrow.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    text-transform: none;
}
select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	background: #f0f0f0;
}
input:-webkit-autofill, 
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f0f0f0 inset !important;
    -webkit-text-fill-color: #909090;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
textarea:disabled, select:disabled {
    cursor: not-allowed;
    background-color: #e2e2e2;
}
input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + *,
input[type="radio"] + * {
	vertical-align: middle;
}
input[type="button"],
input[type="submit"],
button {
	cursor: pointer;
}
label, label + * {
	vertical-align: middle;
}
button {
	font: normal 15px 'Fjalla One', sans-serif;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
button[disabled]  {
    cursor: not-allowed;
    opacity: .5;
}

.master-wrapper-content {
	position: relative;
	z-index: 0; /* giving priority to header and header-menu */
    /*max-width: 90%;*/
    margin: 0 auto;
    /*padding: 80px 0 30px;*/
}

.master-column-wrapper:after {
	content: "";
	display: block;
	clear: both;
}
.center-1 {
    padding: 20px;
}
.center-2, .side-2 {
	margin: 0 0 50px;
}

.page .home-page {
    max-width: 100%;
}
.page-title {
    padding: 8px 0;
    margin: 0 0 30px;
    border-bottom: 1px solid #d4d4d4;
    text-align: center;
    position: relative;
}
.page-title:before {
    content: '';
    width: 75px;
    height: 3px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -2px;
    background: #f3cc2e;
    -o-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
}
.page-title h1 {
    font-size: 35px;
}
.page:after,
.page-title:after,
.page-body:after {
	content: "";
	display: block;
	clear: both;
}
.buttons {
	margin: 0 0 20px;
	text-align: center;
}
.category-description ul,
.manufacturer-description ul,
.full-description ul,
.topic-html-content ul,
.topic-page ul,
.post-body ul,
.custom-tab ul {
	margin: 12px 0;
	padding: 0 0 0 36px;
	list-style: disc;
}
.category-description ol,
.manufacturer-description ol,
.full-description ol,
.topic-html-content ol,
.topic-page ol,
.post-body ol,
.custom-tab ol {
	margin: 12px 0;
	padding: 0 0 0 36px;
	list-style: decimal;
}
.category-description p,
.manufacturer-description p,
.vendor-description p,
.topic-html-content p,
.topic-page p,
.custom-tab p {
	margin: 10px 0;
}
.flyout-cart {
	display: none;
}

.no-data {
    text-align: center;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    line-height: 25px;
    color: #909090;
    margin: 0 0 10px;
}

/

/*********** GLOBAL FORMS ***********/

.fieldset, .section {
	position: relative;
    padding: 30px;
    max-width: 650px;
    margin: auto;
}
.fieldset .title,
.section .title {
    margin: 0 auto 25px;
    border-bottom: 1px dashed #ccc;
    padding: 0 0 15px;
    font-size: 16px;
    letter-spacing: 2px;
    max-width: 650px;
}
.form-fields {
	position: relative;
}
.form-fields:after {
    content: '';
    display: block;
    clear: both;
}
.inputs {
	position: relative;
	margin: 0 auto 15px;
	text-align: left;
	white-space: nowrap; /*fix for 'required' elements*/
    font-size: 0;
    width: 650px;
    max-width: 100%;
}
.inputs:after {
	content: "";
	display: block;
	clear: both;
}
.inputs label {
	display: block;
	width: 100%;
	margin: 0 0 7px;
	text-align: left;
    font-size: 15px; /*reset zeroing*/
}
.inputs input[type="text"],
.inputs input[type="password"],
.inputs input[type="email"],
.inputs input[type="tel"],
.inputs select, .inputs textarea {
	width: 100%;
	max-width: 100%;
    vertical-align: middle;
    text-transform: none;
}

.inputs .option-list {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
	white-space: normal;
    text-align: left;
}
.inputs .option-list li {
	float: left;
	margin: 0 15px 0 0;
}
.inputs input[type='checkbox'],
.inputs input[type='radio'] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.inputs input[type='checkbox'] ~ label,
.inputs input[type='radio'] ~ label {
    position: relative;
    display: block;
    padding: 5px 5px 5px 25px;
    margin: 0;
    text-align: left;
    font-family: 'Lato', sans-serif;
    text-transform: none;
    color: #909090;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.inputs input[type='checkbox'] ~ label:before,
.inputs input[type='radio'] ~ label:before  {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1px solid #ededed;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.inputs input[type='checkbox']:checked ~ label:after,
.inputs input[type='radio']:checked ~ label:after {
    content: '';
    display: block;
    background: #f3cc2e;
    position: absolute;
    top: 0;
    width: 11px;
    height: 11px;
    left: 3px;
    bottom: 0;
    margin: auto;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.inputs input[type='radio'] ~ label:before,
.inputs input[type='radio']:checked ~ label:after {
    border-radius: 50%;
}

.inputs .toolbar {
    margin: 0 0 5px;
}
.inputs.reversed {
	margin: 0 auto 15px;
	text-align: center;
}
.required {
	margin: 0 -6px 0 3px;
	font-size: 13px;
	color: #e75862;
    display: inline-block;
    vertical-align: middle;
    height: 11px;
}
.message-error {
    line-height: 20px;
	color: #e75862;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    margin: 0 0 15px;
}
.field-validation-error,
.username-not-available-status,
.poll-vote-error, .password-error {
    padding: 3px 0 0;
	display: block;
	font-size: 13px;
    line-height: 20px;
	color: #e75862;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    position: relative;
}
.field-validation-error:empty,
.username-not-available-status:empty,
.poll-vote-error, .password-error:empty {
    display: none;
}
.field-validation-error:before,
.username-not-available-status:before,
.poll-vote-error, .password-error:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e75862;
}
.field-validation-valid,
.username-available-status {
    padding: 3px 0 0;
	display: block;
	font-size: 13px;
    line-height: 20px;
	color: #3eaf5a;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    position: relative;
}
.field-validation-valid:before,
.username-available-status:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #3eaf5a;
}
.field-validation-valid:empty,
.username-available-status:empty {
    display: none;
} 
.captcha-box {
	margin: 0 0 15px;
	text-align: center;
	line-height: 0; /*firefox line-height bug fix*/
}
.captcha-box > div {
	display: inline-block;
}
.captcha-box input {
	height: auto;
}


/*********** HEADER ***********/


.ico-register:before {
    font-family: "venture-font";
    text-transform: none;
    content: "k";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}
.ico-login:before {
    font-family: "venture-font";
    text-transform: none;
    content: "d";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}
.ico-wishlist:before {
    font-family: "venture-font";
    text-transform: none;
    content: "f";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}
.ico-account:before {
    font-family: "venture-font";
    text-transform: none;
    content: "h";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}
.ico-logout:before {
    font-family: "venture-font";
    text-transform: none;
    content: "i";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}
.ico-inbox:before {
    font-family: "venture-font";
    text-transform: none;
    content: "j";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}


/***** RESPONSIVE GRIDS ******/

@media all and (max-width: 480px) {


    .item-box {
        width: 48%; /*two per row*/
        margin-left: 3.75%;
    }

    .category-grid .item-box {
        width: 100%;
    }

    .item-box:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }

    .variant-overview-buttons.overview-buttons .qty-label {
        display: none;
    }

    .variant-overview .add-to-cart-button {
        padding: 15.5px;
        width: 140px;
    }

    .pagination-container ul li a {
        /*padding: 6px;*/
        line-height: 0.8 !important;
        min-width: unset !important;
        font-size: 18px !important;
    }

    .pagination > * {
        margin-left: 6px !important;
    }

    .breadcrumbs-custom-inset, html.rd-navbar-fixed-linked .page {
        /*padding-top: 56px;*/
    }
}

/*******Login Page******************/

.page {
    min-height: 300px;
    text-align: center;

}

.page .login-page 
{
    background: #fff;
    position: relative;
    z-index: 0;    
    margin: 0 auto;
    padding: 30px;
}

.page-title {
    padding: 8px 0;
    margin: 0 0 30px;
    border-bottom: 1px solid #d4d4d4;
    text-align: center;
    position: relative;
}

.page-title h1 {
    font-size: 35px;
}



@media (min-width: 768px) {
    .page {
        clear: both;
        text-align: left;
    }

    .login-page .customer-blocks {
        overflow: hidden;
        display: table;
        width: 100%;
    }
    .login-page .customer-blocks .buttons {
        position: absolute;
        bottom: 0;
        right: 1.5%;
        left: 0;
        height: 90px;
    }
   
    .login-page .new-wrapper, .login-page .returning-wrapper {
        display: table-cell;
        width: 50%;
        margin: 0;
        padding: 0 0.75% 90px 0;
        position: relative;
        background: #fff;
        box-shadow: none;
        border: 30px solid #f0f0f0;
    }
    

    .login-page .customer-blocks .returning-wrapper .buttons {
        left: 1.5%;
    }

    .login-page .customer-blocks .buttons {
        position: absolute;
        bottom: 0;
        right: 1.5%;
        left: 0;
        height: 90px;
    }

    .login-page .new-wrapper .inputs, .login-page .returning-wrapper .inputs {
        width: auto;
    }

    /*.master-wrapper-content {
        padding: 80px 0 80px !important;
    }*/
}

@media (min-width: 1201px) {
    .login-page .title {
        padding: 45px 50px 0;
    }

    .login-page .text {
        padding: 0 50px;
    }

    .master-wrapper-content {
        margin: auto;
        max-width: 100%;
    }
}

.login-page .title {
    padding: 30px 30px 0;
    margin: 0 0 30px;
    font-size: 16px;
    letter-spacing: 2px;
    border: none;
}

.login-page .text {
    padding: 0 30px;
    margin: 0 0 30px;
    text-transform: none;
    line-height: 25px;
    color: #909090;
    font-family: 'Lato', sans-serif;
}

.login-page .buttons {
    margin: 0;
    padding: 20px;
    border-top: 1px dashed #ccc;
}
.login-page .form-fields {
    padding: 0 30px;
    margin: 0 0 50px;
}

.login-page .topic-block {
    margin: 50px 0 20px;
}

.login-page .inputs.reversed label {
    float: left;
    width: auto;
}
.login-page .inputs.reversed * {
    font-size: 15px;
}

.login-page .inputs.reversed .forgot-password {
    float: right;
    font-family: 'Lato', sans-serif;
    text-transform: none;
    color: #909090;
    padding: 5px 0;
    color: #f3cc2e;
}


/*********Register Page**********/

.light-theme .registration-page .button-1, .light-theme .registration-result-page .button-1, .light-theme .login-page .button-1, .light-theme .password-recovery-page .button-1, .light-theme .account-page .button-1, .light-theme .return-request-page .button-1, .light-theme .user-agreement-page .button-1 {
    color: #fff;
}
.registration-page .button-1, .registration-result-page .button-1, .login-page .button-1, .password-recovery-page .button-1, .account-page .button-1, .return-request-page .button-1, .user-agreement-page .button-1 {
    padding: 15px 35px;
    border: none;
    background: #f3cc2e;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #323232;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.registration-page .page-body {
    background: #fff;
    box-shadow: 0 0 14px rgb(0 0 0 / 6%);
    max-width: 750px;
    margin: auto;
}


.registration-page .buttons {
    margin: 0;
    padding: 20px;
    border-top: 1px dashed #ccc;
}


/*****Customer Info*****/
.customer-pages-body .master-wrapper-content {
    padding: 170px 0 80px;
}

@media (min-width: 1201px) {
    .master-wrapper-content {
        /*width: 1200px;*/
        margin: auto;
        max-width: 100%;
    }
}

@media (min-width: 481px) {
    .customer-pages-body .master-column-wrapper {
        max-width: 850px;
        margin: auto;
        position: relative;
        padding: 0 0 0 50px;
    }
}
@media (min-width: 481px) {
    .customer-pages-body .side-2 {
        /*width: 50px;*/
        position: absolute;
        margin: 0 !important;
        right: 100%;
        margin-right: -50px;
        top: 50px;
    }

    .customer-pages-body .center-2 {
        width: 100%;
        border-left: 3px solid #f3cc2e;
        z-index: 2;
        position: relative;
    }
}
.customer-pages-body .side-2 {
    margin: 0 0 20px;
    /*padding-top: 59px;*/
}

@media (min-width: 1201px) {
    .side-2 {
        float: left;
        width: 23%;
        margin-top: 30px;
    }
}

.center-2, .side-2 {
    margin: 0 0 50px;
}

/*@media (min-width: 481px) {
    .customer-pages-body .block {
        background: none;
        box-shadow: none;
    }
}*/

.customer-pages-body .inputs{
    padding: 15px;
}

.customer-pages-body .block {
    float: none;
    width: auto;
    margin: 0;
    text-align: center;
}

.customer-pages-body .block {
    background: #f3cc2e;
}

.customer-pages-body ul{
    padding: 10px;
}

.customer-pages-body ul li{
    background: #fff;    
}

.listbox .list .active{
    background: #f3cc2e;    
    border: 1px solid #fff;
}

@media (min-width: 1201px) {
    .block {
        float: none;
        width: auto;
        background: none;
        box-shadow: none;
        margin: 0 0 20px;
    }
}
@media (min-width: 768px) {
    .block {
        width: 31.3333%;
        margin: 0 1% 2%;
    }
}
@media (min-width: 481px) {
    .block {
        float: left;
        width: 48%;
        margin: 0 1% 2%;
        text-align: left;
    }
}
.block {
    margin: 0 0 9px;
    text-align: left;
    background: #fff;
    position: relative;
    box-shadow: 0 0 14px rgb(0 0 0 / 6%);
}

@media (min-width: 481px) {
    .customer-pages-body .block .listbox {
        display: block !important;
        background: none;
        border: none;
    }
}

@media (min-width: 1201px) {
    .block .listbox {
        display: block !important;
        border: none;
        background: none;
    }
}

.block .listbox {
    /*display: none;*/
    border: 5px solid #fff;
    background: #f3cc2e;
    border-width: 0 5px 5px;
    color: #909090;
}

.page-title:before {
    content: '';
    width: 75px;
    height: 3px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -2px;
    background: #f3cc2e;
    -o-transform: skewX(-30deg);
    -webkit-transform: skewX( -30deg );
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX( -30deg );
}

/********Customer review***********/
.product-review-item {
    padding: 10px 20px;
}

.pagination-container{
    padding: 20px;
}

.pagination-container ul li a {
    font-size: 16px;
}

/********Order History***********/
.order-item{
    padding: 10px;
}

.order-item .title {
    margin: 0 10px 0 !important;
    padding: 0 !important;
}

/*************Courses***************/

.pagination-container ul li a {
    display: inline-block;
    border-radius: 50%;
    padding: 8px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .075em;
    font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;    
    background-color: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 17%);
    transition: all 0.3s ease-in-out;
    min-width: 45px;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
}

.buttons {
    margin: 0 0 20px;
    text-align: center;
}

.inputs {
    position: relative;
    margin: 0 auto 15px;
    text-align: left;
    white-space: nowrap;
    font-size: 0;
    width: 650px;
    max-width: 100%;
}

.inputs label {
    display: block;
    width: 100%;
    margin: 0 0 7px;
    text-align: left;
    font-size: 15px;
}

.gender span {
    display: inline-block;
    margin: 0 15px 0 0;
}

.inputs input[type="text"], .inputs input[type="password"], .inputs input[type="email"], .inputs input[type="tel"], .inputs select, .inputs textarea {
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
    text-transform: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
    height: 50px;
    border: none;
    padding: 0 20px;
    vertical-align: middle;
    font-size: 15px;
    color: #909090;
    font-family: 'Lato', sans-serif;
    background: #f0f0f0;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
    border-radius: 0;
    font: normal 15px 'Fjalla One', sans-serif;
}

input[type="button"], input[type="submit"], button {
    cursor: pointer;
}
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}


.inputs input[type='checkbox'], .inputs input[type='radio'] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

input[type="checkbox"], input[type="radio"], input[type="checkbox"] + *, input[type="radio"] + * {
    vertical-align: middle;
}

.inputs input[type='checkbox'] ~ label, .inputs input[type='radio'] ~ label {
    position: relative;
    display: block;
    padding: 5px 5px 5px 25px;
    margin: 0;
    text-align: left;
    font-family: 'Lato', sans-serif;
    text-transform: none;
    color: #909090;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inputs input[type='checkbox'] ~ label:before, .inputs input[type='radio'] ~ label:before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1px solid #ededed;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}


.fieldset .title, .section .title {
    margin: 0 auto 25px;
    border-bottom: 1px dashed #ccc;
    padding: 15px 0;
    font-size: 16px;
    letter-spacing: 2px;
    max-width: 650px;
}

.field-validation-valid:empty, .username-available-status:empty {
    display: none;
}
.field-validation-valid, .username-available-status {
    padding: 3px 0 0;
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #3eaf5a;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    position: relative;
}


.date-picker-wrapper {
    display: inline-block;
    width: 650px;
    max-width: 100%;
}
.header-link-wrapper {
    height: 38px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.ico-login:before {
    font-family: "venture-font";
    text-transform: none;
    content: "d";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}

.ico-register:before {
    font-family: "venture-font";
    text-transform: none;
    content: "k";
    width: 25px;
    font-size: 14px;
    display: inline-block;
}

