/* ====== ALGEMENE STIJLEN ====== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Limelight', cursive;
}

body {
    font-family: 'Raleway', sans-serif;
}

#navHoofdMenu {
    font-weight: 700;
    text-transform: uppercase;
}

#navHoofdMenu .navbar-item {
    color: #333;
}

.column.tf_center {
    text-align: center;
}

.column.tf_center h3.title {
    margin-bottom: 2rem;
}

p {
    margin-bottom: 0.5rem;
}

a.tf_url {
    color: rgba(246,161,48,1);
}

a.tf_url:hover {
    color: rgba(130,167,146,1);
}

/* ====== BUTTONS ====== */

.button.is-white.tf_button {
    margin-top: 30px;
    background-color: rgba(130,167,146,0.95);
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.button.is-white.tf_button:hover {
    background-color: rgba(246,161,48,0.95);
}

/* ====== HOOVER MENU'S AANPASSEN ====== */

a.navbar-item.tf_nav:hover {
    background-color: transparent;
    color: #F6A130;
}

#navHoofdMenu .navbar-item.tf_nav_current {
    color: #F6A130;    
}

#navHoofdMenu a.navbar-item:hover, .navbar-link:hover {
    background-color: transparent;
    color: #F6A130;
}

/* ====== FONTSIZE MENU RESPONSIVE MAKEN ====== */

.navbar-end {
    font-size: calc(0.6rem + 0.5vw);
}

/* ====== FIXED NAV ====== */

.tf_fixed_nav {
    position: absolute;
    z-index: 100000;
}

.navbar {
    position: fixed;
    width: 100%;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.2);
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
}

/* ====== HOOGTE NAVBAR FLEXIBILISEREN ====== */

.navbar-item.tf_nav img {
    max-height: none;
}

/* ====== STYLING HAMBURGER AANPASSEN ====== */

.burger.tf_burger {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.button.tf_burger {
    border: none;
    height: 2rem;
    width: 2rem;
    margin-right: 1rem;
    background: #333;
    color: #fff;
}

.button:focus:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(246,161,48,1);
}

/* ====== STYLING UITKLAPMENU AANPASSEN ====== */

@media screen and (max-width: 1023px) {
#navHoofdMenu.navbar-menu.is-active {
    display: block;
    position: absolute;
    right: 1rem;
    z-index: 99999;
    text-align: right;
    width: calc( 100% - 2rem );
    background: rgba(255,255,255,0.95);
    }
}

/* ====== HEROSECTIES ====== */

.hero {
    background-size: cover;
    background-position:center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: calc(3rem + 35px);
}

.tf_welkom {
    background-image: url('/https/2function.nl/portfolio/images/bg_welkom_home.jpg');
    background-attachment: scroll;
}

.tf_webdesign {
    background-image: url('/https/2function.nl/portfolio/webdesign/images/bg_webdesign.jpg');   
}

.tf_redactie {
    background-image: url('/https/2function.nl/portfolio/redactie/images/bg_redactie.jpg');   
}

.tf_portfolio {
    background-image: url('/https/2function.nl/portfolio/projecten/images/bg_portfolio.jpg');
}

.tf_contact {
    background-image: url('/https/2function.nl/portfolio/contact/images/bg_contact.jpg');
}

.tf_verdwaald {
    background-image: url('/https/2function.nl/portfolio/verdwaald/images/bg_verdwaald.jpg');
}

.tf_bedankt {
    background-image: url('/https/2function.nl/portfolio/bedankt/images/bg_bedankt.jpg');
}

.hero h1 {
    font-size: calc( 2em + 5vw);
    color: #fff;
}

