*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tutorial a {
  color: #000000;  /* #FFFFFF */
  white-space: nowrap;
}
.tutorial li:hover > a {
  color: #FFFFFF;  /* #df0606 */
  transition: background 0.3s, color 0.3s;
}


.tutorial ul li {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000000; /* #FFFFFF */
  display: inline-block;
  padding: 15px;
  position: relative;
}

.tutorial ul li:hover {
  cursor: pointer;
  color: #FFFFFF; /* #df0606 */
  background-color: #000000;  /* #bdbdbd */
  transition: background 0.3s, color 0.3s;
}

.submenu, .submenu-right {
  display: none;
  position: absolute;
  background: #fee720; /* #000000 */
  list-style: none;
  z-index: 100;
}
.submenu-right {
  background: #ffe7bb; !important;  /* #666666 */
}
.submenu > li, .submenu-right > li {
  width: 100%;
}

.tutorial ul li:hover > .submenu {
  display: block;
  top: 100%;
  left: 0;
}

.submenu li:hover > .submenu-right {
  display: block;
  top: 0;
  left: 100%;
  margin-left: 0;
}

.contactRollOver:hover .contact_normal,
.contactRollOver .contact_hover {
    display: none;
}
.contactRollOver:hover .contact_hover {
    display: inline;
}
.contactRollOver a:hover {
  color: #FFFFFF !important;
}

/* MOBILE NAVI SHOW AND HIDE */

/* Style the navigation menu */
.topnavMobile {
  z-index: 99;
  overflow: hidden;
  background-color: #333;
  position: absolute;
  width: 100%;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnavMobile #myLinksMobile {
  display: none;
  position: relative;
}

/* Style navigation menu links */
.topnavMobile a {
  color: #000000; /* white */
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Add a grey background color on mouse-over */
.topnavMobile a:hover {
  background-color: #000000;  /* #dddddd */
  color: #FFFFFF; /* black */
}

.McBacon {
  z-index: 100;
  display: none;
  background: #fee720; /* #000000 */
  position: absolute;
  top: 0px;
  right: 0px;
}
.McBacon a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 14px;
}

.page-footerMobile {
  display: none;
}

.mainText {
	font-family: SourceSans3;
	font-size: 16px;
}
.mainImage {
	padding: 45px 0px 50px 0px;
}
.mainBox1 {
  padding-right: 35px;
}
.mainBox2 {
   padding-left: 35px;
   padding-right: 35px;
}
.mainBox3 {
  padding-left: 35px;
}

@media only screen and (max-width: 800px) {
  .mainImage {
  	padding: 0px 0px 50px 0px;
  }
  .mainBox1, .mainBox2, .mainBox3 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .McBacon {
    display: block;
  }
  .tutorial {
    display: none;
  }
  .page-footer {
    display: none;
  }
  .page-footerMobile {
    display: block;
  }
}

/* ACCORDION INSIDE MOBILE NAVI */

.accordionMobile {
  background-color: #fee720; /* #000000 */
  color: #000000; /* #FFFFFF */
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.activeMobile, .accordionMobile:hover {
  background-color: #000000;  /* #bdbdbd */
  transition: background 0.3s, color 0.3s;
  color: #FFFFFF;  /* #df0606 */
}

/* Style the accordion panel. Note: hidden by default */
.panelMobile {
  padding: 0 18px;
  background-color: #fee720; /* #000000 */
  color: #000000; /* #FFFFFF */
  display: none;
  overflow: hidden;
}
.panelMobileSub {
  padding: 0 18px;
  background-color: #fee720; /* #000000 */
  color: #000000; /* #FFFFFF */
  display: none;
  overflow: hidden;
}

#moreB, #moreP, #moreK {
  display: none;
}

.newIndexSub {
  color: red;
  font-size: 30px;
}