/** Generated by FG **/
@font-face {
    font-family: 'foo';
    src: url('../fonts/foo.eot');
    src: local('☺'), url('../fonts/foo.woff') format('woff'), url('../fonts/foo.ttf') format('truetype'), url('../fonts/foo.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.logo{
    background: url("../img/logo.png");
    height: 150px;
    width: 118px;
    margin-top: -25px;
    transition: 200ms ease-in-out all;
}

.jme-header{
    top: 30vh;
    overflow: visible;
    position: absolute;
    transition: 200ms ease-in-out all;
    color: #9e9e9e;
    background-color: #383838;
}

.jme-header.top{
    top:0;
}

.jme-header.top .logo{
    height: 50px;
    width: 39px;
    margin-top: 0px;
    background-size: contain;
}

.jme-header.top .jme-title{
    top:60px;
    left:100px;
}

.mdl-tooltip {
   will-change: auto;
}

body{
    background: url("../img/bg.jpg");
}

.jme-title{
    position: absolute;
    top:-35px;
    left:200px;
    color:#f3c802;
    font-size: 3.5em;
    font-family: "foo";
    text-shadow: 0px 0px 7px #000000;
    transition: 200ms ease-in-out all;
}

.book{
    height: 250px;
}

.jme-nav{
    font-weight: bold;
}
.jme-menu-button{
    margin-top: 55px;
    -webkit-box-shadow: -1px 10px 10px -6px rgba(0,0,0,0.64);
    -moz-box-shadow: -1px 10px 10px -6px rgba(0,0,0,0.64);
    box-shadow: -1px 10px 10px -6px rgba(0,0,0,0.64);
}

.filler{
    width:15px;
}

.jme-button-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-12px,-12px);
    transform: translate(-12px,-12px);
    line-height: 24px;
    width: 24px;
}

.content{
    background-color: #eee;
    left:0;
    width: 100%;
}

.content-column{
    display: flex;
    width:30%;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    margin: 10px;
}

.row{
    display: flex;
    width:100%;
    flex-direction: row;
    justify-content: center;
}

.content .title {
    font-size: 2em;
    font-weight: 300;
    padding-top: 0px;
    margin: 0px auto 0px auto;
    width: 60%;
    color: #000;
    border-bottom: 1px solid #DDD;
}
.content.intro .title {
    margin-left: 37%;
}
.graphics .jme-card, .utils .jme-card{
    width: 20%;
}

.graphics .jme-card .mdl-card__title, .utils .jme-card .mdl-card__title{
    background-size: cover;
    height: 110px;
    color: #ffffff;
    text-shadow: 0px 0px 7px #000000;
}

.light{
    background: url("../img/elephant.png");
}
.shader{
    background: url("../img/toon-dino.png");
}
.filter{
    background: url("../img/water-bg.jpg");
}

.appstate{
    background: url("../img/appstate.png");
}
.control{
    background: url("../img/control.png");
}
.input{
    background: url("../img/controller.jpg");
}

.physics{
    background: url("../img/physics.jpg");
}
.terrain{
    background: url("../img/terrain.jpg");
}
.cinematics{
    background: url("../img/cinematics.png");
}

.networking{
    background: url("../img/networking.jpg");
}
.gui{
    background: url("../img/gui.png");
}
.brand{
    background: url("../img/monkeyx2.png");
    background-size: cover;
    width:50vh;
    min-height: 50vh;
    align-self: flex-end;
}

.jme-card .mdl-card__title{
    /*background-color: #dddddd;*/
}

.jme-card{
    width:100%;
    margin: 10px;
}

.intro{
    margin-top: 50vh;
    /*   height:70vh;*/
}
.graphics{
    margin-top: 30vh;
}


.utils{
    margin-top: 30vh;
}

.footer{
    margin-top: 30vh;
}
footer{
    width:100%;
    background-color: #383838 !important;
    box-shadow: inset 0 4px 4px -4px #222;
}

.footer-content{
    width:141px;
    margin: auto;
}