/*** File: feel.css ***/
* {
    box-sizing: border-box;
}

/* column, block, and row classes */
.block-left{ display: block; float: left;}
.block-right { display: block; float: right;}
.block-filler {
	display: block;
	float: left;
	width: 10%;
	border: thin solid transparent; /* Necessary to give substance */
}
.block-content{
	display: block;
	overflow: visible;
	float: left;
	width: 65%;
}
[class*="col-"] {
	padding: 0px 10px 0px 10px;
	/* border: thin solid red; /* comment out after testing */
}

.col-10 { width: 10%; }
.col-15 { width: 15%; }
.col-20 { width: 20%; }
.col-25 { width: 25%; }
.col-30 { width: 30%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-80 { width: 80%; }
.col-90 { width: 90%; }
.col-100 { width: 100%; }
.row {
	width: 100%;
	overflow: visible;
	/* border: thin solid cyan; */
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
/* Card classes */
.card {
	display: block;
	float: left;
	width: 98%;
	height: auto;
	text-align: left;
	margin: 6px 0;
	border: thin solid gray;
}
.card img {
	display: block;
	float: left;
	width: 25%;
	height: auto;
	margin: 8px;
}
.card-info {
	display: block;
	float: right;
	width: 73%;
	padding-left: 8px;
	text-align: left;
	/* border: thin solid red; */
}
.blog-side {
	display: block;
	float: right;
	margin-right: 8px;
	overflow: auto;
	padding: 8px;
	width: 24%;
}


/* Flex grid */
.flex-row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}
	/* Create four equal columns that sits next to each other */
.flex-column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}
.flex-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
.flex-info {
	display: block;
    width: 100%;
    padding: 4px;
}
.flex-info h4 {
	text-align: center;
}

/* Header classes */
.banner-page {
	overflow: hidden;
	width: 100%;
	margin-top: 80px;
}
.banner-title {
	float: left;
	width: 55%;
	text-align: center;
}
.banner-tag {
	float: left;
	width: 29%;
	padding-left: 20px;
	text-align: left;
}

/* Navigation behavior */
	/* Icon for small screen menu */
.icondiv {
  display: none;
  width: 3.5ex;
  cursor: pointer;
  margin: 12px;
  padding: 3px;
}
.bar1, .bar2, .bar3 {
  width: 100%;
  height: 0.4ex;
  margin: 0.3ex 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate (-0.5ex, 0.5ex); /*(-9px, 6px); */
  transform: rotate(-45deg) translate(-0.5ex, 0.5ex);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate (-0.5ex, -0.5ex); /*(-8px, -8px); */
  transform: rotate(45deg) translate(-0.5ex, -0.5ex);
}

	/* Navigation bar for desktop and tablet menu */
.navbar {
	width: 100%;
	position: fixed;
	top: 0;
	padding-top: 4px;
	padding-bottom: 0px;
}
.navbar a {
	float: left;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}
.block-menu {
	display: inline-block;
	float: right;
	padding-right: 80px; /* padding to make room for dropdown menu */
}
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	overflow: visible;
	position: absolute;
	min-width: 190px;
	margin-top: 3ex;
	padding: 20px 0px 0px 0px; /* distance from menubar */
	background-color: transparent;
	z-index: 1;
}
.dropdown-content-box {
	overflow-y: auto;
	padding: 4px 0px 8px 4px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	font-size: 1.6ex;
	/* border: thin solid purple; */
}
.dropdown .dropbtn {
	border: none;
	padding: 8px 16px;
/* 
	background-color: inherit;
	font-family: inherit;
*/
	margin: 0;
}
.dropdown-content a {
	padding: 8px 16px;
	text-decoration: none;
	text-align: left; 
}
.dropdown-content a:hover,
.dropdown:focus .dropbtn,
.dropbtn:focus {
	padding: 8px 16px;
}
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content,
.dropbtn:focus + .dropdown-content {
	display: block;
}

/* Adjust for chromebook and other similar devices*/
@media screen and (max-width: 1280px) {
	.block-filler {display:none;}
	.block-content {width: 70%;}
	.blog-side {width: 28%;}
	.navbar {position: static; overflow: visible; display: block; width: 100%;
		padding-bottom: 10px; font-size: 2.0ex;}
	.navbar a{text-align: left;}
	.icondiv {position: fixed; top:0; right:0; display: inline-block;
		background-color: white;}
	.block-menu {display: none;}
	.block-menu.responsive {padding: 0; width: 100%; display:table;}
	.dropdown {display: table-row;}
	.dropbtn {width:100%;}
	.dropdown-content {position: static; display: inline;	margin-top: 10px;}
	.dropdown-content-box {box-shadow: none; display: table-cell;}
	.dropdown-content-box a{display: block; width: 100%;}
	.dropdown:hover .dropdown-content,.dropdown:focus .dropdown-content {
		display: inline;}
	.banner-page {display: block; margin-top: 20px;}

}

/* Adjust for smartphones and tablets */
@media screen and (max-width: 980px)   {
	body {font-size: 1em;}
	.col-10, .col-15, .col-20, .col-25, .col-30, .col-40, .col-50,
	.col-60, .col-70, .col-75k, .col-80, .col-90, .col-100
	 {	width: 100%; padding: 0; margin: 0;}
	.block-filler{display:none;}
	.block-left  {float: none; width: 100%;}
	.block-right {float: none; width: 100%;}
	.block-content {float: none; width: 100%; padding: 2px; margin: 0;}
	.blog-side {float: none; width: 100%; padding: 2px; margin: 0;}
	.card {width: 98%; height: auto; border: thin solid black;
		text-align: center;}
	.card-info {text-align: center;}
	.card img {width: 95%;}
	.flex-column {-ms-flex: 100%; flex: 100%; max-width: 100%;}
	.banner-title {float: none; width: 100%; padding 2px; margin: 0;}
	.banner-tag {float:  none; width: 100%; padding 2px; margin: 0;}
	.navbar {position: static; overflow: visible; display: block; width: 100%;
		padding-bottom: 10px; font-size: 2.75ex;}
	.navbar a{text-align: left;}
	.icondiv {position: static; display: inline-block; float: right;}
	.block-menu {display: none;}
	.block-menu.responsive {padding: 0; width: 100%; display:table;}
	.dropdown {display: table-row;}
	.dropbtn {width:100%;}
	.dropdown-content {position: static; display: inline;	margin-top: 10px;}
	.dropdown-content-box {box-shadow: none; display: table-cell;}
	.dropdown-content-box a{display: block; width: 100%;}
	.dropdown:hover .dropdown-content,.dropdown:focus .dropdown-content {
		display: inline;}
	.banner-page {display: block; margin-top: 20px;}
}