/*==============================================
	Let's start the magic!
==============================================*/
body {
	font-family:'DK Cool Crayon';
	color:#bbb;
	background:#222 url('../images/blackboard_background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-size:24px;
	padding-bottom:50px;
}

/*==============================================
	Loading
==============================================*/
.loading {
	display:block;
	color:#fff;
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:50;
	background:#333;
}

.loading-container {
	position:fixed;
	top:50%;
	text-align:center;
	width:100%;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
}

.quiver {
  position: fixed;
  bottom: 50%;
  left: 50%;
  z-index: 899;
  margin-bottom: -50px;
  margin-left: -75px;
  width: 150px;
}

.quiver .arrows {
  -moz-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  -webkit-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  vertical-align: baseline;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 1px 10px;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #0b486b rgba(255, 255, 255, 0);
}

.quiver .st {
  border-bottom-color: #0b486b;
}

.quiver .nd {
  border-bottom-color: #3b8686;
}

.quiver .rd {
  border-bottom-color: #79bd9a;
}

.quiver .th {
  border-bottom-color: #a8dba8;
}

.quiver .fth {
  border-bottom-color: #cff09e;
}

.quiver span:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.quiver span:nth-child(2) {
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.quiver span:nth-child(3) {
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.quiver span:nth-child(4) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.quiver span:nth-child(5) {
  -moz-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-moz-keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}
@-webkit-keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}
@keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}

.loading-text {
  display: block;
  font: normal 22px/1em;
  text-transform: uppercase;
  color: #cff09e;
}


/*==============================================
	Architecture
==============================================*/
#content {
	position:relative;
	z-index:1;
}

.section {
	margin:60px 0;
}

hr {
	border-top:3px dashed #999;
}

