<!doctype html>
<html lang="en">
<head>
  <title>Test</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scal=1">
  <link rel="stylesheet" type="text/css" href="/static/css/test.css">
  <link rel="stylesheet" type="text/css" href="/static/css/test-theme.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">

    html, body {
      margin: 0;
      padding: 0;
	background-color: #010010;
    }
	h3		{color: #fff;}

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 100%;
    }

    .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width: 100%;
	  height: 250px;
    }


    .slick-prev:before,
    .slick-next:before {
      color: #fff;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

	.menu {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
	}
	.searchicon{
	margin-top: 15px;
	margin-right: 20px;
	color: #fff;
	}
	.fontwhite{
	color: #fff;
	}

  </style>
</head>
 <body>


<div class="subNav hidden-lg">
	<nav id="subNav">
			 <button type="button" class="hidden-lg-up navbar-toggle  hamberger-menu pull-left" data-toggle="collapse" data-target="#collapsingSubNavbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar" style="background-color:#fff"></span>
              <span class="icon-bar" style="background-color:#fff"></span>
              <span class="icon-bar" style="background-color:#fff"></span>
            </button>
			<div class='pull-right avt-container' style='display:none'>
	            <fb-avatar></fb-avatar>
            </div>
			<div>
				<a class="navbar-brand hidden-lg-up brand mcot-logo-box" ui-sref="app.index" >
					<img src="http://imgs.mcot.net/images/2017/10/1509338573304.png" style="height:auto; width:55px; margin-left:55px;;display:inherit;margin-top: -5px;">
				</a>
			</div>
			<div class="" style="background-color: #2860AA;">
				<a class="">
					<span class="glyphicon glyphicon-search searchicon" style="margin-left: 85px;"></span>
				</div>

				<div class="container" style="background-color: #2860AA;">
					<div id="collapsingSubNavbar" class="collapse navbar-toggleable-md hidden-lg-up" style="margin-top:50px;">
						<ul class="nav navbar-nav">
							<li class="nav-item text-center">
								<a class="nav-link" href="http://www.tnamcot.com" target="_blank">ข่าว</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link" href="http://www.nineentertain.tv" target="_blank">บันเทิง</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link" href="http://lively.mcot.net/index" target="_blank">ไลฟ์สไตล์</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link"  href="http://tv.mcot.net" target="_blank">โทรทัศน์</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link"  href="http://mcot-web.mcot.net/radio/" target="_blank">วิทยุ</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link" href="/category/กิจกรรม">กิจกรรม</a>
							</li>
							<li class="nav-item text-center">
								<a class="nav-link" href="/category/ประชาสัมพันธ์">ประชาสัมพันธ์</a>
							</li>
						 </ul>
					</div>
				</div>
    </nav>
</div>



<!--Titlebar-->
<div class="container-fluid visible-lg" style="background-color: #2860AA;">
    <div class="navbar-header" style="margin-top: 5px; margin-left: -10px;">
		<div class="menu"></div>
		<div class="menu"></div>
		<div class="menu"></div>
	</div>
	<div>
		<a class="navbar-brand hidden-lg-up brand mcot-logo-box" ui-sref="app.index" >
			<img src="http://imgs.mcot.net/images/2017/10/1509338573304.png" style="height:auto; width:55px; margin-left:600px;;display:inherit;margin-top: -5px;">
		</a>
	</div>
	<span class="visible-lg glyphicon glyphicon-search" style="color: #fff; margin-top: 15px; float: right;"></span>
</div>
  

<!--Hilight-->
<div class="hidden-lg">
	<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=260x320" style="height: 260px;width: 100%;"></a>
</div>

<div class="visible-lg">
	<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=1350x500" style="height: 500px;width:100%;"></a>
</div>
<div class="container">
	<p><h3 class="fontwhite">The Walking Dead</h3></p>
	<button type="button" class="btn btn-default">Add Favorite</button>
	<button type="button" class="btn btn-default">Rate</button>
</div>
<hr>
<!--End Hilight-->

<!--ContinueWatch-->
<!--Moblie Continue-->
<div class="container hidden-lg " style="margin-top: -30px;">
	<h3>Season7</h3>	
</div>
	<div class="col-lg-6 hidden-lg">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=160x140" style="height: 130px;width: 143px;"></a>	
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=160x140" style="height: 130px;width: 143px;"></a>
	</div>
	<br>
	<div class="col-lg-6 hidden-lg">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=160x140" style="height: 130px;width: 143px;"></a>
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=160x140" style="height: 130px;width: 143px;"></a>
	</div><br>
</div>
<!--End Moblie Continue-->

<div class="container visible-lg">
	<h3>Continue Watch For You</h3>
	<div class="col-lg-12">

			<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
			</div>

			<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
			</div>
	</div><br>

	<div class="col-lg-12" style="margin-top: 15px;">
					<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
		</div>

			<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
		</div></div><br>

	<div class="col-lg-12" style="margin-top: 15px;">
					<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
		</div>

			<div class="col-lg-6">
				<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=250x540" style="height: 250px;width: 540px;"></a>
		</div></div><br>
</div>
<!--endcon-->

 </body>
</html>
