body{
	background: rgba(225, 225, 225, 0.75);
	color: #333;
	font-family: "Trebuchet MS",Calibri, sans-serif;
	font-size: 15px;
	margin: 0px;
	padding: 0px;
	z-index: 9999999999;
}

progress {
	display: none;
}

.loadscreen {
	width: -webkit-fill-available;
    height: -webkit-fill-available;
    position: fixed;
    padding: 20% 0px 50%;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    top: 0px;
    z-index: 9999999;
}
	.loader {
		border-radius: 50%;
		border-top: 16px solid #0400c5;
		box-shadow: 0px 5px 10px rgba(57, 76, 108, 0.4);
		width: 100px;
		height: 100px;
		margin: 25px auto;
		background: #ff9600;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}
		@-webkit-keyframes spin {
		 0% { -webkit-transform: rotate(0deg); }
		 100% { -webkit-transform: rotate(360deg); }
		}

		@keyframes spin {
		 0% { transform: rotate(0deg); }
		 100% { transform: rotate(360deg); }
		}	

.shape-wrapper {
	display: none;
}
	
nav, .nav {
	position: fixed;
	font-size: 16px;
	font-weight: bold;
	width: 85px;
	margin: 0px;
	z-index: 950;
	overflow-x: hidden;
	overflow-y: auto;
	height: -webkit-fill-available;
	color: rgba(57, 76, 108, 1);
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.75);
}
	nav li {padding: 10px 15px}
		nav li a,nav li a:hover {color: rgba(57, 76, 108, 1) !important;}
	nav img {padding-left: -100px; opacity: 0;}
	nav:hover {
		width: fit-content;
		height: -webkit-fill-available;
		box-shadow: 0px 0px 250px rgb(57, 76, 108);
		background: rgba(255, 255, 255, 0.99) !important;
		background: #fff;
		backdrop-filter: none !important;
	}	
		nav:hover img {padding-left: 10px; opacity: 100; transition-duration: 1s;}
		nav:hover .submenu {opacity: 100; margin-top: 0px; transition-duration: 0.5s;}
		nav:hover .menutext {display: unset;}
		nav:hover .footerMenu {display: unset;}				

	nav ul {
		list-style: none;
		padding: 0px;
	}

	nav .button, .nav .button {
		-webkit-animation-duration: 1s; 
		animation-duration: 1s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both;
		-webkit-animation-name: bounce; 
		animation-name: bounce;
		border-radius: 0px;
		box-shadow: unset;
	}

	.from_top, .from_top {
		-webkit-animation-duration: 1s; 
		animation-duration: 1s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both;
		-webkit-animation-name: from_top; 
		animation-name: from_top;
	}

	nav .material-icons {font-size: 35px; line-height: unset; padding-right: 10px;}
	nav .menutext {padding: 10px; display: none;}
	nav .menuIcon {display: none;}
	nav:hover .footerMenu {display: none;}
	nav a {border-bottom: 1px solid transparent !important; padding-bottom: 15px; font-weight: normal;}
	nav a:hover {border-bottom: 1px solid rgba(57, 76, 108,1) !important;}
	
	.rightmenu {
		position: fixed;
		right: 0px;
		top: 0px;
		width: fit-content;
		z-index: 999999;
		padding: 10px;
		background: #2420cf !important;
	}
		.rightmenu:hover {padding: 10px}
		.rightmenu .button {width: -webkit-fill-available; box-shadow: none !important;}
		.rightmenu .menutext {display: none;}
		.rightmenu:hover .menutext {display: block;}
		
	.navSettings {
		background: #aab5c8;
		border-radius: 25px;
		text-align: center;
		padding: 10px;
		color: rgba(57, 76, 108, 1) !important;
		line-height: 70px;
	}
		.navSettings a, .navSettings button {
			border: 0px;
			background: transparent;
			padding: 20px;
			border-radius: 20px;
			color: rgba(57, 76, 108, 1) !important;
		}
		.navSettings .buttonActief, .navSettings a:hover,  .navSettings button:hover{
			background: #fafafa;
			font-weight: bold;
		}

