#skip-button {
    background-color:transparent;
    color: white;
    border: 1px solid white;
}

#skip-button:hover {
    background-color: white !important;
    color: #373f48 !important;
}

.tips-selected .description {
    color: #d6d6d6;
}

h4.title {
    margin-bottom: 3px;
}

.welcome-step-icon {
    width:60px;
    height:60px;
    min-width:60px;
}

.skip {
    margin-right: 7px;
}

.tips-popup {
    border-radius: 5px;
    border: 1px solid #ccc;
    position:absolute;
    background-color: white;
    top:30%;
    left:50%;
    width:700px;  /* adjust as per your needs */
    margin-left:-350px;   /* negative half of width above */
}

.tips-text-field {
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #2e3b4e !important;
    margin: 4px !important;
    padding: 9px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    border-radius: 3px !important;
    border: 1px solid #ccc !important;
}

.tips-paragraph {
    font-size: 14px;
    color: #5f6a7d;
    font-family: Helvetica, Arial, sans-serif;
}

.overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.popup-top-card {
    height: 70px;
    border: 0px;
    color: #3d454c;
    background: #fafafa;
    padding-top: 18px;
    padding-bottom: 18px;
    color: #3d454c;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    border-bottom: solid 1px #ced4d9;
    margin: -10px -10px 5px -10px;
    border-radius: 0px;
    padding: .4em 1em;
    position: relative;
    font-family: "SqMarket","helvetica neue",helvetica,arial,sans-serif;
}

.popup-title {
    color: #3d454c;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    font-family: "SqMarket","helvetica neue",helvetica,arial,sans-serif;
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-button {
    outline: none;
    display: inline-block !important;
    background: #2996cc !important;
    border-color: transparent !important;
    color: #fff !important;
    height: 32px !important;
    padding: 0 14px 0 !important;
    margin-bottom: 1px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    text-align: center !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-transform: none !important;
    font-family: "SqMarket","helvetica neue", helvetica, arial, sans-serif !important;
}

.popup-button:hover{
    text-decoration: none;
}

.popup-button-skip {
    color: #9da2a6 !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    text-align: center !important;
    height: 32px !important;
    padding: 0 14px 0 !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    text-align: center !important;
    border: 1px solid #e0e2e3 !important;
    font-size: 14px !important;
    background: #fafafa !important;
    -webkit-border-radius: 4px !important;
    border-radius: 4px !important;
    font-family: "SqMarket","helvetica neue",helvetica,arial,sans-serif !important;
    vertical-align: middle !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    box-sizing: border-box;
    user-select: none;
    white-space: pre;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
}

.popup-button-skip:hover {
    text-decoration: none;
    color: #9da2a6;
}

.close-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    float: right;
    margin: 10px 10px 10px 0px;
}

.popup-list {
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
}

.popup-list-item{
    margin-top: 10px;
    margin-bottom: 10px;
}

.popup-option-wrapper{
    margin: 15px;
    padding: 15px;
}

.popup-option-box {
    cursor: pointer;
    display: inline-block;
    width: 44%;
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.popup-option-box:hover {
    background-color: #fafafa;
}

.popup-option-text {
    height: 100px;
    padding: 10px;
    color: #5f6a7d;
}

#customer_support_button {
    float: right;
}

.popup-image-wrapper {
    position: relative;
    display: block;
    margin: auto;
}

.popup-image {
    height:200px;
    margin: auto;
    display: block;
}

.ui-button {
    background: none !important;
}

.ui-state-hover {
    background: none !important;
}

.ui-dialog-title {
    float: none !important;
}

.ui-icon-closethick {
    border: none !important;
    outline: none !important;
    float: right !important;
    position: static !important;
    margin-top: 0px !important;
}

.ui-dialog-titlebar-close {
    border: none !important;
    outline: none !important;
}

input[type="email"] {
    width: 40%;
}

.hidden-class {
    display: none;
}
/*circle_css underneath*/

.tips-gray-bg { background-color: #fafafa !important; }

.tips-grid, [class*="grid-"] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; margin-bottom: -20px !important; }

.tips-grid-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

.tips-grid > *, [class*="grid-"] > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }

.tips-grid > *, [class*="grid-"] > * { width: 100%; }

.tips-grid-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.tips-grid-row-equal-heights > * { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.tips-grid-row-equal-heights > * > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }

.tips-grid-row-equal-heights > * > * { width: 100%; }

[class*="grid-"] > * { padding-left: 10px; padding-right: 10px; }

