/* CSS Document - REDAC 2019 */

/* =============================================================================
   $Buttons
   ========================================================================== */
    
[class*="bt_"] {
    display: block;
    width: 100%;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 38px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    padding: 0 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    position: relative;
    margin: 20px auto 0;
}
@media screen and (min-width: 640px) {
    [class*="bt_"] { 
        display: inline-block; 
        width: auto;
    }
}

[class*="bt_"]:active {
    transform: translateY(3px);
}

[class*="bt_"].large {
    min-width: 180px;
    line-height: 50px;
    padding: 0 20px;
}

[class*="bt_"] > * {
    position: relative;
    z-index: 1;
}

.bt_default {
    color: #ffffff;
    position: relative;
}
.skin_red1 .bt_default {
    background-color: #e30613;
    background-color: var(--red1);
}
.skin_red2 .bt_default {
    background-color: #e3013a;
    background-color: var(--red2);
}
.skin_red .bt_default,
.skin_white .bt_default {
    background-color: #e2000b;
    background-color: var(--red);
}
.skin_blue1 .bt_default {
    background-color: #0069b4;
    background-color: var(--blue1);
}
.skin_blue2 .bt_default {
    background-color: #0076c0;
    background-color: var(--blue2);
}
.skin_blue .bt_default {
    background-color: #0068b1;
    background-color: var(--blue);
}
.skin_red1 .bt_default:hover {
    background-color: #cc0134;
    background-color: var(--darkRed1);
}
.skin_red2 .bt_default:hover {
    background-color: #cc0511;
    background-color: var(--darkRed2);
}
.skin_red .bt_default:hover,
.skin_white .bt_default:hover {
    background-color: #cb040e;
    background-color: var(--darkRed);
}
.skin_blue1 .bt_default:hover {
    background-color: #005ea0;
    background-color: var(--darkBlue1);
}
.skin_blue2 .bt_default:hover {
    background-color: #006aac;
    background-color: var(--darkBlue2);
}
.skin_blue .bt_default:hover {
    background-color: #065c9a;
    background-color: var(--darkBlue);
}
.bt_neutral {
    background-color: #ffffff;
    color: #777777;
    border: 1px solid #979797;
}

.skin_red1 .bt_neutral:hover {
    background-color: #e30613;
    background-color: var(--red1);
    color: #ffffff;
    border: 1px solid transparent;
}
.skin_red2 .bt_neutral:hover {
    background-color: #e3013a;
    background-color: var(--red2);
    color: #ffffff;
    border: 1px solid transparent;
}
.skin_red .bt_neutral:hover,
.skin_white .bt_neutral:hover {
    background-color: #e2000b;
    background-color: var(--red);
    color: #ffffff;
    border: 1px solid transparent;
}
.skin_blue1 .bt_neutral:hover {
    background-color: 0069b4;
    background-color: var(--blue1);
    color: #ffffff;
    border: 1px solid transparent;
}
.skin_blue2 .bt_neutral:hover {
    background-color: #0076c0;
    background-color: var(--blue2);
    color: #ffffff;
    border: 1px solid transparent;
}
.skin_blue .bt_neutral:hover {
    background-color: #0068b1;
    background-color: var(--blue);
    color: #ffffff;
    border: 1px solid transparent;
}
.bt_special {
    background-color: #ffe600;
    background-color: var(--yellow);
    color: #212121;
    color: var(--darkGrey);
}

.bt_special:hover {
    background-color: #f9dc00;
    background-color: var(--darkYellow);
}
    
[class*="bt_"].disabled {
    background-color: #f4f4f4;
    color: #777777;
    pointer-events: none;
}

.btSplitter {
    display: block;
    position: relative;
    font-family: "UnitOT-Light", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #777;
    margin: 20px auto 0;
}

.btSplitter span {
    position: relative;        
    z-index: 1005;
}

.btSplitter::before {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background-color: #e6e6e6;
    background-color: var(--lightGrey);
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
}

.btSplitter::after {
    content: "";
    background-color: #ffffff;
    top: 11px;
    height: 3px;
    width: 27px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.bt_fbConnect, 
.bt_googleConnect,
.bt_appleConnect {
    padding-left: 45px;
    background-position: 16px center;
    background-repeat: no-repeat;
}

.bt_fbConnect {
    background-color: #4267b2;
    background-image: url(../images/iconFacebook.png);
}

.bt_fbConnect:hover {
    background-color: #577dcc;
}

.bt_googleConnect {
    background-color: #fff;
    background-image: url(../images/iconGoogle.png);
    border: 1px solid #bfbfbf;
    color: #000000;
}

.bt_googleConnect:hover {
    background-color: #d9d9d9;
}
.bt_appleConnect {
    background-color: #000000;
    background-image: url(../images/iconApple.png);
    background-size: 20px;
    color: #fff;
}
.bt_appleConnect:hover {
        background-color: #3c3c3c;
    }