/*
 * This document hacks the home slide image and make the gueisha visible.
 * The metrics are aspect-ratio of viewport (area taken by <html> tag) in landscape, as listed below:

    * 16:10
    * 16:9
    * 5:4
    * 5:3
    * 4:3
    * 3:2

 * The following screens were considered (sorted by width-size):

    * 320x480   (Apple iPhone 4)
    * 320x533   (Nokia Lumia 520)
    * 320x568   (Apple iPhone 5)
    * 360x640   (Samsung Galax S4, Samsung Galaxy SIII, Samsung Galaxy Note II, Samsung Galaxy Note 3, Nokia N9, Google Nexus 5, Blackberry Z30)
    * 375x667   (Apple iPhone 6)
    * 384x640   (Google Nexus 4, LG Optimus L70)
    * 414x736   (Apple iPhone 6 Plus)
    * 960x600   (Google Nexus 7)
    * 1024x600  (Blackberry PlayBook)
    * 1204x768  (Apple iPad Mini, Apple iPad)
    * 1280x800  (Laptop with MDPI screen, Google Nexus 10)
    * 1280x950  (Laptop with touch)
    * 1440x900  (Laptop with HiDPI screen)
    * 2560x1600 (Amazon Kindle Fire HDX)

 * All tests were made in Google Chrome browser v43.
 * Reminder: the Brushed template is NOT mobile-first, which means that some hacks are necessary - like this one - to make it adaptable for every device.

 * Update 6/29/2015: gueisha image is not required to be visible for small and x-small screens by the client.
 */


@media (aspect-ratio: 16/10) and (orientation: landscape) {
    #supersized li.activeslide img {
		left: -20%;
	}
}

@media (aspect-ratio: 16/9) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -10%;
    }
}

@media (aspect-ratio: 4/3) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -45%;
    }
}

@media (aspect-ratio: 3/2) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -30%;
    }
}

@media (aspect-ratio: 5/4) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -50%;
    }
}

@media (aspect-ratio: 5/3) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -20%;
    }
}

/* Exception - Blackberry Playbook (resolution 1024:600) */
@media (aspect-ratio: 1024/600) and (orientation: landscape) {
    #supersized li.activeslide img {
        left: -15%;
    }
}