/*Smal Phones */
@media only screen and (max-width: 480px) {
    
}

/*phones to tablets Phones */
@media only screen and (max-width: 767px) {
    body {font-size: 16px;}
    section {padding: 0;}
    .row, .hero-text-box {padding: 0 2%;}
    .col {width: 100%;}
    
    .logo {
    height: 50px;
    margin-left: 0%;
    margin-top: 0%;
    
    }
    
    iframe {
    width: 90%;
    height: 170px;
    }
    
    .wife {
    padding: 30px;
    display: block;
    margin-left: 30px;
    }
    
    .picture {
    width:340px;
    }

    .video {
    padding: 5px;
    }

    .video-body {
        padding: 0px;
    }
    .video-text-box {
    width: 320px;
    height: 555px;
    position: absolute;
    display: block;
    word-wrap: break-word;
    padding-left: 70px;
    }
    
    .video-body {
        padding: 0;
    }
    
    .main-nav {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-left: 0%;
    width: 320px;
    } 

    .main-nav li {
        margin-left: 5px;
        margin-top: 10px;
        font-size: 80%;
            
    }
    
    .main-nav li a:hover,
    .main-nav li a:active {
    border-bottom: #fff;
    }
    
    h1 {font-size: 130%;}
    h2 {font-size: 160%;}
    h3 {font-size: 90%;}
    h4 {font-size: 80%;}
    
    footer {display: none}
    .footer {display: none}
    
/* -------------------------------- */
/*           Archive                */
/* -------------------------------- */
.container {
    width: 300px;
    height: 450px;
    margin: 10px;
    background-color: black;
    color: black;
    margin-left: 40px;
}

.archive-title {
    font-size: 90%;
    text-align: center;
    color: black;
}

.archive-list-video { 
    padding: 2px;
}

.archive-video-text {
    padding: 10px;
    color: white;
    font-size: 15px;
    margin: 0px;
    font-family: "Helvetica"
}

    .archive-video-text a {
        color: white;
    }
    
/*lanscape Phones */
@media only screen and (max-width: 1023px) {
    body {font-size: 18px;}
    section {padding: 60px 0;}
    .long-copy {
        width: 80%;
        margin-left: 10%;
    }
    .steps-box {margin-top: 10px;}
    .steps-box:last-child {margin: 10px;}
    .work-step {margin-bottom: 40px;}
    .work-step:last-of-type {margin-bottom: 60px;}
    .app-screen {width: 50%;}
    ion-icon {width: 20px;}
    .city-feature {font-size: 90%;}
    .plan-box {
        width: 100%;
        margin-left: 0%;
    }
    .plan-price {font-size: 250%;}
    .contact-form {width: 80%;}
}

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