/*
==  THEME DETAILS  ============================================================
    Theme Name: verpakkend.nl
	Theme URI: https://www.verpakkend.nl/
    Description: Stylesheet voor verpakkend.nl
    Version: 1.0
   	Author: Communicatiebureau Fenomediaal
	Author URI: https://www.fenomediaal.nl

===============================================================================
*/

/*---------------------------------------------- 
	0.1 Under Construction
------------------------------------------------*/
	#under-construction {
		position: relative;
		min-height: 100vh;
		height: calc(100vh);
		overflow: hidden;
	}

	#under-construction .overlay {
		background-color: rgba(0,0,0,0.8);
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	@media all and (max-width: 767px) {
		#under-construction .brand img {
			width: 75%;
		}
		#under-construction h1 {
			font-size: 1.75rem;
		}
	}

/*---------------------------------------------- 
	1.1 Basics
------------------------------------------------*/
	html {
  		font-size: 20px;
	}

	body {
     	font-family: 'PT Sans Caption', sans-serif;
		font-size: 0.9rem;
	  	line-height: 1.75rem;
		font-weight: 400;
		color: #FFF;
		background: #000; 
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
	}
	
	a, a:hover, .btn, .btn:hover , .transition {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		text-decoration:none;	
	}
	
	p , figure , blockquote , ul {
		margin: 0 !important;
	}

	a {
		color: #62A788; 
	}

	a:hover {
		color: #FFF;
	}

	button:focus ,
	:focus {
		outline: 0 !important;
	}
	
	h1, h2, h3, h4 {
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
	}

	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 2.5rem;
	}	

	h3 {
		font-size: 1.5rem;
	}

	h4 {
		font-size: 1.25rem;
	}

	.bg-cover {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.full-height {
		height: calc(100vh);
		min-height: 100vh;
		overflow: hidden;
	}

	.box-shadow {
		-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);
	}

	@media (min-width: 1400px) {
		.container {
			max-width: 1240px;
		}	
	}

	@media all and (max-width: 1800px) {
    	html {
			font-size: 16px;
		}
	}

	@media all and (max-width: 1200px) {
    	html {
			font-size: 15px;
		}
		body {
			font-size: 0.8rem;
	  		line-height: 1.5rem;
		}
	}

	@media all and (max-width: 767px) {
     	.full-height {
            min-height: inherit;
            height: auto !important;
            padding: 3rem 1.5rem;
        }
    }

/* Buttons -------------------------------------- */
	.btn-primary, 
	.btn-primary:active ,
	.btn-primary:focus {
		background: #62A788;
    	color: #FFF;
    	border: none;
	}
	
	.btn-primary:hover {
		background: #FFF;
		color: #62A788;
		border: none;
	}

	.btn {
		font-size: 1rem;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.2;
		padding: 0.75rem 2.75rem;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
	}

	.btn-lg {
		font-size: 1rem;
		padding: 0.9rem 1rem;
	}

    button:focus ,
	.btn:focus {
		outline: 0 !important;
		box-shadow: none !important;
	}

/* Animation -------------------------------------- */
	@media all and (min-width: 768px) {
		.fade-in-bottom {
			-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
			animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		}
	}

	@-webkit-keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}
	@keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}

/* Video container -------------------------------------- */
	.video-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
		height: 100%;
        overflow: hidden;
        z-index: -9;
    }

  	.video-container video {
   		min-width: 100%; 
        min-height: 100%; 
       	width: auto;
     	height: auto;
     	position: absolute;
     	top: 50%;
      	left: 50%;
       	transform: translate(-50%,-50%);
    }

/*---------------------------------------------- 
	1.2 Content Block 
------------------------------------------------*/
	.content-block p + p ,
	.content-block p + h2 ,
	.content-block p + h3 ,
	.content-block p + h4 ,
	.content-block ul + p ,
	.content-block ul + h3 {
		margin-top: 1.5rem !important;
	}

	.content-block h1 ,
	.content-block h2 {
		margin-bottom: 1.5rem;
	}

	.content-block h3 {
		font-size: 1.25rem;
		color: #3E69AF;
		line-height: 1.5rem;
	}

	.content-block blockquote {
		font-size: 1.2rem;
		color: #62A788;
		margin: 1.5rem 0 !important;
	}

	.content-block img.aligncenter {
		margin: 0 auto;
		 display: block;
	}

	.content-block .embed-responsive {
		margin: 1.5rem 0;
	}

/*---------------------------------------------- 
	1.3 Colors 
------------------------------------------------*/
	.bg-black {
		background: #000 !important;
	}

	.bg-white {
		background: #FFF !important;
	}

	.bg-green {
		background: #62A788 !important;
	}

