html,body {
  padding: 0;
  margin: 0px;  
  background: #1b1b1b;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  height: 100%;
} 

*, li, ul, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-weight:normal;
  font-size: 1em;
  line-height: 1.5em;
  list-style: none;
  position: relative;
  float: left;
}

h1 {
  font-weight:100;
  margin: 0;
  padding: 0;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: 2px;
  width: 100%;
}

a, label {
  text-decoration: none;
  cursor: pointer;
  border: none;
}

p {
  line-height:   1.5em;

}

strong {
  font-weight: bold;
  float: none;
}

input[type="radio"], input[type="checkbox"] {
  display: none;
}

:focus{
    outline: 0;
}
  section div:first-child, header div:first-child, footer div:first-child, nav div:first-child  {
height: 100%;
width: 96%;
padding: 0 2%;
}
div.scrollContainer {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  background: #1b1b1b;
}



/* ----------------------//
// Header                //
//-----------------------*/
#introduction {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 100%;
  background: #1b1b1b;
  float: left;
  min-height: 692px;
  margin: 0 0 0 66px;
  border-left: solid 2px #4dd6f8;}
  #introduction div{width: 99%;margin: 0; padding: 0;}
#introduction ul {margin: 0 0 0 24%;width: 76%;}
#introduction ul li {clear: both;cursor: default;}
#introduction ul li:nth-child(1) {margin-top: 52px;}
#introduction ul li ul li:nth-child(1) {margin-top: 0px;}
#introduction ul li h1 {
  font-weight: 100;
  font-family: 'Lato', sans-serif;
  font-size: 80px;
  line-height: 75px;
  color: #ffffff;
  display: inline-block;
  float:left;
  width: auto;
}
#introduction ul li:nth-child(1) h1, #introduction ul li:nth-child(1) ul li {opacity: .3;}
#introduction ul li:nth-child(2) h1, #introduction ul li:nth-child(2) ul li {opacity: .4;}
#introduction ul li:nth-child(3) h1, #introduction ul li:nth-child(3) ul li {opacity: .5;}
#introduction ul li:nth-child(4) h1, #introduction ul li:nth-child(4) ul li {opacity: .6;}
#introduction ul li:nth-child(5) h1, #introduction ul li:nth-child(5) ul li {opacity: .7;}
#introduction ul li:nth-child(6) h1, #introduction ul li:nth-child(6) ul li {opacity: .8;}
#introduction ul li:nth-child(7) h1, #introduction ul li:nth-child(7) ul li {opacity: .9;}
#introduction ul li:hover h1, #introduction ul li:hover ul li {opacity: 1;}
#introduction ul li ul {
  float: left;
  display: inline-block;
  border-left: none;
  margin: 0px;
  padding: 1.1em 0 0 .4em;
  height: auto;
  width: auto;}
#introduction ul li ul li {
  margin: 0;
  width: 100%;
  display: block;
  color: #ffffff;
  font-weight: 300;
  font-size: .7em;
  line-height: 1.2em;}
#lolplaybook header {
  width: 270px;
  height: 2%;
  z-index: 10;
  display: block;
  position: absolute;
  top: -120px;
  left: 0px; }
#lolplaybook header img {
  margin: 19px 0 0 22px;
  display: block;
  width: 90px;
  height: 80px;
  position: relative;
  z-index: 10;
  padding: 0 0 11px 0;
  float: left;
  background: #1b1b1b;}
#lolplaybook header  ul {float: left;margin: 20px 0 0 8px;}
#lolplaybook header ul li {
  margin: 0;
  width: 100%;
  display: block;
  color: #ffffff;
  font-weight: 300;
  font-size: .7em;
  line-height: 1em;
  opacity: .5;
  float: none;}
#lolplaybook header ul li:nth-child(1) {opacity: 1;}

/* ----------------------//
// SHARED STYLES         //
// ----------------------*/
#lolplaybook, #rundavoo, #paris-hilton, #alliedwallet, #about-me {
  width: 100%;
  float:left;
  background-color: #fafafa;
  z-index: 2;
  position:relative;
  padding-top: 0px;
  height: 110%;
  min-height: 692px;
  min-width: 320px;}
#lolplaybook article, #rundavoo article, #paris-hilton article, #alliedwallet article, #about-me article {width: 44%;position: relative;margin: 0;min-height: 679px;}
#lolplaybook p, #rundavoo p, #paris-hilton p, #alliedwallet p, #about-me p{
  font-weight: 300;
  margin: 2em 0 0 0;
  float:left;
  position: relative;
  color: #4f566a;}