.hero h2 {
    font-family: 'Raleway', sans-serif;
    font-size: calc( 1.2em + 2vw);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.hero p {
    width: 100%;
    max-width: 480px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 auto;
}

/* ====== PORTFOLIOSECTIE HOME ====== */

.section.tf_portfolio_home {
    background:#00011E;
    padding: 1.5rem 0;
}

@supports ((display: -ms-grid) or (display: grid)) {

.tf_grid {
	display: -ms-grid;
	display: grid;
	width: 100%;
	height: calc(60vw - 6em);
	grid-auto-rows: calc((calc(60vw - 6em) / 35) - 10px);
	grid-auto-columns: calc((calc(100% - 6em) / 30) - 10px);
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	grid-gap: 10px;
    margin: 0 auto;
}

.tf_grid_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	position: relative;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
    color: #fff;
    background-color: transparent;
    overflow: hidden;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.tf_grid .tf_grid_item:first-child { grid-area: 12 / 1 / 20 / 5; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_bedrijfsanalyse.jpg);}
.tf_grid .tf_grid_item:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_massierdiervoeders.jpg);}
.tf_grid .tf_grid_item:nth-child(3) { grid-area: 8 / 5 / 22 / 15; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_run2function.jpg); }
.tf_grid .tf_grid_item:nth-child(4) { grid-area: 22 / 10 / 31 / 15; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_mzpcdereest.jpg); }
.tf_grid .tf_grid_item:nth-child(5) { grid-area: 2 / 11 / 8 / 15; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_cityswimmeppel.jpg); }
.tf_grid .tf_grid_item:nth-child(6) { grid-area: 17 / 15 / 24 / 20; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_kroesbootbouwers.jpg); }
.tf_grid .tf_grid_item:nth-child(7) { grid-area: 9 / 15 / 17 / 23; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_kroesglasblazerij.jpg); }
.tf_grid .tf_grid_item:nth-child(8) { grid-area: 2 / 18 / 9 / 23; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_happy2bme.jpg); }
.tf_grid .tf_grid_item:nth-child(9) { grid-area: 17 / 20 / 22 / 26; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_welzijndewolden.jpg); }
.tf_grid .tf_grid_item:nth-child(10) { grid-area: 22 / 20 / 28 / 23; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_opslagdebult.jpg); }
.tf_grid .tf_grid_item:nth-child(11) { grid-area: 1 / 23 / 11 / 26; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_kostuumhuiskalf.jpg); }
.tf_grid .tf_grid_item:nth-child(12) { grid-area: 11 / 23 / 17	/ 30; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_vakantiehuisluurk.jpg); }
.tf_grid .tf_grid_item:nth-child(13) { grid-area: 17 / 26 / 25 / 29; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_zeegersloot.jpg); }
.tf_grid .tf_grid_item:nth-child(14) { grid-area: 1 / 15 / 9 / 18; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_publish.jpg);}
.tf_grid .tf_grid_item:nth-child(15) { grid-area: 4 / 26 / 11 / 29; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_dekleinewitte.jpg);}
.tf_grid .tf_grid_item:nth-child(16) { grid-area: 22 / 23 / 31 / 26; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_terramannenmode.jpg);}
.tf_grid .tf_grid_item:nth-child(17) { grid-area: 3 / 6 / 8 / 11; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_locatiefotograaf.jpg);}
.tf_grid .tf_grid_item:nth-child(18) { grid-area: 24 / 15 / 30 / 20; background-image: url(/https/2function.nl/portfolio/images/bg_portfolio_binbalance.jpg);}
    
/* ====== LINK NAAR PORTFOLIO ====== */
    
a.tf_portfolio_info {
    display: block;
    height: 100%;
    width: 100%;
}

.tf_grid .tf_grid_item:nth-child(n):hover {
    box-shadow: inset 0px 0px 6px 2px rgba(0,0,0,.9);
}

/* ====== RESPONSIVE MAKEN ====== */

@media only screen and (max-width: 767px) {
    .tf_grid {
		height: auto;
		top: auto !important;
		width: 100%;
		left: auto !important;
		padding: 0 2em;
		-ms-grid-columns: (minmax(150px, 1fr))[auto-fill];
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-auto-rows: auto !important;
		grid-auto-columns: auto !important;
		grid-gap: 8px;
	}

	.tf_grid_item {
		min-height: 150px;
		grid-area: auto !important;
	}
}
} /* ====== EINDE CSS VOOR BROWSERS DIE GRID ONDERSTEUNEN   */ 

@supports not ((display: -ms-grid) or (display: grid)) { 
 
    .tf_grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .tf_grid_item {
        min-width: 150px;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        background-color: #BFBFBF; 
    }
}

/* ====== FOOTER ====== */

