/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-family: "Gotham";
	src: url("font/Gotham Light.otf");
	font-weight: 300;
}
@font-face {
	font-family: "Gotham";
	src: url("font/Gotham Medium.otf");
	font-weight: 350;
	font-style: normal;
}
@font-face {
	font-family: "Gotham";
	src: url("font/Gotham Medium.otf");
	font-weight: 350;
	font-style: normal;
}

/* Scroll Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    background-color: #333333; 
    border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #555555; 
}


/* Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body {
	height: 100%;
}
body, section {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: lighter;
	background-color: #ffffff;
	color: rgba(20,20,20,.6);
}
body.active {
	overflow: hidden;
}
section {
	font-family: "Gotham";
	font-weight: 300;
	position: relative;
}
a {
	color: #f47b29;
	font-family: "Gotham";
	text-decoration: none;
}
a:hover {
	color: #ffb016;
}
a p {
	color: rgba(20,20,20,.6);
}
strong {
	font-family: "Gotham";
	font-weight: 400;
}
p {
	line-height: 1.5em;
	margin-bottom: 1em;
}
h1, h2, h3, h4, h3, h6 {
  margin-top: 0;
  margin-bottom: .6rem;
  font-weight: 300;
  color: #666666;
}
h1 { font-size: 4.0rem; line-height: 1.2; }
h2 { font-size: 2.2rem; line-height: 1.25; }
h3 { font-size: 3.0rem; line-height: 1.3; }
h4 { font-size: 2.4rem; line-height: 1.35; }
h3 { font-size: 1.8rem; line-height: 1.5; }
h6 { font-size: 1.5rem; line-height: 1.6; }

@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 2.8rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h3 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}
small {
	font-size: .6em;
	line-height: 1.2em;
}

/* Generic classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.light-text,
.light-text h1, 
.light-text h2,
.light-text h3,
.light-text h4,
.light-text h3,
.light-text h6 {
	color: #ffffff;
}
.light-text p {
	color: rgba(255,255,255,.5);
}
.vertical-center {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.table-high {
	width: 100%;
}
.full-height {
	height: 100%;
}
.hide-small {
	display: none !important;
}
.hide-medium {
	display: none;
}
.nodisplay {
	display: none;
}
.shopbody-stretch {
	min-height: 100%;
	margin-bottom: -2.9em;
}
.clearing {
	font-size: 0;
	clear: both;
}
.center-block {
	margin: 0 auto;
	text-align: center;
	display: block;
}
.no-hero + section {
	background: transparent;
}
.no-hero h1 {
	font-size: 2em;
	font-weight: 400;
	padding-top: .5em;
	padding-bottom: .4em;
	border-bottom: solid 1px #f47b29;
	margin-bottom: -.8em;
}
.text-body {
	padding-top: 4em !important;
	font-size: .8em;
}
.text-section {
	padding-bottom: 4em !important;
}
.text-section img {
	max-width: 100%;
}
.text-section figure img {
	max-width: auto;
}
.image-fullwidth {
	width: 100%;
	max-width: auto;
	height: auto;
	box-shadow: 0 0 15px 0 rgba(0,0,0,.3);
}
.text-body p {
	line-height: 1.8em;
}
.text-body h2 strong {
	color: #f47b29;
	text-transform: uppercase;
	font-size: .9em;
}
.container .text-body ul, .text-body .container ul {
	list-style-type: none;
	padding-left: 1.5em;
	line-height: 1.3em;
}
.container .text-body ul li::before, .text-body .container ul li::before {
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: #f47b29; /* Change the color */
	font-weight: bold; /* If you want it to be bold */
	display: block; /* Needed to add space between the bullet and the text */
	width: 1em; /* Also needed for space (tweak if needed) */
	margin-left: -1em; /* Also needed for space (tweak if needed) */
	font-size: 1.2em;
	line-height: .8em;
	float: left;
	margin-top: .3em;
}
.text-body ol, .text-body ul {
	padding-left: 2em;
	list-style-position: outside;
}

.text-section figure {
	display: block;
	padding: 2em;
	background-color: rgba(150,150,150, .1);
	min-width: 10em;
	min-height: 10em;
	box-sizing: border-box;
	margin-top: 0;
}
.text-section figure.left {
	float: left;
	margin-left: 0;
	margin-right: 2em;
}
.text-section figure.right {
	float: right;
	margin-right: 0;
	margin-left: 2em;
}
.text-section figure.quote {
	width: 40%;
}
.text-section figure.quote strong {
	font-size: 1.6em;
}
.text-section figure.quote p {
	font-size: 1.3em;
	margin-bottom: 0;
}
.text-section figure img {
	width: 100%;
	height: auto;
}



