/*

	BASE STYLE
	
	GRID
	ANIMATION

	PRELOADER

	HEADER
		NAVIGATION
		INTRO
	
	ABOUT
	SERVICE
	SKILL
	CLIENTS
	WORKS
	PRICING
	QUOTES
	CONTACT
	MAP

	FOOTER
	
	EXTERNAL PAGE
	
	404 PAGE

	PLUGIN STYLING: MAGNIFIC POPUP, OWL CAROUSEL

	MEDIA QUERIES

*/



/* ==========================================================================
   BASE STYLE
   ========================================================================== */
   
   .lang{
	  color:#fff !important; 
	  background:#a5a5a5 !important;
	  padding:3px;
	  }
	  
	  .lang:hover{
	  color:#a5a5a5 !important; 
	  background:#fff !important;
	  padding:3px; 
	  }
   
   @font-face {
    font-family: 'theano_didotregular';
    src: url('fonts/theanodidot-regular-webfont.eot');
    src: url('fonts/theanodidot-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/theanodidot-regular-webfont.woff2') format('woff2'),
         url('fonts/theanodidot-regular-webfont.woff') format('woff'),
         url('fonts/theanodidot-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

.fittext{
	 font-family: 'theano_didotregular' !important;
}

.splash-logo{

    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%;
}

.the-logo{
text-align:center;
margin:150px 0 0 0;
}

*, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html{ margin: 0; padding: 0;
width: 100%;
height: 100%; font-size: 100%; }

body{
	background:#fefefe;
	color:#333333;
    font-size: 1em;
    line-height: 1.6;
	font-weight:400;
	font-family: 'Open Sans', Arial, sans-serif;
}

a{
	color: #1d1d1d;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-o-transition: color 0.2s;
	-ms-transition: color 0.2s;
	transition: color 0.2s;
}
a:hover,
a:active {
    outline: 0;
}
a:hover{
	color: #666666;
}

h1, h2{
	font-family: "Open Sans",Arial,sans-serif;
}
audio,
canvas,
img,
video {
    vertical-align: middle;
}

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

img{
	width: auto\9;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

::-webkit-input-placeholder{ /* WebKit browsers */
    color: #a9a9a9;
}

:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color: #a9a9a9;
}

::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #a9a9a9;
}

:-ms-input-placeholder{ /* Internet Explorer 10+ */
    color: #a9a9a9;
}

/* Section Color Scheme */
.white{
	background: #ffffff;
}
.whitesmoke{
	background: #f8f8f8;
}
.gainsboro{
	background: #dcdcdc ;
}
.lightgray{
	background: #d3d3d3;
}
.silver{
	background: #c0c0c0 ;
}
.darkgray{
	background: #a9a9a9;
}
.darken{
	background: #1d1d1d;
	color: #ffffff;
}
.darken a{
	color: #a9a9a9;
}
.darken a:hover{
	color: #ffffff;
}

/* Section with SVG Separator */
.has-svg{
	position: relative;
	padding-top: 100px;
}

/* Adjustment class for section with SVG Separator */
.pull {
	padding-top: 0;
}
.push {
	padding-top: 100px;
}

/* Section Title */
.section-title{
	margin-bottom: 60px;
	text-align: center;
}
.section-title h1{
	position: relative;
	margin-top: 0;
	text-transform: uppercase;
}
.section-title h1:after{
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	height: 2px;
	background: rgb(191, 191, 191);
	background: rgba(191, 191, 191, 0.7);
	content: "";
}
.section-title h3{
	position: relative;
	text-align: center;
	color: #999999;
	font-weight: 400;
	font-size: 1em;
}

/* SVG Separator */
.separator{
	position: absolute;
	left: 0;
	bottom: -99px;
	z-index: 900;
	width: 100%;
	height: 100px;
}
.separator.separator-top{
	top: -99px;
	bottom: auto;
}

/* SVG Separator Color Style */
.white .separator path{
	fill: #ffffff;
}
.whitesmoke .separator path{
	fill: #F8F8F8;
}
.gainsboro .separator path{
	fill: #dcdcdc ;
}
.lightgray .separator path{
	fill: #d3d3d3;
}
.silver .separator path{
	fill: #c0c0c0 ;
}
.darkgray .separator path{
	fill: #a9a9a9;
}
.darken .separator path{
	fill: #1d1d1d;
}

/* h1 Logo Style */
.logo{
	font-family: 'Open Sans', Arial, sans-serif;
}

.logo a{
	color: #ffffff;
	
	display: inline-block;	
    width: 121px;
    height: 29px;
	
    background-image: url(../img/logo.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:121px 29px;
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
.logo a:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/* Text Alignment */
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}

/* Button Style */
.button {
	font-weight: 700;
	padding: 5px 10px;
	display: inline-block;
}

/* Button Dark Style */
.button-dark {
	border: 2px solid #666666;
}
.button-dark:hover{
	color: #ffffff!important;
	border: 2px solid #222222;
	background: #222222;
}

/* Button Light Style */
.button-light {
	color: #ffffff!important;
	border: 2px solid #ffffff;
}
.button-light:hover{
	color: #222222!important;
	background: #ffffff;
}

/* Animate CSS after page load */
.preload *{
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/* Hide text for rotate-text */
.rotate-text{
	display: none;
}

/* grayscale image */
.grayscale img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-backface-visibility: hidden;
}
.grayscale:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

/* Fullscreen image */
.fullscreen-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
	z-index: -1;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* For IE 6/7 only */
}

/* ==========================================================================
   GRID
   ========================================================================== */

.container{
	max-width: 1170px;
	padding: 60px 20px;
	margin: 0 auto;
}

.container:after,
.row:after,
.column:after{
	content: "";
	display: table;
	clear: both;
}

.row{
	padding-bottom: 0;
}

.column{
	display: block;
	float: left;
    margin-left: 2%;
}

.column:first-child{
	margin-left: 0;
}

.full_width{ width: 100%; }
.half{ width: 49.0%; }
.one_third{ width: 32.0%; }
.two_third{ width: 66.0%; }
.one_fourth{ width: 23.5%; }
.three_fourth{ width: 74.5%; }

@media only screen and (min-width: 768px) and (max-width: 979px){

    .one_fourth{
		width: 49.0%;
    }

    .one_fourth:nth-child(2n+1){
		margin-left: 0;
	}

}

@media only screen and (max-width : 767px){

    .column{
        width: 100%;
        margin-left: 0;
    }

}

@media only screen and (max-width : 770px){
	#about .service-block:nth-child(odd) .service-icon{
	left: 0% !important;
}

#about .service-block:nth-child(odd) .service-body{
	left: 0% !important;
	margin-left: 0;
}
   

}


