/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Responsive Style Sheet - Defines base styles for mobile devices
 */


/* Responsive Utility Classes
----------------------------------------------------------------------------------------------------*/

.hidden-desktop { display: none; }

/* Only Phones */
@media (max-width: 767px) {
	.hidden-desktop { display: block; }
	.hidden-phone { display: none; }
}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {
	.hidden-desktop { display: block; }
	.hidden-tablet { display: none; }
}


/* Responsive Content
----------------------------------------------------------------------------------------------------*/

#header-responsive { display: none; }
.menu_container { display: none; }

/* Layout Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

	#banner { display: none; }

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

	/* Layout */
	#maininner,
	#sidebar-a,
	#sidebar-b {
		width: 100%;
		left: auto;
		right: auto;
	}

}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

	/* Layout */
	.width16,
	.width20,
	.width25,
	.width40,
	.width60,
	.width75,
	.width80 { width: 50%; }

	.width50 .width50 { width: 100%; }

	.sidebars-1 #sidebar-a .width100,
	.sidebars-1 #sidebar-b .width100 { width: 50%; }

	#sidebar-a .width100:nth-child(odd):last-child,
	#sidebar-b .width100:nth-child(odd):last-child,
	.width20:nth-child(odd):last-child { width: 100%; }

	.sidebars-2 #sidebar-a,
	.sidebars-2 #sidebar-b { width: 50%; }

	.sidebars-2.sidebar-a-right #sidebar-a,
	.sidebars-2.sidebar-b-right #sidebar-b { float: right; }

	.grid-gutter > .grid-box:nth-child(n+3) > * { margin-top: 30px; }

	/* Tools */
	.width50 .align-left,
	.width50 .alignleft,
	.width50 .align-right,
	.width50 .alignright {
		margin: 0 auto 15px auto;
		float: none;
	}

}

/* Only Phones */
@media (max-width: 767px) {

	/* Header */
	#header-responsive { display: block; }

	#header-responsive .logo,
	#header-responsive .searchbox {
		display: inline-block;
		width: 45%;
		vertical-align: middle;
	}

	#header-responsive .logo { margin-right: 10%; }

	#header-responsive .searchbox {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Menu */
	.menu-responsive {
		width: 100%;
		font-size: 14px;
	}


}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {

	/* Layout */
	.width33 { width: 50%; }
	.width33:nth-child(odd):last-child { width: 100%; }

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

	/* Base */
	body { word-wrap: break-word; }

	/* Layout */
	.width16,
	.width20,
	.width25,
	.width33,
	.width40,
	.width50,
	.width60,
	.width66,
	.width75,
	.width80 { width: 100%; }

	.grid-gutter > .grid-box:nth-child(n+2) > * { margin-top: 30px; }

	/* Tools */
	.align-left,
	.alignleft,
	.align-right,
	.alignright {
		margin: 0 auto 15px auto;
		float: none;
	}

}


/* Responsive Start
----------------------------------------------------------------------------------------------------*/

/* Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

	[data-tip]:hover:before,
	[data-tip]:hover:after { display: none; }

}

/* Only Phones and Tablets */
@media (max-width: 1024px) {}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

	.wrapper { padding: 0px 15px 15px 15px; }

	h2 { font-size: 25px; }

	#logo { position: absolute; top: 10px; left: 0; }
	.logo-img { background-position: 0 0; background-repeat: no-repeat; }

	#headerbar { padding: 20px 0 30px 0; }
	#headerbar .module { width: 70%; max-width: 70%; }

	#skills-design,
	#skills-code { margin-top: 50px; }

	[data-tip]:hover:before,
	[data-tip]:hover:after { display: none; }

}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {

	#bottom-a .grid-box:first-child .module { margin-right: 20px; }
	#bottom-a .grid-box:last-child .module { margin-left: 20px; }

	#block-footer { padding: 20px 0; }

}

@media (max-width: 890px) {

	#skills-design .arrow { right: 5px; padding-left: 7px; }
	#skills-code .arrow { left: 5px; padding-right: 7px; }

	.arrow { top: 30px; min-width: 60px; min-height: 30px; }
	.arrow h4 { line-height: 32px; font-size: 18px; }

	.skills li { margin-right: 2px; }

}

/* Only Tablets (Portrait) and Phones */
@media (max-width: 959px) {

	#copyright { margin-left: 0; }
	#totop-scroller { display: none; }
	#copyright span { font-size: 14px; }

}

