/************************** VIEWPORT */

@-webkit-viewport {width:device-width}
@-moz-viewport {width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport {width:device-width}
@viewport {width:device-width}



/************************** FONT */

@font-face {
    /* FONT */
    /* Definisce il FONT personalizzato usato nella pagina */
    /* NB: lo stesso FONT viene implementato in più formati per una maggior compatibilità con browser differenti */
    font-family: 'GeoSansLight';
    src: url('STF/FNT/GeoSansLight.eot');
    src: url('STF/FNT/GeoSansLight.eot?#iefix') format('embedded-opentype'), url('STF/FNT/GeoSansLight.woff') format('woff'), url('STF/FNT/GeoSansLight.woff2') format('woff2'), url('STF/FNT/GeoSansLight.ttf') format('truetype'), url('STF/FNT/GeoSansLight.svg#GeoSansLight') format('svg');
}



/************************** TAG GENERICI */

* {
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    margin: 0;
    border: none;
    padding: 0;

    box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    
    color: inherit;
    text-decoration: none;
    
    overflow: hidden;
}

.link {
    color: #00aad4;
    text-decoration: underline;
}

html {background: #FFF;}

body {
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100%;
    width: 100%;
    
    z-index: 0;
}

#MantleBee_HighWay_SECTION {
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100%;
    width: 100%;

    font-family: GeosansLight;
    color: #000;

    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}


    .clCELL {
        display: block;

        position: absolute;

        height: 100%;
        width: 100%;

            border-radius: 100%;

        font-size: 0;

        background-image: url('STF/IMG/imsSERVICES.svg');
        background-repeat: no-repeat;
        background-size: 100%;

        transition: all 300ms;
        -o-transition: all 300ms;
        -ms-transition: all 300ms;
        -moz-transition: all 300ms;
        -webkit-transition: all 300ms;
    }
    .clCELL:hover {
        transform: scale(0.9);
        -o-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }

/*.clINVERTED {
    filter: invert(100%);
    -o-filter: invert(100%);
    -moz-filter: invert(100%);
    -webkit-filter: invert(100%);
}*/


/* ================================= TMP Lingua */


.lnENG,
.lnFRA,
.lnDEU {
    display: none;
}



/**************************************************************************/
/*  MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE */
/*  MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE */
/*  MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE */

@media only screen and (max-device-width: 767px) and (orientation: landscape),
/* la condizione precedente e quella seguente servono a escludere i 768px caratterizzanti
 * gli errori di visualizzazione su iPad senza penalizzare gli 800px di alcuni smartphone:
 * l'iPad utilizza una risoluzione simulata di 768x1024 sia in Portrait che in Landscape */
only screen and (min-device-width: 769px) and (max-device-width: 800px) and (orientation: landscape),
    only screen and (max-device-width: 480px) and (orientation: portrait) {


    /* --------------------------------- TAG GENERICI */


    .idHIVE {
        position: absolute;
        top: 20vw;

        height: 22vw;
        width: 22vw;

        overflow: visible;
    }
        .clN1 {
            top: 0;
            left: 0;
            background-position: left 0 bottom 5%;
        }
        .clN2 {
            top: 90%;
            left: 0;
            background-position: left 0 bottom 10%;
        }
        .clN3 {
            top: 45%;
            left: 78%;
            background-position: left 0 bottom 15%;
        }
        .clN4 {
            top: 135%;
            left: 78%;
            background-position: left 0 bottom 20%;
        }
        .clN5 {
            top: 0;
            left: 156%;
            background-position: left 0 bottom 25%;
        }
        .clN6 {
            top: 90%;
            left: 156%;
            background-position: left 0 bottom 30%;
        }
        .clN7 {
            top: 180%;
            left: 156%;
            background-position: left 0 bottom 35%;
        }
        .clN8 {
            top: 45%;
            left: 234%;
            background-position: left 0 bottom 40%;
        }
        .clN9 {
            top: 135%;
            left: 234%;
            background-position: left 0 bottom 45%;
        }
        .clN10 {
            top: 90%;
            left: 312%;
            background-position: left 0 bottom 50%;
        }
        .clN11 {
            top: 180%;
            left: 312%;
            background-position: left 0 bottom 55%;
        }
        .clNX {
            background-position: left 0 bottom 0;
        }


    /* --------------------------------- SECTION */


    #MantleBee_HighWay_SECTION {
        text-align: center;
        font-size: 7vw;

        overflow-y: auto;
    }


    /* --------------------------------- HEADER */


    #MantleBee_HighWay_HEADER {
        position: absolute;

        height: 26vw;
        width: 100%;

        padding: 5vw;

        font-size: 19vw;

        overflow: visible;
    }


    /* --------------------------------- ARTICLE */


    #MantleBee_HighWay_ARTICLE {
        position: absolute;
        top: 21vw;

        height: 85vw;
        width: 100%;

        padding: 0 5vw;
    }

    /* ................................. pag MANTLEBEE */

    #MANTLEBEE {
    }

    #MANTLEBEE .idSUBTITLE {font-size: 6.4vw;}

    #MANTLEBEE .idGRAPHIC,
    #MANTLEBEE .idCONTRACTS,
    #MANTLEBEE .idWEB,
    #MANTLEBEE .idHARDWARE {
        display: inline-block;

        font-size: 5.4vw;
    }
    #MANTLEBEE .idGRAPHIC {color: #00aad4;}
    #MANTLEBEE .idCONTRACTS {color: #2eadad;}
    #MANTLEBEE .idWEB {color: #6ab27b;}
    #MANTLEBEE .idHARDWARE {color: #f8bd05;}

    /* ................................. pag CAMP */

    #CAMP {}

    /* ................................. pag PROGRAMS */

    #PROGRAMS {}

    /* ................................. pag CONTACTS */

    #CONTACTS {}


    /* --------------------------------- DETAILS */


    .idDETAILS {
        position: absolute;
        top: 110vw;

        height: 40vw;
        width: 100%;

        padding: 5vw;

        font-size: 4.5vw;

        background: #EEE;
    }

    /* ................................. LOGO */

    .idDETAILS .idLOGO {
        float: left;

        height: 30vw;
        width: 30vw;

        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* ................................. TEXT */

    .idDETAILS .idTEXT {
        float: right;

        height: 30vw;
        width: 55vw;

        overflow-y: auto;
    }

    /* ................................. DEFAULT */

    .idDETAILS .idDEFAULT {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;
        width: 100%;

        padding: 5vw;
    }
    .idDETAILS .idDEFAULT p {
        margin: 2vw 0 0 0;
        font-size: 10vw;
    }


    /* --------------------------------- ASIDE */


    #MantleBee_ASIDE {
        position: absolute;
        top: 155vw;

        width: 100%;

        overflow: visible;
    }

    #MantleBee_ASIDE.clLFT {}
    #MantleBee_ASIDE.clRGT {}

    /* ................................. NEWS */

    #MantleBee_ASIDE .idNEWS {}

    #MantleBee_ASIDE .idNEWS .idTW_BOX {
        margin: 5vw;
        border-left: 3px dotted #000;
        padding: 0 5vw;

        font-size: 6vw;
        text-align: left;
    }

    #MantleBee_ASIDE .idNEWS .idTW_BOX p {margin: 2vw 0 0 0;}

    #MantleBee_ASIDE .idLOADMORE {display: none;}

        #MantleBee_ASIDE .ICO {
            display: inline-block;

            height: 15vw;
            width: 15vw;

            margin: 0 5vw;

            background-image: url(STF/IMG/imsSOCIALICONS.svg);
            background-repeat: no-repeat;
            background-size: 100%;

            opacity: 0.5;
        }
        #MantleBee_ASIDE .ICO:hover {opacity: 1;}
    
        #MantleBee_ASIDE .ICO.FACEBOOK_WHITE {background-position: left 0 bottom 60%;}
        #MantleBee_ASIDE .ICO.GOOGLE_WHITE {background-position: left 0 bottom 70%;}
        #MantleBee_ASIDE .ICO.TWITTER_WHITE {background-position: left 0 bottom 80%;}


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


    #MantleBee_HighWay_FOOTER {}


}