/* ==========================================================================
   ANIMATION
   ========================================================================== */

/* Hide element before animation */
.transparent{
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 0 );
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 0);
    filter: alpha(opacity = 0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
}
/* Show element after animation */
.opaque{
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 100 );
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 100);
    filter: alpha(opacity = 100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes flipInX{
    0%{
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    } 40%{
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70%{
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100%{
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX{
    0%{
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40%{
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70%{
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100%{
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX{
    0%{
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40%{
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70%{
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100%{
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX{
    0%{
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40%{
        transform: perspective(400px) rotateX(-10deg);
    }

    70%{
        transform: perspective(400px) rotateX(10deg);
    }

    100%{
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX{
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}
@-webkit-keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-moz-keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-o-keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.fadeIn{
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp{
	0%{
		opacity: 0;
		-webkit-transform: translateY(20px);
	}

	100%{
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp{
	0%{
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100%{
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp{
	0%{
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100%{
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp{
	0%{
		opacity: 0;
		transform: translateY(20px);
	}

	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp{
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown{
	0%{
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100%{
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown{
	0%{
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100%{
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown{
	0%{
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100%{
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown{
	0%{
		opacity: 0;
		transform: translateY(-20px);
	}

	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown{
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft{
	0%{
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}

	100%{
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft{
	0%{
		opacity: 0;
		-moz-transform: translateX(-20px);
	}

	100%{
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft{
	0%{
		opacity: 0;
		-o-transform: translateX(-20px);
	}

	100%{
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft{
	0%{
		opacity: 0;
		transform: translateX(-20px);
	}

	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft{
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight{
	0%{
		opacity: 0;
		-webkit-transform: translateX(20px);
	}

	100%{
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInRight{
	0%{
		opacity: 0;
		-moz-transform: translateX(20px);
	}

	100%{
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInRight{
	0%{
		opacity: 0;
		-o-transform: translateX(20px);
	}

	100%{
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInRight{
	0%{
		opacity: 0;
		transform: translateX(20px);
	}

	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight{
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}



/* ==========================================================================
   PRELOADER
   ========================================================================== */

#preloader{
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:99999; /* makes sure it stays on top */
	background-color:#fff; /* change if the mask should have another color then white */
}

#status{
	position:absolute;
	top:50%; /* centers the loading animation vertically one the screen */
	left:50%; /* centers the loading animation horizontally one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
	width:200px;
	height:200px;
	background-image:url(../img/AjaxLoader.gif); /* path to your loading animation */
	background-position:center;
	background-repeat:no-repeat;
	background-size:32px 32px;
}



/* ==========================================================================
   HEADER
   ========================================================================== */

#header{
	width: 100%;
	height: 100%;
}

/* Tint background image */
#header.tint{
	background: rgba(0,0,0,0.08);
}

/* Fallback for IE */
.no-rgba .tint{
   background:transparent;
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); 
   zoom: 1;
}

/* ==========================================================================
   HEADER: NAVIGATION
   ========================================================================== */

#header .nav-header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 120px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0);
	-webkit-transition: background 0.2s;
	-moz-transition: background 0.2s;
	-o-transition: background 0.2s;
	transition: background 0.2s;
}

#header .nav-header .nav-inner{
	margin: 0 auto;
	max-width: 1170px;
}

#header .nav-header h1,
#nav-toggle,
#header .nav-header .nav{
	position: relative;
	display: inline-block;
}

#header .nav-header h1,
#nav-toggle,
#header .nav-header .nav a{
	color: #fff;
	line-height: 120px;
}

#nav-toggle,
#header .nav-header .nav a{
	outline: 0;
}

#header .nav-header .logo a{
	height: 120px;
}

#header .nav-header h1{
	float: left;
	margin: 0;
	padding-left: 20px;
}

#nav-toggle,
#header .nav-header .nav{
	float: right;
	padding-right: 20px;
	text-transform: uppercase;
}

#nav-toggle{
	font-size: 1.66667em;
	padding-left: 20px;

	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;

	display: none;
}

#nav-toggle.active{
	padding: 0 35px;
	background: #1d1d1d;
}

#nav-toggle img{
	vertical-align: inherit;
}

#header .nav-header .nav a{
	position: relative;
	margin: 0 0 0 20px;
	font-size: 0.8em;
}

#header .nav-header .nav a.current,
#header .nav-header .nav a:hover{
    color: #808080;
}

#header .nav-header .nav a.current:after{
	position: absolute;
	top: -34px;
	left: 0;
	width: 100%;
	height: 5px;
	background: #808080;
	content: "";
}

#header .nav-header.blackout{
	height: 90px;
	/*background: rgb(33, 33, 33);*/
	background: rgba(33, 33, 33, 0.9);
}

#header .nav-header.blackout h1,
#header .nav-header.blackout .nav a{
	line-height: 90px;
}

#header .nav-header.blackout h1{
	font-size: 2em;
}

#header .nav-header.blackout .logo a{
	height: 90px;
}



/* ==========================================================================
   HEADER: INTRO
   ========================================================================== */

#header .intro-block{
	width: 100%;
	height: 100%;
	display: table;
	color: #ffffff;
}

#header .intro-block .intro-text{
	display: table-cell;
	vertical-align: middle;
	-webkit-transform:translate3d(0,0,0);
}

#header .intro-block .intro-text h1,
#header .intro-block .intro-text h3{
	text-transform: uppercase;
	margin: 0;
}

#header .intro-block .intro-text h1{
	font-size:4em;
	line-height:1em;
}

#header .intro-block .intro-text .button{
	margin-top: 40px;
	padding: 10px 15px;
	font-size: 1.17em;
}



/* Rotating Text */
#header .rotating{
	display: inline-block;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
	-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
	-o-transform: rotateX(0) rotateY(0) rotateZ(0);
	transform: rotateX(0) rotateY(0) rotateZ(0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin-x: 50%;
}

#header .rotating.flip{
 	position: relative;
}

#header .rotating .front, #header .rotating .back{
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

#header .rotating .front{
	position: absolute;
	display: inline-block;
	-webkit-transform: translate3d(0,0,1px);
	-moz-transform: translate3d(0,0,1px);
	-ms-transform: translate3d(0,0,1px);
	-o-transform: translate3d(0,0,1px);
	transform: translate3d(0,0,1px);
}

#header .rotating.flip .front{
	z-index: 1;
}

#header .rotating .back{
	display: block;
	opacity: 0;
}

#header .rotating.flip .back{
	z-index: 2;
	display: block;
	opacity: 1;

	-webkit-transform: rotateY(180deg) translate3d(0,0,0);
	-moz-transform: rotateY(180deg) translate3d(0,0,0);
	-ms-transform: rotateY(180deg) translate3d(0,0,0);
	-o-transform: rotateY(180deg) translate3d(0,0,0);
	transform: rotateY(180deg) translate3d(0,0,0);
}

#header .rotating.flip.up .back{
	-webkit-transform: rotateX(180deg) translate3d(0,0,0);
	-moz-transform: rotateX(180deg) translate3d(0,0,0);
	-ms-transform: rotateX(180deg) translate3d(0,0,0);
	-o-transform: rotateX(180deg) translate3d(0,0,0);
	transform: rotateX(180deg) translate3d(0,0,0);
}



/* ==========================================================================
   ABOUT
   ========================================================================== */

#about .team-grid .t-block .t-image{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #dcdcdc;
}

#about .team-grid .t-block .t-position{
	display: inline-block;
	margin: 0 auto 10px;
	padding: 10px;
	width: 100%;
	background: #a9a9a9;
	color: #fff;
	letter-spacing: 1px;
}

#about .team-grid .t-block  .t-socials{
	display: block;
}

#about .team-grid .t-block .t-socials  a{
	padding: 10px;
}


/**/


#about .service-block{
	max-width: 960px;
	margin: 0 auto 60px;
}

#about .service-block:last-child{
	margin-bottom: 0;
}

#about .service-block .service-icon,
#about .service-block .service-body{
	position: relative;
}

#about .service-block:nth-child(odd) .service-icon{
	left: 49.0%;
}

#about .service-block:nth-child(odd) .service-body{
	left: -49.0%;
	margin-left: 0;
}

#about .service-block .service-body h2{
	margin-top: 0;
}








#neden .service-block{
	max-width: 960px;
	margin: 0 auto 60px;
}

#neden .service-block:last-child{
	margin-bottom: 0;
}

#neden .service-block .service-icon,
#neden .service-block .service-body{
	position: relative;
}

#neden .service-block:nth-child(odd) .service-icon{
	left: 49.0%;
}

#neden .service-block:nth-child(odd) .service-body{
	left: -49.0%;
	margin-left: 0;
}

#neden .service-block .service-body h2{
	margin-top: 0;
}




/* ==========================================================================
   SERVICE
   ========================================================================== */

#service .service-block{
	max-width: 960px;
	margin: 0 auto 60px;
}

#service .service-block:last-child{
	margin-bottom: 0;
}

#service .service-block .service-icon,
#service .service-block .service-body{
	position: relative;
}

#service .service-block:nth-child(odd) .service-icon{
	left: 49.0%;
}

#service .service-block:nth-child(odd) .service-body{
	left: -49.0%;
	margin-left: 0;
}

