@media (max-width: 768px) {

    .headeronetwo{
        display: none;
    }

    .headerone{
        border-bottom: none;
    }
    .headeroneone svg{
        display: none;
    }
    .headertwoone{
        display: none;
    }
    .headertwothree{
        display: none;
    }
    .headertwotwotwo{
        display: none;
    }
    .headerthree{
        display: none;
    }
    .headertwotwo{
        width: 100%;
        margin-top: -70px;
     
    }
    .headertwotwoone{
        font-size: 1.8em;
    }
    .headeroneone{
        padding-top: 10px;
    }
    .body{
        flex-direction: column;
        padding: 10px;
        margin: 0px;
    }
    .bodyone{
        width: 100%;
        order: 2;
    }
    .bodytwo{
        width: 100%;
        order: 1;
        border: none;
        padding: 0px;
    }
    .bodytwo img{
        order: 2;
        
      } 
        .bodytwo{
            display: flex;
            flex-direction: column;
            padding-top: 40px;
        }
    .bodytwo .bodytwoone{
        order: 1;
        padding-bottom: 15px;
    }
    .bodythree{
        order: 3;
        width: 100%;
    }
    .body h1{
        font-size: 1.9em;
    }

 .bodythreeone:first-child{
    padding-bottom: 10px;
 }
 .worldone{
    font-size: 2.2em;
 }
 .us{
    flex-direction: column;
    padding: 10px;
    margin: 0px;
 }
 .usone{
    width: 100%;
    border-right: none;
    padding-right: 0px;
 }
 .opinion{
    flex-direction: column;
    padding: 10px;
    margin: 0px;
 }
 .lineee{
    margin: 0px;
    padding: 0px;
 }
 .world{
    margin: 0px 10px;
 }
 .slider{
    margin: 0px 10px 150px 10px;
 }
 .opinionone{
    width: 100%;
 }
 .opiniontwo{
    width: 100%;
 }
 .opiniontwoone{
    padding-left: 0px;
 }
 .opiniontwothree{
    font-size: 2em;
 }
 .interviewtwo{
    width: 100%;
 }
.nav{
    top: auto;
    bottom: 0px;
    height: 50px;
    transform: none;
}
.latest{
    flex-direction: column;
    padding: 10px;
    margin: 0px;
}
.aboutus{
    margin: 0px;
}
.latestone{
    width: 100%;
    border-right: none;
}
.latestoneone{
    margin-right: 0px;
    flex-direction: column;
}
.latestoneoneone{
width: 100%;
}
.latestoneonetwo{
    width: 100%;
}
.latesttwoone{
    font-size: 2em;
}
.latesttwo{
    width: 100%;
    padding: 0px;
}
.viewall{
    margin: 30px 0px;
}
.aboutus{
    flex-direction: column;
    padding: 10px;
}
.aboutusone{
    width: 100%;
    padding: 0px;
}
.aboutustwo{
    width: 100%;
    padding: 20px 0px ;
    border: none;
}
.aboutusthree{
    padding: 0px;
    border: none;
    width: 100%;
}
.aboutusfour{
    padding: 0px;
    width: 100%;
}
.img{
    justify-content: center;
}
.latestoneone img

 {
    width: 100%;
 }
 .aboutusthree .headertwothree{
    display: flex;
    padding-bottom: 10px;
 }
 .dfooter .footer{
    margin: 0px;
 }
 .mnews{
    display: flex;
 }
 .img img
 {
    width: 100px;
    height: auto;
}
.slider {
    position: relative;
    height: 70vh;  
    margin: 10px 10px 200px 10px;         /* full-bleed like your screenshots */
    overflow: hidden;

  }
  .mmain{
    padding: 0px;
  }

  
  /* keep header on top and clickable */
  .headeroneone{
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    display: flex; align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid;
    background: #fff;
    z-index: 1100; /* higher than menu(1000) & overlay(900) */
  }
  .headeroneone img#hamburger{ width:24px; height:24px; cursor:pointer; }

  /* full-screen menu below the 50px header */
  .sidemenu{
    position: fixed;
    top: 50px;
    left: -150%;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;
    z-index: 1000;
  }
  .sidemenu.active{ left: 0; }

  /* overlay covers content but NOT the header */
  .sidemenu-overlay{
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    display: none;
    z-index: 900;
  }
  .sidemenu-overlay.active{ display: block; }

/* cmain */
.cmain{
    padding: 20px 10px;
}
.cbrowse .usonetwo{
    padding: 0px;
    font-size: 0.9em;
}
.cbrowse{
    padding: 20px 10px;
    margin-bottom: 10px;
}
.usa{
    flex-direction: column;
    padding: 0px;
    margin: 0px;
}
.usaone{
    width: 100%;
    padding-right: 0px;
    border-right: none;
}
.cbrowse .worldone {
    text-transform: uppercase;
    font-size: 32px;
  
}


/* detailed */

.dmaintwo{
    flex-direction: column;border-bottom: none;
    padding-top: 60px;
}
.dclarie{
    border-top: 1px solid;
    padding-top: 10px;
}
.dfeatured{
    padding: 10px;
}
.dmaintwoone{
    width: 100%;
    order: 2;
    text-align: left;
}
.feature-title{
    text-align: left;
    font-size: 30px;
    padding: 30px 10px 5px 10px;
    letter-spacing: 0px;
}
.feature-title .small {
    display: contents;
}
.dfeaturedthree{
    padding: 10px;
}
.dmaintwotwo{
    order: 1;
    padding-top: 0px;
    width: 100%;
}
.dclaireone{
    padding: 10px;
}
.dclairethree{
    padding: 10px;
}
.dhey{
    padding: 10px;
}
.dheyone{
    flex-direction: column;
}
.dheyonetwo{
    width: 100%;
}
.iauth{
    display: flex;
}
.footerone{
    font-size: 2.5em;
}
.dheyoneone{
    width: 100%;
}
.dheytwo{
    flex-direction: column;
    padding-left: 0px;
}
.dcap{
    flex-direction: column;
}
.caption{
    width: 100%;
    padding: 20px 0px;
}
.dtwo{
    width: 100%;
    display: none;
    padding-left: 0px;
}
.dheytwoone{
    width: 100%;
}
.dheytwotwo{
    width: 100%;
    margin-top: 0px;
}
.droger{
    padding: 10px;
}
.droger h2{
    padding-right: 0px;
}
.dspace{
    padding: 10px;
}
.dseo{
    flex-direction: column;
}
.dseoone{
    width: 100%;
    border-right: none;
    border-bottom: 1px solid;
    margin-top: 20px;
    padding: 0px;
}
.dclairee{
    padding: 20px 0px;
}
.dthree{
    padding: 10px;
}
.dnovertwo{
    font-size: 30px;
}
.dnover{
    padding: 30px 10px 10px 10px;
}
.dnoverfour{
    padding: 10px;
}
.dclaireeone img{
    width: 54px;
    height: 54px;
}
.input-group{
    flex-direction: column;
}
.dseoone:last-child{
    border-bottom: none;
}
.dseothree{
    padding-bottom: 20px;
}
.dbob{
    flex-direction: column;
}
.dbobone{
    width: 100%;
    height: auto;
}
.dfromone{
    flex-direction: column;
}
.dfromtwo{
    border-right: none;
    width: 100%;
    padding: 20px 0px;
    border-bottom: 1px solid;
}
.dfrom{
    margin: 0px;
}
.dfooter .aboutus{
    margin: 0px;
    padding: 10px;
}
}

@media only screen and (min-width: 820px) and (max-width: 1180px) {


    .latestoneone img

 {
    width: 100%;
}
.img img:last-child{
    display: none;
}
.opiniontwoone {
    padding-left: 20px;
}
.dclaireone{
    padding: 20px;
}
.dclairethree{
    padding: 20px;
}
.dhey{
    padding: 20px;
}
.droger{
    padding: 20px;
}
.dspace{
    padding: 20px;
}
.dfooter .aboutus{
    padding: 20px;
    flex-direction: column;
}
.dheytwo{
    padding-left: 0px;
}
.cbrowse .usonetwo {
  padding: 0px 30px;

}
.aboutusone{
    width: 100%;
    padding: 0px;
}
.aboutustwo{
    width: 100%;
    border: none;
     padding: 0px;
}
.aboutusthree{
    width: 100%;
     padding: 0px;
    border: none;
}
.aboutusfour{
     padding: 0px;
    width: 100%;
}
.dmain .header{
    padding: 20px;
}
.dmain .headerthreee{
    margin: 0px 20px;
}
.dthree{
    padding: 20px;
}


}


/* MOBILE ONLY */