#container{
	background: url('$baseUrl/images/pattern.jpg') repeat-y center 0;
}
#container > .inner{
	max-width: 964px;
	min-height: 100%;
	margin: 0 auto;
	padding: 16px 20px 0;
	background-color: #ffffff;
}
@media only screen and (max-width: 479px){
	#container > .inner {
		padding: 5px 5px 0;
	}
}
.inner p{
	margin: 0;
	padding: 0;
}

body {font-family:'Open Sans', Arial, sans-serif;}

.material-story-page {font-family:'Open Sans', Arial, sans-serif;}

.white {color:#fff}
.black {color:#000}
.float-left {float:left}
.float-right {float:right}
.clear {width:100%; overflow:hidden}
.mgtB20 {margin-bottom:20px}
.txtC {text-align:center}
.material-story-page h1 {font-size:40px; line-height:44px; margin-bottom:15px; text-shadow:2px 2px 5px rgba(0,0,0, .7); text-transform:none}
.material-story-page h1.sub {font-size:26px; line-height:30px}

.material-story-page h2 {font-size:30px; line-height:32px; margin-bottom:15px; text-shadow:2px 2px 5px rgba(0,0,0, .7); text-transform:none}
.material-story-page h2.sub {font-size:20px; line-height:28px;}
.material-story-page p {font-size:15px; line-height:24px; color:#000;}
a {text-decoration:none}

.banner {position:relative; width:100%; margin-bottom:20px; margin-left:0}
.banner img {display:block; width:100%}
.caption {position:absolute; width:100%; padding:3% 3%; background:rgba(0,0,0, .2); left:0 !important; top:auto !important}
.caption.gradient {
background: rgba(0,0,0, .7);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(0%, rgba(0,0,0,0)), color-stop(26%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b3000000', endColorstr='#b3000000') \9;
}


.capBottom {bottom:0 !important}
.capTop {top:0 !important}

.swapper {position:relative; width:100%; }
.swapper > div {position:absolute; background-repeat:no-repeat; background-position:center center !important; transition:0.2s; cursor:pointer; overflow:hidden}
.swapper .more {position:absolute; right:0; bottom:0; background:#827e74; line-height:40px; height:40px; padding:0 18px; font-size:14px; color:#fbefe3; white-space:nowrap}
.swapper .shareButton {position:absolute; left:0; bottom:0; width:40px; height:40px; background:url('../images/shareButton.jpg') no-repeat}
.swapper .swapFunction {transition:0s;}
.swapper .swapFunction.show {background:rgba(0,0,0, .5)}
.swapper .swapFunction .addthis_sharing_toolbox {display:none; margin-top:40%}
.swapper .swapFunction.show .addthis_sharing_toolbox {display:inline-block}
.swapper .swapFunction.show .instagram {display:inline-block}
.swapper .swapPName {margin:20px auto; width:89%; font-size:18px; line-height:26px; padding:10px 0; border:1px solid #000000}
.swapPImage {margin:0px auto; width:90%; height:auto; text-align:center}
.swapPImage img {width:60%}

.topSwap {height:375px;}
.topSwap #swap1T {background-image:url('../images/photo01.jpg')}
.topSwap #swap2T {background-image:url('../images/photo02.jpg')}
.topSwap #swap3T {background:#f0eee5}
.topSwap .swapPos1 {top:0; left:0; width:240px; height:375px; }
.topSwap .swapPos2 {top:0; left:260px; width:240px; height:375px; background-image:url('../images/photo02.jpg')}
.topSwap .swapPosMain {top:0; left:520px; width:405px; height:375px;}
.topSwap .swapFunction {top:335px; left:520px; height:40px; width:405px; }
.topSwap .swapFunction.show {top:0; height:375px}

.bottomSwap {height:1000px;}
.bottomSwap #swap1B {background:#f0eee5}
.bottomSwap #swap2B {background-image:url('../images/photo03.jpg'); background-size:auto 100%}
.bottomSwap #swap3B {background:#f0eee5}
.bottomSwap #swap4B {background:#f0eee5}
.bottomSwap #swap5B {background-image:url('../images/photo04.jpg'); background-size:auto 100%}
.bottomSwap .swapPos1 {top:0; left:0; width:420px; height:375px; }
.bottomSwap .swapPos2 {top:0; left:440px; width:485px; height:375px}
.bottomSwap .swapPos3 {top:395px; left:550px; width:375px; height:300px}
.bottomSwap .swapPos3 img {width:50%}
.bottomSwap .swapPos4 {top:715px; left:550px; width:375px; height:300px;}
.bottomSwap .swapPos4 img {width:50%}
.bottomSwap .swapPosMain {top:395px; left:0; width:530px; height:605px;}
.bottomSwap .swapFunction {top:960px; left:0; height:40px; width:530px; }
.bottomSwap .swapFunction.show {top:395px; height:605px}
.bottomSwap.swapper .swapFunction .addthis_sharing_toolbox {margin-top:50%}

.slideText {position:absolute; top:0; left:0; width:94%; height:85%; padding:4% 3%}

.caption.capTop {background:none}

.productList {width:100%; overflow:hidden; background:url('../images/listPattern.jpg'); padding:60px 0}
.productList li {display:inline-block; margin:0 0; width:32%}
.productList li:nth-last-child(2), .productList li:nth-last-child(4) {margin-left:5%}
.productList li:nth-last-child(1), .productList li:nth-last-child(3) {margin-right:5%}
.productList li .thumbs {width:100%; height:300px; line-height:300px}
.productList li .thumbs img {width:90%; vertical-align:middle}
.productList li .info {width:100%}
.productList p {font-size:15px; height:72px}

.productList .view {display:inline-block; height:39px; line-height:39px; background:url('../images/viewBg.jpg') repeat-x; padding:0 20px; margin:20px 0 40px 0; font-size:18px; color:#000}

.mobileSlider {display:none}
.mobileSlider img {display:inline;/* height:100%; width:auto*/}

.swiper-pagination-bullet {background:#c8c8c8}
.swiper-pagination-bullet-active {background:#8dc63f}
/*.swiper-container-horizontal>.swiper-pagination {bottom:25px}*/
.swiper-slide {text-align:center}

.addthisMobile {display:none; width:100%; overflow:hidden; margin:20px 0; text-align:center}
.addthisMobile .more {display:inline-block; background:#827e74; line-height:40px; height:40px; padding:0 18px; font-size:14px; color:#fbefe3; white-space:nowrap; margin-top:10px}
.addthisMobile .addthis_sharing_toolbox {display:inline-block}

.sr-bdimgshare.sr-bdimgshare-list  {display:none !important}

.instagram {position:absolute; top:0; right:38px; display:none; background:url('../images/instagram_icon.png') no-repeat; width:32px; height:32px; background-size:100%}


@media only screen and (max-width: 640px) {
	.material-story-page {width:100%; overflow:hidden}	
	.material-story-page h1 {font-size:24px; line-height:28px; text-align:center}
	.material-story-page h1.sub {font-size:15px; line-height:24px;}

	.material-story-page h2 {font-size:20px; line-height:24px; }
	.material-story-page h2.sub {font-size:15px; line-height:20px; text-align:center}	
	
	.productList {padding-top:20px}
	.productList li {width:45%}
	.productList li .thumbs {line-height:0; height:auto}
	.productList p {height:110px}
	
	.caption.capTop {position:static; background:#332b28; width:100%}
	.slideText {position:static; background:#332b28; padding:4% 3% 10% 3%}
	.caption.gradient {position:static; background:#332b28}
	
	.productList li:nth-last-child(2), .productList li:nth-last-child(4) {margin-left:0}
	.productList li:nth-last-child(1), .productList li:nth-last-child(3) {margin-right:0}
	
	.mobileSlider {display:block}
	.swapper {display:none}
	.swapPName {margin:0 auto}
		
	.swiper-button-next,
	.swiper-button-prev {display:none}
	
	.addthisMobile {display:block}
	
	.bdsharebuttonbox {text-align:center; width:100%}
	.bdshare-button-style0-16 .bds_more,
	.bdsharebuttonbox a {float:none; display:inline-block}
	
	.instagram {display:inline-block; right:38px}
}

@media only screen and (max-width: 400px) {
	.productList p {font-size:13px}
}