.tips-grid-space-medium > *, .tips-grid-col-space-medium > * { padding-left: 30px; padding-right: 30px; }

.tips-grid-space-medium, .tips-grid-col-space-medium { margin-left: -30px; margin-right: -30px; }

.tips-grid > *, [class*="grid-"] > * { margin-bottom: 20px !important; }

.tips-grid-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

@media (min-width: 718px) { .tips-content-cell-padding-left { padding-left: 40px; }
.tips-content-cell-padding-right { padding-right: 40px; } }
@media (min-width: 1024px) { .tips-content-cell-padding-left { padding-left: 60px; }
.tips-content-cell-padding-right { padding-right: 60px; } }
@media (min-width: 1292px) { .tips-content-cell-padding-left { padding-left: 80px; }
.tips-content-cell-padding-right { padding-right: 80px; } }
.tips-grid-align-left, .flex-align-left { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; }

.tips-grid-align-center, .flex-align-center { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; }

.tips-grid-align-right, .flex-align-right { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end !important; -webkit-justify-content: flex-end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; }

.tips-grid-align-justify, .flex-align-justify { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify !important; -webkit-justify-content: space-between !important; -ms-flex-pack: justify !important; justify-content: space-between !important; }

.tips-grid-valign-top, .flex-valign-top { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-content: flex-start !important; -ms-flex-line-pack: start !important; align-content: flex-start !important; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; }

.tips-grid-valign-middle, .flex-valign-middle { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-content: center !important; -ms-flex-line-pack: center !important; align-content: center !important; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; }

.tips-grid-valign-bottom, .flex-valign-bottom { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-content: flex-end !important; -ms-flex-line-pack: end !important; align-content: flex-end !important; -webkit-box-align: end !important; -webkit-align-items: flex-end !important; -ms-flex-align: end !important; align-items: flex-end !important; }

.tips-grid-valign-justify, .flex-valign-justify { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-content: space-between !important; -ms-flex-line-pack: justify !important; align-content: space-between !important; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; }

.tips-grid-auto > *, .tips-grid-flex > * { width: auto; }

.tips-grid-1 > * { width: 100%; }

.tips-grid-2 > * { width: 50%; }

.tips-grid-3 > * { width: 33.33333%; }

.tips-grid-4 > * { width: 25%; }

.tips-grid-5 > * { width: 20%; }

