@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);

/* reset */
img {
    vertical-align: bottom;
}

a, a:visited {
    color: #ccc;
}

body {
    background: black;
    /*When there's padding on the left and right sides,
    when the browser is closed as much as it can go, the Amp
    logo gets cut off on the right side and not the left side
    so only pad on the top and bottom. A maybe-permanent shim*/
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 0px;
    margin-right: 0px;
}

h3 {
    font-size: 9px;
}

div.slide {
    float: left;
    width: 100%;
	overflow: hidden;
}
div.feature {
}

div.spinner {
    position:absolute;
    float: left;
    width: 100%;
    text-align: center;
}

.cboxElement:hover,
.cboxElement:active,
.cboxElement:focus {
    outline:0;
}


div.insertion-point {
    display: none;
}

/*Custom for the About page*/
@media all and (min-width: 600px) {
}

div .feature-about-photos{
    max-width: 90%;
    text-align: center;
}

div .feature-about-photos div{
    display: inline-block;
}

div .feature-about-photos img{
    width:100px;
    margin:10px;
}

div .feature-about h3{
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    color: #ccc;
}

#skillset ul{
    margin:0px;
    padding:0px;
}

div.feature-about{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 20px;
}


/*End custom for the About page*/

div.feature-information {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 20px;
}
div.feature-text {
    text-align: left;
    width: 50%;
    max-width: 35em; 
    /* this uses ems because it's relative to readability by words per line of
     * paragraph */
    font-family:sans-serif;
    line-height: 34px;
    color: #cccccc;
}
img.feature-logo {
    width: 150px;
    height: auto;
    margin-right: 30px;
}

/*BREAK POINT Styles for break point, stacking logo over content*/
@media all and (max-width: 600px) {
    div.feature-information {
	   -webkit-box-orient: vertical;
	   -webkit-box-direction: normal;
	   -webkit-flex-direction: column;
	       -ms-flex-direction: column;
	           flex-direction: column;
    }
    div.feature-text {
        width: 90%;
    }
}

div.feature {
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
img.work {
    max-width: 100%;
}

.disney {
    background-image: url(../img/disney/disney_bg.jpg);
}
.microsoft {
    background-image: url(../img/microsoft/microsoft_bg.png);
}
.eb {
    background-image: url(../img/eddiebauer/eddiebauer_bg.jpg);
}
.atomic {
    background-image: url(../img/atomic/atomic_bg.jpg);
}
.pg {
    background-image: url(../img/pg/pg_bg.png);
}
.pi {
    background-image: url(../img/pi/pi_bg.jpg);
}
.kmd {
    background-image: url(../img/kmd/kmd_bg.jpg);
}
.coca-cola {
    background-image: url(../img/cocacola/cocacola_bg.jpg);
}
.tapout {
    background-image: url(../img/tapout/tapout_bg.jpg);
    padding-bottom: 5%;
}
.gov {
    background-image: url(../img/gov/gov_bg.jpg);
    padding-bottom: 5%;
}
.safdie {
    background-image: url(../img/safdie/safdie_bg.jpg);
}

.highwire {
    background-image: url(../img/highwire/highwire_bg.jpg);
}


.labs {
    background-image: url(../img/labs/labs_bg.jpg);
}

.contact {
}
.about {
    background-image: url(../img/about/about_bg.png);
    padding-bottom: 50px;
}

.feature-text img{
    width: 100px;
    margin-left: 10px;
}

ul.products {
    width: auto
}
ul.products li {
    display: inline-block;
    width: 100px;
    text-align: center;
    margin-left: 30px;
    font-size: 9px;
}

code ul{
  margin-bottom:20px;
  overflow:hidden;
}
li{
  line-height:3em;
  float:left;
  display:inline;
}
#  li  { width:50%;} /* 2 col */
#double li  { width:50%;}/* 2 col */
#triple li  { width:33.333%; }/* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; }/* 6 col */

/* Half my kingdom for some SCSS. (I don't have a kingdom, so I'm safe.) --SK */

.color-cyan header, .color-cyan nav a, .color-cyan nav a:hover, color-cyan nav a:visited,
.color-cyan footer, .color-cyan footer a, .color-cyan footer a:hover, color-cyan footer a:visited {
    color: #00ffff;
}
.color-cyan nav a {
    border-color: #00ffff;
}
.color-cyan #logoImgContainer path, .color-cyan #backToTopBtnContainer path  {
    fill: #00ffff;
}

.color-green header, .color-green nav a, .color-green nav a:hover, color-green nav a:visited,
.color-green footer, .color-green footer a, .color-green footer a:hover, color-green footer a:visited {
    color: #33ff00;
}
.color-green nav a {
    border-color: #33ff00;
}
.color-green #logoImgContainer path, .color-green #backToTopBtnContainer path {
    fill: #33ff00;
}

