@import url(https://fonts.googleapis.com/css?family=Pacifico);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

h1, h2, h2, h3, h4, h4, h5, h6,
p,
li, img {
  margin-bottom: 1.2rem; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "usual", sans-serif;
  font-size: 62.5%;
  height: 100%;
  color: white;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

/* *************
   TYPE
************* */
h1, h2 {
  font-family: "freight-display-pro", serif;
  font-weight: 700;
  margin-bottom: 3.6rem;
  font-size: 6rem;
  line-height: 6.2rem; }

h2 {
  font-size: 4.5rem;
  margin-bottom: 1.8rem;
  line-height: inherit; }

h3, h4 {
  font-size: 2.0rem;
  font-family: "usual", sans-serif;
  margin-bottom: 1.8rem;
  text-transform: uppercase; }

h4 {
  font-size: 1.7rem;
  letter-spacing: 2px;
  line-height: 2.9rem; }

p, li {
  font-family: "usual", sans-serif;
  font-size: 2rem;
  line-height: 2.9rem;
  margin-bottom: 1.8rem; }

.final {
  margin-bottom: 0 !important; }

b {
  font-weight: 600; }

li {
  list-style-type: disc;
  list-style-position: inside; }

section {
  box-sizing: border-box; }

/* *************
   PAGE
************* */
#header {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  height: 25rem;
  overflow-y: hidden; }
  #header h1, #header h2 {
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
    width: 90%;
    margin: auto;
    font-size: 20rem; }
  #header div {
    width: 90%;
    margin: auto; }
    #header div img {
      display: block;
      margin-top: 3rem;
      width: 20vw;
      max-width: 20rem; }

#underheader {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  background-color: #eee;
  padding: 4rem 0; }
  #underheader a {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: #1A6DBA; }
    #underheader a:hover {
      color: #000; }
  #underheader p, #underheader li {
    width: 88%;
    margin: auto;
    color: #363636;
    font-size: 2.3rem;
    line-height: 4rem; }

#focus {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0b1f34;
  color: white; }
  #focus .row {
    padding: 10rem 0;
    width: 85%;
    margin: auto; }
  #focus p, #focus li {
    margin-bottom: 3.6rem; }
  #focus img {
    max-width: 40%;
    margin-bottom: 0; }

.fullbleeditems {
  padding: 0 !important; }
  .fullbleeditems img {
    margin: 0 0 -0.1rem 0 !important; }

.darkitems {
  background-color: #1f1f1f; }

.items {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  padding: 4rem 0;
  color: #363636; }
  .items .eightyfiverow {
    width: 85%;
    margin: auto; }
  .items .seventyfiverow {
    width: 75%;
    margin: auto; }
  .items a {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: #1A6DBA; }
    .items a:hover {
      color: #000; }
  .items img {
    max-width: 100%;
    margin-bottom: 5.4rem; }
  .items .tallimg {
    max-width: 50%; }
  .items #v, .items #v1, .items #v2, .items #v3 {
    position: relative;
    width: 0;
    height: 30rem;
    border-left: 0.3rem dashed #9c8bb8; }
    .items #v p, .items #v1 p, .items #v2 p, .items #v3 p, .items #v li, .items #v1 li, .items #v2 li, .items #v3 li {
      color: #9c8bb8;
      margin-left: 2rem;
      margin-bottom: 0 !important;
      font-size: 1.5rem; }
  .items #v1 {
    margin: 3rem auto -22rem auto; }
    .items #v1 p, .items #v1 li {
      margin-left: -6rem; }
  .items #v2 {
    margin: -17rem auto 3rem auto; }
  .items #v3 {
    margin: 3rem auto -11rem auto; }
    .items #v3 p, .items #v3 li {
      margin-left: -6rem; }
  .items .top {
    position: absolute;
    top: 0; }
  .items .bottom {
    position: absolute;
    bottom: 0; }
  .items .biggeriphone {
    width: 35rem;
    margin: 0; }

/***********
  RELATED
************/
.grid {
  flex-flow: column;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
  font-size: 0; }

.grid-item {
  position: relative;
  display: inline-block;
  margin: 0;
  width: 100%;
  min-height: 30rem;
  height: 30vh;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out; }
  .grid-item a {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: inherit;
    color: inherit; }

.chromefix-grid-item {
  display: block;
  min-width: 0; }

