/* Files (partials) to include */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Perhaps in the future just condense this mixin to margin_padding */
/* Flex box */
/* 768px / 16px = 1em */
/* Extra Small Only */
/* Small Devices, Tablets */
/* Medium and above devices */
/* Base styles */
html,
body {
  /* Margin, padding, height and width settings ensure html/body extends to far reaches of window */
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "Montserrat", arial, sans-serif; }

body {
  min-height: 100vh;
  /*If not enough content on page, ensures body at least reaches base of view...but still leaves whitespace. If do not fill the rest of the page then need to create sticky footer*/ }

button {
  padding: 10px 25px;
  font-size: 20px;
  background-color: transparent;
  margin: 0; }

h1 {
  letter-spacing: 10px;
  font-size: 45px; }

h2 {
  letter-spacing: 2px;
  font-size: 25px; }

p {
  font-size: 12px; }

a {
  color: #000;
  letter-spacing: 2px; }

a:hover,
a:focus {
  text-decoration: none;
  color: #000;
  font-weight: bold; }

/***************************
****************************
Layout Styles
****************************
***************************/
[class*="col-"] {
  /*border:1px solid red;*/
  /*height:100px;
    /*padding:0; */
  margin: 0;
  /*border:1px solid red; */ }

.container,
.container-fluid {
  margin: 0 auto;
  padding: 0; }

.container {
  max-width: 960px;
  /*border:1px solid black*/ }

/* Ensure row stays within bounds of container */
.row {
  margin: 0; }

.col-md-4 {
  padding: 0;
  /*height:100px; */
  /*border:4px solid red;*/ }

/*
.col-xs-6 {
    float:left;
    width:50%; 
}
*/
.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

/* Background class */
/* See here how to position a background image and adjust its opacity: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity */
/* Note on z-index. Default is auto, which means just inherits from parent. Often this is 
html which has a z-index of 0 */
/* To layer an element: Set element position to relative. Then set element:before position to absolute and z-index -1. Set it's background colour to what you desire and adjust opacity. This enables the background to be lightened without affecting the font on top. To ensure font is not affected, set container to z-index 1. If have another layer ie element:after, set container z-index to 2. See main class in sections as well as well_custom and btn_block */
.background, .background-secondary, .background-tertiary {
  position: relative;
  /*overflow: hidden;*/
  /*height:800px;*/
  /* Height auto sizes image to container that it is within in this case body,
    which has been set in base.scss as min-height:100vh */
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0; }

.background:before, .background-secondary:before, .background-tertiary:before {
  background: url("../Map_images/oldpaper_flikr.jpg") no-repeat center center;
  background-size: cover;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* By specifying z-index as -1, says that pseudo element is beneath background element (0) and can hence control background tone without affecting child elements */
  z-index: -1;
  opacity: 0.9; }

.background-primary {
  position: relative;
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  /*border-radius:100%; */
  opacity: 1;
  z-index: 1; }

/* Two layers above and below background to control light and shading without affecting title */
.background-primary:before {
  /*background-color:#fcf2de;*/
  background: url("../Map_images/paper2.jpg") no-repeat center center;
  background-size: cover;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*border-radius:100%;*/
  z-index: -1;
  opacity: 0.3; }

.background-primary:after {
  /*@extend .background:before;*/
  background: url("../Map_images/map2.jpg") no-repeat center center;
  background-size: cover;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*border-radius:100%;*/
  opacity: 0.3;
  z-index: -1; }

.background-secondary:before {
  background: url("../Map_images/quizback.jpg") no-repeat center center;
  background-size: cover; }

.background-tertiary:before {
  background: url("../Map_images/earth_map.jpg") no-repeat center center;
  background-size: cover; }

/*@import "modules/sections_2.scss";*/
/* DIALOGUE */
.dialogue {
  text-align: center;
  position: relative;
  font-style: italic;
  font-family: 'Niconne', cursive;
  padding: 10px 10px 25px; }
  .dialogue h1 {
    font-family: "Montserrat", arial, sans-serif;
    text-transform: uppercase;
    font-style: normal;
    font-size: 32px;
    font-weight: bold;
    margin: 10px auto;
    padding-top: 5px;
    line-height: 1.5;
    /*width:40%;
        border-bottom:3px solid black; */ }
    @media only screen and (max-width: 47.9375em) {
      .dialogue h1 {
        font-size: 24px; } }
  .dialogue h2 {
    font-weight: bold; }
    @media only screen and (max-width: 47.9375em) {
      .dialogue h2 {
        font-size: 20px; } }
  .dialogue p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 50px; }
    @media only screen and (max-width: 47.9375em) {
      .dialogue p {
        font-size: 18px;
        margin: 20px 0 0; } }
  @media only screen and (max-width: 47.9375em) {
    .dialogue p:last-of-type {
      margin-bottom: 0; } }

