html, body {
height:100%;
width:100%;
}

body {
background:url(http://producertoolsapp.com/img/wave-black.svg) no-repeat center 25% fixed;
background-size:100%;
}

/*Fixes pixel rounding issue in Chrome*/

.chrome img.functions {
margin-left:.5px;
}

#contactframe {
width:100%;
border:none;
background:transparent;
}

div.container {
width:70%;
background-color:rgba(255,255,255,.9);
text-align:center;
margin:auto;
}

h1,h2 {
text-align:center;
font-family:Quicksand, Verdana, sans-serif;
text-shadow:rgba(255,255,255,0.6) 0 1px 0;
-webkit-text-stroke:1px; /*Fix aliasing on Chrome for Windows*/
}

h1 {
color:#353535;
font-size:6.5em;
line-height:1.14em;
}

h2 {
-webkit-border-image:0 0 25% 75% 100% 0 0 100% 0 0 3px 0 stretch; /*Gradient separator for webkit*/
-o-border-image:0 0 25% 75% 100% 0 0 100% 0 0 3px 0 stretch;
border-bottom:3px solid #B2B2B2;				/*Fallback solid separator*/
-moz-border-image:0 0 25% 75% 100% 0 0 100% 0 0 3px 0 stretch;	/*Gradient for future FF support*/
padding-bottom:1em;
margin-bottom:1em;
}

div#title {
float:none;
}

div#title h1 {
margin-bottom:10px;
}

div.closebtn {
text-align:right;
padding-bottom:1em;
}

div#navbar {
padding-top:2%;
max-width:70%;
padding-bottom:4%;
margin:auto;
}

img.navleft {
margin-right:3em;
float:left;
}

img.navright {
margin-left:3em;
float:right;
}

div.labels {
width:200px;
background-color:#7c7c7c;
border-radius:0 0 10px 10px;
margin:auto;
}

a.labels {
text-decoration:none;
font-size:1.4em;
display:block;
font-family:Raleway, Verdana, sans-serif;
padding-bottom:30px;
color:#E8E8E8;
height:1px;
padding-top:10px;
width:100%;
-webkit-text-stroke:.5px;
margin:-6px auto 20px;
}

div#footer {
border-top:1px inset #B2B2B2;
padding-top:2em;
clear:both;
}

img.footerimg {
margin:auto;
}

div#copyright {
float:right;
-webkit-text-stroke:.5px;
clear:both;
margin:0 1em 1em 0;
}

div#banner {
background-color:#C3C3C3;
margin-bottom:1em;
max-height:8em;
min-height:5em;
margin-left:0;
margin-right:0;
}

p.apptext {
width:85%;
float:right;
font-size:1.5em;
text-align:justify;
background-color:#D6D6D6;
color:#383838;
font-weight:300;
font-family:Raleway, Verdana, sans-serif;
line-height:1.14em;
-webkit-text-stroke:.5px;
margin:auto;
padding:.5em 1em;
}

div#social {
text-align:center;
padding-top:3em;
margin-bottom:3em;
}

div#social a {
text-decoration:none;
}

div#social span {
font-family:Raleway, Verdana, sans-serif;
font-size:1.1em;
display:block;
margin-bottom:3em;
-webkit-text-stroke:.5px;
}

div.one-third.column {
margin-bottom:2em;
}

p.sidebartext {
text-align:justify;
font-family:Raleway, Verdana, sans-serif;
color:#E5E5E5;
margin-bottom:2em;
margin-top:1em;
font-size:1.2em;
padding-bottom:2em;
-webkit-text-stroke:.25px;
}

.btn {
background-color:#A5A5A5;
font-size:1.5em;
font-family:Raleway, Verdana, sans-serif;
text-decoration:none;
border-radius:2px;
width:25%;
display:block;
-webkit-text-stroke:1px;
margin:auto;
padding:.5em 1em;
}

img.functions,img.functionslast {
border-radius:10px 10px 0 0;
}

a#freqtrans {
font-size:100%;
}

.sideimg {
margin-bottom:1.5em;
-webkit-box-shadow:0 0 3px rgba(150,150,150,0.75);
-moz-box-shadow:0 0 3px rgba(150,150,150,0.75);
box-shadow:0 0 3px rgba(150,150,150,0.75);
}

div.bottomrow {
margin-top:2em;
}

a#appstore {
float:right;
margin-right:15%;
}

a#play {
float:left;
margin-left:15%;
}

div.badge,div.footerimg,div.sidebardiv {
text-align:center;
}

div.footerimg {
width:47%;
}

a#raaza {
margin-left:15%;
float:left;
}

a#quadrophone {
margin-right:15%;
float:right;
}

.hidden,img.contactclose,#contactForm,#messageSent {
display:none;
}

/*Enlarge and shadow image on mouseover*/
a.sidebarlink:hover img.functions,a.sidebarlink:hover img.functionslast,a.sidebarlink:hover + div.labels {
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-webkit-box-shadow:2px 2px 4px rgba(45,45,45,0.6);
-moz-box-shadow:2px 2px 4px rgba(45,45,45,0.6);
box-shadow:2px 2px 4px rgba(45,45,45,0.6);
}


/*Styles for non-JS fallbacks*/
div.noJS {
width:70%;
text-align:justify;
background-color:#D6D6D6;
font-size:1.2em;
margin:auto;
padding:1em;
}

a#noJScontact {
margin-left:2%;
float:right;
}




/* Media queries for tablets and phones */


@media screen and (max-width:1024px) {
div.container {
width:100%;
}
}


@media screen and (max-width:800px) {
body {
background-image:none;
}
}

@media screen and (max-width: 750px){
a#play {
float:none;
margin:auto;
}

a#appstore {
float:none;
margin:auto;
}


/* Re-align social icons into row */

div#social {
margin-bottom:1em;
margin-top:2em;
padding-top:0;
}

div#social a:first-child {
float:left;
margin-left:30%;
}

div#social a:last-child {
float:right;
margin-right:30%;
}

div#social span {
margin-bottom:0;
}

div#footer img {
margin-bottom:2em;
}
}


@media screen and (max-width: 700px){
/*Re-align text for narrow column*/
p.apptext {
float:none;
font-size:1.5em;
margin-bottom:1em;
text-align:left;
}
}

@media screen and (max-width: 580px){
h1 {
line-height:1.14em;
font-size:5em;
}

h2 {
font-size:2em;
}

}

@media screen and (max-width: 550px){
img.navleft {
	margin-right:5%;
}
img.navright {
	margin-left:8%;
}
}


@media screen and (max-height: 500px){
/*Hide images in sidebar on short screens*/
div.sidebardiv img {
display:none;
}
}


@media screen and (max-width: 400px){
div#title {
float:left;
text-align:center;
}
div.container {
	width:100%;
}
div#footer {
	text-align:center;
	}
div#footer a {
	float:none;
	margin:auto;
}
img.navleft {
	margin-right:5%;
}
img.navright {
	margin-left:5%;
}
}

@media screen and (max-width: 350px){
img.navleft {
margin-left:0;
}
}