/* Space out content a bit */
body {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Redefining bootstrap styles */
.container .jumbotron,
.nav-pills > li > a,
.btn, .form-control, pre {
	border-radius: 0;
}
:not(pre) > code[class*="language-"], pre[class*="language-"] {
	background: #FFF;
}


/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
	padding-left: 15px;
	padding-right: 15px;
}

/* Custom page header */
.header {
	border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 40px;
	padding-bottom: 19px;
}

/* Custom page footer */
.footer {
	padding-top: 19px;
	color: #777;
	border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
	.container {
		max-width: 730px;
	}
}
.container-narrow > hr {
	margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
	margin-top: 10px;
}


/* Supporting marketing content */
.marketing {
	margin: 20px 0 50px;
}
.marketing .col {
	padding-left: 0;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
	/* Remove the padding we set earlier */
	.header,
	.marketing,
	.footer {
		padding-left: 0;
		padding-right: 0;
	}
  	/* Space out the masthead */
	.header {
		margin-bottom: 30px;
	}
  	/* Remove the bottom border on the jumbotron for visual effect */
	.jumbotron {
		border-bottom: 0;
	}
}


/* Pages styles */
.content .page {
	position: absolute;
	padding: 30px;
	background: #CBE0CF;
	text-align: left;
	width: 100%;
	height: 100%;
}

/* Page "John Coltrane" */
.content .page-1 {
	color: #CCC;
	background: #000 url(../img/john_coltrane.jpg) no-repeat 110px 0;
	background-size: cover;
	font-size: 14px;
}
.content .page-1 p {
	width: 300px;
}

/* Page "New York Weather" */
.content .page-2 {
	background: transparent url(../img/new-york.jpg) no-repeat 0 0;
	font-size: 16px;
}

/* Page "Mondrian" */
.content .page-3 h1 {
	color: #421919;
}
.content .page-3 {
	background: url(../img/mondrian.jpg) no-repeat 0 0;
	font-size: 14px;
}
.content .page-3 .info {
	margin-top: 70px;
	width: 540px;
}


/* Content and animation styles */
.container {}
.container .content {
	position: relative;
	overflow: hidden;
	min-height: 400px;
	padding: 0;
	margin-bottom: 0;
}


/* Page code */
.container .content .page-code {
	font-size: 14px;
	text-align: left;
	width: 100%;
	height: 100%;
}
.container .content .page-code .pre {
	position: relative;
}
.container .content .page-code .pre:after {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 28px;
	padding: 2px 4px 0px 6px;
	text-align: center;
	color: #C0C0C0;
	font-weight: bold;
}
.container .content .page-code .pre-html:after {
	content: 'HTML';
	top: -2px;
	right: 10px;
}
.container .content .page-code .pre-css {
	position: absolute;
	top: 80px;
	bottom: 30px;
	margin: 0;
	left: 30px;
	right: 30px;
	overflow: auto;
}
.container .content .page-code .pre-css:after {
	content: 'CSS';
	right: 9px;
}
.container .content .page-code .back {
	position: absolute;
	top: -2px;
	right: 12px;
	font-size: 20px;
}
.container .content .page-code small {
	position: absolute;
	bottom: 1px;
	color: #444;
}


/* Page About */
.container .content .page-about {
	text-align: center;
}



