body{
	text-align:center;
	font-family: "Oswald" , Arial, sans-serif;
	font-family: "Open Sans" , Arial , sans-serif;
	color:rgb( 32 , 35 , 34 );
	font-weight:300;
}

h1{
	text-align:center;
	font-family: 'Amatic SC', cursive;
	font-weight:300;
	font-size:40px;
	font-size:3.5vw;
	margin-top:1vw;
	margin-bottom:2vw;
}

a{
	color:white;
	transition:.2s; 
	text-decoration:none;
	position:relative;
}

a:hover{
	text-decoration:none;
	background:rgba( 0 , 0 , 0,  0 );
	color:rgb( 32 , 35 , 34 );
}

a::after{
	content:'';
	display:block;
	position:absolute;
	top:-1px;
	bottom:-1px;
	left:-2px;
	right:-2px;
	background:rgba( 0 , 0 , 0 , .05 );
	border-radius:5px;
	-webkit-animation: pulse 3s infinite; 
	-moz-animation:    pulse 3s infinite;
	-o-animation:      pulse 3s infinite;
	animation:         pulse 3s infinite;
}

a:hover::after{
	-webkit-animation: none; 
	-moz-animation:    none;
	-o-animation:      none;
	animation:         none;
	background:rgba( 0 , 0 , 0 , 0 );
}

p{
	margin:5px 10px;
}

article{
	z-index:10000;
}

#squivo-container{
	position:absolute;
	display:inline-block;
	grid-column: 6;
	grid-row:2 /2;
	bottom:-4vh;
	z-index:1000;
	width:10vh;
	/*-webkit-animation: squivo-walk 2s infinite;
	-moz-animation:    squivo-walk 2s infinite;
	-o-animation:      squivo-walk 2s infinite;
	animation:         squivo-walk 2s infinite;*/
}

#squivo-container:hover{
}

#squivo-container img{
	max-width:100%;
}

.site{
	display:grid;
	grid-template-rows: 1.5fr 1fr;
	height:100vh;
	overflow:hidden;
}

