@charset "utf-8";

/*
 * File       : block.css
 * Author     : STUDIO-JT (KMS, NICO)
 * Guideline  : JTstyle 2.0
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) HELPER
 * 02) ALIGN
 * 03) CUSTOM COLOR PALETTE
 * 04) HEADING AND TEXT
 * 05) LINK
 * 06) BUTTON
 * 07) LIST
 * 08) GALLERY
 * 09) IMAGE
 * 10) BLOCKQUOTE
 * 11) EMBED
 * 12) TABLE
 * 13) SEPARATOR
 * 14) OVERWRITE
 */



/* **************************************** *
 * HELPER
 * **************************************** */
/* gutenberg style + barba bug fix */
.jt-block-style-helper { display: none; }



/* **************************************** *
 * ALIGN
 * **************************************** */
.jt-blocks .alignwide { max-width: 864rem; margin-left: auto; margin-right: auto; }
.jt-blocks .alignfull { max-width: inherit; margin-left: auto; margin-right: auto; }
.jt-blocks .wp-block-image.alignfull { width: auto; }
.jt-blocks ul.alignfull,
.jt-blocks ol.alignfull,
.jt-blocks .alignfull ul,
.jt-blocks .alignfull ol,
.jt-blocks .alignwide ul,
.jt-blocks .alignwide ol { max-width: inherit; }
.jt-blocks .wp-block-cover.alignfull { max-width: inherit; }



/* **************************************** *
 * CUSTOM COLOR PALETTE
 * !important required to work correctly (TODO dry this code)
 * **************************************** */
