@import url(https://fonts.googleapis.com/css?family=Michroma);	

/* whatever... 
978 * 734

*/

* {
//	box-sizing: border-box;
	float: left;
}
hr {
	border-style: inset;
    border-width: 1px;
    /*width: 100%; */
}

#thumb1 {
	left: 45%;
	top: 19px;
	transform: rotate(-3deg);
}
#thumb2 {
	left: 41%;
	top: 74px;
	transform: rotate(-8deg);
}
#thumb3 {
	left: 60%;
	top: 61px;
	transform: rotate(-19deg);
}
#thumb4 {
	left: 12%;
	top: 108px;
	transform: rotate(-13deg);
}
#thumb5 {
	left: 22%;
	top: 114px;
	transform: rotate(2deg);
}
#thumb6 {
	left: 62%;
	top: 75px;
	transform: rotate(14deg);
}
#thumb7 {
	left: 21%;
	top: 143px;
	transform: rotate(-7deg);
}
#thumb8 {
	left: 0%;
	top: 149px;
	transform: rotate(14deg);
}
#thumb9 {
	left: 67%;
	top: 146px;
	transform: rotate(12deg);
}
#thumb10 {
	left: 30%;
	top: 159px;
	transform: rotate(-10deg);
}
#thumb11 {
	left: 28%;
	top: 142px;
	transform: rotate(19deg);
}
#thumb12 {
	left: 23%;
	top: 204px;
	transform: rotate(-16deg);
}
#thumb13 {
	left: 68%;
	top: 200px;
	transform: rotate(13deg);
}
#thumb14 {
	left: 33%;
	top: 202px;
	transform: rotate(12deg);
}
#thumb15 {
	left: 67%;
	top: 188px;
	transform: rotate(1deg);
}
#thumb16 {
	left: 12%;
	top: 238px;
	transform: rotate(8deg);
}
#thumb17 {
	left: 59%;
	top: 256px;
	transform: rotate(2deg);
}
#thumb18 {
	left: 53%;
	top: 241px;
	transform: rotate(5deg);
}
#thumb19 {
	left: 37%;
	top: 281px;
	transform: rotate(-19deg);
}
#thumb20 {
	left: 47%;
	top: 309px;
	transform: rotate(6deg);
}
#thumb21 {
	left: 50%;
	top: 278px;
	transform: rotate(2deg);
}
#thumb22 {
	left: 0%;
	top: 75px;
	transform: rotate(-12deg);
}
#thumb23 {
	left: 1%;
	top: 297px;
	transform: rotate(-12deg);
}
#thumb24 {
	left: 8%;
	top: 339px;
	transform: rotate(15deg);
}
#thumb25 {
	left: 0%;
	top: 500px;
	transform: rotate(-11deg);
}
#thumb26 {
	left: 60%;
	top: 425px;
	transform: rotate(-15deg);
}
#thumb27 {
	left: 65%;
	top: 344px;
	transform: rotate(-18deg);
}
#thumb28 {
	left: 51%;
	top: 373px;
	transform: rotate(-8deg);
}
#thumb29 {
	left: 55%;
	top: 390px;
	transform: rotate(2deg);
}
#thumb30 {
	left: 8%;
	top: 401px;
	transform: rotate(-12deg);
}
#thumb31 {
	left: -56%;
	top: 418px;
	transform: rotate(18deg);
}
#thumb32 {
	left: -66%;
	top: 422px;
	transform: rotate(-18deg);
}
#thumb33 {
	left: 8%;
	top: 415px;
	transform: rotate(-16deg);
}
#thumb34 {
	left: 37%;
	top: 482px;
	transform: rotate(-13deg);
}
#thumb35 {
	left: -20%;
	top: 488px;
	transform: rotate(15deg);
}
#thumb36 {
	left: 59%;
	top: 492px;
	transform: rotate(6deg);
}
#thumb37 {
	left: 51%;
	top: 500px;
	transform: rotate(3deg);
}
#thumb38 {
	left: 19%;
	top: 521px;
	transform: rotate(-11deg);
}
#thumb39 {
	left: 20%;
	top: 511px;
	transform: rotate(5deg);
}
#thumb40 {
	left: -40%;
	top: 518px;
	transform: rotate(0deg);
}


