.fixedBg .detail{background:url(../static_images/inArtWeWork1.png) no-repeat left top /45vw auto, url(../static_images/inArtWeWork2.png) no-repeat right bottom /45vw auto; white-space:nowrap; text-align:center; padding-top:25vw;}
.fixedBg .detail:after{content:''; width:0; height:0; display:inline-block; vertical-align:middle;}

.section canvas.cover{z-index:10;}
.expandableContent{background:#222; width:100%; height:100%}
.expandableContent .cover{position:absolute; left:0; top:0; z-index:100;}

.expandableContent .subsection{width:100% !important;}
.expandableContent .subsection li{width:25%;}
.expandableContent .subsection .expandableArea{width:100%; height:100%; position:relative; overflow:hidden;}

.expandableContent .subsection .content{position:relative; width:100%; height:100%; z-index:0;}

.expandableContent .subsection .textarea .prevBtn, .expandableContent .subsection .textarea .nextBtn{display:none;}

/*.expandableContent .subsection .contentBg .close{width:66px; height:66px; background-color:#ab9969; text-indent:-9999px; overflow:hidden; position:absolute; right:0; top:0; z-index:1; display:none;}*/
.expandableContent .subsection .fullExpanded .content{width:30vw;}

.expandableContent .subsection .textarea{display:none; width:100%; height:100%; padding-left:2vw; position:relative; z-index:2; white-space:nowrap; box-sizing:border-box;}
.expandableContent .subsection .textarea:after{content:''; height:100%; display:inline-block; vertical-align:middle;}
.expandableContent .subsection .textarea .block{/*height:250px;*/ width:80%; margin:auto; white-space:normal; display:inline-block; vertical-align:middle; text-align:center;position:relative;}
.expandableContent .subsection .textarea .block:after{content:'';position:absolute;background:#AB9969;width:50px;height:1px;bottom:-30px;left:50%;margin-left:-25px;}
.expandableContent .subsection .textarea h2{color:#ab9969; font-size:2.3vw; line-height:1em; margin-bottom:2vw;}
.expandableContent .subsection .textarea h2 > span{font-style:italic;}
.expandableContent .subsection .textarea p{color:#fff; font-size:/*0.9vw*/15px; line-height:2em;}

.expandableContent .subsection .contentCover{width:100%; height:100%; white-space:nowrap;cursor:pointer;}
.expandableContent .subsection .contentCover::after{content:''; height:100%; display:inline-block; vertical-align:middle;}
.expandableContent .subsection .contentCover>*{display:inline-block; vertical-align:middle; white-space:normal; position:relative; z-index:2}
.expandableContent .subsection .contentCover .text{box-sizing:border-box;padding:0 50px;width:100%; max-width:25vw; height:200px; color:#fff; text-align:center; position:relative; font-size:25px;}
.expandableContent .subsection .contentCover .text span{display:inline-block; line-height:1.5em; vertical-align:middle;}
.expandableContent .subsection .contentCover .text:before{content:''; width:80px; height:100%; display:block; position:absolute; left:50%; margin-left:-40px; top:0;  border-top:#ab9969 1px solid; border-bottom:#ab9969 1px solid;}
.expandableContent .subsection .contentCover .text:after{content:''; height:100%; display:inline-block; vertical-align:middle;}

.expandableContentMobileNav{width:100%; position:absolute; left:0; bottom:10px; text-align:center; display:none;}
.expandableContentMobileNav ul{margin:0; padding:0; display:inline-block;}
.expandableContentMobileNav ul li{width:10px; height:10px; display:inline-block; position:relative; margin:10px 10px;}
.expandableContentMobileNav ul li a{width:8px; height:8px; display:inline-block; text-align:left; text-indent:-9999px; overflow:hidden; -webkit-transform:rotate(45deg); transform:rotate(45deg); border:#fff 1px solid; position:absolute; left:50%; top:50%; margin-left:-6px; margin-top:-6px;}
.expandableContentMobileNav ul li.active a{background:rgba(171, 153, 105, 1);}

@media screen and (max-width: 1025px) and (min-aspect-ratio: 12/9){ 

	/*.fixedBg .detail{background-size:40vw auto, 40vw auto; padding-top:20vw;}*/
	.expandableContent .subsection .contentCover .text{font-size:2vw;}
	.expandableContent .subsection .textarea p{font-size:12px}
	.fixedBg .detail{padding-bottom:25vw;}
	.expandableContentMobileNav{display:none;}
} /* landscape */

@media screen and (max-width: 769px) and (max-aspect-ratio: 12/9){
	
	.fixedBg .detail{background-size:100vw auto, 100vw auto;     padding: 65vh 0 35vh;}
	
	.expandableContent .subsection li{width:100vw !important;}
	
	.expandableContent .subsection .content{width:100% !important; height:70%; position:absolute; top:30%;}
	
	.expandableContent .subsection .fullExpanded .expandableArea{width:100% !important; left:0 !important;}
	.expandableContent .subsection .textarea .block:after{display:none;}
	
	.expandableContent .subsection .contentCover{display:none;}
	.expandableContent .subsection .textarea{display:block; width:100%; margin:0; padding-left:0;margin-top:90px;}
	.expandableContent .subsection .textarea .block{width:100%; vertical-align:top; margin-top:10vh; padding:0 18vw; box-sizing:border-box;}
	
	.expandableContent .subsection .textarea section{width:80%; margin:auto;}
	
	.expandableContent .subsection .textarea .prevBtn, .expandableContent .subsection .textarea .nextBtn{display:block; width:30vw; height:30vw; position:absolute; top:0; z-index:1; /*background:#f00;*/ text-indent:-9999px; overflow:hidden;}
	.expandableContent .subsection .textarea .prevBtn:after, .expandableContent .subsection .textarea .nextBtn:after{display:block; width:7vw; height:7vw; border-color:#fff; border-width:1px;  position:absolute; top:5vw; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
	.expandableContent .subsection .textarea .prevBtn{left:0;}
	.expandableContent .subsection .textarea .prevBtn:after{content:'';  border-bottom-style:solid; border-left-style:solid; left:50%; margin-left:-30px;}
	.expandableContent .subsection .textarea .nextBtn{right:0;}
	.expandableContent .subsection .textarea .nextBtn:after{content:'';  border-top-style:solid; border-right-style:solid;  right:50%;  margin-right:-30px;}
	
	.expandableContent .subsection .textarea h2{width:50%; height:25vw; margin:0 auto; padding-bottom:15px; text-align:center; font-size:24px; line-height:1.5em; color:#ab9969; box-sizing:border-box; position:relative; font-size:24px; z-index:2;}
	.expandableContent .subsection .textarea h2:after{content:''; height:100%; display:inline-block; vertical-align:bottom;}
	.expandableContent .subsection .textarea h2 span{display:inline-block; vertical-align:bottom;    font-size: 18px;}
	.expandableContent .subsection .textarea p{position:relative; font-size:15px; z-index:2;}
	
	.expandableContentMobileNav{display:block;}
} /* portrait */
@media screen and (max-height: 600px) and (max-aspect-ratio: 12/9){
	.expandableContent .subsection .textarea .block{margin-top:7vh;}
	.expandableContentMobileNav{bottom:0px;}

}

@media screen and (max-width: 415px){
	.expandableContent .subsection .textarea h2{height:auto;    width: 6em;height:72px;}
	.fixedBg .detail{ padding: 55vh 0 40vh;}
	.expandableContentMobileNav{display:block;}
	
	.expandableContent .subsection .textarea .prevBtn:after, .expandableContent .subsection .textarea .nextBtn:after{width:5vw;height:5vw;}
	
}
@media screen and (max-height: 600px) and (max-width: 350px) and (max-aspect-ratio: 12/9){
	.fixedBg .detail{padding: 70vh 0 50vh;}
	.expandableContent .subsection .textarea .block{margin-top:5vh;}
	.expandableContentMobileNav{bottom:0px;}
	.expandableContent .subsection .textarea h2{font-size:16px;height:50px;    padding-bottom: 10px;}
	.expandableContent .subsection .textarea p{font-size:8px;line-height:1.5em;}

}
@media screen and (max-width: 350px) and (max-aspect-ratio: 13/9){
	/*.expandableContent .subsection .textarea .block{padding:0 20px;}*/
}
@media screen and (max-width: 415px) and (max-aspect-ratio: 13/9){
	.expandableContent .subsection .textarea section{width:100%; margin:0;}
	.expandableContent .subsection .textarea h2{line-height:1.2em;}
	.expandableContent .subsection .textarea p{font-size:12px;}
} /* portrait */