/*
 Theme Name:   Frank Child
 Theme URI:    http://overlawyered.com
 Description:  Frank Child Theme, developed specifically for Overlawyered.com
 Author:       Jeremy Kolassa
 Author URI:   http://jdkolassa.net
 Template:     Frank-master
 Version:      1.0.0
 Tags:         dark, grey, two-columns, right-sidebar, responsive-layout
 Text Domain:  frank-child
*/

/*
For older themes, and themes that do not use wp_enqueue_style() to enqueue their stylesheet, use the following line where Frank is the name of the directory where the theme resides:

Make sure you uncomment out this import line below if you want to include the parent CSS and the wp_enqueue_style() is not working. If you do not then you will not have any styling in your child theme from the parent theme.
*/



@import url("https://www.overlawyered.com/wp-content/themes/Frank-master/style.css");
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);



/* =Theme customization starts here
-------------------------------------------------------------- */

/* MOBILE MENU ON DESKTOP */

#mobile-menu {
display: none;
visibility: hidden;
}


body {
	/*background-image: url(https://www.overlawyered.com/wp-content/themes/frank-child/images/bg-texture-dark.png); */
	background: #343a40;
}

#content {
	background: #fff;
	border-radius: 5px;
	padding: 20px 0;
}

/* FONTS */

/* Headline font = Hoefler Titling A, Hoefler Titling B
   Post title font = Verlag
   Text font = DroidSerif, Georgia
*/

.title, h1, h2, h3, h4, h5, h6, .widget-title, .post-title {
	font-family: "Hoefler Titling A","Hoefler Titling B",Times,"Times New Roman",Georgia,serif;
}

.widget-title {
	font-size: 18px;
}

.title a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .widget-title a {
	color: #000;
}

.post-content {
	font: 17px/1.6 Georgia, serif;
}

.button {
  font-family: "Georgia", serif;
  font-weight: 500;
  border: none;
}

.button:hover {
  border: none;
}

/* COLORS */


/* Header customization */

a {
	color: #ba2339;
}

.ui-widget-content a {
  color: #ba2339 !important;
}


.header-wrap {
	margin: 0 -20px 20px;
	background-image: url(https://www.overlawyered.com/wp-content/themes/frank-child/images/bg-texture-dark.png);
	box-shadow: 1px 1px 5px #535f6b;
}

#site-title {
  font-size: 42px;
}

#site-description {
  font-size: 30px;
  margin-top: 8px;
}

#page-header, #page-header h1 a {
	color: rgb(204, 204, 204);
}

.menu > .menu-item {
  margin-right: 0px;
}

.menu-item a {
	color: rgb(204, 204, 204);
	font-family: 'Verlag A', 'Verlag B', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-variant:small-caps;
	font-size: 1.9em;
}

.menu-item a:hover {
	color: #FFF;
	text-decoration: none;
  background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.2);
}

.menu > .menu-item:hover {
	border-top: none;
  margin-top: 0px;
}

#site-nav {
	border-bottom: none;
}

.menu > .menu-item > .sub-menu {
	background: #343a40;
}

.sub-menu > .menu-item a {
	font-size: 1.3em;
}


/* Blog post styling */

.post-title {
	border-bottom: 1px dotted gray;
  font-size: 3.4em;
}

.post-content {
	overflow-wrap: break-word;
}

.byline {
  font-size: 1.8em;
}

.metadata .date, .metadata .comments {
  font-size: 1.2em;
}

.metadata .comments a {
  color: #ba2339;
}

/* Social share icons */
ul.socialshare {
	display: flex;
	justify-content: flex-end;
	gap: 3px;
}
ul.socialshare li {
	list-style-type: none;
}

/* .share-icon a {
	color: #343a40;
} */

.fb-share a, .fb-share a:hover {
	color: #3b5999;
}

.twitter-share a, .twitter-share a:hover {
	color: #55acee;
}

.reddit-share a, .reddit-share a:hover {
    color: #ff5700;
}

.plus-share a, .plus-share a:hover {
	color: #dd4b39;
}

.fa-7x, .fa-6x {
	font-size: 3em;
}

.fa-3x {
	font-size: 3em;
}

/* Blockquote */

blockquote{

  font-size: 15px;
line-height: 26px;
color: #444;
margin: 20px 0;
display: block;
padding: 25px;
background: #efefef;
-moz-box-shadow: -1px 1px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: -1px 1px 3px rgba(0,0,0,0.25);
box-shadow: -1px 1px 3px rgba(0,0,0,0.25);
border: 0;
}

blockquote::after, blockquote > p:first-child::before, blockquote > p:last-child::after {
  /*Reset to make sure*/
  content: "";
}

/* blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
} */

blockquote em{
  font-style: italic;
}

.post-tags {
  font-style: italic;
}

/* Connect Buttons */

.connect-button-list {
  margin: 0;
  list-style-type: none;
}

.connect-button-list li {
  margin: 10px 0;
}

