/*
Document info
-------------------------------
Template name: Circular - Personal Portfolio Template
Author: QBKL Studio
Author URLs:
	- http://qbkl.net
	- http://themeforest.net/user/QBKL
	- http://www.facebook.com/QBKLstudio
	- http://twitter.com/QBKL

Accent color: #129fa7
Fonts: Source Sans Pro

Table of contents
-------------------------------
1. General
2. Globals
   2.1. BXSlider
3. Header
   3.1. Navigation
4. Sections
   4.1. About
   4.2. Services
   4.3. Work
        4.3.1. Quotes
   4.4. Contact
5. Footer
6. Color Themes
7. Media Queries
*/

/* 1. General */

html, body {
	min-height: 100%;
	height: 100%;
}

body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	color: #129fa7;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	outline: 0;
	color: #000000;
	text-decoration: underline;
}

a:hover {
	color: #888888;
}

a img {
	border: 0;
}

*:focus {
    outline: 0;
}

/* 2. Globals */

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

.centered {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

.text-center {
	text-align: center;
}

.column > :first-child { margin-top: 0; }

.bullet, .inner-bullet {
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #ffffff;
}

.bullet {
	width: 0.938em;
	height: 0.938em;
	border: .15em solid #bbbbbb;
}

.inner-bullet {
	width: .7em;
	height: .7em;
	border: .1em solid #ffffff;
}

.active-bullet .inner-bullet { background-color: #129fa7; }

.highlight {
	background-color: #129fa7;
	padding-left: .4em;
	padding-right: .4em;
}

/* 2.1. BXSlider */

.bx-wrapper {
	margin: 10% auto 2.45em;
}
.bx-wrapper .bx-viewport {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	left: 0;
	background: transparent;
}

.bx-wrapper .bx-pager {
	padding-top: 0;
	bottom: -2.45em;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background-color: #bbbbbb;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background-color: #129fa7;
}

/* 3. Header */

#header {
	/*position: relative;
	width: 100%;
	height: 90%;*/
	
 max-width:100%;
 height: 90%;
      position: relative;

	background-color: #ffffff;
	background-image: url(../img/header.webp);
	background-repeat: no-repeat;
	/*background-position: center; !important;*/
	
	background-position: 70% 100%; !important;
	background-size: cover;
	border-bottom: .1em solid #bbbbbb;
}





/* 3.1. Navigation */

#nav {
	max-width: 100%;
	position: static;
	margin-top: 1em;
	margin-bottom: 1em;
	left: 0;
	right: 0;
	border-bottom: .1em solid #bbbbbb;
	background-color: #ffffff;
}

#nav-sticky-wrapper.is-sticky #nav {
	bottom: auto;
	background-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.9);
}

#nav ul {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	text-align: center;
	position: relative;
	bottom: -.5em;
	display: table;
}

#nav ul li {
	/*max-width: 100px;*/
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	display: table-cell;
	/*min-width: 3.65em;*/
	padding: inherit;
}

#nav ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: .9em;
}

#nav ul li.current a {
	color: #129fa7;
}

#nav ul li a:hover .inner-bullet, #nav ul li.current .inner-bullet {
	background-color: #129fa7;
}

#nav ul li a span {
	display: block;
	margin-bottom: .625em;
	line-height: .9em;
}

#nav ul li a i {
	display: none;
	margin-bottom: .625em;
	font-size: 1em;
	line-height: .9em;
}

/* 4. Sections */

.section {
	width: 100%;
	margin-top: 20%;
	background: #ffffff;
}

.section-content {
	
	display: block;
	margin-left: 0em;
	
}
.section-content:before,
.section-content:after {
	content: " ";
	display: table;
}
.section-content:after {
	clear: both;
}

.section-header {
	margin-top: -.2em;
	margin-left: 2em;
	margin-bottom: 6em;
}

.section-footer {
	margin-top: 3.2em;
}


.subheading {
	font-size: .9em;
	text-transform: uppercase;
	color: #000000;
}

/* 4.1. About */

