/* section */
 section.light p, section.licensing p{font-size:24px; font-weight:bold; display:none;}
 section.light, section.licensing {
width: 100%;
min-height: inherit;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
section.licensing{
width: 100%;
min-height: inherit;
display: block;    
position: relative;
}
section.licensing .texts {
 font-size:16px; font-weight:bold; line-height:1.2em;text-align:left;
}

section.light::before,
section.light::after,
section.licensing::after,
section.licensing::before
{
content: "";
display: block;
border-radius: 100%;
position: absolute;
}

.light {
--primary: hsl(0, 0%, 12%);
--other: hsl(0, 0%, 14%);
}
.licensing {
--primary: hsl(0, 0%, 12%);
--other: hsl(0,0%,42%);
}
/* label */
section.light label,
section.licensing label{
display: flex;
 justify-content: flex-start;
 align-items: center;
 flex-wrap: nowrap;
 margin: 0px 30px 0 50px;
 cursor: pointer;
 position: relative;
 font-size: 24px;
}
section.licensing label{
 margin: 0  0 30px;
 padding: 0 0 0 30px
}


/* input */
section.light input,
section.licensing input{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}

.licensing input:checked+.design::before{
 color:var(--other);
}


/* .design */
.design {
width: 20px;
height: 20px;
border: 1px solid var(--other);
border-radius: 100%;
margin-right: 16px;
position: relative;
}

.licensing .design{
 width: 16px;
 height: 16px;
 top: 0;
 position:absolute;
 left: 2px;
}  



.design::before,
.design::after {
content: "";
display: block;

width: inherit;
height: inherit;

border-radius: inherit;

position: absolute;
transform: scale(0);
transform-origin: center center;
}

.design:before {
background: var(--other);
opacity: 0;
transition: .3s;
}

.design::after {
background: var(--primary);
opacity: .4;
transition: .6s;
top: -1px;
right: -1px;
}


/* .text */
.texts {
color: var(--other);
font-weight: bold;
}


/* checked state */
section.light input:checked+.design::before,
section.licensing input:checked+.design::before{
opacity: 1;
transform: scale(.6);
top: -1px;
 right: -1px;
}


/* other states */
section.light input:hover+.design,
section.light input:focus+.design,
section.licensing input:focus+.design,
section.licensing input:hover+.design
{
border: 1px solid var(--primary);
}

section.light input:hover+.design:before,
section.light input:focus+.design:before,
section.licensing input:focus+.design:before,
section.licensing input:hover+.design:before{
background: var(--primary);
}

section.light input:hover~.texts,
section.licensing input:hover~.texts{
color: var(--primary);
}

section.light input:focus+.design::after,
section.light input:active+.design::after,
section.licensing input:focus+.design::after,
section.licensing input:active+.design::after  {
opacity: .1;
transform: scale(2.0);
}

.abs-site-link {
position: fixed;
bottom: 20px;
left: 20px;
color: hsla(0, 0%, 0%, .6);
background: hsla(0, 0%, 98%, .6);
font-size: 16px;
}

.description-license{
    font-weight: normal;
    display: block;
    margin: 10px 0 0;
}

.licensing-container{
    background-color: #ffffff;
    /* padding: 30px 30px 0; */
    margin: 0 auto 30px;
    border-radius: 0 0 12px 12px;
    /* box-shadow: 0px 20px 40px -6px rgb(0 0 0 / 10%); */
}

.licensing-container h4{
    text-align: center;
    margin:0 0 30px!important;
}

.nav-bar-pricing{
    margin-bottom: 0;
    border-radius: 12px 12px 0 0 ;
}

.renewalContianer{
    width: 100%;
}

.renewalDesc{
    padding: 30px;
    text-align: center;
}

.interactive{
    width:80%!important;
}
.tabs-renew{
    width: 100%!important;
}

h2{
    font-family: "source-han-sans-simplified-c";
    font-weight: 700;
    font-size: 35px;
    line-height: 1.6em;
    margin: 0 0 !important;
}

.lightning-btn{
    font-size: 20px;
    margin: 30px 0;
    display: inline-block;
}

.lightning-btn .navigator-yellow{
    font-size: 20px;
}

ul.listening{
    margin: 20px 0 30px;
}

ul.listening li{
    line-height: 1.5;
    list-style-type: disc!important;
}