body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}


/* Style the tab */
.tab {
	position:absolute;
  float: left;
  border: 0px solid #ccc;
  background-image: linear-gradient(90deg, rgb(0,153,0) 20%, rgb(0,204,0,1) 98%);
  width: 16.2%;
 height: 100%;




}

/* Style the buttons that are used to open the tab content */
.tab button {


  display: block;
  background-color: transparent;
  color: white;
  padding: 13px 13px;
  width: 100%;
  border: 0;
  outline: none;
  text-align: left;
  
  font: Tahoma, Geneva, sans-serif;
  cursor: pointer;
  transition: 0.3s;
  vertical-align:middle;

}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: rgb(202,255,202);
	
 color:#030;
 

}

/* Create an active/current "tab button" class */
.tab button.active {


 color:#060;

  background: Linear-Gradient(5deg, rgb(255,255,255,.9) 20%, rgb(166,255,166) 80%);
}


/* Style the tab content */
.tabcontent {
 position:absolute;
  float: left;
  padding: 0px 0px;
  border: 0px solid #ccc;
  width: 83.8%;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:16.2%;
  display:none;
  border-left: none;
height:99%;

 background: Linear-Gradient(10deg, rgb(255,255,255,1) 70%, rgb(255,255,255,.8) 80%);
}
.tablinks {
  
  border: 0px solid #ccc;
  font-size:14px;	
  vertical-align:top;  
}

details > summary {
  padding: 4px;
  width: auto;
  color:#CCC;
 
  list-style-type: '➧';
  font-size:36px;
background: linear-gradient(0deg, rgb(204,204,204,.3) 10%,rgb(255,255,255,.6)  100%);
border-radius:50px;
  border: none;

  cursor: pointer;
}
details[open] > summary {
	

 
	list-style-type:'🡃';
	font-size:36px;
color:#0C0;
}
details > p {

  padding: 4px;
  margin-left: 5%;

}


 
h2 {
 
  font: bold 100px/1 Helvetica, Verdana, sans-serif;
}
@media screen and (max-width: 767px) {
	.tab {
	width:25%;
	}
	.tabcontent {
		width:75%;
		margin-left:25%;
	}
	.h2 {
  
  font: 10px Helvetica, Verdana, sans-serif;
}
.threedee {
}

	}