@import url('https://fonts.googleapis.com/css?family=Mouse+Memoirs|Open+Sans:400,700,800&subset=latin-ext');

/* added from previous theme */


/* html */

html {
  background-image: url("../images/bg-html.gif");
  /*background-image: url("../images/bg-knit-seafoam.png");*/
  background-color: #B9DABB;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.05em;
  color: #5E3B25;
}


/* body */

body {
  margin: 0;
  padding: 0;
  background-image: url("../images/bg-wood-medium-lines.png");
  background-repeat: repeat-x;
}

/* wrapper */

#wrapper {
  width: calc(100% - 125px);
  margin: 35px auto 0;
  padding: 25px 0;
}

/* inside */

#inner-wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: 20px;
}


/* header */

header {
  width: calc(100% - 40px);
  height: 136px;
  background-repeat: no-repeat;
  background-color: #FFF;
  padding: 20px 20px 0;
  border-radius: 999px 999px 0 0;
}


/* header inside */

header .inside {
  width: calc(100% - 4px);
  height: 132px;
  background-repeat: repeat;
  background-color: transparent;
  position: relative;
  border: 2px dashed #f29987;
    border-bottom-width: 2px;
    border-bottom-style: dashed;
    border-bottom-color: rgb(242, 153, 135);
  border-bottom-width: 2px;
  border-bottom-style: dashed;
  border-bottom-color: rgb(242, 153, 135);
  border-radius: 130px 130px 0 0;
  margin: 0;
  padding: 2px 2px 0;
  border-bottom: 0 none;
}


/* header region */

.region.region-header {
  /*background-image: url("images/bg-stars-pink.png");*/
  /*background-image: url("images/bg-header-pinky-pink-10.png");*/
  background-image: url("images/bg-header-seafoam-xmas-2017.png");
  background-size: cover;
  border-radius: 127px 127px 0 0;
  margin: 0;
  height: 132px;
  position: relative;
  width: 100%;
}


/* header site branding */

#block-retrohugs-site-branding {
  top: -40px;
  margin: 0 auto;
  padding: 0;
  width: 540px;
  text-align: center;
  position: relative;
}

/* header site logo */

.site-logo {
  display: none;
}
  
/* header site name */

.site-name {
  width: 540px;
  height: 160px;
  display: block;
  background-image: url("images/logo2.svg");
  background-repeat: no-repeat;
  margin: 0 auto;
}

.site-name a {
  width: 540px;
  height: 160px;
  display: block;
  padding: 0;
  margin: 0;
  text-indent: -5000px;
}

/* header site slogan */

.site-slogan {
  width: 434px;
  height: 86px;
  display: block;
  background-image: url("images/bg-slogan.png");
  background-repeat: no-repeat;
  margin: -68px auto 0;
  text-indent: -5000px;
}

.nl-retrohugs-com .site-slogan {
  background-image: url("images/bg-slogan-nl.png");  
}

/* header flamingo */

#pinky {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  z-index: 5;
  top: -50px;
  right: calc(20% - 200px);
  background-image: url("images/bg-flamingo-pinky-2.png");
  /*background-image: url("images/bg-flamingo-pinky-2-xmas-5.png");*/
  background-repeat: no-repeat;
  background-size: cover;
}

/* layout container */

.layout-container {
  width: 100%;
  background-color: #FFF;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
}


/* navigation */

nav#block-navretrohugs, nav#block-navretrohugsnl {
  font-family: 'Mouse Memoirs', sans-serif;
  font-weight: 400;
  background-image: url("images/bg-scalloped-menu.png");
  background-position: bottom center;
  height: 42px;
  height: 52px;
  color: #FFF;
  margin: 0 auto;
  padding: 8px 0 0;
  font-size: 18pt;
  font-size: 25pt;
  text-align: center;
}

h2#block-navretrohugs-menu, h2#block-navretrohugsnl-menu {
  display: none;
}

#block-navretrohugs ul.menu, #block-navretrohugsnl ul.menu {
  padding: 0;
  margin: 0;
  text-align: center;
}

#block-navretrohugs li.menu-item, #block-navretrohugsnl li.menu-item {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  background: none;
  list-style-type: none;
}

nav#block-navretrohugs a, nav#block-navretrohugsnl a {
  color: #FFF;
  text-decoration: none;
  font-weight: normal;
}

nav#block-navretrohugs .contextual-links a, nav#block-navretrohugsnl .contextual-links a {
  color: black;
}


/* main */

