/* ==========================================================================
   Base
   ========================================================================== */

body
{
  background: #ffffff none;
  font-size: 13px;
  color: #242424;
}
a { color:#009DB2; }
.btn-link { color: #009DB2; }
.btn-large { font-weight:bold; }
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
  width: auto;
  max-width: 780px;
}

/* =============================================================================
   Header
   ========================================================================== */

#banner { background: #fff none; }

/* Fixed Topbar Navigation */
body.top-navbar { padding-top: 60px; }
body.admin-bar .navbar-fixed-top { top: 28px; }
#nav-main { float:right; margin-top: 2em; }
#nav-main a {color:#32335a;}
#nav-main a:hover { background-color: #009DB2; color: #ffffff; }
#nav-main li.active a { background-color: #009DB2; color: #ffffff; }
.page-header { clear:both; }

#slogan {
  margin: 0 0 2em 0;
  padding-left:220px;
}
#slogan h1 { margin:0; }
#slogan h1 a {
  padding: 10px 0 110px 180px;
  margin-left:-180px;
  color: #7139A1;
  text-decoration:none;
  background: transparent url(../img/afsprakenapp-logo.png) 10px 0 no-repeat;
}
#slogan h3 {
  margin-left: 0;
  font-weight:normal;
  font-size: 16px;
  line-height: 1em;
  color: #6C6572;
}
#slogan h2{
  margin-left: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4em;
  color: #6C6572;
}

#phone {
  width: 188px;
  height: 406px;
  display:block;
  /* background: transparent url(../img/phone-bg.png) top left no-repeat; */
  float:left;
  padding: 14px 16px 14px 16px;
  overflow:hidden;
  position: relative;
  margin-right: 48px;
  margin-bottom: 24px;
}
#phone .phone-frame {
  display: block;
  width: 220px;
  height: 434px;
  position: absolute;
  top: 0;
  left: 0;
}
#phone #slider {
  width: 188px;
  height: 406px;
  overflow:hidden;
}
#phone #images {
  width: 376px;
  height: 406px;
}
#phone figure {
  width: 188px;
  height: 406px;
  margin:0;
  -webkit-margin-before:0;
  -webkit-margin-after:0;
  -webkit-margin-start:0;
  -webkit-margin-end:0;
  float:left;
  position:relative;
}
#cta {
  padding-top: 2em;
}
#cta a.btn {
  display:block;
  max-width: 250px;
  font-weight:bold;
}
#cta p.intramed {
  width: 150px;
  float:right;
  padding: 10px 10px 80px 10px;
  font-size:11px;
  background: #fff url(/assets/img/intramed_logo.png) bottom center no-repeat;
    -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* ==========================================================================
   Content
   ========================================================================== */

#content { padding-top: 2em; background: #F0F0F0 none; }

#features {
  width: calc(100% - 268px);
  float: right;
  margin-bottom: 48px;
}
#features h4 {
  font-weight:bold;
}
#features ol {
  margin:0 0 0 15px;
}
#features ol li {
  margin: 1em 3em 1em 0;
  color: #252525;
  width: 175px;
  float:left;
  height: 6em;
}

/* ==========================================================================
   Primary Content
   ========================================================================== */

/* #main { float:right; margin: 0 15px 45px 70px; width: 475px; } */
#main { margin: 0 24px 45px 24px; }

body.informatie #main div { background: #fff; margin: 0.5em 0; padding: 1em; }

