/*
Project: 17-18_1-23 English
Author: Richy Thomas
Date: 03/11/17
Colour Pallete: Green: rgba(0, 100, 0, 1); Yellow: rgba(253, 228, 40, 1); Grey: rgba(242, 242, 242, 1);
*/

/* Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Roboto:500&amp;subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&amp;subset=latin-ext');

/* Structure */

body {
  background-color: #219eab;
  background-image: url("../images/cartographer.png");
  font-family: 'Roboto', sans-serif;
}

/* Sections */

section {
  display: none;
}

/* Typography */

h1, h2, h3, h4, h5, h6, p.lead {
  margin-top: 0;
  margin-bottom: 15px;
  color: #21323c;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

p, ul li, ol li {
  font-size: 16px;
  line-height: 28px;
}

p.lead {
  font-size: 20px;

}

a {
  color: #219eab;
  text-decoration: underline;
}

a:focus, a:hover {
  color: #219eab;
  text-decoration: none;
}

:focus {
  outline: none;
}

.hidden-text {
  display: none;
}


/* Images */

.img-border {
  margin: 20px;
}

.pull-right.img-border {
  margin-right: 0;
}

.pull-left.img-border {
  margin-left: 0;
}


/* Header */

header {
  padding: 40px 0;
}

header h1 {
  color: #21323c;
  font-family: "Roboto Condensed";
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

header h2 {
  color: rgba(255, 255, 255, 1);
  font-family: "Roboto Condensed";
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

#company-branding {
  margin: 9px 0;
}

#company-branding img {
  margin-right: 15px;
}

#company-branding img:last-child {
  margin-right: 0;
}

#print-branding {
  display: none;
}

/* Main Content */

.content {
  padding: 50px 0;
}

.grey {
  background-color: rgba(242, 242, 242, 1);
}

.white {
  background-color: rgba(255, 255, 255, 1);
}

.blue {
  background-color: rgba(0, 100, 0, 1);
}

.bordered {
  border-top: 1px solid rgba(204, 204, 204, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
}


/* Activity Instructions */

.activity-instructions {
  text-align: center;
}

.activity-instructions h3 {
  font-size: 26px;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

/* Buttons */

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: none;
}

.btn-link {
  color: #219eab;
}

.btn-lg {
  padding: 12px 16px;
  font-size: 22px;
}

.btn-default {
  background-color: #21323c;
  border-color: #21323c;
  color: #FFF;
}


.btn-default:hover,
.btn-default:active,
.btn-default:visited,
.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-color: #219eab;
  border-color: #219eab;
  color: #FFF;
  outline: none;
}

.btn-question {
  padding: 17px 16px;
  font-size: 29px;
}

/* Footer */

#footer {
  margin: 25px 0;
  text-align: center;
}

#footer p {
  color: rgba(255, 255, 255, 1);
  letter-spacing: 2px;
  margin: 0;
}


/* Hints & Alerts */

.alert {
  padding: 20px;
}

.alert p {
  font-size: 22px;
  line-height: 32px;
}

.btn-correct {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.btn-wrong{
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.hint {
  display: none;
}

.hint .alert p:last-child {
  margin-bottom: 0;
}

.alert.question {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.alert.question p {
  font-size: 22px;
  line-height: 32px;
}

.alert.answer p {
  font-size: 26px;
  line-height: 40px;
}

.well {
  background: rgba(43, 125, 133, 0.3);
  border: none;
}

.well p:last-child, .well ul, .well ol {
  margin-bottom: 0;
}

/* Modal */

.modal {
  padding-top: 100px;
  z-index: 1070;
}

.modal-dialog .modal-content .modal-header {
  background-color: #23527c;
  border-radius: 4px 4px 0px 0px;
  color: #FFF;
}

.modal-header h3 {
  color: #FFF;
}

.modal-header .close {
  color: rgba(255,255,255,1);
  font-size: 30px;
  margin-top: 0;
  opacity: 1;
}

.modal-header .close:hover {
  opacity: .5;
}

.modal-title {
  color: #FFF;
}

.modal-body p, .modal-body ul li, .modal-body ol li {
  font-size: 18px;
  line-height: 30px;
}


/* Tablet */
@media(min-width: 768px){

  #company-branding {
    margin: 9px 0;
    text-align: right;
  }

}

/* Desktop */
@media(min-width:992px){


}

/* Large Desktop */
@media(min-width:1200px){


}

/* Print */
@media print {

  .btn {
    display: none;
  }

  .nextBtn, .prevBtn {
    visibility: hidden;
  }

  #print-branding {
    display: inline-block;
  }

  #digital-branding {
    display: none;
  }

  .activity-tools, .activity-controls {
    display: none;
  }

}

/* Animations */

.animate-1 {
  animation-duration: 1s;
  animation-delay: 0s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;
}

.animate-2 {
  animation-duration: 1s;
  animation-delay: 0.2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-duration: 1s;
  -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.5s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
}

.animate-5 {
  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-6 {
  animation-duration: 1s;
  animation-delay: 1s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
}

.animate-7 {
  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-8 {
  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-9 {
  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-10 {
  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-11 {
  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-12 {
  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-13 {
  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-14 {
  animation-duration: 1s;
  animation-delay: 2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2s;
}

.animate-15 {
  animation-duration: 1s;
  animation-delay: 2.2s;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 2.2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2.2s;
}