@charset "utf-8";
/* CSS Document */

.zsb_main { width:100%; clear:left; float:left; padding-top:243px;}
.zsb_scope { width:100%; clear:left; float:left; background:url(../images/case_study/zsb/scope-bg.jpg); background-position:center center !important; background-attachment: fixed !important;      box-sizing:border-box; padding:52px 60px 0px;}
.zsbHeadName { width:100%;}  
.zsbHeadName h1 {font-size: 36px;
    color: #fff;
	font-family: 'myriad_probold_semicondensed';
	margin-bottom:53px;
}
	
.zsbHeadName h1 span { 
	    font-family: 'myriadroman';
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
	display:inline-block;
	vertical-align:top;
    margin-left: 8px;
    padding-top: 20px;
}


.zsb_scope .contentWrap { width:100%; clear:left; float:left; margin-bottom:90px;}
.zsb_scope .contentWrap h2  { width:100%; font-size:24px; color:#f26531; font-weight:normal; margin-bottom:22px;}
.zsb_scope .contentWrap aside { width:47%; float:left; font-size:14px; color:#ffffff; font-weight:normal; color:#fff; line-height:20px;}
.zsb_scope .contentWrap aside.rt { float:right;}

.zsbDetailWrap { width:100%; clear:left; float:left; text-align:center; padding-top:60px; background:#fff9df;}
.zsbBrandDetail { width:688px; padding-top:129px; text-align:center; background:url(../images/case_study/zsb/zsb-logo.jpg) no-repeat center top; margin:auto;}
.zsbBrandDetail  h1 { font-size:24px; color:#58585a; text-align:center; margin-bottom:14px; font-weight:400;}
.zsbBrandDetail  p { font-size:14px; color:#58585a; text-align:center; margin-bottom:45px; line-height:20px;}
.zsbDetailWrap .styleGuide { width:1026px; height:132px; background:url(../images/case_study/zsb/zsb-style-guide.jpg) no-repeat; margin:auto; font-size:0; margin-bottom:56px;}

.mascotDetail { width:772px; margin:auto;}
.mascotDetail p {  font-size:14px; color:#58585a; text-align:center; margin-bottom:45px; line-height:20px;}

.mascoimageWrap { width:100%; clear:left; float:left;}
.mascoimageWrap  .imagewrap { float:left;}
.mascoimageWrap  .imagewrap.image1 { float:left;}
.mascoimageWrap  .imagewrap.image2 { margin-left:44px; margin-right:60px; margin-top:75px;}
.mascoimageWrap  .imagewrap.image3 {  margin-right:68px;}
.mascoimageWrap  .imagewrap.image4 {  margin-right:58px; margin-top:75px;}

.zsbBrandBanner { width:100%; background:#fff9df; padding-top:162px; padding-bottom:156px; clear:left; float:left; text-align:center;}
.zsbVisual { width:100%; clear:left; float:left; background:url(../images/case_study/zsb/visualbg.jpg); background-attachment: fixed !important; padding:130px 0px; text-align:center; }
.zsbVisual h2  { font-size:24px; color:#f26531; font-weight:normal; margin-bottom:33px;}
.zsbVisual p {  font-size:14px; color:#fff; text-align:center;  line-height:20px;}

.collateralsWrap { width:100%; clear:left; float:left; position:relative; background:#fff9df; box-sizing:border-box; padding-top:130px;  padding-left:60px; padding-right:60px;}
.collateralsWrap .topleftborder { position:absolute; left:60px; top:104px; width:90px; height:90px; background:url(../images/case_study/zsb/top-left-boder.png) no-repeat; font-size:0;}
.collateralsWrap .toprightborder { position:absolute; right:60px; top:104px;  width:90px; height:90px; background:url(../images/case_study/zsb/top-right-border.png) no-repeat; font-size:0;}

.collateralsWrap .content { max-width:654px; width:auto; text-align:center; margin:auto; margin-bottom:92px;}
.collateralsWrap .content h2  { font-size:24px; color:#f26531; font-weight:normal; margin-bottom:33px;}
.collateralsWrap .content p {  font-size:14px; color:#414042; text-align:center;  line-height:20px;}

.collateralsWrap .imageSection { margin-bottom:37px; clear:left; float:left; font-size:0;}
.collateralsWrap .image1  { width:1050px; height:788px; background:url(../images/case_study/zsb/collaterals-image1.jpg) no-repeat;   }
.collateralsWrap .image2  { width:1050px; height:785px; background:url(../images/case_study/zsb/collaterals-image2.jpg) no-repeat;   }
.collateralsWrap .image3  { width:1050px; height:790px; background:url(../images/case_study/zsb/collaterals-image3.jpg) no-repeat;   }
.collateralsWrap .image4  { width:1050px; height:790px; background:url(../images/case_study/zsb/collaterals-image4.png) no-repeat;   }
.collateralsWrap .image5  { width:1050px; height:634px; background:url(../images/case_study/zsb/collaterals-image5.jpg) no-repeat;   }
.collateralsWrap .image6  { width:1050px; height:1056px; background:url(../images/case_study/zsb/collaterals-image6.jpg) no-repeat;   }
.collateralsWrap .image7  { width:1050px; height:494px; background:url(../images/case_study/zsb/collaterals-image7.jpg) no-repeat;   }
.collateralsWrap .image8  { width:1050px; height:495px; background:url(../images/case_study/zsb/collaterals-image8.jpg) no-repeat;   }
.collateralsWrap .image9  { width:1050px; height:1178px; background:url(../images/case_study/zsb/collaterals-image9.jpg) no-repeat;   }
.collateralsWrap .image10  { width:1050px; height:495px; background:url(../images/case_study/zsb/collaterals-image10.jpg) no-repeat;   }
.collateralsWrap .image11  { width:1050px; height:495px; background:url(../images/case_study/zsb/collaterals-image11.jpg) no-repeat;   }
.collateralsWrap .image12  { width:1050px; height:494px; background:url(../images/case_study/zsb/collaterals-image12.jpg) no-repeat;   }

.outdoorSignages { max-width:654px; width:auto; text-align:center; margin:auto; padding-top:20px; margin-bottom:55px;}
.outdoorSignages h2  { font-size:24px; color:#f26531; font-weight:normal; margin-bottom:33px;}
.outdoorSignages p {  font-size:14px; color:#414042; text-align:center;  line-height:20px;}

.interiorDesign  { max-width:100%; width:auto; text-align:center; margin:auto; padding-top:20px; margin-bottom:55px;}
.interiorDesign  h2  { font-size:24px; color:#f26531; font-weight:normal; margin-bottom:33px;}
.interiorDesign  p {  font-size:14px; color:#414042; text-align:center;  line-height:20px;}


.zsb-photography { width:100%; clear:left; float:left;   text-align:center; margin:auto; padding-top:103px; padding-bottom:50px; background:url(../images/case_study/zsb/boder.png) no-repeat center top #fff9df;}
.zsb-photography h2  { font-size:24px; color:#f26531;  margin-bottom:33px;}
.zsb-photography p {  font-size:14px; color:#414042; text-align:center;  line-height:20px; margin-bottom:55px;}
.zsb-photography .imageSection { margin:auto; margin-bottom:37px; font-size:0;}
.zsb-photography .image1 { width:1050px; height:675px; background:url(../images/case_study/zsb/photography-image1.png) no-repeat;  }


.zsbWebsiteDetail {  width:100%; clear:left; float:left; position:relative; background:url(../images/case_study/zsb/boder.png) no-repeat center top #fff9df; box-sizing:border-box; padding-top:113px;  padding-left:60px; padding-right:60px;}
.zsbWebsiteDetail .topleftborder { position:absolute; left:60px; top:62px; width:90px; height:90px; background:url(../images/case_study/zsb/top-left-boder.png) no-repeat; font-size:0;}
.zsbWebsiteDetail .toprightborder { position:absolute; right:60px; top:62px;  width:90px; height:90px; background:url(../images/case_study/zsb/top-right-border.png) no-repeat; font-size:0;}

.zsbWebsiteDetail .content { max-width:654px; width:auto; text-align:center; margin:auto; margin-bottom:46px;}
.zsbWebsiteDetail .content h2  { font-size:24px; color:#f26531;  margin-bottom:33px;}
.zsbWebsiteDetail .content p {  font-size:14px; color:#414042; text-align:center;  line-height:20px;}


.zsbWebsiteDetail .imagesection { width:1050px; height:787px; background:url(../images/case_study/zsb/website-images1.jpg) no-repeat; font-size:0; margin-bottom:57px;}


.zsbfacebookDetail {  width:100%; clear:left; float:left; position:relative; background:url(../images/case_study/zsb/boder.png) no-repeat center bottom #fff9df; box-sizing:border-box; padding-left:60px; padding-right:60px; }

.zsbfacebookDetail  .content { max-width:654px; width:auto; text-align:center; margin:auto; margin-bottom:46px;}
.zsbfacebookDetail  .content h2  { font-size:24px; color:#f26531; margin-bottom:33px;}
.zsbfacebookDetail  .content p {  font-size:14px; color:#414042; text-align:center;  line-height:20px;}

.zsbfacebookDetail .imagesection { width:1050px; height:787px;  background:url(../images/case_study/zsb/facebook-image.jpg) no-repeat; font-size:0; margin-bottom:84px;}
.spacerBottom { width:100%; height:60px; background:#fff9df; overflow:hidden; margin-bottom:30px;}


 @media only screen and (min-width:990px) and (max-width: 1169px) {
	.zsbDetailWrap .styleGuide   { width:990px; height:127px; background-size:100%;}
	.collateralsWrap { padding-left:0px; padding-right:0px;}
	.collateralsWrap .topleftborder, .zsbWebsiteDetail .topleftborder { left:0;}
	.collateralsWrap .toprightborder, .zsbWebsiteDetail .toprightborder { right:0;}
	.zsbWebsiteDetail, .zsbfacebookDetail { padding-left:0px; padding-right:0px;}
	.zsbWebsiteDetail .imagesection { width:990px; height:742px; background-size:100%;}
	
	.zsbfacebookDetail .imagesection { width:990px; height:742px; background-size:100%;}
	
	.collateralsWrap .imageSection {  background-size:100%;}
	.collateralsWrap .image1 { width:990px; height:743px;}
	.collateralsWrap .image2 { width:990px; height:740px;}
	.collateralsWrap .image3 { width:990px; height:740px;}
	.collateralsWrap .image4 { width:990px; height:746px;}
	.collateralsWrap .image5 { width:990px; height:598px;}
	.collateralsWrap .image6 { width:990px; height:996px;}
	.collateralsWrap .image7 { width:990px; height:466px;}
	.collateralsWrap .image8 { width:990px; height:467px;}
	.collateralsWrap .image9 { width:990px; height:1111px;}
	.collateralsWrap .image10 { width:990px; height:467px;}
	.collateralsWrap .image11 { width:990px; height:467px;}
	.collateralsWrap .image12 { width:990px; height:466px;}
	
	.zsb-photography .imageSection { width:990px; background-size:100%; height:636px;}
	
 }
 
 
  @media only screen and (min-width:750px) and (max-width: 989px) {
	 .zsbDetailWrap .styleGuide   { width:990px; height:127px; background-size:100%;}
	.collateralsWrap { padding-left:0px; padding-right:0px;}
	.collateralsWrap .topleftborder { left:0;}
	.collateralsWrap .toprightborder { right:0;}
	.zsb_main{
	    padding-top: 313px;
	}
	
	.zsbDetailWrap .styleGuide   { width:690px; height:89px; background-size:100%;}
	.mascotDetail { width:100%;} 
	.mascoimageWrap  .imagewrap.image2 { margin-left:30px; margin-right:30px;}
	.mascoimageWrap  .imagewrap.image3 { margin-right:30px;} 
	.zsbBrandBanner { width:100%; padding-top:90px;  padding-bottom:90px; background-size:100%;}
	.zsbBrandBanner img { width:100%; height:auto;}
	.zsbVisual p { padding-left:15px; padding-right:15px;}
	.zsbVisual p br, .mascotDetail p br, .interiorDesign  p br { display:none;}
	.collateralsWrap .topleftborder { top:50px;}
	.collateralsWrap .toprightborder { top:50px;}
	
	
	.collateralsWrap .imageSection {  background-size:100%;}
	.collateralsWrap .image1 { width:690px; height:518px;}
	.collateralsWrap .image2 { width:690px; height:516px;}
	.collateralsWrap .image3 { width:690px; height:519px;}
	.collateralsWrap .image4 { width:690px; height:519px;}
	.collateralsWrap .image5 { width:690px; height:417px;}
	.collateralsWrap .image6 { width:690px; height:694px;}
	.collateralsWrap .image7 { width:690px; height:325px;}
	.collateralsWrap .image8 { width:690px; height:325px;}
    .collateralsWrap .image9 { width:690px; height:774px;}
	 .collateralsWrap .image10 { width:690px; height:325px;}
	 .collateralsWrap .image11 { width:690px; height:325px;}
	 .collateralsWrap .image12 { width:690px; height:325px;}
	 .zsb-photography .imageSection { width:690px; background-size:100%; height:443px;}
	 
	 	.collateralsWrap .topleftborder, .zsbWebsiteDetail .topleftborder { left:0;}
	.collateralsWrap .toprightborder, .zsbWebsiteDetail .toprightborder { right:0;}
	.zsbWebsiteDetail, .zsbfacebookDetail { padding-left:0px; padding-right:0px;}
	.zsbWebsiteDetail .imagesection { width:690px; height:517px; background-size:100%;}
	.zsbfacebookDetail .imagesection { width:690px; height:517px; background-size:100%;}
	 
  }
  
  
  
    @media only screen and (min-width: 480px) and (max-width: 749px) {
		.zsbHeadName h1 { margin-bottom:25px;}
		.zsb_main { padding-top:200px;}
		.zsbDetailWrap .styleGuide   { width:990px; height:127px; background-size:100%;}
	.collateralsWrap { padding-left:0px; padding-right:0px;}
	.collateralsWrap { padding-top:70px;}
	.collateralsWrap .content { margin-bottom:40px;}
	.collateralsWrap .topleftborder { left:0; top:25px;}
	.collateralsWrap .toprightborder { right:0; top:25px;}
	
	.case_study_head.torgauerHead {
    font-size: 40px!important ;
	line-height:normal !important;
	
}
.zsbBrandDetail { width:400px; padding-top:93px;  background-size:100%;}
 .zsbDetailWrap .styleGuide   { width:450px; height:58px; background-size:100%; margin-bottom:30px;}
.mascotDetail { width:460px;}
.mascotDetail p  { margin-bottom:0px;}
.mascotDetail p br { display:none;}

.mascoimageWrap  .imagewrap { margin:auto; float:none;}
.mascoimageWrap  .imagewrap.image1, .mascoimageWrap  .imagewrap.image2, .mascoimageWrap  .imagewrap.image3, .mascoimageWrap  .imagewrap.image4 { float:none; margin-left:0px; margin-right:0px;
margin-top:15px; margin-bottom:15px;}
.mascoimageWrap  .imagewrap.image3 { margin-top:-20px;}

.zsb_scope .contentWrap aside { width:100%; }
	.zsb_scope .contentWrap aside.rt { margin-top:15px;}
	.zsb_scope { padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:20px;}
	.zsb_scope .contentWrap { margin-bottom:0px;}
	
	.zsbBrandBanner { width:100%; padding-top:60px;  padding-bottom:60px; background-size:100%;}
	.zsbBrandBanner img { width:100%; height:auto;}
	.zsbVisual { padding-top:50px; padding-bottom:50px;}
	.zsbVisual p { padding-left:20px; padding-right:20px;}
	.zsbVisual p br, .mascotDetail p br, .interiorDesign  p br { display:none;}
	
	
	
	
	
		.collateralsWrap .imageSection {  background-size:100%; margin-bottom:20px;}
	.collateralsWrap .image1 { width:460px; height:345px;}
	.collateralsWrap .image2 { width:460px; height:344px;}
	.collateralsWrap .image3 { width:460px; height:347px;}
	.collateralsWrap .image4 { width:460px; height:346px;}
	.collateralsWrap .image5 { width:460px; height:278px;}
	.collateralsWrap .image6 { width:460px; height:463px;}
	.collateralsWrap .image7 { width:460px; height:216px;}
    .collateralsWrap .image8 { width:460px; height:217px;}
	.collateralsWrap .image9 { width:460px; height:516px;}
	    .collateralsWrap .image10 { width:460px; height:217px;}
	
	.collateralsWrap .image11 { width:460px; height:217px;}
		.collateralsWrap .image12 { width:460px; height:217px;}
	.zsb-photography .imageSection { width:460px; background-size:100%; height:295px;}
	.zsb-photography { padding-top:50px; padding-bottom:0px;}
	.zsb-photography p { margin-bottom:20px;}
	
		.collateralsWrap .topleftborder, .zsbWebsiteDetail .topleftborder { left:0;}
	.collateralsWrap .toprightborder, .zsbWebsiteDetail .toprightborder { right:0;}
	.zsbWebsiteDetail, .zsbfacebookDetail { padding-left:0px; padding-right:0px;}
	.zsbWebsiteDetail .imagesection { width:460px; height:345px; background-size:100%;}
	.zsbfacebookDetail .imagesection { width:460px; height:345px; background-size:100%;}
	
		  .inner_body.fullwidth .case_study_head.torgauerHead {
	font-size: 25px!important;
    line-height: 34px !important;
	margin:0px !important;
	padding-top:70px !important;
	padding-bottom:0px !important;

}

	
	}
	
	
	@media only screen and (max-width:479px) {
		.zsb_main { padding-top:200px;}
		.zsbHeadName h1 { margin-bottom:25px;}
		.zsb_scope .contentWrap aside { width:100%; }
		.zsb_scope .contentWrap aside { width:100%; }
	.zsb_scope .contentWrap aside.rt { margin-top:15px;}
	.zsb_scope { padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:20px;}
	.zsb_scope .contentWrap { margin-bottom:0px;}
		.zsbDetailWrap .styleGuide   { width:300px; height:31px; background-size:100%;}
.collateralsWrap { padding-left:0px; padding-right:0px;}
	.collateralsWrap { padding-top:70px; }
	.collateralsWrap .content { margin-bottom:40px;}
	.collateralsWrap .topleftborder { left:0; top:25px;}
	.collateralsWrap .toprightborder { right:0; top:25px;}
	.zsbBrandBanner { width:100%; padding-top:60px;  padding-bottom:60px; background-size:100%;}
	.zsbBrandDetail { width:300px; padding-top:93px;  background-size:100%;}
	.mascotDetail { width:300px;}
	  .inner_body.fullwidth .case_study_head.torgauerHead {
	font-size: 25px!important;
    line-height: 34px !important;
	margin:0px !important;
	padding-top:50px !important;
	padding-bottom:0px !important;

}
	
.mascoimageWrap  .imagewrap { margin:auto; float:none;}
.mascoimageWrap  .imagewrap.image1, .mascoimageWrap  .imagewrap.image2, .mascoimageWrap  .imagewrap.image3, .mascoimageWrap  .imagewrap.image4 { float:none; margin-left:0px; margin-right:0px;
margin-top:15px; margin-bottom:15px;}
.mascoimageWrap  .imagewrap.image3 { margin-top:-20px;}
	.zsbBrandBanner { width:100%; padding-top:60px;  padding-bottom:60px; background-size:100%;}
	.zsbBrandBanner img { width:100%; height:auto;}
	.zsbVisual { padding-top:50px; padding-bottom:50px;}
	.zsbVisual p { padding-left:20px; padding-right:20px;}
	.zsbVisual p br, .mascotDetail p br, .interiorDesign  p br  { display:none;}
	
	
	
		.collateralsWrap .imageSection {  background-size:100%; margin-bottom:20px;}
	.collateralsWrap .image1 { width:300px; height:225px;}
	.collateralsWrap .image2 { width:300px; height:224px;}
	.collateralsWrap .image3 { width:300px; height:226px;}
	.collateralsWrap .image4 { width:300px; height:226px;}
		.collateralsWrap .image5 { width:300px; height:181px;}
		.collateralsWrap .image6 { width:300px; height:302px;}
		.collateralsWrap .image7 { width:300px; height:141px;}
		.collateralsWrap .image8 { width:300px; height:141px;}
		.collateralsWrap .image9 { width:300px; height:337px;}
		.collateralsWrap .image10 { width:300px; height:142px;}
		.collateralsWrap .image11 { width:300px; height:142px;}
		.collateralsWrap .image12 { width:300px; height:142px;}
			.zsb-photography .imageSection { width:300px; background-size:100%; height:193px;}
			.zsb-photography p { margin-bottom:20px;}
			.zsb-photography { padding-top:50px; padding-bottom:0px;}
			
			.collateralsWrap .topleftborder, .zsbWebsiteDetail .topleftborder { left:0;}
	.collateralsWrap .toprightborder, .zsbWebsiteDetail .toprightborder { right:0;}
	.zsbWebsiteDetail, .zsbfacebookDetail { padding-left:0px; padding-right:0px;}
	.zsbWebsiteDetail .imagesection { width:300px; height:225px; background-size:100%;}
	.zsbfacebookDetail .imagesection { width:300px; height:225px; background-size:100%;}
	}