/* --------------------------------------- */
/* RNH GENERAL css */
/* --------------------------------------- */

@import url(reset.css);
@import url(font.css);
/* @import url(/css/font-awesome.min.css); */
@import url(/css/fontawesome-5-free-font.css);
@import url(nav.css);
@import url(google.css);
.bx-icon{
	height: fit-content !important;
}

/* font setting */
input[type=submit],
input[type=reset],
.btn,
h1, h2, h3, h4,
footer {
	font-family: "montserratlight", verdana, helvetica, sans-serif;
	}


/* buttons */
.btn {
	background-color: #ff9f1c;
	text-align: center;
	line-height: 54px;
	height: 54px;
	margin-top: 18px;
	display: inline-block;
	}

.btn a							{ color: #fff; text-decoration: none; padding: 0px 14px 0px 14px; display: block; }
.btn a:hover					{ color: #fff; text-decoration: none; }

input[type=submit],
input[type=button] {
	background-color: #ff9f1c;
	border: 0px;
	font-size: 1em;
	color: #fff;
	min-width: 90px;
	height: 54px;
	padding: 3px 6px 3px 6px;
	display: inline-block;
	cursor: pointer;
	-webkit-appearance: none;
    -webkit-border-radius: 0px;
	}


.form-data span.form-mandatory,
.form-mandatory {
	font-weight: bold;
	font-size: 1.2em;
	padding-left: 0.2em;
}

.agendalist .item h3 { color:#fff; }

/* standard */
body {
	background-image: url(/grfx/bg.png);
	background-repeat: no-repeat;
	background-position: center 0px;
	background-color: #e8f1f2;
	}

body, td {
	font-family: "montserratlight", verdana, helvetica, sans-serif;
	font-size: 0.9em;
	color: #5f5f5f;
	line-height: 1.6em;
	}

a								{ color: #6dc04e; text-decoration: none; }
a:hover							{ color: #6dc04e; text-decoration: underline; }

.wrapper {
	position: relative;
	width: 1440px;
	margin: 0px auto;
	padding: 0px 25px 0px 25px;
	display: block;
	}


/* header */
header {
	background-image: url(/grfx/header/header11.jpg);
	background-position: 0px 0px;
	background-size: cover;
	background-repeat: no-repeat;
	height: 800px;
	}

header .logo {
	background: url(/grfx/logo_rnh.svg) no-repeat 0px center;
	background-size: auto 90px;
	/*max-width: 234px;*/
	height: 100px;
	margin-left: 0.5em;
	}

header .logo a {
	text-indent: -9999px;
	height: 100px;
	display: block;
}

header ul.social-icons {
	float: right;
	width: 10vw;
	min-width: 100px;
    text-align: right;
	margin-right: 1em;
    margin-top: 0.7em;
}
header ul.social-icons li {
    list-style: none;
    width: 20px;
    margin: 20px 15px 0px 0px;
    display: inline;
}

header ul.social-icons li a {
    color: #fff;
}
header ul.social-icons li a:hover {
    color: #ff9f1c;
}

header .header-icons {
    font-family: 'Font Awesome 5 Brands';
    display: inline-block;
    font-size: 1.6em;
}

/* .facebook:after,
.instagram:after {
    font-family: 'Font Awesome 5 Brands';
    display: inline-block;
    content: "\f082";
    font-size: 1.6em;
} */

/* .fab.instagram:after {
    content: "\f16d";
}
.fab.youtube:after {
    content: "\f167";
} */

.fab::after,
.fab {
	font-family: 'Font Awesome 5 Brands';
}

.fa-solid::after,
.fa-solid,
.fa::after,
.fa {
	font-style: normal;
    font-family: 'Font Awesome 5 Free';
}

/* */

#topbar {
	background: url(/grfx/header.png) #7fd75d no-repeat;
	background-size: cover;
	height: 100px;
	}

.elevator-pitch {
	background-color: #fff;

	list-style: none;
	margin: 0px auto 1em auto;
	padding: 36px 36px 24px 36px;
	display: block;
    }

.elevator-pitch dt {
	background: url(/grfx/buitengewoon.png) no-repeat;
	background-size: 126px auto;
	text-indent: -9999px;
	width: 126px;
	height: 126px;
	float: left;
	}

.elevator-pitch dd {
	font-family: "overlockbold",georgia,serif;
	font-size: 1.2em;
	color: #000;
	line-height: 1.6em;
	margin-left: 154px;
	}

.elevator-pitch dd h2 {
	font-size: 1.2em;
	color: #000;
	margin-bottom: 8px;
	}

.notification-btn {
	position:absolute;
	right: 348px;
	top:29px;
	height: 31px;
	line-height:31px;
}

#freesearch {
	position: absolute;
	display: inline-block;
	width: auto;
	width: -moz-fit-content;
	width: fit-content;
	height: 34px;
	display: block;
	bottom: 18px;
	right: 0px;
	z-index: 130;
	}

#freesearch form {
	/* width: 100%; */
	/* margin-right: -2em; */
}

#freesearch input[type=search] {
	border: 0px;
	width: 75%;
	height: 30px;
	padding: 3px 10px 3px 10px;
	vertical-align: middle;
	-webkit-appearance: none;
	-webkit-border-radius: 0px;
	}

#freesearch input[type=submit] {
	/* Hide the text. */
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden; 

	height: 30px;
	width: 30px;
	min-width: 30px;
	background: url(/grfx/search-icon.png) #ff9f1c no-repeat center center;
	background-size: 24px 24px;
	border: 0px;
	margin-left: -6px;
	cursor: pointer;
	vertical-align: middle;
	-webkit-border-radius: 0px;
	}


