﻿.ag-header {
    height: 285px;
    background-color: #ffffff;
}

.ag-header-bg {
    background: linear-gradient(to right, rgba(7, 84, 38, 0.7) 0%, rgba(7, 84, 38, 0) 63.33%), url('/images/products/smartag/rg/sag_banner.jpg');
    /*transform: matrix(-1, 0, 0, 1, 0, 0);*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 285px;
    width: 100%;
}

.ag-header-inner {
    width: 1176px;
    margin: 0px auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.ag-header-sm {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}

.ag-header-sm2 {
    font-size: 14px;
    line-height: 26px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}

.ag-header-lg {
    font-size: 40px;
    line-height: 50px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}

.ag-content {
    width: 1176px;
    margin: 50px auto 0px;
    background-color: #ffffff;
}

.ag-subhead {
    font-size: 24px;
    line-height: 32px;
    color: #2a2a2a;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}

.ag-hr {
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    transform: matrix(1, 0, 0, -1, 0, 0);
}

a.button-ag-submit,button.ag-submit {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    width: 111px;
    margin: 45px auto 0;
    display: block;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
a.button-ag-submit {
    line-height: 46px;
}

.ag-purch-option {
    background-color: #f7f7f7;
    width: 336px;
    height: 480px;
    float: left;
    padding: 20px;
    position: relative;
}
.ag-purch-option ~ .ag-purch-option {
    margin-left: 20px;
}
    .ag-purch-option > .ag-purch-price {
        min-width: 170px;
        height: 125px;
        padding: 0 17px;
        margin: 1px 0 21px 0;
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .ag-purch-option:nth-of-type(1) > .ag-purch-price {
        background-color: #1EC963;
    }
    .ag-purch-option:nth-of-type(2) > .ag-purch-price {
        background-color: #038537;
    }
    .ag-purch-option:nth-of-type(3) > .ag-purch-price {
        background-color: #075426;
    }
    .ag-purch-option > .ag-purch-subhead {
        font-size: 18px;
        line-height: 24px;
        color: #2a2a2a;
        font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    }
    .ag-purch-option > .ag-purch-desc {
        margin: 13px 0 23px 0;
        font-size: 12px;
        line-height: 20px;
        color: #2a2a2a;
        font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    }
    .ag-purch-option > .ag-small {
        position: absolute;
        bottom: 10px;
        text-align: center;
        width: calc(100% - 40px);
    }
    .ag-purch-option > .ag-hr {
        position: absolute;
        bottom: 35px;
        width: calc(100% - 40px);
    }
    .ag-purch-option > button.ag-submit, .ag-purch-option > a.button-ag-submit {
        position: absolute;
        bottom: 58px;
        width: calc(100% - 40px);
        color: #ffffff;
    }
        .ag-purch-option > button.ag-submit.active, .ag-purch-option > a.button-ag-submit.active, .ag-content > button.ag-submit.active {
            background-color: #0AA64B;
            color: #ffffff;
        }

.ag-purch-price div:first-of-type {
    position: relative;
    top: calc(50% + 3px);
    font-size: 38px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    text-align: center;
    transform: translateY(-50%);
    display: block;
}
    .ag-purch-price div:first-of-type > sup {
        font-size: 50%;
    }
.ag-purch-price div.price {

}
.ag-purch-price div.label {
    /*position: absolute;
    top: 0px;
    left: 0px;*/
    position: unset;
    top: unset;
    transform: unset;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    text-align: center;
    /*
    transform: translateY(-50%);
    width: calc(100% - 17px);
    */
    display: none;
    text-transform: lowercase;
}
    .ag-purch-price div.label.show {
        display: block;
    }
.ag-purch-price div.price {
    line-height: 40px;
}
    .ag-purch-price div.price sup {
        font-size: 50%;
    }
.ag-purch-price div.label-head {
    position: unset;
    top: unset;
    transform: unset;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    color: #FFFFFF;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    text-align: center;
    position: relative;
    top: -6px;
}

a.ag-small {
    font-size: 11px;
    line-height: 15px;
    color: #2a2a2a;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    text-align: center;
    letter-spacing: 0.45833px;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
}

