body, html {
	position: relative;
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	font-family: 'Open Sans', sans-serif;
	color: #4a4a4a !important;
	background: url(../images/batthern.png);
}
a {
    text-decoration: underline;
    color: #004d67;
}
a:hover {
    color: rgb(126, 252, 155);
}
.iframe-video {
    border-radius: .3em !important;
}
.hidden {
    display: none !important;
}
/* Site-wide Overrides ****************/
/* Amazon ad override */
.amzn-native-header {
    text-align: center !important;
}
#main-container {
	position: relative;
	margin-top: 1em;
	background-color: #FFFFFF;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
	width: 95%;
    border-radius: .25em .25em 0 0;
}
.ad-wrapper {
    max-width: 50em;
    margin: 1em auto;
    margin-bottom: 6em;
}
.animate {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.animate-fast {
    -webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.button-animate {
    -webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
/* Special animate classes for color transitions */
.color-animate {
	-moz-transition-property: color;  /* FF4+ */
	-moz-transition-duration: 2s;
	-webkit-transition-property: color;  /* Saf3.2+, Chrome */
	-webkit-transition-duration: 2s;
	-o-transition-property: color;  /* Opera 10.5+ */
	-o-transition-duration: 2s;
	-ms-transition-property: color;  /* IE10? */
	-ms-transition-duration: 2s;
	transition-property: color;  /* Standard */
	transition-duration: 2s;
}
.background-color-animate {
	-moz-transition-property: background-color;  /* FF4+ */
	-moz-transition-duration: 2s;
	-webkit-transition-property: background-color;  /* Saf3.2+, Chrome */
	-webkit-transition-duration: 2s;
	-o-transition-property: background-color;  /* Opera 10.5+ */
	-o-transition-duration: 2s;
	-ms-transition-property: background-color;  /* IE10? */
	-ms-transition-duration: 2s;
	transition-property: background-color;  /* Standard */
	transition-duration: 2s;
}
.box-shadow-animate {
	-moz-transition-property: box-shadow;  /* FF4+ */
	-moz-transition-duration: 2s;
	-webkit-transition-property: box-shadow;  /* Saf3.2+, Chrome */
	-webkit-transition-duration: 2s;
	-o-transition-property: box-shadow;  /* Opera 10.5+ */
	-o-transition-duration: 2s;
	-ms-transition-property: box-shadow;  /* IE10? */
	-ms-transition-duration: 2s;
	transition-property: box-shadow;  /* Standard */
	transition-duration: 2s;
}
.border-animate {
	-moz-transition-property: border;  /* FF4+ */
	-moz-transition-duration: 2s;
	-webkit-transition-property: border;  /* Saf3.2+, Chrome */
	-webkit-transition-duration: 2s;
	-o-transition-property: border;  /* Opera 10.5+ */
	-o-transition-duration: 2s;
	-ms-transition-property: border;  /* IE10? */
	-ms-transition-duration: 2s;
	transition-property: border;  /* Standard */
	transition-duration: 2s;
}
.responsive-image {
	margin: 0 auto;
	max-width: 400px;
}
.responsive-image img {
	width: 100%;
}
.lobster {
	font-family: 'Lobster', cursive;
}
.raleway {
	font-family: 'Raleway', sans-serif;
}
.container {
	margin: 0 auto;
	padding: .5em;
	font-size: 1em;
	text-align: center;
}
.section {
	border-top: .3em solid #007AA3;
	border-radius: .75em;
}
.click-button {
	position: relative;
    display: inline-block;
    padding: .5em 3em;
    font-size: 1.25em;
    text-shadow: 1px 1px 3px #000;
    color: white;
    border-radius: .15em;
    background-color: #004d67;
    -webkit-box-shadow: 0px 9px 0px #002734;
    -moz-box-shadow: 0px 9px 0px #002734;
    box-shadow: 0px 9px 0px #002734;
}
.click-button:hover {
	cursor: pointer;
	transform: scale(1.2);
}
.click-button:active {
	top: 7px;
	-webkit-box-shadow: 0px 2px 0px #002734;
        -moz-box-shadow: 0px 2px 0px #002734;
        box-shadow: 0px 2px 0px #002734;
}
a.click-button {
    color: white;
    text-decoration: none;
}
.prev-versions-button {
    margin-top: 1em;
    box-shadow: 0px 9px 0px #006623;
    background-color: #009934;
    padding: .5em 1em;
}
.prev-versions-wrapper {
    position: relative;
    margin: .75em auto;
    padding: .5em;
    min-height: 5em;
    max-width: 28em;
}
.prev-versions-section {
    height: 100%;
    display: inline-block;
    max-width: 13em;
}
.prev-versions-section.mac {
    float: right;
}
.prev-versions-section span {
    display: block;
    font-size: 1.5em;
    color: #004d67;
    font-weight: bold;
    border-bottom: 2px solid #004d67;
}
.prev-version-link {
    padding: .3em 1em;
    margin: .5em .25em;
}
.section-title {
	position: absolute;
	padding: .5em;
	top: -1.25em;
	font-size: 3em;
	background-color: #FFFFFF;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Hidden Menu *********************/
#hidden-menu {
	position: fixed;
	z-index: 999;
	height: 3.25em;
	width: 100%;
	background-color: rgba(0, 77, 103, 0.9);
	box-shadow: 0 2px 5px #000;
	opacity: 0;
}
#top {
	position: fixed;
	padding: .25em;
    left: 1em;
    top: 1em;
    text-align: center;
    color: white;
    text-shadow: .5px .5px .5px #000;
}
#top:hover {
	cursor: pointer;
	color: red;
}
#top i {
	font-size: 1em;
}
#top span {
    position: relative;
    bottom: .4em;
    font-size: .5em;
}
#hidden-logo {
	position: fixed;
    top: .25em;
    right: 1em;
    font-size: 1.25em;
    color: white;
    text-shadow: 1px 1px 3px #000;
}
#hidden-nav {
	position: fixed;
	right: 1em;
    top: 1.6em;
	color: white;
	text-shadow: 1px 1px 3px #000;
}
#hidden-nav span {
	margin: 0 .5em;
	font-size: .75em;
    padding: .25em;
}
#hidden-nav span:hover {
	cursor: pointer;
	color: red;
}
/* Welcome Section ******************/
#welcome-section {
	position: relative;
    margin-top: 2em;
}
#welcome-inner {
	position: relative;
}
#logo {
    max-width: 25em;
	padding: 2em 1em;
    border: .25em solid #343434;
    border-radius: .5em;
}
#logo h1 {
	display: inline-block;
	margin: 0;
	font-size: 2.3em;
}
#logo span {
	display: block;
	position: relative;
	color: #969696;
	font-size: 1em;
}
#logo-container {
	margin: 1em 0;
	padding: 0;
}
#buttons-container {
	margin: 2em 0;
	padding: 0;
	font-size: 0.75em;
}
#button-latest-version {
	position: absolute;
	left: 0;
	right: 0;
	top: 3.75em;
	font-size: 0.45em;
}
.button {
	position: relative;
	display: inline-block;
	border: 2px solid #969696;
	border-radius: .12em;
	box-shadow: 0 20px 15px -20px #000;
	color: #969696;
    font-size: 1.5em;
	margin: .3em;
	padding: .75em;
	width: 5em;
	height: 2em;
	line-height: 2em;
}
.button:hover {
	cursor: pointer;
	color: white;
	text-shadow: 1px 1px 3px #000;
	transform: scale(1.2);
}
.button:active {
    top: 6px;
}
@media (min-width: 768px) {
	#logo {
		padding: 6em 3em;
		border: 1em solid #343434;
		max-width: 40em;
	}
	#logo h1 {
		margin-top: -.5em;
		font-size: 5.25em;
	}
	#logo span {
		font-size: 1.5em;
	}
	#buttons-container {
		font-size: 1em;
	}
}
@media (min-width: 1200px) {
	#logo {
		padding: 8em 4em;
		max-width: 65em;
	}
	#logo h1 {
		margin-top: -.3em;
		font-size: 9em;
	}
	#logo span {
		font-size: 2.25em;
	}
	#buttons-container {
		font-size: 1.25em;
	}
}
/* About Section ************************/
#about-section {
	position: relative;
	margin: 3em auto;
}
#about-section-title {
	right: 1em;
}
.about-intro {
	text-align: center;
	font-size: 1.7em;
}
.about-intro-paragraph {
    margin-bottom: 3em;
    font-size: 1.5em;
}
.gfycat-example-wrapper {
    margin-bottom: 1em;
}
.gfycat-example {
	margin: 0 auto;
	margin-top: 3em;
	margin-bottom: .5em;
    max-width: 60em;
}
.gfycat-example-wrapper span {
    font-size: .8em;
    letter-spacing: .6px;
    font-weight: 600;
}
.about-text-wrapper {
	max-width: 60em;
    margin: 0 auto;
}
#about-text {
	position: relative;
    padding: 0;
}
#github-link {
    margin: 0 auto;
	margin-top: 1em;
    text-align: center;
}
#git-link {
	display: block;
	margin: 0 auto;
	color: #004d67;
	text-decoration: none;
	font-size: 1em;
}
#git-link:hover {
    color: rgb(126, 252, 155);
}
#git-link i {
    display: block;
    font-size: 5em;
}
.code-link {
	margin: 0 .25em;
	padding: 0;
	display: inline-block;
}
.code-link a {
	color: #004d67;
	text-decoration: none;
}
.code-link a:hover {
	color: rgb(126, 252, 155);
}
.detailed-description {
	margin: 0 auto;
	margin-top: -2em;
	color: #4a4a4a;
    font-size: 1.5em;
    max-width: 35em;
    text-align: left;
    line-height: 1.5em;
}
.description-spacer {
    margin: 2em 1em;
}
/* Media Section ***************************/
#media-section {
    position: relative;
}
#media-section-title {
    left: .75em;
}
.slideshow {
    margin: 0 auto;
    margin-bottom: 4em;
    max-width: 90em;
}
#wowslider-container1 {
    display: block;
}
.video-intro-text {
    display: block;
    margin: 1em;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    color: #007AA3;
}
.video-intro-subtext {
    display: block;
    margin-top: -1.75em;
    margin-bottom: 1em;
    text-align: center;
    font-size: 1.2em;
}
.video {
	display: inline-block;
	margin: 0 auto;
    width: 100%;
	max-width: 60em;
    border: 3px solid #007AA3;
    border-radius: .5em;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.gifs-container {
    position: relative;
}
.gif-wrapper {
    display: inline-block;
    margin: .5em;
    width: 100%;
    border: 3px solid #007AA3;
    border-radius: .5em;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
@media (min-width: 600px) {
    .gif-wrapper {
        margin: 2em auto;
        display: block;
    }
}
@media (min-width: 1000px) {
    .gif-wrapper {
        margin: .5em 1em;
        display: inline-block;
        width: 45%;
        max-width: 50em;
    }
}
.gif-wrapper iframe {
    width: 100%;
}
.more-gifs-button {
    margin: 1em;
	margin-bottom: 3em;
	padding: .5em 1em;
    box-shadow: 0px 9px 0px #006623;
    background-color: #009934;
}
/* Download Section *******************/
#download-section {
	position: relative;
	margin-bottom: 5em;
}
#download-section-title {
	right: .5em;
}
#download-info {
	position: relative;
	margin: 6em auto;
	margin-bottom: 2em;
	padding-bottom: 3em;
	max-width: 35em;
	border: .25em solid #007AA3;
	border-radius: .4em;
}
#download-info a {
	text-decoration: none;
}
#latest-version {
	font-size: 1.5em;
	top: -1.25em;
	right: 1em;
	color: #007AA3;
}
#release-notes {
	margin: 1em auto;
	margin-bottom: 0;
	width: 90%;
}
.version {
	display: inline-block;
	margin: .25em;
	font-size: 1.25em;
}
#release-notes-title {
	display: block;
	font-size: 2.2em;
	color: #007AA3;
	border-bottom: .1em solid #007AA3;
}
#release-notes-text span {
	display: block;
    margin: 1em auto;
    width: 90%;
    text-align: left;
    font-size: 1.25em;
    text-indent: -1em;
}
.download-size {
	display: block;
	margin: 0;
	font-size: 1.5em;
}
#windows-link,
#mac-link {
    margin: .5em;
}
/* Support Section ***********/
#support-section {
	position: relative;
}
#support-section-title {
	left: .5em;
}
.paypal-btn:hover {
    transform: scale(1.1);
}
.paypal-btn:active {
    position: relative;
    top: 5px;
}
.support-text {
	margin: 1em auto;
}
.support-text span {
	display: block;
	font-size: 1.25em;
}
#faq-container {
	margin: 0 auto;
	position: relative;
}
.faq {
	position: relative;
	margin: 6em auto;
	max-width: 50em;
}
.faq hr {
	width: 40%;
	height: 2px;
	background-color: black;
	border: none;
}
.faq a {
	text-decoration: none;
}
.faq img {
	display: block;
	margin: 1em auto;
	box-shadow: 0 20px 15px -20px #000;
}
.question {
	display: inline-block;
	margin: 0 auto;
    max-width: 30em;
    font-size: 1.5em;
    color: #004d67;
    font-weight: bold;
}
.answer {
	margin: .25em auto;
	line-height: 1.5em;
	font-size: 1.25em;
	text-align: left;
	max-width: 30em;
}
.answer ul li div {
    display: block;
    color: #004d67;
    font-weight: bold;
}
#borderless-link {
	display: block;
	margin: 2em auto;
	max-width: 16em;
	font-size: 1em;
	text-align: center;
}
#ip-demo {
	margin: 1em auto;
	padding: 1em;
	width: 10em;
	font-size: 1.25em;
	background-color: #c8c8c8;
}
.tutorial-image {
    z-index: 1;
    position: relative;
    max-width: 15em;
    margin-top: -.25em !important;
}
.tutorial-image:hover {
    transform: scale(3);
}