/*


Theme Name: FlatX


Description: Bootstrap One Page Wordpress Parallax Resume Template


Version: 1.0


Author: cmsBlueTheme


Author URI: http://themeforest.net/user/cmsBlueTheme


*/


/*


---------------


Table of Contents:


1) General Class


2) Nav Bar


3) Home Section


4) About Section


5) Parallax Area


6) Services


7) Effect


8) Contact Form


9) Wrapper


10) Project Detail


11) Project Filter


12) Project Items


13) Isotope


--------------


/* ##### GENERAL CLASS ##### */


*, *:after, *::before {


	-webkit-box-sizing: border-box;


	-moz-box-sizing: border-box;


	box-sizing: border-box;


}


html, body {


	height: 100%;


	width: 100%;


}


body {


	font-family: 'Sintony', helvetica, arial, sans-serif;


	color: #333333;


	line-height: 1.6;


	overflow-x: hidden;


}


a {


	-webkit-transition: all 0.3s ease-in-out;


	-moz-transition: all 0.3s ease-in-out;


	-o-transition: all 0.3s ease-in-out;


	-ms-transition: all 0.3s ease-in-out;


	transition: all 0.3s ease-in-out;


}


a:focus {


	outline: none;


	text-decoration: none;


	color: #222;


}


a:hover {


	text-decoration: none;


	color: #222;


}


iframe {


	border: 0;


}


h1, h2, h3, h4, h5, h6, .section-title, .form-group label {


	font-family: 'Sintony', helvetica, arial, sans-serif;


}


section h3 {


	margin-bottom: 20px;


	margin-top: 10px;


	padding-bottom: 10px;


}


section img {


	margin-top: 10px;


	margin-bottom: 20px;


}


blockquote {


	border-color: #dedede;


}


.mask {


	background: #fff;


	width: 100%;


	height: 100%;


	position: fixed;


	z-index: 100000;


}


#intro-loader {


	width: 38px;


	height: 38px;


	position: absolute;


	top: 50%;


	left: 50%;


	margin: -19px 0 0 -19px;


	background: url("../img/preloader.gif");


}


.section-content {


	padding: 60px 0;


}


.section-title {


	margin-bottom: 50px;


}


.section-title div {


	font-size: 14px;


	letter-spacing: 2px;


}


.section-title div span {


	display: inline-block;


	color: #cccccc;


	text-transform: uppercase;


}


.section-title div span i {


	height: 22px;


	margin: 2px;


	padding: 3px 0px 0px 3px;


	text-align: center;


	width: 22px;


}


.section-title h1 {


	font-size: 46px;


  letter-spacing: -2px;


	margin: 10px 0px 0px 0px;


}


.section-title h1, .section-title h2, .section-title h3 {


	text-transform: uppercase;


	color: #1e1e1e;


	font-weight: 700;


	display: inline-block;


}


.section-title h1 i {


	font-style: normal;


	color: #FC6F5C;


}





.section-title .line-large {


	width: 75px;


	background: #FC6F5C;


	height: 3px;


	margin: 5px;


}


p {


	line-height: 1.6em;


	margin-bottom: 1.6em;


}


.clear {


	clear: both;


	display: block;


	height: 0;


	overflow: hidden;


	visibility: hidden;


	width: 0;


}


.img-center {


	margin-left: auto;


	margin-right: auto;


}


.new-line {


	margin-top: 70px;


}


.bg1 {


	background-color: #ffffff;


}


.bg2 {


	background-color: #F2F4F6;


}


p.tagline {


	font-family: 'Tangerine', cursive;


	color: #7c7c7c;


	font-size: 28px;


	padding: 0px;


	line-height: 1.2;


	letter-spacing: 0.02em;


	text-transform: lowercase;


	margin-bottom: 0px !important;


}


/* ##### NAV BAR ##### */


#nav-sticky-wrapper {


	height: 70px;


	margin-top: -70px;


}


#nav-sticky-wrapper is-sticky {


	position: fixed;


	top: 0;


}


.navbar-header {


	padding-top: 15px;


	padding-left: 10px


}


.navbar-wrapper {


	background: none repeat scroll 0 0 #1E1E1E;


	border-bottom: medium none !important;


	box-shadow: 0 !important;


	transition: all 0.3s ease-out 0s;


	z-index: 10;


	padding: 0px 10px;


	text-align: center;


}


.navbar-collapse {


	min-height: 70px !important;


}


.navbar-collapse.in {


	overflow-y: visible !important;


}


.navbar-wrapper .container {


	padding: 25px 0;


}


.navbar {


	position: relative;


	border: 0;


}


