
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*						    					   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: rgb(22, 139, 175);}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a {font-size: 12px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{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: rgb(175, 65, 22);}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a {font-size: 12px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{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) 
{
    .containerA{height: 95px} 
    .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: lightsalmon;}
    button.dropbtn {font-size:14px; line-height: 11pt; padding: 14px;}
    .dropdown-content a {font-size: 12px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{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) 
{
    .containerA{height: 90px}
    .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:70%;}
    .Main_button{border-color: rgb(180, 102, 154);}
    button.dropbtn {font-size:13px; line-height: 10pt; padding: 14px;}
    .dropdown-content a {font-size: 11px; }

    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 7px;padding-right: 7px;}   

}



@media only screen and (min-width: 1001px) and (max-width: 1200px) 
{
    .containerA{height: 85px}
    .logoA{margin-left: 18px; margin-top: 13px; width: 180px; height: 90px } 
    h1 {font-size: 30px; margin-bottom: 20px;}

    #mySidenav {display: none}
    #main {display: none}

    .table_B{width:85%;}
    .Main_button{border-color: yellowgreen;}
    button.dropbtn {font-size:13px; line-height: 10pt; padding: 14px;}
    .dropdown-content a {font-size: 11px; }

    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 7px;padding-right: 7px;}   

}

@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 }
    h1 {font-size: 29px; margin-bottom: 20px;}  

    #mySidenav {display: none}
    #main {display: none}

    .table_B{width:88%;}
    .Main_button{border-color: red;}
    button.dropbtn {font-size:13px; line-height: 10pt; padding-top: 14px; padding-bottom: 14px; padding-left: 8px; padding-right: 8px;}
    .dropdown-content a {font-size: 11px; }  
    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 7px;padding-right: 7px;}   

}


@media only screen and (min-width: 801px) and (max-width: 900px) 
{
    .containerA{height: 75px}  

    .logoA{margin-left: 14px; margin-top: 11px; width: 140px; height: 70px }
    h1 {font-size: 26px; margin-top: 45px;}  

    #mySidenav {display: none}
    #main {display: none}

    .table_B{width:90%;}
    .Main_button{border-color:  rgb(171, 243, 171);}
    button.dropbtn {font-size:13px; line-height: 10pt; padding-top: 14px; padding-bottom: 14px;  padding-left: 5px; padding-right: 5px;}
    .dropdown-content a {font-size: 11px; padding: 10px 0px; }
    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 2px;padding-right: 2px;}   

}


 
/******* 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; }
    h1 {font-size: 23px; margin-top: 38px;}

    #mySidenav {display: none}
    #main {display: none}

    .table_B{width:95%;}
    .Main_button{border-color:  blue;}
    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: 11px; padding: 10px 14px;  }
    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 0px;padding-right: 0px; }
}



/******* 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}  
    .containerB {display: none}

    .logoA{margin-left: 10px; margin-top: 4px; width: 46px; background-image: url('../All_Component/Amalgam_logo_50x50.png'); }
    
    h1 {font-size: 20px; margin-top: 20px;}


    .sidenav a {padding: 8px 8px 8px 32px; font-size: 25px;}
    #main {padding: 5px; }
     .Main_font{font-size: 30px; }

    .table_B{width:95%;}
    .Main_button{border-color:  rgb(158, 109, 109);}
    button.dropbtn {font-size:12px; line-height: 10pt;  padding-top: 5px; padding-bottom: 5px;  padding-left: 8px; padding-right: 8px;}
    .dropdown-content a {font-size: 10px; padding: 10px 14px;  }
    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 5px;padding-right: 5px;}

    .sidenav a {font-size: 20px;}
}


/******* 8.Michael's Xiaomi (Portrait) width of 412px  *****************/
@media only screen and (min-width: 401px) and (max-width: 500px) 
{
    .containerA{height: 50px}
    .containerB {display: none}
    .logoA{margin-left: 10px; margin-top: 4px; width: 40px; background-image: url('../All_Component/Amalgam_logo_50x50.png'); }
    
    h1 {font-size: 17px; margin-top: 20px;}

    .sidenav a {padding: 8px 8px 8px 32px; font-size: 25px;}
    #main {padding: 10px; }
    .Main_font{font-size: 23px; }

    
    .table_B{width: 90%;}
    .Main_button{border-color:  yellow;}
    button.dropbtn {font-size:11px; line-height: 9pt;  padding-top: 5px; padding-bottom: 5px;  padding-left: 8px; padding-right: 8px;}
    .dropdown-content a {font-size: 10px; padding: 10px 14px;  }
    
    p.small_gap_lines {line-height: 0.6; margin-top: 2px; margin-bottom: 2px;}

    .empty_cell{padding-left: 3px;padding-right: 3px;}

    .sidenav a {font-size: 16px;}
}




/******* 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}
    .containerB {display: none}
    .logoA{margin-left: 8px; margin-top: 4px; width: 40px; background-image: url('../All_Component/Amalgam_logo_50x50.png');}
    h1 {font-size: 15px; margin-top: 18px;}

    .sidenav a {padding: 8px 8px 8px 32px; font-size: 25px;}
    #main {padding: 10px; }
    .Main_font{font-size: 23px; }


    .table_B{width:95%;}
    .Main_button{border-color:  rgb(233, 95, 233);}
    button.dropbtn {font-size:11px; line-height: 9pt; padding: 14px;}
    .dropdown-content a {font-size: 10px; padding: 10px 14px;  }

    p.small_gap_lines {line-height: 0.5; margin-top: 1px; margin-bottom: 1px;}

    .empty_cell{padding-left: 4px;padding-right: 4px;}

    .sidenav a {font-size: 15px;}


}


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





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