/*
Theme Name: XY Collective 2020
Theme URI: http://www.x-y.co/
Author: XY Laboratory 
Author URI: http://xycollective.com/
XY Collective Design Studio (XY Collective, XYCO) is a London based brand communication studio, which focuses on providing branding solutions, including visual identification design, graphic design, web development, event management, video production, and some other relative branding services. 
Version: 2020.1

*/

/* GENERAL */
.no-point {pointer-events: none!important;}
:root {--font-base: font-family: 'Raleway', sans-serif; }
.grecaptcha-badge {display: none!important}
html {overflow-x: hidden; max-width: 100%; margin-top: 0px; scroll-behavior: smooth!important;}
body {margin: 0px!important;  background-color: #fcfcfc; overflow-x: hidden; //max-width: 100%;}
.vc_row {margin-left: 0px!important; margin-right: 0px!important}
.page-template-default #header,
.page-template-default #container header,
.page-template-default #copyright{display: none}
.page-template-default #sidebar ul {list-style: none!important; }
.page-template-default footer#footer {height: 0px!important}
ul {padding-inline-start: 20px;}
h2 {font-size: 40px; text-transform: uppercase;font-weight: 600!important }
h3 {font-size: 32px; text-transform: uppercase;font-weight: 600!important}
h4 {font-size: 24px; text-transform: uppercase;font-weight: 600!important}
h5 {font-size: 18px; font-weight: 300}
h6 {font-weight: 300}
h2, h3, h4 {font-family: 'Raleway', sans-serif; font-weight: 400}
h5, h6, a, li {font-family: Roboto; color: #1d1d1d}
h1, h2, h3, h4, h5, h6 {margin-block-start: 0px;margin-block-end: 0px;margin-inline-start: 0px;margin-inline-end: 0px; font-family: 'Raleway', sans-serif; word-wrap: normal;}
h1 {font-size: 8vw; line-height: .9; text-transform: uppercase; font-family:'Raleway', sans-serif; font-weight: 300;}
h1 strong {font-weight: 900; }
a {text-decoration: none}
a:hover {text-decoration: line-through;}
p, li, table {color: #444444; font-family: 'Open Sans', sans-serif;font-size: 14px; line-height: 25px;font-style: normal;font-weight: 200;}
.white p, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white a {color: #ffffff!important}
//p {margin-block-start: 12px!important; margin-block-end: 12px!important;}
input, button {-webkit-appearance: none; border-radius: 0;}
input[type=checkbox] {-webkit-appearance: checkbox!important}

.vc_btn3.vc_btn3-color-inverse, .vc_btn3.vc_btn3-color-inverse.vc_btn3-style-flat {background-color: #111!important}

.no-space .vc_column-inner {padding-top: 0px!important}

#cn-more-info {color: #ffffff; font-style: italic; font-weight: 800}
.error404 #slider-1-slide-1-layer-15 img {filter: brightness(6) }




/* Front End Admin */
#wp-admin-bar-customize,
#wp-admin-bar-comments,
#wp-admin-bar-wp-logo,
#wp-admin-bar-monsterinsights_frontend_button,
#wp-admin-bar-vc_inline-admin-bar-link,
#wp-admin-bar-cs-explain,
#wp-admin-bar-wpseo-menu,
#wp-admin-bar-site-name a:before
{display: none;}





/* White */
//html {filter: saturate(0)!important; }

//foot-area p, foot-area a {color: #ffffff!important; }
//#slider-1-slide-1-layer-15:after {content: url('https://x-y.co/asset/uploads/2020/10/xy-logo-white.svg') }
//#slider-1-slide-1-layer-15 img {display: none}
//.rev-b-span-dark span, .rev-burger.revb-darknoborder span {background: #ffffff!important}

.white .flex-control-paging li a {background: #ffffff!important; width: 14px; height: 14px}
.white .flex-control-paging li a:hover,
.white .flex-control-paging li a.flex-active {background: #888888!important}
.white .flex-direction-nav a:before {color: #ffffff!important}
.white .flex-direction-nav a {text-shadow: none!important}

.white .flipbook-color-light {fill: #ffffff!important}
.white .flipbook-color-light:hover {fill: #949494!important}




/* Responsive */
.max-xl {max-width:2100px; margin-left:auto!important; margin-right: auto!important}
.max-w {max-width:1600px; margin-left:auto!important; margin-right: auto!important}
.max-12, .max-1200 {max-width:1200px; margin-left:auto!important; margin-right: auto!important}
.max-1000, .max-1k {max-width:1000px; margin-left:auto!important; margin-right: auto!important}
.max-800 {max-width:800px; margin-left:auto!important; margin-right: auto!important}
.max-600 {max-width:600px; margin-left:auto!important; margin-right: auto!important}
.max-400 {max-width:400px; margin-left:auto!important; margin-right: auto!important}
.max-300 {max-width:300px; margin-left:auto!important; margin-right: auto!important}
.max-250 {max-width:250px; margin-left:auto!important; margin-right: auto!important}
.max-240 {max-width:240px; margin-left:auto!important; margin-right: auto!important}
.max-210 {max-width:210px; margin-left:auto!important; margin-right: auto!important}
.max-200 {max-width:200px; margin-left:auto!important; margin-right: auto!important}
.xl-on, .l-on, .m-on, .s-on, .xs-on {display: none}
.z-top {z-index: 999!important; position: relative }

@media only screen and (max-width: 1600px) {.xl-on {display: block;} .xl-off {display: none!important; }}
@media only screen and (max-width: 1000px) {.l-on {display: block;} .l-off {display: none!important; }}
@media only screen and (max-width: 768px) {.m-on {display: block;} .m-off {display: none!important; } .m-c {text-align: center!important}; .m-half .wpb_column {max-width: 50%; float: left}}
@media only screen and (max-width: 600px) {.s-on {display: block;} .s-off {display: none!important; } .xs-2 .wpb_column, .xs-half .wpb_column {max-width: 50%; float: left} .xs-4 .wpb_column {max-width: 25%; float: left} }
@media only screen and (max-width: 480px) {.xs-on {display: block;} .xs-off {display: none!important;}}



/* MENU & Footer */

.popmenu .menu a {pointer-events: auto!important;}
.popmenu-group {background-color: #000!important; padding-bottom: 20vh!important}


@media only screen and (min-width: 768px) {}
.rev-burger span {height: 6px!important; width: 36px!important;}
.rev-burger span:nth-child(2) {margin: 4px 0!important}
.open .rev-burger :last-child, .open.rev-burger :last-child {transform: translateY(-10px) rotate(-135deg)!important; }
.open .rev-burger :first-child, .open.rev-burger :first-child {transform: translateY(10px) rotate(-45deg)!important; }



.rev-burger.revb-darknoborder span {background: #000000}
.open .rev-burger.revb-darknoborder span, .open.rev-burger span {background: #ffffff!important}
.popmenu #menu-main-menu, #menu-side-menu {list-style: none!important}
.popmenu #menu-main-menu li a {color: #ffffff; font-size: 8vw; //font-size: 5vw;  line-height: 1.1; font-weight: 900!important; font-family: 'Raleway', sans-serif;}
.popmenu #menu-main-menu li a:hover {text-decoration: line-through}
.popmenu #menu-side-menu li {display: inline-block; padding: 3px 5px;  font-family: 'Raleway', sans-serif;letter-spacing: 0!important}
.popmenu #menu-side-menu a {color: #ffffff!important; font-size: 11px!important; line-height: 18px; text-transform: capitalize;font-weight: 400;  font-family: 'Raleway', sans-serif; letter-spacing: 0!important}
.popmenu #menu-side-menu li a:hover {text-decoration-color: #ffffff!important; color: #ffffff!important; text-decoration: line-through}

.menu-item.m-on {display: none!important}
@media only screen and (max-width: 768px) {
	.menu-item.m-on {display: inline !important}
	.popmenu #menu-main-menu li a {color: #ffffff; font-size: 16vw;}
}


foot-area .vc_row.foot-area {padding: 20px}
.foot-area ul {list-style: none; text-align: right; }
.foot-area ul li {display: inline-block; padding: 3px 5px}
foot-area p, foot-area a {font-weight: 300; font-size: 12px!important;}

.s-port-it a {font-size: 0px!important}
.s-port-it a b {font-size: 24px}

.goback {background-color: #333333; border: none; padding: 12px 50px; color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 800; transition: all 0.3s ease-in-out; cursor: pointer; margin-left: 60px; position: absolute; top: -100px;}
.goback:hover {letter-spacing: 2px}






/* Cookies */
#cn-close-notice:before, #cn-close-notice:after {background-color: #ffffff}
#cn-close-notice {opacity: 1!important}
#cn-close-notice:hover {opacity: .7!important}
#cn-accept-cookie {border-radius: 0!important; padding: 6px 20px!important; }


/* Images and Gallery */
.wpb_gallery_slides.flexslider .slides img {width: 100%!important}

.pp_expand {display: none!important}
.pp_details {display: none}
.pp_top, .pp_bottom {display: none}
.pp_left, .pp_right {background: none!important}
.pp_content {background: none!important}

.half-half-image {overflow: hidden }
.half-half-image .small-img {padding: 10vw}
.half-half-image .right-img {width: 150%; margin-left: 5%}
.half-half-image .left-img {width: 150%; margin-left: -55%}
.vc_images_carousel ol.vc_carousel-indicators {margin: 0 0 -50px -30%!important;}

.vc_images_carousel .vc_carousel-control .icon-next, .vc_images_carousel .vc_carousel-control .icon-prev {font-family: 'Raleway', Heiti!important; font-size: 50px!important;}
.wpb_gallery_slides .flex-control-nav {scale: .5}




/* Flip Books */
@media only screen and (max-width: 768px){
	//.single-r3d {scale: 1.4;}
	.single-r3d #container {padding: 0!important; margin-top: 20vh; margin-bottom: -30vh;}
	.single-r3d #container {height: 90vh; }
	.single-r3d #container .flipbook-main-wrapper {transform: rotate(90deg); //width: 70vh; height: 100vw; }
	.single-r3d .flipbook-bookLayer {position: fixed; top: 0px!important; bottom: 0px!important; }
	.single-r3d .flipbook-menuBottom {display: none!important}
	.single-r3d .flipbook-right-arrow {margin-right: -20px!important; background: none!important; }
	.single-r3d .flipbook-left-arrow {margin-left: -20px!important; background: none!important; }
	//.single-r3d #container .flipbook-main-wrapper,
	//.single-r3d #container .flipbook-main-wrapper .flipbook-bookLayer, 
	//.single-r3d #container .flipbook-main-wrapper .flipbook-bookLayer .book {overflow: auto!important;}
	.single-r3d foot-area .widget_nav_menu {display: none;}
	.single-r3d foot-area .wpb_raw_html p {line-height: 1!important; text-align: left!important;}
}



.flipbook-menuTop .flipbook-menu-left {display: none!important}
.flipbook-border {border: none!important;}
//.flipbook-bookLayer {height: 80vh; margin-top: 10vh; }
.flipbook-menu-right span {background: none!important;}
.flipbook-icon {font-size: 36px!important}

.r3d-template-default header#header, .r3d-template-default footer#footer {display: none}
.r3d-template-default #container {padding-top: 10vh; padding-bottom: 5vh; }
.single-r3d {background-color: #9d9d9d; }
@media only screen and (min-width: 768px) {
	.r3d-template-default #container {min-height: 90vh!important; }
}
@media only screen and (max-width: 768px) {
	.r3d-template-default #container {padding-top: 25vh; }
}


/* VC STRUCTURE */
.wpb_content_element {margin-bottom: 0px!important}
.vc_column-inner {padding-left: 0px!important; padding-right: 0px!important;}
.wpb_text_column {padding: 0px 30px}
.vc_figure, .vc_single_image-wrapper, .vc_single_image-wrapper img {width: 100%!important;}
.vc_btn3 {border-radius: 0px!important; border: none!important; background-color: #1d1d1d; color: #ffffff; text-transform: uppercase; margin: 10px 30px}
.vc_btn3:hover {background-color: #555555!important; }
@media (min-width:768px){.vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item, .vc_media_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item {margin-top: -1px!important;}}


/* Contact Form */
.wpcf7 input, textarea {font-size: 14px; width: calc(100% - 46px); padding: 10px 20px; border: 2px solid #1d1d1d; color: #1d1d1d; background-color: #fcfcfc;}
.wpcf7 input.wpcf7-submit {width: auto; background-color: #1d1d1d; color: #ffffff; text-transform: uppercase; border: none; cursor: pointer; padding: 12px 40px;}
.wpcf7 input.wpcf7-submit:hover {background-color: #666; }
.wpcf7 input[type="checkbox"] {width: auto; font-size: 16px; line-height: 1;}
.wpcf7 span.wpcf7-list-item {margin: 0px!important}



#d-frame {max-width: 1200px; //height: 90vh; margin-left: auto!important; margin-right: auto!important; margin-top: 20vh; margin-bottom: 30vh; padding: 30px}
#d-frame #dek {position: absolute; z-index: 9}
#d-frame #sld {width: 91.5%; margin-left: auto!important; margin-right: auto!important; padding-top: 3.3%; max-height: 62.5%}
#d-frame #sld .wpb_gallery .flex-control-paging {display: none }
#d-frame #sld .wpb_gallery img {height: auto}
#d-frame #sld .wpb_gallery .flex-direction-nav a {width: 50%; height: 100px; font-size: 0px}
#d-frame1 {max-width: 1200px; //height: 90vh; margin-left: auto!important; margin-right: auto!important; margin-top: 20vh; margin-bottom: 30vh; padding: 30px}
#d-frame1 #dek1 {position: absolute; z-index: 9}
#d-frame1 #sld1 {width: 91.5%; margin-left: auto!important; margin-right: auto!important; padding-top: 3.3%; max-height: 62.5%}
#d-frame1 #sld1 .wpb_gallery .flex-control-paging {display: none }
#d-frame1 #sld1 .wpb_gallery img {height: auto}
#d-frame1 #sld1 .wpb_gallery .flex-direction-nav a {width: 50%; height: 100px; font-size: 0px}


.vc_grid-btn-load_more a {background-color: #333333!important; padding: 20px 40px!important}
.vc_grid-btn-load_more a:hover {letter-spacing: 3px}

.wpb_gallery_slides.flexslider .slides img {width: auto; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;}
.flexslider {margin: 0 0 60px; background: transparent!important; border: 0px!important;  border-radius: 0px!important; -o-box-shadow: none!important;box-shadow: none!important; }
.gallery-item img {border: none!important; max-width: 100%; height: auto}
.origin .vc_figure, .origin .vc_single_image-wrapper, .origin .vc_single_image-wrapper img {width: auto!important; margin: 20px}
.book.wpb_text_column {padding: 0px!important}
.b-w {filter: saturate(0) }
.no-padding .vc_column-inner {padding-top: 0px!important;}
.no-padding {padding: 0px!important}
.z999 {z-index: 999!important}
.p-absolute {position: absolute}




/* PORTFOLIO */
.single-portfolios #header,
.single-portfolios #container article header,
.single-portfolios #container article .entry-content>a,
.single-portfolios footer {display: none}
.logo-w {max-width: 300px; margin-left: auto; margin-right: auto}
.client-area .ttl p {font-style: italic!important; font-weight: 200; font-family: Raleway; font-size: 15px!important}
.client-area .aa p {font-size: 21px; line-height: 1.5}
.client-area .bb p {font-size: 18px; line-height: 1.5; font-weight: 300}
.single-portfolios .vc_parallax-inner {background-size: auto 120vh!important; background-position: center!important; }
.single-portfolios .goback {display: none}

.post-password-required { height: 100vh; text-align: center;}
.post-password-form {padding-top: 50vh; }
.post-password-form p {background-color: #fff; max-width: 400px; margin-left: auto; margin-right: auto; padding: 10px}
.post-password-form input {border: none; background-color: #dadada; line-height: 30px; font-size: 14px; padding: 0px 10px}
.single-portfolios #container article.post-password-required .entry-content>a {display: block!important;}
.post-password-required .entry-content img.wp-post-image {min-height: 100vh; min-width: 100vw; width: auto; height: auto; opacity: 1; z-index: -1!important; position: fixed; left: 0px}





/* THING */
.single-things {background-color: #c1c1c1!important}
.single-things #header,
.single-things #container article header,
.single-things #container article .entry-content>a,
.single-things footer {display: none}
.single-things #head-ttl, .single-things #thing-spec {max-width: 1400px; margin-left: auto!important; margin-right: auto!important; z-index: 999}
.single-things #head-ttl .thing-h1 {position: absolute; z-index: 999; top: -20vh; //width: 100%} 
.single-things #head-ttl .thing-desc {position: absolute; z-index: 999; top: -10vh}
.single-things #head-ttl .thing-desc {background-color: #fff; max-width: 250px; padding: 50px}
.single-things #head-ttl .thing-h1 h1 {font-size: 180px; line-height: .75; font-weight: 100;}
.single-things #thing-spec .vc_col-sm-4 {position: absolute; z-index: 999; max-width: 400px; margin-top: 5vh}
.single-things #thing-spec .spec p {border-bottom: 1px solid #1d1d1d; line-height: 1.3; padding-top: 8px; padding-bottom: 2px;}

.things-area .vc_grid-filter.vc_grid-filter-filled-rounded.vc_grid-filter-color-grey>.vc_grid-filter-item, 
.things-area .vc_grid-filter.vc_grid-filter-filled.vc_grid-filter-color-grey>.vc_grid-filter-item {background-color: transparent}
.things-area .vc_grid-filter.vc_grid-filter-filled-rounded.vc_grid-filter-color-grey>.vc_grid-filter-item.vc_active, 
.things-area .vc_grid-filter.vc_grid-filter-filled-rounded.vc_grid-filter-color-grey>.vc_grid-filter-item:hover, 
.things-area .vc_grid-filter.vc_grid-filter-filled.vc_grid-filter-color-grey>.vc_grid-filter-item.vc_active, 
.things-area .vc_grid-filter.vc_grid-filter-filled.vc_grid-filter-color-grey>.vc_grid-filter-item:hover {background-color: transparent; border-bottom: 1px solid}
.things-area {max-width: 2000px; width: 90%;}
.things-list {padding: 0px 20px;}
.things-area .vc_gitem_row .vc_gitem-col {padding: 4px}
.things-list .vc_grid-item {display: inline; width: auto; padding: 0px 10px!important}
.things-list .vc_grid-item .vc_gitem-post-data {margin-bottom: 0px}
.things-list a:hover {text-decoration: line-through!important}
@media only screen and (min-width: 2100px){
	.single-things #head-ttl, .single-things #thing-spec {max-width: 1800px;}
	.single-things #head-ttl .thing-desc {max-width: 400px;}
}
@media only screen and (max-width: 768px){
	.things-area .vc_grid-filter-select {display: none!important;}
	.things-area .vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item, 
	.things-area .vc_media_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item {display: inline-block!important;}
	.things-area {width: 100%;}
}
@media only screen and (max-width: 600px){
	.things-list {padding: 0px 5px;}
	.things-list a {font-size: .9em;}
	.things-list .vc_grid-item {padding: 0px 5px!important;}
	.things-area .list-title {width: 200px;}
}	
	
	
	
	
	
	

/* POST */
.book-list {text-align: center}
.book-list a {color: #1d1d1d1; font-weight: 500; font-size: 16px}
.book-list a:hover {text-decoration: line-through }
.book-list .vc_col-sm-12 {width: auto; text-align: }



/* LIST */
.list-title h2 {font-weight: 300!important; font-size: 40px!important}
.list-it .vc_grid-item {padding: 0px!important}
.list-it .vc_gitem-post-data {margin-bottom: 3px}
.list-it .vc_gitem-post-data-source-post_title, .list-it .vc_gitem-post-data-source-post_title a {font-size: 24px; text-align: center; font-weight: 600; font-family: 'Raleway', sans-serif!important; padding: 0px 10px}
.list-it .vc_gitem-post-data-source-post_title a b, .list-it .vc_gitem-post-data-source-post_title a strong {font-weight: 600!important; font-family: 'Raleway', sans-serif!important;}
.list-it .vc_gitem-post-data-source-post_title a:hover {text-decoration: line-through!important; opacity: 1!important}
.list-it .vc_col-sm-12 {width: auto!important}
.list-it  {text-align: center; width: 90%; min-width: 460px; margin-left: auto; margin-right: auto; padding: 0px 30px}
.list-it .vc_gitem_row .vc_gitem-col {padding: 3px!important}
.textwidget .list-it br {display: none}





@media only screen and (min-width: 2100px) {
	h1 {font-size: 13vh!important}
}




@media only screen and (max-width: 1600px) {
.edge.max-w {margin-left: 15px!important; margin-right: 15px!important;}
}












@media only screen and (max-width: 1000px) {
	h1 {font-size: 10vw!important;}
	.single-things #head-ttl .thing-h1 {position: relative;  top: -12vh;} 
	.single-things #head-ttl .thing-desc {position: relative; top: -8vh;}
	.single-things #head-ttl .thing-desc {max-width: 300px; }
	.single-things #head-ttl .thing-h1 h1 {font-size: 140px!important; line-height: 110px!important}
	.single-things #thing-spec .vc_col-sm-4 {position: absolute;}
	#d-frame {margin-top: 20vh; margin-bottom: 20vh; }
}








@media only screen and (max-width: 768px) {
	h1 {font-size: 13vw!important;}
	#menu-main-menu li a {font-size: 8vh;  font-family: 'Raleway', sans-serif;}
	.single-things #head-ttl .thing-h1 {position: relative;  top: -5vh;} 
	.single-things #head-ttl .thing-desc {position: relative; top: -10vh}
	.single-things #head-ttl .thing-desc {max-width: 100%; padding: 40px; margin: 0px 30px}
	.single-things #thing-spec .vc_col-sm-4 {position: relative; padding: 0px 30px}	
	.single-things #head-ttl .thing-h1 h1 {font-size: 80px!important; line-height: .9!important}

	.foot-area ul#menu-side-menu-1 {padding: 0px}
	.foot-area .menu-side-menu-container .menu {text-align: center!important}
	.s-thing-it {display: none }
	.s-port-it {display: none}
}













@media only screen and (max-width: 600px) {
	h1 {font-size: 64px!important;}
	.wpb_text_column {padding: 0px 15px}
	#menu-main-menu li a {font-size: 7.6vh;  font-family: 'Raleway', sans-serif; letter-spacing: 0!important}
	.single-things .wpb_single_image {width: 150%; margin-left: -25%; padding: 5vh 0}
	.goback {width: 90%; margin-left: 5%; margin-right: auto; position: relative; margin-top: 20vh}
	.single-portfolios .goback {display: block; }
	.client-area .bb p {font-size: 14px; line-height: 1.5}
}





@media only screen and (max-width: 480px) {
	h1 {font-size: 64px!important; line-height: .9!important; font-family: 'Raleway', sans-serif;}
	.single-things #head-ttl .thing-h1 h1 {font-size: 60px!important; line-height: .9!important}
	.post-password-form p {max-width: 320px}
}