/* UI classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ctabutton {
	font-family: "Gotham";
	display: inline-block;
	padding: .4em 1.5em;
	color: #ffffff ;
	background-color: #f47b29;
	transition: background-color .2s;
	text-decoration: none;
	font-size: .6em;
	border: none;
	border-radius: 0;
	text-transform: none;
}
.ctabutton:hover {
	background-color: #d84b0e;
	color: #ffffff;
}
.ctabutton.large {
	font-size: 1.2em;
	transition: transform .2s, background-color .2s;
}
.ctabutton.large:hover {
	transition: transform .2s, background-color .2s;
	transform: scale(1.02);
}
.ctabutton.fluid {
	height: 80%;
	width: 80%;
	font-size: .75em;
	padding-left: 0;
	padding-right: 0;
	padding-top: .65em;
	padding-bottom: .65em;
	text-align: center;
	min-width: 6em;
}

ul.accordian {
	list-style-type: none;
	padding: 0 !important;
	margin: 0 0 2em 0;
}
.accordian>li {
	position: relative;
	display: block;
	padding: .6em .8em .3em .8em;
	border-bottom: solid 1px rgba(150,150,150,.3);
	margin: 0;
	cursor: pointer;
	background-color: rgba(150,150,150,.06);
}
.accordian>li:last-child {
	border-bottom: none;
}
.accordian>li:hover {
	background-color: rgba(150,150,150,.1);
}
.accordian>li::before {
	content: "+" !important;
	display: block;
	position: absolute;
	right: .5em;
	top: .7em !important;
	margin-top: 0 !important;
}
.accordian>li h6 {
	font-size: .9em;
	padding-right: 2em;
	line-height: 1.3em;
}
.accordian>li.expanded::before {
	content: "-" !important;
}
.accordian>li .expand {
	font-size: .8em;
	line-height: 1.4em;
	box-sizing: border-box;
	padding: 1em;
}
.accordian>li .expand ul {
	margin-top: 0;
	margin-left: 1.6em;
	padding: 0 !important;
}
.accordian>li .expand.hidden {
	display: none;
}
.accordian>li .expand.show {
	display: block;
}
table.requirements {
	border-collapse: collapse;
	font-size: .9em;
	text-align: center;
	line-height: 1.5em;
}
table.requirements tr {
	width: 100%;
}

table.requirements thead {
	font-size: 1.8em;
	text-align: center;
	width: 100%;
}
table.requirements thead td {
	padding-top: 1em !important;
	padding-bottom: .5em !important;
}
table.requirements tbody td, table.requirements thead td {
	border-bottom: solid 1px rgba(150,150,150,.3);
	text-align: center;	
}
table.requirements tbody td {
	font-size: .8em;
	padding: 2em 1em;
}
.screenshots .column-stack {
	display: block;
	clear: both;
}
.screenshots .column-stack::after {
	content: "";
	clear: both;
	display: block;
}
.screenshot-box {
	padding: 0;
	position: relative;
}
.screenshot-box .slick-arrow {
	position: absolute;
	display: block;
	height: 100%;
	width: 50px;
	border-radius: 25px;
	padding: 0;
	font-size: 1.8em;
	padding: 10px;
	overflow: hidden;
	color: rgba(150,150,150,.6);
	text-indent: -9999px;
	border: none;
	top: 0;
}
.screenshot-box .slick-arrow::before {
	display: block;
	position: absolute;
	top: 50%;
	margin: -.5em auto 0 auto;
	text-indent: 0px;
	z-index: 2;
}
.screenshot-box .slick-arrow:hover {
	color: #f47b29;
}
.screenshot-box .slick-prev {
	left: -20px;
}
.screenshot-box .slick-prev::before {
	font-family: "IcoFont";
	content: "\eab5";
	left: 0;

}
.screenshot-box .slick-next {
	right: -20px;
}
.screenshot-box .slick-next::before {
	font-family: "IcoFont";
	content: "\eab8";
	right: -5px;
}
.screenshot-swatch {
	width: 45%;
	padding: .5em;
	box-sizing: border-box;
	font-size: .9em;
	margin-bottom: 1em;
}
.screenshot-swatch:hover {
	color: #f47b29;
	cursor: pointer;
}
.screenshot-swatch p {
	line-height: 1.3em;
	margin-bottom: 0;
	text-align: center;
}
.screenshot-swatch .screenshot-container {
	width: 100%;
	padding-top: 60%;
	text-align: center;
	overflow: hidden;
	position: relative;
	border: solid 1px rgba(150,150,150,.3);
}
.screenshot-swatch img {
	height: auto;
	width: 110%;
	position: absolute;
	top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}
.screenshot-big-container {
	bottom: 0;
	left: 0;
	z-index: 3;
	position: fixed;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.screenshot-big-container.active {
	height: calc(100% - 55px);
}
.screenshot-big {
	padding: 1em;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	height: 100%;

}
.screenshot-big>div {
	width: 100%;
}
.screenshot-big img {
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}
.screenshot-big img.portrait {
	height: 90%;
	width: auto;
	margin: 0 auto;
}
.screenshot-big .slick-list, .screenshot-big .slick-track {
	height: 100%;
	width: 100%;
}
.screenshot-big .video-big {
	position: relative;
	width: 80%;
	padding-top: 45%;
	margin: 0 auto;
}
.screenshot-big iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.resource-list .screenshot-swatch p {
	text-align: left;
	font-size: .9em;
	line-height: 1.4em;
}
.resource-list .screenshot-swatch h3 {
	line-height: 1.3em;
	padding-top: .3em;
}
.resource-list .screenshot-swatch span {
	color: #f47b29;
}
.basic-form {
	margin: 0;
	padding: 0;
}
.basic-form label {
	font-weight: 400;
	font-size: .8em;
	margin-bottom: 0;
}
.basic-form input, .basic-form textarea, .basic-form select {
	margin: 1px 1px .5em 1px;

}
.basic-form input[type=text]:focus, .basic-form input[type=email]:focus, .basic-form input[type=password]:focus, .basic-form select:focus, .basic-form textarea:focus {
	border: solid 2px #f47b29;
	margin: 0 0 .45em 0;
}
.basic-form input[type=text], .basic-form input[type=email], .basic-form input[type=password], select {
	font-size: .7em;
	padding: 1.1em .5em;
}
.basic-form input[type=text], .basic-form input[type=email], .basic-form input[type=password], .basic-form select, .basic-form textarea {
	width: calc(100% - 2em);
}
.basic-form ol {
	list-style-type: none;
	padding: 0;
	margin-bottom: 0;
}
.basic-form textarea {
	height: 15em;
}
.basic-form table {
	width: 100%;
	margin-bottom: 0;
}
.page-menu {
	display: block;
	position: absolute;
	left: 5%;
	top: 0;
	z-index: 1;
}
.page-menu ul {
	display: block;
	list-style-type: none;
	padding: 0 !important;
	margin: 0;
}
.page-menu ul li {
	display: block;
	padding: 0;
	margin: 0;
}
.page-menu ul a {
	text-align: left;
	display: block;
	padding: 1em .1em;
	color: #bbbbbb;
	text-decoration: none;
	font-size: 1.3em;
}
.page-menu ul a:hover, .page-menu ul li.active a {
	color: #f47b29;
}
.page-menu ul a i {
	font-size: 1.3em;
	margin-right: .2em;
}

.page-menu.menu-float {
	position: fixed;
}
.page-menu.menu-bottom {
	top: auto;
	bottom: 75px;
	position: absolute;
}
.has-menu {
	padding-left: 2em;
}


/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	color: #fff;
	display: block;
	position: relative;
	text-align: center;
	z-index: 10;
	position: fixed;
	width: 100%;
	font-size: 1em;
	font-weight: lighter;
}
header.frontpage-menu {
	background: transparent;
}
header.frontpage-menu::before {
	transform: translateY(-4em);
	transition: transform .2s;
}
header::before {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	left: 0;
	background-color: #444444;
	transform: translateY(0);
	transition: transform .2s;
}
header.frontpage-menu.firstload {
	transition: background-color .2s;
	transform: translateY(-2em);
	opacity: 0;
	animation: menuslidein .4s linear .5s forwards;
}
@keyframes menuslidein {
	from {
		transform: translateY(-2em);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
header nav {
	font-size: 1em;
	display: block;
	height: 100%;
	top: 3.2em;
}
.header-logo-link {
	display: block;
	width: 14em;
	height: 3.4em;
	position: relative;
	margin: 0 auto;
}
.header-logo {
	margin-left: -1em;
	margin-right: 1em;
	width: auto;
	top: -1.8em;
	position: relative;
}
#nav-icon {
	display: block;
	background: transparent;
	height: 60px;
	width: 55px;
	position: absolute;
	top: 0;
	z-index: 1;
	box-sizing: border-box;
	padding: 13px 15px;
	cursor: pointer;
}
#nav-icon:hover {
	background-color: #333333;
}
#nav-icon.active {
	background-color: #333333;
	pointer-events: none;
}
#nav-icon:after, 
#nav-icon:before, 
#nav-icon div {
  background-color: #dddddd;
  border-radius: 3px;
  content: '';
  display: block;
  height: 2px;
  margin: 6px 0;
  transition: all .2s ease-in-out;
}
#nav-icon.active:before {
  transform: translateY(8px) rotate(135deg);
}

#nav-icon.active:after {
  transform: translateY(-8px) rotate(-135deg);
}

#nav-icon.active div {
  transform: scale(0);
}
header nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	letter-spacing: -1em;
	line-height: 0;
	font-size: 0;
	background-color: #666666;
	width: 85vw;
	height: calc(100vh - 60px);
	z-index: 3;
	transform: translateX(-85vw);
	transition: transform .2s;
	user-select: none;
	overflow: auto;
}
#menu-overlay {
	position: fixed;
	content:"";
	height: calc(100vh);
	width: 100vw;
	background-color: rgba(0,0,0,1);
	bottom: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}
header nav #nav-menu.active {
	transform: translateX(0);
	opacity: 1;
}
header nav #nav-menu.hidden {
	opacity: 0;
}
#menu-overlay.active {
	opacity: .5;
	z-index: 2;
}
header nav ul li {
	display: block;
	margin: 0;
	font-size: 1em;
	letter-spacing: 0;
	line-height: 0;
	font-size: 0;
	text-align: left;
}
header nav ul li a {
	display: block;
	padding: 1.5em 1.8em;
	color: #dddddd;
	font-size: 18px;
	text-decoration: none;
	font-family: "Gotham";
	line-height: 1.2em;
	transition: color .2s;
	overflow: hidden;
	position: relative;
	line-height: 1.2em;
}
header nav ul li a::before {
	content: "";
	position: absolute;
	background-color: #444444;
	height: 100%;
	width: 100%;
	top: 0;
	left: -100%;
	transition: left .2s, opacity .2s;
	display: block;
	z-index: -1;
	opacity: 0;
}
header nav ul li a:hover {
	color: #ffffff;
}
header nav ul li a:hover::before {
	content: "";
	left: 0;
	opacity: 1;
	transition: left .2s, opacity .2s;
}
header nav ul li.highlight a {
	background-color: #f47b29;
	color: #ffffff;
	font-weight: 400;
}
header nav ul li.highlight a:hover {
	background-color: #f55b0e;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
	padding: 3.5em 2em 2em 2em;
	position: relative;
}
footer, #footer {
	font-size: .9em;
	font-family: "Gotham";
	background-color: #444444;
}
#footer {

	padding: 1em;
	color: #eeeeee;
	font-weight: 300;
	text-align: right;
}
footer .columns, footer .column {
	padding: .1em;
	color: #aaaaaa;
}
footer h3 {
	font-size: 1.3em;
	color: #eeeeee;
	margin: 0 0 1em 0;
	font-weight: medium;
}
footer ul {
	padding: 0;
	margin: 0 0 2em 0;
	list-style-type: none;
	line-height: 1.2em;
}
footer ul li {
	padding-bottom: .2em;
}
footer a {
	color: rgba(255,255,255,.6);
}
footer a:hover {
	color: #f47b29;
}
.footer-logo-link {
	display: block;
	width: 40%;
	height: auto;
	margin: 0 auto;
	position: relative;
	min-width: 15em;
}
.footer-logo {
	width: 100%;
	height: auto;
	position: relative;
}

/* Front Page Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
	font-family: "Gotham";
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative;
	background-color: #111111;
	color: #ffffff;
	font-size: 1.2em;
}
.hero.hero-secondary {
	height: 18em;
}
.hero h1 {
	font-size: 1.8em;
	padding-top: 1.3em;
	font-weight: 400;
	margin-bottom: .3em;
}
.hero h1 .version {
	color: #f47b29;
	font-size: .6em;
}
.hero p {
	display: block;
	font-size: .9em;
	margin-top: 0;
}
.hero .bg-video {
	height: 120%;
	width: auto;
	position: absolute;
	opacity: .16;
	top: -9999px;
	bottom: -9999px;
	left: -9999px;
	right: -9999px;
	margin: auto;
	z-index: 0;
}
.hero .hero-info {
	height: 100%;
	padding: 0 5% 0 5%;
	margin: 0;
	max-width: 26em;
	display: table;
	position: absolute;
	transform: translateY(4em);
	z-index: 2;
	opacity: 0;
	animation: heroslidein .4s linear .5s forwards;
}
.hero-secondary {
	background-color: rgba(30,30,30,.4);
}
.parallax-mirror {
	background-color: #111111;
}
.hero-secondary .hero-info {
	animation: none;
	opacity: 1;
	transform: translateY(0);
}
@keyframes heroslidein {
	from {
		transform: translateY(5em);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.ctabutton.download {
	padding-left: 1em;
}
.ctabutton.download .icon {
	font-size: 1em;
	width: 1em;
	color: #ffffff;
	text-align: left;
	display: inline-block;
	margin-bottom: .2em;
}


/* Front Page Slideshow
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section.front-slideshow {
	padding: 0;
	font-size: 1.3em;
	color: #777777;
	overflow: hidden;
	position: relative;
	min-height: 30em;
}
section.front-slideshow .slide {
	padding-top: 2em;
	padding-bottom: 3em;
}
section.front-slideshow .laptop-image {
	width: 80%;
	display: block;
	text-align: center;
	position: relative;
	pointer-events: none;
	margin: 0 auto;
}
section.front-slideshow .front-slideshow-info {
	position: relative;
	box-sizing: border-box;
	pointer-events: none;
	outline: none;
}
section.front-slideshow .front-slideshow-info h3 {
	font-size: 1.3em;
}
section.front-slideshow .front-slideshow-info p {
	font-size: .8em;
	margin-bottom: 1em;
}
section.front-slideshow .vertical-center {
	display: block;
	padding-left: 40px;
	padding-right: 40px;
}
section.front-slideshow .vertical-center .ctabutton {
	pointer-events: all;
}
section.front-slideshow .slide-background {
	width: 100%;
	height: 30em;
	position: absolute;
	top: 0;
	cursor: grab;
}
section.front-slideshow .slide-background:active {
	width: 100%;
	position: absolute;
	top: 0;
	cursor: grabbing;
}
section.front-slideshow .slick-slide {
outline: none !important;
}
section.front-slideshow .slide-background:focus {
	outline: none;
}
section.front-slideshow .slide-background .slick-list,
section.front-slideshow .slide-background .slick-track {
	height: 100%;
}
section.front-slideshow .slide-background .green {
	background-color: #237b3d;
	width: 100%;
	height: 100%;
}
section.front-slideshow .slide-background .darkgray {
	background-color: #444444;
	width: 100%;
	height: 100%;
}
section.front-slideshow .light-text {
	color: #ffffff;
}

section.front-slideshow .slide .screenshot-container {
	width: 60%;
	margin: -58% auto 2em auto;
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}
section.front-slideshow .slide .screenshot-container .slick-list,
section.front-slideshow .slide .screenshot-container .slick-track {
	height: 100%;
}
section.front-slideshow .slide .screenshot-container .screenshot-mask {
	width: 100%;
	height: 0;
	padding-top: 62%;
	background-color: red;
	overflow: hidden;
	display: block;
}
section.front-slideshow .slide .screenshot {
	width: 380%;
	display: block;
	position: relative;
	height: auto;

}
section.front-slideshow .slide .screenshot.slide-left {
	top: -60%;
	left: -200%;
	animation: screenleftslide 30s linear infinite;
}
@keyframes screenleftslide {
	from { transform: rotate(0deg) translateX(10%) rotate(0deg) translateY(-50%); }
	to   { transform: rotate(360deg) translateX(10%) rotate(-360deg) translateY(-50%); }
}
section.front-slideshow .slide .screenshot.slide-up {
	top: -60%;
	left: -200%;
	animation: screenupslide 20s linear infinite;
}
@keyframes screenupslide {
	from { transform: rotate(0deg) translateX(10%) rotate(0deg) translateY(-50%); }
	to   { transform: rotate(-360deg) translateX(10%) rotate(360deg) translateY(-50%); }
}
section.front-slideshow .slick-dots {
	margin: 3em auto -3em auto;
	text-align: center;
	width: 100%;
	padding: 0;
	list-style-type: none;
}
section.front-slideshow .slick-dots li {
	display: inline-block;
}
section.front-slideshow .slick-dots li button {
	background-color: rgba(255,255,255,.2);
	display: block;
	border-radius: .5em;
	height: 8px;
	overflow: hidden;
	margin: 0 6px;
	width: 3em;
	padding: 0;
	border: none !important;
	transition: transform linear .2s, background-color linear .2s;
	pointer-events: all;
	text-indent: 9999px;
	outline: none;
}
section.front-slideshow .slick-dots li.slick-active button {
	background-color: rgba(255,255,255,.6);
	transform: scale(1.1);
	transition: transform linear .2s, background-color linear .2s;
}



/* Front Page Features
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.front-features {
	padding: 2em 0 6em 0;
}
.grid-feature {
	padding: 4em 3% 0 3%;
	font-size: .8em;
	text-align: center;
}
.grid-feature h3 {
	font-size: 1.4em;
	margin-bottom: .6em;
}
.grid-feature p {
	line-height: 1.6em;
	margin-bottom: 0;
	font-size: 1em;
}
.grid-feature .icon {
	font-size: 6em;
	color: #f47b29;
	width: 100%;
	text-align: center;
	display: block;
	margin-bottom: .2em;
}

/* Front Page Videos
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.front-videos {
	padding: 2em 0 5em 0;
	font-size: .8em;
	font-family: "Gotham";
}
.front-videos .columns {
	margin-left: 0;
	margin-right: 0;
}
.videothumb {
	box-sizing: border-box;
	padding: .5em;
	border-radius: .5em;
	text-decoration: none;
	margin-bottom: 1em;
	transition: background-color linear .2s;
	position: relative;
	display: block;
	font-size: .8em;
}
.videothumb:hover {
	background-color: #eeeeee;
	transition: background-color linear .2s;
}
.videothumb::before {
	font-family: "IcoFont";
	content: "\ec74";
	color: #ffffff;
	position: absolute;
	background-color: #f36e2a;
	height: 2em;
	width: 2em;
	top: 2em;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-sizing: border-box;
	padding-top: .5em;
	padding-left: .2em;
	border-radius: 1em;
	font-size: 1.6em;
	text-align: center;
	transform: translateY(50%);
	opacity: 0;
	transition: transform linear .2s, opacity linear .2s;
}
.videothumb:hover::before {
	transition: transform linear .2s, opacity linear .2s;
	transform: translateY(0);
	opacity: 1;
}
.videothumb img {
	display: block;
	width: 100%;
	height: auto;
}
.videothumb p {
	font-size: 1em;
	line-height: 1.4em;
	text-decoration: none;
	transition: color linear .2s;
}
.videothumb:hover p {
	color: #f36e2a;
	transition: color linear .2s;
}

/* Purchase
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.login_form_controls .container {
	width: 100%;
}
.login_form_controls input {
	width: 100%;
}
#shop_page
{
	margin: 0 auto;
	padding: 0;
	font-weight: 600;
}

#shop_header
{
	position: relative;
	margin: 0;
	padding: 0;
}

#shop_header_logo, #shop_header_logo img
{
	margin: 0 auto;
	display: block;
}


#shop_body
{
	border: 1px solid #B4B4B4;
	border-radius: 4px;
	padding: 20px;
	background-color: #f9f8f7;
}

#shop_body h2
{
	padding-bottom: 5px;
	border-bottom: 1px solid #B4B4B4;
	clear: both;
	font-weight: normal;
	margin: 1.7em 0 1.2em;
}

#shop_body p
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

div.purchase_left
{
	float: left;
	display: inline;
	margin-bottom: 2em;
	border: solid 1px rgba(150,150,150,.2);
	box-sizing: border-box;
	padding: 1em;
	width: 100%;
	font-size: .8em;
	line-height: 1.2em;
}

div.academic_left
{
	float: left;
	display: inline;
	width: 360px;
}

div.purchase_right
{
	margin-bottom: 2em;
	float: right;
	display: inline;
	width: 310px;
}

div.purchase_question
{
	font-size: 110%;
	margin-top: 10px;
	margin-bottom: 5px;
}

div.purchase_answer
{
	font-size: 85%;
	line-height: 120%;
	margin-left: 0.2em;
	margin-bottom: 1em;
}

div.licenses_name
{
	margin-top: 10px;
	font-size: 110%;
}

div.licenses_info
{
	position: relative;
	margin-top: 15px;
	height: 36px;
}

div.licenses_cost_info
{
	line-height: 120%;
	font-size: 80%;
	display: block;
}

#shop_body fieldset
{
	margin: 0em 0em 0em 0em;
	padding: 0em 0em 0em 0em;
	border: none;
}

#shop_body legend
{
	padding: 1em;
	padding-bottom: 0.5em;
	font-size: 110%;
	font-weight: bold;
}

#shop_body fieldset ol
{
	padding: 0 1em 1em 1em;
	list-style: none;
}

#shop_body fieldset li
{
	margin: 0;
	padding: 0;
}

#shop_body label
{
	display: block;
	margin: 8px 0px 5px 0px;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
}

#shop_body label span
{
	font-size: 85%;
	font-weight: normal;
}

#shop_body input.text,  #shop_body select
{
	background-color: white;
	color: #263fbd;
	padding: 8px 12px;
	margin: 5px 5px 5px 0;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
	font-family: Quicksand, Open Sans, Segoe UI, sans-serif;
	font-weight: 600;
}

#shop_body input.text::-webkit-input-placeholder
{
	color: #666;
	font-weight: normal;
}

#shop_body input.text:placeholder-shown
{
	color: #666;
	font-weight: normal;
}

#shop_body input.text:-ms-input-placeholder
{
	color: #666;
	font-weight: normal;
}

#shop_body input.text:focus,  #shop_body select:focus
{
	box-shadow: 0 1px 3px 0 #cfd7df;
}


#shop_body input.text.error, #shop_body select.error
{
	background-color: #ffdddd;
}

#shop_body input.text.error:placeholder-shown
{
	color: #744;
}

#shop_body input.text.error::-webkit-input-placeholder
{
	color: #744;
}

#shop_body input.text.error:-ms-input-placeholder
{
	color: #744;
}

div.licenses_maint_info
{
	line-height: 120%;
	text-align: right;
	font-size: 80%;
	width: 180px;
}

div.licenses_qty
{
	position: relative;
	display: block;
	float: left;
	width: 60px;
	margin: 10px 20px 2em 0;

}

div.licenses_maint
{
	position: relative;
	left: 180px;
	top: 5px;
	width: 60px;
	margin: 0px 20px;
}

#licenses_qty
{
	position: absolute;
	margin: 0 ! important;
	padding: 0 ! important;
	width: 46px;
	height: 27px;
	text-align: center;
	font-size: 140% ! important;
	font-weight: normal;
	border-top-right-radius: 0 ! important;
	border-bottom-right-radius: 0 ! important;
}

div.licenses_spinner
{
	position: absolute;
	right: 0;
	cursor: pointer;
	height: 27px;
	width: 15px;
}

#licenses_spinner_up
{
	position: absolute;
	right: 0;
	top: 0;
	width: 15px;
	height: 14px;
	background: url('/shop/images/spinner.gif') no-repeat;
}
#licenses_spinner_up:hover
{ background-position: -15px 0; }
#licenses_spinner_up:active
{ background-position: -30px 0; }

#licenses_spinner_down
{
	position: absolute;
	right: 0;
	top: 14px;
	width: 15px;
	height: 13px;
	background: url('/shop/images/spinner.gif') no-repeat 0 -14px;
}

#licenses_spinner_down:hover
{ background-position: -15px -14px; }
#licenses_spinner_down:active
{ background-position: -30px -14px; }

div.licenses_total
{
	margin-top: 6px;
	text-align: center;
	font-size: 115%;
	font-weight: normal;
	display: inline-block;
	color: #f47b29;
}
#licenses_total_cost {
	margin-bottom: 1em;
}
#licenses_total_cost::before, #licenses_per_license::before
{
	content: "$";
}

div.new_maint_date
{
	display:none;
}

div.form_error
{
	display: none;
	margin: auto;
	color: #ff0000;
	font-size: 90%;
}

div.form_warning
{
	display: none;
	padding: 0px;
	color: #ff8a16;
	font-size: 90%;
}

span.form_warning
{
	background: url(/images/warning.png) no-repeat center left;
	display: none;
	margin-left: 10px;
	margin-bottom: 5px;
	padding: 0px;
	padding-left: 22px;
	color: #ff8a16;
}

#shop_body div.form_warning
{
	margin: 5px 0px;
}

#shop_body #Express_Warning
{
	display: block;
	margin: 0em 1em 1em 4em;
}

#login_form
{
	clear: both;
	margin: 0 0 1em 0;
	background: rgba(150,150,150,.2);
	padding: 3px;
	box-sizing: border-box;
	text-align: center;
	width: 100%;
	font-size: .8em;
}

#login_form label
{
	display: inline;
	margin: 0;
}

div.login_form_desc
{
	margin: 3px;
	margin-bottom: 7px;
}

div.login_form_controls
{
	margin: 3px;
}

#login_loading
{
	display: none;
	margin: 3px;
}

#login_error
{
	display: none;
	padding: 5px;
	padding-left: 22px;
	color: #ff0000;
}

#card-element {
	color: #263fbd;
}

.StripeElement {
	width: calc(100% - 1.4em);
	box-sizing: border-box;
	background-color: white;
	padding: .5em 1em;
	border-radius: 4px;
	border: 2px solid #cccccc;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
	font-family: Quicksand, Open Sans, Segoe UI, sans-serif;
}

.StripeElement--base {
	color: #263fbd;
}

.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
	border: solid 2px #f47b29;
}

.StripeElement--invalid {
	border-color: #fa755a;
}

.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
}


#Promo_Code { width: calc(100% - 2.2em); }

#purchase_overview /* table */
{
	font-size: 1em;
	width: calc(100% - 1.1em);
	margin: 1em 0 2em 0;
}

