@import "../css/reset.css";
@import "../css/skeleton.css";
@import "../css/superfish.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700);
@import url(http://fonts.googleapis.com/css?family=Yesteryear);
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block}mark,rp,rt,ruby,summary,time{display:inline}
/* Global properties ======================================================== */
html {width:100%}

body {
  font-family: Trebuchet MS1, Trebuchet MS, sans-serif;
  font-size:13px;
  line-height:18px;
  color:#7fa1bd;
  min-width:960px;
  background:#d5e7f6;
  -webkit-text-size-adjust: none;
}

/*********************************fonts*************************************/
.reg {text-transform:uppercase}
.f_left {float:left}
.f_right {float:right}
.align_right {text-align:right}
.align_center {text-align:center}

.it{font-style:italic}
.let{letter-spacing:-1px}

/*********************************CLASSES**********************************/
.m_bottom_zero{ margin-bottom:0 !important;}
.m_left_zero{ margin-left:0 !important;}
.p_bottom_zero{ padding-bottom:0 !important;}
.p_left_zero{ padding-left:0 !important;}

.clear {clear:both;width:100%;line-height:0;font-size:0;}
.wrapper {width:100%;overflow:hidden}
.extra_wrapper{ overflow:hidden;}
.container{width:100%}
.extra_last, .last{ margin-bottom:0 !important; padding-bottom:0 !important;}
.extra_last{ border:none !important; background:none !important;}
.bg_none{ background:none !important;}
.relative{position: relative;}


/*==================================== Links ======================================================== */
a {
  color:#7fa1bd;
  outline:none;
  text-decoration:none;
  cursor:pointer;
}
a:hover{
  color:#c33a64;
  text-decoration:none;
}

.button1{
  display:inline-block;
  padding:15px 15px;
  margin: 0 0 0;
  box-shadow: 1px 1px 0 #3e70a1;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 16px;
  color:#fff;
  text-transform: lowercase;
  background: url('../images/button1.jpg') repeat-x #418ecc;
 }
.button1:hover{
  background:#519bd5;
  color: #fff;
}

/*********************************Displays*************************************/
.block{ display:block;}
.inline-block{ display:inline-block;}

/*********************************header*************************************/

#main header{
  background-image: url("../images/header_bg.jpg");
  background-repeat: no-repeat;
  background-position: 50% bottom;
  height: 488px;
}

header {
  background-color: #fff;
  padding: 34px 0 0;
  position: relative;
  z-index: 10;
}
header h1{
  
}
header h1 a {
  display:block;
  width:230px;
  height:204px;
  background:url(../images/logo.jpg) 0 0 no-repeat;
  text-decoration:none;
  text-indent:-9999px;
  margin-bottom: -4px;
}

header .slogan1{
  font-size: 56px;
  line-height: 69px;
  color: #8fbfe5;
  font-weight:800;
  text-transform: uppercase;
  margin-bottom: 4px;
}
header .slogan1 span{
  display: block;
  margin-top: -19px;
}

header .slogan2{
  font-size: 28px;
  line-height: 35px;
  color: #14588d;
  letter-spacing: 1px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 9px;
}
header .slogan2 span{
  display: block;
  margin-top: -8px;
}

header .slogan3{
  font-size: 16px;
  line-height: 20px;
  color: #8fbfe5;
  font-weight: bold;
  margin-bottom: 31px;
}
header .slogan3 strong{
  color: #c33a64;
}
header .slogan3 div{margin-top: -4px;}

#page header{padding: 0 0 0;height: 200px;}
#page .slogan1, #page .slogan2, #page .slogan3, #page header h1{float: left;}
#page .slogan1{padding: 32px 0 0 48px;}
#page .slogan2{padding: 40px 0 0 43px;margin-bottom: 4px;}
#page .slogan3{padding-left: 43px;}
/*********************************content*************************************/
#content {
  padding:26px 0px 51px;
  background: url('../images/content_bg.jpg') repeat-x #eaf1f8;
}
.cont_pad{padding:0 0 0 0 !important;}

