@media screen and (max-width: 900px){
  #menu a {
    letter-spacing: 2px;
    margin: 0px 5px;
    font-size: 105%;
  }

  nav ul li {
    margin-left: 15px;
  }
}

/* Tablets */
@media screen and (max-width: 800px) {

header {
  display: block;
}

.header-boxing {
  display: flex;
}

nav {
  display: none;
	}

nav ul {
  display: flex;
  flex-direction: column;
  width: 100%
}

#menu a {
  line-height: 30px;
  font-size: 130%
}

.intro-box-2 h1 {
  font-size: x-large;
}

.toggle {
	display: block;
}

.show {
  display: block;
}

.show ul li {
	display: block;
	text-align: center;
	margin-bottom: 25px;
 }

 .show nav ul {
	 display: block;
	 position: absolute;
	 top: 100%;
	 left: 0;
	 width: 100%;
	 padding-left: 0;
	 text-align: center;
 }

.show nav ul li {
  display: block;
  text-align: right;
  margin-bottom: 20px;
  margin-top: 15px;
}

.logo {
  text-align: -webkit-left;
  width: 50%;
}

.logo img {
  height: 50px;
  margin: 5px;
}

 .toggle {
	 text-align: -webkit-right;
   width: 50%;
   margin: 12px;
 }

.toggle span {
  width: 30px;
  height: 3px;
  background-color: #555555;
  display: block;
  margin-bottom: 7px;
  }

#container {
	margin-top: 12px;
	overflow: hidden;
}

#mainbanner {
	display: none;
}

.split-container {
	width: 100%;
	flex-direction: column;
}

.split-container img {
	display: block;
	margin: 0 auto;
 	width: 60%;
}

.box-container-1 {
	width: 40%;
}

.box-container-2{
  width: 56%;
  margin-left: 4%;
}

.box {
	width: 100%;
	align-self: center;
}

.box p {
	font-weight: normal;
}

footer ul {
	width: 100%;
	text-align: center;
	float: none;
  padding: 0px;
}

}

@media screen and (max-width: 630px){

#main-page {
  margin-top: 0px;
}

.intro-container {
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.intro-box-1, .intro-box-2 {
  width: 95%;
}

.intro-box-1{
  margin-bottom: 20px;
}

.intro-box-2 h1, h2 {
  line-height: 40px;
}

.intro-box-2 h1 {
  letter-spacing: 12px;
}

.intro-box-1 img {
  width: 100%;
  margin: 0px;
}

.intro-box-2 {
  letter-spacing: 13px;
}

.img-home-1 {
  display: none;
}

.img-home-2 {
  display: block;
  width: 90%;
}

.about-btn {
  margin: 0px;
}

.box-container {
  padding: 10px 10px;
}

.box-1 {
    width: 100%;
}

.box-1 img {
  width: 100%;
  margin: 0px
}

.box-2 {
  width: 100%;
  margin-left: 0px;
}

.box-2 p {
  font-size: medium;
}

.img-home-1 {
  display: none;
}

.img-home-2 {
  display: block;
}

.upcoming-container {
  flex-direction: column;
  width: 80%;
}

.box-container-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.box-container-2 {
  width: 100%;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.box {
	display: flex;
  flex-direction: column;
  line-height: 40px;
  width: 100%;
  margin: 0px
  border-radius: 12px;
	align-self: center;
}

.box h4 {
	font-size: medium;
	font-weight: normal;
}

.box {
	margin-left: 0;
	margin-right: 0;
	font-size: smaller;
}

.box p {
  line-height: 20px;
}

.item-container:first-child {
    margin-bottom: 0px;
}

}

/*SMARTPHONES*/
@media screen and (max-width: 480px) {


#container {
	float: left;
}

#container>.btn, #container>.btn1:hover, #container>.btn2:hover{
	display: none;
}

.intro-container {
	margin: 0 auto;
}

.intro-container-About p {
	font-weight: normal;
}

.intro-container p {
	line-height: 25px;
	font-size: smaller;
	font-weight: normal;
}

.intro-box-2 h2 {
  letter-spacing: 2px;
  font-size: 17px;
}

footer ul {
	width: 80%;
	text-align: center;
	float: none;
  font-size: smaller;
  padding: 0px;
}