/*---------------------------------------------- 
	1.4 Padding
------------------------------------------------*/
	.padding-section-bottom {
		padding-bottom: 5rem;
	}

	.padding-content {
		padding: 0 5rem;
	}

	@media all and (max-width: 1800px) {
		.padding-content {
			padding: 0 3rem;
		}
		.padding-section-bottom {
			padding-bottom: 7.5rem;
		}	
	}

	@media all and (max-width: 992px) {
		.padding-content {
			padding: 0;
		}
	}

	@media all and (max-width:  767px) {
		.padding-section-bottom {
			padding-bottom: 0rem;
		}	
	}

/*---------------------------------------------- 
	1.5 Fullpage
------------------------------------------------*/
	#fp-nav {
		right: 5rem !important;
		z-index: 8;
	}

	#fp-nav ul li {
		margin: 0;
		width: 14px !important;
		height: 14px !important;
	}

	#fp-nav ul li a span {
		background: #FFF;
		height: 14px !important;
		width: 14px !important;
		margin: 0 !important;
		left: 0;
		top: 0;
	}

	#fp-nav ul li a.active span {
		background: #62A788;
	}
		
	#fp-nav ul li + li {
		margin-top: 0.9rem;
	}

	@-webkit-keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}
	@keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}

	@media all and (max-width: 1500px) {
		#fp-nav {
			right: 2rem !important;
		}
	}

	@media all and (max-width:  767px) {
		.fp-tableCell {
			height: auto !important;
		}
	}

/*---------------------------------------------- 
	2.1 Header
------------------------------------------------*/
	#header {
		height: calc(100vh);
		min-height: 100vh;
		width: 8rem;
		z-index: 99;
		text-align: center;
	}

	#header .brand {
		position: absolute;
		top: 5rem;
		left: 3rem;
		width: 20rem;
		z-index: 99;
	}

	@media all and (max-width: 1500px) {
		#header {
			width: 7rem;	
		}
	}

	@media all and (max-width: 1200px) {
		#header .brand {
			top: 3rem;
		}
	}

	@media all and (max-width: 992px) {
		#header {
			height: 9rem;
			min-height: inherit;
			width: 100%;
		}
		#header .brand {
			top: 1.5rem;	
			left: 2rem;
			width: 20rem;
			z-index: 8;
		}
	}

	@media all and (max-width: 767px) {
		#header {
			height: 8rem;
		}
		#header .brand {
			left: 1rem;
			top: 1rem;
			width: 65%;
			max-width: 20rem;
		}
	}

/*---------------------------------------------- 
	2.2 Navigation
------------------------------------------------*/
	#navigation {
		position: absolute;
		bottom: 2rem;
		left: 0;
		right: 0;
	}

	#navigation a.menu-open {
		cursor: pointer;
		z-index: 999;
		position: relative;
		height: 24px;
	}

	#navigation .menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 20rem;
		overflow: auto;
		z-index: 9;
		background: #FFF;
	}

	#navigation #menu li a {
   	 	font-weight: 700;
		font-size: 2rem;
		line-height: 4rem;
		text-transform: uppercase;
		color: #8E8E93;
		padding: 0;
		background: none;
		position: relative;
		margin: 0;
	}

	#navigation #menu li a:hover ,
	#navigation #menu li a.active {
		color: #000;
	}

	@media all and (max-width: 1200px) {
		#navigation {
			bottom: 5rem;
		}
	}

	@media all and (max-width: 992px) {
		#navigation {
			position: absolute;
			height: 100%;
			bottom: inherit;
			right: 2rem;
			text-align: right !important;
		}
		#navigation .menu-open {
			top: 50%;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);
		}
		#navigation .menu-overlay {
			width: 100%;	
		}
	}

	@media all and (max-width: 767px) {
		#navigation {
			right: 1rem;	
		}
	}

