* {
  margin: 0;
  padding: 0;

  font-family: Verdana,Helvetica,Arial,Palatino,sans-serif;
 
  

}

a, img {
    border:none;
}

.page {
margin: 20px 10px 20px 10px;
position:relative;
display: block;
}


.header {

margin-right:10px;
margin-bottom:20px;
position:relative;
left:2px;
}

.header h1 {
  font-size: 50px;
  font-weight: normal;

  letter-spacing: -1px;
}

.header img {
	
	padding: 10px;
	width: 400px;
}

.header img:hover {
	background: #f0f0f0;
}

body {
  background: #fff;
  font-size: 16px;
  position:relative;
  max-width: 960px;
  color: #333;
  font-weight: 400;
  margin: 0px auto 0px auto;
  
}

body img {
 -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	max-width:100%;
	height: auto;
	}


a {
  text-decoration: underline;
}

a:link,
a:visited {
  color: #f30;
}

a:hover {
  color: #f90;
}

.main {
  	position: relative;
	display:block;
	clear:both;
	margin-top: 20px;
	margin-bottom: 20px;

  
}

.win.chrome .page {
 /* A little Stroke width is added to avoid the ghastly font rendering in Chrome (Win).
  But this makes the text on safari and chrome(Mac) look slightly thicker, so we apply this hack only for Windows Chrome*/
  -webkit-text-stroke-width: 0.4px;
  }


.main h1 {
  font-size: 50px;
 font-weight: 100;
  margin-top: 0px;
  margin-bottom: 10px;

font-family: Helvetica,Arial,sans-serif;

  letter-spacing: -1px;
}

.main h2 {
	font-size: 1.5em;
	font-family:Helvetica, Arial,sans-serif;
	font-weight:normal;
}