/* Dialogue for thin strip at top of landing page */
.dialogue-primary {
  height: 0;
  padding: 1px; }

/* Create smaller padding for registration and login pages */
@media only screen and (max-width: 47.9375em) {
  .dialogue-secondary {
    padding: 0 10px; }
    .dialogue-secondary h2 {
      margin: 20px 0; } }

/* Change h1 to h2 and style for Winner Page */
.dialogue-tertiary h2 {
  font-family: "Montserrat", arial, sans-serif;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 30px;
  font-weight: bold; }

@media only screen and (max-width: 47.9375em) {
  .dialogue-tertiary {
    /*word-wrap:break-word;*/ }
    .dialogue-tertiary h2 {
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold; } }

.supporting-1 #about {
  height:300px;
}

@media only screen and (max-width: 47.9375em) {
  .supporting-1 #about  {
    height:auto;
  } 
}

/* Mobile view landing page about panel */
@media only screen and (max-width: 47.9375em) {
  #about #wrap {
    height: 100px;
    overflow: scroll;
    padding: 0 10px; }
    #about #wrap h2 {
      margin: 0; } }

/* CSS for INFO WINDOW on map screen and place names*/
/*styling for info window. Seem to need to specify height in order to remove scollbar on x-axis */
/* See here for all media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */


/* stylize places' labels */
.label
{
    /*small, black text*/ 
    color: #000000;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align:center;
    width:-100px;
    padding:5px 0 0 10px;
    /*don't let places' labels wrap onto multiple lines*/ 
    white-space: nowrap;
}


div.gm-style-iw {
  background:url("../img/pages/infoframe.jpg") no-repeat center center;
  background-size:100% 100%;
  width:600px !important;
  height:300px !important;
  top:17px !important;
  left:4% !important;
}

@media only screen and (max-width: 47.9375em) and (orientation:portrait) {
  div.gm-style-iw {
    width:220px !important;
    height:200px !important;
    left:10% !important;
  }
}

@media only screen and (max-width: 47.9375em) and (orientation:landscape) { 
  div.gm-style-iw {
    width:300px !important;
    height:200px !important;
    left:8% !important;
  }
}


div.gm-style-iw #infowindow {
  width:600px;
  height:300px;
  padding:0 10px;
  overflow:hidden !important;
  border:1px solid black;
}


@media only screen and (max-width: 47.9375em) and (orientation:portrait) {
  div.gm-style-iw #infowindow {
    width:220px !important;
    height:200px !important;
    left:10% !important;
    /*border:1px solid red;*/
  }
}

@media only screen and (max-width: 47.9375em) and (orientation:landscape) { 
  div.gm-style-iw #infowindow {
    width:300px !important;
    height:200px !important;
    left:10% !important;
    /*border:1px solid red;*/
  }
}


/* Paper background inside infowindow */
#paper {
  position: absolute;
  top: 12%; 
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 80%;
  height: 76%;
  margin: 0 auto;
}
  
#infowindow .container {
  text-align: center;
  position: relative;
  top:40px;
  width:80%;
  height:100%;
}


@media only screen and (max-width: 47.9375em) {
  #infowindow .container {
    top:20px; 
    width:85%;
    /*border:1px solid blue*/;
  }
}

@media only screen and (max-width: 47.9375em) and (orientation:landscape) {
  #infowindow .container {
    top:20px; 
    width:80%;
    /*border:1px solid blue;*/ 
  }
}

/* font short-hand: font: font-style font-variant font-weight font-size/line-height font-family; */
#infowindow h2 {
  font: italic bold 25px Garamond, Baskerville, serif;
  margin: 20px 0;
  letter-spacing: normal; }
  
@media only screen and (max-width: 47.9375em) and (orientation:portrait)  {
  #infowindow h2 {
    font: italic bold 16px Garamond, Baskerville, serif;
    margin: 15px 0 10px;
  }
}

