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



/* PRINT Styles ///////////////////////////////////////////////////// */


	@media print {

		#Welcome .addTel,
		#Welcome p, 
		header div.logo {
			display: none;
		}
		
	}
	
				
:focus {
    outline: -webkit-focus-ring-color auto 5px;
	outline: unset;
	outline: none;
}


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


/* 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;
	}
	
		/* LAPTOP - FILTER BUTTONS  ///// */
	.servicesButton,
	.productsButton {
		width: 10Vw;
		height: 4Vh;
		font-size: 10pt;
		line-height: 9pt;
	}
	#filterServices {
		position: relative;
		float: left;
		bottom: unset;
	}
	#filterProducts {
		position: relative;
		float: left;
		bottom: unset;
		right: unset;
		left: 0;
		
	}
	#ServicesButton,
	#ProductsButton {
		box-shadow: 
		0 5px 2px rgba(255,255,255,0), /*bottom external highlight*/ 
		0 -5px 5px rgba(0,0,0,0.1), /*top external shadow*/ 
		inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
		inset 0 5px 5px rgba(255,255,255,0.8);
	}
	#ProductsButton {
		float: left;
		position: relative;
		left: 10px;
		top: 5px;
	}
	#ServicesButton {  /* Green = Services */
		float: left;
		position: absolute;
		top: 5px;
		left: 30px;
		.margin: 0 0 0 30px;
	}
	
	.productsButton {
		border-radius: 10px;
		padding: 0 5px;
		text-align: center;
	}
	.servicesButton {
		border-radius: 10px;
		padding: 0 5px;
		line-height: 9pt;
		text-align: center;
	}
	
	
	/* Main HEADER /// */
	#Welcome.container a.addTel {
		padding: 0 10px 0 0;
		font-size: 24pt;
		font-size: 3.8Vh;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
	
}





