/* 
=====================================================================
*   Woo Media Queries
*   url: styleshout.com
*   05-02-2014
/* ================================================================== */


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

    /* Hero Section
    ------------------------------------------------------------------ */
    .hero-text { width: 82%; }
    .hero-text h1 { font: 38px/1.2em 'Raleway', sans-serif; } 

    /* Testimonials Section
------------------------------------------------------------------- */
    #testimonials .text-container { width: 82%; }

    /* Call To Action Section
    ------------------------------------------------------------------- */
    #call-to-action h2 { font: 26px/36px 'Raleway', sans-serif; }
    #call-to-action p { font-size: 16px; }

}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

    /* General and Common Styles */
    .section-head h1 { font: 18px/30px 'Raleway', sans-serif; }

    /* Header Styles
    ------------------------------------------------------------------ */
    header .header-social { font-size: 18px; }
    header .header-social li { margin-right: 15px; }

    /* Hero Section
   ------------------------------------------------------------------ */
    #hero { padding-top: 10px; }
    .hero-text { width: 88%; }
    .hero-text h1 { font: 35px/1.2em 'Raleway', sans-serif; }
    .hero-text p { font: 15px/30px 'opensans-regular', sans-serif; } 

    /* nav-wrap */
    #nav-wrap { font: 10px 'montserrat-regular', sans-serif; }

    /* Features Section
    ------------------------------------------------------------------- */
    #features .feature { margin-bottom: 30px; }
    #features .right { padding-left: 18px; }
    #features .left { padding-right: 18px; }
    #features h3 { margin-bottom: 6px; } 

    /* Pricing Section
    ------------------------------------------------------------------- */
    .pricing-tables { 
        width: 82%; 
        margin: 0 auto;
    }

    /* Call To Action Section
    ------------------------------------------------------------------- */
    #call-to-action .header-col h1:before {
        font-size: 66px;
        line-height: 66px;
    }
    #call-to-action h2 { font: 25px/36px 'montserrat-bold', sans-serif; } 
    #call-to-action .action .button { font: 14px/24px 'montserrat-bold', sans-serif; } 
    #call-to-action p { font-size: 15px; }

    /* Testimonials Section
    ------------------------------------------------------------------- */
    #testimonials blockquote p { font-size: 24px; }  

    /* Subscribe Section
    ------------------------------------------------------------------- */
    #subscribe h1 { margin-bottom: 18px; }
    #mc_embed_signup input[type="submit"] { width: 46%; }
    #mc_embed_signup input[type="email"] { width: 46%; }

    /* Footer
    ------------------------------------------------------------------- */
    footer .right-cols .columns { width: 50% !important; }
    footer .right-cols .columns:last-child { 
        clear: left; 
        float: left;      
    }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .row .two {
        width: 50%;
    }

    .row .six { width: 100%; 
    }
    

    .primary {
    position: relative;
    margin: 0 auto;
    text-align: center;
    line-height: 2.2rem;
    margin-bottom: 2rem;
    right: 0;
    }


    .pastilla {
        position: relative;
        top: 0px;
 
        right: 0px;
        text-align: center
    }

    .copy {

    border-left: none;

    }

    #features h3 {
    padding: 2.5rem 5rem;
}


    /* General and Common Styles */
    .section-head { padding: 0 30px; }

    /* mobile navigation
    -------------------------------------------------------------------- */
    #nav-wrap {
        font: 11px 'montserrat-regular', sans-serif;
        background: transparent !important;
        letter-spacing: 1.5px;  
        color: #515968;

        position: absolute;
        top: 0;
        right: 0;
    }
    #nav-wrap > a {	   
        text-align: left;
        border: none;            
        color: #fff;
        font-size: 12px;
        height: 54px;
        line-height: 54px; 
        float: right;     

        font: 0/0 a;
        text-shadow: none;
        color: transparent;

        position: relative;
        top: 0px;
        right: 36px;
    }
    #nav-wrap > a:before {
        font-family: 'FontAwesome';
        content: "\f0c9";
        color: #fff;
        margin: 0;
        font-size: 25px;
        line-height: 54px;
        text-align: left;      
        display: block; 
        float: right;     
    }

    /* hide menu panel */
    #nav-wrap ul#nav {
        padding: 24px 36px 48px 36px;
        background: #1D2025; 
        height: auto;
        display: none;
        clear: both;
        width: auto; 

        position: relative;
        top: 0;
        right: 30px;           
    }

    /* display toggle buttons */
    .no-js #nav-wrap:not( :target ) > a:first-of-type,
    .no-js #nav-wrap:target > a:last-of-type  {
        display: block;
    } 
    .js #nav-wrap a { display: block; }  

    /* display menu panels - no JS*/
    .no-js #nav-wrap:target > ul#nav  {
        display: block;           
    }

    ul#nav li {
        display: block;
        height: auto;      
        text-align: left;
        border-bottom: 1px solid #2D2E34;
        border-bottom-style: dotted; 
    }

    ul#nav li a {  
        display: block;   
        width: auto;  
        margin: 0;
        padding: 0;      
        margin: 12px 0; 
        line-height: 16px; /* reset line-height from 54px */
        border: none;
    }  

    /* hide social icons 
    .header-social { display: none; }*/


    /* Header Styles
    -------------------------------------------------------------------- */
    header .logo { margin-right: 36px; }

    /* Hero Section
    -------------------------------------------------------------------- */
    #hero { padding-top: 10px; }
    .hero-text { width: 92%; }
    .hero-text h1 { font: 31px/1.5em 'Raleway', sans-serif; }
    .hero-text p { font: 14px/24px 'opensans-regular', sans-serif; } 

    /* Hero CTA Buttons */
    #hero .buttons { margin-bottom: 30px; }
    #hero .buttons .button {
        display: block;
        width: 70%;
        margin: 0 auto 18px auto;
        font: 13px/24px 'montserrat-bold', sans-serif;
        letter-spacing: 1.5px;
    }

    /* Features Section
    --------------------------------------------------------------------- */   
    #features .feature {
        margin-top: 12px;
    }

    #features .right {
        padding-left: 30px;
        float: none;
    }
    #features .left {
        padding-right: 30px;
        float: none;
    }
    #features h3 {  }  
    #features h2 { 
        margin-top: 0.5em;
    }  



    /* Pricing Section
    ------------------------------------------------------------------- */
    .pricing-tables { width: 80%; }


    /* Call To Action Section
    ----------------------------------------------------------------- */
    #call-to-action { text-align: center; }
    #call-to-action h1 {
        font: 16px/24px 'montserrat-bold', sans-serif;;
        text-align: center;
        margin-bottom: 30px;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
    }
    #call-to-action h1 span { display: block; }
    #call-to-action .header-col h1:before { content: none; }

    /* Screenshots
    ------------------------------------------------------------------- */
    #screenshots-wrapper {
        width: 80%;
        margin: 0 auto;
    } 
    #screenshots-wrapper .columns { margin-bottom: 36px; }


    /* Testimonials Section
    ------------------------------------------------------------------- */
    #testimonials .quote-left,      
    #testimonials .quote-right {    
        font-size: 30px;
        margin-top: -25px;
    }
    #testimonials .text-container { width: 80%; }
    #testimonials blockquote p { 
        font-size: 20px; 
        line-height: 30px;
    }   

    /* Subscribe Section
    ------------------------------------------------------------------- */
    #mc_embed_signup { width: 90%; }
    #mc_embed_signup input[type="submit"], 
    #mc_embed_signup input[type="email"] { 
        width: 100%;
        text-align: center; 
        margin-bottom: 30px;
    }

    /* footer
    ------------------------------------------------------------------------ */
    footer { text-align: center; }
    footer .info { padding-right: 30px; }
    footer .info p { margin-bottom: 18px; }
    footer h3:before { text-align: center; }
    footer .right-cols {       
        width: 90% !important;
        margin: 0 auto ;
        margin-bottom: 42px; 
        text-align: center;
    }
    footer .right-cols .columns {
        float: left;       
        padding: 0 30px;    
    }
    footer .right-cols .columns:last-child { 
        clear: both; 
        float: left;
    }   

    /* Go To Top Button */
    #go-top { margin-left: -22px; }
    #go-top a {
        width: 54px;
        height: 54px;
        font-size: 18px;
        line-height: 54px;
    }

}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

    /* mobile navigation
    -------------------------------------------------------------------- */
    #nav-wrap { width: 100%; }
    #nav-wrap ul#nav { 
        width: 100%;
        float: none;
        right: 0;             
    }

    /* Hero Section
    -------------------------------------------------------------------- */
    #hero { padding-top: 10px; }
    .hero-text { width: 96%; }
    .hero-text h1 { font: 20px/2em 'Raleway', sans-serif; }
    .hero-text p { font: 13px/24px 'opensans-regular', sans-serif; } 

    /* Testimonials Section
    ------------------------------------------------------------------- */
    #testimonials .quote-left,      
    #testimonials .quote-right { font-size: 28px; }  
    #testimonials blockquote p { font-size: 20px; }

    /* Footer
    ------------------------------------------------------------------- */
    footer .right-cols .columns { padding: 0 10px; }        

}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 

    /* Hero Section
   -------------------------------------------------------------------- */
    .hero-text { width: 100%; }

    /* Pricing Section
    ------------------------------------------------------------------- */
    .pricing-tables { width: 92%; }

    /* Screenshots
    ------------------------------------------------------------------- */
    #screenshots-wrapper { width: 92%; }  

    /* Testimonials Section
    ------------------------------------------------------------------- */
    #testimonials .text-container { width: 85%; }
    #testimonials blockquote p { 
        font-size: 18px; 
        line-height: 27px;
    }   

} 

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

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

    #nav-wrap ul#nav { display: block !important; }

}