/*
    CSS - Skype.com
    BUTTONS
*/


/* DEFAULT STYLES
----------------------------------------------------------------------------------------------------*/

.btn {
    color: white;
    font-weight: 400;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    cursor: pointer;
    overflow: visible;
    border: none;
    text-decoration: none;
    line-height: 24px;
    letter-spacing: -0.01em;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border-radius: 45px;
    position: relative;
    border: none;   
    background-color: #FFF;
    cursor: hand;
    outline: none;
    outline-width: 0;
    outline: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* cross browser word break */
    word-wrap:break-word;
    word-break: break-word;
    -ms-word-break: break-word;
    text-align: center;
    text-shadow: none;
}

button {
    font-family: inherit;
}

.btn span {
    display: block;
}

.btn.disabled {
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";/
    filter: alpha(opacity=30);
    cursor: not-allowed;
    zoom: 1;
}

/* Fix ie8 not cascading transparency */
@media \0screen {
    .btn.disabled .arrowNext,
    .btn.disabled .arrowPrev,
    .btn.disabled .arrowUp,
    .btn.disabled .arrowDown,
    .btn.disabled .noArrow,
    .btn.disabled .icon {
        filter: inherit;
    }
}
 
.btn {
    font-size: 20px; /* 1.250em */
    border-width: 2px;
    border-style: solid;
    padding: 8px 0px 11px 0px;
    margin: 2px 0;
}

    .btn:hover,
    .btn:focus {
        border-width: 4px;
        margin: 0 -2px;
    }

    .btn:active {
        border-width: 2px;
        margin: 2px 0;
    }

*:first-child+html button.btn {
    padding-bottom: 2px;
}

.btn.small {
    font-size: 16px;
    line-height: 20px;
    padding: 5px 0px 7px 0px;
}

*:first-child+html button.btn.small {
    padding-bottom: 1px;
}

    /* remove extra padding from FF buttons */
    .btn::-moz-focus-inner,
    .btn.small::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

        /* The above rule removes the focus outline in Firefox.  This rule restores it. */
        .btn:focus,
        .btn.small:focus {
            outline: dotted 1px #000;
        }

        /* The above rule removes the focus outline in Firefox.  This rule restores it. */
        .btn:hover,
        .btn.small:hover,
        .btn:active,
        .btn.small:active {
            outline: none;
        }

.btn .deviceSpec .lineOne {
    font-size: 14px;
    line-height: 17px;
}

.btn .deviceSpec .lineTwo {
    font-size: 18px;
    line-height: 20px;
}


/* BUTTON TYPES AND COLOURS
----------------------------------------------------------------------------------------------------*/

.btn.primaryCta {
    background-color: #7fba00;
    border-color: #7fba00;
}
.btn.primaryCta.disabled {
    background-color: #7fba00 !important;
    border-color: #7fba00 !important;
}

.btn.primaryCta:hover,
.btn.primaryCta:focus {
    color: white;
    background-color: #75ab00;
    border-color: #75ab00;
    text-decoration: none;
}

