.content .row{width: 100%;}
    header .row{ padding: 20px 0;}
    .col-md-4.panl img{ position: absolute; right: 0; bottom: 0; width: 80px; }
    hr { margin: 1rem -20px; border-width: 2px; }
    h4 { margin-top: 15px; }
    h6 { margin-bottom: 25px; }
    .circle { position: absolute; right: 0; bottom: 0; padding: 20px; background-color: red; width: 100px; height: 100px; text-align: right; line-height: 6.5; border-top-left-radius: 200px; }
    .circle i { font-size: 45px; color: #fff; }
    .circle.b{ background-color: #020659; }
    .circle.p{ background-color: #BF6B04; }
    .circle.g{ background-color: #66CAF2; }
    .col-md-4.panl { width: 100%; display: block; flex: none !important; max-width: 100%; }
    .content .row{ display: block; margin-top: 20px; }
    .col-md-4.panl { background-color: #fff; margin: 10px; padding: 20px; border: 2px #ddd solid; border-radius: 4px; }
    img{ max-width: 100%; }
    footer { background: #4B535E; position: fixed; bottom: 0; width: 100%; }
    footer p {color: #fff; padding: 3%; margin: 0; }
    @media only screen and (min-width: 768px) 
    {
        header{ max-height: 80px; }
        .content{ min-height: calc(100vh - 240px); display: flex; align-items: center; }
        .col-md-4.panl { max-width: calc(33.333333% - 20px) !important; flex: calc(33.3333% - 20px); }
        .content .row{ display: flex; margin-top: 0px; }      
    }
     @media (max-width: 768px)
     {
        footer { position: relative !important; margin-top: 50px;}
     }
footer {
    min-height: 8vh;
    padding: 10px 0;
    background-color: #1f2125;
    text-align: left;
}
.menuitems {padding-bottom: 6%; padding-top: 2%;}