/*********** drop down menu for large screens *********************/
        h1 { 
	      font-size; 2.5;
          color: #555533;
	      padding: none;
	      font-family: times new roman,courier,arial;
   	      background: #aaaaff;
   	      text-align: center;
   	      border: .1rem solid #000000;
        }
		h2 { 
  	  	  font-size: 1.5rem;
      	  color: #777777;
	      padding: 0;
	      font-family: times new roman,courier,arial;
	      text-align: center;
	      background: #eeeeff;
	      border: .1rem solid #000000;
        }
        h3 { 
  	  	  font-size: 1.3rem;
      	  color: #777777;
	      padding: 0;
	      font-family: 'Oswald',sans-serif,times new roman,courier,arial;
	      text-align: center;
	      background: #eeeeff;
	      border: .1rem solid #000000:
        }
ul#menu1 {
	font-family: times new roman,courier,arial;   /* align text here */
    background: #eeeeff;
    text-align: center;    
    font-size: 150%;
}
ul li {
	/*border: .1rem solid #ffffff; */
    display: inline-block;    
    position: relative;
} 
ul li ul {
   display: none; 
}
ul li a {
	display: block; 
	text-decoration: none;
  /*  color: #555533; */
    color: #000000;
    white-space: nowrap; 
    width:7rem;    /* width of top horizontal menu */
}
ul li a:hover {
}
li:hover ul {
	
    display: block;
    position: absolute;
    width: 113%      /* width of box on hover of top horizontal menu */
}

li:hover li {
    	
	float: none;
    font-size: 100%;
    width: 113%;  /** width of containing block on pulldown **/ 
    background: #eeeeff;
    text-align: left;
    border: .1rem solid #000000;
    
}
li:hover li a:hover {
    background: yellow;  
    width: 100%;                /* width of items on hover with yellow background */
    font-size: 100%;
   
}


img {
 
} 

div#images {
  height:auto;	
  width: 850px; 
  position: absolute;
  height: auto;
  width: auto; 
  border: .1rem solid blue;
  margin: 125px 0 0 800px; 
  text-align: center;
 
 
}

div#images2 {
  height:auto;	
  width: 1000px; 
  position: relative;
  border: .1rem solid blue;
  margin-top: 8rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
 
 
}



div#duonysample {
	 text-decoration: none;
     font-size: 1.5rem;
     border: .1rem solid #0000ff;
     border-radius: 1rem;
     height: 2rem;
     width: 15rem;
     margin: 3px auto 0 auto;
     border-bottom: none;
     background: #eeeeff;
}     
div#prod-key {
   position: relative;	
   font-size: 1.2rem;
   width: 10rem;
   height: auto;
   margin-left: auto;
   margin-right: 34%;
   text-align: center;
   border: .1rem solid #0000ff;
   border-radius: 1rem;
   background: yellow;
}
div#prod-key2 {
   position: relative;	
   font-size: 1.2rem;
   width: 10rem;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   border: .1rem solid #0000ff;
   border-radius: 1rem;
   background: yellow;
}           
           
div#index-message1 {
	position: relative;
	font-size: 1.5rem;
	text-align: left;
	padding-top: 2rem;
	padding-left: 3rem;
	margin: 150px 0 0 300px;
	width: 18rem;
	height: 45rem;
    background: #eeeeff;
/*	border: .1rem solid #000000;  */
}	
div#visitor-counter {
   margin-top: 10%;
   margin-left: 46%;
   margin-right: auto;
   font-size: .6rem; 
}		
div#menu-bar {
	  margin: 0 auto 0 auto;
	  text-align: center;
}


#footer {
  font-size; 1rem;
  font-family: times new roman,courier,arial;
  text-align: center;	
  color: #555533;	
}
	
