/* Reset based on Eric Meyer's CSS 2.0 Reset */
* { border:0; padding:0; margin:0; font-size:100%; font:inherit; vertical-align:baseline; list-style:none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Global styles */
html, body { background:#0e141e; height:100%; font:13px 'Open Sans', Arial, sans-serif; line-height:20px; color:#fff; font-weight:300; letter-spacing:0.4px; }
span { display: none; }
a, a:active { text-decoration:none; color: #fff; }
a:hover { text-decoration:underline; }
.clear { clear: both; }

/* Basic styles */
h1, h2 { font-family: "Source Code Pro", Monaco, "monospace";  }
h1 { font-size: 72px; font-weight: 300; word-spacing:-12px; line-height:88px; margin-left: -8px; letter-spacing: -3px;  }
h2 { font-size: 36px; font-weight: 600; word-spacing: -8px; line-height:52px; margin-left: -3px; letter-spacing: -2px; }
h3 { font-size: 24px; font-weight: normal; line-height: 35px; margin-left: -1px;  color:#fff; padding-bottom: 20px; }
h4 { font-size: 13px; font-weight: normal; text-transform: uppercase; line-height: 20px; letter-spacing: 5px; }
h5 { font-size: 18px; font-weight: normal; line-height: 25px; margin-left: -1px; color:#0e141e; padding-bottom: 10px; }
p { font-size: 13px; line-height:25px;   }
strong { font-weight:600; }
em { opacity:0.7; }
h2:after { content:"\258B"; color:#32c766; animation: 1.2s blink infinite; margin-left: 2px; }
h2.clean:after { content:none; }



/* LAYOUT */
.section { position: relative; min-height:62%; }
.sub.section { background-color:#39424e; padding:0 160px 128px 160px; }
.half, .full { width:40%; display:inline-block; padding:88px 9% 88px 0; z-index:2; vertical-align: top; position: relative; }
.half.second { padding:88px 9% 0 0;  }
.full.second { padding-top:0;  }
.inside { padding-top:24px !important; margin-top: 0 !important; }
.full { width:91%; }
.half p { max-width:520px; }
.half h2  { padding:16% 0 8% 0; }
.full h2  { padding:4% 0; }
.half h3, .full h3 { padding:16% 0 0 0; margin:30px 0 32px 0;  }
.full h3 { padding:0; margin:32px 0;  }
.full.inside h3 { padding-top:0; margin-top:0; }

/* Fixed layer on top of everything */
#fxd { width:100%; height:100%; position:fixed; left: 0; top: 0; z-index: 1; }

/* Pagination */
#fxd .pagination { width:28px; position: relative; left:32px; top:50%; margin-top: -200px; }
#fxd .pagination li a { display:block; width:28px; height:28px; background:url(pagination_default.png) no-repeat center center; background-size:20px 20px; opacity:0.4; cursor:pointer; transition:opacity 0.4s; }
#fxd .pagination li a:hover { opacity:1.0; text-decoration: none; }
#fxd .pagination li a:hover span { display:block; text-decoration:none; opacity:0.8; width: 400px; padding:4px 0 0 30px; font-size:12px; font-weight:300; }
#fxd .pagination li a.selected { background-image: url(pagination_active.png); opacity:1; cursor: default;}

#fxd .pagination li.twitter { border-top:2px solid rgba(255,255,255,0.1); padding-top:15px; margin-top:16px; }
#fxd .pagination li.twitter a { background-image:url(share_twitter.png); padding-bottom:6px; opacity: 1; }
#fxd .pagination li.linkedin a { background-image:url(share_linkedin.png); padding-bottom:4px; opacity: 1; }
#fxd .pagination li.facebook a { background-image:url(share_facebook.png); padding-bottom:4px; opacity: 1; }
#fxd .pagination li.podcast a { background-image:url(share_podcast.png); padding-bottom:4px; opacity: 1; }
#fxd .pagination li.twitter a:hover, #fxd .pagination li.linkedin a:hover, #fxd .pagination li.facebook a:hover, 
#fxd .pagination li.podcast a:hover { opacity:0.6; }
#fxd .pagination li.twitter a:hover span, #fxd .pagination li.linkedin a:hover span, 
#fxd .pagination li.facebook a:hover span, #fxd .pagination li.podcast a:hover span { padding-top:7px; }


#fxd .pagination li.podcast a { background-image:url(share_podcast.png); opacity: 1; }
#fxd .pagination li.podcast a:hover { opacity:0.6; }

#fxd .logo, #prologue .logo { position:absolute; display:block; width:79px; height:79px; top:6%; left:100%; margin-left:-140px; 
  background:url(hackerrank-logo-white@2x.png) no-repeat center center; background-size:57px 57px; }
#fxd .logo h4, #prologue .logo h4 { position:relative; left:-132px; top:30px; }
a.logo:hover { opacity:0.9; text-decoration:none;  }

/* Share controls */
.share a { display:inline-block; height:72px; background:url(share_twitter.png) no-repeat -2px 26px; background-size:20px 20px; padding-left: 22px; padding-right: 16px; opacity:0.6; line-height: 72px; }
.share a:hover { opacity:1; }
.share a.linkedin { background-image:url(share_linkedin.png); }
.share a.facebook { background-image:url(share_facebook.png); }



/* SECTIONS */
/* 01 Home */
#home { height: 100%; }
#home h1 { position:absolute; left:160px; top:48%; width: 560px; color:#fff; z-index: 2; }
#home h1 em { display: inline-block; width:3px; }
#home ul { position:absolute; left:160px; top:80%; width: 560px; z-index: 2;  }
#home ul li { display:block; float:left; color:#738f93; padding:0 30px 0 0; }
#home ul li:nth-child(2) { padding-left:30px; border-left: 1px solid rgba(57,66,78,0.50); }
#home ul li strong { display:block; color:#fff; }
#home a.logo { display:block; width:190px; height:42px; position:absolute; left:160px; top:10%; background:url(hackerrank-logo@2x.png); 
  background-size:100%; z-index:2; }
#fractal { position:absolute; top:0; left:0; width:100%; height:100%; background:url(fractal_exterior@2x.jpg) no-repeat fixed right center; 
  background-size:contain; opacity:0.01; transition:opacity 4s; }
#fractal.active { opacity: 1; }

p.credit { width:240px; font-size:12px; color:rgba(255,255,255,0.7); z-index: 2; position:absolute; left:100%; top:100%; line-height:18px; 
  margin:-72px 0 0 -280px; text-align: right; }
p.credit:hover { color:rgba(255,255,255,0.9); }
p.credit a { color: #fff; }


/* 01b Prologue */
#prologue { background:#1ba94c url(fractal_exterior2@2x.jpg) no-repeat right center; background-size:contain; }
#prologue .logo { z-index:2; }
#prologue h2 { font-size:44px; }


/* 01c Table of contents */
#contents ul li { line-height:30px; font-weight:600;  }
#contents ul li.sub { font-weight:300; padding-left: 25px;  }
#contents ul li em { opacity:0.6; padding-right:5px; font-style: normal; font-weight: normal; }

/* Appendix */
a.subscribe { margin:0 12px 0 0; line-height:48px; }
a.subscribe:hover { opacity:0.8; }

/* More research */

ul.research { width:100%; min-height:300px; }
ul.research li { float:left; width:45%; margin:0 5% 5% 0; height:100%; background-size:cover; box-shadow: 0 14px 28px 0 rgba(115,143,147,.5); border-radius:2px; transition: 0.5s; }
ul.research li:hover { box-shadow: 0 6px 16px 0 rgba(115,143,147,.4); }


ul.research li:nth-child(1) { background-image: url(list-img5.jpg); }
ul.research li:nth-child(2) { background-image: url(list-img1.jpg); }
ul.research li:nth-child(3) { background-image: url(list-img3.jpg); }
ul.research li:nth-child(4) { background-image: url(list-img4.jpg); }

ul.research li a { display:block; color:#fff; padding:50px 20px 25px 20px; font-size:16px; line-height:22px;  }
ul.research li a:hover { text-decoration:none; }


/* Footer */
#footer { height:200px; min-height:200px;  background-color:#0e141e; letter-spacing:0;  }
#footer a.logo { display:block; width:190px; height:42px; background:url(hackerrank-logo@2x.png); background-size:100%; }
#footer p, #footer div.half:nth-child(1) a { color:#738f93; }
#footer div.half:first-child p { padding: 7px 0 0 45px; color:#738f93; font-size: 14px; }
#footer div.half:first-child p em { font-style:normal; color:#39424e;  }
#footer div.half:nth-child(2) a { color:#32c766; }

/* backgrounds */
#contents { background:#576871 url(fractal_interior2@2x.jpg) fixed no-repeat top right; background-size:contain; }
#insight2 { background-color:#2e353e; }
#insight3 { background-color:#0093e2; }
#insight4 { background-color:#11639c; }
#insight5 { background-color:#1f3d83; }
#insight6 { background-color:#39424e; }
#insight7 { background-color:#576871; }


/* Breakpoints */

@media only screen and (max-width: 1480px) { 
  .half, .full { width:42%; padding:88px 7% 0 0; }
  .full { width:96%; }
  .half.second { padding:88px 3% 0 4%; }
}

@media only screen and (max-width: 1260px) { 
  .half, .full { width:45%; padding:88px 4% 0 0; }
  .full { width:95%; }
  .half.second { padding:88px 0 0 4%; }
  #fxd .logo h4, #prologue .logo h4 { display:none; }
  #prologue { background-size:cover; background-position:left center; } 
      ul.research li { width:100%; margin-right:0; }
}

@media (orientation: portrait) { 
  #fractal, #prologue, #contents { background-size:cover; background-position:left center; } 
}

@media only screen and (max-width: 1000px) { 
  #home h1, #home ul,#home a.logo { left:100px; }
  .sub.section { padding:0 100px 72px 100px; }
  .half, .full { width:auto; padding:10% 8% 0 0; }
  .half.second { width:auto; padding:0 8% 0 0; display: block; }
  .half p { max-width:auto; }
}

@media only screen and (max-width: 765px) { 
  .sub.section { background-color:#39424e; padding:0 40px; }
  .credit { display:none; }
  .pagination { display:none; }
  
  #home h1 { position:relative; left:0; padding: 0 80px 0 44px; top:44%; width:auto; font-weight:600; font-size:30px; word-spacing:-6px; line-height:40px; letter-spacing:-1px;  margin-left:-5px; }
  h3 { font-size:20px; }
  #home ul { position:absolute; left:40px; top:78%; width:auto; }
  #home ul li { float:none; padding:10px 0; border:0; }
  #home a.logo { left:40px; top:8%; }
  #home ul li:first-child { padding-left:0; border:none; }
  #home h1 em { width:1px; }
    
      ul.research li { width:100%; margin-right:0; }
  
  .half, .full { width: auto; padding:18% 8% 0 0; }
  .sub.section { padding:0 40px 64px 40px; }
  .half p { max-width:auto; }
  .half h2, .full h2, #prologue h2 { padding:16% 0 8% 0; font-size:24px; word-spacing:-7px; line-height:36px; margin-left: -3px; letter-spacing:0;  }
  .half h3, .full h3 { padding:16% 0 0 0; margin:-24px 0 32px 0;  }
 
  #prologue .logo, #fxd .logo { width:40px; height:40px; top:4%; left:100%; margin-left:-60px; background-size:100%;  }  
  #footer .second p { padding:32px 0 64px 0;  }  
}



/* Cursor animation */
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
}