h1.page-title {
  /*width: 540px;*/
  /*height: 160px;*/
  /*display: block;*/
  /*background-image: url("images/logo2.svg");*/
  /*background-repeat: no-repeat;*/
  margin: 0 auto;
}

/* sidebar basics */

.region-sidebar-first ul.menu, .region-sidebar-second ul.menu, .region-bottom ul.menu {
  margin-left: 0;
}

.region-sidebar-first ul li, .region-sidebar-second ul li, .region-bottom ul li {
  background-image: url("images/bullet-heart-blue.png");
  background-repeat: no-repeat;
  background-position: 0 6px;
  padding: 0 0 0 15px;
  list-style-type: none;
  margin: 0;
}


/* left sidebar */

.layout-sidebar-first {
  margin: 0;
  grid-area: 1 / 1 / 3 / 3;
}

#block-categories, #block-categorieen {
  width: calc(100% - 30px);
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.25);
  padding: 15px;
  margin: 0 0 20px;
  border-radius: 4px 0 0 4px;
  background-color: hsla(0, 0%, 98%, 1);
}

#rosiesocosy-sidebar-link {
  background-image: url("images/bg-rosiesocosy.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 300px;
  margin: 0 auto 20px;
  text-align: center;
}

#rosiesocosy-sidebar-link a {
  text-indent: -5000px;
  display: block;
  width: 300px;
  height: 300px;
  line-height: 0;
}


/* main content */

.main-content-wrapper {
  margin: 0;
  padding: 0;
  grid-area: 1 / 3 / 3 / 7;
}

#block-views-block-announcements-block-announcements-retrohugs {
  background-color: #f8e6c3;
  padding: 15px;
  margin: 0 0 20px;
  border-radius: 6px;
  border-bottom: 5px solid #f5d492;
}

#block-views-block-announcements-block-announcements-retrohugs h2 {
  margin: 0 0 10px;
  color: #b38e43;
}

#block-views-block-announcements-block-announcements-retrohugs a,
#block-views-block-announcements-block-announcements-retrohugs a:link,
#block-views-block-announcements-block-announcements-retrohugs a:active,
#block-views-block-announcements-block-announcements-retrohugs a:visited {
  color: #c5a460;
}

#block-views-block-announcements-block-announcements-retrohugs a:hover {
  color: #b38e43;
}

.view-display-id-frontpage_retrohugs_recent .views-row {
  word-wrap: break-word;
  margin: 0;
  width: 100%;
}

.image-style-frontpage-retro-hugs-latest {
  width: 100%;
  height: auto;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper {
  border-radius: 3px;
  background-color: #FFF;
  border: 1px solid #E1E3DF;
    border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: #CBCCC9;
  display: inline-block;
  position: relative;
  padding: 10px;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
  word-wrap: break-word;
  width: calc(100% - 20px);
  margin: 0 0 20px;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .tags-title {
  margin: 0 0 5px;
  display: block;
  font-family: 'Mouse Memoirs',sans-serif;
  font-weight: 400;
  color: #f29987;
  font-size: 25pt;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_recent .views-row a .tags-title:hover {
  color: #fdbfa4;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .view-field-wrapper-title {
  word-wrap: break-word;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .read-more-link {
  color: #BBC056;
  text-decoration: none;
  font-weight: bold;
  font-size: 80%;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .read-more-link:hover {
  color: #B8D9BA;
}

.view-display-id-frontpage_retrohugs_list .view-content {
  grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  display: grid;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 0;
}

.view-display-id-frontpage_retrohugs_list .views-row {
  word-wrap: break-word;
  margin: 0;
  width: 100%;
}

.image-style-frontpage-retro-hugs-list {
  width: 100%;
  height: auto;
}

.view-display-id-frontpage_retrohugs_list .views-row .view-field-wrapper {
  border-radius: 3px;
  background-color: #FFF;
  border: 1px solid #E1E3DF;
    border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: #CBCCC9;
  display: block;
  padding: 10px;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
  word-wrap: break-word;
}

.view-display-id-frontpage_retrohugs_list .views-row .view-field-wrapper .tags-title {
  margin: 0 0 5px;
  display: block;
  font-family: 'Mouse Memoirs',sans-serif;
  font-weight: 400;
  color: #f29987;
  font-size: 18pt;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_list .views-row a .tags-title:hover {
  color: #fdbfa4;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_list .views-row .view-field-wrapper .view-field-wrapper-title {
  word-wrap: break-word;
}

.view-display-id-frontpage_retrohugs_list .views-row .view-field-wrapper .read-more-link {
  color: #BBC056;
  text-decoration: none;
  font-weight: bold;
  font-size: 80%;
  transition: all 0.5s ease;
}

.view-display-id-frontpage_retrohugs_list .views-row .view-field-wrapper .read-more-link:hover {
  color: #B8D9BA;
}

img {
  height: auto;
  max-width: 100%;
}

img.align-center, .image-style-wide-retrohugs {
  width: calc(100% - 10px);
  border-radius: 3px;
  background-color: #FFF;
  border: 1px solid #E1E3DF;
    border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: #CBCCC9;
  padding: 5px;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
}


/* author bio section */

#author-bio {
  padding: 10px 25px;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.25);
  margin: 20px 0 0 0;
  border-radius: 4px;
  background-color: hsl(0, 0%, 98%);
  color: #5E3B257A;
}

#author-bio .field--name-user-picture {
  line-height: 0;
  display: block;
  float: left;
  width: 100px;
  margin-right: 25px;
}

#author-bio .field--name-user-picture img {
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
}


/* products overviews */

.path-products-overview .layout-content {
  width: calc(100% - 40px);
  margin: 20px 20px 30px 20px;
}

.path-products-overview .layout-content .view-content {
  margin: 0 auto;
  text-align: center;
}

.path-products-overview .layout-content .views-row {
  display: inline-block;
  margin: 0 auto;
  padding: 20px;
  width: calc(25% - 50px);
}

.path-products-overview .layout-content h1.page-title {
  text-align: center;
}

.path-products-overview .layout-content .view-header {
  text-align: center;
}


/* right sidebar */

.layout-sidebar-second {
  margin: 0;
  grid-area:  1 / 7 / 3 / 9;
}

/* right sidebar - about section */

#block-about-retrohugs {
  width: calc(100% - 30px);
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.25);
  padding: 15px;
  margin: 0 0 20px;
  border-radius: 4px 0 0 4px;
  background-color: hsla(0, 0%, 98%, 1);
}

