/* Universal
============================================================== */
*{box-sizing: border-box;}
a {color: #00759b; text-decoration: none; cursor: pointer;}
body {overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* Container
============================================================== */
.container{ width: 92%; max-width: 960px; margin: 0 auto; position: relative;}

/* Hidden Sections 
============================================================== */
#mobile-footer{display: none;}

/* Hero Section
============================================================== */
#hero { width: 100%; height: 366px; position: relative;}
#hero h2 {font-family: georgia, serif; font-size: 75px; color: white; letter-spacing: 1px; padding-top: 60px;}
#hero p {font-size: 30px; font-weight: 400; color: white; padding-top: 20px; line-height: 1.2;}
#hero span {font-weight: 700;}
.let-us-know {display: block; width: 250px; margin: 40px auto; padding: 15px; font-size: 30px; font-weight: 800; color: #f8ae37; border: 3px solid #f8ae37; transition: background .3s ease; text-transform: uppercase; text-decoration: none; transition: all .3s ease;}
.let-us-know:hover {background: #f8ae37; color: white;}
.scrollable-slider .slider-wrapper { background: url(../images/success/hero.jpg) repeat-x; height: 366px; width: 100%;}
#hero .container {position: absolute;}
#hero .container {position: absolute; top: 0; width: 100%; max-width: 100%; text-align: center;}

/* Main Content Area
============================================================== */
#main { padding: 60px 0;}
#content { width: 680px; float: left;}

.page-title{ width: 660px; text-align: center; padding-bottom: 15px; border-bottom: 3px dotted #ccc; position: relative;}
.page-title h2 {color: black; font-size: 24px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; position: relative; }
.page-title h2:before, .page-title h2:after {content: ""; width: 130px; height: 3px; background: black; position: absolute; top: 10px}
.page-title h2:after {right: 0;}
.page-title h2:before {left: 0;}
.page-title h3 {font-family: georgia, serif; font-size: 48px; color: #ae284f; padding-top: 20px;}
.page-title p {font-size: 14px; color: #333333; padding-top: 8px;}

#page-content {width: 660px; padding-top: 30px; border-bottom: 3px dotted #ccc;}
#page-content p {line-height: 1.3; padding: 12px 0;}
.image {width: 135px; height: 115px; margin-bottom: 8px;}

/* Main page 
============================== */
#category-list li {width: 135px; height: 155px; float: left; margin: 0 40px 40px 0; text-align: center; vertical-align: top;}
#category-list li:nth-of-type(4n){margin-right: 0;}

/* Categories Page
============================== */
#category-contents li {margin-bottom: 30px; position: relative;}

.thumbnail { width: 125px; height: 105px; float: left; margin-right: 20px;}
.story-info {line-height: 1.2;}

.couple-name {text-decoration: underline; font-size: 20px; font-weight: bold;}
.summary {padding-top: 5px;}
.read-more {text-decoration: underline; font-weight: bold;}
.match-info{}
.location, .match-date {padding: 4px 0 0 0; display: block; height: 25px;}
/*.location {background: url(../images/success/pin.png) no-repeat;}*/
.location:after {content:"|"; padding: 0 15px;}
.match-date {font-weight: bold;}
.pin, .ring {display: inline-block; margin-right: 4px;}
.pin {width: 12px; height: 15px; background: url(../images/success/pin.png); background-size: 12px 15px;}
.ring {width: 12px; height: 16px; background: url(../images/success/ring.png); background-size: 12px 16px;}

.pagination {padding-top: 30px; text-align: center; font-weight: bold;}
.pagination a {display: inline-block; margin-right: 7px; color: #00759b; line-height: 16px;}
.pagination span {text-transform: uppercase; color: #4c4c4c; margin-right: 15px;}
.pagination .active {padding: 4px 6px 3px; background: #00759b; color: white;}

.previous, .next {width: 10px; height: 18px; background: url(../images/success/arrow.png) no-repeat;}
.next {transform: rotate(180deg);}

/* Story Page
============================================================== */
.page-title nav a {position: absolute; display: block; top: 60px; padding: 4px; font-size: 12px; text-transform: uppercase; font-weight: 800;}
.previous-story {left: 0;}
.page-title nav a:hover {background: #38889f; color: white;}
.next-story {right: 0;}

.story-photo {display: inline; float: left; margin-right: 20px;}
.story h3 {font-weight: bold; color: #0c6774; font-size: 24px;}
.story-location, .story-date {font-size: 18px; margin: 10px 0 5px;}
.story-location img, .story-date img {margin: -5px 5px 0 0; display: inline; float: left;}
.story-date {font-weight: bold;}

hr.spacer {height: 0px; border: 0; margin-top: 15px; border-bottom: 1px solid #f8ae37;}

.story-navigation { width: 660px; margin-top: 15px;}
.story-navigation a {display: block; padding: 4px; font-weight: 800; font-size: 12px; text-transform: uppercase;}
.story-navigation nav a:first-of-type {float: left;}
.story-navigation nav a:last-of-type {float: right;}
.story-navigation a:hover {color: white; background: #38889f;}

#page-content p.go-back {margin-bottom: 1.3em;}

/* Sign Up Form
============================================================== */
.form { width: 660px; padding-top: 45px;}
.form img {max-width: 100%;}

/* Sidebar Area
============================================================== */
#sidebar {width: 260px; float: right; padding-left: 35px; border-left: 1px solid #bebebe;}
#sidebar h3 {font-size: 18px; text-transform: uppercase; color: #ae284f; font-weight: bold; padding-bottom: 7px; border-bottom: 3px dotted #cccccc;}
#sidebar ul {padding-top: 5px;}

.categories, .featured-couples { padding-top: 35px; padding-bottom: 40px;}
.featured-couples {display: none; padding-bottom: 40px;}
#sidebar li {padding: 8px 0 5px; border-bottom: 1px solid #ccc;}