#service .service-block .service-body h2{
	margin-top: 0;
}



/* ==========================================================================
   SKILL
   ========================================================================== */

#skill .skill-grid .skill-block  h3{
	font-weight: 400;
}

#skill .skill-grid .skill-block .chart{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

#skill .skill-grid .skill-block .chart canvas{
	position: absolute;
	top: 0;
	left: 0;
}

#skill .skill-grid .skill-block .chart span{
	display: inline-block;
	color: #a9a9a9;
	font-size: 2em;
	font-weight: 700;
	line-height: 200px;
}

#skill .skill-grid .skill-block .chart span:after{
	content: '%';
	margin-left: 0.1em;
	font-size: .8em;
}



/* ==========================================================================
   CLIENTS
   ========================================================================== */
#clients{
}



/* ==========================================================================
   WORKS
   ========================================================================== */

#filters{
	margin-bottom: 40px;
}

#filters ul{
	display: inline-block;
	margin: 0;
	padding: 0;
	*display: inline;
	*zoom: 1;
}

#filters ul li{
	display: inline;
}

#filters ul li span{
	position: relative;
	float: left;
	padding: 4px 16px;
	color:#a9a9a9;
	text-decoration:none;
	line-height: 20px;
	cursor: pointer;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

#filters ul li span:hover{
	color:#ffffff;
}

