/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Style
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

body, h1, h2, h3, h4, h5, h6, p { font-family: 'Ubuntu', sans-serif; }





.page h1 { border-bottom: 1px solid rgb(220, 220, 220); padding-bottom: 10px; margin-bottom: 20px; }
h2 { color: rgb(140, 9, 77); }

a { color: #ffffff }
a:hover { color: #ffffff }

.back.button {
	font-size: 13px;
	font-size: 1.3rem;
	border-radius: 1000px;
	padding: 8px 12px;
	margin: 1em 0;
	float: right;
}

.button.small [class^="icon-"], .button.small [class*=" icon-"] {
	position: relative;
	top: 1px;
}


/* -----------------------------------------
   Page Styles
----------------------------------------- */

.header { position: relative; padding: 60px 0 75px 0; z-index: 999999;}

.header h1 {
	font-family: Arial; 
	text-align: center; 
	margin: 8px 0px 20px 0px;
	font-size: 99px; 
	color: rgb(203, 14, 112); 
	text-shadow: 0 -1px 0 rgb(214, 214, 214), 0 1px 0 rgb(132, 132, 132), 0 0 40px rgb(37, 37, 37);
}

.header .clock {
	width: 460px;
	/* height: 116px; */
	margin: 0 auto;
}

.header .flip-clock-divider .flip-clock-label {
	font-size: 24px;
	color: rgb(204, 204, 204);
}

.header .flip-clock-divider.seconds .flip-clock-label { right: -114px; }
.header .flip-clock-divider.minutes .flip-clock-label { right: -110px; }
.header .flip-clock-divider.hours .flip-clock-label { right: -102px; }
.header .flip-clock-dot { background: #fff; }
.header .buttons { text-align: center; margin: 25px 0 0;}

.header.no-clock { padding: 25px 0 75px; }
.header.no-clock .clock { display: none; }
.header.no-clock .buttons { float: right;  margin: 7px 2em; }
.header.no-clock .buttons a { display: none; font-size: 20px; }
.header.no-clock .buttons a:first-child { display: inline-block; }
.header.no-clock h1 { position: absolute; left: .5em; top: 15px; margin: 0; font-size: 50px; }
.header.no-clock .version { font-size: 16px; }
.buttons a { display: inline-block !important; margin-right: .5em; width: auto; }
.buttons a:last-child { margin-right: 0; }

.grand-button, a.grand-button { 
	color: white; 
	font-size: 19px; 
	padding: 0.60em 0.7em;
	border: 3px solid #fff;
	border-radius: 3px;
	box-shadow: 2px 2px 0 rgb(80, 80, 80);
	cursor: pointer; width: 100%;
	box-shadow: inset 0 0 0 0 #fff;
	-webkit-transition: all ease 0.6s;
	-moz-transition: all ease 0.6s;
	transition: all ease 0.6s;
	letter-spacing: 1px;
    text-transform: uppercase;
	font-family: 'OpenSansBold', sans-serif;
	min-width: 55px;
}

.grand-button:hover  {
	box-shadow: inset 0 100px 0 0 #fff;
    color: #000;
}

.grand-button:active { position: relative; top: 1px; }

.grand-button-two, a.grand-button-two { 
	color: white; 
	font-size: 19px; 
	padding: 0.60em 0.7em;
	border: 3px solid #fff;
	border-radius: 3px;
	box-shadow: 2px 2px 0 rgb(80, 80, 80);
	cursor: pointer; width: 100%;
	box-shadow: inset 0 0 0 0 #fff;
	-webkit-transition: all ease 0.6s;
	-moz-transition: all ease 0.6s;
	transition: all ease 0.6s;
	letter-spacing: 1px;
    text-transform: uppercase;
	font-family: 'OpenSansBold', sans-serif;
	text-align: left;
}

.grand-button-two:hover  {
	box-shadow: inset 0 100px 0 0 #fff;
    color: #000;
}

.grand-button-two:hover .buttonspan  {
    color: #000;
}

.grand-button-two:active { position: relative; top: 1px; }

.buttonspan { 
    display: block;
    /* color: rgb(195, 195, 195); */
	color: #fff;
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
    text-shadow: none;
    text-align: left;
	-webkit-transition: all ease 0.6s;
	-moz-transition: all ease 0.6s;
	transition: all ease 0.6s;
}




.flat.button { background: rgb(203, 13, 112); border: none; box-shadow: none; border-radius: 5px; padding: .8em; }
.flat.round.button { border-radius: 1000px; -moz-border-radius: 1000px; -webkit-border-radius: 1000px; padding: 10px 12px; }


.sidebar { margin-top: 20px; }
ul.plain, .sidebar li { list-style: none; }
.sidebar li a {
	color: black;
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid rgb(230, 230, 230);
}

.sidebar li:last-child a { border-bottom: none; }
.sidebar li a:after {
	content: "\f054";
	float: right;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
	color: black;
}

.sidebar .active a, .sidebar .active a:after { color: rgb(203, 13, 112); }

ul.plain li { margin-bottom: 10px; }

@media screen and (min-width: 767px) {

	.sidebar.fixed { 
		position: fixed;
		top: 0;
	}
	
	a.grand-button,
	a.grand-button:hover { width: auto; display: inline-block !important; }
	
	a.grand-button-two,
	a.grand-button-two:hover { width: auto; display: inline-block !important; }
	
}

@media screen and (max-width: 767px) {

	.header { padding-bottom: 25px; padding: 5px 0; }
	.header .buttons { margin: 25px 0 0; text-align: center; }
	.header h1 { font-size: 54px; }
	.header .version { font-size: 18px; }
	.header .clock { margin: 0 auto; display: block; width: 322px; }
	
	.flip-clock-wrapper ul { height: 50px; line-height: 50px; }
	.flip-clock-wrapper ul li a div.up:after { top: 24px; }
	.flip-clock-divider { height: 50px; }
	.flip-clock-dot { height: 6px; width: 6px; left: 7px;}
	.flip-clock-dot.top { top: 17px; }
	.flip-clock-dot.bottom { bottom: 8px; }
	
	.grand-button,
	a.grand-button,
	a.grand-button:hover { 
		display: block !important;
		width: 95%; 
		margin: 0 2.5% 10px !important;
	}
	
	.grand-button-two,
	a.grand-button-two,
	a.grand-button-two:hover { 
		display: block !important;
		width: 95%; 
		margin: 0 2.5% 10px !important;
	}
	
	.header .flip-clock-divider .flip-clock-label { font-size: 16px; }
	.header .flip-clock-divider.hours .flip-clock-label { right: -66px; }
	.header .flip-clock-divider.minutes .flip-clock-label { right: -78px; }
	.header .flip-clock-divider.seconds .flip-clock-label { right: -78px; }
	
	.flip-clock-wrapper ul { width: 37px; }
	.flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
}

dl dt { font-size: 18px; font-weight: bold; margin-bottom: .5em; }
dl dd { margin-bottom: 1em; line-height: 1.5em; }
dl dd b { font-weight: normal; font-family: monospace; }


.page { margin: 1em 0; }


.footer-copy { text-align: center; padding: 0.5em 0; }

.version { display: block; color: rgba(255, 255, 255, 1.0); font-size: 16px; font-family: 'Ubuntu', sans-serif; text-shadow: none; }

.flip-clock-wrapper.clock-example { margin: 40px 0 20px 0;}

.clock-example .flip-clock-label { font-size: 16px; }
.clock-example .flip-clock-meridium a,
.clock-example .flip-clock-meridium a:hover { font-size: 24px; color: rgb(74, 73, 74); position: absolute; top: 10px; }






/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code { background: none; }

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 0 1em 1em 1em;
	margin: .5em 0;
	overflow: auto;	
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: rgb(23, 23, 23);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: rgb(199, 203, 255);
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string {
	color: rgb(127, 208, 255);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: rgb(114, 255, 197);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: rgb(203, 13, 112);
}


.token.regex,
.token.important {
	color: #e90;
}

.token.important {
	font-weight: bold;
}

.token.entity {
	cursor: help;
}