/* Reset Styles
================ */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
em {font-style: italic;}

/* General
================ */
html { height:100%;font-family: 'Raleway', sans-serif; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: rgba(0,0,0,0);}
body {font-size: 14px; overflow-x: hidden; height:auto;}
::-moz-selection {background: #049cdb; color: #ffffff; text-shadow: none;}
::selection {background: #049cdb; color: #ffffff; text-shadow: none;}
a{text-decoration:none;}
h1, h2, h3, h4, h5, h6{font-weight: 600;;}
p{font-family: 'Raleway', sans-serif; font-size: 15px; line-height: 26px; color:#000; font-weight: 500; margin-bottom:24px;}
.clear{clear: both;}

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

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

#view{height:100%;}
#intro {overflow: hidden;display: block; position:relative; margin-bottom:20px; height:100%;}
#header {
display: block;
background: #2a2f36;
/*background-image: url(images/texture-bg2.png);*/
background-size: auto,cover;
background-position: center center,left 0px;
background-repeat: repeat, no-repeat;
overflow: hidden;
height:80vh;
background-attachment: fixed;
}

#header #logo{font-family: Open Sans !important; position:absolute; top:70px; left:5%; background:rgba(0, 0, 0, 0.50); background: url(images/tnt.png)\9; text-transform:uppercase; padding: 10px 20px 15px 20px}
#header #logo a{color:#fff;}
#header .hard{font-weight:600; font-size:40px;}
#header .soft{font-size:26px;}

#back-to-top{text-align:center; padding-top:60px;}
#back-to-top a{color:#999; font-weight:bold; text-align: center; font-size: 30px; -webkit-transition: color 0.5s; transition: color 0.5s;}
#back-to-top a:hover{background-position:0 -31px; color:#000;}
#footer{background-color: #fbfbfb; margin-top: 60px; padding-bottom: 50px;}
#footer h2, #footer h3{margin-bottom: 20px;}
#footer h3{font-style:italic;}
#footer h2{font-size:32px;}
#footer #contact {padding-top: 70px;}

#contact_form input{border-bottom: 1px solid #dbd9d4;}
#contact_form textarea {height: 166px;padding: 10px 18px;}
#contact_form input, #contact_form textarea {
position: relative;
display: block;
width: 100%;
background-color: #f9f9f9;
border: 2px solid #e6e6e6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
resize: none;
font-size: 14px;
padding: 15px 18px;
color: #adadad;
margin-bottom: 15px;
overflow: hidden;
font-family: 'Raleway', sans-serif;
-webkit-transition: border-color 0.5s; /* Safari */
transition: border-color 0.5s;
}
#contact_form input:focus, #contact_form textarea:focus{border-color: #999;}
#contact_form .submit{font-weight:500; border: none; background: #BAE8E8; border-radius: 30px;width: inherit;padding-left: 40px;padding-right: 40px;color:#000000; transition: background-color 0.5s, border-color 0.5s;}
#contact_form .submit:hover{cursor:pointer; background-color:#34A3A3;}
#contact-info{float:left; margin-right: 15px; margin-top: 30px;}
#contact-info a{font-size: 30px; color: #666; -webkit-transition: color 0.5s; transition: color 0.5s;}
#contact-info a:hover{color: #000;}
.social li{margin-bottom: 20px; font-weight: 500;}
.social li img{margin-right: 20px; margin-bottom: -3px;}
#contact-info span{margin-right: 4px;}
#contact-info span img{width: 28px; margin-top: 10px;}

.full-height{height: 100%;}
#header .top-bar{padding: 30px 0;}
#header nav, #header #header-border{background: url(images/tnt.png)\9;}
#header nav{max-width:768px;}
#header nav ul li{margin:0 5%; display: inline-block;}
#header nav ul li.first{margin-left: 0;}
#header nav ul li a{color:#fff;font-weight: 700; text-shadow: 1px 1px #000; font-size: 16px; letter-spacing: 1px;}
#header nav ul li a:hover, #what-i-do .viewWork a:hover{border-bottom: 2px solid #fff;}

#header .head-msg .three_quater{margin-top: 4%;}
#header .head-msg h1{font-size: 50px; margin-top: 20px; color: #fff;}
#header .head-msg h1 img{width: 280px;}
#header .head-msg p{color: #fff; font-size: 20px; line-height: 30px;}
#header .head-msg p.role{font-size: 24px; font-weight: 600; margin: 0 0 30px; color: #fff;}
#header .head-msg .quater{margin-left: 5%; width: 30%; float: left;}
#header .head-msg .quater img{width: 100%; margin-top: 160px;}
#header .head-msg .scroll-down, #back-to-top img{
  margin-top: 20px;display: inline-block;
  position: relative;
  -moz-animation: bounce 0.5s infinite linear;
  -o-animation: bounce 0.5s infinite linear;
  -webkit-animation: bounce 0.5s infinite linear;
  animation: bounce 0.5s infinite linear;
  colr:000;
}
#header .head-msg a{background: #BAE8E8; border-radius: 30px; color: #0d0d0d; padding: 15px 32px; font-weight:500; display: inline-block; margin-top: 30px;}
#header .head-msg a .scroll-down{vertical-align:middle; margin-top: 0; margin-left:10px; width: 24px;}
  @-webkit-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
