/*==============================================
Stylesheet Marc Web Services 3.2
Auteur: Marc Luijten
Datum: 04-11-2021
Aanpassingen t.b.v. mobiele weergave
18-01-2022 - kleine aanpassingen contact pagina
===============================================*/

/* FONT STYLES */

@charset "utf-8";

@import "../webfonts/roboto/style.css";
@import "../webfonts/opensans/style.css";

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
	font-family: "Open Sans Regular",sans-serif,arial;
	color: #4a4a4a;
}

h1, h2, h3 {
	font-family: "Roboto Regular",sans-serif,arial;	
	color: #1c475c;
}

/* Algemene stijlen */

a:link,a:visited {
	color: #1c475c;
}
 
a:hover {
	text-decoration: underline;
}
 
.img-fluid{
	max-width: 100%;
	height: auto;
}

.tekstblok{
	background-color: #F2F2F2;
	padding: 10px 10px 1px 10px;
	max-width: 600px;
	margin-top: 25px;
}
.verwijzing {
	margin-top: 40px;
}
.infokleur {
	color: #9a9a9a;
}

div.tooltip {
	font-family: "Open Sans Regular",sans-serif,arial;
	font-size: 14px;	
}
 
/* MEDIA QUERIES */

@media (min-width: 1600px) {
	#mapsimage {
		height: 500px;
	}		
}

@media (min-width: 1200px) {
	#mapsimage {
		height: 500px;
	}
	.services {
		margin-top: 68px;
	}	
}

@media (max-width: 1199px) and (min-width: 992px){	
	.services {
		margin-top: 80px;
	}	
}

@media (min-width: 992px) {
	.navbar-nav > li > a {
		padding-left: 15px;
		padding-right: 15px;
	}
	.featurette-image{
		margin-top: 10px;	  
	}
	.geentopmarge{
		margin-top: 0px;
	}
	#mapsimage {
		height: 400px;
	}		
}

@media (max-width: 991px) {
	.image-vindbaar, .image-webdesign{
		margin-top: 20px;
	}
}

@media (max-width: 991px) and (min-width: 768px){
	.service-content h2{
		font-size: 25px;
	}
	.services {
		margin-top: 90px;
	}
}

@media (min-width: 768px) {
	/* Navbar positioning */
	.navbar-wrapper {
		margin-top: 20px;
	}
	.navbar-wrapper .container {
		padding-right: 15px;
		padding-left: 15px;
	}
	.navbar-wrapper .navbar {
		padding-right: 0;
		padding-left: 0;
	}
	
	.navbar-wrapper .navbar {
		border-radius: 4px;
	}
	.navbar {
		font-size: 16px;	
	}
	.navbar-nav > li > a {
		min-height: 72px;
		padding: 25px 10px 0 10px;
	}
	.navbar-nav {
		float:right;
	}
	.navbar-fixed-top{
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}	
	/* Koppen */
	h1.home-heading, h1.project-heading, h1.featurette-heading, h1.contact-heading {
		font-size: 40px;
	}
	h2.home-heading, h2.project-heading, h2.webdesign-heading {
		font-size: 22px;
	}
	h2.featurette-heading, h2.portfolio-heading {
		font-size: 30px;
	}
	/* tekst */
	.lead, .list {
		font-size: 17px;
	}
	/* Privacy pagina*/
	h1.privacy-heading {
		font-size: 25px;
		text-align: center;
		margin-bottom: 25px;
	}
	h2.privacy-heading {
		font-size: 20px;
	}
	.prvacytext{
		font-size: 15px;  
	}
	#mapsimage {
		height: 350px;
	}
	.topcontent {
		margin-top: 100px;
	}
	.image-ontwerp{
		margin-top: 20px; 
	}
	.service {
		position: relative;
		display: block;
		margin: 0 auto;
		background-color: transparent;
		text-align: center;
		max-height: 260px;
		max-width: 260px;  
	}
	.service:after {
		display: block;
		padding-bottom: 100%;
		width: 100%;
		border-radius: 50%;
		background-color: rgba(222, 144, 46, 0.8);
		content: "";
	}
	.service-inner {
		position: absolute;
		top: 5%;
		bottom: 5%;
		left: 5%;
		width: 90%;
		height: 90%;	
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 1.0); 
	}
	.service-icon {
		height: 54px;
		padding-top: 10px;
	}
	.service-icon > h2 {
		display: none;
	}
	.service-content > h2 {
		display: block;
	}
	.service-content {
		padding: 1em;
	}
}  

