/* 
   Color Palette: https://colorhunt.co/palette/3a98b9fff1dce8d5c4eeeeee 

   #3A98B9 Teal
   #FFF1DC Light Tan
   #E8D5C4 Dark Tan
   #EEEEEE Grey
   
*/


.table{
	width: 100%;
	border-collapse: collapse;
}
.table thead{
	background-color: #EEEEEE;
}
.table thead tr th{
	font-size: 14px;
	font-weight:600;
	letter-spacing: 0.35px;
	opacity: 1;
	padding: 12px;
	vertical-align: top;
	border: 1px solid #FFFFFF;
}
.table tbody tr td{
	font-size: 14px;
	letter-spacing: 0.35px;
	font-weight: normal;
	background-color: #EEEEEE;
	padding: 8px;
	text-align: center;
	border: 1px solid #dee2e685;
}
.table .text_open{
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.35px;
}
.table tbody tr td .btn{
	width: 130px;
	text-decoration: none;
	line-height: 35px;
	display: inline-block;
	font-weight: medium;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	font-size: 14px;
	opacity: 1;
} 
@media (max-width: 768px){
.table thead{
display: none;
}
.table, .table tbody, .table tr, .table td{
	display: block;
	width: 100%;
}
.table tr{
	margin-bottom: 15px;
}
.table tbody tr td{
	text-align: right;
	padding-left: 50%;
	position: relative;
}
.table td:before{
	content: attr(data-label);
	position: absolute;
	left: 0;
	width: 50%;
	padding-left: 15px;
	font-weight: 600;
	font-size: 14px;
	text-align: left;
}
}


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

.row::after {
	content: "";
	clear: both;
	display: table;
}

.row {
	background-color: #FFF1DC;
}

[class*="col-"] {
	float: left;
	padding: 15px;
	width: 100%;
}

html {
	font-family: sans-serif;
}

body {
	background-color: #3A98B9;
  }

.header {
  background-color: #3A98B9;
  padding: 15px;
  text-decoration: underline;
  color: #EEEEEE;
}

/* Using the width property - 
   If the width property is set to a percentage and the height 
   property is set to "auto", the image will be responsive and
   scale up and down.

   Using the max-width property - 
   If the max-width property is set to 100%, the image will
   scale down if it has to, but never scale up to be larger
   than its original size.
*/



img {
	max-width: 100%;
	height: auto;
	border-style: outset;
}

/* center home image in mobile view */
.col-3 {
	text-align: center;
}

h2 {
	background-color: #E8D5C4;
}

table {
	font-family: Helvetica;
}

.aside {
	background-color: #E8D5C4;
	padding: 15px;
	text-align: center;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.aside ul {
    list-style-type: none;
}

h4 {
	background-color: #EEEEEE;
}

.footer {
	background-color: #FFF1DC;
	text-align: center;
	font-size: 12 px;
	padding: 15px;
}


/* Design for mobile first. Write CSS to implement, and display 
   changes for screens greater than mobile screen width. */

/* For mobile phones */
[class*="col-"] {
	width: 100%;
}

/* For tablets */
@media only screen and (min-width: 600px) {
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}
}

/* For desktop */
@media only screen and (min-width: 768px) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}