/* =============================================================================
   HTML5 reset
   ========================================================================== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-size: 13px;
    line-height: 1.231;
}

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
    color: #222;
}


::-moz-selection {
    background: #5db7cd;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #5db7cd;
    color: #fff;
    text-shadow: none;
}

::-webkit-scrollbar {
      width: 6px; 
}

::-webkit-scrollbar-track {
    background-color: #BB261A;
}

::-webkit-scrollbar-thumb {
    background: #FFFFFF;
    border-radius: 3px;
}

a {
    text - decoration: none;
    color: inherit
}

a: active,
a: focus {
    outline: 0
}


/* =============================================================================
   Site styles
   ========================================================================== */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {

    width: 100%;
    height: 100%;
    background-color: #BB261A;
    color: #fff;
    font-family: "HelveticaNeue", "Helvetica Neue ", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 16px;
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
}

h1 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}

.main-layout {
    display: grid;
    height: 100%;
    grid-template-rows: 85px auto;
}

header {
    height: 85px;
    background-color: #fff;
    width: 100%;
    grid-row: 1;
    display: grid;
    grid-template-columns: 24px auto 24px;
    grid-template-rows: 42.5px 42.5px;
    z-index: 10;
}

header h4 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    color: #000;
    line-height: 1em;
    margin: 0px;
    padding: 0px;
}

header h4.red {
    color: #BB261A;
    grid-row: 2;
    align-self: start;
}

.main-content {
    grid-row: 2;
    display: grid;
    height: 100%;
    padding-top: 30px;
    padding-left: calc(42px + 42px + 10px);
    justify-content: center;
    align-content: center;
}

.main-content .container {
    /*border: solid 1px white;*/
    position: absolute;
    width: 860px;
    height: 600px;
}

.main-content .text {
    max-width: 800px;
}

.main-content .text p {
    top: 0;
    line-height: 1.45em;
}


.top-most-paragraph {
    margin-top: 0px;
}

/*.page-text {

}*/

.hidden {
    visibility: hidden;
}

.main-menu {
    position: relative;
    top: 0px;
    left: 0px;
    transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);
    transform-origin: 0px 0px;
}


.block {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 142px;
    height: 142px;
    background-color: #fff;
    color: #BB261A;
    padding: 10px;
    cursor: pointer;
    transition: color .25s ease, background-color.25s ease, transform .8s cubic-bezier(0.65, 0, 0.35, 1), top .8s cubic-bezier(0.65, 0, 0.35, 1), left .8s cubic-bezier(0.65, 0, 0.35, 1), width .8s cubic-bezier(0.65, 0, 0.35, 1);
}

.block.active {
    transform: scale(2);
    background-color: #BB261A;
    color: #fff;
    pointer-events: none;
}

.block:hover {
    background-color: #BB261A;
    color: #fff;
}

.block .title {
    font-size: 14px;
    font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
    text-transform: uppercase;
}

.block.small {
    height: 42px;
}

.title {
    position: absolute;
    transition: color .25s ease, background-color.25s ease, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1), top 1.2s cubic-bezier(0.65, 0, 0.35, 1), left 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.title.active {
   transform: scale(2); 
}

.left {
    float: left;
    margin: 0 10px 5px 0;
    border: 5px solid #FFF;
}

.credits {
    position: absolute;
    top: calc(100% - 50px);
    left: 50px;
    font-size: 13px;
}

.credits a {
    text-decoration: none;
    color: inherit
}


/*------------------------------------------------------------
/// Layout -- off screen loading
------------------------------------------------------------*/
.main-menu.layout-off-screen {
    transform: rotate(210deg);       /* menu rotation */
    left: -50%;                      /* menu postion  */
    top: calc(200px + 142px + 5px);
}


.main-menu.layout-off-screen #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
}

.main-menu.layout-off-screen #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
}

.main-menu.layout-off-screen #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-off-screen #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-off-screen #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-off-screen #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-off-screen #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
}


