/* 

	Theme Name: Bickel
	Theme URI: https://www.bickelwaterontharders.nl/
	Description: Bickel | Waterontharders Enter
	Version: 1.0  
	Author: Bloemendaal in Vorm
	Author URI: http://www.bloemendaalinvorm.nl
	
*/
/*---------------------------------------------- 
Basics
------------------------------------------------*/
body {
  font-family: 'bwhelder-regular', arial, sans-serif;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #6f4175;
	background: #6f4175;
}

@media all and (min-width: 992px) {
	html, body {
		font-size: 15px;
	}
}	

.grecaptcha-badge {
	display: none !important;
}

/* Wrapper ------------------------------------ */
.wrapper {
  max-width: auto;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .wrapper {
    max-width: 720px;
    margin: 0 auto;
  }
}
@media all and (min-width: 992px) {
  .wrapper {
    max-width: 960px;
  }
}
@media all and (min-width: 1200px) {
  .wrapper {
    max-width: 1140px;
  }
}

/* Fonts -------------------------------------- */
@font-face {
  font-family: 'bwhelder-light';
  src: url('fonts/bwhelder-w2light-webfont.woff2') format('woff2'),
       url('fonts/bwhelder-w2light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bwhelder-regular';
  src: url('fonts/bwhelder-w2regular-webfont.woff2') format('woff2'),
       url('fonts/bwhelder-w2regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bwhelder-bold';
  src: url('fonts/bwhelder-w2bold-webfont.woff2') format('woff2'),
       url('fonts/bwhelder-w2bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.text-300 {
  font-family: 'bwhelder-light', arial, sans-serif;
  font-weight: normal;
}

.text-400 {
  font-family: 'bwhelder-regular', arial, sans-serif;
  font-weight: normal;
}

.text-700 {
  font-family: 'bwhelder-bold', arial, sans-serif;
  font-weight: normal;
}

.h1,.h2,.h3,.h4,.h5,.h6 {
  display: block;
  line-height: 1;
  margin: 0;
}

strong {
  font-family: 'bwhelder-bold', arial, sans-serif;
  font-weight: normal;
}

/* Links -------------------------------------- */
a {
  cursor: pointer;
  outline: none;
}

a:hover, a:focus {
	text-decoration: none;
	outline: none;	
}

p a,
p a:hover {
  color: #6f4175; 
}

/* Colors ------------------------------------- */
.text-purple { color: #6f4175; }
.text-pink { color: #f39daa; }
.text-white { color: #fff; }

/* Backgrounds -------------------------------- */
.bg-purple { background: #6f4175; }
.bg-pink { background: #f39daa; }
.bg-cyaan { background: #cce8f0; }
.bg-white { background: #fff; }

/* Buttons ------------------------------------ */
.btn {
  font-family: 'bwhelder-bold', arial, sans-serif;
  font-size: 1.125rem;
  border-radius: 25px;
  padding: .5rem 1.5rem;
  text-transform: lowercase;
  border: none;
  box-shadow: none;
}
.btn:focus {
  box-shadow: none;
}

  .btn-lined {
    border: 2px solid #fff;
    color: #fff;
  }
  .btn-lined:hover {
    color: #6f4175;
    background: #fff;
  }

  .btn-white {
    border: 2px solid #fff;
    background: #fff;
    color: #6f4175;
  }

  .btn-purple {
    border: 2px solid #6f4175;
    background: #6f4175;
    color: #fff;
  }
  .btn-white:hover,
  .btn-purple:hover {
    border: 2px solid #f39daa;
    background: #f39daa;
    color: #fff;
  }

/* Alignment ---------------------------------- */
.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}
.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

/* Formulieren --------------------------------- */
.wpcf7 .wpcf7-form-control-wrap {
	display: block !important;	
}

.wpcf7 .wpcf7-not-valid-tip {
	padding-top: 5px;
	color: #d70842;
	text-align: right;
	display: none;
}

.wpcf7 .wpcf7-not-valid,
.not-valid {
	border-left: 4px solid #d70842 !important;	
}

.wpcf7 .wpcf7-response-output {
	padding: 15px;
	text-align: center;
	margin: 15px 0 0 0;
}

.wpcf7 .wpcf7-validation-errors {
	background: #fff;
	color: #f0ad4e;
	border: none;
	border-left: 4px solid #f0ad4e;
}

.wpcf7 .wpcf7-mail-sent-ok {
	display: none;
	background: #fff;
	color: #155724;
	border: none;
	border-left: 4px solid #155724;
}

/*---------------------------------------------- 
Header
------------------------------------------------*/
#header {
  margin-bottom: 2rem;
}

  #header .contact-information {
    display: inline-block;
    background: #fff;
    padding: .6rem 1.25rem;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

    #header .contact-information a {
      color: #6f4175;
    }

    #header .contact-information a:hover {
      color: #f39daa;
    }

  #header .nav {
    margin: 1.75rem 0 0 0;

  }

    #header .nav .nav-link {
      font-size: 1.3rem;
      line-height: 1.2rem;
      color: #fff;
      padding: 0;
    }
    #header .nav .nav-link:hover {
      color: #f39daa;
    }

    #header .nav .nav-link + .nav-link {
      margin-left: 2rem;
    }

/*---------------------------------------------- 
Sections
------------------------------------------------*/
section .title {
  margin-bottom: 1.25rem;
}

section .container {
  position: relative;
  z-index: 10;
}

/*---------------------------------------------- 
Masthead
------------------------------------------------*/
#masthead {
  position: relative;
  background: #a7d3b8;
}

  #masthead:before {
    content: '';
    position: absolute;
    top: -1px;
    height: 100%;
    width: calc(100% + 4px);
    left: -2px;
    background: url('../images/swoosh-sm.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }

  #masthead:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -2px;
    height: 100%;
    width: calc(100% + 4px);
    background: url('../images/swoosh-lg-l-white.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
  }

  #masthead .container {
    position: absolute;
    bottom: -60px;
  }

@media all and (min-width: 992px) {
  #masthead .container {
    bottom: -40px;
  }
}