/* Only Phones */
@media (max-width: 767px) {

	/* Base */
	hgroup { text-align: center; }

	h1 { font-size: 30px; line-height: 30px; margin: 15px 0 5px 0; }
	h2 { font-size: 16px; line-height: 16px; }

	/* Layout */
	#logo { top: 5px; }

	section { padding: 10px 0; }

	#headerbar { min-height: 100%; padding: 10px 0 15px 0; }

	#top-b { margin-top: 20px; }

	#top-c { padding: 25px 0 20px 0; }

	#bottom-a { padding: 30px 0 10px 0; }

	#block-footer { padding: 15px 0 10px 0; }

	/* Modules */
	.width100 .width50 { width: 100%; }

	#bottom-a .width50 { width: 100%; }
	#bottom-a .grid-box:first-child .module { margin-right: 0; }
	#bottom-a .grid-box:last-child .module { margin-top: 25px; margin-left: 0; }
	#bottom-a .grid-box:last-child .module-title { display: block; margin-bottom: 20px; }

	#footer .module { width: 100%; }

	/* Custom */
	#options span { display: none; }

	.color-switch { margin-top: 6px; }

	#skills-design { margin-top: 10px; }
	#skills-code ul,
	#skills-design ul { width: 100%; }

	.arrow { display: none; }

	.skills li {
		display: block;
		width: 100%;
		height: 24px;
		padding: 4px;
		margin-bottom: 8px;
		border-radius: 3px;
		background: rgba(0,0,0,0.2);
		box-shadow: inset 0 1px 0 rgba(0,0,0,0.5),
					inset 0 0 2px rgba(0,0,0,0.4),
					0 1px 0 rgba(255,255,255,0.08);
	}

	.skills li > span {
		display: block;
		height: 98%;
		padding: 2px 0 2px 4px;
		border-radius: 1px;
		background: rgba(255,255,255,0.4);
		background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(170,170,170,0.4) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(170,170,170,0.4) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(170,170,170,0.4) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(170,170,170,0.4) 100%);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
					0 1px 0 rgba(0,0,0,0.3);
		line-height: 12px;
		font-size: 12px;
		color: rgba(255,255,255,1);
		text-shadow: 0 -1px rgba(0,0,0,0.5);
		text-align: left;
	}

	.skills li > span { background-position: 0 0!important; }

	.skills.design li:nth-child(1) > span { width: 80%; }
	.skills.design li:nth-child(2) > span { width: 90%; }
	.skills.design li:nth-child(3) > span { width: 45%; }
	.skills.code li:nth-child(1) > span { width: 100%; }
	.skills.code li:nth-child(2) > span { width: 90%; }
	.skills.code li:nth-child(3) > span { width: 35%; }

	#stats li { width: 100%; float: none; }
	#stats li div { margin-right: 0; margin-left: 0; line-height: 30px; }
	#stats li div span { min-width: 55px; }

	#meta { margin-top: 10px; float: left; }

}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
	#fake_nav .jumper { display: none; }
	.menu_container { display: block; }
}

/* VJ Modified Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 640px) {
	#nav { display: none;}
	#nav_space { display: none;}
}
/* Only Phones (Portrait) */
@media (max-width: 479px) {
    #nav h2 { display: none;}
	#fake_nav .jumper { display: none; }
	.menu_container { display: block; }
	#nav { display: none;}
	#nav_space { display: none;}
	
	#top-c .module-title { font-size: 24px; }

	#skills-code,
	#skills-code ul { float: left; }

	#copyright ul li { margin-right: 7px; padding-right:9px;  }
	#copyright span { font-size: 12.25px; }
	#copyright ul li a { font-size: 15px; }

	.wk-twitter-single .meta { display: none; }


}

/* Only Retina Displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {

	.color-switch li > a {
		background: url(../images/color_switch_2x.png) 0 0 no-repeat;
		background-size: 100%;
	}

	#totop-scroller {
		background-image: url(../images/logo_footer.png);
		opacity: 0.2;
	}

	#meta li a {
		height: 32px;
		width: 32px;
		background-image: url(../images/icons_logos.png);
		opacity: 0.2;
	}

	#meta li a:hover { opacity: 1; }
	#meta li:nth-child(3) a { height: 32px; }
	#meta li:nth-child(4) a { height: 32px; }
	#meta li:nth-child(6) a { width: 32px; }

}