/* Mobile Layout: 480px and below. */

[class*='btn-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 12px;
    padding: 6px 12px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btn-']:hover {
        cursor: pointer;
    }
    
    .btn-clearwhite {
        background-color: ;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
        
        }
    
        .btn-clearwhite:hover {
            background-color: #fff;    
            outline: none;
            color:#000;
        }
        
        .btn-clearwhite:active {
            background-color: #fff;    
            color:#000;
        }
        
        
[class*='btnArrow-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 12px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 3px;
    width:100%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btnArrow-']:hover {
        cursor: pointer;
    }
    
    .btnArrow-left {
        background-color: ;
        background-position: 100% 50%;
        background-image: url(/images/left-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-left:hover {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-left:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
    
    .btnArrow-right {
        background-color: ;
        background-position: 0% 50%;
        background-image: url(/images/right-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-right:hover {
            background-color: #fff;
            background-position: 100% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-right:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	[class*='btn-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 16px;
    padding: 12px 30px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btn-']:hover {
        cursor: pointer;
    }
    
    .btn-clearwhite {
        background-color: ;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
        
        }
    
        .btn-clearwhite:hover {
            background-color: #fff;    
            outline: none;
            color:#000;
        }
        
        .btn-clearwhite:active {
            background-color: #fff;    
            color:#000;
        }
        
        
[class*='btnArrow-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    width:52px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btnArrow-']:hover {
        cursor: pointer;
    }
    
    .btnArrow-left {
        background-color: ;
        background-position: 100% 50%;
        background-image: url(/images/left-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-left:hover {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-left:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
    
    .btnArrow-right {
        background-color: ;
        background-position: 0% 50%;
        background-image: url(/images/right-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-right:hover {
            background-color: #fff;
            background-position: 100% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-right:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	[class*='btn-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 16px;
    padding: 12px 30px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btn-']:hover {
        cursor: pointer;
    }
    
    .btn-clearwhite {
        background-color: ;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
        
        }
    
        .btn-clearwhite:hover {
            background-color: #fff;    
            outline: none;
            color:#000;
        }
        
        .btn-clearwhite:active {
            background-color: #fff;    
            color:#000;
        }
        
        
[class*='btnArrow-'] {
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); */
    color: #fff;
    display: inline-block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 6px;
    width:52px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);    
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
      transition: background-color 0.3s linear;    
}

    [class*='btnArrow-']:hover {
        cursor: pointer;
    }
    
    .btnArrow-left {
        background-color: ;
        background-position: 100% 50%;
        background-image: url(/images/left-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-left:hover {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-left:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/left-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
    
    .btnArrow-right {
        background-color: ;
        background-position: 0% 50%;
        background-image: url(/images/right-arrow.png);
        background-repeat: no-repeat;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        /*background-image:url(/images/left-arrow.png) -51px 0;*/    
            height:46px;
        /* border: 1px solid rgb( 44, 91, 104 ); */    
                }
    
        .btnArrow-right:hover {
            background-color: #fff;
            background-position: 100% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }
        
        .btnArrow-right:active {
            background-color: #fff;
            background-position: 0% 50%;
            background-image:url(/images/right-arrow.png);
            background-repeat: no-repeat;
            outline: none;
            color:#000;
        }	
}