.btn.primaryCta:active {
    color: white;
    background-color: #6c9e00;
    border-color: #6c9e00;
}

    .btn.primaryNegativeCta {
        background-color: #FFF;
        color: #333534;
        border-color: #c0dce6;
    }

    .btn.primaryNegativeCta.disabled {
        background-color: #FFF !important;
        color: #333534 !important;
        border-color: #c0dce6 !important;
    }

    .btn.primaryNegativeCta:hover,
    .btn.primaryNegativeCta:focus {
        background-color: #a2c5d3;
        color: #FFF;
        border-color: #a2c5d3;
        text-decoration: none;
    }

    .btn.primaryNegativeCta:active {
        background-color: #91b1bd;
        color: #FFF;
        border-color: #91b1bd;
    }

        .btn.secondaryCta {
            background-color: #FFF;
            color: #0078ca;
            border-color: #00aff0;
        }

        .btn.secondaryCta.disabled {
            background-color: #FFF !important;
            color: #0078ca !important;
            border-color: #00aff0 !important;
        }

        .btn.secondaryCta:hover,
        .btn.secondaryCta:focus {
            background-color: #008fc6;
            color: #FFF;
            border-color: #008fc6;
            text-decoration: none;
        }

        .btn.secondaryCta:active {
            background-color: #009dd8;
            color: #FFF;
            border-color: #009dd8;
        }

            .btn.secondaryNegativeCta {
                background-color: #FFF;
                color: #0078ca;
                border-color: #FFF;
            }

            .btn.secondaryNegativeCta.disabled {
                background-color: #FFF !important;
                color: #0078ca !important;
                border-color: #FFF !important;
            }

            .btn.secondaryNegativeCta:hover,
            .btn.secondaryNegativeCta:focus {
                background-color: #FFF;
                color: #333534;
                border-color: #FFF;
                text-decoration: none;
            }

            .btn.secondaryNegativeCta:active {
                background-color: #e4eef2;
                color: #333534;
                border-color: #e4eef2;
            }

                .btn.premiumCta {
                    background-color: #953cac;
                    color: #FFF;
                    border-color: #953cac;
                }

                .btn.premiumCta.disabled {
                    background-color: #953cac !important;
                    color: #FFF !important;
                    border-color: #953cac !important;
                }

                .btn.premiumCta:hover,
                .btn.premiumCta:focus {
                    background-color: #7f3392;
                    color: #FFF;
                    border-color: #7f3392;
                    text-decoration: none;
                }

                .btn.premiumCta:active {
                    background-color: #68217a;
                    color: #FFF;
                    border-color: #68217a;
                }

                    .btn.premiumSecondaryCta {
                        background-color: #FFF;
                        color: #953cac;
                        border-color: #953cac;
                    }

                    .btn.premiumSecondaryCta.disabled {
                        background-color: #FFF !important;
                        color: #953cac !important;
                        border-color: #953cac !important;
                    }

                    .btn.premiumSecondaryCta:hover,
                    .btn.premiumSecondaryCta:focus {
                        background-color: #7f3392;
                        color: #FFF;
                        border-color: #7f3392;
                        text-decoration: none;
                    }

                    .btn.premiumSecondaryCta:active {
                        background-color: #68217a;
                        color: #FFF;
                        border-color: #68217a;
                    }


/* BUTTONS WITH ICONS
----------------------------------------------------------------------------------------------------*/

.btn > span,
.btn .noArrow,
.btn .arrowUp,
.btn .arrowDown,
.btn .arrowNext,
.btn .arrowPrev,
.btn .deviceSpec {
    position: relative;
    width: auto;
    padding-left: 25px;
    padding-right: 25px;
}

.btn .deviceSpec {
    padding-left: 75px;
    padding-right: 25px;
}

html.rtl .btn .deviceSpec {
    padding-left: 25px;
    padding-right: 75px;
}

    .btn .arrowUp,
    .btn .arrowDown,
    .btn .arrowNext {
        padding-right: 52px;
    }

        html.rtl .btn .arrowUp,
        html.rtl .btn .arrowDown,
        html.rtl .btn .arrowNext {
            padding-right: 25px;
            padding-left: 52px;
        }

    .btn .arrowPrev {
        padding-left: 52px;
    }

        html.rtl .btn .arrowPrev {
            padding-left: 25px;
            padding-right: 52px;
        }

        .btn.small > span,
        .btn.small .noArrow,
        .btn.small .arrowUp,
        .btn.small .arrowDown,
        .btn.small .arrowNext,
        .btn.small .arrowPrev {
            position: relative;
            width: auto;
            padding-left: 18px;
            padding-right: 18px;
        }

            .btn.small .arrowUp,
            .btn.small .arrowDown,
            .btn.small .arrowNext {
                padding-left: 18px;
                padding-right: 45px;
            }

                html.rtl .btn.small .arrowUp,
                html.rtl .btn.small .arrowDown,
                html.rtl .btn.small .arrowNext {
                    padding-right: 18px;
                    padding-left: 45px;
                }

            .btn.small .arrowPrev {
                padding-left: 45px;
            }

                html.rtl .btn.small .arrowPrev {
                    padding-left: 18px;
                    padding-right: 45px;
                }


