.main-container{
  display: flex;
  color: rgb(255,255,255,0.8);
}
.left_side{
  display: flex;
  flex-direction: column;
  padding: 50px;
  background-color: #0078FF;
  width: 50%;
  max-height: 100%;
  font-family: 'Dunbar Text', sans-serif;
}
.right_side{
  display: flex;
  flex-direction: column;
  padding: 50px;
  background-color: #000055;
  width: 50%;
  max-height: 100%;
  font-family: 'Dunbar Text', sans-serif;
}
.icon{
  text-align:center;
  margin:0px;
  padding:0px;
}

.main-container a {  text-decoration: underline; color: #fff; }
.main-container ul { list-style: none; }
.main-container ul li::before {  content: "\2022"; color: #fff; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.left_side{
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #0078FF;
  width: 50%;
  max-height: 100%;
  font-family: 'Dunbar Text', sans-serif;
}
.right_side{
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #000055;
  width: 50%;
  max-height: 100%;
  font-family: 'Dunbar Text', sans-serif;
}
.icon{
  text-align:center;
  margin:0px;
  padding:0px;
}

}
@media screen and (max-width: 991px) { 
  .main-container { display:block; } 
  .right_side, .left_side { width: 100%; } }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}