body {
	margin: 0px;
	background: #468;
	font-family: 'Michroma', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	color: #FFF;
    //background: url("pattern5.png"), linear-gradient(to left, #408, #650); 
    //background: url("pattern6.png"), linear-gradient(to left, #309, #540); 
    //background:  url("scratched@2x.png"), linear-gradient(to left, #309, #540); 
    background:  url("scratched@2x.png"), linear-gradient(to left, #215, #540); 
}
a.appstore {
	display: block;
	margin: 20px auto 50px auto;
	width: 202px;
	height: 60px;
	background: url(badge-app-store@2x.png);
	//background: url(notyet-app-store@2x.png);
	//background: url(soon2.png);
	background-size: 202px 60px;
	text-indent: -5000em;
	float: none;
}
a.appstore:hover {
	-webkit-filter: invert(100%);
}

.tframe {
	width: 100%;
	display: inline-block;
	text-align: center;
}

.fframe {
	width: 100%;
	display: block;
	text-align: center;
	overflow: hidden;
}

.vframe {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	overflow: hidden;
	float: none;
}

.vdiv {
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	margin-bottom: 30px;
	width:500px;
	height:315px;
	//width: 100%;
	//height: auto;
}

.legal {
	width: 80%;
	margin: 50px 100px 50px 100px;
}

.footer {
	width: 100%;
	height: 144px;
	display: block;
	text-align: center;
	overflow: hidden;
	background:  url("scratched@2x.png"), linear-gradient(to left, #888, #777); 
}

.feature {
	width: 33%;
	vertical-align: text-top;
	height: auto;
}

.space3 {
	width: 100%;
	height: 1px;	
}
.space2 {
	width: 1px;
	height: 1px;
}

.symbol {
	width: 50px;
	height: 50px;
}

h1 {
	width: 100%;
	font-size: 4em;
	text-align: center;
}

h2 {
	width: 100%;
	font-size: 3em;
	text-align: center;
}

h3 {
	font-size: 4em;
	font-family:  sans-serif;
	width: 80%;
	font-size: 1em;
	text-align: left;
	margin: 10px 10% 10px 10%;
}

h4 {
	font-size: 3em;
	font-family:  DIN Alternate, sans-serif;
	width: 80%;
	text-align: left;
	color:  #F00; 
	margin: 18px 6% 10px 6%;
	text-shadow: 2px 2px #000000;
	transform: rotate(-7deg);
	//position: absolute;
    //z-index:100;
}

p {
	//font-family:  DIN Alternate, Monospace;
	font-family: DIN Alternate, sans-serif;
	width: 80%;
	font-size: 1em;
	//text-align: left;
	text-align: justify;
	margin: 10px 10% 10px 10%;
	display: inline;
	//z-index: 10;
}

a {
    color: #F84; 
    text-decoration: none;
	float: none;
}

.thing {
	width: 60%;
}

.titles {
	width: 40%;
	text-align: center;
}

.title2 {
	width: 40%;
	text-align: center;
}

.discs {
	width: 100%;
	height: 800px; 
	overflow-x:hidden;
	overflow:hidden;
}

.ipad {
	width: 100%;
	visibility: visible;
	float: none;
}

.iphone {
	height: 0px;
	visibility: hidden;
	float: none;
}
.clbox {
	position: relative;
	width:  60%;
	height: 600px;
}


.cldisc {
	 position: absolute;
	 -webkit-filter: drop-shadow(8px 8px 8px #000);
  	  		 filter: drop-shadow(8px 8px 8px #000);
}

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

@media only screen and (max-width: 910px) 
{
.space3 {
	width: 1px;
}
.space2 {
	width: 100%;
}
.feature {
	width: 48%;
}

//.feature:nth-child(2n+1) {clear: left;}

.titles {
	width: 100%;
	text-align: center;
}
.thing {
	width: 100%;
}
}

@media only screen and (max-width: 768px) 
{
.space3 {
	width: 1px;
}
.space2 {
	width: 1px;
}
.feature {
	width: 100%;
}

//.feature:nth-child(1n) {clear: left;}

.cldisc {
	width: 128px;
  	height: 128px;
}

.clbox {
	position: relative;
	width:  100%;
	height: 600px;
}
.thing {
	width: 100%;
}

.titles {
	width: 100%;
}
.title2 {
	width: 100%;
}

.discs {
	width: 100%;
	height: 1000px; 
}
.ipad {
	height: 0px;
	visibility: hidden;
}

.iphone {
		width: 100%;
		height: 100%;
		visibility: visible;
}

#thumb31 {
	left: 30%;
	top: 400px;
}

#thumb32 {
	left: 85%;
	top: 400px;
}
#thumb40 {
	left: 80%;
	top: 300px;
}
}


.cldisc:hover {
	z-index: 30000;
}

.cldiscr {
	-webkit-animation:spin 10s linear 1;
	animation:spin 10s linear 1;
}	

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }