/* Resetting the CSS first */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; }

	html {font-size:100%;  }
	
		@media only screen and  (min-width : 800px ) and (max-width : 1000px) { html { font-size: 90%; }}
		@media only screen and  (min-width : 600px ) and (max-width : 799px) { html { font-size: 80%; }}
		@media only screen and  (max-width : 599px) { html {font-size: 70%; }}	

	body {line-height:1;}
		
	table { border-spacing: 0; }
		
	fieldset,img {border: 0; }
		
	address,caption,cite,code,dfn,strong,th,var { font-weight: normal; font-style: normal; }
		
	strong{ font-weight: bold; }
		
	ol,ul { list-style: none; margin:0; padding:0; }
	
	li { margin:0; padding: 0; }
		
	caption,th { text-align: left;}
	
	a, a:hover {text-decoration: none; }
		
	q:before,q:after { content:'';}
		
	abbr,acronym { border: 0;}

	input:-webkit-autofill, select:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px white inset; }

	textarea:focus, button:focus, select:focus, input:focus { outline:none !important;}

	textarea {resize:none; }

	::-webkit-input-placeholder { color: rgba(0,0,0,0.8); font-style:italic;}
	:-moz-placeholder { color: rgba(0,0,0,0.8); font-style:italic;}
	::-moz-placeholder { color: rgba(0,0,0,0.8); font-style:italic;}
	:-ms-input-placeholder { color: rgba(0,0,0,0.8); font-style:italic;}
/* end reset */

