
/* Created 16 1005 for use with ma-design.com ////////////////////////////////////////////////////////////////// */

/* / UPDATED ::	16 1012 	*/

/* / UPDATED ::	16 1014 	- Standardised names and Screen CSS styles 	*/
/* / FINI 		 ::	16 1027 	- Standardised names and Screen CSS styles 	*/


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


	.printImg { 
		display: none;
		.background: teal!important;
	}
	.print {
		display: none;
	}
	

:focus {
    outline: -webkit-focus-ring-color auto 5px;
	outline: unset;
	outline: none;
}

#ServicesButton,
#ProductsButton,
#filterServices,
#filterProducts {
	.z-index: 10001;
}

.servicesButton,
.productsButton {

	z-index: 10000000000!important;
	.background: yellow;
	
}


/* / SCREEN Styling ///////////////////////////////////////////////// */



	/* MENU Buttons ////// */
	/* tweak - to trim tthe menus to be in sync :: /// */
	#ServicesMenu li.screen {display: block;}
		#ServicesMenu li.mobile {display: none;}
		#ServicesMenu li.mobile i {display: none;}
		#ServicesMenu li.tablet {display: none;}
		#ServicesMenu li.tablet i {display: none;}
		
			div.menu li a span:hover{color:white;}
		
	/*	#ServicesMenu li.tablet a span.menuTitle {color: lightsteelblue; padding: 0}
	/*	#ServicesMenu div.menu li:hover{color:white;} */
	/*	div.menu li a:hover {color:white!important;}
		div.menu li a:active {color:white!important;}
	
/*	#ServicesMenu div.menu li:active{color:white;}
		#ServicesMenu div.menu li.tablet a span:hover{color:white;}
		#ServicesMenu div.menu li.tablet a span:active{color:white;}
	*/
	#ProductsMenu li.screen {display: block;}
		#ProductsMenu li.mobile {display: none;}
		#ProductsMenu li.mobile i {display: none;}
		#ProductsMenu li.tablet {display: none;}
		#ProductsMenu li.tablet i {display: none;}
	
		#ProductsMenu li.mobile a span.menuTitle {color: lightsteelblue; padding: 0}
		
	/*	#ProductsMenu div.menu li.mobile a span.menuTitle:hover{color:white;}
		#ProductsMenu div.menu li.mobile a span.menuTitle:hover{color:white;}
		#ProductsMenu div.menu li.mobile a span.menuTitle:active{color:white;}
	
	*/
	
	
	
	
/* 1366x768px ///////////////      OK works */

@media screen 
  and (min-height: 750px)
  and (max-height: 800px)
  and (max-width: 1388px) 
{
	
	div#screenInfo:before { 
		content: "13/15' Laptop 16:9 :: w1366 x h768px";
		background: purple;
		color: white;
	}
	
	
}




/* SMARTPHONES ////////////// iPhone + Z30    LANDSCAPE  || OK works */
@media screen 
  and (min-width: 325px)  /* 375px */
   and (max-width: 400px) 
  and (max-height: 760px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 
{	
	
	div#screenInfo:before { 
		content: "SmartPhones PORTRAIT :: w375 x h760px";
		background: FUCHSIA;
		color: white;
	}


	/* stickyLogo ///////////////// */
	div.stickyLogo.logo a#ahrefLogo {
		height: 10Vh;
		width: 10Vh;
		position: absolute;
		top: 10px;
		left: 10px;
		padding: 0;
	}
	/* Menu ICONS /////////////// */
	#ServicesMenu ul li, #ProductsMenu ul li {
		float: right;
		padding-right: 10px;
	}

	/* page ICONS ///////////// */
	.services i, .products i {
		display: none;
	}
	.services ul li i, .products ul li i {
		display: inline-block;
	}
	/* See More Button ///// */
	
	a.SeeMore i	{
		display: inline;
		clear: unset;
		height: unset;
		width:  unset;
		line-height: unset;
		float: unset;
		text-align: center;
		vertical-align: center;
		box-shadow: unset;
		border: unset;
		background: unset;
	}
	
	/* visible LOGOTYPE ///////// */
	h2 .logoWrapper {
		display: none;
	}
	
	/* TEXT BLOCKS ///////////// */
	.contact-Text.Left-rh, .services.col-md-6.Left, .products.col-md-6.left{
		padding: 0px 30px 84px 30px;
		text-align: right;
	}
	.contact-Text.Right-lh, .services.col-md-6.Right, .products.col-md-6.Right {
		padding: 0px 30px 84px 30px;
		text-align: left;
	}
	
	.left div.intro-text h2 ,
	.products.Left p, .services.Left p	{
		text-align: right;
	}
	.Right div.intro-text h2 ,
	.products.Right p, .services.Right p	{
		text-align: left;
	}

}