.navbar ul.nav {


	margin: 20px auto 0px auto;


}


.navbar .nav > li {


	display: block;


	float: left;


  color: #ffffff;


}


.navbar .nav > li > a,.navbar .nav > li > a:focus {


	color: #ffffff;


	display: block;


	font-size: 14px;


	font-weight: 400;


	text-shadow: none;


	line-height: 30px;


	transition: all 0.3s ease-out 0s;


	padding-top: 0px;


	padding-bottom: 0px;


	letter-spacing: 1px;


}


.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {


	color: #FC6F5C;


	background-color: transparent;


	transition: all 0.3s ease-out 0s;


	border-radius: 5px;


}


.navbar .nav > .active > a:focus {


	background-color: transparent;


}


.navbar .nav > li > a:hover {


	color: #FC6F5C;


	height: 100%;


	text-decoration: none;


	transition: all 0.3s ease-out 0s;


}





.navbar-default .navbar-toggle {


	padding: 0;


	margin: 0px auto;


	border: 0;


	float: none;


	background: none;


	-webkit-border-radius: 0;


	-moz-border-radius: 0;


	border-radius: 0;


	color: #fff;


}


.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {


	background: none;


	border: 0;


	outline: none;


}


.dropdown-menu {


	border-width: 0 0 1px 1px;


	-webkit-border-radius: 0px;


	-moz-border-radius: 0px;


	border-radius: 0px;


}


.dropdown-menu > li > a {


	color: #999;


	font-size: 12px;


	text-transform: uppercase;


	padding-top: 8px;


	padding-bottom: 8px;


}


.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {


	color: #222;


	background: none;


}


.navbar-logo {


	font-size: 34px;


	line-height: 1.2;


	color: #ffffff;


  letter-spacing: -3px;


	text-transform: uppercase;


}


/* ##### HOME SECTION ##### */


#home {


	position: relative;


	width: 100%;


	height: 100%;


	color: #fff;


}


#home h1 {


	margin: 10px 0;


	color: #fff;


  letter-spacing: -4px;


	text-transform: uppercase;


}


#home h4 {


	margin: 0px;


	color: #ffffff;


}


#home .vcard {


	background: url("../img/overlay.png") repeat center;


	padding: 15px;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


	margin-top: -70px;


	margin-left: auto;


	margin-right: auto;


  max-width:600px;


}


#home .nameCard:before {


	width: 0;


	border-top: 26px solid rgba(255,255,255,0.6);


	border-left: 60px solid transparent;


	border-right: 60px solid transparent;


	content: '';


}


#home .nameCard:after {


	width: 0;


	border-bottom: 26px solid rgba(255,255,255,0.6);


	border-left: 60px solid transparent;


	border-right: 60px solid transparent;


	content: '';


}


#home .nameCard {


	background: rgba(252,111,92,1);


	width: auto;


	float: left;


	padding: 25px;


	margin-top: -50px;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


}


#home .idCard {


	width: 48%;


	float: right;


	text-align: right;


	padding-top: 15px;


}


#home .idCard span {


	float: right;


	font-size: 15px;


}


#home .idCard i {


	clear: both;


	float: right;


	text-align: center;


	width: 25px;


	height: 25px;


	padding-top: 5px;


	margin: 0px 10px 5px 10px;


	background-color: #FC6F5C;


}


#fullscreen-slider {


	display: none;


	position: relative;


	z-index: 0;


}


#cycle-loader {


	height: 32px;


	left: 50%;


	margin: -8px 0 0 -8px;


	position: absolute;


	top: 50%;


	width: 32px;


	z-index: 999;


}


.mc-image {


	overflow: hidden;


	-webkit-transition: all 1s ease-in-out;


	-moz-transition: all 1s ease-in-out;


	-o-transition: all 1s ease-in-out;


	-ms-transition: all 1s ease-in-out;


	transition: all 1s ease-in-out;


}


.slide-content {


	height: 100%;


	/*display: table;*/


	position: absolute;


	top: 0;


	left: 0;


	right: 0;


	z-index: 10;


	width: 100%;


	margin: 0px auto;


  text-align: center;


  background-color: rgba(0,0,0,0.25);


}


.slide-content .text-center {


	vertical-align: middle;


	display: table-cell;


	min-width: 300px;


}


.header1 {


	background: url("../img/overlay.png") repeat center;


	padding: 20px;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


	margin-top: -70px;


	max-width: 850px;


	margin-left: auto;


	margin-right: auto;


}


.header1 h1 {


	font-size: 140px;


	line-height: 110%;


  letter-spacing: -8px !important;


}


