@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');



/*TYPOGRAPHY*/
body { 
	font-family: 'Poppins', sans-serif; 
	font-weight: 400;
	color: #535353;

}
a {
    text-decoration: none;
	transition: all .3s ease-in-out;
}
a:hover{
    text-decoration: underline;
}
.text-content ul {
    margin: 32px;
}
.text-content li {
    list-style: disc;
    color: #ffffff;
    font-size: 17px;
    line-height: 20px;
    margin-bottom: 12px;
   
}

/*size*/

p { font-size: 18px; font-weight: 400;}
h1 { font-size: 48px; line-height: 48px; }
h2 {font-size: 46px;}
h3 { font-size: 44px}
h4 {font-size: 40px;}
h5 {font-size: 38px;}
h6 {font-size: 32px;}

@media screen and (max-width: 768px) {
	p { font-size: 16px; font-weight: 400;}
h1 { font-size: 38px; line-height: 42px; }
h2 {font-size: 32px;}
h3 { font-size: 28px}
h4 {font-size: 26px;}
h5 {font-size: 26px;}
h6 {font-size: 22px;}
}

@media screen and (max-width: 420px) {
   h1 { font-size: 32px; line-height: 36px; }
h2 {font-size: 30px;}
h3 { font-size: 26px}
h4 {font-size: 24px;}
h5 {font-size: 22px;}
h6 {font-size: 22px;}
}

@media screen and (max-width: 340px) {
   h1 { font-size: 26px; line-height: 36px; }
h2 {font-size: 24px;}
h3 { font-size: 24px}
h4 {font-size: 22px;}
h5 {font-size: 22px;}
h6 {font-size: 22px;}
}
h3, .strong { font-weight: 700; }
h1, h2, h3, h4,h5{  font-family: 'Poppins', sans-serif; 
	font-weight: 700; margin-bottom: 28px;  margin-top: 30px;letter-spacing: 0px;text-transform: none;}
h1 {

    padding-bottom: 18px;
	
}

p, h1, h2, h3, h4, h5 {
    margin-left: 20px;
    margin-right: 20px;
}

p.lead {
  
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    margin-top: 22px;
  
}

.sub-head {
    font-weight: 400; margin-bottom: 20px; text-transform: uppercase; margin-top: 10px;font-size: 20px;
}

p { margin-bottom: 16px; margin-top: 22px;}

li {
	font-size: 19px;
	margin-bottom: 12px;
	
}


.btn-lg {
    font-size: 32px;
    padding: 13px;
    min-width: 400px;
    width: 100%;
    border: none;
    border-radius: 0;
    font-weight: 400; text-transform: uppercase;
}
.main-content.li {
    margin-left: 80px;
    padding-left: 30px;
    
    padding-bottom: 20px;
}
.feat-list li {
    margin-left: 30px;
    padding-left: 5px;
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
	
}
.breadcrumbs {
    font-size: 16px;
	font-weight: 700;
	color: #ff0066;
	padding-bottom: 8px;
	padding-top: 8px;
    border-bottom: 1px solid #efefef;
	margin-bottom: 14px;

}
.breadcrumbs a {
   font-weight: 400;
    color: #222222;
}

.breadcrumbs ol  {
    display: inline-block;
	list-style: none;
	padding-left: 10px;
   
}

.breadcrumbs li  {
    display: inline-block;
	padding: 10px;
	
   
}



