/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14pt;
	font: inherit;
	vertical-align: baseline;
}

.hide-for-small {
	display: block;
}
	
.show-for-small {
	display: none;
}

.mid{
	background: url(../images/tick.png) no-repeat;
	background-size: 20px 20px;
	display:inline-block;
	position:relative;
	width:20px;
	height:20px;
	vertical-align:middle;
	top: -2px;
	margin-right:20px;
}
.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:5px solid #5a8f00;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.triangle {
	width: 85%;
  position: relative;
  border-bottom: 5px solid #a3c36c;
}
.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  bottom: -30px; /* value = - border-top-width - border-bottom-width */
  left: 48%;
  border-width: 30px 30px 0; /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #a3c36c transparent;
}

.triangle:after {
  bottom: -22px; /* -1px of first element for border */
  border-color: #fff transparent;
}

.button-outline {
    background: #c7d5a9;
    padding: 10px;
    border-radius: 3px;
    max-width: 400px;
    margin: 0 auto
}

.popBox {
		position:fixed;
		width:180px;
		height:180px;
		padding:10px;
		top:50%;
		left:50%;
		margin-top:-100px;
		margin-left:-100px;
		text-align:center;
		font-size:15pt;
		border-top:1px solid #fff;
		border-bottom:1px solid #fff;
		border-radius:10px;
		box-shadow:0 0 10px #000;
		background:rgba(220,220,220,1.0);
		background:-webkit-linear-gradient(rgba(230,230,230,1.0),rgba(220,220,220,1.0));
	/* For Safari 5.1 to 6.0 */
		background:-o-linear-gradient(rgba(230,230,230,1.0),rgba(220,220,220,1.0));
	/* For Opera 11.1 to 12.0 */
		background:-moz-linear-gradient(rgba(230,230,230,1.0),rgba(220,220,220,1.0));
	/* For Firefox 3.6 to 15 */
		background:linear-gradient(rgba(230,230,230,1.0),rgba(220,220,220,1.0));
	/* Standard syntax */
	}

.first-one {
	position:relative;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 30px 15px 0;
  border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}

#menu-controls {
	width:100%;
	margin:0;
	padding:10px 10px 7px 10px;
	text-align:center;
	border-left: 0px;
	border-right: 0px;
	background:#ffffff;
}
#menu-controls a {
	position:relative;
	border: 1px solid rgba(150,150,150,1);
	border-bottom: 0px;
	border-radius: 5px 5px 0 0;
	padding:5px;
	color:#000000;
	outline:none;
	font-weight:600;
	border-bottom:0px;
	top:1px;
	z-index: 9998;
}

#menu-controls a.active {
	color:rgba(0,0,0,0.7);
    background-color: rgba(0,0,0,0.5);
	background-color:RGB(269, 197, 73); /*RGBA(253, 157, 46, 1);*/
	font-weight:600;
}
	
#menu-controls a:hover {
   color:rgba(0,0,0,1);
	background:rgba(220,220,220,1.0);
}

#menu-controls a.active:hover {
	color:rgba(0,0,0,1);
    background-color:RGB(269, 197, 73); /*RGBA(253, 157, 46, 1);*/
}

.menu-cont{
	width: 100%;
	background-color:RGB(269, 197, 73); /*RGBA(253, 157, 46, 1);*/
	height:390px;
	border-top: 1px solid RGBA(219, 147, 23, 1);
	border-bottom: 1px solid RGBA(219, 147, 23, 1);
}

#menu-container {
	position:relative; /* REQUIRED */
	width:1000px;
	height:390px;
	padding-top:10px;
	padding-bottom:10px;
	margin:0px auto 0;
	overflow:hidden; /* REQUIRED */
}
#menu-container ul {
	list-style-type:none; /* REQUIRED */
	position:absolute; /* REQUIRED */
	right:0; /* REQUIRED */
}
#menu-container ul li {
	position:absolute; /* REQUIRED */
	width:240px; /* Size of menu list item, or 'cell' */
	height:360px; /* Size of menu list item, or 'cell' */
	padding:0px;
	border:1px solid RGBA(219, 147, 23, 1);
	/*border-radius:10px;*/
	background:#ffffff;
	/*box-shadow: 0px 0px 4px rgba(0,0,0,0.5);*/
}


