body {
	color: #0f002d;
	background-color: #cef7ef;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body.b { background-color: #e8e2fd; }
body.c { background-color: #ffe2eb; }

/* Global */

.container {
	overflow: visible;
}

.box {
	float: none;
	margin-bottom: 40px;
	padding-right: 0;
	overflow: visible;
}

.img-box img {
	width: 100%;
	padding: 0 0 20px 0;	
}


a {
	color: #09d8b0;
}

a:hover {
	border-bottom: 2px dotted #ccc;
}


button, input, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 20px;
	border: 2px solid #6be8d0;
	background-color: #fff;
	margin-bottom: 40px;
}

input, textarea {
	width: 66%;
	float: left;
	
}

input:focus, textarea:focus, input:hover, textarea:hover {
    outline: none !important;9
    border: 2px solid #09d8b0;
	box-shadow: 0 0 3px #c6c6c6;
  }

button {
	width: 26%;
	float: right;
	background-color: #09d8b0;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

button:hover {
	background-color: #0f002d;
}

button:active {
	background-color: #0f002d;
	color: #fff;
	font-size: 0.6rem;
}


#clear-list {
	margin-top: 80px;
	color: #e62603;
	float: right;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	background: transparent;
	border: none;
	width: auto;
}

#list-container {
	min-height: 100px;
}

ol li {

	padding: 20px;
	align-items: center;
	background-color: #fff;
	opacity: 0;
}

ol li:last-child {
	margin-bottom: 320px;
}

ol li span:first-child {
	display: inline-block;
	width: 80%;
}

ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(3), ol li:nth-child(4), ol li:nth-child(5) { opacity: 1; }

ol li:nth-child(5) { opacity: 0.9; }

ol li:nth-child(6) { opacity: 0.8; }

ol li:nth-child(7) { opacity: 0.7; }

ol li:nth-child(8) { opacity: 0.3; }

ol li:nth-child(9) { opacity: 0.1; }

li span {
	display: inline-block;
	position: relative;
	z-index: 50;
}
.remove-item {
	display: inline-block;
	z-index: 100;
	float: right;
	margin-left: 10px;
	color: #e62603;
	cursor: pointer;
	text-indent: -9999px;
	width: 20px;
	height: 20px;
	background: url("../img/delete.svg") no-repeat;
}

/* header */

#masthead {
	overflow: hidden;
	background: #09d8b0;
}

#masthead nav a.active {
	color: #9cf0d3;
}

div#lp_back {
	overflow: hidden;
}

div#lp_back a {
	display: block;
	float: right;
	background-color: #000000;
	opacity: 0.8;
}

div#lp_back a:hover {
	border-bottom: none;
	opacity: 1;
}

div#lp_back a img {
	vertical-align: middle;
	padding: 8px;
}

/* sidebar navigation */

nav.tabs {
	margin-top: 20px;
	margin-bottom: 60px;
	float: right;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

nav.tabs ul {
	display: block;
}

nav.tabs ul li {
	display: block;
	float: left;
	padding-right: 10px;
}

nav.tabs li a {
	padding: 0 8px;
}

nav.tabs li a.active {
	color: #fff;
	text-decoration: none;
	background-color: #09d8b0;
}

body.b nav.tabs li a.active { background-color: #410ef2;}

body.c nav.tabs li a.active { background-color: #f21a60;}

body.notes nav.tabs li a.active { background-color: #e5d902;}

/* footer */

footer h2 {
	margin-top: 40px;
	font-size: 18px;
	font-weight: normal;
}

footer ul li {
	list-style-type: disc;
}

footer p {
	border-top: 1px solid #1a1a1a;
	padding: 20px 0;
}

/* Notes 
---------------------------------------------------*/

body.notes {
	background-color: #ffffff;
}

body.notes textarea {
	width: 96%;
	border: 2px solid #e5d902;
	background-color: #faf7cc;
}

body.notes textarea:hover, body.notes textarea:focus {
	border: 2px solid #e5d902;
}

body.notes #add-item {
	width: 15%;
}

body.notes #dynamic-list {
  column-count: 3;
  column-gap: 20px;
  padding: 0;
}

body.notes #dynamic-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
  list-style: none;
  background-color: #faf7cc;
   box-shadow: 3px 0 3px #c6c6c6;
  opacity: 1 !important;
	overflow: scroll;
}


/* Media Queries ------------ */

@media only screen and (max-width: 1000px) {
	
	button, input, body.notes textarea { 
		font-size: 14px;
		box-sizing: border-box;
		width: 100%;
		float: none;
		margin: 10px auto;
	}
	
	button {
		margin-bottom: 40px;
	}
	
	body.notes #dynamic-list {
		column-count: 2;
	}
	
}

@media only screen and (max-width: 600px) {
	
	body.notes #dynamic-list {
		column-count: 1;
	}
	
}