/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #b1b1b1;
  background-color: #000;
}

footer {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
}

a {
	color: #fff;
}

a:hover {
	color: #ffda52;
}


/* POKEMON PLANET BANNER
-------------------------------------------------- */

div#headerbg {   
    height: 83vh;
    margin:auto;  
	margin-bottom: 0px; 
    background:url("./images/headerbg.jpg") repeat 0 0;  
}  
      

.headerleft {
  background-image: url("./images/HeaderMask_Left.png");
  height: 83vh;
  background-position: left;
  background-size: 100%;
}

.headerleft-mobile {
  background-image: none;
}

.headermiddle {
  background-image: url("./images/3starters.png");
  height: 83vh;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.headerright{
  background-image: url("./images/HeaderMask_Right.png");
  height: 83vh;
  background-position: Right;
  background-size: 100%;
}

.headerright-mobile{
  background-image: none;
}

.headerlogo {
  background-image: url("./images/logo_top.png");
  height: 83vh;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.menulogo {
  background-image: url("./images/logo_bottom.png");
  height: 180px;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 10px;
}

.menuarea {
	margin: auto;
	width: 984px;
}

#playnow {
	margin: auto;
	margin-top: 5px;
	background-image: url("./images/playnowbtn.png");
	height: 153px;
	width: 422px;
	transition: background-image 0.2s ease-in-out;
	background-repeat: no-repeat;
}

#playnow:hover {
  background-image:url("./images/playnowbtn_hover.png");
}

#playnow2 {
	margin: auto;
	background-image: url("./images/playnow2btn.png");
	height: 84px;
	width: 450px;
	transition: background-image 0.2s ease-in-out;
	margin-top: 30px;
}

#playnow2:hover {
  background-image:url("./images/playnow2btn_hover.png");
}

#guides {
	background-image: url("./images/guidesbtn.png");
	height: 160px;
	width: 335px;
	float: left;
	margin-top: -10px;
	transition: background-image 0.2s ease-in-out;
}

#guides:hover {
  background-image:url("./images/guidesbtn_hover.png");
}

#trailer{
	background-image: url("./images/trailerbtn.png");
	height: 132px;
	width: 304px;
	float: right;
	margin-top: 10px;
	margin-right: 30px;
	transition: background-image 0.2s ease-in-out;
}

#trailer:hover {
  background-image:url("./images/trailerbtn_hover.png");
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto
}

/* Features
-------------------------------------------------- */

.feature {
	margin: auto;
	height: 315px;
	margin-bottom: 20px;
	background-position: center;
}

.freetoplay {
	background-image: url("./images/introduction_freetoplay_bg.jpg");
	background-repeat: no-repeat;
	padding-top: 120px;
}

.freetoplaytext {
	background-image: url("./images/introduction_freetoplay_text.png");
	background-repeat: no-repeat;
	width: 552px;
	height: 86px;
	margin: auto;
	padding-right: 1100px;
}

.catchemall{
	background-image: url("./images/introduction_pokemon_bg.jpg");
	background-repeat: no-repeat;
	padding-top: 120px;
}

.catchemalltext {
	background-image: url("./images/introduction_pokemon_text.png");
	background-repeat: no-repeat;
	width: 471px;
	height: 86px;
	margin-left: 50%;
}

.explore {
	background-image: url("./images/introduction_explore_bg.jpg");
	background-repeat: no-repeat;
	padding-top: 110px;
}

.exploretext {
	background-image: url("./images/introduction_explore_text.png");
	background-repeat: no-repeat;
	width: 600px;
	height: 105px;
	margin: auto;
	padding-right: 1100px;
}

.friends {
	background-image: url("./images/introduction_friends_bg.jpg");
	background-repeat: no-repeat;
	padding-top: 110px;
}

.friendstext {
	background-image: url("./images/introduction_friends_text.png");
	background-repeat: no-repeat;
	width: 549px;
	height: 108px;
	margin-left: 50%;
}

.screenshots {
	background-image: url("./images/introduction_screenshots_bg.jpg");
	background-repeat: no-repeat;
	height: 710px;
	padding-top: 20px;
}

.screenshotstext {
	background-image: url("./images/introduction_screenshots_text.png");
	width: 148px;
	height: 31px;
	margin: auto;
	margin-bottom: 10px;
}

/* LOGIN STYLE
-------------------------------------------------- */

#login-overlay {
	margin: auto;
}

.modal-header {
	background-image: url("./images/loginheader.png");
	height: 58px;
}

.loginbutton {
	height: 50px;
	background: rgb(252,234,187);
background: -moz-linear-gradient(top,  rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1)));
background: -webkit-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
background: -o-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
background: -ms-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
background: linear-gradient(to bottom,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
border-color: #f8b501;
border-bottom: 3px solid #ab6705;
}

