.oc3oc {

    width: 400px;

    margin: 0 auto;

    position: relative;

}

.oc3oc-head {

    padding: 15px;

    background: #eee;

    color: #000;

    font-size: 20px;

    border-radius: 8px 8px 0px 0px;

    -moz-border-radius: 8px 8px 0px 0px;

    -webkit-border-radius: 8px 8px 0px 0px;

    border: 0px solid #000000;

}

.oc3oc-body {

    padding: 15px;

    background: #fff;

}

.oc3oc-footer {

    padding: 15px;

    background: #eee;

    color: #000;

    border-radius: 0px 0px 8px 8px;

    -moz-border-radius: 0px 0px 8px 8px;

    -webkit-border-radius: 0px 0px 8px 8px;

    border: 0px solid #000000;

}

.oc3oc-main-image, .oc3oc-thumbs {

    display: inline-block;

    vertical-align: top;

}

.oc3oc-main-image {

    margin-right: 5px;

}

.oc3oc-hor .oc3oc-main-image {

    margin-right: 0;

}

.oc3oc-main-image img {

    max-width: 100%;

    height: auto;

}

.oc3oc-thumbs {

    margin: 0 0 5px 5px;

    float: right;

}

.oc3oc-hor .oc3oc-thumbs img:nth-child(6n+6){

    margin-left: 0;

}



.oc3oc-images img {

    margin-top: 10px;

    padding: 4px;

    border: 1px solid #ddd;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    background: #fff;

}

.oc3oc-main-image img {

    margin-top: 0;

}

.oc3oc-images img {

    display: block;

}





.oc3oc-images img:hover, .oc3oc-images img.active {

    border-color: #000;

    cursor:pointer;

}

.oc3oc-images .oc3oc-main-image img:hover {

    border-color: #ddd;

    cursor: auto;

}

.oc3oc-pname {

    color: #000;

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 10px;

    line-height: 22px;

}

.oc3oc-price {

    width: 43%;

}

.oc3oc-price.without-qty {

    width: 100%;

    text-align: center;

    padding-bottom: 10px;

    font-weight: bold;

}

.oc3oc-price, .oc3oc-special {

    font-size: 22px;

    line-height: 26px;

}

.oc3oc-special span {

    font-size:14px; 

}

.oc3oc-price-wrap {

    margin: 0 0 5px 0;

    padding-bottom: 5px;

    display: table;

    width: 100%;

    border-bottom: 1px solid #eee;

}

.oc3oc .oc3oc-price-wrap > div {

    display: table-cell;

    vertical-align: middle;

}

.oc3oc-price-wrap label {

    display: block;

    line-height: 16px;

    font-weight: normal;

    font-size: 12px;

}

.oc3-left, .oc3-right {

    line-height: 26px;

}

.oc3oc-discounts {

    list-style: none;

    text-align: left;

    padding: 5px 0 10px 0;

    margin: 0;

    line-height: 14px;

    border-bottom: 1px solid #eee;

    margin-bottom: 10px;

}

.oc3oc-qty {

    min-width: 60px;

    text-align: center;

    width: 14%;

    padding-top: 2px;

}

.oc3oc-qty input {

    text-align: center;

    display: inline-block;

    padding: 2px 3px;

    width: auto;

    max-width: 40px;

    height: 30px;

    border-color: #ffcd18;

    border-radius: 0;

}

.oc3oc-qty input:focus, .oc3oc-qty input:active, .oc3oc-qty .btn:active, .oc3oc-qty .btn:focus {

    outline: none;

}

.oc3oc-qty .btn {

    max-height: 30px;

    line-height: 12px !important;

    padding: 8px !important;

}

.oc3oc-qty .btn .fa {

    font-size: 10px;

}

.oc3oc-total {

    font-size: 22px;

    line-height: 26px;

    width: 43%;

    text-align: right;

}

.oc3oc-control {
border: 1px solid #f0f0f0;
	width: 100%;
	padding: 10px 15px;
	border-radius: 5px;
	outline: none;
	transition: all 0.2s;

}

.oc3oc-form-group {

    padding: 10px 0;

}