.sky{
	display:grid;
	position:relative;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr 1px;
	grid-row: 1 / 1;
	background-image: linear-gradient(to bottom, #1073d0, #1a7bd6, #2382dd, #2b8ae3, #3392e9, #429aec, #4fa1ee, #5ca9f1, #70b2f1, #83bcf1, #95c5f1, #a7cef1);
	width:100%;
}

.sky-texture{
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:url(squivo_images/sky_texture.jpg) no-repeat center bottom;
	background-size:cover;
	opacity:.1;
	z-index:0;
}

.frontgrass_2{
	display:grid;
	position:absolute;
	width:100%;
	max-width:100%;
	grid-row: 2 / 2;
	grid-column: 1/ 10;
	background:url( squivo_images/canola_tile.png) repeat-x;
	bottom:0px;
	height:20px;
	z-index:5;
}

.frontgrass_1{
	display:grid;
	position:absolute;
	width:100%;
	max-width:100%;
	background:url( squivo_images/canola_tile.png) repeat-x;
	bottom:0px;
	height:20px;
	z-index:5;
}

.backgrass_1{
	display:grid;
	position:absolute;
	width:100%;
	max-width:100%;
	grid-row: 2 / 2;
	grid-column: 1/ 10;
	bottom:0px;
	height:15px;
	z-index:2;
	opacity:.69;
	background-image: linear-gradient(to bottom, #00A36C , #d4c80f );
	-webkit-animation: ocean-1 5s infinite; 
	-moz-animation:    ocean-1 5s infinite;
	-o-animation:      ocean-1 5s infinite;
	animation:         ocean-1 5s infinite;
}

.backgrass_2{
	display:grid;
	position:absolute;
	max-width:100%;
	width:100%;
	grid-row: 2 / 2;
	grid-column: 1/ 10;
	bottom:0px;
	height:30px;
	z-index:1;
	opacity:.69;
	background-image: linear-gradient(to bottom, #006777 , #00A36C );
}

.tree{
	display:inline-block;
	position:absolute;
	grid-column: 3;
	grid-row:2 /2;
	bottom:-9vh;
	z-index:100;
	width:40vh;
	max-width:100%;
	/*-webkit-animation: moving-tree 90s infinite;
	-moz-animation:    moving-tree 90s infinite;
	-o-animation:      moving-tree 90s infinite;
	animation:         moving-tree 90s infinite;*/
}

.tree > img{
	max-width:100%;
}

.ground{
	display:grid;
	grid-row-start: 2;
	grid-row-end: 3;
	text-align:center;
	align-content: center;
	background-image: linear-gradient(to top, #608038, #698a3c, #729441, #7b9e46, #85a84a);
	background-image: linear-gradient(to bottom, #a8b120, #b2b71d, #bdbd19, #c8c215, #d4c80f);
	width:100%;
}

.logos{
	display:block;
	position:absolute;
	bottom:3vh;
	margin:2vw auto 1vw;
	right:0;
	z-index:1000;
}

.logos > li{
	position:relative;
	display:block;
	margin:0;
	padding:3px;
	line-height:30px;
	font-size:0;
	text-align:right;
	cursor:pointer;
	cursor:hand;
}

.logos > li > img{
	display: inline-block;
    vertical-align: middle;
 	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
    background:rgba( 255 , 255 , 255 , 0 );
    width: 30px;
    height: 30px;
    padding:2px;
    padding-right:5px;
    margin:0;
    transform: scale( 1 );
    border: 1px solid rgba( 0 , 0 , 0 , 0 );
    transition: .2s;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

.logos > li > span{
	display:inline-block;
    vertical-align: middle;
	color: rgb( 85 , 86 , 89 );
	background:rgba( 255 , 255 , 255 , 1 );
    padding:3px 5px;
    font-size:14px;
    margin:0;
    opacity: 0;
    width:auto;
    visibility: none;
    transition: .2s;
    border-left:2px solid grey;
}

.logos > li:hover > img{
	background:rgba( 255 , 255 , 255 , 1 );
	-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
	filter: grayscale(0);
}


.logos > li:hover > span{
	visibility: visible;
	opacity:1;
}

.cloud_1{
	display:inline-block;
	position:absolute;
	grid-column: 5;
	grid-row:1 ;
	z-index:1;
	margin-top:12vh;
	opacity:.5;
	max-width:100%;
	/*-webkit-animation: moving-cloud 280s linear infinite; 
	-moz-animation:    moving-cloud 280s linear infinite;
	-o-animation:      moving-cloud 280s linear infinite;
	animation:         moving-cloud 280s linear infinite;
	animation-delay: 10s;*/
}

.cloud_2{
	display:inline-block;
	position:absolute;
	grid-column: 6;
	grid-row:1 ;
	z-index:1;
	margin-top:22vh;
	opacity:.5;
	max-width:100%;
	/*-webkit-animation: moving-cloud 310s linear infinite; 
	-moz-animation:    moving-cloud 310s linear infinite;
	-o-animation:      moving-cloud 310s linear infinite;
	animation:         moving-cloud 310s linear infinite;*/
}

.cloud_1 img,
.cloud_2 img{
	max-width:100%;
}

.sun{
	display:inline-block;
	position:absolute;
	grid-column: 8;
	grid-row:1;
	z-index:0;
	margin-top:1vh;
	width:16vh;
	max-width:100%;
}

.sun > img{
	max-width:100%;
}

.thing{
	display:block;
	margin:0 auto;
	width:25%;
	padding:5px 10px;
	border:2px dashed rgb( 0 , 0 , 0 , .25 );
	border-radius:5px;
}

@-webkit-keyframes pulse{
  0%   { background:rgba( 0 , 0 , 0 , 0.05 ); }
  50%	{ background:rgba( 255, 225, 53 , .3 ); }
  100%	{ background:rgba( 0 , 0 , 0 , 0.05 ); }
}
@-moz-keyframes pulse {
  0%   { background:rgba( 0 , 0 , 0 , 0.05 ); }
  50%	{ background:rgba( 255, 225, 53 , .3 ); }
  100%	{ background:rgba( 0 , 0 , 0 , 0.05 ); }
}
@-o-keyframes pulse {
  0%   { background:rgba( 0 , 0 , 0 , 0.05 ); }
  50%	{ background:rgba( 255, 225, 53 , .3 ); }
  100%	{ background:rgba( 0 , 0 , 0 , 0.05 ); }
}
@keyframes pulse {
  0%   { background:rgba( 0 , 0 , 0 , 0.05 ); }
  50%	{ background:rgba( 255, 225, 53 , .3 ); }
  100%	{ background:rgba( 0 , 0 , 0 , 0.05 ); }
}

@-webkit-keyframes ocean-1 {
  0%   { bottom:0;}
  50%	{ bottom:5px; }
  100%	{ bottom:0; }
}
@-moz-keyframes ocean-1 {
  0%   { bottom:0;}
  50%	{ bottom:5px; }
  100%	{ bottom:0; }
}
@-o-keyframes ocean-1 {
  0%   { bottom:0;}
  50%	{ bottom:5px; }
  100%	{ bottom:0; }
}
@keyframes ocean-1 {
  0%   { bottom:0;}
  50%	{ bottom:5px; }
  100%	{ bottom:0; }
}


@-webkit-keyframes moving-tree {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-moz-keyframes moving-tree {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-o-keyframes moving-tree {
  0%   { left:100%; }
  100% { left:-100%; }
}
@keyframes moving-tree {
  0%   { left:100%; }
  100% { left:-100%; }
}

@-webkit-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-moz-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-o-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}

@-webkit-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-moz-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-o-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}

@-webkit-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-moz-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-o-keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@keyframes moving-cloud {
  0%   { left:100%; }
  100% { left:-100%; }
}
@-webkit-keyframes squivo-walk {
  0%   { bottom:-50px; }
  25%  { bottom:-15px; }
  75% { bottom:-40px; }
  100% { bottom:-50px; }
}
@-moz-keyframes squivo-walk {
  0%   { bottom:-50px; }
  25%  { bottom:-15px; }
  75% { bottom:-40px; }
  100% { bottom:-50px; }
}
@-o-keyframes squivo-walk {
  0%   { bottom:-50px; }
  25%  { bottom:-15px; }
  75% { bottom:-40px; }
  100% { bottom:-50px; }
}
@keyframes squivo-walk {
  0%   { bottom:-50px; }
  25%  { bottom:-15px; }
  75% { bottom:-40px; }
  100% { bottom:-50px; }
}

@media (max-width: 960px) {
	.sun{
		grid-column: 7; 
	}
	.tree{
		width:85%;
	}
	#squivo-container{
		width:5vh;
	}
	h1{
		font-size:34px;
		padding:20px;
	}
	p{
		margin:5px 20px;
	}
}

@media (max-width: 768px) {
	.site{
		overflow:auto;
	}
	.sun{
		grid-column: 3 ;
	}
	.tree{
		grid-column: 2;
	}
	.tree{
		width:75%;
	}
	h1{
		font-size:26px;
		padding:10px 20px;
	}
	.frontgrass_1{
		display:none;
	}
}