body, html {
  background: #000;
  color: #fff;
}

.sticky-header {
 background: #000;
 max-height: 70px;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10;
 width: 100%;
}

.block-logo {
 display: inline-block;
 padding-top: 10px;
}

.block-logo {
 width: 45%;
}

.block-logo .logo-img {
 height: 60px;
}

.block-logo .logo-text {
 height: 40px;
 vertical-align: bottom;
 padding-left: 5px;
}

.block-cta-top {
 display: inline-block;
 text-align: right;
 width: 54%;
 padding-top: 28px;
}

.block-cta-top a {
 background: #f1a000;
 color: #000;
 font-size: 14px;
 padding: 7px 20px 7px 40px;
 border-radius: 50px;
 transition: .3s;
 margin-top: 30px;
 text-decoration: none;
 position: relative;
}

.block-cta-top a:hover {
 cursor: pointer;
 background: #ffb82e;
}

.block-cta-top a i {
 position: absolute;
 left: 10px;
 top: 7px;
 z-index: 9;
 font-size: 1.2rem;
}

.block-1 {
 background: url(../img/escape-room-door-1.png) no-repeat 85% 40px transparent;
 min-height: 100vh;
 padding-top: 90px
}

.block-1 .block-intro {
 padding-top: 150px;
 max-width: 40vw;
}

.block-1 .block-intro h3 {
 font-size: 3rem;
 margin-bottom: 40px;
}

.block-1 .block-intro h1 {
 display: inline-block;
 font-size: 1rem;
 font-weight: normal;
 margin-bottom: 0;
}


.block-1 .block-intro span {
 opacity: .5;
}

.block-2 {
 min-height: 100vh;
 background: url(../img/light-bulb.png) no-repeat 0 0px transparent;
 padding-top: 450px;
}

.block-2 .row-1 {
 position: relative;
 max-width: 70vw;
 margin-left: 150px;
 display: inline-block;
}

.block-2 .row-2 {
 position: relative;
 display: inline-block;
 max-width: 70vw;
 margin-left: 250px;
 font-size: 2.5rem;
}

.block-2 h2.row-1:after,
.block-2 h2.row-2:after{
 width: 100%;
 height: 50px;
 position: absolute;
 z-index: 2;
 right: 0;
 top: 0;
 content: '';
 display: inline-block;
 background: rgb(255,254,254);
 background: -moz-linear-gradient(90deg, rgba(255,254,254,0) 0%, rgba(0,0,0,0.7273503151260504) 100%);
 background: -webkit-linear-gradient(90deg, rgba(255,254,254,0) 0%, rgba(0,0,0,0.7273503151260504) 100%);
 background: linear-gradient(90deg, rgba(255,254,254,0) 0%, rgba(0,0,0,0.7273503151260504) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffefe",endColorstr="#000000",GradientType=1);
}

.block-2-text {
 min-height: 50vh;
 background: url(../img/escape-room-wall-1.png) no-repeat 0 -30px transparent;
 padding-top: 50px;
 vertical-align: top;
}

.block-2-text .block-2-text-inner {
 width: 35vw;
 margin-left: 50%;
 margin-top: 50px;
 opacity: .5
}

.block-3 {
 margin-top: 100px;
 margin-bottom: 200px;
}

.block-3 .col-4 {
 padding: 30px;
}

.block-3 .col-4 .icon {
 position: relative;
 margin-bottom: 20px;
}

.block-3 .col-4 .icon:after {
 width: 100%;
 height: 1px;
 position: absolute;
 left: 0px;
 top: 10px;
 content: '';
 background: #fff;
}

.block-3 .col-4 .icon i {
 font-size: 30px;
 background: #000;
 width: 50px;
 height: 50px;
 z-index: 8;
 position: absolute;
 top: 0;
 left: 0;
}

.explainer-text {
 display: inline-block;
 margin-top: 30px;
 opacity: .5;
}

.block-cta {
 background: url(../img/escape-room-door-2.png) no-repeat 0px 0px transparent;
 background-size: 600px;
 min-height: 70vh;
 padding-top: 90px;
}

.block-cta-left {
 opacity: 1;
 text-align: center;
}

.block-cta-inner {
 opacity: .7;
 margin-left: 30vw;
 width: 25vw;
 padding-top: 50px;
 display: inline-block;
}

.contact-box {
	width: 30vw;
	display: inline-block;
	padding-top: 0px;
	vertical-align: top;
}

.block-explainer-mid {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	margin-top: 100px;
}

.block-explainer-mid .icon {
	position: relative;
	font-size: 30px;
	width: auto;
	display: inline-block;
	width: 50px;
	z-index: 9;
	opacity: .7;
}

.block-explainer-mid .icon:before {
	content: '';
	position: absolute;
	width: 100px;
	height: 1px;
	background: #fff;
	left: -100px;
	top: 22px;
	z-index: 3;
}

.block-explainer-mid .icon:after {
	content: '';
	position: absolute;
	width: 100px;
	height: 1px;
	background: #fff;
	right: -100px;
	top: 22px;
	z-index: 3;
}

.main-images {
	margin-top: 30px;
}

.main-images img {
	max-width: 200px;
	display: inline-block;
	margin: 10px 10px 0 0;
}

.contact-box h5 {
	color: #f1a000;
	font-weight: 300;
	margin-bottom: 5px;
}

.contact-box h6{ 
	margin-bottom: 20px;
	font-size: .8rem;
	font-weight: normal;
	opacity: .8;
}

.contact-box input[type='text'],
.contact-box input[type='email'],
.contact-box textarea {
	width: 80%;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	background: transparent;
	padding: 5px 10px;
	font-size: .8rem;
	font-weight: normal;
	color: #fff;
	border-radius: 3px;
}

.contact-box textarea {
	height: 90px;
}

.contact-box button {
	border: 0;
	width: 80%;
	border-radius: 3px;
	background: #f1a000;
	padding: 5px;
	margin-top: 10px;
}

#form-messages.success {
	color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
	width: 80%;
	padding: 3px 10px;
	margin-bottom: 10px;
	font-size: .8rem;
}

