/*!
Theme Name: CodeHap Tones wp
Theme URI: http://codehap.com/
Author: codehap.com
Author URI: http://codehap.com/
Description: Ringtone Website Wordpress Theme For Ringtone Or Music Wordpress Site
Version: 2.3.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: codehap_tones_wp
Tags: Ringtone, Tones, Ringtone Wordpress, Ringtone Theme, Codehap
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
	--pc: teal
}

*,
::after,
::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

a {
	text-decoration: none;
	color: #1B3358
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent
}

body {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: #fafafa
}

.site-header {
	background-color: #fff;
	padding: 1px 5px;
	display: flex;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

.ringtones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px 10px;
}

.details {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 9px;
	align-items: center;
	margin-bottom: 1px
}

.tags {
	height: 32px;
	overflow: hidden
}

.type-post .tags-links a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	padding: 0 8px;
	display: inline-block;
	margin: 1px;
	font-size: 12px;
	display: inline-block;
	text-transform: capitalize
}

.type-post .data .title {
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	font-size: 16px;
	font-weight: bolder
}

.type-post .data a {
	text-decoration: none
}

.type-post .data .info {
	text-decoration: none;
	color: #cae3e2;
	font-size: 13px
}

.type-post .button {
	cursor: pointer;
	width: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
	margin: 10px 10px 0;
	-webkit-transition: all .2s;
	transition: all .2s;
	color: #fff;
	cursor: pointer;
	background-color: #000
}

.type-post .player {
	position: relative;
	float: none;
	display: inline-block;
	margin: 0;
	height: 58px;
	width: 58px;
	--rotation: 45deg
}

.type-post .player .icon {
	width: 100%;
	color: #fff;
	margin-top: 12px;
	margin-left: 4px;
	width: 34px;
	height: 34px
}

.icon {
	display: inline-block;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	height: 14px;
	width: 14px;
	margin-bottom: -2px
}

.spin {
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear
}

@-webkit-keyframes spin {
	0 {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(359deg)
	}
}

@keyframes spin {
	0 {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

.bottom-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.share-button,
.download-button {
	height: 30px;
	width: 30px;
	border-radius: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: pointer;
	padding: 5px
}

.share-button svg  {
	width: 100%;
	height: 100%;
	fill: #1B3358
}


.download-button svg {
	width: 100%;
	height: 100%;
	fill: #1B3358
}


.share-button {
	background: #fff
}

.download-button {
	background: #fff
}

.download-button2 {
	margin-left: auto;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 30px;
	background: #1B3358;
	padding: 8px 20px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	cursor: pointer
}

.codehap-pagination {
	margin: 10px auto;
	text-align: center
}

.codehap-pagination a,
.codehap-pagination span {
	color: #fff;
	display: inline-block;
	text-decoration: none;
	background-color: #424242;
	border-radius: 3px;
	cursor: pointer;
	margin: 0 5px;
	padding: 0 10px;
	line-height: 32px
}

.codehap-pagination a:hover,
.codehap-pagination span.current {
	background-color: #1B3358
}

.codehap-pagination span.current {
	cursor: default
}

.codehap-pagination-info {
	color: #000;
	display: inline-block;
	text-decoration: none;
	background-color: none;
	border-radius: 3px;
	cursor: pointer;
	margin: 0 5px;
	padding: 0 10px;
	line-height: 32px
}

.ringtones .type-post {
	background-color: #1B3358;
	padding: 10px;
	border-radius: 15px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

.CODEHAP_main_content .entry-header {
	max-width: 500px;
	margin: auto;
	background: #1B3358;
	padding: 16px;
	border-radius: 15px 15px 0 0;
	color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

.cat-links a {
	color: #fff
}

.posted-on .updated {
	display: none
}

.CODEHAP_main_content .content2,
.CODEHAP_main_content .entry-title {
	text-align: center
}

.entry-title {
	text-align: center
}

.CodeHapcontent {
	max-width: 500px;
	margin: 5px auto;
	background: #fff;
	padding: 16px
}

.CodeHapDmca {
	max-width: 500px;
	margin: 5px auto;
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

.CodeHapINFo {
	max-width: 500px;
	margin: auto;
	background: #fff;
	padding: 16px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

.CodeHapDmca span {
	color: #1B3358;
	font-weight: bold
}

.CodeHaptags {
	max-width: 500px;
	margin: 5px auto;
	background: #fff;
	padding: 16px;
	text-align: center;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	border-radius: 10px
}

.CodeHaptags .tags-links a {
	border-radius: 20px;
	border: 1px dashed #888;
	color: #444;
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 10px;
	display: inline-block;
	margin: 1px;
	display: inline-block;
	text-transform: capitalize
}

.CodeHapDL {
	max-width: 500px;
	margin: 5px auto;
	padding: 16px 5px;
	text-align: center
}

.CodeHapDL a {
	color: #fff;
	background: #000;
	padding: 16px;
	text-align: center;
	max-width: 100%;
	margin: 5px auto;
	display: block;
	border-radius: 25px
}

.content2.button {
	cursor: pointer;
	width: 42px;
	height: 42px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
	margin: 10px 10px 0;
	-webkit-transition: all .2s;
	transition: all .2s;
	color: #fff
}

.content2 .player {
	position: relative;
	float: none;
	display: inline-block;
	margin: 10px;
	height: 100px;
	width: 100px;
	--rotation: 45deg
}

.content2 .player .icon {
	width: 100%;
	color: #fff;
	margin-top: 19px;
	margin-left: 6px;
	width: 60px;
	height: 60px
}

.content2.icon {
	display: inline-block;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	height: 60px;
	width: 60px;
	margin-bottom: -2px
}

.CODEHAP_main_content {
	margin-top: 15px
}

.CODEHAP_main_content .entry-meta span {
	display: block
}

.entry-codehap {
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.CODEHAP_main_content .author {
	font-weight: bolder;
	font-size: 18px
}

.CODEHAP_main_content .posted-on {
	font-size: 13px
}

#info-codehap,
#codehapPost {
	display: none
}

.entry-buttons {
	column-gap: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.entry-buttons .info {
	cursor: pointer
}

.entry-buttons .info svg {
	width: 100%;
	height: 100%;
	fill: #1B3358
}

.site-branding {
	column-gap: 3px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.site-branding h1,
.site-branding a {
	font-size: 14px;
	margin: 0;
	padding: 0;
	color: #1B3358
}

.site-branding p {
	font-size: 12px;
	margin: 0;
	padding: 0;
	color: #1B3358
}

.site-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	column-gap: 3px
}

.codehap_sidebar {
	flex: 0 0 50px
}

.codehap_search {
	flex: 1
}

.site-branding {
	flex: 0 0 20%
}

.codehap_search .search-form {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	margin-left: 16px;
	max-width: 700px
}

.codehap_search .search-form .search-input {
	border: 1px solid #1B3358;
	padding: 4px 8px;
	border-radius: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.codehap_search .search-form .search-input input {
	width: 100%;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	border: 0
}

.codehap_search .search-form .search-input input:focus {
	outline: 0
}

.codehap_search .search-form .search-input .icon {
	padding-left: 8px;
	width: 45px;
	height: 30px
}

.sidenav {
display: none;
  height: 100%;
  width: 250px;
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	background-color: #000000;
	overflow-x: hidden;
	transition: .5s;
	padding-top: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}



.sidenav .closebtn {
padding: 0px 8px;
	color: #000;
	font-size: 40px;
	cursor: pointer
}

.main-navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0
}

.main-navigation a {
	padding: 15px 30px;
	display: block;
	color: #fff;
}

.main-navigation a:hover {
	background-color: #fff;
	color: #1B3358
}

.codehap_sidebar_menu {
	color: #1B3358;
	font-size: 40px;
	cursor: pointer
}

.codehap_sidebar_menu svg {
	padding: 1px 8px;
	fill: #1B3358
}



.page-header .page-title {
	margin: 0 0 5px 0;
	padding: 8px;
	text-align: center;
	font-size: 26px
}

.page-header h1 {
	margin: 0;
	padding: 0
}

.codehap_page_content {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	max-width: 900px;
	margin: auto;
	background: #fff;
	padding: 16px
}

.site-branding-logo {
	padding: 4px;
	width: 50px;
height: 50px;
}

.site-title,.site-description{

display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-footer {
	background-color: #fff;
	margin-top: 20px;
	text-align: center;
	padding: 10px;
	border-top: 5px solid #1B3358;
	color: #52565e
}

.site-footer a {
	color: #231f20
}


.widget-area {
	display: block;
	background-color: #fff;
	padding: 8px;
	margin: 5px;
	border-top: 2px solid #1B3358;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	border-radius: 10px
}

.widget-area h2 {
	text-align: center;
	padding: 0;
	margin: 0
}



.codehap_H2 {
	text-align: center;
	padding: 0;
	margin: 0
}

.nav_head{
 
	display: flex;
	align-items: center;
	justify-content: space-between
}



.nav_title{
color: #fff;
font-size: 20px;
padding: 0px 10px;
font-weight: bolder;
}

.nav_head{
border-bottom: 2px solid #fff;
padding-bottom: 15px;
}

.tagsCodehap{

list-style-type: none;
  margin: 0;
  padding: 0;
display: inline-block;
}



.tagsCodehap li{
 padding: 5px 9px;
 margin: 2px;
 border-radius: 10px;
 border: 1px dashed #1B3358;
display: inline-block;
}

.tagsCodehapBox{
padding: 10px;
margin-top: 20px;
background: #fff;
text-align: center;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	border-radius: 10px
}

.tagsCodehapBox h2{
padding: 0 0 5px 0; 
 margin: 0 0 8px 0; 
 border-bottom: 1px solid #f3f4f7;
}

.custom-logo{
width: 100%;
height: 100%;
}


@media screen and (max-height:450px) {
	.sidenav {
		padding-top: 15px
	}

 

}



@media only screen and (max-width: 600px) {
  .site-branding-text{display: none;}
}



.codehap_container{
margin: auto;
max-width: 1100px;
padding: 2px 10px;

}



.div-sticky-class{
    position: fixed;
    bottom: 0;
    width: 250px;
    list-style: none;
    padding-left: 0;
}


.div-sticky-class ul{
list-style-type: none;
	margin: 0;
	padding: 0;
	column-gap: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between
	}


	.div-sticky-class ul li {
 
 display: block;
 padding: 2px 10px;
	}



.comments-area{
	margin : 15px 0px;
	background:#fff; 
	padding: 20px; 
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	
}

.comments-area .submit{
	margin 5px 0px;
	padding: 20px; 
	border-radius: 10px;
	color:#fff;
	background:#1B3358;
}


.comments-area input , .comments-area textarea {
	margin 10px 0px;
	padding: 10px; 
	border-radius: 10px;
 width: 100%;
 border: 1px solid #1B3358;
}


.comments-area .comment-form-cookies-consent{
display: flex;
	align-items: center;
	justify-content: center;
 
}

.comments-area .comment-form-cookies-consent input{

flex: 0 0 50px;

}

.comments-area .comment-form-cookies-consent label{

 flex: 1;

}
.comments-area.submit{

cursor: pointer;

}



.comment-list{
border : 1px solid #caccd1;
 background: #fefefe;
border-radius: 10px;
}

.comment-list li{
 
padding: 15px;

}



.comments-area ol {
	list-style-type: none;
	margin: 0;
	padding: 0
}


.comment-meta,.comment-author{
	column-gap: 13px;
display: flex;
	align-items: center;
	justify-content: space-between;
}

 
 .post-thumbnail img {
border-radius: 10px;
width: 100%;
height: 100%;
margin: 5px 0px;
 }