/*Site color #283583*/
/*setting the font*/
html {
  font-family: serif;
  /*font-size: 120%;*/
}
body {
  font-family: 'EB+Garamond', Times, Georgia;
  color: #222;
}

nav {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

li.menu-text.left > a {
  padding: 0;
  margin: 0;
  font-size: 12px;
}
#wrapper {
  padding-top: 40px;
/*  padding-bottom: 90px;
*/}
.row {
  max-width: 48.75rem;
}
.fullWidth {
  max-width: 100%;
}
article {
  padding-top: 40px;
  padding-bottom: 40px;
}
/*Type*/

h1, h2, h3, h4, h5, .top-bar, .title-bar-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  /*text-transform: uppercase;*/
}

@media only screen and (min-width: 800px) {
  h1.entry-header {
  margin-bottom: 20px;
  font-size: 4.0625rem;
}

}

.intro {
  font-family:'EB+Garamond', Times, Georgia;
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  text-transform: none;
}

p {
  font-size: 22px;
  line-height: 1.35; 
}

/*end Type settings*/
/*menu*/
.top-bar, .top-bar ul, .title-bar {
    background-color: #283583;
}
.menu .menu-text, .menu a {
    color: #ffffff;
    font-weight: black;
    line-height: 1;
    /*padding: 0.7rem 1rem;*/
}
.menu-text.left {
  font-size: 22px;
  font-weight: black;
}

.menu .menu-text {

    padding: 0;
}

/*end menu settings*/

/*Navigation*/
.hover-underline-menu {
  width: 100%;
}

.hover-underline-menu .menu {
  background-color: #283583;
}

.hover-underline-menu .menu a {
  color: #fefefe;
 /* padding: 1.2rem 1.5rem;*/
}

.hover-underline-menu .menu .underline-from-center {
  position: relative;
}

.hover-underline-menu .menu .underline-from-center::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.125rem);
  border-bottom: 0.125rem solid white;
  left: 50%;
  right: 50%;
  transition: all 0.5s ease;
}

.hover-underline-menu .menu .underline-from-center:hover::after {
  left: 0;
  right: 0;
  transition: all 0.5s ease;
}

/*contact footer*/

/*clouds*/
/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/
a {font-weight: 600;}
article a:hover, article a:focus {
    text-decoration: underline;
}
article a:hover, article a:active {
    outline: 0 none;
}

*{ margin: 0; padding: 0;}

body {
  /*To hide the horizontal scroller appearing during the animation*/
/*  overflow: hidden;
*/}

#clouds{
  padding: 100px 0;
  background: #c9dbe9;
  background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

/*Time to finalise the cloud shape*/
.cloud {
  width: 200px; height: 60px;
  background: #fff;
  
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  
  position: relative; 
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute; 
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;
  
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
  left: 200px;
  
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6; /*opacity proportional to the size*/
  
  /*Speed will also be proportional to the size and opacity*/
  /*More the speed. Less the time in 's' = seconds*/
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}

