@font-face {
    font-family: 'league_spartanbold';
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'), url('../fonts/leaguespartan-bold-webfont.woff') format('woff'), url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'), url('../fonts/leaguespartan-bold-webfont.svg#league_spartanbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Raleway', sans-serif;
    color: #444;
}

    body > section {
        padding-top: 8em;
        padding-bottom: 8em;
    }

.nav-link {
    color: #444;
    font-weight: 700;
    background-image: linear-gradient(to right, transparent 50%, #d2232b 50%);
    background-position: 0;
    background-size: 200%;
    transition: all 0.2s;
    padding: 0.25rem 0.5rem;
}

    .nav-link:hover {
        color: white;
        background-position: -100%;
        text-decoration: none;
    }

.title {
    position: relative;
}

    .title > span {
        position: absolute;
        z-index: -1;
        color: #f8f8f8;
        font-size: 5em;
        bottom: -7px;
        line-height: 1em;
        display: block;
        text-align: center;
        width: 100%;
        font-weight: 700;
    }

    .title > h3 {
        font-size: 2em;
        line-height: 1em;
        font-weight: 700;
        position: relative;
    }

        .title > h3::after {
            position: absolute;
            content: "";
            width: 48px;
            display: inline-block;
            border-bottom: 1px solid #d2232b;
            top: 50%;
            margin-left: 16px;
        }

.hero {
    padding-top: 6em;
    padding-bottom: 6em;
}

    .hero h4 {
        font-family: 'league_spartanbold';
        -webkit-text-stroke: 1px white;
        -webkit-text-stroke: 1px white;
        color: transparent;
        font-size: 4em;
        line-height: 1em;
        opacity: 0;
    }

    .hero span {
        font-family: 'league_spartanbold';
        color: white;
        font-size: 4em;
        line-height: 1em;
        opacity: 0;
        display: block;
    }

    .hero.red {
        background: #D2232B;
    }

    .hero.black {
        background: black;
    }

    .hero.contatti svg {
        width: auto;
        height: 128px;
        opacity:0;
    }

#logo-header{
    opacity:0;
    position:absolute;
    top:25%;
    left:50%;
    margin-left:-405px;
    height:128px;
    width:auto;
}

.item {
    /*opacity: 0;*/
    transition: all .2s ease-in-out;
    will-change: box-shadow, transform, background, transition;
    background:transparent;
}

    .item.animated {
        opacity: 1;
        animation-fill-mode: unset;
    }

    .item span {
        text-align: center;
        padding: 1em 2em;
        margin: 0 1em;
        display: inline-block;
        margin-top: -1em;
        background: linear-gradient(to right, #444 50%, #fff 50%);
        background-size: 210% 100%;
        background-position: right bottom;
        transition: all .2s ease-in-out;
    }

    .item:hover {
        opacity: 1;
        transform: translateY(-15px);
        transition: all .2s ease-in-out;
    }

        .item:hover span {
            background-position: left bottom;
            transition: all .2s ease-in-out;
            color:white;
        }

.ref {
    margin-top: 7em;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    transition: all .2s ease-in-out;
}

    .ref img, .ref svg {
        max-width: 70%;
        max-height: 64px;
    }

    .ref:hover {
        transform: scale(1.3);
        transition: all .2s ease-in-out;
    }

form input,
form textarea {
    border-radius: 0 !important;
}

.btn {
    border-radius: 0;
    background: linear-gradient(to right, #d2232b 50%, #444 50%);
    background-size: 210% 100%;
    background-position: right bottom;
    transition: all .2s ease;
    border-color: #444;
}

    .btn:hover, .btn:active {
        background-position: left bottom;
        border-color: #d2232b !important;
    }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #d2232b !important;
    border-color: #d2232b !important;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.editoriale img{
    height:32px;
    width:auto;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

@media (min-width:768px) {
    #logo {
        height: 48px;
        width: auto;
    }
}

@media (max-width:1400px) {
    #logo-header {
        height:64px;
        margin-left:-220px;
    }
}

@media (max-width:991px){
    #logo-header{
        display:none;
    }
}

@media (max-width:767px) {

    .navbar-collapse {
        background: white;
        padding: 1em;
    }

    .navbar-toggler {
        padding: 0;
    }

        .navbar-toggler:focus {
            outline: none;
        }

    .navbar-toggler-icon {
        color: #ced4da;
        width: auto;
        height: auto;
        vertical-align: top;
    }

    .nav-link {
        background-image: none;
    }

        .nav-link:hover {
            color: initial;
        }

    .hero h4, .hero span {
        font-size: 2em;
    }

    #logo-header {
        display:none;
    }

    .title h3 {
        font-size: 1.5em;
    }

    .title > span {
        font-size: 3em;
        bottom: -3px;
    }

    .slogan {
        width: auto;
        max-height: 12px;
    }
}