/*--------------------------------------------------------------
# Generic Functions
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Colours and background variables
--------------------------------------------------------------*/
/* Blue */
* {
  box-sizing: border-box; }

ul {
  padding: 0;
  list-style-type: none; }

.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

p {
  margin: 0; }

a {
  text-decoration: none; }

/*--Always show scroller on mobile devices--*/
::-webkit-scrollbar {
  -webkit-appearance: none; }

::-webkit-scrollbar:vertical {
  width: 12px; }

::-webkit-scrollbar:horizontal {
  height: 12px; }

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff; }

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff; }

.hide {
  display: none !important; }

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Backgrounds
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Media queries
--------------------------------------------------------------*/
@font-face {
  font-weight: 400;
  font-style: normal;
  font-family: 'ITV_Reem_OTF';
  src: url("../../assets/fonts/ITV-Reem webfont/ITV-Reem.eot");
  src: url("../../assets/fonts/ITV-Reem webfont/ITV-Reem.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/ITV-Reem webfont/ITV-Reem.woff") format("woff"), url("../../assets/fonts/ITV-Reem webfont/ITV-Reem.ttf") format("truetype"); }
body {
  /*font-size:90%;*/
  font-family: 'ITV_Reem_OTF', sans-serif !important;
  font-size: 0.9em;
  /*font-size:1vw;*/ }

p {
  font-size: 1.2em; }

.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: #333232; }

h1 {
  color: #20B8C6;
  font-size: 2em; }

body div.wrap_outer {
  /*border: 1px solid red;*/
  padding: 1em 2em; }

body#indexPage .container {
  color: #333232;
  /*background: red;*/
  max-width: 70em; }
body#indexPage div#flags_container .row {
  display: flex; }
  body#indexPage div#flags_container .row .flag {
    /*border:1px solid $theme_primary;*/
    flex: 1;
    transition: background 0.3s linear; }
    body#indexPage div#flags_container .row .flag:hover {
      transition: background 0.3s linear;
      background: #20B8C6; }
      body#indexPage div#flags_container .row .flag:hover a {
        color: white; }
    body#indexPage div#flags_container .row .flag img {
      max-width: 200px;
      width: 100%; }
    body#indexPage div#flags_container .row .flag a {
      display: block;
      padding: .5em;
      text-align: center;
      font-size: 1.5em;
      color: #333232; }
body#indexPage div#flags_container div#pageInstructions p {
  text-align: center; }
body#indexPage div#flags_container div#pageInstructions p#instruction1 {
  margin-top: 1em;
  font-size: 1.5em; }
body#indexPage div#flags_container div#pageInstructions p#instruction2 {
  margin-top: 2em;
  color: #403f3f; }
  body#indexPage div#flags_container div#pageInstructions p#instruction2 img {
    width: 100%;
    max-width: 30px;
    vertical-align: bottom; }
body#indexPage div#flags_container div#pageInstructions p#instruction3 {
  font-size: 95%;
  font-style: italic; }
body#indexPage ul#languageselector {
  /*min-height:250px;
  border:1px solid red;*/ }
body#indexPage ul#languageselector li {
        /*transition: background 0.3s linear;
        vertical-align: top;
        width: 6em;
        margin-left: 1em;
        font-size: 2em;
        //border: 1px solid red;
        display: inline-block;

        &:hover {
            transition: background 0.3s linear;
            background: $theme_primary;

            a {
                color: white;
            }
        }

        &:first-child {
            margin: 0;
        }

        a {
            text-align: center;
            font-size: 1em;
            color: $theme_primary_text;
        }

        p {
        }

        div img {
            width: 100%;
            max-width: 200px;
        }*/ }

body#infoPage ul#moduleselector {
  margin: 2em auto 0 auto; }
  body#infoPage ul#moduleselector li {
    transition: background 0.3s linear;
    margin: 1em auto;
    background: #030305;
    margin-bottom: 1em;
    display: block;
    max-width: 30em; }
    body#infoPage ul#moduleselector li:hover {
      background: #20B8C6;
      transition: background 0.3s linear; }
    body#infoPage ul#moduleselector li a {
      padding: .6em .5em;
      font-size: 1.5em;
      display: block;
      color: white; }

@media (max-width: 720px) {
  body#indexPage div#flags_container .row .flag {
    font-size: 1.5vw; } }
@media (max-width: 540px) {
  body#indexPage div#flags_container .row {
    display: block; }
    body#indexPage div#flags_container .row .flag {
      font-size: 3vw; }
    body#indexPage div#flags_container .row .col {
      margin: 1% 0 1% 0%;
      width: 100% !important; } }
footer.pageFooter {
  margin-top: 1em; }
  footer.pageFooter img.logo {
    width: 100%;
    max-width: 130px; }

/*// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {

}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {

}*/
/*--------------------------------------------------------------
# Main blocks (http://www.responsivegridsystem.com/calculator/)
--------------------------------------------------------------*/
/*  SECTIONS  */
.row {
  clear: both;
  padding: 0px;
  margin: 0px;
  zoom: 1;
  /* For IE 6/7 */
  /*  COLUMN SETUP  */ }
  .row:before, .row:after {
    content: "";
    display: table;
    clear: both; }
  .row .col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
    /*  GRID OF FOUR  */ }
    .row .col:first-child {
      margin-left: 0; }
    .row .col.span_4_of_4 {
      width: 100%; }
    .row .col.span_3_of_4 {
      width: 74.6%; }
    .row .col.span_2_of_4 {
      width: 49.2%; }
    .row .col.span_1_of_4 {
      width: 23.8%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%; }

  .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {
    width: 100%; } }