/*ELEMENTS*/
body{background-color: #E3EBEE;font-family: "jaf-facitweb", sans-serif;}
h1{color: #00285C;font-family: "jaf-facitweb", sans-serif;font-size:42px;font-weight:normal;margin: ;}
h2, h2.media-heading{
	font-size: 32px;
	font-family: "jaf-facitweb", sans-serif;
	font-weight: normal;
	line-height: 1.2;
}
h3{font-size: 24px;line-height:1.2;font-family: "jaf-facitweb", sans-serif;font-weight: bold;}
h4{font-size: 20px;font-family: "jaf-facitweb", sans-serif;font-weight: bold;}
h6{font-size: 12px;font-family: "jaf-facitweb", sans-serif;font-weight: normal;}
p{font-family: "jaf-facitweb", sans-serif;font-size: 16px;}
p.big{color:#313131;font-size: 20px;line-height: 1.4;}
p.date{color:rgba(0,40,92,0.6);font-size: 15px;margin: 8px auto 18px auto;}
blockquote, blockquote p{font-size: 34px; color:#F09101;margin: 20px 0;padding: 0;border-left: 0;}
h2,h2 a:link,h2 a:visited,h2 a:hover,h2 a:active,
h3,h3 a:link,h3 a:visited,h3 a:hover,h3 a:active,
h4,h4 a:link,h4 a:visited,h4 a:hover,h4 a:active{color:#00285C;}

a:link,
a:visited,
a:active,
a:hover{
	color:#00285C;
	text-decoration: none;	
}

/*HEADER*/
#header-wrapper{background-color: #fff;padding: 25px 0;}
#logo{
	display: inline-block;
	width:132px;
	height:74px;
	margin-left: 0;
	margin-right: 40px;
}
#logo a{
	background: transparent url('../img/ggdghor_logo.png') no-repeat top left;
	display: block;
	width:132px;
	height:74px;
	text-indent: -999em;
}
.subtitle{display: inline-block;}
/*COLUMNS*/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
	padding-left:10px;
	padding-right:10px;
}

/*ARTICLE*/
article{background-color:#fff;padding: 40px;min-height: 350px;}
article h2,article h3{margin-top: 0;}
article.orange-bg{
	background:#F09100 url('../img/Device.png') no-repeat bottom -30px right;
	color:#fff;
}
article.orange-bg h3{color:#fff;font-size: 24px;line-height: 1.6;max-width: 250px;}
article.orange-bg .bigtag a:link,
article.orange-bg .bigtag a:visited,
article.orange-bg .bigtag a:hover,
article.orange-bg .bigtag a:active{
	background-color:#E5732C;
}
article.orange-bg .bigtag a:hover{text-decoration: underline;}

#logo-kennisnet{
	background: transparent url('../img/logo-ggd-kennisnet.png') no-repeat top left;
	width:291px;
	height:62px;
	text-indent: -999em;
	padding:0;
	margin: 0 auto 40px auto;
}

.tag{
	background-color: rgba(0,40,92,0.3);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	padding: 1px 10px 0px 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	display:inline-block;
}

.tag a:link,
.tag a:visited,
.tag a:hover,
.tag a:active{color: #fff;}

.bigtag,
.gg-widget-maps .gg-result-ggd .website{margin: 30px 0;}

.bigtag a:link,
.bigtag a:visited,
.bigtag a:hover,
.bigtag a:active,
.gg-widget-maps .gg-result-ggd .website a:link,
.gg-widget-maps .gg-result-ggd .website a:visited,
.gg-widget-maps .gg-result-ggd .website a:hover,
.gg-widget-maps .gg-result-ggd .website a:active{
	background-color:  #F09100;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	border: 0;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 30px;
}

.bigtag a:hover,
.gg-widget-maps .gg-result-ggd .website a:hover{
	background-color:#EC7700;
}

.tag:hover{
	background-color: rgba(0,40,92,1);
}


/*WIDGET*/
.widget-wrapper article form{padding: 40px;text-align: center;}
.widget-wrapper article .gg-form::before{content: url("../img/icon-locatie.svg");}
.widget-wrapper #widget .gg-results{background-color:#F09100;color: #fff;width: auto;box-shadow: 0;-webkit-box-shadow: 0;margin-top: 0;font-size: 18px;}
.widget-wrapper #widget .gg-results h3,
.widget-wrapper #widget .gg-results p,
.widget-wrapper #widget .gg-results .gg-to-form{color: #fff;}
.widget-wrapper #widget .gg-to-form:before {
    font-family: FontAwesome;
    top:0;
    left:0;
	margin-right: 6px;
    content: "\f0d9"; <--- this is your text. You can also use UTF-8 character codes as I do here
}
.gg-widget .gg-tabs{border-radius: 15px;margin: 11px 0 14px 0!important;}
.widget-wrapper .gg-widget .gg-tabs{background-color: rgba(255,255,255,0.6);}
.gg-widget .gg-tabs{background-color: rgba(3,40,92,0.1);border-radius: 20px;display: block;padding: 2px;}
.gg-widget .gg-tabs li{
	background-color: transparent;
	font-family: "jaf-facitweb", sans-serif;
	display: inline-block;
	padding-top: 8px;
	padding-bottom:8px;
	float: none;
}
.gg-widget .gg-tabs a{display: block;font-weight: bold;font-size: 16px;}
.gg-widget .gg-tabs li.gg-tab-active{background-color: #fff;border-radius: 18px;}
.gg-widget .gg-tabs li.gg-tab-ghor a{color:#359F7B;}
.gg-widget .gg-tabs li.gg-tab-ggd a::before{content: url('../img/icon-ggd-locatie.png');padding-right: 7px;}
.gg-widget .gg-tabs li.gg-tab-ghor a::before{content: url('../img/icon-ghor-locatie.png');padding-right: 7px;}
.gg-result-ggd .address{width: 70%;max-width:230px;margin-bottom:12px;}
.gg-result-ggd .phone{width: 40%;margin-bottom:12px;}
.gg-result-ggd .email{width: 40%;margin-bottom:12px;}
.gg-result-ggd .website{margin-top: 32px;clear: left;}
.gg-result-ggd .website a:link,
.gg-result-ggd .website a:visited,
.gg-result-ggd .website a:hover,
.gg-result-ggd .website a:active,
{background-color:#00285C; color:#fff;padding: 10px 15px;display:block;}
.gg-result-ggd .website a:hover{background-color:rgba(0,40,92,0.3);}

#widget{background-color:#F09100;margin-bottom:10px;}
#widget.gg-maps{background-color: transparent;margin-bottom: 40px;}
#widget.gg-maps .gg-maps-overlay{background-color: transparent;}
#widget h2{color: #fff;font-size: 24px; font-weight: bold;}
#widget input{
	background: #fff url("../img/icon-search.svg") no-repeat top 50% left 20px;
	border: 0;
	border-radius: 23px;
	padding: 13px 20px 13px 50px;
}
#widget .gg-widget-maps input{border-radius: 0;width: 380px;outline: none; }
#widget .gg-results{
	background-color: #fff;
	padding: 20px 20px 40px 20px;
	margin-top: 10px;
	width: 380px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 0px;
	box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 0px;
}
.gg-maps-overlay,
.gg-widget-simple{font-family: "jaf-facitweb", sans-serif;font-size: 16px;}
 
.gg-maps-overlay .gg-autocomplete,
.gg-widget-simple .gg-autocomplete{text-align: left;margin-top: 25px;}
.gg-autocomplete li:hover,
.gg-autocomplete li:active, 
.gg-autocomplete li:focus,
.gg-autocomplete li.has-focus{background-color:#EC7700;}
/*TWEETS*/



/*FOOTER*/
footer{background-color:#00285C;color: #fff;margin-top: 32px;padding-top:40px;}
footer h2{font-size: 24px;}
footer h2, footer li{color: #fff;}
footer ul{list-style-type:none;padding-left:0;}
footer li a:link,
footer li a:visited,
footer li a:hover,
footer li a:active{
	background-color:rgba(255,255,255,0.15); 
	padding: 5px 10px;
	display: inline-block;
	margin-bottom:5px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color: #fff;
}
footer li a:hover{
	background-color:rgba(255,255,255,0.25); 
}
footer h2.twitter,
footer h2.facebook{}
footer h2:before{margin-right: 5px;}
footer h2.twitter:before{
    font-family: FontAwesome;
	content: "\f099"; <--- this is your text. You can also use UTF-8 character codes as I do here
    margin-right: 5px;
}
footer h2.facebook:before{
    font-family: FontAwesome;
	content:"\f09a"; <--- this is your text. You can also use UTF-8 character codes as I do here
    margin-right: 5px;
}

footer .footer-links-list li{padding-left: 2px;}
footer .footer-links-list li a:link,
footer .footer-links-list li a:visited,
footer .footer-links-list li a:hover,
footer .footer-links-list li a:active{
	background-color:transparent; 
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: 0 0 0 10px;	
    position:relative;
}

footer .footer-links-list li a:before {
    position:absolute;
    font-family: FontAwesome;
    top:0;
    left:0;
    content: "\f0da"; <--- this is your text. You can also use UTF-8 character codes as I do here
}

footer .nieuwsbrief{margin-bottom:20px;position: relative;height: 80px;}
footer .nieuwsbrief h2{
	background-color:rgba(255,255,255,0.15);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	padding: 10px 15px 10px 25px;
	position: absolute;
	top:0;
	width: 100%;
}
footer .nieuwsbrief h2:before{
	font-family: FontAwesome;
	font-weight: normal;
	top:0;
	left: 0px;
	margin-right: 10px;
	content: "\f003"; <--- this is your text. You can also use UTF-8 character codes as I do here
}

footer .nieuwsbrief h2 a:link,
footer .nieuwsbrief h2 a:visited,
footer .nieuwsbrief h2 a:hover,
footer .nieuwsbrief h2 a:active{color:#fff;}
footer hr{
	display: block; 
	height: 1px;
	border: 0; 
	border-top: 1px solid #264D77;
	margin: 20px auto;
}
footer .nieuwsbrief form{
	display: none;
	margin-top: 20px;
	margin-bottom: 12px;
	position: absolute;
	top:0;
	width: 100%;
}
footer .nieuwsbrief form{
	background-color:#fff;
	border: 0;
	border-radius: 23px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	box-sizing: border-box;
	color: #515151;
	padding: 10px 15px 10px 25px;
}
footer .nieuwsbrief form input[type=email]{
	border: 0;
	color: #515151;
	font-size: 14px;
	width: 70%;
}

footer .nieuwsbrief form input[type=submit]{
	background-color: #F09100;
	border-radius: 21px;
	border: 0;
	color:#fff;
	padding: 9px 15px;
	position: absolute;
	right: 2px;
	top: 2px;
}
footer .nieuwsbrief form input[type=submit]:hover{
	background-color: #EC7700;
}

// Small screens
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 767px) { 
	.wrapper{
		margin-left: 0px;
		width:100%;
		position: absolute;
		overflow: hidden;
	}
	#widget .gg-widget-maps .gg-maps-overlay{padding: 10px;}
	#widget .gg-widget-maps input,
	#widget .gg-results{
		max-width:380px;
		width: 100%;
	}
	#widget .gg-widget-maps .gg-form{
		height: auto;
	}
	#widget .gg-maps-canvas {
		display: none;
	}
}