/* Theme Name: Majas Cottage Description: Tema skapat för Majas Cottage Version: 3.0 Author: Hillside Peak Author URI: http://hillsidepeak.com/ Copyright: Hillside Peak */ /* =========================== CONTENTS: 01 Defaults & imports 02 Typography 03 Navigation 04 Content & Structure 05 Misc =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Defaults & imports --------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import url(css/fonts.css); @import "css/reset.css"; div, article, section, header, footer, nav, main, li { position:relative; margin:auto; box-sizing:border-box; } div { box-sizing:border-box; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } ::-moz-selection { background:#49caea; color:#333; } ::selection { background:#49caea; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body { text-align:center; font-family:'Open Sans Condensed', sans-serif; font-size:18px; color:#000; } h1, h2, h3, h4, h5, h6 { font-family:'EB Garamond', serif;} h1, h2 { text-transform:uppercase; overflow-wrap:break-word; word-wrap:break-word; word-break:break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } h1 { font-size:3em; margin-bottom:0.25em; font-family:'bulr'; text-transform:none; } h2 { font-size:1.6em; } h3 { font-size:1.45em; } h4 { font-family:'Open Sans Condensed', sans-serif; font-size:1.2em; } article h2 { font-size:2.25em; font-family:'bulr'; text-transform:none; } article p { font-size:1.1em; } a { color:#000; text-decoration:none; font-weight:normal; -webkit-transition: color 250ms ease-in-out; -moz-transition: color 250ms ease-in-out; -o-transition: color 250ms ease-in-out; -ms-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out;} a:hover { color:#333; } article a:link { border-bottom:1px solid #333; display:inline-block; } article a:hover { color:#999; } label { font-size:1.125em; } #headerBanner span { font-family:'bulr', serif; text-transform:none; text-align:center; display:block; font-size:2em; position:relative; } span#ingress { display:block; font-size:1.4em; font-style:italic; } .boxItem h2 { font-family:'bulr'; text-transform:none; font-size:2em; line-height:1; } .boxItem a { color:#FFF; } .boxItem a:hover { color:#999; } .heading { font-family:'EB Garamond', serif; color:#FFF; text-transform:uppercase; } .heading a { color:#FFF; } .heading a:hover { text-decoration:underline; } footer h2 { font-family:'EB Garamond', serif; font-size:1em; } footer h3 { font-family:'Open Sans Condensed', sans-serif; font-size:1.1em; color:#000; font-weight:300; } footer a { color:#000; } footer .upperContent p { text-align:center; font-size:1.1em; } footer .upperContent .heading { font-size:1.8em; padding-bottom:0.7em; color:#000; } footer .lowerContent p { font-size:1em; } footer .lowerContent li a { font-size:1em; } footer .lowerContent li a:hover { text-decoration:underline; } footer .lowerContent li p a { font-size:1em; } footer #copyright { font-size:0.8em; margin-top:3em; } footer #copyright p { text-align:center; } #mainNav a, .boxItem a, footer, footer a { /*text-shadow:0 1px 1px #000;*/ } /* ---------------------------------------------------------------------------------------------------------- 03 Navigation ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ #headerBanner.section { padding:0; margin:4em auto 2em auto; background-color:#FFF; } #logoBox { width:100%; height:auto; padding:0; border:0 !important; } #logoBox #logo { width:30em; max-width:96%; height:auto; text-align:center; display:block; margin:auto auto 0.75em auto; position:relative; } #logoBox #logo img { width:100%; height:auto; } #headerBanner #slogan { width:100%; line-height:1; margin:auto; letter-spacing:1.5px; } #mainNav { height:auto; display:block; text-align:center; padding:0.3em 0; z-index:11; background-color:#FFF; position:absolute; left:0; right:0; } #mainNav.fixed { position:fixed; top:0; bottom:auto; box-shadow:0 3px 5px rgba(0,0,0,0.2); padding:1em; width:100%; max-width:100%; background-color:#f9f9f9; } #mainNav li { display:inline-block; } #mainNav a { font-size:1em; text-align:center; margin:0.5em; } #mainNav a:hover { color:#999; } #mainNav li a:first-child:nth-last-child(2)::after { content:"▼"; font-size:0.5em; margin-left:0.675em; top:-0.25em; position:relative; } #mainNav li.current_page_item a { background-color:rgba(255,255,255,0.3); } #mainNav li > ul { visibility:hidden; opacity:0; transition:visibility 0s, opacity 250ms ease-in-out; } #mainNav li:hover > ul { visibility:visible; opacity:1; } #mainNav li ul { position:absolute; z-index:999999; left:0.5em; top:1em; padding:0; background-color:#f9f9f9; border:1px solid #dedede; } #mainNav li ul li { display:block; } #mainNav li ul li a { width:max-content; display:block; padding:0.25em; } #gotoMain { position:absolute; top:0; left:-100vw; z-index:9999; padding:1em; background-color:#000; color:#FFF; border:1px solid #FFF; } #gotoMain:focus { left:10%; right:10%; top:3em; } #submenu { margin-bottom:2em; text-align:left; } #submenu a.button { margin:0 0.5em 0.5em 0; } #submenu a.button:last-child { margin-right:0; } #showMenu, .showMenuLabel, #mobileMenuLabel span, #menuLabel { display:none; } #menuLabel { text-align:left; background-color:#333; color:#FFF; padding:0.75em; font-size:1.125em; } /*** Google Translate ***/ #google_translate_wrapper { display:inline-block; position:absolute; top:-11em; right:0; z-index:9999; } .goog-te-banner-frame { display:none !important; /*position:relative !important; z-index:1 !important;*/ } /* #gTranslate { display:block; width:1.625em; height:0.8125em; position:absolute; top:-8em; right:0.5em; z-index:9999; } .countryFlag { width:100%; height:auto; } */ /* ---------------------------------------------------------------------------------------------------------- 04 Content & Structure -------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ html { height:100%; } body { height:100%; background-color:#FFF; background-image:none; background-repeat:repeat; background-size:cover; background-attachment:fixed; background-position:center; } body { top:auto !important; /*Google translate fix*/ } main { width:100%; display:block; } .section, article { width:66em; max-width:96%; height:auto; display:block; padding-left:2%; padding-right:2%; margin:auto; } section { } header { } article { text-align:left; line-height:1.75; background-color:#FFF; padding:1em 4em; } #instaBox, footer { /* background-image:url(images/background_dark.png); background-repeat:repeat; border:1px solid #dedede; */ } article, .boxItem, #mainSlideshow, #mainNav li ul { /*box-shadow:0 4px 12px rgba(0,0,0,0.6);*/ } #topSection, #instaBox, #topMenu { margin-bottom:2em; } .boxItem .videoContainer, .slideshow { position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; } .videoContainer { overflow:hidden; } video { width:100%; height:auto; display:block; } article#sektion1 { padding-top:0; } article img { max-width:100%; height:auto; padding:0.625em; border:1px solid #606060; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } article .clean { border:0 !important; box-shadow:none; text-decoration:none; } article tr:nth-child(even) { background-color:#F0F0F0; } article tr:nth-child(odd) { background-color:#FFF; } article tr:first-child { font-weight:bold; } article td { padding:0.5em 1em; } .oneColumn { width:100%; padding:2% 0; } .leftColumn { width:48%; text-align:left; float:left; padding:1% 1%; } .rightColumn { width:48%; text-align:left; float:right; padding:1% 1%; } .innerBox { width:100%; height:100%; display:block; border:1px solid #FFF; z-index:2; } .button { font-size:0.875em; padding:0.75em 1.5em; display:inline-block; text-transform:uppercase; letter-spacing:1px; color:#FFF; margin-top:1em; background-color:#8b8372; border:0; } .button:hover { opacity:0.8; color:#FFF; } /*** Image boxes ***/ #boxGroup.section { padding:0; margin:1.5em auto 3em auto; position:sticky; } .boxRow { width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; margin:auto; margin-bottom:1em; } .boxItem { flex:1 1 20%; flex-direction:column; justify-content:center; max-width:100%; margin-right:1em; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,0.3); height:21em; vertical-align:top; background-color:transparent; padding:0.75em; /*border:0.75em solid rgba(255,255,255,0.75);*/ } .boxItem:last-child { margin-right:0; } .boxItem header { font-size:0.8em; text-align:center; padding:0.8em; position:absolute; left:0; right:0; bottom:0.75em; width:fit-content; max-width:100%; box-shadow:1px 1px 3px rgba(0,0,0,0.3); background-color:rgba(0,0,0,0.7); } .boxItem header img { max-width:100%; } .boxBCF { background:url(images/BCF-logo.png) no-repeat; background-size:cover; width:3.75em; height:2.375em; position:absolute; top:0.5em; right:0.5em; opacity:0.9; } /*** Slideshow ***/ #mainSlideshow { height:23em; padding:0.75em; border:0.75em solid #FFF; position:sticky; } .slideshow img { position:absolute; top:0; left:0; object-fit:cover; width:100%; height:100%; box-sizing:border-box; } .sliderSection { height:37.5em; max-height:37.5em; margin-top:3em; margin-bottom:4em; width:100%; } .nextSlide, .prevSlide { width:4em; height:100%; padding:0.25em; text-align:left; position:absolute; z-index:99999; cursor:pointer; display:inline; background-size:2em 3.75em; background-repeat:no-repeat; background-color:rgba(255,255,255, 0.4); } .nextSlide { right:0; background-position:50% 50%; background-image:url(images/slideArrowRight.svg); } .prevSlide { left:0; background-position:50% 50%; background-image:url(images/slideArrowLeft.svg); } /*** Gallery ***/ .gallery ul { column-width:10vw; column-count:4; column-gap:0; margin:auto; width:100%; } .gallery ul li { margin:0 0.25em 0.5em 0.25em; } .gallery ul li img { border:0; padding:0; box-shadow:none; } /*** IG box ***/ #instaBox { padding:2em 1.25em 2em 1.25em; margin-top:2em; } #instaBox .heading { color:#000; top:-0.5em; text-align:center; } #instaBox .heading a { color:#000; text-decoration:none; } #instaBox h2 { font-size:1.5em; margin:auto; } #instaBox .bgLine1, #instaBox .bgLine2 { width:30%; top:2.3em; } #instaBox p { color:#000; font-style:italic; font-size:1.25em; } .bgLine1, .bgLine2 { height:1px; background-color:#dedede; position:absolute; top:2.1em; } .bgLine1 { left:1.25em; } .bgLine2 { right:1.25em; } /* #ibilder { margin-top:2em; display:flex; justify-content:center; } #ibilder a { display:inline-block; width:14em; height:14em; overflow:hidden; margin-right:0.85em; margin-bottom:0.85em; border:0.3125em solid #dedede; box-sizing:border-box; } #ibilder a:last-child { margin-right:0; } */ .snapwidget-widget { border:0; overflow:hidden; width:100%; height:auto; min-height:17em; margin-top:2em; } /*** Footer content ***/ footer { width:96%; padding:3em 2% 5em 2%; background-color:#FFF; margin-top:3.5em; border:0; /*border-top:1px solid #dedede;*/ color:#000; text-transform:uppercase; } footer .section { padding:0; } footer .upperContent { border-bottom:1px solid #dedede; padding-bottom:3em; } footer .upperContent .bcf-logo_small { position:absolute; top:1.2em; font-size:1em; width:6.8em; height:auto; } footer .upperContent .bcf-logo_left { left:0; } footer .upperContent .bcf-logo_right { right:0; } footer .upperContent .footerMainContact a { font-size:1em; } footer .lowerContent ul { margin-top:3em; width:100%; display:table; table-layout:fixed; } footer .lowerContent ul li { display:table-cell; vertical-align:top; } footer .lowerContent ul li img { width:15%; max-width:3.125em; height:auto; margin-right:5%; margin-bottom:5%; vertical-align:top; float:left; } footer .lowerContent ul li .footerText { width:80%; float:left; text-align:left; } footer .lowerContent ul li ul { margin:0; } footer .lowerContent ul li ul li { display:table-row; text-align:left; } footer .textField, footer .btnWhite { display:block; border:1px solid #000; font-size:0.7em; margin-top:0; color:#000; } footer .textField { max-width:70%; padding:0.9em 1.2em; background-color:transparent; } .cf-fields { display:block; width:30em; max-width:96%; margin:auto; } .cf-fields input, .cf-fields textarea { display:block; width:100%; padding:0.8em 1.2em; background-color:#FFF; border:1px solid #000; box-sizing:border-box; font-family:'Open Sans Condensed', sans-serif; color:#000; font-size:1.125em; margin:0.125em auto 0.75em auto; } .cf-fields input[type="submit"] { margin-top:2em; } /* ---------------------------------------------------------------------------------------------------------- 05 Misc ----------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .clear { clear:both; margin:0; padding:0; } .topSpacer { display:block; width:100%; height:3em; } .button, .cf-fields input[type="submit"] { opacity:1; background-color:#8b8372; color:#FFF; border:1px solid #000; -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } main, #mainSlideshow, #boxGroup { -webkit-animation:fadein 1s; -moz-animation:fadein 1s; -o-animation:fadein 1s; -ms-animation:fadein 1s; animation:fadein 1s; } .wpsl-country, .wpsl-street { display:inline-block; } .wpsl-country:before, .wpsl-street:before { content:' - '; padding:0 0.5em; } .wpsl-country:after, .wpsl-street:after { content:', '; } #wpsl-result-list li p { margin-bottom:0; } #wpsl-wrap.wpsl-store-below #wpsl-result-list li { padding:0.625em; } #wpsl-stores ul li:nth-child(even) { background-color:#f1f1f1; }