@media only screen and (max-width: 47.9375em) and (orientation:landscape) {
  #infowindow h2 {
    font: italic bold 16px Garamond, Baskerville, serif;
    margin: 20px 0 10px; 
  }
}

#infowindow .container p {
  font: italic bold 16px Garamond, Baskerville, serif;
  margin-bottom:20px;
  line-height:1.5;
}

@media only screen and (max-width: 47.9375em) and (orientation:portrait) {
  #infowindow .container p {
    font: italic bold 10px Garamond, Baskerville, serif;
    margin-bottom:5px; 
    line-height:1.5;
  }
}

@media only screen and (max-width: 47.9375em) and (orientation:landscape){
  #infowindow .container p {
    font: italic bold 12px Garamond, Baskerville, serif;
    line-height:1.5;
    margin-bottom:10px;
  }
}

#infowindow .container a {
  font: italic bold 14px Garamond, Baskerville, serif;
  letter-spacing: normal;}
  
@media only screen and (max-width: 47.9375em) {
  #infowindow .container a {
    font: italic bold 10px Garamond, Baskerville, serif;
    line-height:1.5;
  }
}



/* BUTTONS */
.btn_block {
  /*width:100%;
    height:100%;*/
  position: relative;
  border: 1px solid;
  border-radius: 4px;
  -webkit-box-shadow: inset -1px -1px 14px 1px black;
  -moz-box-shadow: inset -1px -1px 14px 1px black;
  box-shadow: inset -1px -1px 14px 1px black; }

/* Color background and adjust opacity allowing brown of body to mix with white of button background without affecting font */
.btn_block:before {
  background: url("../Map_images/paper_rgbstock.jpg") no-repeat center center;
  background-size: cover;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background:#fcf2de;*/
  border-radius: 4px;
  opacity: 1;
  z-index: -1; }

.btn_block:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcf2de;
  border-radius: 4px;
  opacity: 0.6;
  z-index: -1; }

/* WELLS */
/* Go here to model box shadows: http://www.cssmatic.com/box-shadow and here for tutorial:
https://css-tricks.com/almanac/properties/b/box-shadow/ */
.well_custom {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; *
    -webkit-box-shadow: inset -1px -1px 14px 1px rgba(0,0,0,1);
    -moz-box-shadow: inset -1px -1px 14px 1px rgba(0,0,0,1);
    box-shadow: inset -1px -1px 14px 1px rgba(0,0,0,1); */
  /*-webkit-box-shadow: inset -1px -1px 14px 1px #e3e3e3;*/
  /* box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5); */
  /*box-shadow: inset 2px 2px 1px #272B2C;*/
  box-shadow: inset 3px 3px 1px rgba(0, 0, 0, 0.5);
  z-index: 0; }

.well_custom:before {
  position: absolute;
  background: url("../Map_images/paper_rgbstock.jpg") no-repeat center center;
  background-size: cover;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background:#fff;*/
  z-index: -1;
  /*opacity:0.3;*/ }

/* White layering used to lighten background imaage behind text */
.well_custom:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #fcf2de;
  opacity: 0.2; }

/* Add frame to any well or block using background-image Note keep splice to between 10-20% */
.well-primary {
  border: 20px solid;
  opacity: 1;
  /*outline:1px solid #000;*/
  /* Apparently need to save GIMP file as png to preserve transaparency.
    See here on how to change certain parts of image to transparent: https://graphicdesign.stackexchange.com/questions/5446/making-the-background-of-an-image-transparent-in-gimp
    
    ie in below case have change centre of picture frame and outside */
  border-image: url(../Map_images/test_frame.png) 15% round;
  /* Use background-clip to make padding transparent apart from desired image border: See here: https://css-tricks.com/transparent-borders-with-background-clip/ */
  background-clip: padding-box; }

/* MENU/LIST CLASS */
.menu {
  padding: 0;
  margin: 0 0 25px;
  list-style: none;
  /*float:left; */
  /*border:1px solid red; */ }
  @media only screen and (max-width: 47.9375em) {
    .menu {
      display: none; } }
  .menu li {
    display: inline-block;
    padding: 15px 25px;
    margin: 0 20px 0;
    /*text-transform:uppercase;  */
    font-style: italic;
    font-family: 'Niconne', cursive;
    font-size: 20px; }