/*===============================>> Paragraphs <<=============================*/

p {margin-bottom:18px}
.p2{ margin-bottom:13px;}
.p3{ margin-bottom:20px;}
.p4{ margin-bottom:16px;}

/*================================>> LISTS <<========================================*/
.list1{}
.list1 li{
 color: #af2c54;
 margin-bottom: 15px;
}

.list2{}
.list2 li{
  background:url(../images/marker2.png) 0 6px no-repeat;
  padding-left:12px;
  margin-bottom: 6px;
}
.list2 a{}

/*================================>> H <<========================================*/

h2{
  font-size: 30px;
  line-height: 37px;
  color:#0a4878;
  text-transform: uppercase;
  border-top: 4px solid #cde1f3;
  margin-bottom: 23px;
}
h2.h2{color: #fff;border-top: none;letter-spacing: -2px;}
h2 span{color: #af2c54;}

h2.ind{ margin-bottom:18px;}
h2.ind1{ margin-bottom:16px;}

h3{
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 24px;
  color:#c33a64;
}
h3.h3{color: #0a4878;font-weight: 800;}
h3.h3_1{color: #af2c54;font-weight: 800;margin-bottom: 9px;}
h3 a{color: #af2c54;}
h3 a:hover{color: #23416c;}
h3 span{color: #23416c;}
h3.ind1{ margin-bottom:20px;}
/*================================>> GOOGLE FONTS  <<========================================*/
header, .sf-menu a, .sans, .button1, h2, .h3, .h3_1, .list1, .link1, .author, footer .privacy, .search_but{font-family: 'Open Sans', sans-serif;}
.yester{font-family: 'Yesteryear', cursive;}
/*================================>> hovers <<========================================*/
.img_wrap1, .link1, #carousel a, #carousel a .description, .list2 a, .privacy a{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

/*********************************page_1*************************************/
.ext_list>li, .ext_box{ overflow:hidden;}
.ext_list>li>figure, .ext_box>figure{ float:left;}
.ext_list>li>div, .ext_box>div{overflow:hidden;}

#main .online_dating{margin-bottom: 12px;}
.online_dating>div{
  font-size: 15px;
  line-height: 19px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 7px 0 0 0;
  overflow: hidden;
  text-shadow: 1px 1px 2px #80add4;
}

.online_dating .text{
  float: left;
  width: 402px;
  letter-spacing: 1px;
}
.online_dating>figure{
	margin: 0 0 0 0;
  overflow: hidden;
  color: #af2c54;
  width: 440px;
  text-shadow: 1px 1px 1px #c0d9ec;
}
.online_dating>figure span.percent{
  font-size: 59px;
  line-height: 73px;
  padding: 0 0 0 3px;
}
.online_dating>figure span.description{
  font-size: 36px;
  line-height: 45px;
  margin-top: -2px;
  letter-spacing: 1px;
  padding: 0 0px 0 0px;
  margin-left: 28px;
  width: 240px;
}
.online_dating>figure span{
  display: block;
  float: left;
}
.online_dating>figure span.description span{
  margin-top: -20px;
  
}


.m_bot1{margin-bottom: 42px;}

.link1{
  color: #14588d;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  text-decoration: underline;
}

.stories>li{
  margin-bottom: 28px;
}
.stories>li>div{}
.stories>li>figure{
	margin: 5px 10px 0 0;
}
.author{
  font-weight: 800;
  font-size: 14px;
  color: #c33a64;
}
.stories blockquote, .testimonials{
  position: relative;
  margin-bottom: 8px;
}
.stories blockquote:after, .stories blockquote:before, .testimonials:after, .testimonials:before{
  width: 14px;
  height: 12px;
  display: inline-block;
  content: "";
}
.stories blockquote:after, .testimonials:after{
  background: url('../images/quote_right.png') 0 1px no-repeat;
  margin: 0 0 0 3px;
}
.stories blockquote:before, .testimonials:before{
  background: url('../images/quote_left.png') 0 1px no-repeat;
}

.img_wrap1{
  display: inline-block;
  padding: 5px;
  background: #cde1f3;
}
.img_wrap1 img{
  box-shadow: 0 0 0 1px #eaf1f8;
}

a.img_wrap1:hover{background: #c33a64;}
.blue{color: #0a4878;}

.p_top1{padding-top: 14px;}

.banners{}
.banners>li{
  margin-bottom: 10px;
}
/*********************************page_2*************************************/
#page .online_dating{margin-bottom: 42px;}

.about{margin-bottom: 37px;}
/*********************************page_3*************************************/
#join{
  background: #14588d;
  border-radius: 27px;
  min-height: 500px;
  padding: 13px 40px 14px 40px;
  font-size: 17px;
  color: #fff;
  margin-bottom: 21px;
}
#join h2{margin-bottom: 26px;}

#join .row{
  overflow: hidden;
  width: 100%;
  position: relative;
  display: inline-block;
  min-height: 43px;
}
#join .row>span{
  float: left;
  display: block;
  position: relative;
  padding: 6px 0 0;
}
#join .row input[type="text"], #join .row select{
  float: right;
  border: 1px solid #e5e4e4;
  padding: 7px 5px 6px;
  font-family: Trebuchet MS1, Trebuchet MS, sans-serif;
  font-size: 13px;
  color: #868686;
  width: 293px;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#join .title{margin-bottom: 16px;}
#join .row select{padding-bottom: 4px;display: block;cursor: pointer;}
#join .row.agree>span{width: 170px;cursor: pointer;}
#join .row.birth span span{position: absolute;font-size: 12px;width: 100%;left: 0;
bottom: -19px;}
#join .row.birth select{width: 91px;margin-left: 10px;}
#join input[type="checkbox"]{
  width: 21px;
  height: 21px;
  border: none !important;
  outline: none !important;
  cursor: pointer;
}
.color1{color: #c5f336;}
.agree{padding: 10px 0 0;}

.search_but{
  display: inline-block;
  position: relative;
  padding: 15px 80px 16px 20px;
  border-radius: 26px;
  letter-spacing: -1px;
  margin-top: 26px;
  background: url('../images/search_but.jpg') repeat-x #ff8210;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
}
.search_but:after{
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  position: absolute;
  right: 10px;
  top: -7px;
  background: url('../images/zoom.png') no-repeat;
}
.search_but:hover{color: #fff;background: #feb844;}

.people{margin-top: -1px;}
.people li{
  overflow: hidden;
  margin-bottom: 20px;
}
.people a{
  display: block;
  width: 150px;
  float: left;
  margin-right: 10px;
  border-top: 5px solid #fff !important;
}
.people a img{width: 100%;}

.people a .description{
  background: #cde1f3;
  display: block;
  padding: 30px 30px 19px 18px;
  color: #14588d;
  margin-top: 13px;
}
.people a:hover .description{color: #fff;background: #14588d;}
.people a:hover{border-color: #14588d !important;}
/*********************************page_4*************************************/

.profile_list{padding-left: 9px;margin-top: -2px;}
.profile_list span, .profile_list1 span{color: #af2c54;}
.profile_list dd, .profile_list1 dd{margin-bottom: 6px;}
.profile_list dd img, .profile_list1 dd img{margin: 4px -2px 0 0;}

.links{
}
.links a{
  font-weight: bold;
  color: #af2c54;
  padding-top: 5px;
  display: block;
}
.links a:hover{color: #0a4878;}
.links span{display: inline-block;width: 32px;margin-top: -5px;}
.links li{margin-bottom: 10px;}

.user_top{margin-bottom: 13px;}

.about1{margin-bottom: 10px;}
.about1>div{
  padding-top: 1px;
}
.about1>figure{
	margin: 0 0 0 0;
  width: 160px;
}

.blog_list>li{margin-bottom: 34px;}
.blog_links{overflow: hidden;margin-bottom: 12px;}
.blog_links .posted{float: left;}
.blog_links .comments{float: right;}
.blog_links .posted, .blog_links .posted a{
  color: #0a4878;
  font-weight: bold;
}
.blog_links .posted a:hover{color: #C33A64;}
.blog_links .comments a{
  font-weight: bold;
  color: #c33a64;
  text-decoration: underline;
}

.comments a:hover{color: #23416c;}
.blog{}
.blog>div{}
.blog>figure{
	margin: 4px 9px 0 0;
}
/*********************************page_5*************************************/

#search{
  padding: 1px 0 43px;
}
#search input{
  font-size: 13px;
  color: #7fa1bd;
  padding: 9px 20px 8px;
  width: 100%;
  background: #fff;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/****************************footer************************/
footer {
  padding:18px 0 26px;
  border-top: 4px solid #cadeef;
}
footer .privacy{
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
footer .privacy a{
  display: block;
  float: left;
}
footer .privacy span{
  display: block;
  overflow: hidden;
  padding: 21px 0 0 6px;
}
footer .social{
  overflow:hidden;
  float: right;
  padding: 10px 0 0;
}
footer .social a{
  display:block;
  float:left;
  height:15px;
  overflow:hidden;
  margin-left:14px;
}
footer .social a:first-child{margin: 0 0 0 0;}
footer .social a:hover img{
  margin-top:-15px;
}


/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 995px) {
 body{min-width:768px;}
 .online_dating .text{width: auto;float: none;margin-bottom: 15px;}
 #carousel{margin-right: 3px;}
 #carousel li{width: 151px !important;}
 #carousel .es-nav-prev{left: 300px;}
 #carousel .es-nav-next{left: 370px;}
 #page header .slogan1{font-size: 40px;line-height: 48px;padding-left: 20px;}
 #page header .slogan1 span{margin-top: -7px;}
 #page header .slogan2{padding-left: 10px;}
 #page header .slogan2{padding-top: 34px;}
 #page header .slogan3{padding-left: 20px;}
 .img_wrap1{display: block;}
 #join .row span, #join .row input{float: none;width: auto;}
 #join .row input[type="text"],#join .row select{width: 100%;}
 #join .row span{margin-bottom: 10px;}
 #join .row.birth select{width: 30%;float: left;margin: 0 10px 0 0;}
 #join .row.birth span span{bottom: -22px;}
 .people a{width: 128px;}
 .blog>div{overflow: visible;}
}

@media only screen and (max-width: 767px) {
  body{min-width:420px;}
 .online_dating > figure{float: none;}
 .online_dating{margin-bottom: 30px;}
 #carousel{margin-right: 0px;}
 #carousel li{width: 140px !important;}
 #carousel .es-nav-prev{left: 140px;}
 #carousel .es-nav-next{left: 200px;}
 .banners img{width: 100%;}
 footer .social{float: none;}
 .privacy{position: absolute;bottom: -100px;}
 footer{padding-bottom: 120px;}
 #page .slogan1, #page .slogan2,#page .slogan3{display: none;}
 .img_wrap1 img{width: 100%;}
 .people a{width: 200px;}
 .about1>div{overflow: visible;}
 .blog>figure{margin: 0 0 15px;float: none;}
}

@media only screen and (max-width: 479px) {
 body{min-width:300px;}
 .slogan1{display: none;}
 .slogan2{padding-top: 60px;}
 .slogan3{padding: 0px 0 63px;}
 #carousel li{width: 150px !important;}
 #carousel .es-nav-prev{left: 70px;}
 #carousel .es-nav-next{left: 130px;}
 .people a{width: 100%;margin-bottom: 30px;}
 .people li{margin-bottom: 0px;}
 #join .row.birth select{width: 28%;float: left;margin: 0 10px 0 0;}
 #join input[type="checkbox"]{position: absolute;right: 20px;top: 20px;}
}