@charset "UTF-8";
/* CSS Document */

/* Breakpoints

992px, 768px, 600px, 480px, 380px

*/

html,
body {
  height: 100%;
	width:100%;
  /* The html and body elements cannot have any padding or margin. */
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height:1.7;
  color:#fff;
  background-color: #000;
background: #000;}

body.disableScroll {
	overflow: hidden;
}
 
::selection { background: #3dc3c5; color: #fff; } /* Safari 3.1+, Opera 9.5+, Chrome 2+ */
::-moz-selection { background: #3dc3c5; color: #fff; } /* Mozilla Firefox */

img{border:none;}
img a {border:none;}
a img{border:none; }
img a:hover{border:none;}

a:focus {
outline: none;
}

.img-center{ margin:0 auto; display:block;}
.clear{clear:both;}
.margin-top-130px{width:1px; height:130px;}
.margin-top-100px{width:1px; height:100px;}
.margin-top-80px{width:1px; height:80px;}
.margin-top-60px{width:1px; height:60px;}
.margin-top-50px{width:1px; height:50px;}
.margin-top-40px{width:1px; height:40px;}
.margin-top-30px{width:1px; height:30px;}
.margin-top-20px{width:1px; height:20px;}
.margin-top-10px{width:1px; height:10px;}

.clearboth{clear: both;}
	 
/********** Fonts **********/

p{margin-bottom:12pt;font-size: 11pt;}

p a,ul a{
  color: #fff;
  text-decoration:underline;
  cursor: pointer;
-webkit-transition: color ease-in-out 0.15s; transition: color ease-in-out 0.15s;
}



p a:hover,ul a:hover,
a:focus {
  color: #41bbc1;
	-webkit-transition: color ease-in-out 0.15s;
         transition: color ease-in-out 0.15s;
}

.lead {
  font-family: "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 21px;
  font-size: 15pt;
  font-weight: 300;
  line-height: 1.4;
  color:#fff;
}

@media (max-width: 480px) {
	p.lead{font-size:14pt;}
}


@media (max-width: 992px) {
	.neg-margin{margin-left:-0px;}
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 300;
font-family: "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  color:#fff;
}

h1,
h2,
h3 {
  margin-top: 40px;
  margin-bottom: 10px;
}

h4,
h5,
h6 {
  margin-top: 25px;
  margin-bottom: 10px;
}

h1,
.h1 {
  font-size: 28pt;
}

h2,
.h2 {
  font-size: 20pt;
}

h3,
.h3 {
  font-size: 24pt;
}

h4,
.h4 {
  font-size: 18pt;
	font-weight: 300;
	color: #3dc3c5;
}

h5,
.h5 {
  font-size: 13pt;
  font-weight:600;
}



@media (max-width: 480px) {
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 1.2;

}
	h1,
	.h1 {
	  font-size: 26pt;
	}
	
	h2,
	.h2 {
	  font-size: 16pt;
	}
	
	h3,
	.h3 {
	  font-size: 19pt;
	}
	
	h4,
	.h4 {
	  font-size: 14pt;
	}
	
	h5,
	.h5 {
	  font-size: 10pt;
	}
	
	p .lead {
	  font-size: 12pt;
	
	}
}



ul,
ol {
  margin-top: 0;
  margin-bottom: 12pt;
  line-height:1.5;
  list-style:disc;
  font-size: 12pt;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
  
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-circle{
	list-style: disc;
	margin-left:0px;
	padding-left: 20px;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

dl {
  margin-bottom: 20px;
}

dt,
dd {
  line-height: 1.428571429;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 4px solid #ff9600;
}

/********** index **********/

/** 	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); **/


.bg-black{
	background: rgba(0,0,0,0.7);
	padding: 50px;
	padding-left: 80px;
	background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%,rgba(0, 0, 0, 0.7) 100%);
}

.logo{
	width: 100px;
	margin: 30px;
}

.bg-hoehetwerkt{
	background:url("../img/art-within-3.jpg") no-repeat 100% top;
	background-repeat: none;
}

.bg-informatie{
	background:url("../img/art-within-4.jpg") no-repeat 100% top;
	background-repeat: none;
	min-height: 500px;
}

.black-grandient{
	height: auto;
	min-height: 600px;
	width: 100%;
	background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}


/********** Bestellen **********/



.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  color: rgba(255,255,255,0.6);
  vertical-align: middle;
  background-color: rgba(0,0,0,0.6);
  border: none;
	resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, color ease-in-out 0.15s, background-color ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, color ease-in-out 0.15s, background-color ease-in-out 0.15s;
}

.form-control:focus {
  color: rgba(255,255,255,0.8);
  outline: 0;
  background-color: rgba(0,0,0,0.8);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255,255,255,0.6);
    opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255,255,255,0.6);
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255,255,255,0.6);
}



.btn-aanvragen{height: auto; width:auto; background-color:#3dc3c5; color:#fff; padding: 10px 20px; font-size:12pt; text-decoration: none; border: none;-webkit-transition: color ease-in-out 0.15s; transition: color ease-in-out 0.15s;}
.btn-aanvragen:hover{background-color:#000; color:#3dc3c5; cursor:pointer; -webkit-transition: color ease-in-out 0.15s; transition: color ease-in-out 0.15s;-webkit-transition: background-color ease-in-out 0.15s; transition: background-color ease-in-out 0.15s;}

/*** CONTACT FORM **/

input[type=text], input[type=tel],input[type=email],input[type=submit],textarea{
    border-radius: 0;
	-webkit-appearance: none;
}



#errors {
	display:block;
	display:none;
	margin:0px;
	padding-left:20px;
	color: #3dc3c5;
	font-weight: 600;
}

#errors ul li {
	list-style: circle;
	margin-left: 0px;
	color: #3dc3c5;
	font-weight: 600;
}

#errors #info {
	list-style:none;
	margin-left:-20px;
	color: #3dc3c5;
	font-weight: 600;
}

#errors #info:before {
	padding-left: -20px;	
}

#success {
	display:block;
	display:none;
	color: #3dc3c5;
	font-weight: 600;
}

#errors.visible, #success.visible {
	display:block;	
}

#req-field-desc {
	font-style:italic;
}



/********** Footer **********/
footer{height: auto; background-color: rgba(0,0,0,.6);}
footer p{font-size: 9pt;color:rgba(255,255,255,0.50); margin-top: 13px;line-height: 3;}
footer p a{color:rgba(255,255,255,0.60); text-decoration: underline;}
footer p a:hover{color:rgba(255,255,255,0.70);}

@media (max-width: 480px) {
	footer p{text-align:center;}
	
}