/*TYPOGRAPHY*/
body, .quote { font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; }

/*size*/
#footer, #footer a { font-size: 12px; }
p, h2 { font-size: 14px; }
h1, h3 { font-size: 18px; }

h3, .strong { font-weight: 700; }
h1, h2 { font-weight: 400; }
p, #footer, #footer a { font-weight: 400; }

p { margin-bottom: 14px; }
h3 { margin-top: 10px; }

#footer, #footer a { line-height: 20px; }
h2 { line-height: 20px; }
h3 { line-height: 24px; }

/*color*/
#footer, #footer a, h1, p { color: #fff; }
h2 { color: #2b2b2b; }
h3 { color: #254fbb; }
#naughty h3 { color: #bb254f; }

/*special*/
#footer, #footer a, h3 { text-transform: uppercase; }

/*BODY*/
body { background: #000; }
#logo { width: 25%; max-width: 300px; margin-left: 2.5%; margin-top: 30px; background: #fff; border-radius: 3px; }
    /*width: 15%; max-width: 250px; margin-left: 2.5%; margin-top: 30px; }*/
#cover { position: absolute; z-index: 10; width: 100%; height: 100%; }
.contents { display: block; width: 100%; margin: auto; position: absolute; top: 40vh; }

/* BG 2 CONTENT ///////////////////////////////////////////////////////////// */
#pagespan { width: 50%; margin-left: 25%; padding-top: 70vh; text-align: center; }

/* QUOTES ///////////////////////////////////////////////////////////// */
.slideshow2 { position: absolute; z-index: 3000; width: 250px; }
.slideshow2 > div { position: absolute; }
.s6 .quote { background: url(../_img/quotebg.png) no-repeat; background-size: 100% auto; background-position: bottom center; padding: 30px 20px 100px 20px; text-align: center; }
.s7 .quote { background: url(../_img/quotebg2.png) no-repeat; background-size: 100% auto; background-position: bottom center; padding: 30px 20px 100px 20px; text-align: center; }
.s8 .quote { background: url(../_img/quotebg4.png) no-repeat; background-size: 100% auto; background-position: top center; padding: 110px 20px 40px 20px; text-align: center; }
.s9 .quote { background: url(../_img/quotebg3.png) no-repeat; background-size: 100% auto; background-position: top center; padding: 110px 20px 40px 20px; text-align: center; }

.s6 { bottom: 85%; left: 50%; margin-left: -320px; }
.s7 { bottom: 85%; left: 50%; margin-left: 130px; }
.s8 { top: 65%; left: 50%; margin-left: -320px; }
.s9 { top: 65%; left: 50%; margin-left: 130px; }

/* MENU ///////////////////////////////////////////////////////////// */
/*BUTTON*/
.menu-button { position: absolute; z-index: 1000; width: 38px; height: 45px; border: none; top: 30px; right: 5%; background: rgba(0,0,0,0); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.menu-button:hover { opacity: 1; }

.menu-button::before, .menu-button::after, .menu-button span::before { position: absolute; display: block; left: 0%; width: 100%; height: 12%; background-color: #fff; content: ""; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75), 0px 0px 30px 0px rgba(72,145,255,1), 0px 0px 30px 0px rgba(72,145,255,1);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75), 0px 0px 30px 0px rgba(72,145,255,1), 0px 0px 30px 0px rgba(72,145,255,1); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.75), 0px 0px 30px 0px rgba(72,145,255,1), 0px 0px 30px 0px rgba(72,145,255,1);
    }
    /*MIDDLE BAR*/
    .menu-button span::before { top: 45%; }
    .menu-button.is-active span::before { visibility:hidden; transition-delay:0.5s }
    .menu-button span::before { visibility:visible; transition-delay:0.5s; }
    /*TOP BAR*/
    .menu-button::before { top: 0; }
    .menu-button.is-active::before { top: 44%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    .menu-button::before { transition-property: top, -webkit-transform; transition-property: top, transform; }
    /*BOTTOM BAR*/
    .menu-button::after { bottom: 0; }
    .menu-button.is-active::after { bottom: 44%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    .menu-button::after { transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }
    /*transition*/
    .menu-button::before, .menu-button::after { transition-duration: 0.5s; transition-delay: 0.5s, 0s; }
    .menu-button.is-active::before, .menu-button.is-active::after { transition-duration: 0.5s; transition-delay: 0s, 0.5s; }

.menu-wrap { position: fixed; z-index: 100; width: 80%; height: 160px; top: -160px; right: 0; background: url(../_img/menubg.png) repeat-x; background-size: contain; -webkit-transition:top 0.5s ease; -moz-transition:top 0.5s ease; -o-transition:top 0.5s ease; transition:top 0.5s ease; }
.menu-wrap ul { height: 100%; }
.menu-wrap ul li { display: inline-block; height: 80%; }
.menu-wrap ul li a { display: block;  width: 100%; height: 100%; }
.menu-wrap ul li a span { opacity: 0; width: 100%; }

    .menu-wrap ul li:nth-child(1) { margin-left: 1%; width: 16%; }
    .menu-wrap ul li:nth-child(2) { width: 14%; }
    .menu-wrap ul li:nth-child(3) { width: 20%; }
    .menu-wrap ul li:nth-child(4) { width: 34%; }

    .mature { background: url(../_img/mature.png) no-repeat; }
    .menu-wrap ul li:hover .mature { background: url(../_img/matureh.png) no-repeat; }
    .senior { background: url(../_img/senior.png) no-repeat; }
    .menu-wrap ul li:hover .senior { background: url(../_img/seniorh.png) no-repeat; }
    .divorced { background: url(../_img/divorced.png) no-repeat; }
    .menu-wrap ul li:hover .divorced { background: url(../_img/divorcedh.png) no-repeat; }
    .single { background: url(../_img/singlep.png) no-repeat; }
    .menu-wrap ul li:hover .single { background: url(../_img/singleph.png) no-repeat; }
    /*GENERALS*/
    #mature .general { background: url(../_img/mdating.png) no-repeat; }
    #mature .menu-wrap ul li:hover .general { background: url(../_img/mdatingh.png) no-repeat; }
    #senior .general { background: url(../_img/sdating.png) no-repeat; }
    #senior .menu-wrap ul li:hover .general { background: url(../_img/sdatingh.png) no-repeat; }
    #divorced .general { background: url(../_img/ddating.png) no-repeat; }
    #divorced .menu-wrap ul li:hover .general { background: url(../_img/ddatingh.png) no-repeat; }
    #singlep .general { background: url(../_img/pdating.png) no-repeat; background-position: left -45px center!important;}
    #singlep .menu-wrap ul li:hover .general { background: url(../_img/pdatingh.png) no-repeat; }

.menu-wrap ul li a { -webkit-transition: background-image 0.2s ease-in-out; -o-transition: background-image 0.2s ease-in-out; -moz-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; }
.menu-wrap ul li a, .menu-wrap ul li:hover .mature, .menu-wrap ul li:hover .senior, .menu-wrap ul li:hover .divorced, .menu-wrap ul li:hover .single, #mature .menu-wrap ul li a, #mature .menu-wrap ul li:hover .general, #divorced .menu-wrap ul li a, #divorced .menu-wrap ul li:hover .general, #senior .menu-wrap ul li a, #senior .menu-wrap ul li:hover .general, #singlep .menu-wrap ul li a, #singlep .menu-wrap ul li:hover .general { background-position: center; background-size: 80% auto; }

.show-menu .menu-wrap { top:0px !important; }
 *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* LOGIN ///////////////////////////////////////////////////////////// */
#login { position: absolute; color: #fff; background: #000; padding: 18px 0; width: 15%; bottom: 40px; left: 2.5%; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 3px; font-size: 20px; opacity: 0.5; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; }
#login:hover { background: #E80683; opacity: 1; }
#naughty #login:hover { background: #f0486f; opacity: 1; }


/* FOOTER ///////////////////////////////////////////////////////////// */
#footer { width: 25%; position: absolute; bottom: 30px; right: 0; text-align: center; }
#footer a, .opacity { opacity: 0.6; transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; }
#footer a:hover { opacity: 1; }

/* LIGHTBOX ///////////////////////////////////////////////////////////// */
.lightbox{position:fixed;height:100%;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.7);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;z-index:10;display:none}

/*BACKGROUND 1 - MEMBER FEED*/
.column { width: 20%; height: 100%; display: inline-block; position: relative; }

/*    GENERAL*/
    #general .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/c2.jpg) repeat-y; background-size: 100% auto; }
    #general .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/c1.jpg) repeat-y; background-size: 100% auto; }
    #general .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/c3.jpg) repeat-y; background-size: 100% auto; }
    #general .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/c4.jpg) repeat-y; background-size: 100% auto; }
    #general .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/c5.jpg) repeat-y; background-size: 100% auto; }

/*    MATURE*/
    #mature .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/c2.jpg) repeat-y; background-size: 100% auto; }
    #mature .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/c1.jpg) repeat-y; background-size: 100% auto; }
    #mature .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/c3.jpg) repeat-y; background-size: 100% auto; }
    #mature .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/c4.jpg) repeat-y; background-size: 100% auto; }
    #mature .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/c5.jpg) repeat-y; background-size: 100% auto; }

/*    DIVORCED*/
    #divorced .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/c1.jpg) repeat-y; background-size: 100% auto; }
    #divorced .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/c2.jpg) repeat-y; background-size: 100% auto; }
    #divorced .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/c3.jpg) repeat-y; background-size: 100% auto; }
    #divorced .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/c4.jpg) repeat-y; background-size: 100% auto; }
    #divorced .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/c5.jpg) repeat-y; background-size: 100% auto; }

/*    Senior*/
    #senior .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/c2.jpg) repeat-y; background-size: 100% auto; }
    #senior .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/c1.jpg) repeat-y; background-size: 100% auto; }
    #senior .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/c3.jpg) repeat-y; background-size: 100% auto; }
    #senior .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/c4.jpg) repeat-y; background-size: 100% auto; }
    #senior .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/c5.jpg) repeat-y; background-size: 100% auto; }

/*    SingleParents*/
    #singlep .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/c2.jpg) repeat-y; background-size: 100% auto; }
    #singlep .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/c1.jpg) repeat-y; background-size: 100% auto; }
    #singlep .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/c3.jpg) repeat-y; background-size: 100% auto; }
    #singlep .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/c4.jpg) repeat-y; background-size: 100% auto; }
    #singlep .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/c5.jpg) repeat-y; background-size: 100% auto; }

/*    Naughty*/
    #naughty .column:nth-of-type(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersn/c2.jpg) repeat-y; background-size: 100% auto; }
    #naughty .column:nth-of-type(2) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersn/c1.jpg) repeat-y; background-size: 100% auto; }
    #naughty .column:nth-of-type(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersn/c3.jpg) repeat-y; background-size: 100% auto; }
    #naughty .column:nth-of-type(4) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersn/c4.jpg) repeat-y; background-size: 100% auto; }
    #naughty .column:nth-of-type(5) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersn/c5.jpg) repeat-y; background-size: 100% auto; }

    /*highlight images*/
    .slideshow { position: relative; width: 100%; height: 100%; float: left; display: block; }
    .slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
    .slideshow img {width: 100%; }
    .s1 img, .s3 img, .s5 img { margin-top: 100%; }
    .s2 img { margin-top: 0%; }
    .s4 img { margin-top: 200%; }

/* CAROUSEL ///////////////////////////////////////////////////////////// */
.carousel-fade .carousel-inner .item { transition-property: opacity; }
.carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; }
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; transform: translate3d(0, 0, 0); }
.carousel-fade .carousel-control { z-index: 2; }
html, body, .carousel, .carousel-inner, .carousel-inner .item { height: 100%; }

/*BACKGROUND 2 - MEMBER FEED*/
#general .item:nth-child(2) { background: url(../_img/bg2.jpg) no-repeat; background-size: cover; background-position: top center; }
#mature .item:nth-child(2) { background: url(../_img/bg2mature.jpg) no-repeat; background-size: cover; background-position: top center; }
#divorced .item:nth-child(2) { background: url(../_img/bg2divorced.jpg) no-repeat; background-size: cover; background-position: top center; }
#senior .item:nth-child(2) { background: url(../_img/bg2senior.jpg) no-repeat; background-size: cover; background-position: top center; }
#singlep .item:nth-child(2) { background: url(../_img/bg2singlep.jpg) no-repeat; background-size: cover; background-position: top center; }
#naughty .item:nth-child(2) { background: url(../_img/bg2naughty.jpg) no-repeat; background-size: cover; background-position: top center; }
/*BACKGROUND 3 - MEMBER FEED*/
#general .item:nth-child(3) { background: url(../_img/bg1.jpg) no-repeat; background-size: cover; background-position: top center; }
#mature .item:nth-child(3) { background: url(../_img/bg1mature.jpg) no-repeat; background-size: cover; background-position: top center; }
#divorced .item:nth-child(3) { background: url(../_img/bg1divorced.jpg) no-repeat; background-size: cover; background-position: top center; }
#senior .item:nth-child(3) { background: url(../_img/bg1senior.jpg) no-repeat; background-size: cover; background-position: top center; }
#singlep .item:nth-child(3) { background: url(../_img/bg1singlep.jpg) no-repeat; background-size: cover; background-position: top center; }
#naughty .item:nth-child(3) { background: url(../_img/bg1naughty.jpg) no-repeat; background-size: cover; background-position: top center; }


/* MEDIA QUERIES ///////////////////////////////////////////////////////////// */

@media screen and (max-width: 1000px) {
/* MENU /// */
.menu-wrap ul { height: 40%; margin-top: 2%; }
    .menu-wrap ul li:nth-child(1) { margin-left: 7.5%; width: 25%; }
    .menu-wrap ul li:nth-child(2) { margin-left: 3%; width: 23%; margin-right: 32%; }
    .menu-wrap ul li:nth-child(3) { margin-left: 5%; width: 28%; }
    .menu-wrap ul li:nth-child(4) { width: 48%; }
    #singlep .general { background-position: left -36px center!important;}
/* QUOTES ///////////////////////////////////////////////////////////// */
.s6 { bottom: inherit; top: 20%; left: 50%; margin-left: -250px; }
.s7 { bottom: 85%; left: 50%; margin-left: 50px; }
.s8 { top: 60%; left: 50%; margin-left: -250px; }
.s9 { top: 60%; left: 50%; margin-left: 50px; }
.s6 .quote, .s7 .quote { padding: 20px 10px 82px 10px; }
.s8 .quote, .s9 .quote { padding: 82px 10px 20px 10px; }
/* LOGIN ///////////////////////////////////////////////////////////// */
#login { bottom: 50px; width: 25%; left: 37.5%; }
/* FOOTER ///////////////////////////////////////////////////////////// */
#footer { bottom: 10px; width: 100%; }
#footer ul li { display: inline-block; margin: 5px 10px; }
#footer a, .opacity { opacity: 1; }
#pagespan { width: 90%; margin-left: 5%; }

    /*BACKGROUND 1 - MEMBER FEED*/
.column { width: 25%; height: 100%; display: inline-block; position: relative; }
.column:nth-of-type(5), #slideshow5 { display: none; }
}

@media screen and (max-width:736px) {
#logo { width: 53%; max-width: 250px; }
/* MENU ///////////////////////////////////////////////////////////// */
.menu-wrap { width: 100%; height: 160px; top: -160px; }
.menu-wrap ul { height: 40%; }
    .menu-wrap ul li:nth-child(1) { margin-left: 8%; width: 31%; }
    .menu-wrap ul li:nth-child(2) { margin-left: 4%; width: 29%; margin-right: 0%; }
    .menu-wrap ul li:nth-child(3) { margin-left: 2%; width: 38%; }
    .menu-wrap ul li:nth-child(4) { width: 59%; }
/* BGs ///////////////////////////////////////////////////////////// */
.item > div { display: none; }
/*    NICHES*/
#general .item:nth-child(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/members/mobilebg.jpg) repeat-y; background-size: cover; }
#mature .item:nth-child(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersm/mobilebg.jpg) repeat-y; background-size: cover; }
#divorced .item:nth-child(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/membersd/mobilebg.jpg) repeat-y; background-size: cover; }
#senior .item:nth-child(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberss/mobilebg.jpg) repeat-y; background-size: cover; }
#singlep .item:nth-child(1) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)), url(../_img/memberssp/mobilebg.jpg) repeat-y; background-size: cover; }
#naughty .item:nth-child(1) { background: linear-gradient(rgba(26,0,6,0.5), rgba(2,0,20,0.5)), url(../_img/membersn/mobilebg.jpg) repeat-y; background-size: cover; }

.item:nth-child(2) { background: linear-gradient(rgba(2,0,20,0.3), rgba(2,0,20,0.3)),url(../_img/bg2.jpg); background-size: cover; background-position: center left 20%; }
.item:nth-child(3) { background: linear-gradient(rgba(2,0,20,0.2), rgba(2,0,20,0.2)),url(../_img/bg1.jpg); background-size: cover; background-position: center left 30%; }
#naughty .item:nth-child(2) { background: linear-gradient(rgba(26,0,6,0.3), rgba(26,0,6,0.3)),url(../_img/bg2naughty.jpg); background-size: cover;
    background-position: center left 20%;
}
#naughty .item:nth-child(3) { background: linear-gradient(rgba(26,0,6,0.2), rgba(26,0,6,0.2)),url(../_img/bg1naughty.jpg); background-size: cover;
    background-position: center left 30%;
}
/* EXTRAS ///////////////////////////////////////////////////////////// */
.lightbox{background:rgba(0,0,0,0.5);}
.contents { position: relative; top: auto; margin-top: 20px; box-sizing: border-box; padding: 0 6%; z-index: 1000!important; }
#footer { position: relative; padding: 50px 10px 20px 10px; }
#login { position: relative; box-sizing: border-box; bottom: inherit; left: inherit; display: inline-block; margin: 0 15%; width: 70%; opacity: 0.9; }
body { background: linear-gradient(rgba(2,0,20,0.3), rgba(2,0,20,1)), url(../_img/mbg.jpg) repeat-y; background-size: 100% auto; }
body#naughty { background: linear-gradient(rgba(26,0,6,0.3), rgba(26,0,6,1)), url(../_img/mbgnaughty.jpg) repeat-y; background-size: 100% auto; }
}

body {overflow: hidden; }