html {overflow-y: scroll;}

* {  
   margin: 0;  
   padding: 0;  
   border: 0;
   }  
  
body {
	overflow: hidden;
	width: 100%;
	max-width: 100%; 
	background-color: black; 
	margin: 1px auto; 
}

/* header start */
header {
	max-width: 100%;
	overflow: auto;
	min-height: 100px;
	background-color: black;
	position: relative;
	text-align: left; 
	}
h1.milton-keynes-it {
	font-family: 'Play', sans-serif;
	font-size: 36px;  
	font-style: italic; 
	padding: 1% 0% 0% 40px;
	color: #d7ba2e; 
}
a.milton-keynes-it {
	text-decoration: none; 
	padding: 0 0 0 0;
}
img.milton-keynes-it-logo {
	width: 180px;
	padding: 0% 0% 0% 82px;
}
h2.milton-keynes-it {
	font-family: arial; 
	font-size: 18px;  
	font-style: italic; 
	padding: 0% 0% 1% 40px;
	color: lightgrey; 
	}
div.milton-keynes-it-logo {
	width: 40%;
	min-width: 350px;
	display: inline-block;
	float: left;
	padding: 10px 0% 12px 3%;
}
div.milton-keynes-it-header {
	max-width: 45%;
	display: inline-block;
	float: left;
	padding: 50px 10% 12px 2%;
	text-align: center;
}
h2.milton-keynes-it-header {
	max-width: 100%;
	font-family: arial; 
	font-size: 24px;  
	font-weight: 100;
	font-style: italic; 
	color: lightgrey; 
}/* header end */

/* nav start */
nav {
	max-width: 100%;
	min-height: 25px;
	background-color: #222; 
	background-image: none; 
	text-align: center; 
	line-height: 3.5em; 
	margin-bottom: 1px;}

#menu, #menu-button {
    display: none;
}
#menu {
    display: none;
}
img.menu-icon {
	vertical-align: middle;
}
p.menu-text {
	color: #d7ba2e; 
	font-family: arial; font-size: large; font-style: italic; font-weight: 600; 
	vertical-align: middle;
	padding-left: 1%;
	display:inline;
}
li.milton-keynes-it-menu {
	display: inline;
	padding: 0; 
	border-top: 1px solid black;
}

