body,html{
	margin: 0;
	font-family: sans-serif;
}

* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	max-width: 720px;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: calc(1em - 2px);
	color: #555;
	background-color: #f0f0f0;
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

/*This would all go into the global.css file*/
	[data-tooltip] {
  position: relative;
  z-index: 10;
  display: block;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
	transition: .2s ease-out;
	transform: translate(-50%, 5px)
}

[data-tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  padding: 7px;
	width: 300px;
  min-width: 70px;
	max-width: 350px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
	transition: .2s ease-out
}

[data-tooltip]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
	transform: translate(-50%, 0)
}
[data-tooltip=false]:hover:before,
[data-tooltip=false]:hover:after {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 400px) {
	body {
		font-size: 16px;
	}
}

.text-body1{
	font-size: 27px;
}