/* Open Sans */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans'), url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans'), url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff');
}

/* Roboto Slab */
@font-face {
    font-family: 'Roboto Slab', sans-serif;
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Slab'), url('fonts/RobotoSlab-Regular.ttf') format('truetype');
}

a {
    text-decoration: none;
}

.align {
    text-align: justify;
}

.banner {
    width: 100%;
    height: 500px;
    background-color: lightgray;
}

.bannerMenu {
    display: grid;
    grid-template-areas: 'main main main main main';
    grid-template-columns: 20% 15% 20% 35% 10%;
    width: 100%;
    height: 75px;
    background-color: gray;
    color: white;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}
.bannerMenu > div {
    padding-top: 25px;
    background-color: black;
    display: inline-grid;
    margin: 0 1px 0 1px;
}
.bannerMenu > div:first-child {
    margin: 0 1px 0 0;
}
.bannerMenu > div:last-child {
    margin: 0 0 0 1px;
}

body {
    margin: 0;
}

.chart {
    display: grid;
    grid-template-areas: 'main main main main main';
    grid-template-columns: 20% 15% 20% 35% 10%;
    width: 100%;
    height: auto;
    background-color: white;
    margin: 2px auto 0 auto;
    font-family: 'Open Sans';
    text-align: center;
}
.chart > div {
    display: inline-grid;
    margin: 0 1px 0 1px;
    padding: 15px;
    background-color: lightgray;
}
.chart > div:first-child {
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 1px 0 0;
    background-color: rgb(100,100,105);
    color: white;
}
.chart > div:last-child {
    margin: 0 0 0 1px;
}
.chart > div:last-child:hover {
    background-color: rgba(0,255,0,0.5);
}

.desc {
}

h1 {
    font-family: 'Roboto Slab', sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 10px 0 15px 0;
    position: relative;
    width: 100%;
    color: white;
    background-color: black;
}

.trans {
    transition: 0.5s;
}

@media only screen and (min-width: 1200px) {
    .align {
        text-align: justify;
    }
    .bannerMenu {
        grid-template-columns: 20% 10% 15% 45% 10%;
    }
    .chart {
        grid-template-columns: 20% 10% 15% 45% 10%;
    }
    .chart > div {
        padding: 25px;
    }
}