@import url('https://fonts.googleapis.com/css?family=Rubik:400,500');

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;
    margin-top: 140px
}

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
}

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

.navbar {
    padding: 1.4rem 1rem
}

.navbar-light .navbar-toggler {
    outline: 0
}

.btn {
    font-weight: 500;
    line-height: 25px;
    padding: .375rem 1.5625rem
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem
}

.navbar-light .navbar-nav .nav-link.active {
    background: url(../img/hover.svg) no-repeat bottom center;
    color: #999
}

.navbar-light .navbar-brand:focus {
    color: inherit
}

.navbar-light .navbar-nav .nav-link {
    color: #fff
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #999
}

.btn-primary {
    color: #fff;
    background-color: #83ae30;
    border-color: #83ae30
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    color: #fff;
    background-color: #609f32;
    border-color: #609f32;
    box-shadow: inherit
}

.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
}

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

#iol-mailpec h2 {
    font-size: 31px;
    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 header {
    color: #fff;
    background: #738fa7;
    position: relative;
    text-align: center;
    padding-top: 25px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 373px
}

#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 sup {
    font-weight: 400;
    color: #ddd;
    top: -10px
}

#iol-mailpec .offerta header .btn {
    margin-top: 20px
}

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

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

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

#iol-mailpec .offerta footer p::before {
    content: '*';
    margin-left: -9px;
    padding-right: 5px
}

#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
}

#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: 81px 0 39px 0;
    text-align: center
}

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

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

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

#hp-slide03 h5 {
    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 .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 .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 .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: 156px 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
}

body#iol-attiva {
    margin-top: 160px
}

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

#iol-attiva-casella {
    text-align: center
}

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

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

.activate {
    width: 100%;
    background: #001d35;
    color: #fff;
    display: none;
    position: sticky;
    bottom: 0;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .4s;
    padding: 1.1875rem 15px;
    z-index: 100000
}

.activate button {
    font-weight: 500;
    margin-left: 1.1875rem;
    padding-left: 1.1875rem;
    padding-right: 1.1875rem
}

@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
    }

    .activate {
        padding: .75rem 15px;
        line-height: 1rem
    }

    .activate button {
        margin: .75rem auto 0;
        display: block
    }
}

@media(max-width:767.98px) {

    body#iol-home,
    body#iol-attiva {
        margin-top: 100px
    }

    .navbar {
        padding: .95rem 1rem .75rem 1rem
    }

    #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: 90px
    }

    #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 p {
        font-size: 20px;
        margin-bottom: 30px
    }
}