/* theme */
#site-wrapper { position: relative; padding-bottom: 100px; }

/*typo */
h1, h2, h3, h4, h5, h6, lead, .jumbotron { font-family: 'Open Sans' } 
h1, h2, h3, h4, h5, h6, strong { color: #111 }
h4 { font-size: 20px; letter-spacing: -1px; font-weight: bold; } 
h1 { letter-spacing: -3px; } h2 { letter-spacing: -2px; } h3 { letter-spacing: -1px; }
h1 small { letter-spacing: -2px; } h2 small { letter-spacing: -1px; } h3 small { letter-spacing: 0px; }

.parallax { filter: alpha(opacity=10); opacity: 0.1; position: absolute; top: 0; right:0; bottom: 0; left:0; width: 100%; 
	background-image: url('../../assets/img/back.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; 
}

/* side main navigation */
#mainnav { margin: 30px 0; min-width: 40%; text-align: right; }
.affix {position: fixed; width: 263px; top: 30px; bottom: 30px; }
.affix-top {position: static; }
.nav-pills>li>a {
	padding: 5px 10px;
}

/* footer */
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 60px;
	background-color: #F5F5F5;
}
.footer p {margin: 1.5em 0}
.footer ul {margin: 15px 0}


/* responsive styling */
@media (max-width: 479px) {
	#header h1.pull-left,
	#header .btn-toolbar.pull-right { float: none !important; text-align: center }
	.jumbotron { padding-left: 0; padding-right: 0 }
}
@media (max-width: 768px) {
	.affix { position: relative; width: 100%; }
	#overview .row > .col-sm-6 { z-index: 2 }
	.test-col {
		perspective: 2500px !important;
		position: absolute !important;
		z-index: 1 !important;
		opacity: 0.5;
	}
	#scroll-tween i.fa {display: none;}
}


/* additional buttons */
.btn { transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; margin-bottom: 4px }
.btn i { width: 18px; text-align:center }
.btn-jtween { color: #ffffff; background-color: #ec1e71; border-color: #e11d6c;}
.btn-jtween:hover,.btn-jtween:focus,.btn-jtween:active,.btn-jtween.active,.open > .dropdown-toggle.btn-jtween { color: #ffffff; background-color: #e11c6c; border-color: #d41a65;}
.btn-jtween:active,.btn-jtween.active,.open > .dropdown-toggle.btn-jtween { background-image: none;}
.btn-jtween.disabled,
.btn-jtween[disabled],fieldset[disabled] .btn-jtween,
.btn-jtween.disabled:hover,
.btn-jtween[disabled]:hover,fieldset[disabled] .btn-jtween:hover,
.btn-jtween.disabled:focus,.btn-jtween[disabled]:focus,
fieldset[disabled] .btn-jtween:focus,
.btn-jtween.disabled:active,
.btn-jtween[disabled]:active,fieldset[disabled] .btn-jtween:active,
.btn-jtween.disabled.active,.btn-jtween[disabled].active,fieldset[disabled] .btn-jtween.active { background-color: #ec1e71; border-color: #138ac1;}
.btn-jtween .badge { color: #ec1e71; background-color: #ffffff;}

.btn-donate { color: #ffffff; background-color: #ff6c00; border-color: #f16702;}
.btn-donate:hover,.btn-donate:focus,.btn-donate:active,.btn-donate.active,.open > .dropdown-toggle.btn-donate { color: #ffffff; background-color: #f36903; border-color: #e86302;}
.btn-donate:active,.btn-donate.active,.open > .dropdown-toggle.btn-donate { background-image: none;}
.btn-donate.disabled,.btn-donate[disabled],
fieldset[disabled] .btn-donate,
.btn-donate.disabled:hover,.btn-donate[disabled]:hover,fieldset[disabled] .btn-donate:hover,
.btn-donate.disabled:focus,.btn-donate[disabled]:focus,fieldset[disabled] .btn-donate:focus,
.btn-donate.disabled:active,.btn-donate[disabled]:active,fieldset[disabled] .btn-donate:active,
.btn-donate.disabled.active,.btn-donate[disabled].active,fieldset[disabled] .btn-donate.active { background-color: #fd8228; border-color: #ff6c00;}
.btn-donate .badge { color: #ff6c00; background-color: #ffffff;}

.popover-title { font-weight: bold; }
.donate-popover { max-width: 265px; font-size: 12px; }
.donate-popover img { margin: 10px 0; }



/* examples */
.test-col { perspective: 1200px; position: relative; }
.jumbotron { position: relative; overflow: hidden; }

.img-wrapper {
	position: absolute; z-index: -1;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateY(-15%) rotateX(60deg) rotateZ(20deg);
	transform: translateY(-15%) rotateX(60deg) rotateZ(20deg);		
}

pre { overflow-x: auto; word-wrap: normal; }
section { clear: both; float: left; width: 100%; margin: 0 0 1.6em; }
section:first-child h1 { margin-top: 0 }
#size-example { background: #3B194D; margin-bottom: 10px }
#translate-example { background: #159BD8; }
#rotate-example { background: #f16702; }
#scale-example { background: #158D36; }
#color-example { background: #FF6C00; text-align:center; height: 100px; padding: 25px 0; line-height: 25px; font-size: 20px; text-transform: uppercase; color: #fff; font-weight: bold; }
#position-example { background: #159BD8; position: absolute; left: -100%; }
#control-example { background: #158D36; position: relative }
.example-object { margin-right: 15px; width: 100px; height: 100px; border-radius: 10px; -webkit-border-radius: 10px; }
.large-icon:before { font-size: 40px; color: #ec1e71 }