:root {
	
	--primary: #003D58;
	--secondary: #007CB0;
	--dark: #333;
	--white: #fff;
	--radius: 1rem;
}

/* DEMO */

* {transition: linear; transition-duration: 0.5s;  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}

body {background-color: var(--secondary); background-image: url('/dist/img/groot-ammers-bootverhuur.png'); background-size: contain; background-position: center bottom; background-attachment: fixed; background-repeat: no-repeat;}

a {text-decoration: none;}


.logo {font-size: 2.5rem; font-weight: bold; overflow: visible;} 
.logo i {font-size: 3rem; }
.logo span {position: relative; top: -2px;}

img {border-radius: var(--radius);}

.topbar {background-color: var(--primary); color: #fff; font-size: 0.75rem;}
.topbar a {color: inherit;}

.btn-primary {background-color: var(--primary);}
.btn-primary:hover {background-color: var(--secondary); }

.container.white {border-radius: var(--radius); background-color: var(--white);}


header {position: relative; background-color: #fff;}
header::after {position: absolute; bottom: -80px; background-image: url('/dist/img/header.svg'); background-repeat: no-repeat; background-size: cover; width: 100%; content:''; height: 95px; background-position: center bottom; z-index: 1; max-width: 100%;} 

header .contact-btns {position: absolute; bottom: -55px; right: 5rem; z-index: 50;}
header .btn,
header .btn:hover {border-color: #fff; border-width: 2px;}

.navbar-toggler {color: #fff; background-color: var(--primary); display: block;}
.navbar-nav {z-index: 500;}
.navbar-nav li a {color: var(--primary); overflow: visible;}
.navbar-nav li {}
.navbar-nav li ul {height: 0px; transition: ease-in-out; position: absolute; overflow: hidden; background-color: var(--primary); color: #fff; border-radius: var(--radius); list-style-type: none; margin: 0px; opacity: 0;}
.navbar-nav li ul li a {color: #fff;}
.navbar-nav li:hover ul {height:auto; padding: 1.2rem; opacity: 1;}


.display-3 {font-size: 1.1rem; font-weight: bold;}

p {line-height: 160%; font-size: 1rem; margin: 1.5rem 0rem; color: #333;}


footer::before {content:''; display: block; width: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: 100%; position: absolute; top: -270px; background-image: url('/dist/img/footer.svg'); height: 270px; }
footer {background-color: var(--white); position: relative; margin-top: 250px;}
footer .display-3 {color: var(--primary);}
footer .footend {font-size: 0.75rem; color: var(--primary);}
footer p {margin: 0.5rem 0rem; font-size: 0.8rem; color: var(--secondary);}
footer .footnav {list-style-type: none; margin: 0px; padding: 0px; margin: 0.5rem 0rem;} 
footer .footnav li {font-size: 0.8rem;}
footer a {color: var(--secondary);}
footer .btn i {margin-left: 0px; margin-right: 0.3rem;}
footer hr {border-bottom: 3px dotted var(--primary); background-color: #fff; border-color: var(--primary);}

/* EO DEMO */


.card {border:none;}
.card:hover {transform: scale(1.05);}

h1, .display-1 	{font-size: 1.6rem; font-weight: bold;}
h2, .display-2 	{font-size: 1.5rem; font-weight: bold;}
h3, .display-3 	{font-size: 1.4rem; font-weight: bold;}
h4, .display-4 	{font-size: 1.2rem; font-weight: bold;}
h5, .display-5 	{font-size: 1.1rem; font-weight: bold;}
h6, .display-6 	{font-size: 1rem; font-weight: bold;}


/* FORM */

label {font-size: 0.85rem; font-weight: bold; margin-bottom: 0.3rem;}

/* EO FORM */



.navbar-nav {}
.navbar-nav li {overflow: visible;}
.navbar-nav li.here a {font-weight: bold;}
.navbar-nav li a {position: relative; margin-right: 1.5rem; padding-bottom: 5px; text-transform: uppercase;}
.navbar-nav li.last a {margin-right: 0px;}


.navbar-mobile {list-style-type: none; margin: 0px; padding: 0px; padding: 1rem; background-color: #f4f4f4; margin-top: 0.5rem; border-radius: var(--radius);}
.navbar-mobile li {}
.navbar-mobile li a {padding: 0.5rem 1rem; color: var(--primary); display: block; margin-bottom: 0.5rem; border-radius: var(--radius);}
.navbar-mobile li ul {list-style-type: none;}
.navbar-mobile li ul li a {font-size: 0.9rem; color: var(--secondary);}

.block--contact {}
.block--contact iframe {max-width: 100%; height: 100%;}


.theme--lichtgrijs {background-color: #f4f4f4;}
.theme--donker {background-color: var(--dark); color: #fff;}
.theme--donker p {color: #fff;}

img.noradius {border-radius: 0px!important;}