/*-----GLOBAL-----*/

/*FONTS*/

@font-face {
	font-family: 'headings';
	src: url('../fonts/subset-MysteryQuest.woff2') format('woff2'),
		url('../fonts/subset-MysteryQuest.woff') format('woff'),
		url('../fonts/subset-MysteryQuest.ttf') format('truetype'),
		url('../fonts/subset-MysteryQuest.svg#MysteryQuest') format('svg');
}

@font-face {
    font-family: 'general';
    src: url('../fonts/overlock-regular.woff2') format('woff2'),
         url('../fonts/overlock-regular.woff') format('woff'),
         url('../fonts/overlock-regular.ttf') format('truetype'),
         url('../fonts/overlock-regular.svg#overlockregular') format('svg');
}

h2, h3, h4 {
    font-family: 'headings', times, serif; font-weight: normal; font-style: normal; 
}

p, span, a, li {
    font-family: 'general', verdana, sans-serif; font-weight: normal; font-style: normal;
}

/*RESET*/

html, body, header, nav, main, section, footer, div, ul {
    display: block; margin: 0; padding: 0;
}

img, video {
    border: 0; margin: 0; padding: 0; 
}

/*COLORS*/

body {
    background-color: #8B0000; 
}

nav {
    color: #C18180;
}

nav a {
    color: #FFF;
}

nav a:hover {
    color: #000;
}

main, main a {
    color: #000; background-color: #F2ECD7; 
}

h2, h3, h4 {
    color: #8B0000;
}

main a:hover {
    color: #8B0000;
}

/*GENERAL*/

body {
    width: 100%;
}

header {
    margin: 0 auto; padding: 2.5%;
}

h1 {
    margin: 0; padding-bottom: 16.68%; background: url('../graphics/header.png') no-repeat top left; background-size: 100%;  
}

h1 span {
    display: none; font-size: 0;
}

nav li {
    display: inline-block; margin-right: 5%; padding: 0; 
}

nav li:last-child {
    margin-right: 0;
}

nav a, nav span {
    display: block; margin: 0; overflow: hidden; background: url('../graphics/nav.svg') no-repeat; 
}

main {
    height: 100%; margin: 0 1rem 1rem 1rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
}

.wrapper {
    margin: 0 auto; padding: 4%;
}

section {
    border-bottom: dashed #8B0000 0.125rem; padding: 4% 0;
}

section:first-of-type {
    padding-top: 0;
}

img, video {
    max-width: 100%; border-radius: 0.25rem;
}

.bottom-left, .bottom-right {
    display: inline-block; width: 50%; vertical-align: middle;
}

.bottom-right {
    color: #8B0000; text-align: right;
}

/*TYPOGRAPHY*/

h2, h3 {
    display: inline-block; overflow: hidden; margin: 0; padding-left: 0.25rem;
}

h2 {
    font-size: 3.5rem; padding-right: 7.5rem; background: url('../graphics/h2.svg') no-repeat; background-size: 7rem 87.5rem;
}

.introducing h2 {
    background-position: right 0;
}

.performance h2 {
    background-position: right -17.5rem;
}

.reviews h2 {
    background-position: right -35rem;
}

.profile h2 {
    background-position: right -52.5rem;
}

.contact h2 {
    background-position: right -70rem;
}

h3 {
    font-size: 2.5rem; padding-right: 5.5rem; background: url('../graphics/h3.svg') no-repeat; background-size: 5rem 175rem;
}

h3.video {
    background-position: right 0;
}

h3.show {
    background-position: right -12.5rem;
}

h3.visual {
    background-position: right -25rem;
}

h3.workshop {
   background-position: right -37.5rem;
}

h3.booklets {
    background-position: right -50rem;
}

h3.included {
    background-position: right -62.5rem;
}

h3.requirements {
    background-position: right -75rem;
}

.libraries h3 {
    background-position: right -87.5rem;
}

.arts-centres h3 {
    padding-left: 0.5rem; background-position: right -100rem;
}

.schools h3 {
    background-position: right -112.5rem;
}

.shopping-centres h3 {
    background-position: right -125rem;
}

.newspapers h3 {
    background-position: right -137.5rem;
}

h3.worldwide {
    background-position: right -150rem;
}

h3.highlights {
    background-position: right -162.5rem;
}

ul {
    list-style: none; margin: 0; padding: 0;
}

