.chat-link.inactive{
    background-color: #EEEDF1;
}
.chat-link.inactive button,
.chat-link.inactive button small{
    color: #6E767D;
}
.chat-link.inactive button .img{
    opacity: 40%;
}
.chat-link.inactive .active,
.chat-link .inactive{
    display: none;
}
.chat-link.inactive .inactive{
    display: flex;
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* STYLING */

/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*  COLOR */

/*//////////////////////////////////////////////////*/
footer a,
body{
    color: var(--color-invert);
}
#coverage .info-graphic .row .right .inner,
.btn,
.chat-link a,
.chat-link button,
.chat-link button small,
#plan .plan-cards .card,
#terms .box,
#terms .box p,
.tag,
.btn,
#products ul.ctas li{
    color: var(--color-primary);
}
.btn.snd.override,
.btn.snd.override .icn,
.tag.invert,
.btn.otl,
#howto nav a,
body{
    color: var(--color-invert);
}
dt, dd,
ul li,
#contact small a,
small,
#howto .contact .box p:first-of-type a,
#contact .block .flex .box p a,
header nav:first-of-type a,
p{
    color: var(--color-text-secondary);
}
.btn.snd,
.btn.snd .icn,
.link,
.btn.otl,
.callout,
h4.cl{
    color: var(--c-color-main);
}
#plan .plan-cards .card:last-of-type h5:before{
    filter: invert();
}
.btn.snd svg,
.btn.otl svg{
    fill: var(--c-color-main);
}
/*//////////////////////////////////////////////////*/

/* BORDER COLOR */

/*//////////////////////////////////////////////////*/
footer .container,
#contact .flex .col1,
#terms .flex div{
    border-color: #A5AAAF;
}
.btn.snd.override,
#persona .col2 .box,
#terms .flex div:last-of-type{
    border-color: var(--color-invert);
}
#coverage .info-graphic .center-text:before{
    border-top-color: var(--c-color-main); 
}
.btn.snd,
#coverage .info-graphic .center-text{
    border-color: var(--c-color-main);
}
#coverage .info-graphic .center-text:after{
    border-top-color: var(--color-primary);
}
#persona .col1 .bubble:after{
    border-top-color: var(--color-secondary);
}
/*//////////////////////////////////////////////////*/

/* BACKGROUND COLOR */

/*//////////////////////////////////////////////////*/
#plan .plan-cards .card,
#products ul.ctas li,
#contact .block .corner,
.chat-link,
#terms .box,
.tag{
background-color: var(--color-invert);
}
#coverage .info-graphic .row .left .inner,
#coverage .info-graphic .row .right,
#persona .col2,
#persona .col2 .box,
#service .col,
#persona .col1 .bubble,
#persona .col1 .flex .col,
#plan .plan-card,
#howto .contact .box,
#contact .box,
#coverage .info-graphic .row .product,
#howto,
#minifaq dt{
    background-color:  var(--color-secondary);
}
/*#coverage .info-graphic .row .left .inner,
#coverage .info-graphic .row .right,*/
.notification{
    background-color: var( --c-color-1);
}
#menu-icon,
.chat-link a,
#coverage .info-graphic .center-line,
/*#coverage .info-graphic .row .right .inner,*/
.btn{
    background-color: var(--c-color-main);
}
#menu-icon div,
#service .col p,
#persona .col2 .products .col:last-of-type,
#compensation .img,
.tag.invert,
#coverage .info-graphic .center-text,
#hint .block,
#howto .col2 > div{
    background-color: var(--color-primary);
}
#howto nav a{
    background-color: var(--color-tertiary);
}
header{
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(5px);
}
#coverage .info-graphic .row .right .inner{
background: var(--graph-grad-1, linear-gradient(90deg, rgba(110, 118, 125, 0.40) 0%, var(--surface-icon-inactive, #6E767D) 100%));
}
.btn.otl,
.btn.snd{
    background-color: transparent;
}
/*/////////////////////////*/
@media (min-width: 1024px){
    #products{
        background: linear-gradient(180deg, #f2f2f2, #fefefe 35%, #fff);
    }
}
/*/////////////////////////*/
@media (max-width: 1023px){
    header.open nav:first-of-type,
    header.open{
        background-color: var(--color-primary);
    }
}
/*//////////////////////////////////////////////////*/

/* RADIUS */

/*//////////////////////////////////////////////////*/
#menu-icon,
#persona .col2 .box .img,
.tag,
#persona .col2 .products .col:last-of-type,
#persona .col1 .bubble,
footer .col.chat:after,
footer .col.chat .icn,

#compensation .img,
#products ul.ctas li,
.btn,
#coverage .info-graphic .row:nth-child(1) .right,
#coverage .info-graphic .row:nth-child(1) .right .inner,
#coverage .info-graphic .row .product{
    border-radius: 1000px;
}
#coverage .info-graphic .row .left .inner{
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
}
#coverage .info-graphic .row .right,
#coverage .info-graphic .row .right .inner{
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
}
#service .col p,
#service .col,
#howto .col2 > div{
    border-radius: 1.5rem;
}
#persona .col2,
#plan .plan-cards .col,
#plan .plan-card,
#howto .contact .box,
#minifaq dt,
#contact .box,
#hint .block,
#howto nav a{
    border-radius: 1rem;
}
#persona .col2 .box{
    border-radius: 0.75rem;
}
.notification,
#persona .col1 .flex .col{
    border-radius: 0.5rem;
}
#persona .col2 .box .products .img,
#coverage .info-graphic .center-text{
    border-radius: 0.25rem;
}
/*/////////////////////////*/
@media (min-width: 768px){
    .chat-link{
        border-radius: 1000px;
    }
}
/*//////////////////////////////////////////////////*/

