/*----------------------------------------

  Theme Name: Spreeknet 2015
  Author: Timon van Dreumel
  Author URI: http://www.timonvandreumel.nl/
  Description: Wordpress thema voor Spreeknet Logopedie Grave

  Version: 2.0

  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html

  This theme, like WordPress, is licensed under the GPL.

  ----------------------------------------------------------

  Summary
    0   Default Styles
    1   Template Parts
      1.1 Header
      1.2 Main Navigation
      1.3 Section
      1.4 Footer
    2   Page Specific
      2.1 Contact
      2.2 Nieuws
      2.3 Workshops
    3   Media Queries
      3.1 Tablet
      3.2 Mobile

  0  Default Styles
----------------------------------------*/

@font-face {
  font-family: 'Banda';
  src: url('fonts/regular-webfont.eot');
  src: url('fonts/regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/regular-webfont.woff') format('woff'), url('fonts/regular-webfont.ttf') format('truetype'), url('fonts/regular-webfont.svg#BandaRegularRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background: url('images/bg.gif') #fff;
  color: #3c3c3b;
  font-family: 'Open Sans', sans-serif;
}
a, a:link, a:hover {
  color: #a0c515;
  text-decoration: none;
}

a:active, a:visited {
  color: #8bab13;
  text-decoration: underline;
}
.btn {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  border: 1px solid #1CB9DF;
  height: 4rem;
  padding: 0 4rem;
  border-radius: 2rem;
  font-size: 1.8rem;
  color: #1CB9DF!important;
  background: #fff;
  cursor: pointer;
  line-height: 3.7rem;
}
.btn:hover {
  background: #1CB9DF;
  color: #fff!important;
}
h1, h2, h3 {
  font-family: 'Banda';
  color: #1cb9df;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
h1 {
  font-size: 2em;}
h2 {
    font-size: 2.7rem;
    display: inline-block;
    line-height: 4rem;
}
h3 {
  font-size: 1.5em;
}
.main {
  margin: 0 auto;
  width: 90%;
  max-width: 110.0rem;
  padding: 0;
}
/*----------------------------------------
  1   Template parts
  1.1 Header
----------------------------------------*/
header {
  background: #fff;
  height: 10.0rem;
  margin: 11.5rem 0 8.0rem 0;
  padding: 0;
  float: left;
  width: 100%;
}
.logo {
  display: block;
  float: left;
  background: url('images/logo.png') no-repeat;
  background-size: contain;
  text-indent: -9999rem;
  width: 32.1rem;
  height: 20.5rem;
  margin: -7.9rem 0 0 1.0rem;
  padding: 0;
}
.ballon_contact {
  background: url('images/ballon_boven.png') no-repeat;
  width: 14.5rem;
  height: 11.2rem;
  float: right;
  margin: -11.2rem 1.6rem 0 0;
}
  .ballon_contact p {
    text-align: center;
    color: #fff;
    margin: 5.0rem 0.5rem 0 0.5rem;
    font-size: .75em;
  }
  .ballon_contact a {
    text-decoration: none;
    color: #fff;
  }
/*----------------------------------------
  1.2 Main Navigation
----------------------------------------*/
#navigation {
  float: right;
  margin: 4.6rem 2.0rem 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
}
  #navigation ul {
    float: right;
    list-style-type: none;
  }
    #navigation ul li {
      float: left;
      position: relative;
      margin: 0 0 0 1.0rem;
      padding: 0 0 1rem 0;
    }
      #navigation ul li a.nolink {
        cursor: default;
      }
      #navigation ul li.current-menu-parent a,
      #navigation ul li.current-menu-item a,
      #navigation ul li.active a,
      #navigation li:hover,
      #navigation .deeper:hover a,
      span.separator:hover {
        border-bottom: 0.8rem solid #a0c515;
      }
  .menu-item-has-children {}
  #navigation .deeper:after,
  .menu-item-has-children:after {
    content: "\25BE";
    display: inline;
  }
    #navigation li.current a:hover,
    #navigation li.active a:hover {
      color: #000;
    }
    #navigation li a,
    span.separator {
      color: #3c3c3b;
      text-decoration: none;
      padding: 0 0.4rem 0.8rem 0.4rem;
    }
    #navigation li ul {
      margin: 1.8rem 0 0 0;
      padding: 0;
      position: absolute;
    }
      #navigation li ul li {
        padding: 0.5rem;
        margin: -0.1rem 0 0 0;
        z-index: 3;
        width: auto;
        background: #a0c515;
        border: 1px solid #b4d539;
        white-space: nowrap;

      }
      #navigation li ul li:hover {
        background: #b4d539;
        border-bottom: 1px solid #b4d539;
      }
      #navigation ul ul a {
        color: #fff;
        border: none!important;
        margin: 0;
        padding: 0;
        display: block;
      }
      #navigation ul ul a:hover {
        color: #fff!important;
      }
      #navigation ul li ul {
        left: -999em;
        opacity: 0;
        transition: opacity .5s ease-in-out, left 0s linear .5s;
        -moz-transition: opacity .5s ease-in-out, left 0s linear .5s;
        -webkit-transition: opacity .5s ease-in-out, left 0s linear .5s;
      }
      #navigation ul li:hover ul {
        left: auto;
        opacity: 1;
        transition: 0s;
        -moz-transition: 0s;
        -webkit-transition-delay: 0s;
      }
