body {
    	background-color: #fff;
        padding: 0;
    	margin: 0;
    	width: 99.5%;
    	min-height: 768px;
    	overflow: hidden;
   		border: 0px solid blue;
   		font-size: 19px;
   		font-family: 'Della Respira', serif;
   		border:0px solid black;
    	}
    
    
    
    section  {
    	display: block;
    	min-width: 10%;
    	max-width: 70%;
    	min-height: 10%;
    	border: 0px solid black;
        font-size: 1em;
        padding: 1%;
        margin: 5% auto;
        line-height: 1.2;
        border: 0px solid black;
    	}
    	
   .center  {
		display: block;
		width: 75%;
		height: 85%;
    	margin: 15% auto;
    	padding: 0%;
    	z-index: 1;
    	border: 0px solid green;
    } 
    	
    .center section  {
    	min-width: 10%;
    	max-width: 70%;
    	min-height: 20%;
        padding: .5%;
        margin: 5% auto;
        line-height: 1.1;
        border: 0px solid green;
    	}
    	
    .center:first-line  {
    	font-size: 1.4em;
    	font-weight: normal;
    	}
    	
    	
    .column  {
    	display: block;
    	margin-top: 3%;
    	width: 100%;
    	border: 0px solid green;
    	overflow: hidden;
    }
    

    .clear {
    	clear: both;
    	}
    

     #message   {
       	display: none;
       	}
    	

    	
    .style1  {
        position: relative;
    	left: -30px;
    	top: 10px;
    	font-size: .9em;
    	line-height: 1.2;
    	text-align: center;
    	font-weight: normal;
    	font-style: none;
    	font-variant: none;
    	}
    
    
    .style2   {
        position: relative;
    	left: 30px;
    	top: 10px;
    	font-size: 1.0em;
    	line-height: 1.5;
    	text-align: right;
    	font-weight: bold;
    	font-style: none;
    	font-variant: none;
    	
    	}
    
    .style3   {
   		position: relative;
    	left: -20px;
    	top: 0px;
    	font-size: 1.1em;
    	line-height: 1.2;
    	text-align: center;
    	font-weight: lighter;
    	font-style: italic;
    	font-variant: uppercase;
    	
    	}
    
    .style4  {
    	position: relative;
    	left: 20px;
    	top: 12px;
    	font-size: .9em;
    	line-height: 1.2;
    	text-align: left;
    	font-weight: normal;
    	font-style: normal;
    	font-variant: none;
    
    	}
    	
    .style5  {
    	position: relative;
    	left: -60px;
    	top: -15px;
    	font-size: .8em;
    	line-height: 1.6;
    	text-align: right;
    	font-weight: normal;
    	font-style: normal;
    	font-variant: none;
    	
    	}
    	
    
    .style6   {
    	position: relative;
    	left: -60px;
    	top: -10px;
    	font-size: 1.1em;
    	line-height: 1.2;
    	text-align: left;
    	font-weight: normal;
    	font-style: normal;
    	font-variant: none;
    	  margin-top: 10%;
    	margin-right: 10%;
    	}
    
    .style7   {
    	position: relative;
    	left: 60px;
    	top: 12px;
    	font-size: 1.0em;
    	line-height: 1.6;
    	text-align: center;
    	font-weight: bold;
    	font-style: normal;
    	font-variant: none;
    	 
    	}
    
    .style8  {
    	position: relative;
    	left: -40px;
    	top: 20px;
    	font-size: 1.2em;
    	line-height: 1.3;
    	text-align: right;
    	font-weight: lighter;
    	font-variant: uppercase;
    	font-style: normal;
    
    	}
    	
    .style9  {
    	position: relative;
    	left: 50px;
    	top: -20px;
    	font-size: .9em;
    	line-height: 1.4;
    	text-align: left;
    	font-weight: lighter;
    	font-style: normal;
    	font-variant: none;

    	}
    	
    .style10  {
    	position: relative;
    	left: 0px;
    	top: 0px;
    	font-size: 1.5em;
    	line-height: 1.5;
    	text-align: center;
 		font-variant: none;
    	font-weight: bold;
    	font-style: none;

    	}
    	
    .style11  {
   		position: relative;
    	left: -60px;
    	top: -5px;
    	font-size: 1em;
    	line-height: 1.4;
    	text-align: left;
    	font-weight: lighter;
    	font-style: normal;
    	font-variant: none;

    	}
    	
    .style12  {
    	font-size: .9em;
    	line-height: 1.4;
    	text-align: right;
 		font-variant: smallcaps;
    	font-weight: bold;
    	font-style: italic;
    	}
    	
   img {
   		width: 100%;
   		}
   		
   	.stringtext {
   		font-size: 9px; 
   	}
  
   .hidden  {
    	display: none;
    	}
    	
    #open  {
     	position: fixed;
     	top: 0;
     	left: 0;
    	display: block;
    	width: 100%;
    	height: 100%;
    	z-index: 99;
    	background: white;
       }
    	
        
    #start {
    	width:45%;
    	background-size: 100%;
    	border: 2px solid black;
    	margin: 5% auto 2% auto;
    	-webkit-border-radius: 30px 30px 30px 30px;
		border-radius: 30px 30px 30px 30px;
		overflow: hidden;
    	}
    	
    #start img {
    	width: 100%;
    	display: block;
    	margin: 0 auto;
    	border: 0px solid red;
    	}
    	
    #author {
    	font-family: 'Della Respira', serif;
    	font-size:22px;
    	width: 85%;
    	text-align: center;
    	margin: 12% auto 0% auto;
    	}
    	
    .instructions {
    	font-family: 'Della Respira', serif;
    	font-size:12px;
    	width: 95%;
    	text-align: center;
    	margin: 5% auto;
    	}
    	
    .about {
    	font-family: 'Della Respira', serif;
    	font-size:13px;
    	width: 85%;
    	text-align: center;
    	margin: 2% auto;
    	}
    	
    	
    /* small tablet styles */
    @media only screen and (min-width: 600px) and (max-width: 960px) {
        
        
    body {
   		font-size: 19px;
    	}
  
    #start {
    	width:25%;
    	background-size: 100%;
    	border: 2px solid black;
    	margin: 10% auto 2% auto;
    	-webkit-border-radius: 30px 30px 30px 30px;
		border-radius: 30px 30px 30px 30px;
		overflow: hidden;
    	}
    	
   	 #author {
    	width: 80%;
    	margin: 6% auto 2% auto;
    	}
    	
    .instructions {
    	width: 80%;
    	font-size:14px;
    	margin: 2% auto;
    	}
    	
    .about {
    	width: 80%;
    	margin: 2% auto;
    	}
   	
    
    }
    	
    
    /* tablet styles */
    @media only screen and (min-width: 961px) and (max-width: 1024px) {
    
    body {
   		font-size: 22px;
    	}
    
   .center section  {
    	min-width: 10%;
    	max-width: 70%;
    	min-height: 20%;
        padding: 1%;
        margin: 3.5% auto;
        line-height: 1.1;
    	}
    	
    section  {
        font-size: 1.8em;
        margin: 3.5% auto;
        line-height: 1.3;
    	}
    	
    .stringtext {
   		font-size: 12px;
   	}
   	

    	
    #start {
    	width:30%;
    	background-size: 100%;
    	border: 2px solid black;
    	margin: 10% auto 2% auto;
    	-webkit-border-radius: 40px 40px 40px 40px;
		border-radius: 40px 40px 40px 40px;
		overflow: hidden;
    	}
    	
    #author {
    	width: 35%;
    	margin: 4% auto 0% auto;
    	}
    	
    .instructions {
    	width: 55%;
    	font-size:14px;
    	margin: 2% auto;
    	}
    	
    .about {
    	width: 35%;
    	margin: 2% auto;
    	}
   	
   	
   
   } 
    
    
   /* desktop styles */
	@media only screen and (min-width: 1025px) {
    
   body {
   		font-size: 26px;
    	}
   		
	.center section  {
    	min-width: 10%;
    	max-width: 70%;
    	min-height: 20%;
        padding: 1%;
        margin: 3.5% auto;
        line-height: 1.1;
    	}
    	
    section  {
        font-size: 2.5em;
        padding: 1%;
        margin: 3.5% auto;
        line-height: 1.3;
    	}
    	
    .stringtext {
   		font-size: 14px;
   	}
   	
    	
    #start {
    	width:30%;
    	background-size: 100%;
    	border: 2px solid black;
    	margin: 6% auto 2% auto;
    	-webkit-border-radius: 50px 50px 50px 50px;
		border-radius: 50px 50px 50px 50px;
		overflow: hidden;
    	}
    	
     #author {
    	width: 35%;
    	margin: 4% auto 0% auto;
    	}
    	
    .instructions {
    	width: 55%;
    	margin: 2% auto;
    	}
    	
    .about {
    	width: 35%;
    	margin: 2% auto 0% auto;
    	}
   	
   	
   	
  
    }