/* OPACITY */

/*//////////////////////////////////////////////////*/
#howto nav a.active:hover,
#howto nav a.active{
    opacity: 100%;
}
#howto nav a:hover,
#terms .box p{
    opacity: 68%;  
}
#howto nav a{
    opacity: 48%;
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* SPACING */

/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* PADDING */

/*//////////////////////////////////////////////////*/
section{
    padding: 5rem 0; /* 80px */   
}
body{
    padding-top: 72px; 
}
#products .col1{
    padding: 4rem 0; /* 64px */
}
.heading,
.container{
    padding-left: 2.5rem; /* 40px */
    padding-right: 2.5rem; /* 40px */
}
footer .container{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.btn{
    padding: 0 2rem;
}
header .btn{
    padding: .5rem 1rem!important;
}
#persona .col1 .bubble{
    padding: 3rem 1.5rem;
}
#service .col,
#persona .col2 .box,
#terms .box,
#howto nav a,
#howto .col2 > div{
    padding: 1.5rem; 
}

#persona .col2{
    padding: 1.25rem; /* 20px */
}
#service .col p,
#persona .col1 .flex .col,
#plan .plan-card .col,
#howto .contact .box,
#contact .box,
#terms .flex div{
    padding: 1rem; /* 16px */
}
.notification{
    padding: 0.75rem; /* 12px */
}
#service .col,
#products h5,
section .btns{
    padding-top: 2rem; /* 32px */
}
#contact .block .flex{
    padding-top: 1.25rem;
}
.btns{
    padding-top: 1rem; /* 16px */
}
#minifaq dd{
    padding: 0 16px 24px 16px;
}
#coverage,
#intro{
    padding-top: 0;
}
.btn{
    padding: .8rem 2.25rem;
}
.btn.md{
    padding: .5rem 2.25rem;
}
/*/////////////////////////*/
@media (min-width: 1024px){
    #products{
        padding: 0;
    }
}
/*/////////////////////////*/
@media (min-width: 1280px){
    #service .container{
        padding-left: 10rem;
        padding-right: 10rem;
    }
    #contact.container,
    #persona .container,
    #persona .heading{
        padding-left: 4rem;
        padding-right: 4rem;
    }
}
/*/////////////////////////*/
@media (max-width: 1279px){
    .heading,
    .container{
        padding-left: 1rem; 
        padding-right: 1rem;
    }
    .flex{
      gap: 4rem;
    }
    footer,
    section{
        padding: 4rem 0;
    }
    #products .col1{
        padding: 3rem 0;
    }
}
/*/////////////////////////*/
@media (max-width: 1023px){
    section,
    #products .col1{
        padding: 3rem 0;
    }
    #products .col1{
        padding-bottom: 0;
    }
    #persona .col1 .bubble{
        padding: 1.5rem;
    }
}
/*/////////////////////////*/
@media (max-width: 768px){
    #persona .col1 .flex .col{
        padding: 8px;
    }
}
/*/////////////////////////*/
@media (max-width: 440px){
    #persona .col2 .box{
        padding: 1rem;
    }
}
/*//////////////////////////////////////////////////*/