.clearfix:before, .clearfix:after {

    display: table;

    content: " ";

}

.oc3oc .btn {

    display: inline-block;

    padding: 6px 12px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    -ms-touch-action: manipulation;

    touch-action: manipulation;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background-image: none;

    border: 1px solid transparent;

    border-radius: 4px;

    text-shadow: none;

}

.oc3oc .btn:hover {

    text-decoration: none;

}

.oc3oc .btn:active {

    background-image: none;

    outline: 0;

    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

}

.oc3oc .btn-success {

    color: #fff;

    background-color: #5cb85c;

    border-color: #4cae4c;

    font-weight: bold;

}

.oc3oc .btn-success:hover {

    background-color: #449d44;

    border-color: #398439;

}

.oc3oc .btn-success:active {

    background-color: #449d44;

    border-color: #398439;

}

.oc3oc .btn-success:focus {

    color: #fff;

    background-color: #449d44;

    border-color: #255625;

}

.oc3oc .btn-block {

    display: block;

    width: 100%;

}

.oc3oc-show-descr {

    font-size: 12px;

    display: inline-block;

    border-bottom: 1px dashed #000;

    color: #000;

    cursor: pointer;

    line-height: 12px;

    vertical-align: top;

    text-decoration: none !important;

}

.oc3oc-show-descr:hover {

   color: #000;

   border: none;

   text-decoration: none !important;

}

.oc3oc-comment .oc3oc-control {

    height: 54px;

}

.oc3-control-label {

    margin-bottom: 0;

    font-size: 14px;

    font-weight: bold;

}

.oc3oc-special {

    text-decoration: line-through;

    font-size: 14px;

    color: #999;

    line-height: 14px;

}

.oc3oc-discounts {

    font-size: 12px;

}

.oc3oc-options-title {

    font-size: 16px;

    margin-top: 0;

}

.oc3oc-text-right {

    text-align: right;

}

table.oc3oc-option {

    width: 100%;

}

table.oc3oc-option td {

    line-height: 25px;

    height: 25px;

    vertical-align: middle;

}

table.oc3oc-option td input {

    vertical-align: middle;

    margin: 0;

}

.oc3oc-option {

    margin-bottom: 10px;

}

table.oc3oc-option td label {

    margin: 0;

}

.oc3oc-option .input-td {

    width: 20px;

}

.oc3oc-option-title {

    font-weight: bold;

    margin-bottom: 0;

}

.oc3oc-description-wrap {

    margin-bottom: 5px;

}

.oc3oc-description {

    display: none;

}

.oc3oc-description img {

    max-width: 100% !important;

}

.oc3oc-options {

    padding-bottom: 10px;

    margin-bottom: 10px;

    border-bottom: 1px solid #eee;

}

.oc3oc .btn-danger {

    font-weight: bold;

}



div.oc3oc-required .oc3-control-label:before {

    content: '* ';

    color: #F00;

    font-weight: bold;

}

.has-error .oc3oc-control {

    border-color: #a94442;

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

}

.has-error .oc3oc-control:focus {

    border-color: #843534;

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;

}

.oc3oc-error {

    color: #a94442;

}

.oc3oc-stock {

    display: inline;

    padding: .2em .6em .3em;

    font-weight: 700;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: .25em;

    background-color: #d9534f;

}

.oc3oc-footer p {

    line-height: 13px;

    text-align: center;

}

.oc3oc-footer p input {

    margin: 0;

    vertical-align: middle;

}

.oc3oc-footer p a {

    text-decoration: underline;

}

.oc3oc-footer p a:hover {

    text-decoration: none;

}

.btn-oc3oc-wrap {

    position: relative;

    border-top: 1px solid #ddd;

    background-color: #eee;

    overflow: auto;

}

.btn-oc3oc-wrap button {

    display: block !important;

    text-align: center!important;

    width: 100% !important;

    border: none;

    background-color: #eee;

    line-height: 38px;

    font-weight: bold;

    text-transform: uppercase;

    color: #888;

}

.btn-oc3oc-wrap button:hover {

    color: #444;

    background-color: #ddd;

    text-decoration: none;

    cursor: pointer;

}

