/*
Theme Name: Blog In A Box
Theme URI: http://automattic.com/about/
Author: Automattic
Author URI: http://automattic.com/about/
Description: A theme for Blog In A Box
Version: 1.0
*/

/* Reset */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/**
 * General
 */

body {
	font: 10pt/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
	background: #28b2dd;
	color: #fff;
	font-weight: 500;
}

section p,
section h1,
section h2,
section h3 {
	max-width: 680px;
}

h1,
h2,
h3 {
	font-size: 48px;
	font-weight: 800;
}

p {
	font-size: 20px;
}

h1,
h2,
h3,
p {
	margin: 20px 0;
}

p:first-of-type {
    margin-top: 0;
}

img {
	max-width: 100%;
	max-height: 60vh;
	height: auto;
}

a:link, a:active {
	color: #00669b;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:visited {
	color: #05486A;
}


/**
 * Animation
 */

@keyframes fading-arrow {
	0% {
		opacity: 0;
		bottom: 5%;
	}
	10% {
		opacity: 0;
		bottom: 4%;
	}
	20% {
		opacity: 1;
		bottom: 3%;
	}
	50% {
		opacity: 0;
		bottom: 0%;
	}
	100% {
		opacity: 0;
		bottom: 0%;
	}
}


/**
 * Section
 */

 /* 0 */
 section {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 height: 100vh;
	 padding: 20px;
	 text-align: center;
	 position: relative;
}

body.logged-in section:first-of-type {
	height: calc( 100vh - 32px );
}

@media only screen and ( max-width: 782px ) {
	body.logged-in section:first-of-type {
		height: calc( 100vh - 46px );
	}
}


svg.chevron {
	position: absolute;
	bottom: 20px;
	width: 48px;
	height: 48px;
	left: 50%;
	transform: translateX( -50% );
	fill: currentColor;
    animation: fading-arrow 2.5s infinite linear;
}

/* 1 */
section+section {
	background: #bee7f4;
	color: #191e23;
}

/* 2 */
section+section+section {
	background: #61c6e6;
	color: #191e23;
}

/* 3 */
section+section+section+section {
	background: #40464d;
	color: #fff;
}

/* 4 */
section+section+section+section+section {
	background: #e0e5e9;
	color: #191e23;
}

/* 5 */
section+section+section+section+section+section {
	background: #007bb4;
	color: #fff;
}

/* 6 */
section+section+section+section+section+section+section {
	background: #009fd4;
	color: #fff;
}

/* 7 */
section+section+section+section+section+section+section+section {
	background: #40464d;
	color: #fff;
}

/* 8 */
section+section+section+section+section+section+section+section+section {
	background: #007bb4;
	color: #fff;
}

section+section+section+section+section+section+section+section+section a {
	color: #fff !important;
	text-decoration: underline !important;
}


/**
 * Buttons
 */

a.button {
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	height: auto;
	display: inline-block;
	text-align: left;
	background: #12181e;
	padding: 0 12px 0 6px;
	box-shadow: 0 5px 20px rgba( 0,0,0, .25);
	margin: 4px;
	line-height: 40px;
	font-size: 16px;
}

.button svg {
	width: 32px;
	height: 32px;
	display: inline-block;
	fill: currentColor;
	float: left;
	margin-right: 6px;
	margin-top: 4px;
}

.download-buttons a.button {
	display: block;
	margin: 12px auto;
}

@media only screen and (max-width: 480px) {
	/* 5 */
	section+section+section+section+section+section p, section+section+section+section+section+section+section+section+section p {
		font-size: 18px;
	}
	section+section+section+section+section+section h1 {
		font-size: 36px;
	}
	
	section+section+section+section+section+section+section+section p {
		font-size: 16px;
	}
}


/* Hide download button if on a mobile device */
html.is-mobile body.page-template-page-desktop #buttons {
  display: none;
}
html.is-mobile body.page-template-page-desktop #btn-mobile {
  display: inline !important;
}


section img {
	-webkit-box-shadow: 2px 2px 11px 1px rgba(0,0,0,0.22);
	-moz-box-shadow: 2px 2px 11px 1px rgba(0,0,0,0.22);
	box-shadow: 2px 2px 11px 1px rgba(0,0,0,0.22);
}

.support {
	position: fixed;
	bottom: 15px;
	left: 15px;
}

.automattic {
	position: fixed;
	bottom: 15px;
	right: 15px;
}

.automattic a,
.support a {
	color: #fff;
}

.automattic a:hover,
.support a:hover {
	text-decoration: underline;
}

.page-id-17 {
	width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 20px;
}

.page-id-17 a {
	text-decoration: underline;
}

.page-id-17 .site-content {
	margin-bottom: 120px;
}

.page-id-17 p {
	font-size: 16px;
}

.page-id-17 h2 {
	font-size: 26px;
	margin: 48px 0 24px 0;
}

.page-id-17 h3 {
	font-size: 18px;
}

.support-warning {
	padding: 24px;
	text-align: center;
	border-radius: 4px;
	background: #12181e;
	box-shadow: 0 5px 20px rgba( 0,0,0, .25);
	margin: 36px 0;
}

.support-warning a {
	color: #f0b849;
}


.page-id-17 img {
	max-width: 600px;
	border-radius: 4px;
	box-shadow: 0 5px 20px rgba( 0,0,0, .25);
	display: block;
	margin: 48px auto;
}

.page-id-17 p,
.page-id-17 h1,
.page-id-17 h2,
.page-id-17 h3 {
	max-width: 680px;
}

@media only screen and (max-width: 480px) {
	.page-id-17 {
		width: 100%;
	}
}


/**
 * Responsive
 */

@media only screen and ( max-height: 520px ) {
	p {
		font-size: 16px;
		margin: 5px 0;
	}	
}