/* Pallas' Cat Working Group basic styles */

/*---------- basics -----*/
html {box-sizing: border-box; height:100%;}
body {position:relative; margin:0; background:url(pcwg_bg.jpg) repeat; width:100%; min-height:100%; overflow-x:hidden; font-size:10px; overflow:hidden;}
* html body { margin:0; padding:0; overflow:hidden; font-size:10px/1em;}
a, a:link, a:hover, a:focus, a:visited {text-decoration:none;}
a, a:link {-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
li {margin-top:0.1em; line-height:1.4em; font-weight:600;}

/*---------- headings */
@import url('https://fonts.googleapis.com/css?family=Dekko');
h1, h2, h3, h4, h5, h6, p, ul, ol, li  {font-family:'Dekko', cursive;}
h1,h2 {padding:0.5em 0.3em; font:normal bold; margin:0;}
h1 {font-size:2em;}
h2 {font-size:1.7em;}

/*---------- layout -----*/
/*---------- colours */
header, #top-nav ul ul {background:rgba(233,240,240,0.4);}
footer, .menuIcon div {background:rgba(200,50,0,1);}
.menuIcon, aside, .NavigationSlideOut {background:#fff;}
.copyright {color:#fff;}
#top-nav ul li a:focus, #top-nav ul li a:hover, a:focus, a:hover {color:rgba(140,0,90,1);}
a, a:link {color:rgba(200,50,0,1);}

/*----------header */
header {width:100%; position:fixed; top:0; margin:0 auto; z-index:2; -webkit-box-shadow: 0 0.6em 1em #888; -moz-box-shadow: 0 0.6em 1em #888; box-shadow: 0 0.6em 1em #888;}
.logo {float:left; height:99%;}
.logo img {max-height:99%; width:auto; z-index:3; margin:0;}

/*----------main */
main {bottom:1em; height:85%; display:block; z-index:1; margin:0; position:absolute; width:100%;}
section {margin-bottom:0.5em; -webkit-box-shadow: 0 0.6em 1em #888; -moz-box-shadow: 0 0.6em 1em #888; box-shadow:0 0.6em 1em #888;}
.column1 {position:relative; top:0; height:98%; float:left;}
.column1 iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
iframe {margin:0; padding:0; overflow-y:scroll; visibility:visible; width:100%;}
aside {-webkit-box-shadow: 0 0.6em 1em #888; -moz-box-shadow: 0 0.6em 1em #888; box-shadow:0 0.6em 1em #888;}
aside img {max-width: 42%;}

/*----------footer */
footer {position:fixed; bottom:0; left:0; width:100%; margin-top:3em; margin-bottom:0; padding:0; display:block; z-index:19;}
.copyright {font-size:1.2em; padding:0.2em; margin:0; text-align:center;}

/*---------- navigation */
nav {box-sizing: border-box; width:60%; z-index:2; float:right;}
#top-nav {position:fixed; left:40%; top:1.5%; height:8em; margin:0 auto;}
#top-nav ul {position:absolute; padding-left:0.3em; display:block;}
#top-nav ul li {float:left; font-size:2.2em; font-weight:700; margin:0 2em 0 0;}
#top-nav ul li:focus ul, #top-nav ul li:hover ul {top:1.4em;}
#top-nav ul li a {text-decoration:none;}
#top-nav ul ul {position:absolute; top:-9999px; margin:0; -webkit-box-shadow: 0 0.2em 0.2em #888; -moz-box-shadow: 0 0.2em 0.2em #888; box-shadow:0 0.2em 0.2em #888;}
#top-nav ul ul li {display:block; font-size:0.9em; width:10em; float:none; margin:0; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
.menu {list-style:none !important; line-height:1.3em;}

/*---------- screens----------*/
@media only screen and (max-width: 48em) { 
#top-nav li {float:none !important; width:90% !important; line-height:1.6em !important;}
#top-nav li a {margin:0 !important; padding-left:0.5em !important;}
#top-nav ul ul {position:relative !important; width:100%; left:0 !important; top:0 !important; background:none !important; box-shadow:none;}
.NavigationSlideOut {font-size:80% !important; width:25em; height:100%; position:fixed; top:7.8em; right:-300px; float:left; z-index:20; transition-timing-function:ease; border-left:0.3em groove rgba(200,50,0,1);}
.menuIcon {position:fixed; top:0; right:0; margin:0.5em; padding:0.5em; z-index:1002; cursor:pointer;webkit-box-shadow:0 1em 1em #888; -moz-box-shadow:0 1em 1em #888; box-shadow:0 1em 1em #888;}
.menuIcon div {width:30px; height:5px; margin:5px; transition:0.35s ease-in-out; border-radius:3px;}
.on .line_one {transform:rotate(45deg) translate(7px, 7px);}
.on .line_two {opacity: 0;}
.on .line_three {transform:rotate(-45deg) translate(7px, -7px);}
}
@media only screen and (min-width: 9em) and (max-width: 33em) {
header {width:100%;}
.logo {margin:0;}
.column1 {width:97%; margin:0;}
aside {font-size:80% !important; position:absolute; top:1em; -webkit-transition:0.3s ease-in-out; transition:0.3s ease-in-out; z-index:30; border-left:1.5em solid rgba(200,50,0,1); border-radius:0 0 0 0.5em;}
aside:before {content:""; display:block; width:0; height:0; position:absolute; top:0;}
aside:hover, aside:focus {right:0; border:none; border-radius:0;}
aside:hover:before, aside:focus:before {display:none;}
}
@media only screen and (min-width: 9em) and (max-width: 19.9em) { 
header {height:8%;}
.NavigationSlideOut {width:18em !important;}
main, .NavigationSlideOut {top:3.2em !important;}
aside {width:16em; right:-15.9em; padding-left:0.1em;}
aside:before {border-top:2em solid transparent; border-bottom:2em solid transparent; border-right:2em solid rgba(200,50,0,1); left:-2em;}
}
@media only screen and (min-width: 20em) and (max-width: 33em) { 
header {height:9%;}
aside {padding-left:0.2em;}
aside:before {border-top:2.8em solid transparent; border-bottom:2.8em solid transparent; border-right:2.8em solid rgba(200,50,0,1); left:-2.8em;}
}
@media only screen and (min-width: 20em) and (max-width: 23.4em) {
aside {width:18em; right:-17.8em;}
}
@media only screen and (min-width: 23.4em) and (max-width: 33em) {
aside {width:21em; right:-20.8em;}
}
@media only screen and (min-width: 33.1em) {
header {left:2%; width:96%;}
main {left:2%; width:96%;}
aside {float:right;}
}
@media only screen and (min-width: 33.1em) and (max-width: 50em) {
header {height:10%;}
.column1 {width:69%;}
aside {width:30%;}
}
@media only screen and (min-width: 50.1em) {
header {height:11%;}
.column1 {width:66%;}
aside {width:33%}
}