{@media (min-width:168px) and (max-width:1260px)}


body {
  background-color: #197699;
  color: #013054;
  font-family: 'Helvetica' , sans-serif;
    margin: 0 auto 0;

  }
header { 
    background-color: #013054;
     height: 3em;
     padding: 2em;
    
}
div.logo{
    float: left;
   
  
    
    }

 #mainnav { 
            
            padding: 0px 30px 0px 0px;
              float: right;
          
        
    
            }

    #mainnav ul li {
        
          display: inline;
              
            }

    #mainnav ul li a {
        
      padding: 10px;
      color: #DDFFF6;
      text-decoration: none;
        font-size: 18px;
          
    }

#mainnav ul li a:hover {
      background-color: #4a5043;
      color: #DDFFF6;
}

@media all and (max-width:640px) 
{
    body{
        font-size: 10px;
            margin:0;
        padding: 0px;
    }
    
    
    div.logo{
        float:left;
        width: 0.5em;
        height: 0.5em;
 
    }
    
    #mainnav { 
            
            padding: 0px;
              float:right;
        
     }
    
    
    #mainnav ul li {
        
          display: inline;
              
            }

    #mainnav ul li a {
        
      padding: 4px;
      color: #DDFFF6;
      text-decoration: none;
        font-size: 10px;
        margin: 0 auto;
          font-weight: bold;
    }


    #mainnav ul li a:hover {
      background-color: #4a5043;
      color: #DDFFF6;
      
    }
}

#main1 {
    background: #DDFFF6;
     border-radius: 1em;
    width: 25em;
    height: 50em;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
    margin: auto;
    padding: 0px 30px 0px 30px;
    margin-top: 3em;
}
@media all and (max-width:640px) 
{
   #main1 {
  margin-top: 3.5em;
    width: 25em;
    height: 69em;

} 
 
}

#hgroup{
    padding: 0px 30px 0px 30px;
    text-align: center;
}

    
h1{
    padding: 1em;
}  


div.avatar{
    
    margin: auto;
  width: 170px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
   
    
 }


   h2 { 
       font-size: medium;
       padding-bottom: 20px;
        }

 main { 
       clear: both;
      padding: 0px 30px 0px 30px;
    }
main h2{
    font-size: 19pt;
}
aside{
     background: #DDFFF6;
     border-radius: 1em;
    width: 25em;
    height: 38em;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
    margin: 3em auto;
    padding: 0px 30px 0px 30px;
    text-align: left;
    }
@media all and (max-width:640px) 
{
    aside{
    width: 25em;
    height: 35em;
}
}
aside img{
    width: 30vw;
  max-width: 10vw;
    max-height: 10vw;
    margin-top: 2em;
    margin-bottom: 0.5em;
 
}
@media all and (max-width:640px) 
{
    aside img{
    width: 50vw;
  max-width: 20vw;
   
}
}

footer{
      background: #DDFFF6;
     border-radius: 1em;
     width: 25em;
    height: 6em;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
    margin: 1em auto 2em;
    padding: 0px 30px 0px 30px;
    margin-top: -3.5em;
   }


footer p  {
    display: block;
    color: #013054;
    font-size: 8pt;
    text-align: center; 
    margin-top: 100px;
    padding: 25px;
    
        }

@media all and (max-width:640px) 
{
    footer{
      background: #DDFFF6;
     border-radius: 1em;
     width: 25em;
    height: 9em;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
    margin: 0  auto 2em;
    padding: 0px 30px 0px 30px;
        margin-top: -1em;
   }
    
    footer p  {
    display: block;
    color: #013054;
    font-size: 8px;
    text-align: center; 
       padding: 1.5em;
        margin: 5em 0 0 0;
    
        }
}
 h1#plan{
  margin-left: -1em;
}
   
@media all and (max-width:640px) 
{
    h1#plan{
        margin-left:-1em;
        font-size: 22px;
    }
    aside#aside-plan{
         width: 25em;
    height: 45.5em;
    }
}