.skills {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.skills li {
	float: left;
	width: 100%;
	text-align: center;
	color: #000000;
	display: block;
}

.skill-pie {
	margin: 0 auto;
	font-size: 2.143em;
	font-weight: 300;
	height: 7.35em;
}

.skill h4 {
	font-size: 1.143em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* 4.2. Services */

.service {
	display: table;
}

.service-icon {
	width: 3em;
	padding-right: 0.95em;
	padding-top: 5%;
	padding-bottom: 5%;
	display: table-cell;
	color: #ffffff;
	vertical-align: top;
}

.service-icon span {
	display: block;
	width: 2.2em;
	height: 2.2em;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	font-size: 1.5em;
	line-height: 2.2em;
	text-align: center;
	background-color: #129fa7;
}

.service-description {
	padding-top: 5%;
	padding-bottom: 5%;
	display: table-cell;
	vertical-align: top;
}

.service-description .subheading {
	margin: 0;
}

/* 4.3. Work */

.filters {
	display: block;
	margin: -3em 0 0 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.filters li {
	color: #888888;
	display: inline-block;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.filters li:hover, .filters li.active { color: #000000; }

.filters li:before {
	content: "\2022";
	padding: 0 .625em;
	color: #129fa7;
}

.filters li:first-child:before {
	content: "";
	padding: 0;
}

.project {
	
	
	opacity: 0;
    display: none;
	text-align: center;
	-webkit-border-radius: 40%;
	-moz-border-radius: 40%;
	border-radius: 40%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.project-wrap {
	position: center;
	width: 62%;
	height: 62%;
	padding: .1em;
	-webkit-border-radius: 33%;
	-moz-border-radius: 33%;
	border-radius: 33%;
	border: .1em solid #bbbbbb;
}

.project-wrap:hover {
	border-color: #129fa7;
}

.project img {
	display: inline-block;
	float: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-filter: grayscale(0%);
	-moz-filter: 	grayscale(0%);
	-ms-filter: 	grayscale(0%);
	-o-filter: 		grayscale(0%);
	filter: 		none;
}

.project a:hover img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

.project a {
	
	position: center;
	width: 62%;
	height: 62%;
	text-align: center;
	color: #ffffff;
}

.project-overlay {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 40%;
	-webkit-border-radius: 33%;
	-moz-border-radius: 33%;
	border-radius: 33%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent url(../img/bg-overlay.png);
}

.project a:hover .project-overlay {
	visibility: visible;
	opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.project-overlay span {
	display: inline-block;
	width: 1.9em;
	height: 1.9em;
	font-size: 1.286em;
	text-align: center;
	line-height: 1.9em;
	color: #ffffff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #129fa7;
}

.project-title {
	font-size: 1em;
	font-weight: 400;
	color: #ffffff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* 4.3.1. Quotes */

.quotes {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.quote {
	display: block;
	font-family: Georgia, serif;
	font-size: 1.286em;
	font-style: italic;
	line-height: 1.4em;
}

.quote-author {
	display: block;
	line-height: 1em;
	color: #000000;
	vertical-align: top;
}

.quote-author strong {
	text-transform: uppercase;
}

.quote-author i {
	margin-right: .625em;
	color: #129fa7;
	vertical-align: middle;
}

/* 4.4 Contact */

form:before,
form:after {
	content: " ";
	display: table;
}

form:after {
	clear: both;
}

#form-contact {
	margin-bottom: -.95em;
}

input[type="text"], textarea {
	font-family: inherit;
	font-size: 1em;
	font-style: italic;
	width: 96%;
	padding: 0 2%;
	height: 40px;
	line-height: 40px;
	font-size: 1em;
	background-color: #dddddd;
	border: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	resize: none;
}

textarea {
	height: auto;
	line-height: 1.4em;
	padding: 2%;
}

label {
	font-size: 1.143em;
	display: block;
	text-transform: uppercase;
	margin: 10px 0;
	text-align: center;
}

label.error {
	margin: 10px 0 0 0;
	font-size: 0.750em;
	color: #e76270;
}

input.error, textarea.error {
	/*-webkit-box-shadow: inset 0px 0px 4px 3px rgba(231, 98, 112, 0.5);
	box-shadow: inset 0px 0px 4px 3px rgba(231, 98, 112, 0.5);*/
	background-color: #ffe0d5!important;
}

input#yenoh {
	width: 76px;
	text-align: center;
}

img#yenoh-pic {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 10px 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#form-message {
	border: 1px solid #ccc;
	display: none;
	margin: 20px 0;
	padding: 10px 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button {
	display: inline-block;
	color: #ffffff;
	background-color: #888888;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: none;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.15em;
	cursor: pointer;
}

.button:hover {
	color: #ffffff;
	background-color: #000000;
	-webkit-transition: background-color 200ms linear;
	-moz-transition: background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}

.button-small {
	padding: 5px 10px;
	font-size: 0.875em;
}

.button-medium {
	padding: 10px 15px;
	font-size: 1em;
}

.button-large {
	padding: 15px 20px;
	font-size: 1.125em;
}

.submit-wrap { margin-top: 30px; }

#submit-contact, #submit-contact span {
	display: block;
	margin: 0 auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#submit-contact {
	width: 65px;
	height: 65px;
	text-align: center;
	color: #ffffff;
	border: 1px solid #bbbbbb;
	background: #ffffff;
}

#submit-contact span {
	width: 63px;
	height: 63px;
	font-size: 2em;
	line-height: 63px;
	text-align: center;
	border: 1px solid #ffffff;
	background-color: #129fa7;
}

#submit-contact:hover span {
	background-color: #000000;
}

/* 5. Footer */

#footer {
	position: relative;
	margin-top: 6.25em;
	margin-bottom: 18.00em;
	text-align: center;
	
	background-color: #ffffff;
}



/* 5. Color Themes */

.theme-dark,
.theme-dark #header,
.theme-dark #nav,
.theme-dark .section,
.theme-dark #footer,
.theme-dark .bullet,
.theme-dark .inner-bullet { background-color: #111111; }
.theme-dark { background-image: url(../img/dot-dark.png); }
.theme-dark #submit-contact span,
.theme-dark .inner-bullet { border-color: #111111; }
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-dark .active-bullet .inner-bullet { background-color: #129fa7; }
.theme-dark #nav-sticky-wrapper.is-sticky #nav  {
	background-color: #111111;
	background-color: rgba(17, 17, 17, 0.9);
}
.theme-dark { color: #aaaaaa; }
.theme-dark .section-heading,
.theme-dark .subheading,
.theme-dark .skills li,
.theme-dark .filters li:hover,
.theme-dark .filters li.active,
.theme-dark .quote-author,
.theme-dark a { color: #ffffff; }
.theme-dark a:hover, .theme-dark #nav li.current a { color: #888888; }
.theme-dark #header { background-image: url(../img/header-2.jpg); }
.theme-dark #header .header-wrap { background-image: url(../img/gray-fade.png); }
.theme-dark .highlight { color: #000000; }
.theme-dark .bullet,
.theme-dark #nav,
.theme-dark .project-wrap,
.theme-dark #submit-contact,
.theme-dark #footer { border-color: #444444; }
.theme-dark .project-wrap:hover { border-color: #129fa7; }
.theme-dark .bx-wrapper .bx-pager.bx-default-pager a { background-color: #444444; }
.theme-dark #submit-contact span:hover,
.theme-dark .button:hover {
	color: #000000;
	background-color: #ffffff;
}

.theme-turquoise,
.theme-turquoise .project-wrap:hover { border-color: #1abc9c; }
.theme-turquoise .highlight { color: #ffffff; }
.theme-turquoise .highlight,
.theme-turquoise .active-bullet .inner-bullet,
.theme-turquoise .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-turquoise .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-turquoise #nav ul li a:hover .inner-bullet,
.theme-turquoise #nav ul li.current .inner-bullet,
.theme-turquoise .service-icon span,
.theme-turquoise .project-overlay span,
.theme-turquoise #submit-contact span,
.theme-turquoise .socials a:hover .inner-bullet { background-color: #1abc9c; }
.theme-turquoise .filters li:before,
.theme-turquoise .quote-author i { color: #1abc9c; }

.theme-emerald,
.theme-emerald .project-wrap:hover { border-color: #2ecc71; }
.theme-emerald .highlight { color: #ffffff; }
.theme-emerald .highlight,
.theme-emerald .active-bullet .inner-bullet,
.theme-emerald .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-emerald .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-emerald #nav ul li a:hover .inner-bullet,
.theme-emerald #nav ul li.current .inner-bullet,
.theme-emerald .service-icon span,
.theme-emerald .project-overlay span,
.theme-emerald #submit-contact span,
.theme-emerald .socials a:hover .inner-bullet { background-color: #2ecc71; }
.theme-emerald .filters li:before,
.theme-emerald .quote-author i { color: #2ecc71; }

.theme-river,
.theme-river .project-wrap:hover { border-color: #3498db; }
.theme-river .highlight { color: #ffffff; }
.theme-river .highlight,
.theme-river .active-bullet .inner-bullet,
.theme-river .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-river .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-river #nav ul li a:hover .inner-bullet,
.theme-river #nav ul li.current .inner-bullet,
.theme-river .service-icon span,
.theme-river .project-overlay span,
.theme-river #submit-contact span,
.theme-river .socials a:hover .inner-bullet { background-color: #3498db; }
.theme-river .filters li:before,
.theme-river .quote-author i { color: #3498db; }

.theme-amethyst,
.theme-amethyst .project-wrap:hover { border-color: #9b59b6; }
.theme-amethyst .highlight { color: #ffffff; }
.theme-amethyst .highlight,
.theme-amethyst .active-bullet .inner-bullet,
.theme-amethyst .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-amethyst .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-amethyst #nav ul li a:hover .inner-bullet,
.theme-amethyst #nav ul li.current .inner-bullet,
.theme-amethyst .service-icon span,
.theme-amethyst .project-overlay span,
.theme-amethyst #submit-contact span,
.theme-amethyst .socials a:hover .inner-bullet { background-color: #9b59b6; }
.theme-amethyst .filters li:before,
.theme-amethyst .quote-author i { color: #9b59b6; }

.theme-carrot,
.theme-carrot .project-wrap:hover { border-color: #e67e22; }
.theme-carrot .highlight { color: #ffffff; }
.theme-carrot .highlight,
.theme-carrot .active-bullet .inner-bullet,
.theme-carrot .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-carrot .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-carrot #nav ul li a:hover .inner-bullet,
.theme-carrot #nav ul li.current .inner-bullet,
.theme-carrot .service-icon span,
.theme-carrot .project-overlay span,
.theme-carrot #submit-contact span,
.theme-carrot .socials a:hover .inner-bullet { background-color: #e67e22; }
.theme-carrot .filters li:before,
.theme-carrot .quote-author i { color: #e67e22; }

.theme-alizarin,
.theme-alizarin .project-wrap:hover { border-color: #e74c3c; }
.theme-alizarin .highlight { color: #ffffff; }
.theme-alizarin .highlight,
.theme-alizarin .active-bullet .inner-bullet,
.theme-alizarin .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-alizarin .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-alizarin #nav ul li a:hover .inner-bullet,
.theme-alizarin #nav ul li.current .inner-bullet,
.theme-alizarin .service-icon span,
.theme-alizarin .project-overlay span,
.theme-alizarin #submit-contact span,
.theme-alizarin .socials a:hover .inner-bullet { background-color: #e74c3c; }
.theme-alizarin .filters li:before,
.theme-alizarin .quote-author i { color: #e74c3c; }

.theme-asphalt,
.theme-asphalt .project-wrap:hover { border-color: #34495e; }
.theme-asphalt .highlight { color: #ffffff; }
.theme-asphalt .highlight,
.theme-asphalt .active-bullet .inner-bullet,
.theme-asphalt .bx-wrapper .bx-pager.bx-default-pager a:hover,
.theme-asphalt .bx-wrapper .bx-pager.bx-default-pager a.active,
.theme-asphalt #nav ul li a:hover .inner-bullet,
.theme-asphalt #nav ul li.current .inner-bullet,
.theme-asphalt .service-icon span,
.theme-asphalt .project-overlay span,
.theme-asphalt #submit-contact span,
.theme-asphalt .socials a:hover .inner-bullet { background-color: #34495e; }
.theme-asphalt .filters li:before,
.theme-asphalt .quote-author i { color: #34495e; }

/* 6. Media Queries */

/*@media screen and (max-width: 400px) {
body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: .1em;
	line-height: 1em;
	color: #696969;
}
	.project a {
	
	position: relative;
	width: 70%;
	height: 70%;
	text-align: center;
	color: #ffffff;
}

	.filters {
	display: none;
	
}
	
	
	.section-header {
	margin-top: 4em;
	margin-left: 2em;
	margin-bottom: 1.8em;
}


	
	#nav ul li { max-width: 56px; font-size: .3em; }
	.project-overlay {  }
	#nav ul li a i { display: inline-block; }
	
	#nav ul li a span {
	display: inline-block;
	margin-bottom: .6em;
	line-height: .8em;
}
#nav ul li a i {
	display: none;
	margin-bottom: .6em;
	font-size: .3em;
	line-height: 1em;
}


	.project-title { display: none; }
	.project { float: none; width: 80%; margin-left: 2em }
	
}*/
@media screen and (max-width: 2284px) {
#nav ul li { 
min-width: 110px; 
}
	.section-header {
	margin-top: 10em; 
	margin-left: 2em;
	margin-bottom: 9em;
}
	body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	color: #696969;
}

	

}



/*@media screen and (max-width: 768px) {
	body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: .2em;
	line-height: 1.5em;
	color: #696969;
}
	#header .header-wrap {
	
	
	.section-header {
	margin-top: 2em;
	margin-left: 2em;
	margin-bottom: 1.8em;
}
.project { width: 80%; margin-left: 6em }
#nav ul li { min-width: 75px; }
	.section-header {
	margin-top: 10em;
	margin-left: 2em;
	margin-bottom: 9em;
}
}*/
/*
@media screen and (max-width: 640px) {
	.filters {
	display: none;}
	body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: .2em;
	line-height: 1.5em;
	color: #696969;
}
	

	.section { margin-top: 5.5em; }
.section-header {
	margin-top: 2em;
	margin-left: 2em;
	margin-bottom: 1.8em;
}
	.section-footer { margin-top: 1.875em; }
	.section-heading { font-size: 1.429em; margin-top: 20%; }
	
	.project { float: none; width: 80%; margin-left: 6em }
	#nav ul li { min-width: 62px; }
	.section-header {
	margin-top: 10em;
	margin-left: 2em;
	margin-bottom: 9em;
}
}*/

@media screen and (max-width: 640px) {
	.filters {
	display: none;}
	body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #696969;
}
	#nav ul li { max-width: 56px; font-size: .8em; }
	.project-overlay {  }
	#nav ul li a i { display: inline-block; }
	
	#nav ul li a span {
	display: inline-block;
	margin-bottom: .6em;
	line-height: .8em;
}
#nav ul li a i {
	display: none;
	margin-bottom: .6em;
	font-size: .8em;
	line-height: 1em;
}

	.section { margin-top: 5.5em; }
.section-header {
	margin-top: 2em;
	margin-left: 2em;
	margin-bottom: 1.8em;
}
	.section-footer { margin-top: 1.875em; }
	.section-heading { font-size: 1.429em; margin-top: 20%; }
	.service-icon span {
	display: block;
	width: 1.5em;
	height: 1.5em;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	background-color: #129fa7;
}
.service-description .subheading {
	margin: 0;
	font-size: .7em;
	line-height: 1.5em;
}
	.project { float: none; width: 80%; margin-left: 2em; margin-right: 1em }
	#nav ul li { min-width: 48px; }
	.section-header {
	margin-top: 10em;
	margin-left: 2em;
	margin-bottom: 9em;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
}

@media screen and (max-width: 480px) {
 .easyPieChart {
        display: none;
    }
    .skill {
        display: none;
    }
      .skill h4 {
        display: none;
    }
    .bx-pager.bx-default-pager{
        display: none;
    }

   
    .filters {
	display: none;}
	body {
	border-top: 10% solid #129fa7;
	background: #ffffff;
	font-family: 'Source Sans Pro', Arial, Verdana, Tahoma, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #696969;
}
	#nav ul li { max-width: 56px; font-size: .8em; }
	.project-overlay {  }
	#nav ul li a i { display: inline-block; }
	
	#nav ul li a span {
	display: inline-block;
	margin-bottom: .6em;
	line-height: .8em;
}
#nav ul li a i {
	display: none;
	margin-bottom: .6em;
	font-size: .8em;
	line-height: 1em;
}

	.section { margin-top: 5.5em; }
.section-header {
	margin-top: 2em;
	margin-left: 2em;
	margin-bottom: 1.8em;
}
	.section-footer { margin-top: 1.875em; }
	.section-heading { font-size: 1.429em; margin-top: 20%; }
	
	.project { float: none; width: 75%; margin-left: 3em }
	#nav ul li { min-width: 48px; }
	.section-header {
	margin-top: 10em;
	margin-left: 2em;
	margin-bottom: 9em;
}
}