/*   
Theme Name: C23
Theme URI: https://fruto.nl
Description: Maatwerk thema naarenergielabelc.nl
Author: Fruto internet
Author URI: https://fruto.nl
Version: 1.0
Text Domain: c23
*/

@import url('https://fonts.googleapis.com/css?family=Amaranth:400,400i,700,700i');

::selection {
	background:#FC12A3;
	color:#fff;
}

body {
	font-family:'Amaranth';
	overflow-y: scroll;
}

h1 {
	font-size:44px;
}

h2 {
	font-size:36px;
}

hr {
	margin-bottom:15px;
	margin-top:0;
}

footer {
	background:#fff;
	padding:50px 0;
}

.fullheight ul {
	color:#fff;
	font-size:18px;
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
}

.fullheight ul li {
	text-align:left;
	padding-left:75px;
	height:50px;
}

.fullheight ul li:before {
	content:'';
	display:block;
	background:url('images/x.png') no-repeat;
	width:36px;
	height:50px;
	left:40px;
	margin-top:7px;
	position:absolute;
	background-size:contain;
}

.right h5 {
	color:#fff;
	font-size:16px;
	margin-top:50px;
	font-weight:400;
	padding:0px;
	width:100%;
	text-align:center;
}
.right #form h5 {
	color:#FC12A3;
}
.right {
	background:rgba(0,0,0,0.3);
	color:#fff !important;
	font-size:16px;
	position:relative;
	text-align:center;
	box-sizing:border-box;
}
.right p {
	text-align:left;
}
table {
	text-align:left;
}
.photo .right p {
	color:#000 !important;
}

.right a {
	color:#FC12A3;
}

.right .fa {
	color:#FC12A3;	
}

.right h3 {
	font-size:18px;
	color:#FC12A3;
}

.right h4 {
	color:#000;
	font-size:18px;
	background:url('images/element.png') no-repeat center bottom;
	background-size:120px;
	padding-bottom:60px;
	margin-bottom:25px;
}

.white {
	background:#fff;
	color:#6e6e6e;
	padding:40px 50px;
	width:100%;
}

.white label {
	width:150px;
}

.white .table {
	text-align:left;
	margin-bottom:0;
}

h3 + .white, h3 + .light-green {
	margin-top:40px;
}

.heading {
	height:250px;
	box-sizing:border-box;
	background:rgba(173, 234, 3, 0.4);
	position:absolute;
	width:100%;
}

.heading h1 {
	margin-top:0;
}

.headings {
	height:250px;
}

.light-green {
	background:#e7fcc4;
	color:#000;
	padding:40px 50px;
	width:100%;
	transition:all 1s ease;
}

.dark-green {
	background:#daf79b;
	padding:25px 50px;
	width:100%;
	margin-bottom:25px;
}

.vertical-align {
	display:flex;
	align-items:center;
	justify-content: center;
    flex-flow: column wrap;
    align-content: stretch;
	-webkit-align-items:center;
	-webkit-justify-content: center;
    -webkit-flex-flow: column wrap;
    -webkit-align-content: stretch;
}

.navbar-inverse .navbar-toggle {
	border-color: #fff;
}

.nf-form-fields-required {
	margin-bottom:0px;
	color:#3e3e3e;
}

.nf-error-wrap {
	display:none;
}

.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
	padding:10px 15px;
	font-size:14px;
	border:1px solid #c1c1c1;
	color:#3e3e3e !important;
}

.label-right .nf-field-label {
	text-align:left;
	margin-bottom:10px;
}

.label-right .nf-field-label label {
	width:100% !important;
	cursor:pointer !important;
}

.nf-field-element textarea {
	height:100px !important;
}

.nf-field-element input:focus, .nf-field-element select:focus, .nf-field-element textarea:focus {
	background:#e7fcc4;
}

.nf-field-container {
	margin-bottom:5px !important;
}

.nf-field-container ::placeholder {
	font-size:14px !important;
	text-align:left !important;
}