#filters ul li span.active{
	color:#ffffff;
}

#portfolio-grid {
}

#portfolio-grid .portfolio-block{
	display:none;
	float:left;
	overflow:hidden;
	width: 33.3333333%;
}

#portfolio-grid .portfolio-wrapper{
	position: relative !important;
	overflow:hidden;
	background: #ffffff;
	cursor:pointer;
}

#portfolio-grid .portfolio-block a,
#portfolio-grid .portfolio-block a:hover{
	color: #222222;
	display: block;
}
#portfolio-grid .portfolio-block a:hover{
	cursor: crosshair;
}

#portfolio-grid .portfolio-block img{
	width:100%;
}

#portfolio-grid .portfolio-block .label-block{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.952941);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

#portfolio-grid .portfolio-block a:hover .label-block{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}

#portfolio-grid .portfolio-block .label-text{
	display: table;
	width: 100%;
	height: 100%;
}

#portfolio-grid .portfolio-block .label-text-inner{
	display: table-cell;
	padding: 0 1.66667rem;
	vertical-align: middle;
}

#portfolio-grid .portfolio-block .text-title{
	margin:0;
}

#portfolio-grid .portfolio-block .text-category{
	display: block;
	color: #333333;
}



/* ==========================================================================
   PRICING
   ========================================================================== */