#products-container {
	
	position:relative; /* REQUIRED */
	top:13px;
	width:1000px;
	height:434px;
	margin:0px auto 0;
	overflow:hidden; /* REQUIRED */
}
#products-container ul {
	list-style-type:none; /* REQUIRED */
	position:absolute; /* REQUIRED */
	right:0; /* REQUIRED */
}
#products-container ul li {
	position:absolute; /* REQUIRED */
	width:1000px; /* Size of menu list item, or 'cell' */
	height:434px; /* Size of menu list item, or 'cell' */
	padding:0px;
	/*border:1px solid #bebdbd;*/
	/*border-radius:10px;*/
	background:#ffffff;
	background-repeat: no-repeat;
	/*box-shadow: 0px 0px 4px rgba(0,0,0,0.5);*/
}
	
#products-controls {
	width:100%;
	text-align:center;
	z-index: 99999;
	display: inline-block;
	position:relative;
	top:-18px;
	padding: 5px;
}


				
#products-controls a {
	cursor: pointer;
	opacity: 0.4;
	border-radius:6px;
	border: 2px solid #ffffff;
	margin:0 4px;
}
#products-controls a.active {
	opacity: 1;
}
	
#products-controls a:hover {
   color:rgba(255,255,255,1);
   background-color: rgba(0,0,0,0.5);
   	
}

#products-controls a.active:hover {
	color:rgba(0,0,0,1);
}

.picbox{
	width:1000px;
	height:434px;
	display:block;
	overflow:hidden;
}

.dscText {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 110px;
	position: absolute;
	bottom:0px;
}

.dscText2 {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 110px;
	position: absolute;
	bottom:0px;
}

/*
.prod-cont {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 110px;
	position: absolute;
	top:324px;
}
*/

.t1 {
		color:rgba(255,255,255,1.0);
		font-size: 30pt;
		line-height: 40pt;
		position: relative;
		top:15px;
}

.t2 {
		color:rgba(255,255,255,1.0);
		font-size: 20px;
		width: 80%;
		margin: 0 auto;
		position: relative;
		top:15px;
	}


.topbar {
 	z-index: 99999;
    top:0px;
	position:fixed;
	background: rgba(82,19,121,0.77);
	border-bottom:1px solid rgba(82,19,121,1.0);
	width:100%;
	height:45px;
	padding-top:2px;
}

.botbar {
 	z-index: 99999;
    bottom:0px;
	position:fixed;
	background: rgba(82,19,121,0.77);
	border-top:1px solid rgba(82,19,121,1.0);
	width:100%;
	height:45px;
	padding-top:2px;
}

.topnav {
    float: right;
    padding-right: 10px;
	margin-right:6px;
	font-family: "Source Sans Pro", sans-serif;
    color:rgba(255,255,255,1.0); /*#fb9b1a;*/
    text-rendering: optimizeLegibility;
    font-size: 14pt;
    line-height: 20pt;
}

.topnav a:hover {
    color: rgba(245,217,10,1);
}

.topnav ul {
list-style: none;
    display: inline-block
}


.topnav li {
    display: inline-block
}

.topnav li a {
	color:rgba(255,255,255,1.0); /*#EDAF37;*/
	
    display: inline-block;
    margin-right:10px;
    padding-right: 10px;
    margin-top: 5px;
    border-right: 1px solid #9e6be0;
    /*padding: 0 0 0 20px*/
}

.lis {
	color:rgba(255,255,255,1.0); /*#EDAF37;*/
	
    display: inline-block;
    margin-right:10px;
    padding-right: 10px;
    margin-top: 2px;
    border-right: 1px solid #9e6be0;
    /*padding: 0 0 0 20px*/
}


.topnav li:last-child a {
    border-right:0px;
}

.topnav li a.selli{

       color: rgba(255,255,255,0.5);
}

