/*
Theme Name:JWW
Theme URI:https://kodaweddings.com
Author:Koda Weddings
Author URI:https://kodaweddings.com
Description:Theme for Koda Weddings
Version:5.0
*/

/* ---
Table of Contents
1.0 Core ----- body, html, sections etc
2.0 Header ----- styles for the header
3.0 Footer ----- styles for the footer
4.0 Wraps & Rules -----  containers, wraps and consistant styles
5.0 Text Styles ----- font sizes/styles
6.0 Body Overides ----- where specific pages need to overide presets
7.0 Responsive ----- to overide fluid.css styles
8.0 Plugin Styles ----- to overide plugin styles
--- */

/* --- 1.0 Core --- */
body {color:#46484d}
main {overflow:hidden}

/* --- 2.0 Header --- */
header {height:80px;border-bottom:1px solid #f3f3f3;position:fixed;width:100%;z-index:999;background:#fff}
header nav a:hover {border-bottom:1px solid rgba(70, 72, 77, 0.8);padding-bottom:6px}
header a {font-size:12px;letter-spacing:.05em;text-transform:uppercase;line-height:0}
.social li {vertical-align:middle;height:20px;width:20px}
.social a {background:url(https://kodaweddings.com/wp-content/themes/jww/images/social.png) no-repeat;text-indent:-9999px;position:absolute;width:20px;height:20px}
a.fb {background-position:-40px}
a.ig {background-position:-20px}
button, button:hover {background:none;border:none;justify-content:flex-end;padding:0 0 5px;outline:none;cursor:pointer}

/* --- 3.0 Footer --- */
footer {background:#46484d}
footer h5, footer a {color:#fff!important;margin-bottom:15px}
footer a {display:inline-block}
footer p, footer p a {font-size:10px;color:rgba(255, 255, 255, 0.65);font-weight:500}
footer p span, footer p a {margin-right:18px}
.nap span {margin-right:0;line-height:30px}
.nap span a {margin-bottom:0}

/* --- 4.0 Body Overides --- */

body.home .hero, .hero {height:100vh;background:#fff}
body.home .hero div {width:49.78%;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;height:100%}
body.home .hero div:first-of-type {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/hong-kong-wedding-studio.jpg);float:left;background-position:top center}
body.home .hero div:nth-of-type(2) {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/hk-wedding-studio.jpg);float:right;background-position:bottom center}

body.blog article .wrap.flex, body.category article .wrap.flex {justify-content:flex-start}
body.blog article:first-of-type, body.category article:first-of-type {margin-top:120px}
body.blog article, body.category article {margin-bottom:20px}
body.blog h2 a, body.category h2 a {font-style:italic;color:#46484d;line-height:44px}

body.single .vid {width:860px;margin:40px 0;padding-left:0!important;padding-right:0!important}
body.single iframe {width:860px;height:484px}

body.error404 .ac ul li {display:block;margin-right:0}
body.error404 .ac ul li p {margin-bottom:0}
body.error404 .ac span {font-size:150px;margin-bottom:40px}

/* --- 5.0 Wraps, Rules & Classes --- */
.wrap, .in {max-width:1220px;width:100%;margin:0 auto;height:100%;padding-left:30px!important;padding-right:30px!important;box-sizing:border-box}
.flex {display:flex;justify-content:space-between;box-sizing:border-box;align-items:center}
.two {padding:200px 0}
.one, .core + .ac.rel {padding:120px 0}

.hero, .fill {background:#f9f9f9}
.hero.hvid {background:url(https://kodaweddings.com/wp-content/themes/jww/images/hong-kong-wedding-videographer.jpg) center top no-repeat;background-size:cover;display:flex!important;flex-direction:column;justify-content:center}
.hero.core {padding:110px 0 120px;margin-top:80px;height:100%}
.cont {height:100vh;display:flex;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:500;left:0;right:0;margin-top:80px}
.bg div:first-of-type {width:17%;padding-left:16%;padding-top:80px}
.bg div:nth-of-type(2) {bottom:0;position:absolute;font-size:0;width:28%}
.bg div:nth-of-type(3) {position:absolute;right:3%;top:25%;width:20.5%}
.bg img {width:100%;height:auto}

li {display:inline-block;margin-right:28px}
li:last-child {margin-right:0}
.wrap.flex.ac li {background:#f9f9f9;padding:6% 2% 4%;margin-right:1%}
.wrap.flex.ac li:last-child {margin-right:0}

.lnks {position:relative}
.lnks img {transition:opacity 0.5s ease;opacity:1}
.lnks img:hover {opacity:.8}
.third {width:32.8%}
.third img {width:100%!important;height:auto;border:none!important}

.alt {background:rgba(234, 232, 229, 0.58);padding:40px 0;text-align:center}
.alt .wrap div {width:50%;box-sizing:border-box;padding:80px 30px 80px 0}
.alt .wrap div:last-of-type {border-right:none;padding:80px 0 80px 30px;border-left:1px solid rgba(128, 128, 128, 0.4)}
.alt img {border:none!important;margin:0 0 20px 0!important}
.alt .sub {margin-bottom:10px}

img.rel {width:100%;height:auto}
.rel {position:relative}
.vid {cursor:pointer}

.fill img {border:9px solid #fff;margin-right:8%;width:auto}
.fill div ~ img {margin-right:0;margin-left:5%}
.fill .wrap {margin-top:150px}
.fill .wrap:first-child, .port .wrap {margin-top:0}

.in {max-width:920px}
.in img {margin:20px 0;height:auto;width:100%}

.tum {margin-right:3.5%}
.tum img {margin:0;border:9px solid #fafafa;width:555px;height:370px}

.bp {margin-top:68px;text-align:left;width:32.8%} /* Added 2019 */
.bp img {width:100%} /* Added 2019 */

aside {position:fixed;background-color:#fff;border-left:1px solid #f3f3f3;height:100%;width:200px;top:80px;right:0;box-sizing:border-box;overflow:scroll}
aside div {border-bottom:1px solid #f3f3f3}
aside li {padding:10px;border-bottom:1px solid #f3f3f3;margin-right:0}
aside li:last-child {border-bottom:none;margin-bottom:126px}
aside li:hover {background:#f3f3f3}
aside li img {width:100%;display:block}
.asb {position:fixed;border-top:1px solid #f3f3f3;width:100%;background:#fff;bottom:0}

/* --- 6.0 Text Styles --- */
h1, h2, h2 a, h3, h4, h1 span, h4 span, q, .sub, .htwo, .slde_tabs a::after {font-family:'EB Garamond',serif;font-style:italic}
h1 {font-style:normal;font-size:44px;line-height:55px;margin-bottom:26px}
h2, h2 a {font-style:normal;font-size:38px;line-height:46px;margin-bottom:14px}
h3 {font-size:34px;margin-bottom:20px}
h4 {font-size:29px;margin-bottom:20px;font-style:normal}

a, strong, .strong {font-weight:500}
p {margin-bottom:20px}
a, p, footer h5 {font-family:'Work Sans',sans-serif;font-size:14px;line-height:28px;color:rgba(70, 72, 77, 0.8);text-decoration:none;letter-spacing:.01em}
p a, strong, .cont .strong {color:#46484d}
hr {border:none;height:1px;background:#f3f3f3;margin:0}
q {max-width:780px;line-height:55px;font-size:40px;margin-bottom:20px;display:inline-block;color:#46484d;quotes:"\201C" "\201D"}
q:before {content:open-quote}
q:after {content:close-quote}

aside div p {padding:10px 10px 8px;margin-bottom:0;font-family:'EB Garamond',serif}
aside li p {padding-top:15px;line-height:14px;font-size:18px;margin-bottom:4px;font-family:'EB Garamond',serif}
aside li span {color:#46484d94;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;font-weight:100;line-height:10px}
aside li a {overflow:hidden;display:block}

.core h2 {font-style:italic;margin:-20px 0 20px}
.strong, strong {display:inline!important}
.boxd, input[type=submit] {margin-top:20px;background:#46484d;color:#fff;text-transform:uppercase;padding:13px 35px;display:inline-block;font-size:12px;letter-spacing:.1em;min-width:182px;box-sizing:border-box;transition:background-color 0.5s ease;cursor:pointer}
.boxd:hover, input[type=submit]:hover {background:rgba(70, 72, 77, 0.8)}
input[type=submit] {border:none;max-width:300px;margin:0 auto;display:-webkit-box;padding:20px}
.super {border-bottom:1px solid rgba(187, 198, 213, 0.67);padding-bottom:6px;transition:border 0.5s ease}
.super:hover, nav li a:hover {border-bottom:1px solid rgba(70, 72, 77, 0.8)}
.wrap div .boxd + .super {margin-left:30px}
.ac {text-align:center}
.htwo {font-size:38px;line-height:46px;margin-bottom:24px;display:inline-block}
.sub {font-size:22px;margin-bottom:34px;display:block;line-height:32px}
.col {-webkit-column-count:2;-moz-column-count:2;column-count:2;text-align:left;margin:12px 0 18px;column-gap:3.4%}
.lnks .sub {position:absolute;background:#fff;width:84%;bottom:7%;margin:0 8%;padding:14px 22px 18px;text-align:center;box-sizing:border-box}
.lnks span {font-style:normal}
.cont span {display:block}
.cont .boxd, .hvid .boxd, .slde .boxd {margin:18px auto 14px}
.cont h1, .hvid h1 {font-size:52px}
.ad {padding-right:8%}
.hvid span {display:unset}
.hvid h1 {color:#fff;line-height:62px;margin-bottom:20px;margin-top:80px;filter:drop-shadow(0 0 0.75rem #000)}
.hvid .boxd, .vid .boxd {background:#fff;color:#46484d}
.hvid .boxd span, .vid .boxd span {padding-left:10px}
.vid .boxd {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
.wrap.flex.ac h5 {margin:20px 0}
.wrap.flex.ac span {font-size:60px;font-weight:bold;font-style:italic}
.ctac {margin-bottom:20px}
.ctac span {background:url(https://kodaweddings.com/wp-content/themes/jww/images/icons@2x.png) no-repeat;width:20px;height:28px;display:inline-block;vertical-align:middle;margin-left:12px;background-position:-6px;background-size:cover}
.ctac:last-of-type span {background-position:-30px}
.cap strong, .cap .strong {text-transform:uppercase}
.page-numbers {font-size:18px;color:#46484d!important;margin:0 1px 10px;padding:12px 20px;font-weight:normal;display:inline-block}
.roll {max-width:860px;margin:0 auto;display:inline-block;padding-bottom:48px;width:100%}
.roll img {margin:0;margin-bottom:6px}
.roll img:nth-child(odd) {float:left}
.roll img:nth-child(even) {float:right}
.landscape, .combo, .portrait {width:auto!important}
.combo {height:395px!important}
.portrait {height:642px!important}
.landscape {height:285px!important}
.page-numbers.current, .page-numbers:hover {background:#f9f9f9;border-radius:4px}
.page-numbers.dots {background:none}

span.meta {background:#f9f9f9;padding:8px 10px 9px 11px;margin:0px 10px 8px 0px;display:inline-block;border-radius:6px;font-family:'Work Sans',sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.1em} /* Added 2019 */
.bp h5 a {font-size:22px !important;font-style:italic;margin:20px 0 16px;line-height:28px;font-family:'EB Garamond',serif;display:inline-block} /* Added 2019 */
.bp h5 a:hover {color:#46484d} /* Added 2019 */

/* --- 7.0 Responsive --- */
.reach, button, aside div span, .mobnew {display:none}
.mobgo, .mobstay {display:block!important}

/* --- 8.0 Plugin Styles --- */
.slde {position:relative;overflow:hidden}
.slde li {-webkit-backface-visibility:hidden;position:absolute;display:flex;align-items:center;width:100%;justify-content:space-between;box-sizing:border-box;align-items:center}
.slde_tabs {top:-96px;margin:0!important;position:absolute;left:0;height:88px}
.slde1_s1, .slde1_s2, .slde1_s3 {width:33%;margin-right:0;height:88px}
.slde1_s1 a, .slde1_s2 a, .slde1_s3 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/bigday-tab.jpg);cursor:pointer;background-repeat:no-repeat;background-color:rgba(250, 250, 250, 0.38823529411764707);background-size:auto 80px;background-position:6px;width:100%;display:block}
.slde1_s2 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/prewed-tab.jpg)}
.slde1_s3 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/mini-tab.jpg)}
.slde_tabs a:hover {background-color:rgba(250, 250, 250, 1)}
.slde_tabs a::after {position:absolute;transform:translate(0,-50%);font-size:20px;color:#46484d;top:50%}
.slde1_s1 a::after {content:"Wedding Day"}
.slde1_s2 a::after {content:"Pre Wedding"}
.slde1_s3 a::after {content:"Mini Shoot"}
.slde_here {background-color:#fff}
.cost {border-top:104px solid #eaeaea}
.vp .slde1_s1 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/bigdayfilm-tab.jpg)}
.vp .slde1_s2 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/bhs-tab.jpg)}
.vp .slde1_s3 a {background-image:url(https://kodaweddings.com/wp-content/themes/jww/images/minifilm-tab.jpg)}
.vp .slde1_s3 a::after {content:"Mini Film"}

form .flex div {padding:0 3px 0 0;width:50%}
form .flex div:last-of-type {padding:0}
input, textarea {font-size:16px;font-family:"Work Sans";width:100%;padding:22px 30px;box-sizing:border-box;border:1px solid #f3f3f3;margin-bottom:3px;-webkit-appearance:none;box-shadow:none;border-radius:0}
input:hover, input:focus, textarea:hover, textarea:focus, textarea:active, input:active {background:rgba(187, 198, 213, .2);outline:none;color:#000}
input[type="submit"] {max-width:300px}
input[type="submit"]:hover, input[type="submit"]:focus {background:rgba(70, 72, 77, 0.8);cursor:pointer;color:#fff}
.wpcf7-quiz-label {display:none}
.wpcf7-response-output {margin:30px 0 30px 0!important}
.wpcf7-not-valid-tip {top:-20px!important;left:0!important;padding:20px 30px!important;width:100%;box-sizing:border-box;font-family:'Work Sans',sans-serif}
