/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.stop-scrolling {
  height: 100% !important;
  overflow: hidden !important;
}

ul {
  padding: 0 0 0 0 !important;
}

html, body {
  height: 100% !important;
}

.sectionContainer {
  width: 100%;
  position: relative;
  margin: 0; padding: 0;
  overflow: hidden;
}

.sectionBackground {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;
  z-index: 1;
  margin: 0; padding: 0;
  overflow: hidden !important;
  /* THIS RIGHT HERE is what was causing the disappearing background bug. */
  /* background-attachment: fixed; */
  /* Removing it makes the parallax a little more choppy, but is necessary. */
}

.sectionContent {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  text-align: center;
}

#home {
  background-image:url(../img/desktop1.jpg);
  color: white;
  text-align: center;
}

#home .sectionContent {
  width: 80%;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  position:relative;
}

#home .heading {
  font-size:30px;
  font-weight:bold;
  font-family:proxima_nova_regular, museo_sans500, helvetica, arial, sans-serif;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  line-height:34px;
  padding: 8px;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  transition: color 10s, border-top-color 10s, border-bottom-color 10s; -moz-transition: color 10s, border-top-color 10s, border-bottom-color 10s; -webkit-transition: color 10s, border-top-color 10s, border-bottom-color 10s; z-index: 10;
}
#home .text {
  margin-top:40px;
  font-size:18px;
  line-height:28px;
  font-family: museo_sans500, helvetica, arial, sans-serif;
  color:#fff;
  text-align:center;
  transition: color 10s; -moz-transition: color 10s; -webkit-transition: color 10s;
  z-index: 10;
}
#home .sectionContent.darktext .heading {
  color: #333;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}
#home .sectionContent.darktext .text {
  color: #333;
}

#about .sectionBackground {
  background-image:url(../img/desktop2_alt.jpg);
}

#about .sectionContent {
  width: 90%;
  max-width: 800px;
  position: relative;
  left: 50%;
  margin-left: -400px;
}

#about .heading {
  width:300px;
  margin:0 auto;
  font-size:30px;
  font-weight:bold;
  font-family:proxima_nova_regular, museo_sans500, helvetica, arial, sans-serif;
  color:#333;
  text-align:center;
  text-transform:uppercase;
  line-height:60px;
  border-bottom:4px solid #333;
}
#about .text {
  margin-top: 15px;
  padding-bottom: 100px;
  font-size:18px;
  line-height:28px;
  font-family:museo_sans500, helvetica, arial, sans-serif;
  color:#333;
  text-align: justify;
  text-justify: inter-word;
}


#about .honors { float:left; height: 120px; position:relative; list-style:none outside none; }
#about .honors li { float:left; position:relative; background-image:url(../img/honors.png); background-repeat:no-repeat; }
#about .honors li img { height:56px; }
#about .honor-google { background-position:0 0; }
#about .honors-google img { width:121px; }
#about .honors-tedprize { background-position:-121px 0; margin-left:100px; }
#about .honors-tedprize img { width:163px; }
#about .honors-time { background-position:-284px 0; margin-left:100px; }
#about .honors-time img { width:105px; }
#about .honors-good { background-position:-389px 0; margin-left:100px; }
#about .honors-good img { width:73px; }
#about .honors-mit { background-position:-469px 0; margin-left:40px; }
#about .honors-mit img { width:77px; }

#about .honors-text-header { font-size:16px; text-transform:uppercase; }
#about .honors-text { margin:8px 0 40px; }
#about .honors-text li { float:left; font-size:16px; list-style:none; background:url(../img/cross.gif) no-repeat center left; padding-left:20px; margin-left:40px; }
#about .honors-text li.first { margin-left:0; }

#work .sectionBackground {
  background: #FFF;
}

#work .sectionContent {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
}

#work .grid-wrapper { position: absolute; top:0; left:0; padding:0; margin:0; list-style:none; width:100%; height:100%; overflow: hidden; }
#work .grid-wrapper > li.half { padding:0; margin:0; zoom:1.0; position:relative; display:block; float:left; width:50%; height:100%; }