#purchase_overview td
{
	padding: 5px;
	text-align: right;
}

#purchase_overview tbody td
{
	border-top: 1px solid #ddd;
}

#purchase_overview tbody td.first
{
	border-top: none;
}

#purchase_overview tfoot td
{
	border-top: 2px solid #ddd;
}

tr.overview_discount
{
	display: none;
}

span.discount_amount
{
	color: #008000;
}

span.discount_amount::before
{
	content: "$";
}

td.overview_total_row
{
	font-weight: bold;
}

#overview_total
{
	font-size: 110%;
}


#overview_total::before, #sales_tax_amount::before, #overview_subtotal::before
{
	content: "$";
}

.purchase_process, .academic_process {
	background: #fbd35d;
	background-image: linear-gradient(to bottom, #fbd35d, #e96800);
	border-radius: 6px;
	text-shadow: 1px 1px 3px #666666;
	box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
	color: #ffffff;
	font-size: 20px;
	padding: 11px;
	border: solid #a85c22 1px;
	text-decoration: none;
	cursor: pointer;
}

.purchase_process:hover, .academic_process:hover {
	background: #ffd666;
	background-image: linear-gradient(to bottom, #ffd666, #ed6c09);
	text-decoration: none;
	text-shadow: 1px 1px 3px #666666;
	transform: translateY(-1px);
	transition: all 150ms ease;
	box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08)
}

.purchase_process:active, .academic_process:active {
	transform: translateY(1px);
}

.purchase_process:disabled, .academic_process:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
	transform: translateY(0px);
}
#footer {

}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  font-family: "Gotham";
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 1.3em;
  line-height: 1.6em;
}
.container.full-width {
	width: 100%;
}
.container.wide {
	width: 100%;
	padding: 0 1em;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
  	min-height: 1px;
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
––––––––––––––––––––––––––––––––––––––––––––––––––
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }
  */


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  text-align: left; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {}
pre,
blockquote,
dl,
figure,
table,
ul,
ol,
form {
  margin-bottom: 2.5rem; }



