/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html {
    color: #000;
    background: #FFF
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%
}

legend {
    color: #000
}

#yui3-css-stamp.cssreset {
    display: none
}


.wrapperhome {
    width: 20vw;
    height: 20vw;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18vw;
    text-align: center;
    display: flex;
    flex-direction: column;

    text-decoration-color: black;
}

a {
    text-decoration: none;
}

p.home {
    font-style: none;
    font-size: 125%;
    font-family: sans-serif;
    color: grey;
    line-height: 250%;
    margin-top: 10%;
    transition: color .5s ease-in-out;
    text-decoration-color: black;

}

p.home:active {
    text-decoration: none;
}

p.home:hover {
    color: white;
}

p.nav:hover {
    color: white;
}

.nav {
    margin-left: 1vw;
    color: black;
    text-decoration: none;


}

/*
.navworksans {
    width: 15vw;
    height: 2vw;
    background-color: #4195f4;
    margin-left: 3vw;

    z-index: 2;
    color: white;

    text-decoration: none;
    line-height: 30%;


}




.navworksans:hover {
    color: black;

}

.navlora {
    width: 15vw;
    height: 2vw;
    background-color: pink;
    padding-left: 1vw;
    padding-top: 1vw;
    color: white;
    text-decoration: none;
    z-index: 2;
    font-family: 'lora';
    display: inline-block;



}



.navlora:hover {
    color: black;
}

.navplay {
    width: 15vw;
    height: 2vw;
    background-color: yellow;
    padding-left: 2vw;
    padding-top: 1vw;
    color: black;

    z-index: 2;
    font-family: 'playfair display';
    text-decoration: none;



}

.navplay:hover {
    color: white;
}*/

ul {
    list-style: none;
}

li {
    list-style: none;
}

/*
p.navplay {
    z-index: 2;
    font-style: none;

    font-family: sans-serif;
    color: lightgrey;


    transition: color .5s ease-in-out;
}
*/




/*playfair*/

.wrapper__play {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .2fr .75fr .75fr .75fr .75fr;
    margin-left: 10vw;
    margin-right: 10vw;
}

header.play {
    grid-column: 1/3;
    grid-row: 1/2;
}

section.play:nth-child(2) {
    grid-column: 1/3;
    grid-row: 2/3;
}

section.play:nth-child(3) {
    grid-column: 1/2;
    grid-row: 4/5;
    margin-top: -5vw;
    transition: color .35s ease-in-out;
}

section.play:nth-child(3):hover {
    color: violet;
    cursor: pointer;
}

section.play:nth-child(4) {
    grid-column: 2/3;
    grid-row: 4/5;
    margin-top: -5vw;
}

section.play:nth-child(5) {
    grid-column: 1/3;
    grid-row: 3/4;
    text-align: center;
    margin-top: 5vw;


}

section.play:nth-child(6) {
    grid-column: 1/3;
    grid-row: 5/6;
    width: 90vw;
    margin-top: 5vw;
    margin-bottom: 8vw;

}

p.alphabetplay {
    font-size: 800%;
}



body.play {

    background-color: yellow;
    font-family: 'Playfair Display',
        serif;

    font-size: 32;
}

h1.play {
    font-size: 600%;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    letter-spacing: .2vw;
}

h2.play {
    font-size: 300%;
    margin-bottom: 2vw;

}

h2.play:nth-child(4) {
    font-weight: regular;
    font-style: italic;
}

h2.play:nth-child(6) {
    font-weight: bold;
}

h2.play:nth-child(8) {
    font-weight: bold;
    font-style: italic;
}

h2.play:nth-child(10) {
    font-weight: 900;

}

h2.play:nth-child(12) {
    font-weight: 900;
    font-style: italic;
    margin-bottom: 3vw;
}

h3.play {
    font-size: 75vw;
    font-style: italic;
    font-weight: 900;
    margin-top: -30vw;
    grid-column: 1/2;
    grid-row: 1/4;
}

h4.play {
    text-transform: capitalize;
    margin-left: 5vw;
    margin-top: 8vw;
    letter-spacing: .05vw;
    font-size: 200%;
    grid-column: 2/3;
    grid-row: 1/2;
}