.footer.tf_footer {
    background: #89c4bd;
    background: -webkit-linear-gradient(top, #89c4bd 0%,#609096 100%);
    background: linear-gradient(to bottom, #89c4bd 0%,#609096 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89c4bd', endColorstr='#609096',GradientType=0 );
    font-weight: 600;
    color: #333;
    padding: 3rem 1.5rem 0 1.5rem;
}

.footer.tf_footer h4 {
    font-size: 120%;
}

.footer.tf_footer img {
    margin-top: 20px;
}

.footer.tf_footer img:hover {
-webkit-filter: invert(90%);
filter: invert(90%);
}

a.tf_widget {
    line-height: 3;
    padding: 0.25rem .75rem;
    border: 2px solid #333;
    border-radius: 3px;
}

a.tf_link_footer {
    color: #333;
}

a.tf_link_footer:hover, a.tf_link_footer:hover:before {
    color: #fff;
}

.container.tf_footer_container {
    padding-bottom: 3rem;
}

/* ====== COPYRIGHT FOOTER ====== */

.tf_copyright {
    padding: 20px 1.5rem;
    background:#324C4F;
    color: #89C4BD;
    font-weight: 700;
}

span.tf_footer_right {
    float: right;
}

/* ====== HOVER CTA PORTFOLIO ====== */

.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	max-width: 1000px;
	list-style: none;
}

/* Common style */
.grid figure {
	position: relative;
	overflow: hidden;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
    box-shadow: 6px 8px 16px rgba(191,191,191,0.6), 4px 4px 8px rgba(0,0,0,0.2);
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 1;
}

.grid figure figcaption {
	padding: 2em;
	color: #333;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h4 {
	font-weight: 700;
    color: #333;
}

.grid figure h4 span {
	font-weight: 800;
}

.grid figure h4,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
    font-weight: 700;
}

figure.effect-apollo {
	background: #A78582;
}

figure.effect-apollo img {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 110%;
	background: rgba(255,255,255,0.6);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #333;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h4 {
	text-align: left;
}

figure.effect-apollo:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/* ====== TILES & BOX ====== */

.tf_box p {
    font-weight: normal;
    color: #363636;
    margin-bottom: 0.5rem;
}

figure.tf_box_headerimage {
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
}

figure.tf_box_footerimage {
    margin: 1.25rem -1.25rem -1.25rem -1.25rem;
}

.box.tf_footerbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

figure.tf_box_headerimage IMG {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

figure.tf_box_footerimage IMG {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* ====== PROJECTENGRID ====== */

#projecten .column {
    min-width: 200px;
}

#projecten .column.tf_portfolio_title {
    max-width: none;
    text-align: center;
}

.column.tf_portfolio_title h3 {
font-size: calc( 1.2rem + 1vw);
    margin-bottom: 2rem;
}

.tf_card article {
    text-align: center;
    color: #363636;
}

.tf_card article h4 {
    font-size: calc(0.6rem + 0.4vw);
    padding-top: 0.5rem;
}

.tf_card article p {
    font-size: 0.9rem;
}

.tf_card img {
    transition: 0.4s all ease-out;
}

.tf_card img:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}

@media only screen and (max-width: 423px) {
    #projecten .column {max-width:100%;} 
}

@media only screen and (min-width: 424px) and (max-width: 623px) {
    #projecten .column {max-width:50%;} 
}

@media only screen and (min-width: 624px) and (max-width: 823px) {
    #projecten .column {max-width:33.3333333%;} 
}

@media only screen and (min-width: 824px) and (max-width: 1215px) {
    #projecten .column {max-width:25%;} 
}

@media only screen and (min-width: 1216px) and (max-width: 1407px) {
    #projecten .column {max-width:20%;} 
}

@media only screen and (min-width: 1408px) {
    #projecten .column {max-width:300px;} 
}

/* ====== HEROSECTIES PORTFOLIO ====== */

.tf_publish {
    background-image: url(/https/2function.nl/portfolio/projecten/publish/images/publish_bgsoft.jpg);
}

.tf_locatiefotograaf {
    background-image: url(/https/2function.nl/portfolio/projecten/locatiefotograaf/images/locatiefotograaf_bgsoft.jpg);
}

.tf_kleinewitte {
    background-image: url(/https/2function.nl/portfolio/projecten/kleine-witte/images/kleine_witte_bgsoft.jpg);
}

.tf_wzdw {
    background-image: url(/https/2function.nl/portfolio/projecten/welzijndewolden/images/wzdw_bgsoft.jpg);
}

.tf_massier {
    background-image: url(/https/2function.nl/portfolio/projecten/massier/images/massier-diervoeders-bgsoft.jpg);
}

.tf_terramannenmode {
    background-image: url(/https/2function.nl/portfolio/projecten/terra-mannenmode/images/terra-mannenmode-bgsoft.jpg);
}

.tf_cloudtools {
    background-image: url(/https/2function.nl/portfolio/projecten/cloudtools/images/cloudtools_bgsoft.jpg);
}

