/* BASIC css start */
<style>
    .about { margin:-15px -15px 0; } 
    
    
    .about-row { display:flex; flex-wrap:wrap; padding-bottom:0px; gap:1px; }
    .about-row.reverse { flex-direction:row-reverse; }
    .about-img { width:auto; height:50vw; position:relative; overflow:hidden; flex-grow: 1; }
    .about-img img { width:100%; max-width:unset; border:0rem solid #000; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
    
    .about-img h1 { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:#000; text-transform:uppercase; font-size:16px; background:#FFF; padding:0 5px; }
    
    .about-text { position:relative; flex-grow: 1; }
    .about-text .inner { padding:15px 45px; margin-top:0px; width:100%; position:absolute; top:50%; left:65%; transform:translate(-50%, -50%); }
    .about-text h1 { text-transform:uppercase; font-size:18px; padding:0 0 0; margin:0 0 25px; }
    .about-text h3 { font-size:16px; margin:0 0; float:left; width:80%; }
    .about-text h4 { font-size:12px; margin:0 0; float:left; width:80%; }
    .about-text p { max-width:680px; font-size:13px; width:50%; float:right; line-height:1.55; padding-right:0px; }
  
    
    #contents { padding-bottom:0; }
    #footer { margin-top:0; }
    
    @media only screen and (device-width: 980px),
        only screen and (max-width: 980px),
        screen and (max-device-width: 980px) {

            
            .about-row { display:block; }
            .about-img { height:auto; width:180%; }
            .about-img img  { position:relative; left:0; top:0; transform:translate(0, 0); }
            .about-text .inner { position:relative; left:0; top:0; transform:translate(0, 0); padding:15px; }
            
            .about-text h3 { width:100%; margin:0 0 45px; }
            .about-text p { width:100%; margin:0 0 70px; }
/* BASIC css end */