#lolplaybook div, #rundavoo div, #paris-hilton div, #alliedwallet div, #about-me div, #lolplaybook-technology div, 
#rundavoo-technology div, #paris-hilton-technology div, #alliedwallet-technology div {height: 100%;}
#lolplaybook h1, #rundavoo h1, #paris-hilton h1, 
#alliedwallet h1, #about-me h1 {text-transform: uppercase;margin: 16% 0 0 0;font-family: 'lato';font-size: 2.8em;}
#lolplaybook h2, #rundavoo h2, #paris-hilton h2, 
#alliedwallet h2, #about-me h2 {
  margin: 1.5em 0 0 0;color: #4f566a;width: 100%;padding-bottom: .5em;border-bottom: 1px solid #4f566a;}
#lolplaybook h3, #rundavoo h3, #paris-hilton h3, 
#alliedwallet h3, #about-me h3 {
  font-size: 2em;
  margin: -2.6em 0 0px 0;
  text-align: center;
  float: left;
  width: 100%;
  background-color: #dedbd5;
  line-height: 1em;
  padding: .8em 0;
  font-weight: 100;
  font-family: 'lato';
  text-transform: uppercase;
position: absolute;
bottom: 0px;
float: left;}
#lolplaybook img, #rundavoo img {max-width: 493px;width: 50%;margin-top: 15%;}
    #paris-hilton img {max-width: 490px; width:50%; margin-top:15%;}
    #alliedwallet img {max-width: 472px;width: 35%;margin-top: 13%;}
#lolplaybook span, #rundavoo a, #paris-hilton a, #alliedwallet a {
  float: right;
  margin:20px 0;
  padding: 8px 20px;
  border: 1px solid #010101;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  position: relative;
  width: 15%;
text-align: center;
}
#lolplaybook-technology, #rundavoo-technology, #paris-hilton-technology, #alliedwallet-technology {
  width: 100%;
  padding: 0 0 150px 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  float: left;
  z-index: 10;
  position: relative;
    min-height: 110%;
min-width: 320px;}
  #lolplaybook-technology article, #rundavoo-technology article, #alliedwallet-technology article {
  float: left;
  width: 44%;
  position: relative;
  margin: 9% 0 0 0;
  display: inline-block;
height: 100%}
#lolplaybook-technology h1, #rundavoo-technology h1, #paris-hilton-technology h1, #alliedwallet-technology h1{
  margin: 0;
  width:100%;
  float: left;
  font-family: 'lato';
  font-size: 2.1em;text-transform: uppercase;}

  #rundavoo-technology h1, #paris-hilton-technology h1 {font-size: 3em;}
#lolplaybook-technology h2, #rundavoo-technology h2, #paris-hilton-technology h2, #alliedwallet-technology h2{
    display: block;
    margin: 1.5em 0 0 0;
    width: 100%;
    float: left;
    font-weight: normal;
    border-bottom: 1px solid #ffffff;
    padding-bottom: .5em;}
#lolplaybook-technology p, #rundavoo-technology p, #paris-hilton-technology p, #alliedwallet-technology p{margin: .5em 0 .5em 0;
width: 100%;
float: left;
line-height: 1.5em;}
#lolplaybook-technology p em, #rundavoo-technology p em, #paris-hilton-technology p em, #alliedwallet-technology p em{font-style: normal;float: none;}

/* ----------------------//
// LOLPlaybook           //
//-----------------------*/
#lolplaybook{border-top: 10px solid #b18752;}
#lolplaybook article {float: left;}
#lolplaybook h1 { color: #b18752;}
#lolplaybook h3 {color: #858B9B;background-color: #d4dbec;} 
#lolplaybook img {float: right;}
#lolplaybook span {color: #b18752;border-color: #b18752;}

/* ----------------------//
// LOLPlaybook- TECH     //
//-----------------------*/
#lolplaybook-technology {background-color: #151820;background-image: url(../images/lolplaybook_bg.png);}
#lolplaybook-technology div article {text-align: left;margin-bottom: 10%;}
#lolplaybook-technology h1 {color: #ffffff;}
#lolplaybook-technology p {color: #959EB4;}
#lolplaybook-technology p em {color: #cfa775;}
#lolplaybook-technology h2 {color: #c6c7c8; border-color: #c6c7c8;}
#lolplaybook-technology article:nth-child(2) {
  width: 50%;
  float: right;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  background-color: RGBA(44, 50, 67, .73);
  border: 2px solid RGBA(44,50,67,1);
  padding: 2% 0 18px 0;
  overflow: hidden;
  margin-top: 9%;}
#lolplaybook-technology span {
  width: 11.1%;
  float: left;
  display: inline-block;
  background-image: none;
  margin-top: 0;
  padding-left: .7%;
  padding-right: 0.7%;
  margin: 0;}
