@charset "utf-8";
/*					
	Author		CrystalCommerce.com // Ross Dallaire
	
	Colors
*/

/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
/* /END RESET */
html{
    font-size: 16px;
}
body {
    background-color:#ffffff;
	font-family: Arial, Helvetica, sans-serif;
    color:#39424d;
}

p {
	line-height: 1.5em;
	margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
	color: #39424d;
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 2em;
	margin: 0 0 1.2em;
	font-weight: bold;
}

h2 {
	font-size: 1.7em;
	margin: 0 0 1.1em;
	font-weight: bold;
}

h3 {
	font-size: 1.3em;
	margin: 0 0 1em;
	font-weight: bold;
}


h4, h5, h6 {
    font-size: 1em;
	margin: 0 0 1em;
	font-weight: bold;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {}

a img {
	border: none;
	outline: none;
}

a {
	color: #0066ff;
	outline: none;
	text-decoration: none;
}

a:hover {
	color: #0050c8;
}

/* remove dotted lines on some links in FF browser */

a,
a:active,
a:visited,
a img {
	outline: none;
}




#my_menu_wrap{
    
  background-image: -moz-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -webkit-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -ms-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
    
}

.font-light{
color:#cccccc;
}

.font-gray-75{
color:#bfbfbf;
}

.font-gray-50{
color:#808080;
}

.font-dark{
color:#222222;
}


/* 
=====================================================
	Body styles
===================================================== */

hr{

    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(215, 215, 215, 1) 25%, rgba(215, 215, 215, 1) 75%, rgba(0, 0, 0, 0));
    height:2px;
    margin-top:2em;
    margin-bottom:4em;
    
}

table, th, td {border: 1px solid black;}

table {border-collapse: collapse;}

td {padding:0.8em;}

th {
padding-top:1.2em;
padding-bottom:1.2em;
padding-left:0.8em;
padding-right:0.8em;
font-weight:bold;
}

/* Create two equal columns that floats next to each other */
.column-home-left {
  float: left;
  width: 60%;
}

.column-home-right {
  float: right;
  max-width: 40%;
}

.column1 {
  float: left;
  width: 50%;
}

.column2 {
  float: right;
  width: 50%;
}

.column1 {
  float: left;
  width: 50%;
}

.column2 {
  float: right;
  width: 50%;
    
}

.column-left50 {
  float: left;
  width: 50%;
}

.column-right50 {
  float: right;
  width: 50%;
    
}

.column-left33 {
  float: left;
  width: 33%;
}

.column-right67 {
  float: right;
  width: 67%;
    
}

.column-left60 {
  float: left;
  width: 60%;
}

.column-right40 {
  float: right;
  width: 40%;
}

.column-left40 {
  float: left;
  width: 40%;
}

.column-right60 {
  float: right;
  width: 60%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.button-green-span {
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  padding:0.75em; 
  padding-left:0; 
  padding-right:0;     
  font-weight: bold;
  cursor: pointer;
  background-image: -moz-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -webkit-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -ms-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: linear-gradient(top, #A4DD88 0%, #539E2E 100%);     
}


.button-green {
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  padding:0.75em;
  padding-top:0.5em;
  padding-bottom:0.5em;     
  font-weight: bold;
  cursor: pointer;
  background-image: -moz-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -webkit-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: -ms-linear-gradient(top, #A4DD88 0%, #539E2E 100%); 
  background-image: linear-gradient(top, #A4DD88 0%, #539E2E 100%);     
}

a.button-green:hover, a.button-green-span:hover{
	color: #000000;
  background-image: -moz-linear-gradient(top, #C1EDAB 0%, #64D22D 100%); 
  background-image: -webkit-linear-gradient(top, #C1EDAB 0%, #64D22D 100%); 
  background-image: -ms-linear-gradient(top, #C1EDAB 0%, #64D22D 100%);
  background-image: linear-gradient(top, #C1EDAB 0%, #64D22D 100%);    
}


.button-orange-span {
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  padding:0.75em; 
  padding-left:0; 
  padding-right:0;     
  font-weight: bold;
  cursor: pointer;
  background-image: -moz-linear-gradient(top, #ff7f00 0%, #ff5e00 100%); 
  background-image: -webkit-linear-gradient(top, #ff7f00 0%, #ff5e00 100%); 
  background-image: -ms-linear-gradient(top, #ff7f00 0%, #ff5e00 100%); 
  background-image: linear-gradient(top, #ff7f00 0%, #ff5e00 100%);     
}

a.button-orange-span:hover{
	color: #000000;
  background-image: -moz-linear-gradient(top, #ff9326 0%, #ff7626 100%); 
  background-image: -webkit-linear-gradient(top, #ff9326 0%, #ff7626 100%); 
  background-image: -ms-linear-gradient(top, #ff9326 0%, #ff7626 100%);
  background-image: linear-gradient(top, #ff9326 0%, #ff7626 100%);    
}

a.button-green-span, a.button-green-orange{    
	color: #000000;
}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tutorial_wrapper{padding-left:2em;} 

/* 
=====================================================
	Footer
===================================================== */

.sticky_footer, .push {
  height: 107px;
}

.main_wrapper {
  min-height: 100%;
  margin-bottom: -107px;
}

.footer{color:#808080;}

a.footer{    
	color: #808080;
	outline: none;
	text-decoration: none;
}

a.footer:hover{
	color: #808080;
}


/* 
=====================================================
	Media Queries Text Sizing
===================================================== */

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */


@media screen and (max-width: 800px) {
html{
    font-size: 15px;
}
  }

@media screen and (max-width: 595px) {
    
    .mobileDPD {display: inline-block;} 
    .desktopDPD {display:none;}
}

@media screen and (max-width: 740px) {

.column-home-right{max-width:100%}    
    
.column1, .column2, .column-left60, .column-right40, .column-left40, .column-right60, .column-left50, .column-right50, .column-left33, .column-right67, .column-home-left, .column-home-right{width: 100%;}
    
.column1{margin-top:3em;}
    
.product_wrapper{padding-left:2em;}
    
.tutorial_wrapper{padding-left:0;}    
    
}

@media screen and (max-width: 600px) {
       
    
  }

@media screen and (max-width: 500px) {
html{
    font-size: 14px;
} 

}

@media screen and (max-width: 400px) {

  }