.box {
  width: 88%;
  margin: auto;
  position: relative;
  top: 48%;
  -webkit-transform: translateY(-48%);
  -ms-transform: translateY(-48%);
  transform: translateY(-48%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center; }
  .box p, .box li, .box img {
    margin-bottom: 0; }

.text-container, #green .text-container, #orange .text-container {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out; }
  .text-container:hover, #green .text-container:hover, #orange .text-container:hover {
    background-color: #e1e1e1;
    color: #363636; }

#green {
  background: url("../assets/shaan.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  #green .text-container {
    background-color: #8BB89C; }

#orange {
  background: url("../assets/erik.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  #orange .text-container {
    background-color: #d1a47e; }

#purple {
  background-color: #9c8bb8; }
  #purple:hover {
    background-color: #e1e1e1;
    color: #363636; }

#lightpink {
  background-color: #B88B8B; }
  #lightpink:hover {
    background-color: #e1e1e1;
    color: #363636; }

#blue {
  background-color: #72ACD3; }
  #blue:hover {
    background-color: #e1e1e1;
    color: #363636; }

#twitterblue {
  background-color: #55acee; }
  #twitterblue:hover {
    background-color: #e1e1e1;
    color: #363636; }

#royalblue {
  background-color: #326492; }
  #royalblue:hover {
    background-color: #e1e1e1;
    color: #363636; }

#pink {
  background-color: #B7619D; }
  #pink:hover {
    background-color: #e1e1e1;
    color: #363636; }

#neonpurple {
  background-color: #6168C3; }
  #neonpurple:hover {
    background-color: #e1e1e1;
    color: #363636; }

#red {
  background-color: #BC6E6E; }
  #red:hover {
    background-color: #e1e1e1;
    color: #363636; }

#related {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 45rem;
  height: 45vh;
  position: relative; }
  #related #title {
    min-height: 15rem;
    height: 15vh;
    background-color: #1f1f1f;
    color: white; }
    #related #title h1, #related #title h2 {
      position: relative;
      top: 48%;
      -webkit-transform: translateY(-48%);
      -ms-transform: translateY(-48%);
      transform: translateY(-48%);
      width: 85%;
      margin: auto;
      text-align: center; }
  #related h2 {
    padding: 0;
    margin-bottom: 1.8rem; }
  #related .grid {
    position: absolute;
    bottom: 0; }

/* ***************
	EASTER EGGS
*************** */
#the {
  color: white !important; }
  #the:hover {
    color: #00c3f0 !important; }

/* *************
   LAYOUT HELP
************* */
.toppad {
  padding-top: 6rem; }

.botpad {
  padding-bottom: 6rem; }