.oc3oc-h4 {

    font-size: 18px;

    font-weight: 500;

    margin: 10px 0 5px;

    padding-bottom: 5px;

    text-align: center;

}

.oc3oc-agree-btn {

    margin-top: 10px;

    color: #b5b4b4;

    font-size: 12px;

    line-height: 14px;

    text-align: center;

}

.oc3oc-footer .oc3oc-agree-btn {

    margin-bottom: 0;

}

.oc3oc-agree-btn a {

    color: #256aa3;

}

.oc3oc-options .required {

    color: red;

}

.oc3oc .input-group {

    position: relative;

    display: table;

    border-collapse: separate;

}

.oc3oc .input-group-btn {

    display: table-cell;

    width: 1%;

    white-space: nowrap;

    vertical-align: middle;

    position: relative;

    font-size: 0;

}

.oc3oc .btn-default {

    color: #000;

    background-color: #ffcd18;

}

.oc3oc .input-group-btn>.btn {

    position: relative;

}

.oc3oc .input-group-btn:first-child>.btn {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

    margin-right: -1px;

}

.oc3oc .input-group-btn:last-child>.btn {

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

    z-index: 2;

    margin-left: -1px;

}



.oc3oc.oc3oc-without-footer .oc3oc-body {

    border-radius: 0px 0px 8px 8px;

    -moz-border-radius: 0px 0px 8px 8px;

    -webkit-border-radius: 0px 0px 8px 8px;

}

.oc3oc-btn-under-fields {

    margin-top: 10px;

    text-align: center;

}

.oc3oc-thumbs img {

    margin-top: 10px;

}



.oc3oc-vert .oc3oc-images {

    margin-bottom: 10px;

}



@media (min-width: 768px){

.oc3oc-hor {

    width: 600px;

}

.oc3oc-hor .oc3oc-images {

    width: 50%;

    float: left;

    padding-right: 15px;

}

.oc3oc-hor .oc3oc-images.oc3oc-bordered {

    border-right: 1px solid #eee;

}

.oc3oc-hor .oc3oc-main-image img {

    max-width: 100%;

    height: auto;

}

.oc3oc-hor .oc3oc-thumbs {

    margin-left: 0;

    float: none;

    position: relative;

    display: block;

    box-sizing: border-box;

}

.oc3oc-hor .oc3oc-thumbs img {

    width: 18%;

    margin-left: 2.5%;

    display: inline-block;

    box-sizing: border-box;

}

.oc3oc-hor .oc3oc-thumbs img:first-child {

    margin-left: 0;

}

.oc3oc-hor .oc3oc-right {

    width: 50%;

    float: left;

    padding-left: 15px;

}

.oc3oc-hor .oc3oc-right.oc3oc-bordered {

    border-left: 1px solid #eee;

}

.oc3oc-clearfix:before, .oc3oc-clearfix:after {

    display: table;

    content: " ";

}

.oc3oc-clearfix:after {

    clear: both;

}

}

@media (max-width: 767px) {

    .oc3oc-images {

        margin-bottom: 10px;

    }

}

@media (min-width: 401px) and (max-width: 767px) {

    .oc3oc-images img:first-child {

        margin-top: 0;

    }

    .oc3oc-images img:last-child {

        margin-bottom: 0;

    }

}

@media (min-width: 401px) {

    .oc3oc-vert .oc3oc-thumbs img:first-child {

        margin-top: 0;

    }

}

@media (max-width: 400px) {

    .oc3oc {

        width: 320px;

    }

    .oc3oc-thumbs {

        float: none;

        margin-left: 0;

    }

    .oc3oc-thumbs br {

        display: none;

    }

    .oc3oc-thumbs img {

        margin-right: 10px;

        display: inline-block;

    }

    .oc3oc-thumbs img:nth-child(5n+5) {

        margin-right: 0;

    }

}

@media (max-width: 320px) {

    .oc3oc {

        width: 300px;

    }

    .oc3oc-thumbs img {

        margin-right: 5px;

    }

    .oc3oc-main-image {

        margin-right: 0;

    }

}