/* Big tablets to 1200px (widhts smaller than 1140px row)*/

@media only screen and (max-width: 1200px){
    .hero-text-box{
        padding: 0 2%;
        width: 100%;
    
    }
    .row{
        padding: 0 2%;
    }
    }


/* small tablets to big tablets from 788 to 1023px*/

@media only screen and (max-width:1023px){
    body{font-size: 18px;}
    section{padding: 60px 0;}
    .steps-box{margin-top: 10px;}
    .steps-box:last-child{margin-top: 20px;}
    .works-step{margin-bottom: 30px;}
    .works-step:last-of-type{margin-bottom: 60px;}
    
    .app-screen{width: 50%;}
    
    .icon-small{
        width: 17px;
        margin-right: 5px;
    }
    .city-feature{font-size: 90%}
    
    .plan-box{width: 100%;
        margin-left: 0%}
    .plan-price{
        font-size: 250%;}
    .contact-form{
        width: 80%}
    .card__side {
        height: auto;
        width: 100%;
        position: relative;
        -webkit-box-shadow: none;
        box-shadow: none; }
    }

/* small tablets to big tablets from 788 to 1023px*/
@media only screen and (max-width: 56.25em), only screen and (hover: none) {

     .card {
      height: auto;
      border-radius: 3px;
      background-color: #fff;
      -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
      .card__side {
        height: auto;
        width: 100%;
        position: relative;
        -webkit-box-shadow: none;
        box-shadow: none; }
        .card__side--back {
          -webkit-transform: rotateY(0);
          transform: rotateY(0);
          -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%); }
      .card:hover .card__side--front {
        -webkit-transform: rotateY(0);
        transform: rotateY(0); }
      .card__details {
        padding: 1rem 3rem; }
      .card__cta {
        position: relative;
        top: 0%;
        left: 0;
        -webkit-transform: translate(0);
        transform: translate(0);
        width: 100%;
        padding: 4rem 4rem 2rem 4rem; }
      .card__price-box {
        margin-bottom: 3rem; }
      .card__price-value {
        font-size: 4rem; }
    
    .btn-buy:link,
    .btn-buy:visited,
    input[type=submit]{
    display: inline-block;
    padding: 5px 5px;

    
}
}


/* small phones to small tablets from 481 to 767px*/

@media only screen and (max-width: 767px){
    body{font-size: 16px;}
    section{padding: 30px 0;}
    
    .row,
    .hero-text-box{
        padding: 0 4%;
    }
    .col{ width: 100%;
        margin:0% 0% 4% 0%;  }
   
    .main-nav{ display: none;}
    
    .mobile-nav-icon{display: inline-block;}
    
    .main-nav{
        float: left;
        margin-top: 15px;
        margin-left: 25px;
    }
    
   .main-nav li{
        display: block;
    }
   
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 2px 0;
        font-size: 90%;
    }
    .sticky .main-nav { margin-top: 10px; }

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

    .sticky .mobile-nav-icon{margin-top: 10px;}
    .sticky .mobile-nav-icon i{
        color:#555;
    }
    .long-copy{
        width: 100%;
        margin-left: 0%;}

    h1 {font-size:180%; }
    h2 {font-size:150%; }
    
    .works-step{margin-bottom: 20px;}
    .works-step:last-of-type{margin-bottom: 20px;}
    
    .works-step div{
        border-radius: 50%;
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }
    .steps-box:first-child{
        text-align: center;
    }
    /*Map section*/


    .map-box{
        width: 90%;
        margin-top: 30px;
        margin-left: 5%;
        height:auto;
        position: relative;
    }
    .map{
        width: 100%;
        height: 250px;
        position: relative;
        z-index: 0;
    }

    .details-box{
        position: relative;
        width: 100%;
        height: auto;
        padding: 10px;
       }

    .details-box ul{
        list-style: none;
        font-size: 80%;
}
    
        /*About Me*/
    .about-me img{
        display: inline-block;
        width:60%;
        margin-right: 10px;
    }
    .about-me div:first-child{
        text-align: center;
        height: auto;
        border-right: 1px solid #f2f2f2;
    }

    .about-me div:last-child{
        padding: 10px 40px;
        height: auto;
    }

    .about-me{
        font-weight: 400;
        font-size: 80%;
        line-height: 29px;
        color: #fff;
        text-align: justify;
    }
    
    
    .section-form{
        background-size: cover;
        background-position: center;
        height: auto;
        background-attachment: fixed;
}
    .me{
    height: auto;
    background-attachment: fixed;
}

    .feature-box{
    font-size: 80%;
        
    }
    }


/* small phones from 0 to 480px*/

@media only screen and (max-width:480px){
  
}