input:invalid {border:1px solid red;}
input:valid {border:none;}


body {margin:0 0;
	background:url(images/bg.jpg) #ffffff;
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-size:15px;}
body.inside {margin:0 0;
	background:url(images/bg_inside.jpg) #ffffff;
	background-position:top center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-size:15px;}
html {height:101%;}
html.popup {height:99%;}
.smalltext {font-size:12px;}
.mediumtext {font-size: 13px;}
.right {text-align: right;}
.left {text-align: left;}
.center {text-align: center;}
.floatright {float: right;}
.floatleft {float: left;}
.uppercase {text-transform:uppercase;}
.nowrap {white-space:nowrap;}
.underline {text-decoration:underline;}
.hide-desktop {display:none;}
.hide-mobile {display:inline;}

.message {text-align:center;
	font-size:13pt;
	color:#682184;}
.logo {width:241px;
	margin:auto;
	text-align:center;
	padding-top:5px;}
.logo_nopad {width:241px;
	margin:auto;
	text-align:center;
	padding-top:0px;}

nav {margin:0 auto 40px auto;}	
nav ul li {font-size:18pt;
	list-style: none;
	padding: 0px 14px 0px 14px;
	font-weight:normal;
	display:inline;
	margin:auto;
	text-align:center;}
footer {clear:both;
	width:90%;
	margin:auto;
	text-align:center;
	padding:80px 0 15px 0;
	color: #676767;
	font-size:10px;
	line-height:1.5;
	font-family:Arial;}	
	
.intro {width:858px;
	text-align:center;
	margin:auto;
	padding:0 0 0 28px;}
.main {width:1000px;
	margin:auto;
	padding-top:20px;
	font-size:15px;}
.main_contact {width:500px;
	margin:auto;
	padding-top:20px;
	font-size:15px;}
.heading {font-size:15px;
	letter-spacing:1px;}
.facebook {position:relative;
	top:10px;}
.facebook-mobile {display:none;}
.sample {width:800px;
	vertical-align:middle;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:1.3;
	clear:both;}
.sample2 {width:800px;
	text-align:right;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:1.3;
	clear:both;}
.service {margin:auto;
	width:850px;
	padding:12px;
	border:1px solid #666666;
	margin:35px auto 15px auto;
	font-size:15px;
	position:relative;
	left:20px;}
.service p {line-height:1.3;}	
.testimonialhead {width:100%;
	height:25px;
	border-bottom:1px solid #666666;}
.heading-l {display:inline;
	width:357px;
	float:left;
	text-align:left;
	font-weight:normal;
	font-size:16pt;
	padding-bottom:8px;}
.heading-r {display:inline;
	width:357px;
	float:right;
	text-align:right;
	font-weight:bold;}
.smallhead {text-align:center;
	font-size:12px;
	font-style:italic;
	padding-bottom:25px;}

h1 {clear:both;
	width:850px;
	text-align:left;
	margin:25px auto 12px auto;
	color:#424141;
	font-size:18pt;
	font-weight:normal;
	padding-left:35px;}
h2 {text-align:center;
	color:#424141;
	font-size:16pt;
	margin:50px 0 12px 0;
	font-weight:normal;}
h3 {text-align:center;
	color:#424141;
	font-size:18pt;
	margin:10px 0 12px 0;
	font-weight:normal;}
	
p {text-align:left;
	line-height:1.2;}
.highlight {color:#00aeef;
	font-size:12pt;
	font-weight:bold;}
.bold {color:#00321e;
	font-weight:bold;
	font-size:105%;}
.footermedium {font-size: 13px;}

img.screenshot {float:left;
	margin:22px 20px 20px 0;
	border:1px solid #e0dcdc;}
img.screenshot2 {float:right;
	margin:22px 0 0 20px;
	border:1px solid #e0dcdc;}

.form {margin:auto;
	padding:8px;
	border:thin solid black;}
.formrow {width:100%;
	height:auto;
	clear:both;
	margin:10px;}	
.formleft {float:left;
	width:30%;
	margin:0;
	padding-top:3px;
	font-size:13px;}
.formright {float:left;
	padding-top:3px;
	font-size:13px;}	
.captcha {clear:both;
	margin:auto;
	width:470px;
	text-align:center;
	font-size:8pt;
	padding:30px 4px 4px 4px;
	margin:10px}
	
.colorpicker {width:500px;
	padding:20px;
	border:1px solid black;
	background-color:#ececec;
	margin:auto;
	text-align:center;}	

input.submitbutton {width:90%;
	text-align:center;
	padding:8px;
	font-size:15px;
	color:white;
	background-color:#676767;
	margin-top:0px;
	font-weight:bold;}
select.smalltext {font-size:12px;}
.thankyou {width:100%;
	max-width:480px;
	text-align:center;
	padding-top:60px;}

td.colorchart {width:420px;
	height:30px;}
	
.rss {margin:0 0 15px 0;
	list-style-type:none;}
.rss a {font-weight:bold;
	font-size:120%;}
.rss img {padding:3px 10px 0 0;}

a:link {color: #ff0000;
	text-decoration: none;
	transition: all 0.8s linear;}
a:visited {color: #ff0000;
	text-decoration: none;}
a:hover {color: #424141;
	text-decoration: none;}
a:active {color: #424141;}
a.nav:link {color: #682184;
	text-decoration: none;
	transition: all 0.2s linear;}
a.nav:visited {color: #682184;
	text-decoration: none;}
a.nav:hover {color: #424141;
	text-decoration: none;}
a.nav:active {color: #424141;}
a.navOn:link {color: #424141;
	text-decoration: none;}
a.navOn:visited {color: #424141;
	text-decoration: none;}
a.navOn:hover {color: #424141;
	text-decoration: none;}
a.navOn:active {color: #424141;}
a.foot:link {color: #676767;
	text-decoration: none;}
a.foot:visited {color: #676767;
	text-decoration: none;}
a.foot:hover {color: #676767;
	text-decoration: none;}
a.foot:active {color: #676767;}
a.foot2:link {color: #676767;
	text-decoration: none;}
a.foot2:visited {color: #676767;
	text-decoration: none;}
a.foot2:hover {color: #676767;
	text-decoration: none;}
a.foot2:active {color: #676767;}




.homeimg1 {float:left;
	text-align:center;
	padding: 20px 0 50px 0;
	animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */}
.homeimg2 {float:left;
	text-align:center;
	padding: 90px 0 50px 58px;
	animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */}
.homeimg3 {float:left;
	text-align:center;
	padding: 0 0 50px 40px;
	animation: fadein 9s;
    -moz-animation: fadein 9s; /* Firefox */
    -webkit-animation: fadein 9s; /* Safari and Chrome */
    -o-animation: fadein 9s; /* Opera */}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}














/* RESPONSIVE CSS ----------- */

@media (min-width: 320px) and (max-width: 600px) {

.hide-desktop {display:inline;}
.hide-mobile {display:none;}

.logo {padding-right:20px;}

nav {margin-left:-30px;}
nav ul li {list-style: none;
	padding: 0 10px;
	display:inline;
	text-align:center;
	white-space:nowrap;}

.facebook {display:none;}
.facebook-mobile {display:inline;
	padding-bottom:20px;}

.main {width:90%;
	overflow:hidden;}
.rss {margin:0;}
.rss a {font-weight:bold;
	font-size:120%;}
.rss img {padding:3px 10px 0 0;}
	
.intro {text-align:center;
	margin:auto;
	width:100%;
	height:auto;
	padding:0;}
.homeimage {float:none;
	display:block;
	text-align:center;}	
.homeimg1 {float:none;
	text-align:center;
	padding:0;
	margin:auto;}
.homeimg2 {float:none;
	text-align:center;
	padding:0;}
.homeimg3 {float:none;
	text-align:center;
	width:99%;
	max-width:431px;
	padding:0 0 30px 0;}	
	
h1 {clear:both;
	width:auto;
	margin:0 auto;
	padding:0 20px;}
h2 {font-size:13pt;
	margin-top:30px;}
h3 {text-align:center;
	color:#424141;
	font-size:14pt;
	margin:10px 0 12px -30px;
	padding-left:35px;}
h3.center {width:60%;
	padding:0 20px;
	margin:auto;
	text-align:center;
	font-weight:bold;}		
	
.sample {width:90%;
	vertical-align:middle;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:120%;
	clear:both;}
.sample2 {width:90%;
	text-align:right;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:120%;
	clear:both;}
img.screenshot {clear:both;
	display:block;
	float:none;
	margin:10px auto 0 auto;
	text-align:center;
	width:100%;
	max-width:310px;}
img.screenshot2 {clear:both;
	display:block;
	float:none;
	margin:10px auto 0 auto;
	text-align:center;
	width:100%;
	max-width:310px;}
	
.service {margin:auto;
	width:90%;
	padding:12px;
	border:1px solid #666666;
	margin:35px auto 15px auto;
	font-size:15px;
	position:relative;
	left:0;}
.testimonialhead {width:100%;
	height:auto;
	border-bottom:1px solid #666666;
	padding-bottom:5px;}
.heading-l {display:inline;
	width:100%;
	float:none;
	text-align:left;
	font-weight:normal;}
.heading-r {display:block;
	width:100%;
	float:none;
	text-align:left;
	font-weight:bold;}

.main_contact {width:90%;}	
.form {width:95%;}
.formrow {width:100%;}	
.formleft {float:none;
	width:100%;
	margin:0;
	padding-top:3px;
	font-size:13px;
	text-align:center;}
.formright {float:none;
	padding-top:3px;
	font-size:13px;
	text-align:center;}
.captcha {width:100%;
	max-width:470px;}
	
.colorpicker {width:200px;
	padding:20px;
	border:1px solid black;
	background-color:#ececec;
	margin:auto;
	text-align:center;}		
}




@media (min-width: 601px) and (max-width: 900px) {

.hide-desktop {display:inline;}
.hide-mobile {display:none;}

nav {margin-left:-25px;}
nav ul li {list-style: none;
	padding: 0 10px;
	display:inline;
	text-align:center;
	white-space:nowrap;}

.facebook {display:none;}
.facebook-mobile {display:inline;
	padding-bottom:20px;}

.main {width:90%;
	overflow:hidden;}
.rss {margin:0;}
.rss a {font-weight:bold;
	font-size:120%;}
.rss img {padding:3px 10px 0 0;}
	
.intro {text-align:center;
	margin:auto;
	width:100%;
	height:auto;
	padding:0;}
.homeimage {float:none;
	display:block;
	text-align:center;}	
.homeimg1 {float:none;
	text-align:center;
	padding:0;
	margin:auto;}
.homeimg2 {float:none;
	text-align:center;
	padding:0;}
.homeimg3 {float:none;
	text-align:center;
	width:99%;
	max-width:431px;
	padding:0 0 30px 0;}	
	
h1 {clear:both;
	width:auto;
	margin:0 auto;
	padding:0 20px;}
h2 {font-size:13pt;
	margin-top:30px;}
h3 {text-align:center;
	color:#424141;
	font-size:14pt;
	margin:10px 0 12px 0;
	padding-left:35px;}	
	
.sample {width:90%;
	vertical-align:middle;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:120%;
	clear:both;}
.sample2 {width:90%;
	text-align:right;
	margin:auto;
	padding-top:35px;
	font-size:15px;
	line-height:120%;
	clear:both;}

	
.service {margin:auto;
	width:90%;
	padding:12px;
	border:1px solid #666666;
	margin:35px auto 15px auto;
	font-size:15px;
	position:relative;
	left:0;}
.testimonialhead {width:100%;
	height:auto;
	border-bottom:1px solid #666666;
	padding-bottom:5px;}
.heading-l {display:inline;
	width:100%;
	float:none;
	text-align:left;
	font-weight:normal;}
.heading-r {display:inline;
	width:100%;
	float:none;
	text-align:right;
	font-weight:bold;}

.main_contact {width:90%;}	
.form {width:95%;}
.formrow {width:100%;}	
.captcha {width:470px;
	margin:auto;}	
}