* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  
}

body {
	font-family:  Helvetica, Arial, sans-serif;
	font-size: 16px;
	background-color: #ffffff;
}

.footer {
  background-color: #C9E8EA; /*#0099cc;*/
  text-align: center;
 /* font-size: 14px; 12px;*/
  padding: 10px; /*15px;*/
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

/* go top */
#myBtn {
  display: none;
  position: fixed;
  bottom: 10px; /*20px;*/
  right: 8px; /*30px;*/
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}
/* go top ENDed*/

/* https://www.w3schools.com/howto/howto_css_clearfix.asp */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #D8EDED; /*#33b5e5;*/
  color: #755046; /*#6D4339; /*#ffffff;*/
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}

.menu li:hover {
  background-color: #C9E8EA; /*#B4A7A4; /*#6D4339; /*#0099cc;*/
  color: #755046; /*#000000; /*#99817A; /*#D8EDED; /*#6D4339;*/
}

/* This is important */
ul.bottomitemlist> li::before {
    content: '';
    display: inline-block;
    height: 30px;  /* size of the image */
    width: 30px;		/* size of the image */
    background-size: cover;
    background-image: url("_wilco_studio_images/animated-teacher30.png");
    background-repeat: no-repeat;
    margin-right: 10px;
    background-position: center center;
    vertical-align: middle;
	 
	
}
ul.bottomitemlist {
	list-style-type: none;
	font-size:14px;
	text-shadow:2px 2px 4px #F7767E;
}
ul.bottomitemlist:hover {
  /*background-color: #F92F60; /*#F7F51F; *//*#ddd;*/
  /*color: black;*/
}
a.bottomitemlist {
 /*text-shadow: 2px 1px #FFD3BC; color:#000000;  */
 text-decoration: none;
}
a.bottomitemlist:hover {
  /*background-color:#F7F51F; /*#ddd;*/
  color:#053B9D; /*#F7F51F; /*#ddd;*/
   font-weight:bolder;
   font-style: italic;
}
/* This is important ENDed*/

/* Responsive Web Design - Media Queries */
/* https://www.w3schools.com/cssref/sel_after.php */
.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}
[class*="cold-"] {
  float: left;
  padding: 15px;
}
[class*="colm-"] {
  float: left;
  padding: 15px;
}

@media only screen and (min-width: 800px ) {
/* For desktop: */
.cold-0 {display:none;}
.cold-5 {width: 5%;}
.cold-10 {width: 10%;}
.cold-15 {width:15%;}
.cold-20 {width:20%;}
.cold-25 {width:25%;}
.cold-30 {width: 30%;}
.cold-35 {width:35%;}
.cold-40 {width: 40%;}
.cold-45 {width:45%;}
.cold-50 {width: 50%;}
.cold-55 {width:55%;}
.cold-60 {width: 60%;}
.cold-65 {width:65%;}
.cold-70 {width: 70%;}
.cold-75 {width:75%;}
.cold-80 {width: 80%;}
.cold-85 {width:85%;}
.cold-90 {width: 90%;}
.cold-95 {width:95%;}
.cold-100 {width: 100%;}
/*[class*="colm-"] {display:none;}*/

}

@media only screen and (max-width: 799px) {
	/* For mobile phones: */
	.colm-0 {display:none;}
	.colm-5 {width: 5%;}
	.colm-10 {width: 10%;}
	.colm-15 {width:15%;}
	.colm-20 {width:20%;}
	.colm-25 {width:25%;}
	.colm-30 {width: 30%;}
	.colm-35 {width:35%;}
	.colm-40 {width: 40%;}
	.colm-45 {width:45%;}
	.colm-50 {width: 50%;}
	.colm-55 {width:55%;}
	.colm-60 {width: 60%;}
	.colm-65 {width:65%;}
	.colm-70 {width: 70%;}
	.colm-75 {width:75%;}
	.colm-80 {width: 80%;}
	.colm-85 {width:85%;}
	.colm-90 {width: 90%;}
	.colm-95 {width:95%;}
	.colm-100 {width: 100%;}
	/*[dlass*="cold-"] {display:none;}*/
}

/* Responsive Web Design - Media Queries ENDed */