/* Typo */

body {
background: #f5f5f5;
color: #555;
font-family: 'Lato',sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 25px;
letter-spacing: 0.5px;
}

input,textarea,select {
font-family: 'Lato', sans-serif;
font-size: 15px;
width: 100%;
letter-spacing: 0.5px;
}
p {padding-bottom: 15px}
h1,h2,h3,h4,h5,h6 {
font-weight: 900;
word-spacing: 1px;
margin-bottom: 30px;
color: #333;
}
h1 {font-size: 50px;line-height: 60px;}
h2 {font-size: 30px; line-height: 40px;}
h3 {font-size: 20px}
h4 {font-size: 16px}
h5 {font-size: 14px}
h6 {font-size: 12px}

a {text-decoration: none;color: #c0c0c0;}
a:hover {color: #c4c4c4;}

p.intro{font-size: 24px;font-weight: 300;line-height: 34px;padding-bottom: 45px; text-align:left;}
p.intro.big{font-size: 26px;line-height: 40px; padding-bottom: 30px; text-align:right;}

.post-content ol, .post-content ul {list-style: none outside none; margin-bottom: 15px;}
.post-content ol li:before, .post-content ul li:before {content: "."; font-size: 20px; width: 15px; height: 15px; line-height: 0; float: left; display: inline-block; margin-top: 6px; color: #242424;}
.post-content ol li li, .post-content ul li li {font-size: 90%; margin-left: 15px;}
.post-content ol ol, .post-content ul ul {margin-bottom: 0;}

dl, dl.row {margin-bottom: 15px !important; overflow: hidden;}
dl dt {font-weight: 600;}
dl dd {margin-bottom: 5px !important;}



.primarycolor {color: #242424 !important;}

.coffee-container, .cream-container, .sugar-container {position: relative;}
.coffee-container {background-color: #222; color: #ccc;}
.sugar-container {background-color: #242424; color: #eee;}
.coffee-container h1, .coffee-container h2, .coffee-container h3, .coffee-container h4, .coffee-container h5, .coffee-container h6 {color: #eee;}
.sugar-container a, .sugar-container h1, .sugar-container h2, .sugar-container h3, .sugar-container h4, .sugar-container h5, .sugar-container h6 {color: #fff;}


/* helpers */
.clear {display: block; clear: both; width: 100%; height: 0; line-height: 0;}
.hidden {display: none;}
.spacer {display: block; height: 30px;}
.text-center {text-align: center;}
.text-left {text-align: left;} .text-right {text-align: right; }
.pull-left {float: left !important;}
.pull-right {float: right !important;}
.centered {margin-left: auto; margin-right: auto; float: none;}
.nobottom {margin-bottom: 0 !important; }
.padleft {padding-left: 15px;} .padright {padding-right: 15px;} .padbottom {padding-bottom: 15px;}


/* images */
img {max-width: 100%; height: auto;}
.img-rounded,.img-rounded img {border-radius: 15px;}
.img-circle {border-radius: 600px;}

/* stuff */
.icon-container {position: absolute; top: -35px; text-align: center; width: 100%;}
.icon-container div {width: 60px; height: 60px; margin: 0 auto; display: inline-block; border-radius: 60px; line-height: 60px; padding: 5px; position: relative;}
.icon-container div .glyphicons { 
font-size: 30px;
height: 10px;
line-height: 0;
text-align: center;
width: 28px;
position: absolute;
z-index: 999;
top: 20px; left: 21px;
}
.coffee-container .icon-container div {background: #222; color: #fff; }
.cream-container .icon-container div {background: #f5f5f5; color: #333; }
.sugar-container .icon-container div {background: #242424; color: #fff; }

.icon-bg {position: absolute; font-size: 400px; width: 100%; top: 0;}
.icon-bg .glyphicons {text-align: center; width: 100%;}
.icon-bg .glyphicons i:before {position: relative;}

.coffee-container .icon-bg .glyphicons {color: #1c1c1c; }
.cream-container .icon-bg .glyphicons {color: #e6e6e6; }
.sugar-container .icon-bg .glyphicons {color: #1c1c1c; }

/* navigation */
.sidr{
display:none;
position:absolute;
position:fixed;
top:0;
height:100%;
z-index:999999;
width:260px;
overflow-x:hidden;
overflow-y:auto;
font-size:15px;
background:#111;
color:#fff;
}

.sidr .sidr-inner{padding:0 0 15px}
.sidr.right{left:auto;right:-260px; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);}
.sidr.left{left:-260px;right:auto; box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);}

.sidr ul{display:block;margin:0 0 15px;padding:0;}
.sidr ul li a {display:block; margin:0; line-height: 30px; border-bottom: 1px solid #1A1A1A; color:#fff; padding:0 15px;}
.sidr ul li a:hover {background: #1A1A1A;}
.sidr ul li.active a, .sidr ul li.sidr-class-active a{background: #242424;}

.sidr a .glyphicons { 
font-size: 12px;
height: 5px;
line-height: 0;
text-align: center;
width: 20px;
}

.sidr h3 {color: #fff; display: inline-block; margin:0; padding: 0; line-height: 40px; padding: 0 5px 0 15px;}
.sidr .navclose {position: absolute; top: 8px; right: 5px; color: #fff;}
.sidr .navclose .glyphicons {font-size: 16px;}


/*! http://responsiveslides.com v1.54 by @viljamis */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  border: 0;
  }

.rslides_tabs a {
    background-color: #4D4D4D;
    border: 0 none;
    border-radius: 20px 20px 20px 20px;
    color: transparent;
    float: left;
    font: 0px/0 a;
    height: 15px;
    text-shadow: none;
    width: 15px;
    margin: 0 2px;
}
.rslides_tabs a:hover {background-color: #1D1D1D;}
.rslides_tabs .rslides_here a {background-color: #242424;}
.sugar-container .rslides_tabs .rslides_here a {background-color: #fff;}
.rslides_tabs { text-align: center;}
.rslides_tabs li {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0;
}


.rslides h3, .rslides p { max-width: 600px; margin: auto; margin-bottom: 15px; }

.fw_slider .rslides img {width: 100%; height: auto; margin-bottom: 15px;}
.fw_slider .rslides .rslides_tabs {padding-bottom: 60px;}

/* parallax elements */
.parallax { background-position: 50% 500%; background-repeat: no-repeat; background-attachment: fixed; }

#about  {background-image:url(../images/aboutme.svg);} 
#personalinfo {background-image: url(../images/pinfo.svg); }
#education {background-image: url(../images/ed.svg); }
#TimeLine {background-image: url(../images/timeline.svg); }
#services {background-image: url(../images/bg-ok_2.png); }
#skills {background-image: url(../images/skills.svg); }
#bonus {background-image: url(../images/bg-gift.png); }
#portfolio {background-image: url(../images/portfolio.svg); }
#clients {background-image: url(../images/bg-group.png); }
#testimonials {background-image: url(../images/bg-comments.png); }
#social {background-image: url(../images/social.svg); }

#contact {background-image: url(../images/mail.svg); }
#download {background-image: url(../images/clip.svg); }

/* home block */
#home .wrap .row {padding-top: 60px; padding-bottom: 30px !important;}
#animation {position: relative; height: 300px;}
#animation * {position: absolute; }

#ccimage {
top: 40px;
left: 53%;
width: 150px; 
height: 150px; 
display: block;
border: 5px solid #fff; overflow: hidden;
}
#ccimage img { position: relative !important; display: inline !important;}
#hello {top: 30px; right: 53%;}
#ccname {top: 50px; right: 53%;}
#iam {top: 130px; right: 53%;}
#ccfunction {top: 150px; right: 53%;}

#home p {padding-bottom: 0; font-size: 16px;}
#home h1 {margin-bottom: 15px;}


/* ELASTISLIDE */
	/* Default Styles */
.es-carousel-wrapper{padding:0;	position:relative;}
.es-carousel{overflow:hidden;}
.es-carousel ul{display:none;margin-bottom: 0;}
.es-carousel ul li{height:100%;float:left;display:block;margin-bottom: 0;position: relative;list-style-type: none;overflow: hidden;}
.es-carousel ul li > a{display:block;}
.es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;}
.es-nav {display: block; position: absolute; width: 100%; top: 32%;}
.es-nav > span{
	position:absolute;
	left: -30px;
	display: block !important;
	width: 30px;
	height: 30px;
	cursor:pointer;
	text-align: center;
	background: transparent;
	text-align: left;
}
.es-nav span.es-nav-next{ left: auto; right:-45px; text-align: right;}
.es-nav > span.muted {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity: .1;
}


/* buttons */
.btn-nav li > a, .btn {
font-weight: 900;
font-size: 12px;
text-transform: uppercase;
color: #FFF;
display: inline-block;
background-color: #242424;
padding: 6px 20px;
margin: 0;
cursor: pointer;
margin-bottom: 20px;
width: auto;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
letter-spacing: 1px;
}
.btn-nav li > a:hover, a.btn:hover {color: #fff; background: #c95752;}
.sugar-container .btn-nav li > a, .sugar-container .btn {background-color: #fff; color: #333;}
.sugar-container .btn-nav li > a:hover, .sugar-container a.btn:hover {background: #ddd; color: #333;}

.btn-nav li {margin-bottom: 15px;}
.btn-nav:after {clear: both;}
.btn-nav:after, .btn-nav:before {content: ""; display: table;line-height: 0;}
.btn-nav li {display: inline-block; list-style-type: none;}
.btn-nav li > a {margin: 0 5px;}
.btn-nav.pull-right li > a {margin-right: 0; margin-left: 5px;}
.btn {display: inline-block; border-radius: 5px; padding: 8px 12px; line-height: 15px; text-decoration: none; }
.btn, .btn a {text-decoration: none;}

.btn-nav li.active > a {background: #333 !important;}
.coffee-container .btn-nav li.active > a {background: #eee !important; color: #333 !important;}
.sugar-container .btn-nav li.active > a {color: #fff !important;}
.btn.transparent {background: transparent !important; color: #333; }
.coffee-container .btn.transparent {color: #fff;}
.sugar-container .btn.transparent {color: #fff;}
.btn.transparent:hover {color: #242424; }
.sugar-container .btn.transparent:hover {color: #333; }


.btn .glyphicons {
line-height: 0;
font-size: 18px;
height: 4px;
width: 26px;
font-weight: 400 !important; 
}
.btn.icon .glyphicons {width: 17px;}



/* Isotope */
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { z-index: 1; }

/* tweeterbox */
.jtwt { list-style: none; }

/* contact form */
input, textarea {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
font-size: 15px;
display: inline-block;
vertical-align: middle;
height: 30px;
line-height: 30px;
padding: 5px 10px;
width: 80%;
}
.coffee-container input, .coffee-container textarea {background: #444; border-color: #545454; color: #ccc;}

button {font-size: 15px; }

textarea {height: auto;}
form label {display: inline-block; width: 20%;float: left; text-align: right; }
form button.btn {border: none; margin-left: 20%; cursor: pointer;} 
::-webkit-input-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic;}
::-moz-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic; } /* firefox 19+ */
:-ms-input-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic; } /* ie */
input:-moz-placeholder, textarea:-moz-placeholder  { font-family: Arial,Helvetica,sans-serif; font-style: italic; }
.error-message, .email-confirmation, .email-error {
line-height: 25px; 
padding: 0 15px 15px 0;
margin-left: 20%;
text-align: left;
}
.error-message span, .email-error span, .email-confirmation span { font-size: 12px; height: 10px; line-height: 10px; width: 18px;}
.email-confirmation {color: green; margin-bottom: 15px;}
.email-error {color: red; margin-bottom: 15px; } 
.error-message {color: red; }
input.error, textarea.error {margin-bottom: 10px; }


/* header */
#header {color: #fff; position: fixed; top: 0; height: 40px; text-align: right; z-index: 9999; width: 100%;}
#header .wrap span {display: none;}
#header.scrolled {background: #242424; }
#header.scrolled .wrap span {display: inline-block; font-size: 18px; line-height: 35px; margin: 0 2px;}
#header #menutrigger { position: absolute; top: 0; right: 0; color: #fff !important; line-height: 30px; margin: 0; padding-top: 0; font-size: 20px;}
#header #navhighlight { position: absolute; top: 5px; right: 35px; }

/* positions */
.position { 
width: 70%; 
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 15px;
margin-bottom: 45px;
}
.coffee-container .position { background: #1e1e1e; }
.sugar-container .position { background: #e55c56; }
.sugar-container .position h4 {color: #333;}

.position.last {margin-bottom: 15px;}
.position h3 {margin-bottom: 15px;}
.position h4 {font-size: 30px; line-height: 40px; color: #242424;}
.date-detail { font-style: italic; font-size: 14px; margin-bottom: 15px;}

.position2 {margin-bottom: 45px; overflow: hidden;}
.position2.last {margin-bottom: 15px;}
.position2 .dim2thirds {padding-top: 40px;}
.position2 .dim1third h3, .position2 .dim2thirds h4 {margin-bottom: 10px;}

.more {margin-top: 20px;}
.more .btn {margin: 0 2px;}
.position .more .btn {background: #b9b9b9;}
.position .more .btn:hover {background: #999;}
.coffee-container .position .more .btn {background: #2C2C2C;}
.coffee-container .position .more .btn:hover {background: #3F3F3F;}
.sugar-container .position .more .btn {background: #fff;}
.sugar-container .position .more .btn:hover {background: #ddd;}


/* services */
.services p, .services h3 {width: 70%; margin-left: auto; margin-right: auto;}
.services h3 {margin-bottom: 15px; margin-top: 10px;}
.services2 h3 {margin-bottom: 15px}
.services img, .services2 img {width: 150px; height: 150px;}

/* testimonials */
.testimonials h3 {margin-bottom: 0; }
.testimonials h4 {margin-bottom: 15px; font-weight: 400; }
.testimonials p {padding-left: 15px; border-left: 1px solid #ccc; font-style: italic; font-weight: 300; letter-spacing: 1px; line-height: 20px;}
.testimonials p:last-child {padding-bottom: 0;}
.testimonials img {max-width: 70%; margin: auto;}


/* copyright */
#copyright {background: #000 !important; color: #fff !important;}
#copyright .wrap > .row {padding: 0	30px !important; }
#copyright p {padding-bottom: 0;}

/* tweeter */
#twitterbox .jtwt_picture {display: none;}
#twitterbox .jtwt_tweet_text {font-size: 20px; line-height: 30px;}

/* skills */
.skills h3 {margin-bottom: 15px;}
.skills dd .glyphicons {
line-height: 0;
font-size: 15px;
height: 7px;
width: 15px;
}
.skills span.btn {cursor: default !important;}


/* Scrolltop button */
#scrolltop {
background: #242424;
display: block;
width: 40px; height: 40px;
position: fixed; 
bottom: 30px; right: 30px;
z-index: 10;
display: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: .7;
}
#scrolltop:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;}
#scrolltop .glyphicons, #scrolltop .glyphicons i:before {font-size: 20px; line-height: 40px; text-align: center; width: 40px; height: 40px; padding: 0; text-align: center; color: #fff;}


/* overlay */
.hovereffect {display: block; overflow: hidden; position: relative; line-height: 0; height: auto; }
.actions {width: 100%; height: 100%; text-align: center; display: table-cell; vertical-align: middle; }
.actions a {line-height: 30px; display: inline-block; width: 40px; height: 40px; margin: 5px 10px; border-radius: 500px; background: #242424; color: #fff;}
.actions a .glyphicons, .actions a .glyphicons i:before {padding: 0; font-size: 20px; line-height: 40px; width:35px; height:40px; text-align: center;}
.actions a .glyphicons {
opacity: .75;
}
.actions a:hover .glyphicons {
opacity: 1;
}
.overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; 
background: transparent url(../images/bg30.png) repeat;  
background: rgba(0,0,0,0.7);
}
.hovertransparent .overlay {background: none transparent;}
.wrap .overlay {margin: auto;}

.o-item {display: none;}

/**** CSS TRANSITIONS ****/ 

* {
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;

-webkit-transition-property: color, background-color;
-moz-transition-property: color, background-color;
-o-transition-property: color, background-color;
-ms-transition-property: color, background-color;
transition-property: color, background-color;

-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;
transition-timing-function: ease;
}

.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}
.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:     -ms-transform, opacity;
   -o-transition-property:      -o-transform, opacity;
      transition-property:         transform, opacity;
}




/* Large Desktop */
@media (min-width: 1200px) {

}


/* Normal Desktop */
@media (min-width: 980px) and (max-width: 1199px) {
	
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	
	.sl-slider p {font-size: 20px;}
	.services p, .services h3 {width: auto;}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.position { width: auto;}
	.text-left, .text-right {text-align: center;}
	.padleft, .padright {padding: 0;}
	.post-content ol li:before, .post-content ul li:before {content: ""; display: none; }

	.nav-arrows span {height: 20px; width: 20px; }
	.sl-slider-wrapper {height: 300px;}
	.sl-slider h2, .sl-slider p {width: 60%; max-width: 60%; padding-left: 38px;}
	.sl-slider h2 { margin-top: 60px; font-size: 18px !important; line-height: 1.1 !important;}
	.sl-slider p {font-size: 14px; padding-top: 0;}
	.nav-arrows span {top: 60%;width: 20px;height: 40px;font-size: 30px; line-height: 40px;}
	.nav-arrows span.nav-arrow-prev {left: 35px;}
	.nav-arrows span.nav-arrow-next {right: 35px;}
	
	#scrolltop {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
	opacity: .4;
	bottom: 15px; right: 15px;
	}
	
	#home .wrap .row {padding-top: 0;}
	
	#animation {height: auto;}
	#animation * {position: relative; display: block; text-align: center; left: auto; right: auto; top: auto; width: auto; }
	#ccimage { margin: 20px auto; width: 150px; margin-bottom: 20px; overflow: hidden;}
	
	form input, form textarea, form label {width: 100%;}
	form label {text-align: left; margin-bottom: 2px;}
	form button.btn {float: left; margin-left: 0;}
	.error-message {margin-left: 0; text-align: left; float: left;}
	.more .btn {margin-bottom: 5px;}
	
	.date-detail {margin-top: 30px;}
	dl dt {margin-bottom: 5px !important;}
	/*.parallax {background-image: none !important;}*/
  
}
 
/* Landscape phones and down */
@media (max-width: 480px) {

	
}


	
.icon-container div .glyphicons.user {
background-image:url("../images/aboutme.png");
   background-size: 30px auto;
    height: 39px !important;
    width: 30px !important;
    margin-top:-10px;
}

.icon-container div .glyphicons.nameplate {
background-image:url("../images/pinfo.png");
   background-size: 30px auto;
    height: 22px !important;
    width: 30px !important;
}


.icon-container div .glyphicons.skills {
background-image:url("../images/skills.png");
   background-size: 30px auto;
    height: 26px !important;
    width: 30px !important;
}
.icon-container div .glyphicons.work {
background-image:url("../images/timeline.png");
   background-size: 30px auto;
    height: 34px !important;
    width: 30px !important;
}

.icon-container div .glyphicons.ed {
background-image:url("../images/ed.png");
   background-size: 30px auto;
    height: 19px !important;
    width: 30px !important;
}

.icon-container div .glyphicons.social {
background-image:url("../images/social.png");
   background-size: 30px auto;
    height: 32px !important;
    width: 30px !important;
}

.icon-container div .glyphicons.portfolio {
background-image:url("../images/portfolio.png");
   background-size: 30px auto;
    height: 27px !important;
    width: 30px !important;
}
.icon-container div .glyphicons.paperclip {
background-image:url("../images/clip.png");
   background-size: 30px auto;
    height: 26px !important;
    width: 30px !important;
}


	#timeline {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		background: url('../images/dot.gif') left 45px repeat-x;
	}
		#dates {
			width: 800px;
			height: 60px;
			overflow: hidden;
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 50px;
				font-size: 24px;
				text-align: center;
				background: url('../images/biggerdot.png') center bottom no-repeat;
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
				}
				#dates .selected {
			        font-size: 38px;
				}
		
		#issues {
			width: 800px;
			height: 800px;
			overflow: hidden;
		}	
			#issues li {
				width: 800px;
				height: 800px;
				list-style: none;
				float: left;
                text-align:left;
			}
				#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					float: left;
					margin: 10px 20px 10px 10px;
					background: transparent;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
					zoom: 1;
					-webkit-transition: all 2s ease-in-out;
					-moz-transition: all 2s ease-in-out;
					-o-transition: all 2s ease-in-out;
					-ms-transition: all 2s ease-in-out; 
					transition: all 2s ease-in-out;
					-webkit-transform: scale(0.7,0.7);
					-moz-transform: scale(0.7,0.7);
				    -o-transform: scale(0.7,0.7);
				    -ms-transform: scale(0.7,0.7);
				    transform: scale(0.7,0.7);
				}
				#issues li h1 {
					color: #ffcc00;
					font-size: 48px;
					margin: 20px 0;
					text-shadow: #000 1px 1px 2px;
                    text-align:center;
				}
				#issues li p {
					font-size: 14px;
					margin-right: 70px;
                    margin-left:70px;
					font-weight: normal;
					line-height: 22px;
					text-shadow: #000 1px 1px 2px;
				}
		
		#grad_left,
		#grad_right {
			width: 100px;
			height: 350px;
			position: absolute;
			top: 0;
		}
			#grad_left {
		        left: 0;
		        background: url('assets/images/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('assets/images/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				background-position: 0 -76px;
			}
			#next {
				right: 0;
				background-image: url('assets/images/next.png');
			}
			#prev {
				left: 0;
				background-image: url('assets/images/prev.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}
                
                
                #TimeLine h2 {
                    text-align:center;
                    padding-top:55px;
                }
                #TimeLine h2.date {
                    text-align:left;
                    padding-top:0px;
                }
                
           .linkedin {
            background:url(../images/linkedin.png);
            height:60px;
            width:60px;
            display:block;
            }
            .linkedin:hover {
                background-position: 0px 60px;
            }

           .twitter {
            background:url(../images/twitter.png);
            height:60px;
            width:60px;
            display:block;
            }
            .twitter:hover {
                background-position: 0px 60px;
            }

           .facebook {
            background:url(../images/facebook.png);
            height:60px;
            width:60px;
            display:block;
            }
            .facebook:hover {
                background-position: 0px 60px;
            }

           .google_plus {
            background:url(../images/google_plus.png);
            height:60px;
            width:60px;
            display:block;
            }
            .google_plus:hover {
                background-position: 0px 60px;
            }    
  html { height: 100%;}

* {  margin: 0;  padding: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after,.row:before,.row:after .container:before,.container:after {  content: " ";  display: table;}
.clearfix:after,.row:after,.container:after {  clear: both;}
.clearfix,row,.container {  *zoom: 1;}

/* Grid elements */
.container { position: relative;  overflow: hidden;}
.wrap {  width: 980px;  margin-left: auto;  margin-right: auto;}

.row {  position: relative;  width: 100%;}
.col {  float: left;}

body.fullwidth {  width: 100%;}

.col,.col:after,.col:before,
.row,.row:after,.row:before,
input,input:after,input:before,
label,label:after,label:before,
select,select:after,select:before,
textarea,textarea:after,textarea:before,
form,form:after,form:before 
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap > .row {padding: 90px 30px 120px; overflow: hidden}
.wrap > .row.nowrap {padding: 0 30px 0;}

.dim1 {  width: 10%;}
.dim1sixth {  width: 16.66666%;}
.dim1sixth.last {  width: 16.67%;}
.dim2,.dim1fifth {  width: 19.99999%;}
.dim1quarter {  width: 24.99999%;}
.dim3 {  width: 30%;}
.dim1third,.dim2sixths {  width: 33.33333%;}
.dim1third.last,.dim2sixths.last {  width: 33.33334%;}
.dim4,.dim2fifths {  width: 40%;}
.dim5,.dim2quarters,.dim1half,.dim3sixths {  width: 50%;}
.dim6,.dim3fifths {  width: 60%;}
.dim2thirds,.dim4sixths {  width: 66.66666%;}
.dim2thirds.last,.dim4sixths.last {  width: 66.66667%;}
.dim7 {  width: 70%;}
.dim3quarters {  width: 74.99999%;}
.dim8,.dim4fifths {  width: 80%;}
.dim5sixths { width: 83.33333%;}
.dim5sixths.last { width: 83.33334%;}
.dim9 { width: 90%;}
.dim10,.dimfull {  width: 100%;}

.gridpadding,.childrenpadding > .col {  padding: 30px;}
.gridpaddinghorizontal,.childrenpaddinghorizontal > .col {  padding-left: 30px;  padding-right: 30px;}
.gridpaddingvertical,.childrenpaddingvertical > .col { padding-top: 30px; padding-bottom: 30px;}
.gridpaddingtop,.childrenpaddingtop > .col {  padding-top: 30px;}
.gridpaddingbottom,.childrenpaddingbottom > .col {  padding-bottom: 30px;}
.gridpaddingleft,.childrenpaddingleft > .col {  padding-left: 30px;}
.gridpaddingright,.childrenpaddingright > .col {  padding-right: 30px;}
.gridhalfpadding,.childrenhalfpadding > .col {  padding: 15px;}
.gridhalfpaddinghorizontal,.childrenhalfpaddinghorizontal > .col {  padding-left: 15px;  padding-right: 15px;}
.gridhalfpaddingvertical,.childrenhalfpaddingvertical > .col {  padding-top: 15px;  padding-bottom: 15px;}
.gridhalfpaddingtop,.childrenhalfpaddingtop > .col {  padding-top: 15px;}
.gridhalfpaddingbottom,.childrenhalfpaddingbottom > .col {  padding-bottom: 15px;}
.gridhalfpaddingleft,.childrenhalfpaddingleft > .col {  padding-left: 15px;}
.gridhalfpaddingright,.childrenhalfpaddingright > .col {  padding-right: 15px;}

/* helpers */
.spacer.spacer-responsive {  height: 30px;}


#contact-map,form .subtitle {  margin-bottom: 30px;}

#googlemap,
.post-content address,
.post-content table,
.format-wide2 .meta,
.format-list .meta,
.format-list2 .meta,
.format-grid .meta,
.format-masonry .meta,
.excerpt {
  margin-bottom: 15px;
}
#main .container,
#copyright,
#footer .container,
.format-list .col,
.format-list2 .col,
.format-wide .col,
.format-wide2 .col,
.o-items-container .o-item,
.main-title,
.content-wraper {
  padding: 15px;
}
#header .container,
#header .row {
  overflow: visible;
}
.masonry-container {
  margin-left: -1px;
  margin-right: -1px;
}
#header .container,
#header .container > .row {
  padding: 0 15px;
}
#logoblock {
  padding: 15px 0;
}
.o-items-container .o-item {
  padding-right: 14px;
}
#copyright {
  overflow: hidden;
}
.format-list .posthead,
.format-list2 .posthead,
.format-list .flexslider.posthead,
.format-list2 .flexslider.posthead {
  margin-bottom: 0;
}
.format-wide2 a.readmore {
  margin-top: 15px;
}
.format-wide .posthead,
.format-wide .flexslider.posthead,
.format-wide2 .posthead,
.format-wide2 .flexslider.posthead {
  padding: 15px;
  padding-bottom: 0;
  margin-bottom: 15px;
}
body.single .format-wide2 .posthead {
  margin-bottom: 0;
}
.o-sticky {
  margin-right: -30px !important;
  margin-left: -30px !important;
  margin-top: -30px !important;
  overflow: hidden;
}
.posthead.o-sticky {
  margin-bottom: 15px !important;
}
#contact-map,
#contact-email {
  padding-left: 15px;
  padding-right: 15px;
}
#mobilenav {
  padding-bottom: 15px;
}
.o-singular .hentry {
  margin-bottom: 30px;
}
.o-index.format-grid .hentry,
.o-index.format-masonry .hentry,
.o-index.format-mosaic .hentry {
  padding: 15px;
}
.o-index.format-wide .hentry,
.o-index.format-wide2 .hentry {
  margin-bottom: 60px;
}
.o-index.format-list .hentry,
.o-index.format-list2 .hentry {
  margin-bottom: 30px;
}
.format-list .hentry,
.format-list2 .hentry {
  overflow: hidden;
}
.o-singular.format-wide .hentry,
.o-singular.format-wide2 .hentry,
.o-singular.format-list .hentry,
.o-singular.format-list2 .hentry {
  margin-bottom: 0;
}
.o-index.o-items-container {
  margin-bottom: 30px;
}
.prevnext,
.pagination {
  margin: 0;
  padding: 15px;
  overflow: hidden;
}
.pagination {
  padding-left: 0;
  padding-right: 0;
}
#comments,
#respond {
  margin-top: 15px;
  padding: 15px;
  padding-bottom: 0;
}
#comments h3,
#respond h3 {
  margin-bottom: 30px;
}
#comments ol {
  margin-bottom: 30px;
}
#comments .comment-body {
  margin-bottom: 30px;
}
#comments .children {
  margin-left: 60px;
}
#comments .avatar {
  margin-right: 15px;
}
#comments .navigation {
  overflow: hidden;
  margin-bottom: 30px;
}
#comments form p {
  margin-bottom: 30px;
}


.widget_o_carousel_widget h2 {
  margin-bottom: 25px;
}
.widget_o_carousel_widget.hasnav h2 {
  margin-bottom: -30px;
  padding-right: 80px;
}
.widget_o_carousel_widget h3,
.widget_o_focus_widget h3 {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 15px;
}
.widget_o_carousel_widget p,
.widget_o_focus_widget p {
  margin-top: 15px;
}
#footer .o-widget {
  padding: 0 15px;
}
#footer .o-widget.widget_o_focus_widget {
  padding: 0;
}
pre {
  margin: 30px 0;
  padding: 15px;
  overflow: auto;
}
.hr {
  margin: 60px 0;
}
.box {
  margin-bottom: 30px;
  padding: 30px;
}
.box span {
  font-size: 30px;
  margin-bottom: 15px;
  padding-bottom: 0;
  line-height: 1.3;
}
blockquote {
  padding-left: 15px;
  margin-bottom: 15px;
}
blockquote.bigquote {
  padding-left: 60px;
  margin-bottom: 30px;
}
.toggle,
.accordion,
.tabs,
.iframe-container {
  margin-bottom: 30px;
}
.iframewrap {
  padding: 15px;
}
.iframewrap .iframe-container {
  margin-bottom: 0;
}
#mobilenav {
  display: none;
}
.nav {
  display: block;
}
.alert {
  margin-bottom: 15px;
  padding: 15px;
  padding-right: 30px;
}
.alert .close {
  top: 15px;
  right: 15px;
}
form legend {
  margin: 30px 0;
}
form p {
  margin-bottom: 15px;
}
form label {
  padding-right: 30px;
}
.tagline p {
  padding: 0 15px;
}
.es-carousel ul li {
  margin-right: 30px !important;
}
.posthead {
  margin-bottom: 30px;
  line-height: 0;
}
.flexslider.posthead {
  margin-bottom: 30px;
}
.format-masonry .posthead,
.format-grid .posthead {
  margin-bottom: 15px;
}
.format-mosaic .posthead {
  margin-bottom: 0;
}
#content.dim7 {
  padding-right: 30px;
}
#content.dim7.pull-right {
  padding-right: 0;
  padding-left: 30px;
}



@media (min-width:1200px){}
/* Normal Desktop */
@media (min-width:980px) and (max-width:1199px){}
/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px){.sl-slider p{font-size:20px;}
.services p,.services h3{width:auto;}
}
/* Landscape phone to portrait tablet */
@media (max-width:767px){.position{width:auto;}
.text-left,.text-right{text-align:center;}
.padleft,.padright{padding:0;}
.post-content ol li:before,.post-content ul li:before{content:"";display:none;}
.nav-arrows span{height:20px;width:20px;}
.sl-slider-wrapper{height:300px;}
.sl-slider h2,.sl-slider p{width:60%;max-width:60%;padding-left:38px;}
.sl-slider h2{margin-top:60px;font-size:18px !important;line-height:1.1 !important;}
.sl-slider p{font-size:14px;padding-top:0;}
.nav-arrows span{top:60%;width:20px;height:40px;font-size:30px;line-height:40px;}
.nav-arrows span.nav-arrow-prev{left:35px;}
.nav-arrows span.nav-arrow-next{right:35px;}
#scrolltop{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;bottom:15px;right:15px;}
#home .wrap .row{padding-top:0;}
#animation{height:auto;}
#animation *{position:relative;display:block;text-align:center;left:auto;right:auto;top:auto;width:auto;}
#ccimage{margin:20px auto;width:150px;margin-bottom:20px;overflow:hidden;}
form input,form textarea,form label{width:100%;}
form label{text-align:left;margin-bottom:2px;}
form button.btn{float:left;margin-left:0;}
.error-message{margin-left:0;text-align:left;float:left;}
.more .btn{margin-bottom:5px;}
.date-detail{margin-top:30px;}
dl dt{margin-bottom:5px !important;}
}
/* Landscape phones and down */
@media (max-width:480px){}
@media (min-width: 1200px) {
  .wrap {   width: 980px;  }
  body.fullwidth .wrap {    width: auto;  }
  body.fullwidth.boxed .wrap {    width: 980px;  }
}

@media (max-width: 1200px) {
    
    .skills img {
        width:20px;
        height:auto;
    }
    .skills div.dim1half {
        width:100%;
        }
        
#piecharts .dim1fifth {
    width:19.99999%;
    height: 19.9999%;
    background-size:30px 30px;
}        
    }
@media (min-width: 768px) and (max-width: 979px) {
  .wrap {    width: 768px;  }
  body.fullwidth .wrap {    width: auto;  }
  body.fullwidth.boxed .wrap {    width: 768px;  }
}

@media (max-width: 767px) {
  .wrap,  body.fullwidth.boxed .wrap {   width: 100%;  }
  #main .container,  #header .container,  #footer .container {  padding: 0; }
  #mobilenav {  display: block; }
  #respond .dim1third { padding-right: 0 !important;}
  .nav {  display: none; }
  .tabstitle div { float: none !important;  }
 
  .dim1,
  .dim1sixth,
  .dim1sixth.last,
  .dim2,
  .dim1fifth,
  .dim1quarter,
  .dim3,
  .dim1third,
  .dim2sixths,
  .dim1third.last,
  .dim2sixths.last,
  .dim4,
  .dim2fifths,
  .dim5,
  .dim2quarters,
  .dim1half,
  .dim3sixths,
  .dim6,
  .dim3fifths,
  .dim2thirds,
  .dim4sixths,
  .dim2thirds.last,
  .dim4sixths.last,
  .dim7,
  .dim3quarters,
  .dim8,
  .dim4fifths,
  .dim5sixths,
  .dim5sixths.last,
  .dim9,
  .dim10,
  .dimfull {
    width: 100%;
  }
  .o-item.dim1half {
    width: 49.999% !important;
  }
  #footer .o-widget {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #footer .o-widget.widget_o_focus_widget {
    padding-top: 15px;
    padding-bottom: 0;
  }
  #contact-map .dim1third {
  	margin-bottom: 15px;
  }
#piecharts .dim1fifth {
    background-size:20px 20px;
}      
}

@media (max-width: 568px) {
    body {
        font-size: 12px;
    }
    p.intro, p.intro.big {
        font-size:15px;
        line-height: normal;
    }
    .skills img {
        width:15px;
        height:auto;
    }    
    #TimeLine h2.date {
        font-size: 17px;
        line-height:normal;
        
    } 
    #TimeLine h3 {
        font-size: 10px;
    }
    #TimeLine .container h3 {
        font-size: 20px;
    }
    #TimeLine .vco-storyjs p {font-size: 13px;}
    #TimeLine h2 {
        padding-top: 35px;
        font-size:20px;
        line-height:normal;
        
    }
    #TimeLine img { max-width:50% !important;}
    }
                 .padright {
                padding-right:15px;
             }