html,body {margin:0;padding:0;height: 100%;width: 100%;background-color: #9298A4;}

body {
	overflow: hidden;
	font-family: 'Open Sans', sans-serif;
	color:white;
}

.screen {
	width:100vw;
	height: 100vh;
	overflow:hidden;
	position: absolute;
	top: 0;
    left: 0;	
}

#cover {
	height: 80px;
	background-color: white;
	background-image: url('iPad-splashpage.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
	overflow-y: hidden;
	z-index: 300;
	border-bottom: #FEB401 solid 2px;
	transition: height 0.5s;
}

body.state-cover #cover {height: 100vh;}
body.state-cover #cover h1 {transform: scale(2.2);transition: all 0.5s; padding-left: 1rem;}

#help {
	pointer-events: none;
	opacity: 0;
	background: url('help-bg.svg') transparent no-repeat top left;
	transition: opacity 1.5s;
	z-index: 200;
}
body.state-help #help {opacity: 1;}

iframe {
	width:100%;
	height: calc(100% + 2px);
	position: absolute;
	top: -2px;
	background-color: #9298A4;

}

#app, #app-iframe {-webkit-overflow-scrolling:touch; overflow:auto;}


#header {
    text-align: center;
    width: 100%;
    min-height: 5rem;
}
#header span {display: block; }
#header span.title {font-size: 1.3rem;}
#header span.description {font-size: 0.9rem;}
#header span.reference {font-size: 0.7rem;}

img#logo-mto {position: absolute; bottom: 0.8rem; right: 0rem;}
img#logo-stantec {position: absolute; bottom: 0.8rem; right: 8rem;}


#btn-home {
    font-size: 1.3rem;
    position: absolute;
    width: 3rem;
    height: 2rem;
    background: #FEB401;
    border-radius: 0 1rem 1rem 0;
    box-shadow: rgba(0,0,0,0.5) 0px 3px 9px 1px;
    padding: 0.9rem 0px 0px 4.3rem;
    top: 1rem;
    transition: margin 0.5s;
    transition-delay: 0.2s;
    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    margin-left: -4.5rem;
}

body.state-cover #btn-home {margin-left: -8rem;transition-timing-function:ease-out;transition-delay: 0s;}

.inner {
	position: absolute;
	width: 100vw;
	overflow: hidden;
	overflow-y: auto;
}

.row {margin: 3rem;}

#cover .inner {
    top: 18rem;
    color: #284180;
    text-align: center;
}

#cta {
    font-size: 2.7rem;
	font-family: Georgia, Unna;
	font-style: italic;
	font-weight: bold;
	padding: 4rem 0;
}
span.oversize {
	font-size: 170%;
	padding: 0 0.3em;
}

#cover .inner {
	transform-origin: top left;
	transform: scale(0.1);
    transition: transform 0.5s;
}
body.state-cover #cover .inner {
    transform: scale(1);
}


.button {
	height: 6rem;
	border-radius: 3rem;
	background-color: #FEB401;
	color: white;
    box-shadow: rgba(0,0,0,0.5) 0px 3px 9px 1px;
    border: #bb8400 solid 1px;
    text-decoration: none;
    font-size: 4rem;
}

#btn-start {
	width: 24rem;
	margin:auto;
    height: 5rem;
    border-radius: 4rem;
    background-color: #FEB401;
    color: white;
    box-shadow: rgba(0,0,0,0.5) 0px 3px 9px 1px;
    border: #bb8400 solid 1px;
    text-decoration: none;
    font-size: 3rem;
    padding: 1rem 0 0.4rem 0;
}

#btn-help {
	z-index: 199;
	font-size: 4rem;
    position: absolute;
    width: 6rem;
    bottom: 1rem;
    left: 1rem;
    text-align: center;
    background-color: black;
    border: white solid 3px;
    border-radius: 50%;
    opacity:0;
	/*transition: opacity 0.5s, transform 0.5s ease-out;*/
    transform-origin: bottom left;
    transition: all 0.5s;
    /*transform: scale(10);*/
}
#btn-help i {margin-top:1rem;}

#btn-help {opacity: 1}
body.state-help #btn-help {opacity: 0;}


#btn-notes-close {
	position: absolute;
	right: 1.9rem;
	top: 1.25rem;
	font-size: 4rem;
	z-index: 120;
}

#btn-help-close {
	z-index: 201;
    pointer-events: none;
    position: absolute;
    left: 2.5rem;
    bottom: 2.3rem;
    font-size: 4rem;
    transition: opacity 0.5s;
    opacity:0;
}
body.state-help #btn-help-close{opacity:1;pointer-events: all;}


#notes {
	margin-top: -100vh;
	z-index: 400;
	pointer-events: none;
	transition: margin 0.5s;
	overflow:unset;
	overflow:visible;
}
/*body.state-cover #notes{margin-top: -110vh;}*/
body.state-notes #notes{margin:0;pointer-events: all;transition: margin 0.5s}


#notes-btn-clip {
	overflow: hidden;
	position: absolute;
	padding: 0;
	width: 100vw;
	text-align: center;
	pointer-events: none;
	bottom: -60px;
	opacity: 1;
	z-index: 0;
	/*transition: bottom 0.5s ease-out 1s;*/
	transition: opacity 0.5s;
}
#btn-notes {
	pointer-events: all;
	font-size: 1.7rem;
	background: #FEB401;
	box-shadow: rgba(0,0,0,0.5) 0px 2px 9px 1px;
	border: #bb8400 solid 1px;
	color: white: ;
	border-radius: 1rem;
	height: 2.6rem;
	padding: 1.4rem 1rem 0 1rem;
	margin: -1rem auto 1rem auto;
	text-transform: uppercase;
	width: 6rem;
	transition:all 0.5 0.5;
}
/*body.state-cover #notes-btn-clip {bottom: 0px;transition: bottom 0.5s;}*/
body.state-cover #notes-btn-clip {opacity: 0;transition: opacity 0.5s;}

#cover #logo-study {transform-origin: top left;transition: all 0.5s;}

#logo-study {
    width: 25%;
    left: 40px;
    margin-top: -28px;
    position: absolute;
    /*min-width: 26%;*/
    min-height: 135px;
}
body.state-cover #logo-study {width:60%;margin:auto;left:20%;top: 1rem;}

#btn-notes-close {
	position: absolute;
	right: 1.9rem;
	top: 1.25rem;
	font-size: 4rem;
	/*z-index: 120;*/
}

#notes .inner {
	position: absolute;
	background-color: #284180;
	width: 100vw;
	height: 100vh;
	top: 0px;
	overflow: hidden;
	overflow-y: auto;
	z-index: 1
}
.col {
	float: left;
	width: calc(50% - 5rem);
	padding-right: 5rem;
}
.inner h1 {margin-top: 5rem;}
.inner h1 span {display: block; }
.inner h1 span.title {font-size: 2.3rem;}
.inner h1 span.description {font-size: 1.5rem;}
.inner h1 span.reference {font-size: 1.5rem;}
.inner ul {padding: 0 1.3rem;}
.inner ul li {padding-top: 0.5rem;}



#notes {display:none;}