/* Created 17 0608 for use with ma-design.com ////////////////////////////////////////////////////////////////// */


/* Set Generic Print styles */

	
/* A4 Printed Page Layout ////////// */

@media screen {
  div.divFooter {
    display: none;
  }
}

@media print {
  div.divFooter::after {
    position: fixed;
	text-align: right;
	padding: 10px 40px 0 0;
	font-size: 8pt;
    .bottom: 0;
	top: 0;
	.height: 15cm;
	height: 445px;
	.height: 29.7cm;
	color: white;
	width: 100%;
	background-color: orange;
	z-index: -1;
  }
  
	.printHide {
		display: none!important;
	}
  

	body {
		.counter-reset: section;
		counter-reset: page;
	}
	h2::before {
		.counter-increment: section;
		.content: "Section " counter(section) ": ";
	}

	/* Important */
	#Welcome.container {
		float: unset;
		bottom: unset;
		left: 0;
		border: unset;
		height: unset;
		width: unset;
	}
  	
	/* lets have a page counter */
	div.pageFooter {
	    .display: table-footer-group;
		display: block;
		.background: purple;
		position:relative;
		.position:fixed;
		.position:absolute;
		.bottom: -150px;
		bottom: 0;
		padding: 3px 20px 3px 0;
		.color: white!important;
		text-align: right;
		font-style: italic;
		font-size: 8pt;
		right: 50px;
		border-radius: 0 10px 10px 0;
		background-image: linear-gradient(to left, purple, white 50%);
		
		page-break-after: always;
	}
/*	div.pageFooter::after {
	//    counter-increment: page;
		content: counter(page);
	}
*/
	div.pageFooter::after {
	    counter-increment: page;
	    content:"Page " counter(page) ": ";
		color: white;
	    .right: 0px; 
	    top: 100%;
	  }
}





