/*
Theme Name: Fuck For Free  V2
Theme URI: https://www.fuckforfree.org
Description: A Dating Theme.
Author: Dating Themes
Author URI: https://www.fuckforfree.org
Version: 1.0.1
License: GNU General Public License
License URI: license.txt

*/
/* Base
----------------------------------------------------------------------------------------------------*/
* {margin:0;padding:0;border:0;outline:0}


    @font-face {
    font-family: 'FG';
    font-style: normal;
    font-weight: normal;
    src: local('FG'), url('fonts/Franklin-Gothic-book-normal.woff') format('woff');
    }
    

    @font-face {
    font-family: 'FGD';
    font-style: normal;
    font-weight: normal;
    src: local('FGD'), url('fonts/Franklin Gothic Demi.woff') format('woff');
    }
    

    @font-face {
    font-family: 'FGC';
    font-style: normal;
    font-weight: normal;
    src: local('FGC'), url('fonts/Franklin Gothic Condensed.woff') format('woff');
    }
    

    @font-face {
    font-family: 'FGI';
    font-style: normal;
    font-weight: normal;
    src: local('FGI'), url('fonts/FranklinGothicITALIC.woff') format('woff');
    }
    

    @font-face {
    font-family: 'FGI';
    font-style: normal;
    font-weight: normal;
    src: local('FGI'), url('fonts/fgwo____.woff') format('woff');
    }

html {
	height: 100%;
}


ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}



