body {
	font-family: -apple-system-font, HelveticaNeue, Helvetica, sans-serif;
	background-color: #fff;
	color: #333;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 28px;
	-webkit-text-size-adjust: none;
}

.centered {
	min-width: 320px;
	max-width: 700px;
	margin: 20px auto;
	text-align: center;
}

.twitter-tweet {
	margin: 0 20px;
}

ol {
	max-width: 700px;
	margin: 20px auto;
}

del, del a {
	color: #919191;
}

sup {
	line-height: 0; 
}

sup a {
	padding: 0 3px;
}

p, h1, h2, ul, ol {
	text-align: left;
}

p.center {
	text-align: center;
}

a {
	color: #007AFF;
}

a:hover {
	opacity: 0.7;
}

.feature-watch {
	text-align: center;
	background-color: #eee;
	height: 315px;
}

.minicalc-watch {
	width: 260px;
	height: 315px;
	margin: auto;
	background-image: url("/static/img/minicalc.gif");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 158px 197px;
}

.watch-frame {
	width: 260px;
	height: 315px;
	background-image: url("/static/img/watch.png");
	background-size: 260px 315px;
}

.wide {
	width: 100%;
	min-width: 320px;
	max-width: 2560px;
	margin: 20px auto;
}

.highlighted {
	background-color: #f8f8f8;
}

nav ul {
	list-style-type: none;
	text-align: right;
	padding: 0;
}

nav ul li {
	display: inline;
	margin-left: 8px;
}

nav ul li:first-child {
	float: left;
	margin: 0;
}

nav ul li a {
/*
	font-size: 14px;
	text-transform: uppercase;
*/
	text-decoration: none;
	color: #71B6FF;
	-webkit-transition: color ease-in-out .25s;
}

h1, h2, p, ul {
	margin: 20px;
}

h1 {
	font-family: -apple-system-font, HelveticaNeue-Medium, Helvetica-Bold, sans-serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 35px;
	margin-top: 40px;
}

h2 {
	font-family: -apple-system-font, HelveticaNeue-Medium, Helvetica-Bold, sans-serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 26px;
	margin-top: 50px;
	margin-bottom: -5px;
	color: #000;
}

a.twitter:hover {
	color: #55ACEE;
}

a.github:hover {
	color: #4078c0;
}

a.stackoverflow:hover {
	color: #ff7000;
}

a.dribbble:hover {
	color: #EA518A;
}

a.email:hover {
	color: #0272FF;
}

header p {
	font-family: -apple-system-font, HelveticaNeue-Light, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 30px;
}

img.pano {
	width: 100%;
	min-width: 320px;
}

img.lefty, img.righty {
	-webkit-transition: margin ease-in-out 0.5s;
	max-width: 50%;
}

img.lefty {
	float: left;
	margin-left: -80px;
	margin-right: 16px;
}

img.righty {
	float: right;
	margin-left: 16px;
	margin-right: -80px;
}

img.big {
	width: 100%;
	max-width: 700px;
	min-width: 320px;
}

img.full-320 {
	width: 100%;
	max-width: 320px;
	margin: auto;
}

img.full-400 {
	width: 100%;
	max-width: 400px;
	margin: auto;
}

footer {
	color: #bbb;
	font-size: 12px;
	text-align: right;
}

footer.centered {
	margin-top: 40px;
}

footer a {
	color: #bbb;
}

footer a:hover {
	color: #666;
}

footer section {
	padding: 0 16px;
}

footer section.copyright {
	float: left;
}

code {
	display: block;
	min-width: 288px;
	max-width: 660px;
	margin: 18px auto;
	white-space: pre;
	font-family: SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	line-height: 17px;
}

.code {
	color: white;
	min-width: 280px;
	padding: 0px 20px;
	overflow-x: scroll;
	background-color: #1F2029;
	-webkit-overflow-scrolling: touch;
}

.inline-code {
	color: black;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 3px;
	font-family: SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	line-height: 17px;
}

.frontflash-header {
	background-image: url("/static/img/frontflash-header.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-color: black;
	color: #fff;
	height: 400px;
}

.frontflash-header > section.centered {
	position: relative;
	height: 100%;
}

.frontflash-header > section.centered > section {
	position: absolute;
	bottom: 0px;
}


span.keyword {font-variant-ligatures: no-common-ligatures; color: #D7008F}
span.project {font-variant-ligatures: no-common-ligatures; color: #1DA9A2}
span.system {font-variant-ligatures: no-common-ligatures; color: #25908D}
span.number {font-variant-ligatures: no-common-ligatures; color: #149C92}
span.string {font-variant-ligatures: no-common-ligatures; color: #D3232E}
span.comment {font-variant-ligatures: no-common-ligatures; color: #45BB3E}


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

img.lefty {
	margin-left: 0px;
}

img.righty {
	margin-right: 0px;
}

}

@media only screen and (max-width: 736px) {
	
.frontflash-header {
	background-size: auto 200px;
	height: 200px;
}

}

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

.twitter-tweet {
	margin: auto;
}

}

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


footer {
	text-align: center;
}

footer section.copyright {
	float: none;
}

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

.minicalc-watch {
	background-image: url("/static/img/minicalc_2x.gif");
}

.watch-frame {
	background-image: url("/static/img/watch_2x.png");
}

}


/* ScoreView */

.icon_layer1 {
    position: relative;
    width: 70%;
    min-width: 224px;
    max-width: 370px;
    background-image: url("/static/img/scoreview-icon-layer1.png");
    background-position: center center;
    background-size: 100%;
    border-radius: 1.75% / 3%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
    margin: 40px auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.icon_layer1:after {
    content: "";
    display: block;
    padding-top: 60%;
}

.icon_layer2 {
    background-clip: border-box;
    position: absolute;
    background-image: url("/static/img/scoreview-icon-layer2.png");
    background-position: center center;
    background-size: 100%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(5px);
    transform: translateZ(5px);
}

.icon_layer3 {
    background-clip: border-box;
    position: absolute;
    background-image: url("/static/img/scoreview-icon-layer3.png");
    background-position: center center;
    background-size: 100%;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(10px);
    transform: translateZ(10px);
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
    }
    12.5% {
        -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(5deg);
    }
    25% {
        -webkit-transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
    }
    37.5% {
        -webkit-transform: perspective(1000px) rotateX(-5deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
    }
    62.5% {
        -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(-5deg);
    }
    75% {
        -webkit-transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
    }
    87.5% {
        -webkit-transform: perspective(1000px) rotateX(5deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    
    .icon_layer1 {
        background-image: url("/static/img/scoreview-icon-layer1_2x.png");
    }
    
    .icon_layer2 {
        background-image: url("/static/img/scoreview-icon-layer2_2x.png");
    }
    
    .icon_layer3 {
        background-image: url("/static/img/scoreview-icon-layer3_2x.png");
    }
}


/* FrontFlash */

.devices {
	background-image: url("/static/img/devices.png");
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	width: 160px;
	height: 190px;
	margin: 0px auto;
	padding: 0px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	
.devices {
	background-image: url("/static/img/devices_2x.png");
}

}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
	
.devices {
	background-image: url("/static/img/devices_3x.png");
}

}