@media (min-width: 100.98px) and  (max-width: 320px) {
    h1{font-size:25px;}
   .custom-colored-h1 { font-size: 40px;}          
    h2 {font-size: 25px;}
    h3 {font-size: 20px;}
  }

  @media (min-width: 319.98px) and  (max-width: 750px) {
    h1{font-size:25px;}
   .custom-colored-h1 { font-size: 35px;}          
    h2 {font-size: 20px;}
p  {font-size:15px;
}
  }
  @media (min-width: 100.98px) and  (max-width: 750px) {
    
     #name-left {
       width: 95%;
         font-size: 0;
         text-align: left;
         margin-left: auto;
         margin-right: auto;
       }
          
       #name-righ{
         width: 95%;
         font-size: 0;
         text-align: left;
         /*font-size: 3vw;*/
         margin-left: auto;
         margin-right: auto;
       }
   
   }
   @media  (min-width: 751px)    {
   #name-left {
  width: 47%;
  display: inline-block;
    font-size: 0;
    text-align: top;
    margin-left: auto;
 margin-right: auto;
 vertical-align: top;
  }
  
  #name-righ{
    width: 47%;
    display: inline-block;
    font-size: 0;
    text-align: middle;
    margin-left: auto;
margin-right: auto;
vertical-align: top;

 
  }
  }