.pattern-banner1 { background-image: url(images/pattern-banner1.gif); background-size:cover; background-position:center;}
	.pattern-banner2 { background-image: url(images/pattern-banner2.gif); background-size:cover; background-position:center;}
	.pattern-banner3 { background-image: url(images/pattern-banner3.gif); background-size:cover; background-position:center;}
	.pattern-banner4 { background-image: url(images/pattern-banner4.gif); background-size:cover; background-position:center;}
	.pattern-banner5 { background-image: url(images/pattern-banner5.gif); background-size:cover; background-position:center;}
	.pattern-banner6 { background-image: url(images/pattern-banner6.gif); background-size:cover; background-position:center;}
	.pattern-banner7 { background-image: url(images/pattern-banner7.gif); background-size:cover; background-position:center;}
	.pattern-banner8 { background-image: url(images/pattern-banner8.gif); background-size:cover; background-position:center;}


	/* banner */
	.b-col1 				{ width:360px; height:280px; float:left;}
	.b-col2 				{ width:calc(100% - 360px); float:left; height:280px;}
	.white-space			{ display:none}

	.breadcrumb-blk 		{ width:340px; height:280px; position:absolute; top:0; left:0px;  transition: all 0.3s ease-out;}
	.breadcrumb-blk>div 	{ position:absolute; bottom:80px; left:0px; }
	.banner-blk .b-col1 	{ width:165px; float:left; overflow:hidden; background-color:#ececec}
	.banner-blk .b-col2 	{ width:calc(100% - 165px); float:left; overflow:hidden;}

	.breadcrumb-blk h1 		{ line-height:1; font-size:24px; }
	.breadcrumb-blk img 	{ width:100%; height:auto;}

	ul.breadcrumb 				{ list-style:none; margin:0 0 6px 0; padding:0}
	ul.breadcrumb li 			{ display:inline; font-size:14px; margin:0; padding:0}
	ul.breadcrumb li+li:before 	{ padding:0 5px;
								  	 content: "/\00a0";
	   			  					   color: #fff; }

	ul.breadcrumb li a 			{ color: #fff; text-decoration: none;}
	ul.breadcrumb li a:hover 	{ text-decoration: underline;}

	.breadcrumb-blk h1  {  color: #fff; font-family:'Roboto Slab Bold';font-weight:normal;}


	/* ==========================================================================
	    Media Style: no dropdown, section flowdown, sslider flowdown
	============================================================================= */

	@media only screen and (max-width:1600px) {
	.pattern-banner1 { background-image: url(images/pattern-banner1.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner2 { background-image: url(images/pattern-banner2.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner3 { background-image: url(images/pattern-banner3.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner4 { background-image: url(images/pattern-banner4.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner5 { background-image: url(images/pattern-banner5.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner6 { background-image: url(images/pattern-banner6.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner7 { background-image: url(images/pattern-banner7.gif); background-size:cover; background-position:-430px bottom;}
	.pattern-banner8 { background-image: url(images/pattern-banner8.gif); background-size:cover; background-position:-430px bottom;}

	}

	@media only screen and (max-width:1400px) {
	.b-col1 				{ width:300px; height:260px;}
	.b-col2 				{ width:calc(100% - 300px); height:260px;}
	.breadcrumb-blk  		{ width:280px; height:260px;}

	}

/*	@media only screen and (max-width:1200px) {
	ul.breadcrumb li 		{ font-size:12px;}
	.pattern-banner1 		{ background-image: url(images/pattern-banner1.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner2 		{ background-image: url(images/pattern-banner2.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner3 		{ background-image: url(images/pattern-banner3.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner4 		{ background-image: url(images/pattern-banner4.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner5 		{ background-image: url(images/pattern-banner5.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner6 		{ background-image: url(images/pattern-banner6.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner7 		{ background-image: url(images/pattern-banner7.gif); background-size:cover; background-position:-520px bottom;}
	.pattern-banner8 		{ background-image: url(images/pattern-banner8.gif); background-size:cover; background-position:-520px bottom;}

	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	.pattern-banner1 		{ background-image: url(images/pattern-banner1.gif); background-size:cover; background-position:-330px bottom;}

	.b-col1 				{ width:280px; height:180px;}
	.b-col2 				{ width:calc(100% - 280px); height:180px;}

	.breadcrumb-blk  		{ width:250px; height:180px;}

	.breadcrumb-blk>div 	{ position:absolute; bottom:50px; left:0px; }
	.breadcrumb-blk h1 		{ font-size:18px; }
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.pattern-banner1 { background-image: url(images/pattern-banner1.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner2 { background-image: url(images/pattern-banner2.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner3 { background-image: url(images/pattern-banner3.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner4 { background-image: url(images/pattern-banner4.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner5 { background-image: url(images/pattern-banner5.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner6 { background-image: url(images/pattern-banner6.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner7 { background-image: url(images/pattern-banner7.gif); background-size:cover; background-position:-510px bottom;}
	.pattern-banner8 { background-image: url(images/pattern-banner8.gif); background-size:cover; background-position:-510px bottom;}

	}*/



	@media only screen and (max-width:1200px) {
	.pattern-banner1>.pg-container .b-col1  { background-color: #00416d; border-bottom: 10px solid #ffc93c;}
	.pattern-banner2>.pg-container .b-col1  { background-color: #a5be00; border-bottom: 10px solid #05668d;}
	.pattern-banner3>.pg-container .b-col1  { background-color: #40a8c4; border-bottom: 10px solid #ffc93c;}
	.pattern-banner4>.pg-container .b-col1  { background-color: #e6b300; border-bottom: 10px solid #043665;}
	.pattern-banner5>.pg-container .b-col1  { background-color: #ff6337; border-bottom: 10px solid #2c4455;}
	.pattern-banner6>.pg-container .b-col1  { background-color: #e43f5a; border-bottom: 10px solid #162447;}
	.pattern-banner7>.pg-container .b-col1  { background-color: #1eb2a6; border-bottom: 10px solid #d8d3cd;}
	.pattern-banner8>.pg-container .b-col1  { background-color: #115b74; border-bottom: 10px solid #86c5da;}

	.pattern-banner1>.pg-container,
	.pattern-banner2>.pg-container,
	.pattern-banner3>.pg-container,
	.pattern-banner4>.pg-container,
	.pattern-banner5>.pg-container,
	.pattern-banner6>.pg-container,
	.pattern-banner7>.pg-container,
	.pattern-banner8>.pg-container	{ width:100%; max-width:100%;  display: flex; flex-direction: column;}

	.b-col1 				{ width:100%; height:auto; padding:10px; float:left;  order: 2; }
	.b-col2 				{ width:100%; float:left; height:200px;  order: 1;}

	.breadcrumb-blk 		{ width:100%; height:auto; position:relative; top:0; left:0px; transition: all 0.3s ease-out;}
	.breadcrumb-blk>div		{ position:relative; bottom:0}
	.breadcrumb-blk h1 		{ font-size:18px; }
	.white-space			{ display:block; width:10px; height:10px; position:absolute; left: -10px; bottom: -20px; background-color:#fff}

	ul.breadcrumb 		{ padding-left: 18px;}
	.breadcrumb-blk h1  { padding-left: 18px;}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	ul.breadcrumb 		{ padding-left: 12px;}
	.breadcrumb-blk h1 	{ padding-left: 12px;}
	}


	@media only screen and (max-width:767px) {
	.b-col1 				{ width:100%; height:auto; padding:10px; float:left;  order: 2; }
	.b-col2 				{ width:100%; float:left; height:150px;  order: 1;}

	ul.breadcrumb 		{ padding-left: 3px;}
	.breadcrumb-blk h1  { padding-left: 3px;}


	}