#block-retrohugs-views-block-bio-pic-block-1 {
  width: 150px;
  float: right;
  height: auto;
  background-color: #FFF;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.15);
  padding: 5px;
  display: block;
  margin: 70px 20px 10px 10px;
  z-index: 5;
}

#block-retrohugs-views-block-bio-pic-block-1 .views-field-field-media img {
  display: block;
  line-height: 0;
}


/* bottom blocks */

.layout-bottom {
  grid-area: 3 / 1 / 4 / 9;
}


/* footer */

footer[role=contentinfo] {
  clear: both;
  margin: 0 auto;
  font-size: 80%;
  text-shadow: 0 2px 2px rgba(0,0,0,0.25);
  text-align: center;
  color: rgba(94, 59, 37, 0.5);
}

.region.region-footer {
  font-size: 90%;
  text-shadow: 0 2px 2px rgba(0,0,0,0.25);
  text-align: center;
  color: rgba(94, 59, 37, 0.5);
}

/* clear */

.clear {
  display: table;
  clear: both;
  content: "";
}


/* basics */

a, a:link, a:visited, a:active {
  background-color: transparent;
  color: #BBC056;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.5s ease;
}

a:hover {
  color: #B8D9BA;
  transition: all 0.5s ease;
}

ul.menu a.is-active {
  color: #f29987;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Mouse Memoirs', sans-serif;
  font-weight: 400;
  color: #B8D9BA;
  margin: 10px 0;
  padding: 0;
}

h2 {
  font-size: 20pt;
}


/* misc */

.mastodon {
  display: none;
}

/* sparkles */

#block-categories-menu {
  background-image: url("images/bg-sprite-sparkles.png");
  background-repeat: no-repeat;
  background-position: 95px -560px;
  margin: 0 0 10px;
}

#block-categorieen-menu {
  background-image: url("images/bg-sprite-sparkles.png");
  background-repeat: no-repeat;
  background-position: 105px -560px;
  margin: 0 0 10px;
}

#block-categories .menu-item.menu-item--expanded,
#block-categories .menu-item.menu-item--collapsed,
#block-categorieen .menu-item.menu-item--expanded,
#block-categorieen .menu-item.menu-item--collapsed {
  list-style-image: none;
}

#block-about-retrohugs h2 {
  background-image: url("images/bg-sprite-sparkles.png");
  background-repeat: no-repeat;
  background-position: 100px -840px;
  margin: 0 0 10px;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .tags-title {
  background-image: url("images/bg-sprite-sparkles.png");
  background-repeat: no-repeat;
  background-position: 0 -320px;
  padding: 0 0 0 40px;
}

