html,body { height:100%; }

/* font
http://www.colourlovers.com/palette/106467/Ambuside
 */

body { font-family: 'Hind', sans-serif; font-size:15pts; line-height:140%; height:100%; }
/* algemeen */
div,p,img,body { margin:0; padding:0; vertical-align:top; box-sizing:border-box; }

article{display:inline;}

#tinymce div { border:1px dashed #eee; }
input,textarea,select,option { width:100%; }
h1,h2 { font-family: 'Roboto', serif; }

h1,h2,h3,h4,h5 { line-height:120%; }
h1 { color:#ccc; font-size:2.1em; }
h2 { color:#aaa; font-size:1.8em; }
a  { text-decoration:none; cursor:pointer; }
a:hover { text-decoration:underline}
blockquote { 
 width:100%; max-width:1000px; padding:1em; padding-left:2em; 
 font-size:1.5em; font-weight:bold; text-align:center; 
 border-bottom:1px solid #aaa;  border-top:1px solid #aaa; 
 margin: 2em auto; 
 background-color:rgba(50,169,102,0.6);  color:#fff; 
 }

@media only screen and (max-width:480px) { body { font-size:15px; }}
@media only screen and (max-width:1024px) { body { font-size:15px; }}
@media only screen and (min-width:1200px) { body { font-size:16px; }}
@media only screen and (min-width:1680px) { body { font-size:17px; }}


div.kolommen { max-width:1500px; margin:auto; padding:2em; }
div.kolommen.paginabreed { max-width:100%; width:100%; }
div.kolommen.paginabreed div.canvas_container { width:100%; max-width:none}

div.kolom50 { max-width:49%; display:inline-block; height:auto; min-height:50px; padding:10px; }
div.kolom50.links { width:50%; margin-left:4%; margin-right:45%; }
div.kolom50.rechts { width:50%; margin-left:45%; margin-right:4%; }

div.kolom25 { display:inline-block; width:22.5%;  margin:1%;  padding:10px; text-align:center; }
div.kolom33 { display:inline-block; width:31%; margin:1%;  padding:10px; text-align:center; }
div.kolom80 {  width:80%; max-width: 800px; margin: auto; background-color: #fff; padding: 2em; text-align: justify; }


@media only screen and (max-width:768px) { 
h2  {  font-size: 22px;  max-width: 90%;  margin: 0.5em auto 0.5em auto; }

div.kolom50 { max-width:98%; margin:auto; display:block; }}

div.blok25 { display:inline-block; width:23%; margin-right:1%; margin-bottom:1%; text-align:left; }
div.blok35 { display:inline-block; width:30%; margin-right:1%; text-align:left; }
div.blok50 { display:inline-block; width:47%; margin-right:1%; margin-bottom:1%; text-align:left; }

div.kolom33.links { margin-right:17%; }
div.kolom33.rechts { margin-left:17%; }

@media only screen and (max-width:768px)
  { 
 div.kolom33 { display:inline-block; width:48%; margin:0.5%;  padding:10px; text-align:center; }
 div.blok25,div.kolom25 { display:inline-block; width:48%; margin-right:.5%; margin-bottom:1%; text-align:center; }
div.blok35,div.kolom33 { display:inline-block; width:90%; margin:Auto;; text-align:center; }
div.blok50,div.kolom80 { display:inline-block; width:100%; margin:Auto; text-align:center; }
 div.kolom33.links { margin-right:1%; }
 div.kolom33.rechts { margin-left:1%; } 
 }
 
 @media only screen and (max-width:480px)
 	{
	 div.blok25,div.kolom25 { display:inline-block; width:95%; margin:auto; text-align:center; }
	}


.knop  {   
 width: auto; 
 display: inline-block; 
 padding: 15px 30px;
 background-color: #f19449; 
 color: #fff; 
 font-size: 20px; 
 font-weight: bold;
border-radius: 2px;
 line-height: 100%; 
 margin: 20px; 
 transition:all 0.4s ease-in; 
}

.knop:hover { background-color: #fff; color:#f19449; text-decoration:none;  padding: 15px 35px; }
.knop i { position:absolute; margin-left:10px; margin-top:-4px; font-size:28px; }

.knopLight {
	width: auto;
	display: inline-block;
 padding: 15px 30px;
	border: 2px solid #555;
	color: #222;
	font-size: 125%;
	font-weight: bold;
	border-radius: 2px;
	line-height: 100%;
	margin: 15px;
	transition: all 0.4s ease-in;
}




.black_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);  }
img.round-icon { height:80%; width:auto; max-height:400px; max-width:400px; border-radius:200px; border:2px solid #fff; float:left; }

.mobileonly { display:none; !important}
.nomobile { display:inline; !important}

div.tweekoloms div.canvas_container { 
-webkit-columns: 50px 2;  /* Chrome, Safari, Opera */
 -moz-columns: 50px 2;  /* Firefox */
columns: 50px 2; 
 text-align:left; 
 }
 
@media only screen and (max-width:480px) 
  { 
 div.tweekoloms div.canvas_container { 
-webkit-columns: none;  /* Chrome, Safari, Opera */
 -moz-columns: none;  /* Firefox */
columns: none; 
 text-align:justify; 
 } 
 }

@media only screen and (max-width:768px)
  { 
 a.knop {  margin: 15px; min-width: 200px; padding:10px 30px 10px 10px; }
 a.knop:hover { padding:10px 30px 10px 10px; }
 div.blok25 { width:45%; margin:1%; } div.blok35,div.blok50 { width:97%; display:block; margin-left:1%; }
 .mobileonly { display:inline; !important}
 .nomobile { display:none; !important}
 }



/* blokken */

/* blok google maps */
div#canvas_showroom  { display: block; width: 100%; height: 350px; margin: 0; position: relative;  }
 
div#map-canvas { width:49.5%; height:100%; padding:0px; display:inline-block; }
div#locatieInfo { width:20%; height:100%; background-color:#ccc; color:#333; display:none}
div#locatieFoto { width:50%; height:100%; display:inline-block; overflow:hidden; }
@media only screen and (max-width:768px){
	div#canvas_showroom{height:auto;}
	div#map-canvas,div#locatieInfo,div#locatieFoto{width:100%;display:block;}
	div#map-canvas{height:30vh;height:350px;}
	}

div#locatieFoto img { min-width:100%; height:auto; }

div#canvas_website { position:relative; height:100%; width:100%; text-align:center;  }

/* HEAD LOGO HEADER ETC /*/
			div#canvas_head  { position: fixed; height: 130px; top: 0px; z-index: 1000; width: 100%; background-color: #fff; 
			background: url(bg-tegels1.jpg); background-repeat: repeat-x; padding: 20px 0; }
						
			/* logo */
			div#canvas_logo { width:25%; display:inline-block; transition: all 0.3s ease-in-out;}
			div#canvas_logo img { max-width:300px; transition: all 0.3s ease-in-out;}
			
			div#canvas_logo.ingeklapt { position:absolute; left:0; top:0; background-color:#f19449; text-align:right; 
			padding-right:1em; padding-top:10px; width:25%; height:60px; }
			div#canvas_logo.ingeklapt img { height:45px; }
			
			@media only screen and (max-width:768px) {
			div#canvas_logo,div#canvas_logo.ingeklapt{width:100%;text-align:center;}
			div#canvas_logo img { height:auto;  width:75%; max-width:250px; margin:auto;  }
			div#canvas_logo.ingeklapt img { height:auto;  width:50%; max-width:140px; margin:10px auto; }	
				}
			div#canvas_head.ingeklapt { height:60px; overflow:hidden; z-index:100000; }
			div#canvas_menu_hr.ingeklapt { margin:0; padding:0; width:75%; position:absolute; left:25%; top:0; }
			div#canvas_menu { display:none; }
			div#canvas_menu_hr  { width: 100%; font-size: 0.82em; text-align: left; top:130px; background-color: rgba(0, 0, 0, 0.75); padding-left: 12%; 
			padding-right: 10%; position:absolute;}
						
			
			div#canvas_slider { position:relative; height:65%; width:100%; margin-top:50px; }
			@media only screen and (max-width:768px) { div#canvas_slider { max-height:350px; }}
			div#canvas_header { postion:relative; height:40%; width:100%; max-height:500px; margin-top:130px; opacity:0.9 }
			
div#canvas_slider h1, div#canvas_slider h2, div#canvas_slider h3 {	color: #fff;	text-shadow: 1px 1px 7px #000;}
div#canvas_slider .knop {
	border: 6px solid #f19449; 
	font-size: 125%;
	background: #f19449;
	color:#fff;
	box-shadow: 1px 1px 10px #000;	
	border: 3px solid #fff;

}			

