@import url("../../css/common2025.min.css");

html,
body {
    width: 100%;
    height: 100%
}

body {
    background: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 18px;
    overflow-x: hidden;
    color: #333
}

body#iol-home {
    background: #16242f url("../img/bg.jpg") no-repeat scroll left top / cover
}

body#iol-vantaggi {
    margin-top: inherit
}

strong {
    font-weight: 500
}

#topNav {
    background: rgba(0, 29, 53, 0.8);
    border-bottom: 0;
    font-size: 1rem;
    z-index: 1000000
}

#topNav button {
    margin-left: 1rem
}

.btn-primary {
    color: #182600;
    background-color: #8ebb3b;
    border-color: #8ebb3b;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #182600;
    background-color: #99c24e;
    border-color: #99c24e;
    box-shadow: inherit
}

.premium .float-right.nav .btn-link:focus-within,
.btn-info:focus-within,
#bundle .btn-secondary:focus-within,
#rem .btn-light:focus-within,
.premium .btn-secondary:focus-within,
.btn-primary:focus-within {
   border: 1px solid #333 !important;
    outline: #fff solid 2px !important;
    outline-offset: -3px;
}

.btn-secondary {
    color: #fff;
    background-color: inherit;
    border-color: #fff
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    color: #3374c7;
    background-color: #fff;
    border-color: #ddd;
    box-shadow: inherit
}

.btn-info,
.btn-info:not(:disabled):not(.disabled) {
    font-weight: 500;
    color: #3374c7;
    background-color: #fff;
    border-color: #ddd;
    padding: .375rem 1.5625rem
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active:focus {
    color: #9999;
    background-color: #eee;
    border-color: #ddd;
    box-shadow: inherit
}

.btn-light {
    color: #fff;
    background-color: #6c90aa;
    border-color: #6c90aa
}

.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active:focus {
    color: #fff;
    background-color: #3d6b87;
    border-color: #3d6b87;
    box-shadow: inherit
}

.premium .btn-primary,
.premium .btn-primary:hover {
    color:  #fff!important;
}

#iol-mailpec h1,
#vantaggi h1,
#iol-attiva-casella h1 {
    font-size: 37px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.64)
}

#iol-mailpec h1 {
    margin-top: 30px
}

#iol-mailpec h2 {
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.64);
    margin-bottom: 33px
}

#iol-mailpec .offerta {
    border-radius: 4px;
    overflow: hidden
}

#iol-mailpec .offerta p {
    margin-bottom: 0
}

#iol-mailpec .offerta .iva {
    font-size: 21px;
    font-weight: 500;
    margin-top: -5px
}

#iol-mailpec .offerta .wiva {
    font-size: 14px
}

#iol-mailpec .offerta header {
    color: #fff;
    background: #738fa7;
    position: relative;
    text-align: center;
    padding-top: 25px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 400px
}

#iol-mailpec .offerta .unlimited {
    background: #4091da
}

#iol-mailpec .offerta header .tipo-offerta {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #000
}

#iol-mailpec .offerta header h3 {
    font-size: 35px;
    font-weight: 400;
    margin-top: 17px
}

#iol-mailpec .offerta header .spazio {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #e4eef4;
    border-top: 1px solid #b5c4d1;
    border-bottom: 1px solid #b5c4d1;
    padding: 6px 0;
    margin: 0 3px
}

#iol-mailpec .offerta header .prezzo-pieno {
    font-size: 24px;
    margin-top: 7px;
    text-decoration: line-through
}

#iol-mailpec .offerta header .no-offerta {
    font-size: 24px;
    margin-top: 7px
}

#iol-mailpec .offerta header .prezzo {
    font-size: 68px;
    font-weight: 500;
    line-height: 68px
}

#iol-mailpec .offerta header .valuta {
    font-weight: 400
}

#iol-mailpec .offerta header .btn,
#vantaggi .btn {
    margin-top: 20px;
    font-weight: 500;
    line-height: 25px;
    padding: .375rem 1.5625rem
}

#iol-mailpec .offerta footer {
    font-size: 12px;
    padding: 20px;
    background: #e4eef4;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    min-height: 112px
}

#iol-mailpec .offerta .footer-no-offerta {
    min-height: 58px
}

#iol-mailpec .offerta footer p {
    color: #666
}

#iol-mailpec .offerta header .promo {
    width: 106px;
    height: 65px;
    font-size: .77rem;
    line-height: 6.5rem;
    text-align: center;
    color: #fff;
    background: #a1c23c;
    position: absolute;
    right: -44px;
    top: -21px;
    transform: rotate(45deg)
}

#iol-mailpec .promo-scaduta {
    font-size: 18px;
    color: #c00;
    background: #fedada;
    margin: 0 -10px 20px;
    padding: 7px 20px;
    border-radius: 5px
}