.header1 p {


	font-size: 30px;


	line-height: 120%;


	width: 80%;


	margin: 0px auto;


}


.header2 {


	padding: 20px;


	margin-top: -70px;


	max-width: 850px;


	margin-left: auto;


	margin-right: auto;


  color:#ffffff;


}


.header2 .heading {


    display: block;


    font-size: 26px;


    font-weight: 700;


    text-transform: uppercase;


    width: 100%;    


}


.header2 .box-heading {


    display: block;


    font-size: 80px;


    line-height: 100px;


    width: 100%;


    margin:20px auto;


    text-transform: uppercase;


    letter-spacing: -2px;


}


.header2 .box-inner {


    border: 5px solid #FFFFFF;


    display: inline-block;


    padding: 0 20px;


}


.header2 .head-text {


    display: block;


    font-size: 18px;


    margin-bottom: 50px;


    width: 100%;


}





.header-video {


	background: url(	"../img/overlay-video.png");


	position: relative;


	width: 100%;


	height: 100%;


	color: #fff;


}


.video-section {


	background: url('../images/slide1.jpg') no-repeat bottom center;


}


#video-volume {


	bottom: 100px;


	right: 30px;


	position: absolute;


	z-index: 30;


	width: 30px;


	height: 30px;


	line-height: 26px;


	font-size: 20px;


	text-align: center;


	border-radius: 50%;


	border: 1px solid #fff;


	color: #FFFFFF;


	cursor: pointer;


}


/* ##### ABOUT SECTION ##### */


h3.tagline-lg {


	font-family: 'Tangerine', cursive;


	color: #7c7c7c;


	font-size: 50px;


	line-height: 1.2;


	text-align: center;


	margin-top: 0px;


	border: 0px none;


}


.line-strong {


	background-color: #FC6F5C;


	height: 5px;


	width: 120px;


	position: relative;


	top: 0;


	left: 50%;


	margin-left: -60px;


	margin-bottom: 50px;


	content: '';


}


.number-counters {


	overflow: hidden;


}


.number-counters p {


	color: #ffffff;


}


.counters-item i {


	color: #FFFFFF;


	margin-top: -30px;


}


.counters-item {


	border: 2px solid #fff;


	border-top: 0px none;


	-webkit-border-radius: 100%;


	-moz-border-radius: 100%;


	border-radius: 100%;


	width: 150px;


	height: 150px;


	margin: 40px auto 10px auto;


}


.number-counters strong {


	color: #FFFFFF;


	display: block;


	font-size: 50px;


	font-weight: 700;


	line-height: 50px;


	margin-top: 30px;


}


.name-title {


	width: 100%;


	margin: 10px 0px 30px 0px;


	padding: 15px 15px 8px 15px;


	background-color: #FC6F5C;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


}


.name-title h2, .name-title h5 {


	color: #ffffff;


	text-align: center;


}


.name-title h2 {


	margin: 0px;


	padding: 0px;


  letter-spacing: -3px;


	text-transform: uppercase;


}


/*Social Home*/


.social-link {


	color: #fff;


	text-transform: uppercase;


	font-size: 11px;


	margin: 0px auto 30px auto;


	text-align: center;


}


.social-link a {


	list-style-type: none;


	display: inline;


	margin: 0px 5px;


	text-align: center;


}


.social-link a i {


	color: #FC6F5C;


	-webkit-transition: all 0.3s ease-in-out;


	-moz-transition: all 0.3s ease-in-out;


	-o-transition: all 0.3s ease-in-out;


	-ms-transition: all 0.3s ease-in-out;


	transition: all 0.3s ease-in-out;


}


.social-link a:hover > i {


	color: #1E1E1E;


}


/* ##### PARALLAX AREA ##### */


.parallax {


	background-attachment: fixed !important;


	background-position: center center;


	background-repeat: no-repeat;


	background-size: cover;


}


.parallax h1 {


	color: #fff;


	line-height: 1.3;


}


.parallax p.tagline {


	color: #c5c5c5;


}


.parallax-overlay {


	background-color: rgba(30, 30, 30, 0.8);


}


/* ##### Work Experience ##### */


.timeline-content #timeline {


	list-style-type: none;


	margin: 0;


	padding: 0;


	position: relative;


	overflow: hidden;


	background: url("../img/timeline.png") repeat-y top center;


}


.timeline-content #timeline .timeline-item {


	clear: both;


	margin-bottom: 20px;


	width: 50%;


	float: left;


	padding-top: 15px;


}