/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }



/* Slick
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


/* Lightbox
---------------------------------------------------*/

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACh3BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}





/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media (prefers-color-scheme: dark) {
	body, section {
		background-color: #444444;
		color: rgba(255,255,255,.6);
	}
	a p {
		color: rgba(255,255,255,.5);
	}
	header::before, footer, #footer {
		background-color: #222222;
	}
	h1,h2,h3,h4,h3,h6 {
		color: #ffffff;
	}
	.videothumb, .videothumb p {
		color: #ffffff;
	}
	.videothumb:hover {
		background-color: #222222;
		transition: background-color linear .2s;
	}

}
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

	section.front-slideshow {
		min-height: auto;
		height: 10em;
		max-height: 100vh;
	}
	section.front-slideshow .slide {
		height: 100%;
		width: 100%;
	}
	section.front-slideshow .slideshow-container {
		height: 100%;
	}
	section.front-slideshow .laptop-image {
		width: auto;
		height: 100%;
		max-height: 27em;
		position: absolute;
		left: 0;
		margin-left: 55%;
		display: block;
		top: 50%;
		transform: translateY(-44%);
	}
	section.front-slideshow .slide .front-slideshow-screenshots {
		height: 100%;
		width: 100%;
		position: absolute;
		display: block;
		left: 0;
		pointer-events: none;
	}
	section.front-slideshow .slide .screenshot-container {
		height: 16em;
		max-width: 20em;
		margin-top: 1em;
		padding-top: 0;
		max-height: 17em;
		margin-left: calc(50% + 3em);
		position: relative;
		top: 50%;
		transform: translateY(-60%);
	}
	section.front-slideshow .slide .screenshot {
		height: auto;
		width: 200%;
	}

	section.front-slideshow .slide .screenshot.slide-left {
	left: -100%;
	top: -200%;
	animation: screenleftbig 30s linear infinite;
	}
	@keyframes screenleftbig {
		from { transform: rotate(0deg) translateX(10%) rotate(0deg) translateY(-80%); }
		to   { transform: rotate(360deg) translateX(10%) rotate(-360deg) translateY(-80%); }
	}
	section.front-slideshow .slide .screenshot.slide-up {
		left: -80%;
		top: -200%;
		animation: screenupbig 30s linear infinite;
	}
	@keyframes screenupbig {
		from { transform: rotate(0deg) translateX(-10%) rotate(0deg) translateY(-80%); }
		to   { transform: rotate(360deg) translateX(-10%) rotate(-360deg) translateY(-80%); }
	}

	section.front-slideshow .front-slideshow-info {
		padding-right: 0;
		padding-left: 0;
		height: 100%;
		margin-top: -2em;
		width: 53%;
		max-width: 25em;
	}
	section.front-slideshow .slick-dots {
		position: absolute;
		top: 11em;
		margin-left: auto;
		margin-right: auto;
		left: calc(50vw - 40px);
		transform: translateX(-50%)
	}
	section.front-slideshow .front-slideshow-info h3 {
		font-size: 1.2em;
		margin-bottom: .5em;
	}
	section.front-slideshow .front-slideshow-info p {
		font-size: .75em;
		line-height: 1.5em;
	}
	section.front-slideshow .front-slideshow-info .ctabutton.large {
		font-size: 1em;
	}
	section.front-slideshow .front-slideshow-info .vertical-center {
		display: table-cell;
		vertical-align: middle;
		padding-left: 0;
		padding-right: 10px;
	}
	section.front-slideshow .front-slideshow-info .slick-track,
	section.front-slideshow .front-slideshow-info .slick-list {
		height: 100%;
	}
	.table-high {
		display: table;
		height: 100%;
	}
	.front-videos .columns.six {
		width: 50%;
	}
	.videothumb::before {
		top: 2em;
		padding-top: .45em;
	}
	.has-menu {
		padding-left: 0;
	}
	.page-menu a {
		padding-left: 1em;
		padding-right: 1em;
	}
	.hide-small {
		display: initial !important;
	}
	div.purchase_left
	{
		border: none;
		padding: 0;
	}
	.purchase_left.totals-float {
		position: fixed;
		top: 70px;
		width: 17.65%;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {}


@media (max-width: 849px) and (orientation: landscape) {
	header {
		position: fixed;
		transform: translateY(-100%);
		transition: transform .2s linear;
	}
	header.scrolled {
		position: fixed;
		transform: translateY(0);
		transition: transform .2s linear;
	}
	section.front-slideshow {
		height: 15em;
	}
	section.front-slideshow .front-slideshow-info {
		margin-top: 0;
	}
	section.front-slideshow .slide {
		padding: 0;
	}
	section.front-slideshow .slide .screenshot-container {
		transform: translateY(-45%);
	}
	section.front-slideshow .slide .screenshot-container .screenshot-mask {
		margin-left: 0;
		padding-top: 9.7em;
		height: 0;
	}
	.text-body {
		padding-top: 2em;
	}
	.screenshot-big-container.active {
		height: 100%;
	}

}
@media screen and (min-width: 550px) and (max-width:849px) and (orientation: portrait) {
	.hero { 
		font-size: 1.5em;
	}
	section.front-slideshow {
		font-size: 1.5em;
		height: 16em;
	}
	section.front-slideshow .slide .screenshot-container .screenshot-mask {
		padding-top: 10.4em;
	}
	section.front-slideshow .slide .screenshot-container {
		transform: translateY(-60%);
		width: 80%;
	}
	section.front-slideshow .slick-dots {
		top: 11.8em;
	}

}

/* Larger than wide tablet */
@media (min-width: 850px) {
	header::after {
		display: none;
	}
	header nav {
		float: right;
		padding-top: 0;
	}
	header nav #nav-menu {
		transform: translateX(0);
		transition-property: none;
	}
	header nav #nav-icon {
		display: none;
	}
	header nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: block;
		position: relative;
		letter-spacing: -1em;
		line-height: 0;
		font-size: 0;
		float: right;
		background: transparent;
		width: auto;
		height: auto;
		z-index: 0;
		left: 0;
		opacity: 1 !important;
	}
	header nav ul li {
		display: inline-block;
	}
	.header-logo {
		height: 100px;
		width: 220px;
		margin-top: -33px;
		margin-left: -20px;
		top: 0;
	}
	.header-logo-link {
		position: absolute;
	}
	header nav ul li a {
		font-size: 15px;
		padding: 1.3em 1.2em;
	}
	header nav ul li a::before {
		top: 3.2em;
		left: 0;
		transition: top .2s, opacity .2s;
		display: block;
		z-index: -1;
		opacity: 0;
		background-color: #333333;
	}
	header nav ul li a:hover {
		color: #ffffff;
	}
	header nav ul li a:hover::before {
		content: "";
		position: absolute;
		top: 0;
		transition: top .2s, opacity .2s;
	}
	header.frontpage-menu nav ul li.highlight a {
		border-radius: 0 0 0 7px;
		transition: border-radius .2s linear;
	}
	header nav ul li.highlight a {
		border-radius: 0 0 0 0;
		transition: border-radius .2s linear;
	}
	.hero {
		font-size: 2em;
	}
	.hero-info h1 {
		font-size: 1.5em;
	}
	.hero-info p {
		margin-bottom: 1.2em;
	}
	.hero .ctabutton.large {
		font-size: .8em;
	}
	.hero .bg-video {
		position: fixed;
	}
	section.front-slideshow {
		height: 25em;
	}
	section.front-slideshow .slide .screenshot-container {
		width: 25.2em;
		height: 16em;
		margin-left: calc(50% + 4.8em);
		margin-top: 0;
		max-height: 16em;
		transform: translateY(-76%);
		max-width: none;
	}
	section.front-slideshow .slide .screenshot-container .screenshot-mask {
		height: 100%;
	}
	section.front-slideshow .slide .screenshot {
		width: auto;
		height: 200%;
	}
	section.front-slideshow .slide .screenshot.slide-left {
		left: -40%;
		top: 0;
		animation: screenleftbig 30s linear infinite;
	}
	@keyframes screenleftbig {
		from { transform: rotate(0deg) translateX(10%) rotate(0deg) translateY(-80%); }
		to   { transform: rotate(360deg) translateX(10%) rotate(-360deg) translateY(-80%); }
	}
	section.front-slideshow .slide .screenshot.slide-up {
		left: -40%;
		top: 0;
		animation: screenupbig 30s linear infinite;
	}
	@keyframes screenupbig {
		from { transform: rotate(0deg) translateX(-10%) rotate(0deg) translateY(-80%); }
		to   { transform: rotate(-360deg) translateX(-10%) rotate(360deg) translateY(-80%); }
	}
	section.front-slideshow .front-slideshow-info {
		font-size: .9em;
	}
	section.front-slideshow .front-slideshow-info h3 {
		font-size: 2em;
		margin-bottom: .3em;
	}
	section.front-slideshow .front-slideshow-info p {
		font-size: 1.2em;
		line-height: 1.6em;
		margin-bottom: 2em;
	}
	section.front-slideshow .slick-dots {
		top: 23.3em;
	}
	.front-videos .column-stack {
		width: 50%;
		float: left;
	}
	section.front-slideshow .front-slideshow-info .ctabutton.large {
		font-size: 1.4em;
	}
	footer {
		font-size: .9em;
	}
	footer .column-stack {
		width: 33.33%;
		float: left;
	}
	footer .columns.six {
		width: 50%;
		margin-left: 0;
	}
	.footer-logo-link {
		display: block;
		float: right;
		width: 80%;
		height: auto;
		position: relative;
	}
	.footer-logo {
		width: 100%;
		height: auto;
		position: relative;
	}
	.videothumb {
		font-size: .9em;
	}
	.videothumb::before {
		top: 25%;
	}
	.page-menu {
		left: 10%;
	}
	.has-menu {
		margin-left: 0;
	}
	.container .text-body p {
		line-height: 1.8em;
	}
	.container .text-body h2 {
		font-size: 2.0em;
	}
	.text-body {
		font-size: 1em;
	}
	.screenshot-swatch p {
		line-height: 1.3em !important;
	}
	.screenshot-box .slick-prev {
		left: -40px;
	}
	.screenshot-box .slick-next {
		right: -40px;
	}
	.accordian>li::before {
		top: .8em;
	}
	.accordian>li h6 {
		font-size: 1.1em;
	}
	.resource-list .screenshot-swatch h2 {
		font-size: 1.5em;
		line-height: 1.3em;
	}
	.ctabutton.fluid {
		padding-top: .4em !important;
		padding-bottom: .4em !important;
	}
	.login_form_controls .container {
		width: 80%;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {
	header nav ul li a {
		font-size: 18px;
		padding: 1em 1.4em;
	}
}

/* Larger than Desktop HD */
/*@media (min-width: 1400px) {
	body {
		font-size: 1.2vw;
	}
	header nav ul li a {
		padding: 1em 1.9em;
	}
	div.purchase_left
	{
		padding: 1em 1.5em;
		border: solid 1px rgba(150,150,150,.2);
	}
}*/

/* Hide recaptcha (textual notice is required if you do this, I've added it to the Privacy policy page. */
.grecaptcha-badge { visibility: hidden; }


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted lightgray; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: rgb(36, 36, 36);
  color: #fff;
  text-align: justify;
  padding: 15px 15px;
  border-radius: 6px;
  top: 100%;
  left: 50%;
  margin-left: -150px;
  line-height: 1.2em;
  font-size: 85%;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.whatsnew-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  box-sizing: border-box;
}

