pen/assets/css/pen-header.css

#pen_header {
	float: left;
	left: 0;
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 50000;
}
#pen_header .pen_logo .customize-partial-edit-shortcut button {
	left: 0 !important;
}
#pen_header .pen_header_inner {
	background: -ms-linear-gradient(325deg, #ffffff 0%, #dddddd 100%);
	background: linear-gradient(125deg, #ffffff 0%, #dddddd 100%);
	float: left;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 100;
}
body.pen_drop_shadow #pen_header .pen_header_inner {
	box-shadow: 0 0 15px rgba(0,0,0,0.2), 2px 2px 7px rgba(0,0,0,0.3);
}
body.pen_round_corners.pen_width_boxed #pen_header,
body.pen_round_corners.pen_width_boxed #pen_header.pen_navigation_hide .pen_header_inner {
	border-radius: 0 0 5px 5px;
}
body.pen_round_corners.pen_width_boxed #pen_header.pen_navigation_hide.pen_search_show_toolbar .pen_header_inner {
	border-radius: 0;
}
#pen_header .pen_header_inner .pen_header_main {
	float: left;
	min-height: 50px;
	position: relative;
	width: 100%;
	z-index: 200;
}
body.pen_drop_shadow #pen_header .pen_header_inner .pen_header_main {
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
}
#pen_header .pen_header_main a {
	color: #555;
}
#pen_header h1 {
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	white-space: nowrap;
}
#pen_header h1 a {
	margin: 0;
	padding: 0;
	text-decoration: none;
}
#pen_header h1 a:focus,
#pen_header h1 a:hover,
#pen_header h1 a:active {
	outline: none;
}
body.pen_header_logo_size_height #pen_header h1 .custom-logo-link img {
	max-height: 125px;
	width: auto;
}
body.pen_header_logo_size_width #pen_header h1 .custom-logo-link img {
	height: auto;
	max-width: 125px;
}
#pen_header h1 a .site-title,
#pen_header h1 a .site-description {
	line-height: 1;
	margin: 0;
	padding: 0;
}
#pen_header h1 a .site-description:not(:empty) {
	margin: 0 0 1em;
}
body.pen_header_alignment_center #pen_header h1 a .site-description {
	margin-bottom: 0 !important;
}
#pen_header h1 a .site-title {
	font-family: "roboto_slabbold", Arial, Helvetica, Sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
	padding: 0.5em 0;
}
body.pen_header_sticky #pen_header h1 a .site-title,
body.pen_header_sticky #pen_header h1 a .site-description,
body.pen_header_sticky #pen_header .pen_header_main .pen_phone a {
	transition: font-size .3s, padding .3s;
}
body.pen_header_sticky #pen_header.pen_header_sticked h1 a.pen_has_title .site-description {
	padding: 0.25em 0 0;
}
#pen_header h1 a .site-description {
	float: left;
	font-size: 0.571em;
	font-weight: normal;
	margin: 0;
	padding: 0;
	width: 100%;
}
#pen_header h1 .custom-logo-link {
	margin: 0;
}
body.pen_header_logo_size_height #pen_header h1 .custom-logo-link img {
	max-height: 125px;
	width: auto;
}
body.pen_header_logo_size_width #pen_header h1 .custom-logo-link img {
	height: auto;
	max-width: 125px;
}
body.pen_header_sticky #pen_header h1 .custom-logo-link img {
	transition: height .3s, max-height .3s, max-width .3s, width .3s;
}
body.pen_header_sticky.pen_header_logo_size_height #pen_header.pen_header_sticked h1 .custom-logo-link img {
	max-height: 64px;
	width: auto;
}
body.pen_header_sticky.pen_header_logo_size_width #pen_header.pen_header_sticked h1 .custom-logo-link img {
	height: auto;
	max-width: 64px;
}
#pen_header .pen_phone {
	font-family: "roboto_slabregular", Arial, Helvetica, Sans-serif;
	font-size: 1.5em;
	line-height: 1;
}
#pen_header .pen_header_main .pen_phone a {
	color: #777;
	text-decoration: none;
}
#pen_header .pen_header_main .pen_phone a:focus,
#pen_header .pen_header_main .pen_phone a:hover,
#pen_header .pen_header_main .pen_phone a:active {
	color: #333;
	text-decoration: none;
}
body.pen_header_sticky #pen_header.pen_header_sticked h1 a .site-title,
body.pen_header_sticky #pen_header.pen_header_sticked .pen_header_main .pen_phone a {
	font-size: 1em;
}
#pen_header .pen_social_networks ul,
#pen_header .pen_social_networks li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#pen_header .pen_social_networks a {
	display: inline-block;
	font-weight: normal;
	padding: 0.25em;
	text-decoration: none;
	transition: color .3s;
}
#pen_header .pen_social_networks a:focus,
#pen_header .pen_social_networks a:hover,
#pen_header .pen_social_networks a:active {
	border: 0 none;
	color: #333;
	outline: 0;
	text-decoration: none;
}
#pen_header .pen_social_networks a:before {
	font-family: "FontAwesome";
	font-weight: normal;
}
#pen_header .pen_social_networks li {
	display: inline-block;
	font-size: 1.286em;
	line-height: 1;
	margin: 0;
}
#pen_header .pen_social_networks li.pen_twitter a:before {
	content: "\f081";
}
#pen_header .pen_social_networks li.pen_facebook a:before {
	content: "\f082";
}
#pen_header .pen_social_networks li.pen_instagram a:before {
	content: "\f16d";
}
#pen_header .pen_social_networks li.pen_pinterest a:before {
	content: "\f0d3";
}
#pen_header .pen_social_networks li.pen_linkedin a:before {
	content: "\f08c";
}
#pen_header .pen_social_networks li.pen_bitbucket a:before {
	content: "\f172";
}
#pen_header .pen_social_networks li.pen_flickr a:before {
	content: "\f16e";
}
#pen_header .pen_social_networks li.pen_github a:before {
	content: "\f1d2";
}
#pen_header .pen_social_networks li.pen_slack a:before {
	content: "\f198";
}
#pen_header .pen_social_networks li.pen_skype a:before {
	content: "\f17e";
}
#pen_header .pen_social_networks li.pen_vk a:before {
	content: "\f189";
}
#pen_header .pen_social_networks li.pen_telegram a:before {
	content: "\f2c6";
}
#pen_header .pen_social_networks li.pen_whatsapp a:before {
	content: "\f232";
}
#pen_header .pen_social_networks li.pen_rss a:before {
	content: "\f143";
}
#pen_header .pen_social_networks li.pen_email a:before {
	content: "\f199";
}
#pen_header .pen_header_main .search-form {
	position: relative;
}
#pen_header .pen_header_main .search-form .search-field {
	background: rgba(255,255,255,0.9);
	border: 0 none;
	font-size: 0.857em;
	line-height: 1;
	margin-left: -1px !important;
	padding: 0.75em 37% 0.75em 1em;
	transition: box-shadow .2s;
	width: 100%;
}
body.pen_drop_shadow #pen_header .pen_header_main .search-form .search-field {
	box-shadow: 2px 2px 4px rgba(0,0,0,0.25) inset;
}
body.pen_round_corners #pen_header .pen_header_main .search-form .search-field {
	border-radius: 50px;
}
#pen_header .pen_header_main .search-form .search-field:focus,
#pen_header .pen_header_main .search-form .search-field:active {
	outline: none !important;
	text-decoration: none;
}
body.pen_drop_shadow #pen_header .pen_header_main .search-form .search-field:focus,
body.pen_drop_shadow #pen_header .pen_header_main .search-form .search-field:active {
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset, 0 0 7px #0087cc;
}
#pen_header .pen_header_main .search-form .search-submit {
	background: #00a9ff;
	background: -ms-linear-gradient(top, #00a9ff 0%, #093a89 100%);
	background: linear-gradient(to bottom, #00a9ff 0%, #093a89 100%);
	border: 0 none;
	color: #fff;
	font-weight: bold;
	height: 100%;
	margin-right: -1px !important;
	min-height: 100%;
	padding: 0.75em 0;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: 35%;
	z-index: 1000;
}
body.pen_drop_shadow #pen_header .pen_header_main .search-form .search-submit {
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1) inset, -1px -1px 1px rgba(0,0,0,0.2) inset;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
body.pen_round_corners #pen_header .pen_header_main .search-form .search-submit {
	border-radius: 0 50px 50px 0;
}
#pen_header .pen_header_main .search-form .search-submit:active {
	background: #093a89;
	text-decoration: none;
}
#pen_header .pen_header_main .search-form .search-submit:focus,
#pen_header .pen_header_main .search-form .search-submit:active {
	outline: 0 !important;
}
body.pen_header_alignment_center #pen_header_primary,
body.pen_header_alignment_center #pen_header_secondary {
	float: left;
	width: 100%;
}
@media only screen and (min-width:728px) {
	#pen_header .pen_header_main .pen_container {
		min-height: 55px;
		position: relative;
	}
	#pen_header h1 a {
		float: left;
	}
	#pen_header h1 a.custom-logo-link {
		float: none;
	}
	body.pen_header_alignment_left #pen_header.pen_has_logo h1 a#site-title,
	body.pen_header_alignment_right #pen_header.pen_has_logo h1 a#site-title,
	body.pen_header_alignment_center #pen_header.pen_has_logo h1 a#site-title {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	body.pen_header_alignment_left #pen_header.pen_has_logo h1 a#site-title,
	body.pen_header_alignment_center #pen_header.pen_has_logo h1 a#site-title {
		left: 0;
		right: auto;
	}
	body.pen_header_alignment_center #pen_header .pen_header_main {
		text-align: center;
	}
	body.pen_header_alignment_right #pen_header h1 {
		float: right;
		margin-left: 0;
		margin-right: 0;
	}
	body.pen_header_alignment_center #pen_header h1 {
		display: inline-block;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	body.pen_header_alignment_right #pen_header h1 a#site-title {
		left: auto;
		right: 0;
	}
	#pen_header.pen_has_logo h1 a#site-title {
		padding-left: 145px;
	}
	body.pen_header_sticky #pen_header.pen_has_logo h1 a#site-title {
		transition: padding .3s;
	}
	body.pen_header_sticky #pen_header.pen_header_sticked.pen_has_logo h1 a#site-title {
		padding-left: 84px;
	}
	body.pen_header_alignment_right #pen_header.pen_has_logo h1 a#site-title {
		padding-left: 0;
		padding-right: 145px;
	}
	body.pen_header_sticky #pen_header.pen_header_sticked.pen_has_logo h1 a#site-title {
		padding-right: 84px;
	}
	#pen_header h1 a .site-title,
	#pen_header h1 a .site-description {
		clear: both;
		float: left;
	}
	#pen_header h1 .custom-logo-link img {
		float: left;
		margin: 0.5em 0;
	}
	body.pen_header_alignment_right #pen_header h1 .custom-logo-link img {
		float: right;
	}
	#pen_header .pen_header_wrap {
		padding: 1em 0;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	body.pen_header_alignment_right #pen_header .pen_header_wrap {
		left: 0;
		right: auto;
	}
	body.pen_header_alignment_center #pen_header h1 {
		margin-bottom: 0;
	}
	body.pen_header_alignment_center #pen_header .pen_header_wrap {
		float: left;
		padding-top: 0;
		position: static;
		right: auto;
		text-align: center;
		top: auto;
		transform: none;
		width: 100%;
	}
	#pen_header .pen_phone,
	#pen_header .pen_social_networks,
	#pen_header .pen_header_main .search-form {
		float: left;
		position: relative;
	}
	#pen_header .pen_phone {
		margin: 7px 1.5em 0 0;
	}
	#pen_header .pen_social_networks {
		margin: 2px 2em 0 0;
	}
	#pen_header .pen_header_main .search-form {
		line-height: 1;
		width: 300px;
	}
	#pen_header_primary,
	#pen_header_secondary {
		float: left;
		margin: 0 1em 0 0;
	}
	#pen_header_secondary {
		margin: 0 0 0 1em;
	}
	body.pen_header_alignment_center #pen_header_primary,
	body.pen_header_alignment_center #pen_header_secondary,
	body.pen_header_alignment_center #pen_header .pen_phone,
	body.pen_header_alignment_center #pen_header .pen_header_main .search-form {
		margin: 1em 0 0;
		width: 100%;
	}
	body.pen_header_alignment_center #pen_header.pen_phone_hide.pen_connect_hide .pen_header_main .search-form {
		margin: 0;
	}
	body.pen_header_alignment_center #pen_header .pen_phone {
		margin-top: 0;
	}
	body.pen_header_alignment_center #pen_header .pen_header_main .search-form {
		display: inline-block;
		float: none !important;
		width: auto !important;
	}
	body.pen_header_alignment_center #pen_header .pen_header_main .search-form .search-field {
		min-width: 350px;
	}
	body.pen_header_alignment_center #pen_header .pen_social_networks {
		margin: 0 0 1em;
		width: 100%;
	}
}
@media only screen and (min-width:728px) and (max-width:1024px) {
	#pen_header h1 {
		font-size: 1.5em;
	}
	#pen_header .pen_header_wrap {
		right: 1em;
	}
	#pen_header .pen_header_wrap > div {
		clear: both;
	}
}
@media only screen and (max-width:728px) {
	#pen_header{
		display:none;
	}
	#pen_header .pen_header_main {
		padding: 1em;
	}
	#pen_header h1 {
		margin: 0;
		text-align: center;
		white-space: normal;
		width: 100%;
	}
	#pen_header h1 a {
		width: 100%;
	}
	#pen_header h1 img {
		float: none;
	}
	#pen_header h1 a#site-title,
	#pen_header h1 a .site-title,
	#pen_header h1 a .site-description,
	#pen_header .pen_phone,
	#pen_header .pen_social_networks,
	#pen_header .search-form {
		float: left;
		text-align: center;
		width: 100%;
	}
	#pen_header h1 a .site-title {
		letter-spacing: 0;
	}
	#pen_header h1 a .site-description {
		line-height: 1.5;
		margin-bottom: 0 !important;
	}
	#pen_header .search-form {
		margin: 1em 0;
	}
	#pen_header .pen_phone {
		font-size: 2em;
		padding: 0.5em 0;
	}
	#pen_header .pen_social_networks a {
		padding: 0.5em;
	}
	#pen_header .pen_social_networks a:before {
		font-size: 2em;
	}
}
@media only print {
	#pen_header,
	#pen_header .pen_header_wrap,
	#pen_header_primary,
	#pen_header_secondary,
	#content article {
		position: static !important;
	}
	#pen_header .pen_header_wrap,
	#content article {
		float: left;
		width: 100%;
	}
	#pen_header .pen_social_networks,
	#pen_header .search-form,
	#pen_navigation {
		display: none;
	}
	#content {
		min-height: none !important;
	}
}