body,
html {
background: url(imgs/Good-Computer-Wallpapers.jpeg) no-repeat center center fixed; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; background-color: #eaeaea; height: 100%; box-sizing: border-box;
	width: 100%;
	height: 100%;
	font-family: 'Roboto', arial

}
.notes {padding: 0 2.6 vw; box-sizing: border-box; margin-left:3vw; opacity:.89;}

.note {
	width: calc(25% - 25px);
	box-sizing: border-box;
	padding: 20px;
	box-shadow: 0 0 20px -1px grey;
	color: white;
	cursor: pointer;
	border-radius:8px;
}

.note img {
	margin: -20px -20px 16px;
	width: calc(100% + 40px);
	opacity:.85;
}
.note img:hover {opacity:1;}

@media only screen and (max-width: 800px) {
	.note {	width: calc(33% - 25px)	}
}
@media only screen and (max-width: 600px) {
	.note {	width: calc(50% - 29.5px)}
}

@media only screen and (max-width: 360px) {
	.note {	width: calc(100% - 40px)}
}

.note.note_expanded {
	width: calc(100% - 40px)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  font-family: 'Roboto';
  list-style-type: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

$colorPrimary: #E53935;
$fontGray: rgb(60, 60, 60);
$fontSilver: rgb(140, 140, 140);

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic,700,700italic,300,300italic);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: $fontGray;
  margin: 17px 30px;
  line-height: 1.5em
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', arial
}
.nav {
  padding: 8.5px 7.5px;
  background: $colorPrimary;
  margin-bottom: 30px;
  box-shadow: 0 0 10px 1px silver
}

.nav_icon,
.nav_title {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
  color: #fff
}
.nav_down {
  color: $fontGray;
  width: 100%;
  font-size: 15px;
  padding: 15px;
  font-family: 'Roboto'
}

.nav_drop {
  position: absolute;
  display: block;
  background: #fff;
  right: 12px;
  top: 15px;
  box-shadow: 0 1px 10px -1px gray;
  width: 200px;
  transition: all .1s;
  max-width: 80%;
  z-index: 90;
  -webkit-transform: scale(0);
  -webkit-transform-origin: 100% 0%
}

.nav_drop.nav_dropDown {
  -webkit-transform: scale(1)
}