@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,700i');

* {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
    margin: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
        font-size: 14px;
    }
}

body#intro {
    background: #FFFFFF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFFFFF 380px, #D6D8D6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFFFFF 380px, #D6D8D6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFFFFF 380px, #D6D8D6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFFFFF 380px, #D6D8D6); /* Standard syntax */
}

body#green {
background:  #7CB787;
background: -webkit-linear-gradient(132deg, #354D37 0%, #7CB787 100%) fixed;
background: -o-linear-linear-gradient(132deg, #354D37 0%, #7CB787 100%) fixed;
background: -moz-linear-linear-gradient(132deg, #354D37 0%, #7CB787 100%) fixed;
background: linear-gradient(-45deg, #354D37 0%, #7CB787 100%) fixed;
}

.back {
    position: absolute;
    top: 24px;
    left: 17px;
}

/*form*/
.input { 
    display: block;
    outline: none;
    width: 100%;
    height: 48px;
    padding: 15px;
    border: none;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.input:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.btn {
    border-radius: 2px;
    padding: 7px 20px;
    cursor: pointer;
    -webkit-appearance: none;
}

.btn-yellow {
    background: #F8E71C;
    border: none;
    color: #354D37;
    text-decoration: none;
}

.btn-yellow:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    transition: all 1s cubic-bezier(.25,.8,.25,1);
}

/*index*/
    
    #intro-header {
        margin: 0 auto;
        width: 375px;
        height: 380px;
    }

    #intro-header .intro-bg {
        background-image: url('../img/headerImage.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 100%;
        width: 100%;
        background-blend-mode:multiply;  
    }

    @media screen and (max-width: 375px) {
         #intro-header{
            width: 100%;
        }

        #intro-header .intro-bg {
            margin: 0 auto;
            margin-top: -60px;
        }
        
    }

    #intro-header img{
        width: 100%
    }

    .form-container {
        width: 310px;
        margin: 0 auto;
    }

    @media screen and (max-width: 480px) {
        .form-container {
            padding: 25px;
            width: 100%;
        }
    }

    #chooseDate {
        color: #405E4A;
        margin-bottom: 70px;
    }

    #chooseDate .intro-text {
        width: 100%;
        display: block;
        text-align: center;
        margin: 30px 0;
        font-size: 13.5px;
        font-weight: 600;
    }

    #chooseDate .timeslot {
        padding: 15px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 1s cubic-bezier(.25,.8,.25,1);
    }

    #chooseDate .timeslot:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        cursor: pointer;
        position: relative;
    }

    #chooseDate .timeslot .date, #chooseDate .timeslot .time{
       padding: 4px; 

    }

    #chooseDate .timeslot:hover .time {
        background: #405E4A;
        color: #fff;
        transition: all 1s cubic-bezier(.25,.8,.25,1);
    }

    #chooseDate .timeslot:after {
      content: "";
      display: table;
      clear: both;
    }

    #chooseDate .timeslot input[type="radio"]  {
        display: none;
    }

    #chooseDate .timeslot .date {
        font-weight: 600;
        font-size: 14px;
        float: left;
    }

    #chooseDate .timeslot .time {
        font-size: 14px;
        float: right;
        color: #6C9A73;
        border-radius: 0.3rem; 
    }

  /* lijstje.nl fab */
  
    .lijstjeFab {
      position:fixed;
      right:0;
      bottom:0;
      margin-right:24px;
      margin-bottom:24px;
      opacity: 1;
      animation: fadeIn 3s linear;
      /*animation-delay: 2s;*/
    }  

    @keyframes fadeIn {
      0% {opacity: 0;}
      50% {opacity: 0;}
      100% {opacity: 1;}
    } 

    .lijstjeFab img {
      height:55px;
    }

    @media screen and (max-width: 768px) {
        .lijstjeFab img {
            height:48px;
          }
        }

    @media screen and (max-width: 480px) {
        .lijstjeFab {
            display:none;
          }
        }

/*Stap 2 / 3*/ 

    .header-logo {
        padding-top: 50px;
        margin-left:10px;
        text-align: center;
    }

     @media screen and (max-width: 480px) {
        .header-logo {
            padding-top: 20px;
            
        }
    }
    
    #reserveDate .intro-text {
        width: 100%;
        display: block;
        text-align: center;
        margin: 30px 0 20px 0px;
        font-size: 14px;
        color: #fff;
    }

     @media screen and (max-width: 480px) {
        #reserveDate .intro-text {
            margin: 0px 0 20px 0px;
        }
    }
    

    #reserveDate .chosen-moment{
        border: 1px solid #fff;
        border-radius: 2px;
        padding: 15px;
        color: #fff;
        margin-bottom: 10px;
    }


     #reserveDate .chosen-moment:after {
      content: "";
      display: table;
      clear: both;
    }

    #reserveDate .chosen-moment .chosen-date {
        float: left;
        font-size: 14px;
    }


    #reserveDate .chosen-moment .chosen-time {
        float: right;
        font-size: 14px;
    }


    #reserveDate input.input {
        margin-bottom: 10px;
    }

    #reserveDate .btn-container {
        text-align: center;
        margin-top: 30px;
    }

    #reserveDate .info-text {
        color: #fff;
        font-size: 13px;
        padding: 0 25px;
    }

    #reserveDate .info-text h3 {
        font-size: 14px;
        margin-top: 30px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    #reserveDate .info-text p {
        /*font-size: 13px;*/
        margin-bottom: 35px;
    }

     #reserveDate .info-text ul {
        margin-bottom: 65px;
        /*font-size: 13px;*/
     }

     #reserveDate .info-text a {
        color: #fff;
        font-size: 14px;
     }


   /*annulering*/  

   .canceled .chosen-date, .canceled .chosen-time {
     text-decoration: line-through;
   }

   .canceled label:before {
        display: block;
        background: #7CB787;
        color: #fff;
   }

   .canceled .new-afspraak {
        display: block;
        margin-top: 50px;
   }

    .btn-container label:before {
        display: inline-block;
        content: "\f00c";
        margin-right: 5px;
        font-family: FontAwesome;
   }

    .yellow {
        background: #F8E71C;
        border: none;
        color: #354D37;
        text-decoration: none;
        cursor: pointer;
        -webkit-appearance: none;
    }

    input.yellow:focus {
        outline: none;
    }

    .btn-cancel:hover:before {
        box-shadow: none!important;
    }



/*custom checkbox*/

p.checkbox { 
      margin-top: 24px;
      font-size: 14px;
      }


[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1em; height: 1em;
  border: 2px solid #FFFFFF;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 1em;
  line-height: 0.8;
  color: #354D37;
  transition: all .1s;
}

@media screen and (max-width: 480px) {
        [type="checkbox"]:not(:checked) + label:after,
        [type="checkbox"]:checked + label:after {
          top: 5px;
          left: 4px;
          font-size: 0.8em;
        }
        }

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
  
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}

/* hover style just for information */
label:hover:before {
  /*border: 2px solid #4778d9!important;*/
  box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0,0,0,0.25), 0 5px 6px rgba(0,0,0,0.22) !important;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}