#work .details { background-color:#fff; width:100%; height:100%; top:60px; left:50%; margin-left:-2px; position: relative; }
#work .details-logobar { position: absolute; top: 0; left: 0; width: 100%; text-align: left; background-color: rgba(255,255,255,0.9); }
#work .details .logo {
  padding: 15px 20px;
}
#work .details-wrapper { background: none; overflow: auto; }
#work .details-hero {
  margin: 10px auto 10px auto;
}
#work .details-hero iframe {
  width: 656px;
  height: 369px;
}
#work .details .heading {
  margin: 10px auto 15px auto;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  line-height: 34px;
  padding: 8px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  text-transform: uppercase;
  display: inline-block;
}
#work .details .text {
  color: #333;
  font-size: 16px;
  line-height: 28px;
  font-family: museo_sans500, helvetica, arial, sans-serif;
  margin-bottom: 40px;
  margin-left: 40px;
  margin-right: 40px;
  text-align: justify;
  text-justify: inter-word;
}

#work .details-controls { position:absolute; top:20px; right:20px; list-style:none outside none; }
#work .details-controls li { float:left; height:28px; background-image:url(../img/sprites.png); background-repeat:no-repeat; }
#work .details-controls li img { height:28px; }
#work .details-controls li.prev img, .details-controls li.next img { width:17px; }
#work .details-controls li.close img { width:27px; }
#work .details-controls li.prev { background-position:-195px 0; }
#work .details-controls li.prev:hover { background-position:-195px -28px; cursor:pointer; }
#work .details-controls li.next { margin-left:10px; background-position:-212px 0; }
#work .details-controls li.next:hover { background-position:-212px -28px; cursor:pointer; }
#work .details-controls li.close { margin-left:20px; background-position:-230px 0; }
#work .details-controls li.close:hover { background-position:-230px -28px; cursor:pointer; }

/* Universal "Work" Styles */
#work .grid-container { position: relative; float: left; width: 50%; }
#work .grid-container a { cursor: pointer; }

#work .grid-pic { position:relative; background-repeat:no-repeat; transition:400ms background-image; -moz-transition:400ms background-image; -webkit-transition:400ms background-image; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 10; background-position: center; }
#work .grid-pic:hover {  }
#work .grid-pic img.full { width:100%; cursor:pointer; z-index: 12; }
#work .grid-pic .tag { position:absolute; font-size:16px; font-weight:bold; font-family:museo_sans500, helvetica, arial, sans-serif; color:#333; bottom:0; left:0; background-color:#fff; padding:10px; text-transform:uppercase; color:#333; z-index: 11; }

#work .grid-0 { width: 100%; height: 100%; background-image: url(../img/work/ahumanright.jpg); position: relative; }
#work .grid-0:hover, .grid-0.color { background-image: url(../img/work/ahumanright_hover.jpg) !important; cursor: pointer; }
#work .grid-0 > img { height: 100%; }

#work .grid-1 { width: 100%; height: 50%; background-image: url(../img/work/eyeborg.jpg); position: relative; background-position: 75% 50% !important; }
#work .grid-1:hover, .grid-1.color { background-image: url(../img/work/eyeborg_hover.jpg) !important; cursor:pointer; }
#work .grid-1 > img { height: 100%; }
#work .grid-1.expanded { background-image: url(../img/work/eyeborg_detail.jpg) !important; }

#work .grid-2 { float: left; width: 50%; height: 50%; background-image: url(../img/work/spacex.jpg); position: relative; }
#work .grid-2:hover, .grid-2.color { background-image: url(../img/work/spacex_hover.jpg) !important; cursor:pointer; }
#work .grid-2 > img { height: 100%; }
#work .grid-2.expanded { background-image: url(../img/work/spacex_detail.jpg) !important; }

#work .grid-3 { float: left; width: 50%; height: 50%; background-image: url(../img/work/balloon.jpg); position: relative; }
#work .grid-3:hover, .grid-3.color { background-image: url(../img/work/balloon_hover.jpg) !important; cursor:pointer; }
#work .grid-3 > img { height: 100%; }
#work .grid-3.expanded { background-image: url(../img/work/balloon_detail.jpg) !important; }

#work .grid-details { display: none; background: #FFF; position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; z-index: 1; }

#workgrid-left {
  position: relative;
  left: 1px;
}

#workgrid-right {
  position: relative;
  left: -1px;
}

#ksat-map .caption {
  width: 656px;
  margin: auto;
  text-align: right;
  font-family: museo_sans500, helvetica, arial, sans-serif;
  font-size: 14px;
}

#media .sectionBackground {
  background-color: #FFF;
}