@media (max-width: 767px) {	
	h2.home-heading, h2.project-heading, h2.webdesign-heading, h2.contact-heading {
		font-size: 20px;
	}	
	h2.featurette-heading, h2.portfolio-heading {
		font-size: 25px;
	}	
	.lead, .list {
		font-size: 15px;
	}
	.panelwrapper{
		width: 100%;
		text-align: center;
		padding: 10px;
	}
	.panel, .offerte{
		margin: 0 auto;
	}
	.topcontent {
		margin-top: 80px;
	}
	.services {
		margin-top: 30px;
		padding-left: 0px!important;
		padding-right: 0px!important;
	}
	.tekstblok{
		margin-left: 10px;
		margin-right: 10px;
	}
	.service {
		margin-top: 30px!important;
	}
	.service {
		position: relative;
		display: block;
		margin: 0 auto;
		background-color: transparent;
		text-align: center;
		max-height: 100px;
		width: 300px;  
	}
	.service:after {
		display: block;
		width: 300px;
		height: 100px;
		border-radius: 5px;
		background-color: rgba(222, 144, 46, 0.8);
		content: "";
	}
	.service-inner {
		position: absolute;
		top: 5px;
		bottom: 5px;
		left: 5px;
		width: 290px;
		height: 90px;	
		border-radius: 2.5px;
		background-color: rgba(255, 255, 255, 1.0); 
	}
	.service-icon {
		height: 54px;				
		vertical-align: middle;
	}
	.service-icon > img {
		margin-left: 10px;
		margin-top: -10px;
	}
	.service-icon > h2 {
		display: inline-block;
		margin: 12px auto;
		font-size: 25px;
	}
	.service-content > h2 {
		display: none;
	}
	.service-content {
		padding: 0;		
		vertical-align: middle;
	}
	.nopadding {
		padding-left: 0px;
		padding-right: 0px;
	}
}

@media (min-width: 480px) {
	#mapsimage {
		height: 325px;
	}
}
 
/* CUSTOMIZE THE NAVBAR */

/* Special class on .container surrounding .navbar, used for positioning it into place. */

.navbar-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */

.navbar-wrapper > .container {
	padding-right: 0;
	padding-left: 0;
}
.navbar-wrapper .navbar {
	padding-right: 15px;
	padding-left: 15px;
}
.navbar-wrapper .navbar .container {
	width: auto;
}
.navbar-brand{
	padding: 0px;
	margin: 0px;
}
.navbar, .navbar-header {
	min-height: 75px;
	font-family: 'Roboto', sans-serif;
	background-color: #fff;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: -5px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background: none;
	color: #1c475c;
	font-weight: bold;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #1c475c;
}	
.navbar-default .navbar-nav > li > a {
    color: #5a5a5a;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

/* dropdown */

.dropdown-menu > li > a {
	color: #5a5a5a;
	line-height: 2.5;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
	color: #1c475c;
	background-color: transparent;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background: none;
	color: #1c475c;
	font-weight: bold;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
	background: none;
}	   

/* HEADERIMAGE */

#headerimage-home {
	background: transparent url(../images/header-marcwebservices.jpg) no-repeat top;
	height: 500px;
	margin-bottom: 0px;
}

#headerimage-webdesign {
	background: transparent url(../images/header-webdesign.jpg) no-repeat top;
	height: 500px;	
	margin-bottom: 0px;
}

#headerimage-hosting {
	background: transparent url(../images/header-hosting.jpg) no-repeat top;
	height: 500px;
	margin-bottom: 0px;
}

#headerimage-onderhoud {
	background: transparent url(../images/header-onderhoud.jpg) no-repeat top;
	height: 500px;	
	margin-bottom: 0px;
}

#headerimage-contact {
	background: transparent url(../images/header-contact.jpg) no-repeat top;
	height: 200px;	
	margin-bottom: 0px;
}

/* MARKETING CONTENT */


.marketing .col-lg-4 {
	margin-bottom: 20px;
	text-align: center;
}
.marketing h2 {
	font-weight: normal;
}
.marketing .col-lg-4 p {
	margin-right: 10px;
	margin-left: 10px;
}

/* afstand tussen marketingblokken*/

.marketing, .project {
	padding-top: 20px;
	padding-bottom: 20px;
	margin: auto;
	max-width: 600px;
}

/* Featurettes */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */

.featurette-heading, .project-heading, .home-heading, .contact-heading {
	font-weight: 300;
	margin-top: 0px;
}

/* Koppen */

h1.home-heading, h1.project-heading, h1.contact-heading {
	text-align: center;
	margin: 20px 0px 20px 0px;
}

h2.home-heading, h2.project-heading, h2.contact-heading {
	text-align: center;
	margin: 10px 0px 20px 0px;
}

h2.webdesign-heading {	
	text-align: center;
	margin: 10px 0px -10px 0px;
}

.topcontent > p {
	color: #fff;
	font-size: 100px;
}

.offerte {
	background-color: #fff;
	color: #1c475c;
	text-align: center;
	padding: 30px 10px 10px 10px;
	border: 1px;
	border-radius: 5px;	
}

