img, iframe
{
    border: 0;
    max-width: 100%;
}

.hidden
{
    display: none !important;
}

.block
{
    display: block !important;
}

.inline
{
    display: inline-block !important;
}

.b
{
    font-weight: bold !important;   
}

.i
{
    font-style: italic !important;
}

.r
{
    text-align: right !important;
}

.l
{
    text-align: left !important;
}

.c
{
    text-align: center !important;    
}

.j
{
    text-align: justify !important;    
}

.fL
{
    float: left !important; 
}

.fR
{
    float: right !important;
}

.vT
{
    vertical-align: top !important;
}

.vM
{
    vertical-align: middle !important;
}

.vB
{
    vertical-align: bottom !important;
}

.clear
{
    clear: both !important;
}

.one-line,
.noWrap
{
    white-space: nowrap;
}

.one-line
{
    overflow: hidden;
    text-overflow: ellipsis;
}

.error, .info
{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid green;
    line-height: 1.5rem;
}

.error
{
    border: 1px solid red;
}

.pointer
{
    cursor: pointer !important;
}

.help,
.helper
{
    cursor: help !important;
}

.auto
{
    width: auto !important;
}

#checkedTest
{
    visibility: hidden;
    position: fixed;
    width: 10px;
    bottom: -100px;
}

#checkedTest:checked
{
    width: 100px;
}

.iframe-wrapper
{
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;   
}

.iframe-wrapper > iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.grid-wrapper 
{
    box-sizing: border-box;
    width: 100%;
}

.grid-wrapper:after 
{
    content: '';
    display: table;
    clear: both;
}

.grid-wrapper > *
{
    box-sizing: border-box;
    float: left;
    min-height: 1px;
}

.grid-wrapper > .grid-1-1,
.grid-wrapper > .grid-2-2,
.grid-wrapper > .grid-3-3,
.grid-wrapper > .grid-4-4,
.grid-wrapper > .grid-5-5,
.grid-wrapper > .grid-6-6
{
    width: 100%;
}
            
.grid-wrapper > .grid-1-2,
.grid-wrapper > .grid-2-4,
.grid-wrapper > .grid-3-6
{
    width: 50%;
}
            
.grid-wrapper > .grid-1-3,
.grid-wrapper > .grid-2-6
{
    width: 33.3333333%;
}
            
.grid-wrapper > .grid-2-3,
.grid-wrapper > .grid-4-6
{
    width: 66.6666667%;
}
            
.grid-wrapper > .grid-1-4
{
    width: 25%;
}
            
.grid-wrapper > .grid-3-4
{
    width: 75%;
}
            
.grid-wrapper > .grid-1-5
{
    width: 20%;
}
            
.grid-wrapper > .grid-2-5
{
    width: 40%;
}
            
.grid-wrapper > .grid-3-5
{
    width: 60%;
}
            
.grid-wrapper > .grid-4-5
{
    width: 80%;
}
            
.grid-wrapper > .grid-1-6
{
    width: 16.6666667%;
}
            
.grid-wrapper > .grid-5-6
{
    width: 83.3333333%;
}
            