/* MARGIN */

/*//////////////////////////////////////////////////*/
#hint .block,
#coverage .info-graphic{
    margin-bottom: 3rem!important;
}
.heading,
#terms > ul,
#terms .flex,
#terms .box{
    margin-bottom: 2.5rem;
}
#service .flex,
#contact .flex,
#howto .col2 > div,
#minifaq dt,
#contact h4,
h1, h2, h3{
   margin-bottom: 1.5rem;
}
#service .col1 .img,
#persona .products,
#persona .col2 .img.lg,
#plan .plan-cards,
#plan .plan-card,
#plan .img,
#howto .contact,
#contact .img,
.tag,
#howto .img.ill,
#howto nav a,
h4, 
h5,
ul,
small,
p{
    margin-bottom: 1rem;
}
#persona .col1 .flex .col .img{
    margin-bottom: 0.75rem;
}
#contact .box p,
.heading h3,
#terms .box h4{
    margin-bottom: 0.5rem;
}
.chat-link button small,
#plan h5,
h1,
.col1 *:last-child,
.col2 *:last-child,
.col *:last-child,
.heading *:last-child{
    margin-bottom: 0;
}
/*/////////////////////////*/
@media (max-width: 1023px){
    #coverage .info-graphic{
        margin-bottom: 1.5rem!important;
    }
}
/*//////////////////////////////////////////////////*/

/* GAP */

/*//////////////////////////////////////////////////*/
.flex{
    gap: 2.5rem;
}
#hint .block{
    gap: 1.5rem;
}
#contact .cards,
#howto .contact .flex{
    gap: 1.25rem;
}
#persona .col1 .flex,
#service #compensation,
#service .footer,
#plan .plan-cards,
#persona .col2 .products,
footer nav,
#products ul.ctas,
.btns{
    gap: 1rem;
}
#service #compensation > div,
#howto .contact,
#terms .flex{
    gap: 0.75rem;
}
#products ul.checklist,
.btn{
    gap: 0.5rem; 
}
header .btn{
    gap: 0.25rem;
}
/*/////////////////////////*/
@media (max-width: 1279px){
    .flex{
      gap: 4rem;
    }
    #hero .flex{
        gap: 1rem;
    }
}
/*/////////////////////////*/
@media (max-width: 1023px){
    .flex{
        gap: 3rem;
    }
}
/*/////////////////////////*/
@media (max-width: 768px){
    header .btns,
    #hint .block{
         gap: 12px;
    }
}
/*/////////////////////////*/
@media (max-width: 440px){
    #hero .flex{
        gap: 24px;
    }
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* TEXT */

/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* FONT SIZE */