/* BUTTON ARROWS
----------------------------------------------------------------------------------------------------*/

.btn .arrowNext,
.btn .arrowPrev,
.btn .arrowUp,
.btn .arrowDown {
    background-image: none !important;
}

.btn .icon {
    *background: url("../assets/images/cvaa-scom/buttons-sprite.png") no-repeat;
    *background-position: 0px 0px;
    display: block;
    height: 14px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    vertical-align: top;
    width: 17px;
}

.btn .icon:before {
  content: url("../assets/images/cvaa-scom/buttons-sprite.png");
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
}

  .svg .btn .icon {
    *background: url("../assets/images/cvaa-scom/buttons-sprite.svg") no-repeat;
    *background-position: 0px 0px;
  }

  .svg .btn .icon:before {
    content: url("../assets/images/cvaa-scom/buttons-sprite.svg");
    position: relative;
    left: 0;
    top: 0;
    width: 62px !important; /* Width of SVG sprite, needed for IE to ensure SVG is correctly displayed. */
  }



.deviceSpec .icon {
    background-image:  url('../assets/images/buttons/buttons-logos-sprite-24bit.png');
}


    .btn .arrowNext .icon,
    .btn .arrowPrev .icon {
        margin-top: -6px;
        width: 17px;
        height: 14px;
    }

    .btn .arrowUp .icon,
    .btn .arrowDown .icon {
        margin-top: -7px;
        width: 14px;
        height: 17px;
    }

    .btn .deviceSpec .icon {
        margin-top: -18px;
        height: 40px;
        width: 40px;
    }

        .btn .arrowUp .icon,
        .btn .arrowDown .icon,
        .btn .arrowNext .icon {
            right: 0;
            margin-right: 25px;
        }

            html.rtl .btn .arrowUp .icon,
            html.rtl .btn .arrowDown .icon,
            html.rtl .btn .arrowNext .icon {
                right: auto;
                left: 0;
                margin-right: 0px;
                margin-left: 25px;
            }

        .btn .arrowPrev .icon,
        .btn .deviceSpec .icon {
            left: 0;
            margin-left: 25px;
        }

            html.rtl .btn .arrowPrev .icon,
            html.rtl .btn .deviceSpec .icon {
                left: auto;
                right: 0;
                margin-left: 0px;
                margin-right: 25px;
            }

        .btn.small .arrowUp .icon,
        .btn.small .arrowDown .icon,
        .btn.small .arrowNext .icon {
            right: 0;
            margin-right: 18px;
            
        }

            html.rtl .btn.small .arrowUp .icon,
            html.rtl .btn.small .arrowDown .icon,
            html.rtl .btn.small .arrowNext .icon {
                left: 0;
                margin-right: 0px;
                margin-left: 18px;
            }

        .btn.small .arrowPrev .icon {
            left: 0;
            margin-left: 18px;
        }

            html.rtl .btn.small .arrowPrev .icon {
                right: 0;
                margin-left: 0px;
                margin-right: 18px;
            }

            /* BLACK */
            .btn.primaryNegativeCta .arrowNext .icon,
            .btn.primaryNegativeCta.disabled .arrowNext .icon,
            .btn.secondaryNegativeCta:hover .arrowNext .icon,
            .btn.secondaryNegativeCta:focus .arrowNext .icon,
            .btn.secondaryNegativeCta:active .arrowNext .icon {
                *background-position: -28px -17px;
            }

            .btn.primaryNegativeCta .arrowNext .icon:before,
            .btn.primaryNegativeCta.disabled .arrowNext .icon:before,
            .btn.secondaryNegativeCta:hover .arrowNext .icon:before,
            .btn.secondaryNegativeCta:focus .arrowNext .icon:before,
            .btn.secondaryNegativeCta:active .arrowNext .icon:before {
                left: -28px;
                top: -17px;
            }

                html.rtl .btn.primaryNegativeCta .arrowNext .icon,
                html.rtl .btn.primaryNegativeCta.disabled .arrowNext .icon,
                html.rtl .btn.secondaryNegativeCta:hover .arrowNext .icon,
                html.rtl .btn.secondaryNegativeCta:focus .arrowNext .icon,
                html.rtl .btn.secondaryNegativeCta:active .arrowNext .icon {
                    *background-position: -45px -17px;
                }

                html.rtl .btn.primaryNegativeCta .arrowNext .icon:before,
                html.rtl .btn.primaryNegativeCta.disabled .arrowNext .icon:before,
                html.rtl .btn.secondaryNegativeCta:hover .arrowNext .icon:before,
                html.rtl .btn.secondaryNegativeCta:focus .arrowNext .icon:before,
                html.rtl .btn.secondaryNegativeCta:active .arrowNext .icon:before {
                    left: -45px;
                    top: -17px;
                }

            .btn.primaryNegativeCta .arrowPrev .icon,
            .btn.primaryNegativeCta.disabled .arrowPrev .icon,
            .btn.secondaryNegativeCta:hover .arrowPrev .icon,
            .btn.secondaryNegativeCta:focus .arrowPrev .icon,
            .btn.secondaryNegativeCta:active .arrowPrev .icon {
                *background-position: -45px -17px;
            }

            .btn.primaryNegativeCta .arrowPrev .icon:before,
            .btn.primaryNegativeCta.disabled .arrowPrev .icon:before,
            .btn.secondaryNegativeCta:hover .arrowPrev .icon:before,
            .btn.secondaryNegativeCta:focus .arrowPrev .icon:before,
            .btn.secondaryNegativeCta:active .arrowPrev .icon:before {
                left: -45px;
                top: -17px;
            }

                html.rtl .btn.primaryNegativeCta  .arrowPrev .icon,
                html.rtl .btn.primaryNegativeCta.disabled  .arrowPrev .icon,
                html.rtl .btn.secondaryNegativeCta:hover .arrowPrev .icon,
                html.rtl .btn.secondaryNegativeCta:focus .arrowPrev .icon,
                html.rtl .btn.secondaryNegativeCta:active .arrowPrev .icon {
                    *background-position: -28px -17px;
                }

                html.rtl .btn.primaryNegativeCta  .arrowPrev .icon:before,
                html.rtl .btn.primaryNegativeCta.disabled  .arrowPrev .icon:before,
                html.rtl .btn.secondaryNegativeCta:hover .arrowPrev .icon:before,
                html.rtl .btn.secondaryNegativeCta:focus .arrowPrev .icon:before,
                html.rtl .btn.secondaryNegativeCta:active .arrowPrev .icon:before {
                    left: -28px;
                    top: -17px;
                }

            .btn.primaryNegativeCta .arrowUp .icon,
            .btn.primaryNegativeCta.disabled .arrowUp .icon,
            .btn.secondaryNegativeCta:hover .arrowUp .icon,
            .btn.secondaryNegativeCta:focus .arrowUp .icon,
            .btn.secondaryNegativeCta:active .arrowUp .icon {
                *background-position: 0px -17px;
            }

            .btn.primaryNegativeCta .arrowUp .icon:before,
            .btn.primaryNegativeCta.disabled .arrowUp .icon:before,
            .btn.secondaryNegativeCta:hover .arrowUp .icon:before,
            .btn.secondaryNegativeCta:focus .arrowUp .icon:before,
            .btn.secondaryNegativeCta:active .arrowUp .icon:before {
                left: 0px;
                top: -17px;
            }

            .btn.primaryNegativeCta .arrowDown .icon,
            .btn.primaryNegativeCta.disabled .arrowDown .icon,
            .btn.secondaryNegativeCta:hover .arrowDown .icon,
            .btn.secondaryNegativeCta:focus .arrowDown .icon,
            .btn.secondaryNegativeCta:active .arrowDown .icon {
                *background-position: -14px -17px;
            }

            .btn.primaryNegativeCta .arrowDown .icon:before,
            .btn.primaryNegativeCta.disabled .arrowDown .icon:before,
            .btn.secondaryNegativeCta:hover .arrowDown .icon:before,
            .btn.secondaryNegativeCta:focus .arrowDown .icon:before,
            .btn.secondaryNegativeCta:active .arrowDown .icon:before {
                left: -14px;
                top: -17px;
            }

                /* BLUE */
                .btn.secondaryCta .arrowNext .icon,
                .btn.secondaryCta.disabled .arrowNext .icon,
                .btn.secondaryNegativeCta .arrowNext .icon,
                .btn.secondaryNegativeCta.disabled .arrowNext .icon {
                    *background-position: -28px -34px;
                }

                .btn.secondaryCta .arrowNext .icon:before,
                .btn.secondaryCta.disabled .arrowNext .icon:before,
                .btn.secondaryNegativeCta .arrowNext .icon:before,
                .btn.secondaryNegativeCta.disabled .arrowNext .icon:before {
                    left: -28px;
                    top: -34px;
                }

                    html.rtl .btn.secondaryCta .arrowNext .icon,
                    html.rtl .btn.secondaryCta.disabled .arrowNext .icon,
                    html.rtl .btn.secondaryNegativeCta .arrowNext .icon,
                    html.rtl .btn.secondaryNegativeCta.disabled .arrowNext .icon {
                        *background-position: -45px -34px;
                    }

                    html.rtl .btn.secondaryCta .arrowNext .icon:before,
                    html.rtl .btn.secondaryCta.disabled .arrowNext .icon:before,
                    html.rtl .btn.secondaryNegativeCta .arrowNext .icon:before,
                    html.rtl .btn.secondaryNegativeCta.disabled .arrowNext .icon:before {
                        left: -45px;
                        top: -34px;
                    }

                .btn.secondaryCta .arrowPrev .icon,
                .btn.secondaryCta.disabled .arrowPrev .icon,
                .btn.secondaryNegativeCta .arrowPrev .icon,
                .btn.secondaryNegativeCta.disabled .arrowPrev .icon {
                    *background-position: -45px -34px;
                }

                .btn.secondaryCta .arrowPrev .icon:before,
                .btn.secondaryCta.disabled .arrowPrev .icon:before,
                .btn.secondaryNegativeCta .arrowPrev .icon:before,
                .btn.secondaryNegativeCta.disabled .arrowPrev .icon:before {
                    left: -45px;
                    top: -34px;
                }

                    html.rtl .btn.secondaryCta .arrowPrev .icon,
                    html.rtl .btn.secondaryCta.disabled .arrowPrev .icon,
                    html.rtl .btn.secondaryNegativeCta .arrowPrev .icon,
                    html.rtl .btn.secondaryNegativeCta.disabled .arrowPrev .icon {
                        *background-position: -28px -34px;
                    }

                    html.rtl .btn.secondaryCta .arrowPrev .icon:before,
                    html.rtl .btn.secondaryCta.disabled .arrowPrev .icon:before,
                    html.rtl .btn.secondaryNegativeCta .arrowPrev .icon:before,
                    html.rtl .btn.secondaryNegativeCta.disabled .arrowPrev .icon:before {
                        left: -28px;
                        top: -34px;
                    }

                .btn.secondaryCta .arrowUp .icon,
                .btn.secondaryCta.disabled .arrowUp .icon,
                .btn.secondaryNegativeCta .arrowUp .icon,
                .btn.secondaryNegativeCta.disabled .arrowUp .icon  {
                    *background-position: 0px -34px;
                }

                .btn.secondaryCta .arrowUp .icon:before,
                .btn.secondaryCta.disabled .arrowUp .icon:before,
                .btn.secondaryNegativeCta .arrowUp .icon:before,
                .btn.secondaryNegativeCta.disabled .arrowUp .icon:before  {
                    left: 0px;
                    top: -34px;
                }

                .btn.secondaryCta .arrowDown .icon,
                .btn.secondaryCta.disabled .arrowDown .icon,
                .btn.secondaryNegativeCta .arrowDown .icon,
                .btn.secondaryNegativeCta.disabled .arrowDown .icon {
                    *background-position: -14px -34px;
                }

                .btn.secondaryCta .arrowDown .icon:before,
                .btn.secondaryCta.disabled .arrowDown .icon:before,
                .btn.secondaryNegativeCta .arrowDown .icon:before,
                .btn.secondaryNegativeCta.disabled .arrowDown .icon:before {
                    left: -14px;
                    top: -34px;
                }

                    /* PURPLE */
                    .btn.premiumSecondaryCta .arrowNext .icon,
                    .btn.premiumSecondaryCta.disabled .arrowNext .icon {
                        *background-position: -28px -51px;
                    }

                    .btn.premiumSecondaryCta .arrowNext .icon:before,
                    .btn.premiumSecondaryCta.disabled .arrowNext .icon:before {
                        left: -28px;
                        top: -51px;
                    }

                        html.rtl .btn.premiumSecondaryCta .arrowNext .icon,
                        html.rtl .btn.premiumSecondaryCta.disabled .arrowNext .icon {
                            *background-position: -45px -51px;
                        }

                        html.rtl .btn.premiumSecondaryCta .arrowNext .icon:before,
                        html.rtl .btn.premiumSecondaryCta.disabled .arrowNext .icon:before {
                            left: -45px;
                            top: -51px;
                        }

                    .btn.premiumSecondaryCta .arrowPrev .icon, 
                    .btn.premiumSecondaryCta.disabled .arrowPrev .icon {
                        *background-position: -45px -51px;
                    }

                    .btn.premiumSecondaryCta .arrowPrev .icon:before, 
                    .btn.premiumSecondaryCta.disabled .arrowPrev .icon:before {
                        left: -45px;
                        top: -51px;
                    }

                        html.rtl .btn.premiumSecondaryCta .arrowPrev .icon,
                        html.rtl .btn.premiumSecondaryCta.disabled .arrowPrev .icon {
                            *background-position: -28px -51px;
                        }

                        html.rtl .btn.premiumSecondaryCta .arrowPrev .icon:before,
                        html.rtl .btn.premiumSecondaryCta.disabled .arrowPrev .icon:before {
                            left: -28px;
                            top: -51px;
                        }

                    .btn.premiumSecondaryCta .arrowUp .icon,
                    .btn.premiumSecondaryCta.disabled .arrowUp .icon {
                        *background-position: 0px -51px;
                    }

                    .btn.premiumSecondaryCta .arrowUp .icon:before,
                    .btn.premiumSecondaryCta.disabled .arrowUp .icon:before {
                        left: 0px;
                        top: -51px;
                    }

                    .btn.premiumSecondaryCta .arrowDown .icon,
                    .btn.premiumSecondaryCta.disabled .arrowDown .icon {
                        *background-position: -14px -51px;
                    }

                    .btn.premiumSecondaryCta .arrowDown .icon:before,
                    .btn.premiumSecondaryCta.disabled .arrowDown .icon:before {
                        left: -14px;
                        top: -51px;
                    }

                        /* DEFAULT WHITE*/
                        .btn .arrowNext .icon,
                        .btn:hover .arrowNext .icon,
                        .btn:focus .arrowNext .icon,
                        .btn:active .arrowNext .icon {  
                            *background-position: -28px 0;
                        }

                        .btn .arrowNext .icon:before,
                        .btn:hover .arrowNext .icon:before,
                        .btn:focus .arrowNext .icon:before,
                        .btn:active .arrowNext .icon:before {   
                            left: -28px;
                            top: 0;
                        }

                            html.rtl .btn .arrowNext .icon,
                            html.rtl .btn:hover .arrowNext .icon,
                            html.rtl .btn:focus .arrowNext .icon,
                            html.rtl .btn:active .arrowNext .icon { 
                                *background-position: -45px 0;
                            }

                            html.rtl .btn .arrowNext .icon:before,
                            html.rtl .btn:hover .arrowNext .icon:before,
                            html.rtl .btn:focus .arrowNext .icon:before,
                            html.rtl .btn:active .arrowNext .icon:before {  
                                left: -45px;
                                top: 0;
                            }

                        .btn .arrowPrev .icon,
                        .btn:hover .arrowPrev .icon,
                        .btn:focus .arrowPrev .icon,
                        .btn:active .arrowPrev .icon {
                            *background-position: -45px 0;
                        }

                        .btn .arrowPrev .icon:before,
                        .btn:hover .arrowPrev .icon:before,
                        .btn:focus .arrowPrev .icon:before,
                        .btn:active .arrowPrev .icon:before {
                            left: -45px;
                            top: 0;
                        }

                            html.rtl .btn .arrowPrev .icon,
                            html.rtl .btn:hover .arrowPrev .icon,
                            html.rtl .btn:focus .arrowPrev .icon,
                            html.rtl .btn:active .arrowPrev .icon {
                                *background-position: -28px 0;
                            }

                            html.rtl .btn .arrowPrev .icon:before,
                            html.rtl .btn:hover .arrowPrev .icon:before,
                            html.rtl .btn:focus .arrowPrev .icon:before,
                            html.rtl .btn:active .arrowPrev .icon:before {
                                left: -28px;
                                top: 0;
                            }

                        .btn .arrowUp .icon, 
                        .btn:hover .arrowUp .icon,
                        .btn:focus .arrowUp .icon,
                        .btn:active .arrowUp .icon {
                            *background-position: 0px 0;
                        }

                        .btn .arrowUp .icon:before, 
                        .btn:hover .arrowUp .icon:before,
                        .btn:focus .arrowUp .icon:before,
                        .btn:active .arrowUp .icon:before {
                            left: 0;
                            top: 0;
                        }

                        .btn .arrowDown .icon,
                        .btn:hover .arrowDown .icon,
                        .btn:focus .arrowDown .icon,
                        .btn:active .arrowDown .icon {
                            *background-position: -14px 0;
                        }

                        .btn .arrowDown .icon:before,
                        .btn:hover .arrowDown .icon:before,
                        .btn:focus .arrowDown .icon:before,
                        .btn:active .arrowDown .icon:before {
                            left: -14px;
                            top: 0;
                        }

                        /* DEVICE SPECIFIC */
                        .btn .deviceSpec .icon.android {
                            *background-position: -120px 0;
                        }

                        .btn .deviceSpec .icon.ios {
                            *background-position: -80px 0;
                        }

                        .btn .deviceSpec .icon.ps {
                            *background-position: -40px 0;
                        }

                        .btn .deviceSpec .icon.winPhone {
                            *background-position: 0 0;
                        }
                


/* MOBILE OVERRIDES
----------------------------------------------------------------------------------------------------*/

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

    .btn .arrowUp,
    .btn .arrowDown,
    .btn .arrowNext,
    .btn .arrowPrev,
    .btn .deviceSpec  {
        display: inline-block;
    }

    .btn,
    .btn.small {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        font-size: 18px;
        width: 100%;
        margin: 0 auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 6px;
        padding-bottom: 9px;
        max-width: 440px;
    }

    .btn.fixedButton {
        max-width: 280px;
        width: 280px;
    }

        .btn:hover,
        .btn.small:hover,
        .btn:focus,
        .btn.small:focus {
            margin: -2px auto;
        }

        .btn:active,
        .btn.small:active {
            margin: 0 auto;
        }

}


/* DUMMY CONTAINER
----------------------------------------------------------------------------------------------------*/

.my-container {
    width: 200px;
}

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

    .my-container {
        width: 100%;
    }

}