/* reset CSS */



    @keyframes cssload-spin {

        100% {

            -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

            transform: rotate(360deg);

        }

    }



    @-webkit-keyframes cssload-spin {

        100% {

            -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

        }

    }



    @font-face {

        font-family: 'Futura L';

        src: url('../fonts/FuturaStd-CondensedLight.otf') format('opentype');

        font-weight: normal;

        font-style: normal;

    }



    @font-face {

        font-family: 'Futura M';

        src: url('../fonts/FuturaStd-CondensedMedium.otf') format('opentype');

        font-weight: normal;

        font-style: normal;

    }



    @font-face {

        font-family: 'Futura B';

        src: url('../fonts/FuturaStd-CondensedBold.otf') format('opentype');

        font-weight: normal;

        font-style: normal;

    }



    * {

        padding: 0;

        margin: 0;

        outline: none !important;

    }



    html,

    body {

        max-width: 100%;

        overflow-x: hidden;

    }



    body {

        font-family: "Futura L", sans-serif;

        color: #2E2D2D !important;

        font-weight: normal;

        font-size: 20px;

        line-height: 30px;

        -webkit-font-smoothing: antialiased !important;

        -moz-osx-font-smoothing: grayscale !important;

        text-rendering: optimizeLegibility !important;

    



    }



    .container {

        max-width: 1400px !important;

    }



    a {

        color: inherit;

        text-decoration: none;

        cursor: pointer !important;

        display: inline-block;

    }



    a.lang {

        font-family: "Futura M", sans-serif;

        color: #002E5A;

        font-size: 14px;

        border: 1px solid #002E5A;

        padding: 1px 10px;

        transition: all .3s ease-in-out;

    }



    a.lang:hover {

        color: #fff;

        background: #002E5A;



    }



    b {

        font-family: "Futura B", sans-serif;

        font-weight: normal;

    }



    .py-80 {

        padding-top: 80px;

        padding-bottom: 80px;

    }



    .pb-80 {

        padding-bottom: 80px;

    }



  





    /* ---------------------------  CUSTOM  ---------------------------*/



    .logo-roda {

        height: 50px;

        width: auto;

        transition: all .2s ease-in-out;

    }



    .logo-rodasteel {

        height: 65px;

        width: auto;

        transition: all .2s ease-in-out;

    }



    .logo-madeinsteel {

        height: 190px;

        width: auto;

        transition: all .2s ease-in-out;

    }



    .logo-r {

        height: 180px;

        width: auto;

        transition: all .2s ease-in-out;

    }



    .bg-blue {

        background: #002E5A;

    }



    .bg-grey-l {

        background: #FAFAFC !important;

    }



    p {

        font-family: 'Futura L', sans-serif;

        font-size: 20px;

        line-height: 28px;

        margin-bottom: 0;

    }



    .title-maxi {

        font-family: 'Futura M', sans-serif;

        color: #002E5A;

        font-size: 90px;

        line-height: 90px;

    }



    .title-big {

        font-family: 'Futura M', sans-serif;

        color: #002E5A;

        font-size: 70px;

        line-height: 68px;

    }



    .title-med {

        font-family: 'Futura M', sans-serif;

        color: #002E5A;

        font-size: 40px;

        line-height: 48px;

    }



    .title-small {

        font-family: 'Futura M', sans-serif;

        color: #002E5A;

        font-size: 30px;

        line-height: 38px;

    }



    .btn {

        font-family: 'Futura M', sans-serif;

        border-radius: 0;

        font-size: 20px;

        color: #002E5A;

        line-height: 20px;

        transition: all .2s ease-in-out;

        padding: 0;

        text-transform: uppercase;

    }



    .btn::before {

        height: 30px;

        width: 2px;

        background: #6491C3;

        content: '';

        margin-right: 10px;

        display: inline-block;

        vertical-align: -40%;

        transition: all .2s ease-in-out;



    }





    .btn:hover::before {

        margin-right: 20px;

    }



    .testata {

        background-image: url(../../images/testata-madeinsteel.jpg);

        background-position: center right;

        background-repeat: no-repeat;

        background-size: cover;

        height: 870px;

        transition: all .3s ease-in-out;



    }



    .fascia-roda {

        background-image: url(../../images/img-rodacciaia.jpg);

        background-position: center center;

        background-repeat: no-repeat;

        background-size: cover;

        height: 1000px;

        transition: all .3s ease-in-out;

    }



    /* ---------------------------  BOX  ---------------------------*/



    .box-why {

        background-color: #F6F6F6;

        border-radius: 15px;

        padding: 50px;

        position: relative;

    }



    .box-why .ico {

        height: 100px;

        width: auto;

    }



    .box-home {

        position: relative;

        margin-top: -200px;

        z-index: 1;

    }













    /* ---------------------------  CONTACT FORM  ---------------------------*/



    .contact-form label {

        font-family: 'Futura M', sans-serif !important;

        font-size: 16px;

        margin-bottom: 3px;

        display: inline-block;

    }



    .contact-form .form-control {

        font-family: 'Futura M', sans-serif !important;

        display: block;

        width: 100%;

        padding: 0.6rem 0.75rem !important;

        font-size: 16px !important;

        line-height: 1.5rem;

        color: #2E2D2D !important;

        background-color: #f6f6f6;

        background-clip: padding-box;

        border: 0px solid #ced4da;

        border-bottom: 2px solid #6491C3;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        border-radius: 0px !important;

        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    }



    .contact-form .form-select {

        --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);

        display: block;

        width: 100%;

        padding: .375rem 2.25rem .375rem .75rem;

        font-family: 'Futura M', sans-serif !important;

        font-size: 16px !important;

        font-weight: normal;

        line-height: 1.9;

        color: #2E2D2D;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        background-color: #f6f6f6;

        background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);

        background-repeat: no-repeat;

        background-position: right .75rem center;

        background-size: 16px 12px;

        border: 0px solid #ced4da;

        border-bottom: 2px solid #6491C3;

        border-radius: 0px !important;

        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    }



    .contact-form label.form-check-label.privacy {

        font-family: 'Futura L', sans-serif !important;

        color: #ffffff;

        font-size: 14px;

        line-height: 16px;



    }



    .contact-form label.form-check-label.privacy a:hover {

        opacity: 0.75;

    }





    .contact-form ::placeholder {

        font-family: 'Futura M', sans-serif !important;

        color: #2E2D2D !important;

        font-size: 16px !important;

    }





    /* ---------------------------  FOOTER  ---------------------------*/



    .footer {

        font-family: 'Futura L', sans-serif;

        color: #ffffff;

        font-size: 18px !important;

        line-height: 28px;

    }



    .footer-logo {

        height: 40px;

        width: auto;

        transition: all .2s ease-in-out;

    }



    .footer .icon {

        height: 20px;

        width: auto;

    }





    .footer h3 {

        font-family: 'Futura M', sans-serif;

        color: #ffffff;

        font-size: 18px !important;

        line-height: 30px;

        text-transform: uppercase;

        vertical-align: bottom;

    }



    .footer p {

        font-family: 'Futura L', sans-serif;

        color: #ffffff;

        font-size: 20px !important;

        line-height: 30px;

        margin-bottom: 0;

    }



    .footer p.credits {

        font-family: 'Futura L', sans-serif;

        color: #ffffff;

        font-size: 14px !important;

        line-height: 22px;

        margin-bottom: 0;

    }



    .footer a {

        color: #ffffff;

        line-height: 36px;

    }



    .footer a:hover,

    .subfooter a:hover {

        opacity: 0.7;

    }







    /*------------ RESPONSIVE MEDIA ------------*/

    /* X-Small devices (portrait phones, less than 576px) */

    /* No media query for `xs` since this is the default in Bootstrap */

    /* Small devices (landscape phones, 576px and up) */



    @media (min-width: 576px) {}



    /* Medium devices (tablets, 768px and up) */



    @media (min-width: 768px) {}



    /* Large devices (desktops, 992px and up) */



    @media (min-width: 992px) {}



    /* X-Large devices (large desktops, 1200px and up) */



    @media (min-width: 1200px) {}



    /* XX-Large devices (larger desktops, 1400px and up) */



    @media (min-width: 1200px) {}



    @media (min-width: 1400px) {}



    @media (min-width: 1600px) {}



    @media (max-width: 575px) {



    }



    @media (max-width: 991px) {



        html,

        body {

            max-width: 100%;

            overflow-x: hidden;

        }



        .box-why {

            background-color: #F6F6F6;

            border-radius: 15px;

            padding: 30px;

            position: relative;

        }



        .box-why .ico {

            height: 80px;

            width: auto;

        }

    

        

        .fascia-roda {

            background-position: center right;

            height: 500px;

            transition: all .3s ease-in-out;

        }

    

        

        .logo-roda {

            height: 30px;

            width: auto;

            transition: all .2s ease-in-out;

        }

    

        .logo-rodasteel {

            height: 40px;

            width: auto;

            transition: all .2s ease-in-out;

        }

    

        .logo-madeinsteel {

            height: 100px;

            width: auto;

            transition: all .2s ease-in-out;

        }



        .logo-r {

            height: 100px;

            width: auto;

            transition: all .2s ease-in-out;

        }

    



        .title-maxi {

            font-family: 'Futura M', sans-serif;

            color: #002E5A;

            font-size: 60px;

            line-height: 60px;

        }

    

        .title-big {

            font-family: 'Futura M', sans-serif;

            color: #002E5A;

            font-size: 50px;

            line-height: 58px;

        }

    

        .title-med {

            font-family: 'Futura M', sans-serif;

            color: #002E5A;

            font-size: 28px;

            line-height: 36px;

        }

    

        .title-small {

            font-family: 'Futura M', sans-serif;

            color: #002E5A;

            font-size: 24px;

            line-height: 32px;

        }

        

        p {

            font-family: 'Futura L', sans-serif;

            font-size: 18px;

            line-height: 26px;

            margin-bottom: 0;

        }

        



        .footer-logo {

            height: 30px;

            width: auto;

            transition: all .2s ease-in-out;

        }



        .footer p {

            font-size: 18px !important;

            line-height: 28px;

        }



        .footer a {

            line-height: 30px;

        }



        .py-80 {

            padding-top: 40px;

            padding-bottom: 40px;

        }

    

        .pb-80 {

            padding-bottom: 40px;

        }

    

    

    

    

    

    







    }



    @media (max-width: 1199px) {

        .testata {

            background-position: center left;

            height: 670px;

        } 



    }



    @media (min-width: 767px) and (max-width: 991px) {



    }