#iol-mailpec .promo-scaduta a {
    width: 30px;
    height: 30px;
    background: url(../img/fine-promo.svg) no-repeat;
    display: block;
    float: right
}

#iol-mailpec .claim {
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin: 39px 0;
    list-style: none
}

#iol-mailpec .claim li {
    margin-bottom: 10px
}

#iol-mailpec .claim i {
    background: url(../img/check.svg) no-repeat;
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px
}

#rem {
    background: #fff;
    padding-top: 40px
}

#rem h2,
#hp-slide02 h2 {
    font-size: 40px
}

#rem .btn-light {
    background: inherit;
    font-size: 17px;
    padding: 9px 25px;
    border-color: #06c;
    color: #06c
}

#rem-inside {
    padding-top: 50px
}

#iol-rem h1,
#iol-rem h2,
#iol-rem h3,
#iol-rem h4 {
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 30px
}

#iol-rem h2 {
    margin-bottom: 20px
}

#iol-rem h3 {
    margin-bottom: 0
}

#iol-rem h4 {
    margin-bottom: 20px
}

#iol-rem #faq-iol .btn-link {
    padding-right: 20px
}

#rem-inside p {
    font-size: 20px
}

#rem-inside .btn-lg {
    font-size: 17px;
    padding: 9px 25px;
    margin-top: 30px
}

#ita-eu {
    padding: 60px 0
}

#ita-eu .content {
    max-width: 730px;
    margin: 20px auto 0
}

#ita-eu .content .ok {
    width: 24px;
    height: 24px;
    background: url(../img/ok.svg);
    background-size: 24px 24px;
    display: block;
    margin: auto
}

#ita-eu .content .ko {
    width: 24px;
    height: 24px;
    background: url(../img/ko.svg);
    background-size: 24px 24px;
    display: block;
    margin: auto
}

#ita-eu .content .head {
    font-size: 20px;
    font-weight: 500
}

#iol-rem #hp-slide03,
#iol-vantaggi #hp-slide03 {
    background: -moz-linear-gradient(top, #fff 0, #e4eef0 100%);
    background: -webkit-linear-gradient(top, #fff 0, #e4eef0 100%);
    background: linear-gradient(to bottom, #fff 0, #e4eef0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#E4EEF0', GradientType=0);
    padding-top: 40px
}

#iol-vantaggi #hp-slide03 {
    padding-top: 0
}

#adegua {
    padding-bottom: 50px;
    font-size: 16px
}

#adegua h3 {
    color: #1680e9
}

#adegua .number-1 {
    background: url(../img/number-1.svg) no-repeat top left;
    min-height: 100px;
    padding-left: 80px;
    padding-right: 50px
}

#adegua .number-2 {
    background: url(../img/number-2.svg) no-repeat top left;
    min-height: 100px;
    padding-left: 80px;
    padding-right: 50px
}

#adegua .number-3 {
    background: url(../img/number-3.svg) no-repeat top left;
    min-height: 100px;
    padding-left: 80px;
    padding-right: 50px
}

#adegua .number-4 {
    background: url(../img/number-4.svg) no-repeat top left;
    min-height: 100px;
    padding-left: 80px;
    padding-right: 50px
}

#hp-slide02 {
    background: -moz-linear-gradient(top, #fff 0, #c1d2d7 100%);
    background: -webkit-linear-gradient(top, #fff 0, #c1d2d7 100%);
    background: linear-gradient(to bottom, #fff 0, #c1d2d7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c1d2d7', GradientType=0);
    padding: 60px 0 39px 0;
    text-align: center
}

#hp-slide02 h4,
#hp-slide03 h2 {
    font-size: 40px;
    text-align: center
}

#hp-slide02 h4 i {
    font-weight: 400
}

#hp-slide02 p {
    font-size: 24px;
    line-height: 32px
}

#hp-slide03 {
    padding: 65px 0;
    background: #e4eef0
}

#hp-slide03 h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #3374c7;
    margin: 17px 0 0 0
}

#hp-slide03 p {
    font-size: 20px;
    padding-right: 20px
}

#hp-slide03 .row div {
    margin-top: 30px
}

#hp-slide03 h5 {
    margin-top: 25px
}