/*//////////////////////////////////////////////////*/
*{
    font-family: Apercu,Hiragino,Meiryo,system-ui!important;
    font-size: 16px;
}
body{
    font-size: 1rem;
}
h1{
   font-size: 4rem;
}
#products ul.ctas li b{
    font-size: 4rem;
}
h2{
    font-size: 3rem;
}
#terms .box h4 span{
    font-size: 2.25rem;
}
#persona .col2 .products .col:nth-child(3) span,
#products ul.ctas li span,
h3{
    font-size: 2rem;
}
h4,
#coverage .info-graphic .row b,
#products ul.ctas li{
    font-size: 1.5rem;
}
.tag.lg,
h5,
dt,
#howto nav a,
.chat-link a,
#howto .contact .box p:first-of-type b,
#coverage .info-graphic .center-text,
#products ul.ctas li:first-of-type,
p, p b, li, dd, a{
    font-size: 1.25rem;
   /* font-size: 20px;*/
}
p.sm,
.tag.md,
.checklist li,
small a,
#contact .block .corner,
#terms li,
header nav:first-of-type a,
.btn.md,
#coverage .info-graphic p,
#coverage .info-graphic{
    font-size: 1rem;   
}
#products .checklist li{
    font-size: 0.9rem;    
}
small,
footer a,
footer p,
#terms .box p{
    font-size: 0.8rem;     
}
.tag,
#persona h3 b{
    font-size: 0.8em;   
}
#persona h4 p span,
#persona h4 span,
#persona h3 span{
    font-size: 0.6em;   
}
#persona h3 small{
    font-size: 0.5em;   
}
/*/////////////////////////*/
@media (max-width: 1439px){
    h1{
        font-size: 3.75rem;
    }
    h2{
        font-size: 2.75rem;
    }
}
/*/////////////////////////*/
@media (max-width: 1279px){
    h1{
        font-size: 3.25rem;
    }
    h2{
        font-size: 2.25rem;
    }
    .chat-link a{
        font-size: 1.25rem;
    }
    .tag.lg,
    h5,
    dt,
    #howto nav a,
    #coverage .info-graphic .center-text,
    #products ul.ctas li:first-of-type,
    p, p b, li, dd, a{
        font-size: 1rem;
    }
      #howto .contact .box p:first-of-type b{
        font-size: 0.9rem;
      }
    #products .checklist li{
        font-size: 0.8rem;    
    }
}
 /*/////////////////////////*/
 @media (max-width: 1023px){
    *{
    font-size: 14px;
    }
}
 /*/////////////////////////*/
 @media (max-width: 767px){
    h1{
        font-size: 3rem;
    }
    h2{
        font-size: 2rem;
    }
    #persona .col2 .products .col:nth-child(3) span,
    #products ul.ctas li span,
    h3{
        font-size: 1.5rem;
        /*font-size: 32px;*/
    }
    #plan h5{
        font-size: 1rem;
    }
    #coverage .info-graphic .center-text,
    #coverage .info-graphic .row b{
        font-size: 1.1rem;
    }
    #coverage .info-graphic p,
    #coverage .info-graphic{
        font-size: 0.9rem;   
    }
}
 /*/////////////////////////*/
 @media (max-width: 440px){
    *{
    font-size: 13px;
    }
    h1{
        font-size: 2.5rem;
    }
    #terms .box h4 span,
    h2{
        font-size: 1.75rem;
    }
    #plan h5,
    header nav:first-of-type a{
        font-size: 1.5rem;
    }
    #terms .box h4{
        font-size: 1.25rem;
    }
}
 /*/////////////////////////*/
 @media (max-width: 375px){
    #contact .box p b{
        font-size: 0.9rem;
    }
    #contact .box p.sm{
    font-size: 0.85rem;
    }
 }
/*//////////////////////////////////////////////////*/

/* FONT WEIGHT */

/*//////////////////////////////////////////////////*/
.chat-link button,
.btn,
.tag,
.callout,
#products ul.checklist li,
#persona .col2 .products .col:nth-child(3) span,
.chat-link a,
#minifaq dt,
#coverage .info-graphic .center-text,
#howto nav a,
#hint div p:first-of-type,
#products ul.ctas li{
    font-weight: bold;
}
/*.btn.snd{ //* grrrrr 
    font-weight: normal;
}*/
/*/////////////////////////*/
@media (max-width: 440px){
    header nav:first-of-type a{
        font-weight: bold;
    }
}
/*//////////////////////////////////////////////////*/

/* LINE HEIGHT */

/*//////////////////////////////////////////////////*/
p{
    line-height: 150%;
}
#service p,
#contact .box p,
h1, h2, h3, h4{
    line-height: 130%; 
}
#contact .block .corner,
#products ul.ctas li{
    line-height: 120%; 
}
#products ul.ctas li b{
    line-height: 100%;
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* IMAGES */

/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* SIZE */

