/* www.Kommands.ca */	
 


::-webkit-scrollbar {
width: 15px;
padding-top: 40px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 10px rgba(204,204,204,0.8); 
border-left: 10px solid #ccc;  
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(247,203,25,0.9); 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(192,148,0,0.4); 
}
::-webkit-scrollbar-button {
background-color: #ccc;
}




* {box-sizing: border-box;}
.hamburger{
position:fixed;
z-index:9999;
padding:3px 0 0 25px;


}
.hamburger:hover{
cursor:pointer;
}
.hamburger div{
background-color:rgba(247,203,25,1);
border-radius:5px;
height:8px;
width:38px;
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
}
.hamburger div:not(:last-child){
margin-bottom:5px;
}
nav{
z-index:100;
overflow-y:auto;
overflow-x:visible;
background-color:rgba(0,0,0,1);
display:inline-block;
position:fixed;
height:100vh;
width:320px;
max-width:320px;
left:-320px;
word-wrap:break-word;
-webkit-transition:-webkit-transform 0.3s;
transition:transform 0.3s;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight:bold;
font-size:24px;
margin-top:-20px;
}
nav a{
display:block;
text-decoration:none;
text-align:left;
color:white;
padding:6px 0px 6px 88px;
line-height:1.5;
}
nav a:hover{
background-color:#252525;
}
nav a:visited{
color:white;
}
nav, .hamburger, .cover{
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.sidenav-active nav, .sidenav-active .hamburger, .sidenav-active .cover{
-webkit-transform: translateX(250px);
-ms-transform: translateX(250px);
transform: translateX(250px);
}
.navtitle{
color:white;
padding:28px 0 20px 88px;
text-align:left;
font-size:26px;
}
.navdot{
margin-bottom:4px;
margin-right:6px;
}





body{
margin:0;
color:#fff;
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-align:center;
padding-left:0px;
cursor:crosshair;
}
.topbar{
border-bottom:solid 4px #f6c603;
padding-bottom:20px;
}
.topbar ul{
margin:20px 0 0 0;
padding:0;
}
.topbar li{
display:inline-block;
width:33%;
}
.main{
background:url(images/background-texture.jpg) repeat; 
}
.logo{
margin-top:70px;
margin-bottom:26px;
}
.hints{
max-width:50%;
}
.boardgame{
margin-top:38px;
max-width:96%;
}
.gallery-picture{
margin-top:94px;
margin-bottom:94px;
max-width:96%;
}
.kickstarter{
position:absolute;
top:134px;
right:2%;
}
.retail-box{
position:absolute;
top:130px;
left:3%;
}
.reminder{
display:block;
font-family:'Droid Serif', sans-serif;
font-size:40px;
color:#f6c603;
margin-top:40px;
}
.buy-button{
margin:20px 0 55px 0;
}
.runes{
display:block;
background:#000;
border-top:solid 10px #121212;
border-bottom:solid 10px #121212;
padding:150px 0;
text-align:left;
}
.runeright{
float:right;
font-family:'Open Sans', sans-serif;
text-align:right;
font-size:26px;
color:#f6c603;
margin-right:60px;
margin-top:-20px;
line-height:60px;
}
.runepic{
margin-left:60px;
}
.characters{
position:absolute;
right:60px;
margin-right:-6px;
margin-top:198px;
}


.story{
background:url(images/map.gif) no-repeat center center ; 
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
font-size:22px;
color:#fff;
text-align:left;
padding:200px 0;
border-bottom:solid 10px #000000;
}
.storytxt{
background-color:rgba(0,0,0,0.8);
padding:40px;
margin:0 5%;
font-family:'Open Sans', sans-serif;
line-height:54px;
letter-spacing:2px;
}


.king-of-kings{
background:#000;
}


.circles{
background:url(images/background-texture.jpg) repeat;
}
.circles ul{
margin:20px 0 0 0;
padding:120px 0 130px 0;
}
.circles li{
display:inline-block;
width:23%;
}
.circles span{
font-size:30px;
display:block;
line-height:40px;
margin-top:24px;
}
.ordernow{
background:#f6c603;
font-family:'Lato', sans-serif;
color:#000;
font-size:47px;
font-weight:bold;
padding:80px 0 90px 0;
}
.order-button{
display:block;
margin-top:30px;
margin-bottom:-5px;
}
.footer{
background:#000;
color:#f6c603;
font-size:18px;
line-height:48px;
text-transform: uppercase;
padding:40px 0;			
}



.pagehead{
font-family:'Droid Serif', sans-serif;
font-weight:normal;
color:#f6c603;
font-size:40px;
text-transform:uppercase;
margin-bottom:-12px;
}



	

.gallerypage{
display:table;
text-align:left;
padding:80px 0px 100px 40px;
color:#898989;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.projectpage{
text-align:left;
padding:37px 56px 100px 40px;
color:#898989;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
@media all and (max-width: 959px) {
.gallerypage{
margin-left:-201px;
}
.projectpage{
margin-left:-201px;
}
}
.projectpage h1{
font-size:45px;
margin:0 0 40px 0;
}
.projectlist ul{
list-style:none;
margin:20px 0 30px 0;
padding:0;
font-size:19px;
}
.projectlist ul li{
width:100%;
padding:9px 7px 6px 7px;
border-bottom:solid 1px #383737;
}
.projectlist a{
color:#898989;
text-decoration:none;
}
.pltop{
width:100%;
color:#fff;
height:30px;
font-size:19px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-bottom:-10px;
}
.pltopleft{
float:left;
padding-left:75px;
}
.pltopright{
float:right;
padding-right:22px;
}
.folder{
padding-left:18px;
padding-right:26px;
}
.plleft{
display:inline-block;
height:30px;
}
.plright{
display:inline-block;
float:right;
height:30px;
padding-right:40px;
}
.gallerypage h1{
font-size:45px;
margin:0 0 40px 0;
}
.gallerybox{
display:table-cell;
text-align:center;
float:left;
height:192px;
width:246px;
background:#000;
padding-top:14px;
margin-bottom:60px;
margin-right:60px;
}
.gallerybox:hover{
background:#f6c603;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease; 
-o-transition:all .5s ease; 
transition:all .5s ease;
}
.pictureview{
padding-bottom:80px;
}
.pictureview h2{
color:#f5f5f5; 
margin-top:20px; 
margin-bottom:20px;
padding:0 10%;
line-height:30px;
}
.gallerybutton {
background:#2a2929;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0;
display:inline-block;
color:#898989;
font-family:arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:260px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #000;
margin-top:20px;
margin-bottom:20px;
}
.gallerybutton:hover {
background-color:#343333;
}
.gallerybutton:active {
position:relative;
top:1px;
}
.pic{
background:#2a2929; 
padding:14px;
}


.message{
font-family:'Open Sans', sans-serif;
font-size:32px;
color:#f6c603;
}
.square{
margin:0px 10px 6px 10px;
}
.osnform{
padding-left:20px;
margin-top:20px;
padding-bottom:60px;
}
.osnemail{
font-size:20px;
color:#222;
padding:10px;
width:400px;
height:57px;
}
.osnsubmit{
display:inline-block;
background-image:url(images/subscribe-button.jpg);
width:144px;
height:57px;
border:0;
margin-left:-5px;
margin-bottom:-1px;
vertical-align:top;
}
.osnsubmit2{
display:inline-block;
background-image:url(images/subscribe-button2.jpg);
width:144px;
height:57px;
border:0;
margin-left:-10px;
margin-top:11px;
vertical-align:top;
}
.maintext{
font-family:'Open Sans', sans-serif;
font-size:28px;
color:#f6c603;
text-align:center;
margin-bottom:100px;
padding:0 5%;
}
.blink{
animation:3s blinker linear infinite;
-webkit-animation:3s blinker linear infinite;
-moz-animation:3s blinker linear infinite;
}

@-moz-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@-webkit-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }
}