@charset "utf-8";
/* CSS Document */

/* Modifiers */
.x-hd 						{ display: none; }
.x-desktop 					{ display: none; }
.x-desktop-and-tablet		{ display: none; }
.x-tablet					{ display: none; }
.x-tablet-and-mobile		{ display: none; }
.x-mobile					{ display: none; }

/* -------------------------------------------------------------- */
/* HD 1080p (1920) and up */
/* -------------------------------------------------------------- */
@media only screen and (min-width: 2000px) {

    .x-hd { display: block; }
    .inline-desktop { display: inline; }
    .inline-mobile { display: none; }

    #periodic { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .element { width: 100px !important; height: 100px !important; }
    .element img { width: 35px !important; }

    .layer {width: 260px !important;}
    .top {width: 100% !important;}





    .information-system {
        width: 360px !important;
    }




    .purpose-goal { width: 100% !important; }
    .purpose-goal1 { width: 100% !important; }

    .layer-caption-left .legend, .layer-caption-middle .legend, .layer-caption-right .legend {
        width: 200px !important;
    }

    .description {
        font-size: 14px;
    }
}


/* -------------------------------------------------------------- */
/** HD (1680x1050) **/
/* -------------------------------------------------------------- */
@media only screen and (min-width: 1640px) and (max-width: 1720px) {

    .x-hd { display: block; }
    .inline-desktop { display: inline; }
    .inline-mobile { display: none; }
    .element {font-size: 13px !important}
    #periodic { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

    .element { width: 100px !important; height: 100px !important; font-size: 11px !important;}
    .element img { width: 35px !important; }





    .information-system {
        width: 280px !important;
    }



    .purpose-goal { width: 100% !important; }

    .layer-caption-left .legend, .layer-caption-middle .legend, .layer-caption-right .legend {
        width: 200px !important;
    }

}


@media only screen and (min-width: 1440px) {
    .x-hd { display: block;   display: inline-flex;
        flex-direction: row-reverse;}
    .inline-desktop { display: inline; }
    .inline-mobile { display: none; }

    #periodic { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

    .element { width: 68px !important; height: 68px !important; font-size: 9px !important;}
    .element img { width: 35px !important; }




    .information-system {
        width: 290px !important;
    }



    .purpose-goal { width: 100% !important; }

    .layer-caption-left .legend, .layer-caption-middle .legend, .layer-caption-right .legend {
        width: 200px !important;
    }

}


/* -------------------------------------------------------------- */
/* HD 720p (1280x720) and up */
/* -------------------------------------------------------------- */
@media only screen and (min-width: 1280px) and (max-width: 1439px) {

    .x-hd { display: block; }
    .inline-desktop { display: inline; }
    .inline-mobile { display: none; }

    #periodic { width: 100% !important; margin-left: auto; margin-right: auto; }
    .element { width: 65px !important; height: 65px !important; font-size: 9px !important; }
    .element img { width: 35px !important; }






    .purpose-goal {
        width: 975px !important;
    }


}