#hp-slide03 .valore {
    background: url(../img/Valore-Legale.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .tempo {
    background: url(../img/Risparmia-Tempo.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .denaro {
    background: url(../img/Risparmia-Denaro.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .conforme {
    background: url(../img/Conforme.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .assistenza {
    background: url(../img/Assistenza.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .sicurezza {
    background: url(../img/Sicurezza.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .certificati {
    background: url(../img/Certificati.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .mittenti {
    background: url(../img/Mittenti.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .maggiore-sicurezza {
    background: url(../img/Maggiore-Sicurezza.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .valida-europa {
    background: url(../img/Valida-Europa.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .domicilio {
    background: url(../img/Domicilio-Digi.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .ricezione {
    background: url(../img/Ricez-Fatture.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .antivirus {
    background: url(../img/Antivirus.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 .consegna {
    background: url(../img/Priorita.svg) no-repeat top left;
    background-size: 90px 90px;
    background-position-x: 10px;
    padding-top: 5rem
}

#hp-slide03 a {
    color: #333;
    text-decoration: underline
}

#hp-slide03 a:hover {
    color: #999;
    text-decoration: none
}

#vantaggi {
    background: #526574;
    color: #fff
}

#vantaggi .container {
    background: url(../img/bg-vantaggi.jpg) right bottom no-repeat;
    padding: 39px 15px 77px 15px
}

#vantaggi h1 {
    text-align: left
}

#vantaggi h2 {
    font-size: 26px;
    font-weight: 400;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.64);
    margin-bottom: 20px
}

#vantaggi h3 {
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px
}

#vantaggi h3 a {
    color: #fff;
    text-decoration: underline
}

#quando-serve {
    font-size: 16px;
    padding: 77px 0;
    text-align: center
}

#quando-serve h3 {
    font-size: 40px;
    font-weight: 500
}

#quando-serve h4,
#quando-serve h5 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 30px
}

#quando-serve h5 {
    margin-top: 77px
}

#quando-serve img {
    max-width: 232px;
    margin: 20px auto 5px;
    display: block
}

#iol-attiva #iol-mailpec .claim {
    color: inherit
}

#iol-attiva-casella {
    text-align: center;
    padding-top: 39px
}

#iol-attiva-casella h1 {
    font-size: 40px;
    font-weight: 500;
    color: #333;
    text-shadow: none
}

#iol-attiva-casella p {
    font-size: 26px;
    margin-bottom: 39px
}

.libero-premium a {
    font-weight: 500;
    color: #83ae30;
    text-decoration: underline
}

.libero-premium {
    background: #fff;
    padding: 39px;
    text-align: center
}

.libero-premium h3 {
    margin-bottom: 0
}

@keyframes fadeInOpacity {
    0 {
        opacity: .7
    }

    100% {
        opacity: 1
    }
}

#iol-attiva {
    height: auto
}

@media(max-width:991.98px) {
    body#iol-home {
        background: #16242f url("../img/bg.jpg") no-repeat scroll center top / cover
    }

    .navbar-toggler .navbar-toggler-icon {
        background: url(../img/open.svg);
        outline: 0
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background: url(../img/close.svg);
        outline: 0
    }

    #topNav {
        background: #001d35
    }

    .navbar-brand {
        width: 190px;
        height: 40px;
        background: url(../img/logo.svg) no-repeat
    }

    .nav-link {
        padding: 1rem
    }

    .nav-item {
        text-align: center;
        font-size: 1.125rem
    }

    .nav-item:first-child {
        padding-top: 1.875rem
    }

    .nav-item:last-child {
        margin-top: 0
    }

    #topNav .nav-item button {
        display: block;
        margin: 1rem auto
    }

    #topNav .nav-item .btn-secondary {
        margin-top: 2rem;
        margin-bottom: 1.5rem
    }

    .nav-item:last-child {
        margin-top: 0
    }

    #vantaggi {
        background: #526574 url(../img/bg-vantaggi-mobile.jpg) center top no-repeat;
        background-size: cover
    }

    #vantaggi .container {
        background: 0
    }
}

@media(max-width:767.98px) {
    .navbar {
        padding: .95rem 1rem .75rem 1rem
    }

    #rem {
        text-align: center
    }

    #rem img {
        margin-top: 30px
    }

    #ita-eu .content .head {
        font-size: 18px
    }

    #iol-mailpec h1,
    #vantaggi h1,
    #iol-attiva-casella h1 {
        font-size: 28px
    }

    #iol-mailpec h2 {
        font-size: 20px
    }

    #iol-mailpec .offerta {
        margin-bottom: 28px
    }

    #iol-mailpec .claim {
        font-size: 16px;
        text-align: left;
        padding-left: 0;
        margin-top: 0
    }

    #vantaggi .container {
        padding-top: 20px
    }

    #quando-serve img {
        margin-top: 40px
    }

    #quando-serve h4 {
        margin-bottom: 0
    }

    #quando-serve h5 {
        margin-top: 40px
    }

    #hp-slide03,
    #quando-serve {
        padding: 40px 0
    }

    #iol-attiva-casella {
        padding-top: 20px
    }

    #iol-attiva-casella p {
        font-size: 20px;
        margin-bottom: 20px
    }
}

@media(max-width:575.98px) {
    #adegua {
        margin: 0 30px
    }

    #adegua .number-2,
    #adegua .number-3,
    #adegua .number-4 {
        margin-top: 20px
    }
}