* { box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html, body { font-family: 'texgyreadventorregular', sans-serif; font-size: 16px; line-height: 20px; }

#container { min-width: 100%; padding-top: 100px; }
div.anchor { display: block; position: relative; top: -160px; }
section { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; padding: 60px 0px; overflow: hidden; }
.pagewidth { max-width: 1200px; margin: 0px auto; background-position: center center; background-size: contain; background-repeat: no-repeat;  }

.brandline { position: relative; height: 10px; background: url('/images/brandline.png') no-repeat; background-size: 100% 100%; }
.navbar .brandline { margin: 0px -50px; }
.brandline > span { position: absolute; width: 10px; height: 10px; top: 0px; border-radius: 5px; z-index: 10; }
span.spacer1 { background-color: #4a6f50; left: calc((100% / 6)* 1); margin-left: -5px; }
span.spacer2 { background-color: #c51315; left: calc((100% / 6)* 2); margin-left: -5px; }
span.spacer3 { background-color: #60302e; left: calc((100% / 6)* 3); margin-left: -5px; }
span.spacer4 { background-color: #006a32; left: calc((100% / 6)* 4); margin-left: -5px; }
span.spacer5 { background-color: #60302e; left: calc((100% / 6)* 5); margin-left: -5px; }

section.groen { background-color: #3aaa35; }
section.paars { background-color: #001e60; }
section.map { padding-bottom: 0px; }
section.footer { background-color: #333; }
section.credit { padding: 20px; color: #001e60;}
.section-bg { position: absolute; background: #F00;  }
.section-bg img { max-width: 100%; }

nav { background: #F9F9F9; background: rgba(250,250,250,0.95); z-index: 4900; }

#logo { position: relative; margin-left: auto; background: url('../images/jong-jgz-logo.svg'); z-index: 999; width: 250px; height: 70px; margin-top: 20px; background-size: contain; cursor: pointer; background-repeat: no-repeat; }
.navbar-fixed-top { position: fixed; width: 100%; top: 0px; }
.navbar { padding: 0px 50px; height: 110px; }

#mobilemenu { position: absolute !important; top: 45px; right: 30px !important; width: calc(100% - 236px); text-align: right; line-height: 100px; color: #001e60; font-size: 16px; font-weight: 400; }
		#mobilemenu a { color: #001e60; text-decoration: none; padding: 0px 10px; cursor: pointer; }
		#mobilemenu ul { list-style: none; }
		#mobilemenu ul li { display: inline-block; }
		#mobilemenu a.active, #mobilemenu a:hover { color: #3aaa35; }
#mobilemenu > ul > li > a:after {
  display:block;
  height: 1px;
  content: '';
  border-bottom: solid 2px #3aaa35;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  transform-origin: 50% 50% 0;
}
#mobilemenu > ul > li > a.active:after { transform: scaleX(1); }
.submenu-button { display: none; }

#mobilemenu ul ul li a[href*="communicatieadvies"] { border-right: 10px solid #009fe3; }
#mobilemenu ul ul li a[href*="grafisch-ontwerp"] { border-right: 10px solid #f39200; }
#mobilemenu ul ul li a[href*="drukwerk"] { border-right: 10px solid #e6007e; }
#mobilemenu ul ul li a[href*="relatiegeschenken"] { border-right: 10px solid #3aaa35; }
#mobilemenu ul ul li a[href*="promotie-en-werkkleding"] { border-right: 10px solid #ffcc00; }
#mobilemenu ul ul li a[href*="beursaankleding-signing"] { border-right: 10px solid #5e4f9c; }


.bg-fixed { background-attachment: fixed; background-size: cover; background-position: center center; }

h1 { font-family: 'texgyreadventorregular', sans-serif; font-size: 42px; color: #000; }
h2 { font-family: 'texgyreadventorbold', sans-serif; font-size: 24px; line-height: 30px; font-weight: 700; color: #000; margin-bottom: 15px;  }
h2 .light { font-family: 'texgyreadventorregular', sans-serif; }
h3 {}
a { color: #001e60; text-decoration: underline; }
ul { list-style: disc; }
ul li { padding-left: 15px; }
.intro { text-align: center; }
.intro-tekst { padding: 50px 0px 50px; width: 50%; margin: 0px auto; }
.intro h1 { font-size: 46px; line-height: 60px; color: #001e60; font-weight: 700; }
.intro h2 { font-size: 36px; line-height: 36px; padding-bottom: 60px; color: #3aaa35; font-weight: 400; }
.intro p { line-height: 30px; }

.title { font-weight: 400; font-size: 42px; line-height: 42px; color: #001e60; text-align: center; padding-bottom: 45px; }
#filter { text-align: center; padding-bottom: 25px; }
#filter a { padding: 10px 10px; cursor: pointer; text-decoration: none; }
#filter a.current { color: #3aaa35; }

.quote { padding: 60px 0px; margin: 60px 0px; border: 1px solid #3aaa35;; border-width: 1px 0px; font-weight: 700; color: #3aaa35;; font-size: 24px; line-height: 30px; }
.quote a { color: inherit; }
.breadcrum { background: #F2F2F2; padding: 35px 35px; text-align: right; color: #4D4D4D; text-transform: uppercase; font-size: 14px; }
.breadcrum .pagewidth { text-align: right; color: #4D4D4D; text-transform: uppercase; }
.breadcrum a { color: #4D4D4D; text-decoration: none; padding: 0px 10px; }
section.paars .title { color: #FFFFFF; }
section.paars h1 { color: #3aaa35; text-transform: uppercase; }
section.paars h2 { color: #3aaa35; text-transform: uppercase; }
section.paars p { color: #FFF;  }
section.paars a { color: #FFF;  }

section.groen .title { color: #FFFFFF; }
section.groen h1 { color: #FFFFFF; text-transform: uppercase; }
section.groen h2 { color: #FFFFFF; text-transform: uppercase; }
section.groen p { color: #001e60;  }
section.groen a { color: #001e60;  }

section.wit .title { color: #3aaa35; }
section.wit h1 { color: #3aaa35; text-transform: uppercase; }
section.wit h2 { color: #3aaa35; text-transform: uppercase; }
section.wit p { color: #001e60;  }
section.wit a { color: #001e60;  }

section.team .row { margin-bottom: 0px; }
section.team .kol-3-1.right { text-align: right; }
section.team .kol-3-1 img { max-width: 100%; }

.button a { display: block; position: relative; z-index: 999; max-width: 300px; margin: 45px auto 0px; text-align: center; font-size: 20px; padding: 5px 0px 8px; text-decoration: none; border: 1px solid #001e60; color: #001e60; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
.button a:hover { background: #001e60; color: #FFF; }

section.groen .button a { border: 1px solid #FFF; color: #FFF; }
section.groen .button a:hover { background: #FFF; color: #3aaa35; }

section.paars .button a { border: 1px solid #FFF; color: #FFF; }
section.paars .button a:hover { background: #FFF; color: #001e60; }


.row { margin-bottom: 30px; }
.row:after,
.blocks:after {
visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;}
.blocks.team { text-align: center; }
.usp_image { text-align: center; height: 75px; margin-bottom: 20px; }
/* .usp_image { position: absolute; top: 0px; left: 0px; text-align: center; width: 50px; } */
.usp_image img { max-height: 100%;  }
.usp_content { text-align: center; }
/* .usp_content { text-align: left; margin-left: 40px; } */
.block2 { float: left; width: 50%; padding: 15px; }
.block2 img { max-width: 100%; }
.block2.team { padding: 15px 15px 30px; }

.block3 { float: left; width: 33.3%; padding: 15px; }
.block3 img { max-width: 100%; }
.block3.project { padding: 15px; }
.block3.project .back { display: table; }
.block3.project .back div { height: auto; width: auto; display:table-cell; padding: 30px; vertical-align: top; padding: 30px; text-align: left;  }
.block3.project .back a { color: inherit; }
.back.paars { background-color: #001e60 !important; color: #FFF;  }
.back.paars h1 { color: #3aaa35; font-size: 32px; line-height: 32px; margin-bottom: 20px; }
.back.groen { background-color: #3aaa35 !important; color: #001e60 !important;  }
.back.groen h1 { color: #FFF; font-size: 32px; line-height: 32px; margin-bottom: 20px; }

.block4 { width: 25%; padding: 15px; margin-left: -4px; display: inline-block; }
.block4 img { max-width: 100%; }
.block4.team { padding: 15px 15px 30px; }
.block4.project:hover img { box-shadow: 0px 0px 10px #CCC; }
.block4 img { width: 100%; }

.block5 { width: 20%; padding: 15px; margin-left: -4px; display: inline-block; }
.block5 img { max-width: 100%; }
.block5.team { padding: 15px 15px 30px; }
.img-zoom {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
.block5.project:hover img { box-shadow: 0px 0px 10px #CCC; }
.block5 img { width: 100%; }
.blocks div:not(.team) a div { width: 100%; height: 0px; padding-bottom:100%; }
.blocks .block-title { text-align: center; color: #FFF; font-size: 20px; line-height: 24px; margin-top: 10px;  }
.blocks div.team a div { width: 100%; height: 100%; }

.block6 { float: left; width: calc(100% / 6); padding: 15px; }
.block6 img { max-width: 100%; }
.block6.team { padding: 15px 15px 30px; }
.block6 img { width: 100%; }

.zoom {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
/*
.row .align-right { padding-right: 30px; }
.row .align-left { padding-left: 30px; }
 */

.dienst-icon-right { width: 25%; float: right;  }
.dienst-tekst-left { padding-right: calc(25% + 30px); }
.dienst-icon-left { width: 25%; float: left;  }
.dienst-tekst-right { padding-left: calc(25% + 30px); }
.content .dienstenicon { max-width: 250px; }
.zoomhover .icon { transition: all .2s ease-in-out; }
.zoomhover:hover .icon { transform: scale(1.2); }


.align-right { text-align: right; }
.align-left { text-align: left; }
.align-left .icon,
.align-right .icon { text-align: center; }
.icon img { max-width: 100%; }

.kol-2-1 { width: 50%; float: left; padding: 0px 15px; }
.kol-2-1.np { padding: 0px; }
.kol-3-1 { width: 33.3%; float: left; padding: 0px 15px; }
.kol-3-2 { width: 66.6%; float: left; padding: 0px 15px; }

.content { color: #001e60; }
.content img { max-width: 100%; height: auto; }
.kol-3-1 .back { margin-top: 15px; padding-top: 15px; color: #3aaa35; border-top: 1px solid #3aaa35; }
.kol-3-1 .back a { text-decoration: none; color: inherit; }
.content .paars { color: #001e60; }
.content .groen { color: #3aaa35; }
.light { font-weight: 400; }
.content h1 { font-size: 42px; line-height: 50px; color: #001e60;}

.flip-this {
	height: 0px;
	padding-bottom: 100%;
    width: 100%;
    cursor: pointer;
}

.flip-this img {
    width: 100%;
    height: 100%;
}

.flip-this .back {
    background: transparent;
    color: #FFFFFF;
    text-align: center;
}
.project .flip-this .back {
    z-index: 0!important;
}

img.img-left { float: left; margin: 0px 20px 20px 0px; }
img.img-center { display: block; margin: 20px auto; }
img.img-right { float: right; margin: 0px 0px 20px 20px; }


#map { position: relative;top: 0px;width:100%; height:450px; z-index: 99; }
.footer p { color: #FFF; }
.footer a { color: inherit; }
.footer p b, .footer p strong { color: #3aaa35; font-weight: 400; }
.footer h2 { font-weight: 400; color: #3aaa35; text-transform: uppercase; padding-bottom: 20px; }
.footer h2 b, .footer h2 strong { color: #FFF; font-weight: 400; }

.privacy { float: right; }
.privacy a { }

form { }
form.loginform input { background-color: #D7D4E6; border-radius: 0px; }
form.emailform input { background-color: #FFF; border-radius: 0px; }
form input.hidden { display: none; }
form input[type=text],form input[type=password] { width: 100%; padding: 10px; font-size: 16px; border: none; float: left; margin: 0px 0px 10px; font-family: 'texgyreadventorregular', sans-serif; color: #001e60; }
form input[type=submit] { width: 50%; padding: 10px; font-size: 16px; border: none; float: left; margin: 0px; font-family: 'texgyreadventorregular', sans-serif; background-color: #3aaa35; color: #FFF; padding: 10px; cursor: pointer; text-transform: uppercase; -webkit-appearance: none;}
form textarea { width: 100%; height: 150px; padding: 10px; font-size: 16px; border: none;  float: left; margin: 0px 0px 10px; border-radius: 0px; font-family: 'texgyreadventorregular', sans-serif; color: #001e60;}
.g-recaptcha { float: left; padding-bottom: 8px; }

::-webkit-input-placeholder {
	font-family: 'texgyreadventorregular', sans-serif;
	color: #001e60;
}
:-moz-placeholder {
	font-family: 'texgyreadventorregular', sans-serif;
	color: #001e60;
}
::-moz-placeholder {
	font-family: 'texgyreadventorregular', sans-serif;
	color: #001e60;
}
:-ms-input-placeholder {
	font-family: 'texgyreadventorregular', sans-serif;
	color: #001e60;
}

.message-error { padding: 30px 100px 30px 100px; text-align: center; font-weight: 700; margin: 0px 15px; background: #F00 url('../images/bg-error-message.png') no-repeat; background-position: 15px center; background-size: 60px 60px; color: #FFF;  }

/* Media max-width 1024px */
@media screen and (max-width: 1024px) {
	html, body { font-size: 15px; line-height: 20px; }

	h1 { font-size: 36px;  }
	h2 { font-size: 20px; line-height: 20px; }

	.bg-fixed { background-attachment: scroll; background-size: cover; background-position: center center; }

	.intro-tekst { padding: 30px 0px 30px; width: 50%; margin: 0px auto; }
	.intro h1 { font-size: 36px; line-height: 50px; font-weight: 700; }
	.intro h2 { font-size: 26px; line-height: 26px; padding-bottom: 40px; font-weight: 400; }
	.intro p { line-height: 25px; }
	.blocks.relaties .block5,
	.blocks.projecten .block5,
	.blocks .block5 { float: left; width: 25%; padding: 15px; display: block; }
	.blocks.relaties .block5:nth-child(n+9) { display: none; }
	.blocks.projecten .block5:nth-child(n+5) { display: none; }
	.block6 { float: left; width: calc(100% / 3); padding: 15px; }
	.block5.team { padding: 15px 15px 45px; }
	.block3.project .back h1 { font-size: 24px !important;  }
	.title { font-size: 36px; }

	#map { height:400px;}


}