.ag-content .left {
    float: left;
}
.ag-content > .SonyFont {
    width: 840px;
    margin: 0 auto;
}
.ag-content > .SonyFont h2 {
    font-size: 24px;
    line-height: 32px;
    color: #2a2a2a;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}

.ag-content > .SonyFont h3 {
    font-size: 18px;
    line-height: 24px;
    color: #2a2a2a;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
}
.ag-content > .SonyFont input[type=text], .ag-content > .SonyFont input[type=password] {
    width: 280px;
}
.ag-content > .SonyFont .displayTable {
    display: table;
    width: 100%;
}
.ag-content > .SonyFont .displayRow {
    display: table-row;
}
.ag-content > .SonyFont .displayCell {
    display: table-cell;
}
.ag-content > .SonyFont .paddingr10 {
    padding-right: 10px;
}
.ag-content > .SonyFont .paddingb10 {
    padding-bottom: 10px;
}
.ag-content > .SonyFont .lh20 {
    line-height: 20px;
}
.ag-content > .SonyFont .vr550 {
    height: 550px;
    width: 1px;
    background-color: #e6e6e6;
    transform: matrix(1, 0, 0, -1, 0, 0);
    margin: 0 30px;
}
.ag-legal {
    margin-top: 30px;
    font-size: 12px;
    line-height: 20px;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    color: #242424;
}

.dropdown {
    width: 100%;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
}
    .dropdown:after {
        content: url(/images/icons/caret-down.svg);
        position: absolute;
        right: 16px;
        top: 22px;
        height: 5px;
        width: 10px;
    }
    .dropdown.open {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    }
        .dropdown.open:after {
            content: url(/images/icons/caret-up.svg);
        }
    .dropdown > .placeholder {
        display: none;
        padding: 13px 0 0 16px;
        font-size: 14px;
        line-height: 20px;
        color: #2a2a2a;
        height: 32px;
        font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    }
    .dropdown > .placeholder.selected {
        display: block;
    }
    .dropdown.open > .placeholder {
        display: block;
    }
    .dropdown > .option {
        display: none;
        padding: 13px 0 0 16px;
        font-size: 14px;
        line-height: 20px;
        color: #2a2a2a;
        height: 32px;
        font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    }
    .dropdown > .option.selected {
        display: block;
    }
    .dropdown.open > .option {
        display: block;
    }
    .dropdown.open > .option.selected {
        color: #2a2a2a;
    }
    .dropdown.open > .option:hover {
        background-color: #0AA64B;
        color: #FFFFFF;
    }

.checkbox {
    display: block;
    width: 14px;
    height: 14px;
}

    .checkbox input[type="checkbox"] {
        width: auto;
        opacity: 0.00000001;
        position: absolute;
        left: 0;
        margin-left: -20px;
    }

    .checkbox label {
        position: relative;
        cursor: pointer;
    }

        .checkbox label::before {
            content: '';
            position: absolute;
            left: 0;
            top: -1px;
            margin: 0;
            padding: 0;
            width: 12px;
            height: 12px;
            transition: transform 0.28s ease;
            border: 2px solid #e0e0e0;
        }

    .checkbox input[type="checkbox"]:checked ~ label::before {
        background-color: #006dc2;
        border: 2px solid #006dc2;
    }

    .checkbox input[type="checkbox"]:disabled ~ label::before {
        background-color: #f6f6f6;
    }

    .checkbox input[type="checkbox"]:checked ~ label::after {
        content: '\2713';
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: -2px;
        left: 3px;
    }

    .checkbox input[type="checkbox"]:focus + label::before {
        outline: 0;
    }

td.col1 {
    width: 30px;
    text-align: left;
    padding: 17px 0;
    margin: 0;
}

td.col2 {
    width: 287px;
    text-align: left;
    padding: 17px 0;
    margin: 0;
    font-family: 'SST W20 Light', Arial, Helvetica, sans-serif;
    color: #2a2a2a;
    line-height: 26px;
    font-size: 14px;
}

td.col3 {
    padding: 0;
    margin: 0;
}

.h30 {
    height: 30px;
}
.h60 {
    height: 60px;
}
.h140 {
    height: 140px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ag-header-bg {
        background-image: url('/images/products/smartag/rg/sag_banner@2x.jpg');
    }
}