/*color*/
h1 {color:#251d65}
h2 { color:#000000; }
h3, h4 { color: #222222; }
.brand-pink  {color:#ff0066;}

.grey {color: #666;}
.red-highlight {color:#cc3502;padding: 3px; background-color: #000000;margin-top: 4px;display: inline-block; margin-right: 2px;}
a {color: #ff0066;}
a:hover {color:#ff0066; text-decoration: underline;}
/*BODY*/
body { background-color:#ebebeb; }

/*HEADER*/
#logo { width: 270px; height: 40px; margin-left: 30px; margin-top: 18px; }



.header {   width: 100%; height: auto; display:block; background-color: #cc3502;}
.bg-img { background: url(../img/yorkshire-dating-header.jpg) no-repeat;  background-position: 0px -10px; background-size:100% auto;}

.header-contents { display: block; width: 100%; padding-top:160px; padding-bottom:180px; } 

@media screen and (min-width: 1400px) {
.header-contents { display: block; width: 100%;  padding-bottom:230px;  }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.bg-img { background: url(../img/yorkshire-dating-header.jpg) no-repeat;  background-position: 0px 0px; background-size:100% auto;}
	.header-contents { display: block; width: 100%; padding-top:122px; padding-bottom:122px; } 
	

}

@media screen and (max-width: 736px) {
.bg-img { background-position: top left;}
   
    .header-contents { display: block; width: 100%; margin-top:0px; padding-bottom:50px;  }
    
    .strapline {
        display: none;
    }
}
@media screen and (max-width:500px) {
.bg-img { background: url(../img/mobile-dating-header.jpg) no-repeat;background-position: top center}
    #logo { width: 62%; height: 62%; margin-left: 20px; margin-top: 24px; }
    .header-contents { display: block; width: 100%; margin-top:0px;padding-top:140px; padding-bottom:50px; 
    }
	.main-content {
   padding-right: 10px; 
    padding-left: 10px;
    box-shadow: none;
}
	
}


.welcome {
	border-radius: 12px;
	background-color: #ffffff;
	padding: 24px;
	font-weight: 400;
	font-size: 18px;
	color: #000000;
	display: block;
	border-bottom-left-radius: 0;
	margin-bottom: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	-webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
	animation-delay: 1s;
}

@media screen and (max-width: 540px) {
	.welcome {
	
	padding: 18px;
	font-size: 16px;
	
}
}
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


.img-responsive {
  width: 100%;
  height: auto;
}



.img-area {
  width: 100%;
  height: auto;
	max-width: 350px;
	float: right;
	padding: 20px;
}
@media screen and (max-width: 500px) {
	.img-area {
  width: 100%;
  height: auto;
	max-width: 460px;
	float: right;
	padding: 20px;
		display: block;
}
	.row {
    margin-right: 0px; 
    margin-left: 0px; 
}
}

.icon-row {
    background-color: #251d65;
}

a.search-singles{
	display: block;
    margin-left: 20px;
    margin-top: 50px;
    padding: 20px;
    background-color: #ff0066;
    font-size: 20px;
	text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    margin-right: 20px;
}



@media (min-width: 768px) and (max-width: 1024px) {
	
a.search-singles {
   
    margin-top: 30px;
    padding: 14px;
    background-color: #ff0066;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    margin-right: 20px;
	margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
	a.search-singles{
	display: block;
    margin-left: 20px;
    margin-top: 10px;
    padding: 20px;
    background-color: #ff0066;
    font-size: 18px;
	text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    margin-right: 20px;
		margin-bottom: 20px;
}
}
/* MENU ///////////////////////////////////////////////////////////// */
/* Top nav bar */

.top-nav {
	background-color:#ffffff;
	height:82px;
	margin-bottom: 0px;
	display: block;
   
}

.tagline {
	display: inline-block;
    margin-top: 22px;
    font-size: 22px;
    letter-spacing: -1px;
    font-weight: 700;
    text-transform: none;
    color: #251d65;
    font-family: 'Poppins', sans-serif;
    text-indent: 20px;
}

@media screen and (max-width: 768px) {
	.tagline {
  font-size: 18px;
		text-indent: 2px;
		margin-top: 26px;
		
}
}
@media screen and (max-width: 600px) {
	.tagline {
    display: none;
    
}
}
.nav-pills > li > a {
    color: #2a2a2a;
	margin-right: 0px;
	padding-top: 12px;
	padding-right: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	 transition: all .3s ease-in-out;
	cursor:pointer; 
	
}
.nav-pills > li > a:hover {
color:#ef0000;
	background-color: transparent;
	
}



@media screen and (max-width: 736px) {
   
    .nav-pills > li > a {
   
        font-size: 16px;
}
}
.nav-pills .login a {
   background-color: #251d65;
    color: #ffffff;
    font-weight: 700;
    margin-right: 6px;
    border-radius: 6px;
}
.nav-pills .login a:hover {
	background-color: #fff;
	color: #251d65;
	}


@media screen and (max-width: 420px) {
   
}
.nav-pills {
	margin-top: 16px;
	}


.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: #000000; 
    border-color: none;
}

a.dropdown-toggle:focus {
	background-color: #141414;
}
a.dropdown-toggle:hover {
	background-color: #000000;
}







.stats {
	display: block;
    float: left;
    padding: 23px;
    background-color: #2a2a2a;
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
	width: 100%;
	margin-bottom: 20px;
}

.side-heading {
	display: block;
    float: left;
    padding: 24px;
    color: #2a2a2a;
    font-weight: 700;
    font-size: 26px;
	width: 100%;
	font-family: 'Poppins', sans-serif; 
	margin-bottom: 20px;
	margin-top: 16px;
	border-top: 1px solid #ebebeb;
	
}

.quote {
	background-image: url(../img/quote.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 130px 130px;
	margin-left: 0px;
}

@media screen and (max-width: 515px) {
	.quote {margin-left: 20px;}
}


.quote .name, .quote p, .quote .location  {
	margin-left: 65px;
}
.quote .name {
	font-weight: 700;
    font-size: 18px;
    margin-top: 4px;
    color: #404040;
}
.quote .age {
	font-weight: 700;
	font-size: 17px;
	margin-left: 4px;
	color: #ff0066;
}
.quote .location {
	font-weight: 700;
	font-size: 15px;
	line-height: 15px;
	display: block;
}
.quote p {
	font-size: 16px;
    color: #464646;
    margin-top: 10px;
}
	
	
	
 /*///////   SECTIONS ///////////*/  



/* purple BAR */

.purple-bar {
    width: 100%;
    min-height: 60px;
    background-color: #251d65;
}

    /* MAIN CONTENT */
.main-content {
 margin-top: -80px;
    background-color: #ffffff;
    padding-top: 20px;
    padding-bottom: 50px;
    margin-bottom: 40px;
    border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

@media screen and (max-width: 768px) {
	.main-content {
   margin-top: -150px;
   


}
}

@media screen and (max-width: 600px) {
	.main-content {
   margin-top: -60px;
   box-shadow: none;
		border-radius: 0px;


}
}


/* MATURE BANNER */

.mature-dating {
	display: block;
	margin-top: 40px;
	margin-bottom: 10px;
	background-image: url(../img/mature-dating.jpg);
	background-size: cover;
	min-height: 250px;
	padding-left: 30px;
	padding-right: 40px;
	padding-top: 100px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
	
}

a.mature-link  {
	font-weight: 700;
	padding: 11px!important;
	display: block;
	font-size: 20px!important;
	line-height: 22px!important;
	
}
a.mature-link:hover {
	background-color: #251d65;
	color: #fff!important;
	text-decoration: none;
}
a.mature-link .join-mature  {
	font-size: 17px;
	display: block;
	margin-top: 12px;
	font-weight: 400;
}



/* FEATURES LIST */

.feature {
    display: block;
    padding-left: 50px;
   
    background-repeat: no-repeat;
    background-position: 0px 8px;
    margin-left: 24px;
    margin-top: 30px;
     
}
.feature2 {
    display: block;
    padding-left: 50px;
   
    background-repeat: no-repeat;
    background-position: 0px 8px;
    margin-left: 0px;
    margin-right: 60px;
    margin-top: 30px;
     
}

@media screen and (max-width: 768px) {
  .feature {
    margin-left: 30px;
    margin-top: 20px;
     
}
.feature2 {
   
    margin-right: 30px;
    margin-top: 20px;
     
}
}
@media screen and (max-width: 389px) {
 .feature {
    margin-left: 20px;
    margin-top: 20px;
     
}
.feature2 {
   
    margin-right: 20px;
    margin-top: 20px;
     
}
}



/* CALL TO ACTION */


    .cta {
    width: 90%;
    padding: 30px;
    background-color: #be2c2c;
    color: #ffffff;
    font-size: 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    margin-top: 40px;
		text-decoration: none;
		transition: all .3s ease-in-out;
}


    
    .cta:hover {
		transform: scale(1.04);
		text-decoration: none;
		color: #ffffff;
}




@media screen and (max-width: 768px) {
 .cta {
    width: 94%;
    padding: 20px;
    
    font-size: 18px;
    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-top: 30px;
    
}

.cta a {
	background-color: #cc3502;
	color: #ffffff;
   padding: 12px;
    font-size: 14px;
    display: block;
    margin-top: 20px;
	}  
}




/* SIDEBAR //////// */

.side-bar a {
	font-size: 17px;
	line-height: 18px;
	margin-bottom: 12px;
	padding-left:  0px;
	display: block;
	color: #433b88;
}

.side-bar ul {
    margin: 0px;
}
.side-bar li {
    list-style: none;
}

.area-list li > a {
	font-size: 17px;
	line-height: 22px;
	color: #666666;	
	display: block;
	margin-bottom: 0px;
	padding-left:  0px;

}
.area-list li > a:hover {


	color: #CC3300;
	text-decoration: none;
}

.area-list-single li > a {
	font-size: 14px;
	line-height: 20px;
	color: #666666;	
	
}
.area-list-single li > a:hover {
	font-size: 15px;
	line-height: 20px;
	color: #CC3300;
	text-decoration: none;
}

.areas-heading  {
	
	font-weight: 700;
	font-size: 26px;
letter-spacing: 1px;
	color: #000000;
	line-height:32px;
margin-bottom: 30px;
    margin-top: 40px;
}


/* PAGINATION */
.pagination ul > li > a, .pagination ul > li > span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-left-width: 0;
    background-color: #000000;
}
.textcontent a {
    color: #cccccc;
}

/* FOOTER ///////////////////////////////////////////////////////////// */
footer {
    margin-top: 0px;
    padding-top: 40px;
    padding-bottom: 30px;
    background-color: #251d65;
    line-height: 22px;
    color: #ffffff;
	
}

.footer-logo {
   
background-image: url(../img/local-dating-logo.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 130px 100px;
    min-height: 110px;
	
    
}

.footer-links a {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    font-size: 14px;
    
}

footer a {
    color: #ffffff;
    padding: 8px;
}

footer p {
    font-size: 14px;
    line-height: 16px;
}

footer img {
	width: 50%;
	height: 50%;
}


.hubwrapper {
	display: block;
	width: 880px;
	margin-bottom: 20px;
	margin-top: 2px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}

.signup {
	width: 500px!important;
}
	.chat-box-wrap {
	width: auto!important;
		margin-left: 20px!important;
		margin-right: 20px!important;
}

.select-gender {
	display: block;
	padding: 12px;
	margin-bottom: 20px;
	width: 100%;
}
.select-gender a {
	
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 0px;
    text-align: center;
    line-height: 80px;
	height: 80px;
    width: 50%;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0px;
    display: inline-block;
	text-shadow: none;

}
.select-gender a:hover {
	text-decoration: none;
}

a.male {

background-color: #fff;
    color: #251d65;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;

}

a.female {
background-color:#ff0066;
	color: #fff;
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;

}

.form-gender {
	    font-size: 14px;
    display: inline-block;
    float: left;
    margin-top: 8px;
	text-align: right;
	width: 100%;
}

.form-select {
	
	font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    display: block;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 1px;
}

.select-icon {
	margin-top: 10px;
    margin-right: 12px;
    position: relative;
    float: left;
    display: inline-block;
}

@media screen and (max-width: 768px) {
	.chat-box-wrap {
	width: auto!important;
margin-left: 2px!important;
		margin-right: 2px!important;
}
	
	.signup {
	width: auto!important;
}
	.hubwrapper {
	display: block;
	width: 100%;
	margin-bottom: 40px;
	margin-top: 20px;
	padding: 18px;
}

.heading-wrapper {
    margin-left: 10px;
    margin-right: 10px;
	}
.select-gender {
padding: 0px;
	margin-bottom: 20px;
	margin-top: 20px;
	
}
	.select-gender a {
	height: 70px;
		line-height: 70px;
    font-size: 16px;
    font-weight: 700;
  
}
	.form-gender {
	    font-size: 14px;
    display: inline-block;
    float: left;
    margin-top: 8px;
	text-align: left;
}
}

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

	.hubwrapper {
	display: block;
	width: 100%;
	margin-bottom: 40px;
	margin-top: 20px;
	padding: 8px;
}
}