/* breadcrumb */
#breadcrumb {
	background-color: #fff;
	font-weight: bold;
	font-size: 0.9em;
	color: #472d30;
	line-height: 50px;
	height: 68px;
	padding: 0px 24px 0px 24px;
	overflow: hidden;
	}

#breadcrumb span { color:#4e9733;}

#breadcrumb a					{ font-weight: normal; color: #472d30; }

#breadcrumb p {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}


/* content */
#main							{ margin-top: -580px; z-index: 0; }
#main .wrapper					{ width: 1156px; padding: 0px; }

#container {
	background-color: #fff;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
	min-height: 480px;
	display: block;
	margin-top: -18px;
	margin-bottom: 72px;
	padding: 72px 25px 72px 25px;
	}

aside 							{ }

.close-map {
	position:absolute;
	background: url(/grfx/highlight-close.png) no-repeat; 
	width: 13px;
	height: 13px;
	background-size: 13px 13px;
	right: 10px;
	top: 10px;
	z-index: 1;
	cursor: pointer;
	display: block !important;
	background-color: #fff;
	padding: 15px;
	background-position: center;
	border: 2px solid #ccc;
}

.popup ul { display:none; }

.close-map{
	list-style: none;
	float: right;
	cursor: pointer;
	}

#content {
	width: 730px;
	width: 60%;
	margin: auto;
	}

#content h1,
#content ul,
#content ol,
#content p {
	margin-bottom: 18px;
	}

#content ul li,
#content ol li {
	margin-left: 18px;
	}

#content h1 					{ font-size: 1.8em; color: #472d30; line-height: 1.2em; }
#content img					{ max-width: 100%; height: auto; }


#content .bx-icon img 			{ 
	height: 395px; 
	width: auto;
	max-width: 99%;

	object-fit: cover; 

	border-radius: 2px;
	position: initial; 
	margin: 0 auto;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#content table td				{ font-size: inherit; }

/* blocks */

#content hr {
	background: none;
	border-top: 1px solid #757575;
	margin-top: 36px;
	margin-bottom: 36px;
	}

.item {
	box-shadow: 0px 1px 8px 1px rgba(0,0,0,0.2);
    width: 375px;
    height: 460px;
    margin-right: 15px;
	margin-bottom: 18px;
	overflow: hidden;
    float: left;
	}

