/* CSS Document */

@import url('reset.css');
@import url('grid.css');
@import url('nav.css');
@import url('slider.css');
@import url('scrollToTop.css');




/*
 * 0. ILLUSTRATIONS TOGGLE BUTTON STYLE   (see also toggle illustrations) 
 * 1.ASIDE
 * 2.ADVERT TOP
 * 3,LISTING WRAPPER
 * 4.PLAY BUTTONS
 * 5.TABS TOGGLE 
 * 6. GALLERY
 * 7. SPRITE BOX
 * 8. LISTINGS BOX 2 (FOR TESTIMONIALS)
 * 8. CTA
 */





/* SINGLE IMAGE ON BACKGROUND   add     no-repeat fixed center center / cover transparent; */

html {background-image:url('../images/background/carbon_fibre.png');}


body {width:100%; font-family:'Open Sans', sans-serif; font-size:1em; line-height:1.5em; color:#333;}

.page {width:100%; max-width:1200px; height:auto; padding-top:16px; margin:0 auto; background:#FFF;

webkit-box-shadow: inset 0px 0px 40px 2px rgba(0,0,0,0.15);
-moz-box-shadow: inset 0px 0px 40px 2px rgba(0,0,0,0.15);
box-shadow: inset 0px 0px 40px 2px rgba(0,0,0,0.15);}

header {
	text-align:center;
	width: 100%;
	color: #333;
		}
		
.maincontent{	
clear: both;
width: 100%;
margin: 0px auto;
padding: 1em 0px;
position: relative;
background: #FFFFFF;
   
    
}


footer {
clear: both;
width: 100%;
margin: 0px auto;
padding: 0.5em 0px;
position: relative;	
color:#333;
text-align:center;
border-top:solid 2px #333333;
   /*  background-color:#369; */
  

    background: rgba(51, 51, 51, .1);
}





/* TEXT STYLE */

p, h1,h2, h3, h4, h5, h6 {line-height:1.5em;}
p,  h3, h4, h5, h6 {line-height:1.5em; margin-bottom:16px;}

 h1 {margin-bottom:20px;}
 h2 {margin-bottom:8px;}


h1, h2, h3 {font-family: 'Ubuntu', sans-serif; font-weight:400; color:#333;}
h2, h3 {}
h1 { font-size:2em; border-bottom: solid 1px #333333; text-align:center;}
h2 { font-size:1.6em;}
h3 { font-size:1.5em;}

h4, p.h4, h5, p.h5, h6, p.h6 {font-family: 'bitter', cursive; color:#c33; line-height:1.2em; margin-bottom:4px; }
h4, p.h4 { font-size:2.3em; font-weight:700;}
h5, p.h5 { font-size: 1.3em;}
h6, p.h6 { font-size: 1em; color:#369; font-style:italic; }

p.h7 {font-family:'Open Sans', sans-serif; font-weight:400; font-size: 1em; color:#003; margin-bottom:16px;}


p, p a, a {font-size: 16px; vertical-align: top;}
p a {color:#06C; font-weight:700; text-decoration:underline;}
p a:hover {color:#F60; font-weight:700; text-decoration:underline;}



em {font-style:italic;}
strong {font-weight:bold;}

hr {border:dashed #999; border-width:1px 0 0 0; height:0;line-height:0;font-size:0; padding:0; margin:16px 0 32px 0;}


/* This is to make View shops button appear correctly */
#illustrations_flag p {margin:0;}
.playingcards p {margin:0;}
li.ViewShops {padding:0!important; color:#0066CC; font-size:13px; height:26px;cursor: pointer;}
a.buynow {padding:0!important; color:#0066CC!important; font-size:13px; background:none!important; display: inline-block;}
ul.buynow {display: inline-block;}
ul.tabs.ViewShops {display: inline-block;}


@media screen and (max-width: 534px)
{
	li.tab-link.ViewShops {padding:0 0!important; color:#0066CC!important; font-size:13px; border-top:0!important;}
	ul.nav.tabs.ViewShops {border-bottom:0!important; background: none;}
	
	ul.nav.ViewShops.buynow {border-bottom:0!important; background: none; width: 100%; border-right: 0;}
	ul.tabs.ViewShops {display: block;}
	ul.buynow {display: block;}
	a.buynow {padding:0!important; color:#0066CC!important; font-size:13px; background:none!important; display: inline-block; height:30px;}
	}

										.0 ILLUSTRATIONS TOGGLE BUTTON STYLE {}
/* TOGGLE BUTTON ============================================================================= NEW */
	
	



.button_off {
    width: 70px;
    height: 20px;
	margin-top:8px;
 	margin-left: auto;
    margin-right: auto;
	outline:none; /* removes border in chrome */
	background:transparent;
    background-image: url(http://leon-design.net/assets/images/button/button_off_II.png);
    background-repeat: no-repeat;
  	background-size:contain;
	background-position:center;
    border:0;
	


}



.button_on {
    width: 70px;
    height: 20px;
	margin-top:8px;
 	margin-left: auto;
    margin-right: auto;
	outline:none; /* removes border in chrome */
	background:transparent;
    background-image: url(http://leon-design.net/assets/images/button/button_on_II.png);
    background-repeat: no-repeat;
 	background-size:contain;
	background-position:center;
    border:0;


}

a.button_viewAll {
  
	margin-top:8px;
 	margin-left: auto;
    margin-right: auto;
	display:block;
	color: #06C;
    font-weight: 700;
	text-decoration:underline;
	text-align:center;
	outline:none; /* removes border in chrome */
	




}







										.1 ASIDE GRID RESPONSIVE{}
/* MAKE IMAGES RESPONSIVE ============================================================================= */

.col.span_aside img {width:100%; height:auto;}


.col.span_aside{text-align:center;}
	
	
	
	

										.2 ADVERT-TOP{}
/* ENVELOPE ============================================================================= */
.advert-envelope {background-image:url('../images/main/adverts-top/envelope-closed.png');
		background-repeat:no-repeat; 
		background-position:center; 
		background-size:100% 100%; 
		height:378px;
		max-width:375px;
		text-align:center;
}

.advert-envelope>*:first-child {margin-top:105px; margin-bottom:15px;}

a.button-stamp {display:block; 
				width:100%; 
				height:auto; 
				max-width:260px;
				min-height:82px;
				margin:0 auto 0 auto; 
				background-image:url('../images/main/adverts-top/button-stamp.png');
				background-repeat:no-repeat; 
				background-position:center; 
				background-size:100% 100%; 
				text-align:center;}


a.button-stamp:hover {background-image:url('../images/main/adverts-top/button-stamp-hover.png');}

		/* MAKE ENVELOPES INSIDE .col.span_main APPEAR CORRECTLY */
			@media  screen and (min-width: 1023px) {
				.col.span_main .advert-envelope h4 {font-size:1.5em;}
					.col.span_main .advert-envelope {width: 32.26%; float:left; margin: 0px 0px 2% 1.6%; height:330px;}	
					.col.span_main .col.advert-envelope:first-child {margin-left:0px;}
					.col.span_main .advert-envelope>*:first-child {margin-top:91px;}
				.col.span_main a.button-stamp {max-width:200px; min-height:66px;}
				}

		/*  MAKE ENVELOPES INSIDE .col.span_full-size APPEAR CORRECTLY */
			@media  screen and (max-width: 1023px) {
				.advert-envelope h4 {font-size:1.8em;}
					.advert-envelope {width: 32.26%; float:left; margin: 0px 0px 2% 1.6%; height:340px;}	
					.col.advert-envelope:first-child {margin-left:0px;}
					.advert-envelope>*:first-child {margin-top:91px;}
				a.button-stamp {max-width:200px; min-height:66px;}
				
			}
			
			@media  screen and (max-width: 800px) {
				.advert-envelope h4 {font-size:1.5em;}	
					.advert-envelope>*:first-child {margin-top:70px; margin-bottom:10px; width:50%; height:auto;}
					.advert-envelope {height:260px;}
				a.button-stamp {max-width:150px; min-height:50px;}
			}
			
			@media  screen and (max-width: 750px) {
				.advert-envelope h4 {font-size:1.3em;}
					.advert-envelope>*:first-child {margin-top:10px; margin-bottom:0px; width:auto;}
					.advert-envelope {height:180px;}
					.advert-envelope {background-image:none; 
									box-sizing:border-box;
									 -moz-box-sizing:border-box;
									-webkit-box-sizing:border-box;
									border:dashed #930; border-width:1px
									}
			}
			
			
			@media  screen and (max-width: 600px) {
				.advert-envelope {height:auto; width:100%; max-width:562px; float:none; padding-bottom:10px;}
					.col.advert-envelope {margin-left:0;}
				a.button-stamp {max-width:260px; min-height:82px;}
			
			}










										.3 LISTING-WRAPPER{}
/* LISTING WRAPPER ============================================================================= */
.listing-wrapper {	width:100%; 
					padding:20px 0 20px 0; 
					margin-bottom:32px;
					background-color:#fff;
					background-image:url('../images/main/decorative/border-envelope.png'); background-repeat:repeat-x; background-position:bottom; 
					
					border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
					box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.3); -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.3); -moz-box-shadow:    2px 2px 5px rgba(50, 50, 50, 0.3);}
				
					
					

.listing-wrapper:last-child {border-bottom:none;}				
					
.listing-logo {float:left; width:100%; height:auto; max-width:140px; margin-left:16px;}

.listing-text {float:left; width:100%; height:auto; max-width:518px; margin:0 8px;}
.listing-button {float:left; width:100%; height:auto; max-width:124px; margin-right:16px;}
.listing-button .play:first-child {margin-bottom:22px;}
	
	
										.4 PLAY-BUTTONS{}
/* BUTTONS ============================================================================= */	

.play {

width: 100%;
height:45px;
padding-top:13px;
background-color:#C33;
display:block;
text-align:center;
font-family: 'bitter', cursive; color:#FFF; font-size:1.7em; line-height:1.2em;
font-weight:700;
border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;					
text-shadow:-1px -1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.3);}

.play.review {font-weight:400; background-color:#39C;}
	
	
	.play:hover{background-color:#600;}
	.play.review:hover{background-color:#003;}
	
	
	
	
	
										.5 TABS-TOGGLE{}
/* TABS ============================================================================= NEW */
	
ul.tabs{  
margin: 0px;  
padding: 0px;  
list-style: none;  
}  
  
nav ul.tabs li{  
background: none;  
color: #222;  
display: inline-block;  
padding: 10px 17px;  
cursor: pointer;  
}  
  
nav ul.tabs li.current{
	color:#fff;
	background-color:#666; 
	border-radius:3px;   
}  
/* SEE NAV 132 REMOVE BORDER RADIUS */
  
.tab-content{  
display: none;  
padding: 15px;  
 border:transparent;

}  
  
.tab-content.current{  
display: inherit;  
}  	












	
										.6 GALLERY{}
/* GALLERY ============================================================================= NEW */
	.gallery {
    	text-align: center;
		}
	
	/*.gallery p, .gallery a  {
			margin-bottom:0;
	
	} */
	
	
		.gallery a {
			display:block;
	}
	

	
	
		.gallery img {
			width:100%;
			height:auto;
			
	}
	
	
	
	/* JAVASCRIPT  CSS: (StyleSheet) */
/* Gallery */





#imgPreviewWithStyles {
    background: #333;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}
	
	
										
/* GALLERY END GET MEDIA FILE AND .js ============================================================================= */	
	

										.7 SPRITE BOX{}
/* GALLERY ============================================================================= NEW */


.sprite-box:before {
		/* THIS IS WHERE IMAGE APPEARS */
    content: " ";
    position: absolute;
    z-index: 2;
	width:100%;
	height:100%;
	display:block;
    background: url("../images/gallery/sprite.png") ;
    background-repeat:no-repeat;
   background-size: 100% 100%;
    background-position: -9999px -9999px;
   
}


.sprite-box:hover:before {
		/* ON HOVER STATE IMAGE APPEARS */
    background-position: 0px 0px;
   
}
	.sprite-box {
    position: relative;
    z-index: 1;
     display: block;
 

}

	.sprite-box .span_4 .span_5{
 
    max-width:286px;
	max-height:286px;
		
}


	/* PORTFOLIO FOLDERS */
div.section.group.folders{
 width:600px; margin: 0 auto;
}
@media (max-width: 600px) {
	
	div.section.group.folders {
   max-width:300px; margin: 0 auto;
	}
}


@media (max-width: 1024px){
	/* MAKE OVERLAY RESPONSIVE */
	.sprite-box {max-width:225px; max-height:230px;}
	.sprite-box:hover:before {background-position: 0px -3px;}
}
 	

@media (max-width: 600px){
	/* MAKE OVERLAY RESPONSIVE */
	.sprite-box {max-width:264px;max-height:269px;}	
}
 	
	
	
										.8 LISTINGS-2{}
/* LISTING 2 ============================================================================= NEW */
	.listing-text2 {
    	width: 80%;
    	float: right!important;
margin: 0px 0px 0px 1.6%!important;
		}
	
	.listing-logo2{
		width: 15%;
		float: left!important;
	}
	
	
	.listing-logo2 img{	
width:100%; height:auto;
}
	
	
	

	
	
										.9 CTA{}
/* CTA ============================================================================= NEW */	
	
	.CTA {color: #FFF;  display: block;   padding: 10px 17px; cursor: pointer; background-color: #0066CC; border-radius: 3px;  margin-bottom: 23px; margin-top: 8px;}
	
	/* FOUND IN TESTIMONIALS */
	.read-more-btn {color: #999;  display: block;   padding: 10px 17px; background-color: #FFFFFF; border:solid 1px #999; border-radius: 20px;  margin-bottom: 23px; margin-top: 8px;}
	.read-more-btn:hover {color: #FFF;  display: block;   padding: 10px 17px; background-color: #999; border:solid 1px #999; border-radius: 20px;  margin-bottom: 23px; margin-top: 8px;}
	
	
	
	
	
	
	/* JAVASCRIPT  CSS: (StyleSheet) */
/* Gallery */

	
	
	
	
	
/* ==|== non-semantic helper classes ========================================
   ========================================================================== */
	




/* COLOURS */

.charcoal{color:#666!important;}
.red {color:#C33;}
.red-b {background-color:#C33;}
.blue {color:#369;}
.blue-b {background-color:#369;}
.green{color:#693;}
.charcoal-outlined {background-color:#555; border: solid #000 1px;}
.red-outlined {background-color:#900; border: solid #600 1px;}
.smoke{color:#F7F7F7;}
.paper{color:#F5F5E3;}

.orange-text {color:#cc3300;font-weight: bold;}


/* EFFECTS */

.shadow-bottom{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}


/* POSITIONING */

.center-m {margin-left:auto; margin-right: auto;}
.center-p {padding-left:auto; padding-right: auto;}
.center-t {text-align:center;}
.left-t {text-align:left!important;}

.right{float:right;}
.left{float:left;}

.hidden{display:none;visibility:hidden;}



.bold{font-weight:bold;}

.border-none{border:none!important;}

.border-bottom-none{border-bottom:none!important;}






/* CLEARFIX */


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}