.jt-blocks .has-type-01-color,
.jt-blocks p.has-type-01-color { color: #FFFFFF }
.jt-blocks .has-type-02-color,
.jt-blocks p.has-type-02-color { color: #808B97; }
.jt-blocks .has-type-03-color,
.jt-blocks p.has-type-03-color { color: #E8E9EB; }
.jt-blocks .has-type-04-color,
.jt-blocks p.has-type-04-color { color: #B3B2B2; }
.jt-blocks .has-type-05-color,
.jt-blocks p.has-type-05-color { color: #C09A5D; }

.jt-blocks .has-type-01-background-color,
.jt-blocks .wp-block-button__link.has-type-01-background-color,
.jt-blocks a.wp-block-button__link.has-type-01-background-color,
.jt-blocks button.wp-block-button__link.has-type-01-background-color { background-color: #FFFFFF !important; border-color: #FFFFFF; }

.jt-blocks .has-type-02-background-color,
.jt-blocks .wp-block-button__link.has-type-02-background-color,
.jt-blocks a.wp-block-button__link.has-type-02-background-color,
.jt-blocks button.wp-block-button__link.has-type-02-background-color { background-color: #808B97 !important; border-color: #808B97; }

.jt-blocks .has-type-03-background-color,
.jt-blocks .wp-block-button__link.has-type-03-background-color,
.jt-blocks a.wp-block-button__link.has-type-03-background-color,
.jt-blocks button.wp-block-button__link.has-type-03-background-color { background-color: #E8E9EB !important; border-color: #E8E9EB; }

.jt-blocks .has-type-04-background-color,
.jt-blocks .wp-block-button__link.has-type-04-background-color,
.jt-blocks a.wp-block-button__link.has-type-04-background-color,
.jt-blocks button.wp-block-button__link.has-type-04-background-color { background-color: #B3B2B2 !important; border-color: #B3B2B2; }
 
.jt-blocks .has-type-05-background-color,
.jt-blocks .wp-block-button__link.has-type-05-background-color,
.jt-blocks a.wp-block-button__link.has-type-05-background-color,
.jt-blocks button.wp-block-button__link.has-type-05-background-color { background-color: #C09A5D !important; border-color: #C09A5D; }



/* **************************************** *
 * HEADING AND TEXT
 * **************************************** */
.jt-blocks h1,
.jt-blocks h2,
.jt-blocks h3,
.jt-blocks h4,
.jt-blocks h5,
.jt-blocks h6 { margin-top: 60rem; margin-bottom: 20rem; font-weight: 600; line-height: 1.38; clear: both; }

.jt-blocks h1:first-child,
.jt-blocks h2:first-child,
.jt-blocks h3:first-child,
.jt-blocks h4:first-child,
.jt-blocks h5:first-child,
.jt-blocks h6:first-child { margin-top: 0; }

.jt-blocks h1:last-child,
.jt-blocks h2:last-child,
.jt-blocks h3:last-child,
.jt-blocks h4:last-child,
.jt-blocks h5:last-child,
.jt-blocks h6:last-child { margin-bottom: 0; }

.jt-blocks h1 { font-size: 32rem; }
.jt-blocks h2 { font-size: 32rem; }
.jt-blocks h3 { font-size: 24rem; }
.jt-blocks h4 { font-size: 18rem; }
.jt-blocks h5 { font-size: 17rem; }
.jt-blocks h6 { font-size: 17rem; }

.jt-blocks p { margin-bottom: 20rem; font-size: 17rem; line-height: 1.76; font-weight: 400; word-break: keep-all; }
.jt-blocks b { font-weight: 600; }
.jt-blocks em { background: rgba(179, 178, 178, 0.5); }
.jt-blocks strong,
.jt-blocks strong a { font-weight: 600; }

.jt-blocks h1 + p,
.jt-blocks h2 + p,
.jt-blocks h3 + p,
.jt-blocks h4 + p,
.jt-blocks h5 + p,
.jt-blocks h6 + p { margin-top: 0; }
 


/* **************************************** *
 * LINK
 * **************************************** */
.jt-blocks a { word-break: break-all; }
.jt-blocks p a,
.jt-blocks ul a,
.jt-blocks ol a { position: relative; }

.jt-blocks p a:not(.wp-block-button__link),
.jt-blocks ul a:not(.wp-block-button__link),
.jt-blocks ol a:not(.wp-block-button__link) { border-bottom: 1rem solid rgba(255,255,255,0.5); -webkit-transition: border .3s; transition: border .3s; }
html.desktop .jt-blocks p a:not(.wp-block-button__link):hover,
html.desktop .jt-blocks ul a:not(.wp-block-button__link):hover,
html.desktop .jt-blocks ol a:not(.wp-block-button__link):hover { border-bottom-color: #fff; }
 


/* **************************************** *
 * BUTTON
 * **************************************** */
.jt-blocks .wp-block-button__link { color: #000; background-color: rgba(255,255,255,0.8); } /* no jt-block to avoid custom override */
.jt-blocks .is-style-outline .wp-block-button__link,
.jt-blocks .wp-block-button__link.is-style-outline { color: #fff; border-color: #fff; } /* no jt-block to avoid custom override */
.jt-blocks .wp-block-button__link { padding: 22rem 45rem; font-size: 17rem; font-weight: 400; border-width: 3rem; border-radius: 0; -webkit-transition: border .3s, background .3s; transition: border .3s, background .3s; }

.jt-blocks .wp-block-buttons { margin-top: 60rem; margin-bottom: 80rem; }
.jt-blocks .wp-block-buttons .wp-block-button:not(:only-child) { padding-left: 10rem; }
.jt-blocks .wp-block-buttons .wp-block-button:first-child:not(:only-child) { padding-left: 0; }
.jt-blocks .wp-block-buttons.has-text-align-center .wp-block-button:not(:only-child) { padding: 0 10rem; }
.jt-blocks .wp-block-buttons:last-child { margin-bottom: 0; }
.jt-blocks .wp-block-buttons:last-child .wp-block-button { margin-bottom: 0; }

html.desktop .jt-blocks .wp-block-button__link:hover { border-color: #fff; background: #fff; }
html.desktop .jt-blocks .is-style-outline .wp-block-button__link:hover { border-color: #fff; background: #fff; color: #000; }
 


/* **************************************** *
 * LIST
 * **************************************** */
.jt-blocks ul:not(.blocks-gallery-grid),
.jt-blocks ol:not(.blocks-gallery-grid) { margin-bottom: 60rem; }
.jt-blocks li:not(.blocks-gallery-item) { margin-bottom: 2rem; position: relative; font-size: 17rem; line-height: 1.76; font-weight: 400; color: #fff; }
.jt-blocks li:not(.blocks-gallery-item):last-child { margin-bottom: 0; }
.jt-blocks ul:not(.blocks-gallery-grid) li { padding-left: 16rem; }
.jt-blocks ul:not(.blocks-gallery-grid) li:before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; top: 12rem; left: 0; background: #fff; border-radius: 50%; }
.jt-blocks ol:not(.blocks-gallery-grid) { list-style-type: decimal; list-style-position: inside; }

 
 
/* **************************************** *
 * GALLERY
 * **************************************** */
.jt-blocks .wp-block-gallery { margin-top: 80rem; margin-bottom: 80rem; }
.jt-blocks .wp-block-gallery .blocks-gallery-grid { margin: 0 auto; } 
.jt-blocks .wp-block-gallery .blocks-gallery-item { padding: 0; } 
.jt-blocks .wp-block-gallery .blocks-gallery-item img { max-width: inherit; margin: 0; } 
.jt-blocks .wp-block-gallery li.blocks-gallery-item figure > a { display: block; position: relative; border-bottom: none; overflow: hidden; }

.jt-blocks .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { margin: 0; padding: 24rem 16rem 12rem; font-size: 14rem; line-height: 1.42; }



/* **************************************** *
 * IMAGE
 * **************************************** */
.jt-blocks img,
.jt-blocks div.wp-caption { display: block; max-width: 100%; height: auto; } 
.jt-blocks .wp-block-image { margin: 80rem auto 60rem; }
.jt-blocks .wp-block-image a { display: block; } 
.jt-blocks .wp-block-image figcaption { margin: 15rem 0 0; font-size: 14rem; color: #fff; }
.jt-blocks .wp-block-image img { max-width: 100%; width: 100%; margin: 0 auto; }
 


/* **************************************** *
 * BLOCKQUOTE
 * **************************************** */
.jt-blocks blockquote.wp-block-quote { margin: 80rem auto; }
.jt-blocks blockquote.wp-block-quote.is-large ,
.jt-blocks blockquote.wp-block-quote.is-style-large { padding-top: 0; padding-left: 16rem; border-left: 3rem solid #fff; }
.jt-blocks blockquote.wp-block-quote.is-large:before,
.jt-blocks blockquote.wp-block-quote.is-style-large:before { display: none; }

.jt-blocks .wp-block-quote { margin: 0; padding: 30rem 0 0; position: relative; font-style: normal; border: 0; }
.jt-blocks .wp-block-quote p,
.jt-blocks .wp-block-media-text__content .wp-block-quote p { margin: 0; font-size: 20rem; font-style: normal; font-weight: 600; }
.jt-blocks .wp-block-quote:before { content: ''; display: block; width: 22rem; height: 16rem; position: absolute; top: 0; left: 0;background: url(../images/blocks/quote.svg) no-repeat center center; background-size: contain; }
.jt-blocks .wp-block-quote__citation,
.jt-blocks .wp-block-quote cite,
.jt-blocks .wp-block-quote footer { display: inline-block; margin-top: 10rem; font-size: 14rem; color: #fff; }


 
/* **************************************** *
 * EMBED
 * **************************************** */
.jt-blocks .wp-block-embed { margin: 30rem 0 60rem; }

.jt-embed-video { margin-left: auto; margin-right: auto; position: relative; } 
.jt-embed-video__inner { position: relative; width: 100%; padding-top: 56.25%; } 
.jt-embed-video__inner iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #000 url(../images/layout/spin.gif) no-repeat center center; background-size: 32rem 32rem; } 
.jt-embed-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 1; } 
.jt-embed-video__poster:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000000; background: rgba(0, 0, 0, .3); opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; z-index: 1; }
.jt-embed-video__poster .jt-embed-video__img { display: block; width: 100%; margin: 0; } 
.jt-embed-video__overlay { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; background: rgba(0, 0, 0, .4); } 
.jt-embed-video__overlay-btn { display: block; width: 80rem; height: 80rem; position: absolute; top: 50%; left: 50%; margin-top: -40rem; margin-left: -40rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); -webkit-transition: opacity .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: opacity .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: opacity .5s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.23, 1, .32, 1); transition: opacity .5s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.23, 1, .32, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); z-index: 2; } 
.jt-embed-video__overlay-btn svg { display: inline-block; vertical-align: top; width: 100%; height: 100%; }
html.desktop .jt-embed-video__poster:hover:after { opacity: 1;}

html.ios .jt-embed-video__poster { opacity: 0; visibility: hidden; }



/* **************************************** *
 * TABLE
 * **************************************** */
.jt-blocks table { position: relative; border-top: 1rem solid #fff; } 
.jt-blocks table caption { position: absolute; clip: rect(1rem, 1rem, 1rem, 1rem); -webkit-clip-path: inset(0rem 0rem 99.9% 99.9%); clip-path: inset(0rem 0rem 99.9% 99.9%); overflow: hidden; height: 1rem; width: 1rem; padding: 0; border: 0; }
.jt-blocks table tr { width: 100%; } 
.jt-blocks table th.has-text-align-left { text-align: left; } 
.jt-blocks table th.has-text-align-center { text-align: center; } 
.jt-blocks table th.has-text-align-right { text-align: right; } 
.jt-blocks table td.has-text-align-left { text-align: left; } 
.jt-blocks table td.has-text-align-center { text-align: center; } 
.jt-blocks table td.has-text-align-right { text-align: right; }
.jt-blocks table th:first-child,
.jt-blocks table td:first-child { border-left: none; }
.jt-blocks .wp-block-table thead td,
.jt-blocks .wp-block-table thead th { font-weight: 600; text-align: center; }

.jt-blocks .wp-block-table { margin: 0 auto 80rem; }
.jt-blocks .wp-block-table table { border-collapse: separate; }
.jt-blocks .wp-block-table td,
.jt-blocks .wp-block-table th { padding: 18rem 28rem 15rem; font-size: 17rem; line-height: 1.76; color: #fff; border: none; border-left: 1rem solid #fff; border-bottom: 1rem solid #fff; }
.jt-blocks .wp-block-table figcaption { margin: 16rem 0 0; font-size: 14rem; color: #fff; }
html.ios .jt-blocks .wp-block-table td, html.ios .jt-blocks .wp-block-table th { padding-top: 17rem; }

.jt-blocks .wp-block-table.is-style-stripes { border-bottom: none; } 
.jt-blocks .wp-block-table.is-style-stripes table { border-top-color: #fff; } 
.jt-blocks .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: rgba(179, 178, 178, 0.2); }



/* **************************************** *
 * SEPARATOR
 * **************************************** */
.jt-blocks .wp-block-separator { margin-top: 80rem; margin-bottom: 80rem; border-bottom-width: 2rem; border-color: #fff; opacity: 1; }
.jt-blocks .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100rem; }
.jt-blocks .wp-block-separator.is-style-wide { border-bottom-width: 1rem; }



/* **************************************** *
 * OVERWRITE
 * **************************************** */
.jt-blocks > *:first-child { margin-top: 0; }