/*********************************************
    GRACE TSUMUGI
    VERSION 2.0
    DEVELOPED 10/01/2023
    JUSTIN KERCHER / APOLLO INTERNET MEDIA
*********************************************/

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&Zen+Kaku+Gothic+New:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
    --white: #fff;
    --grey: #ededed;
    --darkergrey: #444;
    --brown: #a6672e;
    --aubergine: #301728;
    --mint: #b0e8dc;
	--black: #000000;
	--bole: #814A46;
}

/*************************************
	Convenience Styling
*************************************/
html, form, body { height: 100%; }
body { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.5; font-weight: 400; color: #333; display: flex; flex-direction: column; }

body.ja { font-family: 'Noto Sans JP', sans-serif; }

#site-wrap { flex: 1 0 auto; background-color: #fff; color: #fff !important; }

b, strong, label, th { font-weight: 700; }

a { color: var(--black); text-decoration: none; }
    a:hover { color: #333; text-decoration: none; }
	
#content a, .container-fluid a, #site-footer-ow a { text-decoration: underline; text-decoration-style: dotted; }

.list-inline-item a, .nav-link, .dropdown-item { text-decoration: none !important; }

h1 small { font-size: 0.72em !important; }
.bg-bole h1 { font-weight: 700; color: #fff; position: relative; padding-bottom: 0.5rem; }
h1 { font-weight: 700; color: var(--darkergrey); position: relative; padding-bottom: 0.5rem; }

h2 small { font-size: 0.72em !important; }
h2 { font-weight: 700; color: #000; position: relative; padding-bottom: 2rem; }
    h2:after { position: absolute; display: block; /*left: 50%;*/ bottom: 0px; width: 150px; height: 2px; background-color: var(--black); content: ""; /*transform: translateX(-50%);*/ }
    

h3 { font-weight: 700; color: #000; font-size: 1.4rem; }
article > header > h2 { margin-top: 2rem; margin-bottom: 2rem; }

a:hover .fa-facebook-official { color: #3b5998 }
a:hover .fa-instagram { color: #C13584 }


/*************************************
	Classes
*************************************/

.img-fill { overflow: hidden; }
.img-wrap { position: relative; overflow: hidden; display: block; }

.border-top { border-top: solid 2px var(--bole) !important; }

.bg-white { background-color: #fff; color: #333; }
.bg-offwhite { background-color: #edeae3; color: #333; }
.bg-aubergine { background-color: var(--aubergine); color: #fff; }
.bg-mint { background-color: var(--mint); color: #000; }
.bg-bole { background-color: var(--bole); color: #fff; }
.bg-grey { background-color: var(--grey); color: var(--darkergrey); }
.bg-black { background-color: #000; color: #fff; }
    .bg-aubergine *, .bg-black * { color: #fff; }

.button { display: inline-block; padding: 10px 30px; /*background-color: var(--darkergrey);*/ color: var(--darkergrey); border: 1px solid var(--darkergrey); border-collapse: collapse; text-transform: uppercase; margin: 15px 0px; text-decoration: none !important; text-align: center;
            -webkit-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out; }
    .button:hover { background-color: #fff; color: var(--darkergrey); }

.bg-bole .button { display: inline-block; padding: 10px 30px; /*background-color: var(--darkergrey);*/ color: var(--white); border: 1px solid var(--white); border-collapse: collapse; text-transform: uppercase; margin: 15px 0px; text-decoration: none !important; text-align: center;
            -webkit-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out; }
    .bg-bole .button:hover { background-color: #fff; color: var(--darkergrey); }

/* Boxes */
.boxes { }
    .boxes .box { display: block; margin-top: 15px; margin-bottom: 15px; }
    .boxes .box h3 { color: inherit; margin-bottom: 0px; }
    .boxes .box p { margin: 0px; }
    .boxes .box .img-wrap  { margin-bottom: 15px; }
    .boxes .box .box-title { margin-top: 15px; text-transform: uppercase; font-weight: 900; }
    .boxes .box .box-content { padding: 15px 0px; display: none; }

/* Article Listing Item */
.article-item { display: block; background-color: #fff; border: 0px; text-decoration: none !important; color: inherit; }
    .article-item img { display: block; position: relative;-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
    .article-item:hover img { transform: scale(1.2); }
    

/* Floating */
.floating { display: inline-block; transform: translateY(0px); animation: float 6s ease-in-out infinite; }

/* Transition all 5s */
a, .button, .btn, .boxes .box .box-title, .boxes .box .box-content, .boxes .box .img-wrap { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }		

.in-view, .slide-in-bottom, .carousel article { -webkit-animation: slide-in-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.brush-icon { position: relative; display: flex; align-items: center; justify-content: center; margin: 0px auto 15px auto; height: 110px; width: 200px; background: url(../images/brush-stroke.png) center center no-repeat; 
              background-size: 100% auto; color: var(--black); text-align: center; font-size: 3rem; align-self: center; font-weight:lighter; }

.page-item.active .page-link { z-index: 3; color: #fff; background-color: var(--black); border-color: var(--black); }
.page-link { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; color: var(--black); background-color: #fff; border: 1px solid var(--black); }
.page-link:hover { z-index: 2; color: #fff; text-decoration: none; background-color: var(--black); border-color: var(--black); }

/*************************************
	Layout
*************************************/

#pre { background-color: var(--bole); color: #var(--white); text-align: right; height: 35px; line-height: 35px; }
	#pre p { font-size: 14px !important; text-align: center !important; }
	#pre a { color: var(--white) !important; }
		#pre a:hover { color: var(--white) !important; }
		
	#pre ul { list-style: none; display: inline-flex; }
	#pre li { margin-right: 15px; }
	
#site-header #site-logo { display: block; max-width: 300px; }

#site-footer { position: relative; z-index: 2000; }
    #site-footer a { color: inherit; }
        #site-footer a:hover { color: var(--black) !important; }
    #site-footer .form-control { border-color: #fff; color: #fff; background-color: transparent; }
    #site-footer .btn { border-color: #fff !important; color: #fff;  }
    #site-footer hr { background-color: rgba(255,255,255,0.3); }
    #site-footer #site-copyright { color: rgba(255,255,255,0.4); font-size: 12px; }

#site-footer-ow { position: relative; z-index: 2000; }
    #site-footer-ow a { color: inherit; }
        #site-footer-ow a:hover { color: var(--black) !important; }
    #site-footer-ow .form-control { border-color: #000; color: #000; background-color: transparent; }
    #site-footer-ow .btn { border-color: #000 !important; color: #000;  }
    #site-footer-ow hr { background-color: rgba(255,255,255,0.3); }
    #site-footer-ow #site-copyright { /*color: rgba(255,255,255,0.4);*/ font-size: 12px; }

 #home-collection, #home-news { overflow: hidden; }
#site-banner header > h2 { margin-top: 0px; padding-bottom: 0px; }
    #site-banner header > h2:after { display: none; }
#home-news { background-image: url(../images/bg.jpg); }
.sitebg { background-image: url(../images/bg.jpg); min-width: 100%; }

/*************************************
	Overrides
*************************************/

/* Form */
.form-control { height: 50px; border-collapse: collapse; -webkit-box-shadow: none; box-shadow: none; border-radius: 0px; }
.btn { border-radius: 0px; }

/* Navbar */
.navbar { padding: 0px; }
.nav-item { position: relative; margin: 0px 10px; font-weight: 700 }
.nav-item:hover a { color: #b26e29; }
.navbar-light .navbar-nav .nav-link { color: #333; }
    .navbar-light .navbar-nav .nav-link:hover { color: #000; }

.dropdown-menu { border-radius: 0px; border-color: #fff; background-color: #fff; color: #b26e29; z-index: 3000; text-align: left; }
    .dropdown-menu a { color: #444 !important; }
    .dropdown-menu a:hover { background-color: #444; color: #fff !important; }

/* Navbar toggle for BS4 */
.icon-bar {	width: 22px; height: 2px; background-color: #000; display: block; transition: all 0.2s; margin-top: 4px }
.navbar-toggler {  border: none;  background: transparent !important; z-index: 20; position: absolute; top: -36px; right: -8px;  }
.navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }
.navbar-toggler .middle-bar { opacity: 0; }
.navbar-toggler .bottom-bar { transform: rotate(-45deg);  transform-origin: 10% 90%; }
.navbar-toggler.collapsed .top-bar { transform: rotate(0); }
.navbar-toggler.collapsed .middle-bar { opacity: 1; }
.navbar-toggler.collapsed .bottom-bar { transform: rotate(0); }

.navbar .lang-toggle { }
    .navbar .lang-toggle img { max-width: 100%; width: 32px; }

/* BS Carousel */
.carousel-item img { animation: banner-zoom 2s ease-in-out; max-width: 100%; }
.carousel-indicators { z-index: 4000; }
.carousel-item .carousel-caption { position: relative; top: auto; right: auto; left: auto; bottom: auto; background-color: var(--aubergine); color: #fff; }


    .gallery-link { position: relative; display: block; }
        .gallery-link i { position: absolute; bottom: 15px; left: 15px; z-index: 10; color: #fff; }

	.sold::before {
		/*
		content: "";
		background-color: red;
		position: absolute;
		bottom: 15px;
		right: 15px;
		border-radius: 50%;
		height: 10px;
		width: 10px;
		z-index: 10;
		*/
		content: "";
		font-size: 11px;
		color: #fff;
		background-color: rgba(170,0,16, 0.7);
		position: absolute;
		bottom: 15px;
		right: 15px;
		border-radius: 0;
		/*height: 10px;
		width: 10px;*/
		padding: 5px;
		z-index: 10;
	}


/*************************************
	Media Queries
*************************************/

@media (max-width: 767px) {
	#pre { min-height: 50px !important; line-height: 50px; text-align: center !important; }
		#pre i { font-size: 21px; }
		#pre p { }
		#pre ul { list-style: none; display: block !important; }

	h1 { font-size: 1.4em; }

	.m-sm-75 { margin-left: -75px; }
	.m-sm-150 { margin-left: -150px; }
	.m-sm-200 { margin-left: -200px; }
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
    /* Classes */

	.new-additions h1 small { font-size: 0.6em !important; }


	/* Image oversize */
    .img-fill img { display: block; min-height: 100%; min-width: 100%; max-width: none !important; }

    /* Layout */
    #site-header #site-logo { max-width: none; }

    /* Convenience */
    /*h1, .h1 { font-size: 3rem; }
    h2, .h2 { font-size: 2.8rem; padding-bottom: 3rem; }*/

    
    /* Boxes */
    .boxes .box { display: block; position: relative; margin-top: 15px; margin-bottom: 15px; }
        .boxes .box .img-wrap { margin-bottom: 0px; }
        .boxes .box .img-wrap img { position: relative; display: block; z-index: 0; width: 100%; }
				
        .boxes .box .box-content { display: block; z-index: 3; position: absolute; top: 50%; left: 0px; right: 0px; color: #fff; 
                                    -webkit-transform: translateY(-50%); transform: translateY(-50%); }
										
            .boxes .box .box-title { padding: 15px; font-size: 24px; margin-top: 0px; font-weight: inherit; text-transform: none; }
            .boxes .box .box-content { opacity: 0; padding: 30px; }
        
            .boxes .box:hover .img-wrap { filter: brightness(50%);  }
            .boxes .box:hover .box-content { opacity: 1; }

    /* Carousel */
    .carousel-item {  }
        .carousel-item .img-fill img { animation: banner-zoom-md 2s ease-in-out forwards; z-index: 0; width: auto !important; min-height: 600px; }
        .carousel-item .carousel-caption { position: absolute; background-color: transparent; text-align: left; left: 0; top: 0px; bottom: 0px; right: 0; color: #ffffff; z-index: 5; }

    /* Animation delays */
    .in-view:nth-child(2) { animation-delay: 0.4s; }
    .in-view:nth-child(3) { animation-delay: 0.8s; }
    .in-view:nth-child(4) { animation-delay: 1.2s; }
    .in-view:nth-child(5) { animation-delay: 1.6s; }
    .in-view:nth-child(6) { animation-delay: 2s; }

}

@media (min-width: 1200px) {
    

    /* Overrides */
    .mt-5 { margin-top: 5rem !important; }
    .my-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
    .mb-5 { margin-bottom: 5rem !important; }
    .py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    
    article > header > h2 { margin-top: 5rem; margin-bottom: 3rem; }
}


/*************************************
	Animation
*************************************/

/* Carousel Banner caption Anim */
@keyframes slide-up {
    0% { transform: translateY(200%); opacity: 0; }
    100% { transform: translateY(-50%); opacity: 1; }
}

@keyframes banner-zoom { 
    0% { transform: scale(1.2); }
    100% { transform: scale(1.0); }
}

@keyframes banner-zoom-md { 
    0% { transform: scale(1.2)  }
    100% { transform: scale(1.0) }
}

/* ----------------------------------------------
 * Generated by Animista on 2022-12-8 13:36:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}