a{text-decoration:none;color:#D31655;}
a:hover{text-decoration:none;}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size:14px;	
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
hr{border-bottom:1px solid #4e4e4e;}
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

.fl
{float:left;}

.fr
{float:right;}

.clr
{ clear:both;}

img
{max-width:100%; 
height:auto;
border:none;}

a
{ transition:color .0s ease-in; -moz-transition:color .0s ease-in; -webkit-transition:color .0s ease-in; }




body
{ background:#f1f1f1; font-weight:400; font-family: 'FG', sans-serif;} 
.wrap {width:100%;max-width:1080px;margin:0 auto;}

#banner{ background:#ddb515;padding:20px;}
.banner-bottom{background:#cc0f4b;padding:20px;padding-bottom:10px;}
.pcity{color:#cc0f4b;font-family:'FGD',sans-serif;}
.head-right{}
.galbox{position:relative;display:block;opacity:.9;}
.gallery a{position:relative;}
.galbox:hover,.galact{border:5px solid #ddb515;opacity:1;}
.gallery{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:0;
}
.sname{position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap; 
  text-overflow:ellipsis;
 overflow:hidden;
 color:#222;
 font-family:'FGD',sans-serif;
  transform: translate(-50%, -50%);background:#fff;border-radius:30px;width:75%;text-align:center;max-width:100%;position:absolute;z-index:1000;align-items:center;justify-content:center;
  display:none;
   transition:display .3s ease;
  }

.sname a{ color:#222;display: block;
  line-height: 20px;
}
.active{display:block;}
.gallery img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}
#header{align-items: center; 
justify-content: center;}
.fancybox-close{background:url(images/close.webp) top center no-repeat !important;}
.three-box{display:flex;align-items:center;margin-top:40px;margin-bottom:40px;}
.three-box p{font-family:'FGD',sans-serif;font-size:22px;font-weight:bold;text-transform:uppercase;}
.head-right{text-align:right; color:#222222;}
.three-box.fbox{justify-content: center;margin-right:30px;}
.three-box.mbox{ justify-content: center;padding-left:30px;}
.three-box.rbox{justify-content: right;padding-right:30px;}
.btext{color:#fff;line-height: 18px; font-size: 14px;}
#bottom{background:#222222;border-top:30px solid #cc0f4b;margin-top:-30px;position:relative;z-index:-1;}
#bottom{-webkit-box-shadow: 0px -9px 21px -5px #000000; 
box-shadow: 0px -9px 21px -5px #000000;}
#back-color,.btn-primary,.btn-default,.btn{cursor:pointer;font-family:'FGD',sans-serif;cursor:pointer;font-size:18px;background-color:#cc0f4b;border-color: #cc0f4b;font-weight:normal;border-radius:30px;color:#fff;padding-left:20px;padding-right:20px;}
.reglink{margin-top:15px;}
.btn:hover{background-color:#cc0f4b;border-color: #cc0f4b;color:#fff;}
.hthumb{background:#fff;padding:20px;margin-bottom:20px;color:#222222;}
.hthumb p{margin:0; margin-top:10px;}
.htitle{font-size:24px;font-family:'FGD',sans-serif;line-height:18px;}
#footer {color:#f1f1f1;font-size:14px;padding-top:20px;padding-bottom:20px;}
.signheader{color:#fff;font-family:'FGD',sans-serif;text-align:center;font-size:24px;margin-bottom:20px;}
.signheader label{font-weight:bold;}
.form-control,.form-select{border-radius:30px;}
.yl{color:#ddb515;}
.termtext{color:#fff;font-size:12px;}
.ylbtn,.ylbtn:hover{background:#ddb515;border-color:#ddb515;color:#222222;width:100%;}
#footer a{color:#ddb515;font-family:'FGD',sans-serif;text-transform:uppercase;}
#footer  .cw{color:#fff;}
.midbtn{clear:both;display:table;margin:0 auto; margin-bottom:20px;}
.midheader,.botheader{margin:20px auto;color:#ddb515;text-align:center;font-size:18px;font-family:'FGD',sans-serif;}
.hth-con{margin-top:30px;margin-bottom:30px;}
.botbtn{width:100%;font-size:24px;}
.botheader{margin-bottom:30px;}
.fright{text-align:right;}
#formsign{color:#fff;}
.head-right{font-size:18px;}
.pgnavi{float:right;padding: 0px 15px;margin-top:20px;}
#singlepost{text-align:center;color:#222;}
#singlepost h2,#pagepost h2{font-size:30px;color:#cc0f4b;}
#singlepost h1,#singlepost h2,#singlepost h3,#singlepost h4,#singlepost h5,
#pagepost h1, #pagepost h2, #pagepost h3,#pagepost h4, #pagepost h5{font-family:'FGD',sans-serif;}
#singlepost .ages{color:#222;}
.abthead{color:#000;margin:20px auto;font-family:'FGD',sans-serif;}
.circle-nav {
    display: flex;
    gap:10px; /* space between circles */
	
}

.circle-nav a {
    width: 16px;
    height: 16px;
    background-color: #222222;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

/* active state */
.circle-nav a.active {
    background-color: #cc0f4b;
}

/* hover effect (optional but nice) */
.circle-nav a:hover {
    background-color: #cc0f4b;
}
.clearfix{clear:both;}
.circle-nav .dots {
    display: inline-block;
    width: 23px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    color: #222222;
}

/* col-md */
@media (min-width:992px) and (max-width:1100px){
	.wrap{margin:0 15px;max-width:calc(100% - 30px );}
}
@media (max-width:991.98px){
	.gallery{
        grid-template-columns:repeat(5, 1fr);
    }
	#thfeat{margin-left:40px;}
	.three-box.fbox{justify-content: right;margin-right:0px;}
.three-box.mbox{ justify-content: center;padding-left:0px;}
.three-box.rbox{justify-content: left;padding-right:0px;}
#btt{padding-left:15px; padding-right:15px;}
}

/* col-sm */
@media (max-width:767.98px){
	#header,.head-right{text-align:center;}
	.hthumb{padding:10px;text-align:center;}
	.three-box.mbox{ justify-content: center;}
.three-box.rbox{justify-content: center;}
    .gallery{
        grid-template-columns:repeat(4, 1fr);
    }
	#thfeat{margin-left:0px;}
	.pgnavi{float:none;display:table;margin:0 auto;}
	.head-right .reglink{margin:20px auto;display:table;}
	.three-box{margin-bottom:20px;}
		.three-box.fbox{justify-content: center;margin-right:0px;}
.three-box.mbox{ justify-content: center;padding-left:0px;}
.three-box.rbox{justify-content: center;padding-right:0px;}

}
#mobbot{font-size: 21px;
  line-height: 22px;}
/* mobile */
@media (max-width:575.98px){
	.three-box{ justify-content: center;}
    .gallery{
        grid-template-columns:repeat(3, 1fr);
    }
	#footer,.fright{text-align:center;}
	.btext{padding:0px 15px;}
	.three-box{margin-bottom:0px;}
	#btt{margin-top:20px;}
	#banner{padding:10px;}
	#footer a{padding:0px 15px;}
}

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


#header .logo{width:95%;margin:0 auto;}
}


.highlight{
    transition:all .3s ease;
    box-shadow:0 0 10px rgba(255,0,0,.5);
}
.fancybox-skin{background:#f1f1f1 !important;}

 .fancybox-wrap, .fancybox-inner {
max-width: none !important;
max-height: 800px !important;

}