.mobile_menu {
  display: none; }
  @media only screen and (max-width: 47.9375em) {
    .mobile_menu {
      display: block;
      padding: 0;
      margin: 20px auto 0;
      /*border:1px solid red;*/
      width: 20%;
      height: 30px; }
      .mobile_menu i.fa-bars {
        font-size: 20px;
        position: relative;
        top: 3px; }
      .mobile_menu i.fa-long-arrow-up {
        display: none;
        font-size: 24px; } }

.mobile_menu-primary {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0; }
  .mobile_menu-primary a,
  .mobile_menu-primary li {
    font-size: 20px;
    letter-spacing: normal;
    margin-top: 10px; }
  @media only screen and (max-width: 47.9375em) {
    .mobile_menu-primary {
      display: none; } }
  
  /* For Winner page (Scores) */
.menu-primary {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-bottom: 20px; }
  .menu-primary li {
    font-style: italic;
    font-family: 'Niconne', cursive;
    font-size: 25px;
    letter-spacing: normal; }

/*CSS FOR map_new.html and question_new.html windows */
.map_window {
  /*text-align:center; */ }
  .map_window #map-canvas {
    height: 600px;
    /*background-color: #fff;*/
    width: 85%;
    margin: 0 auto; }
    @media only screen and (max-width: 47.9375em) {
      .map_window #map-canvas {
        height: 400px; } }

.painting_window .container {
  height: 400px;
  /*background-color: #fff;*/
  width: 60%;
  /*border: 1px solid #000;*/ }
  @media only screen and (max-width: 47.9375em) {
    .painting_window .container {
      width: 90%; } }

.painting_window img {
  height: 100%;
  width: 100%; 
  border-radius:100%;
}

/* CSS FOR HEADER SECTION */
.header {
  /*border:1px solid blue; */
  text-align: center;
  width: 100%;
  padding: 50px 225px 60px; }
  @media only screen and (max-width: 47.9375em) {
    .header {
      margin: 0 0 20px;
      padding: 0; } }

.header-primary .container-fluid {
  margin: 0 auto; }
  @media only screen and (max-width: 47.9375em) {
    .header-primary .container-fluid {
      width: 80%; } }

/* Wider header section for mobile than primary */
.header-secondary .container-fluid {
  margin: 0 auto; }
  @media only screen and (max-width: 47.9375em) {
    .header-secondary .container-fluid {
      width: 100%;
      padding-top: 30px; } }

/*
.header .container-fluid .header_bar {
  padding: 1px;
  outline: #fff; }*/
.main {
  text-align: center;
  padding: 0;
  margin: 0 auto;
  width: 70%;
  height: 500px;
  border: 1px solid black; }

@media only screen and (max-width: 47.9375em) {
  .main {
    /*padding:10px 10px 40px;*/
    height: 400px;
    width: 90%; } }

.main .container-fluid {
  position: relative;
  top: 40%;
  /*border:1px solid black;*/
  /* Ensure container sits on top of three background-primary layers */
  z-index: 2; }
  @media only screen and (max-width: 47.9375em) {
    .main .container-fluid {
      top: 35%; } }

.main .container-fluid h1 {
  border-bottom: 3px solid black;
  margin: 0 auto;
  width: 55%;
  padding-bottom: 15px;
  margin-bottom: 25px; }

@media only screen and (max-width: 47.9375em) {
  .main .container-fluid h1 {
    border-width: 2px;
    width: 75%;
    font-size: 30px; } }

.main .container-fluid h2 {
  font-style: italic;
  font-family: 'Niconne', cursive; }

@media only screen and (max-width: 47.9375em) {
  .main .container-fluid h2 {
    margin: 0 auto;
    width: 60%;
    font-size: 20px; } }