/*------------------------------------------------------------
/// Layout 0 -- Initial intro (rotated 45 deg)
------------------------------------------------------------*/
.main-menu.layout-0 {
    transform: rotate(45deg);    /* menu rotation */
    left: calc(430px);           /* menu postion  */
    top: 50px;
}


.main-menu.layout-0 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
}

.main-menu.layout-0 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
}

.main-menu.layout-0 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-0 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-0 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-0 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-0 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
}


/*------------------------------------------------------------
/// Layout 1 -- learning
------------------------------------------------------------*/
.main-menu.layout-1 {
    transform: rotate(0deg);                   /* menu rotation */
    left: calc(860px - 142px - 142px - 10px);  /* menu postion  */
    top: 200px;
}


.main-menu.layout-1 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-1 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
    width: 142px;
}

.main-menu.layout-1 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-1 #learning {
    transform: rotate(0deg) scale(2);
    left: calc(0px - 340px - 22px);
    top: calc(0px - 98px - 16px);
}

.main-menu.layout-1 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-1 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-1 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
    width: 142px;
}

#txt-layout-1 {
    position: absolute;
    margin: 0px;
    padding-top: 0px;
    padding-right: 40px;
    width: 554px;
    height: 267px;
    overflow-y: scroll;
    left: 154px;
    top: 75px;
}

#txt2-layout-1 {
    position: absolute;
    margin: 0px;
    padding-right: 40px;
    width: 402px;
    height: 234px;
    overflow-y: scroll;
    left: 154px;
    top: 358px;
}


/*------------------------------------------------------------
/// Layout 2 -- writing
------------------------------------------------------------*/
.main-menu.layout-2 {
    transform: rotate(90deg);   /* menu rotation */
    left: calc(860px);          /* menu postion  */
    top: 200px;
}


.main-menu.layout-2 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-2 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px + 430px);
    width: 142px;
}

.main-menu.layout-2 #writing {
    transform: rotate(-90deg) scale(2);
    left: calc(0px - 98px - 16px);
    top: calc(142px + 10px + 340px + 22px);
}

.main-menu.layout-2 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-2 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-2 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-2 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
    width: 142px;
}

#txt-layout-2 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 554px;
    height: 198px;
    overflow-y: scroll;
    left: 154px;
    top: 144px;
}

#txt2-layout-2 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 402px;
    height: 220px;
    overflow-y: scroll;
    left: 154px;
    top: 374px;
}


/*------------------------------------------------------------
/// Layout 3 -- whats-new
------------------------------------------------------------*/
.main-menu.layout-3 {
    transform: rotate(90deg);          /* menu rotation */
    left: calc(142px + 142px + 10px);  /* menu postion  */
    top: calc(42px + 10px);
}


.main-menu.layout-3 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg) scale(2);
    left: calc(142px + 142px + 10px + 10px - 0px);
    top: calc(142px + 142px + 10px - 130px);
    width: 95px;
}

.main-menu.layout-3 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
    width: 142px;
}

.main-menu.layout-3 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-3 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-3 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-3 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-3 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
    width: 142px;
}

#txt-layout-3 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 478px;
    height: 486px;
    overflow-y: scroll;
    left: 380px;
    top: 0px;
}


#txt2-layout-3 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 554px;
    height: 220px;
    overflow-y: scroll;
    left: 380px;
    top: 500px;
}

/*------------------------------------------------------------
/// Layout 4 -- more
------------------------------------------------------------*/
.main-menu.layout-4 {
    transform: rotate(0deg);    /* menu rotation */
    left: calc(0px);            /* menu postion  */
    top: calc(42px + 10px);
}


.main-menu.layout-4 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-4 #more {
    transform: rotate(0deg) scale(2);
    left:calc(0px + 239px);
    top: calc(142px + 142px + 10px + 10px + 21px);
    width: 60px;
}

.main-menu.layout-4 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-4 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-4 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-4 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-4 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
    width: 142px;
}

#txt-layout-4 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 478px;
    height: 346px;
    overflow-y: scroll;
    left: 380px;
    top: 0px;
}

