@import url('https://fonts.googleapis.com/css?family=Abel');

body {
  background: #F0EDED;
}

#wrapper {
  width: 100%;
  
  
  @media screen and (max-width: 768px) {
  #main {
    margin-top: -20px;
  }
}
    
  @media screen and (min-width: 1024px) {
    width: 1100px;
    margin: 0 auto;
  }
  
  #pricing-tables {
    font-family: "Abel", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }
    
    .pricing-table {
      max-width: 350px;
      width: 100%;
      margin: 15px 0;
      
      @media screen and (min-width: 1024px) {
        margin: 0;
      }
      
      .header {
        
        .title {
          text-align: center;
          text-transform: uppercase;
          padding: 15px 0;
          background: #e4e4e4;
          color: #000;
          font-size: 16x;
        }
        
        .price {
          text-align: center;
          text-transform: uppercase;
          padding: 15px 0;
          background: #f6f6f6;
          color: #000;
          font-size: 28px;
          font-weight: 300;
            
            span {
              font-size: 16px;
              vertical-align: super;
            }
        }
      }
      
      .features {
        background: #fff;
      
        ul {
          list-style: none;
          margin: 0;
          padding: 15px 0;
          
          b, strong {
            font-weight: bolder;
            padding: 0px 30px;
            color: #f54749;
        }

          li {
              /*font-family: "Montserrat-nav";*/
            padding: 8px 30px;
            text-align: left;
            font-size: 15px;
            
            span {
              /*font-family: "Montserrat-nav";*/
              color: #0d0d0d;
              font-size: 18px;
            }
          }
        }
      }
      .signup {
        background: #fff;
        padding: 2px 0 25px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        
        a {
          width: auto;
          margin: 0 auto;
          padding: 8px 30px;
          text-align: left;
          text-decoration: none;
          color: #FC4445;
          border: 1px solid #FC4445;
          transition: all .2s ease;
          
          &:hover {
            color: #fff;
            background: #FC4445;
          }
        }
      }
      
      &.featured {
        
        .header {
          
          .title {
            background: #FC4445;
            color: #fff;
          }
        }
        
        .signup {
          
          a {
            background: #FC4445;
            color: #fff;
            
            &:hover {
              color: #FC4445;
              background: #fff;
            }
          }
        }
      }
    }
  }
}