body, html, h1 {
    padding:0;
    margin:0;
}
body,html {
    position:relative;
    height:100%;
}
h1 {
    font-size:80px;
    margin-bottom:10px;
}

header {
    font-size:40px;
}
strong {
    font-style:none;
    color:#8B2B28;
}

a, a:hover {
    text-decoration:none;
}
header {
    background:rgba(255,255,255,1);
    box-shadow:0 0 10px #aaa;
    z-index:1000;
    color:white;
    min-height: 100px;
    border-bottom: 20px solid #1CA39C;
}

header .avatar {
    position: absolute;
    left: 0;
}

.header-inner {
    color: #292728;
    margin-left: 120px;
    margin-bottom: 20px;
}

.header-inner h2 {
  margin:0;
  padding:10px 0 5px;
}

.header-inner h4 {
  margin:0; padding:0;
}

.exercise {
    position:relative;
    margin:0;
    padding:0;
}
.exercise .logo {
    height:250px;
    background-position:center center;
    background-repeat:no-repeat;
}
.exercise p {
    margin:0;
    padding:10px;
    color:white;
    background:#ddd;
    text-align:center;
}
.exercise h2 {
    text-align:center;
    margin:0;
    padding:15px;
    font-size:30px;
    font-weight:normal;
    color:white;
}
.exercise:after {
    content:"";
    position:absolute;
    background:rgba(255,255,255,0.5);
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.exercise:hover {
    z-index:100;
    background:white;
    -webkit-transform:scale(1.03);
    box-shadow:0 0 20px #aaa;
    transform:scale(1.1);
}
.exercise:hover:after {
    -webkit-transition:0.2s linear opacity;
    opacity:0;
}
.body {
    margin:0;
    padding:0;
}
.module-1 h2,
.module-2 h2,
.module-3 h2,
.module-4 h2 {
}
.module-1 h2 { background-color:#F0BB58; }
.module-1 p { background-color:#edae39; }
.module-1 .logo { background-image:url(../images/module-1.png); }

.module-2 h2 { background-color:#00B0D7; }
.module-2 p { background-color:#0094b5; }
.module-2 .logo { background-image:url(../images/module-2.png); }

.module-3 h2 { background-color:#F35D33; }
.module-3 p { background-color:#f14413; }
.module-3 .logo { background-image:url(../images/module-3.png); }

.module-4 h2 { background-color:#E33236; }
.module-4 p { background-color:#d61d21; }
.module-4 .logo { background-image:url(../images/module-4.png); }

.module-5 h2 { background-color:#292728; }
.module-5 p { background-color:#181617; }
.module-5 .logo { background-image:url(../images/module-5.png); }

.module-6 h2 { background-color:#73B865; }
.module-6 p { background-color:#5fac4f; }
.module-6 .logo { background-image:url(../images/module-6.png); }

.module-7 h2 { background-color:#800080; }
.module-7 p { background-color:#5e005e; }
.module-7 .logo { background-image:url(../images/module-7.png); }

.module-8 h2 { background-color:#8B2B28; }
.module-8 p { background-color:#712320; }
.module-8 .logo { background-image:url(../images/module-8.png); }

.module-grid > .col-right {
    display:table-cell;
    min-height:100%;
    min-height:500px;
    vertical-align:top;
}
.module-grid > .col-left {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:30%;
    text-align:center;
}
.module-grid > .col-left img {
  padding-top:50%;
}
.module-grid > .col-right {
    position:absolute;
    left:30%;
    right:0;
    top:0;
    padding:20px;
    bottom:0;
}

.module-1-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #F0BB58;
}
.module-1-grid > .col-right {
    border-top:50px solid #edae39;
}

.module-2-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #00B0D7;
}
.module-2-grid > .col-right {
    border-top:50px solid #0094b5;
}

.module-3-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #F35D33;
}
.module-3-grid > .col-right {
    border-top:50px solid #f14413;
}

.module-4-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #E33236;
}
.module-4-grid > .col-right {
    border-top:50px solid #d61d21;
}

.module-5-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #292728;
}
.module-5-grid > .col-right {
    border-top:50px solid #181617;
}

.module-6-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #73B865;
}
.module-6-grid > .col-right {
    border-top:50px solid #5fac4f;
}

.module-7-grid > .col-left {
    box-shadow:inset 0 0 50px #aaa;
    border-top:50px solid #800080;
}
.module-7-grid > .col-right {
    border-top:50px solid #5e005e;
}

.exercise-matrix {
    margin:20px 0;
}

.exercise-matrix .actions a {
    display:block;
}
.exercise-matrix td {
    vertical-align:top;
}
.exercise-matrix th,
.exercise-matrix td {
    padding:10px;
}
.exercise-matrix th {
    border-bottom:1px solid #ddd;
}

@media only screen and (max-width : 991px) {
    .exercise {
        width:inherit;
    }
}

@media only screen and (max-width : 780px) {
  .module-grid > .col-left {
    width:auto;
    position:static;
    display:block;
    height:200px;
  }
  .module-grid > .col-right {
    width:auto;
    position:static;
    display:block;
  }
}

.readme {
  border:1px solid #ddd;
  padding:20px;
  margin-bottom:20px;
  background:#f9f9f9;
}

.readme h1 {
  font-size:20px;
}

.readme h2 {
  font-size:15px;
}

