@charset "UTF-8";
/* CSS Document */

@media all and (min-width: 960px) {
    body{
        font-size: 16px;
    }
}

@media all and (max-width: 959px) and (min-width: 600px) {
    body{
        font-size: 14px;
    }
}

@media all and (max-width: 599px) {
    body{
        font-size: 11.5px;
    }

}
@font-face {
    font-family: "Lato Light";
    src:url(../fonts/Lato-Light.ttf);
    src:url(../fonts/Lato-Light.woff);
}
@font-face {
    font-family: "Lato";
    src:url(../fonts/Lato-Regular.ttf);
        src:url(../fonts/Lato-Regular.woff);
}
@font-face {
    font-family: "Lato Bold";
    src: url(../fonts/Lato-Bold.ttf);
        src: url(../fonts/Lato-Bold.woff);
}



body {
	font-family: 'Lato';
	padding:0;
	margin:0;
}

/* html and target for scrolling and offset
containers have calc of padding to adjust for new padding and margin */
html {
	scroll-behavior: smooth;
}

:target {
	display: block;
	padding-top:calc(7.5% + 200px);
	margin-top:calc(7.5% - 100px);
	display: inline-block;
}

/*section 1 navigation css */
.nav {
	background-color:#FFF;
	width:100%;
	height:100px;
	font-family: 'lato light';
	position:fixed;
	top:0;
	z-index:2;
	border-bottom:1px solid #0067b4;
  -webkit-box-shadow:  0 8px 15px -5px #999;
  box-shadow: 0 8px 15px -5px #999;
}