#pricing .pricing-table .pricing-block .pricing-body{
	background: #f5f5f5;
	max-width: 300px;
	margin: 0 auto;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}

#pricing .pricing-table .pricing-block .pricing-body:hover{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

/* IE8 */
.lt-ie9 #pricing .pricing-table .pricing-block .pricing-body:hover{
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.05, M12=0, M21=0, M22=1.05, SizingMethod='auto expand')";
	margin-left: -10px;
	margin-top: -17px;
}

#pricing .pricing-table .pricing-block .pricing-body h2{
	margin: 0;
	padding: 20px;
}

#pricing .pricing-table .pricing-block .pricing-head{
	padding: 15px;
	color: #ffffff;
	background: #c0c0c0;
}

#pricing .pricing-table .pricing-block .price{
	font-weight: 700;
	font-size: 4em;
	text-transform: uppercase;
}

#pricing .pricing-table .pricing-block .pricing-features ul{
	text-align: left;
	padding: 0;
	margin: 0;
}

#pricing .pricing-table .pricing-block .pricing-features li{
	padding: 20px;
	border-bottom: 1px solid #dcdcdc;
	list-style-type: none;
}

#pricing .pricing-table .pricing-block .pricing-features li:last-child{
	border-bottom: none;
}

#pricing .pricing-table .pricing-block .pricing-footer .pricing-action{
	display: inline-block;
	width: 100%;
	padding: 20px;
	background: #666;
	color: #fff;
	text-decoration: none;
}

#pricing .pricing-table .pricing-block .pricing-footer .pricing-action:hover{
	display: inline-block;
	width: 100%;
	padding: 20px;
	background: #222222;
	color: #fff;
	text-decoration: none;
}



/* ==========================================================================
   Timeline
   ========================================================================== */

#timeline .tl-list {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
} 

/* The line */
#timeline .tl-list:before,
#timeline .tl-list:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20%;
	margin-left: -11px;
	width: 4px;
	background: rgba(0,0,0,0.1);
}
#timeline .tl-list:after {
	top: auto;
	bottom: -20px;
	left: 20%;
	margin-left: -11px;
	height: 20px;
	background: rgba(0,0,0,0.1);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}

/* The date/time */
#timeline .tl-list > li {
	position: relative;
}

#timeline .tl-list > li .tl-time {
	display: block;
	width: 25%;
	padding-right: 100px;
	position: absolute;
	top: 50%;
	margin-top: -23px;
}

#timeline .tl-list > li .tl-time span {
	display: block;
	text-align: right;
	line-height: 3em;
}

/* Right content */
#timeline .tl-list > li .tl-label {
	margin: 0 0 20px 25%;
	padding: 20px;
	background: #ffffff;
	position: relative;
	border: 1px solid #dcdcdc;
}