#media .cursorOverlay {
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  cursor: pointer !important;
  z-index: 999999999;
}
#media .cursorOverlay.left {
  left: 0;
  display: none;
}
#media .cursorOverlay.right {
  right: 0;
}

#videos-tag {
  font-weight: bold;
  font-family: proxima_nova_regular, museo_sans500, helvetica, arial, sans-serif;
  text-transform:uppercase;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 999999999;
  color: #000;
  padding: 10px 15px 5px 15px;
  background: rgba(255,255,255,0.5);
}
#videos-tag small {
  color: #4B4B4B;
}

#media-container {
  background-size: cover;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%;
}
#media-container .video-container {
  width: 100%;
  position: absolute;
  top: 0; left: 0;
}

#media-container .video-container iframe {
  width: 70%;
  height: auto;
  background: #000;
  position: relative;
  opacity: 1.0;
  transition: 0.5s all;
  -moz-transition: 0.5s all;
  -webkit-transition: 0.5s all;
  z-index: 999999 !important; /* this makes sure the videos will always recieve click events. */
}

#media-container .video-container iframe.offscreen-left { left: -120%; }
#media-container .video-container iframe.offscreen-right { left: 120%; }
#media-container .video-container iframe.prev { left: -70%; opacity: 0.4; }
#media-container .video-container iframe.prev:hover,
#media-container .video-container iframe.prev.hover { opacity: 0.7; }
#media-container .video-container iframe.next { left: 70%; opacity: 0.4; }
#media-container .video-container iframe.next:hover,
#media-container .video-container iframe.next.hover { opacity: 0.7; }
#media-container .video-container iframe.active { left: 0; opacity: 1.0; }

#media .selected-press-container {
  padding: 20px 0 0 0;
}

#media .honors-text-header {
  color: #333;
  text-align: left;
  font-weight: bold;
  font-family: proxima_nova_regular, museo_sans500, helvetica, arial, sans-serif;
  text-transform:uppercase;
  padding: 10px 30px;
}

/*
  these press logos are sized in proportion to their original width, to fit the screen.
  the height is also proportioned, but by javascript instead of css (see viewport.js)

  full width of source image: 1400px
   time: 168px = 12%
   good: 182px = 13%
     fc: 252px = 18%
  hplus: 154px = 11%
   ieee: 238px = 17%
  vogue: 196px = 14%
   alja: 210px = 15%
*/

#media .selected-press-logos {
  width:100%;
}

#media .selected-press-logos a {
  display: inline-block;
  height: 55px; /* this gets overridden by script */
  transition: 0.5s background-image;
}

#media .selected-press-logos a.time { width: 12%; background-image: url(../img/media/selected-press_01.png); }
#media .selected-press-logos a.time:hover, #media .selected-press-logos a.time.hover { background-image: url(../img/media/selected-press_hover_01.png); }
#media .selected-press-logos a.good { width: 13%; background-image: url(../img/media/selected-press_02.png); }
#media .selected-press-logos a.good:hover, #media .selected-press-logos a.good.hover { background-image: url(../img/media/selected-press_hover_02.png); }
#media .selected-press-logos a.fc { width:18%; background-image: url(../img/media/selected-press_03.png); }
#media .selected-press-logos a.fc:hover, #media .selected-press-logos a.fc.hover { background-image: url(../img/media/selected-press_hover_03.png); }
#media .selected-press-logos a.hplus { width:11%; background-image: url(../img/media/selected-press_04.png); }
#media .selected-press-logos a.hplus:hover, #media .selected-press-logos a.hplus.hover { background-image: url(../img/media/selected-press_hover_04.png) }
#media .selected-press-logos a.ieee { width: 17%; background-image: url(../img/media/selected-press_05.png); }
#media .selected-press-logos a.ieee:hover, #media .selected-press-logos a.ieee.hover { background-image: url(../img/media/selected-press_hover_05.png); }
#media .selected-press-logos a.vogue { width: 14%; background-image: url(../img/media/selected-press_06.png); }
#media .selected-press-logos a.vogue:hover, #media .selected-press-logos a.vogue.hover { background-image: url(../img/media/selected-press_hover_06.png); }
#media .selected-press-logos a.alja { width: 15%; background-image: url(../img/media/selected-press_07.png); }
#media .selected-press-logos a.alja:hover, #media .selected-press-logos a.alja.hover { background-image: url(../img/media/selected-press_hover_07.png); }

