/**
 * All of the CSS for your public-facing functionality should be
 * included in this file. Any selector starts w/ `mixmat_` will have box-shadows
 */
[class^="mixmat_"]{
    box-sizing: border-box;
}
.mixmat_container span.left{
    float:left;
    position: relative;
}
.button-mixmat {
    font-size:15;
}

.mixmat-bgj {
     background: #fdfdca;
}
.mixmat-bgb,
table.mixmat-table .bgb {
    background: #ddffff;
}
table.mixmat-table {
    font-size: 15px;
    border: 1px solid #eee;
    margin-left: 0;
    position: relative;
    width: 100%;
    border-bottom: none;
    margin-bottom: 12px;
}
#mixmat table.mixmat-table.second {
    border-left: none;
}
.mixmat-container {
    padding: 7px 0 0 0;
    margin: 0 auto 0 auto;
    display: block;
    position:relative
}
.mixmat-row {
    width: 100%;
    display: inline-block;
    padding: 8px 0 0 0;
} 
.mixmat-container:after, 
.mixmat-container:before,
.mixmat-row:after,
.mixmat-row:before{
    content:"";
    display:table;
    clear:both
}
#mixmat_one_half,
#mixmat_last_one_half {
    width: 50%;
    float: left;
}
/* 1/4    1/3    1/2    2/3    3/4    one */
.mixmat_one_fourth, .mixmat_one_third, .mixmat_one_half, .mixmat_two_thirds, .mixmat_three_fourths, .mixmat_one {
    float: left;
    padding: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    position: relative;
    min-height: 1px;
    text-align: left;
    padding: 7px;
}
.mixmat_last_one_fourth, .mixmat_last_one_third, .mixmat_last_one_half,
.mixmat_last_two_thirds, .mixmat_last_three_fourths {
    float: right;
    position: relative;
    min-height: 1px;
    text-align: left;
    margin-bottom: 10px;
    padding: 7px;
}
.mixmat_empty_row {
    border-top: 1px solid transparent;
    margin-bottom: 1px;
    margin-top: 12px;
    overflow: hidden;
    width: 98%;
    height: 0;
    padding: 7px;
    padding-bottom: 1%;
    background: transparent;
    display: block;
    margin: .67em 1%;
}
.mixmat_one {
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
}
.mixmat_three_fourths,
.mixmat_last_three_fourths {
    width: 73%;
    margin-right: 1%;
    margin-left: 1%;
}
.mixmat_two_thirds,
.mixmat_last_two_thirds {
    width: 64.66666667%;
    margin-right: 1%;
    margin-left: 1%;
}
.mixmat_one_half,
.mixmat_last_one_half{
  width: 48%;
  margin-right: 1%;
  margin-left: 1%;
}
.mixmat_one_third,
.mixmat_last_one_third {
    width: 31.3333333%;
    margin-right: 1%;
    margin-left: 1%;
}
.mixmat_one_fourth,
.mixmat_last_one_fourth{
    width: 23%;
    padding: 3px;
    margin-right: 1%;
    margin-left: 1%;
    padding: 3px !important;
}

.mixmat_last_one_fourth:before, .mixmat_last_one_third:before, .mixmat_last_one_half:before, .mixmat_last_two_thirds:before,
.mixmat_last_three_fourths:before, .mixmat_last_one:before, .mixmat_empty_row:before
.mixmat_last_one_fourth:after, .mixmat_last_one_third:after, .mixmat_last_one_half:after, .mixmat_last_two_thirds:after,
.mixmat_last_three_fourths:after, .mixmat_one:after, .mixmat_empty_row:after  {
    display: table;
    content: " ";
}
.mixmat_last_one_fourth:after, .mixmat_last_one_third:after, .mixmat_last_one_half:after, .mixmat_last_two_thirds:after,
.mixmat_last_three_fourths:after, .mixmat_one:after, .mixmat_empty_row:after {
    clear: both;
}
@media all and (max-width: 710px) {
.mixmat_one_fourth, .mixmat_two_thirds, .mixmat_three_fourths, .mixmat_one,
.mixmat_last_one_fourth, .mixmat_last_two_thirds, .mixmat_last_three_fourths {
    float: left;
    position: relative;
    min-height: 1px;
    text-align: left;
    margin-bottom: 10px;
    padding: 7px;
    width: 100%;
    }
}
@media all and (max-width: 600px) {
.mixmat_one_half, .mixmat_last_one_half, .mixmat_one_third, .mixmat_last_one_third {
    float: left;
    width: 100%;
    }
}