.loginbutton:hover  {
	border-color: #eb9500;
	background: rgb(249,246,237);
background: -moz-linear-gradient(top,  rgba(249,246,237,1) 0%, rgba(249,208,102,1) 50%, rgba(247,184,24,1) 51%, rgba(249,235,197,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,246,237,1)), color-stop(50%,rgba(249,208,102,1)), color-stop(51%,rgba(247,184,24,1)), color-stop(100%,rgba(249,235,197,1)));
background: -webkit-linear-gradient(top,  rgba(249,246,237,1) 0%,rgba(249,208,102,1) 50%,rgba(247,184,24,1) 51%,rgba(249,235,197,1) 100%);
background: -o-linear-gradient(top,  rgba(249,246,237,1) 0%,rgba(249,208,102,1) 50%,rgba(247,184,24,1) 51%,rgba(249,235,197,1) 100%);
background: -ms-linear-gradient(top,  rgba(249,246,237,1) 0%,rgba(249,208,102,1) 50%,rgba(247,184,24,1) 51%,rgba(249,235,197,1) 100%);
background: linear-gradient(to bottom,  rgba(249,246,237,1) 0%,rgba(249,208,102,1) 50%,rgba(247,184,24,1) 51%,rgba(249,235,197,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f6ed', endColorstr='#f9ebc5',GradientType=0 );

}

.registerbutton {
	height: 50px;
background: rgb(98,209,255);
background: -moz-linear-gradient(top,  rgba(98,209,255,1) 0%, rgba(9,183,255,1) 50%, rgba(0,160,226,1) 51%, rgba(0,180,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,209,255,1)), color-stop(50%,rgba(9,183,255,1)), color-stop(51%,rgba(0,160,226,1)), color-stop(100%,rgba(0,180,255,1)));
background: -webkit-linear-gradient(top,  rgba(98,209,255,1) 0%,rgba(9,183,255,1) 50%,rgba(0,160,226,1) 51%,rgba(0,180,255,1) 100%);
background: -o-linear-gradient(top,  rgba(98,209,255,1) 0%,rgba(9,183,255,1) 50%,rgba(0,160,226,1) 51%,rgba(0,180,255,1) 100%);
background: -ms-linear-gradient(top,  rgba(98,209,255,1) 0%,rgba(9,183,255,1) 50%,rgba(0,160,226,1) 51%,rgba(0,180,255,1) 100%);
background: linear-gradient(to bottom,  rgba(98,209,255,1) 0%,rgba(9,183,255,1) 50%,rgba(0,160,226,1) 51%,rgba(0,180,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62d1ff', endColorstr='#00b4ff',GradientType=0 );
border-color: #009ada;
border-bottom: 3px solid #006a95;
}

.registerbutton:hover  {
	border-color: #009dde;
	background: rgb(150,225,255);
background: -moz-linear-gradient(top,  rgba(150,225,255,1) 0%, rgba(35,192,255,1) 50%, rgba(22,167,224,1) 51%, rgba(50,197,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(150,225,255,1)), color-stop(50%,rgba(35,192,255,1)), color-stop(51%,rgba(22,167,224,1)), color-stop(100%,rgba(50,197,255,1)));
background: -webkit-linear-gradient(top,  rgba(150,225,255,1) 0%,rgba(35,192,255,1) 50%,rgba(22,167,224,1) 51%,rgba(50,197,255,1) 100%);
background: -o-linear-gradient(top,  rgba(150,225,255,1) 0%,rgba(35,192,255,1) 50%,rgba(22,167,224,1) 51%,rgba(50,197,255,1) 100%);
background: -ms-linear-gradient(top,  rgba(150,225,255,1) 0%,rgba(35,192,255,1) 50%,rgba(22,167,224,1) 51%,rgba(50,197,255,1) 100%);
background: linear-gradient(to bottom,  rgba(150,225,255,1) 0%,rgba(35,192,255,1) 50%,rgba(22,167,224,1) 51%,rgba(50,197,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96e1ff', endColorstr='#32c5ff',GradientType=0 );

}

.registerform {
	width: 286px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
  width: 797px;
  margin: auto;
  -webkit-box-shadow: 1px 1px 0 1px rgba(255,255,255,0.3);
box-shadow: 1px 1px 0 1px rgba(255,255,255,0.3);
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

@media screen and (max-width: 1000px) {
.headerleft {
  background-image: none;
}

.headerright {
  background-image: none;
}

.headermiddle{
  background-image: none;
}

.headerlogo{
  background-image: none;
}

.menulogo {
	background-image: url("./images/scrolldown.png");
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 80px;
}

.mobilelogo {
	background-image: url("./images/logo.png");
	width: 80vw;
	height: 100%;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin: auto;
}

.menuarea {
	display: none;
}



/* Carousel base class */
.carousel {
  height: 50vh;
  width: 80vw;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 50vh;
}
.carousel-inner > .item > img {
  height: 50vh;
}



.freetoplaytext {
	margin: auto;
	padding-right: 0px;
}

.exploretext {
	margin: auto;
	padding-right: 0px;
}

.catchemalltext {
	margin: auto;
	padding-right: 0px;
}

.friendstext {
	margin: auto;
	padding-right: 0px;
}

div#headerbg {   
    height: 50vh; 
	background-size: 180%;
}  

	}