:root {
  --main: #FF5F54;
  --stripe: #F9F9F9;
  --stripe2: #C2F0FF;
}

h1, h1 a:link, h1 a:active, h1 a:hover, h1 a:visited {
  color: var(--main);
}

.content a:hover, p.top a:hover, .footer a:hover {
  color: #FF8F8F;
  border-bottom: 1px dotted #000;
  opacity: 0.7;
}

.menu li a:link, .menu li a:active, .menu li a:visited {
  color: #444;
  text-decoration: underline;
  font-weight: bolder;
}

.menu li:hover a {
  color: #FFF;
}

.menu li a {
  background: repeating-linear-gradient(
  -45deg,
   var(--stripe),
   var(--stripe) 12.5px,
   var(--stripe2) 12.5px,
   var(--stripe2) 25px
  )
}

p.top a {
  color: var(--main);
}

.content a:link, .content a:active, .content a:hover, .content a:visited  {
  color: var(--main);
}

.product li:before {
  content: "\22C5";
}

.product form {
  text-align: right;
  margin-top: 10px;
  margin-bottom: 15px;
}

.product input[type=submit], .order input[type=submit] {
  vertical-align: middle;
  cursor: pointer;
  color: #FFF;
  border: 0;
  border-radius: 4px;
  line-height: 1em;
  text-align: center;
}

.product input[type=submit] {
  font-size: 20px;
  padding: 14.5px 25px 10.5px 25px;
}

.product input[type=submit], .order input[type=submit] {
  background: repeating-linear-gradient(
  -45deg,
  #FF5F54,
  #FF786B 75px
  );
  border-right: 1px solid #C44;
  border-bottom: 1px solid #C44;
}

.product img {
  margin-left: auto;
}

input.center {
  content-align: centre;
}

.order {
  line-height: 1.6em;
}

.order h3 {
  text-transform: uppercase;
}

.order h5 {
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 16px;
}

.order p.buttonmove {
  text-align: center;
}

.order input[type=submit] {
  margin: 7.5px 0;
  padding: 14.5px 25px 12.5px 25px;
}

.order input[type="checkbox"], .order input[type="radio"]{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 15px 10px 0 5px;
  width: 18px;
  height: 18px;
  background-color: #FAFAFA;
  color: red;
  vertical-align: sub;
  border: 1px solid #DDD;  
}

.order input[type="checkbox"]:active, .order input[type="radio"]:active {
  opacity: 0.7;
}

.order input[type="checkbox"]:checked, .order input[type="radio"]:checked {
  background-color: #C0FAA3;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #B0EA93;
}

.order input[type="radio"] {
    border-radius: 10px;
}

.order input[type="checkbox"] {
    border-radius: 4px;
}

.order input[type="checkbox"]:checked {
  background-image: url('/img/form/check.png');
}

.order input[type="radio"]:checked {
  background-image: url('/img/form/radio.png');
}

.order p.indent {
  text-align: right;
}

.order input[type="text"], .order input[type="email"], .order select {
  margin: 10px 0 25px 0;
  padding: 5px;
  border-radius: 3px;
  background: #FAFAFA;
  border: 1px solid #DFDFDF;
}

.order input[type="text"], .order input[type="email"] {
  width: 265px;
}

.order input[type=text]:valid:not(:focus):not(:placeholder-shown), .order input[type="email"]:valid:not(:focus):not(:placeholder-shown) {
  background-color: #D1FFC6;
  border: 1px solid #BEFFAF;
}

.order input[type=text]:invalid:not(:focus):not(:placeholder-shown), .order input[type="email"]:invalid:not(:focus):not(:placeholder-shown) {
  background-color: #FFD0C6;
  border: 1px solid #FFB6A2;
}

.order select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 10px;
  background-image: url('/img/form/dropdown.png');
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 30px;
}

footer {
  padding: 5px 0;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

footer img.card {
  margin-bottom: 7.5px;
  margin-right: 2.5px;
  opacity: 0.65;
}

footer img.contact {
  height: 17.5px;
}

footer.simple img.card {
  max-height: 40px;
  filter: grayscale(1);
  opacity: 0.8;
}

.endmenu a:link, .content a:active, .content a:hover, .content a:visited  {
  color: var(--main);
}

.endmenu a:hover, .content a:visited  {
  color: #EEE;
}

.endmenu {
  padding-bottom: 5px;
  letter-spacing: 0.1em;
}

.email-r-a:before {
    content: attr(data-1) 'i' 'l';
}
.email-r-a:after {
    content: '\0040' attr(data-2);
}

.email-r-b:before {
    content: attr(data-3) 'e' 't' '.';
}
.email-r-b:after {
    content: 'c' 'o' '.' attr(data-4);
}


@media (min-width: 650px) {
  
  :root {
  --main: #A7F790;
  --stripe: #FDFDFD;
  --stripe2: #FFF4B8;
  }
  
  h1 a:hover, .content a:hover, .footer a:hover, p.top a:hover {
    color: var(--main);
  }
  
  .menu li a, .menu li a:hover {
    background: transparent;
  }


  .menu ul {   
   background: repeating-linear-gradient(
     -45deg,
     var(--stripe),
     var(--stripe) 20px,
     var(--stripe2) 20px,
     var(--stripe2) 40px
  )
  }
    
  .menu ul.blank {
   margin-left: -20px;
   padding: 0;
   height: 50px;
   position: absolute;
   background: repeating-linear-gradient(
     -45deg,
     #FFF,
     #FFF 20px,
     #FCFCFC 20px,
     #FCFCFC 40px
  )
  }
  
  .menu li.blank {
    padding: 0;
    margin: 0;
    width: 0;
    display: none;
    height: 0;
  }

  .content a:link, .content a:active, .content a:hover, .content a:visited  {
    color: #A1F189;
  }
  
  .order p.buttonmove {
    text-align: right;
  }
  
  .order input[type=submit] {
    width: 450px;
  }
  
  .order input[type="checkbox"], .order input[type="radio"] {
    margin: 15px 10px 0 10px;
  }
  
}

@media (min-width: 1264px) {

  .menu ul.blank {
    margin-left: -30px;
  }

}


@media (min-width: 1400px) {

  .columns {
    column-count: 2;
  }

}