/* BASE For iPhone X max-width 375px: */

/* The Folder */
#folder {
  position: absolute; 
  z-index: 1; /* Sit on top */
  padding-top: 0; /* Location of the box */
  top: 25%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; 
  height: 600px; 
  overflow: visible; /* view whole box */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: transparent;
}

/* Folder Content */
.folder-content {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 3px solid black;
  width: 80%;
  height: 600px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15),0 6px 20px 0 rgba(0,0,0,0.15); 
}


.folder-header {
  padding: 2px;
  background-color: white;
  border-bottom: 3px solid black;
  color: black;
}

.folder-column1 {
  float: left;
  width: 33%;
  height: 545px;
  padding: 0;
  border-right: 3px solid black;}

.folder-column2 {
  float: left;
  width: 33%;
  height: 545px;
  padding: 0;
  border-right: 3px solid black;}

.folder-column3 {
  float: left;
  width: 33%;
  padding: 0;}

@media only screen and (min-width:768px) {
  /* For iPad: */
    
.folder-content {
    width: 85%;
    height: 500px;
    }
    
.folder-column1 {
    height: 89%;
    }
    
.folder-column2 {
    height: 89%;
    }
      
    
@media only screen and (min-width:992px) {
	  /* For Desktop: */
  
#folder {
  top: 15%;
  width: 100%; 
  height: 500px;
    }
    
.folder-content {
    width: 70%;
    height: 525px;
    }
    
.folder-column1 {
    height: 89%;
    }
    
.folder-column2 {
    height: 89%;
    }
    
@media only screen and (min-width:1920px) {
	  /* For iMac Desktop: */ 
    
#folder {
  top: 15%;
  width: 100%; 
  height: 800px;
    }
    
.folder-content {
    width: 70%;
    height: 825px;
    }
    
.folder-column1 {
    height: 89%;
    }
    
.folder-column2 {
    height: 89%;
    }