/* Slide animation */
.content .page.slide {    
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.content .page.slide.ng-enter,
.content .page.slide.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.content .page.slide.ng-enter {
    left: 100%;
}
.content .page.slide.ng-enter-active {
    left: 0;
}
.content .page.slide.ng-leave {
    left: 0;
}
.content .page.slide.ng-leave-active {
    left: -100%;
}

.reverse .page.slide.ng-enter {
	left: -100%;
}
.reverse .page.slide.ng-enter-active {
	left: 0;
}
.reverse .page.slide.ng-leave {
	left: 0;
}
.reverse .page.slide.ng-leave-active {
	left: 100%;
}


/* Slidedown */
.content .page.slidedown {
    left: 0;
    width: 100%;
    height: 100%;
}
.content .page.slidedown.ng-enter,
.content .page.slidedown.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.content .page.slidedown.ng-enter {
    top: -100%;
}
.content .page.slidedown.ng-enter-active {
    top: 0;
}
.content .page.slidedown.ng-leave {
    top: 0;
}
.content .page.slidedown.ng-leave-active {
    top: 100%;
}
.reverse .page.slidedown.ng-enter {
	top: 100%;
}
.reverse .page.slidedown.ng-enter-active {
	top: 0;
}
.reverse .page.slidedown.ng-leave {
	top: 0;
}
.reverse .page.slidedown.ng-leave-active {
	top: -100%;
}

/* Slideup */
.content .page.slideup {
    left: 0;
    right: 0;
    height: 100%;
}
.content .page.slideup.ng-enter,
.content .page.slideup.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.content .page.slideup.ng-enter {
    top: 100%;
}
.content .page.slideup.ng-enter-active {
    top: 0;
}
.content .page.slideup.ng-leave {
    top: 0;
}
.content .page.slideup.ng-leave-active {
    top: -100%;
}
.reverse .page.slideup.ng-enter {
	top: -100%;
}
.reverse .page.slideup.ng-enter-active {
	top: 0;
}
.reverse .page.slideup.ng-leave {
	top: 0;
}
.reverse .page.slideup.ng-leave-active {
	top: 100%;
}


/* Pop in/out animation */
.content .page.pop {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
}
.content .page.pop.ng-enter,
.content .page.pop.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.content .page.pop.ng-enter {
    -webkit-transform: scale(0);
    transform: scale(0);
}
.content .page.pop.ng-enter-active,
.content .page.pop.ng-leave,
.content .page.pop.ng-leave-active {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.content .page.pop.ng-leave-active {}


/* Fade in/out */
.content .page.fade {
    left: 0;
    right: 0;
    height: 100%;
    opacity: 1;
}
.content .page.fade.ng-enter,
.content .page.fade.ng-leave {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.content .page.fade.ng-enter {
    opacity: 0;
}
.content .page.fade.ng-enter-active {
    opacity: 1;
}
.content .page.fade.ng-leave {
    opacity: 1;
}
.content .page.fade.ng-leave-active {
    opacity: 0;
}


/* Flip animation */
.content {
	-webkit-perspective: 600px;
	perspective: 600px;
}
.content .page.flip {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.content .page.flip.ng-enter {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	z-index: 800;
}
.content .page.flip.ng-enter-active {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 900;
}
.content .page.flip.ng-leave {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 900;
}
.content .page.flip.ng-leave-active {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	z-index: 800;
}


/* Rotate animation */
.content .page.rotate {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}
.content .page.ng-leave.rotate {
	-webkit-animation-name: rotate-leave;
	animation-name: rotate-leave;
}
.content .page.ng-enter.rotate {
	-webkit-animation-name: rotate-enter;
	animation-name: rotate-enter;
}
@-webkit-keyframes rotate-leave {
	0% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: rotate(0);
		transform: rotate(0);
		opacity: 1;
	}
	100% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
}
@-webkit-keyframes rotate-enter {
	0% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		opacity: 0;
	}
	100% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
		opacity: 1;
	}
}

@keyframes rotate-leave {
	0% {
		transform-origin: center center;
		transform: rotate(0);
		opacity: 1;
	}
	100% {
		transform-origin: center center;
		transform: rotate(-180deg);
		opacity: 0;
	}
}
@keyframes rotate-enter {
	0% {
		transform-origin: center center;
		transform: rotate(-180deg);
		opacity: 0;
	}
	100% {
		transform-origin: center center;
		transform: rotate(-360deg);
		opacity: 1;
	}
}



/* slide-pop screen animation */
.content .page.slide-pop {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.content .page.slide-pop.ng-enter,
.content .page.slide-pop.ng-leave {
	-webkit-transition: all 1s linear;
	transition: all 1s linear;
}
.content .page.slide-pop.ng-enter {
	opacity: 0;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.content .page.slide-pop.ng-enter-active {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.content .page.slide-pop.ng-leave {
	left: 0;
	opacity: .5;
}
.content .page.slide-pop.ng-leave-active {
	left: -100%;
	opacity: 0;
}

.reverse .page.slide-pop.ng-enter {
	opacity: .5;
	left: -100%;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.reverse .page.slide-pop.ng-enter-active {
	opacity: 1;
	left: 0;
}
.reverse .page.slide-pop.ng-leave {
	opacity: .5;
	-webkit-transform: scale(1);
	transform: scale(1);
	left: 0;
	right: 0;
}
.reverse .page.slide-pop.ng-leave-active {
	opacity: 0;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}




/* Addthis */
.addthis_toolbox > a {
	float: none !important;
	display: inline-block;
	vertical-align: top;
}
.addthis_toolbox .addthis_counter {
	width: 32px !important;
}