/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;*/


.chromeframe {
	position: absolute;
	top: 0;
}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/




* {
  font-family: 'Open Sans', sans-serif; 
  font-size: 13pt;
}


/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body,
select,
input,
textarea {
	color: #333;
}

a {
	color: #2b7bb9;

}

a:hover {
	color: #69f;
}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
	background: #00779E;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #00779E;
	color: #fff;
	text-shadow: none;
}

/*	j.mp/webkit-tap-highlight-color */
a:link {
	/*-webkit-tap-highlight-color: #00779E;*/
	text-decoration: underline;
}

ins {
	background-color: #00779E;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #00779E;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder {
	color: #a9a9a9;
}

textarea:-moz-placeholder {
	color: #a9a9a9;
}

tr:nth-child(even) {
	background-color: #f3f3f3;
}

.navdescription {
	padding-left: 5px;
	display: inline-block;
	/*background-color:rgba(222,244,255,.5);*/
	padding-right: 5px;
}


body {
	/*height:1500px;*/
	/*padding-top:100px;*/
}

.active {
	background-color: #00779E !important;
}

#main-nav {
	position: fixed;
	top: 0px;
	background: none;
	padding: 0px;
	height: 100%;
	display: table;
	z-index: 102;
}

#main-nav ul {
	display: table-cell;
	vertical-align: middle;
}

#main-nav ul li {
	overflow: hidden;
}

#main-nav ul li a {
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
}

#main-nav ul li a {
	width: 30px;
	height: 30px;
	background-color: #bbdced;
	color: #444;
	display: inline-block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 18px;
}

p {
	color: #282829;
	text-align: left;
	line-height: 1.6em;
}

.text2 {
	color: #505067;
	text-align: justify;
}

a.section {
	font-weight: 300;
	font-size: 40px;
	color: #01ACE6;
	clear: both;
	width: 100%;
	padding-bottom: 15px;
	/*	display:block;*/
}

section {
	display: block;
	clear: both;
	overflow: auto;
}

#logo {
	margin-top: 20px;
	padding-bottom: 15px;
}

.logoimg {
	display: block;
	position: relative;
	width: 450px;
	/*margin-left: auto !important;
	margin-right: auto !important;*/
}


#main {}

ul {
	margin-left: 20px;
	list-style: square;
}

.container {

	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*background-color:#09F;*/
	padding-left: 20px;
	padding-right: 20px;
	overflow: visible;
	position: relative;
	z-index: 100;

}

#twitterContainer {
	max-width: 700px;
}

.entry {
	width: 100%;
	overflow: hidden;
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 40px;
	/*
	background-image:url('../img/shadow2.png');
	background-position:center;
	background-size:cover;*/
}

.myimg {
	width: 700px;
	height: auto;
	float: right;
	margin-top: 0px;
}

.entry .description {
	width: 100%;
}

.entry p {
	margin-bottom: 15px;
	margin-top: 15px;
}

.entry ul li {
	line-height: 1.8em;
}

.longdescription {
	width: 100%;
}

.descriptiontext {
	width: 100%;
	line-height: 1.6em;

}

.watermark {

	position: relative;
	padding-left: 0px;
	font-size: 200px;
	font-weight: bold;
	z-index: 99;
	letter-spacing: -36px;
	line-height: 0pt;
}

.watermark .nr {
	left: 30px;
	position: absolute;
	text-align: center;
	color: #f4f4f4;
	/*line-height:1em;*/
	margin-top: 40px;
	color: rgba(132, 174, 185, .08);
}

.watermark {
	width: 100%;

}

.watermark .nr {
	max-width: 100% !important;
	overflow-x: visible;

}

.cshadow {
	-webkit-box-shadow: 4px 3px 16px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 4px 3px 16px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 4px 3px 16px 0px rgba(0, 0, 0, 0.75);

}

.bckg:nth-of-type(odd) {
	background: #f6f6f6;
}

.footer {
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	max-width: 100% !important;

}

.tablecentered th,
.tablecentered td {
	width: 20%;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	word-break: normal;
}

.alignLeft {
	text-align: left !important;
	padding-left: 8px;
}