.navbar-brand {
	background:url('images/logo.png') center no-repeat;
	background-size:auto 65px;
	width:250px;
	height:100px;
	margin-left:10px !important;
    background-position: left;
}

.navbar {
	background:#fff;
	border:0;
	color:#333;
	box-shadow:0px 0px 25px 0px #5e5e5e;
}
.menu {
	list-style:none;
	padding:0;
	margin:0;
	margin-top:15px;
}
.menu li {
	display:inline-block;
}
.menu>li>a {
	color:#333 !important;
	text-shadow:none !important;
	line-height:65px;
	font-weight: normal;
	font-size: 21px;
	padding:15px 30px;
	transition: all 1s ease;
}

.menu>.active>a, .menu>li:hover>a, .menu>li>a:focus, .menu>li>a:active {
	background:none !important;
	box-shadow:none !important;
	color:#FC12A3 !important;
	text-decoration:none;
}

.row.center {
	text-align: center;
	margin: 20px auto;
}

.row h2 {
	margin-bottom:30px;
}

.row.center h1 {
	margin-bottom:30px;
}

.row.center p {
	margin:25px auto;
	width:100%;
	max-width:550px;
	font-size:18px;
	line-height:26px;
}

#energielabel {
	margin-bottom:0px;
}

#energielabel input[type="text"] {
	border:1px solid #FC12A3;
	font-size:14px;
	padding:5px 10px;
	padding-top:5px;
	width:75px;
	text-align:center;
	margin:0 5px;
	transition: all 1s ease;
	color:#3e3e3e;
	text-transform:none;
}

#energielabel input[type="text"].small {
	width:70px;
}

select {
	background:#e7fcc4;
	border:1px solid #FC12A3;
	font-size:16px;
	padding:5px 10px;
	width:100%;
	margin-bottom:15px;
}

.btn, .nf-element[type="button"] {
	background: rgba(252, 18, 163, 0.8);
	color:#fff !important;
	font-size:14px;
	box-sizing:border-box;
	text-align:left;
	width:180px !important;
	border:0px solid rgba(252, 18, 163, 0.8) !important;
	transition: all 1s ease;
	margin-top:25px;
	border-radius:0;
	cursor: pointer;
	text-align:center;
	-webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
	padding:8px 20px 8px 20px !important;
}

.btn:hover, .nf-element[type="button"]:hover {
	color:#fff;
}

.btn:focus, .nf-element[type="button"]:focus {
	background:rgba(252, 18, 163, 0.8);
	border:3px solid rgba(252, 18, 163, 0.8);
}

.btn-triangle {
	text-align:left;
	width:300px !important;
	font-size:20px;
}

.right .btn, .nf-element[type="button"] {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	padding:40px 15px !important;
	text-align:left;
	width:120px !important;
}
.right .btn:hover, .nf-element[type="button"]:hover {
	background: rgba(0, 0, 0, 0.8);
}

#result {
	font-size:18px;
	line-height:32px;
}

#result .fa {
	color:#fff;
}

#result .col-md-6 {
	text-align:left;
}

#result .right {
	text-align:right;
	font-weight:bold;
}

::placeholder {
	font-size:14px;
	text-align:center;
}

.fullheight {
	min-height:calc(100vh - 100px) !important;
	color:#fff;
	font-size:16px;
	line-height:26px;
	box-sizing:border-box;
}

.fullheight h1 {
	color:#fff;
	text-align:center;
}

.photo {
	min-height:calc(100vh - 100px) !important;
	background-size: cover !important;
	position:relative;
	background-attachment:fixed !important;
	transition:all 1s ease;
	-webkit-transform: translate3d(0,0,0);
	margin-top:100px;
}

.ios .photo {
	background-attachment:scroll !important;
}

.photo p {
	margin:25px auto;
	font-size:17px;
	line-height:24px;
	font-weight:normal;
	color:#fff;
	text-align:center;
}

.home .photo p {
	background:rgba(0,0,0,0.3);
	padding:35px;
	max-width:550px;
	text-align:center;
}