#timeline .tl-list > li .tl-label h2{
	margin: 0;
	font-family: Open Sans, Arial, sans-serif;
	font-weight: 400;
}

/* The triangle */
#timeline .tl-list > li .tl-label:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #dcdcdc;
	border-width: 10px;
	top: 50%;
	margin: -10px 0 0 -25px;
}

/* The icons */
#timeline .tl-list > li .tl-icon {
	width: 50px;
	height: 50px;
	font-size: 1.4em;
	line-height: 50px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	color: #f5f5f5;
	background: #666666;
	border-radius: 50%;
	text-align: center;
	left: 20%;
	top: 50%;
	margin: -25px 0 0 -35px;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}
#timeline .tl-list > li:hover .tl-icon{
	background: #999999;
}

/* Load More Button */
#timeline .load-more{
	margin-top: 20px;
}



/* ==========================================================================
   QUOTES
   ========================================================================== */

#quotes h2, #quotes  .quote{
	font-weight: normal;
	font-family: Georgia,Times,"Times New Roman",serif;
}

#quotes h2{
	margin-top: -32px;
}

#quotes  .quote{
	font-size: 5em;
	line-height: 1em;
}



/* ==========================================================================
   CONTACT
   ========================================================================== */

#contact{
	background: transparent url("../img/background/contact.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#contact .section-title h3{
	color: white;
}

#contact form{
	position: relative;
	margin: 0 auto;
	max-width: 620px;
}

#contact form input,
#contact form textarea{
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	width: 100%;
	border: 2px solid #fff;
	background: rgb(64,64,64);
	background: rgba(64,64,64,0.1);
	color: #fff;
	font-family: Open Sans, Arial, sans-serif;
}

#contact form textarea{
	min-height: 150px;
    resize: vertical;
}

#contact form input:focus,
#contact form textarea:focus,
#contact form label:active + input,
#contact form label:active + textarea{
	outline: none;
	border: 2px solid #fff;
	background: #fff;
	color: #666;
}

#contact form input.submit{
	display: inline-block;
	margin-bottom: 0;
	padding: 10px;
	border: 2px solid #ffffff;
	background: rgb(64,64,64);
	background: rgba(64,64,64,0.1);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

#contact form input.submit:hover{
	background: #ffffff;
	color: #1d1d1d;
}


#contact .form-notification{
	margin-top: 20px;
}

#contact .form-notification .success,
#contact .form-notification .warning,
#contact .form-notification .error{
	padding: 10px;
	color: #ffffff;
}

#contact .form-notification .success{
	text-align: center;
	background: #27ae60;
}

#contact .form-notification .warning{
	text-align: center;
	background: #d35400;
}

#contact .form-notification .error{
	background: #bf0000;
	list-style: none;
}

#address-block{
	background: #1d1d1d;
	background: rgba(0, 0, 0, 0.3);
}

#address-block > address{
	padding: 40px 0;
	text-align: center;
}



/* ==========================================================================
   MAP
   ========================================================================== */

#map {width:100%;height:400px;color:#333;}
#map img{ max-width: none !important; }



/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer{
	background: #1d1d1d;
	color: white;
	text-align: center;
}

#footer-top{
	background: #333333;
}

#footer-top .container,
#footer-bottom .container{
	padding: 40px 20px;
}

#footer-top .socials{
	padding: 0;
	margin: 0;
	list-style: none;
}

#footer-top .socials li{
	display: inline-block;
}

#footer-top .socials li a{
	display: inline-block;
	margin: 10px;
	width: 2em;
	height: 2em;
	border: 2px solid #ffffff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #ffffff;
	font-size: 2em;
	line-height: 2em;
}

#footer-top .socials li a:hover{
	background: #ffffff;
	color: #1d1d1d;
}



/* ==========================================================================
   EXTERNAL PAGE
   ========================================================================== */
   
/* Header for Page */ 
#header.page{
	height: 120px;
	background: #1d1d1d; 
}

/* Post Container */ 
#post .container{
	max-width: 900px;
}
#post .meta{
	color: #999;
}

