/**
 * Theme Name: Scratch
 * Author: Tony Boyce
 * Author URI: https://tonyboyce.info
 * Description: Thhis theme is perfect for minimalists. It's different to most themes due to it being purpose built for headless WordPress installations. No posts here.
 * Version: 1.0
 * Text Domain: scratch
 * License: GNU GPL v3
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,em,img,strong,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section {
	font-size:100%;
	font:inherit;
	padding:0;
	border:0;
	margin:0;
	vertical-align:baseline;
}

main,header,footer,aside,section,article,menu,nav {
	display:block;
	padding:0;
	margin:0;
}

/* apply a natural box layout model to all elements: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*,:before,:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

img {
	display:block;
	max-width:100%;
	height:auto;
}
a {
	color: #444;
	text-decoration: none;
}

a:active,a:hover {
	outline:0;
}

a:focus {
    outline: none;   
}


html,body {
	height:100%;
	width:100%;
	color:#343434;
	background-image:url(https://tonyboyc.es/images/balloon/background.jpg);
	background-size: cover;
	font-size:16px;
	font-size:1rem;
	font-weight:400;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	line-height:1.4;
}

main {
	overflow-x:hidden;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
}

header {
	width:100%;
	flex-shrink: 0;
	padding: 8px 5%;
}
.menu {
	float: right;
}

.menu ul li {
	display: inline;
	padding-left: 12px;
}

section {
	width:100%;
	height:100%;
	position: relative;
	flex: 1 0 auto;
	display: flex;
}

footer {
	width:100%;
	text-align: center;
	font-size: 14px;
	padding: 8px;
	flex-shrink: 0;
}
.small-balloon {
	width:165px;
	height:235px;
	position:absolute;
	left:30%;
	bottom: 440px;
	z-index:2;
	-webkit-animation:rise 120s linear infinite;
	animation:rise 120s linear infinite;
	animation-timing-function: ease-in-out;
}

@-webkit-keyframes rise {
	0% {
		-webkit-transform:translateY(360px);
	}
	
	50% {
		-webkit-transform:translateY(-235px);
	}

	54% {
		-webkit-transform:translateY(-235px);
	}

	100% {
		-webkit-transform:translateY(360px);
	}
}

@keyframes rise {
	0% {
		-webkit-transform:translateY(360px);
	}
	
	50% {
		-webkit-transform:translateY(-235px);
	}

	54% {
		-webkit-transform:translateY(-235px);
	}

	100% {
		-webkit-transform:translateY(360px);
	}
}


.balloon {
	width:280px;
	height:392px;
	position:absolute;
	bottom:400px;
	left:50%;
	margin-left: -140px;
	z-index:10;
	-webkit-animation:move 96s linear infinite;
	animation:move 96s linear infinite;
	animation-timing-function: ease-in-out;}

@-webkit-keyframes move {
	0% {
		-webkit-transform:translateY(340px);
	}
	
	50% {
		-webkit-transform:translateY(-500px);
	}

	54% {
		-webkit-transform:translateY(-500px);
	}

	100% {
		-webkit-transform:translateY(340px);
	}
}

@keyframes move {
	0% {
		transform:translateY(340px);
	}
	
	50% {
		transform:translateY(-500px);
	}

	54% {
			transform:translateY(-500px);
		}
		
	100% {
		transform:translateY(340px);
	}
}

.balloon img, .small-balloon img{
	background: transparent!important;
}	

.cloud320x135 {
	width:320px;
	height:135px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/cloud320x135.png) 0 0 no-repeat;
	z-index:3;
}

.cloud420 {
	width:420px;
	height:273px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/clouds420.png) 0 0 no-repeat;
}

.cloud120x74 {
	width:120px;
	height:74px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/clouds120x74.png) 0 0 no-repeat;
}

.cloud400x228 {
	width:480px;
	height:241px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/cloud400x228.png) 0 0 no-repeat;
}

.cloud-group88x64 {
	width:88px;
	height:64px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/cloud-group88x64.png) 0 0 no-repeat;
}

.cloud-stacked480x310 {
	width:480px;
	height:310px;
	position:absolute;
	background:transparent url(https://tonyboyc.es/images/balloon/clouds-stacked480x310.png) 0 0 no-repeat;
}

.cloud01 {
	bottom:220px;
	z-index:20;
	animation:drift 85s linear infinite backwards;
}

.cloud02 {
	bottom:230px;
	z-index:200;
	animation:drift 85s linear 30s infinite backwards;
}

.cloud03 {
	bottom:270px;
	z-index:300;
	animation:drift 80s linear 20s infinite backwards;
}

.cloud04 {
	bottom:180px;
	z-index:3;
	animation:drift 95s linear 15s infinite backwards;
}

.cloud05 {
	bottom:400px;
	z-index:1;
	animation:small-drift 160s linear infinite backwards;
}

.cloud06 {
	top:460px;
	z-index:1;
	animation:group-drift 260s linear infinite backwards;
}

.cloud07 {
	bottom:0;
	z-index:11;
	animation:stack-drift 100s linear backwards ;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.cloud08 {
	bottom:0;
	z-index:11;
	animation:stack-drift2 180s linear infinite backwards;
}


@-webkit-keyframes small-drift {
	from {
		-webkit-transform:translateX(-120px);
	}
	
	to {
		-webkit-transform:translateX(1850px);
	}
}

@keyframes small-drift {
	from {
		transform:translateX(-120px);
	}
	
	to {
		transform:translateX(1850px);
	}
}

@-webkit-keyframes drift {
	from {
		-webkit-transform:translateX(-420px);
	}
	
	to {
		-webkit-transform:translateX(1850px);
	}
}

@keyframes drift {
	from {
		transform:translateX(-420px);
	}
	
	to {
		transform:translateX(1850px);
	}
}

@-webkit-keyframes group-drift {
	from {
		-webkit-transform:translateX(-88px);
	}
	
	to {
		-webkit-transform:translateX(1850px);
	}
}

@keyframes group-drift {
	from {
		transform:translateX(-88px);
	}
	
	to {
		transform:translateX(1850px);
	}
}

@-webkit-keyframes stack-drift {
	0% {
		-webkit-transform:translateX(560px);
	}
	
	100% {
		-webkit-transform:translateX(1850px);
	}
}

@keyframes stack-drift {
	0% {
		transform:translateX(560px);
	}
	
	100% {
		transform:translateX(1850px);
	}
}

@-webkit-keyframes stack-drift2 {
	from {
		-webkit-transform:translateX(-1850px);
	}
	
	to {
		-webkit-transform:translateX(1850px);
	}
}

@keyframes stack-drift2 {
	from {
		transform:translateX(-1850px);
	}
	
	to {
		transform:translateX(1850px);
	}
}

/* Max screen width 1000px */
@media screen and (max-width: 1000px) {
	
@-webkit-keyframes small-drift {
	from {
		-webkit-transform:translateX(-120px);
	}
	
	to {
		-webkit-transform:translateX(1000px);
	}
}

@keyframes small-drift {
	from {
		transform:translateX(-120px);
	}
	
	to {
		transform:translateX(1000px);
	}
}

@-webkit-keyframes drift {
	from {
		-webkit-transform:translateX(-420px);
	}
	
	to {
		-webkit-transform:translateX(1000px);
	}
}

@keyframes drift {
	from {
		transform:translateX(-420px);
	}
	
	to {
		transform:translateX(1000px);
	}
}

@-webkit-keyframes group-drift {
	from {
		-webkit-transform:translateX(-88px);
	}
	
	to {
		-webkit-transform:translateX(1000px);
	}
}

@keyframes group-drift {
	from {
		transform:translateX(-88px);
	}
	
	to {
		transform:translateX(1000px);
	}
}

@-webkit-keyframes stack-drift {
	from {
		-webkit-transform:translateX(220px);
	}
	
	to {
		-webkit-transform:translateX(1000px);
	}
}

@keyframes stack-drift {
	0% {
		transform:translateX(220px);
	}
	
	100% {
		transform:translateX(1000px);
	}
}

@-webkit-keyframes stack-drift2 {
	from {
		-webkit-transform:translateX(-1480px);
	}
	
	to {
		-webkit-transform:translateX(1000px);
	}
}

@keyframes stack-drift2 {
	from {
		transform:translateX(-1480px);
	}
	
	to {
		transform:translateX(1000px);
	}
}

	
}

