@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"),
         local("OpenSans-Light"),
         url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"),
         local("OpenSans-Regular"),
         url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"),
         local("OpenSans-Bold"),
         url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Laerbium;
    src: url(https://www.laerbium.com/wp-content/themes/laerbium/fonts/laerbium-webfont.woff2) format("woff2"),
         url(https://www.laerbium.com/wp-content/themes/laerbium/fonts/laerbium-webfont.woff) format("woff"),
         url(https://www.laerbium.com/wp-content/themes/laerbium/fonts/laerbium-webfont.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

html {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

a,
a:hover {
    text-decoration: none;
    color: inherit;
}

.gradient {
    background-color: #fbd8bc;
    background-image:
        radial-gradient(at 58% 82%, #8c9b93 0, transparent 50%),
        radial-gradient(at 91% 43%, #d96526 0, transparent 50%),
        radial-gradient(at 12% 100%, #38564a 0, transparent 50%),
        radial-gradient(at 88% 97%, #38564a 0, transparent 50%),
        radial-gradient(at 100% 4%, #fff 0, transparent 50%);
}

#ricordami {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #38564a;
    font-size: 19px;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    background-attachment: fixed;
}

h1 {
    font-size: 2.5rem;
    margin-top: auto;
}

.descrizione {
    max-width: 690px;
    margin: 1rem auto;
    text-wrap: balance;
}

.punti {
    margin: 2rem auto;
    padding: 0;
    font-size: 16px;
    text-align: left;
    width: 100%;
    max-width: 540px;
    counter-reset: punti;
}

.punti li {
    list-style-type: none;
    display: flex;
    align-items: center;
    line-height: 1;
    padding-bottom: 1.25rem;
}

.punti li:before {
    content: counter(punti);
    counter-increment: punti;
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #38564a;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

.punti li div {
    flex: 1;
}

#calendar-form {
    background: rgba(255,255,255,.85);
    width: 100%;
    max-width: 540px;
    min-height: 300px;
    border-radius: 2rem;
    margin: auto;
    box-shadow: 0 14px 41px 11px rgba(56,86,74,.3);
    text-align: center;
    padding: 2rem 3rem;
}

#calendar-form #date-field-label {
    text-transform: uppercase;
    margin-bottom: 1rem;
}

#calendar-form #generate-calendar:disabled {
    background: #38564a;
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

#calendar-form #loading {
    display: none;
}

#calendar-form #download-link {
    background: #d96526;
    border-radius: 2rem;
    font-size: 1.25rem;
    line-height: 1.2;
    white-space: normal;
}

#calendar-form #download-link:hover {
    color: #fff;
    background: #38564a;
}

.disclaimer {
    font-size: 14px;
    color: #38564a;
    display: block;
    max-width: 640px;
    margin: 3rem auto 0 auto;
}

#date-field {
    font-size: 18px;
    font-family: 'Open Sans';
    padding: .5rem;
    display: block;
    width: 100%;
    border-radius: 2rem;
    margin: 1.5rem auto 2.5rem auto;
    font-size: 1.25rem;
    border: 0;
    text-align: center;
    color: #fff;
    background: #38564a;
}

#date-field:-webkit-calendar-picker-indicator {
    filter: invert(30%);
}

#date-field::-webkit-inner-spin-button,
#date-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.button {
    background: #d96526;
    border: 0;
    padding: .5rem 1rem;
    border-radius: 2rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.button:hover {
    background: #dd743c;
}

.button-outline {
    background: transparent;
    border: 2px solid #38564a;
    color: #38564a;
}

.button-outline:hover {
    color: #d96526;
    background: transparent;
    border-color: #d96526;
}

.button-small {
    font-size: 16px;
}

#header {
    padding: 3rem 2rem;
    min-height: 80vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    position: relative;
}

#header .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(images/vitamina-b12.svg) no-repeat;
    background-size: contain;
    background-position: -300px 300px;
    background-blend-mode: lighten;
    opacity: .4;
    z-index: -1;
}

#section1 {
    min-height: 700px;
    padding: 6rem 3rem;
    background: rgba(255,255,255,.9);
    text-align: center;
    position: relative;
}

#section1 h2 {
    font-size: 3rem;
}

#section1 #immagine {
    width: 100%;
    max-width: 480px;
    margin: auto;
}

#section2 {
    padding: 7rem 3rem;
    text-align: center;
    position: relative;
}

#section2 .content {
    z-index: 1;
    position: relative;
}

#section2 a {
    margin-top: 1rem;
    display: inline-block;
}

#section2 .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(images/vitamina-b12.svg) no-repeat;
    background-size: contain;
    background-position: 110% 80%;
    background-blend-mode: lighten;
    opacity: .4;
    z-index: 0;
}

#footer {
    min-height: 400px;
    padding: 4rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: #38564a;
    background-image:
        radial-gradient(at 58% 82%, #38564a 0, transparent 50%),
        radial-gradient(at 91% 43%, #67776f 0, transparent 50%),
        radial-gradient(at 12% 100%, #263f35 0, transparent 50%),
        radial-gradient(at 88% 97%, #38564a 0, transparent 50%),
        radial-gradient(at 100% 4%, #263f35 0, transparent 50%);
    color: #a8b3ad;
    text-align: center;
    font-size: 14px;
}

.brand1 { color: #38564a; }
.brand2 { color: #d96526; }

.logo {
    font-family: Laerbium, sans-serif !important;
    line-height: 1;
    font-size: 130%;
}

.logo sup {
    font-size: 50%;
    font-family: 'Open Sans';
    font-weight: 400;
    top: -.3em;
    position: relative;
}

.logo .number {
    font-family: 'Open Sans';
    font-weight: 400;
}

/* Spinner */
.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 1rem auto;
}

.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #8c9b93;
}

.lds-spinner div:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.1s; }
.lds-spinner div:nth-child(2)  { transform: rotate(30deg);  animation-delay: -1.0s; }
.lds-spinner div:nth-child(3)  { transform: rotate(60deg);  animation-delay: -.9s; }
.lds-spinner div:nth-child(4)  { transform: rotate(90deg);  animation-delay: -.8s; }
.lds-spinner div:nth-child(5)  { transform: rotate(120deg); animation-delay: -.7s; }
.lds-spinner div:nth-child(6)  { transform: rotate(150deg); animation-delay: -.6s; }
.lds-spinner div:nth-child(7)  { transform: rotate(180deg); animation-delay: -.5s; }
.lds-spinner div:nth-child(8)  { transform: rotate(210deg); animation-delay: -.4s; }
.lds-spinner div:nth-child(9)  { transform: rotate(240deg); animation-delay: -.3s; }
.lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -.2s; }
.lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -.1s; }
.lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes lds-spinner {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.grecaptcha-badge {
    display: none;
}

/* Responsive */
@media screen and (min-width: 768px) {
    #ricordami { font-size: 23px; }
    h1 { font-size: 3.2rem; }
    #calendar-form #download-link { font-size: 1.75rem; }
    #date-field { font-size: 1.75rem; }
    .button { font-size: 1.75rem; }
}

@media screen and (max-width: 768px) {
    #section2 .bg {
        background-position: 300px 100px;
    }
}