/*
	Theme Name: Custom Template
	Theme URI: https://www.dink.nl
	Description: Basis voor de template
	Version: 1.0
	Author: DINK
	Author URI: https://www.dink.nl

*/



.font-aktiv-grotesk { font-family: "aktiv-grotesk",sans-serif; }
.font-aktiv-grotesk-thin { font-family: "aktiv-grotesk-thin",sans-serif; }
.font-trilby { font-family: "trilby",serif; }
.font-pressio-condensed { font-family: "pressio-condensed",sans-serif; }


:root {
	--font-aktiv: "aktiv-grotesk",sans-serif;
	--font-aktivthin: "aktiv-grotesk-thin",sans-serif;
	--font-trilby: "trilby",serif;
	--font-pressio: "pressio-condensed",sans-serif;

	--color-black:#111;
	--color-red: #E15450;
	--color-grey: #7D7D7D;	

	--text-320:320px;
	--text-270:270px;
	--text-180:180px;
	--text-92:92px;
	--text-72:72px;
	--text-56:56px;
	--text-42:42px;
	
	--text-p-large:32px;
	--text-p-medium:18px;
	--text-p-small:14px;

	--space-30:30px; 
	--space-45:45px; 
	--space-60:60px; 
	--space-90:90px; 
	--space-150:150px; 
	--space-180:180px; 
	
}





a{
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

/*------------------------------------*\
    MAIN


\*------------------------------------*/
body, html {margin:0;padding:0}
*,*:after,*:before {	-moz-box-sizing:border-box;	box-sizing:border-box;	-webkit-font-smoothing:antialiased;	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;}
html {	font-size:62.5%;}

.clear:before,.clear:after {    content:' ';    display:table;}
.clear:after {    clear:both;}
.clear {    *zoom:1;}

img {	max-width:100%;	vertical-align:bottom;height:auto}

a{text-decoration:none;}


.standaard-content a:not(.btn) {font-weight:bold;color:var(--color-black);text-decoration:underline;}
.standaard-content a:not(.btn):hover, .standaard-content a:not(.btn):focus {color:var(--color-red)}

a:focus {	outline:0;}
a:hover,a:active {	outline:0;}
input:focus {	outline:0;	border:none;}

/*------------------------------------*\
    Fonts
\*------------------------------------*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom:0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {   font-family: var(--font-pressio); margin: 0;color:var(--color-black); font-weight:800;line-height:1.3;text-transform:uppercase}


body {font-size:var(--text-p-medium);line-height:1.6;font-family: var(--font-aktiv);color:var(--color-black);font-weight:normal;}
 


h1, .h1 {font-size:var(--text-h1)}
h2, .h2 {font-size:var(--text-h2)}
h3, .h3 {font-size:var(--text-h3)}
h4, .h4, h5, .h5, h6, .h6 {font-size:var(--text-h4)}




p { margin-top:0;margin-bottom:24px}
.large-content p, .intro-content { margin-top:0;margin-bottom:30px}
p:last-child, .fold-content:last-child {margin:0}


.standaard-content ul:not(.btn-list), .standaard-content ul:not(.btn-list) li, .standaard-content ol {padding:0;margin:0;list-style:none;display:block}
.standaard-content ul:not(.btn-list) li {position:relative;padding-left:28px;margin-bottom:12px;display:flex;width:100%;gap:16px}
.standaard-content ul:not(.btn-list) li:last-child {margin-bottom:0;}
.standaard-content ul:not(.btn-list), .standaard-content ol {margin-bottom:20px;}
.standaard-content ul:not(.btn-list):last-child, .standaard-content ul li:last-child, .standaard-content ol:last-child {margin-bottom:0}
.standaard-content ul:not(.btn-list) li:before {    content: "";    position: absolute;    left: 0;    top: 0;    line-height: 1;    content: "";    background: url(assets/images/icons/check.svg);    width: 17px;    height: 22px;    border-radius: 50%;    display: inline-block;    background-size: contain;    background-repeat: no-repeat;    background-position: center center;}


.standaard-content ol { counter-reset: li}
.standaard-content ol li {display:block;padding-left:20px;position:relative;}
.standaard-content ol li:before{counter-increment: li;content: counter(li)'.'; color: var(--color-red);
  display: inline-block; position:absolute;left:0;top:0;}



/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 1750px;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding: 0 15px;
}

.row {margin-left:-15px;margin-right:-15px;}
.row>* {padding-right:15px;padding-left:15px;}



/*------------------------------------*\
    BUTTON
\*------------------------------------*/
.btn {
    font-size: 24px;
    font-family: var(--font-aktiv);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    line-height: 1;
    padding: 15px 30px;
    background: var(--color-black);
    border-radius: 0;
    min-width: 0;
    text-align: center;
    border: 1px solid var(--color-black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-style: normal;
    cursor: pointer;
    text-transform: none;
    align-items: center;
}
.btn:hover, .btn:focus {color:#fff;background:var(--color-red);border-color:var(--color-red)}

/*------------------------------------*\
    HEADER
\*------------------------------------*/
header {display:flex;position:fixed;top:0;left:0;width:345px;background:#fff;height:100%;padding:60px 35px}
body {background:#e4e4e4}


.dashboard-page {padding:30px;padding-left:375px;}
.brand-logo, .brand-logo a, .brand-logo img {display:block;width:100%;height:auto;}


.login-page {padding:30px;}
.login-screen{position:relative;border-radius: 30px;opacity: 0.85;min-height:calc(100vh - 60px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:30px;}
.login-screen:before {content:"";z-index:2;width:100%;height:100%;left:0;top:0;position:absolute;
 background: linear-gradient(90deg, #B6C92F 10%, #5AB4EA 90%);opacity:.85}

#loginform {}
.login-form {border: 1px solid var(--E4E4E4, #E4E4E4);background:#fff;padding:45px 60px;border-radius:30px;min-height:500px;position:relative;z-index:10;max-width:400px;width:100%;}

.login-form > p {color: #000;text-align: center;font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;margin-bottom:30px}
.login-brand, .login-brand img {display:block;width:100%;height:auto;margin-bottom:30px;}

/*------------------------------------*\
    Footer
\*------------------------------------*/
footer {display:none}


/*------------------------------------*\
    Selection
\*------------------------------------*/
::selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:var(--color-red);
	color:#FFF;
	text-shadow:none;
}