<header class="Header">
	<video autoplay="" id="bgvid" loop="" muted="" playsinline="" poster="/userUpload/images/Alanger/Welcome.jpg">
		<!--<source src="~/videos/Vback.mp4" type="video/mp4">--></video>
	<img class="img-rounded" height="250" src="/userUpload/images/Alanger/LOGO.jpeg" width="250" />
	<hr />
	<!--<p>歡迎光臨!</p>-->
	<h1>
		家，是最完美的咖啡館</h1>
	<a class="Scroll" href="#linkImg"><img height="48" src="/userUpload/images/Alanger/down.png" width="48" /></a></header>
<section class="Intro">
	<h1>
		歡迎光臨 艾蘭哥爾咖啡</h1>
	<hr />
</section>
<section class="LinkIn" id="linkImg">
	<h1>
		繼續</h1>
	<div class="container">
		<div class="col-lg-6 col-md-6 col-sm-12 LinkImg">
			<a class="Scroll" i=""> </a><a href="http://ecloud.ewang.com.tw/index.php?Act=122&amp;MK=122&amp;PK=287"><img src="/userUpload/images/Alanger/CoffeeBags.jpg" /> </a>
			<h2>
				<a href="http://ecloud.ewang.com.tw/index.php?Act=122&amp;MK=122&amp;PK=287">逛逛咖啡商店</a></h2>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-12 LinkImg">
			<a href="http://ecloud.ewang.com.tw/index.php?Act=122&amp;MK=122&amp;PK=286"><img src="/userUpload/images/Alanger/store.jpg" /> </a>
			<h2>
				<a href="http://ecloud.ewang.com.tw/index.php?Act=122&amp;MK=122&amp;PK=286">如何到咖啡館?</a></h2>
		</div>
	</div>
</section>
<footer class="foot">
	<p>
		&copy; 弘宇集團 2017 (Build 1.5.2.0)</p>
</footer>
<script type="text/javascript">
    //Turns Navbar to transparent background if user scrolled.
    function checkNavPosition() {
        var startYp = $('.navbar').height() * 0.2;
        if ($(window).scrollTop() > startYp) {
            $('.navbar').removeClass("AtTop");
        }
        else {
            $('.navbar').addClass("AtTop");
        }
    }

    //Only activate function after rendering.
    if ($('.navbar').length > 0) {
        $(window).on("scroll load resize", function () { checkNavPosition(); });
    }

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $(function () {
        $('.Scroll').bind('click', function (event) {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 800);
                    return false;
                }
            }
        });
    });
</script>
<style type="text/css">
a[ id=linkImg ]:target ~ #linkImg {
        transform: translateY( -200px );
    }

    html, body {
        height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        animation: fadein 2s;
    }

    video#bgvid {
        position: fixed;
        top: 50%;
        left: 49.99%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background: url(~/Welcome.jpeg) no-repeat;
        background-size: cover;
    }

    .navbar {
        transition: all 0.6s ease-out;
    }

        .navbar.AtTop {
            background: rgba(0,0,0,0.1);
        }

    .navbar-default .navbar-nav:hover {
        color: gray;
    }

    .navbar-default .navbar-brand {
        color: saddlebrown;
        font-weight: bold;
    }

        .navbar-default .navbar-brand:hover {
            color: brown;
            font-weight: bold;
        }

    section {
        margin: 0;
        padding: 0;
        position: relative;
    }

    h1 {
        margin: 0;
        padding: 0;
    }

    .Header {
        position: relative;
        min-height: 100%;
        width: 100%;
        enable-background: 0;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .Header hr {
            border: 0;
            background-color: saddlebrown;
            height: 3px;
            width: 100px;
        }

        .Header h1 {
            text-align: center;
            color: white;
            font-size: 70px;
            font-weight: bold;
            margin-bottom: 40px;
            margin-top: 10px;
        }

        .Header p {
            font-weight: 500;
            margin-top: 10px;
            color: gainsboro;
            font-size: 30px;
        }

        .Header a {
            font-size: 22px;
            background-color: transparent;
            border-color: white;
            color: white;
            opacity: 0;
            animation: fadein 1s ease-in-out 2.2s;
            animation-fill-mode: forwards;
        }

            .Header a:hover {
                color: white;
            }

    .Intro {
        min-height: 20%;
        width: 100%;
        background-color: white;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

        .Intro h1 {
            color: black;
            font-weight: 600;
            font-size: 30px;
            margin-top: 20px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            text-align: center;
        }

        .Intro hr {
            border: 0;
            background-color: saddlebrown;
            height: 3px;
            width: 100px;
        }

    .LinkIn {
        min-height: 30%;
        width: 100%;
        color: white;
        background-color: saddlebrown;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

        .LinkIn h1 {
            color: white;
            font-weight: 600;
            font-size: 20px;
            padding-top: 20px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            text-align: center;
        }

        .LinkIn .container {
            width: 100%;
            padding: 0;
            padding-top: 10px;
            padding-bottom: 0px;
        }

    .box-caption {
        color: #fff;
        opacity: 0;
        display: block;
        background: rgba(240,95,64,.9);
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        transition: all .35s;
    }

    .LinkImg {
        position: relative;
        padding: 0;
        margin: 0;
    }

        .LinkImg h2 {
            color: white;
            position: absolute;
            top: 5%;
            left: 5%;
            font-size: 40px;
            font-weight: bold;
            letter-spacing: -1px;
            background: rgba(0, 0, 0, 0.6);
            padding: 10px;
        }

        .LinkImg :hover {
            color: white;
        }

        .LinkImg img {
            width: 100%;
            padding: 0;
        }

    .foot {
        width: 100%;
        background-color: black;
        margin: 0;
        padding: 0;
    }

        .foot p {
            color: grey;
            padding-top: 12px;
            padding-left: 10px;
            padding-bottom: 12px;
            font-size: 15px;
            text-align: left;
            margin: 0;
        }

    @keyframes fadein {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @media (max-width: 1100px) {
        .navbar-header {
            float: none;
        }

        .navbar-left, .navbar-right {
            float: none !important;
        }

        .navbar-toggle {
            display: block;
        }

        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }

        .navbar-collapse.collapse {
            display: none !important;
        }

        .navbar-nav {
            float: none !important;
            margin-top: 7.5px;
        }

            .navbar-nav > li {
                float: none;
            }

                .navbar-nav > li > a {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

        .collapse.in {
            display: block !important;
        }

        .Header img-rounded {
            height: 150px;
            width: 150px;
        }

        .Header h1 {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 5px;
            
        }

        .Header p {
            font-weight: 400;
            margin-top: 5px;
            color: gainsboro;
            font-size: 20px;
        }

        .Intro h1 {
            color: black;
            font-weight: 400;
            font-size: 20px;
        }

    }

.bgw{ background-color: rgba(255,255,255,0);}</style>