div#canvas_content { position:relative; width:100%; min-height:200px; padding:0; }
div#canvas_latest_blog { display:none; }
div#canvas_bottom { position:relative; width:100%; padding:1em 0 3em 0; background-color:#222;  color:#fff;  text-align:center; font-size:0.92em; 
background:url(bg-tegel-001.jpg);  }
div#createdby { font-size:0.8rem; color:#444; width:100%; text-align:right; padding:5px; margin:0; }
div#createdby a { color:#444; }
div.canvas_container { width:100%; max-width:1600px; margin-left:auto; margin-right:auto; }
div#broodkruimel,div#broodkruimel a { color:rgb(174, 194, 183)}

@media only screen and (max-width:768px) { 
div#broodkruimel { display:none; }
div#canvas_head { height:50px; }
div#canvas_slider { height:60%; }
}

/* videos */
iframe { width:320px !important;  height:240px !important;  max-width:100% !important;  margin:1em 0 1em 0; }
span.video { padding:20px; }
span.video iframe { width:400px; height:300px; margin:auto; }

/* VEEL GESTELDE VRAGEN */
div.antwoord  { box-sizing: content-box; border-bottom: 1px solid #eeeeee; padding: 1% 20% 5% 2%}
 
/* blog */

div#blog_overzicht {  -webkit-columns: 50px 2; -moz-columns: 50px 2; columns: 50px 2;  }
@media only screen and (min-width:1500px)
	{
	div#blog_overzicht {  -webkit-columns: 30px 3; -moz-columns: 30px 3; columns: 30px 3;  }
	}

div#blog_overzicht div {  -webkit-column-break-inside: avoid; 
page-break-inside: avoid; 
 break-inside: avoid; display: inline-block; }
 