@media (max-width:900px) {
    .grid-wrapper > .grid-at-900-1-1,
    .grid-wrapper > .grid-at-900-2-2,
    .grid-wrapper > .grid-at-900-3-3,
    .grid-wrapper > .grid-at-900-4-4,
    .grid-wrapper > .grid-at-900-5-5,
    .grid-wrapper > .grid-at-900-6-6
    {
        width: 100%;
    }
    
    .grid-wrapper > .grid-at-900-1-2,
    .grid-wrapper > .grid-at-900-2-4,
    .grid-wrapper > .grid-at-900-3-6
    {
        width: 50%;
    }
    
    .grid-wrapper > .grid-at-900-1-3,
    .grid-wrapper > .grid-at-900-2-6
    {
        width: 33.3333333%;
    }
    
    .grid-wrapper > .grid-at-900-2-3,
    .grid-wrapper > .grid-at-900-4-6
    {
        width: 66.6666667%;
    }
    
    .grid-wrapper > .grid-at-900-1-4
    {
        width: 25%;
    }
    
    .grid-wrapper > .grid-at-900-3-4
    {
        width: 75%;
    }
    
    .grid-wrapper > .grid-at-900-1-5
    {
        width: 20%;
    }
    
    .grid-wrapper > .grid-at-900-2-5
    {
        width: 40%;
    }
    
    .grid-wrapper > .grid-at-900-3-5
    {
        width: 60%;
    }
    
    .grid-wrapper > .grid-at-900-4-5
    {
        width: 80%;
    }
    
    .grid-wrapper > .grid-at-900-1-6
    {
        width: 16.6666667%;
    }
    
    .grid-wrapper > .grid-at-900-5-6
    {
        width: 83.3333333%;
    }
    
    .grid-wrapper > .grid-at-900-0
    {
        display: none;
    }
}
@media (max-width:600px) {
    .grid-wrapper > .grid-at-600-1-1,
    .grid-wrapper > .grid-at-600-2-2,
    .grid-wrapper > .grid-at-600-3-3,
    .grid-wrapper > .grid-at-600-4-4,
    .grid-wrapper > .grid-at-600-5-5,
    .grid-wrapper > .grid-at-600-6-6
    {
        width: 100%;
    }
    
    .grid-wrapper > .grid-at-600-1-2,
    .grid-wrapper > .grid-at-600-2-4,
    .grid-wrapper > .grid-at-600-3-6
    {
        width: 50%;
    }
    
    .grid-wrapper > .grid-at-600-1-3,
    .grid-wrapper > .grid-at-600-2-6
    {
        width: 33.3333333%;
    }
    
    .grid-wrapper > .grid-at-600-2-3,
    .grid-wrapper > .grid-at-600-4-6
    {
        width: 66.6666667%;
    }
    
    .grid-wrapper > .grid-at-600-1-4
    {
        width: 25%;
    }
    
    .grid-wrapper > .grid-at-600-3-4
    {
        width: 75%;
    }
    
    .grid-wrapper > .grid-at-600-1-5
    {
        width: 20%;
    }
    
    .grid-wrapper > .grid-at-600-2-5
    {
        width: 40%;
    }
    
    .grid-wrapper > .grid-at-600-3-5
    {
        width: 60%;
    }
    
    .grid-wrapper > .grid-at-600-4-5
    {
        width: 80%;
    }
    
    .grid-wrapper > .grid-at-600-1-6
    {
        width: 16.6666667%;
    }
    
    .grid-wrapper > .grid-at-600-5-6
    {
        width: 83.3333333%;
    }
    
    .grid-wrapper > .grid-at-600-0
    {
        display: none;
    }
}

.mL0,
.mH0,
.mA0
{
   margin-left: 0px !important;
}

.mR0,
.mH0,
.mA0
{
   margin-right: 0px !important;
}

.mT0,
.mV0,
.mA0
{
   margin-top: 0px !important;
}

.mB0,
.mV0,
.mA0
{
   margin-bottom: 0px !important;
}

.pL0,
.pH0,
.pA0
{
   padding-left: 0px !important;
}

.pR0,
.pH0,
.pA0
{
   padding-right: 0px !important;
}

.pT0,
.pV0,
.pA0
{
   padding-top: 0px !important;
}

.pB0,
.pV0,
.pA0
{
   padding-bottom: 0px !important;
}


.mL1,
.mH1,
.mA1
{
   margin-left: 5px !important;
}

.mR1,
.mH1,
.mA1
{
   margin-right: 5px !important;
}

.mT1,
.mV1,
.mA1
{
   margin-top: 5px !important;
}

.mB1,
.mV1,
.mA1
{
   margin-bottom: 5px !important;
}

.pL1,
.pH1,
.pA1
{
   padding-left: 5px !important;
}

.pR1,
.pH1,
.pA1
{
   padding-right: 5px !important;
}

.pT1,
.pV1,
.pA1
{
   padding-top: 5px !important;
}

.pB1,
.pV1,
.pA1
{
   padding-bottom: 5px !important;
}


