
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*						    					   RESPONSIVE LAYOUTS PART A					   		 													 */
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/******* The "only" keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. *******/


/******* 1.Desktop (Michael Office Samsung and AOC) width of 1920px *******/
@media only screen and (min-width: 1621px)
{
    .logoA{margin-left: 20px; margin-top: 13px; width: 200px; height: 100px }
    h1 {font-size: 32px; margin-bottom: 18px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:63%;}
    .Main_button{border-color: #168baf;}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a, .dropdown-content b {font-size: 14px;  padding: 12px 17px;  }
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 7px; padding-right: 7px;}   
}	


@media only screen and (min-width: 1601px) and (max-width: 1620px) 
{
    .logoA{margin-left: 20px; margin-top: 13px; width: 200px; height: 100px }
    h1 {font-size: 32px; margin-bottom: 18px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:70%;}
    .Main_button{border-color: #af4116;}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a, .dropdown-content b {font-size: 14px; padding: 12px 17px;}
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 7px; padding-right: 7px;}   
}	

/******* 2. 15.6" Laptop (Michael Asus) width of 1536px *******/
@media only screen and (min-width: 1401px) and (max-width: 1600px) 
{
     .logoA{margin-left: 20px; margin-top: 13px; width: 200px; height: 100px }
    h1 {font-size: 32px; margin-bottom: 18px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:70%;}
    .Main_button{border-color: #ffa07a;}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a, .dropdown-content b {font-size: 14px; padding: 12px 17px;}
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 7px; padding-right: 7px;}   
}

/******* 3. 2nd Floor Meeting room TV width of 1225px *******/
/******* 3. 12" Laptop width of 1200px *******/
@media only screen and (min-width: 1201px) and (max-width: 1400px) 
{
    .logoA{margin-left: 20px; margin-top: 13px; width: 200px; height: 100px }
    h1 {font-size: 31px; margin-bottom: 18px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:78%;}
    .Main_button{border-color: #b4669a;}
    button.dropbtn {font-size:14px; line-height: 10pt; padding: 14px;}
    .dropdown-content a, .dropdown-content b {font-size: 14px; padding: 12px 10px;}
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 7px; padding-right: 7px;}   
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) 
{
    .containerA{height: 84px}
    .logoA{margin-left: 18px; margin-top: 13px; width: 180px; height: 90px } 
    .QRcode {right: 18px; top: 4px; width: 76px; height: 76px;}
    h1 {font-size: 30px; margin-bottom: 20px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:85%;}
    .Main_button{border-color: #9acd32;}
    button.dropbtn {font-size:13px; line-height: 10pt; padding-top: 14px; padding-bottom: 14px; padding-left: 6px; padding-right: 6px;}
    .dropdown-content a {font-size: 13px; padding: 12px 14px;}
    .dropdown-content b  {font-size: 13px; padding: 12px 8px;}
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 6px; padding-right: 6px;}   
    
}

@media only screen and (min-width: 901px) and (max-width: 1000px) 
{
    .containerA{height: 80px}  
    .logoA{margin-left: 16px; margin-top: 12px; width: 160px; height: 80px}
    .QRcode {right: 17px; top: 3px; width: 74px; height: 74px;}
    h1 {font-size: 29px; margin-bottom: 20px;}  
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:90%;}
    .Main_button{border-color: #ff0000;}
    button.dropbtn {font-size:13px; line-height: 10pt; padding-top: 14px; padding-bottom: 14px; padding-left: 6px; padding-right: 6px;}
    .dropdown-content a {font-size: 13px; padding: 12px 14px;} 
    .dropdown-content b {font-size: 13px; padding: 12px 8px;} 
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 5px; padding-right: 5px;}  
}

@media only screen and (min-width: 801px) and (max-width: 900px) 
{
    .containerA{height: 76px}
    
    .logoA{margin-left: 14px; margin-top: 11px; width: 140px; height: 70px;}
    .QRcode {right: 15px; top: 2px; width: 72px; height: 72px;}
    h1 {font-size: 26px; margin-top: 45px;}  
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:97%;}
    .Main_button{border-color:  #abf3ab;}
    button.dropbtn {font-size:13px; line-height: 10pt; padding-top: 14px; padding-bottom: 14px;  padding-left: 3px; padding-right: 3px;}
    .dropdown-content a {font-size: 13px; padding: 12px 12px; }
    .dropdown-content b {font-size: 13px; padding: 12px 8px;} 
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 2px; padding-right: 2px;}  
    
    .containerDXX{background-color: green;}

}


/******* 4.iPad & Tablet width of 768px *******/
/******* 5.Small Tablets & Larger Phones width of 685px *******/
/******* 5.Michael's Huaiwei Landscape width of 601px   *******/

