/* set background images of sections for different devices */


/* iPhone 2G-4S in portrait */
@media only screen
and (min-device-width : 320px)  
and (max-device-width : 480px)  
and (orientation : portrait) { 
	
	/* Force table to not be like tables anymore */
	.mytable table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mytable thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mytable td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mytable td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}

	/* Force table to not be like tables anymore */
	.mycomp table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mycomp thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mycomp td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mycomp td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	.mycomp td:last-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	
	/* set submenu overlap */
	.subMenu {
		height: 80px;
	}
	.subMenu .inner {
		width: 100%;
		top: 40px;
		left: 5px;
	}			
}

/* iPhone 2G-4S in landscape */
@media only screen
and (min-device-width : 320px)  
and (max-device-width : 480px)
and (orientation : landscape) { 

			
}


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

	/* Force table to not be like tables anymore */
	.mytable table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mytable thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mytable td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mytable td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}

	/* Force table to not be like tables anymore */	
	.mycomp table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mycomp thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mycomp td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mycomp td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	.mycomp td:last-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	
	/* set submenu overlap */
	.subMenu {
		height: 80px;
	}
	.subMenu .inner {
		width: 100%;
		top: 40px;
		left: 5px;
	}	
}


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


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

	/* Force table to not be like tables anymore */
	.mytable table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mytable thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mytable td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mytable td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}

	/* Force table to not be like tables anymore */	
	.mycomp table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.mycomp thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mycomp td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mycomp td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	.mycomp td:last-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	
	/* set submenu overlap */
	.subMenu {
		height: 80px;
	}
	.subMenu .inner {
		width: 100%;
		top: 40px;
		left: 5px;
	}			
}


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

}

/* other tablets */
@media only screen 
and (min-device-width : 641px) 
and (max-device-width : 767px) {

}


/* iPhone 6 Plus in portrait */
@media only screen 
and (min-device-width : 540px) 
and (max-device-width : 960px) 
and (orientation : portrait) {

}


/* iPhone 6 Plus in landscape */
@media only screen 
and (min-device-width : 540px) 
and (max-device-width : 960px) 
and (orientation : landscape) {

}


/* iPad 1, 2 & 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) {


}


/* iPad 1, 2 & 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) {


}

/* iPad 3, 4 & retina in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}


/* iPad 3, 4 & retina in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}


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

}

/* iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}


/* large desktop */
@media only screen 
and (min-device-width : 1200px) {

}


/* generic smartphone portrait */
@media screen
and (min-device-width : 1200px)
and (max-width : 490px) {

}


@media screen 
and (-webkit-min-device-pixel-ratio:0) 
and (max-width: 1024px)
and (max-width : 490px) {

	/* Force table to not be like tables anymore */
	.mytable table, thead, tbody, th, td, tr { 
		display: block; 
	}
	.myevent thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.myevent td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.myevent td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	.mytable thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mytable td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mytable td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}

	.mycomp thead tr { 
		/* Hide table headers (but not display: none;, for accessibility) */
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mycomp td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px;
		text-align: center;
	}
	.mycomp td:first-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	.mycomp td:last-child {
		position: relative;
		font-size: 15px;
		max-width: 260px;
		width: 260px; 
		text-align: center;
	}
	
	/* set submenu overlap */
	.subMenu {
		height: 80px;
	}
	.subMenu .inner {
		width: 100%;
		top: 40px;
		left: 5px;
	}
}