/* CSS SELECTION - FOR ADJUSTING LOOK OF CAMPAIGN MENU */
.selection {
  text-align: center;
  padding: 0; }
  .selection .dialogue {
    width: 90%;
    margin: 0 auto; }
  .selection .picture_select {
    height: 450px;
    /*width: 400px*/
    width: 80%;
    position: relative;
    margin: 40px auto 0;
    overflow: hidden;
    padding: 0; }
    @media only screen and (max-width: 47.9375em) {
      .selection .picture_select {
        height: 350px; } }
    @media only screen and (max-width: 47.9375em) {
      .selection .picture_select {
        margin: 10px auto 50px; } }
  @media only screen and (max-width: 47.9375em) {
    .selection .war {
      margin-bottom: 0; } }
  .selection .picture_select img {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 2px solid #000; }

/* Adjust height to fixed quantity for bottom dialogue panel */
.panel-height {
  position: relative;
  padding:0;
}
  .panel-height #wrap {
    /*overflow: scroll;*/ 
    height: 150px;
  }
    .panel-height #wrap h2 {
      margin:30px 0;
      /*border:1px solid blue;*/ 
    }
    .panel-height #wrap p {
      position: absolute;
      top:120px; 
      left: 37%; }
      @media only screen and (max-width: 47.9375em) and (orientation:portrait) {
        .panel-height #wrap p  {
          left:12%; } }
          
.panel-height-primary {
  position: relative;
  padding:0;}
  .panel-height-primary #wrap {
    overflow: scroll; 
    height: 170px; }
    .panel-height-primary #wrap h2 {
      margin-top:30px;
    }
    .panel-height-primary #wrap p {
      margin:50px 0 0;}
      @media only screen and (max-width: 47.9375em) and (orientation:portrait) {
        .panel-height-primary #wrap p  {
          margin:30px 0 0; } }


/*CSS FOR GAME INTRO PAGE */
.orders .written {
  height: 600px;
  width: 100%;
  margin: 0 auto 100px;
  text-align: left; }
  @media only screen and (max-width: 47.9375em) {
    .orders .written {
      height: 400px;
      width: 80%;
      margin: 0 auto 20px; } }
  .orders .written p {
    text-align: center;
    font-size: 14px;
    margin: 10px 0 30px; }
    .orders .written p span {
      float: right;
      margin-top: 20px; }
  .orders .written p:last-of-type {
    margin: 10px 0 0; }
  .orders .written h2 {
    margin-top: 20px; }

/* See here for percentage background-size properties: https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=50%25 */
.paper-background {
  background: url("../Map_images/orders.png") no-repeat center top;
  background-size: 100% 100%;
  /*border:1px solid black;*/ 
  /*padding: 20px 60px 50px; */
  padding:25px 60px;
    
}

.orders #scroll {
  /*border:2px solid blue;*/ 
  overflow: scroll;
  height:100%;
  padding:0; 
}

  @media only screen and (max-width: 47.9375em) {
    .paper-background {
      padding: 20px 20px 50px; } }

.supporting-1 {
  padding: 75px 0;
  text-align: center; }
  @media only screen and (max-width: 47.9375em) {
    .supporting-1 {
      padding: 0;
      margin: 20px 0 75px;
      /*margin:20px 0;*/ } }

.footer {
  text-align: center;
  padding: 15px 0 10px;
  background-color: #4B4E50;
  margin: 0; }
  .footer p {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px; }

.shadow-primary {
  -webkit-box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.75); }

/* CSS for question, correct, incorrect and victory pages */
@media only screen and (max-width: 47.9375em) {
  .quiz {
    padding: 5px 5px 10px; } }

.quiz #outer,
.quiz #inner {
  height: 225px;
  /*overflow:hidden;*/
  overflow: scroll;
  padding: 0 50px; }
  @media only screen and (max-width: 47.9375em) {
    .quiz #outer,
    .quiz #inner {
      padding: 5px 5px 10px; } }
  .quiz #outer h2,
  .quiz #inner h2 {
    margin: 10px 0 30px; }
  .quiz #outer p,
  .quiz #inner p {
    margin-bottom: 50px; }
  .quiz #outer #wrap,
  .quiz #inner #wrap {
    /*border:1px solid black;*/
    width: 10%;
    margin: 0 40%; }
    @media only screen and (max-width: 47.9375em)  {
      .quiz #outer #wrap,
      .quiz #inner #wrap {
        width: 30%;
        margin:0 20%;} 
      .quiz #outer p,
      .quiz #inner p{
        margin-bottom:20px;
      }
    }
    
    @media only screen and (max-width: 47.9375em) and (orientation:landscape) {
      .quiz #outer #wrap,
      .quiz #inner #wrap {
        width: 30%;
        margin:0 35%;} 
      .quiz #outer p,
      .quiz #inner p{
        margin-bottom:20px;
      }
    }
        
  .quiz h2 {
    margin-bottom:30px;
  }  
  
  @media only screen and (max-width: 47.9375em) and (orientation:landscape) {
    .quiz h2 {
      margin-bottom:15px;
    }
    
    .dialogue p:last-of-type {
      margin-bottom:15px; 
    }
  }

