/*
Project: 16-17_1.13
Author: Richy Thomas
Pallette: Dark: #020111; Light: #FFF;
*/

@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700';

html, body {
  background: #020111;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  margin: 0 0 15px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 25px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

p, ul, ol {
  font-size: 17px;
  line-height: 27px;
}

p.lead {
  font-size: 20px;
  line-height: 30px;
}


/* Buttons */

.btn-default {
  background: #020111;
  color: #FFF;
}

.btn-default:hover, .btn-default:focus, .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover {
    background: #FFF;
    border: 1px solid #020111;
    color: #020111;
    outline: none;
}

/* Stripes */

.stripes i {
  float: right;
  width: 3%;
  opacity: .9;
}

#stripes-top i {
  height: 130px;
}

#stripes-bottom i {
  height: 68px;
}

/* Header */

#header {
  height: 130px;
}

#subject-branding {
  left: 0;
  margin-top: 30px;
  position: absolute;
  z-index: 20;
}

#subject-branding img {
  float: left;
  margin-right: 20px;
}

#subject-titles {
  float: left;
}

#subject-titles h1 {
 color: #FFF;
 font-size: 30px;
 margin: 0 0 5px;
}

#subject-titles h1 small {
 color: #d3d3d3;
 font-size: 20px;
}

#subject-titles h2 {
 color: #d3d3d3;
 font-size: 20px;
 margin: 0;
}

#subject-titles h2 small {
 color: #FFF;
 font-size: 14px;
 letter-spacing: 1px;
 font-weight: 300;
}

#company-branding {
  margin: 35px 0;
  position: absolute;
  right: 0;
  z-index: 20;
}

#logo-wjec {
  margin-right: 10px;
}

/* Activity Intro */

#activity-intro-container {
  background: #F1F1F1;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 0 rgba(0,0,0,0.12), 0 0 0 rgba(0,0,0,0.24);
  padding: 2em 4em;
  position: relative;
}

#activity-intro-container p.lead {
  margin-bottom: 0;
  font-weight: 400;
}

/* Activity Content */

#activity-container {
  background: #FFF;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding: 2em 4em;
}

/* Activity / Resource Controls */

.controls {
  margin: 2em 0 1em;
}

#activity-controls {
  text-align: left;
}

#resource-controls {
  text-align: right;
}

/* Footer */

#copyright {
  left: 0;
  margin: 20px 0;
  position: absolute;
  z-index: 20;
}

#copyright p {
  color: #FFF;
  font-family: 'Roboto Slab', serif;
  letter-spacing: 2px;
  margin: 0;
  text-align: left;
  font-size: 14px;
}

/* Other Content */

#hints {
  margin-top: 20px;
}

.well {
  margin: 0;
  background-color: #E5E5E5;
  border: 1px solid #020111;
  color: #020111;
}

.well p:last-child {
  margin: 0;
}

#hints .well p {
  margin: 0;
}

/* Hidden Content */

.reveal {
  display: none;
}

#hints {
  display: none;
}


/* Tablet */
@media(min-width: 768px){



}


/* Desktop */
@media(min-width:992px){

/* Stripes */

#stripes-top i {
  height: 120px;
}

/* Header */

#header {
  height: 120px;
}


}


/* Large Desktop */
@media(min-width:1200px){



}


/* Print */
@media print {

  #subject-branding img, #company-branding {
    display: none;
  }

  .btn {
    display: none;
  }

  #copyright {
    text-align: center;
  }

  #activity-intro-container {
    padding: 1em 0 2em;
  }

  #activity-container {
    padding: 0;
  }

  #footer, #copyright {
    margin: 0;
  }

}

/* Stripes Colours */