#lolplaybook-technology span img{
  float:left;
  margin: 40px 5% 0 0%;
  width:40%;
}
#lolplaybook-technology span p {color: #C1C1C2;
margin: 1em 0 0 0;
font-size: 1em;
font-weight: 300;}
#lolplaybook-technology span:nth-child(1) {margin-left: 0%;}
#lolplaybook-technology span:nth-child(2) {margin-left: 4%;}
#lolplaybook-technology article:nth-child(2) div {
  width:800%;
  float:left;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}
#lolplaybook-technology span h1 {
color: #cfa775;
font-size: 1.6em;
letter-spacing: 1px;}
  #lolplaybook-technology span label {float: none;}

#lolplaybook-technology menu label:hover {background: url('../images/slide_pagination_hover.png') center center no-repeat;}

/* Slide Position */
#intro-to-creating:checked ~ div {margin-left:0%;}
#step1-mindmap-and-mocks:checked ~ div {margin-left:-132%;}
#step2-design:checked ~ div {margin-left: -232.2%;}
#step3-agile:checked ~ div {margin-left: -332.2%;}
#step4-API:checked ~ div {margin-left: -432.2%;}
#step5-frontend:checked ~ div {margin-left: -532%;}
#step6-launch:checked ~ div {margin-left: -632%;}

/* Animation */ 
#intro-to-creating:checked ~ aside label:nth-child(1),
#step1-mindmap-and-mocks:checked ~ aside label:nth-child(2),
#step2-design:checked ~ aside label:nth-child(3),
#step3-agile:checked ~ aside label:nth-child(4),
#step4-API:checked ~ aside label:nth-child(5),
#step5-frontend:checked ~ aside label:nth-child(6),
#step6-launch:checked ~ aside label:nth-child(7) {
  opacity: 1;
  -webkit-transition: all 1s ease-out 0.6s;
  -moz-transition: all 1s ease-out 0.6s;
  -o-transition: all 1s ease-out 0.6s;
  transition: all 1s ease-out 0.6s;}

/* Controls */
#lolplaybook-technology article:nth-child(2) aside {
text-indent: -9999px;
float: left;
text-align: left;
width: 100%;
margin-top: 3em;}
#lolplaybook-technology article:nth-child(2) aside label { 
  display: none; 
  cursor: pointer; 
  position: absolute;
  height:36px;
  width: 34px;}
#intro-to-creating:checked ~ aside label:nth-child(7),
#step1-mindmap-and-mocks:checked ~ aside label:nth-child(1),
#step2-design:checked ~ aside label:nth-child(2),
#step3-agile:checked ~ aside label:nth-child(3),
#step4-API:checked ~ aside label:nth-child(4),
#step5-frontend:checked ~ aside label:nth-child(5),
#step6-launch:checked ~ aside label:nth-child(6) {
  /* previous button */
  display: block;
  left: 18px;
  bottom: 0px;
  text-align: left;
  background: url('../images/slide_prev.png') center center no-repeat;}
#intro-to-creating:checked ~ aside label:nth-child(7):hover,
#step1-mindmap-and-mocks:checked ~ aside label:nth-child(1):hover,
#step2-design:checked ~ aside label:nth-child(2):hover,
#step3-agile:checked ~ aside label:nth-child(3):hover,
#step4-API:checked ~ aside label:nth-child(4):hover,
#step5-frontend:checked ~ aside label:nth-child(5):hover,
#step6-launch:checked ~ aside label:nth-child(6):hover {background: url('../images/slide_prev_hover.png') center center no-repeat;}

#intro-to-creating:checked ~ aside label:nth-child(2),
#step1-mindmap-and-mocks:checked ~ aside label:nth-child(3),
#step2-design:checked ~ aside label:nth-child(4),
#step3-agile:checked ~ aside label:nth-child(5),
#step4-API:checked ~ aside label:nth-child(6),
#step5-frontend:checked ~ aside label:nth-child(7),
#step6-launch:checked ~ aside label:nth-child(1) {
  /* next button */
  display: block;
  right: 18px;
  bottom: 0px;
  text-align: left;
  background: url('../images/slide_next.png') center center no-repeat;
}

#intro-to-creating:checked ~ aside label:nth-child(2):hover,
#step1-mindmap-and-mocks:checked ~ aside label:nth-child(3):hover,
#step2-design:checked ~ aside label:nth-child(4):hover,
#step3-agile:checked ~ aside label:nth-child(5):hover,
#step4-API:checked ~ aside label:nth-child(6):hover,
#step5-frontend:checked ~ aside label:nth-child(7):hover,
#step6-launch:checked ~ aside label:nth-child(1):hover {background: url('../images/slide_next_hover.png') center center no-repeat;}

/* Pagination */
#lolplaybook-technology menu {
  /* container */
  text-indent: -9999px;
  position: absolute;
  z-index: 99;
  width: 359px;
  bottom: 15px;
  left: 0;
  height: 29px;
  text-align: left;
  margin: 0 18%;}
