/* =============================================================================
	= Mobile Styles
   ============================================================================= */

@media only screen and (max-device-width: 699px) {

	/* • header
	------------ */
   	header nav 	 	{ margin-right:22px;}
  	header #logo    { background: #fff url(images/logo-hkco.svg) no-repeat center center;}
    header.smaller #logo { background: #fff url(images/logo-hkco-sm.svg) no-repeat center center;  }
    header nav a 	 { display:inline-block; line-height:160px; margin:0 10px; color:#666; font-weight:700; font-size:30px; font-weight:lighter;}
    header nav a.eng { font-size:28px; padding-right:20px; line-height:normal;}
   	header nav span  { font-size:20px; padding:10px; line-height:normal;}

	header nav div.btn-bksquare { display:none}
	.menu-m { display:inline-block;}
	header nav div.menu-m { display:inline-block; width:80px; height:80px; text-align:center; vertical-align:middle; margin-top:-10px;
								 text-shadow: none;
						    background-color: #e6e6e6; cursor:pointer;
			  			  -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			  					  transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			     -webkit-transition-property: background-color, color;
			 			 transition-property: background-color, color;
			 					  box-shadow: none!important;}
    header nav div.menu-m:hover { background-color:#ccc; color:#333;}
    header nav div.menu-m i { padding-top:20px; text-align:center; vertical-align:middle; line-height:normal; font-size:40px; color:#999;}
    header.smaller nav div.menu-m { margin-top:-20px; }

    header {border-bottom:1px solid #ccc;}

	/* • Footer search box for mobile inside page 
	----------------------------------------------- */
    .global-footer { display:none!important}

  	.search-mobile         { margin:5% 0 2% 0; padding:0 0 2% 0;}
  	.search-mobile .block  { width:100%; height:80px; display:inline-block; overflow:hidden}
  	.search-mobile input   { width:90%; height:80px; border:none; margin:0!important; line-height:normal; padding:0% 4%!important;
                                  font-size:25px; background-color: #e6e6e6; color:#666; font-weight:bold}
  	.search-mobile .icon-block { display:inline-block; width:10%; background-color:#880656; height:80px; float:right; position:absolute; right:0; top:0;
                                       text-shadow: none;
                                      background-color: #880656; cursor:pointer;
                                      -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                          transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                 -webkit-transition-property: background-color, color;
                                   transition-property: background-color, color;
                                        box-shadow: none!important;}
  	.search-mobile .icon-block:hover { display:inline-block; width:10%; background-color:#000; height:80px; margin-left:-4px;}

  	.search-mobile i  { font-size:45px; font-weight:normal; line-height:normal; color:#fff!important; display:table-cell; position:absolute; left:25px; top:15px;}

	/* • Footer for mobile inside page
	------------------------------------ */	
	.mobile-only   { display:block;}
	.mobile-hidden { display:none;}

	footer    { background-color:#fff; padding:2% 4%; text-align:left; font-size:20px; line-height:1.6; color:#666; max-height:999999px;
	              border-top:2px solid #e6e6e6; margin-bottom:2%; margin-top: 80px}
	footer ul li { color:#666; list-style-type:none; }
	footer ul li a { color:#666; }
	footer ul li a:hover { color:#880656; }

	footer ul li:after { content: "|"; padding:0 15px; color:#880656; font-size:20px;}

	.f-m-media {display:none}
	.f-m-media a   { display:inline-block;}
	.f-m-media i   { color:#ccc; font-size:50px; margin-left:40px; margin-bottom:15px}
    .f-m-media i:hover   { color:#880656;}
	
	.footer-view-desktop	   { display:none}
	.footer-m-viewDesktop      { display:block; font-size:24px; padding:2% 0 2% 4%;}
	.footer-m-viewDesktop i    { font-size:30px; display:inline-block; padding-right:20px; color:#666;}
	.footer-m-viewDesktop .txt { display:inline-block; top:-5px; color:#666;}
	
	.view-desktop { padding:2% 4% 0% 4%; font-size:25px; background-color:#e6e6e6}
	.view-desktop a { color:#333;}
	.view-desktop i { font-size:30px; display:inline-block; padding-right:20px; color:#666}
	.view-desktop .txt { display:inline-block; top:-6px; color:#666;}

	footer .f-col-left	{ width:100%; float:left; margin-bottom:30px}
	footer .f-col-award { display:block; width:100%; float:none;}
	footer .award-logo-blk { text-align:left; }

}