.mobileOnlyInline { display: inline; }
.mobileOnlyBlock { display: block; }
.mobileOnlyInlineBlock { display: inline-block }

#contact {
  color: white;
}

#contact .sectionBackground {
  background-image:url(../img/desktop5.jpg);
}

#contact .sectionContent {
  text-align: left;
  height: 100%;
  min-height : 436px;
}

#contact .heading {
  width: 500px;
  margin: auto;
  text-align:center;
  font-size:30px;
  font-weight:bold;
  font-family:proxima_nova_regular, museo_sans500, helvetica, arial, sans-serif;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  line-height:60px;
  margin-bottom:40px;
  border-bottom:4px solid #fff;
}
#contact .text {
  margin-top:64px;
  font-size:18px;
  line-height:28px;
  font-family:museo_sans500, helvetica, arial, sans-serif;
  color:#fff;
  text-align:center;
}

#contact .asterisk { padding-left:2px; font-size:10px; color:#fff !important; }
#contact .formText { border-radius:3px; border:#ffffff; padding:6px; margin-bottom:10px; width:240px; }
#contact .formMessage { border-radius:3px; border:#fff; padding:6px; margin-bottom:8px; resize:none; width:480px; height:128px; }

#contact #submit { margin:20px auto 0; font-weight:bold; font-size:16px; font-family:museo_sans500, helvetica, arial, sans-serif; text-transform:uppercase; color:#333; background-color:#fff; padding:10px 15px; text-align:center; border:0; }
#contact #submit:hover { background-color:#ddd; }

#contact .error { font-size:14px; line-height:24px; font-family:museo_sans500, helvetica, arial, sans-serif; color:#FF0000; }
#contact .accept { font-size:14px; line-height:24px; font-family:museo_sans500, helvetica, arial, sans-serif; color:#FFF; }

#contact .contact-wrapper {
  position:relative; width: 100%;
  top: 50%;
  height: 436px;
  margin-top: -218px;
}
#contact #contactForm {
  padding-top:25px;
  width:1060px;
  height: 436px;
  margin-left: -530px;
  margin-top: -218px;
  left: 50%;
  top: 50%;
  position: relative;
}
#contact #contactForm .left-column { float:left; }
#contact #contactForm .right-column { float:left; margin-left:30px; }
#contact .input_name { font-weight:bold; line-height:24px; font-size:16px; font-family:museo_sans500, helvetica, arial, sans-serif; color:#fff; text-transform:uppercase; }
#contact .input_text { margin-bottom:20px; border:2px solid #fff; padding:0 5px; width:370px; height:40px; line-height:27px; font-family:museo_sans500, helvetica, sans-serif; font-size:16px; color:#fff; background-color:transparent; }
#contact textarea { border:2px solid #fff; padding:5px; min-width:600px; min-height:208px; max-width:600px; max-height:208px;font-family:museo_sans500, helvetica, sans-serif; font-size:16px; color:#fff; background-color:transparent; }

.pong { position:fixed; z-index:20; bottom:10px; right:10px; }


/* overrides for screens that can handle more than 800% width */
/* styles before this are "mobile-first", these fix them for desktops. */
@media only screen and (min-width: 760px) {
  #mobile-indicator { display: block; }

  #media .selected-press-logos li img { margin: 10px 0; }
  #media .selected-press-logos li.time { width: 13% }
  #media .selected-press-logos li.good { width: 6.5% }
  #media .selected-press-logos li.fc { width: 13% }
  #media .selected-press-logos li.hplus { width: 3.7% }
  #media .selected-press-logos li.ieee { width: 13% }
  #media .selected-press-logos li.vogue { width: 13% }
  #media .selected-press-logos li.alja { width: 13% }

  .mobileOnlyInline { display: none !important; }
  .mobileOnlyBlock { display: none !important; }
  .mobileOnlyInlineBlock { display: none !important; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


#announcement {
  position: absolute;
  top: 50px;
  background-color: #FFFFBB;
  width: 100%;
  padding: 5px;
  opacity: 0.7;
  z-index: 999999;
}

#announcement h5, #announcement h6 {
  font-family: proxima_nova_bold;
  margin: 0;
  padding: 2px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

#announcement h5 {
  font-size: 16px;
}

#announcement h6 {
  font-size: 12px;
  opacity: 0.7;
}