/*//////////////////////////////////////////////////*/
.img{
    display: block;
    width: 100%;
    padding-bottom: 60%;
}
#howto .img{
    padding-bottom: 40%;
}
#products .img{
    padding-bottom: 66%;
}
#hero .img{
    padding-bottom: 80%;
}
/*/////////////////////////*/
#plan .img{
    width: 400px;
    height: 96px;
}
#persona .col2 .img.lg{
    width: 424px;
    height: 174px;  
}
#service .col1 .img,
#contact .img,
#persona .col1 .img{
    width: 120px;
    height: 120px; 
}
#plan .plan-card .img{
    width: 110px;
    height: 110px;
}
#persona .col2 .products .img{
    width: 90px;
    height: 90px;   
}
.chat-link .img{
    width: 68px;
    height: 68px;
}
#howto .contact .img,
#compensation .img,
#contact .box .img{
    width: 60px;
    height: 60px;
}
#howto .contact .img,
#compensation .img,
#persona .col2 .products .img,
#persona .col1 .img,
#persona .col2 .img.lg,
#plan .img,
#service .col1 .img,
.chat-link .img{
    padding-bottom: 0;
}
/*/////////////////////////*/
@media (min-width: 1024px){
    #products .img{
        height: 100%;
        padding-bottom: 0;
    } 
}
/*/////////////////////////*/
@media (max-width: 1279px){
    #persona .col1 .img{
        width: 100px;
        height: 100px;
    }
}
/*/////////////////////////*/
@media (max-width: 767px){
    #persona .col2 .img.lg{
        height: 168px;  
    }
    #persona .col2 .img.lg{
        width: 100%;
        height: 140px;  
    }
    #steppanel2 .img{
        padding-bottom: 68%;
    }
    #persona .col2 .products .img{
    width: 68px;
    height: 68px;   
}
}
/*/////////////////////////*/
@media (max-width: 440px){
    #plan .img{
        width: 100%;
        height: 0;
        padding-bottom: 22%;
    }
    #steppanel2 .img{
        padding-bottom: 72%;
    }
    #persona .col1 .img{
        width: 68px;
        height: 68px;
    }
    .chat-link .img{
        width: 48px;
        height: 48px;
    }
}
/*//////////////////////////////////////////////////*/

/* POSITION */

/*//////////////////////////////////////////////////*/
footer .truste a,
#persona:after,
.notification:before,
#plan .plan-card .col:first-of-type:after,
#persona .col2 .img.lg,
#plan .img,
footer .col.chat:after,
.icn,
.logo,
.img,
#minifaq dt:after,
#hint .block:after,
#hint .block:before{
    background-position: 50%;
}

#coverage{
    background-position: 100% 0;
}
.logo{
    background-position: 0 50%;
}
/*/////////////////////////*/
@media (min-width: 1024px){
    #products .img{
        background-position: 0 0;
    }   
}
/*//////////////////////////////////////////////////*/

/* REPEAT */

/*//////////////////////////////////////////////////*/
#service .col2 h3:before,
footer .truste a,
#persona:after,
.notification:before,
#plan .plan-card .col:first-of-type:after,
#persona .col2 .img.lg,
#plan .img,
footer .col.chat:after,
.icn,
#coverage,
.logo,
.img,
#minifaq dt:after,
#hint .block:after,
#hint .block:before{
    background-repeat: no-repeat;
}
/*//////////////////////////////////////////////////*/

/* SCALE */

/*//////////////////////////////////////////////////*/
#plan .img,
.notification:before,
#plan .plan-card .col:first-of-type:after,
.icn,
header .logo,
.img{
    background-size: auto 100%;
}
.service-logo,
#products .img,
#service .col2 h3:before,
footer .truste a,
#persona:after,
#persona .col2 .img.lg,
.chat-link .img,
#minifaq dt:after,
#hint .block:after,
#hint .block:before,
#contact .img{
    background-size: 100% auto;
}
#coverage{
    background-size: auto;
}
footer .col.chat:after{
    background-size: auto 50%; 
}
#compensation .img,
#coverage .info-graphic .row .product{
    background-size: auto 80%;
}
/*/////////////////////////*/
@media (min-width: 1024px){
    #products .img{
        background-size: 165% auto;
    }
}
@media (min-width: 1124px){
    #products .img{
        background-size: 125% auto;
    }
}
/*//////////////////////////////////////////////////*/

/* ORIENTATION */

/*//////////////////////////////////////////////////*/
#minifaq dt.active:after{
    transform: rotate(180deg);
}
/*//////////////////////////////////////////////////*/

/* URL */