/* ***********************
   MAGAZINE TITLE COLORS
*********************** */
.green {
  background-color: #8BB89C;
  color: #4c8f60; }

.purple {
  background-color: #9c8bb8;
  color: #78589a; }

.blue {
  background-color: #72ACD3;
  color: #3978a6; }

.lightpink {
  background-color: #B88B8B;
  color: #ac6167; }

.pink {
  background-color: #B7619D;
  color: #8a4b7f; }

.red {
  background-color: #BC6E6E;
  color: #894945; }

.yellow {
  background-color: #bfc07f;
  color: #a39e56; }

.royalblue {
  background-color: #326492;
  color: #173e69; }

/* *************
	VIBRANCY
************* */
.vibrantpurple {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #32194f;
  color: white; }

.vibrantblue {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0b2846;
  color: white; }

.vibrantcontrast {
  background-color: #eee; }
  .vibrantcontrast h2 {
    font-size: 3.2rem;
    margin-bottom: 7.2rem; }
  .vibrantcontrast #quotefinal {
    margin-bottom: -3.2rem; }
  .vibrantcontrast .col-md {
    padding-left: 3rem;
    padding-right: 3rem; }

/* *************
	TIME PAGE
************* */
.iphone7video {
  position: relative;
  width: 29.7rem;
  height: 60.4rem; }
  .iphone7video img {
    position: absolute;
    z-index: 3;
    width: 29.7rem;
    height: 60.4rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    pointer-events: none; }
  .iphone7video video {
    position: absolute;
    z-index: 2;
    top: -7.3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 25.5rem;
    height: 75.0rem; }

#timecta img {
  width: 20vw;
  max-width: 20rem; }
#timecta > div:first-of-type {
  margin-bottom: -10rem; }

#subscribe {
  margin-top: 4rem; }

#subscribe > div:first-of-type p, #subscribe > div:first-of-type li {
  width: 58%;
  margin: auto; }

form {
  margin-top: 4rem;
  margin-bottom: 0; }
  form input {
    border: 1.5px solid #1A6DBA;
    border-radius: 0.5rem;
    outline: none;
    padding: 1rem 1rem;
    width: 49.5%;
    background-color: transparent;
    color: black;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out; }
    form input:focus {
      border: 1.5px solid black; }
  form button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: white;
    background-color: #1A6DBA;
    outline: none;
    border-radius: 0.5rem;
    padding: 1rem 1rem;
    width: 49.5%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out; }
    form button:hover {
      cursor: pointer;
      background-color: black;
      color: white; }
  form #message {
    display: none;
    width: 51%;
    font-size: 1.9rem;
    margin-left: auto;
    margin-right: auto; }

/* *************
   HOME PAGE
************* */
#logo {
  position: relative;
  top: 35%;
  -webkit-transform: translateY(-35%);
  -ms-transform: translateY(-35%);
  transform: translateY(-35%);
  width: 50vw;
  max-width: 50rem;
  display: block;
  margin: 0 auto; }

#logocontainer {
  background: url("../assets/logobg-time.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 75vh;
  max-height: 75rem;
  margin-right: 10rem; }

.homenav {
  font-size: 5.5rem;
  line-height: 5rem; }

#codeblock {
  position: relative;
  z-index: -999; }
  #codeblock p, #codeblock li {
    opacity: 0.3;
    position: absolute;
    bottom: -40rem;
    right: -10rem;
    font-family: courier;
    color: #cdd5e0; }

.homepullup {
  margin-top: -20rem !important; }

#homevideo {
  width: 40vw;
  max-width: 40rem; }

#tryingtobefunny {
  transform: rotate(90deg);
  transform-origin: right top 20;
  float: right; }

#contactblock {
  margin-top: 25rem; }
  #contactblock:hover {
    cursor: pointer; }
  #contactblock h2 {
    color: #0dc46b; }

#teens {
  margin-top: 30rem; }

#homemtc {
  margin-top: 18rem;
  margin-right: 5rem; }

#home {
  background-color: #eee; }

/* *************
   RESPONSIVE
************* */
@media (max-width: 1420px) and (min-width: 1300px) {
  .homenav {
    font-size: 5rem; } }
@media (max-width: 1300px) and (min-width: 650px) {
  html, body {
    font-size: 58%; }

  .homenav {
    font-size: 5rem; }

  #subscribe > div:first-of-type p, #subscribe > div:first-of-type li {
    width: 68%;
    margin: auto; }

  form input {
    width: 58%; }
  form button {
    width: 58%; }

  #message {
    width: 62% !important; }

  .grid {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2; }

  .items #v, .items #v1, .items #v2, .items #v3 {
    display: none; }

  #related .grid {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3; } }
@media (max-width: 1300px) and (min-width: 650px) and (max-width: 1130px) {
  #header h1, #header h2 {
    position: relative;
    top: 41%;
    -webkit-transform: translateY(-41%);
    -ms-transform: translateY(-41%);
    transform: translateY(-41%);
    font-size: 15rem;
    text-align: center; }
  #header div img {
    margin-left: auto;
    margin-right: auto;
    width: 25vw;
    max-width: 25rem; } }
@media (max-width: 1300px) and (min-width: 650px) and (max-width: 845px) {
  #logocontainer {
    width: 70vw;
    height: 70vh;
    max-height: 70rem;
    max-width: 70rem;
    margin-right: auto;
    margin-left: auto; }

  #homevideo {
    width: 50vw;
    max-width: 50rem; }

  #related {
    min-height: 79.7rem;
    height: 79.7vh; }
    #related .grid {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1; }
    #related .grid-item {
      min-height: 20rem;
      height: 20vh; }
    #related #title {
      min-height: 20rem;
      height: 20vh; }

  #header h1, #header h2 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12.4rem; }

  #subscribe > div:first-of-type p, #subscribe > div:first-of-type li {
    width: 90%;
    margin: auto; }

  form input {
    width: 81%; }
  form button {
    width: 81%; }

  #message {
    width: 81% !important; } }