.tablecentered img {
	margin: 2px;
	margin-right: 4px;
}



td,
th {
	padding: 0px;
}

.DownloadPortableBtn {
    color: white;
    border: 1px solid #2596cf;
    background: #2698d1;
    transition: background 0.5s ease;
    padding: 10px 25px 6px 25px;
    border-radius: 5px;
    display: inline-block;
    box-sizing: border-box;
    line-height: .62em;
    text-align: center;
    text-decoration: none !important;
	letter-spacing: 0.025rem;
	letter-spacing: 0.06rem;
    height: 62px;
    padding: 16px;
    vertical-align: middle;
	font-size: 1.2em;
	width: 180px;
}
.DownloadPortableBtn:hover {
	color: white;
	background: #279fdc;
}

.DownloadPortableBtn > small
{
	font-size: 0.62em;
	letter-spacing: 0.025rem;
}

/* Shadow */
.hvr-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
  }
  .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  }




.download {
	width: 196px;
	height: 60px;
	background: #fff;
	border-radius: 5px;
	position: relative;
	color: #000;
	cursor: pointer;
	border: 1px solid #000;
	margin: 0 auto;
  }
  
  .download > .fa {
	color: #000;
	position: absolute;
	top: 46%;
	left: 12px;
	transform: translateY(-50%);
  }
  
  .df,
  .dfn {
	position: absolute;
	left: 64px;
  }
  
  .df {
	top: 8px;
	font-size: .68em;
  }
  
  .dfn {
	top: 24px;
	font-size: 1.08em;
  }
  













/* Media queries!
-------------------------------------------------------------------------------*/
/*
@media screen and (max-width: 760px) {
	
#main {

}
#main-nav {
	width:5px;
	overflow:hidden;


}

.container {
  padding-left:20px;
  padding-right:20px;	
}	

.entry .description {
clear:both;
padding-top:10px;
}		
#main-nav ul li a {
	width:5px;
	padding-left:5px;
}
#main-nav ul li {
	overflow:hidden;
	width:5px;
}
.watermark {
	display:none;
}
.navdescription { 	display:none; }
.sharebtn {	display:none;}
.hideonmobile {display:none;}
}


@media screen and (min-width: 761px) and (max-width: 950px) {
	

.container {
	width: 740px;
}	

#main-nav ul li a {
	width:17px;
	padding-left:0px;
	font-size:13px;
	margin-bottom:2px;
}
.watermark {
	display:none;
}
.entry .description {
clear:both;
padding-top:10px;
}		

.navdescription { 	display:none; }
.sharebtn {	display:none;}
}
*/
/*
@media screen and (min-width: 800px) and (max-width: 950px) {
	
#main {
	margin-left:30px;
}
.container {
	width: 740px;
}	

#main-nav ul li a {
	width:30px;
	padding-left:0px;
}
.watermark .nr {
	left:0px;
}
.entry .description {
clear:both;

float:right;
}		
.navdescription { 	display:none; }



*/
#main-nav {
	display: none;
}


@media screen and (min-width: 750px) and (max-width: 1278px) {

	#main {
		/*margin-left:45px;*/
	}

	.container {
		width: 700px;

		margin-left: auto;
		margin-right: auto;
	}

	.entry .description {
		width: 700px;
		float: right;
	}

	.entry .description2 {
		width: 700px;
		float: right;
	}

	.longdescription {
		width: 700px;
		float: right;
	}

	.descriptiontext {
		width: 700px;
		float: right;
	}

	a.section {
		float: right;
		width: 700px;

	}

	.watermark .nr {

		padding-left: 0px;
	}

	.video-container-wrap {
		width: 700px;
		float: right;
	}

	#logo {
		
		float: right;

		width: 100%;
		overflow: visible;
		display: inline-block;
		margin-top: 20px;
		
		/*
	background-image:url('../img/shadow2.png');
	background-position:center;
	background-size:cover;*/

	}



	.versionTitleContainer {
		max-width: 700px;
	}


}

