* {
    box-sizing: border-box;
  }
  
  .clearfix {
    clear: both;
  }
  
  .hidden {
    display: none;
  }
  
  #user-info {
    border: 1px solid #CCC;
    clear: both;
    margin: 0 auto 20px;
    max-width: 400px;
    padding: 10px;
    text-align: left;
    border-radius: 10px;
    background-color: #FFF;
    opacity: 0.8;
  }
    
  #session {
    border: 1px solid #CCC;
    clear: both;
    margin: 0 auto 20px;
    max-width: 400px;
    padding: 10px;
    text-align: left;
    border-radius: 10px;
    background-color: #FFF;
    opacity: 0.8;
  }

  #security {
    border: 1px solid #CCC;
    clear: both;
    margin: 0 auto 20px;
    max-width: 400px;
    padding: 10px;
    text-align: left;
    border-radius: 10px;
    background-color: #FFF;
    opacity: 0.8;
  }

  #photo-container {
    background-color: #EEE;
    border: 1px solid #CCC;
    float: left;
    height: 80px;
    margin-right: 10px;
    width: 80px;
  }
  
  #photo {
    height: 80px;
    margin: 0;
    width: 80px;
  }

  #badge-container {
    background-color: #EEE;
    border: 1px solid #CCC;
    float: left;
    height: 80px;
    margin-right: 10px;
    width: 80px;
  }
  
  #badge {
    height: 80px;
    margin: 0;
    width: 80px;
  }
  
  @media (max-width: 300px) {
    #photo-container,
    #photo {
      height: 40px;
      width: 40px;
    }

    #badge-container,
    #badge {
      height: 40px;
      width: 40px;
    }

  }