/*--------------------------
Author: Jenn Pereira
Author Website: PereiraDigitalMedia.com
Theme: Ophiuchus - Mobile Apps Landing Page
This is the CSS for Mobile Responsiveness of Ophiuchus Theme
--------------------------*/


/*--------------------------
-------- MIN 1920px --------
--------------------------*/

@media only screen and (min-width: 770px) {
    #home {
        height: auto;
    }
    .home-bg {
        background-size: 100%;
    }
}

@media only screen and (min-width: 1920px) {}


/*--------------------------
-------- MAX 1170px --------
--------------------------*/

@media only screen and (max-width: 1170px) {
    #navigation {
        padding: 0 20px;
        height: 65px;
    }
    #subscription {
        height: auto;
        min-height: 450px;
        padding-bottom: 20px;
        padding-top: 30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 35px;
    }
}


/*--------------------------
-------- MAX 1024px --------
--------------------------*/

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


/*--------------------------
--------- MIN 970px --------
--------------------------*/

@media only screen and (min-width: 970px) {
    #navigation .nav-menu {
        display: block !important;
        margin-right: -50px;
        min-width: 65%;
        max-width: 90%;
    }
}


/*--------------------------
--------- MAX 970px --------
--------------------------*/

@media only screen and (max-width: 970px) {
    #navigation a.mini-nav-button {
        display: block;
    }
    /* Mobile Nav Menu */
    .not-visible-nav {
        opacity: 0;
    }
    #navigation .nav-menu {
        display: none;
        height: auto;
        top: 100%;
        left: 0;
        width: 100%;
        position: absolute;
        background: rgba(255, 255, 255, 0.97) !important;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    }
    #navigation ul.nav li {
        display: inline-block;
        height: auto;
        width: 100%;
    }
    #navigation ul.nav li a {
        display: block;
        height: auto;
        width: 100%;
        padding: 0 20px;
        color: #009745;
        border-top: 1px solid #fff;
        line-height: 40px;
    }
    #navigation ul.nav li a:hover,
    #navigation ul.nav li.active a {
        border-top: 1px solid #fff;
    }
    #subscription {
        height: auto;
        min-height: 850px;
        padding-top: 20px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 35px;
    }
    .cent {
        width: 100%;
        padding: 1em;
    }
}


/*--------------------------
--------- MAX 800px --------
--------------------------*/

@media only screen and (max-width: 800px) {
    #navigation {
        padding: 0 20px;
        height: 55px;
    }
    .nav-logo a.logo img {
        height: auto;
    }
    .nav-logo {
        top: 0%;
        -webkit-transform: translateY(-55%);
        -moz-transform: translateY(-55%);
        transform: translateY(-55%);
    }
    #subscription {
        height: auto;
        min-height: 900px;
        padding-top: 30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 25px;
    }
    .button,
    .button:hover,
    .button:focus,
    .button:active {
        padding: 0px 5px;
        top: 7px;
        right: 60px;
        width: 25%;
        height: 79%;
        color: #f3f3f3;
    }
}


/*--------------------------
--------- MAX 768px --------
--------------------------*/

@media only screen and (max-width: 768px) {
    #subscription {
        height: auto;
        min-height: 900px;
        padding-top: 30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 35px;
    }
}


/*--------------------------
--------- MAX 640px --------
--------------------------*/

@media only screen and (max-width: 640px) {
    .testimonial {
        font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
        font-size: 1em;
    }
    #subscription {
        height: auto;
        min-height: 950px;
        padding-top: 30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 25px;
    }
}


/*--------------------------
--------- MAX 480px --------
--------------------------*/

@media only screen and (max-width: 480px) {
    .testimonial {
        font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
        font-size: 1em;
    }
    p {
        font-size: 12px;
    }
    #subscription {
        height: auto;
        min-height: 1200px;
        padding-top: 30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 25px;
    }
}


/*--------------------------
--------- MAX 360px --------
--------------------------*/

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

@media screen and (max-width: 63.875em) {
    .ac-wrapper {
        font-size: 60%;
        width: 100%;
        padding: 0 20px;
    }
    .content h1 {
        width: 100%;
        text-align: center;
        font-size: 3.5em;
        top: 0;
        left: auto;
        position: relative;
    }
    .about h2,
    .features h2,
    .team h2,
    .benefits h2,
    .downloads h2,
    .contact h2 {
        width: 100%;
        text-align: center;
        font-size: 2.5em;
        top: 0;
        left: auto;
        position: relative;
    }
    .ac-device {
        margin: 0;
        width: 100%;
    }
    .ac-device h3 {
        width: 50%;
        left: 290px;
    }
    .ac-wrapper h2 {
        left: 308px;
        padding: 0;
        text-align: left;
        margin-left: 30px;
    }
    .ac-device nav {
        left: 280px;
        font-size: 2em;
    }
}

@media screen and (max-width: 39.8125em) {
    .ac-grid {
        width: 90%;
        left: 5%;
        margin-left: 0;
        padding-top: 150px;
    }
    .ac-grid a {
        width: 22%;
    }
}

@media screen and (max-width: 35.6875em) {
    .ac-wrapper {
        padding: 0 20px 100px;
    }
    #home .phone1,
    #home .phone2,
    #home .phone3,
    #home .phone4 {
        background-image: none;
    }
    #contact {
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .ac-wrapper h2 {
        width: 100%;
        text-align: center;
        margin: 0 0 1em;
        top: 0;
        left: auto;
        position: relative;
    }
    .about h2,
    .features h2,
    .team h2,
    .benefits h2,
    .downloads h2,
    .contact h2 {
        width: 100%;
        text-align: center;
        font-size: 2em;
        top: 0;
        left: auto;
        position: relative;
    }
    #downloads {
        padding-top: 30px;
    }
    .download-content {
        visibility: hidden;
        font-size: 0px;
        margin-top: -30px;
    }
    .footer-icon {
        padding-right: 5px;
        font-size: 25px;
    }
    #subscription h2 {
        font-size: 2em;
        top: 0;
        left: auto;
        position: relative;
    }
    #subscription h3 {
        font-size: 1em;
        top: 0;
        left: auto;
        position: relative;
    }
    #subscription {
        height: auto;
        min-height: 850px;
        padding-bottom: 20px;
        padding-top: 30px;
    }
    .content h1 {
        width: 100%;
        text-align: center;
        font-size: 3em;
        top: 0;
        left: auto;
        position: relative;
    }
    .ac-device {
        margin: 0 auto;
        width: 288px;
    }
    .ac-device h3 {
        position: relative;
        margin: 0;
        left: auto;
        top: auto;
        width: 100%;
        padding-top: 100px;
        display: block;
        text-align: center;
    }
    .ac-device nav {
        position: relative;
        padding-top: 20px;
        text-align: center;
        bottom: auto;
        margin: 0;
        left: auto;
    }
}