h3 {
	font-weight: 300;
	font-size: 40px;
	color: #01ACE6;
	clear: both;
	width: 100%;
	padding-bottom: 15px;
	font-size: 35px;
	display: inline-block;
	clear: none;

}


@media screen and (min-width: 1279px) {
	.descriptiontext {
		width: 700px;
		float: right;
	}

	.screenshots {
		width: 700px;
		float: right;
	}

	#main {
		/*padding-left:45px;*/
	}

	.container {
		width: 980px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.entry .description {
		width: 430px;
		float: left;
	}

	a.section {
		font-size: 35px;
		display: inline-block;
		clear: none;
		width: 230px;
		margin-left: 0px;
		overflow: visible;
	}

	.watermark {
		display: block;
		width: 50%;
	}

	.watermark .nr {

		padding-right: 50%;
	}


	.entry img {
		margin-top: 0px;
	}

	.longdescription {
		-moz-column-count: 2;
		/* Firefox */
		-webkit-column-count: 2;
		/* Safari and Chrome */
		column-count: 2;
		-moz-column-gap: 40px;
		/* Firefox */
		-webkit-column-gap: 40px;
		/* Safari and Chrome */
		column-gap: 40px;
	}

	.longdescription p {
		margin-top: 0px;
	}


	@media screen and (min-width: 1600px) {
		.navdescription {
			display: inline-block;
		}

		/*.container {
		margin-left:21%;
		margin-right:7%;
	}*/
	}
}



.video-container-wrap {
	margin-top: 20px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	clear: both;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#social {
	margin-top: 20px;
}

#coverimg {
	object-fit: cover;
	width: 100vw;
	height: auto;
}



.backerslist {
	column-count: 3;
	column-gap: 20px;
	column-rule-color: #ccc;
	column-rule-style: solid;
	column-rule-width: 1px;
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	-moz-column-rule-color: #ccc;
	-moz-column-rule-style: solid;
	-moz-column-rule-width: 1px;
	-webkit-column-rule-color: #ccc;
	-webkit-column-rule-style: solid;
	-webkit-column-rule-width: 1px;
}


@media screen and (min-width: 1024px) {
	#main-nav {
		display: table;
	}
}

.screenshotsHolder {
	width: 100%;
}

.screenshotsHolder img {
	width: 49%;
}

.screenshotsSlider {}

.bckimg {
	background-image: url('../../img/bck.jpg');
	background-position: center;
	background-size: cover;
}


.descriptionWhite p,
.descriptionWhite li {
	color: #ffffff;
}

td {
	text-align: left;
}

td:nth-child(1) {
	text-align: left;
}


.downloadBtn {
	background: #008ed6;
	width: 110px;
	height: 50px;
	margin: 2px;
	line-height: 50px;
	color: white;
	border-radius: 5px;
	text-align: center;
}

.versiontitle {
	text-align: right;
	font-size: 2em;
	font-weight: 300;
	color: #01ACE6;
	top: -20px;
	position: relative;
}

.versionTitleContainer {
	max-width: 900px;
	margin-left: auto !important;
	margin-right: auto !important;
}


details {
	/*border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;*/
	cursor: pointer;
	margin-bottom: 15px;
}

summary {
	margin-top: -.5em;
}

details[open] {
	/*padding: .5em;*/

}

details[open]>span {
	/*padding: .5em;*/
	color: #555;
	margin: 0 0 1em 1em;
	display: block;
	/*border: 1px solid #aaa;
    border-radius: 4px;    */
}

details[open] summary {
	/*border-bottom: 1px solid #aaa;
    margin-bottom: .5em;*/
}

details summary::after {
	content: " ⓘ";
	color: #00779E;
	/* you can style it however you want, use background-image for example */
}

details summary::before {
	content: "‣ ";
	color: #00779E;
	/* you can style it however you want, use background-image for example */
}


/* By using [open] we can define different styles when the disclosure widget is open */
details[open] summary::after {
	content: " ▴";
	color: #00779E
}

@media screen and (max-width: 480px) {
	.tablecentered {
		overflow-x: auto;
		display: block;
	}

	/*.container {
		margin-left:21%;
		margin-right:7%;
	}*/
}