/*//////////////////////////////////////////////////*/
header .logo,
footer .logo{
    background-image: url(../img/logo-asurion.svg);
}
footer .truste a{
    background-image: url(../img/logo-truste.png);
}
footer .truste a:last-of-type{
    background-image: url(../img/logo-truste-privacy.png);
}
/*/////////////////////////*/
#minifaq dt:after{
    background-image: url(../img/icn-chevron_down.svg);
}
footer .col.chat:after,
.icn.chat{
    background-image: url(../img/icn-chat.svg);
}
.icn.user{
    background-image: url(../img/icn-user.svg);
}
.icn.arrow{
    background-image: url(../img/icn-arrow.svg);  
}
.icn.tick{
    background-image: url(../img/icn-tick.svg);  
}
.icn.menu{
    background-image: url(../img/icn-menu.svg); 
}
#plan .plan-card .col:first-of-type:after{
    background-image: url(../img/icn-check_circle.svg); 
}
#products ul.checklist li:before{
    background-image: url(../img/icn-check2.svg); 
}
.notification:before{
    background-image: url(../img/icn-warning.svg); 
}
#service .col2 h3:before,
#plan .plan-cards .card:last-of-type h5:before{
    background-image: url(../img/icn-plus.svg); 
}
.icn-pdf{
    background-image: url(../img/pdf-icn.png); 
}
/*/////////////////////////*/
.online .img{
    background-image: url(../img/ill-user.svg)!important;  
}
.call .img{
    background-image: url(../img/ill-call.svg)!important;  
}
.chat .img{
    background-image: url(../img/ill-chat.svg)!important;  
}
#plan .plan-card .img{
    background-image: url(../img/ill-sps.svg);  
}
#hint .block:after{
    background-image: url(../img/ill-break.svg);
}
#persona:after{
    background-image: url(../img/ill-arrow.svg);
}
/*/////////////////////////*/
#persona .col1 .flex .col:nth-child(1) .img{
    background-image: url(../img/user1.png); 
}
#persona .col1 .flex .col:nth-child(2) .img{
    background-image: url(../img/user2.png); 
}
#persona .col1 .flex .col:nth-child(3) .img{
    background-image: url(../img/user3.png); 
}
#persona .col2 .img{
    background-image: url(../img/users.png); 
}
/*/////////////////////////*/
.chat-link .img{
    background-image: url(../img/chat.png);
}
.chat-link.inactive .img{
    background-image: url(../img/chat-inactive.png);
}
#service .col1 .img{
    background-image: url(../img/lady1.png);  
}
#contact .img{
    background-image: url(../img/lady2.png);  
}
/*/////////////////////////*/
#hero .img{
    background-image: url(../img/hero.png);
}
#intro .img{
    background-image: url(../img/intro.png);
}
#products .img{
    background-image: url(../img/products1.png);
}
/*/////////////////////////*/
#compensation #repair .img{
    background-image: url(../img/repair.png);
}
#compensation #replace .img{
    background-image: url(../img/replace.png);
}
#compensation #refund .img{
    background-image: url(../img/refund.png);
}
/*/////////////////////////*/
#coverage .info-graphic .rows .row:nth-child(1) .product{
    background-image: url(../img/prod-sp.png);  
}
#coverage .info-graphic .rows .row:nth-child(2) .product{
    background-image: url(../img/prod-imac.png);  
}
#coverage .info-graphic .rows .row:nth-child(3) .product{
    background-image: url(../img/prd-printer.png);   
}
#persona .col2 .flex .col:nth-child(3) .img{
    background-image: url(../img/prod-washmachine.png);  
}
#persona .col2 .flex .col:nth-child(1) .img{
    background-image: url(../img/prd-tablet.png); 
}
#persona .col2 .flex .col:nth-child(2) .img{
    background-image: url(../img/prd-switch.png); 
}
/*/////////////////////////*/
#steppanel1 .img{
    background-image: url(../img/family1.png); 
}
#steppanel2 .img{
    background-image: url(../img/ill-barcode.svg); 
}
#steppanel2 .col:first-of-type .img{
    background-image: url(../img/ill-pdf.svg); 
}
#steppanel3 .img{
    background-image: url(../img/ill-adddevice.png); 
}