dl.more-projects dd, dl.more-projects dd h3 { margin-left:0px; padding-left:0; }
dl.more-projects dt 						{ margin-right:20px; }

.item p,
.item h3 {
	margin-bottom: 18px;
	padding: 0px 18px 0px 18px;
	}

.item p:first-child {
	height: 220px;
	margin-bottom: 30px;
	padding: 0px;
	overflow: hidden;
	}

.item p > img					{ max-width: 100%; border: 0px; }
.item h3						{ margin-top: 18px; }
.item a 						{ text-decoration: none; display: block; }
.item a h3 						{ font-size: 1.2em; color: #fff; }
.item .date, .item .area  		{ font-size: 1.1em; color: #ff9f1c; margin-top: 0.5em;}
.item .area  					{ font-size:0.9em; }

.moredates						{ color: #6dc04e; }

.note							{ font-size: 0.85em; }

.over-list 						{ margin-top:30px; }

.over-list .item {
	width: 210px;
    height: auto;
}

.item a h3 {
    font-size: 1.2em;
    color: #5f5f5f;
}

.item a { color: #5f5f5f; }

.item .intro:after {
    content: "\f061";
    font-family: 'Font Awesome 5 Free';
    font-size: 1.1em;
    color: #ff9f1c;
    margin-left: 14px;
}

.over-list .item p:first-child {
	height:auto;
}

h2.bekijk-ook, .more-links { margin-bottom:18px; }

.over-list .item:nth-child(3)  {
	margin-right:0px;
}

.overlist {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.overlist .item {
	width: 32.1%;
	margin-right: 20px;
	margin-bottom: 30px;
	display: inline-block;
	float: left;
}

.overlist .item:nth-child(3n) {
    margin-right: 0px;
}

.more-links h3 > a {
    color: #472e30;
	cursor:pointer;
}

.more-links h3 > a:hover {
    text-decoration:none;
}

.more-links h3 > a:after {
    content: "\f061";
    font-family: 'Font Awesome 5 Free';
    font-size: 1.1em;
    color: #ff9f1c;
    margin-left: 18px;
}

.more-links .item .intro:after {
    content: "\f061";
    font-family: 'Font Awesome 5 Free';
    font-size: 1.1em;
    color: #ff9f1c;
    margin-left: 14px;
}

#content img.content-image-margin {margin-right:20px !important;}


/* footer */
footer {
	background-color: #4e9733;
	color: #fff;
	height: 400px;
	height: -moz-fit-content;
	height: fit-content;
	padding-top: 2em;
	}

footer a						{ color: #fff; text-decoration: none; }
footer a:hover					{ color: #ff9f1c; text-decoration: none; }

.footermenu 					{ 
	display: block; 
	float: left; 
	max-width: 74%;
}
.footermenu ul {
	width: 42%; /* = 75% / 2 - 0.5 */
	min-width: 300px;
	list-style: none;
	padding-right: 20px;
	display: block;
	float: left;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 54px;
	-moz-column-gap: 54px;
    column-gap: 54px;
	}

.footermenu li {
	/*padding-bottom: 18px;*/
	overflow: hidden; /* fix for Firefox */
	display: block;
	border: 1px solid transparent;
	-moz-column-break-inside:avoid;
	-webkit-column-break-inside:avoid;
  	column-break-inside:avoid;
	-webkit-transform: translate3d(0, 0, 0);
	}

.footermenu li a {
	margin-bottom: 18px;
	display: inline-block;
	}

footer .logo {
	background: url(/grfx/logo_rnh.svg) no-repeat center 0px;
	background-size: auto 90px;
	height: 130px;
	height: -moz-fit-content;
	height: fit-content;
	text-align: center;
	width: 25%;
	float: right;
	}

footer .logo a {
	text-indent: -9999px;
	height: 100px;
	display: block;
	}

footer ul.privacy-statement {
	/* float:right;
	margin-right:40px; */
	height: 1.5em;
	margin: 0 auto;
	max-width: -moz-fit-content;
	max-width: fit-content;
}

footer ul.privacy-statement li {
	list-style:none;
	text-align:right;
	float:left;
}

footer ul.privacy-statement li a:after {
	content:"|";
	margin-left:10px;
	margin-right:10px;
}

footer ul.privacy-statement li:last-child a:after {
	display:none;
}

footer ul.privacy-statement li a {
	text-indent:0px;
	height:auto;
	font-size:12px;
}

footer ul.privacy-statement li:hover a:after {
	color:#fff;
}



/* routes */
.meldingblock {
	background-color: #e8f1f2;
	margin-bottom: 36px;
	padding: 14px;
	}

.meldingblock ul {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	}

.meldingblock li {
	text-align: center;
	list-style: none;
	margin-left: 0px !important;
	overflow: hidden; /* fix for Firefox */
	-webkit-column-break-inside: avoid;
	-webkit-transform: translate3d(0, 0, 0);
	}

.meldingblock li a::before {
	content: "";
	border-radius: 5px;
	background-color: #ff9f1c;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 36px; 
	width: 54px;
	height: 54px;
	margin: auto;
	margin-bottom: 5px;
	display: block;
	}

.meldingblock li:nth-child(1) a::before { background-image: url(/grfx/routes/wandelen-w-icon.png); }
.meldingblock li:nth-child(2) a::before { background-image: url(/grfx/routes/fietsen-w-icon.png); }
.meldingblock li:nth-child(3) a::before { background-image: url(/grfx/routes/varen-w-icon.png); }
.meldingblock li:nth-child(4) a::before { background-image: url(/grfx/routes/top-w-icon.png); }
.meldingblock li:nth-child(5) a::before { }
.meldingblock li:nth-child(6) a::before { }

.routeblock {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
	}

.routeblock table {
	font-size: 1em;
	width: 48%;
	margin-right: 20px;
	float: left;
	}

.routeblock table:nth-child(2n) 		{ margin-right: 0px; }

.routeblock td > p:first-child {
	max-width: 316px;
	height: 198px;
	margin: 0px;
	overflow: hidden;
	}


/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */

@media only screen and (min-width: 1441px) {

	header							{ background-position: 0px 20%; }

}

@media only screen and (max-width: 1440px) {

	.wrapper						{ width: 1338px; }

	.footermenu ul 					{ width: 416px; }
}

@media only screen and (max-width: 1366px) {

	.wrapper						{ width: 1254px; }

	.footermenu ul 					{ width: 388px; }
}

@media only screen and (max-width: 1280px) {

	.wrapper,
	#main .wrapper {
		width: 1128px;
		}

	#main .wrapper					{ padding: 0px 25px 0px 25px; }

	.over-list .item 				{ width: 190px; }
	.overlist .item 				{ width: 32%; }

	/* .footermenu ul 					{ width: 346px; } */

}

@media only screen and (max-width: 1152px) {

	.wrapper,
	#main .wrapper {
		width: 1002px;
		}

	.item 							{ width: 324px; height: 420px; }
	.item p							{ font-size: 0.9em; }
	.item p:first-child 			{ height: 198px; }
	.over-list .item 				{ width: 170px; }
	.overlist .item 				{ width: 31.9%; }

	.routeblock td > p:first-child	{ height: 162px; }

	/* .footermenu ul 					{ width: 304px; } */

	/* footer ul.privacy-statement     { margin-right:0px; } */

}

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

	.wrapper,
	#main .wrapper {
		width: 936px;
		}

	.item 							{ width: 302px;  }
	.item p:first-child 			{ height: 180px; }

	.over-list .item 				{ width: 235px; }
	.overlist .item 				{ width: 31.8%; }

	.over-list .item:nth-child(3) {
		margin-right: 15px;
	}

	.over-list .item:nth-child(2) {
		margin-right: 0px;
	}

	/* .footermenu ul 					{ width: 282px; } */
	.footermenu ul:last-of-type {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		}

	footer ul.privacy-statement li a {
		margin-right:10px
	}


	footer ul.privacy-statement li a:after {
		display:none;
	}
}

@media only screen and (max-width: 960px) {

	.wrapper,
	#main .wrapper {
		width: 778px;
		}

	#content						{ width: 80%; }

	.item 							{ width: 249px; }
	.item p:first-child 			{ height: 144px; }
	.overlist .item:nth-child(2n) {
		margin-right: 0px;
	}

	.overlist .item:nth-child(3n) {
		margin-right: 20px;
	}

	.overlist .item {
		width: 48.2%;
	}

	.footermenu ul,
	footer .logo {
		width: 100%;
		}

	.footermenu ul {
		-webkit-column-gap: 0px;
		-moz-column-gap: 0px;
		column-gap: 0px;
		}

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 800px) {

	body 							{ background-image: url(/grfx/bg-tablet.png); }

	header							{ background-image: url(/grfx/header/tablet/header11.jpg); background-position: center -72px; }

	.wrapper,
	#main .wrapper {
		width: 100%;
		padding: 0px;
	}

	#freesearch {
		bottom: -44px;
		left: 25px;
		right: auto;
		}

	#breadcrumb p 					{ width: 72%; width: 92%; }

	aside,
	#content {
		width: 100%;
		float: none;
		}

	#content h1 					{ font-size: 1.4em; }


	.item 							{ width: 49%; height: 460px; }
	.item p:first-child 			{ height: 220px; }

	.routeblock td > p:first-child	{ height: 198px; }

	/* footer							{ height: auto; } */

	.footermenu ul {
		/* width: 49%; */
		margin-right: 0px;
		-webkit-perspective:1;
		}

	.footermenu,
	footer .logo {
		float: none;
		max-width: initial;
	}

	.footermenu {
		padding: 0.5em;
	}

	
	footer .logo 					{ 
		width: auto; 
		padding-bottom: 18px; 
		margin-bottom: 1em;
	}
	
	footer ul.privacy-statement li a:after {
		display:inline-block;
	}

	footer ul.privacy-statement li a {
		margin-right:0px
	}

	footer ul.privacy-statement { float:none; margin:0 auto; margin-bottom:20px; display: inline-block; }

}

