/* TYPOGRAPHY */

*, .reg, h3 {
font-family: 'Roboto Slab', serif;
}

.big, .big * {
font-family: 'Sigmar One', cursive !important;
}

body{background:-moz-radial-gradient(top center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);background:-webkit-gradient(radial,top center,0px,top center,100%,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.05)));background:-webkit-radial-gradient(top center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);background:-o-radial-gradient(top center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);background:-ms-radial-gradient(top center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);background:radial-gradient(ellipse at top center,rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#0d000000',GradientType=1);min-height:100%;background-attachment:fixed;}



/*  NAV */

.menu-img {
width: 200px;
height: auto;
}

.top-bar, .top-bar ul {
    background-color: #444;
}

.top-bar a:hover {
color: #fff;
}

.tbr {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
   
}

/* Small only */
@media screen and (max-width: 39.9375em) {



}



/* ROTATOR */

.rotator {
	display: block;
	position: absolute;
	    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
}

@media screen and (orientation : landscape){

.rotator {
	display: none;
}

}



/* INTRO */

.intro {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   text-align: center;
   padding: 30px 0;
}

.intro img {
 margin: 90px 0 60px 0;
}


div.flex {
display: -webkit-flex;
display: flex;
}

div.flex * {
-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.panels>div {
justify-content: space-around;
}

.pane {
background: #fff;
width: 80%;
border: 3px dashed #bbb;
padding: 20px;
	margin-bottom: 60px;
	/*
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	align-content: flex-start; */
}

.pane * {
   -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pane h2 {
text-align: center;
color: #d71f26;
line-height: 1;
padding-bottom: 20px;
}

.pane ol li {
padding-bottom: 15px;
color: #444;
}

.pane:hover {
border: 3px solid #d71f26;
}

.pane.howto {
border: none;
background: none;
padding: 20px 0 0 0;
}

.pane.howto:hover {
border: none;
}

.pane img {
width: 100%;
height: auto;
}

.pane h3 {
font-size:1rem;
text-align: center;
padding: 10px 0 20px;
}

.pane a:hover img {
outline: 3px solid #d71f26;
}

.btn {
font-family: 'Sigmar One', cursive !important;
text-align: center;
display: block;
background: #d71f26;
color: #fff;
justify-content: center;
padding: 10px 0;
width: 100%;
}

.btn:hover, .btn:focus {
background: #000;
color: #fff;
}

.diagram {
padding-bottom: 20px;
}

.bookpage>div {
justify-content: space-around;
}

.book {
padding: 20px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	margin-bottom: 0px;
	align-content: flex-start;
}

.book * {
   -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.book h3{
font-size: 1.25rem;
text-align: center;
padding-top: 15px;
}


.book a:hover img {
outline: 3px solid #d71f26;
}

.intro.bookpage h1 {
float: left;
}

.rightmenu {
float: right;
}

.rightmenu a {
display: block;
width: 50px;
height: 50px;
line-height: 47px;
border-radius: 50%;
color: #fff;
background: #d71f26;
float: left;
font-size: 1.5rem;
margin: 7px;
border: 3px solid #d71f26;
}

.rightmenu a:hover {
background: #000;
border: 3px solid #000;
}

.rightmenu a.active {
border: 3px solid #d71f26;
background: #fff;
color: #d71f26;
}

.mum {
width: 100%;
height: auto;
border-radius: 50%;
}