/* RESET */
* { margin: 0; padding: 0; border: 0; vertical-align: baseline; list-style: none; /* font-size: 100%; font: inherit; */ }
html { font-size: 10px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #f9f6ee; scroll-behavior: smooth; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
a:active, a:hover { outline: 0; }
img { outline: 0; border: 0; }

/* GENERAL */
body { position: relative; font-family: 'Noah-Regular', Helvetica, Arial, sans-serif; color: #222; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.primary-btn { padding: 2.2rem 8rem 2rem; font: 600 1.9rem 'Noah-Bold', Helvetica, Arial, sans-serif; background-color: #444; color: #fcfcfc; border-radius: 35px; text-transform: uppercase; letter-spacing: 0.1rem; text-decoration: none; box-shadow: 0 0 4px rgba(0, 0, 0, .5); }
.primary-btn:hover { text-decoration: none; }
.desc { margin-left: auto; margin-right: auto; font-size: 2.5rem; line-height: 3.8rem; }
p { font-family: 'Noah-Regular'; margin: 1.6rem 0; font-size: 1.9rem; line-height: 2.8rem; color: #111; }
a { color: #111; text-decoration: none; }
a:hover { text-decoration: underline; }
i { font-family: 'Noah-RegularItalic', Helvetica, Arial, sans-serif; }

h2 { font: 700 2.8rem/150% 'Lato', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2rem; }
h3, .h3 { font-size: 2.2rem; font-family: 'Noah-Bold'; font-weight: normal; }
h5, .h5 { font-size: 1.5rem; font-family: 'Noah-Regular', Helvetica, Arial, sans-serif; text-transform: uppercase; color: #5a5239; letter-spacing: 1px }
.h5-alt { color: #111; }

header nav { display: flex; align-items: center; justify-content: center; max-width: 120rem; height: 12.5rem; margin: 0 auto; padding: 5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
header nav h1 { display: inline-block; }
header nav ul { margin: 0 auto; }
header nav li { display: inline-block; vertical-align: middle;}
header nav .nav-link a { display: inline-block; width: 15rem; font: 600 1.6rem/400% 'Lato', Helvetica, Arial, sans-serif; color: #222; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1rem; margin: 0 2.5rem; }
header nav .nav-news { margin-right: 13.7rem; }
header nav .nav-games { margin-left: 13.7rem; }

.nav-logo { width: 17.3rem; position: absolute; top: 5rem; left: 0; right: 0; margin: 0 auto; }
.nav-logo a { display: inline-block; width: 17.3rem; height: 12.5rem; background: transparent url("../images/doubleloop-logo.png") no-repeat 0 0; background-size: 17.3rem 12.5rem; text-indent: -9999px; }

section { padding: 6rem 0; border-top: 4px solid #f4e4bc; text-align: center; }
.main { position: relative; }

#hero { background: #fdcc48 url("../images/hero-background.jpg") no-repeat; background-size: cover; min-height: 73rem; text-align: center; box-shadow: inset 0 5px 8px -5px rgba(0,0,0,0.2); }
#hero .message { width: 85rem; margin: 9rem auto 7rem; font-size: 3.2rem; line-height: 5rem; color: #111; letter-spacing: 0.03rem; }
#hero .message strong { display: block; }
#hero .primary-btn { display: inline-block; margin-bottom: 8rem; top: 0rem; transition: top .2s; }
#hero .primary-btn:hover { position: relative; top: 0.2rem; background-color: #333; }

#whoweare { text-align: center; }
#whoweare .desc { width: 60%; }
#whoweare .team { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin-top: 3rem; }
#whoweare .team li { width: 27.6rem; margin: 3rem 1rem 0; text-align: left; }
#whoweare .team li img { display: block; width: 27.6rem; height: 18.4rem; margin-bottom: 1.5rem; border-radius: 0.5rem; box-shadow: 0 0 3px rgba(0, 0, 0, .3); }
#whoweare .team .name { display: block; font: normal 2rem 'Noah-Bold', Helvetica, Arial, sans-serif; line-height: 4rem; letter-spacing: 0.05rem; }
#whoweare .team .title { letter-spacing: 0.03rem; }
#whoweare .team .title span { display: inline-block; }
#whoweare .team .bio { font-size: 1.65rem; line-height: 2.5rem; margin-top: 0.8rem; }
#whoweare .team .twitter { display: block; margin-top: 0.2rem; letter-spacing: 0.05rem }

#news h2 { margin-bottom: 2rem; }
#news .container { display: flex; width: 80%; max-width: 100rem; margin: 0 auto; text-align: left; }
#news .desc {
  flex: 1;
  flex-direction: column;
  padding-right: 4rem; }
#news .updates { width: 64rem; padding-left: 4rem; }
#news .updates .article { display: block; margin: 1.6rem 0 2.6rem; background-color: #fcfcfc; border-radius: 1rem; overflow: auto; box-shadow: 0 0 5px rgba(0, 0, 0, .2); overflow: auto; cursor: pointer; transition: box-shadow 0.5s; }
#news .updates .article:hover { box-shadow: 0 0 8px rgba(0, 0, 0, .3);}
#news .updates .article .image { float: left; width: 40%; }
#news .updates .article .image img { width: 100%; }
#news .updates .article .content { float: left; width: 60%; vertical-align: middle; }
#news .updates .article .inner-content { margin: 2.1rem 2rem 2rem; }
#news .updates .article .content .title { display: block; font-size: 2.2rem; font-family: 'Noah-Bold', Helvetica, Arial, sans-serif; font-weight: normal; margin: 0.8rem 0 1.5rem; }
#news .updates .article .content .full-post { text-decoration: none; }
#news .updates .article .content .full-post:after { content: "\2192"; padding-left: 0.5rem; transition: padding-left 0.3s; }
#news .updates .article .content .inner-content:hover .full-post:after { padding-left: 1rem; }
#news .talks li:first-child { padding-top: 2rem; }
#news .talks li { padding: 3.2rem 0 2.8rem; border-bottom: 1px solid #ddd1b6; }
#news .talks .tags { display: block; margin-bottom: 0.8rem; }
#news .talks .title { display: block; }
#news .talks .title i { font-weight: normal; }

#games { padding: 6.8rem 0; background: #fdcc48 url("../images/games-background2.jpg") no-repeat; background-size: cover; }
#games .desc { width: 60%; max-width: 70rem; margin: 4rem auto 0; background-color: rgba( 255, 225, 132, 0.5); border: 1px solid #fdbd34; border-radius: 3rem; padding: 5.2rem 5rem; }
#games .desc p { font-size: 2.8rem; line-height: 4.2rem; }
#games .desc .secondary { max-width: 60rem; margin: 3rem auto 0; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.5); font-size: 2.2rem; line-height: 3.8rem; }

#job-listings { width: 80%; max-width: 120rem; margin: 0 auto; overflow: auto; }
#jobs .desc { width: 70%; max-width: 90rem; }
#jobs a { text-decoration: underline; }
#jobs h4 { font: normal 2.4rem 'Noah-Regular', Helvetica, Arial, sans-serif; margin: 6rem 0 1rem; }
#jobs .current-opens { width: 70%; max-width: 90rem; margin: 2rem auto; font-size: 2.1rem; line-height: 3.2rem; }

/* jobs tabs */
#jobs .job-tabs { float: left; width: 25%; }
#jobs .job-tabs a { display: block; margin-bottom: 0.8rem; padding: 1.8rem 2rem; background-color: #efe8d6; font: normal 2.2rem 'Noah-Bold', Helvetica, Arial, sans-serif;text-align: left; cursor: pointer; outline: none; transition: 0.3s; border-radius: 5px 0 0 5px; text-decoration: none; }
#jobs .job-tabs a:hover { background-color: #fefefb; }
#jobs .job-tabs a.current { background-color: #fefefb; }
#jobs .job-list { float: left; width: 75%; }
#jobs .hide { position: absolute; top: -9999px; left: -9999px; }

#jobs .job-post { padding: 3rem; text-align: left; background-color: #fefefb; border-radius: 0 0.8rem 0.8rem 0; }
#jobs .job-post h5 { display: block; margin-top: 2.7rem; }
#jobs .job-title { font: normal 2.4rem 'Noah-Bold', Helvetica, Arial, sans-serif; }
#jobs .job-description p, #jobs .job-post .job-description ul { margin: 1.3rem 0; }
#jobs .job-description li { margin-left: 4.5rem; list-style-type: disc; font-size: 1.9rem; line-height: 2.8rem; color: #111; }

footer { padding: 0.5rem 0; background-color: #252525; }
footer .container { display: flex; padding: 0 4rem; }
footer p { font: normal 1.6rem 'Noah-Bold', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; color: #f1f1f1; flex: 1; }
footer p a { color: #f1f1f1; }
footer .company { text-align: left; }
footer .contact { text-align: right; }
footer .contact a { margin-left: 2rem; font-size: 1.8rem; font-family: 'Noah-Regular', Helvetica, Arial, sans-serif; text-transform: none; }



/* MEDIA QUERIES */
@media only screen and (min-width: 1300px) and (max-width: 1450px) {

}
@media only screen and (min-width: 1000px) and (max-width: 1299px) {

}
@media only screen and (max-width: 1200px) {
  header nav .nav-link a { margin: 0 1rem; }
  #whoweare { padding: 6rem 0 4rem; }
  #whoweare .team { max-width: 60rem; margin: 0 auto; }
  #news .container { width: 90%; }
  #news .desc { padding-right: 0; }
  #jobs .desc { width: 80%; }
}

@media only screen and (max-width: 992px) {
  header nav { padding: 2.5rem 0; }
  header nav .nav-link a { margin: 0; }
  header nav .nav-news { margin-right: 7rem; }
  header nav .nav-games { margin-left: 7rem; }
  .nav-logo { width: 12.5rem; }
  .nav-logo a { width: 12.5rem; height: 9rem; background-size: 12.5rem 9rem; }
  #hero { min-height: 0; }
  #hero .message { width: 90%; margin-bottom: 3rem; }
  #hero .message strong { display: inline; }
  #whoweare .desc { width: 80%; }
  #news .container { display: block; width: 80%; }
  #news .desc { text-align: center; }
  #news .updates { width: 100%; max-width: 64rem; margin: 4rem auto 0; padding-left: 0; }
}

@media only screen and (max-width: 768px) {
  header .nav-logo { position: absolute; left: 0; right: 0; top: 3rem; margin: 0 auto; }
  header nav { display: block; height: auto; padding: 13.5rem 0 1.5rem; }
  header nav .nav-link a { width: auto; padding: 0 2.5rem; font-size: 1.4rem; }
  header nav .nav-news { margin-right: 0; }
  header nav .nav-games { margin-left: 0; }
  .nav-logo { top: 3.5rem; }
  footer .container { display: block; padding: 0 4rem; }
  footer .container p { text-align: center; }
  #news .container { width: 85%; }
  #news .full-post { display: none; }
  #news .updates article .content .title, #news .talks .title { font-size: 2rem; line-height: 2.7rem; }
  #job-listings { width: 95%; }
  #jobs .job-tabs a { font-size: 1.6rem; }
  #jobs .job-title { font-size: 2rem; }
}

@media only screen and (max-width: 650px) {
  #whoweare .team li { width: 42%; margin: 1.5rem 1rem 0; }
  #whoweare .team li img { width: 100%; height: auto; }
  #whoweare .team .name { font-size: 1.8rem; line-height: 3rem; }
  #whoweare .team .title { font-size: 1.3rem; line-height: 1.9rem; }
  #whoweare .team .bio { font-size: 1.4rem; line-height: 2.2rem; }
  #news .updates article .content .title { font-size: 1.8rem; line-height: 2.6rem; margin-bottom: 0; }
}

@media only screen and (max-width: 599px) {
  h2 { font-size: 2rem; }
  section, #whoweare { padding: 4rem 0; }
  .desc { font-size: 1.8rem; line-height: 2.6rem; }
  #hero .message { width: 88%; font-size: 2.4rem; line-height: 3.6rem; margin: 5rem auto 2.5rem; }
  #hero .primary-btn { padding: 1.8rem 5rem 1.6rem;
    font: 600 1.6rem 'Noah-Bold', Helvetica, Arial, sans-serif; margin-bottom: 6rem; }
  #whoweare .desc, #news .desc { width: 90%; }
  #whoweare .team { margin-top: 0; }
  #news .container { width: 85%; }
  #news .updates { margin-top: 3rem; }

  #news .updates article .image, #news .updates article .content { width: 50%; }
  #news .updates article .content .title { font-size: 1.7rem; line-height: 2.4rem; margin-bottom: 0; }

  #news .talks .title { font-size: 1.7rem; line-height: 2.4rem; }
  #news h5, #news .h5 { font-size: 1.4rem; }
  #news .talks li:first-child { padding-top: 1rem; }
  #news .talks li { padding: 2.6rem 0 2rem; }
  #games { padding: 4rem 2.5rem 5rem; }
  #games .desc { width: auto; font-size: 2rem; line-height: 3rem; margin-top: 2.3rem; padding: 3.5rem 2rem; }
  #games .desc p { font-size: 2rem; line-height: 3rem; }
  #games .desc .secondary { font-size: 2rem; line-height: 3rem; border: 0; margin-top: 2rem; padding-top: 0; }
  #jobs .job-tabs a { font-size: 1.6rem; }
  #jobs .job-title { font-size: 2rem; }
  #jobs .desc { width: 85%; }
  #jobs h4 { font-size: 1.8rem; margin: 4rem 0 2rem; }
  #jobs .current-opens { font-size: 1.8rem; line-height: 2.6rem; width: 85%; }
  #jobs .job-post { padding: 3rem 2rem; }
  #jobs .job-title { font-size: 2rem; }
  #jobs .job-description p, #jobs .job-post .job-description ul li { font-size: 1.6rem; line-height: 2.4rem; }
  #jobs .job-post .job-description ul li { margin-left: 2rem; }
  footer p { font-size: 1.4rem; }
  footer .contact a { margin-left: 0; }
}

@media only screen and (max-width: 450px) {
  header nav .nav-link { width: auto; }
  header nav .nav-link a { font-size: 1.3rem; font-weight: 400; width: auto; padding: 0 1.1rem; }
  header nav .nav-link:first-child a { padding-left: 0; }
  header nav .nav-link:last-child a { padding-right: 0; }
  #news .container { width: 80%; }
  #news .updates article .image { max-height: 23rem; overflow: hidden; }
  #news .updates article .image, #news .updates article .content { width: 100%; }
  #news .updates article .content .title { font-size: 1.7rem; line-height: 2.4rem; margin-bottom: 0; }
  #news .full-post { display: block; margin-top: 1rem; }
  #jobs .job-tabs { display: flex; flex-direction: column; justify-content: center; float: none; width: 100%; }
  #jobs .job-tabs a { width: auto; margin: 0.2rem 0; padding: 1.2rem 1.6rem; border-radius: 0.7rem; }
  #jobs .job-list { float: none; width: 100%; clear:both; }
}

/* mobile menu */

/* hidden for desktop */
.overlay { display: none; }
.mobile-nav { display: none; }
.toggle-nav { display: none; }
.mobile-bar { display: none; }
/* .toggle-nav:checked ~ .main { -webkit-transform: translateY(0); transform: translateY(0); } */

@media only screen and (max-width: 599px) {

  /* don't display desktop nav */
  header nav { border-bottom: 0; }
  .nav-logo { position: absolute; top: 6rem; left: 0; right: 0; margin: 0 auto; width: 14.5rem; }
  .nav-logo a { width: 14.5rem; height: 10.1rem; background-size: 14.5rem 10.1rem; }
  .nav-link { display: none; }

  /* style default collapsed mobile bar */
  .mobile-bar { display: block; position: relative; height: 60px; background-color: #ffc62d; z-index: 5; }
  .mobile-bar label { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 6.1rem; text-align: center; cursor: pointer; transition: transform 500ms ease; }
  .mobile-bar label:after { content: url(../images/mobile-menu-bars.png); position: relative; top: 2.5rem; font-size: 2em; color: #eee; line-height: 6.1rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 500ms ease; }

  /* mobile nav styling */
  .mobile-nav { background-color: #ffc62d; padding-bottom: 2rem; box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1); }
  .mob-nav-link { width: 80%; margin: 0 auto; padding: 1rem 0; border-bottom: 0.1rem solid rgba(255,255,255,0.5); }
  .mob-nav-link a { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05rem; height: 4.5rem; line-height: 4.5rem; text-transform: uppercase; cursor: pointer; }
  .mob-nav-link a:hover { text-decoration: none; }
  .mob-nav-link:last-child { border-bottom-width: 0rem; }

  .toggle-nav:checked ~ .main { /* when the checkbox is checked the container slide-down */
    /* -webkit-transform: translateY(270px);
    transform: translateY(270px);
    -webkit-transform: translate3d(0, 270px, 0);
    transform: translate3d(0, 270px, 0); */
  }

  /* to display mobile nav */
  .toggle-nav:checked ~ .mobile-nav { display: block; position: relative; top: 0; z-index: 4; } /* display mobile nav */
  .toggle-nav:checked + .mobile-bar label { top: 0; left: auto; right: 0; margin: 0; text-align: right; }
  .toggle-nav:checked + .mobile-bar label:after { content: url(../images/mobile-menu-x.png); position: relative; top: 2.5rem; right: 2.5rem; }
  .toggle-nav:checked ~ .overlay { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; }
  .toggle-nav:checked ~ .overlay[style] { display: block !important; } /* override the javascript set styles inline to get overlay to reappear when you click on the mobile nav links again */
}

/* end mobile menu */