/*---------------------------------------------- 
Introductie
------------------------------------------------*/ 
#introductie {
  position: relative;
  padding: 4rem 0 8rem 0;
}
#introductie:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -2px;
  height: 100%;
  width: calc(100% + 4px);
  background: url('../images/swoosh-lg-r-purple.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

  #introductie .title + p {
    font-size: 1.25rem;
  }

  #introductie .list-icons {
    margin: 0;
  }

    #introductie .list-icons li {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    #introductie .list-icons li + li {
      margin-top: 1.5rem;
    }

      #introductie .list-icons li .icon {
        min-width: 68px;
        margin-right: 1.5rem;
      }

      #introductie .list-icons li .description p {
        margin-bottom: 0;
      }

/*---------------------------------------------- 
Zo werkt het
------------------------------------------------*/
#zo-werkt-het {
  padding: 4rem 0 2rem 0;
}

  #zo-werkt-het .title + p {
    font-size: 1.25rem;
    color: #f39daa;    
  }

  #zo-werkt-het p {
    color: #fff;
  }

/*---------------------------------------------- 
Waterontharders
------------------------------------------------*/
#waterontharders {
  position: relative;
  padding: 0 0 6rem 0;
}
#waterontharders:before {
  content: '';
  position: absolute;
  top: -1px;
  height: 100%;
  width: calc(100% + 4px);
  left: -2px;
  background: url('../images/swoosh-ontharders-top.svg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
#waterontharders:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -2px;
  height: 100%;
  width: calc(100% + 4px);
  background: url('../images/swoosh-lg-r-cyaan.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

  #waterontharders .table .thead-dark th {
    font-family: 'bwhelder-bold', arial, sans-serif;
    font-size: 1.25rem;
    color: #f39daa;
    background-color: #6f4175;
    border-left: 2px solid #fff;
    border-bottom: none;
    padding: .75rem 1.5rem;
  }

    #waterontharders .table .thead-dark th:first-child {
      border-left: none;
    }


    #waterontharders .table tbody tr:first-child td {
      padding-top: 2rem;
    } 

    #waterontharders .table tbody tr:last-child td {
      padding-bottom: 2rem;
    }
  
    #waterontharders .table tbody td {
      color: #6f4175;
      background-color: #e9e2ea;
      border: none;
      border-left: 2px solid #fff;      
      padding: .75rem 1.5rem;
    }
  
      #waterontharders .table tbody td:first-child {
        border-left: none;
      }  

@media all and (min-width:992px) {
  #waterontharders {
    padding: 0 0 12rem 0;
  }
}

/*---------------------------------------------- 
Informatie
------------------------------------------------*/
#informatie {
  position: relative;
  padding: 4rem 0 8rem 0;
}

#informatie:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -2px;
  height: 100%;
  width: calc(100% + 4px);
  background: url('../images/swoosh-lg-l-purple.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

  #informatie .form-group {
    margin-bottom: 4px;
  }

  #informatie .form-control {
    color: #6f4175;
    padding: .75rem 1rem;
    height: 100%;
    border: none;
    box-shadow: none;
  }

  #informatie .form-control::placeholder { 
    color: #6f4175;
    opacity: 1; 
  }
  
  #informatie .form-control:-ms-input-placeholder {
    color: #6f4175;
  }
  
  #informatie .form-control::-ms-input-placeholder {
    color: #6f4175;
  }

@media all and (min-width: 992px) {  
  #informatie:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background-image: url('../images/informatie-bg.jpg');
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

/*---------------------------------------------- 
Contact
------------------------------------------------*/
#contact {
  padding: 5rem 0 2rem 0
}

  #contact address a {
    color: #fff;
  }

  #contact span,
  #contact span a {
    color: rgba(255,255,255,.6);
  }