/********************************** 

LifeMap Template

***********************************/

/* container */
.lifeMap-container {
  margin: 0 auto;
}

.lifeMapNav-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}
.lifeMapDropdownContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 5px;
}
.lifemap-zebraStripe{ padding: 10px 0;}
.lifemap-zebraStripe:nth-child(even){  background-color: #eaeaea;}


/* Style for Header */
.lifeMapBanner { 
  width: 100%;
  height: 600px;
  position: relative;
  overflow:hidden;
}
.lifeMapRound h2
{
    color: white;
    font-weight: lighter;
    text-align: center;
}

/*  Style for Navigation */
.lifeMapNav, .lifeMapNav ul {
  color: #686868;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.lifeMapNav span {
  display: block;
}
.lifeMapNav li {
    border-radius: 3px;
    padding-bottom: 3px;
}
.lifeMapNav li .fal {
    display: inline-block;
    padding: 1%;
    border: 4px solid transparent;
    border-radius: 50%;
    font-size: 1.5em;
    background: rgba(255,255,255,0.1);
    -webkit-transition: border .5s;
    -moz-transition: border .5s;
    -o-transition: border .5s;
    -ms-transition: border .5s;
    transition: border .5s;
}
.lifeMapNav a {
    display: block;
    text-decoration: none;
    padding: 0.3em;
    overflow: hidden;
    background-color: rgba(0,143,190,.7);
    color: #eaeaea;
}
/* Remove the blue Webkit background when element is tapped */
.lifeMapNav a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.lifeMapNav a:hover {
    background-color: rgba(0,0,0,.8);
    color: #fff;
}

/* style for the content section */
.lifeMapBanner video {
    width: 100%;
    height: auto;
    transition: 1s opacity;
    z-index:-100;
}
.lifeMapDropdown, .lifeMapDropdown-sub {
    list-style: none;
    margin: 0;
    cursor: pointer;
    background-color: #FDF3E7;
    background-color: hsla(0, 0%, 41%,0.5);
}
.lifeMapDropdownContainer label {
	display:block;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 0 #001e4d;
    padding: 1em;
    border-radius: 3px;
    font-size: 200%;
    width: 100%;
}
.lifeMapDropdownContainer input {
	position:absolute;
	left:-999em
}
.show {
  opacity:0;
	max-height:0;
	border:none;
  width: 100%;
}
.show ul {
  list-style: none;
  display: initial;
  margin: 0;
  padding: 0;
}
.show li {
    /*background-color: hsl(0, 0%, 92%);*/
    background-color: hsl(33, 82%, 96%);
    box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
    /*min-width: 160px;*/
    cursor: pointer;
    border-radius: 3px;
}
.show li:hover {
  background-color: hsl(359, 100%, 40%);
  color: #fff;
}

.show a:hover {
  color: #fff;
  text-shadow: 0 1px 0 #001e4d;
}
.show a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
}
.lifeMapDropdownContainer input[type=checkbox]:checked + div {
  max-height:310px;
  opacity:1;
  transition:opacity 1.5s linear, max-height 1.5s linear;
}
.lifeMapRound {
  border-radius: 50%;
  border-style: dashed ;
  border-color: #eaeaea;
  border-width: thin;
  width: 150px;
  height: 150px;
  background-color: #008fbe;
  line-height: 150px;
}

.lifemap-content {
  max-width: 940px;
  margin: 0 auto;
  flex-direction: column;
  height: auto;
  padding-left: 5px;
}
.lifemap-content:nth-child(even){ background-color: #fefaf5;}

@media (max-width:767px)
{
  #bgvid { display: none; }
  .lifeMapHeader { 
    width:100%;
  }
  .lifeMapBanner {
    background: url('/media/02-images/lifemap/Career-Planning-Still_940x529.png');
    background-repeat: no-repeat;
   	background-size: cover;
    background-position: center;
  }
  .lifeMapDropdownContainer
  {
    top: 70%;
    width: 100%;
  }
  .lifeMapDropdownContainer label {
    font-size: 110%;
    width: 100%;
  }
  .lifeMapNav {margin: 0 auto; }
  .lifeMapDropdown {cursor: pointer;}
  .show ul { display: inline-block;padding: 18px;}
  .show > ul {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
  }
  .lifeMapNav li { display: inline-block; width: 49%; padding: 5px;}
  .show a {
    margin-bottom: 1.2em;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    padding: 10px;
  }
  .lifeMapNav-container {
    width: 100%;
  top: 50px;}
  .lifeMapDropdown, .lifeMapDropdown-sub {
  font-size: 110%;
  width: 320px;
  }
  .lifeMapDropdownContainer label {
    font-size: 110% !important;

  }
}

@media (min-width:768px)and (max-width:1023px)
  {
  	#bgvid { display: none; }
  	.lifeMapNav-container {top: 6%;}
   	.lifeMapBanner {
      	background: url('/media/02-images/lifemap/Career-Planning-Still_Large.png');
      	background-repeat:no-repeat;
      	background-size:cover;
   		
  }
  .lifeMapDropdownContainer label {
    font-size: 150%;
  }
		
	}