@white-color: #FFFF;
@black-color: black;
@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: @black-color;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
   color: @black-color;
  font-weight: bold;
}

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

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 {
      margin: 10px 0 0 10px;
}

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 {
  background: 
  url(https://www.scottishfairwayfinder.com/content/elie1-web.jpg);
  background-size: cover;
  width: 100%;
  height: 300px;
  margin: 10px 0 0 10px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

#sffheader {
    flex: 1 0 100%;
    text-align: left;
    margin: 0.5em 0.5em;
    color: #FFFFFF;

    .for-phone-only({
       font-size: 1em;
       font-weight: bold;
    });
    
    .for-tablet-portrait-up({
       font-size: 2em;
       font-weight: bold;
    });

    .for-big-desktop-up({
       font-size: 2em;
       font-weight: bold;
    });
}

#sffsubheader {
    flex: 1 0 100%;
    text-align: left;
    margin: 0.5em 0.5em;
    color: #FFFFFF;
    font-size: 1.5em;

    .for-phone-only({
       font-size: 1em;
    });
    
    .for-tablet-portrait-up({
       font-size: 1.5em;
    });

    .for-big-desktop-up({
       font-size: 1.5em;
    });
}

#regionmenu {
    display: flex;
    flex-wrap: wrap;
    background-color: #8fbc8f;
}

.regionmenuitem {
    flex: 1 1 10%;
    text-align: center;
    padding: 0.5em 0.5em;
    background-color: #8fbc8f;
}

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

.courseinregion {
    text-align: left;
    padding: 0.5em 0.5em;

    .for-phone-only({
      flex: 1 1 100%;
    });
    
    .for-tablet-portrait-up({
         flex: 1 1 40%;
    });

    .for-big-desktop-up({
        flex: 1 1 40%;
    });
}

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

.regiontitle {
    flex: 1 0 100%;
    padding: 0.5em 0.5em;
}

.coursesectname {
	flex: 1 0 100%;
	padding: 1em 1em;
}

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

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

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

.coursename {
  font-weight: bold;
  margin: 0.5em 0.5em;
  flex: 1 0 100%;	
}e

#rankgroup {
    flex: 1 0 100%;
    padding: 1em 1em;
}

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

.rate{
   margin: 0 0.5em 0 0.5em;

    .for-phone-only({
      flex: 1 1 50%;
    });
    
    .for-tablet-portrait-up({
         flex: 1 0 30%; 
    });

    .for-big-desktop-up({
         flex: 1 0 15%;
    });
}

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

.rateoption {
   margin: 0 0.5em 0 0.5em;
   flex: 1 0 30%;
}
.regiontitle {
    flex: 1 0 100%;
    padding: 0.5em 0.5em;
}

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

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

#footer {
   padding: 2em 1em;
   display: flex;
   font-size: 0.8em;
}throws

.footerbox {
    flex: 1 1 100%;
    text-align: center;
}

.regionmain {
    border: solid #AAA 2px;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5em;
    display: flex;
    flex-wrap: wrap;
    height: auto;
}

.regionimg {
    flex: 0 0 45%;
    padding: 1em 1em;
}

.regiontext {

    padding: 1em 1em;

    .for-phone-only({
         flex: 1 0 30%; 
    });
    
    .for-tablet-portrait-up({
         flex: 1 0 30%; 
    });

    .for-big-desktop-up({
         flex: 0 0 50%;
    });
}

.regiondesc {
    padding: 0.5em 0.5em;

    .for-phone-only({
      display: none;
    });
    
    .for-tablet-portrait-up({
         flex: 1 0 30%; 
    });

    .for-big-desktop-up({
         flex: 1 0 15%;
    });
}