/*page 8*/

button{
   float: right;
   margin-bottom: 2%;
}

.box{
  cursor: pointer;
  background-color: #ed564b;
  border-radius: 5px;
  height:10em;
}

.box p{
  visibility: hidden;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 7%;
}

i{
  color: #fff;
  text-align: center;
  width: 100%;
  padding-top:3%;

}

/*page 8a*/

img{
  width: 100%;
  height: auto;
}

.text{
  margin:0 0 2% 0;
  padding:1%;
  border:1px dotted  #ed564b;
  border-radius: 5px;
}


/*page 8b*/


.italic{
color: #333;
}


/*page 8c*/
table{
  width: 100%;
}

.placeTitle{
  font-weight: bold;
  text-align: left!important;
  width:20%;
  height: 100%;
} 

.genre,.iconography{
  width:40%;
}


.notebookTable{
    margin: 1% 0 1% 0;
    background-color: #FFEFED;
    border: dotted #ed564b 1px;
    box-shadow: 5px 5px 2px #ccc;
    width:100%;
}


.notebookTable{
  height:100%;
}

.questionIcon{
  margin-top: 2%;
}

#question{
  padding: 1%;
  float: left;
}

.questionText{
  margin-top: 1%;
  margin-left:3.5%;
}

.questionText p{
  display: none;
  color:#333;
  font-weight: bold;
}



/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Styles */
}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px) {
    /* Styles */
}


/* ----------- Laptop ----------- */

@media screen and (min-width: 1366px) and (min-height: 768px) {
    /* Styles */
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px) {
    /* Styles */
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
   
}


/* ----------- mobile devices -----------*/
@media only screen and (max-device-width: 640px) { 
  .maincontent .col:first-child{
    margin-left: 0;
  }
  .box{
   width:100%;
   }
}