@media only screen and (min-width: 701px) and (max-width: 800px) 
{
    .containerA{height: 70px}
    .logoA{margin-left: 12px; margin-top: 9px; width: 120px; height: 60px; }
    .QRcode {right: 13px; top: 2px; width: 66px; height: 66px;}
    h1 {font-size: 23px; margin-top: 38px;}
    #mySidenav {display: none}
    #main {display: none}
    .table_B{width:98%;}
    .Main_button{border-color:  #0000ff;}
    button.dropbtn {font-size:12px; line-height: 10pt;  padding-top: 14px; padding-bottom: 14px;  padding-left: 1px; padding-right: 2px;}
    .dropdown-content a {font-size: 12px; padding: 12px 12px; }
    .dropdown-content b {font-size: 12px; padding: 12px 8px;} 
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 0px; padding-right: 0px; }

    .containerDXX{background-color: blue;}
}

/******* 6.iPhone (Landscape) width of 568px *******/
/******* 7.Other Hand Phones (Landscape) width of 480px *******/
@media only screen and (min-width: 501px) and (max-width: 700px) 
{
    .containerA{height: 56px; position: fixed; top: 0; z-index: 990;}  
    .containerB {display: none}
    .containerC,.show_size {position: relative; top: 50px;}
    .logoA{margin-left: 10px; margin-top: 4px; width: 46px; background-image: url('../All_Component/Amalgam_logo_50x50.png'); }
    .QRcode {display: none}
    h1 {font-size: 20px; margin-top: 20px;}
    #main {padding: 5px; }
    .Main_font{font-size: 30px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 5px; padding-right: 5px;}
    .GroupAA {font-size: 16px; color:#818181; font-weight: bold; padding: 8px 8px 8px 20px;} 
    .sidenav a {font-size: 15px; padding: 4px 10px 4px 25px;}
    .sidenav .closebtn {font-size: 34px; margin-top : 53px; margin-left: 49px; right:8px;}
    .sub-page_Title {font-size:14pt;}
    
    .containerDXX{background-color: yellow;}
}


/******* 8.Michael's Xiaomi (Portrait) width of 412px  *****************/
@media only screen and (min-width: 401px) and (max-width: 500px) 
{
    .containerA{height: 50px; position: fixed; top: 0; z-index: 990;}
    .containerB {display: none}
    .containerC,.show_size {position: relative; top: 50px;}
    
    .logoA{margin-left: 10px; margin-top: 4px; width: 40px; background-image: url('../All_Component/Amalgam_logo_50x50.png');  position: fixed; top: 0; z-index: 999;}
    .QRcode {display: none}
    h1 {font-size: 17px; margin-top: 20px;}
    #main {padding: 10px 4px; }
    .Main_font{font-size: 23px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}
    .empty_cell_A1{padding-left: 3px; padding-right: 3px;}
    .GroupAA {font-size: 15px; color:#818181; font-weight: bold; padding: 8px 8px 8px 20px;} 
    .sidenav a {font-size: 14px; padding: 3px 10px 3px 25px;}
    .sidenav .closebtn {font-size: 32px; margin-top : 55px; margin-left: 48px; right:8px;}
    .sub-page_Title {font-size:13pt;}

    .containerD,.table_D {height: 45px}

    .bottom_wording {font-size:9pt;}
}

/******* 9.Michael's Huaiwei (Portrait) width of 360px  *****************/
/******* 9.iPhone (Portrait) width of 393px *******/
/******* 9.Other Hand Phones width of 320px *******/
@media only screen and (min-width: 300px) and (max-width: 400px) 
{
    .containerA{height: 50px; position: fixed; top: 0; z-index: 990;}
    .containerB {display: none}
    .containerC,.show_size {position: relative; top: 50px;}

    .logoA{
        margin-left: 8px; 
        margin-top: 4px; 
        width: 40px; 
        background-image: url('../All_Component/Amalgam_logo_50x50.png'); 
        position: fixed; 
        top: 0; 
        z-index: 999; 
    }

    .QRcode {display: none}

    h1 {font-size: 15px; margin-top: 18px;}
    #main {padding: 10px 4px; }
    .Main_font{font-size: 23px; }

    p.small_gap_lines {line-height: 0.5; margin-top: 1px; margin-bottom: 1px;}
    .empty_cell_A1{padding-left: 4px; padding-right: 4px;}
    .GroupAA {font-size: 14px; color:#818181; font-weight: bold; padding: 8px 8px 8px 20px;} 
    .sidenav a {font-size: 13px; padding: 3px 10px 3px 25px;}
    .sidenav .closebtn {font-size: 30px; margin-top : 51px; margin-left: 48px; right:8px;}
    .sub-page_Title {font-size:13pt;}

    .containerD,.table_D {height: 45px}
    
    .bottom_wording {font-size:9pt;}

}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*						    					   RESPONSIVE LAYOUTS PART B					   		 													 */
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/





/*************************************************************************************************************************************************************/
/************************************************  END  ******************************************************************************************************/
/*************************************************************************************************************************************************************/