.timeline-content #timeline .post {


	margin: 0 90px 0 0;


	position: relative;


	min-height: 100px;


	background: #fff;


	box-shadow: none;


	border: 0;


	padding: 0;


	-webkit-border-radius: 10px;


	-moz-border-radius: 10px;


	border-radius: 10px;


}


.timeline-content #timeline .post-body {


	border-bottom: 0 none;


	margin-bottom: 0;


	padding-bottom: 0;


}


.timeline-content #timeline .post-body .post-title, .timeline-content #timeline .post-body .post-text {


  color:#222222;


	margin: 20px;


}


.timeline-content #timeline .post-body a {


	display: block;


	overflow: hidden;


}


.timeline-content #timeline .post-title h4{


	margin-bottom: 12px;


	text-transform: uppercase;


}


.timeline-content #timeline .post-info {


	left: 100%;


	margin: -95px 11px 0 11px;


	position: absolute;


	top: 50%;


	width: 160px;


	z-index: 1000;


}


.timeline-content #timeline .post-info .info-date {


	font-size: 17px;


	background-color: #FC6F5C;


  color:#ffffff;


	padding: 5px 10px;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


}


.timeline-content #timeline .post-info .box-inner {


	display: block;


	width: 50px;


	height: 50px;


	border-radius: 100%;


	margin: 10px auto;


	background-color: #333333;


	color: #ffffff;


}


.timeline-content #timeline .post-info .box-inner i {


	border: 2px solid #e1e1e1;


	padding: 7px;


	margin-top: 10px;


	border-radius: 100%;


	width: 30px;


	height: 30px;


}


.timeline-content #timeline .arrow-left {


	border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);


	border-style: solid;


	border-width: 9px;


	right: 100%;


	margin-top: -11px;


	position: absolute;


	top: 50%;


	width: 0px;


	height: 0px;


}


.timeline-content #timeline .arrow-right {


	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;


	border-style: solid;


	border-width: 9px;


	left: 100%;


	margin-top: -11px;


	position: absolute;


	top: 50%;


	width: 0px;


	height: 0px;


}


.timeline-content #timeline .timeline-item:nth-child(2n) {


	float: right;


}


.timeline-content #timeline .timeline-item:nth-child(2n) .post {


	margin-left: 90px;


	margin-right: 0;


}


.timeline-content #timeline .timeline-item:nth-child(2n) .post-info {


	left: auto;


	right: 100%;


}


.timeline-content .action {


	margin-top: 50px;


}


/* ##### EDUCATION ##### */


.education {


	width: 100%;


	min-height: 100px;


	display: table;


	background-color: #F2F4F6;


	box-shadow: none;


	border: 0;


	-webkit-border-radius: 10px 20px 20px 10px;


	-moz-border-radius: 10px 20px 20px 10px;


	border-radius: 10px 20px 20px 10px;


}


.edu-post p {


	margin-top: 20px;


}


.edu-post {


	width: 70%;


	height: 100%;


	display: table-cell;


	padding: 15px;


	margin: 0px;


}


.edu-post:after {


	content: " ";


	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #F2F4F6;


	border-style: solid;


	border-width: 9px;


	left: 70%;


	margin-top: -11px;


	top: 50%;


	width: 0px;


	height: 0px;


	position: absolute;


	z-index: 10;


}


.edu-grade {


	width: 30%;


	height: 100%;


	display: table-cell;


	padding: 15px;


	margin: 0px;


	color: #ffffff;


	background-color: #FC6F5C;


	-webkit-border-radius: 0px 10px 10px 0px;


	-moz-border-radius: 0px 10px 10px 0px;


	border-radius:  0px 10px 10px 0px;


}


.edu-grade h3, .edu-grade h5 {


	color: #ffffff;


}


.edu-new-line {


	margin-top: 30px;


}





/* ##### SERVICES ##### */


.services {


	width: 100%;


	min-height: 100px;


	background-color: #F2F4F6;


	box-shadow: none;


	border: 0;


	-webkit-transition-duration: 0.6s;


	-moz-transition-duration: 0.6s;


	-o-transition-duration: 0.6s;


	transition-duration: 0.6s;


	-webkit-border-radius: 20px 20px 10px 10px;


	-moz-border-radius: 20px 20px 10px 10px;


	border-radius: 20px 20px 10px 10px;


}


.services-icon i{


width:80px;


height:80px;


}


.services:hover{


background-color: #FC6F5C;


color:#ffffff;


}                                


.services:hover >.services-icon i{


background-color: #Ffffff;


color:#FC6F5C;


padding-top:12px;


text-align: center;


border-radius: 100%;


-webkit-border-radius: 100%;


}


.services-post p {


	margin-top: 20px;


}