@media print {
	
	/* style sheet for print goes here */
  
	@page {
	  size: A4 portrait;
	  margin: 0 0 0 0cm;
	  padding: 1cm;
	}

	/* Force browser to print background images */
	/*source: https://stackoverflow.com/questions/5949897/how-to-get-a-background-image-to-print-using-css */
    * {-webkit-print-color-adjust:exact;}


	body {background: transparent; }
	
	/* TENNIS */
	header {
	    .border-top: 10px solid #aa9055;
	    .border-right: 10px solid #aa9055;
	    .border-bottom: 10px solid #aa9055;
	    .border-left: 10px solid #aa9055;
	    .background-color: teal!important;
	}
		
	
	/* Not to Display for print */
	
	#ServicesButton, 
	#ProductsButton,
	#page-loader,
	#twitter,
	#Contact,
	.contact-photo,
	#Subscribe,
	.subscribe.col-md-6,
	#GoogleMap,	/* NOTE - until i can crakc printing out the Google MAP - must NOT BE SET */
	.stickyLogo.logo,
	.SeeMore,
	.loader-icon,
	.comment,
	div.menuWrapper,
	.menu,
	.mouse-wrapper,
	#myIcon,
	#screenInfo,
	#SEOvisible,
	footer	{ 
		display: none!important; 
	}
	
	#ProductsHidden.backstretch,
	.backstretch,
	.backstretch::after,
	.hidePhone { 
		display: none; 
	}
	
	#ServicesIntro.services.col-md-6.Left.hidePhone {
		display: block; 
	}

	/* Cover/ Welcome Page */
	#coverPage { display: block;}
	
	/* Set Size of the IMAGES */
	header,
	#google-container,
	#Welcome.container,
	.backstretch, 
	.innovative-photo.col-md-6,
	.services-photo.col-md-6,
	.products-photo.col-md-6,
	.printImg	{ /* 4x3 ratio */
		width: 595px;
		height: 445px;
	}
	




	/* Innovative Approach page */
	.innovative h2 {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.innovative p {
		text-align: left;
		font-size: 13px;
		word-spacing: 1px;
		line-height: 18px;
		color: #8c9398;
		margin-top: 6px;
	}
	.innovative-photo.col-md-6.hidePhone,
	.innovative.col-md-6.hidePhone {
		display: block;
	}
	.innovative-photo {
		padding: 40px 40px 150px 70px;
		padding: 0;
	}

	.about h2,
	.services h2, 
	.products h2 {
		padding-top: 10px;
	}
	
	
	


	/* Set the size of the TEXT area */
	.col-md-6 {
	    padding-right: 0;
		padding-left: 0;
	}
	.about, 
	.about.col-md-6, 
	.services.col-md-6,
	.innovative.col-md-6,
	.XXcontact-Text {
		height: 630px!important;
		.background: teal!important;
		overflow: visible;
	}
	.about  {
		padding: 25px 60px 0 6cm;
	}
	.about .intro-text {
		padding: 0;
	}

	.about.col-md-6, 
	.services.col-md-6{
		padding: 25px 60px 0 60px!important;
		padding: 25px 60px 0 6cm!important;
	}
	.innovative.col-md-6 {
		padding: 40px 60px 0 6cm!important;
	}
	.innovative .info {
		margin-bottom: 40px;
	}
	
	/* Set border on TEXT :: */

	.about h2 {
		text-align: left;
		margin-top: 0px;
		line-height: 25px;
		letter-spacing: 1px;
	}
	.about .intro-text ul {
		margin-top: 5px;
	}
	.about .intro-text ul li {
		list-style: none;
		text-align: left;
		font-size: 11pt;
		line-height: 18pt;
		padding: 0;
	}
	.pageFooter.aboutPrint {
		display: block;
	}
	
	ul {
		margin: 20px 0 0 0;
		clear: left;
	}
	.services .intro-text ul, 
	.products .intro-text ul {
		margin: 0;
		padding: 20px 0 0 0;
		clear: left;
	}
	
	.services.col-md-6.Right, 
	.products.col-md-6.Right {
		padding: 20px 60px 0 60px;
		padding: 25px 60px 0 6cm!important;
	}
	/* Hide more elements */
	.services.Left p {
	    float: unset;
	}

	.showPhone {
	    display: block;
	}

		
	a[href]:after {
	    content: " " attr(href) " ";
	}
	
	a.addTel.showPhone[href]:after,
	.contact-Text.Left-rh a.phone[href]:after,
	p a[href]:after,
	a[href]:after,
	a#filterProducts[href]:after,
	a#filterServices[href]:after,
	#TeamMembers a[href]:after,
	.logo a[href]:after,
	.html5lightbox a[href]:after,
	.col-md-4.emailDetails.email a[href]:after	{
	    content: "";
	    quotes: none;
	}

	div.printImg,
	img.printImg 	{ 
		display: block;
	}
	div.printImg:after {
		content: "*** [00]{this is the Print Image} *** ";
	}
	div.printImg.X0:after {
		content: "*** [X0]{this is the Print Image} *** ";
	}
	div.printImg.X1:after {
		content: "*** [X1]{this is the Print Image} *** ";
	}
	

	/* Lets make the Print Image propotional to the div size */
	#Welcome div.printImg {
		float: unset;
	    position: relative;
	    display: block;
	    overflow: hidden;
		z-index: 0;
	}
	header .welcome {
		padding-top: 0px;
		z-index: 1;
	}
	
	div.printImg {
		float: left;
	    position: relative;
	    display: block;
	    overflow: hidden;
		z-index: 1;
	}
	div.printImg > img {
	    position:absolute;
	    top:50%;
	    min-height:100%;
	    display:block;
	    left:50%;
	    -webkit-transform: translate(-50%, -50%);
	    min-width:100%;
	}
	
	/* Set the TEXT Blocks */
	.container {padding: 0;}
	.col-md-8 {
	    width: 100%;
	    padding: 0 40px 0 25px;
	}
	.col-md-12 {
		position: absolute;
		padding: 0 40px 0 25px;
		top: 0; 
		left: 0;
	}
		

	h1, 
	#Welcome p,
	#Welcome p em,
	header .social-icons li i.fa,
	header .social-icons li i.fa a,
	header .social-icons li i.fa:before	{
	    color: white!important;
		padding-bottom:0;
	}

	header .social-icons {
		position: absolute;
		margin-top: 0;
		padding-bottom: 5px;
	    top: 10px; 
	    right: 0;
		width: 30px;
		height: 30px;
		font-size: 12px;
		outline: none;
		line-height: 37px;
	}
	header .social-icons li {
		list-style: none;
	    font-size: 18px;
	    float: left;
	    margin: 0 10px 10px 0;
	}
	header .social-icons li a[href]:before {
	     content: " " attr(href) " ";
	     color: white!important;
	     position: relative;
	     left: -230px;
	     top: 20px;
	     float: left;
	     font-size: 7pt;
	     text-align: right;
	}
	header .social-icons li a:hover {
		background: transparent;
	}
	header .logo {
		position: relative;
		left: -30px;
	    margin-top: 90px;
	    margin-bottom: 20px;
	}
	header div.logo, 
	header div.logo img {
	 /*   max-width: 180px!important; */
		max-width: 180px;
	    Height: auto;
	}


	
	/* Tel Number */
	
	.printTel,
	.addTel,
	.addTel.showPhone {
		display: inline-block;
		position: relative;
		position: absolute;
		bottom: 5px!important;
		right: 70px!important;
		font-size: 12pt!important;
		font-style: italic!important;
		.color: rgba(0,0,0,0.5)!important;
		color: rgba(0,0,0,0.5);
	}
	.printTel { display: block!important; background: teal;}
	
	.Right a.addTel.showPhone {
		float: right;
		left: unset;
		right: 70px!important;
	}
	.addTel { 
		display: block;
		.background: orange;
	}
	
	a.addTel span {
		font-size: 6pt;
		font-weight: bold;
		color: rgba(0,0,0,0.8);
	}
		
		

	/* Team Members List */
	.team {
		padding: 75px 60px 84px 60px;
		padding: 0 0 0 30px;
		background: #FFFFFF;
		text-align: center;
		position: relative;
		z-index: 1;
		width: 595px;
		height: 842px; /* A4 */
		height: 1075px; /* A4 842 + 445px */
		background: white;
		.page-break-after: always;
	}
	.team .border {
		padding-top: 50px;
	}