div.blog_feed_title{
    padding-bottom: 10px;
    border-bottom: 1px dotted #666;
    margin: 10px auto;
}

 
div.blog_feed a.knop { float:right; }
div.blog_item { color:#777; }
div.blog_item h2 { color:#000; }
div.blog_link { text-align:right; }
div.blog_titel a { text-decoration:none; color:#999; }


div#blog_navigatie  { text-align:right; border-bottom:1px dotted #ccc; padding-bottom:5px; margin-top: -33px; }
div#blog_navigatie a { 
display: inline-block; 
width: 30px; 
height: 30px; 
background-color: #ccc; 
padding: 0px; 
margin-right: 10px; 
text-align: center; 
color: #fff; 
font-weight: bold; 
font-size: 1.1em; 
border-radius: 15px; 
}

div#blog_items { text-align:left; display:inline-block; vertical-align:top; width:60%; margin-right:1%; margin-bottom:4px; }
div#adres { text-align:left; width:35%; display:inline-block; text-align:left; vertical-align:top; }
div#blog_items div.blog_feed_datum { display:inline-block; width:150px; color:#ccc; font-weight:bold; }
div#blog_items div.blog_feed_title { display:inline-block; width:auto; color:#eee; font-weight:normal; }
div.blog_header  { background-position: center; width: calc(100% + 50px); margin-bottom: 20px; height: 200px; overflow: hidden; 
display: inline-block; background-size: cover; margin:-25px; border-radius: 10px 10px 0 0; }

div.blog_titel,div.blog_datum,div.blog_intro,div.blog_link { padding-left:10px; padding-right:10px; }
div.blog_block { margin-bottom:10px; border-radius:10px; background-color:#eee; padding:25px; }
div.blog_block h2  { color: #000; font-size: 1.20em; position: relative; padding: 10px; box-sizing: border-box; text-shadow: 10px #000 10px; margin-top: 0px; 
margin-left: auto; margin-right: auto; background-color: #fff; border-radius: 10px; }


/* blog - latest 5 block */
div#canvas_latest_five_blogs { width:100%; padding:3em; }
div#canvas_latest_five_blogs a { text-decoration:none; }
div#canvas_latest_five_blogs h2 { color:#aaa}
span#blog_latest_1 {  width: 55%; height: 400px; border: 1px dotted #ccc; display: inline-block; }
span#blog_latest_1 div.blog_image { position:relative; z-index:900;  width:100%; height:100%; position:relative; }
span#blog_latest_1 div.blog_info { position:relative; z-index:901; width:100%; height:100px; margin-top:-100px;  padding:10px;  background-color:rgba(255,255,255,0.7); font-size:1.1em; }
span#blog_latest_1 div.blog_info:hover { background-color:rgba(50, 169, 102, 0.2); }

span.blog_recent_list { width:44%; box-sizing:border-box; height:100%; display:inline-block; vertical-align:top; overflow:hidden; }
span.blog_recent_list span  { height: 20%; width: 100%; vertical-align: top; border-bottom: 1px dotted #000; padding: 1em 0px 1em 1em; text-align: left; display: block; }

span.blog_regel:hover { background-color:rgba(50, 169, 102, 0.2); }
div.blog_datum { font-size:0.92em; color:#aaa; display:inline-block;  overflow:hidden; }
div.blog_auteur { font-size:0.92em; color:#111; display:inline-block; max-width:65%; overflow:hidden; }
div.blog_titel { font-size:1.1em; display:block; width:100%; color:#222; }
@media only screen and (max-width:768px)
  { 
 div#canvas_latest_five_blogs { padding:10px; text-align:center; }
 span#blog_latest_1,span.blog_recent_list { width:95%; display:block; margin:auto; height:280px; } 
 div.blog_datum { max-width:100%; width:100%; }
 div.blog_auteur { display:none; }
 span.blog_recent_list span { height:auto; }
 div.blog_datum,div.blog_titel { font-size:0.92em; width:100%; text-align:center; } 
 }
 
/* nieuwsbrief */
div#nieuwsbrief  { position: fixed; width: 600px; height: 300px; top: 200px; left: calc(50% - 300px); background: rgb(255,255,255); color: #000; 
border: 1px solid #ccc; z-index: 10000; padding: 10px;  -webkit-box-shadow: 11px 9px 300px -40px rgba(0,0,0,0.85);  -moz-box-shadow: 11px 9px 300px -40px rgba(0,0,0,0.85);  box-shadow: 11px 9px 300px -40px rgba(0,0,0,0.85); }
div#nieuwsbrief input { width:49%; margin-right:0.5%; display:inline-block; }
@media only screen and (max-width:480px)
  { 
 div#nieuwsbrief { width:100%; left:0; top:5px; height:auto; padding:20px 10px 20px 10px; }
 div#nieuwsbrief input { width:98%; margin:1%; display:block; }
 }
span.close_popup  {color: #888; font-size: 1em; display: block; width: 100%; text-align: right; margin-bottom: -15px; }
div.close_popup2 { color: #888; font-size: 0.92em; display: block; width: 100%; text-align: center;  margin-top:20px;  }

/* content */
div#content { margin:auto; }
div#broodkruimel { font-size:0.92em; text-align:left; padding:bottom:10px; border-bottom:1px dotted #eee; margin-top:-20px; }
div#content_2 img,div#content_1 img { max-width:100%; height:auto; padding:5px; border:1px solid #eee; margin:15px; }

/*elements*/
div.element { width:100%; padding:2em 1em 3em 1em; }

/* fotogallerij */
div.element.GALLERY { background-color:#EEE; padding:0; height:100%; position:relative; }
div.element.GALLERY .canvas_container { padding:0; max-width:1680px; }
div.element div#gallery { padding:2em 0; margin:0; }
div.fotoGallery div  { width: 20%; margin: 0; padding: 0; border: 0; padding-top: 14%; margin: 0; transition: all .3s ease; 
display: inline-block; filter: alpha(opacity=100); opacity: 1; margin-left: 21px; margin: 0px; }
@media only screen and (max-width:768px){ div.fotoGallery div { width:20%; padding-top:33%; } }
@media only screen and (max-width:480px){ div.fotoGallery div { width:50%; padding-top:33%; } }
div.fotoGallery div:hover { opacity:0.8; filter:alpha(opacity=80); }

div.element.BLOCK { padding:0; }
div.element.FORM { background-color:rgba(238, 238, 238, 1)}
div.element.FIXEDBLOCK { padding:0; }
div.imageonly { padding-top:190px; height:400px; }
div.imageonly h2 { color:#fff; margin:0; font-size:2.5em; }

/* content blok */
div#content_2,div#content_1 { background-color:#fff; display: inline-block; text-align: left;  }

div#content_1  { width: calc(100% - 310px); max-width: 1100px; min-width:800px; }
div#content_2 { width:260px; border-left:1px solid #ddd; color:#333; padding:1em;}

div#content_2>p, div#content_1>p { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h1 , div#content_1>h1  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h2 , div#content_1>h2  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h3 , div#content_1>h3  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h4 , div#content_1>h4  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h5 , div#content_1>h5  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>h6 , div#content_1>h6  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_2>div , div#content_1>div  { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }
div#content_1>ul,div#content_1>ol { width:100%; max-width:1000px; margin-left:auto; margin-right:auto; }

div#content_2 .blok50 { background-color:#fff; padding:1em; margin-right:1.5%; text-align:center}
div#content_2 .blok50 ul { text-align:left; }

@media only screen and (max-width:768px)
 { 
div#content img,div#content_1 img { float:none;  display:block; max-width:80%; margin:15px auto 15px auto; !important}
div#shop_gadget,div#content_2 { max-width:100%; display:inline-block; text-align:left; padding-top:2em; float:none}

}

@media only screen and (max-width:1024px)
  { 
 div#content_1,div#content_2 { width:100%; min-width:100%; display:block; padding:1em; text-align:justify; }
 }
/* recenties */
div.testimonial  { 
width: 40%; 
display: inline-block; 
margin-right: 5%; 
padding: 1em; 
vertical-align: top; 
background-color: #fff; 
 color:#555; 
border-radius: 15px; 
margin: 2em; 
 position:relative
}

div.testimonial::after  { 
content: ""; 
position: absolute; 
bottom: -26px; 
left: 70px; 
border-width: 27px 0 0 27px; 
border-style: solid; 
border-color: #fff transparent; 
display: block; 
width: 0px; 
-webkit-transform: rotate(-8deg); 
}


@media only screen and (max-width:768px)
  { 
 div.testimonial { width:90%; margin:auto; }
 div.testimonial:last-child { display:none; }
 }
/* Formulieren */

div.div_formulier,div#formulier { min-height:300px; max-width:700px; margin:auto; padding:20px 0px 20px 0px; }
div#content_2 div#formulier { max-width:700px; }

div.div_formulier i { color:#00C; }

input#voorletters { display:none; }
 
div.form_titel { display:none; }
div.form_content { float:left} 
input, textarea, select  {  padding: 0.7em;  border: 1px solid #ddd;  color: #333;  width: 100%;  box-sizing: border-box;  font-size: 1.05em;  }
input[type=radio],input[type=checkbox] { width:auto; min-width:0; }
textarea { width:100%; }
input.submit { margin-top:0.7em; width:100px; text-transform:uppercase; }

div.form_row { width: 100%;  padding: 2px;  margin-left:auto; margin-right:auto;  }
div.form_row_klein { width:49%; display:inline-block; min-width:200px; }
div.form_field_desc { min-width: 160px;  width: 100%;  display: block;  text-align: left;  }
div.form_field_input { width:100%; display:inline-block; text-align:left; }

div.div_form_desc { text-align:left; }
div.form_field_desc  {  position: absolute;  font-size: 0.67em;  padding: 0px;  margin-top: 4px;  margin-left: 9px; }
div.form_field_input input[type="text"], div.form_field_input input[type="password"], div.form_field_input textarea, div.form_field_textarea textarea,div.form_field_input select  {  margin-top: 28px;  border: 0px;  border: 1pxsolid #ddd;  color:#333333;  }
input.halvebreedte { width:48%; margin-right:1%; display:inline-block; max-width:300px; }
input[type=submit] { background-color:rgba(0, 245, 115, 1); border-radius:10px; max-width:300px; margin:auto; }
div.form_field_label { text-transform:uppercase; font-weight:bold; margin-top:0.5em; margin-bottom:0.5em; font-size:1.2em; }

div.form_input_comment  {  display: inline-block;  max-width: 8%;  position: absolute;  margin-left: -40px;  margin-top:30px; }

/* form in gadget style */
div#content_2 div#formulier div { padding-bottom: 5px;  }
 .form_field_desc { font-size: 0.8em; display:block; }
 .form_field_input,.input_formulier { display:inline-block; }
 .form_name { display:none; }
span.foutmerk { color:#eb2126; font-weight:bold; padding-right:1em; }
div#validation { margin:7px; }
/* bottom */
div#canvas_bottom img { width:30px; height:auto;  margin-top:5px; border-radius:15px; }
div#canvas_bottom ul { list-style-type:none; margin-left:0; padding-left:0}
div#canvas_bottom ul li { margin-left:0; padding-left:0}
div#canvas_bottom a { color:#fff; text-decoration:none; }
div#canvas_bottom .adres { color:#fff; }
div#canvas_bottom h3 { color:#ccc; text-align:inherit; font-size:1.4em; }


@media only screen and (max-width:768px)
  { 
 div#canvas_bottom div.blok25, div#canvas_bottom div.blok35 { width:100%; text-align:center; }
 div.nomobile { display:none; }
 }

/* menu */

div#canvas_menu ul li { display:inline-block; width:auto; margin-right:10px; list-style-type:none; letter-spacing:1px}
div#canvas_menu a { color:#000; cursor:pointer; text-decoration:none; }
div#canvas_menu a:hover { font-weight:bold; }

/* templates CMS */
div#content_1 div.kolommen,div#content_2 div.kolommen { width:100%; max-width:none; padding-top:3em; padding-bottom:3em; }
div#content_1 div.kolom4 { width:100%; max-width:none; ; text-align:center}
div.kolom4>div { max-width:1500px; margin:auto; padding:1em; }

div.kolommen img { max-width:80%; height:auto; }

div#content_1 div.kolom4 ul  { text-align:left; }

/* slides */
div.slidecover { display:none; }
div.slides { width:100%; height:100%; 
-webkit-box-shadow: inset 11px -24px 58px -21px rgba(0,0,0,0.78); 

-moz-box-shadow: inset 11px -24px 58px -21px rgba(0,0,0,0.78); 

box-shadow: inset 11px -24px 58px -21px rgba(0,0,0,0.78); 

}

div#slide1 { background:url('slide2.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; }
div#slide2 { background:url('tegel-projecten-2.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; }

svg.arrowdown  { 
display: block; 
width: 100%; 
height: 40px; 
background: transparent; 
margin-top: -39px; 
fill: #fff; 
 position:relative; 
 z-index:1000
}

div.intro  { position: absolute;  display: block; text-align: center; color: #fff; overflow: hidden; width: 100%; 
text-shadow: 0px 0px 10px rgba(0,0,0,0.93); bottom: 25%; }

@media only screen and (min-width:1024px)	{	div.intro h1, div.intro h2, div.intro h3{font-size:3em; font-size:3vw}	}
@media only screen and (max-width:1024px)	{	div.intro h1, div.intro h2, div.intro h3{font-size:2.5em; font-size:4.0vw}	}
@media only screen and (max-width:768px)	{	div.intro h1, div.intro h2, div.intro h3{font-size:3em; font-size:4.5vw}	}
@media only screen and (max-width:480px)	{	div.intro h1, div.intro h2, div.intro h3{font-size:2.5em; font-size:5vw}	}

@media only screen and (max-width:1024px)  {  div.intro {  padding:1em; } }



a.download { display:none; }



/* menu */
.collapse-button { position:absolute; top:10px; left:10px;  border-radius:5px;  padding:5px; cursor:pointer; text-align:center; }
.collapse-button:hover, .collapse-button:focus { background-image:none; color:#FFF; }
.collapse-button .icon-bar { background-color:#000; border-radius:1px 1px 1px 1px; display:block; height:2px; width:22px; margin:4px; margin-bottom:6px; }

div#canvas_menu_hr a { transition: all 0.3s ease-in-out; margin-left: -10px; margin-right: 10px; padding-top: 0px;  color:#000;  text-decoration:none; }
div#canvas_menu_hr a:hover { }
div#canvas_menu_hr ul.sub-menu li a { color:#888; }
div#canvas_menu_hr ul.sub-menu li a:hover { color:#000; }
div#canvas_menu_hr li  { display: inline-block; margin: 0px 10px; padding: 40px 10px 5px 10px; }
div#canvas_menu_hr li {  color:#fff;  transition: all 0.3s ease-in-out;  border-right:1px solid #333; }
div#canvas_menu_hr li a { color:#fff; }
div#canvas_menu_hr li:last-child { border:none; }
div#canvas_menu_hr span.sub-collapser { display:none; }

ul.slimmenu li  { margin-left:-10px; }
ul.slimmenu li:last-child  { }
ul.slimmenu li ul li { border:0px; background-color:none; width:150px; text-align:left; }
ul.sub-menu { 
background-color:rgba(198, 200, 157, 1); 
-webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.18); 
-moz-box-shadow:3px 3px 12px 0px rgba(50, 50, 50, 0.18); 
box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.18); 
padding:5px; 
}
ul.slimmenu { list-style-type:none; margin:0; padding:0; }
ul.slimmenu li { position:relative; display:inline-block; box-sizing:border-box; }
ul.slimmenu li:last-child { border-right:0xp; }
ul.slimmenu > li { }
ul.slimmenu > li:first-child { border-left:0}
ul.slimmenu > li:last-child { margin-right:0}
ul.slimmenu li a { display:block; padding:5px; 
transition:background-color 0.2s ease-out;  -o-transition:background-color 0.2s ease-out;  -moz-transition:background-color 0.2s ease-out; 
-webkit-transition:background-color 0.2s ease-out;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
ul.slimmenu li a:hover { text-decoration:none; }

ul.slimmenu li .sub-collapser { color:#eee; position:absolute; right:0; top:0; width:30px; height:100%; text-align:center; z-index:999; cursor:pointer; }
ul.slimmenu li .sub-collapser:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
ul.slimmenu li .sub-collapser > i { display:inline-block; vertical-align:middle; }
ul.slimmenu li ul { list-style-type:none; }
ul.collapsed { }
ul.collapsed li { padding-left:10px; padding-right:10px; }

@media only screen and (min-width: 768px)
 { 
ul.slimmenu li ul a { list-style-type:none; padding:5px; border-bottom:1px dotted #eee; font-weight:normal; }
}

ul.slimmenu li ul li { min-width:240px; }
ul.slimmenu li ul li:last-child { }
ul.slimmenu li ul li:first-child { }
ul.slimmenu li ul li:hover { min-width:240px; }

ul.slimmenu li > ul { display:none; position:absolute; left:0; top:100%; z-index:999; font-weight:400}
ul.slimmenu li > ul > li ul { display:none; position:absolute; left:-100%; top:0; z-index:999; width:100%; }

ul.slimmenu.collapsed li > ul { width:100%; box-sizing:border-box; }
ul.slimmenu.collapsed li { display:block; width:auto; -webkit-box-sizing:border-box; margin:0px; margin-top:5px; margin-bottom:5px; }
ul.slimmenu.collapsed li a { display:block; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; color:#000; }
ul.slimmenu.collapsed li .sub-collapser { height:40px; }
ul.slimmenu.collapsed li > ul { display:none; position:static; }

 p:has(div.youtube-player) { display:inline-block; }
div#canvas_website .youtube-player  { 
position: relative; 
/* Use 75% for 4:3 videos */
height: 0; 
overflow: hidden; 
width:320px; 
height:273px; 
display:inline-block; 
margin: 5px; 
}


 
.youtube-player iframe  { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: transparent; 
}

.youtube-player img  { 
bottom: 0; 
display: block; 
left: 0; 
margin: auto; 
max-width: 100%; 
width: 100%; 
position: absolute; 
right: 0; 
top: 0; 
border: none; 
height: auto; 
cursor: pointer; 
-webkit-transition: .4s all; 
-moz-transition: .4s all; 
transition: .4s all; 
}

.youtube-player img:hover  { 
-webkit-filter: brightness(75%); 
}

.youtube-player .play  { 
height: 72px; 
width: 72px; 
left: 50%; 
top: 50%; 
margin-left: -36px; 
margin-top: -36px; 
position: absolute; 
background: url("//i.imgur.com/TxzC70f.png") no-repeat; 
cursor: pointer; 
}


/* blocks /*/

div.videoblok { padding:3em 0; }
div.videoblok strong { display:block; padding:0 0 1em 0; }

div.bullitpoints .canvas_container { max-width:1200px; padding:2em; }
div.bullitpoints ul { max-width:850px; margin:auto; }
div.bullitpoints ul li { 
width: 50%; 
max-width: 390px; 
text-align: left; 
background-color: transparent;  
padding-left:10px; 
 font-size:1.1em; 
padding: 10px; 
margin: 5px; 
list-style-type: none; 
 display:inline-block
}

div.bullitpoints ul li::before {  content:"\2713\0020";  color:rgba(0, 235, 102, 1);  font-weight:bold; font-size:1.15em;  }

@media only screen and (max-width:768px) { 
 div.bullitpoints ul li { 
width: 95%; 
max-width: 300px; 
 display:block; 
 }
}