h5.play {
    text-transform: uppercase;
    margin-left: 5vw;
    margin-top: 1vw;
    line-height: 150%;
    letter-spacing: .05vw;
    font-size: 75%;
    grid-column: 2/3;
    grid-row: 2/3;
}

h6.play {
    font-size: 400%;
    margin-bottom: 3vw;
}

p.copyplay {
    text-transform: initial;
    margin-left: 5vw;

    line-height: 150%;
    letter-spacing: .05vw;
    grid-column: 2/3;
    grid-row: 3/4;
    margin-right: 2vw;
    font-size: .85em;
}

p.play {

    font-size: 75%;
    margin-top: 3vw;
    font-weight: 400;
}

h6.play:nth-child(2) {
    font-size: 200%;
    grid-column: 1/3;
    grid-row: 1/2;
    margin-left: auto;
    margin-right: auto;
}

ul.play {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .1fr 1fr 1fr 1fr;
}

li.play {
    font-size: 800%;
    width: 20vw;
    height: 15vw;
    margin-left: 3vw;
    transition: color .5s ease-in-out;
}

li.play:hover {
    color: violet;
    cursor: pointer;
}

h6.play:nth-child(4) {
    font-size: 200%;
    grid-column: 2/3;
    grid-row: 1/2;
    text-align: center;
    color: red;
}

p.alphabetplay {
    font-size: 600%;
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
    grid-column: 2/3;
}

p.alphabetplay:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
    text-transform: uppercase;
    margin-top: 2vw;
}

p.alphabetplay:nth-child(3) {
    grid-column: 3/4;
    grid-row: 3/4;
}

p.alphabetplay {
    font-size: 2em;
}





p.alphabetplay:nth-child(5) {
    text-transform: uppercase;
    font-size: 4em;
}

p.alphabetplay:nth-child(6) {
    font-size: 4em;
}

p.alphabetplay:nth-child(8) {
    text-transform: uppercase;
    font-size: 8em;
}

p.alphabetplay:nth-child(9) {
    font-size: 8em;
}

p.sizeplay {
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 3vw;

}

/*work sans */

main.wrapper__work {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .1fr 1fr .5fr .55fr 1fr;
    margin-left: 10vw;
    margin-right: 10vw;
    color: white;
}

header.work {

    grid-row: 1/2;
}

section.work:nth-child(2) {

    grid-row: 2/3;
}

section.work:nth-child(3) {

    grid-row: 3/4;
    line-height: .6;

}

section.work:nth-child(4) {
    max-width: 50%;
    grid-row: 4/5;
    margin-left: auto;
    margin-right: auto;

}

section.work:nth-child(5) {

    grid-row: 5/6;
    display: grid;
    grid-template-columns: .5fr .5fr;
    grid-template-rows: .2fr 1fr 1fr;


}

h1.work {
    grid-row: 1/2;

    z-index: 2;
    font-weight: 900;
    font-size: 800%;
    letter-spacing: .5vw;
    margin-right: auto;
    margin-left: auto;
    color: white;
    margin-top: 5vw;
    text-align: center;
    transition: letter-spacing 1s;

}

h1.work:hover {
    letter-spacing: 1.5vw;
    cursor: pointer;

}


p.thin {
    font-weight: 100;


}


p.extra-light {
    font-weight: 200;

}

p.light {
    font-weight: 300;

}

p.regular {
    font-weight: 400;

}

p.medium {
    font-weight: 500;

}

p.semi-bold {
    font-weight: 600;

}

p.bold {
    font-weight: 700;

}

p.extra-bold {
    font-weight: 800;

}


p.work {


    line-height: 150%;
    font-size: 300%;
    color: white;
    margin-left: 3vw;
    padding-left: 3vw;
}

p.work:nth-child(odd) {
    font-size: 100%;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 3vw;


}

h3.work {
    font-size: 100em;
    font-weight: 900;
    color: white;
    text-align: center;
    transition: color .5s;
    overflow: hidden;
}

h3.work:hover {
    color: #92c0f4;
    cursor: pointer;
}

h4.work {
    text-transform: capitalize;



    font-size: 200%;
    font-weight: 600;


}

