/*-------------------------------------------------------------------------------------------------------------------	
    
=Media Queries	
	
--------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------
    480px - Fix font resize behaviour
--------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-device-width: 480px) {
    html {-webkit-text-size-adjust: none;}
}

/*-------------------------------------------------------------------------------------------------------------------
    480px - Mobile Landscape
--------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 480px) {
    body {background-size: 835px;}
}

/*-------------------------------------------------------------------------------------------------------------------
    740px
--------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 740px) {
    #header {
	    padding-top: 40px;
    }
    #header .logo span {
        font-size: 1.8em;
    }
    nav[role="navigation"] ul li a {
	    padding: .6em 1.8em;
    }
    main {	
        background-size: 10px;
    }
    .intro {
	    margin: 0;
	    max-width: 90%;
        padding: 7em 0;
    }
    .intro h1 {
	    font-size: 4.6em;
    }
    .featured-image {
        float: right;
    }
    #footer {
        max-width: 119.4em; /* 1194px / 10px */
    }
    #footer p {
        float: right;
        padding-right: 2em;
    }
}

/*-------------------------------------------------------------------------------------------------------------------
    960px
--------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
    #header {
	    padding-top: 50px;
    }
    #header .logo span {
        font-size: 2.1em;
    }
    nav[role="navigation"] ul li a {
	    padding: .6em 2em;
    }
    .intro {
	    margin: 0;
	    max-width: 840px;
        padding: 10em 0 0 0;
    }
    .intro h1 {
	    font-size: 6em;
    }
    .intro p {
        font-size: 1.4em;
    }
}