/*=============================================
=                  General                    =
=============================================*/

* {
    box-sizing: border-box;
}

body {
    padding-top: 72px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Microsoft JhengHei,DFKai-sb,Arial,serif,sans-serif";
}

button:focus {
    outline: none;
}

.container {
    margin-right: auto;
    margin-left: auto;
}

/*=============================================
=                  Navbar                     =
=============================================*/

.navbar {
    padding: 20 px;
    box-shadow: 0 3px 18px rgba(0, 0, 0, .11);
}

.nav-item {
    font-size: 20px;

}

/*=============================================
=                  Header                     =
=============================================*/


.jumbotron {
    padding: 90px 0px;
    background-image: url('img/project_header.jpg');
    background-repeat: no-repeat;
    background-position: contain;
    background-size: 100%;
    color: white;
    background-attachment: fixed;
    border-radius: 0px;
    position: relative;
}



/*=============================================
=                  Intro                      =
=============================================*/

/*=============================================
=                  Features                   =
=============================================*/

/*=============================================
=                    Cars                     =
=============================================*/

.btn {
    font-size: 25px;
    background-color: rgb(5, 5, 109);
    color: white;
}

.cooperatephoto {
    border-radius: 50%;
}

/*=============================================
=                  Spot                       =
=============================================*/

/* 閮剖?Hover?寞? */
/* 撅祆€折? ?其葉?祈?[] */
/* ?詨撅祆€吩ref蝯偏($=)??html??蝝?*/
/* [href$='.html'] */
/* ?id?(^=)?症alleryImage??蝝?*/

[id^='galleryImage'] {
    background-size: cover;
    height: 250px;
    filter: grayscale(100%);
    /*?蔗?脣???暺*/
}

[id^='galleryImage']>.galleryText {
    line-height: 250px;
    font-size: 6px;
    opacity: 0;
    /* 0 銵函內??*/
    color: white;
    text-shadow: 0 5px 10px rgba(0, 0, 0, .5);
    text-align: center;
}

/* ?曉??? */

[id^='galleryImage']:hover {
    /*?豢?id??荔撚嚗輻??w?*/
    filter: grayscale(0%)
}

[id^='galleryImage']:hover .galleryText {
    opacity: 1;
    font-size: 24px;
}

[id^='galleryImage'],
.galleryText {
    transition: all .5s ease;
}

#galleryImage1 {
    background-image: url('img/spot01.jpg');
}

#galleryImage2 {
    background-image: url('img/spot02.jpg');
}

#galleryImage3 {
    background-image: url('img/spot03.jpg');
}

#galleryImage4 {
    background-image: url('img/spot04.jpg');
}

#galleryImage5 {
    background-image: url('img/spot05.jpg');
}

#galleryImage6 {
    background-image: url('img/spot06.jpg');
}

#galleryImage7 {
    background-image: url('img/spot07.jpg');
}

#galleryImage8 {
    background-image: url('img/spot08.jpg');
}

#galleryImage9 {
    background-image: url('img/spot09.jpg');
}

#galleryImage10 {
    background-image: url('img/spot10.jpg');
}

#galleryImage11 {
    background-image: url('img/spot11.jpg');
}

#galleryImage12 {
    background-image: url('img/spot12.jpg');
}

#galleryImage13 {
    background-image: url('img/spot13.jpg');
}

#galleryImage14 {
    background-image: url('img/spot14.jpg');
}

#galleryImage15 {
    background-image: url('img/spot15.jpg');
}

#galleryImage16 {
    background-image: url('img/spot16.jpg');
}

/*=============================================
=               ConnectSection                =
=============================================*/

.connect {
    color: rgb(5, 0, 31);
    font-size: 25px;
}


/*=============================================
=                   Footer                    =
=============================================*/

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-end p {
    font-size: 8px;
    margin: 0;
}

#goBackBtn {
    background: rgba(14, 189, 122);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    position: fixed;
    right: 10px;
    /* ?????恍銋? */
    bottom: -70px;
    opacity: 0;
    transition: all .3s ease;
    z-index: 1000;
    /* z-index ?詨?頞之?頞?撅?/

}

/* ?嗆迨????.active??憿?????*/
#goBackBtn.active {
    bottom: 10px;
    opacity: 1;

}