/*elements*/

h4 {font-size:17px;
margin-bottom:0px}


/*classes*/

  .abtbox {
  border:double #6d675c 3px;
  padding: 1px 5px 5px 5px;
  margin:4px;
  width:677px;
  height:250px;
  overflow-y:scroll; 
  display: inline-block; 
  background-image: url('images/papertiles2.png'); 
  background-repeat: repeat; 
  background-size: 100px;
  }

  .toggleimg {
  height:130px
  }

 .hovertilt:hover {
    transform:rotate(3deg)
  }
  .hovertiltimg:hover > img {
    transform:rotate(3deg)
  }


 .hovertilt2:hover {
    transform:rotate(-3deg)
  }
  .hovertiltimg2:hover > img {
    transform:rotate(-3deg)
  }

 
    #side1 {
    width: 100px;
    height: 485px;
    position: fixed;
    bottom: 50;
    left: -10em;
  }

  #side2 {
    width: 100px;
    height: 485px;
    position: fixed;
    bottom: 50;
    right: 20em;
  }

  img.books{position:absolute; 
  top:10%; 
  right:10%;}
  
  img.transmission{position:absolute; 
  top:5%; 
  left:10%;}
  
  #bookbox {
  width: 300px;
    position: absolute;
    right: 10%;
    top: 20%;
    padding:5px;
    border-style:double;
    border-color: #6d675c;
    border-width: 3px;
    background-color:#f8ebd5;
    display: none;
    }   


  #tvbox {
    width: 300px;
    position: absolute;
    left: 10%;
    top: 15%;
    padding:5px;
    border-style:double;
    border-color: #6d675c;
    border-width: 3px;
    background-color:#f8ebd5;
    display: none;
    }

/*media queries*/

  @media(max-width:750px){

        .abtbox {
        border-style:double;
        border-color: #6d675c;
        border-width: 3px;
        padding: 1px 5px 5px;
          margin:4px;
          width:95%; 
          height:auto;
        }
        
        .toggleimg {
        height:70px
        } 
        
        img.books{position:absolute; 
        top:9vh; 
        right:5vw;}
  
        img.transmission{position:absolute; 
        top:5vh; 
        left:10vw;}
        
        #bookbox {
        top: 20vh;
        }   
   
        #tvbox {
        top: 15vh;
        }
      
  }