@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i');


/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

@font-face {
    font-family: army;
    src: url('../fonts/ArmyChalk.ttf');
}


/* Colors 
    KI Brown: 431d06
    KI Green: aaa47e 
    KI Blue : 84adae
    KI Orange: e0b678
*/

/* #Site Styles
================================================== */
body {
    font-family: 'PT Sans', sans-serif;
    font-size: 12pt;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: underline;
}

h1 {
    font-family: army;
    font-size: 20pt;
    color: rgb(163,166,105);
}

/* #Site Authorization Lock
================================================== */
#spnLayerLock {
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #000000;
    width: 100%;
    min-height: 100%;
    min-height: 100%;
    z-index: 1500;
    opacity: 0.8;
    filter-opacity: 80;
}

#spnLayerWrapper {
    position:fixed;
    width: 450px;
    top: 20%;
    left: 50%;
    margin-left: -225px; /*set to a negative number 1/2 of your width*/ 
    background-color: #ffffff;
    z-index: 1501;
   
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

#spnLayerBox {
    padding: 20px;
    box-sizing: border-box;
    font-family: arial;
}

#spnLayerBox h1 {
    font-family: inherit;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

#spnLayerBox table {
    margin-bottom: 20px;
    width: 100%;
}

#spnLayerBox .btn-red {
    font-size: 13px;
}

#spnLayerBox .btn-red:hover{
    cursor: pointer;
}

/* #Buttons
================================================== */
.btn-blue, .btn-red, .btn-yellow, .account-page .action {
    border: 0px;
    
}

.btn-red {
    display: inline-block;
    white-space:nowrap;
    margin-top: 10px;
}

.btn-blue {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-family: inherit;
  color: #000000;
  font-size: inherit;
  background: rgb(127,176,171);
  padding: 5px 30px 5px 30px;
  text-decoration: none;
}

.btn-blue:hover {
  background: rgb(102,204,204);
  text-decoration: none;
}


.btn-pink {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-family: inherit;
  color: #000000;
  font-size: inherit;
  background: rgb(204,154,142);
  padding: 5px 30px 5px 30px;
  text-decoration: none;
}

.btn-pink:hover {
  background: rgb(255,153,153);
  text-decoration: none;
}

.btn-red, .account-page .action {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-family: inherit;
  color: #ffffff;
  font-size: inherit;
  background-color: rgb(67,29,6);
  padding: 5px 30px 5px 30px;
  text-decoration: none;
}

.btn-red:hover, .account-page .action:hover {
  background-color: rgb(120,29,6);
  text-decoration: none;
  color: #ffffff;
}

.btn-yellow {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-family: inherit;
  color: #000000;   
  font-size: inherit;
  background: #f8ecaf;
  padding: 5px 30px 5px 30px;
  text-decoration: none;
}

.btn-yellow:hover {
  background: #a68e14;
  text-decoration: none;
}


.btn-red:visited {
    color: #ffffff;
}


div.add-to-cart 
{
    margin: 0 auto;
    margin-top: 10px;
    width:175px;
    background: rgb(67,29,6);
    height: 40px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 6px;
}

div.preorder-add-to-cart {
    background-color: rgb(163,166,105);
}

div.add-to-cart:hover {
  background: rgb(120,29,6);
  text-decoration: none;
}

div.preorder-add-to-cart:hover {
    background-color: rgb(204,204,102);
}


div.add-to-cart .product-form-field
{
    font-family: inherit;
    width:60px;
    float:left;
    padding: 5px;
    height: 30px;
    border: 0px;
}

div.add-to-cart .product-form-button
{
    padding-left: 10px;
    font-size: 12px;
    font-family: inherit;
    font-weight: normal;
    text-transform: uppercase;
    background-color: inherit;
    line-height: 30px;
    border: 0px;
    color: white;
    text-shadow: none;
}

div.add-to-cart .product-form-button:hover
{
    cursor: pointer;
}


/* #Shop / Producter Page
================================================== */
.current-deal {
    margin-bottom: 20px;
}

.current-deal img {
    width: 100%;
    height: auto;
 }


/* #Standard Page.ss content styling
================================================== */
img.full {
    width: 100%;
    height: auto;
    float:left;
    clear: both;
    margin-bottom: 10px;
}

img.half-left {
    width: 50%;
    height: auto;
    float:left;
    margin-right: 20px;
    margin-bottom: 10px;
}

img.quarter-left {
    width: 25%;
    height: auto;
    float:left;
    margin-right: 20px;
    margin-bottom: 10px;
}