.tf_kroesglas {
    background-image: url(/https/2function.nl/portfolio/projecten/kroes-glasblazerij/images/kroesglasblazerij_bgsoft.jpg);
}

.tf_binbalance {
    background-image: url(/https/2function.nl/portfolio/projecten/binbalance/images/binbalance_bgsoft.jpg);
}

.tf_cityswim {
    background-image: url(/https/2function.nl/portfolio/projecten/cityswim-meppel/images/cityswimmeppel_bgsoft.jpg);
}

.tf_run2function {
    background-image: url(/https/2function.nl/portfolio/projecten/run2function/images/run2function_bgsoft.jpg);
}

.tf_luurk {
    background-image: url(/https/2function.nl/portfolio/projecten/luurk/images/luurk_bgsoft.jpg);
}

.tf_zeegersloot {
    background-image: url(/https/2function.nl/portfolio/projecten/zeegersloot/images/zeegersloot_bgsoft.jpg);
}

.tf_happy2bme {
    background-image: url(/https/2function.nl/portfolio/projecten/happy2bme/images/happy2bme_bgsoft.jpg);
}

.tf_kroesbootbouwers {
    background-image: url(/https/2function.nl/portfolio/projecten/kroes-bootbouwers/images/kroesbootbouwers_bgsoft.jpg);
}

.tf_mzpcdereest {
    background-image: url(/https/2function.nl/portfolio/projecten/mzpcdereest/images/mzpcdereest_bgsoft.jpg);
}

.tf_opslagdebult {
    background-image: url(/https/2function.nl/portfolio/projecten/opslagdebult/images/opslagdebult_bgsoft.jpg);
}

.tf_gvtk {
    background-image: url(/https/2function.nl/portfolio/projecten/gvtk/images/gvtk_bgsoft.jpg);
}

.tf_bedrijfsanalyse {
    background-image: url(/https/2function.nl/portfolio/projecten/bedrijfsanalyse/images/bedrijfsanalyse_bgsoft.jpg);
}

.tf_kalf {
    background-image: url(/https/2function.nl/portfolio/projecten/kostuumhuis-kalf/images/kalf_bgsoft.jpg);
}

.tf_hero h1, .tf_hero h2, .tf_hero p {
    color: #333;
}

/* ====== MODALS ====== */

#tf_modal figure {
    box-shadow: 2px 4px 8px rgba(10, 10, 10, 0.3), 0px 1px 2px 1px rgba(10, 10, 10, 0.2);    
}

.button.is-white.tf_projecthero.tf_button {
    border-color: #333;
    margin-top: 1rem;
}

.modal-close.is-large {
    top: calc(10vh + 35px);
    background-color: rgba(246,161,48,0.9);
}

.modal-content {
    top:35px;
}

.modal-button.tf_button img {
    transition: 0.4s all ease-out;
}

.modal-button.tf_button img:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}

/* ====== PROJECTINFO ====== */

.tf_project_title h1.title {
    font-size: calc( 1.5rem + 3vw);
    margin-bottom: 2rem;
}

.tf_project_title h2.subtitle {
    font-size: calc( 0.8rem + 1.6vw);
    margin-bottom: 0.5rem;
}

#projectinfo h4 {
    margin-bottom: 0.5rem;
}

#projectinfo .progress.is-danger::-webkit-progress-value {
  background-color: rgba(246,161,48,1);
}

#projectinfo .progress.is-danger::-moz-progress-bar {
  background-color: rgba(246,161,48,1);
}

.breadcrumb.tf_breadcrumb a {
    color: #333;
    transition: 0.4s all easy-out;
}

.breadcrumb.tf_breadcrumb a:hover {
    color: rgba(246,161,48,1);
}

.breadcrumb.tf_breadcrumb li + li::before {
    color: #333;
    content: "\003e";
}

.breadcrumb.tf_breadcrumb li.is-active a {
    font-weight: 900;
    color: rgba(246,161,48,1);
    pointer-events: auto;
    cursor: pointer;
}

/* ====== CONTACTINFO ====== */

a.tf_contact_url {
    color: #333;
}

a.tf_contact_url:hover {
    color: #F6A130;
}

/* ====== CONTACTFORMULIER ====== */

.field.tf_honing {
    display: none;
}

.input:focus, .textarea:focus {
    border: 2px solid #F6A130;
    box-shadow: none;
}

.button.is-black {
    transition: all 0.3s;
}

.button.is-black:hover {
    background: #F6A130;
}

.button.is-black:focus:not(:active) {
    box-shadow: none;    
}