/*dark violet, stripe */
/*violet, hover for black text */
/*darker violet hover */
/*pink button */
/*pink button hover */
/*dark grey*/
/*even more greyer! */
/* standart blue FB color*/
/* standart red google plus color*/
/*light grey*/
/***
 *    Flex mixins
 */
/***
 *    Animation & transition
 */
/***
 *    Decoration & shadow
 */
/***
 *    Form & input
 */
/***
 *    Media
 */
/***
 *    Expressions
 */
/***
 *      Functions
 */
/**
*
* Testing
*
**/
@media (max-width: 640px) {
  .include-media-test {
    background-color: #def;
  }
  .include-media-test:before {
    content: "<=phone";
  }
}

@media (min-width: 641px) {
  .include-media-test {
    background-color: #abc;
  }
  .include-media-test:before {
    content: ">phone";
  }
}

@media (min-width: 815px) and (max-width: 1023px) {
  .include-media-test {
    background-color: #fed;
  }
  .include-media-test:before {
    content: ">=815px, <desktop";
  }
}

@media (min-width: 1024px) {
  .include-media-test {
    background-color: #fab;
  }
  .include-media-test:before {
    content: ">=desktop";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .include-media-test:after {
    content: "Retina" !important;
  }
}

.logo {
  position: absolute;
  top: 75px;
  left: 50%;
  margin-left: -175px;
  z-index: 1001;
  cursor: pointer;
}

.navigation {
  width: 100%;
  background-color: white;
  top: 0;
  position: fixed;
  z-index: 3;
}

.navigation {
  height: auto;
  min-height: 90px !important;
  margin-bottom: 0;
}

.navigation ul a {
  color: black;
}

header .blue-sky {
  height: 10rem;
  background: radial-gradient(10rem at top, #FEFFFF, #0074D9);
  padding: 0px;
}

header .blue-sky::after {
  content: "";
  margin: 0;
  position: relative;
  left: 0rem;
  /* padding * -1 */
  top: calc( 12rem - 4rem / 2);
  /* padding - height/2 */
  float: left;
  display: block;
  height: 4rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: %23ffc363;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: %230074D9;'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  /*   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: black;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill:white;'%3E%3C/path%3E%3C/svg%3E"); */
  /**
       * Would there be any advantage to getting this to work via `content` instead?
       */
}

header .wheat-field {
  background: #ffc363;
  height: 10rem;
  margin-top: 3.9rem;
  background: linear-gradient(0, #ffffff, #ffc363);
}

/*dark violet, stripe */
/*violet, hover for black text */
/*darker violet hover */
/*pink button */
/*pink button hover */
/*dark grey*/
/*even more greyer! */
/* standart blue FB color*/
/* standart red google plus color*/
/*light grey*/
/***
 *    Flex mixins
 */
/***
 *    Animation & transition
 */
/***
 *    Decoration & shadow
 */
/***
 *    Form & input
 */
/***
 *    Media
 */
/***
 *    Expressions
 */
/***
 *      Functions
 */
/**
*
* Testing
*
**/
@media (max-width: 640px) {
  .include-media-test {
    background-color: #def;
  }
  .include-media-test:before {
    content: "<=phone";
  }
}

@media (min-width: 641px) {
  .include-media-test {
    background-color: #abc;
  }
  .include-media-test:before {
    content: ">phone";
  }
}

@media (min-width: 815px) and (max-width: 1023px) {
  .include-media-test {
    background-color: #fed;
  }
  .include-media-test:before {
    content: ">=815px, <desktop";
  }
}

@media (min-width: 1024px) {
  .include-media-test {
    background-color: #fab;
  }
  .include-media-test:before {
    content: ">=desktop";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi), (-o-min-device-pixel-ratio: 2 / 1), (min-resolution: 192dpi), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .include-media-test:after {
    content: "Retina" !important;
  }
}

body {
  text-align: left;
  color: black;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

button {
  cursor: pointer;
  outline: none;
}

button:active {
  position: relative;
  top: 1px;
}

nav .nav-item {
  border-right: 1px solid #555;
  font-size: 1.2em;
  padding: 10px 5px;
}