/* 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: 5px;
     color: black;
	maxheight:100%;
}

.wrapper > div {
    border: 2px white-;
    border-radius: 5px;   
    
}
.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"
"d d d d c c c c e e e e"

"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:750px) {
.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 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 */

/* MAIN HEADING */
.item2 {
  grid-area: b; 
text-align:center;
padding:2% 20% 2% 20%;
}
@media screen and (max-width: 750px) {
.item2 {
padding:2% 5% 2% 5%;}
}


.h1a {font-family:font2; color:white; background-color:green; text-align:center; font-size:200%; line-height:120%; text-decoration:none; padding: 2% 1% 5% 1%;}
.h2 {font-family:font2; color:white; background-color:rgb(0,0,128); text-align:left; font-size:90%; line-height:100%; text-decoration:none; padding: 2% 1% 2% 1%;}

.p1 {
font-family:font2; color:black; background-color:white; text-align:left; font-size:90%; line-height:130%; text-decoration:none;padding: 2% 5% 2% 5%;}



/* 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;
}