/* for reset */
body{margin: 0; padding: 0;}
ul, ol, li{list-style: none; margin: 0; padding: 0;}
/* end of reset */

/* for global */
* {font-family: "Roboto"; text-decoration: none;}
a:hover{text-decoration: none;}
/* end of global */

.ss-container {
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

:root {
    --br-point-xl: 1600px;
    --br-point-n: 1440px;
    --br-point-l: 1200px;
    --br-point-m: 960px;
    --br-point-s: 640px;
}


.ss-display-flex {display: flex}
.ss-display-block {display: block}
.ss-display-none {display: none}

/**
TODO хэзээ нэгэн цагт Grid -д зориулсан `class` -ууд оруулж тавих болно
*/
.ss-display-grid {display: grid}


/**
Flex orders
 */
.ss-flex-order-0 {order: 0}
.ss-flex-order-1 {order: 1}
.ss-flex-order-2 {order: 2}
.ss-flex-order-3 {order: 3}
.ss-flex-order-4 {order: 4}
.ss-flex-order-5 {order: 5}
.ss-flex-order-6 {order: 6}
.ss-flex-order-7 {order: 7}
.ss-flex-order-8 {order: 8}
.ss-flex-order-9 {order: 9}
.ss-flex-order-10 {order: 10}
@media (min-width: 1600px){
    .ss-flex-order-0\@xl {order: 0}
    .ss-flex-order-1\@xl {order: 1}
    .ss-flex-order-2\@xl {order: 2}
    .ss-flex-order-3\@xl {order: 3}
    .ss-flex-order-4\@xl {order: 4}
    .ss-flex-order-5\@xl {order: 5}
    .ss-flex-order-6\@xl {order: 6}
    .ss-flex-order-7\@xl {order: 7}
    .ss-flex-order-8\@xl {order: 8}
    .ss-flex-order-9\@xl {order: 9}
    .ss-flex-order-10\@xl {order: 10}
}
@media (min-width: 1440px){
    .ss-flex-order-0\@n {order: 0}
    .ss-flex-order-1\@n {order: 1}
    .ss-flex-order-2\@n {order: 2}
    .ss-flex-order-3\@n {order: 3}
    .ss-flex-order-4\@n {order: 4}
    .ss-flex-order-5\@n {order: 5}
    .ss-flex-order-6\@n {order: 6}
    .ss-flex-order-7\@n {order: 7}
    .ss-flex-order-8\@n {order: 8}
    .ss-flex-order-9\@n {order: 9}
    .ss-flex-order-10\@n {order: 10}
}
@media (min-width: 1200px){
    .ss-flex-order-0\@l {order: 0}
    .ss-flex-order-1\@l {order: 1}
    .ss-flex-order-2\@l {order: 2}
    .ss-flex-order-3\@l {order: 3}
    .ss-flex-order-4\@l {order: 4}
    .ss-flex-order-5\@l {order: 5}
    .ss-flex-order-6\@l {order: 6}
    .ss-flex-order-7\@l {order: 7}
    .ss-flex-order-8\@l {order: 8}
    .ss-flex-order-9\@l {order: 9}
    .ss-flex-order-10\@l {order: 10}
}
@media (min-width: 960px){
    .ss-flex-order-0\@m {order: 0}
    .ss-flex-order-1\@m {order: 1}
    .ss-flex-order-2\@m {order: 2}
    .ss-flex-order-3\@m {order: 3}
    .ss-flex-order-4\@m {order: 4}
    .ss-flex-order-5\@m {order: 5}
    .ss-flex-order-6\@m {order: 6}
    .ss-flex-order-7\@m {order: 7}
    .ss-flex-order-8\@m {order: 8}
    .ss-flex-order-9\@m {order: 9}
    .ss-flex-order-10\@m {order: 10}
}
@media (min-width: 640px){
    .ss-flex-order-0\@s {order: 0}
    .ss-flex-order-1\@s {order: 1}
    .ss-flex-order-2\@s {order: 2}
    .ss-flex-order-3\@s {order: 3}
    .ss-flex-order-4\@s {order: 4}
    .ss-flex-order-5\@s {order: 5}
    .ss-flex-order-6\@s {order: 6}
    .ss-flex-order-7\@s {order: 7}
    .ss-flex-order-8\@s {order: 8}
    .ss-flex-order-9\@s {order: 9}
    .ss-flex-order-10\@s {order: 10}
}


.ss-flex-align-center {align-items: center}
.ss-flex-align-end {align-items: flex-end}
.ss-flex-align-start {align-items: flex-start}
.ss-flex-align-self-start {align-items: self-start}
.ss-flex-align-self-end {align-items: self-end}
@media (min-width: 1600px) {
    .ss-flex-align-center\@xl {align-items: center}
    .ss-flex-align-end\@xl {align-items: flex-end}
    .ss-flex-align-start\@xl {align-items: flex-start}
    .ss-flex-align-self-start\@xl {align-items: self-start}
    .ss-flex-align-self-end\@xl {align-items: self-end}
}
@media (min-width: 1440px) {
    .ss-flex-align-center\@n {align-items: center}
    .ss-flex-align-end\@n {align-items: flex-end}
    .ss-flex-align-start\@n {align-items: flex-start}
    .ss-flex-align-self-start\@n {align-items: self-start}
    .ss-flex-align-self-end\@n {align-items: self-end}
}
@media (min-width: 1200px) {
    .ss-flex-align-center\@l {align-items: center}
    .ss-flex-align-end\@l {align-items: flex-end}
    .ss-flex-align-start\@l {align-items: flex-start}
    .ss-flex-align-self-start\@l {align-items: self-start}
    .ss-flex-align-self-end\@l {align-items: self-end}
}
@media (min-width: 960px) {
    .ss-flex-align-center\@m {align-items: center}
    .ss-flex-align-end\@m {align-items: flex-end}
    .ss-flex-align-start\@m {align-items: flex-start}
    .ss-flex-align-self-start\@m {align-items: self-start}
    .ss-flex-align-self-end\@m {align-items: self-end}
}
@media (min-width: 640px) {
    .ss-flex-align-center\@s {align-items: center}
    .ss-flex-align-end\@s {align-items: flex-end}
    .ss-flex-align-start\@s {align-items: flex-start}
    .ss-flex-align-self-start\@s {align-items: self-start}
    .ss-flex-align-self-end\@s {align-items: self-end}
}

.ss-flex-justify-center {justify-content: center}
.ss-flex-justify-between {justify-content: space-between}
.ss-flex-justify-around {justify-content: space-around}
.ss-flex-justify-evenly {justify-content: space-evenly}
.ss-flex-justify-start {justify-content: flex-start}
.ss-flex-justify-end {justify-content: flex-end}
.ss-flex-justify-right {justify-content: right}
.ss-flex-justify-left {justify-content: left}
@media (min-width: 1600px) {
    .ss-flex-justify-center\@xl {justify-content: center}
    .ss-flex-justify-between\@xl {justify-content: space-between}
    .ss-flex-justify-around\@xl {justify-content: space-around}
    .ss-flex-justify-evenly\@xl {justify-content: space-evenly}
    .ss-flex-justify-start\@xl {justify-content: flex-start}
    .ss-flex-justify-end\@xl {justify-content: flex-end}
    .ss-flex-justify-right\@xl {justify-content: right}
    .ss-flex-justify-left\@xl {justify-content: left}
}
@media (min-width: 1440px) {
    .ss-flex-justify-center\@n {justify-content: center}
    .ss-flex-justify-between\@n {justify-content: space-between}
    .ss-flex-justify-around\@n {justify-content: space-around}
    .ss-flex-justify-evenly\@n {justify-content: space-evenly}
    .ss-flex-justify-start\@n {justify-content: flex-start}
    .ss-flex-justify-end\@n {justify-content: flex-end}
    .ss-flex-justify-right\@n {justify-content: right}
    .ss-flex-justify-left\@n {justify-content: left}
}
@media (min-width: 1200px) {
    .ss-flex-justify-center\@l {justify-content: center}
    .ss-flex-justify-between\@l {justify-content: space-between}
    .ss-flex-justify-around\@l {justify-content: space-around}
    .ss-flex-justify-evenly\@l {justify-content: space-evenly}
    .ss-flex-justify-start\@l {justify-content: flex-start}
    .ss-flex-justify-end\@l {justify-content: flex-end}
    .ss-flex-justify-right\@l {justify-content: right}
    .ss-flex-justify-left\@l {justify-content: left}
}
@media (min-width: 960px) {
    .ss-flex-justify-center\@m {justify-content: center}
    .ss-flex-justify-between\@m {justify-content: space-between}
    .ss-flex-justify-around\@m {justify-content: space-around}
    .ss-flex-justify-evenly\@m {justify-content: space-evenly}
    .ss-flex-justify-start\@m {justify-content: flex-start}
    .ss-flex-justify-end\@m {justify-content: flex-end}
    .ss-flex-justify-right\@m {justify-content: right}
    .ss-flex-justify-left\@m {justify-content: left}
}
@media (min-width: 640px) {
    .ss-flex-justify-center\@s {justify-content: center}
    .ss-flex-justify-between\@s {justify-content: space-between}
    .ss-flex-justify-around\@s {justify-content: space-around}
    .ss-flex-justify-evenly\@s {justify-content: space-evenly}
    .ss-flex-justify-start\@s {justify-content: flex-start}
    .ss-flex-justify-end\@s {justify-content: flex-end}
    .ss-flex-justify-right\@s {justify-content: right}
    .ss-flex-justify-left\@s {justify-content: left}
}


.ss-flex-justify-self-center {justify-self: center}
.ss-flex-justify-self-start {justify-self: flex-start}
.ss-flex-justify-self-end {justify-self: flex-end}
.ss-flex-justify-self-sStart {justify-self: self-start}
.ss-flex-justify-self-sEnd {justify-self: self-end}
.ss-flex-justify-self-right {justify-self: right}
.ss-flex-justify-self-left {justify-self: left}
@media (min-width: 1600px) {
    .ss-flex-justify-self-center\@xl {justify-self: center}
    .ss-flex-justify-self-start\@xl {justify-self: flex-start}
    .ss-flex-justify-self-end\@xl {justify-self: flex-end}
    .ss-flex-justify-self-sStart\@xl {justify-self: self-start}
    .ss-flex-justify-self-sEnd\@xl {justify-self: self-end}
    .ss-flex-justify-self-right\@xl {justify-self: right}
    .ss-flex-justify-self-left\@xl {justify-self: left}
}
@media (min-width: 1440px) {
    .ss-flex-justify-self-center\@n {justify-self: center}
    .ss-flex-justify-self-start\@n {justify-self: flex-start}
    .ss-flex-justify-self-end\@n {justify-self: flex-end}
    .ss-flex-justify-self-sStart\@n {justify-self: self-start}
    .ss-flex-justify-self-sEnd\@n {justify-self: self-end}
    .ss-flex-justify-self-right\@n {justify-self: right}
    .ss-flex-justify-self-left\@n {justify-self: left}
}
@media (min-width: 1200px) {
    .ss-flex-justify-self-center\@l {justify-self: center}
    .ss-flex-justify-self-start\@l {justify-self: flex-start}
    .ss-flex-justify-self-end\@l {justify-self: flex-end}
    .ss-flex-justify-self-sStart\@l {justify-self: self-start}
    .ss-flex-justify-self-sEnd\@l {justify-self: self-end}
    .ss-flex-justify-self-right\@l {justify-self: right}
    .ss-flex-justify-self-left\@l {justify-self: left}
}
@media (min-width: 960px) {
    .ss-flex-justify-self-center\@m {justify-self: center}
    .ss-flex-justify-self-start\@m {justify-self: flex-start}
    .ss-flex-justify-self-end\@m {justify-self: flex-end}
    .ss-flex-justify-self-sStart\@m {justify-self: self-start}
    .ss-flex-justify-self-sEnd\@m {justify-self: self-end}
    .ss-flex-justify-self-right\@m {justify-self: right}
    .ss-flex-justify-self-left\@m {justify-self: left}
}
@media (min-width: 640px) {
    .ss-flex-justify-self-center\@s {justify-self: center}
    .ss-flex-justify-self-start\@s {justify-self: flex-start}
    .ss-flex-justify-self-end\@s {justify-self: flex-end}
    .ss-flex-justify-self-sStart\@s {justify-self: self-start}
    .ss-flex-justify-self-sEnd\@s {justify-self: self-end}
    .ss-flex-justify-self-right\@s {justify-self: right}
    .ss-flex-justify-self-left\@s {justify-self: left}
}

*[class^='ss-grid'], *[class*=' ss-grid-'] {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.ss-grid-collapse {}
.ss-grid-collapse > * {box-sizing: border-box}
.ss-grid-5 {margin-top: -5px;margin-left: -5px}
.ss-grid-5 > * {padding-top: 5px;padding-left: 5px}
.ss-grid-5_10 {margin-top: -5px;margin-left: -10px}
.ss-grid-5_10 > * {padding-top: 5px;padding-left: 10px}
.ss-grid-10 {margin-top: -10px;margin-left: -10px}
.ss-grid-10 > * {padding-top: 10px;padding-left: 10px}
.ss-grid-15 {margin-top: -15px;margin-left: -15px}
.ss-grid-15 > * {padding-top: 15px;padding-left: 15px}
.ss-grid-10_20 {margin-top: -10px;margin-left: -20px}
.ss-grid-10_20 > * {padding-top: 10px;padding-left: 20px}
.ss-grid-20 {margin-top: -20px;margin-left: -20px}
.ss-grid-20 > * {padding-top: 20px;padding-left: 20px}
.ss-grid-20_10 {margin-top: -20px;margin-left: -10px}
.ss-grid-20_10 > * {padding-top: 20px;padding-left: 10px}
.ss-grid-30 {margin-top: -30px;margin-left: -30px}
.ss-grid-30 > * {padding-top: 30px;padding-left: 30px}
@media (min-width: var(--br-point-l)) {
    .ss-grid-5\@s {margin-top: -5px;margin-left: -5px;}
    .ss-grid-5\@s > * {padding-top: 5px;padding-left: 5px}
    .ss-grid-5_10\@s {margin-top: -5px;margin-left: -10px}
    .ss-grid-5_10\@s > * {padding-top: 5px;padding-left: 10px}
    .ss-grid-10\@s {margin-top: -10px;margin-left: -10px}
    .ss-grid-10\@s > * {padding-top: 10px;padding-left: 10px}
    .ss-grid-15\@s {margin-top: -15px;margin-left: -15px}
    .ss-grid-15\@s > * {padding-top: 15px;padding-left: 15px}
    .ss-grid-10_20\@s {margin-top: -10px;margin-left: -20px}
    .ss-grid-10_20\@s > * {padding-top: 10px;padding-left: 20px}
    .ss-grid-20\@s {margin-top: -20px;margin-left: -20px}
    .ss-grid-20\@s > * {padding-top: 20px;padding-left: 20px}
    .ss-grid-20_10\@s {margin-top: -20px;margin-left: -10px}
    .ss-grid-20_10\@s > * {padding-top: 20px;padding-left: 10px}
    .ss-grid-30\@s {margin-top: -30px;margin-left: -30px}
    .ss-grid-30\@s > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 960px) {
    .ss-grid-5\@m {margin-top: -5px;margin-left: -5px}
    .ss-grid-5\@m > * {padding-top: 5px;padding-left: 5px}
    .ss-grid-5_10\@m {margin-top: -5px;margin-left: -10px}
    .ss-grid-5_10\@m > * {padding-top: 5px;padding-left: 10px}
    .ss-grid-10\@m {margin-top: -10px;margin-left: -10px}
    .ss-grid-10\@m > * {padding-top: 10px;padding-left: 10px}
    .ss-grid-15\@m {margin-top: -15px;margin-left: -15px}
    .ss-grid-15\@m > * {padding-top: 15px;padding-left: 15px}
    .ss-grid-10_20\@m {margin-top: -10px;margin-left: -20px}
    .ss-grid-10_20\@m > * {padding-top: 10px;padding-left: 20px}
    .ss-grid-20\@m {margin-top: -20px;margin-left: -20px}
    .ss-grid-20\@m > * {padding-top: 20px;padding-left: 20px}
    .ss-grid-20_10\@m {margin-top: -20px;margin-left: -10px}
    .ss-grid-20_10\@m > * {padding-top: 20px;padding-left: 10px}
    .ss-grid-30\@m {margin-top: -30px;margin-left: -30px}
    .ss-grid-30\@m > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1200px) {
    .ss-grid-5\@l {margin-top: -5px;margin-left: -5px}
    .ss-grid-5\@l > * {padding-top: 5px;padding-left: 5px}
    .ss-grid-5_10\@l {margin-top: -5px;margin-left: -10px}
    .ss-grid-5_10\@l > * {padding-top: 5px;padding-left: 10px}
    .ss-grid-10\@l {margin-top: -10px;margin-left: -10px}
    .ss-grid-10\@l > * {padding-top: 10px;padding-left: 10px}
    .ss-grid-15\@l {margin-top: -15px;margin-left: -15px}
    .ss-grid-15\@l > * {padding-top: 15px;padding-left: 15px}
    .ss-grid-10_20\@l {margin-top: -10px;margin-left: -20px}
    .ss-grid-10_20\@l > * {padding-top: 10px;padding-left: 20px}
    .ss-grid-20\@l {margin-top: -20px;margin-left: -20px}
    .ss-grid-20\@l > * {padding-top: 20px;padding-left: 20px}
    .ss-grid-20_10\@l {display: flex;flex-wrap: wrap;box-sizing: border-box;margin-top: -20px;margin-left: -10px}
    .ss-grid-20_10\@l > * {padding-top: 20px;padding-left: 10px}
    .ss-grid-30\@l {margin-top: -30px;margin-left: -30px}
    .ss-grid-30\@l > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1440px) {
    .ss-grid-5\@n {margin-top: -5px;margin-left: -5px}
    .ss-grid-5\@n > * {padding-top: 5px;padding-left: 5px}
    .ss-grid-5_10\@n {margin-top: -5px;margin-left: -10px}
    .ss-grid-5_10\@n > * {padding-top: 5px;padding-left: 10px}
    .ss-grid-10\@n {margin-top: -10px;margin-left: -10px}
    .ss-grid-10\@n > * {padding-top: 10px;padding-left: 10px}
    .ss-grid-15\@n {margin-top: -15px;margin-left: -15px}
    .ss-grid-15\@n > * {padding-top: 15px;padding-left: 15px}
    .ss-grid-10_20\@n {margin-top: -10px;margin-left: -20px}
    .ss-grid-10_20\@n > * {padding-top: 10px;padding-left: 20px}
    .ss-grid-20\@n {margin-top: -20px;margin-left: -20px}
    .ss-grid-20\@n > * {padding-top: 20px;padding-left: 20px}
    .ss-grid-20_10\@n {margin-top: -20px;margin-left: -10px}
    .ss-grid-20_10\@n > * {padding-top: 20px;padding-left: 10px}
    .ss-grid-30\@n {margin-top: -30px;margin-left: -30px}
    .ss-grid-30\@n > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1600px) {
    .ss-grid-5\@xl {margin-top: -5px;margin-left: -5px}
    .ss-grid-5\@xl > * {padding-top: 5px;padding-left: 5px}
    .ss-grid-5_10\@xl {margin-top: -5px;margin-left: -10px}
    .ss-grid-5_10\@xl > * {padding-top: 5px;padding-left: 10px}
    .ss-grid-10\@xl {margin-top: -10px;margin-left: -10px}
    .ss-grid-10\@xl > * {padding-top: 10px;padding-left: 10px}
    .ss-grid-15\@xl {margin-top: -15px;margin-left: -15px}
    .ss-grid-15\@xl > * {padding-top: 15px;padding-left: 15px}
    .ss-grid-10_20\@xl {margin-top: -10px;margin-left: -20px}
    .ss-grid-10_20\@xl > * {padding-top: 10px;padding-left: 20px}
    .ss-grid-20\@xl {margin-top: -20px;margin-left: -20px}
    .ss-grid-20\@xl > * {padding-top: 20px;padding-left: 20px}
    .ss-grid-20_10\@xl {margin-top: -20px;margin-left: -10px}
    .ss-grid-20_10\@xl > * {padding-top: 20px;padding-left: 10px}
    .ss-grid-30\@xl {margin-top: -30px;margin-left: -30px}
    ss-grid-30\@xl > * {padding-top: 30px;padding-left: 30px}
}

.ss-p-0 {padding: 0;} .ss-p-5 {padding: 5px}  .ss-p-10 {padding: 10px}  .ss-p-15 {padding: 15px}  .ss-p-20 {padding: 20px}  .ss-p-25 {padding: 25px}  .ss-p-30 {padding: 30px}  .ss-p-35 {padding: 35px}  .ss-p-40 {padding: 40px}  .ss-p-45 {padding: 45px}  .ss-pt-5 {padding-top: 5px}  .ss-pt-10 {padding-top: 10px}  .ss-pt-15 {padding-top: 15px}  .ss-pt-20 {padding-top: 20px}  .ss-pt-25 {padding-top: 25px}  .ss-pt-30 {padding-top: 30px}  .ss-pt-35 {padding-top: 35px}  .ss-pt-40 {padding-top: 40px}  .ss-pt-45 {padding-top: 45px}  .ss-pr-5 {padding-right: 5px}  .ss-pr-10 {padding-right: 10px}  .ss-pr-15 {padding-right: 15px}  .ss-pr-20 {padding-right: 20px}  .ss-pr-25 {padding-right: 25px}  .ss-pr-30 {padding-right: 30px}  .ss-pr-35 {padding-right: 35px}  .ss-pr-40 {padding-right: 40px}  .ss-pr-45 {padding-right: 45px}  .ss-pl-5 {padding-left: 5px}  .ss-pl-10 {padding-left: 10px}  .ss-pl-15 {padding-left: 15px}  .ss-pl-20 {padding-left: 20px}  .ss-pl-25 {padding-left: 25px}  .ss-pl-30 {padding-left: 30px}  .ss-pl-35 {padding-left: 35px}  .ss-pl-40 {padding-left: 40px}  .ss-pl-45 {padding-left: 45px}  .ss-pb-5 {padding-bottom: 5px}  .ss-pb-10 {padding-bottom: 10px}  .ss-pb-15 {padding-bottom: 15px}  .ss-pb-20 {padding-bottom: 20px}  .ss-pb-25 {padding-bottom: 25px}  .ss-pb-30 {padding-bottom: 30px}  .ss-pb-35 {padding-bottom: 35px}  .ss-pb-40 {padding-bottom: 40px}  .ss-pb-45 {padding-bottom: 45px}  .ss-p-5-10 {padding: 5px 10px}  .ss-p-10-15 {padding: 10px 15px}  .ss-p-7-14 {padding: 10px 15px}  .ss-p-15-10 {padding: 15px 10px}  .ss-p-20-30 {padding: 20px 30px}  .ss-p-15-30 {padding: 15px 30px}  .ss-p-10-30 {padding: 10px 30px}  .ss-p-10-20 {padding: 10px 20px}

@media (min-width: 1600px) {
    .ss-p-5\@xl {padding: 5px}
    .ss-p-10\@xl {padding: 10px}
    .ss-p-15\@xl {padding: 15px}
    .ss-p-20\@xl {padding: 20px}
    .ss-p-25\@xl {padding: 25px}
    .ss-p-30\@xl {padding: 30px}
    .ss-p-35\@xl {padding: 35px}
    .ss-p-40\@xl {padding: 40px}
    .ss-p-45\@xl {padding: 45px}
    .ss-pt-5\@xl {padding-top: 5px}
    .ss-pt-10\@xl {padding-top: 10px}
    .ss-pt-15\@xl {padding-top: 15px}
    .ss-pt-20\@xl {padding-top: 20px}
    .ss-pt-25\@xl {padding-top: 25px}
    .ss-pt-30\@xl {padding-top: 30px}
    .ss-pt-35\@xl {padding-top: 35px}
    .ss-pt-40\@xl {padding-top: 40px}
    .ss-pt-45\@xl {padding-top: 45px}
    .ss-pr-5\@xl {padding-right: 5px}
    .ss-pr-10\@xl {padding-right: 10px}
    .ss-pr-15\@xl {padding-right: 15px}
    .ss-pr-20\@xl {padding-right: 20px}
    .ss-pr-25\@xl {padding-right: 25px}
    .ss-pr-30\@xl {padding-right: 30px}
    .ss-pr-35\@xl {padding-right: 35px}
    .ss-pr-40\@xl {padding-right: 40px}
    .ss-pr-45\@xl {padding-right: 45px}
    .ss-pl-5\@xl {padding-left: 5px}
    .ss-pl-10\@xl {padding-left: 10px}
    .ss-pl-15\@xl {padding-left: 15px}
    .ss-pl-20\@xl {padding-left: 20px}
    .ss-pl-25\@xl {padding-left: 25px}
    .ss-pl-30\@xl {padding-left: 30px}
    .ss-pl-35\@xl {padding-left: 35px}
    .ss-pl-40\@xl {padding-left: 40px}
    .ss-pl-45\@xl {padding-left: 45px}
    .ss-pb-5\@xl {padding-bottom: 5px}
    .ss-pb-10\@xl {padding-bottom: 10px}
    .ss-pb-15\@xl {padding-bottom: 15px}
    .ss-pb-20\@xl {padding-bottom: 20px}
    .ss-pb-25\@xl {padding-bottom: 25px}
    .ss-pb-30\@xl {padding-bottom: 30px}
    .ss-pb-35\@xl {padding-bottom: 35px}
    .ss-pb-40\@xl {padding-bottom: 40px}
    .ss-pb-45\@xl {padding-bottom: 45px}
    .ss-p-5-10\@xl {padding: 5px 10px}
    .ss-p-10-15\@xl {padding: 10px 15px}
    .ss-p-7-14\@xl {padding: 10px 15px}
    .ss-p-15-10\@xl {padding: 15px 10px}
    .ss-p-20-30\@xl {padding: 20px 30px}
    .ss-p-15-30\@xl {padding: 15px 30px}
    .ss-p-10-30\@xl {padding: 10px 30px}
    .ss-p-10-20\@xl {padding: 10px 20px}
}

@media (min-width: 1440px) {
    .ss-p-5\@n {padding: 5px}
    .ss-p-10\@n {padding: 10px}
    .ss-p-15\@n {padding: 15px}
    .ss-p-20\@n {padding: 20px}
    .ss-p-25\@n {padding: 25px}
    .ss-p-30\@n {padding: 30px}
    .ss-p-35\@n {padding: 35px}
    .ss-p-40\@n {padding: 40px}
    .ss-p-45\@n {padding: 45px}
    .ss-pt-5\@n {padding-top: 5px}
    .ss-pt-10\@n {padding-top: 10px}
    .ss-pt-15\@n {padding-top: 15px}
    .ss-pt-20\@n {padding-top: 20px}
    .ss-pt-25\@n {padding-top: 25px}
    .ss-pt-30\@n {padding-top: 30px}
    .ss-pt-35\@n {padding-top: 35px}
    .ss-pt-40\@n {padding-top: 40px}
    .ss-pt-45\@n {padding-top: 45px}
    .ss-pr-5\@n {padding-right: 5px}
    .ss-pr-10\@n {padding-right: 10px}
    .ss-pr-15\@n {padding-right: 15px}
    .ss-pr-20\@n {padding-right: 20px}
    .ss-pr-25\@n {padding-right: 25px}
    .ss-pr-30\@n {padding-right: 30px}
    .ss-pr-35\@n {padding-right: 35px}
    .ss-pr-40\@n {padding-right: 40px}
    .ss-pr-45\@n {padding-right: 45px}
    .ss-pl-5\@n {padding-left: 5px}
    .ss-pl-10\@n {padding-left: 10px}
    .ss-pl-15\@n {padding-left: 15px}
    .ss-pl-20\@n {padding-left: 20px}
    .ss-pl-25\@n {padding-left: 25px}
    .ss-pl-30\@n {padding-left: 30px}
    .ss-pl-35\@n {padding-left: 35px}
    .ss-pl-40\@n {padding-left: 40px}
    .ss-pl-45\@n {padding-left: 45px}
    .ss-pb-5\@n {padding-bottom: 5px}
    .ss-pb-10\@n {padding-bottom: 10px}
    .ss-pb-15\@n {padding-bottom: 15px}
    .ss-pb-20\@n {padding-bottom: 20px}
    .ss-pb-25\@n {padding-bottom: 25px}
    .ss-pb-30\@n {padding-bottom: 30px}
    .ss-pb-35\@n {padding-bottom: 35px}
    .ss-pb-40\@n {padding-bottom: 40px}
    .ss-pb-45\@n {padding-bottom: 45px}
    .ss-p-5-10\@n {padding: 5px 10px}
    .ss-p-10-15\@n {padding: 10px 15px}
    .ss-p-7-14\@n {padding: 10px 15px}
    .ss-p-15-10\@n {padding: 15px 10px}
    .ss-p-20-30\@n {padding: 20px 30px}
    .ss-p-15-30\@n {padding: 15px 30px}
    .ss-p-10-30\@n {padding: 10px 30px}
    .ss-p-10-20\@n {padding: 10px 20px}
}

@media (min-width: 1200px) {
    .ss-p-5\@l {padding: 5px}
    .ss-p-10\@l {padding: 10px}
    .ss-p-15\@l {padding: 15px}
    .ss-p-20\@l {padding: 20px}
    .ss-p-25\@l {padding: 25px}
    .ss-p-30\@l {padding: 30px}
    .ss-p-35\@l {padding: 35px}
    .ss-p-40\@l {padding: 40px}
    .ss-p-45\@l {padding: 45px}
    .ss-pt-5\@l {padding-top: 5px}
    .ss-pt-10\@l {padding-top: 10px}
    .ss-pt-15\@l {padding-top: 15px}
    .ss-pt-20\@l {padding-top: 20px}
    .ss-pt-25\@l {padding-top: 25px}
    .ss-pt-30\@l {padding-top: 30px}
    .ss-pt-35\@l {padding-top: 35px}
    .ss-pt-40\@l {padding-top: 40px}
    .ss-pt-45\@l {padding-top: 45px}
    .ss-pr-5\@l {padding-right: 5px}
    .ss-pr-10\@l {padding-right: 10px}
    .ss-pr-15\@l {padding-right: 15px}
    .ss-pr-20\@l {padding-right: 20px}
    .ss-pr-25\@l {padding-right: 25px}
    .ss-pr-30\@l {padding-right: 30px}
    .ss-pr-35\@l {padding-right: 35px}
    .ss-pr-40\@l {padding-right: 40px}
    .ss-pr-45\@l {padding-right: 45px}
    .ss-pl-5\@l {padding-left: 5px}
    .ss-pl-10\@l {padding-left: 10px}
    .ss-pl-15\@l {padding-left: 15px}
    .ss-pl-20\@l {padding-left: 20px}
    .ss-pl-25\@l {padding-left: 25px}
    .ss-pl-30\@l {padding-left: 30px}
    .ss-pl-35\@l {padding-left: 35px}
    .ss-pl-40\@l {padding-left: 40px}
    .ss-pl-45\@l {padding-left: 45px}
    .ss-pb-5\@l {padding-bottom: 5px}
    .ss-pb-10\@l {padding-bottom: 10px}
    .ss-pb-15\@l {padding-bottom: 15px}
    .ss-pb-20\@l {padding-bottom: 20px}
    .ss-pb-25\@l {padding-bottom: 25px}
    .ss-pb-30\@l {padding-bottom: 30px}
    .ss-pb-35\@l {padding-bottom: 35px}
    .ss-pb-40\@l {padding-bottom: 40px}
    .ss-pb-45\@l {padding-bottom: 45px}
    .ss-p-5-10\@l {padding: 5px 10px}
    .ss-p-10-15\@l {padding: 10px 15px}
    .ss-p-7-14\@l {padding: 10px 15px}
    .ss-p-15-10\@l {padding: 15px 10px}
    .ss-p-20-30\@l {padding: 20px 30px}
    .ss-p-15-30\@l {padding: 15px 30px}
    .ss-p-10-30\@l {padding: 10px 30px}
    .ss-p-10-20\@l {padding: 10px 20px}
}

@media (min-width: 960px) {

    .ss-p-5\@m {padding: 5px}
    .ss-p-10\@m {padding: 10px}
    .ss-p-15\@m {padding: 15px}
    .ss-p-20\@m {padding: 20px}
    .ss-p-25\@m {padding: 25px}
    .ss-p-30\@m {padding: 30px}
    .ss-p-35\@m {padding: 35px}
    .ss-p-40\@m {padding: 40px}

    .ss-p-45\@m {padding: 45px}
    .ss-pt-5\@m {padding-top: 5px}
    .ss-pt-10\@m {padding-top: 10px}
    .ss-pt-15\@m {padding-top: 15px}
    .ss-pt-20\@m {padding-top: 20px}
    .ss-pt-25\@m {padding-top: 25px}
    .ss-pt-30\@m {padding-top: 30px}
    .ss-pt-35\@m {padding-top: 35px}
    .ss-pt-40\@m {padding-top: 40px}
    .ss-pt-45\@m {padding-top: 45px}
    .ss-pr-5\@m {padding-right: 5px}
    .ss-pr-10\@m {padding-right: 10px}
    .ss-pr-15\@m {padding-right: 15px}
    .ss-pr-20\@m {padding-right: 20px}
    .ss-pr-25\@m {padding-right: 25px}
    .ss-pr-30\@m {padding-right: 30px}
    .ss-pr-35\@m {padding-right: 35px}
    .ss-pr-40\@m {padding-right: 40px}
    .ss-pr-45\@m {padding-right: 45px}
    .ss-pl-5\@m {padding-left: 5px}
    .ss-pl-10\@m {padding-left: 10px}
    .ss-pl-15\@m {padding-left: 15px}
    .ss-pl-20\@m {padding-left: 20px}
    .ss-pl-25\@m {padding-left: 25px}
    .ss-pl-30\@m {padding-left: 30px}
    .ss-pl-35\@m {padding-left: 35px}
    .ss-pl-40\@m {padding-left: 40px}
    .ss-pl-45\@m {padding-left: 45px}
    .ss-pb-5\@m {padding-bottom: 5px}
    .ss-pb-10\@m {padding-bottom: 10px}
    .ss-pb-15\@m {padding-bottom: 15px}
    .ss-pb-20\@m {padding-bottom: 20px}
    .ss-pb-25\@m {padding-bottom: 25px}
    .ss-pb-30\@m {padding-bottom: 30px}
    .ss-pb-35\@m {padding-bottom: 35px}
    .ss-pb-40\@m {padding-bottom: 40px}
    .ss-pb-45\@m {padding-bottom: 45px}
    .ss-p-5-10\@m {padding: 5px 10px}
    .ss-p-10-15\@m {padding: 10px 15px}
    .ss-p-7-14\@m {padding: 10px 15px}
    .ss-p-15-10\@m {padding: 15px 10px}
    .ss-p-20-30\@m {padding: 20px 30px}
    .ss-p-15-30\@m {padding: 15px 30px}
    .ss-p-10-30\@m {padding: 10px 30px}
    .ss-p-10-20\@m {padding: 10px 20px}
}
@media (min-width: 640px)
{
    .ss-p-5\@s {padding: 5px}  .ss-p-10\@s {padding: 10px}
    .ss-p-15\@s {padding: 15px}  .ss-p-20\@s {padding: 20px}
    .ss-p-25\@s {padding: 25px}  .ss-p-30\@s {padding: 30px}
    .ss-p-35\@s {padding: 35px}  .ss-p-40\@s {padding: 40px}
    .ss-p-45\@s {padding: 45px}  .ss-pt-5\@s {padding-top: 5px}
    .ss-pt-10\@s {padding-top: 10px}  .ss-pt-15\@s {padding-top: 15px}
    .ss-pt-20\@s {padding-top: 20px}  .ss-pt-25\@s {padding-top: 25px}
    .ss-pt-30\@s {padding-top: 30px}  .ss-pt-35\@s {padding-top: 35px}
    .ss-pt-40\@s {padding-top: 40px}  .ss-pt-45\@s {padding-top: 45px}
    .ss-pr-5\@s {padding-right: 5px}  .ss-pr-10\@s {padding-right: 10px}
    .ss-pr-15\@s {padding-right: 15px}  .ss-pr-20\@s {padding-right: 20px}
    .ss-pr-25\@s {padding-right: 25px}  .ss-pr-30\@s {padding-right: 30px}
    .ss-pr-35\@s {padding-right: 35px}  .ss-pr-40\@s {padding-right: 40px}
    .ss-pr-45\@s {padding-right: 45px}  .ss-pl-5\@s {padding-left: 5px}
    .ss-pl-10\@s {padding-left: 10px}  .ss-pl-15\@s {padding-left: 15px}
    .ss-pl-20\@s {padding-left: 20px}
    .ss-pl-25\@s {padding-left: 25px}
    .ss-pl-30\@s {padding-left: 30px}
    .ss-pl-35\@s {padding-left: 35px}
    .ss-pl-40\@s {padding-left: 40px}
    .ss-pl-45\@s {padding-left: 45px}
    .ss-pb-5\@s {padding-bottom: 5px}
    .ss-pb-10\@s {padding-bottom: 10px}
    .ss-pb-15\@s {padding-bottom: 15px}
    .ss-pb-20\@s {padding-bottom: 20px}
    .ss-pb-25\@s {padding-bottom: 25px}
    .ss-pb-30\@s {padding-bottom: 30px}
    .ss-pb-35\@s {padding-bottom: 35px}
    .ss-pb-40\@s {padding-bottom: 40px}
    .ss-pb-45\@s {padding-bottom: 45px}
    .ss-p-5-10\@s {padding: 5px 10px}
    .ss-p-10-15\@s {padding: 10px 15px}
    .ss-p-7-14\@s {padding: 10px 15px}
    .ss-p-15-10\@s {padding: 15px 10px}
    .ss-p-20-30\@s {padding: 20px 30px}
    .ss-p-15-30\@s {padding: 15px 30px}
    .ss-p-10-30\@s {padding: 10px 30px}
    .ss-p-10-20\@s {padding: 10px 20px}
}
.ss-m-0 {margin: 0;}
.ss-m-5 {margin: 5px}
.ss-m-10 {margin: 10px}
.ss-m-15 {margin: 15px}
.ss-m-20 {margin: 20px}
.ss-m-25 {margin: 25px}
.ss-m-30 {margin: 30px}
.ss-m-35 {margin: 35px}
.ss-m-40 {margin: 40px}
.ss-m-45 {margin: 45px}
.ss-mt-5 {margin-top: 5px}
.ss-mt-10 {margin-top: 10px}
.ss-mt-15 {margin-top: 15px}
.ss-mt-20 {margin-top: 20px}
.ss-mt-25 {margin-top: 25px}
.ss-mt-30 {margin-top: 30px}
.ss-mt-35 {margin-top: 35px}
.ss-mt-40 {margin-top: 40px}
.ss-mt-45 {margin-top: 45px}
.ss-mr-5 {margin-right: 5px}
.ss-mr-10 {margin-right: 10px}
.ss-mr-15 {margin-right: 15px}
.ss-mr-20 {margin-right: 20px}
.ss-mr-25 {margin-right: 25px}
.ss-mr-30 {margin-right: 30px}
.ss-mr-35 {margin-right: 35px}
.ss-mr-40 {margin-right: 40px}
.ss-mr-45 {margin-right: 45px}
.ss-ml-5 {margin-left: 5px}
.ss-ml-10 {margin-left: 10px}
.ss-ml-15 {margin-left: 15px}
.ss-ml-20 {margin-left: 20px}
.ss-ml-25 {margin-left: 25px}
.ss-ml-30 {margin-left: 30px}
.ss-ml-35 {margin-left: 35px}
.ss-ml-40 {margin-left: 40px}
.ss-ml-45 {margin-left: 45px}
.ss-mb-5 {margin-bottom: 5px}
.ss-mb-10 {margin-bottom: 10px}
.ss-mb-15 {margin-bottom: 15px}
.ss-mb-20 {margin-bottom: 20px}
.ss-mb-25 {margin-bottom: 25px}
.ss-mb-30 {margin-bottom: 30px}
.ss-mb-35 {margin-bottom: 35px}
.ss-mb-40 {margin-bottom: 40px}
.ss-mb-45 {margin-bottom: 45px}
.ss-mt-auto{margin-top: auto}
.ss-mb-auto{margin-bottom: auto}
.ss-ml-auto{margin-left: auto}
.ss-mr-auto{margin-right: auto}
.ss-m-horizontal {margin: 0 auto}
.ss-m-vertical {margin: auto 0}


/**
[^=child-width] Энэ классны хүүхдүүдийн өргөнийг зааж өгнө
 */
[class^="ss-width"] {box-sizing: border-box;width: 100%;max-width: 100%;}
[class*= ss-child-width] > * {box-sizing: border-box;}
.ss-child-width-expand > * {min-width: 1px;flex: 1;}
.ss-child-width-1-1 > * {width: 100%;}
.ss-child-width-1-12 > * {width: 8.333%;}
.ss-child-width-2-12 > * {width: 16.666%;}
.ss-child-width-3-12 > * {width: 25%;}
.ss-child-width-4-12 > * {width: 33.333%;}
.ss-child-width-5-12 > * {width: 41.666%;}
.ss-child-width-6-12 > * {width: 50%;}
.ss-child-width-7-12 > * {width: 58.333%;}
.ss-child-width-8-12 > * {width: 66.666%;}
.ss-child-width-9-12 > * {width: 75%;}
.ss-child-width-10-12 > * {width: 83.333%;}
.ss-child-width-11-12 > * {width: 91.666%;}

@media (min-width: 1600px) {
    .ss-child-width-expand\@xl > * {min-width: 1px;flex: 1;}
    .ss-child-width-1-1\@xl > * {width: 100%;}
    .ss-child-width-1-12\@xl > * {width: 8.333%;}
    .ss-child-width-2-12\@xl > * {width: 16.666%;}
    .ss-child-width-3-12\@xl > * {width: 25%;}
    .ss-child-width-4-12\@xl > * {width: 33.333%;}
    .ss-child-width-5-12\@xl > * {width: 41.666%;}
    .ss-child-width-6-12 > * {width: 50%;}
    .ss-child-width-7-12\@xl > * {width: 58.333%;}
    .ss-child-width-8-12\@xl > * {width: 66.666%;}
    .ss-child-width-9-12\@xl > * {width: 75%;}
    .ss-child-width-10-12\@xl > * {width: 83.333%;}
    .ss-child-width-11-12\@xl > * {width: 91.666%;}
}
@media (min-width: 1440px) {
    .ss-child-width-expand\@n > * {min-width: 1px;flex: 1;}
    .ss-child-width-1-1\@n > * {width: 100%;}
    .ss-child-width-1-12\@n > * {width: 8.333%;}
    .ss-child-width-2-12\@n > * {width: 16.666%;}
    .ss-child-width-3-12\@n > * {width: 25%;}
    .ss-child-width-4-12\@n > * {width: 33.333%;}
    .ss-child-width-5-12\@n > * {width: 41.666%;}
    .ss-child-width-6-12 > * {width: 50%;}
    .ss-child-width-7-12\@n > * {width: 58.333%;}
    .ss-child-width-8-12\@n > * {width: 66.666%;}
    .ss-child-width-9-12\@n > * {width: 75%;}
    .ss-child-width-10-12\@n > * {width: 83.333%;}
    .ss-child-width-11-12\@n > * {width: 91.666%;}
}
@media (min-width: 1200px) {
    .ss-child-width-expand\@l > * {min-width: 1px;flex: 1;}
    .ss-child-width-1-1\@l > * {width: 100%;}
    .ss-child-width-1-12\@l > * {width: 8.333%;}
    .ss-child-width-2-12\@l > * {width: 16.666%;}
    .ss-child-width-3-12\@l > * {width: 25%;}
    .ss-child-width-4-12\@l > * {width: 33.333%;}
    .ss-child-width-5-12\@l > * {width: 41.666%;}
    .ss-child-width-6-12 > * {width: 50%;}
    .ss-child-width-7-12\@l > * {width: 58.333%;}
    .ss-child-width-8-12\@l > * {width: 66.666%;}
    .ss-child-width-9-12\@l > * {width: 75%;}
    .ss-child-width-10-12\@l > * {width: 83.333%;}
    .ss-child-width-11-12\@l > * {width: 91.666%;}
}
@media (min-width: 960px) {
    .ss-child-width-expand\@m > * {min-width: 1px;flex: 1;}
    .ss-child-width-1-1\@m > * {width: 100%;}
    .ss-child-width-1-12\@m > * {width: 8.333%;}
    .ss-child-width-2-12\@m > * {width: 16.666%;}
    .ss-child-width-3-12\@m > * {width: 25%;}
    .ss-child-width-4-12\@m > * {width: 33.333%;}
    .ss-child-width-5-12\@m > * {width: 41.666%;}
    .ss-child-width-6-12 > * {width: 50%;}
    .ss-child-width-7-12\@m > * {width: 58.333%;}
    .ss-child-width-8-12\@m > * {width: 66.666%;}
    .ss-child-width-9-12\@m > * {width: 75%;}
    .ss-child-width-10-12\@m > * {width: 83.333%;}
    .ss-child-width-11-12\@m > * {width: 91.666%;}
}
@media (min-width: 640px) {
    .ss-child-width-expand\@s > * {min-width: 1px;flex: 1;}
    .ss-child-width-1-1\@s > * {width: 100%;}
    .ss-child-width-1-12\@s > * {width: 8.333%;}
    .ss-child-width-2-12\@s > * {width: 16.666%;}
    .ss-child-width-3-12\@s > * {width: 25%;}
    .ss-child-width-4-12\@s > * {width: 33.333%;}
    .ss-child-width-5-12\@s > * {width: 41.666%;}
    .ss-child-width-6-12 > * {width: 50%;}
    .ss-child-width-7-12\@s > * {width: 58.333%;}
    .ss-child-width-8-12\@s > * {width: 66.666%;}
    .ss-child-width-9-12\@s > * {width: 75%;}
    .ss-child-width-10-12\@s > * {width: 83.333%;}
    .ss-child-width-11-12\@s > * {width: 91.666%;}
}

.ss-width-expand {min-width: 1px;flex: 1;}
.ss-width-1-1 {width: 100%;}
.ss-width-1-12 {width: 8.333%;}
.ss-width-2-12 {width: 16.666%;}
.ss-width-3-12 {width: 25%;}
.ss-width-4-12 {width: 33.333%;}
.ss-width-5-12 {width: 41.666%;}
.ss-width-6-12 {width: 50%;}
.ss-width-7-12 {width: 58.333%;}
.ss-width-8-12 {width: 66.666%;}
.ss-width-9-12 {width: 75%;}
.ss-width-10-12 {width: 83.333%;}
.ss-width-11-12 {width: 91.666%;}

@media (min-width: 1600px){
    .ss-width-expand\@xl {min-width: 1px;flex: 1;}
    .ss-width-1-1\@xl {width: 100%;}
    .ss-width-1-12\@xl {width: 8.333%;}
    .ss-width-2-12\@xl {width: 16.666%;}
    .ss-width-3-12\@xl {width: 25%;}
    .ss-width-4-12\@xl {width: 33.333%;}
    .ss-width-5-12\@xl {width: 41.666%;}
    .ss-width-6-12\@xl {width: 50%;}
    .ss-width-7-12\@xl {width: 58.333%;}
    .ss-width-8-12\@xl {width: 66.666%;}
    .ss-width-9-12\@xl {width: 75%;}
    .ss-width-10-12\@xl {width: 83.333%;}
    .ss-width-11-12\@xl {width: 91.666%;}
}

@media (min-width: 1440px){
    .ss-width-expand\@n {min-width: 1px;flex: 1;}
    .ss-width-1-1\@n {width: 100%;}
    .ss-width-1-12\@n {width: 8.333%;}
    .ss-width-2-12\@n {width: 16.666%;}
    .ss-width-3-12\@n {width: 25%;}
    .ss-width-4-12\@n {width: 33.333%;}
    .ss-width-5-12\@n {width: 41.666%;}
    .ss-width-6-12\@n {width: 50%;}
    .ss-width-7-12\@n {width: 58.333%;}
    .ss-width-8-12\@n {width: 66.666%;}
    .ss-width-9-12\@n {width: 75%;}
    .ss-width-10-12\@n {width: 83.333%;}
    .ss-width-11-12\@n {width: 91.666%;}
}
@media (min-width: 1200px){
    .ss-width-expand\@l {min-width: 1px;flex: 1;}
    .ss-width-1-1\@l {width: 100%;}
    .ss-width-1-12\@l {width: 8.333%;}
    .ss-width-2-12\@l {width: 16.666%;}
    .ss-width-3-12\@l {width: 25%;}
    .ss-width-4-12\@l {width: 33.333%;}
    .ss-width-5-12\@l {width: 41.666%;}
    .ss-width-6-12\@l {width: 50%;}
    .ss-width-7-12\@l {width: 58.333%;}
    .ss-width-8-12\@l {width: 66.666%;}
    .ss-width-9-12\@l {width: 75%;}
    .ss-width-10-12\@l {width: 83.333%;}
    .ss-width-11-12\@l {width: 91.666%;}
}
@media (min-width: 960px){
    .ss-width-expand\@m {min-width: 1px;flex: 1;}
    .ss-width-1-1\@m {width: 100%;}
    .ss-width-1-12\@m {width: 8.333%;}
    .ss-width-2-12\@m {width: 16.666%;}
    .ss-width-3-12\@m {width: 25%;}
    .ss-width-4-12\@m {width: 33.333%;}
    .ss-width-5-12\@m {width: 41.666%;}
    .ss-width-6-12\@m {width: 50%;}
    .ss-width-7-12\@m {width: 58.333%;}
    .ss-width-8-12\@m {width: 66.666%;}
    .ss-width-9-12\@m {width: 75%;}
    .ss-width-10-12\@m {width: 83.333%;}
    .ss-width-11-12\@m {width: 91.666%;}
}
@media (min-width: 640px){
    .ss-width-expand\@s {min-width: 1px;flex: 1;}
    .ss-width-1-1\@s {width: 100%;}
    .ss-width-1-12\@s {width: 8.333%;}
    .ss-width-2-12\@s {width: 16.666%;}
    .ss-width-3-12\@s {width: 25%;}
    .ss-width-4-12\@s {width: 33.333%;}
    .ss-width-5-12\@s {width: 41.666%;}
    .ss-width-6-12\@s {width: 50%;}
    .ss-width-7-12\@s {width: 58.333%;}
    .ss-width-8-12\@s {width: 66.666%;}
    .ss-width-9-12\@s {width: 75%;}
    .ss-width-10-12\@s {width: 83.333%;}
    .ss-width-11-12\@s {width: 91.666%;}
}

/**
Мөр хязгаарлагч
 */
.ss-lineClamp12 {display: -webkit-box !important;-webkit-line-clamp: 12;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp11 {display: -webkit-box !important;-webkit-line-clamp: 11;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp10 {display: -webkit-box !important;-webkit-line-clamp: 10;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp9 {display: -webkit-box !important;-webkit-line-clamp: 9;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp8 {display: -webkit-box !important;-webkit-line-clamp: 8;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp7 {display: -webkit-box !important;-webkit-line-clamp: 7;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp6 {display: -webkit-box !important;-webkit-line-clamp: 6;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp5 {display: -webkit-box !important;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp4 {display: -webkit-box !important;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp3 {display: -webkit-box !important;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp2 {display: -webkit-box !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.ss-lineClamp1 {display: -webkit-box !important;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}

/*за энийг яагаад оруулсанг мэдэхгүй байна шаардлагатай бол идэвхгүй болгож хэрэглэнэ биз дэ*/
iframe {width: 100%; min-height: 400px;}

.ss-transition-fade {transition: opacity 1s, visibility .4s;}
.ss-hidden {opacity: 0;}
.ss-fadeOut {opacity: 0 !important;}
.ss-fadeIn {opacity: 1 !important;}

.ss-button {display: flex;align-items: center;border-style: none;border-radius: 10px;box-sizing: border-box;padding: 13px 10px;font-size: 16px;font-weight: 500;color: #fff;line-height: 150%;height: 40px;transition: box-shadow .3s, border .3s, color .3s, background-color .3s;}
.ss-button-medium {padding: 15px;height: 50px;}
.ss-button:not(:disabled) , button:not(:disabled) {cursor: pointer;}
.ss-button:disabled {border: 2px solid #999;background-color: #999;color: #666;}
.ss-button-transparent {background-color: transparent;}

.ss-max-height {
    height: max-content;
}

/**
Эд нарыг юунд ашигласнаа сандаггүй ээ.
Түр коммент болгов
 */

/*ul.menu{display: flex;}*/
/*ul.menu li{padding: 5px;}*/
/*.slide{position: relative;}*/
/*.slide img{width: 100%;}*/
/*.slide .title{position: absolute; z-index: 1;}*/
/*.slide .more{position: absolute; z-index: 1;}*/

.ss-bg-white {background-color: #fff}
.ss-bg-grey {background-color: grey}
.ss-bg-gray {background-color: gray}
.ss-bg-dark {background-color: #363636}
.ss-bg-smoke {background-color: whitesmoke}
.ss-bg-darkgray {background-color: darkgray}

.ss-article-video {width: 100%; height: 100%; object-fit: cover;}

.ss-article-view-text img{border:1px solid #CCC; box-sizing: border-box;}
.ss-article-view-text figure{margin: 0 10px 0 0;}
.ss-article-view-text figcaption{text-align: center; font-weight: bold; line-height: 1;}
.ss-article-view-text ul, .ss-article-view-text ol{margin-right: 0; padding: 0 40px;}
.ss-article-view-text ul{list-style: disc;}
.ss-article-view-text ol{list-style: decimal;}
.ss-article-view-text table{margin: 20px 0; width: 100%; border-top: 3px solid #363636; border-bottom: 2px solid #363636; border-collapse: collapse; font-size: 13px;}
.ss-article-view-text table th{padding: 4px; border: 1px solid #ccc; border-bottom: 1px solid #363636; color: #363636; font-weight: bold; background-color: #dbe1ea;}
.ss-article-view-text table td{padding: 4px; border: 1px solid #dbe1ea; color: #363636; font-weight: 300;}
.ss-article-view-text blockquote {padding: 20px; border-left: 5px solid #bb1919; background: #f1f1f1;}
.ss-article-view-text blockquote p {color: #333; font-size: 17px; font-style: italic; line-height: 28px;}
/* end of components */

/* emoji for ui */
.ss-emoji-poll-title{margin-bottom: 10px;padding-bottom: 10px;color: #363636;font-size: 18px;line-height: 25px;font-weight: 600}
.ss-article-reaction-item{margin-left: 3px;margin-right: 3px;text-align: center;padding: 10px;border-radius: 20px;background-color: #fff;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.ss-article-reaction-item .ss-article-reaction-emoji, .ss-article-reaction-item:hover .ss-article-reaction-emoji {-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.ss-article-reaction-item .ss-article-reaction-emoji img, .ss-article-reaction-item:hover .ss-article-reaction-emoji img {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.ss-article-reaction-number {font-size: 18px;font-weight: 700;color: #363636;line-height: 25px;}
.ss-article-reaction-item.active, .ss-article-reaction-item:hover {background-color: #f2f2f2;cursor: pointer;transition: all .3s ease-in-out;}
.ss-article-reaction-item:hover .ss-article-reaction-emoji {transform: scale(1.1) rotate(10deg);}
.ss-article-reaction-item:hover .ss-article-reaction-emoji img {filter: grayscale(0);opacity: 1;}
/* emoji end ui */

/* for show slide */
.ss-image-slide-wrapper{position: relative; overflow: hidden; margin: 10px 0;}
.ss-image-slide-wrapper__text{  background-color: #dbe1ea;font-size: 11px;color: #454d62;text-align: center;font-style: italic;line-height: 1.6;padding: 4px;position: absolute; bottom: 0; left: 0; right: 0; width: 100%;}

.ss-show_slide{display: flex; flex-wrap: wrap;}
.ss-show_slide-item{padding: 1%; box-sizing: border-box; position: relative; overflow: hidden;}
.ss-show-slide-item{width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative;}
.ss-show_slide-2 .ss-show_slide-item{flex: 0 0 50%;}
.ss-show_slide-3 .ss-show_slide-item{flex: 0 0 33.33%;}
.ss-show_slide-4 .ss-show_slide-item{flex: 0 0 20%;}

.ss-show_slide-2 .ss-show_slide-item:nth-child(2n){padding-right: 0;}
.ss-show_slide-3 .ss-show_slide-item:nth-child(3n){padding-right: 0;}
.ss-show_slide-4 .ss-show_slide-item:nth-child(4n){padding-right: 0;}

.ss-photos-slide > .ss-gallery-top { width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.ss-photos-slide > .ss-gallery-top > .ss-swiper-wrapper > .ss-gallery-top-image{text-align: center;}
.ss-photos-slide > .ss-gallery-thumbs > .ss-swiper-wrapper > .ss-gallery-thumbs-image{text-align: center;}
.ss-gallery-thumbs {display: block; height: 20%; box-sizing: border-box; padding: 10px 0; margin-bottom: 20px; }
.ss-gallery-thumbs .ss-swiper-slide { width: 25%; height: 80px; opacity: 0.4; }
.ss-gallery-thumbs .ss-swiper-slide-active { opacity: 1; }

/* end show slide */

/*
    for ss-modal
    Анхааруулга: sodon-modal => ss-modal
*/
.ss-modal{
    display: none;
    position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
}
.ss-modal.show{display: block;}
.ss-modal-container{
    position: relative;
    margin: 1.75rem auto; max-width: 700px; border: 1px solid #e9ecef; border-radius: .3rem;
}
.ss-modal-header{
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1rem; border-bottom: 1px solid #e9ecef;
    background: #FFF;
}
.ss-modal-content{
    padding: 1rem; border: 1px solid rgba(0, 0, 0, .2); outline: 0;
    background: #FFF;
}
.ss-modal-title{margin-bottom: 0;}
.ss-modal-close{padding: 1rem; margin: -1rem -1rem -1rem auto;
    font-size: 1.3125rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5;
    cursor: pointer;
}
.ss-modal-body{overflow-y: auto; padding: 1rem; max-height: 600px;}
/* end of ss-modal */

.ss-alert {padding: 10px 15px; border: 1px solid transparent; border-radius: 5px; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue", Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.ss-alert-primary {color: #004085; border-color: #b8daff; background-color: #cce5ff;}
.ss-alert-primary hr {border-top-color: #9fcdff;}
.ss-alert-primary .alert-link {color: #002752;}
.ss-alert-secondary {color: #383d41; border-color: #d6d8db; background-color: #e2e3e5;}
.ss-alert-secondary hr {border-top-color: #c8cbcf;}
.ss-alert-secondary .alert-link {color: #202326;}
.ss-alert-success {border-color: #c3e6cb; color: #155724; background-color: #d4edda;}
.ss-alert-success hr {border-top-color: #b1dfbb;}
.ss-alert-success .alert-link {color: #0b2e13;}
.ss-alert-info {border-color: #bee5eb; color: #0c5460; background-color: #d1ecf1;}
.ss-alert-info hr {border-top-color: #abdde5;}
.ss-alert-info .alert-link {color: #062c33;}
.ss-alert-warning {border-color: #ffeeba; color: #856404; background-color: #fff3cd;}
.ss-alert-warning hr {border-top-color: #ffe8a1;}
.ss-alert-warning .alert-link {color: #533f03;}
.ss-alert-danger {border-color: #f5c6cb; color: #721c24; background-color: #f8d7da;}
.ss-alert-danger hr {border-top-color: #f1b0b7;}
.ss-alert-danger .alert-link {color: #491217;}
.ss-alert-light {border-color: #fdfdfe; color: #818182; background-color: #fefefe;}
.ss-alert-light hr {border-top-color: #ececf6;}
.ss-alert-light .alert-link {color: #686868;}
.ss-alert-dark {border-color: #c6c8ca; color: #1b1e21; background-color: #d6d8d9;}
.ss-alert-dark hr {border-top-color: #b9bbbe;}
.ss-alert-dark .alert-link {color: #040505;}