/******************
	 *** Main
	 ***/

	#all{width:980px}
	#main{width:860px; padding-top:50px;}
	h2{text-transform:uppercase; font-weight:400; background:url(../images/circle-item.png) no-repeat 0 7px; text-indent:20px;}
	h3{font-weight:400; margin: 0; font-size:24px; margin-bottom:14px; margin-top:5px;}
	.center{margin:0 auto; text-align: center;}



	/******************
	 *** HEADER
	 ***/

	header{/* height:187px; */position: relative;}
	header #title h1{font-size: 90px;margin: 10px 10px;}
	header #subtitle{/* height:22px; */font-size: 30px;padding-top:5px;padding-left:6px;padding-bottom: 6px;border-bottom: 1px solid #222;color: #222;text-align: center;line-height: 30px;}

	nav{height:106px; padding-left:190px; overflow:hidden; -webkit-border-radius:0 60px 0 0; -moz-border-radius:0 60px 0 0; -o-border-radius:0 60px 0 0; border-radius:0 60px 0 0; -webkit-box-shadow:0 0 5px #777; -moz-box-shadow:0 0 5px #777; -o-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777;}
	nav .nav-global-li:last-child{border-right:none;}
	nav .nav-global-li:first-child{border-left:none;}
	nav .nav-global-a{font-size:18px;  padding:0 20px; padding-top:40px; display:block; color:#FFF;-webkit-text-shadow:1px 1px 1px #333; -moz-text-shadow:1px 1px 1px #333; -o-text-shadow:1px 1px 1px #333; text-shadow:1px 1px 1px #333;}

	nav .nav-home,nav .nav-resume,nav .nav-portfolio,nav .nav-contact{background:url(../images/sprite-nav-icons.png) no-repeat;}
	nav .nav-home{background-position:8px -5px;}
	.home .active,nav .nav-home:hover{background-position:8px -80px;}
	nav .nav-resume{background-position:-68px -5px;}
	.resume .nav-resume,nav .nav-resume:hover{background-position:-68px -80px;}
	nav .nav-portfolio{background-position:-155px -5px;}
	.portfolio .nav-portfolio,.portfoliodetail .nav-portfolio,nav .nav-portfolio:hover{background-position:-155px -80px;}
	nav .nav-contact{background-position:-256px -5px;}
	.contact .nav-contact,nav .nav-contact:hover{background-position:-256px -80px;}
	.home .nav-home a,.resume .nav-resume a,.contact .nav-contact a,.portfolio .nav-portfolio a,.portfoliodetail .nav-portfolio a{text-decoration:underline;}

	/******************
	*** CONTENT
	***/

	#content{background: #f7e682ed;overflow:hidden;line-height:45px;padding:40px;padding-bottom:34px;-webkit-border-radius:0 0 0 60px;-moz-border-radius:0 0 0 60px;-o-border-radius:0 0 0 60px;border-radius:0 0 0 60px;-webkit-box-shadow:0 0 5px #999;-moz-box-shadow:0 0 5px #999;-o-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}
	#content p{font-size: 1.5em;margin:0;}
	.table{width:50%}
	.table td{border:1px solid #FFF; padding:2px 8px;}
	.table .td-title{color:#999999; width:80px; background:#f4f4f4;}

	/*
	 * Home
	 */

	.list { text-align: left;}

	/*
	 * Resume
	 */

	#all-resume{border-bottom: 0px solid #eee;padding-bottom:20px;overflow:hidden;padding: 40px;}
	#sec-resume ul li,#sec-resume ul{list-style:none; margin:0; padding:0;}
	#sec-resume .fl,#sec-resume .fr{width:46%;}
	#sec-resume ul li span{color:#999;}
	#sec-resume #education ul li,#sec-resume #testimonials ul li{margin-bottom:20px;}
	#sec-resume #education span,#sec-resume #employment span{background:url(../images/bg-arrow.png) no-repeat 0 4px; padding-left:16px;}
	#sec-resume #design-skills{margin-bottom:40px;}
	#sec-resume #employment{/* border-bottom:1px solid #eee; *//* margin-bottom:20px; */padding-bottom:20px;}
	#sec-resume #employment h2,#sec-resume #design-skills h2{margin-top:10px;}
	#sec-resume #design-skills ul li,#sec-resume #programming-skills ul li{margin-bottom:10px;}
	#sec-resume #testimonials .aspas{font-size:90px; padding:23px 10px 0 0}
	#sec-resume #testimonials .aspas, #sec-resume #testimonials img{float:left;}
	#sec-resume #testimonials p{margin-left:100px;}
	#sec-resume #testimonials span{font-style:italic;}
	.stars{float:right;}
	.star-100,.star-50,.star-0{padding:3px 13px 2px 10px;}
	.star-100{background:url(../images/sprite-stars.png) 0 0;}
	.star-50{background:url(../images/sprite-stars.png) -27px 0;}
	.star-0{background:url(../images/sprite-stars.png) -52px 0;}

	/*
	 * Portfolio
	 */

	#sec-portfolio ul.portfolio-slide li,#sec-portfolio ul.portfolio-slide{list-style:none; margin:0; padding: 0;}
	#sec-portfolio ul.portfolio-slide li{float: left; margin-bottom:20px; margin-right:8px;}
	.marginright-zero{margin-right:0 !important}
	#sec-portfolio ul.portfolio-slide li figure,.portfoliodetail #content ul.portfolio-slide li figure{padding:4px; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; border:1px solid #ddd;}
	#sec-portfolio ul.portfolio-slide li a,.portfoliodetail #content ul.portfolio-slide li a{margin-left:5px;}
	#sec-portfolio ul.portfolio-slide li figure a,.portfoliodetail #content ul.portfolio-slide li figure a{margin-left:0 !important;}
	#sec-portfolio .portfolio-slide li figure{position:relative;}
	#sec-portfolio #choose{margin-bottom:20px;}
	#portfoliodetail-text{width:380px;}
	#portfoliodetail-text ul li{list-style-image:url(../images/bg-arrow.png); margin:0; padding:0;}
	#portfoliodetail-text p{margin:10px 0;}
	.portfoliodetail .flexslider-detail{width:376px;}
	.portfoliodetail .button{margin-top:20px; margin-left:5px;}
	.portfoliodetail .link-site{background:url(../images/bg-link.png) 0 2px no-repeat; padding-left:28px;}

	.show-portfolio-text:hover span{background:#000 url(../images/portfolio-text-icon.png) no-repeat center;}
	.show-portfolio-img:hover span{background:#000 url(../images/portfolio-img-icon.png) no-repeat center;}
	.show-portfolio-link:hover span{background:#000 url(../images/portfolio-link-icon.png) no-repeat center;}
	.show-portfolio-link:hover span,.show-portfolio-img:hover span,.show-portfolio-text:hover span{opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=5); width:180px; height:120px; position:absolute; left:4px; top:4px;}
	 
	/*
	 * Contact
	 */

	#sec-contact .fl,#sec-contact .fr{width:48%;}
	#sec-contact span{color:#999;}
	#sec-contact .contact-info h2,#sec-contact .contact-me h2{margin-top:10px;}

	ul li a span.social-facebook{padding:0; margin:0; margin-top: 10px; margin-right:5px; height:24px; width:24px; float:left; list-style:none; text-indent:-999px; overflow:hidden;}
	a span.social-facebook {display:block; height:24px;}
	span.social-facebook{background:url(../images/sprite-social.png) -87px 0;}

	#content{ max-width: 768px; width: 768px;}


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

	/* Tablet Portrait Size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		header #title h1 {
	    padding: 0;
	    font-size: 60px;
	}
		#all{width:auto;}
		#content{width:500px;}
		#change-color,#change-pattern{display:none;}
		#header #subtitle{/* width:150px; */}

		.fl, .fr {
			float: none;
			margin-left:auto;
			margin-right:auto;
			width:300px;

		}


		/* Portfolio  */
		#sec-portfolio ul.portfolio-slide li{width:24%;}
		#portfoliodetail-text{width:270px;}
	}

	

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 767px) {

		#all{width:auto;}
		#content {font-size: 17px; width:auto; line-height: 1.6em; }
		
		header{/* height:239px; *//* position: relative; */}
		header #myphoto{left:69px !important; top:0;}
		header #title h1 {font-size: 30px;margin: 0px 10px;}
		header #subtitle {font-size: 20px}
		
		header #myphoto{left:10px;}
		nav .nav-global-a{font-size:16px;padding:40px 16px 16px 16px}
		nav .nav-home{background-position:2px -5px;}
		.home .nav-home,nav .nav-home:hover{background-position:2px -80px;}
		nav .nav-resume{background-position:-73px -5px;}
		.resume .nav-resume,nav .nav-resume:hover{background-position:-73px -80px;}
		nav .nav-portfolio{background-position:-163px -5px;}
		.portfolio .nav-portfolio,.portfoliodetail .nav-portfolio,nav .nav-portfolio:hover{background-position:-163px -80px;}
		nav .nav-contact{background-position:-263px -5px;}
		.contact .nav-contact,nav .nav-contact:hover{background-position:-263px -80px;}

		#change-color,#change-pattern{display:none;}
		
		/* Colors */
		.blue nav .nav-global-li,.orange nav .nav-global-li,.red nav .nav-global-li,.green nav .nav-global-li{margin-top:90px;}
		.blue nav #nav-global-ul,.orange nav #nav-global-ul,.red nav #nav-global-ul,.green nav #nav-global-ul{margin-left:5px;}
		.blue nav,.orange nav,.green nav,.red nav{height:160px; background-repeat:repeat-x; padding-left:0; overflow:hidden; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; -webkit-box-shadow:0 0 5px #777; -moz-box-shadow:0 0 5px #777; -o-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777;}
		
		/* Content */
		#content{ padding:24px;/* padding-top:130px; */-webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0;-webkit-box-shadow:0 0 5px #999;-moz-box-shadow:0 0 5px #999;-o-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}
		#content p, ul, ol {font-size: 1em;}
		.table{float:none; width:100%;}
		
		/* Resume */
		.fl, .fr {
			float: none;
			margin-left:auto;
			margin-right:auto;
			width:300px;

		}

		/* Portfolio */	
		#sec-portfolio ul li{margin-right:0;}
		#sec-portfolio ul li a{margin-left:0;}
		#sec-portfolio {text-align:center;}
		#sec-portfolio .slides{margin-left:30px;}
		#portfoliodetail-text{width:90%; margin:20px auto;}

		/* Contact */
		#sec-contact .fl,#sec-contact .fr{width:100%;}
		#sec-contact .contact-me h2{margin-top:40px;}

		.list p{margin: 31px 0 0px 0; text-align: left;}
		
	}

	/* ==|== print styles =======================================================
	   Print styles.
	   Inlined to avoid required HTTP connection: h5bp.com/r
	   ========================================================================== */

	@media print {
	  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
	  a, a:visited { text-decoration: underline; }
	  a[href]:after { content: " (" attr(href) ")"; }
	  abbr[title]:after { content: " (" attr(title) ")"; }
	  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
	  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	  thead { display: table-header-group; } 
	  tr, img { page-break-inside: avoid; }
	  img { max-width: 100% !important; }
	  @page { margin: 0.5cm; }
	  p, h2, h3 { orphans: 3; widows: 3; }
	  h2, h3 { page-break-after: avoid; }
	}