#form-messages.error {
	color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
	width: 80%;
	padding: 3px 10px;
	margin-bottom: 10px;
	font-size: .8rem;
}

.important {
	background: #333;
	padding: 10px;
	font-size: 12px;
	margin-top: 30px;
	margin-bottom: 50px;
	max-width: 330px;
}

@media screen and (max-width: 1200px) {
 .block-1 .block-intro {
   padding-top: 150px;
   max-width: 100vw;
 }

 .block-2 {
   background-position: -50px 0;
 }

 .block-2 .row-1 {
   max-width: 100vw;
   margin-left: 10px;
 }
 .block-2 .row-2 {
   max-width: 100vw;
   margin-left: 10px;
   font-size: 2.5rem;
 }

 .block-2-text .block-2-text-inner {
   width: 100%;
   margin-left: 0vw;
   opacity: .5;
 }

 .block-3 {
   margin-right: auto;
   margin-left: auto;
 }
 .block-3 .col-4 {
   width: 100%;
 }
 .block-cta {
   background-position: -250px 0px;
 }
 .block-cta-inner {
   opacity: .7;
   margin-left: 20vw;
   width: 60vw;
 }
}

@media screen and (max-width: 700px) {
	.sticky-header {
		max-height: 90px;
		padding-bottom: 20px;
	}
	.block-logo {
		width: 40%;
	}
	.block-cta-top {
		width: 60%;
	}
	.block-cta-top a {
		font-size: 12px;
	}
	.block-logo .logo-img {
		max-height: 45px;
	}
	.block-3 {
		margin-bottom: 100px;
	}
	.block-cta {
		background-size: 550px;
	}
	.block-logo .logo-text {
		max-height: 30px;
	}
  .main-images img {
  	max-width: 47%;
  	margin: 20px 1% 1% 1%;
  }

  .contact-box {
	width: 100%;
	margin-top: 100px;
	margin-bottom: 50px;
	}

	.contact-box input[type="text"],
	.contact-box input[type="email"],
	.contact-box textarea, 
	.contact-box button {
		width: 100%;
	}
}