/* Max screen width 768px */
@media screen and (max-width: 768px) {
	
@-webkit-keyframes small-drift {
	from {
		-webkit-transform:translateX(-120px);
	}
	
	to {
		-webkit-transform:translateX(768px);
	}
}

@keyframes small-drift {
	from {
		transform:translateX(-120px);
	}
	
	to {
		transform:translateX(768px);
	}
}

@-webkit-keyframes drift {
	from {
		-webkit-transform:translateX(-420px);
	}
	
	to {
		-webkit-transform:translateX(768px);
	}
}

@keyframes drift {
	from {
		transform:translateX(-420px);
	}
	
	to {
		transform:translateX(768px);
	}
}

@-webkit-keyframes group-drift {
	from {
		-webkit-transform:translateX(-88px);
	}
	
	to {
		-webkit-transform:translateX(768px);
	}
}

@keyframes group-drift {
	from {
		transform:translateX(-88px);
	}
	
	to {
		transform:translateX(768px);
	}
}

@-webkit-keyframes stack-drift {
	from {
		-webkit-transform:translateX(200px);
	}
	
	to {
		-webkit-transform:translateX(768px);
	}
}

@keyframes stack-drift {
	0% {
		transform:translateX(200px);
	}
	
	100% {
		transform:translateX(768px);
	}
}

@-webkit-keyframes stack-drift2 {
	from {
		-webkit-transform:translateX(-1248px);
	}
	
	to {
		-webkit-transform:translateX(768px);
	}
}

@keyframes stack-drift2 {
	from {
		transform:translateX(-1248px);
	}
	
	to {
		transform:translateX(768px);
	}
}
	
}