.page-header h1 { color: #153f4f; }
body.informatie #main .page-header,
.page-header { border-color: #009DB2; background-color: transparent; }

#main p.lead { font-size:16px; line-height:28px; font-weight: 300; }
#main p.lead.small { font-size:12px; line-height:18px; }

.accordion-group { border-color:none; margin-bottom: -1px; border-radius: 0; }
.accordion-heading { background:#fff none;}
.accordion-heading a { color: #009DB2; font-size:14px; text-decoration: none; }
.accordion-toggle i { transform: rotate(90deg); }
.accordion-toggle.collapsed i { transform: rotate(0deg); }
.accordion-inner { border-color: #ccc; background: #fff none; border-top: none; }


/* ==========================================================================
   Sidebar
   ========================================================================== */

#sidebar { width: 205px; margin: 1.5em 0 0 15px; display:block; float:left; }
#sidebar #demo { clear:both; position:relative;top:2em;margin: 0 2em; width: 180px;}
#sidebar #demo .qr { display:block; width:116px; height: 116px; }
#sidebar h3 { font-size:16px; line-height:24px;}

#win {
  margin-top: 2em;
  padding: 4px 15px 8px 15px;
  background: #fff none;
    -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
#win h3 {
  padding-bottom: 198px;
  text-align:left;
  background: transparent url(/wp-content/themes/afsprakenapp/assets/img/win_ipad.jpg) bottom center no-repeat;
}

/* ==========================================================================
   Posts
   ========================================================================== */

.hentry header { }
.hentry time { }
.hentry p.byline { }
.hentry .entry-content { }
.hentry footer { }

.prijzen table {
  width:100%;
  margin-bottom:1em;
}
.prijzen table thead {
  font-weight:bold;
}
.prijzen table tr.prijs
{
  background: #fff none;
}
.prijzen table td {
  padding:0.5em;
}
/* ==========================================================================
   Footer
   ========================================================================== */

footer.footer { background: #fff none; padding: 2em 0; margin: 0 24px;  }
footer.footer a.logo {
  float:left;
}
footer.footer p { max-width: 500px; float:right; font-size:16px; line-height:28px; color: #858585; }
#nav-footer {
  clear:both;
  float:right;
}
#nav-footer ul {
  margin: 2em 0 0 0;
}
#nav-footer a {
  color: #9A9A9A;
}
#nav-footer .nav-pills > .active > a,
#nav-footer .nav-pills > .active > a:hover
{
  background-color: transparent;
}
/* .home #ill_01 {
  width:150px;
  height:291px;
  display:none;
  background: transparent url(../img/ill_01.png) top left no-repeat;
  position:absolute;
  left:50%;
  top: 750px;
  margin-left:-520px;
}
.home #ill_02 {
  width:99px;
  height:275px;
  background: transparent url(../img/ill_02.png) top left no-repeat;
  position:absolute;
  left:50%;
  top: 750px;
  margin-left:-520px;
  display:block;
} */
/* ==========================================================================
   WordPress Generated Classes
   See: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
   ========================================================================== */

.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; }
.alignright { float: right; }
figure.alignnone { margin-left: 0; margin-right: 0; }

.button,
.btn-orange {
  background-color: #E77C11;
  background-image: none;
  border-color: transparent;
  color: #fff !important;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  box-shadow: none;
}
.button:hover,
.btn-orange:hover {
  background-color: #B6620C;
}

.gform_wrapper .left_label .gfield_label {
  width: 40%;
}

.gform_wrapper .right_label input.medium, .gform_wrapper .right_label select.medium, .gform_wrapper .left_label input.medium, .gform_wrapper .left_label select.medium {
  width: 50%;
}

.gform_wrapper .left_label input {

}

.gform_wrapper .left_label .gfield_description {
  margin-left: 43%;
}
.gform_wrapper .gform_footer.left_label {
  padding-left: 43%;
}

#therapeuten_input input {
  width: 35px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-device-pixel-ratio: 1.5) {

  #phone {
    background:url(../img/phone-bg-2x.png) no-repeat center center;
    -webkit-background-size: 100% 100% ;
    -moz-background-size: 100% 100% ;
    background-size: 100% 100% ;
  }

  #slogan h1 a {
    background-image: url(../img/afsprakenapp-logo@2x.png);
    -webkit-background-size: 150px 150px ;
    -moz-background-size: 150px 150px ;
    background-size: 150px 150px ;
  }

}


@media (max-width: 640px) {
  #features {
    clear: both;
    width: auto;
    float: left;
    margin-left: 0;
  }
  #phone {
    float: none;
  }
  #slogan {
    padding:0;
    margin: 0 24px 2em 42px;
  }
  #slogan h1 {
    margin-top: 150px;
  }
  #slogan h1 a {
    padding: 150px 0 0 0;
    margin-left:0;
    background-position: top left;
  }
  footer.footer a.logo {margin-left: 24px;}
  footer.footer p {margin: 3em 0 0 0; }
}