/* fonts start */
   @font-face { font-family: font1; src: url('fonts/OpenSansBold.woff'); } 
	@font-face { font-family: font2; src: url('fonts/OpenSans-Light.woff'); } 
	@font-face { font-family: font3; src: url('fonts/OpenSansRegular.woff'); } 
	
/* fonts end */	
* {box-sizing: border-box;}
* {box-sizing: border-box;}

.wrapper {
    border: 2px grey;
    border-radius: 1px;
     color: black;
	maxheight:100%;
}

.wrapper > div {
    border: 2px white;
    border-radius: 1px;   
    
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0px; 
  grid-template-rows: auto;
  grid-template-areas: 
"a a a a a a a a a a a a"
"b b b b b b b b b b b b"
"c c c c c c c c c c c c"
"d d d e e e f f f g g g"
"v v v v w w w w x x x x"
"y y y y y y y y y y y y"; 
}
@media only screen and (max-width:650px) {
.wrapper {
    display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0px; 
  grid-template-rows: auto;
  grid-template-areas: 
     "a a a a a a a a a a a a"
     "b b b b b b b b b b b b"
     "c c c c c c c c c c c c"
     "d d d d d d d d d d d d"
     "e e e e e e e e e e e e"
     "f f f f f f f f f f f f"
     "g g g g g g g g g g g g"
  "v v v v v v v v v v v v"
"w w w w w w w w w w w w"
"x x x x x x x x x x x x"
"y y y y y y y y y y y y"

}
}

img {
  max-width: 100%;
  height: auto;
}

/* Style the top navigation bar */
 -->
.item1 {
  grid-area: a;
 position: sticky;
  top: 0; }

.topnav {
  overflow: hidden;  background-color: rgb(58,74,97); 
}

/* Style the topnav links */
.topnav {
  overflow: hidden;
  background-color: rgb(58,74,97);
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 1px 14px;
  text-decoration: none;
font-family:font2;
  font-size: 15px;
}

.topnav a:hover {
  background-color: GoldenRod;
  color: black;
}

.topnav a.active {
  background-color: rgb(58,74,97);
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 750px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 750px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;font-size:20px;  padding: 5px 14px;
  }
}
/* end nav bar */


.item2 {
  grid-area: b; 
text-align:center;
background-color:blue;}
.H1 {  
font-family:font2; text-align:center; color:white;font-size:350%; line-height:170%; text-decoration:none; padding: 1% 0% 0% 0%;}

@media (max-width: 750px) {
 .bkmainhead {
 float:none; display: block;  color: white;  text-align: center;font-size:22px;  padding: 1px 14px;
} }


.item3 {
 grid-area: c;  
text-align:center;
background-color:rgb(0,0,128);}

.item4 {
  grid-area: d;
text-align:center;
background-color:white;
padding:10%;
}


.item5 {
  grid-area: e;
text-align:center;
background-color:white;
padding:10%;
      }

.item6 {
  grid-area: f;
text-align:center;
background-color:white;
padding:10%;
}

.item7 {
  grid-area: g;
text-align:center;
background-color:white;
padding:10%;
}

.H3 {font-family:font2; text-align:center; color:gray;font-size:120%; line-height:180%; text-decoration:none; padding: 2% 2% 2% 2%;}

.gallp1 {font-family:font2; font-size:90%;text-align:left;line-height:180%;} 

.H2 {
font-family:font2; text-align:center; color:white;font-size:200%; line-height:170%; text-decoration:none; padding: 1% 0% 0% 0%;}

.bkp1 {font-family:font2; text-align:center; color:white;font-size:100%; line-height:130%; text-decoration:none; padding: 2% 0% 2% 0%;}



.stationery {font-family:font2; text-align:center; color:rgb(187,183,48);font-size:500%; line-height:170%; text-decoration:none; padding: 2% 0% 2% 0%;}

.letterheads {
font-family:font2; text-align:center; color:rgb(187,183,48);font-size:200%; line-height:170%; text-decoration:none; padding: 1% 0% 0% 0%;}

.headcolstat {
font-family:font2; text-align:center; color:rgb(10,10,10);font-size:300%; line-height:170%; text-decoration:none; padding: 2% 0% 2% 0%;}


.letterheadstext{
font-family:font2; color:black; background-color:white; text-align:center; font-size:120%; line-height:170%; text-decoration:none; padding: 2% 15% 2% 15%;
}
.compsliphead {
font-family:font2; color:rgb(187,183,48); background-color:white; text-align:left; font-size:150%; line-height:150%; text-decoration:none; padding: 2% 5% 2% 1%;
}

.notepadshead {
font-family:font2; color:white; background-color:rgb(187,183,48); text-align:center; font-size:120%; line-height:170%; text-decoration:none; padding: 2% 2% 2% 2%;
}
.vertical {
font-family:font2; text-align:center; color:rgb(255,255,255);font-size:500%; line-height:170%; text-decoration:none; padding: 2% 0% 2% 0%;}

.cdimgsizelhead {display: block;	background-color:rgb(255,255,255);  margin-left: auto;  margin-right: auto;max-width:80%;}
.cdimgsizecomps {display: block;  margin-left: auto;  margin-right: 3%;max-width:30%;}

.cdimgsizepads { display: block;float:left; padding: 2% 2% 0% 2%;max-width:60%;}



/* START FOOTER LAYOUT */
.bottstrip {
font-family:font2; color:white; background-color:grey; text-align:left; font-size:100%; line-height:150%; text-decoration:none; padding: 3% 0 3% 25%;
}
.textfooter {
font-family:font2; color:white; background-color:black; text-align:left; font-size:100%; line-height:200%; text-decoration:none; padding: 5% 0 4% 25%;}

.vanlogo {
display: block;
float:right;margin:0% 10% 0% 0%;
max-width:15%; padding:0% 0% 1% 0%;
background-color:light grey;}

.creditcards {  
display: block;
  margin-left: auto;
  margin-right: auto;
max-width:12%; padding:1% 0% 1% 0%;
background-color:light grey;}

.copyright {
font-family:font2; color:white; background-color:black; text-align:center; font-size:70%; line-height:100%; text-decoration:none; padding: 1% 0 1% 0%;}
.item100 {
  grid-area: v;
background-color:black;
}
.item101 {
  grid-area: w;
  background-color:black;
}
.item102 {
  grid-area: x;
  background-color:black;
}
.item105 {
  grid-area: y;
background-color:black;
}