#lolplaybook-technology menu label {
  /* controls */
  background: url('../images/slide_pagination.png') center center no-repeat;
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 5px;
  float: left;
  text-align: left;}
#lolplaybook-technology menu label:nth-child(1) {margin: auto 5px auto 94px;}
/*style active page button*/
#intro-to-creating:checked ~ menu label:nth-child(1),
#step1-mindmap-and-mocks:checked ~ menu label:nth-child(2),
#step2-design:checked ~ menu label:nth-child(3),
#step3-agile:checked ~ menu label:nth-child(4),
#step4-API:checked ~ menu label:nth-child(5),
#step5-frontend:checked ~ menu label:nth-child(6),
#step6-launch:checked ~ menu label:nth-child(7) {background: url('../images/slide_pagination_selected.png') center center no-repeat;}

/* ----------------------//
// Rundavoo              //
//-----------------------*/
#rundavoo {border-top: 10px solid #ff6d47;}
#rundavoo article {float: right;}
#rundavoo h1 {color: #ff6d47;}
#rundavoo h3 {color: #a9a6a1;background-color: #dedbd5;}
#rundavoo img {float: left;margin: 12% 6% 0 0;}
#rundavoo a {float: left; color:#9ec928; border-color: #9ec928;}
#rundavoo em {display: none;}
#rundavoo a:hover em {
  display: block;
  position: absolute;
  top:50px;
  width: 200%;
  left: 0;
  font-size: .6em;
}
/* ----------------------//
// Rundavoo - TECH       //
//-----------------------*/
#rundavoo-technology {background-color: #1A2329;background-image: url(../images/rundavoo_bg.png);}
#rundavoo-technology article:nth-child(1) {text-align: right;}
#rundavoo-technology article:nth-child(2) {text-align: left;}
#rundavoo-technology span {
  width: 3%;
position: relative;
margin: 7% 3.5% 0 3.5%;
text-align: center;
background-color: RGBA(255, 255, 255, .08);
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
padding: 290px 0%;
color: #B7B3B3;
font-size: 1.5em;
float: left;}
#rundavoo-technology h1 {color: #9ec928;}
#rundavoo-technology p {color: #AEAFB0;}
#rundavoo-technology p em {color: #ff6d47;}
#rundavoo-technology h2 {color: #ffffff; border-color:#645D5D; }

/* ----------------------//
// Paris Hilton          //
//-----------------------*/
#paris-hilton {border-top: 10px solid #93B7FC;}
#paris-hilton article {float: left;}
#paris-hilton h1 {color: #1b1c20;}
#paris-hilton h3 {color: #a9a6a1;background-color: #f0dae6;}
#paris-hilton img {float: right;margin: 12% 0% 0 6%;}
#paris-hilton a {float: right; color:#93B7FC; border-color: #93B7FC;}
#paris-hilton em {display: none;}
#paris-hilton a:hover em {
  display: block;
  position: absolute;
  top:50px;
  width: 100%;
  right: 0;
  font-size: .6em;
}

/* ----------------------//
// Paris Hilton  - TECH  //
//-----------------------*/
#paris-hilton-technology {background-color: #131F33;background-image: url(../images/paris_hilton_bg2.png);background-position: left bottom;}
#paris-hilton-technology article {
  width: 72%;
position: relative;
margin: 10% 0 0 0;
text-align: left;
float: left;}
#paris-hilton-technology h1 {color: #F7F7F7;}
#paris-hilton-technology p {color: #C1C1C1;}
#paris-hilton-technology p em {color: #93B7FC;}
#paris-hilton-technology h2 {color: #F7F7F7;border-color: #DDDDDD;}
#paris-hilton-technology label {
  width: 17%;
  margin: 32px 0 0 0%;
  float: right;
  display: inline-block;
  cursor: pointer;}
#paris-hilton-technology label:first-of-type { margin-top: 9%;}
#paris-hilton-technology label h3 {
color: #fff;
width: 100%;
padding: 0 0 .7em 0;
font-size: 1em;
background-color: transparent;
margin: 0;
line-height: 1.5em;
height: auto;
text-align: center;
font-weight: 300;
font-family: 'Open Sans', sans-serif;}
#paris-hilton-technology label img {
  float: left;
  width: 80%;
  margin: 0 10%;
  opacity: 1;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;}
#paris-hilton-technology label:hover {opacity: .7;}

/* ----------------------//
// Allied Wallet         //
//-----------------------*/
#alliedwallet {border-top: 10px solid #004e9e;min-height:775px;}
#alliedwallet article {float: right;}
#alliedwallet h1 {color: #004e9e;margin-top: 27%;}
#alliedwallet h3 {color: #6e839b;background-color: #ebf1f7;}
#alliedwallet img {
  float: left;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  border: 3px solid #fff;
  -webkit-box-shadow: -2px 2px 6px 0 rgba(0,0,0,.3);
  box-shadow: -2px 2px 6px 0 rgba(0,0,0,.3);
  width: 49%;}
  #alliedwallet a {float: left;