a {
      text-decoration: none;     
}		  
div#item-list { 
	  position: relative;
      margin-top: 5rem;
      font-family: times new roman,courier,arial;       
	  font-size: 120%;
	  color: #000000;	
	  text-align: center; 
}
div#volinfo {
	  border: .1rem solid blue;
	  border-radius: 1rem;
      position: relative;
      margin-top: 2rem;
      font-family: times new roman,courier,arial;       
	  font-size: 120%;
	  color: #000000;
	  margin-left: auto;
	  margin-right: auto;
	  width: 50%;
	  height: 50%;
	  text-align: center;
}	
div#volsample {
	  position: relative;
      text-align: center; 
}      	
div#download-box {
	  margin-left: auto;
	  margin-right: auto;
	  margin-bottom: 3rem;
	  width: 75%;
	  height: 30%;
	  border: 1px solid #0000ff;
	  font-size: 2rem;	
	  text-align: center;
}	
div#line-divider {
	text-decoration-line: underline;
	color: blue;
	background: #eeeeff;
	border: 1px solid #0000ff;
	font-weight: bold;
}	
div#validation { 
	  position: relative;
      margin-top: 5rem ;
      margin-right: auto;
      margin-left: auto;
      width: 25rem;
      height: 15rem;
      border: 1px solid #0000ff;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center; 
}

div#contact { 
	  position: relative;
      margin-top: 5rem;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center; 
}
div#quiz-list { 
	  position: relative;
      height: 20rem;
      width: 20rem;
      padding-top: 3rem;
      border: 1px solid #000000;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center;
	  margin: 10rem auto auto auto; 
}
div#quiz-container {
	  position: relative;
      height: 100%;
      width: 100%;
      margin-top: 10rem;
      padding-top: .2rem;
      border: 1px solid #000000;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center;
	  
}	
div#review-container {
	  position: relative;
      height: 90%;
      width: 90%;
      margin: 5rem auto 0 auto;
      padding-top: 2rem;
      border: .2rem solid #000000;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	
}	

div#photos-container {
	  position: relative;
	  height: 2000px;
      width: 1000px;
      margin-top: 200px;
      margin: 0 auto;
      font-family: times new roman,courier,arial;       
	  font-size: 100%;
	  color: #000000;	
	  padding: 1px;
	  border: 1px solid #999;
	  background: #ffffff;  
	  text-align: center; 
}	
div#pic1 { 
	  position: relative;
	  height: 210px;
      width: 475px;
      margin-top: 150px;
      margin-left: 10%;
      font-weight: bold;
      font-family: arial;
	  font-size: .5;
	  color: #000000;	
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 	 
 div#pic2 { 
	  position: relative;
	  height: 475px;
      width: 225px;
      margin-top: -200px;
      margin-left: 70%;
      font-weight: bold;
	  font-family: arial;
	  font-size: .5;
	  color: #000000;
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 	 
 
 div#pic3 { 
	  position: relative;
	  height: 375px;
      width: 200px;
      margin-top: -80px;
      margin-left: 10%;
      font-weight: bold;
	  font-family: arial;
	  font-size: .5;
	  color: #000000;
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 	 

 div#pic4 { 
	  position: relative;
	  height: 735px;
      width: 225px;
      margin-top: -290px;
      margin-left: 72%;
      font-weight: bold;
	  font-family: arial;
	  font-size: 9;
	  color: #000000;
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 	   
  div#pic5 { 
	  position: relative;
	  height: 650px;
      width: 300px;
      margin-top: -400px;
      margin-left: 10%;
      font-weight: bold;
	  font-family: arial;
	  font-size: 9;
	  color: #000000;	
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 
  div#pic6 { 
	  position: relative;
	  height: 775px;
      width: 225px;
      margin-top: -600px;
      margin-left: 46%;
      font-weight: bold;
	  font-family: arial;
	  font-size: 9;
	  color: #000000;	
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 } 
  div#pic7 { 
	  position: relative;
	  height: 385px;
      width: 225px;
      margin-top: -1280px;
      margin-left: 41%;
      font-weight: bold;
	  font-family: arial;
	  font-size: 9;
	  color: #000000;	
	  padding: 5px;
	  border: 5px solid #999;
	  background: add8e6; 
 }


.collapsible-menu {
  display: none;	
  padding: 0px 30px;
  border-bottom: 1px solid #CDE700;
  box-shadow: 1px 2px 3px;
}

