/* === */
body {
	font-family:Helvetica,sans-serif;
  margin: 0;
}

.bg {
	position:fixed;
	width:100%;
	height:600px;
	z-index:-100;
}

.bg > div {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

.bg-normal {
	z-index:10;
	background-image:url(./imgs/jimdai.jpeg);
}

.bg-blur {
	z-index:20;
	background-image:url(./imgs/jimdai_blur.jpeg);
	opacity:0;
}

.medium-container {
	z-index:2000;
}

.medium-container header {
	position:relative;
	width:100%;
	height:450px;
}

.slogan-holder {
	position:relative;
	width:100%;
	height:330px;
}

.nav-holder {
	position:relative;
	width:100%;
	height:60px;
}

.nav-holder h1 {
  color: #fff;
  text-shadow: 2px 2px #000;
  font-size: 220%;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.nav-holder h2 {
  color: #eee;
  text-shadow: 2px 2px #000;
  font-size: 200%;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

@media (min-width: 550px) {
  .nav-holder h1 {
    font-size: 350%;
  }

  .bg {
  	position:fixed;
  	width:100%;
  	height:1184px;
  	z-index:-100;
  }

  .medium-container header {
  	position:relative;
  	width:100%;
  	height:800px;
  }

  .slogan-holder {
  	position:relative;
  	width:100%;
  	height:625px;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .nav-holder h1 {
    font-size: 400%;
  }

  .medium-container header {
  	position:relative;
  	width:100%;
  	height:800px;
  }

  .slogan-holder {
  	position:relative;
  	width:100%;
  	height:625px;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .nav-holder h1 {
    font-size: 400%;
  }

  .medium-container header {
  	position:relative;
  	width:100%;
  	height:800px;
  }

  .slogan-holder {
  	position:relative;
  	width:100%;
  	height:625px;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .nav-holder h1 {
    font-size: 450%;
  }

  .medium-container header {
  	position:relative;
  	width:100%;
  	height:800px;
  }

  .slogan-holder {
  	position:relative;
  	width:100%;
  	height:625px;
  }
}

ul.nav {
	/*width:640px;*/
	height:60px;
	margin:0 auto;
	/*border-top:1px solid #dededc;*/
	list-style:none;
	text-align:center;
}

ul.nav li {
	display:inline-block;
	padding-top:16px;
	padding-right:40px;
}

ul.nav li a {
	text-decoration:none;
	color:#fff;
	font-size:18px;
}

.content {
  padding-top: 80px;
	/*height:2500px;*/
	background-color:#fff;
  padding-bottom: 100px;
}

.disable-pointer-events {
	pointer-events:none!important;
}

.message_box {
  font-size: 1.5em;
}

.message_box p {
  text-align: center;
  font-family: "Fredoka One";
}