/* SMARTPHONES //////////////      LANDSCAPE ||  OK works */
@media screen 
  and (min-height: 325px)  /* 375px */
  and (max-height: 400px) 
  and (max-width: 760px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 
{	

	div#screenInfo:before { 
		content: "smartPhones LANDSCAPE :: w760 x h375px";
		background: green;
	}
	
	
	/* mini tweaks /// */
	
	#page-loader {
		display: none!important;
	}
	
	/* VIP - amazing disappearing PRODUCTS SEQ = padding: 0 - watch out for this!!! */
	productsseq.products-photo {
		padding: 160px 70px 150px 70px;
	} 
	.products-photo.Left .title-section h2 {
		font-size: 20pt;
		float: right;
		text-align: right;
		padding-right: unset;
		padding-top: unset;
		margin: unset;
		position: relative;
		right: -50px;
		top: -150px;
	}
		
	#ProductsIntro.services.hidePhone {
		display: block!important;
	}
	
	#madesign {	clear: both; }
	
	.about i:before {display: none;}
		
	.products, .services {
		margin-bottom: 40px;
	}
		
	/* FILTER BUTTONS  ///// */
	
	a#filterServices, a#filterProducts {background: rgba(255,255,255,0.9);}
	a#filterServices {border-radius: 100% 0 0 0; }
	a#filterProducts {border-radius: 0 100% 0 0; }
	.servicesButton,
	.productsButton {
		width: 18Vw;
		height: 12Vh;
		font-size: 10pt;
		line-height: 9pt;
	}
	.productsButton {
		padding-top: 3px;
	}
	.servicesButton {
		padding-top: 3px;
		line-height: 9pt;
	}
	
	
	/* Font Styling //////////////// */ 
	
	.about p,
	.services p,
	.products p	{font-size: 10pt; line-height: 14pt; }
	
	p strong {
		font-size: 10pt; line-height: 16pt; 
		display: inline-block;
		width: unset;
	}
	
	
	
	
	/* Visual LOGOTYPE //// */
	
	h2 .logoWrapper {
		display: none;
	}


	/* Main PHOTOS ///// */
	events .services-photo.col-md-6, .services-photo.col-md-6, .products-photo.col-md-6 {
		height: 390px;
	}



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

	#ProductsMenu li.screen {display: none;}
		#ProductsMenu li.mobile {display: block;}
		#ProductsMenu li.mobile i {display: block;}
		#ProductsMenu li.mobile .menuTitle {display: none;}
		#ProductsMenu li.mobile span {display: none;}
		#ProductsMenu li.tablet {display: none;}
		#ProductsMenu li.tablet i {display: none;}
	
		#ProductsMenu li.mobile a span.menuTitle {color: lightsteelblue; padding: 0}
	
	
	#ServicesMenu ul li, #ProductsMenu ul li {
		float: right;
	}
	#ServicesMenu ul li {
		padding-right: 20px;
	}
	#ProductsMenu ul li {
		padding-right: 30px;
	}

	


	/* Stickly LOGO //// */
	div.stickyLogo.logo a#ahrefLogo {
		height: 18Vh;
		width: 18Vh;
		position: absolute;
		top: 15px;
		left: 15px;
	}


	/* TEXT blocks //// */
	.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	{
		padding: 0px 90px 20px 90px;
	}

	.products.Left p,
	.services.Left p {
		text-align: left;
		float: left;
	}
	.products.Right p,
	.services.Right p {
		text-align: left;
	}

	
	/* Welcome Page /// */
	
	#Welcome.container {
		min-width: 250px;
		width: 25Vh;
		min-height: 250px;
		height: 25Vh;
		float: right;

		position: absolute;
		bottom: -20px;
		right: 30Vw;
		.right: unset;
		left: unset!important;
		margin: 15Vh auto;
		.overflow: hidden;
	}
	.container {
		padding-right: 8px; 
		padding-left: 8px;
	}
	.typed .logoWrapper {
		color: white;
		letter-spacing: 0;
		font-size: 24px;
		.width: 126px; /* ratio x 5.25 */
		width: calc(16 * 5.25)px; /*126px; /* ratio x 5.25 */
	}

	header .logo {
		margin-top: 0;
		margin-bottom: 0;
	}
	header .row {
		margin-top: 0;
		.background: red;
		.padding-top: 50px;
	}
	header p {
		width: 100%;
		padding-bottom: 0;
	}
	p.animated.fadeInUp {
		font-size: 9pt;
		color: rgba(236,240,241,0.9);
		word-spacing: 1px;
		line-height: 12pt;
		font-weight: 400;
	
	}
	
	header .social-icons ul {
		position: relative;
		top: 0;
		width: auto;
		float: left;
		.background: red;
		padding: 0;
	}
	header .social-icons li {
		float: left;
		margin: 0 10px 0 0;
	}
	p.animated.fadeInUp {
		position: relative;
		float: left;
		top: 24Vh;
		.background: yellow;
	}

	div.drumcare.logo {
		float: left;
		position: relative;
		top: 90px;
		top: 8Vh;
	}
	header .logo img,
	header div.logo img {
		top: 0px;
		display: block;
		max-width: 50Vw;
	}
	header .mouse-wrapper {
		bottom: -30Vh;
	}
	.container a.addTel,
	#Welcome.container a.addTel {
		padding: 0 10px 0 0;
		font-size: 18pt;
		font-size: 6Vh;
		position: absolute;
		bottom: 0;
		right: 0;
	}



	/* h2 Text on pages //// */
	div.intro-text h2 {
		padding-bottom: 0px;
	}
	/* my Icon on page /// */
	div#myIcon i {
		display: none;
	}




	/* UL Listing Box size /// */
	.services .intro-text ul li,
	.products .intro-text ul li{
		font-size: 10pt;
		line-height: 16pt;
		padding: 5px 0 5px 0;
		clear: left;

	}

	.innovative-photo .title-section, .twitter ul, .services ul, .products ul, .Right.products .intro-text ul, .Right.services .intro-text ul, .Left.products .intro-text ul, .Left.services .intro-text ul {
	    background: rgba(44,60,171,0.8);
		width: 100%!important;
		max-width: 100%;
		height: auto;
		.max-height: 320px;
		padding: 20px 35px;
		border-radius: 1Vw;
		box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
		border: 1pt white solid;
	}
	
	/* disposal UL List /// */
	.Soluti ul i, 
	.products .intro-text .Soluti ul i {
	   margin-bottom: 20px;
	}

	/* Tel No on botton of Products/ Service Main page /// */
	.services a.addTel,
	.products a.addTel,
	.about a.addTel.showPhone, 
	.Left a.addTel.showPhone,
	.Right a.addTel.showPhone	
	{
		display: block;
		position: relative;
		bottom: -28px;

		margin: 30px 0 0 0;
		left: unset!important;
		right: 0;
		float: right;
		font-size: 4.5Vw;
	}
	
	
		
	.contact-photo,
	#Subscribe {display: none; }
	
	.contact {
		height: auto;
		padding: 60px 0 30px;
	}
	/* Google Zoom in Out ///////// */
	
	#google-container {
		height: 300px;
	}
	#GoogleMap:before {
		content: "Our Location";
		Color: white;
		font-size: 14pt;
		padding-left: 20px;
	}
	.google-map p {
		font-size: 10pt; 
		line-height: 12pt;
		color: white
	}
	
	#zoom-in, #zoom-out {
		.height: 32px;
		.width: 32px;
		.margin-bottom: 10px;
		left: 0;
		top: 60px;
	}
	
	
	
	/* LOCATION */
	
	.contact-info {
		margin-top: 10px; 
		width: 100%;
	}

	.contact-Text.Right .title-section p {display: none}
	
	.contact-Text {
	    padding: 10px 70px 20px 0px;
	    height: auto;
	}

	.contact-Text.col-md-6 .title-section i, 
	.contact-Text.col-md-6 .title-section h2, 
	.contact-info {
		display: block;
		.background: red;
	}
		.contact-Text.col-md-6 .title-section i {
			display: none;
		}
		.contact-Text.col-md-6 .title-section h2,
		.contact-Text.col-md-6 .title-section p	{
			display: none;
		}
		
	.contact-info i {
	    padding: 60px 0 0 0;
	}
	.contact-Text.contact-info {
		margin-top: 0px;
	}
	
	.col-md-4 {
		position: relative;
		min-height: 1px;
		padding-right: 5px;
		padding-left: 55px;
		margin-bottom: 20px;
	}
	.col-md-4.phoneDetails {
		width: auto;
		float: right;
	}
	.col-md-4.emailDetails {
		width: auto;
		float: right;
	}
	.col-md-4.addressDetails {
		width: 100%;
		float: right;
	}
	
	
	
	

	
}





