@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root { --color1: #6d5c48; --color2: #dac7ac; --color3: #dac7ac; }

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { background:#f9f9f9; font-family: 'Inter'; color: #333; font-size: 18px; }
.container { max-width: 1500px; }

h1, .h1 { font-size: 3.5em; font-weight: 600; margin-bottom: 3rem; }
h2 { font-size: 2em; color: #000; margin-bottom: 2rem; }
h2 span, section h1 span, section p span { color: var(--color1); }
section p span { font-weight: bold; }
h3 { font-family:"Hanken Grotesk"; font-size: 2em; font-weight: 600; margin-bottom: 2rem; }
h4 { font-size: 4em; }
label { font-weight: 600; }
a { color: #000; text-decoration: none; }
a:hover { color: var(--color1); }
.gold { color: var(--color1); }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.small { font-size: 0.7em; }
.intro { font-style: italic; text-align: right; }
.fluid { width: 100%; }
.nomargin { margin: 0!important; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mb-1 { margin-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.mb-3 { margin-bottom: 3rem!important; }
.pl { padding-left: 4rem; }
.pr { padding-right: 3rem; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.only-xs { display: none; }
.clear { clear: both; }
.border { border:1px solid #e5e8ee; }
.btn { font-size: 1.1em; border-radius: 10px; padding: 0.5rem 0.8rem; transition: all 0.3s ease-out; } 
.btn:first-child:active { background: var(--color2); border-color:var(--color2); }
.btn-primary { border-color: var(--color1); background: var(--color1); color: #FFF!important; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { background: #FFF!important; border-color:var(--color2); color: var(--color1)!important; }
.btn-tertiary { border-color: var(--color2); background: var(--color2); color: #000!important; }
.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary.active { background: #FFF!important; border-color: var(--color2)!important; color: var(--color2)!important; }
.btn i { margin-right: 5px; }
.form-control { font-size: 1.1em!important; }

/* Navbar */
.navbar { padding: 0.5rem 0!important; }
.navbar-brand { padding: 0; margin: 0; }
.navbar-brand img { height: 140px; }
.navbar-brand img:hover { opacity: 0.8; }
.nav-link { color: #333; font-size: 1.2em; padding: 0.5rem 1.2rem!important; border-radius:20px; transition: all 0.3s ease-out; }
.nav-link:hover, .nav-link:active, .nav-link.active { background: var(--color3); }
.navbar { padding: 0;  }
.navbar .btn { font-size: 1em; }
/*.navbar .btn-secondary { }
.navbar .btn-secondary:hover { background: #000; border-color:#000; color: #FFF!important; }*/
.navbar-toggler { background: var(--color1); color: #FFF; border: 0; padding: 1rem; }
.navbar-toggler:focus { box-shadow: none; }

/* Section */
section { padding-top: 3rem; }
section h2 { margin: 2rem 0 1rem; }
section img.float-right { float: right; margin: 0 0 2rem 2rem; max-width:500px; }

/* Hero */
#hero { /*height: 70vh; background-image: url('../pictures/design/hero.png'); background-size:cover;*/ background: #FFF; padding-top: 0rem; text-align: center; }
#hero .container-fluid { padding: 0; }
#hero h1 { font-weight: bold; font-size: 3.1em; margin: 3rem 0 2rem; }
#hero p { font-size: 1.2em; color: #4e5562; margin-bottom: 4rem; }
#hero .btn { font-size: 1.1em; padding: 0.5rem 1.5rem; }

#hero_details { max-width: 800px; }
.hero_detail { margin-bottom: 1.5rem; text-align: center; transition: transform .2s; }
.hero_detail:hover { transform: scale(1.1); }
.hero_detail.active p { font-weight: bold; }
.hero_detail p { padding-top: 1rem; font-size: 0.9em!important; } 
.hero_detail_circle { height: 110px; width: 110px; border-radius: 110px; margin: auto; }
.hero_detail_circle i { padding-top: 30px; font-size: 2.8em; color: var(--color1); }

/* Title */
#title { background: var(--color2); padding: 3rem; margin-bottom: 1rem; }
#title h1 { font-size: 3em; margin: 0; }

/* Home articles */
#articles_home { _padding-top: 0; }
#articles_home a { text-decoration: none; }
.article_home_detail { overflow: hidden; height: 300px; border-radius: 10px; margin-bottom: 1rem; }
.article_home_img { position: relative;  height: 300px; overflow:hidden; background-size: cover; background-position: center; margin-bottom:1rem; transition: all 0.3s ease-in-out; }
.article_home_img:hover { transform: scale(1.1,1.1); }
.article_home_text h3 { font-size: 1.2em; margin-bottom: 0.5rem; }
.article_home_text p { font-size: 0.9em; margin: 0; }

/* Home city */
#city { background: var(--color3); padding: 5rem 0; margin: 0rem 0 -4rem; }
#city h2 { font-size: 3em; }
#city blockquote { background: #FFF; border-radius: 15px; }

/* Articles */
.article { border-radius: 10px; background: var(--color3); margin-bottom: 2rem; }
.article_detail { overflow: hidden; height: 400px; border-radius: 10px 0 0 10px; }
.article_img { height: 400px; background-size: cover; background-position: center; margin-bottom:1rem; }
.article_text { padding: 3rem; }
.article_text .date { font-size: 0.9em; text-transform: uppercase; margin-bottom: 0.5rem; }
.article_text h2 { font-size: 2em; margin-bottom: 2rem; }

/* Listing */
.listing { margin-bottom: 2rem; }
.listing a { text-decoration: none; }
.listing:hover a { color:#fff; }
.listing_detail { position: relative; overflow: hidden; height: 300px; border-radius: 10px 10px 0 0; }
.listing_img { position: relative;  height: 300px; overflow:hidden; background-size: cover; background-position: center; margin-bottom:1rem; transition: all 0.3s ease-in-out; }
.listing:hover .listing_img { transform: scale(1.1,1.1); }
.listing_category { position: absolute; bottom: 1rem; left: 1rem; background: var(--color1); border: 1px solid #FFF; color: #FFF; font-size: 0.8em; padding: 0.4rem; }
.listing_text { border-radius: 0 0 10px 10px; background: var(--color3); padding: 1.5rem; font-size: 1.2em; margin-bottom: 0.5rem; }
.listing_text h3 { font-size: 1.2em; margin-bottom: 0.5rem; }
.listing_text p { font-size: 0.9em; margin: 0; }

.category_detail { border: 1px solid #e5e8ee; border-radius: 10px; padding: 0.5rem; margin-bottom: 1.5rem; }
.category_detail i { margin-right: 0.5rem; }
.category_detail:hover, .category_detail.active { border-color: var(--color2); background: var(--color2); color: #FFF; }
.category_detail:hover:hover i, .category_detail.active i { color: #FFF; }

/* Store detail */
#breadcrumb { font-size: 0.8em; margin-bottom: 2rem; }
#breadcrumb i { padding: 0 0.4rem; }
.store_info { background: #FFF; text-align: center; border:1px solid var(--color3); padding: 2rem 1rem; }
.store_info:hover { background:  var(--color2); transition: all 0.3s ease-out; color: #000; }
.store_info i { display: block; font-size: 2em; margin-bottom: 1rem; }
blockquote { font-size: 1.1em; background: var(--color3); padding: 2rem; margin-bottom: 2rem; }
#map { height: 100px; }

/* Box */
.box { background: var(--color3); border-radius: 10px; padding: 2rem; box-shadow: 0px 4px 18px 0px rgba(17.9, 17.9, 58.9, 0.04); }
.box img { margin-bottom: 1rem; }

/* Accordion */
.accordion-item button { background: #FFF!important; padding: 2rem; font-size: 0.6em; font-weight: 600; color: #000!important; }
.accordion-body { padding: 2rem; }

/* Contact */
.contact_detail { background: var(--color3); padding:2rem; width: 90%; }
.contact_detail p { margin: 0; }
.contact_detail i { font-size: 3em; color: var(--color1); margin-right: 1.8rem; }
label { margin-bottom: 0.5rem; }
.form-control, .form-select { border-radius: 0; padding: 0.6rem 1rem; font-size: 1em; color: #333; }

/* Legal */
#mentions { text-align: left; font-size: 0.9em; }
#mentions h2 { text-align: left; font-size: 2em; margin: 2rem 0 1rem; }

/* Login */
#login h1 { font-size: 2.5em; margin-bottom: 2rem; }

/* Footer */
footer { background: #FFF; margin-top:2rem; }
.footer_detail { padding: 2rem 4rem; }
.footer_detail .logo { height: 150px; margin-bottom: 1rem; }
.footer_detail .logo:hover { opacity: 0.8; }
.footer_detail b { font-size: 1.2em; font-weight: 500; }
.footer_detail a { color:#333; text-decoration: none; }
.footer_detail a:hover { color: var(--color1); }
.footer_detail ul { list-style: none; padding: 0; margin: 0; }
.footer_detail ul li { margin-bottom: 0.5rem; }
.footer_detail .btn { font-size: 0.8em; width: 100%; }
.footer_detail .btn-primary { border-color: #FFF; }
.footer_detail .btn-primary:hover, .footer_detail .btn-primary:active { border-color: var(--color1); background: #FFF!important; color: #333!important; }
#legal { border-top:1px solid var(--color1); padding: 1rem; font-size:0.7em; }
#legal a { color: #333; }

/* Mobile */
@media only screen and (max-width: 768px) {

    body { font-size: 17px; }
	.hidden-xs { display:none; }
    .only-xs { display: block; }
    .mb-3 { margin-bottom: 2rem!important; }
    .mb-xs { margin-bottom: 3rem; }
    .pl { padding-left: 0; }
    .pr { padding-right: 0; }
    h2 { font-size: 1.6em; margin-bottom: 1rem; }

    .navbar { height:auto!important; padding: 1rem 0; }
    .navbar-brand img { height:100px; }
    .navbar-collapse { margin-top: 15px; }
    .nav-link { text-shadow: none; padding: 0.9rem!important; font-size: 1.1em; text-align: center; }
    .navbar-text { display: none; }

    section { padding-top: 2rem; }
    section img.float-right { max-width:auto; width: 100%; margin-bottom: 2rem; }

    #hero { height: auto; background: none; padding-top: 0; }
    #articles { padding-top: 3rem; }
    #store_infos .col { width: 100%; flex: none; margin-bottom: 1rem; }

    label, .form-control, .form-select { font-size: 1.1em; }
    .why_detail { margin-bottom: 1.5rem; }
    #why .icon { margin-bottom: 1.5rem; }
    .contact_detail { width: 100%; }

    .footer_detail { padding: 1rem; }
}

/* Conf */
#confirm_ajax { position: fixed; right: 3rem; bottom: 3rem; background: green; color: #FFF; padding: 0.5rem 1rem; border-radius: 15px; }