/* Big tablets to 1200px( width less than 1140px ) */
@media only screen and (max-width: 1200px){
    .hero-text-box {
        width: 100%;
        padding: 0 2%;
    }
    
    .row{
        padding: 0 2%;
    }
}

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px){
    body {font-size: 90%;}
    
    section {padding: 60px 0;}
    
    .long-copy {width: 80%;}
    
    .steps-box:first-child {margin-top: 10px;}
    .steps-box:last-child {margin-top: 10px;}
    .app-screen{width: 50%;}
    .work-steps {margin-bottom: 40px;}
    .work-steps:last-of-type {margin-bottom: 60px;}
    
    .plan-box {width: 100%; margin-left: 0;}
}

/* Small phones to small tablets: width below 480px to 768px */
@media only screen and (max-width: 767px){
    body {font-size: 80%;}
    
    section {padding: 30px 0;}
    
    .hero-text-box, .row {padding: 0 4%;}
    
    .col{
        width: 100%;
        margin: 0 0 4% 0;
    }
    
    .logo {
        height: 60px;
    }


    .mobile-nav-icon {
        display: inline-block;
    }
    .main-nav{
        float:left;
        display: none;
        margin-top: 35px;
        margin-left: 25px;
        font-size: 20px;
    }
    .main-nav li{
        display: block;
    }
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited{ padding: 10px 0; }
    .sticky .main-nav {margin-top: 10px;}
    .sticky .mobile-nav-icon svg {fill: #333;}
    .sticky .mobile-nav-icon {margin-top: 10px;}



    .long-copy {width: 100%; margin: 0;}
    
    h1{ font-size: 180%;}
    h2{ font-size: 150%;}
    
    .app-screen{width: 40%;}
    
    .steps-box:first-child{text-align: center;}
    
    .work-steps div {
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        clear: both;
    }
    
    .work-steps p {
        padding-top: 10px;
    }
    
    .work-steps {margin-bottom: 20px;}
    .work-steps:last-of-type {margin-bottom: 20px;}
}

/* Small phones: width 380 to 480px */
@media only screen and (max-width: 480px){
    section {padding: 25px 0;}
    .contact-form {width: 100%;}
}

/*Extremely small phones: width 0 to 380px */
@media only screen and (max-width: 380px){
    .btn-app img {
        height: 30px;
        width: auto;
    }
    h1 {font-size:150%;}
    h2 {font-size: 130%;}
    
    .main-nav li{
        padding-bottom: 15px;
    }
    
    .hero-text-box {top: 60%;}
}