@media (min-width: 374px) { .tips-grid-auto-at-extra-small > *, .tips-grid-flex-at-extra-small > * { width: auto; }
.tips-grid-flex-at-extra-small { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.tips-grid-flex-at-extra-small > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }
.tips-grid-1-at-extra-small > * { width: 100%; }
.tips-grid-2-at-extra-small > * { width: 50%; }
.tips-grid-3-at-extra-small > * { width: 33.33333%; }
.tips-grid-4-at-extra-small > * { width: 25%; }
.tips-grid-5-at-extra-small > * { width: 20%; }
.tips-grid-6-at-extra-small > * { width: 16.66667%; }
.tips-grid-7-at-extra-small > * { width: 14.28571%; }
.tips-grid-8-at-extra-small > * { width: 12.5%; }
.tips-grid-9-at-extra-small > * { width: 11.11111%; }
.tips-grid-10-at-extra-small > * { width: 10%; }
.tips-grid-11-at-extra-small > * { width: 9.09091%; }
.tips-grid-12-at-extra-small > * { width: 8.33333%; } }
@media (min-width: 480px) { .tips-grid-auto-at-small > *, .tips-grid-flex-at-small > * { width: auto; }
.tips-grid-flex-at-small { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.tips-grid-flex-at-small > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }
.tips-grid-1-at-small > * { width: 100%; }
.tips-grid-2-at-small > * { width: 50%; }
.tips-grid-3-at-small > * { width: 33.33333%; }
.tips-grid-4-at-small > * { width: 25%; }
.tips-grid-5-at-small > * { width: 20%; }
.tips-grid-6-at-small > * { width: 16.66667%; }
.tips-grid-7-at-small > * { width: 14.28571%; }
.tips-grid-8-at-small > * { width: 12.5%; }
.tips-grid-9-at-small > * { width: 11.11111%; }
.tips-grid-10-at-small > * { width: 10%; }
.tips-grid-11-at-small > * { width: 9.09091%; }
.tips-grid-12-at-small > * { width: 8.33333%; } }
@media (min-width: 718px) { .tips-grid-auto-at-medium > *, .tips-grid-flex-at-medium > * { width: auto; }
.tips-grid-flex-at-medium { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.tips-grid-flex-at-medium > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }
.tips-grid-1-at-medium > * { width: 100%; }
.tips-grid-2-at-medium > * { width: 50%; }
.tips-grid-3-at-medium > * { width: 33.33333%; }
.tips-grid-4-at-medium > * { width: 25%; }
.tips-grid-5-at-medium > * { width: 20%; }
.tips-grid-6-at-medium > * { width: 16.66667%; }
.tips-grid-7-at-medium > * { width: 14.28571%; }
.tips-grid-8-at-medium > * { width: 12.5%; }
.tips-grid-9-at-medium > * { width: 11.11111%; }
.tips-grid-10-at-medium > * { width: 10%; }
.tips-grid-11-at-medium > * { width: 9.09091%; }
.tips-grid-12-at-medium > * { width: 8.33333%; } }
@media (min-width: 1024px) { .tips-grid-auto-at-large > *, .tips-grid-flex-at-large > * { width: auto; }
.tips-grid-flex-at-large { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.tips-grid-flex-at-large > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }
.tips-grid-1-at-large > * { width: 100%; }
.tips-grid-2-at-large > * { width: 50%; }
.tips-grid-3-at-large > * { width: 33.33333%; }
.tips-grid-4-at-large > * { width: 25%; }
.tips-grid-5-at-large > * { width: 20%; }
.tips-grid-6-at-large > * { width: 16.66667%; }
.tips-grid-7-at-large > * { width: 14.28571%; }
.tips-grid-8-at-large > * { width: 12.5%; }
.tips-grid-9-at-large > * { width: 11.11111%; }
.tips-grid-10-at-large > * { width: 10%; }
.tips-grid-11-at-large > * { width: 9.09091%; }
.tips-grid-12-at-large > * { width: 8.33333%; } }
@media (min-width: 1292px) { .tips-grid-auto-at-extra-large > *, .tips-grid-flex-at-extra-large > * { width: auto; }
.tips-grid-flex-at-extra-large { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.tips-grid-flex-at-extra-large > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; }
.tips-grid-1-at-extra-large > * { width: 100%; }
.tips-grid-2-at-extra-large > * { width: 50%; }
.tips-grid-3-at-extra-large > * { width: 33.33333%; }
.tips-grid-4-at-extra-large > * { width: 25%; }
.tips-grid-5-at-extra-large > * { width: 20%; }
.tips-grid-6-at-extra-large > * { width: 16.66667%; }
.tips-grid-7-at-extra-large > * { width: 14.28571%; }
.tips-grid-8-at-extra-large > * { width: 12.5%; }
.tips-grid-9-at-extra-large > * { width: 11.11111%; }
.tips-grid-10-at-extra-large > * { width: 10%; }
.tips-grid-11-at-extra-large > * { width: 9.09091%; }
.tips-grid-12-at-extra-large > * { width: 8.33333%; } }

.tips-grid-space-medium > *, .tips-grid-col-space-medium > * { padding-left: 30px; padding-right: 30px; }

.tips-grid-space-medium, .tips-grid-col-space-medium { margin-left: -30px; margin-right: -30px; }

.tips-col-1 { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }

.tips-col-2 { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }

.tips-col-3 { flex-basis: 25%; max-width: 25%; width: 25%; }

.tips-col-4 { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }

.tips-col-5 { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }

.tips-col-6 { flex-basis: 50%; max-width: 50%; width: 50%; }

.tips-col-7 { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }

.tips-col-8 { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }

.tips-col-9 { flex-basis: 75%; max-width: 75%; width: 75%; }

.tips-col-10 { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }

.tips-col-11 { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }

.tips-col-12 { flex-basis: 100%; max-width: 100%; width: 100%; }