.services-post {


	width: 100%;


	display: table;


	padding: 15px;


	margin: 0px;


  text-align: center;


}


.services-icon {


	width: 100%;


	display: table;


	padding: 30px 15px;


	margin: 0px;


	color: #ffffff;


  text-align: center;


	background-color: #FC6F5C;


	-webkit-border-radius: 10px 10px 0px 0px;


	-moz-border-radius: 10px 10px 0px 0px;


	border-radius:  10px 10px 0px 0px;


}


.services-icon h3, .services-icon h5 {


	color: #ffffff;


}


.services-new-line {


	margin-top: 30px;


}





/* ##### EFFECT ##### */


.rotate {


	display: inline-block;


	max-width: 100%;


	-webkit-transition-duration: 0.8s;


	-moz-transition-duration: 0.8s;


	-o-transition-duration: 0.8s;


	transition-duration: 0.8s;


	-webkit-transition-property: -webkit-transform;


	-moz-transition-property: -moz-transform;


	-o-transition-property: -o-transform;


	transition-property: transform;


	overflow: hidden;


}


.rotate:hover {


	-webkit-transform: rotate(360deg);


	-moz-transform: rotate(360deg);


	-o-transform: rotate(360deg);


}


.zoom img {


	-webkit-transition: all 0.3s ease;


	-moz-transition: all 0.3s ease;


	-o-transition: all 0.3s ease;


	-ms-transition: all 0.3s ease;


	transition: all 0.3s ease;


}


.zoom:hover img {


	transform: scale(1.2);


	-ms-transform: scale(1.2);


/* IE 9 */


	-moz-transform: scale(1.2);


/* Firefox */


	-webkit-transform: scale(1.2);


/* Safari and Chrome */


	-o-transform: scale(1.2);


/* Opera */


}


.item_top {


	top: -30px;


	opacity: 0;


	position: relative;


}


.item_bottom {


	bottom: -30px;


	opacity: 0;


	position: relative;


}


.item_left {


	left: -60px;


	opacity: 0;


	position: relative;


}


.item_right {


	right: -60px;


	opacity: 0;


	position: relative;


}


.item_fade_in {


	opacity: 0;


	position: relative;


	padding-left: 0px;


	right: 0px;


}


/* ---------- Skills Details ------------*/


section.skill-section {


	padding: 60px 0px 0px 0px;


}


#l-inhalt {


	visibility: hidden;


	display: block;


	opacity: 0;


	float: none;


	height: 300px;


	transition: opacity 0.2s ease-out;


}


.l-bar-wrapper {


	height: 18.75em;


	position: relative;


	bottom: 0;


	width: 6.25em;


}


nav.slide-effect a {


	vertical-align: middle;


}


#l-inhalt.show {


	opacity: 1;


	transition: opacity 0.5s ease-in;


}


#l-inhalt.show {


	opacity: 1;


	transition: opacity 0.5s ease-in;


}


.bar {


	cursor: pointer;


	height: 0;


	transition: height 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s, background-color 0.3s ease-in-out 0s;


	width: 80px;


	-webkit-border-radius: 6px 6px 0px 0px;


	-moz-border-radius: 6px 6px 0px 0px;


	border-radius: 6px 6px 0px 0px;


}


.l-skills-pink {


	left: 240px;


	top: 60px;


}


.l-skills-blue {


	left: 90px;


	top: 30px;


}


.l-skills-green {


	left: 140px;


	top: 160px;


}


/* --------- Skills Buttons Hover ----*/


.btn-skills {


	position: relative;


	width: 150px;


	display: inline-block;


	margin: 15px 25px;


	outline: none;


	color: #fff;


	text-decoration: none;


	text-transform: uppercase;


	letter-spacing: 1px;


	font-weight: 300;


	text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);


	font-size: 1em;


}


.btn-skills:hover, .btn-skills:focus {


	outline: none;


}


.slide-effect {


	position: relative;


	z-index: 1;


	text-align: center;


}


.btn-skills {


	overflow: hidden;


	margin: 0 15px;


	-webkit-border-radius: 6px;


	-moz-border-radius: 6px;


	border-radius: 6px;


}


.btn-skills span {


	display: block;


	padding: 10px 20px;


	background: #FC6F5C;


	-webkit-transition: -webkit-transform 0.3s;


	-moz-transition: -moz-transform 0.3s;


	transition: transform 0.3s;


}


.btn-skills::before {


	position: absolute;


	top: 0;


	left: 0;


	z-index: -1;


	padding: 10px 0;


	width: 100%;


	height: 100%;


	content: attr(data-hover);


	-webkit-transition: -webkit-transform 0.3s;


	-moz-transition: -moz-transform 0.3s;


	transition: transform 0.3s;


	-webkit-transform: translateY(-25%);


}


