        .card {
          position: relative;
          height: auto;
          overflow: hidden;
          border-radius: 15px;
          margin: 0 auto;
          padding: 40px 20px;
          box-shadow: 0 10px 15px rgba(0,0,0,0.3);
          /* transition: .5s;*/
        }
        .card_a, .card_a .title .fas {
          background: linear-gradient(-45deg, #000000, #a1c1cb);
        }
        .card_b, .card_b .title .fas {
          background: linear-gradient(-45deg, #000000, #793C3F);
        }
        .card_one, .card_one .title .fas {
          background: linear-gradient(-45deg, #000000, #05ff05);
        }
        .card_two, .card_two .title .fas  {
          background: linear-gradient(-45deg, #000000, #0070C0);
        }
        .card_three, .card_three .title .fas  {
          background: linear-gradient(-45deg, #000000, #dddddd);
        }
        .card_four, .card_four .title .fas  {
          background: linear-gradient(-45deg, #000000, #85144b);
        }

        .title .fas {
          color: #fff;
          font-size: 60px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          text-align: center;
          line-height: 100px;
          box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
        }
        .title h2 {
          position: relative;
          margin: 20px 0 0;
          padding: 0;
          color: #fff;
          font-size: 28px;
          z-index: 2;
        }
        
        
    .longtext {
        display: inline-block;
    }

    @media (max-width: 1000px) {
        .longtext { display: none; }
    }

     
    .shrinkable{
        font-size: 3vmin;
    }
       
        
    .my_h1{display: block; font-size: 2.2rem; line-height: 2.2rem; margin-top: .5em; margin-bottom: .5em; margin-left: 0; margin-right: 0; }
    .my_h2{display: block; font-size: 1.9rem; line-height: 1; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold;}
    .my_h3{ display: block; font-size: 1.6rem; line-height: 1; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: normal;}
    .my_h4{font-size: 1.3rem; }    
    .my_h5{display: block; font-size: 1.2rem; margin-top: .5em; margin-bottom: .5em; margin-left: 0; margin-right: 0; }    

    @media (max-width: 500px) {
        .tagline {font-size: 1.4rem; padding-top: 20px; font-family: Garamond, serif; color: white;  padding-left: 20px;}
        #landing {height: 210px;}
    }
    @media (min-width: 500px) {
        .tagline {font-size: 2.5rem; padding-top: 150px; font-family: Garamond, serif; color: white;  padding-left: 20px;}
        #landing {height: 550px;}
    }

    .landing{background-image: url("/static/images/Puppy-Path_big.png"); 
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
    }
    
     .photos{background-image: url("/static/images/photos.jpg");
            background-size: 100%;
     }
     .questions{background-image: url("/static/images/questions2.jpg");
            background-size: 100%; background-repeat: no-repeat;
     }