@media (min-width: 374px) { .tips-col-1-at-extra-small { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.tips-col-2-at-extra-small { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.tips-col-3-at-extra-small { flex-basis: 25%; max-width: 25%; width: 25%; }
.tips-col-4-at-extra-small { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.tips-col-5-at-extra-small { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.tips-col-6-at-extra-small { flex-basis: 50%; max-width: 50%; width: 50%; }
.tips-col-7-at-extra-small { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.tips-col-8-at-extra-small { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.tips-col-9-at-extra-small { flex-basis: 75%; max-width: 75%; width: 75%; }
.tips-col-10-at-extra-small { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.tips-col-11-at-extra-small { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
.tips-col-12-at-extra-small { flex-basis: 100%; max-width: 100%; width: 100%; } }
@media (min-width: 480px) { .tips-col-1-at-small { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.tips-col-2-at-small { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.tips-col-3-at-small { flex-basis: 25%; max-width: 25%; width: 25%; }
.tips-col-4-at-small { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.tips-col-5-at-small { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.tips-col-6-at-small { flex-basis: 50%; max-width: 50%; width: 50%; }
.tips-col-7-at-small { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.tips-col-8-at-small { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.tips-col-9-at-small { flex-basis: 75%; max-width: 75%; width: 75%; }
.tips-col-10-at-small { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.tips-col-11-at-small { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
.tips-col-12-at-small { flex-basis: 100%; max-width: 100%; width: 100%; } }
@media (min-width: 718px) { .tips-col-1-at-medium { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.tips-col-2-at-medium { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.tips-col-3-at-medium { flex-basis: 25%; max-width: 25%; width: 25%; }
.tips-col-4-at-medium { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.tips-col-5-at-medium { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.tips-col-6-at-medium { flex-basis: 50%; max-width: 50%; width: 50%; }
.tips-col-7-at-medium { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.tips-col-8-at-medium { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.tips-col-9-at-medium { flex-basis: 75%; max-width: 75%; width: 75%; }
.tips-col-10-at-medium { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.tips-col-11-at-medium { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
.tips-col-12-at-medium { flex-basis: 100%; max-width: 100%; width: 100%; } }
@media (min-width: 1024px) { .tips-col-1-at-large { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.tips-col-2-at-large { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.tips-col-3-at-large { flex-basis: 25%; max-width: 25%; width: 25%; }
.tips-col-4-at-large { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.tips-col-5-at-large { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.tips-col-6-at-large { flex-basis: 50%; max-width: 50%; width: 50%; }
.tips-col-7-at-large { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.tips-col-8-at-large { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.tips-col-9-at-large { flex-basis: 75%; max-width: 75%; width: 75%; }
.tips-col-10-at-large { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.tips-col-11-at-large { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
.tips-col-12-at-large { flex-basis: 100%; max-width: 100%; width: 100%; } }
@media (min-width: 1292px) { .tips-col-1-at-extra-large { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.tips-col-2-at-extra-large { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.tips-col-3-at-extra-large { flex-basis: 25%; max-width: 25%; width: 25%; }
.tips-col-4-at-extra-large { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.tips-col-5-at-extra-large { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.tips-col-6-at-extra-large { flex-basis: 50%; max-width: 50%; width: 50%; }
.tips-col-7-at-extra-large { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.tips-col-8-at-extra-large { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.tips-col-9-at-extra-large { flex-basis: 75%; max-width: 75%; width: 75%; }
.tips-col-10-at-extra-large { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.tips-col-11-at-extra-large { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
.tips-col-12-at-extra-large { flex-basis: 100%; max-width: 100%; width: 100%; } }

a.tips-tile { color: inherit; border-radius: 4px; }
a.tips-tile:after { pointer-events: none; content: " "; display: block; position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; -webkit-box-shadow: 0 0 10px #507AAA; -moz-box-shadow: 0 0 10px #507AAA; -ms-box-shadow: 0 0 10px #507AAA; -o-box-shadow: 0 0 10px #507AAA; box-shadow: 0 0 10px #507AAA; background: transparent; opacity: 0.0; -webkit-transition: opacity 250ms ease, -webkit-transform 0s ease; -moz-transition: opacity 250ms ease, -moz-transform 0s ease; -o-transition: opacity 250ms ease, -o-transform 0s ease; transition: opacity 250ms ease, transform 0s ease; }
a.tips-tile:after { opacity: 0; }
a.tips-tile:hover, a.tips-tile:focus { color: inherit; }
a.tips-tile:hover:after, a.tips-tile:focus:after { opacity: 1; }

.tips-tile { display: block; padding: 30px; background: #fff; position: relative; }
.tips-tile:before { pointer-events: none; content: " "; display: block; position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; border: 1px solid rgba(0, 0, 0, 0.12); }
.tips-tile .theme-icon + * { margin-top: 10px; }
.tips-tile.full-bleed { padding: 0; }
.tips-tile.full-bleed .copy { padding: 30px; }
.tips-tile.full-bleed .image { background-color: #fff; overflow: hidden; position: relative; }
.tips-tile.full-bleed .image:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.tips-tile.full-bleed .image:first-child:not(:last-child):before, .tips-tile.full-bleed .image:first-child:not(:last-child):after { bottom: -2px; }
.tips-tile.full-bleed .image:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.tips-tile.full-bleed .image:last-child:not(:first-child):before, .tips-tile.full-bleed .image:last-child:not(:first-child):after { top: -2px; }
.tips-tile.full-bleed .image:before { pointer-events: none; content: " "; display: block; position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.tips-tile.full-bleed .image:after { pointer-events: none; content: " "; display: block; position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }

.pad-base { padding: 10px !important; }

.pad-line { padding: 20px !important; }

.pad-small { padding: 30px !important; }

.pad-medium { padding: 60px !important; }

.pad-large { padding: 80px !important; }

.pad-none { padding: 0 !important; }

.pad-vert-base { padding-top: 10px !important; padding-bottom: 10px !important; }

.pad-vert-line { padding-top: 20px !important; padding-bottom: 20px !important; }

.pad-vert-small { padding-top: 30px !important; padding-bottom: 30px !important; }

.pad-vert-medium { padding-top: 60px !important; padding-bottom: 60px !important; }

.pad-vert-none { padding-top: 0 !important; padding-bottom: 0 !important; }

.pad-horz-base { padding-left: 10px !important; padding-right: 10px !important; }

.pad-horz-line { padding-left: 20px !important; padding-right: 20px !important; }

.pad-horz-small { padding-left: 30px !important; padding-right: 30px !important; }

.pad-horz-medium { padding-left: 60px !important; padding-right: 60px !important; }

.pad-horz-large { padding-left: 80px !important; padding-right: 80px !important; }

.pad-horz-none { padding-left: 0 !important; padding-right: 0 !important; }

.pad-top-base { padding-top: 10px !important; }

.pad-top-line { padding-top: 20px !important; }

.pad-top-small { padding-top: 30px !important; }

.pad-top-medium { padding-top: 60px !important; }

.pad-top-large { padding-top: 80px !important; }

.pad-top-none { padding-top: 0 !important; }

.pad-bottom-base { padding-bottom: 10px !important; }

.pad-bottom-line { padding-bottom: 20px !important; }

.pad-bottom-small { padding-bottom: 30px !important; }

.pad-bottom-medium { padding-bottom: 60px !important; }

.pad-bottom-large { padding-bottom: 80px !important; }

.pad-bottom-none { padding-bottom: 0 !important; }

.pad-left-base { padding-left: 10px !important; }

.pad-left-line { padding-left: 20px !important; }

.pad-left-small { padding-left: 30px !important; }

.pad-left-medium { padding-left: 60px !important; }

.pad-left-large { padding-left: 80px !important; }

.pad-left-none { padding-left: 0 !important; }

.pad-right-base { padding-right: 10px !important; }

.pad-right-line { padding-right: 20px !important; }

.pad-right-small { padding-right: 30px !important; }

.pad-right-medium { padding-right: 60px !important; }

.pad-right-large { padding-right: 80px !important; }

.pad-right-none { padding-right: 0 !important; }

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

.cursor-pointer { cursor: pointer; }

.border-top { border-top-width: 1px !important; border-top-style: solid !important; border-top-color: #e0e0e0 !important; }

.border-top-none { border-top-width: 0 !important; }

.border-bottom { border-bottom-width: 1px !important; border-bottom-style: solid !important; border-bottom-color: #e0e0e0 !important; }

.border-bottom-none { border: none !important; }

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

.button { min-width: 0px; }

.tips-selected { background-color: #373f48; color: #6c7980; }
.tips-selected h4 { color: #d6d6d6; }

.tips-h2 { font-family: Helvetica, Arial, sans-serif;  }

.tips-h4 { font-size: 18px; line-height: 20px; margin-bottom: 20px; }

.tips-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: always; text-rendering: optimizeLegibility; -webkit-text-size-adjust: none; -ms-text-size-adjust: 100; font-size: 14px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: #5f6a7d; }
.tips-content { width: 276px; margin-left: auto; margin-right: auto; }
@media (min-width: 374px) { .tips-content { width: 324px; } }
@media (min-width: 480px) { .tips-content { width: 424px; } }
@media (min-width: 718px) { .tips-content { width: 680px; } }
@media (min-width: 1024px) { .tips-content { width: 868px; } }
@media (min-width: 1292px) { .tips-content { width: 1016px; } }

.align-center { text-align: center; }

.button, input[type=button], input[type=submit] {
    outline: none;
}

.margin-allround {
    margin: 8px !important;
}