/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('../fonts/fonts.css');

/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family:'avenir', sans-serif; font-size: 12px; color: #000; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; }
body { background: #f7f7f9; hyphens: manual;}
input, select, textarea { font-family: 'avenir', sans-serif; font-size: 12px; color: #000; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }
h1, h2, h3, h4, h5, h6, figure, p, ul { margin-bottom: 0; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 980px; }
.centered { padding-right: calc((100% - 980px) / 2); padding-left: calc((100% - 980px) / 2); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; overflow: hidden; }

/* ### header container ### */
#headerCntr { padding: 40px 0 25px 0; position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; }
#headerCntr .center { max-width: 1360px; }
#headerCntr .logo { position: absolute; left: 30px; top: 0px; }
#headerCntr .logo img { max-width: 100%; width: 145px; }
#headerCntr .login { padding: 0px 30px; height: 40px; float: right; line-height: 40px; border-radius: 40px; font-size: 14px; color: #000000; text-decoration: none; background: #fff; }
#headerCntr .login:hover { text-decoration: underline; }

/* ### banner box ### */
.bannerBox { padding-top: 138px; height: 700px; width: 100%; background: url(../img/image-banner.jpg) left top no-repeat; background-size: cover; }
.bannerBox .title { padding: 65px 0 0 0; font-size: 44px; color: #fff; line-height: 60px; }
.bannerBox p { padding: 10px 0 20px 0px; font-size: 18px; color: #fff; line-height: 30px; }
.bannerBox .subtitle { padding: 0px 0 10px 0; font-size: 24px; color: #fff; }
.bannerBox .form { padding: 15px 47px 15px 4px; max-width: 420px; height: 50px; position: relative; border-radius: 50px; background: #ffffff; }
.bannerBox .form input[type="text"] { padding-left: 20px; width: 50%; float: left; background: none; border: none; font-size: 14px; color: #3a3e44; border-right: 1px solid #fbe1d9; }
.bannerBox .form input[type="text"].email { width: 100%; float: left; border: none; }
.bannerBox .button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; display: block; border: none; border-radius: 100%; cursor: pointer; background: #ef7e5d url(../img/icon-shape.svg) center center no-repeat; }
.bannerBox .detail { width: 540px; float: left; }
.bannerBox .image { float: right; }
.bannerBox .form .set:first-of-type { width: 250px; float: left; }
.bannerBox .form .set:last-of-type { width: 117px; float: left; }

/* ### content container ### */
#contentCntr { width: 100%; }

	/* ### pgb app box ### */
	.pgbappBox { padding-top: 116px; padding-bottom: 126px; width: 100%; text-align: center; overflow: hidden; background: #f1f1f1; }
	.pgbappBox h1 { font-size: 64px; color: #f57f5b; margin-bottom: 15px; }
	.pgbappBox p { font-size: 36px; color: #f57f5b; padding-bottom: 20px; }
	.pgbappBox .play-button { max-width: 5rem; }
	.pgbappBox .figure { padding: 77px 0px; height: 641px; max-width: 860px; margin: 0px auto; font-size: 22px; position: relative; display: block; }
	.pgbappBox .budgetMan { width: 173px; text-align: center; position: absolute; left: 0px; top: 50%; transform: translate(0,-56%); }
	.pgbappBox .budgetMan:before { margin: 0px auto 36px auto; width: 142px; height: 202px; display: block; content:''; background: url(../img/icon-man.svg) left top no-repeat; }
	.pgbappBox .healthcare { width: 155px; text-align: center; position: absolute; right: 0px; top: 50%; transform: translate(0,-56%); }
	.pgbappBox .healthcare:before { margin: 0px auto 36px auto; width: 142px; height: 202px; display: block; content:''; background: url(../img/icon-man2.svg) left top no-repeat; }
	.pgbappBox .budgetIcon { width: 186px; text-align: center; position: absolute; left: 50%; top: -80px; margin-left: -93px; }
	.pgbappBox .budgetIcon:before { margin: 0px auto 10px auto; width: 80px; height: 119px; display: block; content:''; background: url(../img/icon-budget-gray.svg) left top no-repeat; }
	.pgbappBox .agreement { width: 186px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-43%);  }
	.pgbappBox .agreement:before { margin: 0px auto 10px auto; width: 88px; height: 90px; display: block; content:''; background: url(../img/icon-agreement.svg) left top no-repeat; }
	.pgbappBox .clockIcon { width: 186px; text-align: center; position: absolute; left: 50%; bottom: -101px; margin-left: -93px; }
	.pgbappBox .clockIcon:before { margin: 0px auto 10px auto; width: 106px; height: 102px; display: block; content:''; background: url(../img/icon-clock.svg) left top no-repeat; }
	.pgbappBox .frame { width: 415px; height: 440px; margin: 0px auto; position: relative; background: url(../img/process-bg.svg) left top no-repeat; }
	.pgbappBox .figure small { display: block; font-size: 100%; }

	/* ### text box ### */
	.textBox { width: 100%; }
	.textBox h2 { font-size: 36px; color: #3a3e44; line-height: 45px; }
	.textBox h3 { font-size: 36px; color: #3a3e44; line-height: 45px; }
	.textBox p { padding: 10px 0 25px 0px; font-size: 18px; }
	.textBox .image { margin: 0px 0 0 -50px; }
	.textBox .full-sized { display: none; }
	.textBox .row:first-of-type .image { margin-top: -99px; }
	.textBox .detail { padding-top: 150px; padding-left: 80px; color: #f48060;  }
	.textBox .row:nth-child(even) { background: #f48060; }
	.textBox .row:nth-child(even) .detail { padding: 150px 80px 0 0; color: #fff; }
	.textBox .row:nth-child(even) h3 { color: #fff; }
	.textBox .row:nth-child(even) .image { float: right; margin: 0 -35px 0 0; }

	/* ### Advantages box ### */
	.advantagesBox { padding-top: 116px; padding-bottom: 50px; width: 100%; overflow: hidden; background: #f1f1f1; }
	.advantagesBox h4 { padding-bottom: 12px; font-size: 64px; color: #f48060; text-align: center; letter-spacing: 3px; }
	.advantagesBox p.title { padding-bottom: 62px; font-size: 36px; color: #3a3e44; text-align: center; max-width: inherit; letter-spacing: 4px; }
	.advantagesBox .col-md-6 > p {font-size: 18px; color: #3a3e44; line-height: 28px; }
	.advantagesBox .col-md-6 > p:before { width: 70px; height: 83px; display: block; margin: 0px auto 18px auto; content: ''; background: url(../img/icon-zorg-overeenkomst.svg) left top no-repeat; }
	.advantagesBox .col-md-6 > p.iconBudget:before { width: 53px; background: url(../img/icon-budget.svg) left top no-repeat; }
	.advantagesBox .col-md-6 > p.iconLink:before { width: 83px; background: url(../img/icon-link.svg) left top no-repeat; }
	.advantagesBox .col-md-6 > p.iconLike:before { width: 80px; background: url(../img/icon-like.svg) left top no-repeat; }

/* ### footer container ### */
#footerCntr { padding-top: 90px; padding-bottom: 60px; overflow: hidden; width: 100%; background: #f48060; }
#footerCntr .block { padding-bottom: 74px; max-width: 420px; margin: 0px auto; text-align: center; }
#footerCntr .block img { display: inline-block; }
#footerCntr .block .title { padding: 25px 0px 15px; font-size: 36px; color: #fff; line-height: 40px; }
#footerCntr .block p { padding-bottom: 30px; font-size: 18px; color: #fff; }
#footerCntr .form { padding: 15px 47px 15px 4px; height: 50px; position: relative; border-radius: 50px; background: #ffffff; }
#footerCntr .form  input[type="text"] { padding-left: 20px; width: 50%; float: left; background: none; border: none; font-size: 14px; color: #333; border-right: 1px solid #fbe1d9; }
#footerCntr .form  input[type="text"].email { width: 100%; float: left; border: none; }
#footerCntr .form  .set:first-of-type { width: 250px; float: left; }
#footerCntr .form  .set:last-of-type { width: 117px; float: left; }
#footerCntr .button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; display: block; border: none; border-radius: 100%; cursor: pointer; background: #ef7e5d url(../img/icon-shape.svg) center center no-repeat; }
#footerCntr .copyright { padding-top: 14px; border-top: 1px solid #fff; }
#footerCntr .copyright p { font-size: 11px; color: #fff; padding-left: 0; padding-right: 0; }
#footerCntr .copyright p img { display: inline-block; }

/* #Video Layover
================================================== */

.movie-canvas { display: fixed; width: 100vw; height: 100vh; background-color: rgba(24,24,24,.5); position: fixed; top: 0; left: 0; z-index: 9999999; }
.movie-canvas #movie { margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.play-button { display: block; margin: auto; background-image: url('../img/play-button.svg'); height: 5rem; width: 5rem; background-size: cover; background-repeat: no-repeat;  margin: 1rem auto}
.play-button + h2 { font-size: 1.75rem; margin-bottom: 2rem; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1400px) {
	#headerCntr .center { padding-left: 30px; padding-right: 30px; }
	.center { padding-left: 30px; padding-right: 30px; }
	.centered { padding-left: 30px; padding-right: 30px; }
}
@media only screen and (max-width: 1200px) {
	#headerCntr .logo { left: 30px; top:  -15px; }
	.textBox .detail { padding-left: 0px; padding-right: 20px; }
	.textBox .row:nth-child(even) .detail {padding-right: 0px; padding-left: 20px; }
}

@media only screen and ( max-width: 979px) {
	.bannerBox .image { width: 250px; position: absolute; right: 20px; top: 190px; }
	.bannerBox .image img { width: 100%; }
	.bannerBox p { max-width: 440px; }
	.bannerBox .title { max-width: inherit; }
	.pgbappBox { padding-top: 130px; }
	.textBox .image { max-width: 100%; margin-left: -25px; }
	.textBox .row:first-of-type .image { margin-top: -70px; }
	.textBox .detail { padding-top: 43px; }
	.textBox h2 { line-height: 43px; }
	.textBox h3 { line-height: 43px; }
	.textBox .row:nth-child(even) .detail { padding-top: 43px; }
	.advantagesBox { padding-top: 75px; }
	.advantagesBox h4 { padding: 0px; margin: 0px; }
	.advantagesBox p { max-width: 233px; margin: 0px auto; }
	.advantagesBox .row > div { padding-bottom: 30px; }
	.pgbappBox .figure { height: 520px; max-width: 768px; font-size: 18px; }
	.pgbappBox .budgetMan:before { margin: 0px auto 15px auto; width: 109px; height: 153px; background-size: 95%;  }
	.pgbappBox .healthcare:before { margin: 0px auto 15px auto; width: 109px; height: 153px; background-size: 95%;  }
	.pgbappBox .budgetIcon { top: -60px; }
	.pgbappBox .budgetIcon:before { margin: 0px auto 5px auto; width: 60px; height: 86px; background-size: 91%;  }
	.pgbappBox .agreement:before { margin: 0px auto 10px auto; width: 71px; height: 71px;  background-size: 97%;  }
	.pgbappBox .clockIcon:before { margin: 0px auto 10px auto; width: 80px; height: 80px; background-size: 100%;  }
	.pgbappBox .frame { width: 320px; height: 333px; background-size: 100%; }
}

@media only screen and (max-width: 767px) {
	#headerCntr .logo { width: 97px; }
	.bannerBox .detail { width: 100%; }
	.bannerBox .title { font-size: 40px; line-height: 50px; }
	.bannerBox .form .set:first-of-type { margin-bottom: 10px; padding: 15px 15px 15px 4px; height: 50px; width: 100%; border-radius: 50px; background: #ffffff; }
	.bannerBox .form .set:last-of-type {padding: 15px 60px 15px 4px; height: 50px; width: 100%; border-radius: 50px; background: #ffffff; position: relative; }
	.bannerBox .form { max-width: 100%; background: none; padding: 0px; }
	.bannerBox .form input[type="text"]:last-child{ border: none; }
	.bannerBox p { max-width: 100%; }
	.bannerBox .title { padding-top: 10px; }
	.pgbappBox { padding-top: 65px; padding-bottom: 60px; }
	.pgbappBox h1 { font-size: 50px; }
	.pgbappBox p { font-size: 28px; padding-bottom: 38px; }
	.pgbappBox img { display: inline-block; }
	.textBox h2 { font-size: 30px; }
	.textBox h3 { font-size: 30px; }
	.advantagesBox h4 { font-size: 40px; }
	.advantagesBox p.title { font-size: 26px; }
	.advantagesBox p { max-width: 100%; padding-bottom: 25px; }
	.textBox{ margin-top: 2rem; }
	.textBox .row:nth-child(3){ flex-direction: column-reverse; }
	.textBox .detail { padding-left: 20px; padding-bottom: 25px; }
	.textBox .image { max-width: 200px; margin: auto !important; float:none !important; }
	.textBox .row:nth-child(2) img.image { display: none !important; }
	.textBox .full-sized { display: block; }
	.textBox .full-sized + .image { display: none !important; }
	.textBox .row:nth-child(even) .detail { padding-right: 20px;  padding-bottom: 25px; }
	#footerCntr .form .set:first-of-type { margin-bottom: 10px; padding: 15px 15px 15px 4px; height: 50px; width: 100%; border-radius: 50px; background: #ffffff; }
	#footerCntr .form .set:last-of-type {padding: 15px 60px 15px 4px; height: 50px; width: 100%; border-radius: 50px; background: #ffffff; position: relative; }
	#footerCntr .form { background: none; padding: 0px; }
	#footerCntr .form input[type="text"]:last-child{ border: none; }
	#footerCntr .block img { width: 77px; }
	#footerCntr { padding-top: 56px; }
	#footerCntr .copyright { margin-left: 40px; margin-right: 40px; }
	#footerCntr .form { height: auto; }
	#footerCntr .block { padding-bottom: 60px; }
	.bannerBox { height: auto; padding-bottom: 100px; }
	.pgbappBox .figure { padding: 60px 0px; height: 320px; max-width: 326px; font-size: 15px; }
	.pgbappBox .budgetMan { width: 55px;  word-break: manual; }
	.pgbappBox .budgetMan:before { margin: 0px auto 8px auto; width: 50px; height: 72px; }
	.pgbappBox .healthcare { width: 90px; right: -20px;  }
	.pgbappBox .healthcare:before { margin: 0px auto 8px auto; width: 50px; height: 72px; }
	.pgbappBox .budgetIcon { width: 186px; left: 50%; top: -32px; }
	.pgbappBox .budgetIcon:before { margin: 0px auto; width: 30px; height: 43px;  }
	.pgbappBox .agreement { width: 186px; left: 50%; }
	.pgbappBox .agreement:before { margin: 0px auto 5px auto; width: 35px; height: 35px; }
	.pgbappBox .clockIcon { width: 186px; bottom: -55px; }
	.pgbappBox .clockIcon:before { margin: 0px auto ; width: 36px; height: 36px; }
	.pgbappBox .frame { width: 148px; height: 232px; margin: 0px auto; position: relative; background: url(../img/process-bg-mobile.png) left top no-repeat; }
}

@media only screen and (max-width: 479px) {
	#footerCntr .copyright p { text-align: center!important; }
	.center { padding-left: 20px; padding-right: 20px; }
	.centered { padding-left: 20px; padding-right: 20px; }
	.bannerBox .title { font-size: 30px; line-height: 44px; }
	.bannerBox .subtitle { font-size: 19px; }
	.bannerBox p { font-size: 16px; padding: 10px 0; }
	.pgbappBox p { font-size: 21px; }
	#footerCntr .block .title { font-size:  26px; }
	.textBox{ margin-top: 2rem; }
	.advantagesBox { padding-top: 50px; }
	.advantagesBox h4 { font-size: 28px; }
	.advantagesBox p.title { font-size: 23px; padding-bottom: 30px; }
	.textBox h2 { font-size: 23px; line-height: 36px; }
	.textBox h3 { font-size: 23px; line-height: 36px; }
	.pgbappBox .figure { font-size: 13px; }
}
#blog{
  float: right;
  font-size: 1.5rem;
  color: #000;
  background-color: #fff;
  border-radius: 20px;
  padding: .5rem 1.5rem;
  margin-right: 3rem;
}