/*
Theme name: Skinner Law Firm
Description: Custom Theme
*/

/******* Skinner Law Firm WordPress CSS *******/

/* Common elements styling */
.post .entry h1 { font-size: 20px; line-height: 30px}
.post .entry h2 { font-size: 18px; line-height: 27px}
.post .entry h3 { font-size: 16px; line-height: 24px}
.post .entry h4 { font-size: 14px; line-height: 21px}
.post .entry h5 { font-size: 12px; line-height: 18px}
.post .entry h6 { font-size: 10px; line-height: 15px}

.post .entry ul { margin-left: 25px; }
.post .entry ol { margin-left: 25px; }
.post .entry a img { border: 0 }

p img { padding: 0;	max-width: 100%; }
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { margin: 2px 0 2px 7px; display: inline; }
img.alignleft { margin: 2px 7px 2px 0; display: inline; }
.alignright { float: right; display: inline; }
.alignleft { float: left; display: inline; }
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.meetthefirm-image { margin: 2px 30px 30px 0; }

/* Calendar widget */
#wp-calendar { empty-cells: show; margin: 10px auto 0; }
#wp-calendar #next a { padding-right: 10px; text-align: right; }
#wp-calendar #prev a { padding-left: 10px; text-align: left; }
#wp-calendar a { display: block; }
#wp-calendar caption { text-align: center; width: 100%; }
#wp-calendar td { padding: 3px 0; text-align: center; }
.wp-caption { border: 1px solid #ddd; text-align: center; padding-top: 4px; margin: 10px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}

/* Big images in rich text editor should not break page layout */
.post .entry { overflow: hidden; }

/******* /Skinner Law Firm WordPress CSS *******/

/* ================================================================ *\
	#Reset
\* ================================================================ */

* { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ================================================================ *\
	#Base
\* ================================================================ */

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

html,
body { height: 100%; }

html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { background: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; line-height: 1.29; color: #636365; -webkit-font-smoothing:antialiased; }

a { text-decoration: none; color: #8d2737; }
a:hover { text-decoration: underline; }

h1 { color: #8d2737; font-size: 36px; font-family: 'Playfair Display', serif; }
h2 { color: #8d2737; font-size: 14px; text-transform: uppercase; font-weight: normal; line-height: 2.2; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; font-weight: normal; }
body.page-with-map h1 { color: #045791; font-size: 21px; }

img { border: 0; vertical-align: middle; }
strong { font-weight: bold; }

button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing:antialiased; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

button { overflow: visible; }
textarea { overflow: auto; resize: none; }

table { border-collapse: collapse; border-spacing: 0; }
th,
td { padding: 0; }

/* ================================================================ *\
	#Helpers
\* ================================================================ */

.alignleft { float: left; }
.alignright { float: right; }
.hidden { display: none; visibility: hidden; }

.clearfix:before,
.clearfix:after { display: table; content: ' '; }
.clearfix:after { clear: both; }


/* ------------------------------------------------------------ *\
	Containers
\* ------------------------------------------------------------ */

.wrapper { position: relative; min-height: 100%; }
.shell { padding: 0 30px; position: relative; }
.content { float: left; width: 430px; height: 100%; padding-top: 175px; }
.map { float: left; width: calc(100% - 430px); position: relative; }


/* ------------------------------------------------------------ *\
	Socials
\* ------------------------------------------------------------ */
.socials { margin-bottom: 50px; }
.section .socials ul,
.socials ul { list-style: none outside none; padding: 0; }
.socials ul li { display: inline-block; margin-right: 25px; }
.socials ul li a { display: block; }


/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */
.header { position: fixed; top: 30px; left: 0; width: 430px; background: #fff; z-index: 1; }
.header.fixed { top: 0; }
.logo { background: url(images/logo.png) no-repeat 0 0; width: 340px; height: 39px; background-size: contain; margin: 30px 0; display: block; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.header.fixed .logo { margin: 10px 0; }

.header .header-socials { position: absolute; top: -30px; right: 0; padding: 10px 10px 5px 10px; font-size: 23px; line-height: 1;
	-webkit-transition: all 0.3s;
		 -o-transition: all 0.3s;
			transition: all 0.3s;
}
.header .header-socials a { color: #626466; }
.header .header-socials a { color: #959697; }
.header .header-socials .socials { margin-bottom: 0; }
.header .header-socials .socials ul li { margin-right: 5px; }
.header .header-socials .socials ul li:last-child { margin-right: 0; }

.header.fixed .header-socials { top: 0; padding: 4px; font-size: 18px; }
.header .header-socials .socials ul li { margin-right: 2px; }
.header .header-socials .socials ul li:last-child { margin-right: 0; }


/* ------------------------------------------------------------ *\
	Nav
\* ------------------------------------------------------------ */
.nav { background: #8d2838; }
.nav ul { list-style: none outside none; text-align: justify; overflow: hidden; min-height: 45px; overflow: hidden; line-height: 0; font-size: 0; }
.nav ul:after { display: inline-block; content: ''; width: 100%; height: 0; }
.nav li { display: inline-block; line-height: 1.29; }
.nav a { display: block; color: #fff; font-weight: 600; font-size: 15px; text-transform: uppercase; padding: 14px 15px 9px; }
.nav a {
	-webkit-transition: opacity .3s;
	     -o-transition: opacity .3s;
	        transition: opacity .3s;
}
.nav .current-menu-item a,
.nav a:hover { opacity: .75; text-decoration: none; }


/* ------------------------------------------------------------ *\
	Sections
\* ------------------------------------------------------------ */

.sections-wrapper { padding-bottom: 100px; }

.section { padding: 28px 0 18px; border-bottom: 1px solid #045892; }
.sections-wrapper .section:last-of-type { position: relative; margin-bottom: 50px; padding-bottom: 34px; }
.sections-wrapper .section:last-of-type:after { position: absolute; bottom: 11px; left: 0; width: 100%; height: 1px; background: #045892; content: ''; }

.section h1 { margin-bottom: 10px; text-transform: uppercase; line-height: 2; }
.section h2 { margin-bottom: -5px; }
.section h4 { color: #045892; font-family: 'Playfair Display', serif; font-style: italic; line-height: 1.35; font-size: 21px; font-weight: normal; }
.section ul { padding-left: 15px; list-style-position: inside; }
.section h4,
.section ul,
.section ol,
.section p { margin-bottom: 18px; }
.section a { color: #045892; font-weight: bold; }
.section strong { }

/*  Section Mission  */

/*  Section Scroll  */
.section-scroll { position: fixed; bottom: 0; left: 0; width: 430px; height: 250px; background: url(images/gradient.png) no-repeat center bottom; background-size: 100% 100%; }
.section-scroll .shell { height: 100%; }
.section-scroll .outro { color: #cbc9c9; font-size: 8px; position: absolute; bottom: 10px; left: 30px; right: 30px; }
.section-scroll .link-down { position: absolute; bottom: 100px; left: 50%; background: url(images/arrow-down.png) no-repeat 0 0; width: 35px; height: 19px; background-size: 35px 19px; }
.section-scroll .link-down {
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.blog .section-scroll .link-down { display: none; }

/* ------------------------------------------------------------ *\
	Section Default - this class is added to all sections.
	It is used for holding the button
\* ------------------------------------------------------------ */

.section-default { position: relative; }
.section-default .post-edit-link { position: absolute; top: 3px; right: 0; }
.section-default .post-edit-link { color: #045791; font-size: 12px; font-weight: bold; text-transform: uppercase; text-align: center; background: #fff; border: 2px solid #045892; padding: 2px 4px; display: inline-block; }
.section-default .post-edit-link:hover { background: #045892; color: #fff; text-decoration: none; }

/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */

.btn.btn-more { display: inline-block; color: #045892; text-transform: uppercase; font-weight: bold; margin-right: 10px; margin-bottom: 2px; }
.btn.btn-more:hover { opacity: .75; text-decoration: none; }

/* ------------------------------------------------------------ *\
	WP Gallery
\* ------------------------------------------------------------ */

.gallery { overflow: hidden; padding-top: 10px; }
.gallery .gallery-item { float: left; display: block; margin-left: 1%; -webkit-background-size: cover; background-size: cover; }
.gallery .gallery-item img { padding-bottom: 0; width: 100%; height: auto; }
.gallery .gallery-item .gallery-caption { display: inline-block; font-size: 12px; margin: 12px 0 14px; }
.gallery .gallery-item .gallery-icon { }
.gallery .gallery-item .gallery-icon a { display: block; width: 100%; height: 100%;}

.gallery-columns-1 .gallery-item { width: 100%; }
.gallery-columns-2 .gallery-item { width: 47.3%; margin-left: 5.4%; }
.gallery-columns-3 .gallery-item { width: 32.6%; }
.gallery-columns-4 .gallery-item { width: 24.25%; }
.gallery-columns-5 .gallery-item { width: 19.2%; }
.gallery-columns-6 .gallery-item { width: 15.83%; }
.gallery-columns-7 .gallery-item { width: 13.43%; }
.gallery-columns-8 .gallery-item { width: 11.6%; }
.gallery-columns-9 .gallery-item { width: 10.22%; }

.gallery-columns-1 .gallery-item:nth-child(1n+1),
.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) { clear: both; margin-left: 0; }

/* ------------------------------------------------------------ *\
	Search Form
\* ------------------------------------------------------------ */
.search-form { width: 67%; display:none; }
.search-field { -webkit-appearance: none; border-radius: 0; box-shadow: none; }
.search-form span.screen-reader-text { display: block; }
.search-form .search-field { color: #9a9a9a; font-size: 14px; background: #f7f7f7; border: 2px solid #d8d8d8; height: 40px; padding: 9px 20px; }
.search-form .search-submit { color: #045791; font-size: 14px; font-weight: bold; text-transform: uppercase; text-align: center; background: #fff; border: 2px solid #045892; padding: 8px 20px; height: 40px; display: inline-block; }
.search-form .search-submit:hover { background: #045892; color: #fff; }

.section-foot .search-form span.screen-reader-text { display: none; }
.section-foot .search-form .search-field { width: 100%; }
.section-foot .search-form .search-submit { display: none; }

/* ------------------------------------------------------------ *\
	Blog
\* ------------------------------------------------------------ */

.section-blog { padding: 20px 0 155px; border: 0; }
.section-blog .section-foot { position: fixed; bottom: 60px; left: 0; width: 430px; padding: 0 30px; z-index: 1; }

/*  Article  */
.article { position: absolute; top: 80px; left: 80px; right: 100px; color: #636365; font-size: 18px; line-height: 1.17; }
.article .shell { padding: 0 85px; }
.article-image { height: 510px; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.article-body { padding: 62px 0; margin-bottom: 85px; background: #fff; }
.article h1 { margin-bottom: 35px; }
.article h1 a { color: inherit; }
.article p { margin-bottom: 20px; }

.article-body .paging { overflow: hidden; }
.article-body .paging-next { float: right; }
.article-body .paging-prev { float: left; }

/* ------------------------------------------------------------ *\
	Map
\* ------------------------------------------------------------ */

.googlemap { position: fixed !important; top: 0; left: 430px; width: calc(100% - 430px); width: 100%; height: 100vh; }
body.semi-transparent-map .googlemap:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(226, 226, 226, 0.8); }

/* ------------------------------------------------------------ *\
	Media Queries
\* ------------------------------------------------------------ */

@media(max-width: 1024px){
	.link-down { display: none; }

	.article { position: relative; top: 50vh; left: 0; right: 0; z-index: 1; }
	.article-body { margin-bottom: 0; }
	body.semi-transparent-map .googlemap:after { display: none; }
}

@media(max-width: 1024px) and (orientation: portrait){
	body { font-size: 16px; }
	body.page-with-map h1 { font-size: 24px; }

	.content { padding-top: 200px; }


	.logo { width: 387px; height: 44px; margin: 38px 0; }

	.nav ul { min-height: 50px; }
	.nav a { font-size: 17px; padding: 0px 20px 0px; line-height: 50px; }

	.content,
	.header,
	.section-scroll,
	.section-blog .section-foot { width: 490px; }

	.googlemap { left: 490px; }
	.googlemap,
	.map { width: calc(100% - 490px); }
}

@media(max-width: 767px){
	.header { z-index: 2; }
	h1 { font-size: 28px; }
	.content,
	.header,
	.section-scroll,
	.section-blog .section-foot { width: 100%; }
	.section-blog .section-foot { padding: 0; }

	.gallery-columns-1 .gallery-item,
	.gallery-columns-2 .gallery-item,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item,
	.gallery-columns-7 .gallery-item,
	.gallery-columns-8 .gallery-item,
	.gallery-columns-9 .gallery-item {  }

	.section-blog { padding-bottom: 40px; }
	.section-blog .section-foot { position: relative; bottom: 0; }
	.googlemap { display: none; }

	.article { top: 0; padding-bottom: 150px; }
	.article .shell { padding: 0 40px; }
	.article-image { height: 220px; }
	.article-body { padding: 20px 0; }
	.article h1 { margin-bottom: 20px; }

	.section-scroll { z-index: 2; }
}

@media(max-width: 374px){
	.article .shell,
	.shell { padding: 0 10px; }
	.section-scroll .outro { left: 10px; right: 10px; }

	.logo { width: 300px; height: 35px; }
}