/* Big Tablets - 1200px  */
@media only screen and (max-width: 1200px) {

    .hero-text-box {
        width: 100%;
        padding: 0 2%;
    }

    .row {
        padding: 0 2%;
    }

    /* Added a consistent padding among all of the rows. */
}
















/* 768 - 1023*/
@media only screen and (max-width: 1023px) {

    body {
        font-size: 18px;
    }

    /* Decrease the overall font size so it fits better*/
    section {
        padding: 60px 0;
    }


    .long-copy {

        width: 80%;
        /* Once you make it 70% it will no longer be centered so you have to margin-left */
        margin-left: 10%;
        /* 70% of 100% equals 30 so you want 15% because 15+15=30 */
    }

    .plan-price {
        font-size: 200%;
    }

    .perfect-box {
        margin-top: 10px;
    }

    /* Elimnated the white space by removing some of the margins */
    .perfect-box:last-child {
        margin-top: 10px;
    }

    /* Elimnated the white space by removing some of the margins */
    .perfect-goldens {
        width: 62%;
    }

    /* Made image larger */


    .icon-small {
        width: 17px;
    }

    /* Lowered the width to bring the icons closer to the text to allow for more text */
    .section4-feature {
        font-size: 90%;
    }

    .plan-box {
        width: 100%;
        margin-left: 0%;
    }

    /* Brought the Plan boxes closer together to get rid of the white space  */
    .contact-form {
        width: 80%;
    }

    /* Made the contact form wider  */


    
    
    
    
    
    
      .main-nav {
        display: none;
    }


    .main-nav {
        float: left;
        text-align: left;
        margin-top: 35px;
        margin-left: 10px;

    }

    .mobile-nav-icon {
        display: inline-block;
    }


    .main-nav li {
        display: block;
        /* Changing from Inline block to Block forces a line break making the menu stack on top of one another*/
    }

    .main-nav a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }


    .sticky .main-nav {
        margin-top: 10px;
    }

    /* Will pad the menu links to where you want it to be */

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 10px 0;
    }

    .sticky .mobile-nav-icon i {
        color: #555;
    }

    /* Changes the Sticky Nav menu button from white to dark gray */
    .sticky .mobile-nav-icon {
        margin-top: 10px;
    }
    
    
    
    
    
    
    
    
    
    
    



}











/*  Small phones - small tablets  481px-767px */
@media only screen and (max-width: 767px) {



header {
    
    background-size:auto; /*Tells browser we want to see the whole image*/
 
}
    
.responsive {

    width: 80%;

}
    
    
    .aerial {
    
    background-size:auto; /*Tells browser we want to see the whole image*/
 
}
     
    
    .logo {
    height: 80px;

    }


    body {
        font-size: 16px;
    }

    section {
        padding: 30px 0;
    }

    .hero-text-box {
        padding: 0 4%;
         
    }

    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }

    /* Columns will now display 100% stacked ontop of one another not side by side anymore*/



  

    h1 {
        font-size: 140%;
    }

    h2 {
        font-size: 150%;
    }



    .long-copy {

        width: 100%;
        margin-left: 0%;
    }


    .perfect-step {
        margin-bottom: 20px;
    }

    .perfect-box:first-child {
        text-align: center;
    }



    /* Made image larger */

    .perfect-step div {
        height: 40px;
        /* Height and Width have to be the same 50px x 50px or whatever   */
        width: 40px;
        margin-right: 15px;
        /* Gives more space between the cirled numbers and the content to the right   */
        padding: 4px;
        font-size: 120%;
    }

    .col {
        width: 100%;
        margin: 0 0 4% 0%;
    }
    
    
    

    /* The Columns weren't lining up due to .COL - margin: 1% 0 1% 1.6% in the GRID CSS STYLESHEET So changed it to 4% to give it padding on the bottom but line up everything.    */

    .footer-nav {
        display: none;
    }

    .social-links {
        text-align: center;
        width: 100%;
    }
    
  

    .row {
        text-align: center;
    }

    header {
        text-align: center;
    }

    .contact-form {
        width: 100%;
    }

    section {
        padding: 25px 0;
    }
}


/*  Smaller devices 0-480px */
@media only screen and (max-width: 480px) {}