color: #004e9e;
border-color: #004e9e;
margin-right: 24%;
}
  #alliedwallet em {display: none;}
  #alliedwallet a:hover em {
    display: block;
    position: absolute;
    top:50px;
    width: 100%;
    right: 0;
    font-size: .6em;}

/* ----------------------//
// Allied Wallet - TECH  //
//-----------------------*/
#alliedwallet-technology {background-color: #0F2B57;background-image: url(../images/alliedwallet_bg.png);background-position: left center}
#alliedwallet-technology article {text-align: left;}

#alliedwallet-technology h1 {color: #9ec928;}
#alliedwallet-technology p em {color: #FF5B00;}
#alliedwallet-technology h2 {color: #ffffff;border-color: #ffffff;}

#alliedwallet-technology div article {text-align: left;}
#alliedwallet-technology h1 {color: #ffffff;}
#alliedwallet-technology p {color: #CCD1DB;}
#alliedwallet-technology article:nth-child(1) {margin-right: 2%; float: left;margin-top: 9%;}
#alliedwallet-technology article:nth-child(2) {
width: 50%;
margin-top: 12%;
float: right;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
background-color: RGBA(255, 255, 255, .1);
border: 1px solid #61708E;
padding: 2% 0 19px 0;
overflow: hidden;}
#alliedwallet-technology span {
  width: 11.1%;
  float: left;
  display: inline-block;
  background-image: none;
  margin-top: 0;
  padding-left: .7%;
  padding-right: 0.7%;
  margin: 0;
  text-align: left}
#alliedwallet-technology span p {color: #CCD1DB;
margin: 1em 0 0 0;
font-size: 1em;
font-weight: 300;}
#alliedwallet-technology span a {color: #FF5B00;font-size: .9em;font-weight: normal; }
#alliedwallet-technology span:nth-child(1) {margin-left: 0%;}
#alliedwallet-technology span:nth-child(2) {margin-left: 4%;}
#alliedwallet-technology article:nth-child(2) div {
  width:800%;
  float:left;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */}
#alliedwallet-technology span h1 {
  color: #ffffff;
  font-size: 1.6em;
  letter-spacing: 1px;}

#alliedwallet-technology menu label:hover {background: url('../images/slide_pagination_hover.png') center center no-repeat;}

/* Slide Position */
#aw0:checked ~ div {margin-left:0%;}
#aw1:checked ~ div {margin-left:-132%;}
#aw2:checked ~ div {margin-left: -232.2%;}
#aw3:checked ~ div {margin-left: -332.2%;}
#aw4:checked ~ div {margin-left: -432.2%;}
#aw5:checked ~ div {margin-left: -532%;}
#aw6:checked ~ div {margin-left: -632%;}

/* Animation */ 
#aw0:checked ~ aside label:nth-child(1),
#aw1:checked ~ aside label:nth-child(2),
#aw2:checked ~ aside label:nth-child(3),
#aw3:checked ~ aside label:nth-child(4),
#aw4:checked ~ aside label:nth-child(5),
#aw5:checked ~ aside label:nth-child(6),
#aw6:checked ~ aside label:nth-child(7) {
  opacity: 1;
  -webkit-transition: all 1s ease-out 0.6s;
  -moz-transition: all 1s ease-out 0.6s;
  -o-transition: all 1s ease-out 0.6s;
  transition: all 1s ease-out 0.6s;}

/* Controls */
#alliedwallet-technology article:nth-child(2) aside {text-indent: -9999px;
float: left;
text-align: left;
width: 100%;
margin-top: 3em;}
#alliedwallet-technology article:nth-child(2) aside label { 
  display: none; 
  cursor: pointer; 
  position: absolute;
  height:36px;
  width: 34px;}
#aw0:checked ~ aside label:nth-child(7),
#aw1:checked ~ aside label:nth-child(1),
#aw2:checked ~ aside label:nth-child(2),
#aw3:checked ~ aside label:nth-child(3),
#aw4:checked ~ aside label:nth-child(4),
#aw5:checked ~ aside label:nth-child(5),
#aw6:checked ~ aside label:nth-child(6) {
  /* previous button */
 display: block;
left: 18px;
bottom: 0px;
text-align: left;
background: url('../images/slide_prev.png') center center no-repeat;}
#aw0:checked ~ aside label:nth-child(7):hover,
#aw1:checked ~ aside label:nth-child(1):hover,
#aw2:checked ~ aside label:nth-child(2):hover,
#aw3:checked ~ aside label:nth-child(3):hover,
#aw4:checked ~ aside label:nth-child(4):hover,
#aw5:checked ~ aside label:nth-child(5):hover,
#aw6:checked ~ aside label:nth-child(6):hover {background: url('../images/slide_prev_hover.png') center center no-repeat;}

