User:The Tiger Pro 9000/global.js

@body-bg: #000; @brand-dark: #263238; @brand-highlight: #311b92;

@brand-primary: @brand-highlight; @brand-secondary: #03A9F4;

@text-colour-dark: #212121; @text-colour-medium: #616161; @text-colour-light: #eeeeee;

@inactive: @text-colour-medium;

@link-colour: @brand-highlight; @link-hover-colour: #fff;

@success: #00e676; @error: #ff5252; @notification: #ffc400;

@input-background: #fff; @input-colour: @text-colour-dark; /* Break Points */ @mobile-bp:930px; @tablet-bp:1260px; @laptop-bp:1520px; @max-bp:3840px;

@mobile-mq:929px; @tablet-mq:1259px; @ipad-mq:1023px; @laptop-mq:1519px; @max-mq:3839px;

@mobile: ~"only screen and (max-width:@{mobile-mq})"; @tablet: ~"only screen and (max-width:@{tablet-mq})"; @ipad: ~"only screen and (max-width:@{ipad-mq})"; @laptop: ~"only screen and (max-width:@{laptop-mq})"; @max: ~"only screen and (max-width:@{max-mq})";

html,body {height: 100%; background-color:@body-bg;} .screen {width: 100%; height: 100%; display: table;} .time-display {display: table-cell; vertical-align: middle; text-align: center;}

@off-colour: rgb(7, 18, 5); @on-colour: rgb(50, 132, 32);

@media @max { @segment-height: 21px; @segment-width: 150px; @segment-space: 21px; @offset: 1.05; @digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);

.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);} .digit { width: 192px; height: @digit-height; display: block; position: relative; float: left; .segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;} .on {background: @on-colour;}

.horizontal {width: @segment-width; height: @segment-height;} .vertical {width: @segment-height; height: ((@segment-width)*@offset);}

.a {top: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }		}		.b {top: @segment-space; right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.d {bottom: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }		}		.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.f {top: @segment-space; left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: 0; border-right: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }			&:after { right: 0; border-left: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}	}	.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;} .separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); .dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;} .dot.on {background: @on-colour;}

.dot:first-of-type {top: 33%;} .dot:last-of-type {top: 66%;} }

}

@media @laptop { @segment-height: 18px; @segment-width: 120px; @segment-space: 18px; @offset: 1.05; @digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);

.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);} .digit { width: 156px; height: @digit-height; display: block; position: relative; float: left; .segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;} .on {background: @on-colour;}

.horizontal {width: @segment-width; height: @segment-height;} .vertical {width: @segment-height; height: ((@segment-width)*@offset);}

.a {top: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }		}		.b {top: @segment-space; right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.d {bottom: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }		}		.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.f {top: @segment-space; left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: 0; border-right: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }			&:after { right: 0; border-left: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}	}	.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;} .separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); .dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;} .dot.on {background: @on-colour;}

.dot:first-of-type {top: 33%;} .dot:last-of-type {top: 66%;} }

}

@media @tablet { @segment-height: 15px; @segment-width: 80px; @segment-space: 15px; @offset: 1; @digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);

.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);} .digit { width: 110px; height: @digit-height; display: block; position: relative; float: left; .segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;} .on {background: @on-colour;}

.horizontal {width: @segment-width; height: @segment-height;} .vertical {width: @segment-height; height: ((@segment-width)*@offset);}

.a {top: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }		}		.b {top: @segment-space; right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.d {bottom: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }		}		.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.f {top: @segment-space; left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: 0; border-right: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }			&:after { right: 0; border-left: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}	}	.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center;} .separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); .dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;} .dot.on {background: @on-colour;}

.dot:first-of-type {top: 33%;} .dot:last-of-type {top: 66%;} }

}

@media @mobile { @segment-height: 8px; @segment-width: 40px; @segment-space: 8px; @offset: 1; @digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);

.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);} .digit { width: 56px; height: @digit-height; display: block; position: relative; float: left; .segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;} .on {background: @on-colour;}

.horizontal {width: @segment-width; height: @segment-height;} .vertical {width: @segment-height; height: ((@segment-width)*@offset);}

.a {top: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }		}		.b {top: @segment-space; right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.d {bottom: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }		}		.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.f {top: @segment-space; left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: 0; border-right: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }			&:after { right: 0; border-left: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}	}	.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center; white-space: nowrap;} .separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); white-space: nowrap; .dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;} .dot.on {background: @on-colour;}

.dot:first-of-type {top: 33%;} .dot:last-of-type {top: 66%;} }

}