.container {max-width: 1200px;margin: 0 auto;padding-left: 15px;padding-right: 15px;}

#about{margin-top:60px;}
#about p{margin-bottom:4px;}
#about h1, #work h1{font-size:32px; font-weight:600; margin-bottom:30px;}
#about h2{font-size:32px; margin-bottom:20px; font-weight:600;}
#about blockquote, #work blockquote{font-size:22px; margin-bottom:30px; line-height: 32px;}
#about .quater{margin-bottom:50px; float: left; width:30%; margin-left:5%;}
#about .quater.first{margin-left:0;}
#about .half {width: 50%;float: left;margin-bottom: 50px;}
.qualifications{}
.qualifications li{font-size: 16px;font-weight: 500; margin-bottom: 16px; line-height: 21px; background: url('images/list-img.png') no-repeat left top; padding: 3px 0 0 35px;}
#work{clear:both;}
.three_quater{width: 65%; float: left; margin-bottom: 50px;}

article {
max-height: 400px;
margin-left: -60px;
margin: 0 0;
overflow: hidden;
border-bottom: 1px solid #dbd9d4;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

article.last{border:none;}

.disabled{display:none;}
.hide{display:none;}

.date {
border-bottom: 1px solid #dbd9d4;
background: #fbfbfb;
-webkit-transition: background 0.5s;
transition: background 0.5s;
}
.date.first{
	border-top: 1px solid #dbd9d4;
}

.images {
overflow: hidden;
position: relative;
}
.images-holder{overflow:hidden; position:relative;}
.images-slides img{width:100%; height:100%; display:block;}
.images  ul.images-slides li{height:400px; margin-right:50px; width:100%; padding-top: 50px;}
.lastImage {
margin-right: 0px !important;
}

.description {
width: 60%;
max-width: 550px;
margin-right: 50px;
float: left;
position: relative;
}

.description h3{
margin-bottom: 22px;
font-size:18px;
}

.description h4 {
font-size: 15px;
line-height: 24px;
margin-bottom:10px;
font-weight: 500;
}

.technologies {
margin-top: 15px;
}

.technologies li{
display: inline-block;
background-color: #34A3A3;
color: #fff;
font-size: 0.7em;
font-weight: 500;
margin: 0.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
line-height: 1em;
padding: 0.5em 0.5em 0.5em;
}

.details p{font-size:15px;}
.date span {font-size: 20px;font-weight: 600;display: block; cursor: pointer; position: relative; padding: 20px 0;}
.date span:after{content: "\f067"; font-family: FontAwesome;color: #34A3A3;font-style: normal;font-weight: normal;text-decoration: inherit;position: absolute; right: 15px;
webkit-transform: translate3d(0px,0px,0px) rotate(0deg);transform: translate3d(0px,0px,0px) rotate(0deg); -webkit-transition: -webkit-transform .3s cubic-bezier(0.15,0.85,0.35,1);
transition: transform .3s cubic-bezier(0.15,0.85,0.35,1);}
.date:hover span:after{-webkit-transform: rotate(180deg) translate3d(0,0,0); transform: rotate(180deg) translate3d(0,0,0);}
.date.active span:after{content: "\f068";}
.date:hover{background: #e0e0e0;}
.personal-identity{padding-top: 20px;}
.sliderNav{display:block; position:absolute; height:44px; width:44px;  top: 160px; z-index:2; cursor:pointer; top:0; font-size: 30px; color: #8b8b8b; 
-webkit-transition: color 0.5s; transition: color 0.5s;}
.sliderNav:hover{color: #000;}
.sliderNav.left{left:0;}
.sliderNav.left.transparent, .sliderNav.right.transparent{color: #bfbfbf;}
.sliderNav.right{left:50px;}

.accord{display: none;}
.accord.show{display: block;}
.viewSite {color: #999;font-weight: 600;border-bottom: 4px double #dbd9d4;margin-top: 30px;display: inline-block;text-transform: uppercase;font-size: 10px;}
.viewSite:hover{color:#666;}

#experience .half, #footer .half{width: 50%; float: left;}
#footer .half.contact-info{padding-right: 10%; width: 40%;}
#experience .line-tem-tab.ontop{}
#experience .line-tem-ontop span{display: inline-block;width: 50px;height: 50px;background: #34A3A3;border-radius: 25px; text-align: center;}
#experience .line-tem-ontop span img{margin-top: 13px;}
.single-line-item{padding-left: 50px;margin-left: 24px;position: relative;padding-bottom: 40px;}
.line-tem-ontop{position: relative; margin-bottom: 50px;}
#experience .single-line-item::after, .line-tem-ontop::after {content: "";position: absolute;top: .85em;left: 0;width: 1px;background: #ececec;z-index: 1;height: 100%;}
#experience .line-tem-ontop::after{top: 3.6em;left: 1.78em; height: 55px;}
#experience .single-line-item.last::after{content: none;}
#experience .line-tem-tab{position: absolute; left: -4px; z-index: 2;}
#experience .line-tem-tab span{display: inline-block;width: 9px;height: 9px;background: #34A3A3;border-radius: 4px;}
#experience .line-tem-holder h5, #experience h2{font-size: 16px;}
#experience h5 span{font-style: italic;font-size: 13px; margin: 0 !important;}
#experience h2{font-size: 32px; margin-bottom: 40px;}
#experience .line-tem-holder span{display: inline-block;margin: 8px 0 18px;}
#experience{padding-top: 135px !important; padding-bottom: 75px !important; background-image: url(images/present-bg.png) !important;}

.myProgress {
  width: 100%;
  background-color: #BAE8E8;
  margin-bottom: 16px;
  border-radius: 4px;
}

.myBar {
  width: 10%;
  height: 7px;
  background-color: #34A3A3;
  border-radius: 4px;
}
#header .mobile_pic {display: none}

/*-----BEGIN MEDIA QUEIES-----*/

/* Extra small devices (phones, less than 768px) */
/* No media query */

/* Small devices (tablets, 768px and below) */
@media only screen and (max-width: 768px) {
	#header{height:auto;}
	#about .quater, #about .three_quater, #header .three_quater{
		float: none;
		width: inherit;
		    margin-left: 0;
	}
	#header .quater{
		display: none;
	}
	#header .mobile_pic {display: block}
	#experience .half{
		float: none;
		width: inherit;
	}
	.description {width: 100%;max-width: inherit;float: none;}
	article{max-height:585px; margin-bottom: 30px;}
	.details{margin-bottom:15px;}
	.technologies, .viewSite{display:none;}
	#header nav ul{margin-left:7%;}
	#header nav ul li{font-size:0.9em}
	#header nav ul li a:hover{border-bottom: 2px solid #fff;}
	#header .top-bar{display: none;}
	#header .head-msg img{width: 200px;}
	#header .head-msg h1{font-size: 24px;}
	#header .head-msg p.role{font-size: 18px; margin: 15px 0;}
	#header .head-msg .scroll-down{width: 43px;}
	#what-i-do{width: 90%; padding-left:10%; padding-right:0;}
	#what-i-do .big{font-size:4em; left:5%;}
	#what-i-do .normal{font-size:22px; top:24%; left: 20%; display: block;}
	#what-i-do .normal.landscape{display: none;}
	#what-i-do .small {font-size:13px; bottom:16%; left:9%;}
	#what-i-do .viewWork{bottom:-41px; font-size:16px;}
	#about h1, #work h1{font-size:32px;}
	#about h2{font-size:32px;}
	#about li{float:none; width:100%; margin:0 0 20px 0;}
	#about blockquote, #work blockquote{font-size:20px;}
	#header .hard{font-size:30px;}
	#header .soft{font-size:17px;}
	
	.images  ul.images-slides li{height:inherit;}
	.details {display: none;}
	.sliderNav.left {left: 0;}
	.sliderNav.right {left: 50px;}
	#experience .half, #footer .half{ float: none; width: auto;}
	#footer .half.contact-info{width: auto; padding-right: 0;}
	.contact-info{margin-bottom: 30px;}
	#footer{height: max-content;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
}

@media only screen and (max-device-width: 1024px) {
    #header {
        background-attachment: scroll;
    }
}