html,
body {
	margin: 0;
	padding: 0;
}

.containerGrid{
  display: grid;
  grid-template-columns: 20vw auto;
  overflow: hidden;
}
.container{
	display: flex;
}

.containerFlexLeft{
	flex: 2;
}

.containterFlexRight{
	flex: 8;
}
.pageHeaderGrid{
	display: grid;
  grid-template-columns: 15vw auto;
  overflow: hidden;
}

.pageHeader{
	display: flex;
}


.pageHeader H1{
	padding-left:5vw;
	padding-top:2vh;
}

.header{
  background: #4285f4;
  height: 10vh;
  color: white;
  font-size: 1.8vw;
  padding-top: 1.5vh;
	padding-left: 1.5vw;
  width: 80vw;
	display: flex;
}
.headerLeft{
	width:30vw;
}

.headerRight{
	width:45vw;
	text-align: right;
}

.main{
  background: #ccc;
  height: 100vh;
}

.maintext{
  width: 85%;
  margin: 2vh auto;
  background: white;
  height: 70vh;
  overflow: auto;
  padding: 2vw;
}
.sidetext{
  padding: 2vw;
  font-size: 1.3vw;
}

.circle {
  display: inline-block;
  width: 64px;
  height: 64px;
  text-align: center;
  color: white;
  border-radius: 50%;
  background: #4285f4;
  font-size: 30px;
  line-height: 64px;
}
.bold{
	font-weight: bold;
}
.normal{
	font-weight: normal;
}
.show{
	display: block;
}
.hide{
	display:none;
}