.whatsnew-item {
  flex: 1 0 45%;
  /*width: 46%;*/
  /*min-width: 10vw;
  max-width: 46%;*/
  background-color:rgb(230, 230, 230);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  font-size: 80%;
  line-height: 1.4em;
}

.whatsnew-minor-item {
  flex: 1 0 21%;
  /*min-width: 5vw;
  max-width: 25%;*/
  background-color:rgb(230, 230, 230);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  font-size: 80%;
  line-height: 1.4em;
}

.whatsnew-gallery h6 {
  text-align: center;
}

.whatsnew-gallery p {
  width: 90%;
  text-align: justify;
  margin: 10px auto;
  line-height: 1.4em !important;
}

.whatsnew-gallery ul {
  width: 80%;
  margin: 5px auto;
  margin-left: 40px;
 }

.whatsnew-gallery ul li {
  margin-bottom: 0.2rem;
 }

.whatsnew-screenshot {
  width:90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}

/*.whatsnew-screenshot:hover {
  transform: scale(2);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.whatsnew-minor-item .whatsnew-screenshot:hover {
  transform: scale(3);
}*/

@media (prefers-color-scheme: dark) {
  .whatsnew-item {
    background-color:rgb(36, 36, 36);
  }

  .whatsnew-minor-item {
    background-color:rgb(36, 36, 36);
  }
}