#mobile-menu-btn {
  width: 40px;
  height: 40px;
  background: url('images/menu48.svg');
  background-size: contain;
  float: right;
  margin: 2.5rem;
  display: none;
}
/*----------------------------------------

    1.3 Section

  ----------------------------------------*/
section {
  background: #fff;
  font-size: 1.6rem;
  line-height: 2.5rem;
  padding: 2rem;
  float: left;
  width: 100%;
}
  section img.alignright {
    float: right;
    margin: 1rem;
    margin-right: -2rem;
  }
  section img.alignleft {
    float: left;
    margin: 1rem;
    margin-left: -2rem;
  }
  section img.aligncenter {
    margin: 0 auto;
    display: inherit;
  }
/*----------------------------------------

    1.4 Footer

  ----------------------------------------*/

  footer {
    background: #fff;
    margin: 4.0rem 0 2.0rem 0;
    font-size: 1.4rem;
    float: left;
    width: 100%;
    padding: 3.4rem 2.0rem;
  }
    footer .copyright {
      float: left;
      }
      .copyright p {
        margin: 0;
        padding: 0;
        }
      .copyright p:nth-child(2) {
        font-size: 1.2rem;
        }
    footer a {
      color: #222;
      }
    footer .contact_info {
      float: right;
      }
      .contact_info  p {
        margin: 0;
        padding: 0;
        }
        .contact_info ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          }
          .contact_info li {
            float: left;
            margin: 0 0 0 3.0rem;
            padding: 0;
            font-style: italic;
            line-height: 1.5em;
            }
/*----------------------------------------
    2   Page Specific Styles
    2.1 Contact
  ----------------------------------------*/
.page-id-24 {}
  .page-id-24 iframe {
    width: calc(100% + 4rem);
    margin: -2rem 0 0 -2rem;
  }
  .page-id-24 td {
    width: 50%;
    padding: 2rem 1rem;
  }
.wpcf7-form {}
.wpcf7-form textarea {
  height: 20.0rem;
}
.wpcf7-form-control {
  width: 90%;
  line-height: 2.5rem;
  margin: 1rem;
  padding: .5rem;
}
.wpcf7-textarea {
font-family: 'Open Sans', sans-serif;
}
input.wpcf7-submit {
  width: auto;
  margin: 0 auto;
  display: block;
  border: 1px solid #1CB9DF;
  height: 4rem;
  padding: 0 4rem;
  border-radius: 2rem;
  font-size: 1.8rem;
  color: #1CB9DF;
  background: #fff;
  cursor: pointer;
}
  input.wpcf7-submit:hover {
    color: #fff;
    background: #1CB9DF;
  }
.screen-reader-response,
.wpcf7-not-valid-tip {
  display: none;
}
.wpcf7-not-valid {
  outline: 2px solid red;
}
/* Homepage 
_______________________________________ */
.newsflash {
    font-family: 'Banda';
    font-size: 3.2rem;
    color: #3c3c3b;
    width: 55.0rem;
    min-height: 37.0rem;
    background: url('images/referentie_bg.png') no-repeat top right;
    margin: -2.0rem 0 0 0;
    line-height: 4rem;
}
  .newsflash p {
    float: left;
    width: 38.6rem;
    margin: 1.0rem 0 0 2.0rem;
    padding: 0;
    }
    .newsflash p:nth-child(1) {
        margin: 3.0rem 0 0 2.0rem;
    }
    .newsflash p:nth-child(2) {
      text-align: right;
    }
    .newsflash p:nth-child(3) {
      float: left;
      width: 20.0rem;
      margin: -4.0rem 1.0rem 0 0;
    }
    .newsflash img {
      float: right;
      -webkit-transform: rotate(-3deg);
         -moz-transform: rotate(-3deg);
          -ms-transform: rotate(-3deg);
           -o-transform: rotate(-3deg);
              transform: rotate(-3deg);
    }

/*----------------------------------------
    3    Media Queries
    3.1  Tablet
  ----------------------------------------*/
@media (max-width: 1130px) {
  html {
    font-size: 50%;
  }
}
@media (max-width: 930px) {
  #mobile-menu-btn {
    display: block;
  }
  #navigation {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: #fff;
  }
    #navigation ul {
      float: none;
      text-align: center;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-padding-start: 0;
    }
      #navigation ul li {
        float: none;
        font-size: 3rem;
        line-height: 4rem;
        margin: 5rem;
      }
        #navigation ul li:hover {
          border-bottom: none;
        }
        #navigation ul li ul {
          position: static;
          margin: 0;
          left: 0;
          opacity: 1;
        }
          #navigation ul li ul li {
            background: none;
            border: none;
            font-size: 2rem!important;
          }
            #navigation ul li ul li a {
              color: #3c3c3b;
            }
    .menu-item-has-children:after {
      content: "";
      display: inline;
    }
    .menu-item-has-children a:after {
      content: "\25BE";
      display: inline;
    }
    .menu-item-has-children ul a:after {
      content: "";
    }
  .main {
    width: 98%;
  }
  table,tbody,tr,td {
    display: block;
    float: left;
    clear: both;
    width: 100%;
  }
  section img {
    max-width: 100%;
    height: auto;
  }
  section img.alignleft,
  section img.alignright {
    margin: 1rem;
  }
  .page-id-24 td {
    width: 100%;
  }
  .logo {
    width: 25rem;
    margin-top: -5rem;
  }
  .page-id-24 iframe {
    display: none;
  }
  .newsflash,
  .newsflash p {
    width: 100%;
  }
}
/*----------------------------------------
    3.2  Mobile
  ----------------------------------------*/