a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
    background: transparent;
    border: 0 none;
    font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
    vertical-align: top; 
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table, 
table td { 
	padding:0;
	border:none;
	border-collapse:collapse;
}
img {
	vertical-align:top; 
}
embed { 
	vertical-align:top;
}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, #switcher, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ 
	display: inline 
}
body { 
	font-family: 'PT Serif', serif;
	font-size:100%; 
}
html, body { 
	height:100%;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}
@font-face { 
	font-family: 'Zrnic Regular';
	src: url('fonts/zrnic_rg-webfont.eot');
	src: url('fonts/zrnic_rg-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/zrnic_rg-webfont.woff') format('woff'),
	     url('fonts/zrnic_rg-webfont.ttf') format('truetype'),
	     url('fonts/zrnic_rg-webfont.svg#webfont') format('svg');
}
body {
	overflow:hidden;
	margin:0;
	padding:0;

}
h1, h2, h3, h4, h5, h6 {
	color: #444;
	font-family: 'Zrnic Regular', serif;
	font-weight: normal;
	line-height:1.2em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
	font-weight: inherit; 
}
h1 { 
	font-size: 46px;  
	margin-bottom: 14px;
}
h2 { 
	font-size: 32px;  
	margin-bottom: 10px; 
}
h3 { 
	font-size: 15px;  
	margin-bottom: 8px; 
}
h4 { 
	font-size: 21px;  
	margin-bottom: 4px; 
}
h5 { 
	font-size: 17px;  
}
h6 { 
	font-size: 12px; 
	margin-bottom:14px; 
	font-family:Arial, Helvetica, sans-serif; 
	font-weight:bold;
	text-transform:none;
	color:#8c8c8c; 
}
h6 a{
	text-decoration:none;
	color:#8c8c8c;
}
h6 a:hover{
	text-decoration:underline;
}
p, pre, blockquote, figure, figcaption, table, fieldset{
	font-size: 16px;
	line-height: 24px;
	margin: 25px 0;
	color: #333;
}
p img { 
	margin: 0; 
}
em { 
	font-style: italic; 
}
strong { 
	font-weight: bold; 
}
small { 
	font-size: 80%; 
}
blockquote, 
blockquote p { 
	font-size: 17px; 
	line-height: 24px; 
	color: #333; 
	font-style: italic; 
}
blockquote { 
	padding: 15px 20px 0 19px;
	float: right;
	width: 30%;
	background:url(../img/quotation.jpg) 0 0 no-repeat;
}
blockquote cite { 
	display: block; 
	font-size: 12px; 
	color: #555; 
}
blockquote cite:before { 
	content: "\2014 \0020"; 
}
blockquote cite a, 
blockquote cite a:visited, 
blockquote cite a:visited { 
	color: #555; 
}
hr { 
	border: solid #ddd; 
	border-width: 1px 0 0; 
	clear: both; 
	margin: 10px 0 30px; 
	height: 0; 
}
a { 
	color: #333;
	text-decoration: none; 
	outline: 0; 
	-webkit-transition: color 500ms ease-in;
	-moz-transition: color 500ms ease-in;
	-ms-transition: color 500ms ease-in;
	-o-transition: color 500ms ease-in;
	transition: color 500ms ease-in;
}
a:hover, 
a:focus { 
	text-decoration:none; 
	color:#bc232a; 
}
.current-page,
.current-page a{
	color:#bc232a !important;
}
p a, p a:visited { 
	line-height: inherit; 
}
header{
	border-top:#bc232a 8px solid;
	background-color: #fff;
	z-index: 9999;
	display: block;
	position: relative;
}
#responsive-layout{
	display:none;
}
#site-title{
	float:left;
	padding:17px 0 0 0;
	margin:0;
}
#site-title a{
	text-decoration:none;
	display:block;
	text-indent:-999999px;
	width:164px;
	height:88px;
	background:url(../img/Myriad-MS-logo.jpg) 0 0 no-repeat;
}
#content ul{
	font-size:1.3em;
}
.vertical-stack{
	margin-top: 30px;
}
.phone,
.contactemail{
	float:right;
	font-size:16px;
	line-height: 28px;
	background:url(../img/telephone.jpg) 0 0 no-repeat;
	padding:4px 0 4px 38px;
}
.phone a,
.contactemail a{
	text-decoration: none;
}
.contactemail{
	line-height: 28px;
	background:url(../img/email.png) 0 0 no-repeat;
}
nav.header {
	width: 100%;
	overflow: hidden;
	margin-top:70px;	
}
nav.header ul {
	list-style: none;
	overflow: hidden;
}
nav.header li{
	float:left;
	padding-left:15px;
	margin-left:15px;
	font-family: 'Zrnic Regular', sans-serif;
	font-size:1.7em;
	line-height:1.2em;
	letter-spacing: 1px;
	height:30px;
}
nav.header li:first-child{
	background:none;
	margin-left:0;
	padding-left:15px;
}
nav.header li a {
	text-decoration:none;
	color:#333;
	border-bottom: 1px #bc232a solid;
}
nav.header li:hover, 
nav.header li.current {
	color:#bc232a;
}
nav.header li a:hover, 
nav.header li.current a {
	color:#bc232a;
}
.minus-five-margin{
	margin-top: -5px;
}
.top5{
	padding-top:5px;
}
.top10{
	padding-top:10px;
}
.top15{
	padding-top:15px;
}
.top20{
	padding-top:20px;
}
.top25{
	padding-top:25px;
}
.top30{
	padding-top:30px;
}
.top35{
	padding-top:35px;
}
.bottom20{
	padding-bottom:20px !important;	
}
.img-bottom-indent{
	margin-bottom:15px;
}
.img-indent{
	float:left;
	margin:2px 10px 0 0;
}
#content{
	margin:17px 0 0 0;
}
.home-colour{
	background-color:#c9161e;
	margin:0px;
}
.home-container{
	top:-450px;
	left:-480px;	
}
.plan-container{
	top:750px;
	left:-180px;		
}
.write-container{
	top: 2050px;
	left: 320px;	
}
.create-container{
	top:1150px;
	left:2270px;	
}
.contact-container{
	top: -1150px;
	left: 2030px;	
}
.plan-colour{
	/*background-color:#e4c3a0;*/
	background: #e4c3a0 url(../img/plan-bg.jpg) no-repeat left center !important;
	margin:0px;
}
.write-colour{
	background: #e5e5e5 url(../img/write-bg.jpg) no-repeat left center !important;
	margin:0px;
}
.create-colour{
	background: #e1e1c7 url(../img/create-bg.jpg) no-repeat left bottom !important;
	margin:0px;
}
.contact-colour{
	/*background-color:#d9e3eb;*/
	background: #d9e3eb url(../img/contact-bg.jpg) no-repeat left center !important;
	margin:0px;	
}
/*.home-bg{
	background: #c9161e no-repeat left bottom !important;
}
.plan-bg{
	background: #e4c3a0 url(../img/plan-bg.jpg) no-repeat left bottom !important;
}
.write-bg{
	background: #e5e5e5 url(../img/write-bg.jpg) no-repeat left top !important;
}
.create-bg{
	background: #e1e1c7 url(../img/create-bg.jpg) no-repeat left top !important;
}
.contact-bg{
	background: #d9e3eb url(../img/contact-bg.jpg) no-repeat left bottom !important;
}*/
footer{
	position: fixed;
	bottom: 0;
	z-index: 9999;
	background-color: white;
	width:100%;
}
footer .inner{
	padding:0 0 10px 0;
}
.fade-out{
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
.white-panel{
	background-color: #fff;
	margin: 45px 0px 0px 0px;
	border-radius: 10px;
	padding:55px 35px 0px 35px;
}
.plan-panel{
	background-color:#e4c3a0;
	background-color: rgba(228, 195, 160, 0.8);
	margin: 30px 0px 0px 130px;
	padding: 55px 35px 60px 35px;
}
.write-panel{
	background-color:#e5e5e5;
	background-color: rgba(229, 229, 229, 0.8);
	margin: 30px 0px 0px 130px;
	padding: 55px 35px 60px 35px;
}
.create-panel{
	background-color:#e1e1c7;
	background-color:rgba(225, 225, 199, 0.8);
	margin: 30px 0px 0px 130px;
	padding: 55px 35px 60px 35px;
}
.contact-panel{
	background-color:#d9e3eb;
	background-color:rgba(217, 227, 235, 0.8);
	margin: 30px 0px 0px 130px;
	padding: 55px 35px 60px 35px;
}
.feature-icons{
	height:220px;
	width:750px;
	margin: 0px auto;
}
.feature-icons li{
	float:left;
	width:250px;
}
.feature-icons li:nth-child(1){
	width: 200px;
}
.feature-icons li:nth-child(2){
	width: 300px;
}
.feature-icons p{
	position: relative;
	top:-30px;
	margin-left: 35px;
}
.services-vertical{
	margin-left: 35px;
}
.services-vertical li{
	width:100% !important;
	font-size: 16px;
	color: #333;
	height:22px !important;
}
.copyright{
	margin: 15px 0 15px 0;
}
.division{
	font-size:10px;
	font-style: italic;
	margin: 18px 0 15px 0;
}
.contact-column{
	position: relative !important;
	height: 270px;
	padding-top: 10px;
}
.contact-column-icons,
.contact-column-details{
	float:left;
}
.contact-column-details{
	left:50px;
	width:300px;
	font-size: 16px;
}
.contact-column-icon-2{
	top: 45px;
	left: 4px;
}
.contact-column-icon-3{
	top: 95px;
	left: 5px;
}
.contact-column-icon-4{
	top: 153px;
	left: 5px;
}
.contact-column-details-1{
	top:6px;
}
.contact-column-details-2{
	top:55px;	
}
.contact-column-details-3{
	top:104px;	
}
.contact-column-details-4{
	top:128px;	
}

/* #Images
================================================== */
img.scale-with-grid {
	max-width: 100%;
	height: auto; 
}
/* #Buttons
================================================== */
/* #Forms
================================================== */
form#contact{margin-top:15px;}
label{
	display:block;
	margin-bottom:9px;
}
form#contact strong{
	color:#9d9d9d;
	font-weight:normal;
	padding-bottom:3px;
	display:block;
}
form#contact strong span{
	color:#1bd5e1;
}
fieldset {
	margin-bottom: 20px;
}
form#contact input[type="text"],
input[type="password"],
input[type="email"],
form#contact textarea,
select {
	border:#adadad 1px solid;
	border-bottom:none;
	border-right:none;
	position:relative;
	background:#fff;
	width:92.5%;
	padding:1px 10px 2px 10px;
	color:#8c8c8c;
	
}
input[type="submit"], input[type="reset"]{
	border:0;
	margin:0;
	background:0;
	display:block;
	width:54px;
	height:24px;
	background:url(../images/send-bg.gif) 0 0 no-repeat;
	cursor:pointer;
	float:left;
	
}
input[type="reset"]{
	background:url(../images/clear-bg.gif) 0 0 no-repeat;
	margin-right:16px;
}
textarea {
	min-height: 178px;
}
/* #Misc
================================================== */
.remove-bottom { 
	margin-bottom: 0 !important; 
}
.half-bottom { 
	margin-bottom: 10px !important; 
}
.add-bottom { 
	margin-bottom: 20px !important; 
}
.big {
	display: block;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 10px;
	text-shadow: 
		2px 2px 0 transparent,
		4px 4px 0 #101010;
}