.connect-button {
  background: #343a40;
  font-size: 0.8em;
  padding: 0.545em 0.818em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.connect-button:hover {
  color: #fff;
}

.connect-twitter, .connect-twitter:hover {
  background: #55acee;
}

.connect-fb, .connect-fb:hover {
  background: #3b5999;
}

.connect-rss, .connect-rss:hover {
  background:#FF6600;
}

    .fes-default button {
    background: none repeat scroll 0 0 #343a40;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #fff;
    font-size: 0.7em;
    padding: 0.545em 0.818em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    border: none;
    }

    .fes-default button:hover {
    background: none repeat scroll 0 0 #ff6600;
    color: #fff;
    }


/* Logo styling */

.logo {
   max-width: 50px;
   border-radius: 50%;
   display: inline;
   position: relative;
   top: 25px;
   left: 20px;
}

 /* #logo-container, #nav-container {
  width: 55%;
} */


/* Bookshelf on About page */

.bookshelf {
  text-align:center;
  margin: 10px 0;
}

.bookshelf div {
  display: inline;
  margin: 5px 10px;
}


.page-id-2 #content.page .bookshelf div img {
  box-shadow: -3px 3px 10px #333 !important;
}

.book-headline {
  font-size: 22px;
  text-align: left;
  border-bottom: 1px dotted gray;
}

/* widgets */

.widget {
  font-size: 14px;
}
ul.jaw_widget {
  list-style-type:none;
}

li.jaw-years {
  list-style-type: none;
}

/* Footer styling */

#primary-footer {
    margin-bottom: 30px;
}

#primary-footer img {
  width: 177px;
  margin: 0 auto;
  display: block;
}

#primary-footer div {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  display: block;
  color: #fff;
  font-size: 15px;
}

#primary-footer div a, #primary-footer div a:visited {
  color: #fff;
}

#content {
  margin-bottom: 30px;
}

/* Feedburner Email Subscription plugin */

button, .button, input[type="submit"] {
    transform: none;
    transition: none;
}

/* Taking off the nav button for IE 8 and below */

.ie #nav-button {
  display: none;
}

/* Special styling for the blogroll link */

.blogroll_link {
  margin-left: 24px;
}

/* Comments */

#comment-form-allowed-tags {
  left: 0;
}

div#comment-form-info {
  margin-left: 0;
}

#content .wgs_wrapper tr td.gsc-search-button {
	padding-bottom: 2px;
}

#gsc-i-id1 {
	width: 98% !important;
}

.gscb_a {
	line-height: 13px !important;
	vertical-align: middle;
}


/* ------------------MOBILE STYLING--------------------- */

@media only screen and (max-width: 1025px) {
	#content {
			padding: 10px 20px;
      margin: 0 -20px 30px -20px;
      border-radius: 0px;
	}
	#page-header {
		padding-left: 25px;
	}
  .post-title {
    font-size: 3em;
  }
  .post-content p, .post-content li, .post-content dt, .post-content dd, .post-content blockquote {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
	#page-header  {
		text-align:center;
	}

	#menu-primary-menu {
		margin: 0 auto;
		max-width: 78%;
	}

	#site-nav {
		max-width: 85%;
		margin: 0 auto;
	}

	.logo {
			max-width: 100px;
			border-radius: 50%;
			display: block;
			margin: 15px auto;
		}

  /* #logo-container, #nav-container {
    display: block;
    width: 100%;
  } */

    .socialshare {
      margin: 0 auto;
      text-align: center;
    }

    .fa-7x {
      font-size: 7em;
    }

    .fa-6x {
      font-size: 6em;
    }

    .fa-5x {
      font-size: 5em;
    }

    .fa-4x {
      font-size: 4em;
    }

  .button, .fes-default button {
    font-size: 1.1em;
    margin: 0;
  }

  .feedburner-email-subscription input[type="text"] {
    width: 100% !important;
  }

}

@media only screen and (max-width: 850px) {
  #content-primary {
    width: 95%;
  }

  .wpcf7 input {
    width: 100%;
  }

  #sidebar {
    width: 95%;
    margin-left: 0px;
  }
}

@media only screen and (min-width: 421px) {
	    #nav-button {
	    	display: none;
	    	visibility: hidden;
	    }

	    #site-nav {
	    	display: block !important;
	    }
}

@media only screen and (max-width: 420px) {

      #page-header {
        padding-left: 0px;
      }

	    #nav-button {
	    	display: block;
	    	visibility: visible;
	    	margin: 10px auto;
	    	width: 60px;
        padding: 17px;
        color: white;
        border-radius: 4px;
        border: 1px solid #111;
        background-color: rgba(0,0,0,0.2);
	    }

      #nav-button:active {
        background-color: rgb(136,136,136);
        background-color: rgba(136,136,136,0.4);
      }

	    #nav-button-icon {
	    	/* border-radius: 3px;
			border: 1px solid grey;
			padding: 5px;
			-webkit-box-shadow: inset 0 0 5px #000;
			-moz-box-shadow: inset 0 0 5px #888;
			box-shadow: inset 0 0 5px #888; */
	    }

	    /* #nav-button-icon:active {
        background-color: rgb(136,136,136);
	    	background-color: rgba(136,136,136,0.4);
	    } */

	    #site-nav {
	    	display: none;
	    }

		#content {
			padding: 10px 20px;
		}

		.socialshare {
			margin: 0 auto;
			text-align: center;
		}

		.fa-7x {
			font-size: 7em;
		}

		.logo {
			border-radius: 50%;
			display: block;
			margin: 15px auto;
			left: 10px;
			position: relative;
		}

    iframe, .wpcf7 textarea {
      max-width: 100%;
    }

    .metadata .author {
      position: relative;
      bottom: 5px;
    }

}

@media print {
    nav, aside, iframe, #respond, .socialshare { display: none;}

    img { max-width: 100%;}

    #logo-container, #content-primary {width: 100%;}

}