.spinner {
display: inline-block;
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.5);
z-index: 99999;
}
.spinner:after {
content: " ";
display: block;
position: absolute;
left: 50%;
width: 48px;
height: 48px;
border-radius: 100%;
border: 4px solid transparent;
border-top-color: #080808;
border-left-color: #080808;
border-right-color: #080808;
animation: spin 1.2s linear infinite;
}
.smallspinner {
display: inline-block;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.5);
z-index: 99999;
}
.smallspinner:after {
content: " ";
display: block;
position: absolute;
left: 65%;
width: 25px;
height: 25px;
border-radius: 100%;
border: 2px solid transparent;
/*border-top-color: #3498db;
border-left-color: #3498db;
border-right-color: #3498db;*/
border-top-color: #080808;
border-left-color: #080808;
border-right-color: #080808;
animation: spin 1.2s linear infinite;
}
.nicknamespinner:after {
left: 47% !important;
}
/* .spinner{
width: 100%;
height: 100%;
position: fixed;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
z-index: 99999;
top: 0;
left: 0;
}
.spinner.m-img{
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
z-index: 999;
} */
/* LOADER 1 */
/* .spinner:before, .spinner:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-radius: 100%;
border: 4px solid transparent;
border-top-color: #3498db;
border-left-color: #3498db;
border-right-color: #3498db;
}
.spinner:before{
z-index: 100;
animation: spin 1s infinite;
animation-timing-function: cubic-bezier(0,0,1,1);
}
.spinner:after{
border: 4px solid #fff;
} */
@keyframes spin {
0%{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.container {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-right: 8px;
padding-left: 8px;
}
.container-fluid {
padding-right: 16px;
padding-left: 16px;
}
@media only screen and (min-width: 576px) {
.container {
width: 560px;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) {
.container {
width: 752px;
max-width: 100%;
}
}
@media only screen and (min-width: 992px) {
.container {
width: 976px;
max-width: 100%;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 1184px;
max-width: 100%;
}
}
.row {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -8px;
margin-left: -8px;
}
.row.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.col.reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-offset-0,
.col-sm-offset-1,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12,
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-0,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12,
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-offset-0,
.col-lg-offset-1,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12,
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-offset-0,
.col-xl-offset-1,
.col-xl-offset-2,
.col-xl-offset-3,
.col-xl-offset-4,
.col-xl-offset-5,
.col-xl-offset-6,
.col-xl-offset-7,
.col-xl-offset-8,
.col-xl-offset-9,
.col-xl-offset-10,
.col-xl-offset-11,
.col-xl-offset-12 {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-right: 8px;
padding-left: 8px;
max-width: 100%;
}
.col-xs {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-xs-1 {
-ms-flex-preferred-size: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-xs-2 {
-ms-flex-preferred-size: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%;
}
.col-xs-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
-ms-flex-preferred-size: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
}
.col-xs-5 {
-ms-flex-preferred-size: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%;
}
.col-xs-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
-ms-flex-preferred-size: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%;
}
.col-xs-8 {
-ms-flex-preferred-size: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%;
}
.col-xs-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
-ms-flex-preferred-size: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%;
}
.col-xs-11 {
-ms-flex-preferred-size: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%;
}
.col-xs-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-0 {
margin-left: 0;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.start-xs {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-xs {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-xs {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-xs {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-xs {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-xs {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-xs {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-xs {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-xs {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-xs {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.initial-order-xs {
-webkit-box-ordinal-group: NaN;
-ms-flex-order: initial;
order: initial;
}
@media only screen and (min-width: 576px) {
.col-sm {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-sm-1 {
-ms-flex-preferred-size: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-sm-2 {
-ms-flex-preferred-size: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%;
}
.col-sm-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-sm-4 {
-ms-flex-preferred-size: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
}
.col-sm-5 {
-ms-flex-preferred-size: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%;
}
.col-sm-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-sm-7 {
-ms-flex-preferred-size: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%;
}
.col-sm-8 {
-ms-flex-preferred-size: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%;
}
.col-sm-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-sm-10 {
-ms-flex-preferred-size: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%;
}
.col-sm-11 {
-ms-flex-preferred-size: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%;
}
.col-sm-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-sm-offset-0 {
margin-left: 0;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.start-sm {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-sm {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-sm {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-sm {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-sm {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-sm {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-sm {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-sm {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-sm {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-sm {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.initial-order-sm {
-webkit-box-ordinal-group: NaN;
-ms-flex-order: initial;
order: initial;
}
}
@media only screen and (min-width: 768px) {
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-0,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12 {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 8px;
padding-left: 8px;
}
.col-md {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-md-1 {
-ms-flex-preferred-size: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-md-2 {
-ms-flex-preferred-size: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%;
}
.col-md-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-md-4 {
-ms-flex-preferred-size: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
}
.col-md-5 {
-ms-flex-preferred-size: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%;
}
.col-md-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-md-7 {
-ms-flex-preferred-size: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%;
}
.col-md-8 {
-ms-flex-preferred-size: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%;
}
.col-md-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-md-10 {
-ms-flex-preferred-size: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%;
}
.col-md-11 {
-ms-flex-preferred-size: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%;
}
.col-md-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.start-md {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-md {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-md {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-md {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-md {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-md {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-md {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-md {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-md {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-md {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.initial-order-md {
-webkit-box-ordinal-group: NaN;
-ms-flex-order: initial;
order: initial;
}
}
@media only screen and (min-width: 992px) {
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-offset-0,
.col-lg-offset-1,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12 {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 8px;
padding-left: 8px;
}
.col-lg {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-lg-1 {
-ms-flex-preferred-size: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-lg-2 {
-ms-flex-preferred-size: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%;
}
.col-lg-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-lg-4 {
-ms-flex-preferred-size: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
}
.col-lg-5 {
-ms-flex-preferred-size: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%;
}
.col-lg-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-lg-7 {
-ms-flex-preferred-size: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%;
}
.col-lg-8 {
-ms-flex-preferred-size: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%;
}
.col-lg-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-lg-10 {
-ms-flex-preferred-size: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%;
}
.col-lg-11 {
-ms-flex-preferred-size: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%;
}
.col-lg-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.start-lg {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-lg {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-lg {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-lg {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-lg {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-lg {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-lg {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-lg {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-lg {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-lg {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.initial-order-lg {
-webkit-box-ordinal-group: NaN;
-ms-flex-order: initial;
order: initial;
}
}
@media only screen and (min-width: 1200px) {
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-offset-0,
.col-xl-offset-1,
.col-xl-offset-2,
.col-xl-offset-3,
.col-xl-offset-4,
.col-xl-offset-5,
.col-xl-offset-6,
.col-xl-offset-7,
.col-xl-offset-8,
.col-xl-offset-9,
.col-xl-offset-10,
.col-xl-offset-11,
.col-xl-offset-12 {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 8px;
padding-left: 8px;
}
.col-xl {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-xl-1 {
-ms-flex-preferred-size: 8.33333333%;
flex-basis: 8.33333333%;
max-width: 8.33333333%;
}
.col-xl-2 {
-ms-flex-preferred-size: 16.66666667%;
flex-basis: 16.66666667%;
max-width: 16.66666667%;
}
.col-xl-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-xl-4 {
-ms-flex-preferred-size: 33.33333333%;
flex-basis: 33.33333333%;
max-width: 33.33333333%;
}
.col-xl-5 {
-ms-flex-preferred-size: 41.66666667%;
flex-basis: 41.66666667%;
max-width: 41.66666667%;
}
.col-xl-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-xl-7 {
-ms-flex-preferred-size: 58.33333333%;
flex-basis: 58.33333333%;
max-width: 58.33333333%;
}
.col-xl-8 {
-ms-flex-preferred-size: 66.66666667%;
flex-basis: 66.66666667%;
max-width: 66.66666667%;
}
.col-xl-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-xl-10 {
-ms-flex-preferred-size: 83.33333333%;
flex-basis: 83.33333333%;
max-width: 83.33333333%;
}
.col-xl-11 {
-ms-flex-preferred-size: 91.66666667%;
flex-basis: 91.66666667%;
max-width: 91.66666667%;
}
.col-xl-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-xl-offset-0 {
margin-left: 0;
}
.col-xl-offset-1 {
margin-left: 8.33333333%;
}
.col-xl-offset-2 {
margin-left: 16.66666667%;
}
.col-xl-offset-3 {
margin-left: 25%;
}
.col-xl-offset-4 {
margin-left: 33.33333333%;
}
.col-xl-offset-5 {
margin-left: 41.66666667%;
}
.col-xl-offset-6 {
margin-left: 50%;
}
.col-xl-offset-7 {
margin-left: 58.33333333%;
}
.col-xl-offset-8 {
margin-left: 66.66666667%;
}
.col-xl-offset-9 {
margin-left: 75%;
}
.col-xl-offset-10 {
margin-left: 83.33333333%;
}
.col-xl-offset-11 {
margin-left: 91.66666667%;
}
.start-xl {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-xl {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-xl {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-xl {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-xl {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-xl {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-xl {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-xl {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-xl {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-xl {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.initial-order-xl {
-webkit-box-ordinal-group: NaN;
-ms-flex-order: initial;
order: initial;
}
}
@media only screen and (max-width: 575px) {
.hidden-xs {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.hidden-sm {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hidden-lg {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.hidden-xl {
display: none;
}
}
@charset "UTF-8";
.locationSearchBox > div {
position: relative !important;
}
.locationSearchBox input {
font-size: 20px !important;
border-bottom: 2px solid #000 !important;
border-top: 1px solid #747676 !important;
border-right: 1px solid #747676 !important;
border-left: 1px solid #747676 !important;
padding: 12px !important;
}
input[type=text]:focus {
outline: dashed !important;
outline-width: 1px !important;
}
.locationSearchBox.errorText input {
border: 1px solid #CC4D0F !important;
border-bottom: 4px solid #CC4D0F !important;
}
.locationSearchBox hr {
display: none;
}
.closeButton::after {
font-family: NHaasGroteskDSStd-55Rg,arial,sans-serif;
content: "\2715";
font-size: 16px;
}
.alertBorder {
border: 1px solid #CC4D0F;
border-bottom: 4px solid #CC4D0F;
}
.minWidth120 {
min-width: 120px;
}
.floatLeft {
float: left;
}
.displayFlex {
display: flex;
}
input+div>hr {
speak: none;
}
.textField label {
pointer-events: all !important;
font-size: 14px;
font-weight: bold;
}
.mSelectWrapper {
position: relative;
margin-bottom: 20px;
}
.mSelectWrapper .dropdownChevron:before {
font-family: "vzwIcons",arial,sans-serif;
content: "\E607";
bottom: 14px;
right: 10px;
position: absolute;
font-size: 10px;
speak:none;
}
.mSelect {
font-size: 16px;
width: 100%;
display: block;
position: relative;
background-color: transparent;
line-height: 24px;
transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
cursor: auto;
border-radius: 0;
border: none;
border-bottom: 2px solid #000;
padding-left: 6px;
padding-right: 30px;
margin-right: 14px;
-webkit-appearance: none;
-webkit-border-radius: 0px;
-moz-appearance: none;
}
.mSelectWrapper.borderStyle:before {
top: calc(50% + 5px);
right: 12px;
speak:none;
}
.mSelectWrapper.borderStyle>.mSelect {
border: 1px solid #747676;
height: 44px;
/* margin-top: 20px; */
padding-left: 6px;
padding-top: 10px;
border-bottom: 2px solid #000;
position: relative;
z-index: 10;
}
.mSelectWrapper select + div > label{
display: none;
visibility: hidden;
}
.mSelectWrapper select + div > input{
display: none;
visibility: hidden;
}
.mSelectWrapper > label {
margin-top: -23px;
width: 150%;
}
@media reader, speech, aural {
.mSelectWrapper:before {
display: none;
visibility: hidden;
}
}
select::-ms-expand {
display: none;
}
.is-hidden { display: none; }
.is-visuallyHidden {
display: block;
width: 1px;
height: 1px;
text-indent: 1px;
overflow: hidden
}
.is-disabled{
color: #e5e6e4;
text-decoration: none;
cursor: default;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjM5QzI1NTJGRDQxMTFFMzhFQTFFMjFBRTZDNzRFMDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjM5QzI1NTNGRDQxMTFFMzhFQTFFMjFBRTZDNzRFMDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMzlDMjU1MEZENDExMUUzOEVBMUUyMUFFNkM3NEUwNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMzlDMjU1MUZENDExMUUzOEVBMUUyMUFFNkM3NEUwNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnQq41IAAAAPSURBVHjaYmBgYNgPEGAAAMQAwFKt0gcAAAAASUVORK5CYII=)!important;
z-index:101;
}
.ReactModal{
position: absolute !important;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
overflow-y: auto;
background: #FFF;
padding: 20px;
max-height:80%;
z-index:100;
}
.modalCloseIcon {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
padding: 10px;
margin-right: 10px;
font-size: 2.5rem;
font-size: 30px;
color:#333333;
outline: none;
}
.modalCloseIcon::after {
font-family: 'vzwIcons',arial,sans-serif;
content: "\D7";
}
.modalContent{
max-height: 90vh;
}
@media only screen and (min-width: 90em){
.ReactModal{
width: 60vw;
}
}
.icon-close {
width: 14px;
height: 14px;
background-size: contain;
font-family: 'vzwIcons',arial,sans-serif;
content: "\D7";
}
.gridWallBorder {
border: 1px solid #d8dada;
}
.gridWallBorder.selected {
border: 1px solid;
border-top: 4px solid #d8dada;
}
.countText {
position: relative;
padding-left: 40px;
}
.margin140 {
margin: 140px;
max-height: 25px;
padding: 0px 0px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
.searchStyle {
margin-left: -20px;
margin-top: -15px;
}
.brandSelectMargin {
margin-left: 100%;
width: 50%;
}
.deviceSelectMargin {
margin-left: 50%;
width: 52%;
}
.colWidth {
max-width: 20%;
}
.mainDiv {
margin-left: 10%;
margin-right: 10%;
}
.modelYesButton {
min-width: 100px;
height: 31px;
}
@media only screen and (max-width: 768px) {
.colWidth {
max-width: 25%;
}
.deviceSelectMargin {
margin-left: 42%;
width: 60%;
}
.brandSelectMargin {
margin-left: 70%;
width: 64%;
}
.countText {
position: relative;
padding-left: 55px;
}
.mainDiv {
margin-left: 0%;
margin-right: 0%;
}
}
@media only screen and (max-width: 414px) {
.colWidth {
max-width: 50%;
}
.countText {
position: relative;
padding-left: 5px;
}
.mainDiv {
margin-left: 0%;
margin-right: 0%;
}
}
/**************************************************
Global Buttons
**************************************************/
.button {
display: inline-block;
padding: 12px 35px;
text-align: center;
color: #fff;
background-color: #000000;
cursor: pointer;
font-family: NeueHaasGroteskDisplayBold, Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
width: auto;
min-width: 151px;
border-radius: 24px;
border: 1px solid #000000;
}
/**************************************************
Primary Button (Red)
**************************************************/
.button.primary {
color: #fff;
background-color: #000000;
}
/**************************************************
Secondary Button (Gray)
**************************************************/
.button.secondary {
color: #000000;
background-color: white;
border: 1px solid #000000;
font-weight: bold;
}
/**************************************************
Teritiary Button
(To support older buttons, DO NOT USE going forward,
USE SECONDARY BUTTON)
**************************************************/
.button.tertiary {
padding: 6px 12px;
min-width: 80px;
}
/**************************************************
primary Button (white)
**************************************************/
.button.white {
color: #000;
background-color: white;
border: 1px solid #000;
}
/**************************************************
secondary Button (white)
**************************************************/
.button.black {
color: #fff;
background-color: #000;
border: 1px solid #fff;
}
/**************************************************
Modification Button
**************************************************/
.button.large {
padding: 12px 18px;
min-width: 114px;
}
/* .button:focus{
outline: none;
box-shadow: 0 0 1pt 1pt orange;
} */
.button_menu {
/**** ????? ****/
color: #fff;
text-decoration: underline;
border: 1px solid #fff;
background: transparent;
}
/**************************************************
Disabled button
**************************************************/
.button.disabled,
.button[disable="true"],
.button[disabled] {
background-color: #d8dada;
color: #ffffff;
border: 1px solid #d8dada;
font-family: NeueHaasGroteskDisplayMedium, Arial, Helvetica, sans-serif;
}
.button.disabled.m-bglight,
.button[disable="true"].m-bglight,
.button[disabled].m-bglight {
background-color: #f5f5f5;
color: #a3a3a3;
border: 1px solid #e5e6e4
}
/*Disabled styles for secondary buttons*/
.button.secondary[disabled] {
background-color: transparent;
color: #e5e6e4
}
/*footer fixed state*/
.footerFixed {
position: fixed;
width: 100%;
padding: 12px;
left: 0;
bottom: 0;
z-index: 100;
border-top: 1px solid #d8dada;
text-align: center;
background: #FFFFFF;
}
.link {
color: #000;
/* border-bottom: 1px solid #000; */
text-decoration: underline;
}
.backButton {
background-color: #000;
border: 1px solid #fff;
color: #fff;
}
/**************************************************
Accessibility - Visible Focus
***************************************************/
a:focus,
button:focus,
.button:focus,
input[type=submit]:focus,
select:focus,
.checkbox:focus~label:before,
.radioBtn:focus+label:before {
outline: #000 dashed 1px;
outline-offset: 2px;
}
button#close-button:focus, button#close-button:focus-visible{
outline:none!important;
}
.focusWhite:focus,
.whiteFocus:focus {
outline: #fff dashed 1px !important;
outline-offset: 2px;
}
.arrowRight::after {
content: ">";
padding-left: 10px;
font-size: 20px;
position: relative;
top: 2px;
}
.btnCustom {
padding-top: 6px !important;
height: 42px !important;
font-size: small !important;
width: 135px !important;
}
/** PLEASE READ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Organize Modules Aphabetically by Block
Module Name = Block Name
Keep All Block-related Styles together
.block
.block_element
.block_element.m-modifier
ADHERE TO ALL SMACSS RULES
**/
.deviceTile_img {
max-width: 100%;
max-height: 100%;
}
.deviceTile_imgContainer {
height: 250px;
}
/* Featured Badge */
.featuredBadge {
width: 24px;
height: 0;
border-bottom: 24px solid #cd040b;
border-left: 24px solid transparent;
color: #cd040b;
position: absolute;
right: 0;
bottom: 0;
-webkit-transition: bottom 1s, border 1s; /* For Safari 3.1 to 6.0 */
transition: bottom 1s, border 1s;
z-index: 1;
}
.featuredBadge:before {
font-size: 10px;
font-size: 1rem;
margin-left: -12px;
margin-top: 10px;
position: absolute;
color: #fff;
}
.featuredBadgeAnimation {
top: 0px;
transition: top 1s, border 1s;
}
.featuredBadgeContainer {
min-height: 24px;
position: relative;
margin: 13px -10px 0 -10px;
}
.featuredBadgeContainer.m-pdp {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
.featuredBadgeContainer.m-configurator{
margin:0 !important;
}
.featuredBadgeText {
margin: 0 24px;
text-align: center;
padding: 6px 0;
}
.m-shown .featuredBadgeAnimation {
top: 0px
}
.m-shown .featuredBadge {
bottom: -15px;
}
/***************************************************
Hero Price Component Styles
***************************************************** */
.pricingStyle {
font-size: 1.2rem;
width: 18px;
height: 18px;
background-color: #abe0f9;
border-radius: 50%;
display: inline-block;
position: absolute;
top: -2px;
font-weight: normal;
left: -14px;
line-height: 18px;
}
/**
* Price Option on Gridwall
*/
.pricingDropdown{
background: #f5f5f5;
border-radius: 30px;
padding: 3px 10px;
margin-bottom: 5px;
}
/***************************************************
Featured small
***************************************************** */
.featuredBadgeSmall {
width: 12px;
height: 0;
border-bottom: 12px solid #cd040b;
border-left: 12px solid transparent;
color: #cd040b;
position: absolute;
right: 0;
bottom: 0;
-webkit-transition: bottom 1s, border 1s;
transition: bottom 1s, border 1s;
z-index: 1;
}
.configurator-wrapper{
height:92vh;
}
.m-back:before {
float: left;
padding-left: 12px;
margin: 0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.secondaryCTA:before {
content: "\E609";
color: #cd040b;
margin-left: 15px;
position: relative;
top: 2px;
font-family: 'vzwIcons',arial,sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.arrow-down {
width: 12px;
height: 12px;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.arrow-up {
width: 12px;
height: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/***********************************
How to implement:z
***********************************/
.radioCustom, .radioBtn {
opacity: 0;
position: absolute;
width: 20px;
height: 20px;
}
.radioCustom, .radioCustom_label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
outline: none;
}
.radioCustom.m-horizonCenter, .radioCustom_label.m-horizonCenter {
display: flex;
justify-content: space-around;
flex-direction:row;
align-items: center;
}
.radioCustom:checked + .radioCustom_label:before,
.radioCustom:checked + input[type=hidden] + .radioCustom_label:before,
.radioBtn:checked + label:before,
.radioBtn:checked + input[type=hidden] + .label:before {
background: #040404;
border: 1px solid;
box-shadow: inset 0 0 0 4px #ffffff;
}
.radioCustom_label:before,
.radioBtn+label:before {
content: '';
background: #fff;
border: 1px solid #747676;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
text-align: center;
border-radius: 50%;
margin: 0 auto;
cursor: pointer;
}
.radioCustom_label.m-horizonCenter:before,
.radioBtn+label.m-horizonCenter:before {
flex-basis: 34px;
}
.radioCustom_label.radioLeft:before{
float:left;
}
.radioCustom_label.m-priceLabel:before {
display: inline-block;
}
.radioCustom_label > span {
font-size: 16px;
font-size: 1.6rem;
margin-top: 6px;
display: block;
color: #333333;
}
.priceLabel {
width: 85%;
float: right;
margin-right: 24px;
}
/** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 22, 2019 */
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms opacity;
-o-transition: 300ms opacity;
transition: 300ms opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #0d0d0e;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000;
}
.swiper-pagination-lock {
display: none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
.swiperList {
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
overflow: hidden;
}
.swiperList .swiper-wrapper {
height: inherit;
width: 100%;
margin-bottom: 60px;
}
.swiperList .swiper-pagination-bullets {
bottom: 25px !important;
}
.swiperList .swiper-pagination-bullet {
width: 48px;
height: 2px;
border-radius: 0%;
}
.swiperList .swiper-pagination-bullet-active {
opacity: 1;
background: #000;
height: 6px !important;
}
.swiperList .swiper-slide, .swiperList .swiper-slide.swiper-slide-visible.swiper-slide-prev {
height: inherit;
}
.desktopView .swiper-wrapper {
margin-top: 60px;
}
.desktopView .swiper-button-prev.swiper-button-black, .desktopView .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNyIgaGVpZ2h0PSIzOCIgdmlld0JveD0iMCAwIDM3IDM4Ij4KICAgIDxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE4LjMyMi4zNDhsLTEuNjc4IDEuNjc5IDE1Ljc4MyAxNS43ODdIMHYyLjM3MmgzMi40MjdMMTYuNjQ0IDM1Ljk3M2wxLjY3OCAxLjY3OUwzNi45NzYgMTl6Ii8+Cjwvc3ZnPgo=');
}
.desktopView .swiper-button-next.swiper-button-black, .desktopView .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNyIgaGVpZ2h0PSIzOCIgdmlld0JveD0iMCAwIDM3IDM4Ij4KICAgIDxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE4LjMyMi4zNDhsLTEuNjc4IDEuNjc5IDE1Ljc4MyAxNS43ODdIMHYyLjM3MmgzMi40MjdMMTYuNjQ0IDM1Ljk3M2wxLjY3OCAxLjY3OUwzNi45NzYgMTl6Ii8+Cjwvc3ZnPgo=');
}
.desktopView .swiper-button-next {
left: auto;
right: 10px;
top: 25px;
width: 48px;
height: 42px;
background-size: 100%;
}
.desktopView .swiper-button-prev {
left: auto;
right: 70px;
top: 25px;
width: 48px;
height: 42px;
background-size: 100%;
transform: rotate(180deg);
}
.desktopView .swiper-button-disabled {
display: block !important;
}
.mobileView .swiper-button-next {
height: 91%;
top: 25px;
background-position: 50% 50%;
width: 13%;
background-size: 60%;
right: 0;
}
.mobileView .swiper-slide.swiper-slide-next > div > div {
opacity: 0;
}
.mobileView .swiper-button-next.swiper-button-black, .mobileView .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8.679.165L7.884.96l7.476 7.478H0v1.124h15.36L7.884 17.04l.795.795L17.515 9z'/%3E%3C/svg%3E");
}
.swiper-slide, .swiper-slide.swiper-slide-visible.swiper-slide-prev {
visibility:visible;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-repeat: no-repeat;
}
html {
/* font-size: 62.5%; */
box-sizing: border-box;
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #FFF;
/*min-width: 984px; Forces backgrounds to span full width, even if there is horizontal scrolling. */
margin: 0;
padding: 0;
/*Defaults for cascading - inherited by child elements */
color: #000;
cursor: default;
font-family: NeueHaasGroteskDisplay, Arial, Helvetica, sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-style: normal;
font-weight: normal;
/*line-height:1.3;*/
text-align: left;
visibility: visible;
white-space: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
/*font-weight:normal;*/
/* letter-spacing:.025em; */
}
h1,
h2,
h3,
h4,
h5 {
font-family: NeueHaasGroteskDisplayBold, Arial, Helvetica, sans-serif;
}
h1,
h2,
h3,
.h1,
.h2,
.h3 {
color: #000;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
color: #000;
}
h1,
.h1 {
font-size: 36px;
font-size: 3.6rem;
}
h2,
.h2 {
font-size: 48px;
font-size: 4.8rem;
}
h3,
.h3 {
font-size: 36px;
font-size: 3.6rem;
}
h4,
.h4 {
font-size: 24px;
font-size: 2.4rem;
}
h5,
.h5 {
font-size: 18px;
font-size: 1.8rem;
}
h6,
.h7 {
font-family: NeueHaasGroteskTextBold, Arial, Helvetica, sans-serif;
}
h6,
.h6 {
font-size: 16px;
font-size: 1.6rem;
}
.h7 {
font-size: 14px;
font-size: 1.4rem;
}
ol,
ul,
p {
margin: 0;
}
p {
line-height: 1.6 ;
font-size: 1.4rem ;
font-size: 14px ;
}
.p {
line-height: 1.6;
font-size: 1.4rem;
font-size: 14px;
}
a {
color: rgb(6, 7, 7);
text-decoration: underline;
}
hr {
border-top: 1px solid #E4E4E4;
border-bottom-width: 0;
margin: 8px auto;
background: tranparent;
}
var {
font-style: normal;
}
ins {
text-decoration: none;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
select {
/*commenting box shadow as it is difficult remove browser specific style in react. add box shadow wherever needed.*/
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
border: 1px solid #ccc;
background-color: #fff;
color: #555;
vertical-align: middle;
padding: 11px;
}
strong {
font-family: NeueHaasGroteskTextBold, Arial, Helvetica, sans-serif;
font-weight: normal;
}
/*
*Including the below rule to force buttons to take same width as chrome.
*Remove this rule in case normalize.css is added to GRUNT build
*/
/* button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} */
.disableField {
opacity: 0.5;
pointer-events: none;
}
.gnav20-width-wrapper-border-bottom {
z-index: 0 !important;
}
.dpamer {
width: 201px !important;
}
.fontTextWidth {
width: 318px;
}
.confirmationFontStyle {
font-family: "Neue Haas Grotesk Display Std",arial,sans-serif;
}
.textMargin {
margin-left: 60px;
}
.fontSize_16 {
font-size: 90px;
font-size: 9rem;
}
.fontSize_15 {
font-size: 80px;
font-size: 8rem;
}
.fontSize_14 {
font-size: 75px;
font-size: 7.5rem;
}
.fontSize_13 {
font-size: 56px;
font-size: 5.6rem;
}
.fontSize_12 {
font-size: 42px;
font-size: 4.2rem;
}
.fontSize_11 {
font-size: 32px;
/* font-size: 3.2rem; */
}
.fontSize_10 {
font-size: 30px;
font-size: 3rem;
}
.fontSize_25 {
font-size: 25px;
font-size: 2.5rem;
}
.fontSize_9 {
font-size: 24px;
font-size: 2.4rem;
}
.fontSize_8 {
font-size: 22px;
font-size: 2.2rem;
}
.fontSize_7 {
font-size: 20px;
font-size: 2.0rem !important;
}
.fontSize_6 {
font-size: 18px;
font-size: 1.8rem;
}
.fontSize_5 {
font-size: 16px;
font-size: 1.6rem;
}
.fontSize_4 {
font-size: 14px !important;
font-size: 1.4rem !important;
}
.fontSize_3 {
font-size: 13px;
font-size: 1.3rem;
}
.fontSize_2 {
font-size: 12px;
font-size: 1.2rem;
}
.fontSize_1 {
font-size: 10px;
font-size: 1.0rem;
}
/* .react-calendar__navigation__label {
font-size: 0.7rem !important;
height: 1.5rem !important;
}
.react-calendar__month-view__weekdays__weekday {
font-size: 0.7rem !important;
height: 1.5rem !important;
}
.react-calendar__tile {
font-size: 0.7rem !important;
height: 1.5rem !important;
}
.react-react-calendar {
width: 16.875rem;
min-width: 16.875rem;
} */
/*** FONTS ***/
@font-face{ font-family:'vzwIcons';
src:url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.eot');
src:url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.eot?#iefix') format('embedded-opentype'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.woff') format('woff'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.ttf') format('truetype'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.svg#vzwIcons') format('svg');
font-weight:normal;
font-style:normal
}
/*@font-face {
font-family:"VerizonAngelinaRegular";
src:url('https://scache2.vzw.com/globalnav/fonts/angelina.woff?#iefix') format('woff'),
url('https://scache2.vzw.com/globalnav/fonts/angelina.ttf') format('truetype'),
url('https://scache2.vzw.com/globalnav/fonts/angelina.svg') format('svg'),
url('https://scache2.vzw.com/globalnav/fonts/angelina.eot') format('embedded-opentype');
}*/
@font-face {
font-family: "vzwIcons";
src:url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.woff?#iefix') format('woff'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.ttf') format('truetype'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.svg') format('svg'),
url('https://scache2.vzw.com/globalnav/fonts/vzw-iconfont.eot') format('embedded-opentype');
}
/* Neue Haas Grotesk */
@font-face {
font-family: "NeueHaasGroteskDisplay";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplay.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplay.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplay.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplay.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskDisplayBold";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayBold.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayBold.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayBold.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayBold.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskDisplayMedium";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayMedium.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayMedium.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayMedium.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskDisplayMedium.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskText";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskText.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskText.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskText.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskText.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskTextBold";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextBold.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextBold.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextBold.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextBold.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskTextMedium";
src:url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextMedium.eot?#iefix") format("embedded-opentype"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextMedium.woff2") format("woff2"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextMedium.woff") format("woff"),
url("https://scache2.vzw.com/globalnav/fonts/NeueHaasGroteskTextMedium.ttf") format("truetype");
}
/*font Sizes*/
.fontSize_9 {
font-size: 60px;
font-size: 6rem;
}
.fontSize_8 {
font-size: 48px;
font-size: 4.8rem;
}
.fontSize_7 {
font-size:32px;
font-size:3.2rem;
}
.fontSize_6 {
font-size:24px;
font-size:2.4rem;
}
.fontSize_2_0{
font-size:20px !important;
font-size:2.0rem !important;
}
.fontSize_2_6{
font-size:26px;
font-size:2.6rem;
}
.fontSize_5{
font-size:18px;
font-size:1.8rem;
}
.fontSize_4 {
font-size:16px !important;
font-size:1.6rem !important;
}
.fontSize_3 {
font-size:14px;
font-size:1.4rem;
}
.fontSize_1_3 {
font-size:13px;
font-size:1.3rem;
}
.fontSize_2 {
font-size:12px;
font-size:1.2rem;
}
.fontSize_1 {
font-size:10px;
font-size:1.0rem;
}
.legalFinePrint{
color:#4b4b4b;
font-size:10px;
font-size:1.0rem;
}
.fontTextLineChart{font-family: "NeueHaasGroteskText", Verdana, Arial, sans-serif;}
.fontText{font-family: "NeueHaasGroteskText", Verdana, Arial, sans-serif;}
.fontTextMedium{font-family: "NeueHaasGroteskTextMedium", Verdana, Arial, sans-serif;}
.fontTextBold{font-family: "NeueHaasGroteskTextBold", Verdana, Arial, sans-serif;}
.fontDisplay{font-family: "NeueHaasGroteskDisplay", Verdana, Arial, sans-serif;}
.fontDisplayMedium{font-family: "NeueHaasGroteskDisplayMedium", Verdana, Arial, sans-serif;}
.fontDisplayBold{font-family: "NeueHaasGroteskDisplayBold", Verdana, Arial, sans-serif;}
.red{color:#cb040b;}
.blue{color:#0645AD;}
.white{color:#FFF;}
.exploreMM .fontSize_7 {
font-size:32px;
}
.exploreMM .fontSize_3 {
font-size:14px;
}
.exploreMM .fontSize_2 {
font-size:12px;
}
.exploreMM .select-plan-button{
font-size:14px;
}
.exploreMM a{
font-size:13px;
}
/******************************************************************************/
/* https://www.responsivegridsystem.com/calculator/ */
/* 12 column grid, 5 column grid, no margin */
/* Customization: - Top and bottom column margins are zeroed out. */
/* - Max width container added to constrain to 984px */
/******************************************************************************/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 2.1%;
}
.col:first-of-type, .col.first-col { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.col.no-gutter {margin:0;}
/**************************************************
5 Column
**************************************************/
.span_5_of_5 {
width: 100%;
}
.span_4_of_5 {
width: 79.58%;
}
.span_3_of_5 {
width: 59.16%;
}
.span_2_of_5 {
width: 38.74%;
}
.span_1_of_5 {
width: 18.32%;
}
/**************************************************
12 Column
**************************************************/
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.49%;
}
.span_10_of_12 {
width: 82.98%;
}
.span_9_of_12 {
width: 74.47%;
}
.span_8_of_12 {
width: 65.96%;
}
.span_7_of_12 {
width: 57.45%;
}
.span_6_of_12 {
width: 48.95%;
}
.span_5_of_12 {
width: 40.44%;
}
.span_4_of_12 {
width: 31.93%;
}
.span_3_of_12 {
width: 23.42%;
}
.span_2_of_12 {
width: 14.91%;
}
.span_1_of_12 {
width: 6.408%;
}
.no-gutter.span_12_of_12 {
width: 100%;
}
.no-gutter.span_11_of_12 {
width: 91.66%;
}
.no-gutter.span_10_of_12 {
width: 83.33%;
}
.no-gutter.span_9_of_12 {
width: 75%;
}
.no-gutter.span_8_of_12 {
width: 66.66%;
}
.no-gutter.span_7_of_12 {
width: 58.33%;
}
.no-gutter.span_6_of_12 {
width: 50%;
}
.no-gutter.span_5_of_12 {
width: 41.66%;
}
.no-gutter.span_4_of_12 {
width: 33.33%;
}
.no-gutter.span_3_of_12 {
width: 25%;
}
.no-gutter.span_2_of_12 {
width: 16.66%;
}
.no-gutter.span_1_of_12 {
width: 8.333%;
}
/******************************************************************************/
/* Layout constraint */
/******************************************************************************/
.grid {
/*max-width:1280px;*/
max-width:1272px;
margin-left:auto;
margin-right:auto;
padding:0 20px;
/* padding-left: 20px;*/
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.grid {
/*max-width:1280px;*/
max-width:984px;
margin-left:auto;
margin-right:auto;
padding:0 20px;
}
}
/**************************************************
Grid Exceptions
**************************************************/
.no-gutter.span_9_of_12.m-gridwall {width:76.5%}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FIVE */
.span_5_of_5 {
width: 100%;
}
.span_4_of_5 {
width: 79.8%;
}
.span_3_of_5 {
width: 59.6%;
}
.span_2_of_5 {
width: 39.4%;
}
.span_1_of_5 {
width: 19.2%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
}
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.75%;
}
.span_2_of_4 {
width: 49.5%;
}
.span_1_of_4 {
width: 24.25%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
.span_7_of_7 {
width: 100%;
}
.span_6_of_7 {
width: 85.48%;
}
.span_5_of_7 {
width: 70.97%;
}
.span_4_of_7 {
width: 56.45%;
}
.span_3_of_7 {
width: 41.94%;
}
.span_2_of_7 {
width: 27.42%;
}
.span_1_of_7 {
width: 12.91%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_7_of_7 { width: 100%; }
}
/* GRID OF SIX */
.span_6_of_6 {
width: 100%;
}
.span_5_of_6 {
width: 83.06%;
}
.span_4_of_6 {
width: 66.13%;
}
.span_3_of_6 {
width: 49.2%;
}
.span_2_of_6 {
width: 32.26%;
}
.span_1_of_6 {
width: 15.33%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}
/* GRID OF EIGHT */
.span_8_of_8 {
width: 100%;
}
.span_7_of_8 {
width: 87.3%;
}
.span_6_of_8 {
width: 74.6%;
}
.span_5_of_8 {
width: 61.9%;
}
.span_4_of_8 {
width: 49.2%;
}
.span_3_of_8 {
width: 36.5%;
}
.span_2_of_8 {
width: 23.8%;
}
.span_1_of_8 {
width: 11.1%;
}
.bold {
font-weight: bold;
}
.egaygH {
height: 0.25rem !important;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }
}
/* backgrounds */
.background_FF{background:#FFF;}
.background_CC{background:#CCC;}
.background_00 {background:#000;}
.background_E5 {background:#E5E5E5;}
.background_lightblue{background:#abe0f9;}
.background_333 {background-color:#333;}
.background_primary {background-color:#e4e5e3;}
.background_supporting {background-color:#f7f7f7;}
.background_promotion {background-color :#c9fdc7;}
.background_tertiary {background-color:#ffffff;}
.background_lightGray {background-color:#959595;}
.background_promo {background-color:#D6F1D5;}
.background_lightGreen{background-color:#62d1a8;}
.background_lightOrange{background-color:#f9b295;}
.background_EB{background-color:#EBEBEB;}
.background_graySection {background-color:#F4F4F4;}
.background_solidGray {background-color:#e6e7e7;}
.background_red {background-color: #cc050a;}
.background_blue {background-color: #0088CE;}
/* borders */
.border_CC {border:1px solid #CCC;}
.border_33 {border:1px solid #333;}
.border_00 {border:1px solid #000;}
.border_95 {border:1px solid #959595;}
.border_EB {border:1px solid #EBEBEB;}
.border_FA {border:1px solid #FAFAFA;}
.border_FE {border:2px solid #EFEFEF;}
.border_99{border: 1px solid #999}
.border_active{border: 3px solid #cd040b;}
.border_00_thick {border:3px solid #000;}
.border_FF {border:1px solid #fff;}
.border_FF_thick {border:3px solid #fff;}
.border_F2 {border:1px solid #f2f2f2;}
.border_F2_thick {border:2px solid #f2f2f2;}
.border_D8 {border:1px solid #D8DADA;}
.border_DOT {border:2px dashed #EBEBEB;}
.noBorder {border:none !important;}
.noTopBorder {border-top:none;}
.noBottomBorder {border-bottom:none;}
.noLeftBorder {border-left:none;}
.noRightBorder {border-right:none;}
.onlyTopBorder {border-bottom:none; border-left:none; border-right:none;}
.onlyBottomBorder {border-top:none; border-left:none; border-right:none;}
.onlyLeftBorder {border-top:none; border-bottom:none; border-right:none;}
.onlyRightBorder {border-top:none; border-bottom:none; border-left:none;}
.noSideBorder {border-left:none;border-right:none;}
.onlySideBorder {border-top:none;border-bottom:none;}
/* Clear Floated Elements */
/* https://sonspring.com/journal/clearing-floats */
.clear, .clear6, .clear12, .clear18, .clear24, .clear30, .clear36, .clear42, .clear54, .clear60, .clear72, .clear102 {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clear6, .clear12, .clear18, .clear24, .clear30, .clear36, .clear42, .clear54, .clear72, .clear102 {
width:auto;
}
.clear6 {height:6px;}
.clear12 {height:12px;}
.clear18 {height:18px;}
.clear24 {height:24px;}
.clear30 {height:30px;}
.clear36 {height:36px;}
.clear42 {height:42px;}
.clear54 {height:54px;}
.clear60 {height:60px;}
.clear72 {height:72px;}
.clear102 {height:102px;}
/* https://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {clear: both;}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.lt-ie8 .clearfix {zoom: 1;}
/*For simplifying the layout of an ordered or unordered list element*/
.plainList {
margin:0;
padding:0;
list-style:none;
}
.noIndentList {padding-left:1em}
.inlineList, .inlineList > li {display:inline;}
.normalList {list-style:inherit;}
.pad3 {padding:3px;}
.pad5 {padding:5px;}
.pad6 {padding:6px;}
.pad10 {padding:10px;}
.pad12 {padding:12px;}
.pad15 {padding:15px;}
.pad18 {padding:18px;}
.pad20 {padding:20px;}
.pad020 {padding:0 20px;}
.pad24 {padding:24px;}
.pad30 {padding:30px;}
.pad36 {padding:36px;}
.pad42 {padding:42px;}
.pad48 {padding:48px;}
.pad54 {padding:54px;}
.pad60 {padding:60px;}
.pad72 {padding:72px;}
.pad82 {padding:82px;}
.pad102 {padding:102px;}
.pad150 {padding:150px;}
.noPad {padding:0;}
.noSidePad {padding-left:0; padding-right:0;}
.noBottomPad {padding-bottom:0;}
.onlySidePad, .sidePadOnly {padding-top:0; padding-bottom:0;}
.onlyTopPad{padding-bottom:0; padding-left:0; padding-right:0;}
.onlyBottomPad{ padding-top:0; padding-left:0; padding-right:0;}
.onlyLeftPad{ padding-top:0; padding-bottom:0; padding-right:0;}
.onlyRightPad{ padding-top:0; padding-bottom:0; padding-left:0;}
.noTopPad{padding-top:0;}
.noBottomPad{padding-bottom:0;}
.noLeftPad{padding-left:0;}
.noRightPad{padding-right:0;}
/*Padding in Percentage*/
.padding1percent {padding:1%;}
.padding2percent {padding:2%;}
.padding3percent {padding:3%;}
.padding4percent {padding:4%;}
.padding5percent {padding:5%;}
.padding6percent {padding:6%;}
.padding7percent {padding:7%;}
.padding8percent {padding:8%;}
.padding9percent {padding:9%;}
.padding10percent{padding:10%;}
.margin0 {margin:0;}
.margin3 {margin:3px;}
.margin6 {margin:6px;}
.margin8 {margin:8px;}
.margin10 {margin:10px;}
.margin12 {margin:12px;}
.margin14 {margin:14px;}
.margin15 {margin:15px;}
.margin18 {margin:18px;}
.margin20 {margin:20px;}
.margin22 {margin:22px;}
.margin24 {margin:24px;}
.margin26 {margin:26px;}
.margin30 {margin:30px;}
.margin32 {margin:32px;}
.margin36 {margin:36px;}
.margin42 {margin:42px;}
.margin48 {margin:48px;}
.margin45 {margin:45px;}
.margin50 {margin:50px;}
.margin54 {margin:54px;}
.margin60 {margin:60px;}
.margin72 {margin:72px;}
.margin102 {margin:102px;}
.marginAuto {margin:auto;}
.margin-6 {margin:-6px;}
.margin-10 {margin:-10px;}
.margin-24{ margin:-24px;}
.margin-36{ margin:-36px;}
.margin-42{ margin:-42px;}
.margin-48{ margin:-48px;}
.margin-78{ margin:-78px;}
.margin-90{ margin:-90px;}
.noMargin {margin:0 !important;}
.noSideMargin { margin-left:0; margin-right:0;}
.noTopMargin {margin-top:0;}
.noBottomMargin {margin-bottom:0;}
.noRightMargin {margin-right:0;}
.noLeftMargin {margin-left:0;}
.onlySideMargin, .sideMarginOnly {margin-top:0; margin-bottom:0;}
.onlyTopMargin{ margin-bottom:0; margin-left:0; margin-right:0;}
.onlyBottomMargin{ margin-top:0; margin-left:0; margin-right:0;}
.onlyLeftMargin{ margin-top:0; margin-bottom:0; margin-right:0;}
.onlyRightMargin{ margin-top:0; margin-bottom:0; margin-left:0;}
.border_1{border-bottom: 1px solid;}
/*Margin in Percentage*/
.margin1percent {margin:1%;}
.margin2percent {margin:2%;}
.margin3percent {margin:3%;}
.margin4percent {margin:4%;}
.margin5percent {margin:5%;}
.margin6percent {margin:6%;}
.margin7percent {margin:7%;}
.margin8percent {margin:8%;}
.margin9percent {margin:9%;}
.margin10percent {margin:10%;}
.width6 {width:6px;}
.width10px {width:10px;}
.width12 {width:12px;}
.width18 {width:18px;}
.width24 {width:24px;}
.width30 {width:30px;}
.width36 {width:36px;}
.width42 {width:42px;}
.width48 {width:48px;}
.width54 {width:54px;}
.width60 {width:60px;}
.width72 {width:72px;}
.width90 {width:90px;}
.width102 {width:102px;}
.width114 {width:114px;}
.width126 {width:126px;}
.width135 {width:135px;}
.width150 {width:150px;}
.width200 {width:200px;}
.width270 {width:270px;}
.width280 {width:280px;}
.width305 {width:305px;}
.width325 {width:325px;}
.width345 {width:345px;}
.width350 {width:350px;}
.width379 {width: 379px;}
.width405 {width: 405px;}
.max-width940{max-width:940px;}
.max-width16{max-width:16px;}
.height6 {height:6px;}
.height8 {height:8px;}
.height12 {height:12px;}
.height16 {height:16px;}
.height18 {height:18px;}
.height20 {height:20px;}
.height24 {height:24px;}
.height30 {height:30px;}
.height31 {height:31px;}
.height36 {height:36px;}
.height42 {height:42px;}
.height48 {height:48px;}
.height54 {height:54px;}
.height60 {height:60px;}
.height72 {height:72px;}
.height78 {height:78px;}
.height102 {height:102px;}
.height132 {height:132px;}
.height140 {height:140px;}
.height150 {height:150px;}
.height175 {height:175px;}
.height212 {height:212px;}
.height240 {height:240px;}
.height270 {height:270px;}
.height270 {height:270px;}
.height320 {height: 320px;}
.height350 {height: 350px;}
.height193 {height:193px;}
.height301 {height: 301px;}
.max-height16 {max-height:16px;}
.max-height140 {max-height:140px;}
.right20{right: 20px;}
.left20{left: 20px;}
.bottom20{bottom: 20px;}
.top20{top: 20px;}
.letterSpacing_1{
letter-spacing: 0.5px;
}
.top150{
top:150px;
}
/* Module for Vertical Centering */
/* center goes on a container.
center_element goes on the elements you want to center.
Add the m-verticalOnly class to the center container to remove horizontal centering and only center the element vertically.
https://css-tricks.com/centering-in-the-unknown/
*/
.center { white-space:nowrap; text-align:center;}
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center > * {
white-space:normal; /*reset the white-space to behave normally for all elements inside the centerV container */
text-align:left;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
/***************************************************
Media Module
A module where an image floats left of some content to its right.
https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
***************************************************/
.media {
overflow:auto;
overflow-y: hidden;
}
.media_graphic {
float:left;
margin-right:10px;
}
.media_graphic.m-flipped {
float:right;
margin-right:0;
margin-left:10px;
}
.media_content {
overflow:auto; /*https://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/*/
}
.mediaSplash_container{
height: 50vh;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
.media_splash{
border-radius: 50%;
width: 200px;
height: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/***************************************************
Table
When you need the convienence of table without using
an acutal table.
***************************************************/
.table {display:table;}
.table_tr {display:table-row;}
.table_td {display:table-cell;}
.vertical_align_middle {vertical-align:middle;}
.backgroundPosition{ background-position: center;}
.backgroundPosition.right.bottom{background-position: right bottom; }
.noRepeat{ background-repeat: no-repeat; }
.block{display: block}
.flex{
display: flex;
}
.rowFlex{flex-direction: row;}
.colFlex{flex-direction: column;}
/*
* Vertical Height for screen size,
* this propery sets screen size based height
**/
.vh25{ height: 25vh;}
.vh50{ height: 50vh;}
.vh60{ height: 60vh;}
.vh70{ height: 70vh;}
.vh80{ height: 80vh;}
.vh90 { height: 90vh;}
.vh100 { height: 100vh;}
.img_boxShadow{
-webkit-box-shadow: -6px -5px 23px -8px rgba(0,0,0,0.35);
-moz-box-shadow: -6px -5px 23px -8px rgba(0,0,0,0.35);
box-shadow: -6px -5px 23px -8px rgba(0,0,0,0.35);
}
@media only screen and (min-width: 600px) and (max-width: 984px) {
t-pad0{
padding: 0;
}
}
#savedCard {
color: red
}/* borders */
.border_CC {
border: 1px solid #CCC;
}
.border_light_gray {
border: 1px solid #D9DADA;
}
.border_red {
border: 1px solid $verizon_red;
}
.border_black {
border: 1px solid #000;
}
.border_thick {
border: 3px solid #000;
}
.border_bottom_thick {
border-bottom: 4px solid #000;
}
.border_gray, .border_graySix {
border: 1px solid #747676;
}
.border_gray_one {
border: 1px solid #F6F6F6;
}
.border_grayThree {
border: 1px solid #D8DADA;
}
.border_e6{
border: 1px solid #e6e6e6;
}
.border_white {
border: 1px solid #fff;
}
.largeBorder_graySix {
border: 2px solid #747676;
}
.largeBorder_grayThree {
border: 2px solid #D8DADA;
}
.largeBorder_red{
border: 2px solid $verizon_red;
}
.largeBorder_black {
border: 2px solid #000;
}
.largeBorder_white{
border: 2px solid #fff;
}
.borderSize_0{
border-width: 0px;
}
.borderSize_2{
border-width: 2px;
}
.borderSize_4{
border-width: 4px;
}
.noTopBorder {
border-top: none;
}
.noBottomBorder {
border-bottom: none;
}
.noLeftBorder {
border-left: none;
}
.noRightBorder {
border-right: none;
}
.onlyTopBorder {
border-bottom: none;
border-left: none;
border-right: none;
}
.onlyBottomBorder {
border-top: none;
border-left: none;
border-right: none;
}
.onlyLeftBorder {
border-top: none;
border-bottom: none;
border-right: none;
}
.onlyRightBorder {
border-top: none;
border-bottom: none;
border-left: none;
}
.noSideBorder {
border-left: none;
border-right: none;
}
.onlySideBorder {
border-top: none;
border-bottom: none;
}
.noOutline {
outline: 0;
}
/**************************************************
Global Buttons
**************************************************/
.button {
display: inline-block;
padding: 12px;
text-align: center;
color: #fff;
background-color:#000;
cursor:pointer;
font-family: NeueHaasGroteskDisplay, Arial, Helvetica, sans-serif;
font-size:12px;
font-size:1.28rem;
width: 70%;
/* //min-width: 84px; */
border-radius: 24px;
border: 1px solid #000;
}
/**************************************************
Primary Button (Red)
**************************************************/
.button.primary {color:#fff; background-color:#000;}
/**************************************************
Secondary Button (Gray)
**************************************************/
.button.secondary {color:#000; background-color:white; border: 1px solid #000;font-weight: bold; }
/**************************************************
Teritiary Button
(To support older buttons, DO NOT USE going forward,
USE SECONDARY BUTTON)
**************************************************/
.button.tertiary {
padding: 6px 12px;
min-width: 85px;
}
/**************************************************
primary Button (white)
**************************************************/
.button.white {color:#000; background-color:white; border: 1px solid #000;}
/**************************************************
secondary Button (white)
**************************************************/
.button.black {color:#fff; background-color:#000; border: 1px solid #fff;}
/**************************************************
Modification Button
**************************************************/
.button.fullWidth {
padding: 12px 18px;
width: 100% !important;
}
.button.large {
padding: 12px 18px;
min-width: 114px;
display: inline-block;
}
.button.small {
padding: 4px 8px;
min-width: 50px;
font-size: 11px;
font-size: 1.1rem;
font-family: NeueHaasGroteskDisplayBold,arial,sans-serif;
}
.button:focus{
outline: none;
box-shadow: 0 0 1pt 1pt orange;
}
.button_menu{ /**** ????? ****/
color:#fff;
text-decoration: underline;
border:1px solid #fff;
background: transparent;
}
/**************************************************
Disabled button
**************************************************/
.button.disabled,
.button[disable="true"],
.button[disabled]
{background-color: #ccc; color: #444; border: 1px solid #ccc }
.button.disabled.m-bglight,
.button[disable="true"].m-bglight,
.button[disabled].m-bglight
{background-color: #f5f5f5; color: #a3a3a3; border: 1px solid #e5e6e4 }
/*Disabled styles for secondary buttons*/
.button.secondary[disabled]
{background-color: transparent;color:#ccc}
/** PLEASE READ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Organize Modules Aphabetically by Block
Module Name = Block Name
Keep All Block-related Styles together
.block
.block_element
.block_element.m-modifier
ADHERE TO ALL SMACSS RULES
**/
.deviceTile_img {
max-width: 100%;
max-height: 100%;
}
.deviceTile_imgContainer {
height: 250px;
}
/* Featured Badge */
.featuredBadge {
width: 24px;
height: 0;
border-bottom: 24px solid #cd040b;
border-left: 24px solid transparent;
color: #cd040b;
position: absolute;
right: 0;
bottom: 0;
-webkit-transition: bottom 1s, border 1s; /* For Safari 3.1 to 6.0 */
transition: bottom 1s, border 1s;
z-index: 1;
}
.featuredBadge:before {
font-size: 10px;
font-size: 1rem;
margin-left: -12px;
margin-top: 10px;
position: absolute;
color: #fff;
}
.featuredBadgeAnimation {
top: 0px;
transition: top 1s, border 1s;
}
.featuredBadgeContainer {
min-height: 24px;
position: relative;
margin: 13px -10px 0 -10px;
}
.featuredBadgeContainer.m-pdp {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
.featuredBadgeContainer.m-configurator{
margin:0 !important;
}
.featuredBadgeText {
margin: 0 24px;
text-align: center;
padding: 6px 0;
}
.m-shown .featuredBadgeAnimation {
top: 0px
}
.m-shown .featuredBadge {
bottom: -15px;
}
/***************************************************
Hero Price Component Styles
***************************************************** */
.pricingStyle {
font-size: 1.2rem;
width: 18px;
height: 18px;
background-color: #abe0f9;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 3px;
font-weight: normal;
left: -12px;
}
/**
* Price Option on Gridwall
*/
.pricingDropdown{
background: #f5f5f5;
border-radius: 30px;
padding: 3px 10px;
margin-bottom: 5px;
}
/***************************************************
Featured small
***************************************************** */
.featuredBadgeSmall {
width: 12px;
height: 0;
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
color: #000;
position: absolute;
right: 0;
bottom: 0;
-webkit-transition: bottom 1s, border 1s;
transition: bottom 1s, border 1s;
z-index: 1;
}
.configurator-wrapper{
height:92vh;
}
.m-back:before {
float: left;
padding-left: 12px;
margin: 0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.secondaryCTA:before {
content: "\E609";
color: #000;
margin-left: 15px;
position: relative;
top: 2px;
font-family: 'vzwIcons',arial,sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*** FONTS ***/
/* @font-face{ font-family:'vzwIcons';
src:url('/assets/ak-cached/2h/fonts/vzw-iconfont.eot');
src:url('/assets/ak-cached/2h/fonts/vzw-iconfont.eot?#iefix') format('embedded-opentype'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.woff') format('woff'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.ttf') format('truetype'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.svg#vzwIcons') format('svg');
font-weight:normal;
font-style:normal
} */
/*@font-face {
font-family:"VerizonAngelinaRegular";
src:url('/assets/ak-cached/2h/fonts/angelina.woff?#iefix') format('woff'),
url('/assets/ak-cached/2h/fonts/angelina.ttf') format('truetype'),
url('/assets/ak-cached/2h/fonts/angelina.svg') format('svg'),
url('/assets/ak-cached/2h/fonts/angelina.eot') format('embedded-opentype');
}*/
/* @font-face {
font-family: "vzwIcons";
src:url('/assets/ak-cached/2h/fonts/vzw-iconfont.woff?#iefix') format('woff'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.ttf') format('truetype'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.svg') format('svg'),
url('/assets/ak-cached/2h/fonts/vzw-iconfont.eot') format('embedded-opentype');
}
/* Neue Haas Grotesk */
/* @font-face {
font-family: "NeueHaasGroteskDisplay";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplay.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplay.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplay.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplay.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskDisplayBold";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayBold.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayBold.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayBold.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayBold.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskDisplayMedium";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayMedium.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayMedium.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayMedium.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskDisplayMedium.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskText";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskText.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskText.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskText.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskText.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskTextBold";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextBold.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextBold.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextBold.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextBold.ttf") format("truetype");
}
@font-face {
font-family: "NeueHaasGroteskTextMedium";
src:url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextMedium.eot?#iefix") format("embedded-opentype"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextMedium.woff2") format("woff2"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextMedium.woff") format("woff"),
url("/assets/ak-cached/2h/fonts/NeueHaasGroteskTextMedium.ttf") format("truetype");
} */ */
/*font Sizes*/
.fontSize_9 {
font-size: 60px;
font-size: 6rem;
}
.fontSize_8 {
font-size: 48px;
font-size: 4.8rem;
}
.fontSize_7 {
font-size:36px;
font-size:3.6rem;
}
.fontSize_6 {
font-size:24px;
font-size:2.4rem;
}
.fontSize_5{
font-size:18px;
font-size:1.8rem;
}
.fontSize_4 {
font-size:16px;
font-size:1.6rem;
}
.fontSize_3 {
font-size:14px;
font-size:1.4rem;
}
.fontSize_1_3 {
font-size:13px;
font-size:1.3rem;
}
.fontSize_2 {
font-size:12px;
font-size:1.2rem;
}
.fontSize_1 {
font-size:10px;
font-size:1.0rem;
}
.legalFinePrint{
color:#4b4b4b;
font-size:10px;
font-size:1.0rem;
}
.fontText{font-family: "NeueHaasGroteskText", Verdana, Arial, sans-serif;}
.fontTextMedium{font-family: "NeueHaasGroteskTextMedium", Verdana, Arial, sans-serif;}
.fontTextBold{font-family: "NeueHaasGroteskTextBold", Verdana, Arial, sans-serif;}
.fontDisplay{font-family: "NeueHaasGroteskDisplay", Verdana, Arial, sans-serif;}
.fontDisplayMedium{font-family: "NeueHaasGroteskDisplayMedium", Verdana, Arial, sans-serif;}
.fontDisplayBold{font-family: "NeueHaasGroteskDisplayBold", Verdana, Arial, sans-serif;}
.red{color:#cb040b;}
.blue{color:#0645AD;}
.white{color:#FFF;}
/******************************************************************************/
/* https://www.responsivegridsystem.com/calculator/ */
/* 12 column grid, 5 column grid, no margin */
/* Customization: - Top and bottom column margins are zeroed out. */
/* - Max width container added to constrain to 984px */
/******************************************************************************/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 2.1%;
}
.col:first-of-type, .col.first-col { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.col.no-gutter {margin:0;}
/**************************************************
5 Column
**************************************************/
.span_5_of_5 {
width: 100%;
}
.span_4_of_5 {
width: 79.58%;
}
.span_3_of_5 {
width: 59.16%;
}
.span_2_of_5 {
width: 38.74%;
}
.span_1_of_5 {
width: 18.32%;
}
/**************************************************
12 Column
**************************************************/
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.49%;
}
.span_10_of_12 {
width: 82.98%;
}
.span_9_of_12 {
width: 74.47%;
}
.span_8_of_12 {
width: 65.96%;
}
.span_7_of_12 {
width: 57.45%;
}
.span_6_of_12 {
width: 48.95%;
}
.span_5_of_12 {
width: 40.44%;
}
.span_4_of_12 {
width: 31.93%;
}
.span_3_of_12 {
width: 23.42%;
}
.span_2_of_12 {
width: 14.91%;
}
.span_1_of_12 {
width: 6.408%;
}
.no-gutter.span_12_of_12 {
width: 100%;
}
.no-gutter.span_11_of_12 {
width: 91.66%;
}
.no-gutter.span_10_of_12 {
width: 83.33%;
}
.no-gutter.span_9_of_12 {
width: 75%;
}
.no-gutter.span_8_of_12 {
width: 66.66%;
}
.no-gutter.span_7_of_12 {
width: 58.33%;
}
.no-gutter.span_6_of_12 {
width: 50%;
}
.no-gutter.span_5_of_12 {
width: 41.66%;
}
.no-gutter.span_4_of_12 {
width: 33.33%;
}
.no-gutter.span_3_of_12 {
width: 25%;
}
.no-gutter.span_2_of_12 {
width: 16.66%;
}
.no-gutter.span_1_of_12 {
width: 8.333%;
}
/* backgrounds */
.background_FF{background:#FFF;}
.background_CC{background:#CCC;}
.background_00 {background:#000;}
.background_lightblue{background:#abe0f9;}
.background_primary {background-color:#e4e5e3;}
.background_supporting {background-color:#f6f6f6;}
.background_promotion {background-color:#c9fdc7;}
.background_tertiary {background-color:#ffffff;}
.background_lightGray {background-color:#959595;}
.background_promo {background-color:#c9fdc7;}
.background_lightGreen{background-color:#CDEBDE;}
/* borders */
.border_CC {border:1px solid #CCC;}
.border_33 {border:1px solid #333;}
.border_00 {border:1px solid #000;}
.border_95 {border:1px solid #959595;}
.border_EB {border:1px solid #EBEBEB;}
.border_FA {border:1px solid #FAFAFA;}
.border_active{border: 3px solid #000;}
.border_D8 {border:1px solid #D8DADA;}
.noTopBorder {border-top:none;}
.noBottomBorder {border-bottom:none;}
.noLeftBorder {border-left:none;}
.noRightBorder {border-right:none;}
.onlyTopBorder {border-bottom:none; border-left:none; border-right:none;}
.onlyBottomBorder {border-top:none; border-left:none; border-right:none;}
.onlyLeftBorder {border-top:none; border-bottom:none; border-right:none;}
.onlyRightBorder {border-top:none; border-bottom:none; border-left:none;}
.noSideBorder {border-left:none;border-right:none;}
.onlySideBorder {border-top:none;border-bottom:none;}
/* Clear Floated Elements */
/* https://sonspring.com/journal/clearing-floats */
.clear, .clear6, .clear12, .clear18, .clear24, .clear30, .clear36, .clear42, .clear54, .clear60, .clear72, .clear102 {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clear6, .clear12, .clear18, .clear24, .clear30, .clear36, .clear42, .clear54, .clear72, .clear102 {
width:auto;
}
.clear6 {height:6px;}
.clear12 {height:12px;}
.clear18 {height:18px;}
.clear24 {height:24px;}
.clear30 {height:30px;}
.clear36 {height:36px;}
.clear42 {height:42px;}
.clear54 {height:54px;}
.clear60 {height:60px;}
.clear72 {height:72px;}
.clear102 {height:102px;}
/* https://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {clear: both;}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.lt-ie8 .clearfix {zoom: 1;}
/*For simplifying the layout of an ordered or unordered list element*/
.plainList {
margin:0;
padding:0;
list-style:none;
}
.noIndentList {padding-left:1em}
.inlineList, .inlineList > li {display:inline;}
.normalList {list-style:inherit;}
.pad6 {padding:6px;}
.pad10 {padding:10px;}
.pad12 {padding:12px;}
.pad18 {padding:18px !important;}
.pad20 {padding:20px;}
.pad24 {padding:24px;}
.pad30 {padding:30px;}
.pad36 {padding:36px;}
.pad42 {padding:42px;}
.pad48 {padding:48px;}
.pad54 {padding:54px;}
.pad60 {padding:60px;}
.pad72 {padding:72px;}
.pad102 {padding:102px;}
.noPad {padding:0;}
.noSidePad {padding-left:0; padding-right:0;}
.noBottomPad {padding-bottom:0;}
.onlySidePad, .sidePadOnly {padding-top:0; padding-bottom:0;}
.onlyTopPad{padding-bottom:0; padding-left:0; padding-right:0;}
.onlyBottomPad{ padding-top:0; padding-left:0; padding-right:0;}
.onlyLeftPad{ padding-top:0; padding-bottom:0; padding-right:0;}
.onlyRightPad{ padding-top:0; padding-bottom:0; padding-left:0;}
.noTopPad{padding-top:0;}
.noBottomPad{padding-bottom:0;}
.noLeftPad{padding-left:0;}
.noRightPad{padding-right:0;}
.margin0 {margin:0;}
.margin6 {margin:6px;}
.margin10 {margin:10px;}
.margin12 {margin:12px;}
.margin18 {margin:18px;}
.margin20 {margin:20px;}
.margin24 {margin:24px;}
.margin30 {margin:30px;}
.margin36 {margin:36px;}
.margin42 {margin:42px;}
.margin48 {margin:48px;}
.margin54 {margin:54px;}
.margin60 {margin:60px;}
.margin72 {margin:72px;}
.margin102 {margin:102px;}
.margin-6 {margin:-6px;}
.margin-10 {margin:-10px;}
.margin-24{ margin:-24px;}
.margin-36{ margin:-36px;}
.margin-42{ margin:-42px;}
.margin-48{ margin:-48px;}
.margin-78{ margin:-78px;}
.margin-90{ margin:-90px;}
.noMargin {margin:0;}
.noSideMargin { margin-left:0; margin-right:0;}
.noTopMargin {margin-top:0;}
.noBottomMargin {margin-bottom:0;}
.noRightMargin {margin-right:0;}
.noLeftMargin {margin-left:0;}
.onlySideMargin, .sideMarginOnly {margin-top:0; margin-bottom:0;}
.onlyTopMargin{ margin-bottom:0; margin-left:0; margin-right:0;}
.onlyBottomMargin{ margin-top:0; margin-left:0; margin-right:0;}
.onlyLeftMargin{ margin-top:0; margin-bottom:0; margin-right:0;}
.onlyRightMargin{ margin-top:0; margin-bottom:0; margin-left:0;}
.width6 {width:6px;}
.width12 {width:12px;}
.width18 {width:18px;}
.width24 {width:24px;}
.width30 {width:30px;}
.width36 {width:36px;}
.width42 {width:42px;}
.width54 {width:54px;}
.width60 {width:60px;}
.width72 {width:72px;}
.width102 {width:102px;}
.height6 {height:6px;}
.height12 {height:12px;}
.height18 {height:18px;}
.height24 {height:24px;}
.height30 {height:30px;}
.height36 {height:36px;}
.height42 {height:42px;}
.height54 {height:54px;}
.height60 {height:60px;}
.height72 {height:72px;}
.height102 {height:102px;}
/* Module for Vertical Centering */
/* center goes on a container.
center_element goes on the elements you want to center.
Add the m-verticalOnly class to the center container to remove horizontal centering and only center the element vertically.
https://css-tricks.com/centering-in-the-unknown/
*/
.center { white-space:nowrap; text-align:center;}
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center > * {
white-space:normal; /*reset the white-space to behave normally for all elements inside the centerV container */
text-align:left;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
/***************************************************
Media Module
A module where an image floats left of some content to its right.
https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
***************************************************/
.media {
overflow:auto;
}
.media_graphic {
float:left;
margin-right:10px;
}
.media_graphic.m-flipped {
float:right;
margin-right:0;
margin-left:10px;
}
.media_content {
overflow:auto; /*https://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/*/
}
.mediaSplash_container{
height: 60vh;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
.media_splash{
border-radius: 50%;
background: #abe0f9;
width: 200px;
height: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/***************************************************
Table
When you need the convienence of table without using
an acutal table.
***************************************************/
.table {display:table;}
.table_tr {display:table-row;}
.table_td {display:table-cell;}
.vertical_align_middle {vertical-align:middle;}
.backgroundPosition{ background-position: center;}
.backgroundPosition.right.bottom{background-position: right bottom; }
.noRepeat{ background-repeat: no-repeat; }
.block{display: block}
.flex{
display: flex;
}
.flex-1{
flex: 1
}
.icon-apple:before {
content: "\E097";
}
.planBorder {
border: 1px solid #d8dada;
}
.planBorder.selected {
border: 1px solid;
border-top: 4px solid #cd040b;
}
.strikeThrough {
text-decoration: line-through;
color:#747676;
}
.minHeight {
min-height: 17px;
}
.plansAccordionFocus:focus {
/* outline: #333 dotted 1px; */
outline: #000 dashed 1px;
outline-offset: 4px;
}
.screen-reader-only {
position: absolute;
height: 1px;
width: 1px;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
overflow: hidden !important;
}
/* .positionRelative svg {
display: none !important;
} */
.positionRelative{position: relative !important;}
.positionAbsolute{position: absolute !important;}
.plan-card-wrap .h1, .plan-card-wrap h1 {
font-family: NeueHaasGroteskDisplayBold,Arial,Helvetica,sans-serif;
font-weight: 700;
}
.plan-card-wrap p {
line-height: 1.3;
}
.minHeight5 {
min-height: 5rem;
}
.monthlyDisable{
pointer-events: none;
background-color: #e3e1da;
opacity: 50%;
}
#app .ildreview-page-wrap [class^=col-] {
padding: 0 8px;
}
@media (min-width: 768px) and (max-width: 1023px){
.minHeight5 {
min-height: 7.5rem
}
}
.m-back:before {
float: left;
padding-left: 6px;
margin: 0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.secondaryCTA:before {
content: "\E609";
color: #000000;
margin-left: 15px;
position: relative;
top: 2px;
font-family: 'vzwIcons',arial,sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* .arrowCTA:after {
top: 1px;
font-size: 10px;
font-weight: 600;
content: "\E609";
font-family: vzwIcons;
color: #000;
position: relative;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
.readMoreArrowCTA:after {
content: "\E609";
font-family: 'vzwIcons',arial,sans-serif;
color: #000;
position: relative;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 12px;
top: 5px;
font-size: 30px; }
*, :after, :before {
box-sizing: border-box;
background-repeat: no-repeat;
}
.right_arrow {
display: inline-block;
width: 9px;
height: 9px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(-45deg);
margin-left: 6px;
}
.left_arrow {
display: inline-block;
width: 9px;
height: 9px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(135deg);
margin-right: 6px;
}
/**
* ----------------------------------------------
* Demo styles
* ----------------------------------------------
**/
.u-position-absolute {
position: absolute;
}
.u-position-relative {
position: relative;
}
.accordion__item--has-icon {
position: relative;
}
.accordion__title {
cursor: pointer;
width: 100%;
text-align: left;
border: none;
}
.accordion__title:focus {
outline: none;
}
.accordion__body {
display: block;
animation: fadein 0.35s ease-in;
}
.accordion__body--hidden {
display: none;
opacity: 0;
animation: fadein 0.35s ease-in;
}
.accordion__title>*:last-child,
.accordion__body>*:last-child {
margin-bottom: 0;
}
.accordion__arrow {
display: inline-block;
width: 24px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
margin-top: -6px;
}
.accordion__arrow::after,
.accordion__arrow::before {
display: block;
position: absolute;
top: 50%;
width: 10px;
height: 2px;
background-color: currentColor;
content: '';
}
.accordion__arrow::before {
left: 4px;
transform: rotate(45deg);
}
[aria-expanded='true'] .accordion__arrow::before {
transform: rotate(-45deg);
}
.accordion__arrow::after {
right: 4px;
transform: rotate(-45deg);
}
[aria-expanded='true'] .accordion__arrow::after {
transform: rotate(45deg);
}
.accordion__arrow::before,
.accordion__arrow::after {
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
/* -------------------------------------------------- */
/* ---------------- Animation part ------------------ */
/* -------------------------------------------------- */
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes move-down {
0% {
transform: translateY(0);
}
10% {
transform: translateY(0);
}
20% {
transform: translateY(5px);
}
30% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes move-up {
0% {
transform: translateY(0);
}
10% {
transform: translateY(0);
}
20% {
transform: translateY(-5px);
}
30% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.accordion__title--animated:hover .accordion__arrow {
animation-name: move-down;
animation-duration: 1.5s;
}
.accordion__title--animated[aria-expanded='true']:hover .accordion__arrow {
animation-name: move-up;
animation-duration: 1.5s;
}
[aria-selected="false"].accordion__title .accordion_icon:before {
content: '+';
}
[aria-selected="true"].accordion__title .accordion_icon:before {
content: '-';
}
.borderAfterHeading {
border: none;
margin: 12px 0px 12px 0px;
}
.desktopView {
display: block;
}
.mobileView {
display: none;
}
a:hover {
color: #000000;
cursor: pointer;
}
.textAlignCenter {text-align:center;}
@media (max-width: 576px) {
.modal {
width: 95% !important;
height: 95% !important;
}
.modal .modal-btn {
height: 80px;
margin: 20px;
}
.footerFixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
border-top: 1px solid #000;
padding: 18px 0;
background: #fff;
}
.footerFixed.m-float {
position: relative;
}
#vzw-gf {
overflow: hidden;
display: none !important;
}
.alignButtonCenter {
text-align: center;
}
.borderAfterHeading {
border-top: 4px solid black;
margin: 24px 0px 24px 0px;
}
.mobileView {
display: block;
}
.desktopView {
display: none;
}
}
/* PLEASE READ!!!
* Simple Modules
* Only a single class
* re-useable styles.
* If the module requires more than 1 class, put in modules.css.
* Organize by category to the best of your ability.
* Name singles with that describe a single property in the same order as that property is read:
* i.e. .textAlignRight { text-align:right; }
* Shorthand names can be used if the property value is unique to that property
* i.e. .bold {font-weight:bold;}
* DO NOT create duplicates with the same or a different name! Check the file FIRST!
*/
/* classes to change display type. */
.displayInline{display:inline;}
.displayBlock{display:block;}
.displayInlineBlock{display:inline-block;}
.displayNone{display:none}
/* Alignment and Centering */
.floatLeft {float:left;}
.floatRight {float:right;}
.floatNone{float:right;}
.textAlignLeft {text-align:left;}
.textAlignRight {text-align:right;}
.textAlignJustify {text-align:justify;}
.textAlignCenter {text-align:center;}
.centerBlock {
display:block;
margin-left:auto;
margin-right:auto;
}
.verticalCenter {
display: inline-block;
vertical-align: middle;
}
.verticalAlignMiddle {vertical-align: middle;}
.verticalBottom {vertical-align:bottom;}
.debug {border: 1px solid red;}
/****************************************/
/* Text color Palette - No new colors
should be added, use the closest color
below! */
/****************************************/
.color_000 {color:#000;} /* Black */
.color_959595 {color:#959595;} /* Light Gray */
.color_747676 {color:#747676;}
.color_4B4B4B {color:#4b4b4b;} /* Gray */
.color_333 {color:#333333;}
.color_666 {color:#666666;}
.color_FFF {color: #FFF}
.color_red {color:#cd040b;} /* Red - Verizon Red*/
.color_blue {color: #06C}
.color-green {color:#00AC3E;}
.color-lightGray {color: #B7B7B7}
.color-111{color: #ED7000;}
/****************************************
Font Styles
****************************************/
.normal {font-weight:normal;}
.bold, .fontWeightBold {font-family:NeueHaasGroteskDisplayBold, Arial, Helvetica, sans-serif;}
.boldText {font-family:NeueHaasGroteskTextBold, Arial, Helvetica, sans-serif;}
.bolder, .fontWeightBolder {font-weight:bolder;}
.fontStyleNormal {font-style:normal;}
.italic {font-style:italic;}
.hideText {
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
}
.textDecLineThrough {text-decoration:line-through;}
.textDecUnderline{text-decoration:underline;}
.textDecNone{text-decoration:none;}
.cursorPointer {cursor:pointer;}
.cursorDefault {cursor: default;}
.noPointer {pointer-events: none;}
.noSelect{
cursor:default;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
/****************************************
Line Heights
****************************************/
.lineHeight8 {line-height:0.8rem;}
.lineHeight10 {line-height:1.0rem;}
.lineHeight12 {line-height:1.2rem;}
.lineHeight18 {line-height:1.8rem;}
.lineHeight20 {line-height:20px;} /* These will be removed soon */
.lineHeight24 {line-height:2.4rem;}
.lineHeight30 {line-height:3.0rem;}
.lineHeight36 {line-height:3.6rem;}
.lineHeight42 {line-height:4.2rem;}
.lineHeight52 {line-height:5.2rem;}
.lineHeightIntial {line-height:initial;line-height:normal\0;}
/****************************************
Font Families
****************************************/
.iconFont {
font-family:vzwIcons, Arial, Helvetica, sans-serif;
}
.listStyleDisc li{
list-style:disc;
}
.listStyleDecimal li{
list-style:decimal;
}
/* classes to change font capitalization. */
.textTransCapitalize {text-transform:capitalize;}
.textTransUppercase {text-transform:uppercase; }
.textTransLowercase {text-transform:lowercase;}
/*Toggle position as required*/
.positionRelative{position: relative;}
.positionAbsolute{position: absolute;}
.positionFixed{position: fixed;}
/*Percentage width*/
.width1 {width: 01%;}
.width5 {width: 05%;}
.width10 {width: 10%;}
.width13 {width: 13%;}
.width14 {width: 14%;}
.width15 {width: 15%;}
.width18 {width: 18%;}
.width20 {width: 20%;}
.width25 {width: 25%;}
.width30 {width: 30%;}
.width35 {width: 35%;}
.width33 {width: 33%;}
.width40 {width: 40%;}
.width45 {width: 45%;}
.width50 {width: 50%;}
.width55 {width: 55%;}
.width60 {width: 60%;}
.width65 {width: 65%;}
.width70 {width: 70%;}
.width75 {width: 75%;}
.width80 {width: 80%;}
.width85 {width: 85%;}
.width90 {width: 90%;}
.width95 {width: 95%;}
.width100{width:100%;}
.width110{width:110%;}
.widthAuto{width:auto;}
.width34{width:34%;}
/* Clearing */ /* These should be in layout.css and camel cased */
.clearBoth{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}
.overflowAuto{overflow: auto;}
.overflowScroll{overflow: scroll;}
.overflowXAuto{overflow-x: auto;}
.overflowYAuto{overflow-y: auto;}
.overflowHidden{overflow: hidden;}
.noOverFlow{overflow: none;}
.whiteSpaceNoWrap{white-space: nowrap;}
.tableCell{display:table-cell;padding: 20px;}
.color_inherit{color: inherit;}
.fontInherit{font-size:inherit;}
.effectiveDate .radioBtn + label:before {
height: 20px;
width: 20px;
}
.effectiveDate-text {
font-size: 10px;
}
.countryCta {
display: flex;
justify-content: space-between;
max-width: 860px;
}
.addCountryLink {
width: 38%;
}
.lineThrough {
max-width: 860px;
}
.grandFatherSubhead {
max-width: 415px;
}
.modal.countryListModal h2 {
width: 545px;
}
.mSelectWrapper {
max-width: 267px;
}
.subHeadContainer {
max-width: 650px;
}
.footerText {
width: 80%;
max-width: 810px;
color: #000;
}
.totalPriceText {
width: 100%;
display: inline-block;
text-align: right;
}
.deviceSelection .fontTitleBold {
max-width: 475px;
}
.countryModelOverFlowY {
overflow-x: hidden !important;
}
.contentPad {
padding-left: 135px;
}
@media only screen and (max-width: 768px) {
.contentPadding30{
padding: 30px 30px 30px 30px !important;
}
/* For mobile phones: */
.contentPad {
padding-left: 90px;
}
.gcCountriesText {
word-wrap: break-word;
}
.deviceSelection .borderAfterHeading {
margin: 38px 0px 38px 0px;
}
.mobHead {
font-size: 25px;
}
.mobileCta {
text-align: center;
}
.modal.gcCountryListModal {
padding: 10px;
}
.modal.gcCountryListModal h2 {
width: 250px;
}
.deviceSelection .fontTitle {
max-width: 270px;
}
.close_iconStyle {
margin-left: 20px;
}
.countryModelOverFlowY {
max-height: 66% !important;
overflow-x: hidden;
}
.addCountryLink {
width: 60%;
}
.lineThrough {
width: 100%;
margin-top: 52px;
}
.footerText {
margin-bottom: 10px;
width: 100%;
}
}
.normalText.margin12.onlyLeftMargin.floatRight p {
line-height: 1 !important;
font-size: 1.4rem;
font-size: 14px;
}
/** PLEASE READ!!!!
* This is for icons only - styles not related to icons do not belong here
* Please check the icons below to see if what you need already exists
before adding a new one!
* Organize styles alphabetically
* Keep font and sprite styles separate in their own sections
* Format both font and sprite icons like this:
font-icon_elementName
sprite-icon_elementName
**/
[class*="font-icon"], [class*="sprite-icon"] {
display:inline-block;
color: inherit;
}
/**************************************************
Font Icons
**************************************************/
[class*="font-icon"] {
font-family: 'vzwIcons',arial,sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a[class*="font-icon"]:hover {
text-decoration:none;
}
/************************************************
Reference icons code from omni_static
and add icons that you need
*************************************************/
.font-icon_arrowDown:before,
.font-icon_arrowUp:before {
content: "\E602";
}
.font-icon_arrowUp{
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.font-icon_star:before {
content: "\E075";
}
.font-icon_cart:before{
content: "\E93A";
color: #cd040b;
font-size: 1.8rem;
margin: 0 10px;
}
.font-icon_cart-v2:before{
content: "\E065"; /* Cart icon from current mobile vzw as of Feb 2017 */
color: #cd040b;
font-size: 20px;
margin: 0 10px;
}
.font-icon_cart span{
background-color: #cd040b;
border: 1px solid #cd040b;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
color: #fff;
height: 14px;
line-height: 12px;
min-width: 14px;
padding: 0 3px;
position: absolute;
right: 3px;
text-align: center;
top: -11px;
font-size: 9px;
}
.font-icon_menu:before{
content: "\E9BD";
color: #cd040b;
font-size: 2rem;
}
.f-icon_sad{
width:48px;
height: 48px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPjA4RjkyRDI4LTgzNUYtNDNDMC1CQkVGLUQxQkJGODAwRkQ3MjwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgNTExLjQ4OCA1MTIgNTExLjQ4OCA1MTIgMCAwIDAiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSI1MTJweF9VaV9FcnJvciI+ICAgICAgICAgICAgPGc+ICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXAtMiI+PC9nPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUxMiwyNTYgQzUxMiwzOTcuMzg4OCAzOTcuMzg4OCw1MTIgMjU2LDUxMiBDMTE0LjYxOTczMyw1MTIgMCwzOTcuMzg4OCAwLDI1NiBDMCwxMTQuNjE5NzMzIDExNC42MTk3MzMsMCAyNTYsMCBDMzk3LjM4ODgsMCA1MTIsMTE0LjYxOTczMyA1MTIsMjU2IiBpZD0iRmlsbC0xIiBmaWxsPSIjRkJEMzYyIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDE1LjMzNDQsMzYwLjUyNDggQzQxMS4xNjE2LDM1Mi4wODUzMzMgNDAwLjkxMzA2NywzNDguNjI5MzMzIDM5Mi40NzM2LDM1Mi43OTM2IEwzOTEuMjQ0OCwzNTMuMzk5NDY3IEwzOTAuMzA2MTMzLDM1MS43NTI1MzMgQzM2My4xOTU3MzMsMzA0LjM0MTMzMyAzMTEuNzM5NzMzLDI3NC44OTI4IDI1Ni4wMzQxMzMsMjc0Ljg5MjggQzIwMC4zMzcwNjcsMjc0Ljg5MjggMTQ4Ljg4MTA2NywzMDQuMzQxMzMzIDEyMS43NjIxMzMsMzUxLjc1MjUzMyBMMTIwLjgwNjQsMzUzLjQyNTA2NyBMMTE5LjUzNDkzMywzNTIuNzkzNiBDMTExLjA4NjkzMywzNDguNjAzNzMzIDEwMC44NTU0NjcsMzUyLjA2ODI2NyA5Ni42NjU2LDM2MC41MDc3MzMgQzkyLjQ4NDI2NjcsMzY4Ljk1NTczMyA5NS45NDAyNjY3LDM3OS4yMDQyNjcgMTA0LjM4ODI2NywzODMuMzc3MDY3IEwxMzYuNTQxODY3LDM5OS4yOTE3MzMgQzEzOC45NzM4NjcsNDAwLjUwMzQ2NyAxNDEuNTUwOTMzLDQwMS4wNjY2NjcgMTQ0LjEwMjQsNDAxLjA2NjY2NyBDMTUwLjM4MjkzMyw0MDEuMDY2NjY3IDE1Ni40MjQ1MzMsMzk3LjU4NTA2NyAxNTkuNDExMiwzOTEuNTc3NiBDMTYzLjU4NCwzODMuMTI5NiAxNjAuMTM2NTMzLDM3Mi44ODEwNjcgMTUxLjY4LDM2OC43MDgyNjcgTDE1MS40NjY2NjcsMzY4LjU5NzMzMyBDMTcyLjUyNjkzMywzMzEuODUyOCAyMTIuNTkwOTMzLDMwOS4wMjYxMzMgMjU2LjAzNDEzMywzMDkuMDI2MTMzIEMyOTkuNDc3MzMzLDMwOS4wMjYxMzMgMzM5LjUxNTczMywzMzEuODM1NzMzIDM2MC41OTMwNjcsMzY4LjU2MzIgTDM2MC4zMTE0NjcsMzY4LjY5OTczMyBDMzUxLjg2MzQ2NywzNzIuODgxMDY3IDM0OC40MDc0NjcsMzgzLjEyMTA2NyAzNTIuNTgwMjY3LDM5MS41NjkwNjcgQzM1NS41NTg0LDM5Ny41ODUwNjcgMzYxLjYsNDAxLjA2NjY2NyAzNjcuODg5MDY3LDQwMS4wNjY2NjcgQzM3MC40MzIsNDAxLjA2NjY2NyAzNzMuMDE3Niw0MDAuNTAzNDY3IDM3NS40NDk2LDM5OS4zMDAyNjcgTDQwNy42MDMyLDM4My4zOTQxMzMgQzQxNi4wNTEyLDM3OS4yMDQyNjcgNDE5LjUxNTczMywzNjguOTcyOCA0MTUuMzM0NCwzNjAuNTI0OCIgaWQ9IkZpbGwtNCIgZmlsbD0iIzMzMzMzMyI+PC9wYXRoPiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
display: inline-block;
background-size: 48px 48px;
margin: 0 auto;
}
.font-icon_error:before{
content: "\E900";
color: #cd040b;
font-size: 4.8rem;
margin: 10px;
}
.font-icon_info {
display: inline-block;
margin-right: 4px;
padding-top:2px;
font-size:0;
}
.font-icon_info:before {
content: "\E01B";
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
font-size:22px;
}
.promo_icon_triangle{
width: 0;
height: 0;
background: none;
border-width: 18px;
border-style: solid;
border-bottom-color: #cd040b;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: #cd040b;
color: #fff;
font-size: 1.2em;
position: absolute;
bottom: 0;
right: 0;
}
.promo_icon_triangle::after{
content: "\2605";
position: relative;
top: -6px;
}
.icon-apple:before {
content: "\E097";
}
.icon-android:before {
content: "\E099";
}
.icon-BlackBerry:before {
content: "\E90B";
}
.icon-HTC:before {
content: "\E90C";
}
.icon-LG:before {
content: "\E90E";
}
.icon-Microsoft:before {
content: "\E90F";
}
.icon-Samsung:before {
content: "\E911";
}
.border_EB {
border: 1px solid #ebebeb;
}
.background_supporting {
background-color: #f6f6f6;
}
.featureDivStyle {
margin-left: 20px !important;
margin-right: 160px !important;
}
.borderStyle {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #D8DADA;
background-color: #FFFFFF;
}
.minHeight30 {
min-height: 30px;
}
.bannerTextStyle {
color: #000000;
font-family: "Neue Haas Grotesk Display Std",arial,sans-serif;
font-size: 14px;
line-height: 14.5px;
}
.bannerStyle {
width: 1092px;
background-color: #FFBC3D;
margin-bottom: 20px;
}
.headingTitle {
height: 60.8px;
width: 752px;
color: #000000;
font-family: "Neue Haas Grotesk Display Std",arial,sans-serif;
font-size: 32px;
letter-spacing: 0;
line-height: 30.4px;
}
@media only screen and (max-width: 768px) {
.headingTitle {
height: 71px;
width: 311px;
color: #000000;
font-family: "Neue Haas Grotesk Display Std",arial,sans-serif;
font-size: 25px;
letter-spacing: 0;
line-height: 23.75px;
}
.bannerStyle {
background-color: #FFBC3D;
width: 312px;
}
}