.wrapper div {
	position: absolute;
}

/*.settings, nav {
	position: fixed;
	z-index: 9999999;
	bottom: 0;
	background: rgba(10,10,10, 0.5);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
}
*/
.settings {
	right: 0;
	padding: 10px 20px;
	border-radius: 10px 0 0 0;
}

.settings a {
	border: none;
}

/*nav {
	left: 0;
	border-radius: 0 10px 0 0;
}

nav li {
	float: left;
}

nav a {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border: none;
	text-align: center;
	transition: 0.25s;
}

nav li:last-child a {
	border-radius: 0 10px 0 0;
}

nav a:hover {
	background: rgba(15,15,15, 0.5);
}*/

.sp-canvas {
	display: none;
}

.arrow {
	position: relative;
	display: inline-block;
}

.demo { 
	width: 800px;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
}

.demo .arrow {
	font-size: 20px;
	animation: point-down 0.5s alternate infinite;
}

.description {
	top: 740px;
	left: 180px;
	width: 440px;
}

.syntax {
	top: 1510px;
	left: 430px;
	width: 400px;
}

.scrollbar {
	top: 1540px;
	left: 1600px;
	width: 400px;
}

.rotations {
	left: 2185px;
	top: 660px;
	width: 460px;
	transform: rotate(-90deg) translateY(2.5em);
}