.offerte {
	max-width: 385px;
}

.offerte-home {
	max-width: 285px;
	margin: 0px auto;
}

h2.korting {
	margin-top: 20px;
}

/*=============================================================
Keuze-circels op homepagina en webhosting pagina
Aangepast naar rechthoeken voor mobiele apparaten op 04-11-2021
Afhandeling classes service... en bij MEDIA QUERIES
===============================================================*/

.service:hover::after {
	background-color: rgba(222, 144, 46, 1.0);
}

.service-inner a:hover, .service-inner a:visited, .service-inner a:focus {
	text-decoration: none;
}

.service-wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.service-content {
	display: table-cell;
	/* padding: 1em; */
	vertical-align: middle;
}

/* Webdesignpagina */

div.carousel {
	height: auto;
	width: 100%;
	margin-bottom: 30px;
}

div.carousel-inner {
	margin: 0 auto;
	max-width: 640px;
}

div.carousel-inner > .item {
	margin: 0 auto;
	max-width: 640px;
	/* zoom carousel-items bij mouse hover */
	/* transition: transform .5s ease-in-out;
	transform-origin: 50% 50%; */
}

/* .carousel-inner > .item:hover {
	transform: scale(1.25) translateY(10%);
} */

.carousel-inner > .item > img {
	height: auto;
}

.carousel-control.left, .carousel-control.right {
	background-image: none;
}

.carousel-control {
	color: #888888;
}

.carousel-control:focus, .carousel-control:hover {
	color: #bbbbbb;
}

h2.portfolio-heading {
	text-align: center;
	margin-bottom: 20px;
}

/* Webhosting pagina */

.panel {
	margin-top: 20px;
	max-width: 360px;
}

.panel-body {
	background-color: #F2F2F2;
}

.panel-heading {
	font-size: 20px;
	text-align: center;
}

.panel-subheading {
	font-size: 16px;
	text-align: center;
}

.panel-heading, .panel-subheading {
    color: #1c475c;
	background-color: #F2F2F2;
}

.spec {
	padding: 10px 10px;
}

.bestel, .bekijk, .verzend {
	padding: 15px 10px;
	text-align: center;
}

.verzend {	
	max-width: 285px;
	margin: 0px auto;
}

.bestel > a:link,.bestel > a:visited, .bekijk > a:link,.bekijk > a:visited {
	color: #fff;
}

.btn-bestel, .btn-bekijk, .btn-verzend {
	font-size: 18px;
    background-color: #de902e;
    border-color: #de902e;
	width: 100%;
}

.btn-verzend {
	color: #fff;
}

.btn-bestel:hover, .btn-bekijk:hover, .btn-verzend:hover {
    background-color: #fba437;
    border-color: #fba437;
}

.bestel > a:hover, .bekijk > a:hover {
	color: #5a5a5a;
}

/* Projectafbeeldingen */

.dim {
	transition: .5s ease;
	opacity: 0.7;
}

.nodim {
	transition: .5s ease;
	opacity: 1;	
}

/* Formulieren*/

#naam2, #email2 {
	display: none;
}

.container-contact {
    margin-right: auto;
    margin-left: auto;
}

address {
	font-size: 16px;
	line-height: 2;
}

.contactgegevens{
	background-color: #fff;
	height: 32px;
}

/* Uitlijning adres elementen */
.midden {
	text-align: center;
}
.rechts {
	text-align: right;
}

#mapsimage {
	display: block;
    height: 325px;
	margin-bottom: 0px;
	background: transparent url(../images/maps.jpg) no-repeat bottom;
	box-sizing: border-box;	
}

.lessbotmargin {
	margin-bottom: 5px;
}

.nobotmargin {
	margin-bottom: 0px;
}

input[type="checkbox"], input[type="radio"] {
    margin: 4px 4px 0 0;
}

div.regular label {
	font-weight: 400;
}

/* Privacy en voorwaarden pagina */

.privacy {
	padding: 0px 30px 0px 30px;
}

.voorwaarden {
	padding: 0px 30px 0px 30px;
}
  
h1.privacy-heading, h1.voorwaarden-heading {
	font-size: 25px;
	text-align: center;
	margin-bottom: 25px;
}

h2.privacy-heading, h2.voorwaarden-heading {
	font-size: 20px;
}

h2.voorwaarden-heading {
	text-align: center;
}

.prvacytext, voorwaardentext{
	font-size: 15px;  
}

div.voorwaarden li {
	 margin-bottom: 15px;
}

p.voorwaarden-subheading {
	text-align: center;
}

/* Footer */

.footer {
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid;
	border-color: #1c475c;
	background-color: #F2F2F2;
	color: #1c475c;
}

footer a:link, footer a:visited {
	color: #1c475c;
}