@white-color: #FFFF;
@black-color: #0000;
@light-black-color: lighten(@black-color, 40%);
@logo-color: #02E4CC;
@darken-logo-color: darken(@logo-color, 20%);
@link-color: lighten(@logo-color, 20%);
@link-color-hover: lighten(@logo-color, 5%);
@logo-color: #FFFFFF;
@menu-back-colour: #222222;
@lightmenu-back-colour: lighten(@menu-back-colour, 40%);

a, .link {
  color: @link-color;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
   color: @link-color-hover;
}

a, .link {
  color: @black-color;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
   color: @link-color-hover;
}

ul {
   list-style-type: disc;
}

.for-phone-only(@content) {
  @media (max-width: 567px) { 
     @content();
  }
}

.for-tablet-portrait-up(@content) {
  @media (min-width: 568px) { 
     @content();
  }
}

.for-tablet-landscape-up(@content) {
  @media (min-width: 900px) { 
     @content();
  }
}

.for-desktop-up(@content) {
  @media (min-width: 1200px) { 
     @content(); 
  }
}

.for-big-desktop-up(@content) {
  @media (min-width: 1800px) { 
     @content(); 
  }
}

*,
::before,
::after {
    box-sizing: inherit;
}

.clearfix::after {
  display: block;
  content: " ";
  clear: both;
}

body * + * {

}

:root {
    background-position: center;
    font-family: 'Roboto', sans-serif;;

    .for-phone-only({
      /* font-size: calc(1vw + 0.8em); */
    });
    
    .for-tablet-portrait-up({
      /* font-size: calc(1vw + 0.4em); */
    });

    .for-big-desktop-up({
      /* font-size: calc(1vw + 0.2em); */
    });
}

body {
    padding: 0;
    background-color: white;
    color: black;

    .for-phone-only({
      margin: 0.5em 0.5em;
    });

    .for-tablet-portrait-up({
      margin: 0.5em 0.5em;
    });

    .for-tablet-landscape-up({
      margin: 0.5em 10em;
    });
}

button {
     filter: grayscale(1);
}

main pre {
     white-space: pre-wrap;
}

/* Nav menu */

header {
    background-color: @menu-back-colour;
    font-weight: bold;
    .for-phone-only({
       font-size: 0.8em;
    });

    .for-tablet-landscape-up({
       font-size: 1.2em;
    });
}

.navbanner > p,h4 {
    width: 90%;
    color: @white-color;
    font-size: 2em;
    padding: 2em 1em;
    margin: 0;

}

.navbanner {
  background: 
  url(https://sff.donaldmcintosh.net/content/elie1-web.jpg);
  background-size: cover;
  width: 100%;
  height: 300px;
  margin: 10px 0 0 10px;
  position: relative;
}

.region {
    display: flex;
    flex-wrap: wrap;
}

.regionheader {
    font-size: 1.4em;
    font-weight: bold;
	margin: 1em;
}

.coursebox {
    display: flex;
    flex: 1 0 100%;
}

.coursename {
    font-size: 1.2em;
	font-weight: bold;
    flex: 1 0 100%;
}

.coursepic {
	flex: 0 1 20%;
	padding: 1em 1em;;
}

.coursepic > img {
	display: block;
	width: 100%;
	height: auto;
}

.coursedesc {
	flex: 1 0 70%;
	padding: 1em 1em;;
}

.course {
  display: flex;
  flex-wrap: wrap;
  border: solid #AAA 2px;
  border-radius: 10px;
  padding: 0.5em;
  margin: 0.5em;
}

.coursesectname {
  margin: 0.5em 0.5em;
  flex: 1 1 13%;	
}

.pricedesc {
  margin: 0.5em;
  color: @light-black-color;
}

.price {
   margin: 0 0.5em 0 0.5em;
   flex: 8 1 10%;
}

.distdesc {
  margin: 0.5em;
  color: @light-black-color;
}

.dist {
   margin: 0 0.5em 0 0.5em;
   flex: 1 1 25%;
}