main, .main {
  min-height: 500px;
  padding: 50px 50px 50px 135px;
  margin: 0px
}
	.splitBox {
		display: flex;
		flex-wrap: wrap;
		width: -webkit-fill-available;
		overflow: hidden;
		justify-content: space-between;
		margin: 25px 0;
		border-radius: 50px;
	}
		.splitBox .center {text-align: center;}
		
		.splitScreen-1 {width: 95%;}
		.splitScreen-2 {width: 38%;}
		.splitScreen-3 {width: 20%;}
		.splitScreen-4 {width: 13%;}
		
		.splitScreen-1,.splitScreen-2,.splitScreen-3, .splitScreen-4 {
			margin: 2%;
			padding: 4%;
			overflow: hidden;
			border-radius: 10px;
			animation: 1s lineUp ease-in-out;
		}
			h2 small {color: #ccc; font-size: 16px;}
			
		.splitScreen-low {
			padding: 0 2%;
			margin: 0 2% !important;
		}
			
		.bleu .splitScreen-1, .bleu .splitScreen-2, .bleu .splitScreen-3, .bleu .splitScreen-4 {
			background: rgba(250, 250, 250, 0.8);
			box-shadow: unset !important;
		}
			.blue {
				background: url(https://123betalen.com/images/new/BodyBG@1x.svg) center center no-repeat;
				color: #fff;
				background-size: cover;
			}
			.transparant {background: none;}
				.transparant .textshadow {color: #333 !important; text-shadow: none !important}
			
			.whitebox {background: rgb(250, 250, 250);}
				.whitebox .splitScreen-1, .whitebox .splitScreen-2, .whitebox .splitScreen-3, .whitebox .splitScreen-4, .whitebox .splitScreen-1:hover, .whitebox .splitScreen-2:hover, .whitebox .splitScreen-3:hover, .whitebox .splitScreen-4:hover {background: transparent !important; box-shadow: unset !important;}	
		
.editor {
	border: 1px solid #ccc;
	border-radius: 0px 0px 10px 10px;
	padding: 10px;
	background: #fff;
}
	.editor:hover {
		border: 1px solid #333;
		background: #f2f2f2;
	}
	
	.editRow {
		background: #ccc;
		border-radius: 10px 10px 0px 0px;
		margin-top: 10px;
		padding: 10px;
	}
		.editRow button {
			padding: 10px 20px;
			font-size: 18px;
		}
	

#popupscreen {
	position: fixed;
	width: 100%;
	height: -webkit-fill-available;
	background: rgba(0,0,0,0.7);
	z-index: 950;
	top: 0;
	left: 0;
}
	.popup, .popupbig, .popupwidth {
		width: 50%;
		min-height: 25%;
		left: 25%;
		top: 20%;
		padding: 0px;
		text-align: center;
		position: fixed;
		border: 1px solid #394c6c;
		background: rgba(250,250,250,0.9);
		box-shadow: 3px 3px 5px rgb(0 0 0 / 40%);
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: zoomIn;
		animation-name: zoomIn;
		box-shadow: 0px 0px 100px rgb(0 0 0);
		border-radius: 25px;
		z-index: 99999;
	}
		.popupbig, .popupwidth{width: 80%; left: 10%;}

		.popupcontent {
			overflow: hidden;
			overflow-y: auto;
			max-height: 350px;
			padding: 2%;
			margin: 8px;
			min-height: 75%;
			top: 10%;
		}
		
		.popup h2, .popupbig h2 {
			padding: 20px;
			margin: -1px;
			background: #394c6c;
			border: 1px solid #394c6c;
			border-radius: 25px 25px 0px 0px;
			color: #fff !important;
			font-size: 25px;
		}
		
.calltoactionBox {
	display: flex !important;
	padding: 5%;
	left: 5%;
	top: 10%;
	position: fixed;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	box-shadow: 0px 0px 250px rgb(0 0 0);
	border-radius: 25px;
	z-index: 99999;
	color: #fff !important;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	background: url(https://123betalen.com/images/new/FooterBG@1x.svg) center center no-repeat;
	width: 80%;
	background-size: cover;
}

embed {
	margin-top: 5px;
	width: 100%;
	min-height: 750px;
	border-radius: 10px;
}

code {
	background-color: #eee;
	border: 1px solid #999;
	display: block;
	padding: 20px;
	overflow: scroll;
}

.kop{
	color: #fff;
	background: #394c6c;
}

.tableBorder {
	border: 1px solid #333;
	border-radius: 5px;
}
	.tabelHeader {
		background: #aab5c8 !important;
		color: rgba(57, 76, 108, 1) !important;
		font-size: 16px;
		line-height: 40px;
		font-weight: bold;
		padding-left: 25px;
	}
		.factuur .tabelHeader{background: #fff !important;}
	
	.tableMain {
		overflow: hidden;
		margin: -10px -12px !important;
		width: -webkit-fill-available;
		border-radius: 15px;
	}
		.tableMain tr:nth-child(odd) {background-color: #f2f2f2;}
		.tableMain tr:hover {background-color: #ffedbd;}

.qr-code, .qr-code-big {
	width: 90%;
	height: 90%;
	max-width: 150px;
	max-height: 150px;
	border:1px solid #ff9600;
	box-shadow: 0px 5px 10px rgb(0 0 0 / 40%);
}
	.qr-code-big {
		max-width: 300px;
		max-height: 300px;
	}

.imgTumb {
	height: 100px;
	vertical-align: top;
	margin-left: 10px;	
	border-radius: 7px;
	float: right;
	width: auto;
}
	.imgTumb:hover {
		height: 200px;
		border: 1px solid #f99d27;
	}

.display-flex {display: flex;}
	
@supports (-webkit-touch-callout: none) {
	.readShow {display: block;}
	.readHidden {display: none;}
}

.left {
	top: 0px;
	margin: 0;
	border-radius: 0;
	width: 20%;
	height: -webkit-fill-available;
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99;
}
	.left:hover {width: 30%;}
	.left a:hover, .left p a:hover {color: #333;}
		
footer {
	background: #fff !important;
	font-size: 13px;
	width: -webkit-fill-available;
	padding: 25px;
	text-transform: uppercase;
	max-height: 130px;
	overflow-y: auto;
	z-index: 100;
	bottom: 0px;
}		
	.footerMenu {
		width: 90%;
		position: absolute;
		margin-left: 5%;
	}

.footerLeft, .footerRight {
	max-width: 1000px;
  margin: auto;
  text-transform: none;
}
.footerRight {
	text-align: right;
	float: right;
	margin-right: 10px;
}
	.footerCenter {text-align: center}	
	
h1 {text-transform: uppercase;}
	h1 a {color: #fff;}
	
	main h1 {
		padding: 25px 10px;
		text-align: center;
	}

.imgzoom {
  cursor: zoom-in;
  transition: transform .2s;
}
	.imgzoom:hover {transform: scale(1.5); }

.button{
	text-decoration: none;
	line-height: 40px;
	background: #2420cf;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px 20px;
	border: 0px;
	border-radius:4px;
	cursor: pointer;
	display: inline-block;
	margin: 1px;
}
	.button .material-icons {vertical-align: text-bottom;}
	.button:hover .material-icons, .btnfactuurList:hover .material-icons {transform: scale(-1, 1); transition-duration: 0.5s; color: #ff9600 !important;}
	.button:hover, .buttonActief {font-style: italic;}
	.search {width: 200px;height: 30px; background: #ddd;}
	.search:hover {width: 350px;}
	
	.material-icons-box {
		height: 250px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
		.material-icons-box .material-icons-list {
			display: inline-block;
			margin: 5px;
		}
	
	.btnfactuurList, .material-icons-list {
		padding: 10px;
		border-radius: 10px;
		color: #333 !important;
		background: #d4e0f5;
		display: inline-block;
		margin: 5px;
	}
		.btnfactuurListBox {
			float: right;
			line-height: 45px;
		}
		
.whatsappicon {
	position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 20px;
}
	.whatsappicon:hover {width: unset; height: unset; border-radius: unset;}
	.whatsappicon img {height: 80px; margin: -12px -14px;}
		.whatsappicon:hover img {height: unset; margin: unset;}

.notificatie {
	color: #ff9600;
	width: -webkit-fill-available;
	top: 0px;
	left: 0px;
	text-align: center;
	padding: 10px;
	margin: 10px 0px;
	border-radius: 25px;
	background: rgb(255 237 189);
}
	.notificatie_green, .notificatie_red {
		color: #fff !important;
		border-radius: 0px !important;
		margin: 0px !important;
		position: absolute !important;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeout;
		animation-name: fadeout;
	}
	.notificatie_green {background: #849b49;}
	.notificatie_red {background: #800000;}	

.goed {
	color: #167b00;
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
}

.error {
	color: #ff533a;
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
	
	-webkit-animation-duration: 1s; 
	animation-duration: 1s; 
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
	-webkit-animation-name: error; 
	animation-name: error; 
}
	.red {color: #ff533a;}
		.redHover:hover {color: #ff533a; cursor: pointer;}
	.green {color: #45974a;}
		.greenHover:hover {color: #45974a; cursor: pointer;}
	.yellow {color: #ff9600 !important;}
		.yellowHover:hover {color: #ff9600; cursor: pointer;}
	.white {color: #fff;}
		.whiteHover:hover {color: #fff; cursor: pointer;}
	/* .blue {color: #0400c5;} */
		.blueHover:hover {color: #0400c5; cursor: pointer;}
	.gray {color: #bbb;}
		.grayHover:hover {color: #bbb; cursor: pointer;}
	.black {color: #000;}
		.blackHover:hover {color: #000; cursor: pointer;}
	.error .material-icons, .goed .material-icons{
		line-height: 40px;
		padding: 0px 5px 0px 0px;
	}
	
	.boxGreen {color: #45974a; background: #b9ffb5}
	.boxBlue {color: #0400c5; background: #bfc0ff}
	.boxYellow {color: #ff9600; background: #ffedbd}
	.boxRed {color: #f40000; background: #ffadad}
	.boxGrey {color: #ff9600; background: rgba(57, 76, 108, 1);}
	
	.boxGreen, .boxBlue, .boxYellow, .boxRed, .boxGrey {
		padding: 10px;
		border-radius: 5px;
		width: fit-content;
		line-height: 30px;
		display: inline-block;
	}
		input .boxGreen {background: #f2f2f2 !important; border: 1px solid #b9ffb5 !important; width: unset !important;}

	a {text-decoration: none; color: #333;}
	a:hover {text-decoration: dotted; color: #ccc;}
	.link {text-decoration: underline; !important;}
	.icon-white {padding-left: 10px;}
	.material-icons {vertical-align: middle;}
	.smallIcon {font-size: 15px !important;}
	.noScreen {display: none !important;}
	.textRight {float: right;}
	.line-through {text-decoration: line-through;}

	.small {
		color: #333;
		font-size: 10px !important;
	}

.forgotten, input:invalid {
	
}
	
input, select {
	color: #333;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background-color: #f2f2f2;
    margin: 1px;
    padding: 10px;
    width: -webkit-fill-available;
}
	.selAddOrEditSmall {width: 30% !important;}
	.button select {height: 38px;}

	.intAddOrEditBig {width: -webkit-fill-available !important;}
	.intAddOrEditSmall {width: 30% !important;}
	input .maxSize {max-width: 350px;}
	input:hover, select:hover {background-color: #f2f2f2; border: 1px solid #333 !important;}
	.inputsmall {width: 40% !important;}
	
	.edit{
		background: rgba(22,123,0,0.5);
		padding: 10px;
		width: 35px !important;
		font-weight: bold;
	}
	
	input[readonly=readonly]{background-color: transparent; border: 0px !important;}
	input[type=color]{
		padding: 0px;
		border: 0px !important;
		width: 20%;
		height: 40px;
		background: transparent;
	}
	input[type=checkbox], input[type=radio]{width: 25px;}

	input[type=submit], input[type=button]{
		background-color: rgba(57, 76, 108, 95);
		color: #fff;
		line-height:40px;
		padding: 1%;
		width: 100%;
		font-weight: bold;
		cursor: pointer;
		-webkit-appearance: none;
	}
		button {cursor: pointer; !important}
	
	input[type=radio] img {
		
	}
		input[type=radio]:checked + label img{
			-ms-transform: scale(1.2); /* IE 9 */
			-webkit-transform: scale(1.2); /* Safari 3-8 */
			transform: scale(1.2); 
		}

	.switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 34px;
	}
		.switch input { 
			opacity: 0;
			width: 0;
			height: 0;
		}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 34px;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
	}

	input:checked + .slider {background-color: rgba(57, 76, 108, 95);}
	input:focus + .slider {box-shadow: 0 0 1px rgba(57, 76, 108, 95);}

	input:checked + .slider:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
	}
		
	.coinPrice {
		float: left;
	}
		.coinPrice:not(:checked) > input {
			position:absolute;
			left:-9999px;
		}
		
		.coinPrice:not(:checked) > label {
			float:right;
			white-space:nowrap;
			cursor:pointer;-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 			filter: grayscale(100%);
		}

		.coinPrice > input:checked ~ label {
			-ms-transform: scale(1.2); /* IE 9 */
			-webkit-transform: scale(1.2); /* Safari 3-8 */
			transform: scale(1.2); 
			-webkit-filter: grayscale(0%) !important; /* Safari 6.0 - 9.0 */
			filter: grayscale(0%) !important;	
			margin-left: 4px;
		}

		.coinPrice:not(:checked) > label:hover,
		.coinPrice:not(:checked) > label:hover ~ label {
			-ms-transform: scale(1.2); /* IE 9 */
			-webkit-transform: scale(1.2); /* Safari 3-8 */
			transform: scale(1.2); 	
			-webkit-filter: grayscale(0%) !important; /* Safari 6.0 - 9.0 */
			filter: grayscale(0%) !important;	
			margin-left: 4px;
		}
		.coinPrice > input:checked + label:hover,
		.coinPrice > input:checked + label:hover ~ label,
		.coinPrice > input:checked ~ label:hover,
		.coinPrice > input:checked ~ label:hover ~ label,
		.coinPrice > label:hover ~ input:checked ~ label {
			color: #c59b08 !important;
		}

		.coin-left:hover, .coin-right:hover {
		 -ms-transform: scale(1.2); /* IE 9 */
		 -webkit-transform: scale(1.2); /* Safari 3-8 */
		 transform: scale(1.2); 
		}
		
	.input-hidden {display: none;}

textarea {
	background-color: #f2f2f2;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    margin: 1px;
    padding: 1%;
    width: 98%;
    height: 150px;
}
	textarea:hover {border: 1px solid #333 !important;}
	
	.ticket {
		width: 25%; 
		float: right; 
		text-align: right;
	}
	
	.ticket input {
		width: 25%;
		min-width: 25px;
		border-radius: 0px !important;
		height: 40px;
		padding: 0px;
		margin: 0px;
		text-align: center;
		border: 0px !important;
	}
	
	.ticket .buttonLeft, .ticket .buttonRight  {
		line-height: 38px;	
		vertical-align: top;
	}
	
	.ticket .buttonLeft {
		border-radius: 40px 0 0 40px;
		color: #45974a;
		background: #b9ffb5;
	}
	
	.ticket .buttonRight {
		border-radius: 0 40px 40px 0;
		color: #f40000;
		background: #ffadad;
	}

fieldset{
	background: #fff;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	word-break: break-word;
	border-radius: 10px !important;
	border: 0px;
}

.placeholder {
	color: #394c6c;
	padding: 1px 10px;
	border: 0px;
	border-radius: 5px;
	font-size: 13px;
}
	.placeholder-normal {
		color: #394c6c;
		font-size: 12px;
	}

.boxselect-label {
	display: inline-block;
	padding: 1em 2em;
	cursor: pointer;
	transition: 0.3s;
	&:active {
		transform: translateY(2px);
		border: 1px solid #333;
	}
	@media (max-width: $small) {
		padding: 0em 1em 3px;
		margin: 0.25em;
	}
}

.boxselect-input:checked + .boxselect-label {
 	background: #aab5c8;
 	color: rgba(57, 76, 108, 1) !important;
 	border: 1px solid rgba(57, 76, 108, 1) !important;
	border-radius: 10px;
}

.blink {
	-webkit-animation: 2s linear infinite condemned_blink_effect;
	animation: 2s linear infinite condemned_blink_effect;
}

.factuur {
	background: #fff !important;
	font-family: Helvetica !important;
	font-size: 13px !important;
	width: 190mm !important;
	padding: 10mm;
	border-radius: 0px !important;
	height: 272mm !important;
	overflow: hidden;
	border: 0px;
	margin: auto;
	position: relative;
	border: 0mm !important;
}
	
	.splitBox header, .factuur header, .factuur .main, .factuur footer {z-index: 999; position: relative;}
	.splitBox header, .factuur header {margin: -10mm -10mm 0mm -10mm; width: auto; padding: 10mm;}
	.splitBox .main, .factuur .main {background: transparent !important; margin: 0mm; padding: 0px;}
	.splitBox .main h1, .factuur .main h1 {padding: unset !important; text-align: unset !important;}
	.splitBox footer, .factuur footer {position: absolute; background: transparent !important; color: #000}
	.splitBox button, .factuur button {box-shadow: none; width: unset; padding: 5px; border: 0px;}
	.splitBox .tabelHeader, .factuur .tabelHeader {color: #000; font-size: 14px; font-weight: bold; border-radius: 5px; padding: 10px !important}
	.splitBox .flex, .factuur .flex {display: flex; justify-content: space-between;}
	.splitBox .flex div, .factuur .flex div, .splitBox .flex p, .factuur .flex p {width: 19%; padding-right: 1%; margin: 10px 0px;}
	.splitBox .flex .textright, .factuur .flex .textright {text-align: right}
	.splitBox .optionRight {float: right;}
	.splitBox .flex .button, .factuur .flex .button {border-radius: 25px;}

@keyframes progressBar {
	0% {width: 0;}
	100% {width: 100%;}
}

@-webkit-keyframes condemned_blink_effect { 
 0% {visibility: hidden;}
 50% {visibility: hidden;}
 100% {visibility: visible;}
}

@keyframes condemned_blink_effect {
 0% {visibility: hidden;}
 50% {visibility: hidden;}
 100% {visibility: visible;}
}

@-webkit-keyframes from_top { 
 0% {opacity: 1; -webkit-transform: translateY(0px);}
 100% {opacity: 0; -webkit-transform: translateY(-200px);}
}

@keyframes from_top {
 0% {opacity: 1; transform: translateY(0px);}
 100% {opacity: 0; transform: translateY(-200px);}
}

@-webkit-keyframes zoomIn { 
  0% {opacity: 0; -webkit-transform: scale(0.1);} 
  80% {-webkit-transform: scale(1.1);} 
  100% {opacity: 1; -webkit-transform: scale(1);}
} 

@keyframes zoomIn { 
  0% {opacity: 0; transform: scale(0.1);} 
  80% {transform: scale(1.1);} 
  100% {opacity: 1; transform: scale(1);}
} 

@-webkit-keyframes bounceIn { 
  0% {opacity: 0; -webkit-transform: translateY(-2000px);} 
  60% {-webkit-transform: translateY(30px);} 
  80% {-webkit-transform: translateY(-10px);} 
  100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes bounceIn { 
  0% {opacity: 0; transform: translateY(-2000px);} 
  60% {transform: translateY(30px);} 
  80% {transform: translateY(-10px);} 
  100% {opacity: 1; transform: translateY(0);}
} 

@-webkit-keyframes bounce { 
  0% {opacity: 0; -webkit-transform: translateY(0);} 
  60% {-webkit-transform: translateY(20px);} 
  80% {-webkit-transform: translateY(-20px);} 
  100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes bounce { 
  0% {opacity: 0; transform: translateY(0);} 
  60% {transform: translateY(20px);} 
  80% {transform: translateY(-20px);} 
  100% {opacity: 1; transform: translateY(0);}
}

@-webkit-keyframes feder { 
  0% {opacity: 0; -webkit-transform: translateY(-50px);} 
  50% {-webkit-transform: translateY(20px);} 
  100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes feder { 
  0% {opacity: 0; transform: translateY(-50);} 
  50% {transform: translateY(20px);} 
  100% {opacity: 1; transform: translateY(0);}
} 

@-webkit-keyframes error { 
  0% {-webkit-transform: translateX(-10px);}
	20% {-webkit-transform: translateX(10px);} 
  40% {-webkit-transform: translateX(-10px);} 
	60% {-webkit-transform: translateX(10px);} 
  80% {-webkit-transform: translateX(-10px);}
  100% {-webkit-transform: translateX(0); }
} 

@keyframes error { 
  0% {transform: translateX(-10px);}
	20% {transform: translateX(10px);} 
  40% {transform: translateX(-10px);} 
	60% {transform: translateX(10px);} 
  80% {transform: translateX(-10px);}
  100% {transform: translateX(0);}
}

@keyframes lineUp {
 0% {
  opacity: 0;
  transform: scale(0) translateY(80%);
 }
 100% {
  opacity: 1;
  transform: scale(1) translateY(0%);
 }
}

@-webkit-keyframes fadeout { 
  0% {-webkit-opacity: 1; top: 0px}
  40% {-webkit-transform: scale(1);}
  100% {-webkit-opacity: 0; -webkit-transform: scale(0); top: -250px;}
} 

@keyframes fadeout { 
  0% {opacity: 1; top: 0px}
  40% {transform: scale(1);}
  100% {opacity: 0; transform: scale(0); top: -250px;}
}

@media only screen and (max-width: 1080px) {
	.container {display: block;}
}

@media only screen and (max-width: 600px) {
	header, .header {height: 0px;}
	nav, .nav {
		position: fixed;
		width: -webkit-fill-available !important;
		padding: 10px;
		height: 50px !important;
		top: 0px;
		overflow: hidden;
	}
		nav ul {line-height: 50px;}
		nav ul:hover {display: unset !important;}
		nav .button {padding: 10px 0px;}
		nav img {opacity: 1; height: 60px; width: 150px;}
		nav ul a, .nav ul a {display: none; width: 10px;}
		nav p {width: auto;}
		nav .menuIcon {
				text-align: center;
				display: block;
				padding: 3px;
				font-size: 30px;
			}
			
		nav:hover, .nav:hover {height: -webkit-fill-available !important; overflow: auto;}
		nav:hover .menuIcon {display: none !important;}
		nav:hover .menutext {display: inline !important;}
		nav:hover a, .nav:hover a {
			display:block;
			float: left;
			width:100%;
			z-index: 999;
		}
		
		.search_form {
			position: fixed;
			bottom: 0px;
			z-index: 999;
			background: rgba(57, 76, 108,0.99);
			margin: 0px;
			padding: 5px;
			left: 0px;
			right: 0px;
		}
			.search, .search:hover {width: 80%;}
			.search_form button {width: 17% !important;}

	.noMob {display: none !important;}
	.noScreen {display: block !important;}
	
	.top{
		display: block;
		float: left;
		padding: 0px;
	}
		
	.left{
		width: 50px;
		overflow-y: hidden;
		z-index: 9;
		height: 40px;
		top: 40%;
		border-radius: 100px;
		left: -40px;
		padding: 15px;
		text-align: right;
	}
		.left section{display: none;}
		.left:hover{
			width: 80%;
			left: 0px;
			height: -webkit-fill-available;
			border-radius: 0px;
			top: 65px;
			overflow-y: auto;
			text-align: left;
			margin: 0% !important;
		}
			.left:hover section{display: block;}
		
		nav .noScreen .material-icons {display: none !important;}
		nav:hover .noScreen .material-icons{display: block !important;}
		
	main, .main {
		margin: 50px 25px;
		border-radius: 0px;
		min-height: 300px;
		overflow-y: hidden;
		overflow-x: scroll;
		padding: 0px;
		max-width: -webkit-fill-available !important;
	}
		section {padding: 10px;}

	.notificatie {
		bottom: 0px !important;
  		top: unset !important;
  		left: 0px !important;
	}
	
	.inputsmall {
		width: -webkit-fill-available !important;
	}

	.splitBox {
	  display: unset;
	  position: unset;
	  float: left;
	  overflow: unset !important;
	}
		.splitScreen-1,.splitScreen-2,.splitScreen-3,.splitScreen-4 {
			width: -webkit-fill-available !important;
			margin: 5% 0% !important;
			border-radius: 0px !important;
		}
			.border-radius {border-radius: 15px !important;}
		
		.splitScreen-1:hover,.splitScreen-2:hover, .splitScreen-3:hover, .splitScreen-4:hover {
			transform: scale(1.05);
		}
		
		.splitBox .optionRight {float: unset;}
		.splitBox .flex, .factuur .flex{
			display: ruby;
		}
			.splitBox .flex p, .factuur .flex p {width: -webkit-fill-available !important;}
			.splitBox .flex div, .factuur .flex div, .splitBox .flex p, .factuur .flex p {width: 16%; !important;}
		
		.demoBox {padding: 5% !important;}
		
		.projectlist h1, .totalA4 h1 {margin: 0px;}
		.popup {
			width: -webkit-fill-available;
			left: 0;
			top: 0;
			margin: 5%;
			position: fixed;
			padding: 5%;
		}
			.popup h2 {margin: -7% -7% 0% -7%;}

		.display-flex {display: block;}
	
	.calltoactionBox {
		left: 5%;
		top: 5%;
		width: 90%;
		padding: 0px;
	}
		.calltoactionBox img{width: 20%; margin: 0 40%;}

	.imgTumb {
		margin-left: 0px;
		margin-top: 10px;
	}
			
	footer {
		position: relative;
		padding: 10px;
	}
		.footerMenu {
			width: 50%;
			position: relative;
			margin-left: 5%;
		}
		
	.button{
		display: block;
		margin: 10px 0px;
		width: -webkit-fill-available;
	}

	.factuur {
		width: -webkit-fill-available !important;
		padding: 10px !important;
		height: unset !important;
	}
		.factuur .flex {display: ruby;}
		.factuur .flex p, .factuur .flex div {width: -webkit-fill-available !important;}
		
	.navSettings {height: 70px; overflow: hidden;}
	.navSettings:hover {height: auto;}
		.navSettings a, .navSettings button {display: block; padding: 0px}
}