/**************************************************************************/
/*  TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET */
/*  TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET */
/*  TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET TABLET */

@media only screen and (min-device-width: 801px) and (max-device-width: 1280px) and (orientation: landscape),
only screen and (min-device-width: 481px) and (max-device-width: 800px) and (orientation: portrait),
/* la condizione seguente serve a correggere i problemi di visualizzazione su iPad:
 * l'iPad utilizza una risoluzione simulata di 768x1024 sia in Portrait che in Landscape */
only screen and (device-width: 768px) and (orientation: landscape) {


    /* --------------------------------- TAG GENERICI */


    .idHIVE {
        position: absolute;
        top: 10vw;
        left: 6vw;

        height: 14vw;
        width: 14vw;

        overflow: visible;
    }
        .clN1 {
            top: 0;
            left: 0;
            background-position: left 0 bottom 5%;
        }
        .clN2 {
            top: 90%;
            left: 0;
            background-position: left 0 bottom 10%;
        }
        .clN3 {
            top: 45%;
            left: 78%;
            background-position: left 0 bottom 15%;
        }
        .clN4 {
            top: 135%;
            left: 78%;
            background-position: left 0 bottom 20%;
        }
        .clN5 {
            top: 0;
            left: 156%;
            background-position: left 0 bottom 25%;
        }
        .clN6 {
            top: 90%;
            left: 156%;
            background-position: left 0 bottom 30%;
        }
        .clN7 {
            top: 180%;
            left: 156%;
            background-position: left 0 bottom 35%;
        }
        .clN8 {
            top: 45%;
            left: 234%;
            background-position: left 0 bottom 40%;
        }
        .clN9 {
            top: 135%;
            left: 234%;
            background-position: left 0 bottom 45%;
        }
        .clN10 {
            top: 90%;
            left: 312%;
            background-position: left 0 bottom 50%;
        }
        .clN11 {
            top: 180%;
            left: 312%;
            background-position: left 0 bottom 55%;
        }
        .clNX {
            background-position: left 0 bottom 0;
        }


    /* --------------------------------- SECTION */


    #MantleBee_HighWay_SECTION {
        text-align: center;
        font-size: 7vw;

        overflow-y: auto;
    }


    /* --------------------------------- HEADER */


    #MantleBee_HighWay_HEADER {
        position: absolute;

        height: 10vw;
        width: 70%;

        /*padding: 5vw;*/

        font-size: 12vw;

        overflow: visible;
    }


    /* --------------------------------- ARTICLE */


    #MantleBee_HighWay_ARTICLE {
        position: absolute;
        top: 10vw;

        height: 50vw;
        width: 70%;

        /*padding: 0 5vw;*/
    }

    /* ................................. pag MANTLEBEE */

    #MANTLEBEE {}

    #MANTLEBEE .idSUBTITLE {font-size: 4.3vw;}

    #MANTLEBEE .idGRAPHIC,
    #MANTLEBEE .idCONTRACTS,
    #MANTLEBEE .idWEB,
    #MANTLEBEE .idHARDWARE {
        display: inline-block;

        position: relative;
        top: -3vw;

        font-size: 3.5vw;
    }
    #MANTLEBEE .idGRAPHIC {color: #00aad4;}
    #MANTLEBEE .idCONTRACTS {color: #2eadad;}
    #MANTLEBEE .idWEB {color: #6ab27b;}
    #MANTLEBEE .idHARDWARE {color: #f8bd05;}

    /* ................................. pag CAMP */

    #CAMP {}

    /* ................................. pag PROGRAMS */

    #PROGRAMS {}

    /* ................................. pag CONTACTS */

    #CONTACTS {}


    /* --------------------------------- DETAILS */


    .idDETAILS {
        position: absolute;
        top: 20vw;
        right: 2vw;

        height: 38.5vw;
        width: 26vw;

        /*padding: 5vw;*/
    }

    /* ................................. LOGO */

    .idDETAILS .idLOGO {
        height: 18vw;
        width: 18vw;

        margin: 0 4vw;

        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* ................................. TEXT */

    .idDETAILS .idTEXT {
        position: absolute;

        height: 22vw;
        width: 100%;

        font-size: 1.8vw;
        text-align: justify;

        overflow-y: auto;
    }

    /* ................................. DEFAULT */

    .idDETAILS .idDEFAULT {
        position: absolute;
        bottom: 0;
        left: 0;

        height: auto;
        width: 100%;

        /*padding: 5vw;*/

        font-size: 1.3vw;
    }
    .idDETAILS .idDEFAULT p {
        margin: 0.5vw 0 0 0;
        font-size: 2vw;
    }


    /* --------------------------------- ASIDE */


    #MantleBee_ASIDE {
        position: absolute;
        top: 2vw;
        right: 2vw;

        height: auto;
        width: 26vw;

        overflow: visible;
    }

    #MantleBee_ASIDE.clLFT {}
    #MantleBee_ASIDE.clRGT {}

    /* ................................. NEWS */

    #MantleBee_ASIDE .idNEWS {}

    #MantleBee_ASIDE .idNEWS .idTW_BOX {
        /*position: absolute;
        top: 0.5vw;
        left: 3vw;*/

        height: auto;
        width: 100%;

        /*margin: 1vw;*/
        border-left: 3px dotted #000;
        padding: 0 1vw;

        font-size: 1vw;
        text-align: left;
    }
        #MantleBee_ASIDE .idNEWS .idTW_BOX p {margin: 0.5vw 0;}

    #MantleBee_ASIDE .idLOADMORE {display: none;}

        #MantleBee_ASIDE .ICO {
            display: inline-block;
            /*float: left;*/

            height: 5vw;
            width: 5vw;

            /*margin: 0 1vw;*/

            background-image: url(STF/IMG/imsSOCIALICONS.svg);
            background-repeat: no-repeat;
            background-size: 100%;

            opacity: 0.5;
        }
        #MantleBee_ASIDE .ICO:hover {opacity: 1;}
    
        #MantleBee_ASIDE .ICO.FACEBOOK_WHITE {background-position: left 0 bottom 60%;}
        #MantleBee_ASIDE .ICO.GOOGLE_WHITE {background-position: left 0 bottom 70%;}
        #MantleBee_ASIDE .ICO.TWITTER_WHITE {background-position: left 0 bottom 80%;}


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


    #MantleBee_HighWay_FOOTER {}


}



