.banner {	
  margin: 0; 
  background-image: url(data/Banner.png);
  background-size: auto 100%;
  height:200px; 
  background-position: center bottom -1px; 
  text-align: center; }

#logo {	
	height: 200px;
 }

.title { text-align: center; color: #00c6ff; font-size: x-large; padding: 15px 15px 15px 15px;   background: #FFFFFF;}
.title a:link,  a:visited, a:active { color: #8e8e8e; text-decoration:none; }
.title a:hover { color: #ff00f0; text-decoration:none; }


.youtube{


  background-image: none ;
  height:560px; 
  width:100%;
   display: flex;
   align-items: center; 
   justify-content: center;



}

.textblockB {
  padding: 40px;
  color:#ececec; 
  font-size: 1.2em;
  line-height: 1.8em;
  text-align:center;
  max-width:1060px;  }		

.header { 
  background:#FFFFFF; 
  height:30px;  
  text-align: center;}


h1 { 
  display: block;
  font-size: 2.0em;
  line-height: 0.8em;
  font-weight: bold;
  color:#ffffff; }

h2 {
  display: block;
  font-size: 1.5em;
  line-height: 0.4em;
  font-weight: bold;
  color:#ffffff; }

.textblock {
  padding: 40px;
  color:#f3f3f3; 
  font-size: 1.2em;
  line-height: 1.8em;
  text-align:center;
  max-width:1060px;  }	



#container {
    width:100%;
    text-align:center; }	

#wrapper {
  text-align:center;


 }

.screenshot{
  padding: 10px; 
}



.screenshot img{

width:90%;}


.footer {

  color:#777777; 
  font-size: 0.8em;
  text-align:center;
  width:100%;
  background:#000000; 
 }

.footer  a { color: #f2f2f2; text-decoration:none; }


		

@media only screen and (min-width: 900px) {




.banner {	
  margin: 0; 
  background-image: url(data/Banner.png);
  background-size: auto 100%;
  height:400px; 
  background-position: center bottom -1px; 
  text-align: center; }

#logo {	
	height: 400px;
 }

.header { 
  visibility:visible; 
  background:#FFFFFF; 
  height:100px;
  vertical-align: left;  
  text-align: left; }

.textblock {
  float: left;
  padding: 30px;
  color:#f3f3f3; 
  max-width:1060px; 
  color:#f3f3f3; 
  font-size: 1.2em;
  line-height: 1.8em;
  text-align:center;
  display:inline-block; }



.youtube{
  float:left;

  background-image: url(data/Smartphone.png);
  height:660px; 
  width:390px;
min-width:390px;

   display: flex;
   align-items: center; 
   justify-content: center;



}


.textblockB {
   float: left;
  padding: 30px;
  color:#ececec; 
  max-width:640px; 
  font-size: 1.2em;
  line-height: 1.8em;
  display: inline-block;
 text-align:left;
  vertical-align: middle;

   }


.screenshot{
  float: left;
  max-width:500px;
  padding: 30px; }	

.screenshot img{
 
width:100%;}

#wrapper {
  vertical-align: bottom;
  display: flex;
  justify-content: center;
  text-align:center; }	


}








<!-- 
	.navi 	{background:#272b2f; background-image: url(nav.jpg);background-repeat:repeat-x; width:270px ; height:100%; float:left; position: fixed; padding-top: 15px; text-align:center; color:white;}
	.picB	{margin-left: 270px;margin-bottom:0;}
	.pic 	{margin-left: 290px; padding-right: 20px; padding-top: 20px;}
	.png 	{margin-left: 290px; padding-right: 20px; padding-top: 20px;  image-rendering: pixelated;}
	.txt 	{margin-left: 290px; padding-right: 20px; padding-top: 5px;}
	.navi 	a:link, a:visited, a:active {color: white;text-decoration: none;font-weight:bold; font-size: 110%;}	
	.navi 	a:hover {color: white; text-decoration: underline; font-weight:bold; font-size: 110%;}
	.vid 	{width:100%; height:auto;}
	.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; height: auto;}
	.embed-container iframe {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-->