/* Author Area */
#post .author {
	position: relative;
	max-width: 520px;
	margin: 80px auto 0;
}
#post .author:after{
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	height: 2px;
	background: rgb(191, 191, 191);
	background: rgba(191, 191, 191, 0.7);
	content: "";
}
#post .author .author-text {
	overflow: hidden;
}
#post .author img {
	float: left;
	margin: 4px 20px 20px 4px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#post .author h3,
#post .author p {
	margin-top: 0;
}
#post .author h3 {
	margin-bottom: 0.5em;
}
#post .author  .socials{
	display: block;
}
#post .author .socials  a{
	padding: 10px;
}

/* Comments Area */
#comment .container {
	max-width: 620px;
	margin: 0 auto;
}

/* Comment List */
#comment .comment-list {
	margin: 0 0 40px 0;
	padding: 0;
}
#comment .comment-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	clear: both;
}
#comment .comment-list ul {
	margin: 0 0 0 11%; /* relative value */
	padding: 0;
}
#comment .comment-list .comment-block {
	overflow: hidden;
	margin-bottom: 1em;
	border-bottom: 1px solid #dcdcdc;
}
#comment .comment-list  .comment-avatar img {
	float: left;
	margin: 0 20px 20px 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
#comment .comment-list .comment-head,
#comment .comment-list .comment-text{
	margin-bottom: 1em;
}
#comment .comment-list .comment-head a{
	font-weight: 700;
}
#comment .comment-list .comment-head .comment-date{
	color: #999999;
}

/* Comment Form */
#comment form{
	position: relative;
	margin: 0 auto 20px;
}

#comment form input,
#comment form textarea{
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	width: 100%;
	border: 2px solid #dcdcdc;
	background: rgb(64,64,64);
	background: rgba(0,0,0,0.1);
	font-family: Open Sans, Arial, sans-serif;
}

#comment form textarea{
	min-height: 200px;
    resize: vertical;
}

#comment form input:focus,
#comment form textarea:focus,
#comment form label:active + input,
#comment form label:active + textarea{
	outline: none;
	border: 2px solid #999999;
	color: #666666;
}

#comment form input.submit{
	display: inline-block;
	margin-bottom: 0;
	padding: 10px;
	border: 2px solid #666666;
	background: #666666;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

#comment form input.submit:hover{
	border: 2px solid #222222;
	background: #222222;
}

#nav-page .nav{
	max-width: 900px;
	margin: 0 auto;
	font-size: 0;
}

#nav-page .nav a{
	display: inline-block;
	width: 33.3333333%;
	font-size: 16px;
}

/* ==========================================================================
	404 PAGE
   ========================================================================== */

#four-oh-four{
	width: 100%;
	height: 100%;
	
	display: table;
	
	color: #ffffff;
	background: #222222 url("../img/background/bg-404.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-webkit-box-shadow: inset 0px 0px 156px 64px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 156px 64px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 156px 64px rgba(0,0,0,0.75);
}

#four-oh-four a{
	color: #dfdfdf;
}

#four-oh-four a:hover{
	color: #ffffff;
}

#four-oh-four .content-block {
	display: table-cell;
	vertical-align: middle;
	
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
}

#four-oh-four .content-block .content-text {
	max-width: 580px;
	margin: 0 auto;
	padding: 20px;
	color: white;
	text-align: center;
}
 
#four-oh-four .content-block .content-text h1 {
	font-size: 180px;
	line-height: 100%;
	margin: 0;
}

#four-oh-four .content-block .content-text h2 {
	margin-top: 0;
	font-size: 24px;
	text-transform: uppercase;
}
#four-oh-four .content-block .content-text .button{
	margin-top: 1em;
}



/* ==========================================================================
   PLUGIN: MAGNIFIC POPUP, OWL CAROUSEL
   ========================================================================== */

/* Magnific Popup Zoom Style*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/* ideally, transition speed should match zoom duration */
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

/* Owl Carousel Owl Theme */
.owl-theme .owl-controls{
	margin-top: 10px;
	text-align: center;
}

/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
	color: #FFF;
	display: inline-block;
	zoom: 1;
	*display: inline;
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: #666666;
	filter: Alpha(Opacity=50);
	opacity: 0.5;
}

/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
	filter: Alpha(Opacity=100);
	opacity: 1;
	text-decoration: none;
}

/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #666666;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);
	opacity: 1;
}