/************************************************************************************/
/*  DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP */
/*  DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP */
/*  DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP DESKTOP */

@media only screen and (min-device-width: 1281px) and (orientation: landscape),
only screen and (min-device-width: 801px) and (orientation: portrait) {


    /* --------------------------------- TAG GENERICI */


    .idHIVE {
        position: absolute;
        top: 23vw;
        left: 25vw;

        height: 8vw;
        width: 8vw;

        overflow: visible;
    }
        .clN1 {
            top: 0;
            left: 0;
            background-position: left 0 bottom 5%;
        }
        .clN2 {
            top: -90%;
            left: 0;
            background-position: left 0 bottom 10%;
        }
        .clN3 {
            top: -135%;
            left: 78%;
            background-position: left 0 bottom 15%;
        }
        .clN4 {
            top: -45%;
            left: 78%;
            background-position: left 0 bottom 20%;
        }
        .clN5 {
            top: -90%;
            left: 156%;
            background-position: left 0 bottom 25%;
        }
        .clN6 {
            top: -135%;
            left: 234%;
            background-position: left 0 bottom 30%;
        }
        .clN7 {
            top: -90%;
            left: 312%;
            background-position: left 0 bottom 35%;
        }
        .clN8 {
            top: -135%;
            left: 390%;
            background-position: left 0 bottom 40%;
        }
        .clN9 {
            top: -180%;
            left: 312%;
            background-position: left 0 bottom 45%;
        }
        .clN10 {
            top: -180%;
            left: 468%;
            background-position: left 0 bottom 50%;
        }
        .clN11 {
            top: -90%;
            left: 468%;
            background-position: left 0 bottom 55%;
        }
        .clNX {
            background-position: left 0 bottom 0;
        }


    /* --------------------------------- SECTION */


    #MantleBee_HighWay_SECTION {
        text-align: center;
        font-size: 7vw;

        overflow-y: auto;
    }


    /* --------------------------------- HEADER */


    #MantleBee_HighWay_HEADER {
        position: absolute;

        height: 8vw;
        width: 100%;

        /*padding: 5vw;*/

        font-size: 10vw;

        overflow: visible;
    }


    /* --------------------------------- ARTICLE */


    #MantleBee_HighWay_ARTICLE {
        position: absolute;
        top: 8vw;

        height: 30.5vw;
        width: 100%;

        /*padding: 0 5vw;*/
    }

    /* ................................. pag MANTLEBEE */

    #MANTLEBEE {}

    #MANTLEBEE .idSUBTITLE {font-size: 3.6vw;}

    #MANTLEBEE .idGRAPHIC,
    #MANTLEBEE .idCONTRACTS,
    #MANTLEBEE .idWEB,
    #MANTLEBEE .idHARDWARE {
        display: inline-block;

        position: relative;
        top: -3.5vw;

        font-size: 2.7vw;
    }
    #MANTLEBEE .idGRAPHIC {color: #00aad4;}
    #MANTLEBEE .idCONTRACTS {color: #2eadad;}
    #MANTLEBEE .idWEB {color: #6ab27b;}
    #MANTLEBEE .idHARDWARE {color: #f8bd05;}

    /* ................................. pag CAMP */

    #CAMP {}

    /* ................................. pag PROGRAMS */

    #PROGRAMS {}

    /* ................................. pag CONTACTS */

    #CONTACTS {}


    /* --------------------------------- DETAILS */


    .idDETAILS {
        position: absolute;
        top: 8vw;
        right: 2vw;

        height: 40vw;
        width: 20vw;

        /*padding: 5vw;*/
    }

    /* ................................. LOGO */

    .idDETAILS .idLOGO {
        height: 18vw;
        width: 18vw;

        margin: 0 1vw;

        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* ................................. TEXT */

    .idDETAILS .idTEXT {
        position: absolute;

        height: 22vw;
        width: 100%;

        font-size: 1.5vw;
        text-align: justify;

        overflow-y: auto;
    }

    /* ................................. DEFAULT */

    .idDETAILS .idDEFAULT {
        position: absolute;
        bottom: 0;
        left: 0;

        height: auto;
        width: 100%;

        /*padding: 5vw;*/

        font-size: 1vw;
    }
    .idDETAILS .idDEFAULT p {
        margin: 0.5vw 0 0 0;
        font-size: 2vw;
    }


    /* --------------------------------- ASIDE */


    #MantleBee_ASIDE {
        position: absolute;
        top: 2vw;
        left: 2vw;

        height: auto;
        width: 20vw;

        overflow: visible;
    }

    #MantleBee_ASIDE.clLFT {}
    #MantleBee_ASIDE.clRGT {}

    /* ................................. NEWS */

    #MantleBee_ASIDE .idNEWS {}

    #MantleBee_ASIDE .idNEWS .idTW_BOX {
        position: absolute;
        top: 0.5vw;
        left: 3vw;

        height: auto;

        border-left: 3px dotted #000;
        padding: 0 0 0 0.5vw;

        font-size: 1vw;
        text-align: left;
    }
        #MantleBee_ASIDE .idNEWS .idTW_BOX p {margin: 0.5vw 0;}

    #MantleBee_ASIDE .idLOADMORE {display: none;}

        #MantleBee_ASIDE .ICO {
            display: block;
            /*float: left;*/

            height: 2vw;
            width: 2vw;

            margin: 0.5vw 0;

            background-image: url(STF/IMG/imsSOCIALICONS.svg);
            background-repeat: no-repeat;
            background-size: 100%;

            opacity: 0.5;
        }
        #MantleBee_ASIDE .ICO:hover {opacity: 1;}
    
        #MantleBee_ASIDE .ICO.FACEBOOK_WHITE {background-position: left 0 bottom 60%;}
        #MantleBee_ASIDE .ICO.GOOGLE_WHITE {background-position: left 0 bottom 70%;}
        #MantleBee_ASIDE .ICO.TWITTER_WHITE {background-position: left 0 bottom 80%;}


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


    #MantleBee_HighWay_FOOTER {}


}



/************************************************************************/
/*  ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP */
/*  ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP */
/*  ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP ULTRA HD DESKTOP */

/*@media only screen and (min-device-width: 1921px) and (orientation: landscape),
only screen and (min-device-width: 1080px) and (orientation: portrait) {
    body {
        position: absolute;
        top: 0;
        left: 50%;
        
        width: 1920px;
        
        margin: 0 0 0 -960px;    
    }
}*/