@media (max-width: 1300px) and (min-width: 650px) and (max-width: 1199px) {
  #home .row > div:first-of-type {
    margin-bottom: 5rem; }

  #contactblock {
    margin-top: 6rem; }
    #contactblock h2 {
      font-size: 3.3rem;
      line-height: 3.9rem; }

  #teens {
    margin-bottom: -9rem; }

  #homemtc {
    margin-top: 0rem; }

  #people > div:nth-of-type(2) {
    margin-top: 15rem;
    margin-bottom: 5rem; }

  #tryingtobefunny {
    display: none; }

  .homepullup {
    margin-top: -5rem !important; }

  #homevideo {
    width: 30vw;
    max-width: 30rem; }

  #ai > div:nth-of-type(2) {
    margin-top: -2rem;
    margin-bottom: 7rem;
    margin-right: auto;
    margin-left: auto;
    width: 50vw;
    max-width: 50rem; }

  #ai {
    margin-top: 32rem; }

  #codeblock p, #codeblock li {
    bottom: -40rem; }

  #logocontainer {
    width: 100vw;
    height: 100vh;
    max-height: 100rem;
    max-width: 100rem;
    margin-bottom: 10rem;
    margin-right: auto;
    margin-left: auto; }

  #logo {
    width: 70vw;
    max-width: 70rem; }

  .fullbleeditems .row {
    margin-bottom: -5rem !important; } }
@media (max-width: 1300px) and (min-width: 650px) and (max-width: 1023px) {
  h1, h2, h2, h3, h4, p, li {
    text-align: center; }

  #timecta > div:first-of-type {
    margin-bottom: inherit; }

  .iphone7video {
    margin-bottom: 5.4rem; } }
@media (max-width: 650px) {
  html, body {
    font-size: 50%; }

  .fullbleeditems {
    display: none; }

  #subscribe > div:first-of-type p, #subscribe > div:first-of-type li {
    width: 100%;
    margin: auto; }

  form input {
    width: 95%; }
  form input:first-of-type {
    margin-bottom: -2rem; }
  form button {
    width: 95%; }

  #message {
    width: 100% !important; }

  #timecta > div:first-of-type {
    margin-bottom: inherit; }
  #timecta img {
    width: 35vw;
    max-width: 35rem; }

  h1, h2, h2, h3, h4, p, li {
    text-align: center; }

  .grid {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1; }

  #home .row > div:first-of-type {
    margin-bottom: 5rem; }

  #contactblock {
    margin-top: 6rem; }
    #contactblock h2 {
      font-size: 3.3rem;
      line-height: 3.9rem; }

  #teens {
    margin-bottom: -9rem; }

  #homemtc {
    margin-top: 0; }

  #people > div:nth-of-type(2) {
    margin-top: 15rem;
    margin-bottom: 5rem; }

  #tryingtobefunny {
    display: none; }

  #homevideo {
    width: 80vw;
    max-width: 80rem; }

  .homepullup {
    margin-top: -5rem !important; }

  #ai > div:nth-of-type(2) {
    margin-top: -2rem;
    margin-bottom: 7rem; }

  #ai {
    margin-top: 32rem; }

  #codeblock p, #codeblock li {
    bottom: -50rem; }

  #logocontainer {
    height: 50vh;
    max-height: 50rem;
    margin-bottom: 10rem; }

  #logo {
    width: 75vw;
    max-width: 75rem; }

  .iphone7video {
    margin-bottom: 5.4rem; }

  li {
    margin-bottom: 1.8rem; }

  .items #v, .items #v1, .items #v2, .items #v3 {
    display: none; }
  .items p, .items li {
    margin-bottom: 3.6rem; }

  #related {
    min-height: 79.7rem;
    height: 79.7vh; }
    #related .grid-item {
      min-height: 20rem;
      height: 20vh; }
    #related #title {
      min-height: 20rem;
      height: 20vh; }

  #focus img {
    max-width: 90%; }

  #header {
    height: 20rem; }
    #header h1, #header h2 {
      width: 95%;
      margin: auto;
      text-align: center;
      position: relative;
      top: 10%;
      -webkit-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
      transform: translateY(-10%);
      font-size: 7.5rem; }
    #header div img {
      margin-left: auto;
      margin-right: auto;
      width: 30vw;
      max-width: 30rem; }

  #underheader p, #underheader li {
    width: 85%;
    margin: auto; } }