#aw0:checked ~ aside label:nth-child(2),
#aw1:checked ~ aside label:nth-child(3),
#aw2:checked ~ aside label:nth-child(4),
#aw3:checked ~ aside label:nth-child(5),
#aw4:checked ~ aside label:nth-child(6),
#aw5:checked ~ aside label:nth-child(7),
#aw6:checked ~ aside label:nth-child(1) {
  /* next button */
  display: block;
right: 18px;
bottom: 0px;
text-align: left;
background: url('../images/slide_next.png') center center no-repeat;
}
#aw0:checked ~ aside label:nth-child(2):hover,
#aw1:checked ~ aside label:nth-child(3):hover,
#aw2:checked ~ aside label:nth-child(4):hover,
#aw3:checked ~ aside label:nth-child(5):hover,
#aw4:checked ~ aside label:nth-child(6):hover,
#aw5:checked ~ aside label:nth-child(7):hover,
#aw6:checked ~ aside label:nth-child(1):hover {background: url('../images/slide_next_hover.png') center center no-repeat;}

/* Pagination */
#alliedwallet-technology menu {
text-indent: -9999px;
position: absolute;
z-index: 99;
width: 359px;
bottom: 15px;
left: 0;
height: 29px;
text-align: left;
margin: 0 18%;
}
#alliedwallet-technology menu label {
  /* controls */
  background: url('../images/slide_pagination.png') center center no-repeat;
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 5px;
  float: left;
  text-align: left;}
#alliedwallet-technology menu label:nth-child(1) {margin: auto 5px auto 94px;}
/*style active page button*/
#aw0:checked ~ menu label:nth-child(1),
#aw1:checked ~ menu label:nth-child(2),
#aw2:checked ~ menu label:nth-child(3),
#aw3:checked ~ menu label:nth-child(4),
#aw4:checked ~ menu label:nth-child(5),
#aw5:checked ~ menu label:nth-child(6),
#aw6:checked ~ menu label:nth-child(7) {background: url('../images/slide_pagination_selected.png') center center no-repeat;}


/* ----------------------//
// About Me              //
//-----------------------*/
#about-me {width: 100%;float: left;height: auto;border-top: 10px solid #4f566a;}
#about-me article {
width: 92%;
float: left;
margin: 0 4%;
}
#about-me p {width:50%;clear: both;} 
#about-me h1 {margin-top: 15%;}

/* ----------------------//
// Contact Me            //
//-----------------------*/
#contact-me {
width: 100%;
float: left;
background-color: #1b1b1b;
margin-top: 100px;
padding: 100px 0px 0px 0;
font-family: 'lato';
position: relative;
border-top: 10px solid #4dd6f8;}
#about-me #contact-me h1 {color: #ffffff;margin: 0 2% 1em 2%;width: 96%;}
#contact-me p {color: #ffffff;
margin: 0em 0 1em 2%;
font-weight: normal;
clear: left;
font-size: 1em;}
#contact-me h1 em {color: #4E4D4E;
font-style: normal;
padding-right: 8px;
width: 100%;
}
#contact-me img {float: right; margin: -4em 2% 1em 0;}
#contact-me span {
  width: 100%;
color: #fff;
float: left;
text-align: center;
font-size: .6em;
position: relative;
bottom: 0px;
margin: 50px 0;
}

/* ----------------------//
// Navigation            //
//-----------------------*/
#navBar {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 51px;
  z-index:999;
  -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.1);
  box-shadow: 0 0 6px 0 rgba(0,0,0,.1);
  padding: 0;
  background-color: #101010;
  color: #c6c7c8;
  min-width: 320px;
}
#navBar a {
  display:block;
  width:46px;
  height: 41px;
  float:left;
  text-indent: -9999px;
  margin: 5px 0 5px -3px;
  background-image: url('../images/logo_default.png'); 
  background-position: center center;
  background-repeat: no-repeat;
}
#navBar h2 {
  display:block;
  font-size: .8em;
  float: left;
  margin:19px 0 0 30px;
  line-height: 1em; 
  color: #c6c7c8;
}

#navBar ul {
  display: block;
  float: right;
  margin: 18px 0 0 7px;
}

#navBar ul li {
  display: inline-block;
  float: right;
  width: auto;
  margin-right: 33px; 
}

#navBar ul li a {
  display: block;
  float: left;
  background: none;
  text-indent: 0px;
  width: auto;
  height: auto;
  padding: 0 0 7px 0;
  margin: 0;
  letter-spacing: 1px;
  line-height: 1em;
  color: #c6c7c8;
}

