@media (max-width : 1450px)
{
	h1 span
	{
	    font-size  :  42px;
	}
}


@media (max-width : 1350px)
{
	h1 span
	{
	    font-size  :  40px;
	}
}


@media all and (min-width : 900px) and (max-width : 1200px)
{
    h1
    {
        text-align   :  right;
	    padding      :  0px 30px 0px 0px;
		line-height  :  100px;
		height       :  100px;
    }
	
	h1 span
	{
	    font-size  :  36px;
	}	
  
	h1 img
	{
		top     :  16px;
	    height  :  70px;
	}
  

  #LeftPanel #Steps
  {
    width    :  90%;
    padding  :  30px 4% 0 6%; 
  }

  #LeftPanel #Steps .icon
  {
    width   :  6%;
    height  :  27px;  
  }
}


@media (max-width: 900px)
{
  #LeftPanel
  {
    display  :  none;
  }

  #Contents
  {
    width   :  auto;
    margin  :  0px;
    height  :  auto;  
  }

  #Contents table td
  {
  	width          :  calc(100% - 20px);
  	display        :  block;  
    margin-bottom  :  10px;
	padding-top    :  20px;
  }
  
  #Contents table td:first-child
  {
    padding-top  :  20px;
  }  

 
  h1
  {
    padding      :  0px;
    line-height  :  70px;
    height       :  150px;
  }
  
  h1 span
  {
	  font-family  :  'Roboto Bold', arial, sans-serif;
	  font-weight  :  normal;
      font-size    :  32px;
      display      :  block;
  }
  
  h1 img
  {
	height    :  60px;
    position  :  relative;
	top       :  0px;
    left      :  auto !important;
    margin    :  0px auto 0px auto !important;
  }
  
  h2
  {
    font-size  :  27px;
  }
  
  
  #frmVoucher
  {
    padding  :  20px 0px 40px 0px;
  }
  
  #Contents #frmVoucher table td
  {
    padding-top  :  0px;
  }  
  
  #Contents #frmVoucher table td:first-child
  {
	margin-bottom  :  0px;
  }
  
  #Contents #frmVoucher table td:nth-child(2)
  {
	margin-bottom  :  -30px;
	margin-bottom  :  30px;
  }
  
  #VoucherDetails td.tdSeparator
  {
    display  :  none;
  }
  
  #VoucherDetails table.tblSteps, #frmPayment table.tblSteps
  {
	 display   :  block;
	 height    :  140px;
	 position  :  relative;
  }
  
  #VoucherDetails table:last-child td, #frmPayment table:last-child td
  {
	 padding-top  :  5px;
  }
  
  #frmVoucher .buttonNext,
  #VoucherDetails table:last-child td .buttonNext, #VoucherDetails table:last-child td .buttonPrevious, 
  #frmPayment table:last-child td .buttonNext, #frmPayment table:last-child td .buttonPrevious
  {
    display        :  block;
	text-align     :  center;
	padding-left   :  0px;
	padding-right  :  0px;
	width          :  100%;
  }
  
  #VoucherDetails table.tblSteps td:first-child
  {
	position  :  absolute;
	bottom    :  0px;
	width     :  100%;
  }
  
  #VoucherDetails table.tblSteps td:last-child
  {
	position  :  absolute;
	top       :  0px;
	width     :  100%;
  }
  
  #VoucherDetails .fee
  {
	  padding-bottom  :  100px;
	  position        :  relative;
  }
  
  #VoucherDetails .fee span.btnSelect
  {
	  position  :  absolute;
	  left      :  0px;
	  bottom    :  -660px;
  }
  
  
  table.tblSteps a
  {
	  width  :  calc(100% - 96px);
  }
  
  #frmPayment #txtCardNo, #frmPayment #txtCardName
  {
	width  :  100%;
  }
  
  .next, .prev
  {
	display  :  block;
  }
}



@media (max-width: 640px)
{
  h1
  {
    padding      :  0px;
    line-height  :  65px;
    height       :  130px;
  }
  
  h1 span
  {
    font-size  :  27px;
  }
  
  h1 img
  {
	height  :  50px;
  }
  
  h2
  {
    font-size  :  24px;
  }
}


@media (max-width: 480px)
{
  h1 span
  {
    font-size  :  21px;
  }
}