/* Max screen width 480px */
@media screen and (max-width: 480px) {
	
@-webkit-keyframes small-drift {
	from {
		-webkit-transform:translateX(-120px);
	}
	
	to {
		-webkit-transform:translateX(480px);
	}
}

@keyframes small-drift {
	from {
		transform:translateX(-120px);
	}
	
	to {
		transform:translateX(480px);
	}
}

@-webkit-keyframes drift {
	from {
		-webkit-transform:translateX(-420px);
	}
	
	to {
		-webkit-transform:translateX(480px);
	}
}

@keyframes drift {
	from {
		transform:translateX(-420px);
	}
	
	to {
		transform:translateX(480px);
	}
}

@-webkit-keyframes group-drift {
	from {
		-webkit-transform:translateX(-88px);
	}
	
	to {
		-webkit-transform:translateX(480px);
	}
}

@keyframes group-drift {
	from {
		transform:translateX(-88px);
	}
	
	to {
		transform:translateX(480px);
	}
}

@-webkit-keyframes stack-drift {
	from {
		-webkit-transform:translateX(50px);
	}
	
	to {
		-webkit-transform:translateX(480px);
	}
}

@keyframes stack-drift {
	0% {
		transform:translateX(50px);
	}
	
	100% {
		transform:translateX(480px);
	}
}

@-webkit-keyframes stack-drift2 {
	from {
		-webkit-transform:translateX(-560px);
	}
	
	to {
		-webkit-transform:translateX(480px);
	}
}

@keyframes stack-drift2 {
	from {
		transform:translateX(-560px);
	}
	
	to {
		transform:translateX(480px);
	}
}
	
}