.btn-skills:hover span, .btn-skills:focus span, .btn-skills.active span {


	-webkit-transform: translateY(100%);


	-moz-transform: translateY(100%);


	transform: translateY(100%);


}


.btn-skills:hover::before, .btn-skills:focus::before, .btn-skills.active:before {


	-webkit-transform: translateY(0%);


	-moz-transform: translateY(0%);


	transform: translateY(0%);


}


.skills-pink {


	border-left: 4px #f3377a solid;


}


.skills-green {


	border-left:  4px #A5DA26 solid;


}


.skills-blue {


	border-left: 4px #1b7ee4 solid;


}


.btn-skills.skills-blue::before {


	background-color: #1b7ee4 !important;


}


.btn-skills.skills-pink::before {


	background-color: #f3377a;


}


.btn-skills.skills-green::before {


	background-color: #a5da26;


}


/*--------------PIE Chart ---------- */


#pie-container {


	padding-top: 100px;


	max-width: 500px;


	position: relative;


	margin: 7em auto 0px auto;


	box-sizing: border-box;


	-moz-box-sizing: border-box;


}


.bar, .skill-caption {


	position: absolute;


	bottom: 0;


}


.bar {


	height: 0%;


	background-color: #328be7;


	text-align: left;


	color: rgba(255, 255, 255, 0.6);


}


.skill-caption {


	font-size: 1.625em;


	margin-bottom: 2em;


	font-weight: 300;


	width: 100%;


	color: white;


	white-space: nowrap;


	-webkit-transform: rotate(270deg);


	-moz-transform: rotate(270deg);


	-ms-transform: rotate(270deg);


	-o-transform: rotate(270deg);


	transform: rotate(270deg);


	writing-mode: lr-tb;


}


.bar2 {


	left: 100px;


}


.bar3 {


	left: 200px;


}


.bar4 {


	left: 300px;


}


.bar5 {


	left: 400px;


}


/* ##### CONTACT ##### */


.form-group {


	position: relative;


  clear:both;


}


.form-group label {


	text-transform: uppercase;


	margin-top: 30px;


}


.form-group label.error {


	position: absolute;


	top: 0;


	right: 0;


	font-size: 14px;


	text-transform: none;


	color: red;


	font-weight: 400;


}


.form-group .form-control {


	-webkit-border-radius: 0;


	-moz-border-radius: 0;


	border-radius: 0;


	box-shadow: none;


	border-color: #DEDEDE;


}


.form-group .form-control:focus {


	border-color: #afafaf;


}


.form-group .form-control.input-lg {


	font-size: 14px;


}


.form-group .form-control.error, .form-group .form-control.error:focus {


	border: 1px solid #DEDEDE;


}


.form-group textarea {


	height: 150px;


	resize: vertical;


}


.form-button {


	margin-top: 50px;


}


.form-respond .content-message {


	margin: 50px 0;


	padding: 30px;


	-webkit-border-radius: 4px;


	-moz-border-radius: 4px;


	border-radius: 4px;


	background: #f5f5f5;


}


.form-respond .content-message i {


	color: #222;


}


.form-respond .content-message h2 {


	font-size: 24px;


	text-transform: uppercase;


	font-weight: 400;


	margin: 10px 0px 0 0;


}


#map_canvas {


	width: 100%;


	height: 250px;


}


.contact-block {


	padding-top: 38px;


}


.contact-block h4 {


	padding-left: 40px;


}


.contact-info {


	padding-top: 9px;


}


.contact-info i {


  background-color: #FC6F5C;


	color: #ffffff;


	line-height: 24px;


	margin-right: 15px;


	text-align: center;


	width: 24px;


	float: left;


}


.contact-info span {


	width: auto;


	height: auto;


	float: left;


	/*margin-bottom: 20px;*/


}


.contact-info li {


	list-style-type: none;


	clear: both;


	float: none;


	margin-bottom: 20px;


}


/* ##### FOOTER ##### */


footer {


	font-size: 14px;


	padding: 0px;


	text-align: center;


	color: #ffffff;


}


footer .social-icon {


	margin-top: 50px;


}


footer .social-icon a {


	color: #CFCFCF;


	padding: 0 20px 35px 20px;


	display: inline-block;


}


footer .social-icon a:hover {


	color: #FC6F5C;


}


