/* 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) {

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

    /* Declare heights because of positioning of img element */
    .carousel .item {
        height: 40vh;
    }

    .carousel-inner > .item > img {
        height: 40vh;
    }

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


    .headerleft {
        height: 100%;
    }

    .headerright {
        height: 100%;
    }

    .mobilelogo {
        display: none;
    }

    .headermiddle {
        height: 100%;
        background-position: center bottom;
        background-size: 80%;
    }

    .headerlogo {
        height: 100%;
        background-size: 80%;
        background-position: center bottom;
    }

    .col-md-6 {
        float: left;
        width: 50%;
    }

    /*定制*/
    .menulogo {
        height: 80px;
        background-size: 80%;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .menuarea {
        width: 100%;
    }


    .feature {
        height: 200px;
        margin-bottom: 10px;
    }

    .freetoplay {
        background-size: 200%;
    }

    .freetoplaytext {
        margin: auto;
        padding-right: 0;
        background-size: contain;
        width: 80%;
    }

    .catchemall {
        background-size: 200%;

    }

    .catchemalltext {
        margin: auto;
        padding-right: 0;
        width: 80%;
        background-size: contain;
    }

    .explore {
        background-size: 200%;
    }

    .exploretext {
        margin: auto;
        padding-right: 0;
        width: 80%;
        background-size: contain;
    }

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


    .friends {
        background-size: 200%;
    }

    .friendstext {
        margin: auto;
        padding-right: 0;
        width: 80%;
        background-size: contain;
    }

    #playnow {
        margin: auto;
        margin-top: 5px;
        height: 60px;
        width: 200px;
        transition: background-image 0.2s ease-in-out;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #playnow2 {
        background-repeat: no-repeat;
        background-size: contain;
        height: 60px;
        width: 300px;
    }
}