/* fonts */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, input, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, string, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	font-family:Open Sans; color: rgba(0,0,0,0.8)}

	.ondark p, .ondark p em, .ondark em, .ondark .fakep, .ondark a, .ondark h1, .ondark h2, .ondark h3, .ondark h4, .ondark h5, .ondark h6, .ondark ul li, .ondark tr td, #messages p, #messages .fakep {color: rgba(255, 255, 255, 0.8);}

	a, a span {	color:#f8581e; }

	h1 { font-size: 4rem; font-weight:200; text-align:left; text-transform:uppercase; padding-bottom: 6rem; display:block; width:100%;}
			
	h2 { font-size: 3rem; font-weight:600; text-align:center; padding-bottom: 4rem; display:block; width:100%;}
	
	h3 { font-size: 2rem; font-weight:300; padding-top:1rem; padding-bottom:6rem; display:block; }
	
	h4 { font-size: 1.8rem; font-weight:800;  display:block; width:100%; text-align:left; padding-bottom:2rem;}
	h4 em {font-weight: 800; }

	h5 { font-size:1.2rem; font-weight: 400; text-align:center; text-transform: uppercase; padding-bottom:0.5rem; margin-bottom:2rem; width:100%; border-bottom: 2px solid #5f86c1;}
	h5 em {font-weight: 400; }

	h6 { font-size: 1.4rem; font-weight:600;  display:block; width:100%; text-align:left; padding-bottom:2rem;}
	h6 em {font-weight: 600; }

	p, span.fakep { display:block; font-size: 1.2rem; line-height: 2.4rem; text-align:left; padding:0.75rem 0;}
	
		p.onderschrift { text-transform:uppercase; font-size:0.8rem; display:block; font-weight:800; line-height:1.2rem; padding-top:1rem;  width:100%; text-align:center;}
		p.onderschrift em {font-weight:800;}

		p.klein, input[type="submit"].html-link.klein, span.klein, a.klein { font-size:0.9rem; line-height:1.6rem; }
		
		p.klein span.entypo-info-circled, span.entypo-info-circled { font-size:3rem; line-height:5rem; color:#5f86c1; display:inline-block;
			float:left; height:100%; padding-right:2rem; }
			
		p.groot { font-size: 2rem; line-height:4rem; text-align:center; color:#fff; }
	
	a.anchor {position:relative; left:0; top:-4rem;}

	span.check, span.check a, .check { color:#3CDB3B;}
	span.warning, span.warning a, .div-table .table-row .row .warning { color:#FF9E00;}
	span.error, span.error a, .error { color: #FF0004;}
	span.grey, span.grey a, .grey { color: #C5C5C5;}
	
	span.enlarge-link {display:block; }
	
/* Custom CSS */
	
	html, body { height:100%; text-align: center; width:100%; }
	
	html {/*overflow:hidden; When set to hidden (to prevent elasticity in browser, the jQuery scroll won't work*/}
	
	body { overflow-x:hidden;} 
	
	body { background: #333; color: rgba(0,0,0,0.5); }
	
	section { width:100%; padding:0;  margin:0; overflow:hidden;}
	
	section.maxheight { min-height:100%;}
	
	section.no-margin {margin:0; padding:0;}
	
	img {max-width:100%; height:auto;}

	img.round { border-radius:50%; max-width:100%; height: auto; box-sizing:border-box; border:1rem solid; border-color: rgba(255,255,255, 0.6);}

	img.round.width-80 {max-width:80%; clear:both; margin: 0 auto 3rem auto;}

	.clear {clear:both;}
	
	.left { float:left; }
	
	.right { float:right; }
	
	.center {margin: 0 auto; text-align:center;}
	
	.block {display:block;}
	
	.inline-block {display:inline-block;}

	.absolute, div.absolute { position:absolute;}

	.relative, img.relative { position:relative; }
	
	.relative-vertical-center, img.relative-vertical-center {position: relative; top: 50%; transform: translateY(-50%);}

	.row {	display:block; width:100%; padding-bottom:1rem; float:left; }
	
	.uppercase {text-transform:uppercase; }
	
	h4.center { margin-bottom: 3rem; }
	
	ul.opsomming {list-style: disc; padding-left:3rem; box-sizing:border-box;}
	ul.opsomming.withoutdots {list-style:none; padding-right:3rem;}

	ul.opsomming li {text-align:left; line-height:2rem; padding-bottom:0.3rem;}
	ul.opsomming li:before {}
	ul.opsomming li.ok:before{color:#F00;}
	ul.opsomming li.warning:before {color:#C30;}
	
	ul.opsomming.normal li {line-height:3rem; }
	ul.opsomming.normal li {font-size: 1.2rem; }

	ul.slider { padding: 2rem 0; }
	
	.div-collapse-800 {display:block;}

	@media only screen and  (max-width : 799px) { 
		.div-collapse-800 { display:none;}
	}
	
	.div-full-width-800 {display:none;}
	@media only screen and  (max-width : 799px) { 
		.div-full-width-800 { display:block; float:left;}
	}

	.one-col { width:80%; display:block; margin: 0 auto;}

	.two-col { width:47%; display:block;}
	.two-col.left { }

	@media only screen and  (max-width : 599px) { 
		
		.two-col.left.collapse-600 {display:none;}
		.two-col.left.full-width-600 {width:100%; float:left; margin-bottom:4rem;}
		.two-col.right.full-width-600 {width:100%; float:left;}
	}	

	@media only screen and  (max-width : 799px) { 
		
		.two-col.left.collapse-800 {display:none;}
		.two-col.left.full-width-800 {width:100%; float:left; margin-bottom:4rem;}
		.two-col.right.full-width-800 {width:100%; float:left;}
	}

	.three-col { width: 30%; display:block; float:left; margin-left:5%}
	.three-col.left { margin-left:0;}

	@media only screen and  (max-width : 799px) { 
		.three-col.full-width-800 {margin:0;}
		.three-col.left.full-width-800 {width:100%; float:left; margin-bottom:4rem;}
		.three-col.middle.full-width-800 {width:100%; float:left; margin-bottom:4rem;}
		.three-col.right.full-width-800 {width:100%; float:left; margin-bottom:4rem;}
		.three-col.middle.two-col-800 {width:47%; float:left; margin-left:0;}
		.three-col.right.two-col-800 {width:47%; float:right;}
	}

	@media only screen and  (max-width : 599px) { 
		
		.three-col.middle.two-col-800.one-col-600 {width:100%; float:left; margin-left:0; margin-bottom:4rem;}
		.three-col.right.two-col-800.one-col-600 {width:100%; float:left; margin-left:0;}
	}

	.four-col {width: 22%; float:left; margin-left:4%;}
	.four-col.left {margin-left:0;}
	.four-col.left-middle {}
	.four-col.right-middle {}
	.four-col.right {}

	@media only screen and  (max-width : 799px) { 
		
		.four-col {width: 47%; margin:0; margin-bottom: 6rem;}
		.four-col.left {float:left; }
		.four-col.left-middle {float:right; }
		.four-col.right-middle {clear: both;float:left;}
		.four-col.right {float:right;}
	}	

	.five-col { width:18%; float:left; margin-left:2%;}
	.five-col.left {margin-left: 0;}

	@media only screen and  (max-width : 799px) { 
		section.collapse-800 { display:none; }
	}

section.fullwidth-800 { display:none;}

	@media only screen and  (max-width : 799px) { 
		section.fullwidth-800 { display:block; }
	}

	.div-table { background: #fff; width:100%; box-sizing: border-box; display:block; float:left; }
	.div-table.onwhite {background:#f1f1f1;}
	.div-table, .div-table p { font-size: 0.9rem; line-height: 1.5rem; text-align:left; padding:0; color: rgba(0,0,0,0.8)}
	.div-table p.center {text-align:center;}
	.div-table .table-title-row h2 {padding-bottom:2rem;}
	.div-table ul.opsomming {list-style: disc; padding-left:1.5rem;}
	.div-table .table-title-row { display:block; width:100%; text-align:left; box-sizing:border-box; padding: 2rem 0.5rem 0 0.5rem;}
	.div-table .table-header-row, .div-table .table-row {width:100%; box-sizing:border-box; display:block; float:left; padding: 1rem 1rem 1rem 1rem;}
	.div-table.compact .table-header-row, .div-table.compact .table-row {padding:0.5rem;}
	.div-table .table-row {border-bottom: 1px solid #f1f1f1;}
	.div-table.onwhite .table-row  {border-bottom: 1px solid #fff;}
	.div-table.compact .table-row {border:0;}
	.div-table .table-header-row {font-weight:bold; text-transform:uppercase; }
	.div-table .table-row.warning {padding-top:1rem;}
	.div-table .table-row.warning .col-100 { padding: 1.5rem 0 1.5rem 0; text-align:center; background: rgba(235,169,170,1.00); }
	.div-table .table-row.grey { background: #F7F7F7;}
	.div-table .table-row.active {background:#81C344;}
	.col-5, .col-10, .col-15, .col-20, .col-25, .col-30, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-70, .col-80, .col-90, .col-100, .col-33, .col-34 { display:block; float:left; 
		box-sizing: border-box; padding: 0 0.5rem; text-align:left;}
	.col-5 {width: 5%; } .col-10 { width: 10%; } .div-table .col-15 { width: 15%; }
	.col-20 { width: 20%; } .col-25 { width: 25%; } .col-30 { width: 30%; }
	.col-35 { width: 35%; } .col-40 { width: 40%; } .col-45 { width: 45%; } 
	.col-50 { width: 50%; } .col-55 { width: 55%; } .col-60 { width: 60%; }
	.col-70 { width: 70%; } .col-80 { width: 80%; } .col-90 { width: 90%; } 
	.col-33 { width: 33%;} .col-34 {width:34%; }
	.col-100  { width: 100%; }
	.div-table .table-row .row {display:block; width:100%; clear:both; padding-bottom:0;}
	.div-table .table-row .row span.beschrijving, .div-table .table-row .row span.waarde { width:40%; min-width:40%; min-height:1rem; display:block; float:left; text-align: left;}
	.div-table .bottom-row { margin:0; padding:0; padding-top:2rem; display:block; clear:both;}
	.div-table .table-row .row span.waarde { width:50%; min-width:50%; margin-left:5%; }	
	.subtable {float:left; display:block; width:100%; border-bottom: 10px solid #fff;}
	
	.subtable .div-table { background-color: rgba(255,255,255,0.5); margin:0;}
	
	/* The emails shown in a table in Beheer need some special markup */
 	.div-table table p { font-size: 0.9rem; line-height: 1.5rem; text-align:left; padding-bottom: 1rem; color: rgba(0,0,0,0.8)}
	.div-table table tr td.footer p {font-size: 0.7rem; text-align:center;}

/* Form stuff */
form {display:inline-block;}
	.buttonlink, a.buttonlink, input[type="submit"], .inputfile + label{ display:inline-block; margin-top:3rem;
		padding:15px; border:1px solid rgba(0,0,0,0.8); background: none; font-size:1rem; cursor:pointer; color: rgba(0,0,0,0.8); text-transform:uppercase; box-sizing:border-box;}

	input[type="submit"].html-link {text-transform:none;}

	/* .buttonlink:hover {background-color: rgba(123, 123, 123, 0.1);}	*/

	.buttonlink.disabled, a.buttonlink.disabled, input[type="submit"].disabled {cursor: default; color: rgba(0,0,0,0.4); 
		border:1px solid rgba(0,0,0,0.4);}
	
	.buttonlink.ondark {color: rgba(255, 255, 255, 0.8);}
	/* .buttonlink.ondark:hover {background-color: rgba(255, 255, 255, 0.1);} */

	input[type="submit"].html-link {display:inline-block; margin:0; padding:0; border:none;
		background:none; font-size:1.2rem; color:#F60; cursor:pointer;}
	
	input[type="text"],	input[type="password"], input[type="email"], option, textarea { border:1px solid rgba(0,0,0,0.4); background-color: rgba(255, 255, 255, 0.5); padding:0.5rem 0.5rem; box-sizing:border-box; color: rgba(0,0,0,0.7); font-size:1rem; font-weight:200; width:100%; text-align:left;}
	
	input:-webkit-autofill, select:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset; }

	select {background: none; border: 0; margin:0; font-size:1rem; font-weight:200; text-align:left; padding:0.5rem 2rem; display:block;  width:100%;}

	/* select boxen do not style well, assign class .selectbox to row */
	.selectbox{ border:1px solid rgba(0,0,0,0.4); background-color: rgba(255, 255, 255, 0.5); padding: 0.5rem 0 0 0; margin-bottom: 1rem; box-sizing:border-box; color: rgba(0,0,0,0.7); font-size:1rem; font-weight:200; width:100%; text-align:left;}
	.row.selectbox {padding-bottom: 0.5rem;}
	input[type="text"].ondark, input[type="password"].ondark, select.ondark, option.ondark, 
	textarea.ondark, input[type="submit"].ondark { border-color: rgba(255, 255, 255, 0.8); }

	input[type="submit"].ondark, span.ondark {color: rgba(255, 255, 255, 0.8);; }
	
	input[type="submit"].ondark.active , span.ondark.active {color: #F60; }
		
	input[type="radio"] { display:none; }
	
	/* Note: in the HTML, the radiobutton should come before the label! */
	label.radiobutton {	display: block; position:relative; text-align:left; margin-left:6rem; 
		padding-bottom:1rem;}

	input[type=radio] + label:before { content: ""; display:inline-block; position:absolute; top:0px; 
		left:-50px; height:38px; width:38px; background: url('../images/radiobutton.png') no-repeat left top;}	

	input[type=radio]:checked + label:before { background: url('../images/radiobutton.png') no-repeat -38px top;}
	
	input[type=file].inputfile {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}
	.inputfile + label {padding:16px;}
	input[type=image] {display:block; width:100%; height:auto;}

	/* Switch stuff */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

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

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

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* Top of Page */
nav {background: #333; display:block; width:100%; left: 0; top: 0; border: 0;}

	nav ul { position: relative; width:100%; display:block; list-style:none; } /* Note inline elements creates extra bottom margin */
	nav ul li { display:inline-block;}
	nav ul li a { text-transform: uppercase; font-size: 0.7rem; display:inline-block; padding: 1rem 1rem; letter-spacing: 0.1rem;}
	nav ul li a, nav ul li a:visited{ color: #fff;}
	nav ul li a:hover{ color: #ccc;}
	nav ul li a.active, nav ul li a.active:hover { font-weight:600; color: #999;}
	
	nav ul ul { display:none; }
	nav ul ul { position: absolute; top: 100%; background: #fff; border-bottom:3px solid #555; left:0; right:0; width:100%; 
		clear:both;}
	nav ul li:hover > ul { display: block; width:100%;}
	nav ul ul li a { padding: 2rem 1rem;}
	nav ul ul li a, nav ul ul li a:visited{ color: #333; font-weight:600;}
	nav ul ul li a:hover{ color: #777;}
	nav ul ul li a.active, nav ul ul li a.active:hover { font-weight:600; color: #F30;}
	
/* Main */
main { width:100%; background: #ccc; float:left;}
main .content-container { margin: 0 auto; width:96%; box-sizing:border-box; max-width:1000px; }
main section { padding: 8rem 0; }

	main section.white-bg, .white-bg { background: #fff; }
	main section.offwhite-bg, .offwhite-bg { background: #f8f8f8; }
	main section.lightgrey-bg, .lightgrey-bg { background: #f1f1f1; }
	main section.dark-bg, .dark-bg { background: #666; }
	main section.footerblue-bg, .blue-bg {background: #45aac4;}
	main section.transparentwhite-bg, .transparentwhite-bg {background: rgba(255,255,255,0.4)}
	main section.white-bg .transparentwhite-bg {background: rgba(240,240,240,0.4)}

.transparentwhite-bg {float:left;}
main section.scissors-bg {background: url(../images/scissors.png) #ccc;}

main #messages {width:100%; float:left; display:block;}

main #messages.succes {background-color: #a5b74e; /* green */}
main #messages.warning {background-color: #e1b93f; /* yellow */}
main #messages.error {background-color:#c9403b; /* red */}

	main #messages .message-container {margin: 0 auto; width:96%; box-sizing:border-box; max-width:1000px; padding: 3rem 0;}
	main #messages h5, #messages p, #messages a, #messages ul.opsomming li {color: rgba(255, 255, 255, 0.8);}

	main #messages h5 { margin-bottom:0rem; letter-spacing:0.2rem; border:none; font-weight:600;}
	
	main #messages p, main #messages span.fakep { font-size:1rem; line-height: 1.8rem;}
	main #messages .buttonleft { width:50%; float:left; text-align:left;}
	main #messages .buttonright { width:50%; float:right; text-align:right;}
	main #messages a.buttonlink, main #messages input[type="submit"] {margin-top:1rem; margin-bottom:3rem; border-color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);}

	main #messages.autocollapse p { color: #fff; text-align:center;}

main #messages ul.opsomming li {padding-bottom:0rem;}
main #note {float:left; border: 2px dotted; border-color: rgba(69,170,196, 0.35); background:rgba(69,170,196, 0.25); padding:1.5rem 1.5rem 1.5rem 0; box-sizing:border-box; width:100%; margin-top:4rem;}
main #note .left-col { float:left; width: 20%; box-sizing:border-box;}
main #note .left-col img {max-width:80%; height:auto; margin: 0 auto;}
main #note .right-col {float:right; width:80%; box-sizing:border-box;}
main #note p {color: #164753; font-size: 0.8rem; line-height:1.5rem;}
main section.pagenotfound { height:100%; min-height:100%; }

main#log {height:100%; min-height:100%; }
main .login {padding:0; margin:0; height:100%; }
main .login .login-panel { padding: 2rem; box-sizing:border-box; -webkit-box-shadow: 3px 4px 30px -10px rgba(0,0,0,0.75); 
	-moz-box-shadow: 3px 4px 30px -10px rgba(0,0,0,0.75); box-shadow: 3px 4px 30px -10px rgba(0,0,0,0.75); 
	background: #fff; width:500px; position:relative; top:50%; transform: translateY(-50%); margin: 0 auto; text-align:right;}
main .login .login-panel input[type="submit"] { display:inline-block; margin-top:1rem;}

main .designtile {padding:1rem;}

main .designtile-button form {float:right; padding:0 1rem 1rem 0;}
/* Footer */
footer { float:left; width:100%; padding: 8rem 0 1rem 0; background: #45aac4; /* blue */ }
footer, footer p, footer span.fakep, footer a { color: rgba(253,253,253,0.8); text-transform: uppercase; font-size: 0.6rem;
	letter-spacing: 0.1rem;}
footer .logo {display:block; width:100%; float:left; height:150px; background:url(../images/AVL-logo.png) no-repeat center center;
	background-size: contain; margin-bottom: 8rem;}
	
/* Debug */
section#debug { float:left; background: #fff; width:100%;}
section#debug .content-container { margin: 0 auto; width:96%; box-sizing:border-box; max-width:1000px; }
section#debug .debug-col { float:left; width:19%; padding-left:10px; padding-top:10px; overflow:hidden; font-size:0.8rem; color: #000; text-align:left;}
section#debug .debug-col h5 {padding-top:40px; }


/* Query stuff */
a.pane-opener {}
a.pane-opener.inactive { color: rgba(0,0,0,0.8);}
.closed-pane, .div-table .closed-pane { display:none; }
/* Page specific */


.video-container { position: relative; max-height:500px; overflow:hidden;}

video { height: auto; vertical-align: middle; background-size:contain; width: 100%; background-color: #3A3A3A;}

.video-overlay { background: rgba(0,0,0,0); position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }

.video-overlay img { width:auto; height:100%; max-height:500px;}

.video-overlay-2 { background: rgba(0,0,0,0); position: absolute; right: 0; bottom: 0; left: 0;  top: 50%; transform: translateY(-50%);}

/* The wait please thingy */

.wait-please-replacer { border: 2px dotted; border-color: rgba(69,170,196, 0.35); background:rgba(69,170,196, 0.25); padding:1.5rem; box-sizing:border-box; width:100%; position:relative; display:none; top:3rem;}
.wait-please-replacer.ondark  { background:rgba(255,255,255, 0.25); border: 2px dotted; border-color: rgba(255,255,255, 0.35);}

.wait { float:left; }
.spinner { margin: 0; top:-60px; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear;}

.dot1, .dot2 {width: 60%;height: 60%;display: inline-block;position: absolute;top: 0;background-color: #5f86c1;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;-webkit-animation: sk-bounce 2.0s infinite ease-in-out;animation: sk-bounce 2.0s infinite ease-in-out;}

.ondark .dot1, .ondark .dot2 { background-color:#fff;}

.dot2 {top: auto;bottom: 0;-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
	transform: scale(0.0);
	-webkit-transform: scale(0.0);
  } 50% { 
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
  }
}