@media only screen and (max-width: 768px) {

	.item 							{ width: 48%; }

	.routeblock td > p:first-child	{ height: 180px; }

	.notification-btn 				{ right:25px; }


}

/* ==> breakpoint mobiles */
@media only screen and (max-width: 640px) {

	body 							{ background-image: url(/grfx/bg-mobile.png); }

	header							{ background-position: center -48px; }

	/*#breadcrumb  					{ display: none; }*/

	#breadcrumb 					{ font-size: 0.8em;	}
	#breadcrumb a:first-child {
		background: url(/grfx/home-breadcrumb.png);
		background-size: auto 20px;
		text-indent: -9999px;
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		}

	.overlist .item {
			width: 100%;
			margin-right: 0px;
		}

	#container 						{ padding: 24px 25px 72px 25px; }

	#content h1						{ font-size: 1.4em; }

	.meldingblock ul {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		}

	.meldingblock li 				{ margin-bottom: 18px; }

	.routeblock table {
		width: 100%;
		float: none;
		}

	.routeblock td > p:first-child	{ max-width: 320px; height: auto; max-height: 198px; }
	

	.item 							{ width: 100%; height: auto; }
	.item p > img					{ max-width: 100%; width: 100%; }

	.footermenu ul {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		-webkit-column-gap: 0px;
		-moz-column-gap: 0px;
		column-gap: 0px;
		}

}