#navBar ul li a:hover {
    border-bottom: 1px solid #c6c7c8;
}

#navBar menu {
  display: block;
  float: right;
  margin: 5px 0px 9px 0;
  width: 26px;
  height: 24px;
  text-indent: -9999px;
  cursor: pointer;
  padding: 7px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  background: url('../images/main_menu_icon.png') center center no-repeat;
  border: 2px solid #101010;
}

#navBar menu:hover {border: 2px solid #c6c7c8; background: url('../images/main_menu_icon_hover.png') center center no-repeat;}

#navBar menu ul {
  display: none;
  position: relative;
  top: 37px;
  width: 132px;
  margin: 0;
  padding: 0;
  float: right;
  z-index: 1;
  -webkit-border-radius: 0px 0 6px 6px;
  border-radius: 0px 0 6px 6px;
  right: -5px;
  -webkit-box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1);
  box-shadow: -2px 2px 3px 0 rgba(0,0,0,.1);
  background-color: rgba(0, 0, 0, 0.901961);
}
#navBar menu ul li {
  width: 92%;
  float: left;
  display: block;
  padding: 5px 4%
}

#navBar menu ul li a {
  display: block;
  float: left;
  background: transparent;
  text-indent: 0px;
  width: 100%;
  height: auto;
  padding: 5px 0;
  margin: 0;
  line-height: 1em;
  text-align: center;
  color: #c6c7c8;
  font-size: .8em;
}

#navBar menu ul li a:hover{
  border-left: none;
  border-right: none;
  padding: 4px 0 ;
  color: #010101;
  background-color:  #4dd6f8;
  border-top: 1px solid  #c6c7c8;
  border-bottom: 1px solid #c6c7c8;
}
#navBar.introduction {display: none;}
#navBar.lolplaybook, #navBar.rundavoo, #navBar.paris_hilton, #navBar.alliedwallet  {display: block;}
#navBar.lolplaybook div > a, #navBar.rundavoo > a, #navBar.paris_hilton div > a, #navBar.alliedwallet div > a {
  -webkit-animation: fadein 1s; /* Safari and Chrome */
  -moz-animation: fadein 1s; /* Firefox */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera */
  animation: fadein 1s;
}

#navBar.lolplaybook div > a {background: url('../images/logo_lolplaybook.png') center center no-repeat;}
#navBar.lolplaybook div > ul li a:hover,
#navBar.lolplaybook div > ul li:nth-child(4) a  {border-bottom: 2px solid #b18752;}
#navBar.lolplaybook menu ul li a:hover{border-top: 1px solid #000000;border-bottom: 1px solid #000000;
  background-color:  #b18752;
}

#navBar.rundavoo div > a {background: url('../images/logo_rundavoo.png') center center no-repeat;}
#navBar.rundavoo div > ul li a:hover,
#navBar.rundavoo div > ul li:nth-child(3) a  {border-bottom: 2px solid #ff6d47;}
#navBar.rundavoo menu ul li a:hover{border-top: 1px solid #000000;border-bottom: 1px solid #000000;
  background-color:  #ff6d47;
}

#navBar.paris_hilton div > a {background: url('../images/logo_paris_hilton.png') center center no-repeat;}
#navBar.paris_hilton div > ul li a:hover, 
#navBar.paris_hilton div > ul li:nth-child(2) a {border-bottom: 2px solid #93B7FC;}
#navBar.paris_hilton menu ul li a:hover{border-top: 1px solid #000000;border-bottom: 1px solid #000000;
  background-color:  #93B7FC;
}

#navBar.alliedwallet div > a {background: url('../images/logo_alliedwallet.png') center center no-repeat;}
#navBar.alliedwallet div > ul li a:hover, 
#navBar.alliedwallet div > ul li:nth-child(1) a {border-bottom: 2px solid #f46c0c;}
#navBar.alliedwallet menu ul li a:hover{border-top: 1px solid #000000;border-bottom: 1px solid #000000;
  background-color:  #f46c0c;
}

/* ----------------------//
// Mobile Menu           //
//-----------------------*/
#mobileMenu {
  min-height: 100%;
  width: 240px;
  position: fixed;
  right: -240px;
  background-color: #4f566a;
  color: #c6c7c8;
  z-index: 9999;-webkit-transition: right .25s ease-out;
  -moz-transition: right .25s ease-out;
  -ms-transition: right .25s ease-out;
  transition: right .25s ease-out;
  display: block;}
#mobileMenu.open {right:0;}
#mobileMenu span{
  display: block;
  position: absolute;
  top:-1px;
  left: -58px;
  margin: 0;
  width:  58px;
  height: 58px;
  text-indent: -9999px;
  cursor: pointer;
  padding: 0;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
  background: #4f566a url('../images/main_menu_icon.png') center center no-repeat;
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  transition: all .25s ease-out;
  border: none;
  opacity: 1;}