.rotations .upside-down {
	font-size: 42px;
	text-align: right;
	transform: rotate(180deg) translateY(3em);
}

.source {
	left: 2200px;
	top: -800px;
	width: 400px;
	transform: rotate(90deg) translateX(50px);
}

.follow {
	width: 475px;
	left: 1100px;
	top: -950px;
	transform: rotate(90deg) translateX(50px);
}

.follow .big {
	font-size: 40px;
}

.highlight {
	animation: highlight 0.2s alternate 6 ;
}

@keyframes point-down {
	from {
		top: 0;
	}
	to {
		top: 5px;
	}
}

@keyframes highlight {
	to {
		background: lightblue;
	}
}
/* =========================================
  	Scroll bar styles for jQuery Scroll Path
  	      (http://joelb.me/scrollpath)
   ========================================= */

.sp-scroll-bar {
	position: fixed;
	z-index: 9999;
	right: 0;
	top: 5%;
	width: 10px;
	height: 90%;
	border-radius: 5px;
}

.sp-scroll-bar:hover {
	background: white;
	background: rgba(255,255,255, 0.1);
}

.sp-scroll-bar .sp-scroll-handle {
	position: absolute;
	width: 100%;
	height: 50px;
	border-radius: inherit;
	background: gray;
	background: rgba(0,0,0,0.7);
}

.sp-scroll-bar .sp-scroll-handle:hover {
	background: black;
}

#responsive-layout{
	/*padding-bottom:80px;*/
}

.responsive-home .home-colour,
.responsive-plan .plan-bg,
.responsive-write .write-bg,
.responsive-create .create-bg,
.responsive-contact .contact-bg{
	display:block;
}

.responsive-home .plan-bg,
.responsive-home .write-bg,
.responsive-home .create-bg,
.responsive-home .contact-bg,
.responsive-plan .home-colour,
.responsive-plan .write-bg,
.responsive-plan .create-bg,
.responsive-plan .contact-bg,
.responsive-write .home-colour,
.responsive-write .plan-bg,
.responsive-write .create-bg,
.responsive-write .contact-bg,
.responsive-create .home-colour,
.responsive-create .plan-bg,
.responsive-create .write-bg,
.responsive-create .contact-bg,
.responsive-contact .plan-bg,
.responsive-contact .write-bg,
.responsive-contact .create-bg,
.responsive-contact .home-colour{
	display:none;
}