body, html{height:86%; width: auto;}

@media only screen and (min-device-width: 350px) and (max-device-width: 450px) and (-webkit-min-device-pixel-ratio: 3) {
}

/* Navigation*/
#pageHeader { grid-area: header; background-image: url('images/bgTop.jpg'); background-size: cover; color: white; font-size: 1.3em; text-align: center; padding: 5px;
	border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px dotted #555; }
#pageFooter { grid-area: footer; background-image: url('images/bgFooter.jpg'); background-size: cover; text-align: center; color: darkblue; padding: 4px; font-size: 0.8em;
  border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px dotted #555; }

#mainNav { grid-area: nav; background-image: url('images/bgLeft.jpg'); background-repeat: no-repeat;  text-align: center; font-size: 1.1em; height: auto; 
	border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px dotted #555; }
p{font:1Sem Georgia,Arial,Verdana,Sans-serif; margin:.3em 0 .3em; line-height:0.4em;}

/* Main content */
#mainContent { grid-area: content; font-size: 1em; color: darkblue; }
h1{font:1.5em Georgia,Arial,Verdana,Sans-serif; margin:.25em 0 0; line-height:1.4em; padding:0 0 2px}
h2{font:1.2em Georgia,Arial,Verdana,Sans-serif; margin:0.4em 0 0.4em; }
h3{font:1em Georgia,Arial,Verdana,Sans-serif; margin:0.1em 0 0.1em; }
#bs { border: 1px dotted; box-shadow: 3px 4px; text-align: center; font-size: 0.85em; margin: 3px;
border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 1px dotted #555;}
hr.dashed { border-top: 3px dashed #bbb; }

/* Footer and contact */
#footer{background-image: url('images/backgrBottom.jpg'); position: relative; width: 100%; float:left;
	font:0.7em Georgia,Arial,Verdana,Sans-serif; color: darkblue; border:1px solid #555; text-align: center; padding:3px; margin-top: 2px;
	border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}

/* Special styles */
.dot { height: 15px; width: 15px; background-color: grey; text-align: center; border-radius: 50%; display: inline-block; }
.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db;
  width: 15px; height: 15px; color: blue; 
  -webkit-animation: spin 3s linear infinite; /* Safari */
  animation: spin 3s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

* {  box-sizing: border-box; align: center; }
.column {
  float: left;
  padding-left: 5%;
  width: 80;
  padding: 3px;
  margin: 2px;
  word-wrap: break-word;
  text-align: center;
  color: darkblue;
  font-family: "Sofia", sans-serif;
  font-size:1em;
  background-color: #eee;
}

.column2 {
  float: left;
  padding-left: 5%;
  width: 45%;
  padding: 3px;
  margin: 2px;
  word-wrap: break-word;
  text-align: center;
  color: darkblue;
  font-size:1em;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  text-align: center;
}