.view-display-id-frontpage_retrohugs_recent .views-row .view-field-wrapper .read-more-link {
  background-image: url("images/bg-sprite-sparkles.png");
  background-repeat: no-repeat;
  background-position: 1065px -80px;
  width: 100%;
  display: block;
}

/*
.layout-categories { grid-area: 1 / 1 / 3 / 3; }
.layout-announcements { grid-area: 1 / 3 / 2 / 7; }
.layout-search { grid-area: 3 / 1 / 4 / 3; }
.layout-archive { grid-area: 4 / 1 / 5 / 3; }
.layout-account { grid-area: 5 / 1 / 6 / 3; }
.layout-content { grid-area: 2 / 3 / 5 / 7; }
.layout-poll { grid-area: 5 / 3 / 6 / 5; }
.layout-socials { grid-area: 5 / 5 / 6 / 7; }
.layout-legal { grid-area: 5 / 7 / 6 / 9; }
.layout-about { grid-area: 1 / 7 / 3 / 9; }
.layout-rosiesocosy { grid-area: 3 / 7 / 4 / 9; }
.layout-kofi { grid-area: 4 / 7 / 5 / 9; } */

.layout-bottom-blocks { 
  grid-area: 3 / 1 / 4 / 9; 
} 

.region.region-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin: 20px;
  border-top: 3px dotted #f299877d;
  background-color: #FAFAFA;
  border-radius: 0 0 15px 15px;
  padding: 10px 20px 20px;
}

nav#block-retrohugs-account-menu {
  grid-area: 1 / 1 / 2 / 2;
}

#block-block-reviews-retrohugs {
  grid-area: 1 / 2 / 2 / 3;
}

nav#block-retrohugssocials {
  grid-area: 1 / 3 / 2 / 4;
}

nav#block-legalretrohugs {
  grid-area: 1 / 4 / 2 / 5;
}

#block-block-reviews-retrohugs .view-content .views-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  padding: 15px;
  margin: 0;
  border-radius: 4px;
  background-color: hsla(123.6, 30.8%, 79%, 0.33);
}

#block-block-reviews-retrohugs .views-field-field-name {
  grid-area: 1 / 1 / 2 / 5;
  margin: 0 0 5px;
  font-weight: bold;
}

#block-block-reviews-retrohugs .views-field-field-stars {
  grid-area: 2 / 1 / 3 / 5;
  margin: 0 0 10px;
}

#block-block-reviews-retrohugs .views-field-field-media {
  grid-area: 3 / 1 / 4 / 2;
}

#block-block-reviews-retrohugs .views-field-body {
  grid-area: 3 / 2 / 4 / 5;
  font-style: italic;
}

#block-block-reviews-retrohugs .views-field-body em.translated {
  font-size: 70%;
  display: block;
  color: #5E3B2585;
}

#block-block-reviews-retrohugs .views-field-body p {
  margin: 0 auto;
}

#block-block-reviews-retrohugs .views-field-body p:last-child {
  margin: 0;
}

.more-link a {
  color: white;
  font-size: 20pt;
  font-family: 'Mouse Memoirs', sans-serif;
  font-weight: normal;
  display: block;
  text-align: center;
  margin: 20px auto 0;
  padding: 10px;
  width: 25%;
  background-color: #f29987;
  border-radius: 10px;
  transition: all 0.5s ease;
  border-bottom: 5px solid #c27b67;
}

.more-link a:hover {
  background-color: #fdbfa4;  
  transition: all 0.5s ease;
  border-bottom: 5px solid #f29987;
}

.view-display-id-overview_planner .view-content {
  display: grid;
  grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 0;
}

.view-display-id-overview_planner .views-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-radius: 3px;
  background-color: #FFF;
  border: 1px solid #E1E3DF;
    border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: rgb(225, 227, 223);
  border-bottom-color: #CBCCC9;
  display: inline-block;
  position: relative;
  padding: 10px;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
  word-wrap: break-word;
  width: calc(100% - 20px);
  margin: 0;
}

.view-display-id-overview_planner .views-field-field-media {
  grid-area: 2 / 1 / 3 / 2;
}

.view-display-id-overview_planner .views-field-title {
  grid-area: 1 / 1 / 2 / 2;
}

.view-display-id-overview_planner .views-field-body {
  grid-area: 3 / 1 / 4 / 2;
  font-style: italic;
  color: #5E3B257D;
  font-size: 90%;
}