.quiz .radio {
  /*border:1px solid red;*/ 
  /*width:10%;*/
  white-space: nowrap;
  text-align: left;
  padding-left:5px;
  margin: 0 auto 20px; }
  .quiz .radio input {
    font-size: 10px; }

.quiz h3 {
  margin-bottom: 30px; }

.quiz label {
  font-size: 18px; }

.quiz button {
  border:none; 
  padding: 0;
  margin: 0; }

/* Ensure bottom panel sizes to smaller Congratulations message */
.quiz-victory #outer {
  height: auto; }

/* CSS FOR LOGIN AND REGISTRATION PAGES */
.register_login form,
.register_login .form-group {
  color: #000; }

.register_login .form-group {
  /* Use .form-control here to obtain finer CSS control. Help to differentiate from .radio-inline */ }
  .register_login .form-group .form-control {
    width: 40%;
    margin: 25px auto;
    font-size: 20px;
    color: #000;
    border-radius: 0; }
    @media only screen and (max-width: 47.9375em) {
      .register_login .form-group .form-control {
        width: 90%; } }
  .register_login .form-group .radio-inline {
    margin: 0 10px;
    padding: 0; }
  .register_login .form-group button {
    margin-top: 15px; }
  
  .register_login p {
    margin:0;
  }
    
/* Finer CSS for add/edit questions forms */
.add_edit h2 {
  font-size: 34px;
  /*margin-bottom:50px;*/ }
  @media only screen and (max-width: 47.9375em) {
    .add_edit h2 {
      font-size: 20px;
      margin-bottom: 10px; } }

@media only screen and (max-width: 47.9375em) {
  .add_edit p {
    font-size: 14px;
    margin-bottom: 14px; } }

.add_edit #title {
  margin-bottom: 50px; }
  @media only screen and (max-width: 47.9375em) {
    .add_edit #title {
      margin-bottom: 20px; } }

.add_edit label {
  font-size: 24px; }
  @media only screen and (max-width: 47.9375em) {
    .add_edit label {
      font-size: 16px; } }

.add_edit .form-group {
  /* This seems to style select menu but does not touch anything else */ }
  .add_edit .form-group .form-control {
    margin: 20px auto;
    font-weight: normal;
    /*color: #ccc;*/ }
    @media only screen and (max-width: 47.9375em) {
      .add_edit .form-group .form-control {
        margin: 10px auto;
        font-size: 12px; } }

.add_edit #radio_wrap {
  margin-bottom: 20px; }
  
/* Modal styles */
/* Set Modal position when open click on image. See here: http://stackoverflow.com/questions/20313798/bootstrap-3-modal-position */
/* Custom modal class.. using SCSS nesting below */
.modal-customise {
  /* Note, need to specify px as opposed to % for modal position in safari */ }
  .modal-customise .modal-content {
    /*border:2px solid #000;*/
    text-align: center;
    font-style: italic;
    font-family: 'Niconne', cursive; }
  .modal-customise .modal-dialog {
    position: relative;
    /*top:25%; /* 200px also looked quite nice */
    top: 200px; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-dialog {
        top: 100px; } }
  .modal-customise .modal-header,
  .modal-customise .modal-footer {
    border: none;
    text-align: center;
    padding: 30px; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-header,
      .modal-customise .modal-footer {
        padding: 15px; } }
  .modal-customise .modal-header h4 {
    letter-spacing: 2px;
    /*text-transform:uppercase;*/
    font-weight: bold;
    font-size: 30px;
    margin: 0; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-header h4 {
        font-size: 24px; } }
  .modal-customise .modal-body {
    padding: 0 30px;
    font-size: 20px;
    margin-bottom: 20px; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-body {
        padding: 0 20px; } }
  .modal-customise .modal-footer button.close {
    color: #000;
    opacity: 1;
    float: none;
    font-size: 20px;
    font-weight: normal; }

/* CSS for apologise window */
.apologise h2 {
  font-size: 30px;
  margin-bottom: 30px; }

.apologise a {
  font-size: 20px; }
  
@media only screen and (max-width: 47.9375em) {
    .apologise a {
      font-size:15px;
    }
}