.main p {
  

  
  color: #666;

  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.main ul, .main ol {
  margin: 20px;
}

.main li {
  

  line-height: 20px;
}

.main ul li {
  
}

.main a {
	color: #18B0DE;
	text-decoration: underline;
	}

.sidebar {
  position: relative;
 
  display:block;
  padding: 0px 0px 0 0;
  text-align: left;
  clear:both;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding-bottom: 5px;
  padding-top: 5px;
  
  
}

.sidebar h2 {
  

  font-size: 13px;

  color: #333;

  letter-spacing: 1px;

  line-height: 20px;
  
  
}

.sidebar a {
font-size:12px;
margin-right: 5%;
letter-spacing: 1px;
/* To avoid the text from breaking http://stackoverflow.com/questions/572298/css-how-to-stop-text-from-taking-up-more-than-1-line */
white-space: nowrap;
  overflow: hidden; 
  text-decoration: none;
  text-transform: uppercase;
  font-family: Helvetica,Arial,Palatino,sans-serif;
  font-weight: 400;
}

.sidebar a:hover {
	color: #18B0DE;
}

.sidebar ul {
  list-style-type: none;

  
}

.sidebar li {
  font-size: 14px;

  line-height: 20px;
}

.bio {

margin-top: 25px;
max-width: 80%;

}

.bio a {
	text-decoration: underline;
	color: #18B0DE;
}

.bio a:hover {
  color: #89E0FA;
}
	

.bio img {
-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	}
	
.bio em {
	font-family: Verdana,Helvetica,Arial,Palatino,sans-serif;
	font-weight: 300;
}
	
.footer {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size:1em;
	border-top: 2px dashed #ddd;
	}

.footer a {
	color: #18B0DE;
	text-decoration: underline;
	}
	
.footer p {
	margin-top: 10px;
	margin-bottom: 10px;
}


.thumb {
	color: #333;
	margin-top: 10px;
	
	
	}
	
.thumb a,.thumb a:link,.thumb a:hover,.thumb a:visited,.thumb a:hover {
	color: #333;
	text-decoration: none;
	}
	


.thumb img {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}


 
.thumb ul {
  list-style-type: none;
  max-width: 600px;
  padding: 0px;
	margin: 0px;
}
 
.thumb h3 {
font-weight: 500;
margin-top: 5px;
display: block;
  
}
 
.thumb li img {
  float: left;
  margin: 0 15px 15px 0;
}
 
.thumb li p {
  
  font-weight: 400;
  margin-right: 20px;
  
  
  
}
 
.thumb li {
list-style-type: none;
  overflow: auto;
  margin-bottom: 10px;
  border-bottom: 1px dotted #ddd;

}
 
.thumb li:hover {
  background: #eee;
  cursor: pointer;
  -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
}

.post {


margin-bottom: 30px;
padding-bottom: 10px;

}

.post h2 {
	
	font-size:2em;
	font-weight:300;
	margin-bottom: 5px;
	
}

.post h2 a, .post h2 a:link {
	color: #18B0DE;
	text-decoration: none;
}

.post a {
	color: #18B0DE;
	text-decoration: underline;
}

.post a:hover {
	color: #89E0FA;
	text-decoration: underline;
}

.post aside {
	font-size: 0.75em;
	display: block;
	font-style: oblique;
	text-align: left;
	}
	
.post blockquote {
	border-left:1px solid #ddd;
	margin:1.5em 10px;
	padding:.5em 10px;
	font-size:0.8em;
	}
	
.post article {
	margin-top:30px;
	margin-bottom: 20px;
	}
	

	
.product {
max-width: 100%;

}

.banner {
display: inline-block;
border-bottom: 1px dotted #ddd;
margin-top: 10px;
margin-bottom: 10px;

}

.banner img{
	float:left;
	
  margin: 0 15px 15px 0;
}

.banner p {
display:inline;
font-size: 12px;

}



.button{
text-decoration: none !important;
background: #18B0DE;
text-transform: uppercase;
color: #fff !important;
cursor: pointer;
margin-bottom: 5px;
margin-top: 5px;


}

.plain-button{
text-decoration: none !important;
color: black !important;
cursor: pointer;
margin-bottom: 5px;
margin-top: 5px;

}




.large-button {
	font-size: 130%;
}

.center-align {
	text-align: center !important;
	}

.button p {
padding: 5px;
text-align: center;
}

.button-download {
text-decoration: none !important;
text-transform: uppercase;
 color: black !important;
 background: rgb(255, 204, 102) !important;
 cursor: pointer;
margin-bottom: 5px;
margin-top: 5px;
}

.button-download-installer {
text-transform: none; !important;
}

.button-subscribe {
text-decoration: none !important;
text-transform: uppercase;
 color: black !important;
 background: rgb(255, 204, 102) !important;
 cursor: pointer;
margin-bottom: 5px;
margin-top: 5px;
font-size: 80%;
}

.button-download-subscribe {
text-decoration: none !important;

 color: black !important;
 background: rgb(0, 204, 100) !important;
 cursor: pointer;
margin-bottom: 5px;
margin-top: 5px;
font-size: 100%;
}


.product img{
-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.product video{
-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}


.product blockquote {
	border-left:1px solid #ddd;
	margin:1.5em 10px;
	padding:.5em 10px;
	font-size:1em;
	}
	
.product ul {
  list-style-type: none;
  padding: 0px;
	margin: 0px;
	
}
 
.product li h3 {
font-weight: 500;
margin-top: 5px;
display: block;
font-size: 20px;
margin-bottom: 5px;
  
}
 
.product li img {
  float: left;
  width:75px;
  height:75px;
  margin: 0 5px 5px 0;
}


 
.product li p {
  
  font-weight: 400;
  margin-right: 20px;
  font-size: 15px;
  margin-top: 0px;
  
  
  
}
 
.product li {
list-style-type: none;
  overflow: auto;
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px dotted #ddd;
  display:inline-block;
  width: 49%;
  vertical-align:top;

}

.product h4 {
font-weight: 300;
margin-top: 10px;
font-size: 15px;
margin-bottom: 10px;

}

.product h3 {
font-weight: 300;
margin-top: 10px;
font-size: 20px;
margin-bottom: 10px;

}


 

	
.vimeo {
margin-top:20px;
margin-bottom: 30px;
padding-bottom: 10px;

}

.vimeo ul {
	display:block;
	padding: 0px;
	margin: 0px;
	}

.vimeo li {
list-style-type: none;
display:inline-block;
max-width:200px;
margin: 0px 20px 20px 0px;
vertical-align:top;
}

.vimeo li a {
	text-decoration:none;
	}

.vimeo img {
	width: 200px;
	height: 150px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

.vimeo desc
  {
  text-align:center;
  font-weight:normal;
  
  
  }
  
  .vimeo h2 {
      margin-top: 10px;
      margin-bottom: 10px; 

  }
  
.pure-menu-horizontal  {
		
  white-space: normal;      
  
}  

.pure-menu-horizontal ul {
		
        
  		text-transform: uppercase;
  		background: #f1f1f1;
  		-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	 
}  
.pure-menu-horizontal ul a {
		
		font-family: Verdana,Helvetica,Arial,sans-serif;
		-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-o-transition:.25s;
  -ms-transition:.25s;
  -moz-transition:.25s;
  -webkit-transition:.25s;
  /* ...and now for the proper property */
  transition:.25s;
  color: #333;
        
}

.pure-menu-horizontal ul a:hover  {
		
		background: #18B0DE;
		color: #fff;
}

.support {
 margin-top: 10px;
 margin-bottom: 10px;
}

.support h2 {
 margin-top: 10px;
 margin-bottom: 10px; 
}

.downloadbox {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
position: relative;
/*float: left;*/
clear: both;
margin: 1em 10% 2em 0;
padding: 10px;
width: 90%;
border: solid 1px #ccc;

}

.downloadbox p {
font-size: 80%;
}

.siema img {
    max-height: 450px;
}

.sqgrid {
margin-top:20px;
margin-bottom: 30px;
padding-bottom: 10px;

}

.sqgrid video {
	width: 100%;
	height: 100%;
	border-radius: 10px;
    object-fit: cover;
}

.sqgrid ul {
	display:block;
	padding: 0px;
	margin: 0px;
	}

.sqgrid li {
list-style-type: none;
display:inline-block;
max-width:240px;
margin: 0px 20px 20px 0px;
vertical-align:top;
}


.grid3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}

.grid2 {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(20rem, 1fr) );
grid-gap: 4rem;
}

.proditem video {
    float:left;
    display:block;
    height:150px;
    width:150px;
    margin-right:20px;
}

.smallitem img {
    float:left;
    display:block;
    height:150px;
    width:150px;
    margin-right:20px;
    margin-bottom:20px;
}

.smallitem {
    
    
    max-width:500px;
    margin-top:20px;
    margin-bottom:20px;
    
}

.smallitem p{
    
    
   
    padding:25px;
    
    
}