.mL2,
.mH2,
.mA2
{
   margin-left: 15px !important;
}

.mR2,
.mH2,
.mA2
{
   margin-right: 15px !important;
}

.mT2,
.mV2,
.mA2
{
   margin-top: 15px !important;
}

.mB2,
.mV2,
.mA2
{
   margin-bottom: 15px !important;
}

.pL2,
.pH2,
.pA2
{
   padding-left: 15px !important;
}

.pR2,
.pH2,
.pA2
{
   padding-right: 15px !important;
}

.pT2,
.pV2,
.pA2
{
   padding-top: 15px !important;
}

.pB2,
.pV2,
.pA2
{
   padding-bottom: 15px !important;
}


.mL3,
.mH3,
.mA3
{
   margin-left: 25px !important;
}

.mR3,
.mH3,
.mA3
{
   margin-right: 25px !important;
}

.mT3,
.mV3,
.mA3
{
   margin-top: 25px !important;
}

.mB3,
.mV3,
.mA3
{
   margin-bottom: 25px !important;
}

.pL3,
.pH3,
.pA3
{
   padding-left: 25px !important;
}

.pR3,
.pH3,
.pA3
{
   padding-right: 25px !important;
}

.pT3,
.pV3,
.pA3
{
   padding-top: 25px !important;
}

.pB3,
.pV3,
.pA3
{
   padding-bottom: 25px !important;
}


.mL4,
.mH4,
.mA4
{
   margin-left: 35px !important;
}

.mR4,
.mH4,
.mA4
{
   margin-right: 35px !important;
}

.mT4,
.mV4,
.mA4
{
   margin-top: 35px !important;
}

.mB4,
.mV4,
.mA4
{
   margin-bottom: 35px !important;
}

.pL4,
.pH4,
.pA4
{
   padding-left: 35px !important;
}

.pR4,
.pH4,
.pA4
{
   padding-right: 35px !important;
}

.pT4,
.pV4,
.pA4
{
   padding-top: 35px !important;
}

.pB4,
.pV4,
.pA4
{
   padding-bottom: 35px !important;
}


.mL5,
.mH5,
.mA5
{
   margin-left: 45px !important;
}

.mR5,
.mH5,
.mA5
{
   margin-right: 45px !important;
}

.mT5,
.mV5,
.mA5
{
   margin-top: 45px !important;
}

.mB5,
.mV5,
.mA5
{
   margin-bottom: 45px !important;
}

.pL5,
.pH5,
.pA5
{
   padding-left: 45px !important;
}

.pR5,
.pH5,
.pA5
{
   padding-right: 45px !important;
}

.pT5,
.pV5,
.pA5
{
   padding-top: 45px !important;
}

.pB5,
.pV5,
.pA5
{
   padding-bottom: 45px !important;
}


.mL6,
.mH6,
.mA6
{
   margin-left: 55px !important;
}

.mR6,
.mH6,
.mA6
{
   margin-right: 55px !important;
}

.mT6,
.mV6,
.mA6
{
   margin-top: 55px !important;
}

.mB6,
.mV6,
.mA6
{
   margin-bottom: 55px !important;
}

.pL6,
.pH6,
.pA6
{
   padding-left: 55px !important;
}

.pR6,
.pH6,
.pA6
{
   padding-right: 55px !important;
}

.pT6,
.pV6,
.pA6
{
   padding-top: 55px !important;
}

.pB6,
.pV6,
.pA6
{
   padding-bottom: 55px !important;
}

.swap *
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.swap
{
    position: relative;
}

.swap input[type=radio],
.swap input[type=checkbox]
{
    position: absolute;
    z-index: -1;
    visibility: hidden;
}

.swap .btn
{
    cursor: pointer;
}

.swap .btn,
.swap label
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.swap-slider > .mask
{
    height: auto;
    overflow: hidden;
    width: 70%;
    display: inline-block
}

.swap-slider > .nav
{
    display: inline-block;
    width: 30%;
    padding-right: 10px;
}

@media only screen and (max-width:700px){

    .swap-slider > .nav,
    .swap-slider > .mask
    {
        width: auto;
        display: block;
        padding-right: 0px;
    }
}