.color-magenta header, .color-magenta nav a, .color-magenta nav a:hover, color-magenta nav a:visited,
.color-magenta footer, .color-magenta footer a, .color-magenta footer a:hover, color-magenta footer a:visited {
    color: #ff33cc;
}
.color-magenta nav a {
    border-color: #ff33cc;
}
.color-magenta #logoImgContainer path, .color-magenta #backToTopBtnContainer path {
    fill: #ff33cc;
}

.color-pink header, .color-pink nav a, .color-pink nav a:hover, color-pink nav a:visited,
.color-pink footer, .color-pink footer a, .color-pink footer a:hover, color-pink footer a:visited {
    color: #ff0066;
}
.color-pink nav a {
    border-color: #ff0066;
}
.color-pink #logoImgContainer path, .color-pink #backToTopBtnContainer path {
    fill: #ff0066;
}

.color-orange header, .color-orange nav a, .color-orange nav a:hover, color-orange nav a:visited,
.color-orange footer, .color-orange footer a, .color-orange footer a:hover, color-orange footer a:visited {
    color: #ff9900;
}
.color-orange nav a {
    border-color: #ff9900;
}
.color-orange #logoImgContainer path, .color-orange #backToTopBtnContainer path {
    fill: #ff9900;
}

.color-yellow header, .color-yellow nav a, .color-yellow nav a:hover, color-yellow nav a:visited,
.color-yellow footer, .color-yellow footer a, .color-yellow footer a:hover, color-yellow footer a:visited {
    color: #ffcc00;
}
.color-yellow nav a {
    border-color: #ffcc00;
}
.color-yellow #logoImgContainer path, .color-yellow #backToTopBtnContainer path {
    fill: #ffcc00;
}

nav a.current,
nav a.current:hover {
    border-color: white;
    color: white;
}
nav a:hover {
    color: #fff;
}

/* group nav elements by two so there's never a short line with just one */
nav .group {
    display: inline-block;
}
nav a {
    display: inline-block;

    font-size: 10pt;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #ffffff;
    width: 70px;
    margin: 0 10px;
    margin-top: 25px;
    padding: 8px;
    text-decoration: none;
    border: 2px solid;
    border-radius: 12px;
}


#logoImgContainer{
    display:inline-block;
}


@media all and (max-width: 600px) {
  #logoImgContainer img{
      height: auto;
  }
}

#logoText{
    font-size: 10pt;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;    
    text-align: left;
    margin-left:20px;
    margin-top: 20px;
    width:360px;
    display:inline-block;
    line-height: 24px;
}
@media all and (max-width: 600px) {
  #logoText {
      width: 90%;
  }
}

header {
    text-align: center;
    background: black;
    padding-bottom: 30px
}

#feature {
    color: white;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 16px;
}

/* class for a block of tiles */
.tiles {
    text-align: center;
}
.tiles > .size {
    display: inline-block;
    vertical-align: bottom;
    width: 50%;
    max-width: 282px; /* 250 + 16 * 2 */
}
.tiles > .size > .aspect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* percent of parent width */
}
.tiles > .size > .aspect > a {
    position: absolute;
    top: 0;
    left: 0;
    /* These percents are derived from:
     * margin: 16px
     * padding: 16px // to keep image away from edge of tile
     * width, height: 250px
     * I'm too distracted right now to reproduce the math. --SK
     */
    width: 88.652482%;
    height: 88.652482%;
    box-sizing: border-box; /* padding subtracts from content area */
    margin: 5.673759%;
    border-radius: 5.673759%;
}
.tiles a img {
    /* needed for ie 10, but not for ie 11 */
    border: none;
}
/* index tiles specific stuff */
#tiles > .size > .aspect > a {
    /* keep logo images off edges of tiles */
    padding: 5.673759%;

    /* give up and use flexbox for vertically centering the image */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
/* because more wrappers are the answer for everything!
 * this element overcomes too many browser specific bugs to list :( */
#tiles > .size > .aspect > a > .align {
    display: block;
    width: 100%;
}
#tiles > .size > .aspect > a > span > img {
    max-width: 100%;
    height: 100%;
}

/* feature tiles specific stuff */
.feature-images img {
    max-width: 100%;
    border-radius: 5.673759%;
}

#atomic {
    background: #ff33cc;
}

#pi {
    background: #ff0066;
}

#highwire {
    background: #00ff33;
}

#coca-cola {
    background: #ff9900;
}

#disney {
    background: #33cc00;
}

#eb {
    background: #ffcc00;
}

#kmd{
    background: #cc00ff;
}

#microsoft {
    background: #0099cc;
}

#safdie {
    background: #00ccff;
    
}
#tapout {
    background: #ff3300;
}

#gov {
    background: #00cccc;   
}
#pg {
    background: #ccff00;
    
}

div.scroll-simplifier {
	clear: both;
	height: 100vh;
}

footer {
    font-family: 'Roboto', sans-serif;
    font-size: 9pt;
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
    padding-top: 30px;
}

#copyright {
    padding-left: 10px;
    padding-right: 10px;
}

#contact-footer {
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

#backToTopText {
    padding-right: 10px;
}

#backToTopBtnContainer {
    padding-left: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor:pointer;
}