/*
 Theme Name:     Twenty Seventeen Child Theme
 Theme URI:      https://tamilchristiansongs.in/
 Description:    Description
 Author:         Tamil Christian Songs
 Author URI:     https://tamilchristiansongs.in/
 Template:       twentyseventeen
 Version:        1.0.0
 Text Domain:	 twentyseventeen-child
*/
 
/* Add Custom CSS after this line */

/* Demo Johnson Box code courtesy of: http://hyperlinkcode.com/blog/html-johnson-box/ */

.johnson1 {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
}
.johnson6 {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border: 3px dashed #ee0000;
}
.johnson8 {
	padding: 20px;
	background: #ccffcc;
	width: 90%;
	margin: 20px auto;
	border-left: 5px solid #ff8080;
}

/* Other Sample Code */

.warning {
	color: red;
}
.shadow {
	box-shadow: 0 8px 8px -6px #333;
}

::-webkit-input-placeholder { /* Edge */
	color: rgb(153, 153, 153);
}

:-ms-input-placeholder { /* Internet Explorer */
	color: rgb(153, 153, 153);
}

::placeholder {
	color: rgb(153, 153, 153);
}

/* Header */

.page-header {
	padding-bottom: 1em;
	padding-top: 0.5em;
}

/* Top Nav */

.newnav {
	overflow: hidden;
	background-color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .newnav .navbar-collapse {
	display: flex;
	justify-content: center;
  }
  
  .newnav .navbar-nav {
	display: flex;
	margin: 0 auto !important;
	padding: 0;
	list-style: none;
  }
  
  .newnav li {
	display: inline-block;
  }
  
  .newnav a {
	display: inline-block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
  }
  
  .newnav a:hover {
	background-color: #ddd;
	color: black;
  }
  
  .newnav a.active {
	background-color: #4CAF50;
	color: white;
  }
  
  /* Mobile and Tablet responsive styles */
  @media (max-width: 1024px) {
	.newnav {
		display: none !important;
	}
  }


/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

/* Font size increase */

body,
button,
input,
select,
textarea {
	font-size: 1rem;
}

.site-title {
	font-size: 0.9rem;
}

@media screen and (min-width: 30em) {

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 1.1875rem;
	}

	/* Secondary */

	#secondary {
		font-size: 1rem;
	}

	.site-title {
		font-size: 1.1rem;
	}
}


@media screen and (min-width: 48em){
	h2.widget-title {
		font-size:0.8125rem;
	}
}

.wrap {
	padding-left: 1em;
	padding-right: 1em;
}


/* #theButton{
	background-color: #4CAF50;
} */
#theChords{
	padding: 0 40px;
	background: #343a40;
	
	
}
#theChords a{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.lyrics-alph{
	padding:2px 7px;
	float:left;
	list-style: none;
}
.widget.widget_ajax_widget {
	padding-bottom: 0px;
	height: 0px;
}

ul.nav-chordsindex li {
	display: inline-block;
	padding: 12px;
}
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
	font-size: 1.2rem;
}

@media (min-width: 992px){
	#alph-index {
		display:none;
	}
	.desktop-hidden {
		display:none;
	}
	
}
@media screen and (min-width: 48em){
	.site-title {
		font-size: 1.2rem;
	}
}
@media screen and (min-width: 30em){
	.site-branding {
		padding: 1em 0 1em;
	}
	h1 {
		font-size: 1.5rem;
		font-weight: bold;
	}
	h2, .home.blog .entry-title, .page .panel-content .recent-posts .entry-title {
		font-size: 1.4rem;
		font-weight: bold;
		color: #333;
		padding: 0.5em 0 0;
	}
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

#search-filter{
	height:38px;
}

input#keyword {
    width: auto;
}

/*--------------------------------------------------------------
Verses Page Pagination
--------------------------------------------------------------*/

.pagination {
    clear: both;
    padding: 20px 0;
    text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 3px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
}

.pagination a:hover {
    background: #e9e9e9;
    border-color: #ccc;
}

.pagination .current {
    background: #333;
    color: #fff;
    border-color: #333;
}

.pagination .dots {
    border: none;
    background: none;
}