#mobileMenu span:hover{background: #4f566a url('../images/main_menu_icon_hover.png') center center no-repeat;opacity: : .5;}
#mobileMenu ul.projects {
  width: 100%;
  font-size: .9em;
  margin: 1em 0% 0 0%;
  float: left;
  border-bottom: 1px solid #596674;
  padding-bottom: 1em;}
#mobileMenu ul.projects li {margin: .5em 0;width: 100%;}
#mobileMenu ul.projects li a {
  width: 90%;
  color: #ffffff;
  font-size: 1em;
  float: left;
  line-height: 2em;
  text-transform: uppercase;
  padding: 0 5%;
  opacity: .9;}
#mobileMenu ul li a:hover {opacity: 1;}
#mobileMenu ul.social_media {
  width: 90%;
  text-indent: -9999px;
  margin: 0%;
  border-bottom: 1px solid #596674;
  padding: 1em 5% 1em 5%;}
#mobileMenu ul.social_media li {
  width: 32px;
  height: 32px;
  display: inline-block;
  padding: 0 11px 0 0;
  margin: 0;}
#mobileMenu ul.social_media li a {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height:100%;
  float: left;
  opacity: .95;}
#mobileMenu ul.social_media li:nth-child(1) a {background-image: url('../images/github.png');}
#mobileMenu ul.social_media li:nth-child(2) a {background-image: url('../images/linkedin.png');}
#mobileMenu ul.social_media li:nth-child(3) a {background-image: url('../images/twitter.png');}
#mobileMenu ul.social_media li:nth-child(4) a {background-image: url('../images/instagram.png');}
#mobileMenu ul.social_media li:nth-child(5) a {background-image: url('../images/facebook.png');}
#mobileMenu ul.info {
  width: 100%;
  font-size: .9em;
  margin: 2em 0% 0 0%;
  border-bottom: 1px solid #596674;
  padding-bottom: 2em;}
#mobileMenu ul.info  li {margin: .5em 0;width: 100%;}
#mobileMenu ul.info  li a {
  width: 90%;
  color: #fff;
  font-size: 1em;
  float: left;
  line-height: 1.5em;
  text-transform: uppercase;
  padding: 0 5%;
  opacity: 1;
  font-family: 'lato';}
#mobileMenu > a {
  width: 90%;
  color: #000;
  font-size: 1em;
  float: left;
  line-height: 1.5em;
  text-transform: uppercase;
  padding: 0 5%;
  opacity: .9;
  font-family: 'lato';
  padding-top: 1em;
  text-transform: none;
  font-size: .8em;
  position: relative;
  bottom: 0px;}

/* ----------------------//
// NO-JS LightBox        //
//-----------------------*/
#image-gallery label {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: RGBA(0, 0, 0, .8);
  z-index: 9996;
  display:block;
  margin:0;
  -webkit-animation: fadein .5s; /* Safari and Chrome */
  -moz-animation: fadein .5s; /* Firefox */
  -ms-animation: fadein .5s; /* Internet Explorer */
  -o-animation: fadein .5s; /* Opera */
  animation: fadein .5s;}
#image-gallery span {
  display: none;
  position:fixed;
  width: 590px;
  height: 540px;
  left: -295px;
  margin-left: 50%;
  top: 55px;
  z-index: 9997;
  background-image: none;}
#image-gallery span label {
  display: none;  
  z-index: 9999;
  position: absolute;
  top: 3px;
  left: 95%;
  width: 28px;
  height: 27px;
  background:url(../images/close_icon.png) center center no-repeat;
  text-indent: -9999px;}
#image-gallery span label:hover {background:url(../images/close_icon_hover.png) center center no-repeat;}
#image-gallery span img {
  max-width: 590px;
  max-height: 540px;
  -webkit-box-shadow: 1px 1px 2px 0 #050505;
  box-shadow: 1px 1px 2px 0 #050505;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  z-index: 9998;
  position: relative}
#image-gallery span:hover label{display: block;}

/* Images Full Size Images */
#images_off:checked + label {display:none;}
#ph_monetization_funnel:checked + span, #ph_social_managment:checked + span, #ph_traffic_flow_map:checked + span,  
#process-mindmap:checked + span, #process-balsamiq:checked + span, #process-pivotal:checked + span {
  display: block;
  -webkit-animation: fadein .5s; /* Safari and Chrome */
  -moz-animation: fadein .5s; /* Firefox */
  -ms-animation: fadein .5s; /* Internet Explorer */
  -o-animation: fadein .5s; /* Opera */
  animation: fadein .5s;}


/* ----------------------//
// Animation: Fade       //
//-----------------------*/
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}​