.toplogo {
	float:left;
	background: url(../../images/penlogo2.png) no-repeat;
	
	
	margin-left:14px;
	margin-top:2px;
	width: 60px;
	height: 40px;

/*
		overflow: hidden;
	background: url(../images/penlogow.png) no-repeat;
	background-size: 100%;
		width: 40px;
		height: 40px;
		*/
	}
	
	.topstrap {
	    float: left;
	    padding-right: 10px;
		margin-right:0px;
		font-family: "Source Sans Pro", sans-serif;
		font-style: italic;
	    color:rgba(255,255,255,1.0); /*#fb9b1a;*/
	    text-rendering: optimizeLegibility;
	    font-size: 12pt;
	    line-height: 42px;
	    /*background: rgba(82,19,121,0.77);*/
	    width: 150px;
	    padding-left: 2px;
	}
	
	.topstrapright {
	    float: right;
	    padding-right: 10px;
		margin-right:0px;
		font-family: "Source Sans Pro", sans-serif;
		font-style: italic;
	    color:rgba(255,255,255,1.0); /*#fb9b1a;*/
	    text-rendering: optimizeLegibility;
	    font-size: 14pt;
	    line-height: 42px;
	    /*background: rgba(82,19,121,0.77);*/
	    width: 230px;
	    padding-left: 2px;
	}

	
	.butt{
		border: 1px solid #8b8888;
		border-radius:5px;
	}
	
	.tdb {
		height:240px; width:200px;margin:20px;display:inline-block;
	}
	
	.black12 { color: #000000; font-size: 12px; line-height: 14px; text-decoration: none }
.black14  { color: #000000; font-size: 14px; line-height: 18px; text-decoration: none }
.pur14 { color: #560572; font-size: 14px; line-height: 18px; text-decoration: none }
.pur18 { color: #560572; font-size: 18px; line-height: 20px; text-decoration: none; font-weight:600;}
.pur20 { color: #560572; font-size: 20px; line-height: 22px; text-decoration: none }
.black9  { color: #000000; font-size: 9px; line-height: 11px; text-decoration: none}
.black10 { color: #000000; font-size: 10px; line-height: 12px; text-decoration: none }
.black10 a {display: block;line-height: 12px;color: #000000;}
.black10 a:hover {color: #0069B8;}
.red12 { color:RGBA(235, 23, 26, 1); font-size: 12px; line-height: 14px; text-decoration: none }
.red14 { color:RGBA(235, 23, 26, 1); font-size: 14px; line-height: 18px; text-decoration: none }
.red18 { color:RGBA(235, 23, 26, 1); font-size: 18px; line-height: 20px; text-decoration: none }


.black14 a {color: #560572; text-decoration:none;}
.black14 a:hover {
	color: #000;
}


.pur14 a {color: #560572; text-decoration:none;}
.pur14 a:hover {
	color: #000;
}

.pur18 a {color: #560572; text-decoration:none;}
.pur18 a:hover {
	color: #000;
}

.pur20 a {color: #560572; text-decoration:none;}
.pur20 a:hover {
	color: #000;
}

.bbbb  {
	position:absolute;
	padding-top:7px;
	padding-bottom:7px;
	margin-left: -21px;
	width: 210px;
	left:35px;
	bottom:10px;
	text-align: center;
	font-size: 14pt;
	text-decoration: none;
	color: #ffffff;
	line-height: 16px;
	border-radius:4px;
	background-color: #744982;
	
	border: 1px solid #744982;
}

.bbbb a {
	display: block;
	color: #ffffff;
	text-decoration: none
}
.bbbb:hover {
	color: #FFF;
	background: #52345d;
	border: 1px solid #855495;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: ''; content: none;
}

table {
	border-collapse: collapse; border-spacing: 0;
}

input:focus, select:focus, textarea:focus, button:focus {
	outline: none;
}

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	text-decoration:none;
}
			
body {
    font-family: "Source Sans Pro", sans-serif;
    color:  #5A5A5A;
    text-rendering: optimizeLegibility;
    background: rgba(0,0,0,.06);
    /*#F7F7F7;*/
}

#floatind a
{
    /* set the width and height of the floater */
    width: 182px;
    height: 43px;
    
    /* set the background image of the floater. */
    /* you can also use background color and borders here background-image: url(images/penlogo.gif);*/
    
    background-repeat: no-repeat;
    background-position: right top;
    background-color:#fb9b1a;
    color:#ffffff;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
	border:1px solid #f59110;
	border-top:1px solid #f7a841;
	border-bottom:1px solid dark(#f59110,10%);
	font-size:18pt;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
	-webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);

line-height:25pt;
    /* set the position to fixed so that it stays in place no matter where you scroll */
    position: fixed;
    
    /* set it all the way to the right and halfway down the page */
    left: 100%;
    top: 50%;
    
    /* bring it back to the left 40px so that you can see the graphic */
    margin-left: -110px;
    
    /* bring the graphic up half of it's height so that it is pefectly vertically centered 71 */
    margin-top: -20px;
    
    /* set the display to block so that the entire graphic is clickable */
    display: block;
    
    /* set the z-index so high it will always be on top */
    z-index: 99999;
}

#floatind a:hover {
	cursor: pointer;
	background:RGBA(228, 133, 27, 1);
	/*rgba(204,151,18,1);*/
}


.wrap {
	max-width: 1200px;
	margin: 0 auto;
}

strong {
	font-weight: 600;
}

.smallwrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px;
	min-height: 300px;
}

.medwrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0px;
	min-height: 300px;
}

.available p {
	font-size: 26pt;
	font-weight: 300;
	line-height: 32px;
	padding-bottom: 20px;
}

.devices {
	float: left;
	margin-right: 40px;
	width: 350px;
}

p.btw {
	font-size: 14pt;
	display: block;
	line-height: 20px;
	color: #521379;
	font-weight: 400;
	clear: both;
	text-align: center;
	padding-top: 40px;
	max-width: 500px;
	margin: 0 auto;
}

/*button*/
.o-button {
	display:inline-block;
	color:black;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
	border:1px solid #f59110;
	border-top:1px solid #f7a841;
	border-bottom:1px solid dark(#f59110,10%);
	font-size:18pt;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background-color:#FFA41C;
	/*background-image:-moz-linear-gradient(top,#ffa221,#f59110);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffa221),to(#f59110));
	background-image:-webkit-linear-gradient(top,#ffa221,#f59110);
	background-image:-o-linear-gradient(top,#ffa221,#f59110);
	background-image:linear-gradient(to bottom,#ffa221,#f59110);*/
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffa221', endColorstr='#00f59110', GradientType=0);
	-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	line-height:5pt;
}



.o-button:hover {
	cursor: pointer;
	background:#FFA41C; /*RGBA(228, 133, 27, 1);*/
	/*rgba(204,151,18,1);*/
}

.o-button span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.o-button span:first-child {
	padding:18px;
	background:rgba(255,255,255,0.1);
	line-height:20pt;
}
.o-button span:last-child {
	padding:18px;
	font-weight:600;
}

a.o-button {
	display:inline-block;
	color:black;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
	border:1px solid #f59110;
	border-top:1px solid #f7a841;
	border-bottom:1px solid dark(#f59110,10%);
	font-size:14pt;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background-color:#FFA41C;
	/*background-image:-moz-linear-gradient(top,#ffa221,#f59110);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffa221),to(#f59110));
	background-image:-webkit-linear-gradient(top,#ffa221,#f59110);
	background-image:-o-linear-gradient(top,#ffa221,#f59110);
	background-image:linear-gradient(to bottom,#ffa221,#f59110);*/
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffa221', endColorstr='#00f59110', GradientType=0);
	-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	line-height:5pt;
}

a.o-button span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	
}
a.o-button span:first-child {
	padding:18px;
	background:rgba(255,255,255,0.1);
	
}
a.o-button span:last-child {
	padding:18px;
	font-weight:600;
}

/*button*/
.o-buttonsmall {
	display:inline-block;
	color:black;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
	border:1px solid #f59110;
	border-top:1px solid #f7a841;
	border-bottom:1px solid dark(#f59110,10%);
	font-size:12pt;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background-color:#fb9b1a;
	background-image:-moz-linear-gradient(top,#ffa221,#f59110);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffa221),to(#f59110));
	background-image:-webkit-linear-gradient(top,#ffa221,#f59110);
	background-image:-o-linear-gradient(top,#ffa221,#f59110);
	background-image:linear-gradient(to bottom,#ffa221,#f59110);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffa221', endColorstr='#00f59110', GradientType=0);
	-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
}

.o-buttonsmall:hover {
	cursor: pointer;
	background:RGBA(228, 133, 27, 1);
	/*rgba(204,151,18,1);*/
}

.o-buttonsmall span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.o-buttonsmall span:first-child {
	padding:3px;
	background:rgba(255,255,255,0.1);
}
.o-buttonsmall span:last-child {
	font-weight:600;
}

a.o-buttonsmall {
	display:inline-block;
	color:#ffffff;
	/*text-shadow:0 1px 0 rgba(0,0,0,0.3);*/
	border:1px solid #f59110;
	border-top:1px solid #f7a841;
	border-bottom:1px solid dark(#f59110,10%);
	font-size:12pt;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background-color:#fb9b1a;
	background-image:-moz-linear-gradient(top,#ffa221,#f59110);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffa221),to(#f59110));
	background-image:-webkit-linear-gradient(top,#ffa221,#f59110);
	background-image:-o-linear-gradient(top,#ffa221,#f59110);
	background-image:linear-gradient(to bottom,#ffa221,#f59110);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffa221', endColorstr='#00f59110', GradientType=0);
	-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),0 1px 3px 0 rgba(0,0,0,0.3);
	line-height:5pt;
	
	margin-left: 20px;
	margin-top: 5px;
	float:right;
}

a.o-buttonsmall span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	
}
a.o-buttonsmall span:first-child {
	background:rgba(255,255,255,0.1);
	padding-left: 8px;
	padding-right: 8px;
}
a.o-buttonsmall span:last-child {
	padding: 6px;
	padding-right: 10px;
	line-height: 15px;
	font-weight:600;
}




header {
	padding: 40px;
}

header:after {
	display: block;
	content: '';
	clear: both;
}

.big {
	display: block;
	height: 100px;
	width: 600px;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 50%;
	margin-left: -300px;
}

.logowrap,
.intro {
	float: left;
	width: 50%;
}

.logowrap {
	padding-left: 80px;
}

.intro {
	padding-left: 40px;
}

.logo {
	text-indent: 500%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/thermallogo.png) no-repeat;
	background-size: 100%;
	max-width: 408px;
	min-height: 120px;
	/*margin: 30px auto;*/
}

.guarwrap {
	float: left;
	width: 25%;
	position: relative;
	top:-50px;
}

.guarantee {
	text-indent: 500%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/guarantee.png) no-repeat;
	background-size: 100%;
	width: 120px;
	height: 120px;
	margin: 30px auto;
	margin-bottom: 0px;
}

.basket {
float:right;
position:relative;
left:-20px;
top:9px;
    background: url(../images/carticon.png) no-repeat;
    background-size: contain;
    white-space: nowrap;
    overflow: hidden;
    width: 30px;
    height: 25px
}

.white {
	background: #fff;
	min-height: 100px;
	padding-bottom: 0px;
}

h1 {
	font-size: 28pt;
	font-weight: 300;
	line-height: 32pt;
}


h2 {
	font-size: 24pt;
	font-weight: 300;
	color: #521379;
	padding: 40px 0;
	line-height: 28pt;
	clear: both;
}

.hh {
	width: 400px;
	font-size: 14pt;
	font-weight: 300;
	color: #521379;
	line-height: 22pt;
	clear: both;
}

.center {
	text-align: center;
}

.simpletable {
	margin: 0 auto;
}

.priceTable {
	max-width: 600px;
}

thead th {
	font-size: 14pt;
	font-weight: 600;
	line-height: 22pt;
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
}

td,
tbody th {
	font-size: 14pt;
	line-height: 22pt;
	font-weight: 300;
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
}

h2.bigger {
	font-size: 24pt;
	font-weight: 300;
	color: #5A5A5A;
	padding: 40px 0;
	line-height: 28pt;
}

h2 em {
	display: block;
	font-size: 24pt;
	font-weight: 700;
}

.badge {
	width: inherit;
}

.features ul {
	font-size: 14pt;
	font-weight: 300;
	line-height: 22pt;
}

.features li {
	padding: 6px 0 6px 30px;
	background: url(../images/check.svg) no-repeat 0 16px;
	background-size: 22px;
}

.features li em {
	background: #521379;
	font-size: 14pt;
	font-weight: 700;
	padding: 0 8px;
	text-transform: uppercase;
	color: #fff;
	border-radius: 6px;
	display: inline-block;
	height: 24px;
	position: relative;
	top: -3px;
	line-height: 18pt;
}

.features li em.paid {
	background: #333;
}

.features2{
width:800px;
margin-left:auto;
margin-right:auto;
}
.features2 ul {
	font-size: 14pt;
	font-weight: 300;
	line-height: 22pt;
}

.features2 li {
	padding: 6px 0 6px 30px;
	background: url(../images/check.svg) no-repeat 0 16px;
	background-size: 22px;
}

.features2 li em {
	background: #521379;
	font-size: 14pt;
	font-weight: 700;
	padding: 0 8px;
	text-transform: uppercase;
	color: #fff;
	border-radius: 6px;
	display: inline-block;
	height: 24px;
	position: relative;
	top: -3px;
	line-height: 18pt;
}

.features2 li em.paid {
	background: #333;
}


.screenshotsOuter {
	position:relative;
	width:100%;
	overflow-y: hidden;
	overflow-x: scroll;
	height: 200px;
	
	/*box-shadow: inset 8px 0px 6px -6px rgba(0,0,0,0.33);*/
	
}

.screenshots {
	position:relative;
	overflow-y: hidden;
	overflow-x: scroll;
	width: 1700px;
}

.screenshots img {
	max-width: 150px;
	float: left;
	display: inline-block;
}

.features {
	float: left;
	width: 100%;
	padding: 40px 40px 0 40px;
}

.screenshots h2:first-child,
.features h2:first-child {
	padding-top: 0;
}

.screenshots h2,
.features h2 {
	padding-bottom: 20px;
}

.black {
	padding: 20px 20px;
	background: #CCC;
	text-align: center;
	clear: both;
}

.black .videowrap {
	width: 700px;
	height: 396px;
	margin: 0 auto;
	box-shadow: 0 0 30px rgba(0,0,0,.9);
}

.black iframe {
	width: 700px;
	height: 396px;
}

.pricing {
	padding-bottom: 40px;
}

.pricing table {
	text-align: left;
}

.que,
.ans {
	font-size: 14pt;
	line-height: 22pt;
}

.que {
	font-weight: 700;
	padding-bottom: 10px;
	display: table;
}

.ans {
	font-weight: 300;
	padding-bottom: 40px;
	display: table;
}

.que span, .ans span {
	display: table-cell;
}

.circle {
	display: inline-block;
	width: 47px;
	height: 47px;
	border-radius: 300px;
	text-align: center;
	font-weight: 900;
	color: #fff;
	line-height: 44px;
	margin-right: 10px;
}

.que .circle {
	background: #521379;
}

.ans .circle {
	background: #fb9b1a;
}

input[type=text],
input[type=password] {

}


footer {
    text-transform: uppercase;
    padding-bottom: 60px;
    font-size: 14px !important;
    color: #666;
    max-width: 1120px;
    margin: 0 auto;
    padding: 60px 20px
}


footer a {
    font-size: 13px;
    color: #666;
    text-decoration: none
}

footer span {
    display: block;
    background: url(../images/penlogo.gif) no-repeat 0 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    height: 130px
}

footer a:hover {
    color: #521379
}

.footernav {
    float: right;
    font-size: 13px;
    margin: 0;
    padding: 0
}

.footernav li {
    display: inline-block
}

.footernav li a {
    display: inline-block;
    padding: 0 0 0 20px
}


.left,
.right {
	float: left;
	width: 50%;
	height: 480px;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,0.28);
	border-top: 1px solid rgba(0,0,0,0.28);
}

.left {
	background: #c29cda;
}

.right {
	background: #ffffff;
}

.left h2 {
	color: #fff;
	padding-top: 0;
	padding-bottom: 20px;
}
.right h2 {
	color: #000;
	padding-top: 0;
	padding-bottom: 20px;
}

.left2,
.right2 {
	float: left;
	width: 50%;
	height: 500px;
	padding: 10px;
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,0.28)
}

.left2 {
	background: #ffffff;
}

.right2 {
	background: #ffffff;
}

.left2 h2,
.right2 h2 {
	
	padding-top: 0;
	padding-bottom: 20px;
}


.left img{
	width: 440px;
}

.right img {
	width: 400px;
}

.pricing-per-month {
  color: #521379;
}

.upgrade-description {
    font-size: 24px;
    font-weight: 300;
    line-height: 35px;
    max-width: 900px;
    margin: -20px auto 20px;
    text-align: center;
    padding: 0 30px;
}

@media(max-width: 1200px) {

	.screenshots img {
		max-width: 100px;
		float: left;
	}

	.left img{
		width: 440px;
	}
	
	.right img {
		width: 400px;
	}
	
	.guarwrap {
		float: none;
		width: 100%;
	}


}


@media(max-width: 1000px) {
	.black {
		padding: 40px 20px;
	}
	
	.black .videowrap {
		width: 800px;
		height: 452px;
	}

	.black iframe {
		width: 800px;
		height: 452px;
	}
}

@media(max-width: 900px) {

	.logo {
		background: url(../images/thermallogo.png) no-repeat 50%;
		background-size: contain;
		min-width: 190px;
		min-height: 120px;
		width: 100%;
	}
	
	.intro {
		font-size: 15pt;
	}

	.left,
	.right {
		float: none;
		width: 100%;
		height: 80%;
	}

	.left img{
		width: 80%;
	}

	.right img {
	width: 70%;
	height: auto;
	}
	
	.left2,
	.right2 {
		float: none;
		width: 100%;
	}

	.right2 img {
		width: 70%;
	}


	.available {
		text-align: center;
	}

	.available p {
		text-align: center;
	}

	.devices {
		display: block;
		float: none;
		margin: 0 auto 40px auto;
		max-width: 300px;
		width: 100%;
	}

	.screenshots,
	.features {
		float: none;
		width: 100%;
		padding: 40px;
	}

	.screenshots img {
		max-width: 160px;
		float: left;
	}

	.features {
		clear: both;
		margin-top: 80px;
	}

	.screenshots h2,
	.features h2 {
		text-align: center;
	}

	.black {
		padding: 40px 20px;
	}

	.black .videowrap {
		width: 600px;
		height: 342px;
	}

	.black iframe {
		width: 600px;
		height: 342px;
	}

	.circle {
		display: inline-block;
		width: 41px;
		height: 41px;
		border-radius: 300px;
		text-align: center;
		font-weight: 900;
		color: #fff;
		line-height: 38px;
		margin-right: 10px;
	}

	.que,
	.ans {
		font-size: 14pt;
		line-height: 22pt;
	}

	th {
		font-size: 14pt;
	}

	td,
	tbody th {
		font-size: 14pt;
	}

}

@media(max-width: 745px) {
	.topnav {
	    float: right;
	    padding-right: 10px;
		margin-right:0px;
		font-family: "Source Sans Pro", sans-serif;
	    color:rgba(255,255,255,1.0); /*#fb9b1a;*/
	    text-rendering: optimizeLegibility;
	    font-size: 18px;
	    line-height: 35px;
	    background: rgba(82,19,121,0.77);
	    width: 100%;
	    padding-left: 10px;
	}
}


@media(max-width: 700px) {

	.logowrap,
	.intro {
		float: none;
		width: 100%;
		font-size: 14pt;
	}
	
	
	.left,
	.right {
		float: none;
		height: 80%;
	}
	
	.left img{
		width: 80%;
	}
	.left2 {
		height: auto;
	}

	.right img {
		width: 70%;
	}
	
	.left2,
	.right2 {
		float: none;
		
	}
	
	.right2 img {
		width: 70%;
	}
	

	.logo {
		text-indent: 500%;
		white-space: nowrap;
		overflow: hidden;
		background-size: contain;
		background: url(../images/thermallogosm.png) no-repeat 50%;
		max-width: 408px;
		min-height: 120px;
		/*margin: 30px auto;*/
		width: 100%;
	}
	
	.o-button span:last-child {
		font-size:14pt;
		line-height: 16pt;
	}
	a.o-button span:last-child {
		font-size:14pt;
		line-height: 16pt;
	}

	h1 {
		font-size: 24pt;
		font-weight: 300;
		line-height: 28pt;
	}

	h2.bigger {
		font-size: 37px;
		font-weight: 300;
		padding: 40px 0;
		line-height: 48px;
		clear: both;
	}


	.black {
		padding: 20px;
	}

	.black .videowrap {
		width: 100%;
		min-height: 342px;
	}

	.black iframe {
		width: 100%;
		min-height: 342px;
	}

	.hide {
		display: none;
	}
	
	.hide-for-small {
		display: none;
	}
	
	.show-for-small {
		display: block;
	}
	
	.priceTable {
		max-width: 440px;
	}

	th {
		font-size: 14pt !important;
		font-weight: 600;
		line-height: 22pt !important;
	}

	td,
	tbody th {
		font-size: 14pt;
		line-height: 22pt;
		font-weight: 400;
	}

}

.banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	
	color: rgba(255,255,255,.6);
	text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
	
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
/*border-top: 1px solid rgba(0,0,0,0.5); */
}
	.banner ul {
		list-style: none;
		width: 300%;
	}
	.banner ul li {
		display: block;
		float: left;
		width: 25%;
		padding: 160px 0 110px;
		
		min-height: 350px;
		
/*		-webkit-background-size: 100% 100%;*/
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-ms-background-size: 100% 100%;
/*		background-size: 100% 100%;*/
		
		box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
		
		background-repeat: no-repeat;
		background-position:center top
	}
	
	.banner h1, .banner h2 {
		font-size: 24pt;
		line-height: 28pt;
		
		color: #fff;
	}
	
	.banner .btn {
		display: inline-block;
		margin: 25px 0 0;
		padding: 9px 22px 7px;
		clear: both;
		
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		
		border: 2px solid rgba(255,255,255,.4);
		border-radius: 5px;
	}
		.banner .btn:hover {
			background: rgba(255,255,255,.05);
		}
		.banner .btn:active {
			-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
			filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
		}
		
	.banner .btn, .banner .dot {
		-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
		filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	}
	
	.banner .dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
	}
		.banner .dots li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			
			text-indent: -999em;
			
			border: 2px solid #ffffff;
			border-radius: 6px;
			
			cursor: pointer;
			opacity: .4;
			
			-webkit-transition: background .5s, opacity .5s;
			-moz-transition: background .5s, opacity .5s;
			transition: background .5s, opacity .5s;
		}
			.banner .dots li.active {
				background: #ffffff;
				opacity: 1;
			}

.descTxt {
	background:rgba(0,0,0,0.5);
	width: 100%;
	height: 110px;
	position: relative;
	top:120px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
	.wrap {
	padding: 0px;
	width: 90%;
	margin-top: 60px;
	}
	.banner h1, .banner h2 {
		font-size: 24px;
		line-height: 30px;
	}
	.banner ul li {
		padding-top: 100px;
		padding-bottom: 50px;
		height: 240px;
	}
	.banner p {
		font-size: 15px;
		width: 80%;
		margin: 0 auto;
	}
	pre {
		overflow: auto;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.features li:before {
		background: url('img/icons@2x.png');
		background-size: 100%;
	}
}




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

	
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  	float: left;
  padding: 15px;
}
	/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

.xcent {
	width:450px;
	margin-left:auto;
	margin-right:auto;
	border: 3px solid #73AD21;
}
.xcent2 {
	width:450px;
	margin:auto;
	border: 3px solid #73AD21;
}