@media screen and (max-width:1366px) {
	.container {
	width: 98%;
	margin: 1% auto;
  }
}
@media screen and (max-width:1024px) {
	.inner-container {
	width: 98%;
  }
}
@media screen and (max-width:900px) {
	h1 {
	font-size: 188%;
  }
   h2 {
	font-size: 163%
  }
   h3 {
	font-size: 150%;
  }
}
@media screen and (max-width:768px) {
	.header-row {
	display: block;
  }
	.header-column {
	margin: 0 auto;
  }
	.main-logo {
	margin: 10% auto 1% auto;
  }
	.header-info-right {
	text-align: center;
  }
	.flex-item {
	width: 30%;
  }
}
@media screen and (max-width:720px) {
	h2 {
	font-size: 150%
  }
   h3 {
	font-size: 138%;
  }
	.row {
	display: block;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
  }
}
@media screen and (max-width:640px) {
	.header-info-right {
	font-size: 88%;
	}
}
@media screen and (max-width:480px) {
	h2 {
	font-size: 119%
  }
   h3 {
	font-size: 113%;
  }
	.flex-item {
	font-size: 75%;
  }
	.footer-text {
	font-size: 75%;
  }
	.breakit {
    display: block; 
  }
	.flex-container {
	display: block;
  }
	.flex-item {
	width: 90%;
	margin: 4% auto;
  }
}
@media screen and (max-width:414px) {
	h1 {
	font-size: 150%;
	text-align: center;
  }
}
/** navigation bar **/
@media (min-width: 769px) {
	.nav-bar,
	.main-nav {
		display: flex;
	}
	.nav-bar {
		flex-direction: column;
		align-items: center;
	}
    	.nav-bar{
	width: 100%;
	margin: 0 auto;
	max-width: 1920px;
	}
}

@media (min-width: 1025px) {
	.nav-bar {
		flex-direction: row;
		justify-content: space-between;
	}
}