.blueBorder01 
{
  box-shadow: 1px 2px 5px 0px rgba(161,161,161,0.4);
  padding : 1rem;
}


.olLeftAndRight
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:stretch;
    padding-top : 1rem;
    margin-bottom : 50px;
}
.olLeft
{
    order:1;
    flex-grow:1;
    flex-shrink:1;
    padding-right:0.5rem;

}
.olRight
{
    order:2;
    flex-grow:0;
    flex-shrink:0;

}
.olColumn02
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:stretch;
    margin-top : 1rem;
}
.olCol01
{
    order:1;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:50%;
    height : 700px;
    max-width : calc(50% - 0.5rem);
}
.olCol02
{
    order:2;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:50%;
    height : 700px;
    max-width : calc(50% - 0.5rem);
}
@media (max-width: 480px) 
{
    .olLeftAndRight
    {
        display:block;
    }
    .olLeft
    {
        padding-right : 0;
    }
    .olColumn02
    {
        display:block;
    }
    .olCol01, .olCol02
    {
        max-width : 100%;
        height : 400px;
    }
    .olCol02{margin-top:1rem;}
}

@media (min-width: 481px) and (max-width: 767px)
{
    .olLeftAndRight
    {
        display:block;
    }
    .olLeft
    {
        padding-right : 0;
    }
    .olColumn02
    {
        display:block;
    }
    .olCol01, .olCol02
    {
        max-width : 100%;
        height : 400px;
    }
    .olCol02{margin-top:1rem;}
}

@media (min-width: 768px) and (max-width: 979px)
{
    .olLeftAndRight
    {
        display:block;
    }
}

@media (min-width: 980px) and (max-width:1199px)
{
  .olLeft
  {
     flex-basis : auto;
  }
  .olRight
  {
      flex-basis : 200px;
  }
}

@media (min-width: 1200px) and (max-width:1919px) 
{
  .olLeft
  {
     flex-basis : auto;
  }
  .olRight
  {
      flex-basis : 220px;
  }
}

@media (min-width:1920px)
{
  .olLeft
  {
     flex-basis: auto;
  }
  .olRight
  {
      flex-basis : 220px;
  }
}