.text {
	padding:25px;
}

.text p {
	font-size:16px;
	margin:10px auto;
}

.photo .triangle {
	width:100%;
	background-color: rgba(221, 255, 0, 0.4);
	-webkit-clip-path: polygon(0 30%, 0% 100%, 100% 100%);
	clip-path: polygon(0 30%, 0% 100%, 100% 100%);
	z-index:3;
	height:100%;
	position: absolute;
	left: 0;
	text-align: center;
	transition:all 1s ease;
}

.photo h2 {
	font-size:30px;
	text-align:center;
	width:100%;
	font-weight:400;
	color:rgba(255,255,255,0.8);
}

.home .photo h2 {

}

.result p {
	margin:25px auto;
	width:100%;
	max-width:550px;
	font-size:18px;
	line-height:32px;
}

#result {
	width:100%;
	z-index:3;
	height:100%;
	position: absolute;
	left: 0;
	text-align: center;
	font-size:32px;
	color:#fff;
	box-sizing: border-box;
	padding-top:15%;
	font-size:32px;
	transition:all 1s ease;
	display:none;
}

#result.active {
	background-color: rgba(151, 211, 91, 0.5);
}

.triangle-yellow {
	background: #fbfee9;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0% 50%);
	clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0% 50%);
	padding:25px 0 100px 0;
}

#energielabel #loader {
	display:none;
	margin-top:20px;
}

@media only screen and (max-width : 1024px), screen and (max-height : 1000px) {
	

	.photo h2 {
		font-size:30px;
		margin-bottom:15px;
	}
	.elc {
		height:80px;
	}
	.right {
		font-size:14px !important;
	}
	.white, .light-green, .dark-green {
		padding:25px 50px;
	}
	.right h5 {
		font-size:14px;
		display:block;
	}
	#energielabel input[type="text"] {
		padding:5px;
	}
	.right h3 {
		padding-top:0px;
	}
	h3 + .white, h3 + .light-green {
		margin-top:10px;
	}
	.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
		padding:5px 15px !important;
		font-size:14px !important;
	}
	.nf-field-container ::placeholder {
		font-size:14px !important;
	}
	ul li {
		font-size:14px;
		height:30px;
	}
	#ninja_forms_required_items, .nf-field-container {
		margin-bottom:5px !important;
	}
	h1 {
		font-size:30px;
	}
	.fullheight {
		height:auto !important;
		min-height:calc(100vh - 100px) !important;
	}
	.col-md-6 .fullheight {
		padding-top:0px;
		padding-bottom:0px;
	}
	.photo {
		height: auto !important;
	}
}

@media only screen and (max-width : 480px) {
	
	.navbar {
		padding: 0 20px;
	}
	.menu li {
		width:100%;
		display:block;
	}
	#navbar {
		width: 100%;
		float:none !important;
		border:0 !important;
		margin:0;
		height:200px;
	}
	.navbar-toggle {
		top:25px;
		margin-right:0;
		background-color:#FC12A3;
	}
	.navbar-nav>li>a {
		color:#333 !important;
		text-shadow:none !important;
		line-height:21px !important;
		margin:10px 0;
		font-weight: normal;
		font-size: 21px;
		padding:15px 20px;
	}
	h1 {
		font-size:30px;
	}
	.btn {
		max-width:100%;
	}
	.fullheight {
		height:auto !important;
		min-height:auto !important;
	}
	.col-md-6 .fullheight {
		padding-top:50px;
		padding-bottom:50px;
	}
	.vertical-align {
		display:flex;
		text-align:center;
	}
	.headings {
		display:flex;
	}
	.col-md-1 {
		display:none;
	}
	.col-md-5 {
		padding:0;
	}
	.photo {
		height: auto !important;
	}
	.fullheight ul li {
		padding-left:50px;
		height:40px;
		line-height:22px;
	}
	.fullheight ul li:before {
		left:20px;
	}
}