/* #Base 960 Grid
================================================== */


.clear { clear: both; }
#flipCards { margin:40px auto; width:960px; }
#flipCards div.element { margin:0px 9px; float:left; width:220px; height:370px; position:relative; overflow:hidden; border: 1px solid #ccc;}
.flipWrap { display: block; height: 740px; width: 220px; position: absolute; top: 0; }
.side1 { display: block; height: 370px; width:220px; }
.side2 { display: block; height: 370px; width:220px; cursor: pointer;}


.bgPlain {background: #f5f6f8;}
.bgShadowclad {background: #fff url(images/flipcards/bg-shadowclad.jpg) no-repeat center;}
.bgEQC {background: #fff url(images/flipcards/bg-eqc.jpg) no-repeat center;} 	
.bgPlasterCladding {background: #fff url(images/flipcards/bg-plastercladding.jpg) no-repeat center;} 
.bgSteelMesh {background: #fff url(images/flipcards/bg-steelmesh.jpg) no-repeat center;}
.bgCouncil {background: #fff url(images/flipcards/bg-council.jpg) no-repeat center;} 


.fcTitleblock {position: absolute; z-index: 1; width: 100%; height: 85px; background: url(images/flipcards/plus.png) no-repeat 90% 50%,url(images/flipcards/tint-red.png);}
.fcTitle {padding: 20px 25px; font-family: arial,helvetica,sans-serif; color: #fff; font-size: 20px;}
.fcContent {padding: 18px 23px; }
.fcH1 {font-family: arial,helvetica,sans-serif; color: #333; font-size: 22px;}
p.fcBody {font-family: arial,helvetica,sans-serif; color: #333; font-size: 14px; line-height: 19px;}
p.fcBody a {color: #333;}
p.fcBody a:hover {text-decoration: none;}
p.fcBodyShadowclad {font-family: arial,helvetica,sans-serif; color: #333; font-size: 13px; line-height: 16px;}
p.fcBodyShadowclad a {color: #333;}
p.fcBodyShadowclad a:hover {text-decoration: none;}


.fcButton {padding: 11px 17px; display: inline-block; border: 0px; font-family: Arial, sans-serif; cursor: pointer; font-size: 15px; line-height: 17px; width: auto; text-decoration: none;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.fcButton.color {background:#472133; color:#fff; }
.fcButton.color:hover {background:#58443f;}



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

#flipCards { margin:40px auto; width:768px; }
#flipCards div.element { margin:0px 7px; float:left; width:175px; height:370px; position:relative; overflow:hidden; border: 1px solid #ccc;}
.flipWrap { display: block; height: 740px; width: 175px; position: absolute; top: 0; }
.side1 { display: block; height: 370px; width:175px; }
.side2 { display: block; height: 370px; width:175px; cursor: pointer;}
	
.fcTitleblock {position: absolute; z-index: 1; width: 100%; height: 100px; background: url(images/flipcards/plus.png) no-repeat 90% 50%,url(images/flipcards/tint-red.png);}
.fcTitle {padding: 25px 20px; font-family: arial,helvetica,sans-serif; color: #fff; font-size: 20px;}
.fcContent {padding: 15px 15px; }
.fcH1 {font-family: arial,helvetica,sans-serif; color: #333; font-size: 18px;}
p.fcBody {font-family: arial,helvetica,sans-serif; color: #333; font-size: 13px; line-height: 17px;}
p.fcBody a {color: #333;}
p.fcBody a:hover {text-decoration: none;}
p.fcBodyShadowclad {font-family: arial,helvetica,sans-serif; color: #333; font-size: 12px; line-height: 14px;}
p.fcBodyShadowclad a {color: #333;}
p.fcBodyShadowclad a:hover {text-decoration: none;}

}





/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

#flipCards { margin:40px auto; width:300px; }
#flipCards div.element { margin:10px 0px; float:left; width:300px; height:370px; position:relative; overflow:hidden; border: 1px solid #ccc;}
.flipWrap { display: block; height: 740px; width: 300px; position: absolute; top: 0; }
.side1 { display: block; height: 370px; width:300px; }
.side2 { display: block; height: 370px; width:300px; cursor: pointer;}

}





/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.flipcardContainer { width: 420px; }
    
}