/* 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;
	}

}
	
	
	
	
	
	/* DAWN'S @ Ramsdens 1024 x 819px ///////////////      in development */

@media screen 
	and (min-height: 768px)
	and (max-height: 820px)
/*  and (min-height: 768px)
  and (max-height: 800px)
  and (min-width: 1370px) 
  and (max-width: 1388px) */
   and (min-width: 974px) 
   and (max-width: 1074px) 

{
	
	div#screenInfo:before { 
		content: "Dawn's Monitor \A Ramsden & Whale Limited \A \A Screen Size: \A 4x3 :: w1024 x h819px \A \A Dawn, sorry but you really do \A need a new monitor \A Clive :-)";
		white-space: pre; /* or pre-wrap */
		background: rgba(0,128,0,1); /* green */
		color: white;
	}
	
	/*	.showPhone {display: block;} 
		.hidePhone {display: none;} 
	*/
	
	/* Set PAGE SIZE 768x1024px /// */
	
	.twitter,
	.google-map,
	.subscribe,
	.team-photo, .contact-photo, .contact,
	.about.col-md-6, .contact-Text.Left-rh, 
	.services.col-md-6.Left, .products.col-md-6.left,
	.services.col-md-6.Right, .products.col-md-6.Right,
	.services.Right, .products.Right,
	.products.col-md-6, .team.col-md-6, .services.col-md-6, .team.col-md-6
	
	{
		.min-height: 600px;
		height: 600px;
		width: 50%; /*!important; */
	}
	.services-photo,
	.products-photo
	{
		height: 600px;
		width: 50%!important;
	}
	

	
	.team .col-md-6 img {
		float: unset;
		width: 100%;
		margin-bottom: unset;
		margin-left: unset;
	}
		
	/* mini tweaks /// */
	
	#ServicesIntro .services.col-md-6.Left .hidePhone { display: block!important}
	
	#ServicesIntro.hidePhone { display: block!important}
	
	#madesign {clear: both; }

	.about i:before {display: none;}
	
	/* .fa.fa-fw.fa-twitter.twitter {width: 100%!important}
	

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

	#ProductsMenu li.screen {display: display;}
		#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}
		
		
	li.screen i.fa.fa-print:before {
		color: yellow!important;
	}
	li.screen i.fa,
	.menuTitle i.fa.fa-print:before {
		margin-right: 2px;
	}

	div.menuWrapper {
		font-size: 11pt;
	}
	#ServicesMenu ul li,
	#ProductsMenu ul li	{
		padding-right: 0px;
	}

	div.menu li span {
		padding-right: 3px;
		padding-left: 3px;
	}
	div.menu li a {
		color: lightsteelblue;
		padding: 0;
	}
	div.menu li.Serv17 i.fa.fa-database.fa-spin {
		color: yellow!important;
		padding: 0;
	}
	

	
	/* FILTER BUTTONS  ///// */
	.servicesButton,
	.productsButton {
		width: 13Vw;
		height: 5Vh;
		font-size: 10pt;
		line-height: 10pt;
	}
	.productsButton {
		padding:2px 15px 0 5px;
	}
	.servicesButton {
		padding: 2px 5px 0 0;
	}
	
	
	/* FILTER BUTTONS  ///// */
	.servicesButton, .productsButton {
		z-index: 10000000000!important;
	}
	
	/* VIP FilterBUTTONS on or off //// */
	.div.showScreen {display: none}
	div.showScreen {display: block}
	div.hideScreen.showPhone {display: none!important}
	
	div.filterButtons.showScreen {
		position: fixed;
		bottom: 0px;
		left: 33.5Vw;  
		z-index: 10000000000!important;
	}
	
	.div.hideScreen.showPhone {
		position: fixed;
		bottom: 0px;
		left: 35Vw;  
		z-index: 10000000000!important;
	}
	
	#filterProducts,
	#filterServices	{
		background: rgba(255,255,245,0.9);
		position: relative;
		float: unset;
		bottom: unset;
		right: unset;
	}
	#filterServices {
		float: left;
		border-radius: 100% 0 0 0;
	}

	.servicesButton,
	.productsButton {
		width: 15Vw;
		height: 6Vh;
		font-size: 11pt;
		line-height: 12pt;
	}
	#ProductsButton {
		float: left;
		position: relative;
		left: 0;
	}
	.productsButton {
		padding: 5px 15px 0 12px;
		background: red;
		border-radius: 0 100% 0 0;
		Text-align: left;
	}
	#ServicesButton {
		position: relative;
		left: 0;
	}
	.servicesButton {
		padding: 5px 15px 0 12px;
		background: green;
		border-radius: 100% 0 0 0;
		text-align: right;
	}
	footer {
		padding: 20px;
		padding-bottom: 8Vh;  /*/ drop the bottom down by same size as filterButtons */
	}
	
	
	/* FONT STYLING //// */
	
	.about p, .products p, .services p {
		width: 33Vw;
		padding: 0;
		margin: 0;
		padding-bottom: 10px;

		font-size: 10pt;		
		line-height: 14pt;
	}
	
	
	/* Innovation BLOCK //// */
	.innovative .icon {
		position: relative;
		left: -15px;
	}
	.innovative .info {
		margin-left: -10px;
	}
	.innovative p {
		font-size: 10pt;
		line-height: 18pt;
		color: #8c9398;
	}


	/* Total Drum Management //// */
	.intro-text.Products li {
		font-size: 9pt;
		line-height: 11pt;
		margin-bottom: 10px;
	}
	.intro-text.Products li i {
		margin-bottom: 12px;
	}
	#ProductsIntro ul  {
		padding: 20px 10px 0 35px;
	}
	

	/* License UL Bullets list /// */
	.intro-text.Licens ul {
	    padding: 20px 20px!important;
	}
	.intro-text.Licens ul li {
		font-size: 8pt;
		line-height: 8pt;
		width: 105px;
		margin-right: 10px;
		margin-bottom: 0px; 
		padding-bottom: 8px; 
		clear: unset;
	}
	.services .intro-text.Licens i, .products .intro-text.Licens i, .Right.services .intro-text.Licens i, .Right.products .intro-text.Licens i {
		clear: right;
		height: 25px;
		width: 25px;
		line-height: 28px;
		float: left;
		display: block;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
		border: 2px black solid;
		border-radius: 100%;
	}



	
	/* Welcome + 60 Years Logo //////////// */
	
	
	#Welcome.container {
		bottom: unset;
		position: unset;
		left: unset;
	}
	
	header {
		padding-top: unset;
	}
	
	header .social-icons {
		margin-top: unset;
		top: 40px;
	}
	
	header .typed h1 {
	    font-size: 20pt;
	}

	header p {
		font-size: 20pt;
		color: white;
		word-spacing: 1px;
		line-height: 35pt;
		top: 44Vh;
		left: 10px;
	}

}