/* Reset */
html, body, h1, p, a, div, section {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
}

/* Basic */
body {
  background-image: url(images/bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Titillium Web', sans-serif;
  font-size:16px;
  background-size: cover;
  background-color:#464646;
  color: #ffffff;
 text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1 {
  color: #efecec;
  font: 90px 'Qwigley', cursive;
  line-height: 120px;
  font-weight: 400;
  margin-top: 10px;
}

a {
  color: #ffffff;
  text-decoration:none;
  letter-spacing:3px;
  padding:10px;
  text-transform:uppercase;
}


.container {
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.content {
	padding-top: 2em;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
}

.button {
	display: block;
	margin: auto;
	border: none;
	background: rgba(0, 0, 0, 0.1);
	  font-family: 'Titillium Web', sans-serif;
	  font-size:16px;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	cursor:pointer;
	overflow: hidden;
	padding: 0;
	width: 330px;
	max-width: 90%;
	border: 2px solid;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}

.button::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ed2856;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.button > span {
	display: block;
}
.button::before,
.button > span {
	padding: 1em 2em;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button:hover::before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button:hover > span {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 700px;
  max-width: 80%;
  background: rgba(15, 15, 15, 0.95);
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.9);
  background-clip: padding-box;
  font-size:16px;
    font-family: 'Titillium Web', sans-serif;
}
.modal-box span{
color:#ed2856;
font-weight:bold;
letter-spacing:1px;}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #000;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; 
color:#ed2856;
font-size:20px;}

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #000;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9) !important;
}




/* Media Queries */
@media only screen and (max-width: 340px) {

  
  body h1 {
    font-size: 66px;
    line-height: 73px;
  }
  a {
    font-size: 12px;
}
  
  html, body, .container {
    height: auto;
	padding: auto;
  }
  .button {
  background: rgba(0, 0, 0, 0.1);
  letter-spacing:1px;
  }}
  
  @media only screen and (max-width: 767px) {
  body {
    background-image: url(images/bg-mobile.jpg);
  }
	}