/*
	.team::before {
		content: "Our Team Members";
		font-size: 24pt;
		font-weight: bold;
		text-align: left;
		color: red;
		padding: 20px;
	}
	
*/
	.team::before {
		.content: "Our Team Members";
		font-size: 24pt;
		font-weight: bold;
		text-align: left;
		.color: red;
		padding: 20px;
		float: left;
	}

	.team.MADESIGN::before {
		content: "ma-design.UK";
	}
	.team.TENNIS::before {
		content: "Our Membership Team";
	}
	.team.JAZZLOVERS::before {
		content: "Our Band Members";
	}
	.team.MARKHAMI::before {
		content: "Our Team";
	}
	.team.PRINTERSPENN::before {
		content: "Our Team";
	}
	.team.DRUMCARE::before {
		content: "Our IBC Team";
	}



	

	.team .col-md-6 {
		width: 260px;
		.background: yellow!;
		float: left;
		padding-bottom: 10px;
	}
	.team-photo.col-md-6.Right,
	.team-photo.col-md-6.Left.hideScreen.showPhone,
	.team-photo.col-md-6.Left.showScreen.showPhone 	{
		display: none;
	}

	
	
	
	/* Google MAP */
	.google-map {
		background: #422379!important;
	}
	.google-map.col-md-6 {
		padding: 0 70px 0px 0px;
		background: #422379!important;
		.float: left;
	}
	
	#zoom-in, #zoom-out,
	#myIcon.showPhone {
		display: none;
	}

	
	.contact-Text {
		.padding: 0 70px 150px 0;
		padding: 0 70px 0px 6cm;
		height: 630px; /* A4 */
		.float: left;
	}
	.contact-Text .title-section {
		position: relative;
		float: left;
	}
	.contact-Text i {
		font-size: 2.1em;
		text-align: right;
		display: block;
		padding: 25px 0 0 0;
	}
	.contact-info {
		padding-top: 30px;
	}
	.col-md-4.addressDetails {
		width: 225px;
	}
	.col-md-4.emailDetails {
		width: 120px;
		width: auto;
	}
	.col-md-4.phoneDetails {
		width: 120px;
		width: auto;
	}

}



/* SCREEN A4 Page - for testing ////////////// */      /* PORTRAIT - Under test */
@media screen 
  and (width: 595px) 
  and (height: 842px) 
{
	body {background: red}
	
		/* Not to Display for print */
	
	#ServicesButton, 
	#ProductsButton,
	#page-loader,
	#twitter,
	.loader-icon,
	.comment,
	div.menuWrapper,
	.menu
	{ display: none!important; }
	
	div.menuWrapper	{background: red;}
}



div.menuWrapper {
	border-top: 10px solid red;
	border-bottom: 10px solid red;
}