.logo {width:25%;
	float:left;
	height:100%;
	display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.logo a {
display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.logo img {
  max-width:300px;
	max-height:70px;
}

/* drawer styles */

.pure-pusher, .pure-drawer {background-color:#fff;}
.pure-drawer {margin-top:100px;}
.pure-container {padding-left:5%; padding-right:5%;}
/* drawer icon styles */

.pure-toggle-label {
	color:#0067b4;
	border-color: #0067b4;
	width:55px;
	height:55px;
	margin-top:7px;
}
.pure-toggle-label .pure-toggle-icon, .pure-toggle-label .pure-toggle-icon:before, .pure-toggle-label .pure-toggle-icon:after {background-color: #0067b4;}
.pure-toggle-label{
	border-color: transparent !important;
	color: transparent !important;
	background-color: transparent !important;
}
.pure-toggle[data-toggle='right']:checked ~ .pure-toggle-label[data-toggle-label='right'] {border-color:#0067b4; color:#0067b4;}
.pure-toggle-label:hover {
    border-color: #000;
    color: #000;
}
.pure-toggle-label:hover .pure-toggle-icon, .pure-toggle-label:hover .pure-toggle-icon:before, .pure-toggle-label:hover .pure-toggle-icon:after {
    background-color: #000;
}

/* drawer link styles */
.pure-drawer {background-color:#0067b4;}
.pure-drawer ul {
	padding-left:0px;
}
.pure-drawer li {border-top:1px solid #FFF; list-style: none; font-size:1.35em; padding:10px 0; text-align: center;}
.pure-drawer li:last-of-type {border-bottom:1px solid #FFF;}
.pure-drawer li a {color:#FFF; text-decoration: none;}

/* wide screen links */
.pure-pusher ul { margin-top:35px; right: 0; position: absolute; }
.pure-pusher li {list-style: none; display: block; float: left; margin:0 10px; font-size: 1.3em;}
.pure-pusher li a {color:#0067b4; text-decoration: none;}
.pure-pusher li a:hover {color:#0067b4; text-decoration: none; border-top:2px solid #0067b4;}

.active {border-top:2px solid #0067b4;}
.active-click {border-top:2px solid #0067b4;}

/* access ppm button */

.getStarted, .getStarted2 {
	background-color:#0067b4;
	float:right ;
	margin:15px;
	margin-right:150px;
	margin-top:33px;
	font-size:.9em !important;
	letter-spacing:2.5px;
	font-weight:300;
	padding:10px 15px;
	border-radius:40px !important;
	-webkit-transition: all .1s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-box-shadow: 0px 6px 15px rgba(0,0,0,.7);
    box-shadow: 0px 6px 15px rgba(0,0,0,.7);

}
.getStarted a, .getStarted2 a {color:#fff !important;font-family: 'lato'; 	text-decoration: none;    height: 100%;
    padding: 10px; font-weight:600;}
.getStarted a:hover, .getStarted2 a:hover {border:none !important;}
.getStarted:hover, .getStarted2:hover {background-color:#fff;}
.getStarted:hover a, .getStarted2:hover a{color:#0067b4 !important;}


.getStarted:active, .getStarted2:active {
	-webkit-transition: all .1s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 6px rgba(0,0,0,.9);
	font-size:.9em;}

.getStarted {margin-right:0; margin-top:-5px !important;}
.getStarted2 {margin-right:35px;}
/* nav responsive settings */
.getStarted2 {display:none;}
.pure-container input, .pure-container label {display:none;}


/* mainheader grid layout */
.sectionOverlay {
  background-image: url(../images/landing/headerbackground.jpg);
  background-size:cover;
  background-position:center center;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  background-attachment: fixed;
}

.section1 {
	width:100%;
	height: 80vh;
	display:inline-grid;
 	grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
	background-color:#FFFFFF;
	padding:0;
	background: rgba(0,0,0,0);
    background-size:cover;
	grid-row-gap: 0px;
	background-color:rgba(0,0,0,.5);
}



.pageTitle {
	grid-area: pageTitle;
	grid-column: 1/6;
	grid-row: 3/5;

	color:#FFF;
	display: -webkit-inline-box;
    display: inline-flex;
	-webkit-box-align:center;
    align-items:center;
	-webkit-box-pack:center;
    justify-content:center;
	text-align: center;
}
.pageTitle h1 {
	font-size:4em;
	margin-bottom:.25%;
	font-family: 'Lato';
}
.pageTitle h2 {
	font-size:1.75em;
	width:60%;
	margin:0 auto 0;
	font-family:'Lato Light';

}
.pageTitle p {
	font-size: 1.15em;
	margin-top:3%;
	letter-spacing: 2px;
}

.introduction, .summary, .management, .terms, .brief {
	width:100%;

	display:inline-grid;
  	grid-template-columns: repeat(12, 1fr);
  	grid-template-rows: auto;
	color:#1e1e1e;
	padding-top:calc(5.5%);
	padding-bottom:calc(7.5%);
	background: url(../images/background1.png);
	background-repeat: repeat-y;
	background-size: contain !important;
}
.brief {
  height:20vh;
  padding:0 !important;
}
.brief .titleContainer h2 {
  padding:7.5% 0 !important;
  margin:0 !important;
  text-transform: capitalize;
  font-family: 'Lato'
}
/*
.titleContainer {
	grid-column: 2/5;
	text-align: center;
	font-family: 'lato light';
	border-right:1px solid #000;
	padding:0 10%;
}
*/


.titleContainer img {
	width:20% !important;
	margin:0 40% !important;
}
.titleContainer h4 {
	font-size:1.2em;
	text-align: center;
}
.titleContainer h2 {
	font-size:2em;
	text-transform: capitalize;
	font-family: 'Lato';
	text-align: center;
}
.titleContainer p {
	font-size:1.05em;
	text-align: center;
}
.icons {margin-top:20px; }
.icons a { text-decoration:none;}
.icons i {
  font-size:1.5em;
  width:50px;
  height:50px;
  margin:10px;
  background-color:#0067b4;
  color:#fff;
  border-radius:50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
 .iconsFooter .icons { width:60%; margin:0 20%; display: flex; justify-content: space-between;}
 .iconsFooter i {
   border:1px solid #FFF;
 }
 .iconsFooter ul {width:90%; margin:0 5%; display: flex; clear:right;   justify-content: space-between; padding-left:0;}
 .iconsFooter li {
   padding:5px 15px;

   list-style:none;

   text-align: center;
 }
 .iconsFooter li a {
   color:#FFF;
   font-size:1.4em;
   text-decoration: none;
 }

.textContent {
	grid-column: 4 /10;
	text-align: left;
	font-family: 'lato light';
  max-width:1500px;
margin:0 auto;
}
.textContent strong, .textContent h3 {
	text-align: left;
	font-size: 1.5em;
	font-family: 'Lato';
  text-transform:capitalize;
}
.textContent img {
	display:block;
  width:100%;
  max-width:950px;
  margin:0 auto;
}
.textContent p, .textContent li {
	font-size: 1.35em;
	line-height: 1.25em;
	letter-spacing: 1px;
  max-width:950px;
  width:100%;
  margin-top:15px;
  margin-left:auto;
  margin-right:auto;
  font-family: 'Lato Light'
}
.textContent li {
  margin-top:0px;
}
.textContent h3 {
  margin-left:auto;
  margin-right:auto;
  max-width:950px;
  width:100%;
}
.textContent p:first-of-type {margin-top:0;}

.semiBold {font-family:lato !important;}

.maxOffering {
	font-size:3.0em;
	font-family: 'lato';
	text-align: center;
}
p.minOffering, p.minSubscription{
	font-size: 1.5em;
  line-height: 1.15em;
	font-family: 'lato';
	text-align:center;

}
p.minOffering {margin-bottom:0px;}
p.minSubscription {
  margin-top:10px;
    margin-bottom:50px;
  }
.termsToggle {
  font-size:1.1em !important;
  width: 100%;
  margin-bottom:10px;
}
.terms .wrap-collapsible {max-width:950px; margin:0 auto; width:100%;}
.terms .content-inner p, .terms .content-inner li {font-size:1em; line-height:1.25em; letter-spacing: 1px;}
/* breakPoints */

.breakPoint {
	display: inline-grid;
	width:100%;
	margin:0;
	padding:0;
	border-top:1px solid #0067b4;
	border-bottom:1px solid #0067b4;
  	-webkit-box-shadow: 0 -10px 15px -5px #999, 0 10px 15px -5px #999;
  	box-shadow: 0 -10px 15px -5px #999, 0 10px 15px -5px #999;
    overflow: hidden;  /* so the image in right column slashes doesn't overflow; */
}
.breakPointImage {
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;

}
/* bp slash style */
.bpImageRight {
  transform:skewX(-10deg);
border-left: solid 1px #FFF;
margin-right:-50px;         /* to remove white space caused by skew */
overflow: hidden;}
/* for the background imgage to make the border angle work */
.bpImageRight::before{
  content:"";
  display:block;
  height:100%;
  background:inherit; /* inherit the image */
  transform-origin: inherit; /* inherit the same transform-origin */
  transform:skewX(10deg); /* to straighten the background */
  margin-left:-50px;
}

.bpCaptionLeft{margin-right:-50px;} /* to remove white space caused by skew */
.bpCaptionLeft div {width:70%; margin: 0 20% 0 10%;}

.bpImageLeft {
  transform:skewX(-10deg);
border-left: solid 1px #FFF;
margin-left:-50px;         /* to remove white space caused by skew */
overflow: hidden;}
/* for the background imgage to make the border angle work */
.bpImageLeft::before{
  content:"";
  display:block;
  height:100%;
  background:inherit; /* inherit the image */
  transform-origin: inherit; /* inherit the same transform-origin */
  transform:skewX(10deg); /* to straighten the background */
  margin-right:-50px;
}
.bpCaptionRight{margin-left:-50px;} /* to remove white space caused by skew */
.bpCaptionRight div {width:70%; margin: 0 10% 0 20%;}


.breakPointCaption {
	text-align: center;
	padding:8%;
  display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
  background-color:#0067b4;
  color:#fff;
}

.breakPointCaption h4 {
	font-size:1.5em;
	letter-spacing: normal
}
.breakPointCaption p {
	font-size:1.1em;
}
.hideMe {
  opacity:0;
}
/* breakpoint 1 */
.breakPoint.one {
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: minmax(400px, auto);
}
.one .breakPointImage {
	grid-column: 8/16;
	background-image:url(../images/landing/firstmetricbackground.jpg);

}
.one .breakPointCaption {
	grid-column: 1/8;
}
.one .breakPointOverlay {background:rgba(0,0,0,.0); height:100%;}
/* breakpoint 2 */
.breakPoint.two {
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: minmax(400px, auto);
}
.two .breakPointImage {
	grid-column: 1/7;
	background-image:url(../images/landing/secondmetricbackground.jpg);

}
.two .breakPointCaption {
	grid-column: 7/16;
}
.two .breakPointOverlay {background:rgba(0,0,0,.0); height:100%;}
/* breakpoint 3 */

.breakPoint.three {
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: minmax(400px, auto);
}
.three .breakPointImage{
	grid-column: 8/16;
	background-image:url(../images/landing/thirdmetricbackground.jpg);

}
.three .breakPointCaption {
	grid-column: 1/8;
}
.three .breakPointOverlay {background:rgba(0,0,0,.0); height:100%;}


/* breakPoint 4 / contact.  */
.breakPoint.four {
	background-color:#0067b4;
	color:#FFF;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(3, auto);
	font-family: 'lato light';
	padding:0 0 4%;
}
.contactHeader {
	grid-row: 1/2;
	grid-column: 1/16;
	text-align: center;

}
.contactHeader h4 {
	font-size:2.55em;
	text-transform: uppercase;
}
.contactHeader p {
	font-size:1.2em;
}
.contactText {
	grid-row: 3/4;
	grid-column: 3/14;
	text-align: center;
}
.contactText h5 {
	font-size:1.55em;
	letter-spacing:2px;
	margin-bottom:15px
}
.contactText p {
	font-size:1.2em;
	line-height: 1.2em;
	margin-top:0;
	margin-bottom:5px;
	margin-left:25px;
}
.contactForm{
	grid-row:2/3;
	grid-column: 4/13;
	padding-bottom:5%;
}
.contactLeft { width:40%; padding:2.5% 5%; float:left; clear:left;}
.contactRight { width:40%; padding:2.5% 5%; float:right; clear:right;}

.contactInput {
	width:100%;
	padding:10px;
	height:30px;
	font-size:1.1em;
	border:none;
	border-bottom: 1px solid #fff;
	background-color:transparent;
	font-family: 'lato light';
	letter-spacing: 1px;
	color:#fff;
}
.contactInput:nth-of-type(1) {border-top:1px solid #FFF;}


*::-webkit-input-placeholder {
    color: #fff;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #fff;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #fff;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
}
.contactArea {
	width:90%;
	display:block;
	margin:4% auto 0;
	padding:10px;
	height:130px;
	font-size:1.1em;
	border:none;
	border-top:1px solid #FFF;
	border-bottom: 1px solid #fff;
	background-color:transparent;
	font-family: 'lato light';
	letter-spacing: 1px;
	color:#fff;
	margin-top:0;
}

label[for="name"], label[for="email"], label[for="phone"], label[for="message"] {display: none;}


.contactButton {
	width:40%;
	margin-left:auto;
	margin-right:auto;
	max-width:150px;
	height:auto;
	border:1px solid #FFF ;
  clear:both;
	text-align:center;
	border-radius:40px;
	background-color: transparent !important;
  -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  -webkit-box-shadow: 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 25px rgba(0,0,0,.7);
  padding:15px 20px;
  margin-top:20%;
}
.contactButton.text, .contactButton input {
  font-size: 1.5em;
  background-color: transparent;
  color: #FFF;
  width: 100%;
  height: 100%;
  height:auto;
}
 .contactButton input {
   border:none;
 }
.contactButton:active {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
    -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 6px rgba(0,0,0,.9);
}
.contactButton:hover, .contactButton input:hover {
	background-color: #FFF !important;
    color: #0067b4;
}


/* management */
.management .textContent {
  grid-column: 3/11;
}
.management .titleContainer {grid-column: 1/4;}
.managerWrapper{
	display:inline-grid;
 	grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, auto);
  padding:0 10%;
}

/* .managerWrapper:not(:first-of-type) {
	margin-top:10%;
} */
/*  uncomment this to create the bio block to the right of the image instead of text wrapping. move the block outside and above of the bio block and comment out other Image section. */

/*
.managerImage {
	grid-row: 1/6;
	grid-column: 1/2;
}
*/
.managerImage {
  grid-column: 1/9;
  grid-row: 1/6;

}
.managerImage img {
  width:100%;
  border:1px solid #000;
  max-width:250px;
 margin-left:0;
}
.managerBio {
	grid-row: 1/6;
	grid-column: 1/9;
	padding:5%;
}

.managerTitle {

	color:#0067b4;
	border-bottom:1px solid #000;
	margin-bottom:25px;
  margin-top:15px;
  word-spacing: 300px;

}
.managerTitle h3 {
	font-size: 1.6em;
	margin-bottom:0px;
	margin-top:0px;
	font-family: "Lato";
}
.managerTitle p {
	font-size:1.25em;
	margin-bottom:0;
  margin-left:0;
}
.managerBio p {
  margin-left:0;
  margin-right:0;
  font-size:1.3em;
    line-height: 1.3em;

}
/* manager drawers */

.wrap-collapsible {
  /* margin-bottom: 1.2rem 0; */
  /* margin-left:-250px; */
  font-size:1.35em;

}
.wrap-collapsible > div > div > h4 {font-size:1.1em; line-height:1.2em; font-family:lato;margin-bottom:0;margin-top:0}
.wrap-collapsible > div > div > h5 {font-size:.85em; line-height:1.2em; font-family:lato;margin-bottom:10px;margin-top:0}
.wrap-collapsible > div > div > p {font-size:1em; line-height:1.25em; letter-spacing: 1px}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: 'Lato light';
  font-size: 1.2rem;
  text-transform: capitalize;
  text-align: left;
  color: #0067b4;
  background: #transparent;
  cursor: pointer;
  /* border-radius: 7px; */
  transition: all 1.5s ease-out;
}

.lbl-toggle:hover {
  text-decoration: underline;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #0067b4;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;

}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: none;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: .7s;

}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: transparent;
  /* border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px; */
  padding: .75rem 0rem;

}

/* whatsNext */

.whatsNext {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-row: 4;
	font-family: 'Lato Light';
	padding:5% 0;
	background: url(../images/background1.png);
	background-repeat: repeat;
	background-size: contain !important;

}
.whatsNext ul {
	font-size: 1.3em;
	line-height: 1.3em;
	letter-spacing: 1px;
}

.wnHeader {
	grid-row:1/2;
	grid-column:4/14;
	text-align: center;
}
.wnHeader img {
	width:15%;
	margin:0 42.5%;
}
.wnHeader h4 {
	font-size:1.5em;
	line-height: 1.4em;
}
.wnByi h2 {
	font-size:2.75em;
	text-transform: uppercase;
	font-family: 'Lato';
  text-align:center;
}


.wnByiImage {
	grid-row:3/5;
	grid-column: 6/12;
	display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
	-webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
	-webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.wnByiImage img {
	width:100%;
	height:auto;
}
.wnByi {
	grid-row:2/3;
	grid-column:4/14;
	padding:0 10%;
	margin:5% 0 2.5%;
}

.wnAyi {
	grid-row:5/6;
	grid-column:4/14;
	padding:0 10%;
	margin:2.5% 0 5%;
}
.wnAyi p, .wnByi p {
	font-size: 1.5em;
	line-height: 1.5em;
	letter-spacing: 1px;
	font-family: 'Lato';
}

.wnClose {
	grid-row:6/7;
	grid-column: 4/14;
	margin:2% 0;
}
.wnClose h2 {
	font-size:2.2em;
	text-align: center;
	font-family: 'Lato';
  width:70%;
  margin:0 auto;
}


/* access PPM big button */
.accessPPM {
	width:50%;
	max-width:450px;
	height:auto;
	margin-left:25%;
	margin-right:25%;
	margin-top:10%;
	margin-bottom:6%;
	font-family: "Lato";
	text-align: center;
	background-color: #0067b4;

    border-radius: 40px;
    -webkit-transition: all .1s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-box-shadow: 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 25px rgba(0,0,0,.7);
 	display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
	-webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
/* .summary .accessPPM, .terms .accessPPM {
	grid-row:2/3;
	grid-column: 6/12;
} */
.whatsNext .accessPPM {
	grid-row:7/8;
	grid-column: 5/13;
}

.accessPPMLink {
	width:100%;
	height:auto;
	font-size: 1.4em;
	text-align:center;
	border-radius:0px;
	font-weight:300;
	  color:#FFF;
	border:none;
	text-decoration: none;
  padding:15px 30px;
}

/*.accessPPM:hover{letter-spacing:.5px;}*/
.accessPPM:active {
	background-color:#0067b4;
	-webkit-transition: all .1s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	color:#FFF;
		-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 6px rgba(0,0,0,.9);
}
.accessPPM:active:focus, .accessPPM:visited, .accessPPM:focus {color:#FFF;}

/* footer */

footer {
	background-color:#0067b4;
	color:#FFF;
	padding:1% 5%;
	font-family: 'lato light';
  -webkit-box-shadow:  0 -8px 15px -5px #999;
  box-shadow: 0 -8px 15px -5px #999;
}

footer h4 {
	font-size:1.1em;
	text-align: center;
	margin-bottom:.5%;
}

footer p {
	font-size:.9em;
	margin-top:.5%;;
}

/* alert animations */

.alert {
	width: 50%;
	margin-left:25%;
	height:auto;
	color: #fff;
	padding: 15px;
	position: fixed;
	top:35%;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	font-size: 1.5em;
	height: auto;
	text-align: center;
	border-radius: 5px;
	font-family: "Lato";
	text-shadow: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #fff;
	padding-left: 2%;
	padding-right: 2%;
	border:1px solid #545555;
	-webkit-box-shadow: 0px 9px 25px rgba(0,0,0,.7);
	box-shadow: 0px 9px 25px rgba(0,0,0,.7);
	background-size: 40px 40px;
	background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(top left, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
	background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	-webkit-animation: myfade 5s; /* Safari 4+ */
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
}
@-webkit-keyframes myfade {
	0%   { opacity: 1; z-index:1040 }
	100% { opacity: 0; z-index: -1;}
}

@keyframes myfade {
	0%   { opacity: 1;z-index:1040 }
	100% { opacity: 0; z-index: -1;}
}
.alert-success {
	/*color: #ffffff;
	background-color: rgba(38, 185, 154, 0.88);
	border-color: rgba(38, 185, 154, 0.88);
	margin-top: 5%;
	padding: 1%;*/
  	background-color: #61b832 !important;
    border-color: #55a12c !important;
    color: #fff;
}

.alert-info {
    background-color: #4ea5cd !important;
    border-color: #3b8eb5 !important;
    color: #fff;
}

.alert-warning {
    background-color: #eaaf51 !important;
    border-color: #d99a36 !important;
    color: #fff;
}

.alert-danger{
    background-color: #f7eded !important;
    border-color: #ebccd1 !important;
    color: #fff;
}
.alert-error {
    background-color: #de4343 !important;
    border-color: #c43d3d !important;
    color: #fff;
}