#txt2-layout-4 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 478px;
    height: 220px;
    overflow-y: scroll;
    left: 380px;
    top: 364px;
}

/*------------------------------------------------------------
/// Layout 5 -- curriculum
------------------------------------------------------------*/
.main-menu.layout-5 {
    transform: rotate(180deg);                             /* menu rotation */
    left: calc(142px + 142px + 10px);                      /* menu postion  */
    top: calc(42px + 10px + 142px + 10px + 142px + 60px);
}


.main-menu.layout-5 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-5 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
    width: 142px;
}

.main-menu.layout-5 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-5 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-5 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-5 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-5 #curriculum {
    transform: rotate(180deg) scale(2);
    left: calc(142px + 10px - 130px + 27px);
    top: calc(-42px - 10px - 21px);
    width: 124px;
}

#txt-layout-5 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 528px;
    height: 346px;
    overflow-y: scroll;
    left: 330px;
    top: 56px;
}

#txt2-layout-5 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 528px;
    height: 220px;
    overflow-y: scroll;
    left: 330px;
    top: 422px;
}

/*------------------------------------------------------------
/// Layout 6 -- museums
------------------------------------------------------------*/
.main-menu.layout-6 {
    transform: rotate(180deg);                 /* menu rotation */
    left: calc(860px);                         /* menu postion  */
    top: calc(200px + 142px + 10px + 142px);
}


.main-menu.layout-6 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px + 430px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-6 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
    width: 142px;
}

.main-menu.layout-6 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-6 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-6 #exhibitions {
    transform: rotate(90deg);
    left: calc(142px + 10px);
    top: 0px;
}

.main-menu.layout-6 #museums {
    transform: rotate(180deg) scale(2);
    left: calc(142px + 10px + 340px + 22px);
    top: calc(142px + 10px + 98px + 16px);
}

.main-menu.layout-6 #curriculum {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(-42px - 10px);
    width: 142px;
}

#txt-layout-6 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 554px;
    height: 234px;
    overflow-y: scroll;
    left: 154px;
    top: 108px;
}

#txt2-layout-6 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 402px;
    height: 220px;
    overflow-y: scroll;
    left: 154px;
    top: 370px;
}

/*------------------------------------------------------------
/// Layout 7 -- exhibitions
------------------------------------------------------------*/
.main-menu.layout-7 {
    transform: rotate(-90deg);                  /* menu rotation */
    left: calc(860px - 142px - 142px - 10px);   /* menu postion  */
    top: calc(200px + 142px + 142px + 10px);
}

.main-menu.layout-7 #whats-new {
    transform-origin: 0% 0%;
    transform: rotate(-90deg);
    left: calc(142px + 142px + 10px + 10px);
    top: calc(142px + 142px + 10px);
    width: 142px;
}

.main-menu.layout-7 #more {
    transform: rotate(0deg);
    left:0px;
    top: calc(142px + 142px + 10px + 10px);
    width: 142px;
}

.main-menu.layout-7 #writing {
    transform: rotate(-90deg);
    left: 0px;
    top: calc(142px + 10px);
}

.main-menu.layout-7 #learning {
    transform: rotate(0deg);
    left: 0px;
    top: 0px;
}

.main-menu.layout-7 #exhibitions {
    transform: rotate(90deg) scale(2);
    left: calc(142px + 10px + 98px + 16px);
    top: calc(0px - 340px - 22px);
}

.main-menu.layout-7 #museums {
    transform: rotate(180deg);
    left: calc(142px + 10px);
    top: calc(142px + 10px);
}

.main-menu.layout-7 #curriculum {
    transform: rotate(180deg);
    left: calc(10px + 142px);
    top: calc(-42px - 10px - 430px);
    width: 142px;
}

#txt-layout-7 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 554px;
    height: 268px;
    overflow-y: scroll;
    left: 154px;
    top: 74px;
}

#txt2-layout-7 {
    position: absolute;
    margin-top: 0px;
    padding-right: 40px;
    width: 402px;
    height: 220px;
    overflow-y: scroll;
    left: 154px;
    top: 374px;
}