/*
Theme Name: Drugs
Theme URI: http://www.lemon.nl
Description: 
Author: Roeland ten Holder | Lemon Factory
Author URI: roeland@lemon.nl
*/

/*********** RESET ***********/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote th, td { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
table, thead, tbody, tfoot, tr, th, td { width: auto; height: auto; margin: 0; padding: 0; border: none; border-collapse: inherit; border-spacing: 0; border-color: inherit; vertical-align: inherit; text-align: left; font-weight: inherit; -webkit-border-horizontal-spacing: 0; -webkit-border-vertical-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
ul 		 { list-style-type: none; }
li		 { list-style-type: none; }
p > ul > li	{ list-style-type: disc; }
p > ol > li	{ list-style-type: decimal; }
ol 		 { margin-left: 0px; margin-bottom: 10px; }
img 	 { border: 0 !important; outline: none; }
html 	 { margin: 0; height: 100%; }
a	 		 { outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
button { outline: none; border: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
:focus { outline: none;}
input  { -moz-border-radius: 0; -webkit-border-radius: 0; outline: none; }
.clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear { display: block; }
html[xmlns] .clear { display: block; }
* html .clear { height: 1%; }


.border {
	border: 1px solid white;
	min-height: 20px;
}


/*********** BOOTSTRAP RESET ***********/
* { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: 0 !important; -moz-box-shadow: 0 !important; box-shadow: 0 !important; }


/*********** ALGEMEEN ***********/

@font-face { font-family: 'DAX Bold'; 		src: url('/fonts/dax-bold-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DAX Medium'; 	src: url('/fonts/dax-medi-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'DAX Regular';	src: url('/fonts/dax-regu-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }


body {
	font: normal normal 14px/18px Arial, Helvetica, Verdana, sans-serif;
	color: #000;
	background: #83c7ea url('images/back5.gif') 0 -60px no-repeat;
	overflow-x: hidden;
}

h1		{	font: normal normal 24px/32px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif; color: #db001c; padding: 0 0 26px 0; text-transform: uppercase; }
h2 		{	font: normal normal 24px/24px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif; color: #3b73b4; padding: 0 0 0.5em 0; text-transform: uppercase; }
h3 		{	font: normal normal 34px/48px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif; color: #3b73b4; padding: 0 0 1em 0; }
h4 		{	font: normal normal 34px/48px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif;	padding: 0 0 10px 0; text-transform: normal; }
h5 		{	font: normal normal 60px/70px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif;	padding: 0 0 16px 0; margin: -15px 0 0;	}
h1 a			{ text-decoration: none; }

.small, 
.small a 	{ text-align: left; font: normal normal 11px/16px Arial, Helvetica, Verdana, sans-serif; color: #444444; }
.small a 	{ padding: 0px;}
.right 		{ float: right; }
.left 		{ float: left; }
.hidden		{ display: none; }
.content ul li { list-style-type: disc; margin-left: 1.2em;}
.content ol li { list-style-type: decimal; margin-left: 23px;}
.content ul,
.content ol 		{ padding-bottom: 1.5em; }
a					{ color: #3b73b4; text-decoration: none; }
a:hover		{ color: #db001c; text-decoration: none; }
.pull-left.gap,
.alignleft 			{ float: left !important; text-align: left; margin: 4px 20px 20px 0; }
.pull-right.gap,
.alignright 		{ float: right !important; text-align: left; margin: 4px 0 20px 20px; }
.center					{ text-align: center; margin: 0 auto; }
.hover:hover 		{ opacity: 0.8; cursor: pointer; }
p 							{ margin-bottom: 24px; }
p:last-child 		{ margin-bottom: 20px; }
hr							{ border-color: #db001c; margin: 20px 0 40px; }
img							{ padding: 0 !important; max-width: 100%; }
.tops 					{ margin-top: 20px; }
.bottoms 				{ margin-bottom: 20px; }



/*********** CONTAINERS ***********/

.page {
	position:	relative;
	width: 100%;
	height: 100%;
	margin: 0;
}




/*********** LEGENDA ***********/


.legenda-bread {
	color: #3b73b4;
	float: right;
}

.legenda-close {
	position: absolute;
	    left: 70%;
	top: 20px;
	color: #ffffff;
	z-index: 999;
}

.legenda-close:hover {
	cursor: pointer;
}

.legenda-bread:hover {
	cursor: pointer;
	color: #db001c;
}

#legenda {
	width: 0px;
	max-width: 95%;
	height: 100%;
	position: absolute;
	right: 0px;
	top: 0;
	z-index: 99999;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	margin: 0;
	background: rgba(55,100,170,0.9);
	transition: 0.5s;
	overflow: hidden;
}

#legenda h2 {
	color: #ffffff;
}

.legenda-inner {
	width: 420px;
	overflow: hidden;
}

#legenda .content {
	width: 200px;
	max-width: 45%;
	padding-top: 23px;
	padding-bottom: 30px;
	line-height: 30px;
	color: #ffffff;
	overflow: hidden;
	float: left;
}

#legenda .content-left {
	padding-left: 20px;
	padding-right: 10px;
}

#legenda .content-right {
	padding-left: 10px;
	padding-right: 10px;
}

.legenda-img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}


.fa-question-circle {
	margin-right: 4px;
}


/*********** CONTAINERS ***********/

.container {
	width: 100%;
	max-width: 960px;
	margin-left: 0;
	margin-right: 0;
	padding: 0 50px;
}

.container.bread {
	padding-top: 30px;
}

.container.content {
	padding-top: 50px;
}

.btn-start {
	font: normal normal 24px/32px 'DAX Bold', Arial, Helvetica, Verdana, sans-serif; color: #ffffff;
}




.video-wrapper {
	max-width: 100%;
}


.flag,
ul li.cat-item {
	width: 90px;
	float: left;
	padding: 0;
	margin: 0 12px 20px 0;
	min-height: 130px;
}

.flag {
	padding: 0;
	list-style: none;
	text-align: center;
}



.flag img {
	margin: 0 0 10px;
}

.flag a img {
	opacity: 0.6;
}


.flag a:hover img {
	opacity: 1;
}

ul li.cat-item {
	list-style: none;
}


ul li.cat-item a {
	text-align: center;
	padding: 90px 0 0 0;
	background-repeat: no-repeat;
	display: inherit;
}


.cat-icon {
	float: left;
}
.cat-title {
	margin: 25px 0 35px;
}

.icon_drank a 				{ background-image: url('images/icon_drank.png');					background-position: center center; }
.icon_cannabis a 			{ background-image: url('images/icon_cannabis.png'); 			background-position: center center; }
.icon_cocaine a 			{ background-image: url('images/icon_cocaine.png');  			background-position: center 17px; }
.icon_xtc a 					{ background-image: url('images/icon_xtc.png');   				background-position: center 23px; }
.icon_speed a 				{ background-image: url('images/icon_speed.png?v=2');   			background-position: center center; }
.icon_heroine a 			{ background-image: url('images/icon_heroine.png');  			background-position: center center; }
.icon_tabak a 				{ background-image: url('images/icon_tabak.png');   			background-position: center center; }
.icon_brain a 				{ background-image: url('images/icon_brain.png');   			background-position: center center; }
.icon_gamen a 				{ background-image: url('images/icon_gamen.png');   			background-position: center center; }
.icon_ghb a 					{ background-image: url('images/icon_ghb.png'); 					background-position: center center; }
.icon_gokken a 				{ background-image: url('images/icon_gokken.png'); 				background-position: center center; }
.icon_internet a 			{ background-image: url('images/icon_internet.png'); 			background-position: center center; }
.icon_medicijnen a 		{ background-image: url('images/icon_medicijnen.png'); 		background-position: center center; }
.icon_tripmiddelen a 	{ background-image: url('images/icon_tripmiddelen.png'); 	background-position: center center; }




.nav-container {
	margin: 30px auto;
}

.nav-container .fa-chevron-left,
.nav-container .fa-chevron-right {
	vertical-align: middle;
	margin: -2px 8px 0 0;
	font-size: 28px;
	line-height: 32px;
	color: #3b73b4;
}

.nav-bullet {
	margin: 0 8px 0 0;
	font-size: 18px;
	line-height: 32px;
	color: #3b73b4;
}


/*
.nav-bullet.inname-snuiven 	{ color: #74a400; }
.nav-bullet.inname-spuiten 	{ color: #e2b821; }
.nav-bullet.inname-roken 		{ color: #ab73bd; }
.nav-bullet.inname-eten 		{ color: #3cc0d0; }
*/

/* .inname-snuiven*  */
a.nav-bullet[class^="inname-nasaal"],	a.nav-bullet[class*="inname-nasaal"] 				{ color: #74a400; }
a.nav-bullet[class^="inname-huid"],	a.nav-bullet[class*="inname-huid"] 						{ color: #e2b821; }
a.nav-bullet[class^="inname-inhalatie"], 	a.nav-bullet[class*="inname-inhalatie"] { color: #ab73bd; }
a.nav-bullet[class^="inname-oraal"], 		a.nav-bullet[class*="inname-oraal"] 			{ color: #3cc0d0; }


.btn-normaal:hover,	.btn-normaal	{ background-color: #3b73b4; border-color: #3b73b4; }
.btn-snuiven:hover, .btn-snuiven 	{ background-color: #74a400; border-color: #74a400; }
.btn-spuiten:hover, .btn-spuiten 	{ background-color: #e2b821; border-color: #e2b821; }
.btn-roken:hover,	.btn-roken 			{ background-color: #ab73bd; border-color: #ab73bd; }
.btn-eten:hover,	.btn-eten 			{ background-color: #3cc0d0; border-color: #3cc0d0; }

.btn-inname:hover,
.btn-normaal:hover,
.btn-snuiven:hover,
.btn-spuiten:hover,
.btn-roken:hover,	
.btn-eten:hover { opacity: 0.8; }



.btn-inname {
	margin: 0 10px;
}


/* Tooltip container */
.tooltip.top .tooltip-inner {
	background: #3b73b4;
	padding: 5px 15px;
}
.tooltip.top .tooltip-arrow {
	border-top-color: #3b73b4;
}




/*********** RESPONSIVE ***********/

.desktop 	
.mobile, .mobilebut	{ display: none; }

@media all and (max-width: 800px) {
	.desktop 	{ display: none; }
	.mobile 	{ display: block; }
}

@media all and (max-width: 480px) {
	.container {
		padding: 0 25px;
	}
	#legenda .content {
		line-height: 28px;
	}
	#legenda .content-left {
		padding-left: 20px;
		padding-right: 5px;
	}
	#legenda .content-right {
		padding-left: 5px;
		padding-right: 5px;
	}
}