/* SMARTPHONES //////////////      PORTRAIT   ||  OK works */
@media screen 
  and (max-width: 375px) 
  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;
	}

	/* mini tweaks /// */
	
	cornerImg.cornerImg,
	.glyphicon.fa.fa-snowflake-o {
		display: none!important;
	}
	#page-loader {
		.display: none!important;
	}
	
	/* reduce width to avoid overflow on the page IMPORTANT */
	.team .col-md-6 {
		width: 100%;
	}		
	.team img {
		width: 100%!important;
		float: right;
		margin-left: 0;
	}
	
	/* welcome page */
	div#SEOvisible {
		display: none;
		position: absolute!important;
		z-index: 1000;
	}
	
	header .row {
		background: slategrey;
		width: 25Vw;
		height: 100Vh;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 101;
	}
	/* Logo*/
	header div.logo img {
		position: absolute;
		width: 100%;
		top: 80Vh;
		left: -2Vw;
	}
	header div.logo, 
	header div.logo img {
		max-width: 10Vw;
	}
	
	/* Sticky LOGO */
	div.stickyLogo.Logo {

		top: 0;
		left: 20px;

	}
	div.stickyLogo.logo a.ahrefLogo {
		height: 10Vh;
		width: 10Vh;
		position: absolute;
		top: 10px;
		left: 10px;
		padding: 0;
		margin: unset!important;
	}



	/* company name */
	header .typed h1 {
		visibility: hidden;
		font-size: 15pt;
		color: white;
		text-transform: unset;
		font-weight: normal;
		letter-spacing: 2px;
		 transform: rotate(-90deg);
	}

	.typed.animated.fadeInUp {
		.position: absolute;
		top: 60Vh;
		left: 0px;
		width: 40Vh;
	}
	/* slogan */
	p.animated.fadeInUp {
		font-size: 12pt;
		line-height: 14pt;
		font-weight: 400;
		position: relative;
		float: left;
		top: 57Vh;
		left: -14Vw;
	}
	header p {
		font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		font-size: 23pt;
		color: white;
		word-spacing: 1px;
		line-height: 45pt;
		font-weight: normal;
		position: relative;
		top: 30Vh;
		left: 0; */
	}
	/* social media ICONS */
	header .social-icons li i.fa {
		font-size: 12pt;
	}
	header .social-icons li i.fa {
		width: 35px;
		height: 35px;
		font-size: 12pt;
		outline: none;
		line-height: 35px;
		border: 1px solid #FFFFFF;
	}
	/* social media buttons */
	.dcssb-content .dcssb-btn .dcssb-facebook  {
		display: none!important;
	}
	.dcssb-content {
		display: none!important;
		position: relative;
		width: 250px;
		width: 55vw;
		margin: 0 auto;
		right: 0;
		background-color: orange;
	}
	/* scroll down */
	header .mouse-wrapper {
		display: block;
		position: absolute;
		bottom: -50Vh;
		left: -80Vw;
		z-index: 10;
	}
	header .mouse span {
		position: absolute;
		left: -15px;
		bottom: 40px;
		font-weight: 500;
		letter-spacing: 1px;
		font-size: 12pt;
	}
	/* Tel number */
	.container a.addTel,
	#Welcome.container a.addTel {
		padding: 0 10px 0 0;
		font-size: 7Vw;
		position: absolute;
		bottom: 8px;
		right: 5px;
	}
	

		

	/* Image Titles */
	.twitter .title-section h2, 
	.services-photo .title-section h2 {
		font-size: 8Vw;
		text-shadow: 2px 2px 5px rgba(0,0,100,0.3);
	}
	#SocialMediaShow.services-photo .title-section h2 {
		font-size: 5Vw;
		bottom: 3Vh;
	}
	/* Quotes */
	.Left .quote.small, .Left .quote.Large, .Left .quote.Medium {
		text-align: left;
		padding-left: 15%; 
	}
	.Right .quote.small, .Right .quote.Large, .Right .quote.Medium {
		text-align: left;
		padding-right: 15%;
	}
	/* Maximising... */
	.about .intro-text ul {
		margin-top: 10px;
		padding: 0 0 0 20px;
	}
	.about .intro-text ul li {
		font-size: 11pt;
		line-height: 13pt;
		padding: 5px 0 5px 0;
	}

	/* listing */
	.intro-text ul, .services ul, .products ul, .Right.products .intro-text ul, .Right.services .intro-text ul {
		height: auto!important;
		width: 45Vh!important;
	}

	/* See More */
	a.SeeMore {
		display: block;
		font-size: 10pt;
		line-height: 19px;
		margin-top: 20px;
		clear: both;
	}
	.SeeMore {
		width: 120px;
	}

	/* telephone number at foot */
	.services a.addTel, .products a.addTel, .about a.addTel.showPhone, .Left a.addTel.showPhone, .Right a.addTel.showPhone {
		clear: both;
	}
	.contact-Text a.addTel.showPhone {
		display: none;
	}
	/* page depth */
	.contact-Text.Right-lh, .services.col-md-6.Right, .products.col-md-6.Right {
		padding: 0px 30px 20px 30px;
		text-align: right;
	}
	.about.col-md-6, .contact-Text.Left-rh, .services.col-md-6.Left, .products.col-md-6.left {
		padding: 0px 30px 20px 30px;
	}

	/* Google MAP */
	#GoogleMap.google-map {
		background: teal!important;
	}
	.contact-Text {
		padding: 100px 70px 150px 70px;
		height: 350px!important;
		z-index: 99;
		text-align: center;
		position: relative;
		overflow: hidden;
		background: white;
		color: black;
	}
	.col-md-4 {
		position: relative;
		min-height: 1px;
		padding-right: 0;
		padding-left: 0; 
		margin-bottom: 0px;
	}

	/* contact Address page */
	.contact h2 div {
		font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		color: white;
		font-size: 16pt;
	}
	.contact-Text.Left i, .contact-Text.Left .title-section h2, .contact-Text.Left h2:after, .contact-Text.Left .title-section p, .contact-Text.Left address, .contact-Text.Left address i, .contact-Text.Left .email, .contact-Text.Left .email i, .contact-Text.Left .phone, .contact-Text.Left .phone i {
	    content: " ";
		text-align: center;
	}
	
	.contact-Text.Left .phoneDetails,
	.contact-Text.Left .emailDetails {
		margin: 0 auto;
	}
	
	.contact {
		padding: 60px 20px 0px 20px;
	}
	#Contact.contact.col-md-6 {
		background: teal!important;
		color: white;
	}
	.contact input[type='text'], .contact input[type='email'], .contact textarea {
		background: rgba(255,255,255,0.6);
		border: 1px solid silver;
		border-radius: 0 8px 8px 8px;
	}
	::placeholder {
		color: teal;
		opacity: 1; /* Firefox */
	}
	.contact a.addTel {
		display: none;
	}

	footer {
		padding: 10px;
	}


	/* VIP - amazing disappearing PRODUCTS SEQ = padding: 0 - watch out for this!!! */
	productsseq.products-photo {
		padding: 160px 70px 150px 70px;
	} 
	.products-photo.Left .title-section h2 {
		font-size: 20pt;
		float: left;
		text-align: left;
		padding-right: unset;
		padding-top: unset;
		margin: unset;
		position: relative;
		left: -40px;
		top: 130px;
	}
	
	#ProductsIntro.services.hidePhone {
		display: block!important;
	}
	
	#ProductsIntro.services ul {
		height: auto!important;
		max-height: unset;
	}
	
	#madesign {	clear: both; }

	.about i:before {display: none;}
	
	div.intro-text { width: 100%}
	.about.col-md-6, .contact-Text.Left-rh, .services.col-md-6.Left, .products.col-md-6.left {
		padding: 0px 30px 84px 30px;
	}


	/* MENU Buttons ////// */
	/* tweak - to trim tthe menus to be in sync :: /// */
	#ServicesMenu li.screen {display: none;}
		#ServicesMenu li.mobile {display: block;}
		#ServicesMenu li.mobile i {display: block;}
		#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;}
		
		
		div.menu li a {color: lightsteelblue; padding: 0}
		div.menu li a:hover{color:white!important;}
		div.menu li a span:hover{color:white!important;}
	

	#ProductsMenu li.screen {display: none;}
		#ProductsMenu li.mobile {display: block;}
		#ProductsMenu li.mobile i {display: block;}
		#ProductsMenu li.mobile .menuTitle {display: none;}
		#ProductsMenu li.mobile span {display: none;}
		#ProductsMenu li.tablet {display: none;}
		#ProductsMenu li.tablet i {display: none;}
	
		#ProductsMenu li.mobile a span.menuTitle {color: lightsteelblue; padding: 0}
		

	#ServicesMenu ul li, #ProductsMenu ul li {
		float: right;
	}
	#ServicesMenu ul li {
		padding-right: 9px;
	}
	#ProductsMenu ul li {
		padding-right: 30px;
	}



	/* FILTER BUTTONS  ///// */
	
	.filterButtons.footer {display: none}
	
	.servicesButton,
	.productsButton {
		width: 25Vw;
		height: 6Vh;
		font-size: 10pt;
		line-height: 10pt;
	}
	.productsButton {
		padding:2px 15px 0 5px;
	}
	.servicesButton {
		padding: 2px 5px 0 0;
	}
	
	#filterProducts,
	#filterServices {
		float: unset; /*right; */
		position: unset; /*fixed; */
		right: unset; /*0; */
		bottom: 0;
	}
	div.filterButtons.showScreen {
		position: fixed;
		bottom: -7Vh;
		left: 22Vw;  
		z-index: 10000000000!important;
		background: rgba(255,255,255,0.8);
		border-radius: 50% 50% 0 0 ;
		height: 14Vh;
	}
	
	.servicesButton,
	.productsButton {
		width: 28Vw;
		height: 7Vh;
		font-size: 10pt;
		line-height: 10pt;
	}
	#ProductsButton {
		float: left;
		position: relative;
		left: 0;
	}
	.productsButton {
		background: green;
		padding: 8px 10px 0 12px;
		border-radius: 100% 0 0 0;
		Text-align: right;
	}
	#ServicesButton {
		float: right;
		position: relative;
		left: 0;
	}
	.servicesButton {
		background: red;
		padding: 8px 55px 0 10px;
		border-radius: 0 100% 0 0;
		Text-align: left;
	}
	.contact {
		.padding: 120px 20px 0px 20px;
	}
	footer {
		.padding: 20px;
		.padding-bottom: 15Vw;  /*/ drop the bottom down by same size as filterButtons */
	}
	
	/* Font Styling //////////////// */ 
	
	.about p,
	.services p,
	.products p	{font-size: 10pt; line-height: 14pt; }
	
	p strong {font-size: 10pt; line-height: 16pt; }
	
	.products.Left p, .services.Left p {
		text-align: left;
	}
		
	/* Welcome Page /// */
	
	div.comment{
		padding: 5Vh;
	}
	#Welcome.container {
		.min-width: 300px;
		.width: 28Vh;
		.min-height: 300px;
		.height: 28Vh;
		float: unset;
		right: unset;
		left: unset;
		.position: relative;
		bottom: 0;
		.margin: 45Vh auto;
		.overflow: hidden;
	}
	header .logo {
		margin-top: 0;
		margin-bottom: 0;
	}
	header .row {
		margin-top: 0;
		.background: red;
		.padding-top: 50px;
	}
	header p {
		width: 100%;
		padding-bottom: 0;
	}
	
	header .social-icons {
		position: absolute;
		.margin-top: 0;
		top: 30px;
		left: -35px;
	}

	header .social-icons ul {
		position: relative;
		top: 0;
		width: auto;
		float: left;
		.background: red;
		padding: 0;
	}
	header .social-icons li {
		float: left;
		margin: 0 10px 0 0;
	}
	p.animated.fadeInUp {
		.font-size: 9pt;
		.line-height: 12pt;
		.font-weight: 400;
		.position: relative;
		.float: left;
		.top: 100px;
		.top: 20Vh;
		.background: yellow;
	}

	div.drumcare.logo {
		.float: left;
		.position: relative;
		.top: 90px;
		.top: 8Vh;
	}
	header div.logo img {
		.position: absolute;
		.width: 100%;
		.top: 10px;
	}
	header .logo img,
	header div.logo img {
		display: block;
		max-width: 60Vw;
	}




	/* PAGE  /// */
	
	/* title // */
	.services .intro-text, .about .intro-text {
		padding: 0 0 0 0; */
	}


	/* H3 on TDM page /// */
	.contact-Text.Right-lh, .services.col-md-6.Right, .products.col-md-6.Right {
		padding: 0px 30px 84px 30px;
		text-align: right;
	}


	/* h2 Text on pages //// */
	div.intro-text h2 {
		padding-bottom: 0px;
	}
	/* my Icon on page /// */
	div#myIcon i {
		display: none;
	}


	/* UL Listing Box size /// */
	.intro-text ul li,
	.services .intro-text ul li,
	.products .intro-text ul li{
		font-size: 10pt;
		line-height: 14pt;
		padding: 5px 0 5px 0;
		clear: left;
	}
	.intro-text ul li {
		padding: 3px 0 3px 0;
		clear: left;
	}
	.intro-text.Licens ul li {
		margin-bottom: 5px;
	}
	.Right.services .intro-text ul,
	.intro-text.Products ul {
	    padding: 15px 15px 0px 35px;
	}
	.Right.services .intro-text ul li {
		font-size: 10pt;
		line-height: 11pt;
		padding: 2px 0 2px 0;
		clear: left;
	}
		
	.intro-text ul,
	.services ul, 
	.products ul,
	.Right.products .intro-text ul, 
	.Right.services .intro-text ul {
		.right: 2Vw;
	   . bottom: 0Vw;
		height: 45Vh!important;
		height: auto!important;
		width: 45Vh!important;
	}
	.Right.products .intro-text ul, .Right.services .intro-text ul {
		float: right;
	}
	/* disposal UL List /// */
	.Soluti ul i, 
	.products .intro-text .Soluti ul i {
	   margin-bottom: 20px;
	}

	/* Tel No on botton of Products/ Service Main page /// */
	.services a.addTel,
	.products a.addTel,
	.about a.addTel.showPhone, 
	.Left a.addTel.showPhone,
	.Right a.addTel.showPhone	{
		display: block;
		float: right;
		left: unset!important;
		right: 30px;
	}
	
	.contact-photo,
	#Subscribe {display: none; }
	
	.contact {
		.height: auto;
		.padding: 60px 30px 30px 30px;
	}
	
	/* Google Zoom in Out ///////// */
	
	.google-map p {
		font-size: 10pt; 
		line-height: 12pt;
		color: white
	}
	
	#zoom-in, #zoom-out {
		.height: 32px;
		.width: 32px;
		.margin-bottom: 10px;
		left: 0;
	}
	
	/* LOCATION */
	.contact-Text.Right .title-section p {display: none}
	
	.contact-Text {
	    padding: 10px 30px 20px 30px;
	    height: auto;
	}

	.contact-Text.col-md-6 .title-section i, 
	.contact-Text.col-md-6 .title-section h2, 
	.contact-info {
		display: block;
		.background: red;
	}
		.contact-Text.col-md-6 .title-section i {
			display: none;
		}
		.contact-Text.col-md-6 .title-section h2,
		.contact-Text.col-md-6 .title-section p	{
			display: none;
		}
		
	.contact-info i {
	    padding: 60px 0 0 0;
	}
	.contact-Text.contact-info {
		margin-top: 0px;
	}
	
	.col-md-4 {
		position: relative;
		min-height: 1px;
		.padding-right: 5px;
		.padding-left: 55px;
		margin-bottom: 20px;
	}
	.col-md-4.phoneDetails {
		width: 50%;
		float: right;
	}
	.col-md-4.emailDetails {
		width: 50%;
		float: right;
	}
	.col-md-4.addressDetails {
		width: 100%;
		float: right;
	}
	
	
	/* E-Mail US //////////// */
	
	.col-md-10 {
		width: unset;
		padding: 0 0;
	}
		
}





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

	
	/* Hidden SHOW MENUS //// */
	
	.showPhone {display: block;} 
	.hidePhone {display: none;}
	
	
	/* MENU Buttons ////// */
	/* tweak - to trim tthe menus to be in sync :: /// */
	#ServicesMenu li.screen {display: none;}
		#ServicesMenu li.mobile {display: none;}
		#ServicesMenu li.mobile i {display: none;}
		#ServicesMenu li.tablet {display: block;}
		#ServicesMenu li.tablet i {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: none;}
		#ProductsMenu li.mobile {display: block;}
		#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}
		


	/* mini tweaks /// */
	.intro-text h2 {
		padding-bottom: 0px;
	}

	
	#madesign {clear: both;}
	.about i:before {display: none;}
	
	
	/* FILTER BUTTONS  ///// */
		
	.filterButtons.footer {display: none}
	
	.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: 35Vw;  
		z-index: 10000000000!important;
	}
	

	#filterProducts, 
	#filterServices {
		background: rgba(255,255,245,0.9);
		position: relative;
		float: unset;
		bottom: unset;
		right: unset;
		top: unset;
	}
	#filterServices {
		float: left;
		border-radius: 100% 0 0 0;
	}
	#filterProducts {
		float: left;
		border-radius: 0 100% 0 0;
	}
	
	.servicesButton,
	.productsButton {
		width: 15Vw;
		height: 8Vh;
		font-size: 11pt;
		line-height: 12pt;
	}
	#ProductsButton {
		float: left;
		position: relative;
		left: 0;
		top: 0;
	}
	.productsButton {
		padding: 0 15px 0 12px;
		background: red;
		border-radius: 0 100% 0 0;
		text-align: left;
	}
	
	#ServicesButton {
		position: relative;
		left: 0;
		top: 0;
	}
	.servicesButton {
		padding: 0 15px 0 55px;
		background: green;
		border-radius: 100% 0 0 0;
		text-align: right;
	}
	footer {
		padding: 20px;
		padding-bottom: 8Vw;  /*/ drop the bottom down by same size as filterButtons */
	}


		
	/* Welcome Page /// */
	
	p.animated.fadeInUp {
		width: 100%;
		position: absolute;
		top: 26Vh;
	}
	
	
	/* Stickly LOGO //// */
	div.stickyLogo {
		position: -webkit-sticky;
		position: sticky;
		top: 65px;
		z-index: 1000;
	}
	div.stickyLogo.logo a#ahrefLogo {
		height: 15Vh;
		width: 15Vh;
		position: absolute;
		top: -55px;
		left: 15px;
	}
	
	/* Text / Page ////////////////////////////////////////// */
	
	
	/* Visual LOGO /// */
	
	div.drumcare.logo {
		float: left;
		position: relative;
		top: 0px;
		.top: 10Vh;
		left: -60px;
	}
	
	/* Visual Logo /// */
	.Right .intro-text h2 .logoWrapper {
		position: relative;
		right: unset;
		float: LEFT; 
	}
	
	.services h2, .products h2,
	.about h2, .innovative h2, .section h2, .contact-Text .title-section h2, .team-photo .title-section h2, .team h2 {
		.font-family: 'Oranienbaum', serif;
		font-family: 'Oswald', sans-serif;
		font-size: 16pt;
		font-style: normal;
	}

	 h3, .h3,
	.services h3,
	.products h3 {
		margin-top: 20px;
		margin-bottom: 10px;
		text-align: right;
		clear: both;
	}

	/* TEXT ////////// */
	.intro-text {
		width: 100%;
		padding: 0!important;
	}

	.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 	{
		padding: 0px 70px 84px 120px;
		min-height: 500px;
	}
	
	p strong,
	.about p, 
	.products p, .services p,
	.services.Left p, .products.Left p,
	.Left.products p .Left.services p,
	.Right.products p .Right.services p	{
		display: inline-block;
		width: 400px;
		text-align: left;
		float: left;
		clear: both;
	}
	
	.about, .about.col-md-6, .services.col-md-6.Left, .products.col-md-6.Left, .services.Left p, .products.Left p {
		text-align: left;
	}
	
	
	/* UL Listing Box size /// */
	.services .intro-text ul li,
	.products .intro-text ul li{
		font-size: 10pt;
		line-height: 16pt;
		padding: 5px 0 5px 0;
		clear: left;

	}

	.innovative-photo .title-section, .services ul, .products ul, .Right.products .intro-text ul, .Right.services .intro-text ul, .Left.products .intro-text ul, .Left.services .intro-text ul {
	    background: rgba(44,60,171,0.8);
		width: 100%!important;
		max-width: 100%;
		height: auto;
		.max-height: 320px;
		padding: 20px 35px;
		border-radius: 1Vw;
		box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
		border: 1pt white solid;
	}
	
	/* twitter BLOCK /// */
	.twitter ul {
		background: rgba(44,60,171,0.8);
		width: 500px!important;
		/* max-width: 100%; */
		height: 500px!important;
		border-radius: 1Vw;
		box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
		border: 1pt white solid;
	}
	
	
	/* disposal UL List /// */
	.Soluti ul i, 
	.products .intro-text .Soluti ul i {
	   margin-bottom: 20px;
	}
		
	/* Tel No on botton of Products/ Service Main page /// */
	.services a.addTel,
	.products a.addTel,
	.about a.addTel.showPhone, 
	.Left a.addTel.showPhone,
	.Right a.addTel.showPhone	{
		display: block;
		float: right;
		left: unset!important;
		right: 70px;
	}
	
	.contact-photo,
	#Subscribe {display: none; }
	
	.contact {
		.height: auto;
		.padding: 60px 30px 30px 30px;
	}
	
	/* Google Zoom in Out ///////// */
	
	#GoogleMap:before {
		content: "Our Location";
		Color: white;
		font-size: 14pt;
		padding-left: 20px;
	}
	
	.google-map p {
		font-size: 10pt; 
		line-height: 12pt;
		color: white
	}
	
	#zoom-in, #zoom-out {
		.height: 32px;
		.width: 32px;
		.margin-bottom: 10px;
		left: 0;
	}
	
	/* LOCATION */
	.contact-Text.Right .title-section p {display: none}
	
	.contact-Text {
	    padding: 10px 30px 20px 30px;
	    height: auto;
		.min-height: 550px;
	}

	/* IMPORTANT to avoid 500% spilt of screen /// */
	.contact-Text.col-md-6 {
		width: 100%;
	}
	
	.contact-info {
		margin-top: 30px; 
		width: 100%;
	}
	
	.contact-Text.col-md-6 .title-section i, 
	.contact-Text.col-md-6 .title-section h2, 
	.contact-info {
		display: block;
		.background: red;
	}
		.contact-Text.col-md-6 .title-section i {
			display: none;
		}
		.contact-Text.col-md-6 .title-section h2,
		.contact-Text.col-md-6 .title-section p	{
			display: none;
		}
		
	.contact-info i {
	    padding: 60px 0 0 0;
	}
	.contact-Text.contact-info {
		margin-top: 0px;
	}
	
	.col-md-4 {
		position: relative;
		min-height: 1px;
		padding-right: 5px;
		padding-left: 55px;
		margin-bottom: 20px;
	}
	.col-md-4.phoneDetails {
		width: auto;
		float: right;
	}
	.col-md-4.emailDetails {
		width: auto;
		float: right;
	}
	.col-md-4.addressDetails {
		width: 100%;
		width: auto;
		float: right;
	}
	
	
	/* E-Mail US //////////// */
	
	.col-md-10 {
		width: 100%;
		padding: 0 20Vw;
	}


	
	
}