p, main span, main a {
    margin: 0; font-size: 1rem; line-height: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

.reviews section p {
    margin-bottom: 1.5rem;
}

p:last-of-type, .reviews section p:last-of-type {
    margin-bottom: 0;
}

.reviews section p span {
    color: #8B0000;
}

a {
    text-decoration: none; outline: 0;
}

.top, .backdrop, .sound, .photos, .monarchy, .president, .australian {
    display: inline-block; height: 1.5rem; overflow: hidden; padding-left: 2rem; line-height: 1.5rem; background: url('../graphics/misc.svg') no-repeat; background-size: 3rem 52.5rem;   
}

.top {
    display: inline-block; overflow: hidden; margin-top: 4%; padding-left: 1.5rem; height: 1.5rem; line-height: 1.5rem; background-position: left 0;
}

.backdrop {
    background-position: left -7.5rem; margin-top: 0.5rem;
}

.sound {
    background-position: left -15rem;
}

.photos {
    background-position: left -22.5rem;
}

.monarchy {
    background-position: left -30rem; margin-top: 0.5rem;
}

.president {
    background-position: left -37.5rem;
}

.australian {
    background-position: left -45rem; margin-bottom: 0.5rem;
}

.post, .email, .phone {
    overflow: hidden; padding-left: 3.75rem; margin-bottom: 1.5rem; background: url('../graphics/contact.svg') no-repeat; background-size: 6rem 45rem;
}

.post {
    background-position: left 0;
}

.email {
    background-position: left -15rem;
}

.phone {
    background-position: left -30rem; margin-bottom: 0;
}

@media screen and (max-width: 950px) {
    
    html {
        font-size: 16px;
    }
    
    header, .wrapper {
        max-width: 600px;
    }
    
    nav {
        margin-top: 2.5%;
    }
    
    nav ul {
        text-align: center;
    }
    
    nav a, nav span {
        height: 1.7rem; font-size: 1.5rem; line-height: 1.7rem; padding-top: 3.5rem; background-size: 6rem 225rem; 
    }
    
    nav a.introducing {
        background-position: 50% -150rem;
    }

    nav a.introducing:hover {
        background-position: 50% -75rem;
    }

    nav span.introducing {
        background-position: 50% 0px;
    }

    nav a.performance {
        background-position: 50% -165rem;
    }

    nav a.performance:hover {
        background-position: 50% -90rem;
    }

    nav span.performance {
        background-position: 50% -15rem;
    }

    nav a.reviews {
        background-position: 50% -180rem;
    }

    nav a.reviews:hover {
        background-position: 50% -105rem;
    }

    nav span.reviews {
        background-position: 50% -30rem;
    }

    nav a.profile {
        background-position: 50% -195rem;
    }

    nav a.profile:hover {
        background-position: 50% -120rem;
    }

    nav span.profile {
        background-position: 50% -45rem;
    }

    nav a.contact {
        background-position: 50% -210rem;
    }

    nav a.contact:hover {
        background-position: 50% -135rem;
    }

    nav span.contact {
        background-position: 50% -60rem;
    }
    
    img, video {
        margin-top: 4%;
    }
    
    img.left, .movie {
        display: none;
    }
    
    .email, .phone {
        display: inline-block; width: 48%;
    }
    
    .email {
        margin-right: 4%;
    }
    
}

@media screen and (min-width: 951px) and (max-width: 1250px) {
    
    html {
        font-size: 20px;
    }
    
    header, .wrapper {
        max-width: 950px;
    }
    
    nav {
        margin-top: 2.5%;
    }
    
    nav ul {
        text-align: center;
    }
    
    nav a, nav span {
        height: 1.7rem; font-size: 1.5rem; line-height: 1.7rem; padding-top: 3.5rem; background-size: 6rem 225rem; 
    }
    
    nav a.introducing {
        background-position: 50% -150rem;
    }

    nav a.introducing:hover {
        background-position: 50% -75rem;
    }

    nav span.introducing {
        background-position: 50% 0px;
    }

    nav a.performance {
        background-position: 50% -165rem;
    }

    nav a.performance:hover {
        background-position: 50% -90rem;
    }

    nav span.performance {
        background-position: 50% -15rem;
    }

    nav a.reviews {
        background-position: 50% -180rem;
    }

    nav a.reviews:hover {
        background-position: 50% -105rem;
    }

    nav span.reviews {
        background-position: 50% -30rem;
    }

    nav a.profile {
        background-position: 50% -195rem;
    }

    nav a.profile:hover {
        background-position: 50% -120rem;
    }

    nav span.profile {
        background-position: 50% -45rem;
    }

    nav a.contact {
        background-position: 50% -210rem;
    }

    nav a.contact:hover {
        background-position: 50% -135rem;
    }

    nav span.contact {
        background-position: 50% -60rem;
    }
    
    .left, .right, .movie {
        width: 48%; display: inline-block; vertical-align: middle;
    }
    
    .left {
        margin-right: 4%;
    }
    
    .tablet {
        display: none;
    }
    
}

@media screen and (min-width: 1251px) {
    
    html {
        font-size: 24px;
    }
    
    header, .wrapper {
        max-width: 1250px;
    }
    
    h1 {
        padding-bottom: 8.02%;
    }
    
    h1, nav, .left, .right, .movie {
        width: 48%; display: inline-block; vertical-align: middle;
    }
    
    h1, .left {
        margin-right: 4%;
    }
    
    nav ul {
        text-align: right;
    }
    
    nav a, nav span {
        height: 1.2rem; font-size: 1rem; line-height: 1.2rem; padding-top: 2.5rem; background-size: 4rem 150rem; 
    }
    
    nav a.introducing {
        background-position: 50% -100rem;
    }

    nav a.introducing:hover {
        background-position: 50% -50rem;
    }

    nav span.introducing {
        background-position: 50% 0px;
    }

    nav a.performance {
        background-position: 50% -110rem;
    }

    nav a.performance:hover {
        background-position: 50% -60rem;
    }

    nav span.performance {
        background-position: 50% -10rem;
    }

    nav a.reviews {
        background-position: 50% -120rem;
    }

    nav a.reviews:hover {
        background-position: 50% -70rem;
    }

    nav span.reviews {
        background-position: 50% -20rem;
    }

    nav a.profile {
        background-position: 50% -130rem;
    }

    nav a.profile:hover {
        background-position: 50% -80rem;
    }

    nav span.profile {
        background-position: 50% -30rem;
    }

    nav a.contact {
        background-position: 50% -140rem;
    }

    nav a.contact:hover {
        background-position: 50% -90rem;
    }

    nav span.contact {
        background-position: 50% -40rem;
    }
        
    .tablet {
        display: none;
    }
    
}