.collapsible-menu ul {
  list-style-type: none;
  padding: 0;
}

.collapsible-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
}

.collapsible-menu label {
    font-family: 'Sedgwick Ave Display',times new roman,courier,arial;
    font-size: 40px;
    display: block;
    cursor: pointer;
    background: url(menu.png) no-repeat left center;
    padding: 10px 0 10px 50px;
}

.menu-content {
    max-height: 0
    overflow: hidden;
    font-family: 'Oswald', sans-serif; 
    padding: 0 0 0 50px;
}

/************   MEDIA BREAKPOINT  1023px or less ************/

   @media screen and (max-width: 1101px) {
       
       
 img {
     width: 35%;
     height: auto;
     
 }
div#images {
  display: block;	
  height:auto;	
  width: auto; 
  position: relative;
  border: .1rem solid blue;
  margin: 0 auto 0 auto;
   
}

div#index-message1 {
	position: relative;
	font-size: 1.5rem;
	text-align: left;
	margin-left: auto;
	margin-right: auto;  
	width: 12rem;
	height: 50rem;
    background: #eeeeff;
  
    /*	border: .1rem solid #000000;  */
}	

 div#item-list { 
	  position: relative;
      margin-top: 1rem;
      font-family: times new roman,courier,arial;       
	  font-size: 120%;
	  color: #000000;	
	  text-align: center; 
	  height: 100%;
      width: 100%;
}
div#volinfo {
	  border: .1rem solid blue;
      position: relative;
      margin-top: 2rem;
      font-family: times new roman,courier,arial;       
	  font-size: 120%;
	  color: #000000;
	  margin-left: auto;
	  margin-right: auto;
	  width: 100%;
	  height: 100%;
	  text-align: center;
}	
div#volsample {
	  position: relative;
      text-align: center; 
} 
div#download-box {
	  margin-left: auto;
	  margin-right: auto;
	  width: 100%;
	  height: 30%;
	  border: 1px solid #0000ff;
	  text-align: center;
      font-size: 2rem;	
}	
div#line-divider {
	text-decoration-line: underline;
	border: 1px solid #0000ff;
}
div#validation { 
	  position: relative;
      margin-top: 5rem ;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
      height: 100%;
      border: 1px solid #0000ff;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center; 
}


div#quiz-container {
	  position: relative;
      height: 100%;
      width: 100%;
      margin-top: 1rem;
      padding-top: 2rem;
      border: 1px solid #000000;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  text-align: center;
	  
}	
div#review-container {
	  position: relative;
      height: 90%;
      width: 90%;
      margin-top: 1rem;
      padding-top: 2rem;
      border: 1px solid #000000;
      background: #eeeeff;
      font-family: times new roman,courier,arial;       
	  font-size: 175%;
	  color: #000000;	
	  
	  
}	
    ul#menu1 {
   	
    display: none; 
 }    
/*.menu-content {
  font-family: 'Oswald', sans-serif;
  padding: 0 0 50px;
}*/



.collapsible-menu {
  display: block;	
  padding: 0px 10px 30px 0; 
  border-bottom: 1px solid #CDE700;
  box-shadow: 1px 2px 3px;
}


.collapsible-menu ul {
  list-style-type: none;
  padding: 0;
}

.collapsible-menu a {
  display: block;
  padding: 0px;
  text-decoration: none;
  font-size: 1.5rem;
}

.collapsible-menu label {
    font-family: 'Sedgwick Ave Display', cursive;
    font-size: 1.5rem;
    display: block;
    text-align: center;
    cursor: pointer;
    background: url(menu.png) no-repeat left center;
    padding: 0px 0 10px 10px;
   
}
.menu-content {
    max-height: 0;
    overflow: hidden;
    font-family: 'Oswald', sans-serif; 
    text-align: center;
   padding: 0 0 0 50px; 
}
/*
input {
  display: none;
}

input:checked {
  display: none;
}
*/

input:checked ~ label {
    background-image: url(close.png);
}
input:checked ~ .menu-content {
    max-height: 100%;
}

   
   a {
       text-decoration: none;
   }        
       
}  
   
*/