/* 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: block;} 
		.hidePhone {display: none;}
	
	/* Set PAGE SIZE 768x1024px /// */
	
	.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 	{
		min-height: 524px;
	}
	.services-photo,
	.products-photo
	{
		height: 500px;
	}
	
		
	/* mini tweaks /// */
	
	
	#madesign {clear: both; }

	.about i:before {display: none;}
	

	/* MENU Buttons ////// */
	/* tweak - to trim tthe menus to be in sync :: /// */
	#ServicesMenu li.screen {display: none;}
		#ServicesMenu li.mobile {display: none;}
		#ServicesMenu li.mobile i {display: none;}
		#ServicesMenu li.tablet {display: block;}
		#ServicesMenu li.tablet i {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: none;}
		#ProductsMenu li.mobile {display: block;}
		#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}
		



	/* 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: 35Vw;  
		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 */
	}
	
	
	
	
	/* Welcome Page /// */
	
	div.comment{
		padding: 5Vh;
	}
	#Welcome.container {
		min-width: 300px;
		width: 28Vh;
		min-height: 300px;
		height: 28Vh;
		float: unset;
		right: unset;
		left: unset;
		position: relative;
		bottom: 0;
		margin: 25Vh auto;
		.overflow: hidden;
	}
	header .logo {
		margin-top: 0;
		margin-bottom: 0;
	}
	header .row {
		margin-top: 0;
		.background: red;
		.padding-top: 50px;
	}
	header p {
		width: 100%;
		padding-bottom: 0;
	}
	
	header .social-icons {
		position: absolute;
		margin-top: 0;
		top: -70px;
		left: -15px;
	}

	header .social-icons ul {
		position: relative;
		top: 0;
		width: auto;
		float: left;
		.background: red;
		padding: 0;
	}
	header .social-icons li {
		float: left;
		margin: 0 10px 0 0;
	}
	p.animated.fadeInUp {
		font-size: 9pt;
		line-height: 12pt;
		font-weight: 400;
		position: relative;
		float: left;
		top: 140px;
		.top: 20Vh;
		.background: yellow;
	}

	header div.logo img {
		position: absolute;
		width: 100%;
		top: 10px;
		right: -20px;
	}
	header .logo img,
	header div.logo img {
		display: block;
		max-width: 60Vw;
	}
	header .mouse-wrapper {
		bottom: -30Vh;
	}
	.container a.addTel,
	#Welcome.container a.addTel {
		padding: 0 10px 0 0;
		font-size: 3.8Vw;
		position: absolute;
		bottom: 0;
		right: 0;
	}


	/* Sticky MENU /// */
	div.menu, div.menu ul, 
	#ServicesMenu ul li, 
	#ProductsMenu ul li {
		letter-spacing: -0.8px;
	}
	/* Stickly LOGO //// */
	div.stickyLogo {
		position: -webkit-sticky;
		position: sticky;
		top: 65px;
		z-index: 1000;
	}
	div.stickyLogo.logo a#ahrefLogo {
		height: 9Vh;
		width: 9Vh;
		position: absolute;
		top: -55px;
		left: 15px;
	}
	
	

	/* Text / Page /// */
	
	/* Visual LOGO /// */
	div.drumcare.logo {
		float: left;
		position: relative;
		top: 90px;
		top: 0;
		left: -60px;
	}
	.Right .intro-text h2 .logoWrapper {
		position: relative;
		right: UNSET;
		float: LEFT; */
	}
	
	/* Products Page /// */
	/* hide visual log on Companys/ Products pages */
	
	#Products div.drumcare.logo { visibility: hidden;}
	.products-photo.Left .title-section h2 {
		float: right;
		text-align: right;
		padding-right: 40px;
		padding-top: 20px;
		margin: 0;
	}


	/* Service pages /// */
	.intro-text h2 {
		padding-bottom: 0;
	}

	.services h2, .products h2,
	.about h2, .innovative h2, .section h2, .contact-Text .title-section h2, .team-photo .title-section h2, .team h2 {
		.font-family: 'Oranienbaum', serif;
		font-family: 'Oswald', sans-serif;
		font-size: 16pt;
		font-style: normal;
	}

	 h3, .h3,
	.services h3,
	.products h3 {
		margin-top: 20px;
		margin-bottom: 40px;
		text-align: right;
		clear: both;
	}

	.intro-text {
		width: 100%;
		padding: 0!important;
	}

	.about.col-md-6 {
		padding: 100px 40px 84px 120px;
	}
	.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 	{
		padding: 0px 40px 84px 120px;
	}
	
	p strong,
	.about p, 
	.products p, .services p,
	.services.Left p, .products.Left p,
	.Left.products p .Left.services p,
	.Right.products p .Right.services p	{
		display: inline-block;
		width: 400px;
		text-align: left;
		float: left;
	}
	
	.about, .about.col-md-6, .services.col-md-6.Left, .products.col-md-6.Left, .services.Left p, .products.Left p {
		text-align: left;
	}

	
	/* Tel No on botton of Products/ Service Main page /// */
	.services a.addTel,
	.products a.addTel,
	.about a.addTel.showPhone, 
	.Left a.addTel.showPhone,
	.Right a.addTel.showPhone	{
		display: block;
		float: right;
		left: unset!important;
		right: 40px;
	}
	

	.contact-photo,
	#Subscribe {display: none; }
	
	.contact {
		.height: auto;
		.padding: 60px 30px 30px 30px;
	}
	
	/* Google Zoom in Out ///////// */
	
	#GoogleMap:before {
		content: "Our Location";
		Color: white;
		font-size: 14pt;
		padding-left: 20px;
	}
	
	.google-map p {
		font-size: 10pt; 
		line-height: 12pt;
		color: white
	}
	
	#zoom-in, #zoom-out {
		.height: 32px;
		.width: 32px;
		.margin-bottom: 10px;
		left: 0;
	}
	
	/* LOCATION */
	.contact-info {
		margin-top: 30px; 
		margin-left: 0;
		width: 100%;
	}
	
	.contact-Text.Right .title-section p {display: none}
	
	/* Contact Page size */
	.contact {
		height: 883px;  /* 1024 minus 137px from footer */
	}
	.contact-Text {
	    padding: 10px 30px 20px 30px;
	    height: auto;
		height: 424px;
	}

	.contact-Text.col-md-6 .title-section i, 
	.contact-Text.col-md-6 .title-section h2, 
	.contact-info {
		display: block;
		.background: red;
	}
		.contact-Text.col-md-6 .title-section i {
			display: none;
		}
		.contact-Text.col-md-6 .title-section h2,
		.contact-Text.col-md-6 .title-section p	{
			display: none;
		}
		
	.contact-info i {
	    padding: 60px 0 0 0;
	}
	.contact-Text.contact-info {
		margin-top: 0px;
	}
	
	.col-md-4 {
		position: relative;
		min-height: 1px;
		padding-right: 5px;
		padding-left: 55px;
		margin-bottom: 20px;
	}
	.col-md-4.phoneDetails {
		width: auto;
		float: right;
	}
	.col-md-4.emailDetails {
		width: auto;
		float: right;
	}
	.col-md-4.addressDetails {
		width: 100%;
		float: right;
	}
	
	
	/* E-Mail US //////////// */
	
	.col-md-10 {
		width: unset;
		padding: 0 15Vw;
	}

	
}






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

/* 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 (height: 819px)
/*  and (min-height: 768px)
  and (max-height: 800px)
  and (min-width: 1370px) 
  and (max-width: 1388px) */
   and (width: 1024px) 

{
	
	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 	{
		.min-height: 600px;
		height: 600px;
		width: 50%; /*!important; */
	}
	.services-photo,
	.products-photo
	{
		height: 600px;
		width: 50%!important;
	}
	
		
	/* 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;
	}
	

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



/* My ACER R7 Screen at 125% for clarity /// 1536 x 864px /////// */

@media screen 
  and (min-width: 1486px) /* OK works  on 1366x768*/
  /* and (max-width: 1536px) */
  and (max-width: 1536px) 
  and (min-height: 814px) 
  and (max-height: 864px) /* OK works  on 1366x768*/
 /* and (height: 824px) /* OK works  on 1366x768*/
{

	/* SCREEN SIZE CHECKER //////////////////// */
	div#screenInfo:before { 
		content: "My ACER R7 Screen at 125% :: w1536 x h864px";
		background: ORANGERED;
	}
	
	
	.about .intro-text ul {
		margin-top: unset;
	}
	
	

	
}