@media only screen and (max-width: 480px) {

	header							{ background-image: url(/grfx/header/mobile/header11.jpg); background-position: center 24px; }

	.elevator-pitch {
		background-color: transparent;

		margin: 0px auto 18px auto;
		padding: 18px;
		}

	.elevator-pitch dt {
		width: 126px;
		height: 90px;
		float: none;
		}

	.elevator-pitch dd				{ margin-left: 0px; }

	#content h1 					{ font-size: 1.2em; }

}

@media only screen and (max-width: 430px) {

.notification-btn 				{ top:150px; }
}


@media only screen and (max-width: 360px) {

	header							{ background-position: center 80px; }

	#freesearch						{ width: 200px; }

	.item p:first-child 			{ height: 180px; }
	.item p > img					{ max-width: 100%; width: 25px; }

}

/* print */
@media print {

	/* display none */
	.mapoptions,
	.maris_share,
	.sharepage-content,
	.detail-pagination,
	.pagination,
	.review-block,
	.choose-other,
	header,
	aside,
	.footermenu,
	#poweredby,
	#freesearch {
		display: none;
		}



	/* buttons */
	.btn {
		background-color: #ff9f1c;
		text-align: center;
		line-height: 54px;
		height: 54px;
		margin-top: 18px;
		display: inline-block;
		}

	.btn a							{ color: #fff; text-decoration: none; padding: 0px 14px 0px 14px; display: block; }

	input[type=submit],
	input[type=button] {
		background-color: #ff9f1c;
		border: 0px;
		font-size: 1em;
		color: #fff;
		min-width: 90px;
		height: 54px;
		padding: 3px 6px 3px 6px;
		display: inline-block;
		cursor: pointer;
		-webkit-appearance: none;
	    -webkit-border-radius: 0px;
		}


	/* standard */
	body {
		background-image: none;
		background-color: #fff;
		}

	body, td {
		font-family: "montserratlight", verdana, helvetica, sans-serif;
		font-size: 0.9em;
		color: #000;
		line-height: 1.6em;
		}

	a								{ color: #6dc04e; text-decoration: none; }

	.wrapper {
		position: relative;
		width: 100%;
		margin: 0px auto;
		padding: 0px;
		display: block;
		}

	/* breadcrumb */
	#breadcrumb {
		background-color: #fff;
		font-weight: bold;
		font-size: 0.9em;
		color: #000;
		line-height: 50px;
		height: auto;
		padding: 0px;
		overflow: hidden;
		}

	#breadcrumb a					{ font-weight: normal; color: #000; }

	/* content */
	#main							{ margin-top: 0px; z-index: 0; }
	#main .wrapper					{ width: 100%; padding: 0px; }

	#container {
		background-color: #fff;
		box-shadow: none;
		min-height: 480px;
		display: block;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 0px;
		}

	#content {
		width: 100%;
		margin: auto;
		}

	#content h1,
	#content ul,
	#content ol,
	#content p {
		margin-bottom: 18px;
		}

	#content ul li,
	#content ol li {
		margin-left: 18px;
		}

	#content h1 					{ font-size: 1.8em; color: #000; }
	#content img					{ max-width: 100%; }


	/* blocks */
	.item {
		box-shadow: none;
	    width: 100%;
	    height: auto;
	    margin-right: 0px;
		margin-bottom: 18px;
		overflow: hidden;
	    float: none;
		}

	.item p,
	.item h3 {
		margin-bottom: 18px;
		padding: 0px;
		}

	.item p:first-child {
		height: 220px;
		margin-bottom: 30px;
		padding: 0px;
		overflow: hidden;
		}

	.item p > img					{ max-width: 100%; border: 0px; }
	.item h3						{ margin-top: 18px; }
	.item a 						{ color: #000; text-decoration: none; display: block; }
	.item a h3 						{ font-size: 1.2em; color: #000; }
	.item .date, .item .area  		{ font-size: 1.1em; color: #000; }
	.item .area  					{ font-size:0.9em; }

	.moredates						{ color: #000; }


	/* footer */
	footer {
		background-color: transparent;
		border-top: 1px solid #000;
		color: #000;
		height: auto;
		padding-top: 6px;
		}

	footer .logo {
		background: none;
		text-align: left;
		width: 100%;
		float: none;
		}

	footer .logo a {
		color: #000;
		text-indent: 0px;
		height: auto;
		display: block;
		}

}


/* tooltips */

a[data-tooltip].top:before, a[data-tooltip].top:after,
span[data-tooltip].top:before, span[data-tooltip].top:after   {
		transform: translateY(10px);
	}
a[data-tooltip].top:hover:before, a[data-tooltip].top:hover:after,
span[data-tooltip].top:hover:before, span[data-tooltip].top:hover:after {
		transform: translateY(0px);
	}


a[data-tooltip].right:before, a[data-tooltip].right:after,
span[data-tooltip].right:before, span[data-tooltip].right:after {
		transform: translateX(0px);
	}

a[data-tooltip].right:hover:before, a[data-tooltip].right:hover:after,
span[data-tooltip].right:hover:before, span[data-tooltip].right:hover:after {
		transform: translateX(10px);
	}


a[data-tooltip].bottom:before, a[data-tooltip].bottom:after,
span[data-tooltip].bottom:before, span[data-tooltip].bottom:after  {
		transform: translateY(-10px);
	}

a[data-tooltip].bottom:hover:before, a[data-tooltip].bottom:hover:after,
span[data-tooltip].bottom:hover:before, span[data-tooltip].bottom:hover:after  {
		transform: translateY(0px);
	}


a[data-tooltip].left:before, a[data-tooltip].left:after,
span[data-tooltip].left:before, span[data-tooltip].left:after {
		transform: translateX(0px);
	}
a[data-tooltip].left:hover:before, a[data-tooltip].left:hover:after,
span[data-tooltip].left:hover:before, span[data-tooltip].left:hover:after {
		transform: translateX(-10px);
	}


a[data-tooltip], span[data-tooltip] {
	position: relative;
    
}

a[data-tooltip]:after, a[data-tooltip]:before,
span[data-tooltip]:after, span[data-tooltip]:before {
		position: absolute;
		visibility: hidden;
		opacity: 0;
		transition: transform 200ms ease, opacity 200ms;
		box-shadow: 0 0 10px rgba(black,0.3);
		z-index: 999;
        font-family: "montserratlight", verdana, helvetica, sans-serif;

	}

a[data-tooltip]:before,
span[data-tooltip]:before {
		content: attr(data-tooltip);
		background: #000;
		color: #fff;
		font-size: 10px;
		font-weight: bold;
		padding: 10px 15px;
		border-radius: 5px;
		white-space: nowrap;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

a[data-tooltip]:after,
span[data-tooltip]:after {
		width: 0;
		height: 0;
		border: 6px solid transparent;
		content: '';
}

a[data-tooltip].show-tooltip:after, a[data-tooltip].show-tooltip:before,
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before,
span[data-tooltip].show-tooltip:after, span[data-tooltip].show-tooltip:before,
span[data-tooltip]:hover:after, span[data-tooltip]:hover:before {
		visibility: visible;
		opacity: 0.85;
		transform: translateY(0px);
}


a[data-tooltip][data-position="top"]:before {
	bottom: 100%;
	left: -130%;
	margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
	border-top-color: #000;
	border-bottom: none;
	bottom: 101%;
	left: calc(50% - 6px);
	margin-bottom: 4px;
}


a[data-tooltip][data-position="left"]:before {
	top: -12%;
	right: 100%;
	margin-right: 10px;
}

a[data-tooltip][data-position="left"]:after {
	border-left-color: #000;
	border-right: none;
	top: calc(50% - 3px);
	right: 100%;
	margin-top: -6px;
	margin-right: 4px;
}


a[data-tooltip][data-position="right"]:before {
	top: -5%;
	left: 100%;
	margin-left: 10px;
}

a[data-tooltip][data-position="right"]:after {
	border-right-color: #000;
	border-left: none;
	top: calc(50% - 6px);
	left: calc(100% + 4px);
}


a[data-tooltip][data-position="bottom"]:before,
span[data-tooltip][data-position="bottom"]:before  {
	top: 100%;
	left: -130%;
	margin-top: 10px;
}

a[data-tooltip][data-position="bottom"]:after,
span[data-tooltip][data-position="bottom"]:after {
	border-bottom-color: #000;
	border-top: none;
	top: 100%;
	left: 5px;
	margin-top: 4px;
}