img.quarter-right {
    width: 25%;
    height: auto;
    float:right;
    margin-left: 20px;
    margin-bottom: 10px;
}


img.half-right {
    width: 50%;
    height: auto;
    float:right;
    margin-left: 20px;
    margin-bottom: 10px;
}

p {
    text-align: justify;
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   img.half-left, 
   img.half-right,
   img.quarter-left,
   img.quarter-right  {
        width:50%;
   }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   img.half-left, 
   img.half-right,
   img.quarter-left,
   img.quarter-right  {
        width:50%;
   }

}




/* #Product Prices
================================================== */
.product-price {
    font-size: 13pt;
    color: #af473c;
    font-weight: bold;
}

.product-price-strike {
    font-size: 10pt;
    text-decoration: line-through;
}


/* #Site Content
================================================== */
.site-content {
    padding-top: 10px;
    z-index: -100;
    min-height: 300px;
    clear: both;
    background-color: white;
}


/* #Home Page 
================================================== */
.box-product {
    text-align: center;
    position: relative;
    padding-bottom: 100px;
}

.box-product .bottom {
    position: absolute;
    bottom: 0px;
    width: 200px;
    left: calc(50% - 100px);
}

.box-product h2 {
    font-family: inherit;
    font-size: 20px;
    line-height: 22px;
    color: #552f1c;
    font-weight: 700;
}

.box-product h2 span {
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}

.box-product a {
    text-decoration: none;
    color: inherit;
}

.box-product .main {
    width: 90%;
    height : auto;
}

.box-product span.main img {
    width: 90%;
    height : auto;
}  

.box-product .top-pick {
    width: 30%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 18px;
}

/*.star-ratings-sprite {
    background: url("../images/star-rating-sprite.png") repeat-x;
    font-size: 0;
    height: 21px;
    line-height: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 110px;
    margin: 0 auto;
}





.rating {
    background: url("../images/star-rating-sprite.png") repeat-x;
    background-position: 0 100%;
    float: left;
    height: 21px;
    display:block;
  }*/

.middle {
    /*position: absolute;
    clear: both;
    border: 1px solid red;*/
}

.middle a:hover {
    text-decoration: underline;
}
@media  only screen and (max-width: 750px) {
    .box-product .image {
        width: 50%;
        margin-left: 25%;
    }

    .box-product .middle a {
        font-size: 12pt;
        line-height: 14pt;
    }


}


/* #Category Page 
================================================== */
.category-page,
.category-page p {
    text-align: center;
}

.category-page .main {
    width: 90%;
    height : auto;
}

.category-page span.main img {
    width: 90%;
    height : auto;
}  

 


/* #Member Profile
================================================== */
.profile-name {
    width: calc(100% / 3)px;
    float: left;
    margin-right: 10px;
}

.profile-address-line {
    width: 100%;
    float: left;
    margin-right: 10px;
}

.profile-address {
    width: calc(100% / 3)px;
    float: left;
    margin-right: 10px;
}

.member-profile-field input, .member-profile-field select {
    padding: 5px;
    font-family: inherit;
    font-size: inherit;

}

/* #Footer Block
================================================== */
.footer {
    /*background-color: #f9f1c8;*/
    background-color: #d6bb8e;
    border: 1px solid #d6bf86;

}

.footer p {
    text-align: left;
}

.footer .seperator {
    background-color: #4f3829;
}

.footer img {
    border-radius: 5px;
}

.site-footer {
    margin-top: 0px;
    clear: both;
    box-sizing: border-box;
    overflow:hidden;
    font-size: 11pt;
}

.footer-small p {
    text-align: center;
}

.footer-stripe {
    margin-top: 20px;
    background-color: white;
    height: 10px;
    background-image: url('../images/footer-banner.png');
}

.mailing-list-form input {
    width: 90%;
    margin: 0 auto;
}



/* # Login & Cart Box
================================================== */
.box-cart {
    background-color: #84adae;
    min-width: 300px;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
}


/* #Footer Queries
================================================== */
.footer-large {
    display: block;
    margin-top: 20px;
}

.footer-large .site-footer > div {
    padding:10px;
    box-sizing: border-box;
}

.footer-small {
    display: none;
}

.footer-small > div {
    text-align: center;

}

.seperator {
    width: 60%;
    margin-left: 20%;
    height: 1px;
    background: #e0b678;
    margin-top: 10px;
    margin-bottom: 20px;
}


.mailing-list-form {
    margin-top: 0px;
    width: 100%;
    
}

/* Larger than mobile */
@media  only screen and (max-width: 749px) {
    .footer-small {
        display: block;
    }

    .footer-large {
        display: none;
    }
}



