/* For small screens */

.wrapper {
  display: grid;
  grid-template-columns: auto
  /*grid-gap: 3px;*/
  background-color: #A020F0; /*purple*/
  color: #2f4f4f;
  /*#444;changed 22/1/18*/
}

.box {
  background-color: #f5ecd0;
  color: black;
  /*# fff;*/
  border-radius: 2px;
  padding: 8px;
  font-size: 120%;
}

 .logo {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding: 20%;
        
    }
    
 .head1 {
        grid-column: 1 / 2;
        grid-row: 1/ 2;
        font-size: 100%;
        text-align:center;
    }
    
 .head2 {
        grid-column: 1 / 2;
        grid-row: 3/ 4;
        text-align:center;
    }
    
  .leftT {
        grid-column: 1 / 2;
        grid-row: 4/ 5;
        text-align:left;
        padding: 20%;
    }
    
   .leftB {
        grid-column: 1 / 2;
        grid-row: 7/ 8;
        text-align:center;
        padding: 10%;
    }  
    
  .mainc {
        grid-column: 1 / 2;
        grid-row: 5/ 7;
        text-align:left;
    }
      
   .mainl {
        grid-column: 1 / 2;
        grid-row: 5/ 6;
        text-align:left;
    }
      
    .mainr {
        grid-column: 1 / 2;
        grid-row: 6/ 7;
        text-align:left;
    }
  	 .bottom {
        grid-column: 1 / 2;
        grid-row: 8 / 9;
        text-align:center;
        font-size: 100%;
    }
    
    .gtable {
  		display: grid;
  		grid-template-columns: repeat(1, 1fr);
  		/*grid-template-columns: 100px;*/
  		grid-gap: 10px;
	}
		.gbox {
  			background-color: #444;
  			background-color: #f5ecd0;
  			color: #black;
  			border-radius: 5px;
  			adding: 20px;
  			font-size: 150%;
	}
	
	 .Tbl4 {
  display: grid;
  grid-template-columns:1fr;
  grid-gap: 10px;
}

  /* 2 col table right col*/ 
 .TblH {
  display: grid;
  grid-template-columns:1fr;
  grid-gap: 10px;
}
.td {
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 10px;
}

 /* end of small screen option*/