//
// media queries
//

/* superwide screen size eg 1800px*/
@media screen and (max-width: 1800px)
{
	   /*#mqtest{color:white;}*/
}

/* most common pc screen size */
/* using 1366 x 768*/
@media screen and (max-width: 1400px)
{
	
   	#phase1, #phase2, #phase3{
   	   width: 66%;
   	   float: right;
   	}
   	
   	#wrapper{
   		   width:66%;
   	}
   	
   	img{
   		   width:66%;
   	}
   	
   	figcaption{
   		   width:66%;
   	}
   	
   	#mqtest{color:red;}
}

/* mid-sized screens eg 900px */
@media screen and (max-width: 900px)
{
	#mqtest{color:green;}
}
      
/*640px = my lansdcape */
@media screen and (max-width: 640px)
{
	   #mqtest{color:blue;}
	   
	   #wrapper{width:100%;}
   	
   	#phase1, #phase2, #phase3{
   	   width: 50%;
   	   float: right;
   	}
}
  
/* medium-sized screens eg 530px */
@media screen and (max-width: 530px)
{
   	#mqtest{color:purple;}
}
 
 /* 360px = my portriat */
@media screen and (max-width: 360px)
{
   /*#mqtest{
      color:yellow;
   }*/
   
   img{
      height: 6.5em;
      width: 6.5em;
   }
   
   #enter_now_btn{
   		   font-size: .95em;
   	}
   	
   #phase3{
      width:92.5%;
      clear:both;
   }
}

/* very small screens eg 200px */
@media screen and (max-width: 200px)
{
   	#mqtest{color:cyan;}
}

/* #endregion media queries */