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


.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"

"c c c c d d d d e e e e"
"c c c c d d d d f f f f"
"c c c c d d d d g 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:600px) {
.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 */

/* MAIN HEADING */
.item2 {
  grid-area: b; 
text-align:center;background-color:orange;padding: 0% 0% 0% 0%;
}
.h1 {
font-family:font2; text-align:center; color:white;font-size:500%; line-height:170%; text-decoration:none; padding: 2% 0% 0% 0%;}
@media (max-width: 650px) {
{
 float:none; display: block;  color: white;  text-align: center;font-size:200%;  line-height:120%;
} }

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

/* FOLDER PIC OF LARGE FOLDER */
.item3 {
  grid-area: c;  
text-align:center;padding: 0% 0% 0% 0%;
}
.folderpic {
  display: block;
margin-top:2%;
  margin-left: 2%;
  margin-right: 2%;
max-width:200%;
}

.item4 {
 grid-area: d; 
max-width:100%; 
}
.folderp1 {display:block;font-family:font2; text-align:center; color:black;font-size:90%; line-height:130%; text-decoration:none; padding: 0% 0% 1% 0%;}

/* FOLDER RHS SMALL*/
.item5 {
  grid-area: e;  
display:flex;
align-items: center;
    justify-content: center;
}
.smallfolderpic1 { display: block;margin: 5% 0% 1% 5%;max-width:30%;
}
.smallfolderp1 {display:block; float:left; font-family:font2; max-width:30%;text-align:left; color:black;font-size:90%; line-height:130%; margin: 5% 0% 1% 5%;}

.smallfolderpic2 {display: block; margin: 5% 0% 1% 5%;  float:left;  max-width:30%;height:auto;
}
.smallfolderp2 {display:block; float:left; font-family:font2; max-width:30%;height:auto;text-align:left; color:black;font-size:90%; line-height:130%;  margin: 5% 0% 1% 5%;}

.item6 {
  grid-area: f;   
display:flex;
align-items: right;
    justify-content: center;
}

.item7 {
  grid-area: g;   
display:flex;
align-items: center;
    justify-content: center;
}


/* NCR MAIN TEXT */




.h3{
font-family:font2; text-align:center; color:maroon;font-size:130%; line-height:130%; text-decoration:none; padding: 0% 0% 0% 0%;}




/* 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;
}
@media only screen and (max-width:600px) {
.item100, .item101, .item102, .item105 {background-color:black;color:white;text-align:center;}