/* PREFERED SPECIES */

.prefer_table {width: 100%; margin: 0px auto 0px;}
.prefer_table td {padding: 2px 10px; width: 49%; vertical-align: top;}
.prefer_table select {width: 100%; font-size: 16px; padding: 8px; min-height: 200px; background: rgba(255,255,255,0.1); border: 1px solid rgba(0,0,0,0.1) !important;}
.prefer_table select:hover, .prefer_table select:focus {background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.5);}
.prefer_table select optgroup {font-size: 20px; padding: 0px 0px 4px 0px;}
.prefer_table select option {font-size: 18px; padding: 2px 0px;}
.prefer_table select option:hover {background: rgba(0,0,0,0.05); cursor: pointer;}
img.imgdown {display: none;}

.prefer_table h5 {max-width: none;}

.spsp, span.spsp {text-transform: uppercase;}
.spsp2, span.spsp {font-size: 0px !important; display: inline-block;}
.spsp2 .firstWord, span.spsp .caps {font-size: 13px; font-style: italic; color: #777;}
span.spsp .caps {font-size: 13px;}
.spp {visibility: hidden;}



@media screen and (max-width: 1023px) {
.prefer_table {width: auto; margin: auto;}
.prefer_table select {width: 98%; margin: auto; -webkit-appearance: menulist-button;}
.prefer_table td, .prefer_table th {display: block; text-align: center !important; width: 100%;}
img.imgdown {display: block; margin: 3px auto;}
img.imgright {display: none;}
}







/* ASSORTMENT + ORDER (SORTING) OF TALLY DATA - MENU */

.assortment .tabs-nav, .order .tabs-nav {display: block; margin: 25px auto 20px auto;}
.assortment .tabs-nav a, .order .tabs-nav a {z-index: 10; width: 115px; margin: 4px 0px 12px 1px; padding: 22px 6px; display: inline-block; text-align: center; color: rgba(255,255,255,0.8); border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border: 2px solid rgba(255,255,255,0.0); font-size: 13px; text-transform: uppercase; min-height: 60px; word-break: break-word; line-height: 16px; transition:.4s; -o-transition:.4s; -ms-transition:.4s; -moz-transition:.4s; -webkit-transition:.4s; vertical-align: middle; background: #b66114}


.assortment .tabs-nav a.current:hover, .assortment .tabs-nav a:hover, .order .tabs-nav a.current:hover, .order .tabs-nav a:hover {text-decoration: none;color: #fff !important; background: #975111;}

.assortment .tabs-nav a.current, .order .tabs-nav a.current {background: #e67e22; box-shadow: 0px 0px 20px rgba(0,0,0,0.59); text-decoration: none; border: 2px solid #b46a34; z-index: 14; position: relative; color: #fff;}

.assortment .tabs-nav a img, .order .tabs-nav a img {display: block; margin: 0px auto 10px auto; max-height: 32px;}

/*.assortment h5, .order h5 {font-size: 26px; text-align: left; padding: 10px 5px;}
.assortment h5 span, .order h5 span {font-size: 26px; font-weight: normal; color: #999;}*/

.assortment h5 img, .order h5 img {max-height: 32px;}


.assortment .submenu {display: block; margin: 0px auto 10px auto;}


/* ASSORTMENT NEW */
.form td.assort-labels {text-align: center; padding: 0px 0px 15px 0px;}
.form td.assort-labels input[type="radio"] {display: none;}
.form td.assort-labels label {color: #777; font-size: 17px;  padding: 12px 24px; border-radius: 30px; -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; -o-transition: all 0.6s linear; -ms-transition: all 0.6s linear; transition: all 0.6s linear;}
.form td.assort-labels label:hover {color: #ff0000;}
.form td.assort-labels input[type="radio"]:checked + label {color: #fff; text-decoration: none; background: #ff0000;}



@media screen and (max-width: 1023px) {
.assortment .tabs-nav a, .order .tabs-nav a {width: 28%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.assortment .tabs-nav .button-how, .order .tabs-nav .button-how {display: none;}
}





/* ORDER OF TALLY DATA - TABLE */

.order-input {width: 100px;}




/* WHERE NEXT */

.where-next {max-width: 1024px; margin: 90px auto 0px auto; display: table;}
.where-next div {font-size: 14px; vertical-align: top; padding: 20px 10px 0px 0px; display: inline-block; width: 45%; text-align: left;}
.where-next a {font-size: 18px; margin-bottom: 2px; display: block}

@media screen and (max-width: 1023px) {
.where-next div {display: block; width: 100%;}
}



/* HOW TO - VIDEO */

.how-to-video {text-align: center; display: block; margin: 0px auto; padding: 20px 0px;}
.how-to-video a {text-align: center; display: none; padding: 0px; margin: 0px 15px 40px 15px; font-size: 15px; line-height: 20px; vertical-align: top; max-width: 300px; min-height: 250px; color: #777; background: url('/ico/start-2.png') no-repeat center 82px;}
.how-to-video a:hover {text-decoration: none;}
.how-to-video a.skcs-cs, .how-to-video a.skcs-sk, .how-to-video a.en-en{display: inline-block;}
.how-to-video a img {max-height: 250px; margin: 0px auto 15px auto; opacity: 0.45; transition:.7s; -o-transition:.7s; -ms-transition:.7s; -moz-transition:.7s; -webkit-transition:.7s; border: 1px solid #777;}
.how-to-video a:hover img {opacity: 1; border: 1px solid #ff0000; box-shadow: 0px 0px 24px rgba(0,0,0,0.7);}
.how-to-video h6 {margin: 0px auto 5px auto; font-size: 18px; line-height: 24px; color: #bb0000; font-weight: normal;}
.how-to-video a:hover h6 {color: #ff0000; text-decoration: underline;}






.bottom-messenger {bottom: -200px; 
-moz-animation: slide 1s ease 2.5s forwards;
-webkit-animation: slide 1s ease 2.5s forwards;
-o-animation: slide 1s ease 2.5s forwards;
-ms-animation: slide 1s ease 2.5s forwards;
animation: slide 1s ease 2.5s forwards;}

	
@-moz-keyframes slide
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-webkit-keyframes slide
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-o-keyframes slide
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-ms-keyframes slide
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@keyframes slide
{
from {bottom: -200px;}
to {bottom: 10px;}
}