/* Hamburger -------------------------------------- */
	.hamburger {
		font: inherit;
	  	display: inline-block;
	  	overflow: visible;
	  	margin: 0;
	  	padding: 0;
	  	cursor: pointer;
	  	transition-timing-function: linear;
	  	transition-duration: .15s;
	  	transition-property: opacity,filter;
	  	text-transform: none;
	  	color: inherit;
	  	border: 0;
	  	background-color: transparent;
	}

	.hamburger-box {
	  	position: relative;
	  	display: inline-block;
	  	width: 40px;
	  	height: 24px;
	}

	.hamburger-box {
	 	position:relative;
	 	display:inline-block;
	 	width:40px;
	 	height:24px
	}
	.hamburger-inner {
	 	top:50%;
	 	display:block;
	 	margin-top:-2px
	}
	.hamburger-inner,
	.hamburger-inner:after,
	.hamburger-inner:before {
		position:absolute;
		width: 40px;
	 	height: 4px;
	 	transition-timing-function:ease;
	 	transition-duration:.15s;
	 	transition-property:transform;
	 	border-radius: 0;
	 	background-color: #1D1D1B;
	}
	.hamburger-inner:after,
	.hamburger-inner:before {
	 	display:block;
	 	content:""
	}
	.hamburger-inner:before {
		top:-10px
	}
	.hamburger-inner:after {
	 	bottom:-10px
	}

	.hamburger--spin .hamburger-inner {
	 	transition-timing-function:cubic-bezier(.55,.055,.675,.19);
	 	transition-duration:.22s
	}
	.hamburger--spin .hamburger-inner:before {
	 	transition:top .1s ease-in .25s,opacity .1s ease-in
	}
	.hamburger--spin .hamburger-inner:after {
	 	transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
	}
	.is-active .hamburger--spin .hamburger-inner {
	 	transition-delay:.12s;
	 	transition-timing-function:cubic-bezier(.215,.61,.355,1);
	 	transform:rotate(225deg)
	}
	.is-active .hamburger--spin .hamburger-inner:before {
	 	top:0;
	 	transition:top .1s ease-out,opacity .1s ease-out .12s;
	 	opacity:0
	}
	.is-active .hamburger--spin .hamburger-inner:after {
	 	bottom:0;
	 	transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
	 	transform:rotate(-90deg)
	}

/*---------------------------------------------- 
	3.1 Frontpage
------------------------------------------------*/
	@media all and (min-width: 768px) {
		#fullpage .section .content-block {
			opacity: 0;
		}
		#fullpage .section.active .content-block {
			-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
			animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
		}
	}

	@media (min-width: 1500px) {
		#fullpage .section .content-block {
			width: 60% !important;
		}
	}

	@media (min-width: 2000px) {
		#fullpage .section .content-block {
			width: 40% !important;
		}
	}

/*---------------------------------------------- 
	3.1 Frontpage Mobile
------------------------------------------------*/
	#frontpage-mobile {
		padding-top: 7rem;
		padding-bottom: 2.5rem;
	}

/*---------------------------------------------- 
	4.1 Page Over
------------------------------------------------*/
	@media (min-width: 1500px) {
		#page-content.over .content-block {
			width: 60% !important;
		}
	}

	@media (min-width: 2000px) {
		#page-content.over .content-block {
			width: 40% !important;
		}
	}

	@media all and (max-width: 992px) {
		#page-content.over {
			padding-top: 9rem;
			padding-bottom: 5rem;
		}
	}


/*---------------------------------------------- 
	4.2 Page Contact
------------------------------------------------*/
	form .form-group {
		width: 100%;
		margin-bottom: 1.75rem;
	}
	
	form .form-control {
    	background-color: #F2F2F2 !important;
		width: 100%;
		height: 60px;
    	font-size: 0.8rem;
    	line-height: 1.5;
    	background-image: none;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
    	border: none;
		margin: 0;
		box-shadow: none;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
	}
	
	form textarea.form-control {
		height: auto;
		padding: 1rem 1.5rem;
	}
	
	form .btn:hover {
		background: #000;
		color: #FFF;
	}
		
	.wpcf7-mail-sent-ok ,
	.wpcf7-validation-errors {
		border: none !important;
	}
	
	.wpcf7-not-valid-tip ,
	.wpcf7-response-output {
		font-size: 0.8rem;
		color: #000 !important;
		margin: 0;
		padding: 0 !important;
		border: none !important;
	}

	.grecaptcha-badge {
		display: none !important;
		visibility: hidden !important;
	}

	@media (max-width: 1500px) {
		form .form-group {
			width: 100%;
			margin-bottom: 1.5rem;
		}
		form .form-control {
			height: 50px;	
		}
	}

	@media all and (max-width: 1200px) {
		#page-content.contact .formulier {
			padding: 0 1.5rem 2.5rem 1rem;
		}
	}

	@media all and (max-width: 992px) {
		#page-content.contact {
			background: #000 !important;	
			min-height: inherit;
            height: auto !important;
            padding: 10rem 1.5rem 0 1.5rem;
		}
		#page-content.contact .formulier {
			padding: 2.5rem 0;
		}
		.wpcf7-not-valid-tip ,
		.wpcf7-response-output {
			color: #FFF !important;
		}
	}

	@media (min-width: 1800px) {
		#page-content.contact .formulier {
			align-items: center!important
		}
	}