/* iPad ////////////// */      /* LANDSCAPE   OK works */
@media screen 
  /* and (min-width: 1000px) 
  and (max-width: 1024px)  */
  and (width: 1024px) 
 /* and (min-height: 700px) */
  and (height: 768px) 
/*  and (max-height: 768px) */
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1)
{
		
	div#screenInfo:before { 
		content: "iPad LANDSCAPE :: w1024 x h768px";
		background: blue;
		color: white;
	}
	
		/*.showPhone {display: none;} */
		.hidePhone {display: block;}

	
}





/* iPad ////////////// */      /* PORTRAIT   OK works */

@media screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
   and (max-height: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1)
{
	
	div#screenInfo:before { 
		content: "iPad PORTRAIT :: w768 x h1024px";
		background: orange;
	}
	

		/*.showPhone {display: none;} */
		.hidePhone {display: block;}
		

}






/* 19" screen 4x3 ////////////// */
@media screen 
   and (min-width: 1250px) 
   and (max-width: 1600px) 
   and (min-height: 1180px) 
   and (max-height: 1280px) 
{
	
	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "19 inch Monitor :: w1600 x h1280px";
		background: DEEPPINK;
	}
	


}






/* HD laptop screen 16x9 ///////////// */ /* OK works  on 1366x768*/
@media screen 
	and (min-height: 850px) /* 865 */
	and  (max-height: 1050px) /* 1042 */
	and (min-width: 1730px)  /*1745 */
	and (max-width: 1920px) /* 1920 */

{

	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "HD Laptop :: w1920 x h1050px";
		background: DEEPPINK;
	}
	
	


}






/* 27" HD laptop screen 16x9 ///////////// */

/* and (min-height: 1280px) /* 1350 */
/*.and  (max-height: 1400px) /* 1350 */
/* and (min-width: 1950px)  /* 2182 */
/* .and (max-width: 3500px) /* 2400 */

@media screen 
	and (min-width: 1920px) 
/*	and (max-width: 3500px) /* 2400 */
/*	and (min-height: 1300px)  */
{
	
	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "27 inch Monitor :: w2200 x h1350px";
		background: BLACK;
		color: WHITE;
		
		.width: 10Vw;
		width: 220px;
		.Height: 10Vh;
		height: 135px;
	}
	
}






/* 19" 4:3 Screen ////////////// */      /* LANDSCAPE   OK works */
@media screen 
  and (min-width: 1230px) 
  and (max-width: 1330px) 
  and (min-height: 924px) 
  and (max-height: 1124px) 
{
		
	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "19 inch 4:3 Screen LANDSCAPE :: w1280 x h1024px";
		background: blue;
		color: white;
	}

}
	



/* Deritend 24" 16:9 Screen ////////////// */      /* LANDSCAPE   OK works */
@media screen 
  and (min-width: 1240px) 
  and (max-width: 1320px) 
  and (min-height: 728px) 
  and (max-height: 808px) 
{
		
	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "Richard - Deritend Screen :: w1280 x h768px";
		background: Teal;
		color: white;
	}

}




/* My TOSHIBA USB Screen ////////// */

@media screen 
  and (min-width: 1650px) /* OK works  on 1366x768*/
  and (max-width: 1708px) 
  and (min-height: 840px) 
  and (max-height: 970px) /* OK works  on 1366x768*/
{

	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "My TOSHIBA USB Screen :: w1708 x h960px";
		background: SPRINGGREEN;
	}

}
	
	
	

