#howtohaveareader {
       border:1px solid #d8d8db;
       padding: 20px;
       text-align: center;
}

#howtohaveareader img{
       max-width: 90%;
}

#howtohaveareadercontent {
       max-width: 450px;
       margin: auto;
}

#howtohaveareaderlogo {
    background: url(../images/readers.svg) no-repeat;
    background-size: 23px auto;
    background-position: 50% 45%;
    background-color: #dc3e79;
    width:43px;
    height: 43px;
    display: block;
    position: absolute;
    margin-top: -21px;
    z-index: 1000;
}

#howtohaveareader p {
       margin-bottom: 27px;
}



@media screen and (max-width: 1150px) {
       
       #howtohaveareader {
              margin-top: 30px;
       }
       
}


@media screen and (max-width: 850px) {
       
       #howtohaveareader {
              margin-left:20px;
              margin-right: 20px;
       }
       
}



@media screen and (max-width: 450px) {
       
       #howtohaveareaderlogo {
             
              width:33px;
              height: 33px;
              margin-top: -11px;
             
          }
          
          #howtohaveareader p {
              margin-bottom: auto;
          }
          
          #howtohaveareader img {
              margin-top: 10px;
          }
          
          #howtohaveareader {
             
              padding: 10px;
          }
       
}


@media screen and (max-width: 400px) {
       
       #howtohaveareaderlogo {
            
              width:30px;
              height: 30px;
              margin-top: -11px;
             
          }
       
       
         
       
}


@media screen and (max-width: 350px) {
       
       #howtohaveareadercontent h2 {
            
              font-size: 15px;
             
          }
       
       
         
       
}