/* -------------------------------------------------------------- */
/* Horizontal iPad & traditional desktop 1024x768 */
/* -------------------------------------------------------------- */
@media only screen and (min-width: 981px) and (max-width: 1279px) {

    .x-desktop { display: block; }
    .inline-desktop { display: inline; }
    .inline-mobile { display: none; }

    #periodic { width: 100% !important; margin-left: auto; margin-right: auto; }
    .element { width: 60px !important; height: 60px !important; font-size: 8px !important; }
    .element img { width: 25px !important; }









    .purpose-goal {
        width: 750px !important;
        /*-moz-transform: rotate(0deg) !important;*/
        /*-webkit-transform: rotate(0deg) !important;*/
        /*-o-transform: rotate(0deg) !important;*/
        /*-ms-transform: rotate(0deg) !important;*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }

    .purpose-goal.x-desktop .element {
        /*-moz-transform: rotate(0deg) !important;*/
        /*-webkit-transform: rotate(0deg) !important;*/
        /*-o-transform: rotate(0deg) !important;*/
        /*-ms-transform: rotate(0deg) !important;*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }

    .purpose-goal.x-desktop .element:hover {
        /*-moz-transform: scale(1.6) rotate(0deg) !important;*/
        /*-webkit-transform: scale(1.6) rotate(0deg) !important;*/
        /*-o-transform: scale(1.6) rotate(0deg) !important;*/
        /*-ms-transform: scale(1.6) rotate(0deg) !important;*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }
}


/* -------------------------------------------------------------- */
/* Common to only vertical & horizontal iPhone */
/* -------------------------------------------------------------- */
@media only screen and (max-width: 980px) {

    .x-hd-and-desktop { display: none; }
    .x-mobile { display: block; }
    .inline-desktop { display: none; }
    .inline-mobile { display: inline; }

    body { padding: 5px; font-size: 10px !important; line-height: 12px !important; }
    h1 { font-size: 18px !important; }
    p { text-align: justify; font-size: 10px !important; }

    #periodic { width: 450px !important; margin-left: auto; margin-right: auto; }

    .top {
        float: none !important;
        /*-moz-transform:rotate(0deg) !important;*/
        /*-webkit-transform:rotate(0deg) !important;*/
        /*-o-transform:rotate(0deg) !important;*/
        /*-ms-transform:rotate(0deg) !important;*/
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }

    .layer {
        position: static !important;
        float: none !important;
        width: 100% !important;

        -moz-transform: none !important;
        -webkit-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }

    .element {
        float: left !important;
        -moz-transform: none !important;
        -webkit-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
        z-index: 1 !important;
    }

    .element:hover {
        -webkit-transform: scale(1.3) !important;
        -moz-transform: scale(1.3) !important;
        -ms-transform: scale(1.3) !important;
        -o-transform: scale(1.3) !important;
        transform: scale(1.3) !important;
        z-index: 9999 !important;
        box-shadow: 0 0 30px rgba(0,0,0,0.9)
    }

    .element { font-size: 15px !important; width: 90px !important; height: 90px !important; }
    .element small { font-size: 14px !important; }
    .element img { width: 50px !important; }

    .e-34 { float: left !important; }
    .e-18 { float: left !important; }

    .purpose-goal {
        -moz-transform: none !important;
        -webkit-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
    }


    .caption { margin: 40px 0 !important; }

    .layer-caption-left, .layer-caption-middle, .layer-caption-right {
        width: 100% !important;
        float: none !important;
    }

    .layer-caption-middle {
        margin: 30px 0 !important; padding: 0 !important;
    }

    .layer-caption-left .legend, .layer-caption-middle .legend, .layer-caption-right .legend {
        width: 210px !important;
    }
    .description { font-size: 14px !important; }
    .info-box { width: 100% !important; float: none !important; padding: 0 !important; }

}


/* -------------------------------------------------------------- */
/* Vertical iPhone */
/* -------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

    body { padding: 5px; font-size: 16px !important; line-height: 19px !important; }
    h1 { font-size: 30px !important; }
    p { text-align: justify; font-size: 16px !important; }


    #periodic { width: 280px !important; margin-left: auto; margin-right: auto; }
    .element { font-size: 13px !important; width: 70px !important; height: 70px !important; }
    .element small { font-size: 12px !important; }
    .element:hover {
        -webkit-transform: scale(1.2) !important;
        -moz-transform: scale(1.2) !important;
        -ms-transform: scale(1.2) !important;
        -o-transform: scale(1.2) !important;
        transform: scale(1.2) !important;
        z-index: 9999 !important;
        box-shadow: 0 0 30px rgba(0,0,0,0.9)
    }
    .element img { width: 33px !important; }

    .layer-caption-left .legend, .layer-caption-middle .legend, .layer-caption-right .legend {
        width: 100% !important;
    }

}