a { color:#aaa; text-decoration:underline; transition:all ease-in-out 250ms; }
a.no-underline { text-decoration:none !important; }
a:hover { text-decoration:none; color:#fff; }

img { max-width:100%; }

/*==============================================
	Font Family
==============================================*/
.font-crayon { font-family:'DK Cool Crayon'; }
.font-drawing { font-family:'Drawing Guides'; }

/*==============================================
	Font Color
==============================================*/
.yellow 	{ color:#fff4aa; }
.red 	{ color:#ff9292; }
.green	{ color:#90ff90; }
.cyan	{ color:#00b7a8; }
.orange	{ color:#ff7725; }
.white	{ color:#ffffff; }

/*==============================================
	Typography
==============================================*/
h1,h2,h3,h4,h5,h6 { color:#fff; }
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small { color:#bbb; }
p { font-size:24px; }

.heading-small { font-size:16px; }

.font-s-60 { font-size:60px; }
.font-s-56 { font-size:56px; }
.font-s-48 { font-size:48px; }
.font-s-36 { font-size:36px; }

/*==============================================
	Main Page
==============================================*/
.initial { margin-top:168px;}

.main-title { color:#ddd; text-align:right; line-height:120%; padding-top:105px; padding-right:10px; }
.main-illust { text-align:right; }
.main-illust img { max-width:100%; }

/*==============================================
	Skill Chart
==============================================*/
.skill {
	font-size:36px;
	line-height:100%;
}

.skill-name {
	font-family:'Drawing Guides';
	color:#fff;
}

/*==============================================
	Portfolio
==============================================*/
.portfolio-illust {
	float:left;
	max-width:100%;
	margin-right:15px;
}

.mix {
	display: none;
}
.filter-container {
	display:block;
	margin:25px 0;
	text-align:center;
}

.filter {
	display:inline-block;
	background:#111;
	background:rgba(0,0,0,0.60);
	color:#fff;
	padding:10px 35px;
	border-radius:50px;
	border:0;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.45);
	margin:5px 2px;
	font-size:20px;
	transition:all ease-in-out 250ms;
}

.filter.active,.filter:hover {
	background:#fff;
	background:rgba(255,255,255,0.85);
	color:#222;
}

.portfolio {
	border:25px solid #1a1a1a;
	border:25px solid rgba(0,0,0,0.55);
	border-radius:18px;
	position:relative;
	margin:15px 0;
}

.portfolio-overlay {
	filter: alpha(opacity=0);
	opacity:0;
	background:rgba(0,0,0,0.875);
	text-align:center;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	padding-top:30%;
	font-size:16px;
	transition:all ease-in-out 200ms;
}

.portfolio:hover .portfolio-overlay {
	filter: alpha(opacity=1);
	opacity:1;
}

.portfolio-title {
	margin-top:-15px;
	padding:0;
	font-size:20px;
	filter: alpha(opacity=0);
	opacity:0;
	transition:all ease-in-out 200ms;
}

.portfolio:hover .portfolio-title {
	filter: alpha(opacity=1);
	opacity:1;
	margin:0;
}


/*==============================================
	Modal
==============================================*/
.pfl .modal-dialog {
	width:800px;
}

.pfl .modal-header {
	border-bottom: 1px solid #2a2a2a;
}

.pfl .close {
	color:#fff;
}

.pfl .modal-footer {
	border-top: 1px solid #2a2a2a;
}

.pfl .modal-content {
	background:#1a1a1a;
	font-size:18px;
}

.pfl p {
	font-size:18px;
}

.pfl .widget {
	margin-bottom:25px;
}

.pfl .widget-title {
	font-family:'Drawing Guides';
}

.pfl .pfl-btn-link {
	border:2px dashed #ffcc00;
	padding:12px 15px;
	display:inline-block;
	margin:10px auto;
	transition:all ease-in-out 200ms;
}

.pfl .pfl-btn-link:hover {
	border:2px solid #ffcc00;
	color:#ffcc00;
}

.pfl .project-preview {
	margin-left:-15px;
	margin-right:-15px;
	margin-top:-15px;
	margin-bottom:25px;
	border-bottom:4px solid #333;
}

.pfl .project-preview img {
	max-width:100%;
	width:auto;
	text-align:center;
	display:inline-block;
}

.pfl .m-carousel-photos .m-item {
	text-align:center;
}

.m-carousel-hud a {
	border-radius:5px;
}

.m-carousel-photos .m-item > img {
	box-shadow:none;
}

.m-item {
	background:#fff;
}

.project-desc {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:14px !important;
}

.project-desc p {
	font-size:14px;
}

/*==============================================
	Contact Page
==============================================*/
.contact-illust {
	margin-top:40px;
	text-align:center;
}

.contact-illust img {
	max-width:100%;
}

/*==============================================
	Contact Form
==============================================*/
.contact-form {
	font-size:20px;
	margin:40px 0 20px;
}

.black-contact {
	background:#1a1a1a;
	background:rgba(0,0,0,0.6);
	padding:10px 0;
	margin-bottom:2px;
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
}

.black-contact label {
	color:#fff;
	font-size:16px;
}

.black-contact input, .black-contact textarea {
	background:transparent;
	border:0;
	padding-left:0;
	padding-right:0;
	transition:all ease-in-out 200ms;
	color:#aaa;
}

.black-contact input:hover, .black-contact textarea:hover, .black-contact input:focus, .black-contact textarea:focus {
	color:#f0f0f0;
}

.black-contact input:focus,
.black-contact textarea:focus {
	box-shadow:none;
}

.black-contact-submit {
	background:#111;
	background:rgba(0,0,0,0.65);
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
	transition:all ease-in-out 200ms;
}

.btn-contact-form {
	color:#fff;
	background:transparent;
	width:100%;
	padding:15px 0;
	border-radius:0;
	transition:all ease-in-out 200ms;
}

.black-contact-submit:hover {
	background:#fff;
	background:rgba(255,255,255,0.85);
}

/*==============================================
	Promises
==============================================*/
.big-icon-container {
	text-align:center;
	margin:20px 0;
}
.big-icon {
	-ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
	display:inline-block;
	padding-top:53px;
	text-align:center;
	box-shadow:0 0 3px rgba(0,0,0,0.5);
	
	border-top-right-radius: 100px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 100px;
	border-bottom-left-radius: 100px;
	
	background:#111;
	background:rgba(0,0,0,0.5);
	
	width:200px;
	height:200px;
	
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	
	transition:all ease-in-out 100ms;
}
.big-icon:hover {
	box-shadow:0 0 10px rgba(255,255,255,0.7);
}
.big-icon .fa {
	font-size:100px;
	color:#fff;
}

.big-icon i,
.big-icon span {
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
	display:inline-block;
}

/*==============================================
	Pricing Table
==============================================*/
.pricing-table {
	text-align:center;
	margin:20px 0;
	padding:10px;
	border-radius:15px;
	background:#1a1a1a;
	background:rgba(0,0,0,0.5);
}

.price {
	color:#fff;
	font-size:40px;
	padding:30px 0;
}

.price-category {
	background:#111;
	padding:10px 0;
	margin-left:-15px;
	margin-right:-15px;
}

.price-description {
	padding:0 10px;
}

.price-description p {
	margin:7px 0;
	font-size:17px;
}

.price-features {
	margin:5px 0 0 0;
	padding:0 10px;
	list-style:none;
	background:#151515;
	background:rgba(0,0,0,0.4);
	border-radius:5px;
}

.price-features li {
	margin:0;
	padding:10px;
	text-align:center;
	font-size:17px;
	border-bottom:2px dashed #333;
	color:#aaa;
	transition:all linear 150ms;
}

.price-features li:hover {
	color:#eee;
}

.price-features li.crossed {
	color:#666;
	text-decoration:line-through;
}

.price-features li:last-child {
	border-bottom:0;
}

.big-icon {
	-ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
	display:inline-block;
	padding-top:53px;
	text-align:center;
	box-shadow:0 0 3px rgba(0,0,0,0.5);
	
	border-top-right-radius: 100px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 100px;
	border-bottom-left-radius: 100px;
	
	background:#111;
	background:rgba(0,0,0,0.5);
	
	width:200px;
	height:200px;
	
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	
	transition:all ease-in-out 100ms;
}
.big-icon:hover {
	box-shadow:0 0 10px rgba(255,255,255,0.7);
}
.big-icon .fa {
	font-size:100px;
	color:#fff;
	
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}


/*==============================================
	Timeline
==============================================*/
.timeline-illust {
	float:left;
	width:100px;
	margin-right:15px;
}

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 4px;
        background-color: #eeeeee;
        left: 40px;
        margin-left: -1.5px;
		border-radius:15px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }
		
        .timeline > li > .timeline-panel {
			margin-left:90px;
            border-radius: 2px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            box-shadow:1px 1px 3px rgba(0,0,0,0.3);
			background:#1a1a1a;
			background:rgba(0,0,0,0.7);
			
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 20px;
				right: auto;
				left: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 0px solid rgba(0,0,0,0.7);
                border-right: 15px solid #1a1a1a;
                border-right: 15px solid rgba(0,0,0,0.7);
                border-bottom: 15px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 54px;
            height: 54px;
            line-height: 47px;
            text-align: center;
            position: absolute;
            left: 15px;
			margin-left: 0;
			top: 10px;
            background-color: #999999;
            z-index: 50;
            border-top-right-radius: 50px;
            border-top-left-radius: 0;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 50px;
			border:3px solid #fff;
			box-shadow:1px 1px 4px rgba(0,0,0,0.5);
			font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size:14px;
			text-shadow:1px 1px 2px rgba(0,0,0,0.5);
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-title {
    margin: 5px 0;
    color: inherit;
	color:#eee;
}

.timeline-body {
	color:#7a7a7a;
}

.timeline-body > p,
.timeline-body > ul {
	font-size:17px;
    margin-bottom: 0;
}

.timeline-body > p + p {
	margin-top: 5px;
}
	
/*==============================================
	Utility
==============================================*/
.block { display:block; }
.inline-block { display:inline-block; }
.inline { display:inline; }

.margin-10 { margin-bottom:10px; }
.margin-20 { margin-bottom:20px; }
.margin-30 { margin-bottom:30px; }
.margin-40 { margin-bottom:40px; }
.margin-50 { margin-bottom:50px; }
.margin-60 { margin-bottom:60px; }
.margin-70 { margin-bottom:70px; }

/* ==========================================================================
   Mobile styles
   ========================================================================== */ 
/* Landscape phones and down */
@media (max-width: 480px) { 
	html, body { font-size:20px; padding-bottom:0; }
	p { font-size:20px; }
	.initial { margin-top:25px; }
	.main-title { text-align:center; padding-top:0; padding-right:0; }
	.main-illust { text-align:center; }
	.skill { font-size:24px; }
	.skill-name { display:block; }
	.timeline-illust { float:none; margin:0 auto; text-align:center; display:block; width:125px; }
	.timeline-main-title { text-align:center; }
	.timeline > li > .timeline-badge { left:0; }
	.timeline:before { left: 25px; }
	.timeline > li > .timeline-panel {
		margin-left:70px;
	}
	.portfolio-illust { float:none; margin:0 auto; text-align:center; display:block; }
	.portfolio-main-title { text-align:center;}
	.black-contact,
	.black-contact-submit { margin-left:0 !important; margin-right:0 !important; }
	
	.pfl .modal-dialog {
		width:95%;
	}
}


/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) { 
	.initial { margin-top:35px; }
	.main-title { text-align:center; padding-top:0px; padding-right:0; }
	.main-illust { text-align:center; }
	.skill-name { display:block; }
	.portfolio-illust { float:none; margin:0 auto; text-align:center; display:block; }
	.portfolio-main-title { text-align:center;}
	.black-contact,
	.black-contact-submit { margin-left:0 !important; margin-right:0 !important; }
	
	.pfl .modal-dialog {
		width:95%;
	}
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {
	.initial { margin-top:35px; }
	.main-title { text-align:center; padding-top:0; padding-right:0; }
	.main-illust { text-align:center; }
	.portfolio-illust { float:none; margin:0 auto; text-align:center; display:block; }
	.portfolio-main-title { text-align:center;}
	.black-contact,
	.black-contact-submit { margin-left:0 !important; margin-right:0 !important; }
	
	.pfl .modal-dialog {
		width:95%;
		max-width:800px;
	}
}


/* Desktops and laptops ----------- */
@media (min-width: 992px) and (max-width: 1199px) {
	.initial { margin-top:40px; }
	.main-title { text-align:center; padding-top:0; padding-right:0; }
	.main-illust { text-align:center; }
	.portfolio-illust { float:none; margin:0 auto; text-align:center; display:block; }
	.portfolio-main-title { text-align:center;}
	.black-contact,
	.black-contact-submit { margin-left:0 !important; margin-right:0 !important; }
}
     

/* Large screens ----------- */
@media (min-width: 1200px) and (max-width: 3000px) {

}    


/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    body {
		-webkit-background-size: auto 100%;
		background-size:auto 100%;
		background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    body {
		-webkit-background-size: 100% auto;
		background-size:100% auto;
		background-attachment: scroll;
    }
}