#pageBg{ /* background image for the page */
	background-image: url(/imgs/email-bg-preload.jpg) ;
	background-position: center bottom;
}

h1{
	/* background-image: radial-gradient(rgba(255,255,255,0.6), #bbeefe); */
	color:#f26100;
}
#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 */
/* load an image of 5 horizontal sub images, so that each images with is the width of the page */
/* cycle through the images for 30s */
:root {
  --image-width: 4070;
  --image-height: 300;
  --image-count: 5;
  --image-duration: 40s;
  --header-width: 500vw;
  --header-width-neg: -500vw;
  --header-pos2: -100vw;
  --header-pos3: -200vw;
  --header-pos4: -300vw;
  --header-pos5: -400vw;
  --header-height: calc( var(--header-width) * 0.0737 );
}

/* squish image to one thrid of its height on wider screens so doesn't take up to much vert space */
@media only screen and (min-width: 750px){ :root { --header-height: calc( var(--header-width) * 0.0491 ); } }

.container2 {
	height: var(--header-height);
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 500px 100px;
	background-size: 100vw var(--header-height);
}

.sliding-background {
  background: url("/imgs/email-header-preload.jpg") repeat-x;
  background-size: var(--header-width) var(--header-height);
  height: var(--header-height);
  width: 600vw;	/* have the image repeat 1.1 times horizontally */
  animation: slide var(--image-duration) linear infinite;  /* resest and start again after 30s */
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
	opacity:1;
  }
  16% {
	  opacity:1;
  }
  18% {
	  transform: translate3d(0, 0, 0); opacity:0.3;
  }
  20% {
	  transform: translate3d(var(--header-pos2), 0, 0); opacity:0.3;
  }
  22% {
	  opacity:1;
  }
  36%{
	   opacity:1;
  }
  38% {
	  transform: translate3d(var(--header-pos2), 0, 0); opacity:0.3;
  }
  40% {
	  transform: translate3d(var(--header-pos3), 0, 0); opacity:0.3;
  }
  42% {
	  opacity:1;
  }
  56%{
	   opacity:1;
  }
  58% {
	  transform: translate3d(var(--header-pos3), 0, 0); opacity:0.3;
  }
  60% {
	  transform: translate3d(var(--header-pos4), 0, 0); opacity:0.3;
  }
  62% {
	  opacity:1;
  }
  76%{
	   opacity:1;
  }
  78% {
	  transform: translate3d(var(--header-pos4), 0, 0); opacity:0.3;
  }
  80% {
	  transform: translate3d(var(--header-pos5), 0, 0); opacity:0.3;
  }
  82% {
	  opacity:1;
  }
  96%{
	   opacity:1;
  }
  98% {
	  transform: translate3d(var(--header-pos5), 0, 0); opacity:0.3;
  }
  100% {
	  transform: translate3d(var(--header-width-neg), 0, 0); opacity:1;
  }
}

/* -- */
/* Spacing between content sections */
#content>div{
	margin-top:50px;
	padding-top:50px;
	padding-bottom:50px;
	margin-bottom:50px;
}


/* -- */
/* Style for the first section in the page, overview,  with a large left aligned image */

#content>div:nth-child(1){ margin-left:0%; width:100%; }
@media only screen and (max-width: 1260px){ #content>div:nth-child(1){ margin-left:-5%; width:105%;} }
@media only screen and (max-width: 1150px){ #content>div:nth-child(1) img{ width:50%; } }
@media only screen and (max-width: 520px){ #content>div:nth-child(1) img{ width:99%; } #content>div:nth-child(1){ margin-left:0%; width:100%;} }

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

/* -- */
/* Style for the second section in the page, Secure Email Encryption, with a large lets encrypt image and a background gradient */

#content>div:nth-child(2){ margin-left:0%; width:100%; background-color:transparent;}
@media only screen and (max-width: 1150px){ #content>div:nth-child(2) img{ width:50%; } #content>div:nth-child(2){margin-left:-10%; width:110%;} }
@media only screen and (max-width: 780px){ #content>div:nth-child(2) img{ width:99%; } #content>div:nth-child(2){margin-left:0%; width:100%;} }

/* 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(2):before, #content>div:nth-child(4):before, #content>div:nth-child(5):before, #content>div:nth-child(6):before, #content>div:nth-child(8):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(2):before, #content>div:nth-child(4):before, #content>div:nth-child(5):before, #content>div:nth-child(6):before, #content>div:nth-child(8):before{ left:-20%; right:-20%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(2):before, #content>div:nth-child(4):before, #content>div:nth-child(5):before, #content>div:nth-child(6):before, #content>div:nth-child(8):before{left:-11%; right:-11%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(2):before, #content>div:nth-child(4):before, #content>div:nth-child(5):before, #content>div:nth-child(6):before, #content>div:nth-child(8):before{left:-5%; right:-5%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(2):before, #content>div:nth-child(4):before, #content>div:nth-child(5):before, #content>div:nth-child(6):before, #content>div:nth-child(8):before{left:0%; right:0%;} }

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


/* -- */
#content>div:nth-child(3):before{
	content:"";
	height:250px;
	display: block;
	position:absolute;
	top:-250px;
	background-image: url(/imgs/dmarc.png);
	background-repeat:repeat-x;
	background-position:top center;
}

#content>div:nth-child(3):before{ left:-20%; right:-20%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(3):before{left:-11%; right:-11%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(3):before{left:-5%; right:-5%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(3):before{left:0%; right:0%;} }
#content>div:nth-child(3){
	margin-top:250px;
}

/* -- */
#content>div:nth-child(4){
	background-color:transparent;
}
#content>div:nth-child(4):before{
    background-image: linear-gradient(50deg, rgba(62,131,226,0.9), rgba(238,238,238,0.7));
}

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

/* -- */
#content>div:nth-child(5){
	background-color:transparent;
}
#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;
}

/* -- */
#content>div:nth-child(6){
	background-color:transparent;
}
#content>div:nth-child(6):before{
    background-image: linear-gradient(50deg, rgba(62,131,226,0.9), rgba(238,238,238,0.7));
}

#content>div:nth-child(6):after{
	content:"";
	height:250px;
	display: block;
	position:absolute;
	bottom:-240px;
	background-image: url(/imgs/dmarc.png);
	background-repeat:repeat-x;
	background-position:top center;
}

#content>div:nth-child(6){
	margin-bottom:250px;
}

#content>div:nth-child(6):after{ left:-20%; right:-20%; }
@media only screen and (max-width: 900px){ #content>div:nth-child(6):after{left:-11%; right:-11%;} }
@media only screen and (max-width: 700px){ #content>div:nth-child(6):after{left:-5%; right:-5%;} }
@media only screen and (max-width: 420px){ #content>div:nth-child(6):after{left:0%; right:0%;} }


/* -- */
#content>div:nth-child(8){
	background-color:transparent;
}
#content>div:nth-child(8):before{
	background-image:url(/imgs/policy-bg-preload.jpg);
	background-size: contain;
}
#content>div:nth-child(8).highRes:before{
	background-image:url(/imgs/policy-bg.jpg);
}

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


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