@charset "utf-8";
/* CSS Document */


* {
  box-sizing: border-box;
}
/* I notice that Bootstrap uses 4 breakpoints, 1200, 992, 768, 576. so I will do the same */
   
/*  DEFAULT conditions before application of @media > 1200px */
html{margin:0:}
body{
	background-color:#FFFFFF; /* white */
    margin:0;
} 
h1 {text-align:center; font-size:36px; margin-top:0px; margin-bottom:0px; }
h2 {text-align:center; font-size:24px; margin-top:0px; margin-bottom:0px; }
.explainDiv{
	background-color:#FFFF99; /* Pale Yellow */
	width:100%;	
	color:#000000;
	border:thin solid #000000;
	padding:20px;
	margin-top:20px;
}
.templateDiv{
	display:inline-block; 
	float:left;
	color:#00000;
	width:25%; /* 4 blocks across */
	height:25%;
	border:thick solid #FFF;
	margin:0;
}
.SaxSchoolOnline{
	display:inline-block; 
	float:left;
	background-color:#000000;
	color:#FFFFFF;
	width:25%; /* 4 blocks across */
	height:25%;
	border:thick solid #FFFFFF;
	margin:0;
	padding-left:20px;
	padding-top:20px;
	padding-bottom:20px;
	padding-right:20px;	
}

/* END DEFAULT contitions */

/* only up to 1200px for Tablets Landscape */
@media only screen and (max-width: 1200px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:24px; }
h2 {text-align:center; font-size:18px; }
.explainDiv{
	background-color:#CCCCCC; /* Grey */
	padding:15px;
    }
.SaxSchoolOnline{
	width:25%; /* 4 across */
	height:25%; 
	border:thick solid #FFFFFF;
	background-color:#000000;
	}
}

/* only up to 992px  for  Tablet small */
@media only screen and (max-width: 992px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:18px }
h2 {text-align:center; font-size:16px; }
.explainDiv{
	background-color:#FF80FF; /* Purple */
	padding:15px;
    }
.SaxSchoolOnline{
	width:33.33%; /* 3 across */
	height:33.33%;
	border:thick solid #FFFFFF;
	background-color:#000000;
	color:#FFFFFF;
	}
}

/* only up to 768 for  iPHONE Landscape Tablet Portrate */
@media only screen and (max-width: 768px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:16px; }
h2 {text-align:center; font-size:14px; }
.explainDiv{
	background-color:#00FF00; /* Green */
	padding:10px;
    }	
.SaxSchoolOnline{
	width:50%; /* 1 across */
	margin-top:10px;
	background-color:#000000;
	border:thick solid #FFFFFF;
	}
.templateDiv img {width:100%; height:auto;}			
}

/* only up to 576px for iPHONE portrate*/
@media only screen and (max-width: 576px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:14px; }
h2 {text-align:center; font-size:12px; }
.explainDiv{
	background-color:#33CCFF;  Blue */
	padding:5px;
    }	
.SaxSchoolOnline{
	width:100%; 
	margin-top:5px;
	background-color:#000000;
	border:thick solid #FFFFFF;
	}
}