@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');

/* USED FONT FAMILY  
font-family: 'Merriweather', serif;
font-family: 'Open Sans', sans-serif;
 */

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body{font:13px 'Open Sans', sans-serif;background:url(../images/overlay.png) #e8e9e9;}
/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body,select,input,textarea{color:#333;}
a{color:#03f;}
a:hover{color:#69f;}
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background:#4264d2;color:#fff;text-shadow:none;}
::selection{background:#4264d2;color:#fff;text-shadow:none;}

/*	j.mp/webkit-tap-highlight-color */
a:link{-webkit-tap-highlight-color:#fcd700;}
ins{background-color:#fcd700;color:#000;text-decoration:none;}
mark{background-color:#fcd700;color:#000;font-style:italic;font-weight:bold;}

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder{color:#a9a9a9;}
textarea:-moz-placeholder{color:#a9a9a9;}

/* let's give blockquotes *some* default styling, because unstyled blockquotes are dangerous */
blockquote{padding:16px;background:#eee;}

main{width:90%;background:#f4f4f4;margin:20px auto;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.1);}

header{padding:8vmin;background:url(../images/bgimg.jpg);background-size:cover;background-repeat:no-repeat;}
header > section {}
header > section > aside > span{background:url(../../content/images/icon-default-green.png);background-size:cover;width:12em;height:12em;border-radius:50%;display:inline-block;} /*profilepic.jpg can be replaced with your profile images OR any images hosted online e.g GRAVATAR (Sample image URL : https://s.gravatar.com/avatar/88b98081dc4f42c05a799b59c165306f?s=128 )*/
header > section > aside{}
header > section > aside > h1{float:right;display:inline;width:75%;font-family:'Merriweather',serif;font-size:3.1em;color:#FFF;background:rgba(0, 0, 0, 0.3);padding:.3em;text-shadow:1px 0px #000;}
header > section > aside > h1 > span{font-size:.35em;display:block;font-family:'Open Sans',sans-serif;text-transform:uppercase;}
header > section > aside > h1 > section{margin:.8em 0 0;font-size:.35em;font-family:'Open Sans',sans-serif;}

.timelineCont ul{border-left:5px solid #dfe5e6;margin:0 0 0 8em;}
.timelineCont ul li{margin:.8em 4em .8em .8em;padding:1em;background:#FFF;border-radius:5px;min-height:35px;}
.timelineCont ul li:before{content:'';height:15px;width:15px;border-radius:50%;background:#d4d4d4;border:2px solid #FFF;position:absolute;margin-left: -5.65em;box-shadow: 0 0 3px #fff;}
.timelineCont ul li:hover{}
.timelineCont ul li:hover:before{background:#4264d2;}

.timelineCont ul li:first-child:before{visibility:hidden;display:none;}
.timelineCont ul li:first-child{margin:0em 4em .7em .7em ;background:transparent;padding:2.5em 1em;border:none;min-height:auto;}

.timelineCont ul li h3{font-size:1.5em;margin-bottom:.5em;font-weight:bold;}

.timelineCont ul li:last-child:before{visibility:hidden;display:none;}
.timelineCont ul li:last-child{margin:.7em 4em 0em .7em;background:transparent;padding:1em 1em 0 1em;border:none;min-height:auto;}

.timelineCont ul li span{font-weight:bold;margin-left:-12em;position:absolute;width:65px;text-align:right;}
.timelineCont ul li:hover span{color:#4264d2;}

.timelineCont ul li ul{clear:both;margin:1em 0 0;padding:0;border:none;}
.timelineCont ul li ul li, .timelineCont ul li ul li:first-child, .timelineCont ul li ul li:last-child{list-style:disc;margin:.1em 0 .1em 3em;padding:0;min-height:auto;}
.timelineCont ul li ul li:before{clear:both;margin:0;padding:0;display:none;}

footer{height:8em;background:#333;color:#FFF;padding:.5em;margin:0 0 4em 0;text-align:center;}
footer a {color:#FFF; text-decoration: none;}
footer div{color:#666;}

/* Media queries-------------------------------------------------------------------------------*/
@media screen and (min-width: 1280px) {
	header > section > aside > h1{width: 82%;}
}

@media screen and (max-width: 1024px) {
	 header > section > aside > h1{width: 75%;} 
}

@media screen and (max-width: 960px) {
	main{margin:0 auto;width:100%}
	header > section > aside > h1{font-size:2.6em;width:75%;}
	header > section > aside > h1 > span{font-size:.5em;}
	footer{margin:0}
}

@media screen and (max-width: 768px) {
	header{padding: 4em 2em} 
	header > section > aside > h1{font-size:2.3em;width:71%;}	
}

@media screen and (max-width: 568px) {
	header > section > aside > h1{font-size:2.1em;width:65%;margin:.4em 0 0 0;}
}

@media screen and (max-width: 480px) {
	header > section > aside{margin: 0;}
	header > section > aside > span{display:none} 
	header > section > aside > h1{float:none;clear:both;display:block;width:auto;margin:0;}
	
	.timelineCont ul{padding-left:.3em;margin:0 0 0 1.5em;}
	.timelineCont ul li{ margin:1.4em 1em 1.4em .8em;padding:.9em}
	.timelineCont ul li span{margin-left:0em;display:block;position:relative;padding-bottom:.4em;font-size:1.2em;text-align:left;width:auto;}
	.timelineCont ul li span b{display:inline; visibility:visible;}
	.timelineCont ul li:before{margin-left:-2.7em;}	
	.timelineCont ul li:first-child{margin:0em 1em 1.4em .8em;}
} 

@media screen and (max-width: 320px) {}

/* Print styles-------------------------------------------------------------------------------*/
@media print {
	@page{margin:0 0 0 0;}
	@page :first{margin:.5cm 0 0 0;}
	
	body{margin:0;padding:0;background:none;-webkit-print-color-adjust: exact;color-adjust: exact;}
	a:after {content: " [" attr(href) "] ";}
	main{width:100%;margin:0;box-shadow:none;background:none;}
	
	header{margin:0;padding:0;color:#000;opacity:1;border-bottom:5px solid #dfe5e6;background:none;}
	header > section > aside > span{display:none;}
	header > section > aside > h1{float:none;clear:both;display:block;width:auto;margin:0 0 0 .3em;background:none;color:#333;}
	
	.timelineCont ul li{page-break-inside:avoid;background:none;}
	.timelineCont ul li:hover:before{background:#d4d4d4;}
	.timelineCont ul li:hover span{color:#333;}
	
	footer{border-top:5px solid #dfe5e6;background:none;margin:0;padding:1cm 2cm 2cm;color:#333;}
	footer a{ font-weight: normal;color:#333; }
	footer:after{color:#666;font-size:.8em;font-style:italic;margin-top:.8em;display:block;content:"Contact me at email@emaildomain.com for any clarification or further details";}
}