#back-top {


	position: fixed;


	bottom: 20px;


	right: 20px;


	width: 40px;


	height: 40px;


	text-align: center;


	line-height: 40px;


	background: #222;


	color: #fff;


	-webkit-border-radius: 50%;


	-moz-border-radius: 50%;


	border-radius: 50%;


	zoom: 1;


	filter: alpha(opacity=50);


	opacity: 0.5;


	z-index: 100;


	display: none;


}


#back-top:hover {


	filter: alpha(opacity=100);


	opacity: 1;


}


/**BUTTON**/


.btn-default {


  color: #666666;


	border: 1px solid #c7c7c7;


	box-shadow: 0 2px 0 0 #FC6F5C;


	-webkit-transition: all 0.3s ease-in-out;


	-moz-transition: all 0.3s ease-in-out;


	-o-transition: all 0.3s ease-in-out;


	-ms-transition: all 0.3s ease-in-out;


	transition: all 0.3s ease-in-out;


}


.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {


	background-color: #FC6F5C;


	border-color: #FC6F5C;


	color: #ffffff;


}


.btn {


	cursor: pointer;


	display: inline-block;


	font-size: 16px;


	line-height: 1;


	padding: 10px 20px;


	text-align: center;


	vertical-align: middle;


	transition: all 0.25s ease 0s;


}


.btn:hover, .btn:active, .btn:focus {


	color: #FFFFFF;


	opacity: 1;


}


.btn-dark {


  color: #ffffff;


	background: none repeat scroll 0 0 #1e1e1e;


	box-shadow: 0 3px 0 0 #444444;


	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);


}


.btn-dark:hover {


	background: none repeat scroll 0 0 #FC6F5C;


}





/*===================================================================================*/


/*  WRAPPER                                                                            */


/*===================================================================================*/





#portfolio-wrap{


    position: fixed;


    top:0;


    left:0;


    bottom: 0;


    right: 0;


    background: #FFF;


    z-index: 5000;


    display: none;


    overflow: hidden;


}





#portfolio-page{


    height: 100%;


    width: 100%;


    display: table;


}





#portfolio-page #portfolio-content{


    vertical-align: middle;


    display: table-cell;


}


#protfolio-control{


    margin: 40px 0 0;


}





#protfolio-control #prev-project,


#protfolio-control #close-project,


#protfolio-control #next-project{


    display: inline-block;


    font-size: 40px;


    color: #CCC;


    display: inline-block;


    margin-bottom: 40px;


}





/*===================================================================================*/


/*  PROJECT DETAILS                                                                  */


/*===================================================================================*/


#portfolio-items img{


    margin:0px !important;


}


.img img{


    width: 100%;


}


.project-desc h3{


    margin: 0 0 20px;


    text-align: center;


}


.project-desc .line-strong{


margin-bottom:20px;


}


.project-desc .list-details{


    margin: 0px 0px 20px 0px;


    padding: 0;


    list-style: none;


}


.project-desc .list-details li{


    padding: 10px 0;


    border-bottom: 1px dashed #FC6F5C;


}








.project-desc .list-details li i{


    margin-right: 10px;


}





.slider_container{


	position: relative;


	overflow: hidden;


	margin-bottom: 24px;


  width:640px;


}


.slider_container .flex-direction-nav li{


	list-style: none;


	position: absolute;


	top: 0;


	bottom: 0;


	width: 40px;


	right: -40px;


	-webkit-transition: all ease .2s;


	-moz-transition: all ease .2s;


	-ms-transition: all ease .2s;


	-o-transition: all ease .2s;


	transition: all ease .2s;


}


.slider_container .flex-direction-nav li:first-child{


	right: auto;


	left: -40px;


}


.slider_container:hover .flex-direction-nav li {


	right: 0;


}


.slider_container:hover .flex-direction-nav li:first-child {


	left: 0;


}


.slider_container .flex-direction-nav a{


	position: absolute;


	width: 40px;


	top: 0;


	bottom: 0;


	font-size: 0;


	line-height: 0;


}


.slider_container .flex-direction-nav a:after{


	display: block;


	position: absolute;


	content: "";


	width: 16px;


	height: 26px;


	background: url(../images/slider_controls.png) 0 bottom no-repeat;


	top: 50%;


	margin-top: -13px;


	left: 12px;


}


.slider_container .flex-direction-nav a.flex-next:after{


	left: auto;


	right: 12px;


	background-position: right bottom;


}


.slider_container .flex-direction-nav a:hover{


	background: transparent;


}


.slider_container .flex-direction-nav a:hover:after {


	background-position: 0 0;


}


.slider_container .flex-direction-nav a.flex-next{


	right: 0;


	left: auto;


}


.slider_container .flex-direction-nav a.flex-next:hover:after {


	background-position: right 0;


}