.swap-slider.swap-img-slider > .mask
{
    display: block;
    width: auto;
}

.swap-slider.swap-img-slider > .nav
{
    width: auto;
}

.swap-slider.swap-part-slider > .mask
{
    width: 100%;
}

.swap-slider.swap-part-slider > .nav
{
    position: absolute;
    width: 100%;
}

.swap-slider.swap-part-slider > .nav .btn
{
    position: absolute;
    z-index: 1;
}

.swap-slider.swap-part-slider > .nav .button-left
{
    left: 5px;
}

.swap-slider.swap-part-slider > .nav .button-right
{
    right: 5px;
}


.swap-slider.swap-horizontal > .mask > .list,
.swap-slider.swap-vertical > .mask > .list
{
    list-style: none;
    height: auto;
    position: relative;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.swap-slider.swap-vertical > .mask > .list
{
    -webkit-transition: top .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: top .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: top .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: top .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.swap-slider.swap-horizontal > .mask > .list > .item
{
    display: inline-block;
}

.swap-slider.swap-vertical > .mask
{
    height: 250px;
}

.swap-slider.swap-vertical  > .mask > .list > .item
{
    display: block;
    overflow: auto;
}

.swap-slider > .mask > .list > .item > .img
{
    margin: auto;
    position: relative;
    display: block;
}

.swap-slider > .mask > .list > .item > .img > .img-bg
{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    min-height: 105%;
    min-width: 105%;
    z-index: 0;
    -webkit-filter: blur(20px) opacity(80%);
    -moz-filter: blur(20px) opacity(80%);
    -o-filter: blur(20px) opacity(80%);
    -ms-filter: blur(20px) opacity(80%);
    filter: blur(20px) opacity(80%);
}

.swap-slider.swap-img-slider > .nav
{
    bottom: 10px;
    z-index: 100;
    text-align: left;
    left: 10px;
    display: block;
    position: absolute;
    z-index: 100;
    text-align: left;
    width: auto;
    float: none;
}

.swap-slider > .nav.r
{
    right: 10px;
}

.swap-slider > .nav > .btn
{
    background-color: #DDD;
    cursor: pointer;
    display: block;
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
    padding: 5px;
}

.swap-slider.swap-img-slider > .nav > .btn + .btn
{
    margin-left: 4px;
}

.swap-slider.swap-img-slider > .nav > .btn
{
    padding: 0px;
    width: 18px;
    height: 18px;
    display: inline-block;
}

.swap-slider > .nav > .btn:hover
{
    background-color: #888;
}

.swap-slider > .radio-1:checked~.nav > .btn.button-1,
.swap-slider > .radio-2:checked~.nav > .btn.button-2,
.swap-slider > .radio-3:checked~.nav > .btn.button-3,
.swap-slider > .radio-4:checked~.nav > .btn.button-4,
.swap-slider > .radio-5:checked~.nav > .btn.button-5,
.swap-slider > .radio-6:checked~.nav > .btn.button-6,
.swap-slider > .radio-7:checked~.nav > .btn.button-7,
.swap-slider > .radio-8:checked~.nav > .btn.button-8
{
    background: #333;
}

.swap-slider > .nav > .btn.thumb
{
    width: auto;
    height: auto;
    padding: 0;
}

.swap-slider > .nav > .btn.thumb:hover
{
    box-shadow: 0 0 2px #000;
}
.swap-slider > .radio-1:checked~.nav > .btn.thumb.button-1,
.swap-slider > .radio-2:checked~.nav > .btn.thumb.button-2,
.swap-slider > .radio-3:checked~.nav > .btn.thumb.button-3,
.swap-slider > .radio-4:checked~.nav > .btn.thumb.button-4,
.swap-slider > .radio-5:checked~.nav > .btn.thumb.button-5,
.swap-slider > .radio-6:checked~.nav > .btn.thumb.button-6,
.swap-slider > .radio-7:checked~.nav > .btn.thumb.button-7,
.swap-slider > .radio-8:checked~.nav > .btn.thumb.button-8
{
    box-shadow: 0 0 2px #000;
}

.swap-slider.swap-horizontal.item-1 > .mask > .list { width: 100%; }
.swap-slider.swap-horizontal.item-1 > .mask > .list > .item { width: 100%; }
.swap-slider.swap-vertical.item-1 > .mask > .list { height: 100%; }
.swap-slider.swap-vertical.item-1 > .mask > .list > .item { height: 100%; }
.swap-slider.swap-horizontal > .radio-1:checked~.mask > .list { left: 0%; }
.swap-slider.swap-vertical > .radio-1:checked~.mask > .list { top: 0%; }

.swap-slider.swap-horizontal.item-2 > .mask > .list { width: 200%; }
.swap-slider.swap-horizontal.item-2 > .mask > .list > .item { width: 50%; }
.swap-slider.swap-vertical.item-2 > .mask > .list { height: 200%; }
.swap-slider.swap-vertical.item-2 > .mask > .list > .item { height: 50%; }
.swap-slider.swap-horizontal > .radio-2:checked~.mask > .list { left: -100%; }
.swap-slider.swap-vertical > .radio-2:checked~.mask > .list { top: -100%; }

.swap-slider.swap-horizontal.item-3 > .mask > .list { width: 300%; }
.swap-slider.swap-horizontal.item-3 > .mask > .list > .item { width: 33.333334%; }
.swap-slider.swap-vertical.item-3 > .mask > .list { height: 300%; }
.swap-slider.swap-vertical.item-3 > .mask > .list > .item { height: 33.333334%; }
.swap-slider.swap-horizontal > .radio-3:checked~.mask > .list { left: -200%; }
.swap-slider.swap-vertical > .radio-3:checked~.mask > .list { top: -200%; }

.swap-slider.swap-horizontal.item-4 > .mask > .list { width: 400%; }
.swap-slider.swap-horizontal.item-4 > .mask > .list > .item { width: 25%; }
.swap-slider.swap-vertical.item-4 > .mask > .list { height: 400%; }
.swap-slider.swap-vertical.item-4 > .mask > .list > .item { height: 25%; }
.swap-slider.swap-horizontal > .radio-4:checked~.mask > .list { left: -300%; }
.swap-slider.swap-vertical > .radio-4:checked~.mask > .list { top: -300%; }

.swap-slider.swap-horizontal.item-5 > .mask > .list { width: 500%; }
.swap-slider.swap-horizontal.item-5 > .mask > .list > .item { width: 20%; }
.swap-slider.swap-vertical.item-5 > .mask > .list { height: 500%; }
.swap-slider.swap-vertical.item-5 > .mask > .list > .item { height: 20%; }
.swap-slider.swap-horizontal > .radio-5:checked~.mask > .list { left: -400%; }
.swap-slider.swap-vertical > .radio-5:checked~.mask > .list { top: -400%; }

.swap-slider.swap-horizontal.item-6 > .mask > .list { width: 600%; }
.swap-slider.swap-horizontal.item-6 > .mask > .list > .item { width: 16.666667%; }
.swap-slider.swap-vertical.item-6 > .mask > .list { height: 600%; }
.swap-slider.swap-vertical.item-6 > .mask > .list > .item { height: 16.666667%; }
.swap-slider.swap-horizontal > .radio-6:checked~.mask > .list { left: -500%; }
.swap-slider.swap-vertical > .radio-6:checked~.mask > .list { top: -500%; }

.swap-slider.swap-horizontal.item-7 > .mask > .list { width: 700%; }
.swap-slider.swap-horizontal.item-7 > .mask > .list > .item { width: 14.285715%; }
.swap-slider.swap-vertical.item-7 > .mask > .list { height: 700%; }
.swap-slider.swap-vertical.item-7 > .mask > .list > .item { height: 14.285715%; }
.swap-slider.swap-horizontal > .radio-7:checked~.mask > .list { left: -600%; }
.swap-slider.swap-vertical > .radio-7:checked~.mask > .list { top: -600%; }

.swap-slider.swap-horizontal.item-8 > .mask > .list { width: 800%; }
.swap-slider.swap-horizontal.item-8 > .mask > .list > .item { width: 12.5%; }
.swap-slider.swap-vertical.item-8 > .mask > .list { height: 800%; }
.swap-slider.swap-vertical.item-8 > .mask > .list > .item { height: 12.5%; }
.swap-slider.swap-horizontal > .radio-8:checked~.mask > .list { left: -700%; }
.swap-slider.swap-vertical > .radio-8:checked~.mask > .list { top: -700%; }

            .swap-slider.swap-horizontal.swap-part-slider > .mask > .list { width: auto;white-space: nowrap;}
            .swap-slider.swap-horizontal.swap-part-slider > .mask > .list > .item { width: auto; }
.swap-tab
{
    position: relative;
    border: none;
}

.swap-tab > .nav > .btn
{
    border-radius: 5px 5px 0 0;
    border-left: solid 1px #DCDCDC;
    border-top: solid 1px #DCDCDC;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 0;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    z-index: 1;
    font-size: 13px;
    color: #444;
    font-weight: bold;
    background: #ccc;
}

.swap-tab > .nav > .btn + .btn
{
    border-right: solid 1px #DCDCDC;
}

.swap-tab > .nav > .btn:hover
{
    background-position: 0 -30px;
    transition: background-position 0.1s;
}
.swap-tab.item-1 > .nav > .btn
{
    width: 100%;
}


.swap-tab.item-2 > .nav > .btn
{
    width: 50%;
}


.swap-tab.item-3 > .nav > .btn
{
    width: 33.333333333333%;
}


.swap-tab.item-4 > .nav > .btn
{
    width: 25%;
}


.swap-tab.item-5 > .nav > .btn
{
    width: 20%;
}

.swap-tab > .radio-1:checked~.nav > .button-1,
.swap-tab > .radio-2:checked~.nav > .button-2,
.swap-tab > .radio-3:checked~.nav > .button-3,
.swap-tab > .radio-4:checked~.nav > .button-4,
.swap-tab > .radio-5:checked~.nav > .button-5
{
    background: #fff;
}

.swap-tab > .mask
{
    border-radius: 0;
    overflow: hidden;
    display: block;
    padding: 0;
    border: 1px solid #DCDCDC;
    border-top: none;
    vertical-align: top;
    box-shadow: none;
}

.swap-tab > .mask > .list
{
    list-style: none;
    width: 400%;
    height: 100%;
    position: relative;
    margin-left: 0;
}

.swap-tab > .mask > .list > .item
{
    float: left;
    position: relative;
    width: 25%;
    height: 100%;
    display: none;
}

.swap-tab > .radio-1:checked~.mask > .list > .item-1,
.swap-tab > .radio-2:checked~.mask > .list > .item-2,
.swap-tab > .radio-3:checked~.mask > .list > .item-3,
.swap-tab > .radio-4:checked~.mask > .list > .item-4,
.swap-tab > .radio-5:checked~.mask > .list > .item-5
{ 
    display: block;
}

.swap-toggle
{
    overflow: hidden;
}

.swap-toggle > .content 
{
    height: 0px;
    opacity: 0.0;
    transition: opacity 0.5s;
    overflow: hidden;
}

.swap-toggle > .nav > .btn 
{
    position: relative;
    cursor: pointer;
    padding: 10px;
    background: #ddd;
    width: 100%;
    color: #000;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden;
    display: block;
}

.swap-toggle > .nav > .btn *
{
    display: inline-block;
    line-height: 1em;
    margin: 0;
    vertical-align: middle;
}

.swap-toggle > .nav > .btn::after
{  
    position: absolute;
    right: 0;
    margin: 0 10px;
}

.swap-toggle > .nav > .btn::after 
{
    content: '+';
}

.swap-toggle > .checkbox:checked + .nav > .btn::after 
{
    content: '-';
}

.no-checked .swap-toggle > .content,
.swap-toggle > .checkbox:checked ~ .content 
{
    height: auto;
    opacity: 1.0;
}

.swap-toggle > .checkbox:checked + .nav > .btn 
{
    background: #eee;
}