.stripes i:nth-child(1) {
  background: -webkit-linear-gradient(top, #020111 10%, #3a3a52 100%);
  background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
}
.stripes i:nth-child(2) {
  background: -webkit-linear-gradient(top, #20202c 0%, #515175 100%);
  background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
}
.stripes i:nth-child(3) {
  background: -webkit-linear-gradient(top, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
  background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
}
.stripes i:nth-child(4) {
  background: -webkit-linear-gradient(top, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
  background: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
}
.stripes i:nth-child(5) {
  background: -webkit-linear-gradient(top, #757abf 0%, #8583be 60%, #eab0d1 100%);
  background: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%);
}
.stripes i:nth-child(6) {
  background: -webkit-linear-gradient(top, #82addb 0%, #ebb2b1 100%);
  background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%);
}
.stripes i:nth-child(7) {
  background: -webkit-linear-gradient(top, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
  background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
}
.stripes i:nth-child(8) {
  background: -webkit-linear-gradient(top, #b7eaff 0%, #94dfff 100%);
  background: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
}
.stripes i:nth-child(9) {
  background: -webkit-linear-gradient(top, #9be2fe 0%, #67d1fb 100%);
  background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%);
}
.stripes i:nth-child(10) {
  background: -webkit-linear-gradient(top, #90dffe 0%, #38a3d1 100%);
  background: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%);
}
.stripes i:nth-child(11) {
  background: -webkit-linear-gradient(top, #57c1eb 0%, #246fa8 100%);
  background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);
}
.stripes i:nth-child(12) {
  background: -webkit-linear-gradient(top, #2d91c2 0%, #1e528e 100%);
  background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
}
.stripes i:nth-child(13) {
  background: -webkit-linear-gradient(top, #2473ab 0%, #1e528e 70%, #5b7983 100%);
  background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
}
.stripes i:nth-child(14) {
  background: -webkit-linear-gradient(top, #1e528e 0%, #265889 50%, #9da671 100%);
  background: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
}
.stripes i:nth-child(15) {
  background: -webkit-linear-gradient(top, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
  background: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
}
.stripes i:nth-child(16) {
  background: -webkit-linear-gradient(top, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
  background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
}
.stripes i:nth-child(17) {
  background: -webkit-linear-gradient(top, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
  background: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
}
.stripes i:nth-child(18) {
  background: -webkit-linear-gradient(top, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
  background: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
}
.stripes i:nth-child(19) {
  background: -webkit-linear-gradient(top, #010A10 30%, #59230B 80%, #2F1107 100%);
  background: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%);
}
.stripes i:nth-child(20) {
  background: -webkit-linear-gradient(top, #090401 50%, #4B1D06 100%);
  background: linear-gradient(to bottom, #090401 50%, #4B1D06 100%);
}
.stripes i:nth-child(21) {
  background: -webkit-linear-gradient(top, #00000c 80%, #150800 100%);
  background: linear-gradient(to bottom, #00000c 80%, #150800 100%);
}
.stripes i:nth-child(22) {
  background: #00000c;
}

i:hover {
  opacity: 1;
}

/* Animations */

.animate-1 {
  animation-duration: 2s;
  animation-delay: 0s;
  -moz-animation-duration: 2s;
  -moz-animation-delay: 0s;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0s;
}

.animate-2 {
  animation-duration: 2s;
  animation-delay: 0.2s;
  -moz-animation-duration: 2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 0.2s;
}

.animate-3 {
  animation-duration: 1s;
  animation-delay: 0.3s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
}

.animate-4 {
  animation-duration: 1s;
  animation-delay: 0.4s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.4s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.4s;
}

.animate-5 {
  animation-duration: 1s;
  animation-delay: 0.5s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
}

.animate-6 {
  animation-duration: 1s;
  animation-delay: 0.6s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.6s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.6s;
}

.animate-7 {
  animation-duration: 1s;
  animation-delay: 0.7s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.7s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.7s;
}

.animate-8 {
  animation-duration: 1s;
  animation-delay: 0.8s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.8s;
}

.animate-9 {
  animation-duration: 1s;
  animation-delay: 0.9s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.9s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.9s;
}

.animate-10 {
  animation-duration: 1s;
  animation-delay: 1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
}

.animate-11 {
  animation-duration: 1s;
  animation-delay: 1.1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.1s;
}

.animate-12 {
  animation-duration: 1s;
  animation-delay: 1.2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.2s;
}

.animate-13 {
  animation-duration: 1s;
  animation-delay: 1.3s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.3s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.3s;
}

.animate-14 {
  animation-duration: 1s;
  animation-delay: 1.4s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.4s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.4s;
}

.animate-15 {
  animation-duration: 1s;
  animation-delay: 1.5s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.5s;
}

.animate-16 {
  animation-duration: 1s;
  animation-delay: 1.6s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.6s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.6s;
}

.animate-17 {
  animation-duration: 1s;
  animation-delay: 1.7s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.7s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.7s;
}

.animate-18 {
  animation-duration: 1s;
  animation-delay: 1.8s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.8s;
}

.animate-19 {
  animation-duration: 1s;
  animation-delay: 1.9s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1.9s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.9s;
}

.animate-20 {
  animation-duration: 1s;
  animation-delay: 2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2s;
}