@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');

/* FONTS */

h1, h2 {
    font-family: 'Muli', sans-serif;
    color: #ff4242;
}

h3, h4, h5, h6, p, li {

  font-family: 'Muli', sans-serif;
  color: #7352bd;
}

p {
  font-weight: 300;
  
}

em {
    font-style: normal;
    color: #ff4242;
}

/* MAIN BODY */


html {
    height: 100%;
}

body {
    height: 100%;   
    overflow: hidden;  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
    margin: 0px;  /*removes default style*/
    display: flex;  /*enables flex content for its children*/
    box-sizing: border-box;
    
    
}


.column {
    height: 100%;  /*allows both columns to span the full height of the browser window*/
    display: flex;
    flex-direction: column;  /*places the left and right headers above the bottom content*/
}

#left {
  max-width: 250px;
    flex-shrink: 0;  /*makes sure that content is not cut off in a smaller browser window*/
    padding: 25px 25px 0px;
    text-align: center;
    font-size: 12px;
}

.left2 {
    display: none;
}

#right {
 width: 100%;
}



.top-left {
    flex-shink: 0;

}

.top-right {
  margin: auto;
  padding-top: 15px;
  flex-shink: 0;
    
}

.top-right img {
  padding: 0 5px;
}



ul {
  list-style-type: none;
  list-style-position:inside;
  margin:0;
  padding:0;
}

.bottom {
    flex-grow: 1;  /*ensures that the container will take up the full height of the parent container*/
    overflow-y: auto;  /*adds scroll to this container*/
}

#main {
  flex-grow: 1;  /*ensures that the container will take up the full height of the parent container*/
    overflow-y: auto;  /*adds scroll to this container*/
    height: 100%;
}


@media only screen and (max-width: 600px) {

    html {
        height: 250%;
    }

    #left {
        display: none;
    }

    .left2 {
        display: inline-block;
        max-width: 250px;
          padding: 25px 25px 0px;
          text-align: center;
          font-size: 12px;
        margin: auto;
      }
    
    #right {
        text-align: center;
    }

    body {
        overflow: visible;
        margin: 0px;  /*removes default style*/
        display: flex;
        flex-direction: column;
        
    }
    
    }