#pageBg{ /* background image for the page */
	background-image: url(/imgs/home-bg-preload.jpg) ;
}
/* @media only screen and (min-width: 1200px){ pageBg{background-image:url(/imgs/home-bg.jpg);} }  higher res image on bigger screens */

#content>div{ /* make the content divs a little whiter so they are easier to read */
	background-color:rgba(255,255,255,0.8);
}

/* -- */
/* animation of the header image */
.container2 {
	height:310px;
	overflow: hidden;
	margin-top:-71px;
	border-bottom: solid 30px #1d4775;
}

.sliding-background {
  background: url("/imgs/pc-strip2-preload.png") repeat-x; /* 3450 x 340px */
  background-size: 2841px 280px;				/* scaled for screen to 280px height */
  height: 280px;
  width: 17047px;	/* have the image repeat 6 times horizontally (6 x 2841) */
  animation: slide 420s linear infinite;  /* resest and start again after 7 minutes */
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);	/* start scrolling at start of first image */
  }
  100%{
    transform: translate3d(-14206px, 0, 0);	/* end scrolling at end of fifth image, start of sixth already showing (5 x 2841) */
  }
}


#content>div{
	margin-top:50px;
	padding-top:50px;
	padding-bottom:50px;
	margin-bottom:50px;
}

h1{
	margin-top:50px;
	margin-left:20px;
	margin-right:20px;
}

/* Reduce the gap between the first section of content and the preceeding heading */
#content>div:nth-child(2) {
   padding-top:0px;
}


/* -- */
/* Have a large gap at the top after the heading */
#content>div:nth-child(2) h2{
	margin-bottom:100px;
	background-color: rgba(255,255,255,0.9);
	padding-top:20px;
	padding-bottom:20px;
}

/* Styling of the boxes of what we do */
#content>div:nth-child(2){
	position:relative;
	background-color:transparent;
}
#content>div:nth-child(2) p {
	position:relative;
    padding: 12px;
	float:left;
	height:380px;
	width:29%;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:80px;
	overflow:hidden;
	background-color:rgba(255,255,255,0.9);
}
/* reduce columns of what we do boxes for narrower screens */
@media only screen and (max-width: 1000px){ #content>div:nth-child(2) p{width:46%;} }
@media only screen and (max-width: 620px){ #content>div:nth-child(2) p{width:96%; height:auto;} #content .moreLink{display:none;} }

/* box that floated content goes into to show it full  length */
.expandedBox{
	position: absolute;
	z-index: 1;
	padding: 12px;
	padding-bottom: 40px;
	background-image: linear-gradient(transparent 380px, rgba(255,255,255,0.9) 10px, rgba(255,255,255,0.8) 100% );
}

/* strip at base of  content for  read more  button */
#content .moreFooter{
	position:absolute;
	bottom:0px;
	left:1px;
	right:1px;
	background-image: linear-gradient(180deg, #FFF, #eee);
	overflow:hidden;
	text-align: center;
    padding: 6px;
}

/* link at base of content to read more */
#content .moreLink{
	border:solid 1px #999;
	padding:4px 8px 4px 8px;
	font-size:10px;
}

/* spacing so expanded content doesn't cover the image */
#content .picSpacer{
	width:200px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
}


/* What we do boxes with added images */
#content>div:nth-child(2) p:before{
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-size:200px 180px;
	width: 200px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

/* The images for the boxes */
#content>div:nth-child(2) p:nth-child(2):before{ background-image: url(/imgs/time.png); }
#content>div:nth-child(2) p:nth-child(3):before{ background-image: url(/imgs/microsoft.png); }
#content>div:nth-child(2) p:nth-child(4):before{ background-image: url(/imgs/www.png); }
#content>div:nth-child(2) p:nth-child(5):before{ background-image: url(/imgs/vr-phone.png); }
#content>div:nth-child(2) p:nth-child(6):before{ background-image: url(/imgs/server.png); }
#content>div:nth-child(2) p:nth-child(7):before{ background-image: url(/imgs/repairs.png); }
#content>div:nth-child(2) p:nth-child(8):before{ background-image: url(/imgs/duplicati.png); }
#content>div:nth-child(2) p:nth-child(9):before{ background-image: url(/imgs/eset-antivirus.png); }
#content>div:nth-child(2) p:nth-child(10):before{ background-image: url(/imgs/email.png); }

/* Keep floated content contained with the section */
#content>div:nth-child(2):after{
	content:"";
	height:1px;
	display: block;
	clear:both;
}




/* -- */
/* set full width background gradient for select sections of content */
#content>div:nth-child(3):before, #content>div:nth-child(5):before{
    content:"";
    position: absolute;
    z-index: -1;
	height:100%;
	top:0px;
}

/* reduce how far the sections bg are widened as the page margins narrow for smaller screens */
#content>div:nth-child(3):before, #content>div:nth-child(5):before{ left:-20%; right:-20%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(3):before, #content>div:nth-child(5):before{left:-11%; right:-11%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(3):before, #content>div:nth-child(5):before{left:-5%; right:-5%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(3):before, #content>div:nth-child(5):before{left:0%; right:0%;} }

/* Each section has its own colour specified */
#content>div:nth-child(3), #content>div:nth-child(5){
	background-color:transparent;
}
#content>div:nth-child(3):before{
	 background-image: linear-gradient(-50deg, rgba(204,255,255,1), rgba(238,238,238,0.7));
}
#content>div:nth-child(5):before{
	background-image: linear-gradient(50deg, rgba(255,192,203,0.9), rgba(238,238,238,0.7));
}

/* Keep floated content contained with the section */
#content>div:nth-child(5):after{
	content:"";
	height:1px;
	display: block;
	clear:both;
}

/* offset the image of the 5th section into the side margin */
#content>div:nth-child(5) img { margin-left:-20%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(5) img{margin-left:-11%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(5) img{margin-left:-5%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(5) img{margin-left:0%;} }

/* Widened container for the boxes of what we do */
#content>div:nth-child(2){ margin-left:-20%; width:140%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(2){margin-left:-11%; width:122%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(2){margin-left:-5%; width:110%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(2){margin-left:0%; width:100%;} }



/* -- */
/* TODO: Redo this styling for ToForm  Web */


/* temp styling  of bullet points in the 5th section */
#content>div:nth-child(5) ul {
   padding-left:20px;
}
#content>div:nth-child(5) ul strong {
   padding-left:10px;
}

#footer{
	overflow:hidden; /* contain floated content */
	background-color:rgba(255,255,255,0.8);
}