.slider_container ul.slides li {


	list-style: none;


	display: none;


}


.slider_container ul.slides{


	height: auto;


	overflow: hidden;


	margin: 0;


  padding:0;


}


.slider_container .flex-direction-nav {


	margin: 0;


}


/*===================================================================================*/


/*  PROJECT FILLER                                                                   */


/*===================================================================================*/





#portfolio-filter{


    margin: 0px 0 30px;


}





.portfolio-filter-list {


	padding:0;


    margin: 0;


    overflow: hidden;


}





.portfolio-filter-list li {


    text-transform: uppercase;


    margin: 5px;


    display: inline-block;


}





.portfolio-filter-list a {


    color: #000000;


    font-size: 11px;


    padding: 10px 20px;


    position: relative;


    display: inline-block;


    letter-spacing: 0.1em;


    font-weight: 300;


    text-decoration: none !important;


    border: 1px solid #1e1e1e;


   	-webkit-border-radius: 4px;


  	-moz-border-radius: 4px;


   	border-radius: 4px;


}





.portfolio-filter-list a:hover {


    border: 1px solid #FC6F5C;


    background-color: #FC6F5C;


    color:#ffffff;


    opacity: 1;


}





.portfolio-filter-list a.active {


    border: 1px solid #FC6F5C;


    background-color: #FC6F5C;


    color:#ffffff;


}





/*===================================================================================*/


/*  PROJECT ITEMS                                                                    */


/*===================================================================================*/





.portfolio-items {


    width: 100%;


    overflow: hidden;


    position: relative;


}





.portfolio-items article {


    float: left;


    overflow: hidden;


    position: relative;


    width: 25%;


}





.portfolio-items article *


{


    -moz-transition: all 0.6s ease-out;


    -o-transition: all 0.6s ease-out;


    -webkit-transition: all 0.6s ease-out;


    transition: all 0.6s ease-out;


}





.portfolio-items article img


{


    width: 100%;


}





.portfolio-items article:hover img


{





    -moz-transform: scale(1.4);


    -ms-transform: scale(1.4);


    -webkit-transform: scale(1.4);


    transform: scale(1.4);


}





.portfolio-items article .overlay


{


    position: absolute;


    width: 100%;


    height: 100%;


    background: #000000;


    color: #ffffff;


    top:0;


    left:0;


    opacity: 0;


    text-align: center;


    padding: 50px 10px;


    -moz-transform: scale(0.1);


    -ms-transform: scale(0.1);


    -webkit-transform: scale(0.1);


    transform: scale(0.1);


}





.portfolio-items article .overlay i{


    font-size: 40px;


}





.portfolio-items article .overlay h3


{


    text-transform: uppercase;


    font-size: 16px;


    text-align: center;


    color:#ffffff;


}





.portfolio-items article .overlay h3:after


{


    border-bottom: 1px solid #FC6F5C;


    content: ' ';


    width: 180px;


    display: block;


    margin: 10px auto;


    -moz-transform: scale(0.3);


    -ms-transform: scale(0.3);


    -webkit-transform: scale(0.3);


    transform: scale(0.3);


}





.portfolio-items article:hover .overlay


{


    opacity: 0.85;


    -moz-transform: scale(1);


    -ms-transform: scale(1);


    -webkit-transform: scale(1);


    transform: scale(1);


}





.portfolio-items article .overlay span


{


    font-size: 11px;


    font-family:Arial, Helvetica, sans-serif;


    text-transform: uppercase;


}





/*===================================================================================*/


/*  ISOTOPE                                                                          */


/*===================================================================================*/





.isotope-hidden.isotope-item{


    pointer-events: none;


    z-index: 1;


}





.isotope,


.isotope .isotope-item{


    z-index: 2;





    -webkit-transition-duration: 0.6s;


       -moz-transition-duration: 0.6s;


        -ms-transition-duration: 0.6s;


         -o-transition-duration: 0.6s;


            transition-duration: 0.6s;


}





.isotope {


    -webkit-transition-property: height, width;


       -moz-transition-property: height, width;


        -ms-transition-property: height, width;


         -o-transition-property: height, width;


            transition-property: height, width;


}





.isotope .isotope-item {


    -webkit-transition-property: -webkit-transform, opacity;


       -moz-transition-property: -moz-transform, opacity;


        -ms-transition-property: top, left, opacity;


         -o-transition-property: top, left, opacity;


            transition-property: transform, opacity;


}


/*custom css by hatt*/


.border-radius , .border-radius img{


	border-radius: 10px;


}


.margin-top-30{


	margin-top: 30px;


}