html
{
    font-family: 'myriad-pro', sans-serif;

    width: 100%;
    min-width: 1024px;
    height: 100%;

    background: #000;

    -webkit-font-smoothing: antialiased;
}
html *
{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.inner
{
    width: 980px;
    margin: 0 auto;
    padding: 0 22px;
}
.hidden
{
    display: none;
}
body.noscroll
{
    position: static;

    overflow: hidden;

    border: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
body.noscroll > *:not(.video-overlay)
{
    display: none;
}
/* HEADER */
#main-header
{
    position: relative;
    z-index: 10001;

    width: 100%;
    padding: 50px 0 0;
}
#main-header > .inner
{
  padding: 0px 42px;
  
  width: 940px;
}
#main-header > .inner > *
{
    display: inline-block;

    width: 50%;

    vertical-align: top;
}
a.homepage
{
    text-align: left;
    text-decoration: none;

    color: #e1e1e1;
}
a.homepage h1
{
    font-size: 36px;
    font-weight: 300;

    letter-spacing: -1px;
}
#main-nav
{
    height: 36px; /* same as font-size of h1 */

    text-align: right;
}
#main-nav ul > *
{
    display: inline-block;

    margin-left: 40px;
}
#main-nav a
{
    font-size: 14px;
    line-height: 52px;

    -webkit-transition: color .15s ease-in-out;
       -moz-transition: color .15s ease-in-out;
        -ms-transition: color .15s ease-in-out;
         -o-transition: color .15s ease-in-out;
            transition: color .15s ease-in-out;
    text-decoration: none;

    color: #e1e1e1;
}
#main-nav a[href='/blog/']
{
    color: #2aa5dd;
}
#main-nav a:hover
{
    color: #ff6c98;
}
/* body */
body
{
    position: relative;

    height: 100%;
    min-height: 750px;
}
article
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    padding: 0 0 0;

    opacity: 0;
}
article.active
{
    opacity: 1;
}
div.description
{
    position: absolute;
    z-index: 1002;
    bottom: 75px;
    left: 0;

    width: 100%;
}
div.description h1
{
    font-family: 'Kozuka Gothic Pr6N', 'myriad-pro', sans-serif;
    font-size: 47px;
    font-weight: 100;

    width: 720px;
    margin: 0 auto;
    padding: 0px 152px 20px;

    text-align: center;
    letter-spacing: -1px;

    color: #e7e7e7;
}
div.description h2
{
    width: 720px;
    margin: 0 auto;
    padding: 0 152px 0;

    text-align: center;
}
div.description h2 a
{
    font-family: 'myriad-pro', sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;

    display: inline-block;

    vertical-align: top;
    text-decoration: none;

    color: #2aa5dd;
}
div.description h2 a.video
{
    padding-right: 15px;

    background: url(http://pixelmator-static.s3.amazonaws.com/home/buttons/watch-v1.png);
    background-repeat: no-repeat;
    background-position: 100% 13px;
    background-size: 8px 39px;
}
.retina div.description h2 a.video
{
    background: url(http://pixelmator-static.s3.amazonaws.com/home/buttons/watch-v1@2x.png);
    background-repeat: no-repeat;
    background-position: 100% 12px;
    background-size: 8px 39px;
}
div.description h2 a.video:hover
{
    color: #ff6c98;
    background-position: 100% -14px;
}
.retina div.description h2 a.video:hover
{
    background-position: 100% -14px;
}
div.description h2 a.more
{
    margin-right: 30px;
    padding-right: 13px;

    background: url(http://pixelmator-static.s3.amazonaws.com/home/buttons/more.png);
    background-repeat: no-repeat;
    background-position: 100% 13px;
    background-size: 7px 37px;
}
.retina div.description h2 a.more
{
    background: url(http://pixelmator-static.s3.amazonaws.com/home/buttons/more@2x.png);
    background-repeat: no-repeat;
    background-position: 100% 13px;
    background-size: 7px 37px;
}
div.description h2 a.more:hover
{
    color: #ff6c98;
    background-position: 100% -13px;
}
div.gradient
{
    position: absolute;
    z-index: 1001;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 748px;

    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/gradient.png);
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: 20px 748px;
}
/* mac */
article#mac
{
    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/mac/3.3/background.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: auto 100%;
}
.retina article#mac
{
    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/mac/3.3/background@2x.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: auto 100%;
}
article#mac section
{
    padding: 735px 0 0;
}
article#mac section .inner
{
  padding: 0px 42px;
  width: 940px;
}
article#mac .palettes
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: calc(100% - 170px);

    background: none;
}
  article#mac .palettes .inner
  {
    height: 100%;
    position: relative;
  }
    article#mac .palettes img.tools
    {
      position: absolute;
      top: 22%;
      left: 27px;
    }
    article#mac .palettes img.effects
    {
      position: absolute;
      top: 55%;
      right: 26px;
    }
/* ipad */
article#ipad
{
    background: #000;
    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/background.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 2300px 1300px;
}
.retina article#ipad
{
    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/gradient@2x.png), url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/background.jpg);
    background-repeat: repeat-x, no-repeat;
    background-position: 0 100%, 50% 0;
    background-size: 20px 748px, 2300px 1300px;
}
article#ipad section
{
    position: absolute;

    width: 100%;
    height: 100%;
    max-height: 970px;
}
article div.ipad
{
    position: relative;
    z-index: 1001;

    width: 980px;
    margin: 120px auto 0;
    padding: 630px 0 0;

    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/ipad.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 892px 631px;
}
.retina article div.ipad
{
    background-image: url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/ipad@2x.png);
    background-position: 50% 0;
    background-size: 892px 631px;
}
figure.artwork
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    padding-top: 589px;

    background: none;
}
figure.ipad
{
    background: transparent url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/artwork.jpg);
    background-repeat: no-repeat;
    background-position: 50% 41px;
    background-size: 730px 548px;
}
.retina figure.ipad
{
    background: transparent url(http://pixelmator-static.s3.amazonaws.com/home/ipad/1.0/artwork@2x.jpg);
    background-repeat: no-repeat;
    background-position: 50% 41px;
    background-size: 730px 548px;
}
/* navigation */
.dot-nav
{
    position: absolute;
    z-index: 10002;
    bottom: 30px;
    left: 0;

    width: 100%;
}
.dot-nav ul
{
    width: 980px;
    margin: 0 auto;

    text-align: center;
}
.dot-nav li
{
    position: relative;
    z-index: 1;

    display: inline-block;
    overflow: hidden;

    width: 14px;
    height: 14px;
    margin: 0 3px;
    padding: 4px;

    cursor: pointer;
}
.dot-nav li a
{
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 6px;

    display: inline-block;

    width: 6px;
    height: 6px;
    margin: 1px;

    cursor: pointer;
    text-indent: -1000em;

    border: 1px solid transparent;
    border-radius: 50%;
    background: rgba(148, 148, 148, 1);
}
.dot-nav li:hover a
{
    background: #666;
}
.dot-nav li a.active
{
    top: 4px;
    left: 4px;

    width: 10px;
    height: 10px;

    cursor: default;

    border: 1px solid rgba(55, 176, 236, 1);
    background: transparent;
}
/* video */
body .video-overlay
{
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
body .video-overlay.mac
{
    background: #000;
}
body .video-overlay.ipad
{
    background: #fff;
}
body .video-overlay .video-file
{
    position: absolute;
    top: calc(50% - 270px);
    left: calc(50% - 480px);

    width: 960px;
    height: 540px;
}

body .gallery-overlay a.close,
body .video-overlay a.close
{
    position: absolute;
    z-index: 999999999999999;
    top: 40px;
    left: 40px;

    display: block;

    width: 22px;
    height: 22px;
    padding: 5px;

    cursor: pointer;

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRDdGMTE3NDA3MjA2ODExODIyQUUxM0U1RTFGOTMyOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MzBEMEY2QTdCOUQxMUUzOEU5N0ZERTBBMTgwMzQyMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MzBEMEY2OTdCOUQxMUUzOEU5N0ZERTBBMTgwMzQyMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM4MDExNzQwNzIwNjgxMTgwODNDODc3N0REMzY5QzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkQ3RjExNzQwNzIwNjgxMTgyMkFFMTNFNUUxRjkzMjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6NF2W/AAAC7ElEQVR42pyVz08TQRTHp1t2Ww8mpGVXQk0wghcRwZZfCZ4FXGpEEkAK/gte/AO2CxgvnowehO5uoeDBBCghWDDx4kE9eZGkpVhK20MtlW4JJqxQ8M1mm2DTn0zyadrZnW/f+743M7q1tdXBzs6uVZPJrKCcIcsyevP6FdLpdKjQODo6Qt3dd9G9nl71987ODhMOh7qIRPzXZbckcum0bMhdhAVJkiyJXq9X349FozWeOTd/ePhHIRzjTySGYQKumWlOTqUMqMJxdnaGjEYjisfjJkkSJm22Nq/d/mCdqKqqQsMjoxJNM0GXMO1MpVJkJcIURaFQ6Cc975l9fsdqW7zP9n/A8wT+wOKjjjHhClPrl0SXM51Olx05rK0JhUL8zaamRZbt38jOE9kv2KeRxxA5w2y5Zt5yBwcHFGWgSumaFUWZaGlp9fb1sRvnHxA5/45GNFtEwcUnEwkKzxUYNDB1enq6VF1d7ct9SORJDTnGxgWaof0ezxwHC/PZYgZ4YAnYyGQyqKSwOkkQaGhoWLre0BA8Pj524hrliE4CXmC9UDpE4aKQiGXtIni/pUWHd4lJE10GfEWLWuyhlqIAjGI/tcgXgY+lqkqU2VXYS7xnG8oRLSmsdQSu/kvgKbAAvMjxvHLhZHLPBF2B/V0BPgPvAT/AAYYLCUciu+Z3C/NTWvXPF0oCggDuFrIi4VgsBnt/bqK+/toynAX5qi8C2W6hyhKORiImOC94q61t5eHAwDpYUSgo3C0BON04qIWhqDCkXzPrFqesVttyT0+v7+Qkg4oIq7ZARkG/38/v7++TeYVjsSg965YmWkEUjj51R5UQzXaOuLeXCMCxyctyivpPOKKmL/AQqZfVRMsd+Gpq7+gQLJarAUFwcXCdqbYQu+FwbTZ9iNR3oRvEYEQDjwYlhqa3hZlp5+9k8pK+rq72WfPtlk9sv92XL5pvX7+olhTir6KgOosFNTbeQE23mr9vbwfrNzd/tP8TYACQRjmSHwZ90QAAAABJRU5ErkJggg==) 5px 5px no-repeat;
    background-size: 22px 22px;
}
.retina body .gallery-overlay a.close,
.retina body .video-overlay a.close
{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRDdGMTE3NDA3MjA2ODExODIyQUUxM0U1RTFGOTMyOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MzBEMEY2NjdCOUQxMUUzOEU5N0ZERTBBMTgwMzQyMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MzBEMEY2NTdCOUQxMUUzOEU5N0ZERTBBMTgwMzQyMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM4MDExNzQwNzIwNjgxMTgwODNDODc3N0REMzY5QzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkQ3RjExNzQwNzIwNjgxMTgyMkFFMTNFNUUxRjkzMjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7gLpXwAAAD2ElEQVR42syZzU8TQRjGZ7ejNqldCy1KCV7x5NcZSpGCxrOQ4MGTUYLxYEy4evUM2EKvBlo10chXQQ/yB6ARiRwwwUBbKWiE0qYhhe3Wd5pZs9Z+7Mf0Y5MnS7ft7sPLb56Zd+AikbAjMDV58SidXuJ4HtXLcXx8jM63tqK79wZzr9fWvp5LJBIX8Lf19UuHh4ezFovlMVz314thHop34uTJ3M+fPi4LodD8m4yYEfnLV65+sNvtw5Ik+eC9oXoxzHEcMpkwWln53LC4uPAOLtk63e47GMwis9nsS6VSHFwkprOgiVobxhijnZ1YQzQaCYmi6OhwuTzdnp4wJm9ms8Qj8oIk0Cg1XWs8rNmsNH10lHZ0dLg8Hk9vOPeL5H1onPw1aIV5+roWRyNoPpORhPZ2lxsqu/238gU+7KOma4VHA2gOUqKppaXFozRbzHAt8bCCZkAO0DUYeJH/2C7x5WrjQTAIgQRQF2i74GAscxOf4lxJPGygWdBZUtliZtUYVpqtFB4CNWsHuUGRknGn8qZKPDiGlVZi4AH9KJvPGm4up4fM8gQDDMgAawJ1qzGr1bCcHgSLEYN4yBg4KAZR1TOgjof5FBXWkx4yBmdAPVrM6jVsZHIhGExTDDxazRoxrMRDbXqQis4p0iCq56HY4MBRi4cSg+t6zbIwrDT9jE7n/gKVnVakQcTQspNRnsosj+XltI1iQCrcqTa6qmFYObmQswh6TTEgq69eFmZZG5YrTcw+BQ2DEpTZCKsHVKJNfg5KgdpAb0Fhps1pBRbfS6BfoCdUTBtblkgIeWlAKvub5rTEapXHyrBNkbMuUCwvPbysVnmYEQYLNLp6FGYLpQdntHMxathKMbBTs+EyOT1iFA9ssLLzFIPOApUtlNPyWXePiA2abSqCQbnJRXePiA1g4KBLRK05a6hHxDoqK6dBV6nuViUempsArDG65mgr3m3ALMpjWRMeWAMG8o5MF8O1gbzDpLpHxCoxWKAzmeruViceZScXrAKDWa2tuAE8ym4h4DJrgxk9rbhBPEqmB2a1I8O4CcjhwfP8hBrD+T1Ytcz+s4UAZseTyWQ2mUj4rYJQdD0s0OiSMdhCtTm8JpPpQTweHwsEJu8fHBwUNEwweE/N9laB2bJ4YGx6tLu7638RnBqSTecMcxynxOBmHZhFkiQhi8Xqa252PozFYt5XL4ODyWQCmfr7bjlXV7/MADONYNzwvgGrQxRF5HQ2o76+/uWN7xs/d2Kx0c3NrTje29trA7jTZrP5Rg0GWNGD/Os2lUqh01YrGhi4PR4MBk7t7++7/ggwAKaHSybi0sNPAAAAAElFTkSuQmCC) 5px 5px no-repeat;
    background-size: 22px 22px;
}
