/* created  17 0426 /////////////////////////////////////////////////////// SCREEN Sizing/ Display checker   */


	/*/	UPDATED ::	16 1012 													*/
	/*/ 	UPDATED ::	16 1014 	- Standardised names and Screen CSS styles 					*/
	/*/	UPDATED ::	16 1027 	- all CSS styles and functionality for Screens/ Tablets and Phones 	*/
	
	/*/	UPDATED ::	17 0722 	- UNSET to remove overflow styling 	*/



/* SCREEN SIZE - Hidden display //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* MA DESIGN Copyright /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* tweak to remove overflow styling */

p strong {
	width: unset;
    text-align: unset;
    float: unset;
    clear: unset;
}
	
div#screenInfo {
	display: none;
	.position: absolute;
	position: fixed;	/* Can set window to fixed or absolue */
	top: 0;
	left: 0;
	font-size: 2vh;
	text-align: center;
	align-items: baseline;
	justify-content: baseline;
	width: 60Vw;
	height: 60Vh;
	border: 2pt white solid;
	background: rgba(255,255,255,0.8);
	z-index: 10000;
	float: left;
	padding: 20px;
	margin: 10Vh 20Vw 0 20Vw;
		border-radius: 20px;
		box-shadow: 2Vw 2Vw 4Vw rgba(0,0,0,0.6);
		color: black;
}
div#screenSize {
		margin-top: 5Vh;
	}
div#screenInfo p {
	font-size: 2Vh;
	position: relative;
	float: clear;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	left: 0px;
}
div#screenInfo p a {	color: black;}
div#screenInfo a:hover {font-weight: bold; color: white; text-shadow: 1px 1px 1px rgba(0,0,0,1);}
	
div#screenInfo:before { 
	.position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	.top: 0;
	width: 65%;
	.height: 75%;
	text-align: center;
	font-size: 9pt;
	margin: 5% 5% 5% -3%;
	margin: auto;
	padding: 10%;
	border-radius: 10px;
	z-index: 10;
	border: 2pt white solid;
	box-shadow: 1Vw 1Vw 1.5Vw rgba(0,0,0,0.3);
}




/* FILTER Buttons - Products/ Services /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* MA DESIGN Copyright /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* On or off */
div#SEOvisible {
	display: none;
}

div#SEOvisible {
    position: fixed;
    bottom: 20px;
    left: 220px;
    width: 25px;
    height: 25px;
    float: left;
    z-index: 1000;
}

a#foo:hover {
	font-size: 6pt;
	text-align: center;
    border: 1pt solid orange;
    background: rgba(255,255,255,1);
    bottom: 4px;
    left: -4px;
    box-shadow: -4px 4px 8px rgba(0,0,0,0.4);
}

a#foo:active {
    border: 1pt red orange;
}

a#foo:before {
    border: 1pt red white;
}

a.SEO-ON-OFF, a#foo.SEO-OFF {
    font-size: 12pt;
	padding: 5px 5px 20px 5px;
    display: block;
    color: orange;
    background: rgba(255,255,255,0);
    z-index: 1000;
}
a.SEO-ON, a#foo.SEO-ON {
    display: none;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 10000;
}
a#foo {
    width: 25px;
    height: 25px;
    border: 1pt solid white;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}




footer .copyright i {
	color: white;
}
footer .copyright i:hover {
	color: orange;
}


/* screenDisplay On/ Off Button */
div.removeX,
div.removeX span,
div.removeX a,
div.removeX span a {
	font-size: 40px;
	height: 40px;
	width: 40px;
}
div.removeX:hover,
div.removeX span:hover {
	font-style: normal;
	color: red;
}
div.removeX {
	background: white;
	border-radius: 100%;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	position: absolute;
	top: -15px;
	right: -15px;
	border: 2px solid;
	text-align: center;
	vertical-align: middle;
	     -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
                transform: rotate(45deg);
}
div.removeX span {
	position: relative;
	top: -12px; 
}
	
footer a.date {
	color: #aa9055;
}
footer a.date:hover {
	color: white;
}

a {
    text-decoration: none;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}