.x3 {
  left: -250px; top: -200px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

.x4 {
  left: 470px; top: -250px;
  
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0.75; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}

.x5 {
  left: -150px; top: -150px;
  
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}

footer {
    background-color: lightgray;
    font-family: "Montserrat", Helvetica, sans-serif;
    bottom: 0;
    color: #283583;
    float: left;
    height: auto;
    left: 0;
    min-width: 100%;
    padding: 0;
    padding-bottom: 2rem;
    margin-top: 1rem;
/*    position: fixed;
*/}

footer .menu a {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  color: #283583;
}

/*buttons*/
.stag-button {
  font-family: "Montserrat";
    background: #979797 none repeat scroll 0 0;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    margin: 5px;
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 200ms ease-in-out 0s;
}
.stag-button:hover {
    color: #fff;
    text-decoration: none;
}
.stag-button--normal {
    opacity: 0.9;
}
.stag-button--medium {
    font-size: 18px;
    padding: 17px 22px;
}
.stag-button--large {
    font-size: 20px;
    padding: 22px 40px;
}
.stag-button--stroke {
    background: transparent none repeat scroll 0 0;
    border: 2px solid transparent;
}
.stag-button--black {
    background: #000 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--black {
    background: transparent none repeat scroll 0 0;
    border-color: #000;
    color: #000;
}
.stag-button--stroke.stag-button--black:hover {
    background: #000 none repeat scroll 0 0;
    color: white;
}
.stag-button--blue {
    background: #283583 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--blue {
    background: transparent none repeat scroll 0 0;
    border-color: #283583;
    color: #283583;
}
.stag-button--stroke.stag-button--blue:hover {
    background: #283583 none repeat scroll 0 0;
    color: white;
}
.stag-button--green {
    background: #84c333 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--green {
    background: transparent none repeat scroll 0 0;
    border-color: #84c333;
    color: #84c333;
}
.stag-button--stroke.stag-button--green:hover {
    background: #84c333 none repeat scroll 0 0;
    color: white;
}
.stag-button--grey {
    background: #979797 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--grey {
    background: transparent none repeat scroll 0 0;
    border-color: #979797;
    color: #979797;
}
.stag-button--stroke.stag-button--grey:hover {
    background: #979797 none repeat scroll 0 0;
    color: white;
}
.stag-button--light-blue {
    background: #56c3f2 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--light-blue {
    background: transparent none repeat scroll 0 0;
    border-color: #56c3f2;
    color: #56c3f2;
}
.stag-button--stroke.stag-button--light-blue:hover {
    background: #56c3f2 none repeat scroll 0 0;
    color: white;
}
.stag-button--orange {
    background: #fc901d none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--orange {
    background: transparent none repeat scroll 0 0;
    border-color: #fc901d;
    color: #fc901d;
}
.stag-button--stroke.stag-button--orange:hover {
    background: #fc901d none repeat scroll 0 0;
    color: white;
}
.stag-button--red {
    background: #d15858 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--red {
    background: transparent none repeat scroll 0 0;
    border-color: #d15858;
    color: #d15858;
}
.stag-button--stroke.stag-button--red:hover {
    background: #d15858 none repeat scroll 0 0;
    color: white;
}
.stag-button--purple {
    background: #c16ad7 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--purple {
    background: transparent none repeat scroll 0 0;
    border-color: #c16ad7;
    color: #c16ad7;
}
.stag-button--stroke.stag-button--purple:hover {
    background: #c16ad7 none repeat scroll 0 0;
    color: white;
}
.stag-button--white {
    background: #fff none repeat scroll 0 0;
    color: black;
}
.stag-button--white:hover {
    color: black;
}
.stag-button--stroke.stag-button--white {
    background: transparent none repeat scroll 0 0;
    border-color: #fff;
    color: #fff;
}
.stag-button--stroke.stag-button--white:hover {
    background: white none repeat scroll 0 0;
    color: black;
}
.stag-button--dark {
    background: #363f48 none repeat scroll 0 0;
}
.stag-button--stroke.stag-button--dark {
    background: transparent none repeat scroll 0 0;
    border-color: #363f48;
    color: #363f48;
}
.stag-button--stroke.stag-button--dark:hover {
    background: #363f48 none repeat scroll 0 0;
    color: white;
}
.stag-button--gray {
    background: #979797 none repeat scroll 0 0;
}

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale:hover {  transition: all .6s ease; filter: none;
    -webkit-filter: grayscale(0%);}
/*
text decoration*/    
blockquote, blockquote p {
  font-size: 23px;
    color: #283583;
}

/*Icons*/
/*foundation icons*/
.step {
  display: inline-block;
  line-height: 1;
/*  width: 10%;
*/}

.size-24 { font-size: 24px}

.size-36 { font-size: 36px}

.size-48 { font-size: 48px}

.size-72 { font-size: 72px}

/*Forms*/
/*Form bot spam prevention, door velden te verbergen die wel data in zich hebben, bron: http://www.landauer.at/preventing-spam-in-form-submissions-without-using-a-captcha/*/
.blank {display: none;}

form {
  font-family: "Montserrat", Helvetica, sans-serif;
}

form ul {
  margin-left: 0;
}

form li {
  list-style: none;
}

/*Cards*/
.card-product:hover .card-product-img-wrapper img {
/*  -webkit-filter: grayscale(0);
          filter: grayscale(0);*/
}

.card-product:hover .card-product-img-wrapper .button {
  -webkit-transform: translateY(-3rem);
      -ms-transform: translateY(-3rem);
          transform: translateY(-3rem);
}

.card-product-img-wrapper {
  margin-bottom: 1.375rem;
  position: relative;
  overflow: hidden;
}

.card-product-img-wrapper .button {
  transition: all 0.2s ease;
  background-color: #767676;
  padding: 1rem 0.5rem;
  bottom: -3rem;
  -webkit-transform: translateY(3rem);
      -ms-transform: translateY(3rem);
          transform: translateY(3rem);
  position: absolute;
  z-index: 2;
  color: #fefefe;
  margin-bottom: 0;
}

.card-product-img-wrapper .button:hover {
  background-color: #1779ba;
}

.card-product-img-wrapper img {
  transition: all 0.2s ease;
  /*-webkit-filter: grayscale(1);
          filter: grayscale(1);*/
  width: 100%;
}

.card-product-img-wrapper .card-product-name {
  font-size: 1.375rem;
}

.card-product-img-wrapper .card-product-price {
  font-weight: bold;
}

.card-product-img-wrapper .card-product-description {
  color: #8a8a8a;
  font-size: 0.875rem;
  margin-bottom: 0;
}