*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:Arial, sans-serif;
  height:100vh;
}

/* MAIN LAYOUT */
#main-div{
  display:flex;
  height:100%;
}

/* LEFT PANEL */
#left-panel{
  width:250px;
  background:#e6a048;
  padding:70px 10px 10px 10px;
  display:flex;
  flex-direction:column;
}
#left-panel a{
  display:block;
  color:#0f79ad;
  text-decoration:none;
  cursor:pointer;
  margin-bottom:10px;
  padding:8px 12px;
}
#left-panel a:hover{
  color:#ecf0f1;
}

/* MIDDLE PANEL */
#middle-panel{
  flex:1;
  background:#ccc;
  padding:0px;
}
#middle-panel iframe{
  width:100%;
  height:99.5%;
}
#middle-panel a{
  flex:1;
  color:#0f79ad;
  text-decoration:none;
  margin-bottom:10px;
  padding:0;
   background:#ccc;
}
#middle-panel a:hover{
  color:#e6a048;
}

/* IMAGE BOTTOM */
#left-bottom-image{
  margin-top:auto;
  width:100px;
  align-self:center;
}

/* MOBILE */
@media (max-width:768px){
  #main-div{
    flex-direction:column;
  }
  #left-panel{
    width:100%;
  }
}