/* #Kiwi Credits History
================================================== */
table.kiwi-credits-history  {
    width: 100%;
    border-collapse: collapse;
}

table.kiwi-credits-history th {
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #552f1c;
    text-align: left;
    font-weight: bold;

}

table.kiwi-credits-history td {
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #552f1c;
}




/* #Check Out Page
================================================== */
.checkout-page h2 {
    border-radius: 3px;
    background-color: #4f3829;
    color: white;
    font-size: 11pt;
    box-sizing: border-box;
    padding: 5px 10px;
    line-height: 16pt;
}

.checkout-page table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.checkout-page td {
    vertical-align: top;
    padding-top: 20px;
    box-sizing: border-box;
}

.checkout-page td:nth-child(1) {
    width: 220px;
    padding: 0px;
}

.checkout-page td strong {
    font-size: 14pt;
 }

.checkout-page .seperator {
    margin-left: 25%;
    width:50%;
    height: 1px;

}

.checkout-page .block {
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.checkout-page .solid {
    background-color: #e0b678;
}

.checkout-page p {
    clear: both;
}

.checkout-page select.form-small {
    width: 100px;
    padding: 5px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
}

.checkout-page input.form-large,
.checkout-page select.form-large {
    width: 100%;
    padding: 5px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
}

.form-large {
    width: 100%;
    padding: 5px;
    font-size: inherit;
    font-family: inherit;
}

.checkout-page input {
    padding: 5px;
    font-size: inherit;
    font-family: inherit;
}

.checkout-page textarea {
    resize: none;
    font-family: inherit;
    font-size: inherit;
    width: 98%;

}


/* #Account Page Login / Sign Up
================================================== */
.account-page h1
{
    font-size: 20px;
    text-align: center;
}

.account-page .box
{
    padding:30px;
    box-sizing: border-box;
    background-color: rgb(214,187,142);
    border-radius: 5px;
    margin-bottom: 10px;
    height: 650px;
}

.account-page .box h1 {
    color: rgb(67,29,6);
}

.account-page .box input[type=text], 
.account-page .box input[type=password] {
    width:100%;
}

/*--------------------------------------------------------------------
    Side Menu
  --------------------------------------------------------------------*/
.side-menu {
    background-color: #d6bf86;
    padding: 5px;
    border-radius: 5px;
    box-sizing: border-box;
}

.side-menu li {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px;
    line-height: 40px;
    text-align: center;
}

.side-menu li:last-child:after {
    display: none;
}

.side-menu li:after {
    content: "";
    display: block;
    height: 1px;
    margin-left: 20%;
    width: 60%;
    background: #4f3829;
}


/*--------------------------------------------------------------------
    General Form Message
  --------------------------------------------------------------------*/
.message {

}

.good {
    color: green;
    font-weight: bold;
}

.bad {
    color: red;
    font-weight: bold;
}

/*--------------------------------------------------------------------
    YouTube
  --------------------------------------------------------------------*/
.YouTube {
    clear:both;
    text-align: center;
}

 .YouTube iframe {
    width: 500px;
    height: 290px;
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 769px) {
    .YouTube iframe {
            width: 320px;
            height: 190px;
        }


    #spnLayerWrapper {
        margin-left: -175px;
        width: 350px;
        position:absolute;
    }

    #spnLayerBox table td {
        display: block;
        margin-bottom: 10px;
    }

    #spnLayerBox .btn-red {
        display: block;
        width: 200px;
        padding-left: 0px;
        padding-right: 0px;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    .YouTube iframe {
        width: 280px;
        height: 150px;
    }



     #spnLayerWrapper {
        margin-left: -175px;
        width: 350px;
        position:absolute;
    }


    #spnLayerBox table td {
        display: block;
        margin-bottom: 10px;
    }

    #spnLayerBox .btn-red {
        display: block;
        width: 200px;
        padding-left: 0px;
        padding-right: 0px;
    }

  
}




/* Larger than mobile */
@media  only screen and (max-width: 400px) {

}

/* Larger than phablet */
@media only screen and (min-width: 550px) and (max-width: 749px) {
    
    
    
}

/* Larger than tablet */
@media only screen and (min-width: 750px) and (max-width: 999px) {

}

/* Larger than desktop */
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
}

/* Larger than Desktop HD */
@media only screen and (min-width: 1200px) {
        
}

@media print {

}

.big .ind_cnt {
    /*display: none !important;*/
}

.star_container {
    margin-top: 10px !important;
}
#product_just_stars.big .on {
    margin-top: 10px !important;
}