h5.work {
    text-transform: uppercase;

    margin-top: 2vw;
    margin-bottom: 2vw;
    line-height: 150%;

    font-size: 75%;

}

h6.work {
    font-size: 300%;
}

p.copywork {
    line-height: 150%;
    color: white;
    font-weight: 200;
}

p.alphabetwork {
    font-size: 200%;
    text-transform: uppercase;
    margin-bottom: 3vw;
}

p.alphabetwork:nth-child(odd) {

    text-transform: lowercase;

}

div.alphabetwork {
    grid-column: 2/3;
}

ul.work {
    grid-row: 2/4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .15fr .15fr .15fr;

}

li.work {
    font-size: 400%;
    display: inline-grid;
    margin: 0;

}


body.work {

    background-color: #4195f4;
    font-family: 'Work Sans',
        sans-serif;

    font-size: 32;
}



/* lora */

body.lora {
    font-family: 'Lora', serif;
    color: black;
    background-color: pink;
}

main.wrapper__lora {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: .1fr .4fr .2fr .2fr .55fr;
    margin-left: 3vw;
    margin-right: 3vw;

}

h1.lora {
    font-size: 600%;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    letter-spacing: .2vw;
    margin-left: 20vw;
    margin-right: 20vw;
    z-index: 0;
}

header.lora {
    grid-column: 1/5;
    grid-row: 1/2;
    text-align: center;
    color: black;
    margin-top: 3vw;
}

section.lora:nth-child(2) {
    grid-column: 1/5;
    grid-row: 4/5;
    color: white;
    line-height: 200%;
}

section.lora:nth-child(3) {
    grid-column: 1/5;
    grid-row: 2/3;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;


}


section.lora:nth-child(4) {
    grid-column: 1/5;
    grid-row: 3/4;
    color: black;
    font-size: 2.25rem;
    text-align: center;

}

section.lora:nth-child(5) {
    grid-column: 1/5;
    grid-row: 5/6;
    color: black;
    margin-top: 3vw;
}

section.lora:nth-child(6) {
    grid-column: 1/5;
    grid-row: 7/8;
    color: black;
    margin-left: auto;
    margin-right: auto;
}





p.lora {
    text-transform: uppercase;
    margin-top: 3vw;
}

h2.lora {
    font-size: 4.5em;
    line-height: 150%;
}

h2.lora:nth-child(4) {
    font-style: italic;

}

h2.lora:nth-child(6) {
    font-weight: bolder;
}

h2.lora:nth-child(8) {
    font-style: italic;
    font-weight: bolder;
}

ul.alphabetlora {
    display: contents;
    font-size: 300%;
    font-weight: 800;
}

li.alphabetlora {
    margin: 3vw;
}

h3.lora {
    font-size: 30vw;

    text-transform: uppercase;
}

h6.lora {
    font-size: 8em;
    margin-top: 3vw;
}

p.alphabetlora {
    font-size: 2em;
}

p.alphabetlora:nth-child(3) {
    text-transform: uppercase;
}



p.alphabetlora:nth-child(6) {
    text-transform: uppercase;
    font-size: 4em;
}

p.alphabetlora:nth-child(7) {
    font-size: 4em;
}

p.alphabetlora:nth-child(9) {
    text-transform: uppercase;
    font-size: 8em;
}

p.alphabetlora:nth-child(10) {
    font-size: 8em;
}

p.size {
    text-transform: uppercase;
    margin-top: 3vw;
}


h4.lora {
    font-size: 15em;
    text-transform: uppercase;
    font-weight: 800;
}

li.largelora:nth-child(2) {
    color: #525252;
}

li.largelora:nth-child(3) {
    color: #ababab;
}

li.largelora:nth-child(4) {
    color: #e2e2e2;
}

li.largelora:nth-child(5) {
    color: #e2e2e2;
    opacity: .75;
}

li.largelora:nth-child(6) {
    color: #e2e2e2;
    opacity: .5;
}

li.largelora:nth-child(7) {
    color: #e2e2e2;
    opacity: .2;
}

p.numberslora {
    grid-column: 2/3;
    font-size: 4em;
    margin-top: 4vw;
    text-align: right;
}

h5.lora {
    font-size: 12em;
    margin-left: 7vw;
    text-transform: uppercase;
}