/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(../img/AjaxLoader.gif);
	background-position:center;
	background-repeat:no-repeat;
}
.owl-carousel .owl-item{
	text-align: center;
}



/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width: 768px) and (max-width: 979px){

	#about .team-grid .t-block,
	#skill .skill-grid .skill-block,
	#pricing .pricing-table .pricing-block{
		margin-bottom: 20px;
	}

	#about .team-grid .t-block .grayscale .t-image,
	#about .team-grid .t-block .t-position{
		max-width: 300px;
	}

}

/* Landscape phone to portrait tablet */
@media only screen and (max-width: 767px){
	#header.page{
		height: 90px;
	}

	#header .nav-header,
	#header .nav-header.blackout{
		height: 90px;
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, 1);
	}

	#header .nav-header .nav-inner{
		width: 100%;
	}

	#nav-toggle,
	#header .nav-header h1,
	#header .nav-header.blackout h1{
		line-height: 90px;
	}

	#header .nav-header .logo a,
	#header .nav-header.blackout .logo a{
		height: 90px;
	}

	#header .nav-header .nav a,
	#header .nav-header.blackout .nav a{	
		line-height: 50px;
	}

	#nav-toggle{
		display: block;
	}

	#header .nav-header .nav{
		display: none;
		position: absolute;
		top: 90px;
		right: 0;
		width: 100%;
		float:none;
		padding-right: 0;
		border-bottom: 10px solid rgba(0,0,0,0.952941);
		-webkit-transition: right 0.3s;
		-moz-transition: right 0.3s;
		-o-transition: right 0.3s;
		-ms-transition: right 0.3s;
		transition: right 0.3s;
	}

	#header .nav-header .nav.open{
		display: block;
	}

	#header .nav-header .nav a{
		display: inline-block;
		width: 100%;
		margin: 0;
		padding-left: 20px;
		background: #1d1d1d;
		border-left: 4px solid transparent;
	}

	#header .nav-header .nav a:hover{
		background: #191919;
	}

	#header .nav-header .nav a.current{
		border-left: 4px solid #a9a9a9;
	}

	#header .nav-header .nav a.current:after{
		background: transparent;
	}

	#about .team-grid .t-block,
	#skill .skill-grid .skill-block,
	#pricing .pricing-table .pricing-block{
		margin-bottom: 20px;
	}

	#about .team-grid .t-block .grayscale .t-image,
	#about .team-grid .t-block .t-position{
		max-width: 300px;
	}

	#service .service-block:nth-child(odd) .service-icon,
	#service .service-block:nth-child(odd) .service-body{
		left: 0;
	}

	#service .service-block .service-body{
		text-align: center;
	}

	#service .service-block .service-body h2{
		margin-top: 0.83em;
	}

	#service .service-block .service-body p{
		text-align: left;
	}

	#portfolio-grid .portfolio-block{
		width: 50%;
	}
	
	#timeline .tl-list:before,
	#timeline .tl-list:after {
		display: none;
	}

	#timeline .tl-list > li{
		margin-top: 40px;
	}

	#timeline .tl-list > li:first-child{
		margin-top: 0;
	}

	#timeline .tl-list > li .tl-time{
		width: 100%;
		position: relative;
		padding-right: 0;
		background: #dcdcdc;
	}

	#timeline .tl-list > li .tl-time span {
		text-align: left;
		padding-left: 20px;
		line-height: 4.8em;
		border: 1px solid #dcdcdc;
	}

	#timeline .tl-list > li .tl-label {
		margin: 0;
		border-top: none;
	}

	#timeline .tl-list > li .tl-label:after {
		display: none;
	}

	#timeline .tl-list > li .tl-icon {
		position: relative;
		float: right;
		left: auto;
		margin: -65px 20px 0 0;
	}
}

/* Landscape phones and down */
@media only screen and (max-width: 480px) {

	
	#portfolio-grid{
		max-width: 400px;
		margin: 0 auto;
	}
	#portfolio-grid .portfolio-block{
		width: 100%;
	}
	#four-oh-four .content-block .content-text {
		max-width: 420px;
	}
	#four-oh-four .content-block .content-text h1 {
		font-size: 128px;
	}
}

/* Retina Display */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	.logo a{
		background-image: url(../img/logo@2x.png);
	}
	#status{
		background-image: url(../img/AjaxLoader@2x.gif);
	}
}