a.milton-keynes-it-menu:before {white-space: nowrap;transition:all 0.3s ease; background: #000000; color: #ddd; text-align: justify; padding: 3px 2% 3px 2%; font-family: 'Play', sans-serif; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*unvisited link*/
a.milton-keynes-it-menu:link {white-space: nowrap;background: #222; color: #ddd; text-align: justify; padding: 3px 2% 3px 2%; font-family: 'Play', sans-serif; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*unvisited link*/
a.milton-keynes-it-menu:visited {white-space: nowrap;background: #222; color: #ddd; font-family: 'Play', sans-serif; text-align: justify; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*visited link*/ 
a.milton-keynes-it-menu:hover {white-space: nowrap;transition:all 0.3s ease; border-radius: 3px; box-shadow: inset 0 0 0 1px #d7ba2e; background: #000000; color: #d7ba2e; font-family: 'Play', sans-serif; text-align: justify; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*hover over link*/ 
a.milton-keynes-it-menu:active {white-space: nowrap;background: #222; color: black; font-family: 'Play', sans-serif; text-align: justify; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*onclick link*/
a.milton-keynes-it-menu:focus {white-space: nowrap;background: #222; color: black; font-family: 'Play', sans-serif; text-align: justify; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; } /*when element is active*/
a.milton-keynes-it-menu-selected{white-space: nowrap;background: #222; color: #d7ba2e; text-align: justify; padding: 3px 2% 3px 2%; font-family: 'Play', sans-serif; font-size: large; font-style: italic; font-weight: normal; text-decoration: none; }

/* nav end */

/* section start */
section.milton-keynes-it {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-homepage.png"); 
	background-size: cover;
	}

section.e-commerce {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-ecommerce.png"); 
	background-size: cover;
	}
img.e-commerce {
	max-width: 65%;
}
	
section.milton-keynes-it-clients {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-clients.png"); 
	background-size: cover;
	}

section.milton-keynes-it-google-adwords {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-google_adwords.png"); 
	background-size: cover;
	}
img.google_partner {
	max-width: 95%;
	}
img.google_adwords {
	max-width: 95%;
	}

section.milton-keynes-it-domain-registration {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-domain-registration.png"); 
	background-size: cover;
	}

section.milton-keynes-it-seo {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-seo.png"); 
	background-size: cover;
	}

section.milton-keynes-it-web-design {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-web-design.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-web-hosting {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-web-hosting.png"); 
	background-size: cover;
	}

section.contact-milton-keynes-it {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-call-web-design.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-data-recovery {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-data-recovery.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-social-media {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-social-media.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-servicing-repairs {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-computer-servicing-repairs.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-leaflet-design-print {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-leaflet-design-printing.png"); 
	background-size: cover;
	}
	
section.milton-keynes-it-servicing-back-to-school {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: url("./images/milton-keynes-it-servicing-back-to-school.png"); 
	background-size: cover;
	}

section {
	max-width: 100%;
/*SHAUN DO I WANT TO MAKE THIS FIXED ? */	min-height: 150px;
	background-color: #222;
	background-image: none; 
	background-size: cover;
	}
	
/* Using Background Image instead - see html
 img.section {
	float: left;
	padding: 15px 0px 0px 25px;
	}
*/	

h1.section {
	max-width: 90%;
	font-family: arial;
	font-size: 1.9em;  
	font-style: italic; 
	text-shadow: 2px 2px black;
	padding: 4% 0% 0% 4%;
	color: #d7ba2e; 
	}

h2.section {
	max-width: 90%;
	font-family: 'Roboto', sans-serif;
	font-size: 1.6em;
	font-style: italic; 
	padding: 3% 0 3% 6%;
	text-shadow: 2px 2px black;
	color: white;
	}
/* nav end */

/* article start */
article.main {
 background-image: url('bg9.png');
	max-width: 100%;
	background-color: #eee; 
/*	background-image: URL("images/xback.png"); */
	color: #000099; 
	}
div.desktop {
	display: block;
}
div.mobile {
	display: none;
}
h2.main   {
	max-width: 90%;
	font-family: 'Roboto', sans-serif;
	font-size: 1.1em;  
	padding: 5% 0% 0% 3%;
	color: black; 
	background-color: #eee; 
	}	

div.clients {
	display: inline-block;
	padding: 4% 0 2% 0;
	margin: 0;
	width: 75%;
	text-align: center;
	background-color: transparent; 
/*	background-image: URL("images/xback.png"); */
}
img.web_design {
	display: inline;
	width: 20%;
	margin: 0;
	padding: 0;
	}
.left {
	text-align: left;
}
img.clients {
	width: 100%;
	margin: 0;
	padding: 0;
	}
.grow { transition: all .3s ease-in-out; border: 1px solid transparent;}
.grow:hover { transform: scale(1.05);}
    
div.website-screenshot {
	display: inline-block;
	max-width: 50%;
	padding: 0;
	margin: 0;
}
img.website-screenshot {
	width: 95%;
	padding: 2% 0% 2% 0%;
}
div.website-description {
	display: inline-block;
	width: 49%;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: top;
	padding-top: 5%;
}
p.website-name {
	display: block;
	font-family: 'Play', sans-serif;
	font-size: 1.1em;  
	text-decoration: underline;
	font-weight: bold;
	margin: 20px 1% 20px 1%;
	padding: 2% 1% 2% 1%;
	color: #d7ba2e;
}	
p.website-description {
	display: block;
	font-family: 'Play', sans-serif;
	font-size: 0.95em;  
	padding: 2% 1% 2% 1%;
	color: #222;
}	

/* Columns start */
div.cols4 {
	display: inline-block;
	width: 24%;
	text-align: center;
	vertical-align: top;
	margin-top: 0px;
	margin-bottom: 0px;
	}
/* cols4 adjutment only - for larger screens ----------- */
@media only screen and (max-width: 900px) {
	div.cols4 {
		width: 32%;
	}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width: 768px) {
	div.cols4 {
		width: 49%;
	}
	img.web_design {
	width: 40%;
	}
}
/* Mobiles (landscape) ----------- */
@media screen and (max-width: 640px) {
	div.cols4 {
		width: 90%;
	}
}

/* Columns end */

/* Modal start */
.container {
  display: inline-block;
  width: 49%;
}

.btn {
  background-color: transparent;
  padding: 0;
  text-decoration: none;
  }

.modal-window {
  position: fixed;
  background-color: #222;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  max-width: 90%;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: white;
  border: 2px solid lightgrey;
  color: #222;
}

.modal-close {
  line-height: 50px;
  font-size: 1.1em;
  position: absolute;
  right: 2%;
  text-align: center;
  top: 1%;
  text-decoration: none;
  color: #222;
}

.modal-close:hover {
  color: #d7ba2e;
}
a.shaun {color: red;}
/* Modal end */

p.milton-keynes-it {
	display: block;
	vertical-align: middle;
	background-color: white; 
/*	background-image: URL("images/xback.png"); */
	font-family: 'Play', sans-serif;
	font-size: 1.1em;  
	padding: 0.5% 3% 0.5% 3%;
	color: #000000;
	}

p.clients  {
	display: block;
	vertical-align: middle;
	background-color: transparent; 
/*	background-image: URL("images/xback.png"); */
	font-family: 'Play', sans-serif;
	font-size: 0.9em;  
	padding: 0%;
	color: #000000; 
	}

ul {
	text-align: center;
	list-style-type: none;
	}
ul.milton-keynes-it {
	text-align: center;
	margin: 2% auto;
	list-style-type: none;
	line-height: 1.7em;
	width: 85%;
	max-width: 750px;
	border: 1px solid lightgrey;
	vertical-align: top;
	text-align: center;
	font-style: normal; 
	font-size: 1.1em;  
	padding: 1% 2% 2% 2%;
	background-color: white;
}
ul.offer {
	background-color: #d7ba2e;
}
li.milton-keynes-it {
	font-family: 'Play', sans-serif;
	font-size: 1.05em;
	color: #222; 
	margin: 20px 1% 20px 1%;
	}
ul.seo-page {
	text-align: center;
	list-style-type: none;
	}
li.seo-page   {
	max-width: 80%;
	text-align: left;
	font-family: 'Play', sans-serif;
	font-style: normal; 
	font-size: 1.05em;
	padding: 1% 0% 2% 10%;
	color: #222; 
	}

li.email-title-contact-page {
	display: inline-block;
	font-family: 'Play', sans-serif;
	font-size: 1em;  
	font-style: italic; 
	margin: 10px 2% 10px 2%; 
	font-weight: bold;
	color: #000000; 
	}

ol {
	padding-left: 10%;
	list-style-type: decimal;
}

li.chillax-competition {
	padding: 1% 0% 1% 0%;
	}
	
div.center {
	text-align: center;
	}
	
img.milton-keynes-it-facebook {
	max-width: 30%;
	padding: 3% 5% 2% 5%;
	}

img.milton-keynes-it-pintrest{
	max-width: 30%;
	padding: 3% 5% 2% 5%;
	}
img.milton-keynes-it-twitter {
	max-width: 30%;
	padding: 3% 5% 2% 5%;
	}
img.milton-keynes-it-instagram {
	max-width: 30%;
	padding: 3% 5% 2% 5%;
	}
	
h3.milton-keynes-it  {
	text-align: center;
	font-family: 'Play', sans-serif;
	font-style: italic;
	font-size: 1.3em;
	padding: 3% 0% 2% 0%;
	color: #d7ba2e; 
}
	
table.web-design-pricing {
	text-align: center;
	max-width: 90%;
	border-collapse: collapse; 
	margin: 1% 0% 1% 0%;
	background: none;
}
	
td.web-design-pages {
	border-collapse: collapse; 
	padding: 1% 1% 1% 1%;
	background-color: #222;
	font-family: arial; 
	font-size: 1em; 
	font-weight: bold; 
	font-style: normal; 
	color: #d7ba2e; 
}
	
td.web-design-prices {
	border-collapse: collapse; 
	padding: 2% 2% 2% 2%;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 1em; 
	font-weight: bold; 
	font-style: normal; 
	color: black; 
	}
	
table.domains {
	max-width: 90%;
	border-collapse: collapse; 
	margin-top: 20px;
	padding: 5px; 
	background: none;
}
	
td.domains1 {
	border-collapse: collapse; 
	padding: 10px 10px; 
	background-color: #222;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 1em; 
	font-style: normal; 
	font-weight: bold; 
	color: #d7ba2e; 
}
	
td.domains2 {
	border-collapse: collapse; 
	padding: 10px 7px; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 0.9em; 
	font-style: normal; 
	color: #222;
	}

table.pcservice {
	max-width: 100%;
	border-collapse: collapse; 
	padding: 5px; 
	background: none;
	margin: 0 auto;
}
li.pcservice-heading {
	padding: 10px 10px; 
	background-color: #222;
	font-weight: bold; 
	color: #d7ba2e; 
	margin-top: 10px;
}
td.pcservice-heading {
	border-collapse: collapse; 
	padding: 10px 10px; 
	background-color: #222;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 1em; 
	font-style: normal; 
	font-weight: bold; 
	color: #d7ba2e; 
	}
td.pcservice-price {
	border-collapse: collapse; 
	padding: 0px 0px; 
	background-color: #222;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 1em; 
	font-style: normal; 
	font-weight: bold; 
	color: #d7ba2e; 
	}
td.pcservice-heading2 {
	border-collapse: collapse; 
	padding: 10px 10px; 
	background-color: #222;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 0.8em; 
	font-style: normal; 
	font-weight: bold; 
	color: #bbb; 
	}
td.pcservice-included {
	text-align: left;
	border-collapse: collapse; 
	padding: 10px 7px; 
	padding-left: 10px;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 0.8em; 
	font-style: normal; 
	color: #222;
	}
td.pcservice-not-included {
	text-align: left;
	border-collapse: collapse; 
	padding: 10px 7px; 
	padding-left: 10px;
	border-width: 1px; 
	border-style: solid; 
	border-color: #222; 
	font-family: arial; 
	font-size: 0.8em; 
	font-style: normal; 
	color: #ddd;
	}
h3.pcservice-heading {
	text-align: center;
	font-family: 'Play', sans-serif;
	font-style: italic;
	font-size: 1.3em;
	padding: 3% 0% 2% 0%;
	color: #d7ba2e; 
	}
p.pcservice {
	font-family: 'Play', sans-serif;
	font-size: 1.05em;
	color: #222; 
	}
li.pcservice {
	font-family: 'Play', sans-serif;
	font-size: 1.05em;
	color: #222; 
	margin: 0px 1% 0px 1%;
	}
	
/* article end */

/* article contact start */
article.contact {
	text-align: center;
	max-width: 100%;
	border-top: 1px solid black;
	margin-top: 2%;
	padding-bottom: 2%;
	background-color: white; 
/*	background-image: URL("images/xback.png"); */
	}
iframe.google-map {
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	max-width: 80%;
	}
p.bottomcontact {
	max-width: 90%;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	font-size: 1.2em; 
	font-weight: bold;
	color: black; 
	padding: 3% 0% 1% 5%;
	}

a.inpage-link:before {color: #d7ba2e; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-link:link {color: #d7ba2e; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-link:visited {color: #d7ba2e; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background: none; line-height: 1.2em; } /*visited link*/ 
a.inpage-link:hover {color: #d7ba2e; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 1.5em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.inpage-link:active {color: #222; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*onclick link*/
a.inpage-link:focus {color: #222; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*when element is active*/

a.inpage-link-white:before {color: #ffffff; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-link-white:link {color: #ffffff; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-link-white:visited {color: #ffffff; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background: none; line-height: 1.2em; } /*visited link*/ 
a.inpage-link-white:hover {color: #ffffff; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 1.5em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.inpage-link-white:active {color: #222; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*onclick link*/
a.inpage-link-white:focus {color: #222; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*when element is active*/


a.inpage-homepage-link:before {border: 1px solid #d7ba2e; color: #d7ba2e; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-homepage-link:link {border: 1px solid #d7ba2e;color: #d7ba2e; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-homepage-link:visited {border: 1px solid #d7ba2e;color: #d7ba2e; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background: none; line-height: 1.2em; } /*visited link*/ 
a.inpage-homepage-link:hover {border: 1px solid #d7ba2e;color: #d7ba2e; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; padding: 10px 1% 10px 1%; background-color: #000000; line-height: 1.5em; transition:all 0.3s ease; box-shadow: inset 0 0 0 1px #d7ba2e;  } /*hover over link*/ 
a.inpage-homepage-link:active {border: 1px solid #d7ba2e;color: #222; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*onclick link*/
a.inpage-homepage-link:focus {border: 1px solid #d7ba2e;color: #222; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*when element is active*/

a.inpage-homepage-link-white:before {border: 1px solid white; color: #ffffff; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-homepage-link-white:link {border: 1px solid white; color: #ffffff; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1.2em; transition:all 0.3s ease; } /*unvisited link*/
a.inpage-homepage-link-white:visited {border: 1px solid white; color: #ffffff; font-family: arial; font-size: 1.2em; font-style: italic; text-decoration: none;
padding: 3px 1% 3px 1%; background: none; line-height: 1.2em; } /*visited link*/ 
a.inpage-homepage-link-white:hover {border: 1px solid white; color: #ffffff; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 1.5em; transition:all 0.3s ease; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.inpage-homepage-link-white:active {border: 1px solid white; color: #222; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*onclick link*/
a.inpage-homepage-link-white:focus {border: 1px solid white; color: #222; font-family: arial; font-size: 1.1em; font-style: italic; text-decoration: none; 
padding: 10px 1% 10px 1%; background-color: white; line-height: 1.5em; } /*when element is active*/


a.call-milton-keynes-it:before {display: block; color: #d7ba2e; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600;
background-color: none; line-height: 1em; transition:all 0.3s ease; } /*unvisited link*/
a.call-milton-keynes-it:link {display: block; color: #d7ba2e; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600;
background-color: none; line-height: 1em; transition:all 0.3s ease; } /*unvisited link*/
a.call-milton-keynes-it:visited {display: block; color: #d7ba2e; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600; 
background-color: none; line-height: 1em; } /*visited link*/ 
a.call-milton-keynes-it:hover {display: block; color: #d7ba2e; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600;
background-color: #000000; line-height: 2em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.call-milton-keynes-it:active {display: block; color: black; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600;
background-color: white; line-height: 2em; } /*onclick link*/
a.call-milton-keynes-it:focus {display: block; color: black; padding: 3px 1% 3px 1%; font-family: arial; font-size: 2em; font-style: italic; text-decoration: none; font-weight: 600;
background-color: white; line-height: 2em; } /*when element is active*/

a.email:before {color: #d7ba2e; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1em; transition:all 0.3s ease; } /*unvisited link*/
a.email:link {color: #d7ba2e; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; line-height: 1em; transition:all 0.3s ease; } /*unvisited link*/
a.email:visited {color: #d7ba2e; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background: none; line-height: 1em; } /*visited link*/ 
a.email:hover {color: #d7ba2e; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 2em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.email:active {color: #222; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*onclick link*/
a.email:focus {color: #222; font-family: arial; font-size: 1em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*when element is active*/

a.email-contact-page:before {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; transition:all 0.3s ease; } /*unvisited link*/
a.email-contact-page:link {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; transition:all 0.3s ease; } /*unvisited link*/
a.email-contact-page:visited {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background: none; } /*visited link*/ 
a.email-contact-page:hover {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 2em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.email-contact-page:active {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*onclick link*/
a.email-contact-page:focus {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*onclick link*/

a.call-contact-page:before {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; transition:all 0.3s ease; } /*unvisited link*/
a.call-contact-page:link {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background-color: none; transition:all 0.3s ease; } /*unvisited link*/
a.call-contact-page:visited {color: #d7ba2e; line-height: 1em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 3px 1% 3px 1%; background: none; } /*visited link*/ 
a.call-contact-page:hover {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: #000000; line-height: 2em; transition:all 0.3s ease; border-radius: 5px; box-shadow: inset 0 0 0 1px white;  } /*hover over link*/ 
a.call-contact-page:active {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*onclick link*/
a.call-contact-page:focus {color: #d7ba2e; line-height: 2em; font-family: arial; font-size: 1.3em; font-style: italic; text-decoration: none; font-weight: 600;
padding: 10px 1% 10px 1%; background-color: white; line-height: 2em; } /*onclick link*/

img.milton-keynes-it-facebook {transition:all 0.3s ease; border: solid 2px transparent; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-facebook:hover {transition:all 0.3s ease; border: solid 2px #d7ba2e; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-pintrest {transition:all 0.3s ease; border: solid 2px transparent; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-pintrest:hover {transition:all 0.3s ease; border: solid 2px #d7ba2e; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-twitter{transition:all 0.3s ease; border: solid 2px transparent; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-twitter:hover {transition:all 0.3s ease; border: solid 2px #d7ba2e; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-instagram {transition:all 0.3s ease; border: solid 2px transparent; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}
img.milton-keynes-it-instagram:hover {transition:all 0.3s ease; border: solid 2px #d7ba2e; max-width: 9%; padding: 1px; margin: 1% 4.5% 0% 4.5%;}

/*Form -------------------------------------- Start*/
div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}
form.contactform {
	display: inline-block;
	width: 80%;
	margin: 0 auto;
	}
input {
	font-size: 1.1em;
	display: block;
	width: 80%;
	margin: 2% auto;
	padding: 2%;
	border-style: none;
	border-radius: 25px;
	background-color: #d7ba2e;
	color: black;
}
textarea {
	font-family: Arial;
	font-size: 1.25em;
	display: block;
	width: 80%;
	margin: 2% auto;
	padding: 2%;
	border-style: none;
	border-radius: 25px;
	background-color: #d7ba2e;
	color: black;
}
input:focus,textarea:focus {
	background-color: white;
	color: black;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: white;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}
select {
	font-size: 1.1em;
	display: block;
	margin: 2% auto;
	padding: 2%;
	border-style: none;
	border-radius: 25px;
	background-color: #d7ba2e;
	color: white;
}
select:focus {
	background-color: white;
	color: black;
}
.button {
	font-family: font-family: 'Lato', sans-serif;
	font-size: 1.25em;
	border-radius: 25px;
	width: 30%;
	padding: 1%;
	border: 2px solid #d7ba2e;
	background: black;
	color: white;
}
/*Form -------------------------------------- End*/

/* article contact end */

/* leaflet intereactive map start */
#mapid {width: 80%; height: 580px; margin: 0 auto;}
/* leaflet intereactive map end */

/* facebook reviews start */
img.facebook-review {
	max-width: 100%;
	border:none;
	overflow:hidden;
}	
/* facebook reviews end */

/* google reviews start */
a.google-reviews {text-decoration: none; color: black;}
#map-plug {display:none;}

#google-reviews {
padding-left: 5%;
padding-right: 5%;
display:flex;
flex-wrap:wrap;
//display: grid;
//grid-template-columns: repeat( auto-fit, minmax(320px, 1fr));
}

.review-item {
border:solid 1px rgba(190,190,190,.35);
margin:0 auto;
padding:1em;
background-color: white;
flex: 1 1 20%;
}

@media ( max-width:1200px) {
  .review-item { flex: 1 1 40%; }
}

@media ( max-width:450px) {
  .review-item { flex: 1 1 90%; }
}

.review-meta, .review-stars {text-align:center; font-size:115%;}
.review-author {font-family: 'Roboto', sans-serif; font-style: normal; text-transform: capitalize; font-weight:bold; }
.review-date {font-family: 'Roboto', sans-serif; font-style: normal; opacity:.6; display:block;}
.review-text {font-family: 'Roboto', sans-serif; font-style: normal; line-height:1.55; text-align:left; max-width:32em; margin:auto;}

.review-stars ul {
display: inline-block;
list-style: none;
margin:0;
padding:0;
}

.review-stars ul li {
float: left;
margin:0 1px 0 0;
padding:0;
line-height:1;
}

.review-stars ul li i {
color: #E4B248;
font-size: 1.4em;
font-style:normal;
margin:0;
padding:0;
}
.review-stars ul li i.inactive { color: #c6c6c6;}
.star:after { content: "\2605"; }
/* google reviews end */

/* footer start */
footer {
	max-width: 100%;
	background-color: #000000; 
	border: 0px; 
	padding: 0px;
	text-align: center;
	}
div.social-media-links {
	width: 40%;
	background-color: #000000;
	border: 0px; 
	text-align: center;
	padding-top: 35px;
	margin: 0 auto;
	margin-bottom: 10px;}

img.milton-keynes-it-facebook-footer {	transition:all 0.3s ease; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-facebook-footer:hover { transition:all 0.3s ease; border-radius: 5px;box-shadow: inset 0 0 0 1px #d7ba2e; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-pintrest-footer {	transition:all 0.3s ease; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-pintrest-footer:hover { transition:all 0.3s ease; border-radius: 5px;box-shadow: inset 0 0 0 1px #d7ba2e;; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-twitter-footer { transition:all 0.3s ease; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-twitter-footer:hover { transition:all 0.3s ease; border-radius: 5px;box-shadow: inset 0 0 0 1px #d7ba2e;; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-instagram-footer { transition:all 0.3s ease; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}
img.milton-keynes-it-instagram-footer:hover { transition:all 0.3s ease; border-radius: 5px;box-shadow: inset 0 0 0 1px #d7ba2e;; max-width: 9%; padding: 1px; margin: 0% 4.5% 0% 4.5%;}


p.footer {
	max-width: 100%;
	background-color: #000000; 
	font-family: arial; 
	font-style: normal;
	font-size: 0.7em; 
	color: #cccccc; 
	border: 0px; 
	}
		
		
img.footer {
	max-width: 100%;
	padding-top: 20px;
	}

@media screen and (max-width: 891px) {
header {
	text-align: center; 
	}
div.milton-keynes-it-logo {
	width: 100%;
	min-width: 350px;
	display: block;
	float: none;
	padding: 3px 0% 5px 0%;
}
div.milton-keynes-it-header {
	display: none;
}
div.desktop {
	display: none;
}
div.mobile {
	display: block;
}
h1.milton-keynes-it {
	font-size: 35px;  
	padding: 1% 0% 0% 0%;
}
h2.milton-keynes-it {
	font-size: 17px;  
	padding: 0% 0% 1% 0%;
}
h2.main   {
	max-width: 90%;
	font-family: 'Roboto', sans-serif;
	font-size: 1.1em;  
	padding: 5% 0% 0% 3%;
	color: black; 
	}	
img.milton-keynes-it-logo {
	width: 150px;
	padding: 0% 0% 0% 0%;
}
img.facebook-review {
	max-width: 94%;
}
td.pcservice-heading {
	padding: 10px 0px; 
	font-size: 0.8em; 
	}
td.pcservice-price {
	padding: 0px 0px; 
	font-size: 0.8em; 
	}
td.pcservice-heading2 {
	padding: 10px 10px; 
	font-size: 0.7em; 
	}
td.pcservice-included {
	padding: 10px 7px; 
	font-size: 0.7em; 
	}
td.pcservice-not-included {
	padding: 10px 7px; 
	font-size: 0.7em; 
	}
}

@media screen and (max-width: 767px) {
nav.milton-keynes-it-menu {
	display: none;
}
#menu, #menu-button {
    display: block;
	padding: 5px;
    text-align: center;
    color: white;
    background-color: #222;
	border: none 1px white;
}
#menu {
    display: none;
    padding: 10px;
}
li.milton-keynes-it-menu   {
	display: block;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 1%; 
	padding-right: 1%; 
}
h1.section {
	padding: 4% 5% 3% 5%;
	text-align: center;
}
h2.section {
	padding: 3% 0 4% 6%;
}
h2.main   {
	padding: 6% 0% 3% 5%;
	text-align: center;
	}	
p.milton-keynes-it {
	padding: 0.5% 3% 0.5% 5%;
}
a.email-contact-page:link  {
	font-size: medium;
}
p.milton-keynes-it {
	display: block;
	width: 80%;
	text-align: justify;
	vertical-align: middle;
	background-color: white; 
/*	background-image: URL("images/xback.png"); */
	font-family: 'Play', sans-serif;
	font-size: 1.1em;  
	margin: 0 auto;
	padding: 0.5% 3% 0.5% 3%;
	color: #000000; 
}
ul.milton-keynes-it {
	width: 80%;
	padding: 2% 2% 2% 2%;
	margin: 4% auto;
	}
li   {
	padding: 3% 3% 2% 3%;
}
li.email-title-contact-page {
	display: block;
	width: 91%;
	font-size: 1.2em;  
	margin: 5px 2% 0px 2%; 
}
.container {
  display: inline-block;
  width: 90%;
 }
div.clients {
	display: block;
	width: 100%;
}
img.clients {
	width: 80%;
	margin: 0;
	padding: 0;
	}
div.website-screenshot {
	display: block;
	max-width: 100%;
}
img.website-screenshot {
	max-width: 80%;
	padding: 2% 0% 0% 0%;
}
div.website-description {
	display: block;
	width: 100%;
	padding: 0;
}
.modal-window>div {
  max-width: 85%;
  margin: 5% auto;
}
/* leaflet intereactive map start */
#mapid {width: 90%; height: 480px; margin: 0 auto;}
/* leaflet intereactive map end */

div.social-media-links {
	width: 70%;
}

}