@media only screen and (max-width:500px) { @segment-height: 4px; @segment-width: 16px; @segment-space: 4px; @offset: 1; @digit-height: (((@segment-width)*@offset)*2)+(@segment-space*3);

.digit:not(:last-of-type) {margin-right: (@segment-space*1.5);} .digit { width: 24px; height: @digit-height; display: block; position: relative; float: left; .segment {background: @off-colour; border-radius: @segment-width; position: absolute; z-index: 0; transition: all 0.5s ease;} .on {background: @on-colour;}

.horizontal {width: @segment-width; height: @segment-height;} .vertical {width: @segment-height; height: ((@segment-width)*@offset);}

.a {top: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-bottom: @segment-space solid @body-bg; }		}		.b {top: @segment-space; right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.c {top: (@segment-space+((@segment-width)*@offset)+@segment-space); right: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-left: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.d {bottom: 0; left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: -(ceil(@segment-space/2)); border-left: ceil(@segment-space/2) solid @body-bg; border-right: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }			&:after { right: -(ceil(@segment-space/2)); border-right: ceil(@segment-space/2) solid @body-bg; border-left: ceil(@segment-space/2) solid transparent; border-top: @segment-space solid @body-bg; }		}		.e {top: (@segment-space+((@segment-width)*@offset)+@segment-space); left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.f {top: @segment-space; left: 0; &:before, &:after {content: ''; position: absolute; left: 0; width: 0; height: 0;} &:before { top:-(ceil(@segment-space/2)); border-bottom: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-top: ceil(@segment-space/2) solid @body-bg; }			&:after { bottom:-(ceil(@segment-space/2)); border-top: ceil(@segment-space/2) solid transparent; border-right: @segment-space solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}		.g {top:(@segment-space+((@segment-width)*@offset)); left: @segment-space; &:before, &:after {content: ''; position: absolute; bottom: 0; width: 0; height: 0;} &:before { left: 0; border-right: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }			&:after { right: 0; border-left: ceil(@segment-space/2) solid transparent; border-top: ceil(@segment-space/2) solid @body-bg; border-bottom: ceil(@segment-space/2) solid @body-bg; }		}	}	.hours,.minutes,.seconds {display: inline-block; overflow: auto; text-align: center; white-space: nowrap;} .separator{ width: @segment-space; height: @digit-height; display: inline-block; position: relative; text-align: center; margin: 0 (@segment-space*2); white-space: nowrap; .dot {background:@off-colour; width: @segment-space; height: @segment-space; border-radius: @segment-space; transition: all 0.5s ease; position: absolute;} .dot.on {background: @on-colour;}

.dot:first-of-type {top: 33%;} .dot:last-of-type {top: 66%;} }

}

/*Material Card*/ .m-card {position: relative; overflow: hidden; margin: 3em auto 1em auto; padding: 1em; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition:all 0.25s ease; max-width: 450px; z-index: 1; &:hover {box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} h1 {border-bottom: 1px solid @brand-highlight; #because {font-size: 0.35em; text-align: center; display: block; margin-bottom: 0.5em; font-weight: 300;} }	#logo {max-width: 300px; margin: 0 auto; display: block;}

h5 {margin: 0.5em 0 0.7em;}

#file-upload-container { cursor: pointer; border: 3px dashed @brand-highlight; display: block; width: 100%; height: 200px; border-radius: 25px; text-align: center; input {display: none;} #add-symbol {display: block; margin: 0 auto; height: 70%; fill :@text-colour-medium; max-width: 40px; &:hover{ fill:@brand-highlight;	} }		#file-name {display: block; margin: 0 auto; color:@text-colour-medium; max-width: 90%; word-break:break-all; } .file-added {color: @text-colour-dark!important;}

&:hover { #add-symbol {fill:@brand-highlight;} }	}

button { width: 100%; padding-top: 1.3em; #upload-symbol {fill:@brand-highlight; transition:all 0.25s ease; max-width: 36px; max-height: 36px; display: inline; vertical-align: middle; margin-top: -4px;} span {display: inline-block;} &:hover { #upload-symbol {fill:#fff;} #upload-symbol #arrow {top: -12px;} }	}

button.disabled { pointer-events: none; cursor: default; color:@text-colour-medium; border-color: @text-colour-medium; background: @text-colour-light; #upload-symbol {fill:@text-colour-medium;} }

.how-to {display: block; text-align: center; width: 100%; margin-top:1em; padding: 0.75em 0; font-weight: 300; transition:all 0.25s ease; &:hover {transform: scale(1.2);} }

#how-to { position: absolute; top: 0; left: 0; margin-top: 0!important; width: 100%; height: 100%; background: #fff; z-index: 3; padding: 1em; display: none; h3 { border-bottom:1px solid @text-colour-dark; padding-bottom: 0.25em;}

#close { position: absolute; top: 1em; right: 1em; #close-symbol {transform: rotate(45deg); max-width: 20px; max-height: 20px; fill:@text-colour-medium;}

&:hover { #close-symbol {fill:@brand-highlight;} }		}	}

.step { float: left; width: 100%; img {max-width: 120px; display: block; float: left; margin-right: 0.5em; border:1px solid @text-colour-dark;} h6 {margin-bottom: 0.5em;} }

#upload-animation {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 4; padding: 1em; text-align: center; opacity: 0; pointer-events: none; transition:opacity 0.25s ease; h3 {margin-bottom: 0px;} }

#upload-animation.show {opacity: 1;} }