/*
HEX COLOURS
#c0cedb - Background
#ffffff - White
#000000 - Black
#ff0000 - Red
#FFFF00 - Yellow
#21505d - Dark green - MENU Background
########################################################################################################*/
* {
  margin: 0;
  padding: 0;
  }

  body {
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
    background-color:  #d2ddea;
  }

/* START OF HEADER BAR  START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR */
.header {
  background-color: #d2ddea; /* BAR RIGHT ACROSS TOP OF SCREEN */
  position: fixed;
  width: 100%;
  z-index: 5;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #21505d; /* MENU BACKGROUND - BOTH DESKTOP AND BURGER POP OUT */
 }

.header li a {
  display: block;
  padding: 10px 10px 20px 10px;
  text-decoration: none;
  color: #c0cedb; /* TOP MENU INACTIVE TEXT */
  font-size: 18px; /* FONT SIZE INACTIVE MENU TABS */

}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #21505d; /* TOP MENU ACTIVE PAGE BACKGROUND COLOUR*/
}

header .highlight, header .current a{
  color:#ff0000;  /*TOP MENU ACTIVE PAGE TEXT COLOUR*/
  font-size: 20px; /* FONT SIZE ACTIVE MENU TAB */
  background-color: #21505d;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  float: right;
  /*padding: 28px 20px;*/
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .nav-icon {
  background: #21505d; /* #21505d*/
  display: block;
  height: 3px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 30px;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
  background: #21505d;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .nav-icon:before {
  top: 8px;
}

.header .menu-icon .nav-icon:after {
  top: -8px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 500px;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}

/* 48em = 768px @ 16pt font */

/*@media (min-width: 48em) { */

@media (min-width: 60em) {
  .header li {
    float: left;
  }
  .header li a {
  padding: 10px 20px;  /* 20px 20px;*/
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* END OF HEADER BAR */
/* START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT */

  #divider-title-home{
    height: 50px;
    width: 100%;
    background-color:  #d2ddea; /* MAIN TITLE STRIP*/
    color: white;
    font-size: 48px;
    text-align: center;
    letter-spacing: 5px;
    padding: 0px 0px 10px 0px;
      }

      #divider-title-content{
        height: 50px;
        width: 100%;
        background-color:  #d2ddea; /* CONTENT PAGE STRIP*/
        color: white;
        font-size: 40px;
        text-align: center;
        letter-spacing: 5px;
        padding: 0px 0px 10px 0px;
          }

/*MAIN FLEX CONTAINER MAIN FLEX CONTAINER MAIN FLEX CONTAINER MAIN FLEX CONTAINER*/
#main {
  width: 100%;
  color: white;
  text-align: center;
  padding: 50px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
/* background-color: green */
}
/*END OF MAIN FLEX CONTAINER END OF MAIN FLEX CONTAINER END OF MAIN FLEX CONTAINER */

/*COMMON IMAGE CONTAINERS COMMON IMAGE CONTAINERS COMMON IMAGE CONTAINERS*/
 #image-frame {
  margin: 40px 40px 40px 40px;
  width: 350px;
  border-style: solid;
  border-width: 0px;
  border-color: #21505d;
  border-radius: 0px;
  /* background-color: Yellow */
  }

    #image-frame img {
    width: 350px;
    border-style: solid;
    border-width: 0px;
    border-color: #21505d;
    border-radius: 0px;
    /*box-shadow: 10px 10px lightblue;*/

  }

  #image-frame p{
    color: black;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
      /*padding: 5px 5px 5px 5px;*/
    }

    #image-frame h1{
      color: black;
      font-size: 24px;
      text-align: left;
      /*padding: 0px 5px 5px 5px;*/
      }
/*END OF COMMON IMAGE CONTAINERS END OF COMMON IMAGE CONTAINERS END OF COMMON IMAGE CONTAINERS */

/*FLAG FRAME CONTAINER FLAG FRAME CONTAINER FLAG FRAME CONTAINER*/
 #flag-frame {
  margin: 0px 40px 40px 40px;
  width: 350px;
text-align: center;

  /* background-color: orange */
  }

    #flag-frame img {
    width: 100px;
  padding: 5px 5px 5px 5px;
  }

/*END OF FLAG FRAME CONTAINER END OF FLAG FRAME CONTAINER END OF FLAG FRAME CONTAINER */





    footer {
      background-color:  #d2ddea; /* FOOTER BACKGROUND COLOUR*/
      color: #21505d;
      width: 100%;
      text-align: center;
      font-size: 16px;
      padding: 10px 0 10px 0;
  }

  .anchor {
    position:relative;
    top:-120px; /* or whatever value you need */
}

/* TEST MOUSE OVER START TEST MOUSE OVER START TEST MOUSE OVER START TEST MOUSE OVER START TEST MOUSE OVER START TEST MOUSE OVER START TEST MOUSE OVER START */

* {box-sizing: border-box}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 100%;
  max-width: 800px;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #000000; /* #f1f1f1  */
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 10px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}










/* TEST MOUSE OVER END TEST MOUSE OVER END TEST MOUSE OVER END TEST MOUSE OVER END TEST MOUSE OVER END TEST MOUSE OVER END TEST MOUSE OVER END  */












/* START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM START OF FORM  */

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 0px solid #ccc; /* Gray border */
  border-radius: 0px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #c0cedb;
  color: #ff0000;
  padding: 12px 20px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #ff0000;
  color: #ffffff;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 0px;
  background-color: #21505d;
  padding: 20px;
  width: 30%;
  margin: auto;
}

/* END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM END OF FORM  */

  /* START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES */

    @media(max-width: 768px){

            .header li a {
              padding: 10px 10px 20px 25px;
              text-decoration: none;
              color: white;
              font-size: 20px; /* BURGER MENU POP OUT MENU ITEMS FONT SIZE */

            }

            #divider-title-home{
              height: 20px;
              font-size: 30px;
              letter-spacing: 2px;
              padding: 0px 0px 0px 0px;
            }

            #divider-title-content{
              height: 20px;
              font-size: 36px;
              letter-spacing: 2px;
              padding: 0px 0px 25px 0px;
            }

            .container {
              width: 80%; /* CONTACT FORM WIDTH */

            }


      footer {
          font-size: 20px;

            }

    }