@media screen and (max-width: 100000px){
    /* PAGE CONTENT */
    #js_cms { padding:20px; }
    .cmsbody_g { float:left; text-align: justify; width: 60%; }
    .cmsbody_right_g { margin-left: 3%; float:left; text-align: justify; width: 35%;}

    /* GRAPHIC PANEL DESIGN */
    .index-title { position: absolute; top:143px; left:95px; font-family:neo-sans; font-size: 50px; letter-spacing: 0; line-height: 100%; color: #adb4f1; opacity: 0.3; white-space:nowrap; 
                   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

                   width: auto; text-align: right;}
    .graphic-panel {float:left; margin-top: -125px; width:100%;  background:#04099B }   
    .graphic-page {margin-top: 35px; float: right;}

    /* LEFT PART */
    .gp-left-part { float: left; width: 67.5%; height: 478px; position: relative}
    .gp-lp-1{ width: 100%; height: 63.5%; }   
    .gp-lp-2{ width: 100%; height: 36.5%; }        
    .gp-lp-bg-image {position: absolute; bottom: 0; right:-12px; height: 492px; width: 471px; background-size:100% 100%; background-repeat: no-repeat; z-index: 2;}      
    .graphic-container { width: 100%; height: 63.5%; position: absolute; top: -5px; z-index:  3; margin-top:15px; }   

    .data-container { width: 100%; height: 36.5%; position: absolute; top: 63.5%; z-index: 3 }

    #layout { height: 100%; }
    .p1-title{ z-index:15; color: white; font-family:neo-sans; font-size: 18px; position: absolute; top: 22px; left: 29px; white-space: normal; }

    .p1-dropdowns { position: absolute; top:57px; left:30px; height: 18px; z-index:6; white-space: nowrap;}
    .p1-dropdowns div { position: relative; height: 16px; float: left; font-size: 10px; color: #FFFFFF; padding-left: 4px; margin-right: 10px; }
    .p1-dropdowns div span{ margin-top: -2px; display: block; cursor: pointer; font-size: 12px;}


    .index_performance { cursor: pointer; position: absolute; top:60px; left:125px; font-size: 11px; z-index:4; color: #fff; line-height: 17px; border-radius: 2px; }
    .index_performance .check-button { float: left; width: 9px; height: 9px; border: 1px solid #0099ff; }
    .index_performance .button-label { float: left; margin-left: 5px;  margin-top: -3px; color: #80769A; text-decoration: underline; font-weight:bold; }
    .index_performance img { position: absolute; display: none; bottom: 5px; left: -1px; z-index: 5; width: 14px; height: 12px; }
    .ip_selected .button-label { text-decoration: none; color: #fff;  }
    .ip_selected .check-button {  background-color: #0099ff;  }
    .ip_selected img { display: block; }

    .p2-dropdowns { position: absolute; top:57px; left:30px; height: 18px; z-index:4;  }
    .p2-dropdowns div { cursor: pointer; position: relative; height: 16px; float: left; font-size: 10px; color: #FFFFFF; padding-left: 4px; margin-right: 2px; }
    .p2-dropdowns div span{ margin-top: -2px; display: block; cursor: pointer; font-size: 12px; }


    .dr-container { position: absolute; width:51px; top:0; left:-7px; position: absolute; z-index: 6; display: none; }
    .dr-container div  { display: block; width:100%;  background-color: #000080;  height: 16px; font-size: 10px; color: #FFFFFF; border-bottom: 1px #4768B3 solid; z-index:6  }
    .dr-container div  span { font-size:11px }
    .prod-nods { width: 120px; }
    .dr-container div:hover{ color: #000080; background-color: orange; }
    div.dr-selected { color: #000080; background-color: orange;  }

    #select-period-small, #select-period { border:1px solid #6E90DD; border-radius:3px; background: url('graphic-images/select-arrow.gif'); background-position: right; width: 80px; background-repeat: no-repeat; }

    #select-prod { border:1px solid #6E90DD; border-radius:3px; background: url('graphic-images/select-arrow.gif'); width: 148px; background-position: right; background-repeat: no-repeat;}
    #select-index { border:1px solid #6E90DD; border-radius:3px; background: url('graphic-images/select-arrow.gif'); width: 70px; background-position: right; background-repeat: no-repeat; }	

    .indicator{ position: absolute; bottom:202px; left:533px; font-size: 11px; line-height:15px; }
    .indicators-table { border-collapse: collapse;}
    .indicators-table td { padding:0;  color: #fff; font-size:11px; font-family:neo-sans; white-space:nowrap;  }
    .indicators-table td:first-child { text-align: right; }

    #zoomout { background: url('graphic-images/zoom-out.png');  display: none; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer;  width:25px; height:25px; position: absolute; top:27px; right:13px; }

    /* RIGHT PART */   
    .gp-right-part{ float: left; width: 32.5%; height: 478px; position: relative; }      
    .gp-rp-1{ width: 100%; height: 63.5%; position: relative; }
    .gp-rp-2{ width: 100%; height:36.5%; position: relative; }
    .gp-rp-bg-image { position: absolute; bottom: 158px; right: 14px; width:152px; height:121px; background-size:100% 100%; background-repeat: no-repeat;  }  


    /* MODEL QUALITY MODEL */
    .modelq-container { position: absolute; width:100%; height:100%; }
    .p3-title{ color: white; font-family:neo-sans; font-size: 18px;  position: absolute; top:17px; left: 30px; white-space: nowrap; }
    .modelq { width: auto; position: absolute; top:50px; left: 0; border-collapse: collapse; }
    .modelq tr {height:24px;}
    .modelq td { color:#fff; font-family: neo-sans; font-size:16px;  padding:0; line-height: 24px; height:24px;}
    .modelq td:first-child { text-align: right; width:200px; padding-right: 16px; }
    .modelq td:last-child { vertical-align: text-bottom }
    .modelq td.triangle { padding-left: 10px;  }

    .mq-indicator { width: 20px; height: 20px; display: block; margin-top: 2px; }

    /* GRADIENTS */
    .gradient1 
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#030677)";
        background: -webkit-linear-gradient(#04099B,  #030677); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B,  #030677); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #030677); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B,  #030677); /* Standard syntax (must be last) */

    }
    .gradient2 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#141895, endColorstr=#030677)";
        background: -webkit-linear-gradient(#141895, #030677); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#141895, #030677); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#141895, #030677); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#141895, #030677); /* Standard syntax (must be last) */	

    }
    .gradient3 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#0E1276)";
        background: -webkit-linear-gradient(#04099B, #0E1276); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B, #0E1276); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #0E1276); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B, #0E1276); /* Standard syntax (must be last) */	
    }
    .gradient4 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#030679, endColorstr=#141997)";
        background: -webkit-linear-gradient(#030679, #141997); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#030679, #141997); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#030679, #141997); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#030679, #141997); /* Standard syntax (must be last) */	 
    } 

    .d-line { position: absolute; top:0; left: 0; background-color: #3a79e2; width: 100%; z-index: 10; opacity: 0.5; height: 7px;}

}

@media screen and (max-width: 1100px){
    .indicator{ position: absolute; bottom:202px; left:65%; font-size: 11px; line-height:15px; }
    .graphic-panel { margin-top: -90px; margin-bottom: 30px;}
    .index-title { font-size: 40px; }
    .modelq-container { position: absolute; top:0px; left: 0px; }
    .p3-title{ font-weight: bold; color: white; font-family:neo-sans; font-size: 18px; font-weight:normal }
    .modelq { margin-top:10px; width: 200px; font-family: Arial}
    .modelq td { color:#fff; font-size:12px; font-weight: normal; padding:0; }
    .modelq td:first-child { text-align: right; }
    .modelq td:last-child { padding-left:20px; }
}


@media screen and (max-width: 990px){
    /* MODEL QUALITY MODEL */
    .modelq-container { position: relative; width:100%; height:100%; top:9px; left:30px; }

    .p3-title{ color: white; font-family:neo-sans; font-size: 18px;  position: absolute; top:7px; left: 0px; font-weight:normal; }
    .modelq { width: auto; font-family: neo-sans; position: absolute; top:20px; left: 0; line-height: 20px; }
    .modelq td { color:#fff; font-size:15px;  padding:0; font-weight:normal; }
    .modelq td:first-child { text-align: right; width:150px; padding-right: 16px; }
    .modelq td:last-child { width:24px; }
    .modelq td.triangle { width:24px;  }
    .mq-indicator { width: 20px; height: 20px;  }
    #model_accuracy { position: absolute; top:0px; }
}
@media screen and (max-width: 800px){
    /* PAGE CONTENT */
    #js_cms { padding:0 }
    .cmsbody_g { width: 90%; padding-left:10px }
    .cmsbody_right_g { width: 90%; padding-left:10px }

    /* GRAPHIC PANEL DESIGN */
    .graphic-panel{ top:0; margin-bottom: 50px; background:#04099B }

    /* LEFT PART */
    .gp-left-part {width: 100%; height: 471px;}
    .gp-lp-1{ width: 100%; height: 63.5%;}   
    .gp-lp-2{ width: 100%; height: 36.5%;}    

    .index-title { right: 128px; top: 117px; font-size: 40px; width: auto;}     
    .gp-lp-bg-image { width:469px; height:484px; bottom:7px; right: 110px;}   

    /* RIGHT PART */
    .gp-right-part { width: 100%;  height: 297px; }
    .gp-rp-1 { float: left; width: 50%; height: 100%; }
    .gp-rp-2 { float: left; width: 50%; height: 100%; }  
    .gp-rp-bg-image { position: absolute; bottom: 20px; right: 306px; width:152px; height:121px; background-size: 100% 100%; background-repeat: no-repeat;  }

    .gradient2 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#141895, endColorstr=#030679)";
        background: -webkit-linear-gradient(#141895, #030679); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#141895, #030679); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#141895, #030679); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#141895, #030679); /* Standard syntax (must be last) */	
    }
    .gradient3 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#030779)";
        background: -webkit-linear-gradient(#04099B, #030779); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B, #030779); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #030779); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B, #030779); /* Standard syntax (must be last) */	
    }
    .gradient4 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#0D1278)";
        background: -webkit-linear-gradient(#04099B, #0D1278); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B, #0D1278); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #0D1278); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B, #0D1278); /* Standard syntax (must be last) */	 
    }

    /* MODEL QUALITY MODEL */
    .modelq-container { position: relative; width:100%; height:100%; top:22px; left: 20px;}
    .p3-title{ color: white; font-family:neo-sans; font-size: 18px;  position: absolute; top:0px; left: 20px; font-weight: normal}
    .modelq { width: auto; font-family: neo-sans; position: absolute; top:20px; left: 0; line-height: 20px; font-weight: normal}
    .modelq td { color:#fff; font-size:15px;  padding:0; font-weight: normal}
    .modelq td:first-child { text-align: right; width:150px; padding-right: 15px; font-weight: normal }
    .modelq td:last-child { width:50px; }
    .modelq td.triangle { width:50px; }

    #model_accuracy { position: absolute; top:0px; }
    .p1-title, .p3-title { left: 10px; }
    .p1-dropdowns { left: 10px;}
    .p2-dropdowns { left: 10px;}
    .p1-dropdowns div { position: relative; height: 16px; float: left; font-size: 8px; color: #FFFFFF; padding-left: 4px; margin-right: 6px; }
    .p1-dropdowns div span{ margin-top: -2px; display: block; cursor: pointer; font-size: 12px;}
}

@media screen and (max-width: 799px){
    .graphic-panel{top:74px; margin-bottom:50px;}
    .gp-lp-bg-image {height: 478px;}  
    .gp-rp-bg-image { position: absolute; bottom: 12px; right: 38.5%; }
}

@media screen and (max-width: 600px){


    .graphic-panel{ top:58px; margin-bottom: 60px; }

    /* LEFT PART */ 
    .gp-left-part {width: 100%; height: 286px;}

    .gp-lp-1{ width: 100%; height: 184px; }   
    .gp-lp-2{ width: 100%; height: 102px; }    


    .index-title { right: 79px; top: 67px; font-size: 25px;}     
    .gp-lp-bg-image { position: absolute; bottom:5px; right: 67px; width: 292px; height:296px; background-size: 100% 100%; }   

    /* RIGHT PART */
    .gp-right-part { width: 100%; height: 179px; }
    .gp-rp-1 { float: left; width: 50%; height: 100%; }
    .gp-rp-2 { float: left; width: 50%; height: 100%; }     
    .gp-rp-bg-image { position: absolute; bottom: 12px; right: 38.5%; width:91px; height:72px; background-size: 100% 100%; background-repeat: no-repeat;  }


    .d-line { top: 0px; height: 4px}

    .gradient3 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#030677)";
        background: -webkit-linear-gradient(#04099B, #030677); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B, #030677); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #030677); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B, #030677); /* Standard syntax (must be last) */	
    }
    .gradient4 {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#04099B, endColorstr=#0E117A)";
        background: -webkit-linear-gradient(#04099B, #0E117A); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#04099B, #0E117A); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#04099B, #0E117A); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#04099B, #0E117A); /* Standard syntax (must be last) */	 
    }
    .p1-title { font-size: 12px; }

    /* MODEL QUALITY MODEL */
    .modelq-container { position: relative; width:100%; height:100%; }
    .p3-title{ color: white; font-family:neo-sans; font-size: 12px;  position: absolute; left: 0px; font-weight: normal }
    .modelq { width: auto; font-family: neo-sans; position: absolute; top:20px; left: 0; line-height: 8px; font-weight: normal }
    .modelq td { color:#fff; font-size:14px;  padding:0; padding-bottom: 5px; font-weight: normal; line-height: 12px;}
    .modelq td:first-child { text-align: right; width:60px; padding-right: 15px; white-space: nowrap; line-height: 13px; }
    .modelq td:last-child { width:10px; }
    .modelq td.triangle { width:10px;  }
    .mq-indicator { margin-left: -10px; width: 12px; height: 12px;}
    #model_accuracy { position: absolute;}

    .indicator{ position: absolute; bottom:137px; left:40%; font-size: 11px; line-height:8px; }
    .indicators-table td { font-size:7px; }
}


@media screen and (max-width: 480px){
    .modelq-container { position: relative; width:100%; height:100%; }
    .p3-title{ color: white; font-family:neo-sans; font-size: 12px;  position: absolute; left: 0px; font-weight: normal }
    .modelq { width: auto; font-family: neo-sans; position: absolute; top:20px; left: 0; line-height: 8px; font-weight: normal }
    .modelq td { color:#fff; font-size:14px;  padding:0; padding-bottom: 5px; font-weight: normal; line-height: 12px;}
    .modelq td:first-child { text-align: right; width:60px; padding-right: 15px; white-space: nowrap; line-height: 13px; }
    .modelq td:last-child { width:10px; }
    .modelq td.triangle { width:10px;  }
    .mq-indicator { margin-left: -10px; width: 15px; height: 15px; margin-top: -2px; }
    #model_accuracy { position: absolute; }

    .indicator{ position: absolute; bottom:137px; left:40%; font-size: 11px; line-height:8px; }
    .indicators-table td { font-size:7px; }
    #zoomout { position: absolute; top:0px; right:13px; }

    .p1-dropdowns { top:47px;}
    .p2-dropdowns { top:47px;}
    .index_performance { top: 50px;}
    .data-labels  div{ margin-top :3px;}

}


@media screen and (max-width: 360px){
    .index-title { font-size: 18px; white-space:nowrap; margin-top:20px; }  
    .modelq td { color:#fff; font-size:11px;  padding:0; padding-bottom: 5px; font-weight: normal; line-height: 12px;}
    .mq-indicator { margin-left: -10px; width: 12px; height: 12px; margin-top: 1px;}
    .p1-dropdowns { top:45px; }
    .p2-dropdowns { top: 45px; }
    .index_performance { top: 49px;}
    .data-labels  div{ margin-top :0px;}
}