/*Phone X in portrait & landscape*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) { 

/* STYLES GO HERE */

}

/*iPhone X in landscape*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 

/* STYLES GO HERE */

}

/*iPhone X in portrait*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 

/* STYLES GO HERE */ 

}

/*iPhone 6, 7, & 8 in portrait & landscape*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {

	/* STYLES GO HERE */
	
}




/*iPhone 6, 7, & 8 in landscape*/
@media only screen
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape)  { 


	/*	input.button {
			-webkit-appearance: none;
		} */

		 
}

/*iPhone 6, 7, & 8 in portrait*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 

/* STYLES GO HERE */ 

}


/*iPhone 6, 7, & 8 Plus in portrait & landscape*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 

/* STYLES GO HERE */

}

/*iPhone 6, 7, & 8 Plus in landscape*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { 

/* STYLES GO HERE */

}

/*iPhone 6, 7, & 8 Plus in portrait*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

/* STYLES GO HERE */ 

}


/*iPhone 5 & 5S in landscape*/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)  { 

		input {
			-webkit-appearance: none;
		}
		div.menu {
			background-color:#FFF;
			text-align: center;
				
			display: block;
	
			overflow: hidden;
			text-overflow:ellipsis;
	
			width: 90%;
			height: 42px;
			
			margin: 0 auto;
		}   
		div.partmenu {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 2em;
						
			overflow: hidden;
			text-overflow:ellipsis;
			
			width:  calc(25% - 6px);
			height: 40px;
			
			border: 1px solid #333;           
			border-radius: 2px;
			
			float: left;
		}	
		div.cap {
			background-color:#FFF;
			height: 20px;
			width: 5px;
			float: left;
		}
		h1 {
			font-size: 2em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;			
		}
		h2 {
			font-size: 2em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		h3 {
			font-size: 2em;
			color: #377;
			margin: 0;
			padding: 0;
			text-indent: 20px
		}
		#blue {
			background-color:#f1f4f8;
			text-align: left;
			font-size: 1.5em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
			padding-left: 50px;
		}
		#blue1 {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 1.5em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
		}
		h4 {
			font-size: 12px;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		.but{
			font-size: 2em;
			text-align: center;
			background-color:#f1f4f8;

		}
		.foot {
			font-size: 2em;
			text-align: center;
			color: grey;
		}
		
	}	

/*iPhone 5 & 5S in portrait*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait)   { 

		input {
			-webkit-appearance: none;
		}
		div.menu {
			background-color:#FFF;
			text-align: center;
				
			display: block;
	
			overflow: hidden;
			text-overflow:ellipsis;
	
			width: 90%;
			height: 320px;
			
			margin: 0 auto;
		}   
		div.partmenu {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 3em;
						
			overflow: hidden;
			text-overflow: ellipsis;
			
            width: 96%;
			height: 60px;
			
			border: 1px solid #333;           
			border-radius: 2px;
			
			float: left;
		}	
		div.cap {
			background-color:#FFF;
			height: 20px;
			width: 1px;
			float: left;
		}
		h1 {
			font-size: 4em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;			
		}
		h2 {
			font-size: 3em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		h3 {
			font-size: 3em;
			color: #377;
			margin: 0;
			padding: 0;
			text-indent: 20px
		}
		h4 {
			font-size: 14px;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		#blue {
			background-color:#f1f4f8;
			text-align: left;
			font-size: 3em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
			padding-left: 50px;
		}
		#blue1 {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 3em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
		}
		.but{
			font-size: 3em;
			text-align: center;
			background-color:#f1f4f8;

		}
		.foot {
			font-size: 3em;
			text-align: center;
			color: grey;
		}

	}	
		
/*iPad mini in landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { 

		div.menu {
			background-color:#FFF;
			text-align: center;
				
			display: block;
	
			overflow: hidden;
			text-overflow:ellipsis;
	
			width: 90%;
			height: 38px;
			
			margin: 0 auto;
		}   
		div.partmenu {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 1.5em;
						
			overflow: hidden;
			text-overflow:ellipsis;
			
			width:  calc(25% - 6px);
			height: 36px;
			
			border: 1px solid #333;           
			border-radius: 2px;
			
			float: left;
		}	
		div.cap {
			background-color:#FFF;
			height: 20px;
			width: 5px;
			float: left;
		}
		h1 {
			font-size: 2em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;			
		}
		h2 {
			font-size: 1.5em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		h3 {
			font-size: 2em;
			color: #377;
			margin: 0;
			padding: 0;
			text-indent: 20px;
		}
		h4 {
			font-size: 12px;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		#blue {
			background-color:#f1f4f8;
			text-align: left;
			font-size: 1.5em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
			padding-left: 50px;
		}
		#blue1 {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 1.5em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
		.but {
			font-size: 1em;
			display: inline-block;
			text-align: center;
			border: 1px solid #aeaeae;
			padding: 5px 7px;
			text-decoration: none;
			background-color: #f1f4f8;
		}
		.foot {
			font-size: 1.5em;
			text-align: center;
			color: grey;
		}
		 
	}


/*iPad mini in portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { 

		div.menu {
			background-color:#FFF;
			text-align: center;
				
			display: block;
	
			overflow: hidden;
			text-overflow:ellipsis;
	
			width: 90%;
			height: 42px;
			
			margin: 0 auto;
		}   
		div.partmenu {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 2em;
						
			overflow: hidden;
			text-overflow:ellipsis;
			
			width:  calc(25% - 6px);
			height: 40px;
			
			border: 1px solid #333;           
			border-radius: 2px;
			
			float: left;
		}	
		div.cap {
			background-color:#FFF;
			height: 20px;
			width: 5px;
			float: left;
		}
		h1 {
			font-size: 2.5em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;			
		}
		h2 {
			font-size: 2em;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		h3 {
			font-size: 2em;
			color: #377;
			margin: 0;
			padding: 0;
			text-indent: 20px
		}
		h4 {
			font-size: 12px;
			color: #777;
			text-align:center;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		#blue {
			background-color:#f1f4f8;
			text-align: left;
			font-size: 2em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
			padding-left: 50px;
		}
		#blue1 {
			background-color:#f1f4f8;
			text-align: center;
			font-size: 2em;
			
			overflow: hidden;
			text-overflow: ellipsis;
			
			width: 90%;
			height: auto;
			
			border: 1px solid #000;
			border-radius: 5px;
			
			margin: 3px auto;
			padding: 3px;
		}
		.but{
			font-size: 2em;
			text-align: center;
			background-color:#f1f4f8;

		}
		.foot {
			font-size: 2em;
			text-align: center;
			color: grey;
		}

	}
		
/*
@media screen and (max-width: 420px), 
only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2), 
screen and (min-device-width : 414px) 
and (max-device-height : 736px) 
and (max-resolution: 401dpi)

@media screen and (max-width: 768px), 
only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2), 
screen and (min-device-width : 414px) 
and (max-device-height : 736px) 
and (max-resolution: 401dpi)
    
*/