body {
	background-color: #ffffff;
	/*border-top: 7px solid #f64747;*/

}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, 25%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@font-face {
  font-family: Gilroy;
  src: url(Gilroy-FREE/Gilroy-Light.otf);
}
.trans--grow{
  -webkit-transition: width 2s ease-out; /* For Safari 3.1 to 6.0 */
  transition: width 2s  ease-out;
  width : 1%;

}
.grow{
  width:100%;
  height: 5px;
  background-color: #f64747;

}

#header {
	padding: 15px;

}
#jumbotron_home {
	/*background-image: url(images/jumbotron_back.png);
	background-size: cover;*/
    background: #ECE9E6;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #FFFFFF, #f9f9f9);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(#f9f9f9, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	padding-top: 8%;
	padding-bottom: 8%;

}

#jumbotron_header {
	color: #0c0c0c;
	font-family: 'Montserrat', sans-serif;
	font-size: 450%;
}

#navbar_brand{
	margin-left: 6%;
	color: #f64747;
}
#navbar_text{
	color: #0c0c0c;
}
#nav-continue {
  color: #0c0c0c;
  padding-left: 5%;
}
#nav-continue:hover,
#nav-continue:active {
    color: #f64747;
}

#arrow{
  color: #f64747;
  margin-right: 1em;
}
#nav{
	background-color: #f9f9f9;  /* fallback for old browsers */

}
#button_nav{
	margin-top: 6%;
	padding-top: 1%;
	padding-bottom: 1%;
}

#dark_mode{
	background-color: #0c0c0c;
	width: 100%;
	/*border-top: 3px solid #f64747;*/
}
#nights{
    
  	color: #ffffff;
  	font-family: 'Montserrat', sans-serif;
  	font-size: 350%;
  	padding-top: 4%;
    text-transform: uppercase;
}
.dropcap{
	font: normal normal 400 6.3rem/6rem "GT Sectra Fine","Source Sans Pro",sans-serif;
	text-transform: uppercase;
    color: #f64747;
    padding: 0 .5rem 0 0;
    margin: -0.1rem 0 -1rem;
    float: left;
}
#night-description{
	animation: fadeIn 2s ease-out both;
	color: #ffffff;
	font-family: 'Lora', serif;
	font-size: 120%;
	padding-top: 4%;

}
#tip {
	animation: fadeIn 2s ease-out both;
	font-family: 'Montserrat', sans-serif;
	color: #f64747;
	font-size: 100%;
}
#hover {
  animation: fadeIn 2s ease-out both;
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	font-size: 113%;
  text-transform: uppercase;

}
#ghost-button-back {
	display: inline-block;
	text-transform: uppercase;
  	width: 70%;
  	margin-left: 20%;
  	padding: 1.5%;
  	padding-right: 11%;
  	border-radius: 50px;
  	-webkit-border-radius: 50px;
  	-moz-border-radius: 50px;
  	margin-top: 10%;
  	margin-bottom: 10%;
  	color: #fff;
  	background-color: transparent;
  	border: 3px solid #f64747;
  	text-align: center;
  	outline: none;
  	text-decoration: none;
  	transition: color 0.3s ease-out,
              background-color 0.3s ease-out,
              border-color 0.3s ease-out;
}
#ghost-button-back:hover,
#ghost-button-back:active {
  	background-color: #f64747;
  	border-color: #f64747;
  	color: #ffffff;
  	transition: color 0.2s ease-in,
              background-color 0.2s ease-in,
              border-color 0.2s ease-in;
}
#arrow-back{
	color: #ffffff;
	margin-right: 1em;
	margin-left: 1em;
}
#ghost-button-foward {
	display: inline-block;
	text-transform: uppercase;
  	width: 70%;
  	margin-left: 20%;
  	padding: 1.5%;
  	padding-left: 10%;
  	border-radius: 50px;
  	-webkit-border-radius: 50px;
  	-moz-border-radius: 50px;
  	margin-top: 10%;
  	margin-bottom: 7%;
  	color: #fff;
  	background-color: transparent;
  	border: 3px solid #f64747;
  	text-align: center;
  	outline: none;
  	text-decoration: none;
  	transition: color 0.3s ease-out,
              background-color 0.3s ease-out,
              border-color 0.3s ease-out;
}
#ghost-button-foward:hover,
#ghost-button-foward:active {
  	background-color: #f64747;
  	border-color: #f64747;
  	color: #ffffff;
  	transition: color 0.2s ease-in,
              background-color 0.2s ease-in,
              border-color 0.2s ease-in;
}
#arrow-foward{
	color: #ffffff;
	margin-right: 1em;
	margin-left: 1em;

}
#canvas{
	width: 100%;
}

#containers {
	position: relative;
}
#containers #btns { /*hand*/
  position: absolute;
  top: 19%;
  left: 41.5%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns1 { /*glove*/
  position: absolute;
  top: 30%; /*control the position of the button*/
  left: 15%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns1:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns2 { /*feet*/
  position: absolute;
  top: 94%; /*control the position of the button*/
  left: 45%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns2:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns3 { /*lion*/
  position: absolute;
  top: 27%; /*control the position of the button*/
  left: 41.5%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
#containers #btns3:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease-in;
        
}
#containers #btns4 { /*gun powder*/
  position: absolute;
  top: 87%; /*control the position of the button*/
  left: 77%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns4:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns5 { /*clean gun*/
  position: absolute;
  top: 55%; /*control the position of the button*/
  left: 50%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns5:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns6 { /*oak hat*/
  position: absolute;
  top: 50.5%; /*control the position of the button*/
  left: 24%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns6:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#containers #btns7 { /*oak hat*/
  position: absolute;
  top: 51%; /*control the position of the button*/
  left: 43%; /*control the position of the button*/
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 60px;
  height: 2.5%;
  width: 3%;
  opacity: 0.5;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, 
              opacity 0.3s ease-out;
}
#containers #btns7:hover {
  background-color: #f64747;
  opacity: 0.9;
  transition: background-color 0.3s,
        opacity 0.3s ease-in;
        
}
#footer-box{
  padding-bottom: 2%;
  width: 100%;
  margin-left: 6%;
}
#footerdes{
  
  font-size: 90%;
}
#footer_head{
  background-color: #f64747;
  color: white;
  margin-top: 5%;
}
#footer-divider{
  margin-top: 10%;
}
#Footer-header-1{
  color: #ffffff;
}
#Facebook, #Twitter, #insta {
  color: #ffffff;
}
#social{
  padding-right: 8%;
}


.hovereffect {
  width: auto;
  height: auto;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #0c0c0c;
}
.footerhr {
	width: 60px;
	height: 1.5px;
	background-color: #f64747;
}
.footer-text{
	color: #ffffff;
	font-family: 'Lato', sans-serif;
}