@charset "UTF-8";

/******* COLORS *******/

:root {
  --purple: #8e33ef;
  --sailing: #02779E;
  --sky: #E3F1F782;
  --black: #02182B;
}

.purple {
  color: var(--purple);
}

.background-purple {
  background-color: var(--purple);
}

.sailing {
  color: var(--sailing);
}

.background-sailing {
  background-color: var(--sailing);
}

.sky {
  color: var(--sky);
}

.background-sky {
  background-color: var(--sky);
}

.black {
  color: var(--black);
}

.background-black {
  background-color: var(--black);
}

/******* END - COLORS *******/

/******** FONTS ******/

/* sacramento-regular - latin */
@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/sacramento-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/sacramento-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/sacramento-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/sacramento-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/sacramento-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/sacramento-v8-latin-regular.svg#Sacramento') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lato-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lato-v17-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}


@font-face {
  font-family: "vegandollhouse";
  src:url("/fonts/vegandollhouse.eot");
  src:url("/fonts/vegandollhouse.eot?#iefix") format("embedded-opentype"),
    url("/fonts/vegandollhouse.woff") format("woff"),
    url("/fonts/vegandollhouse.ttf") format("truetype"),
    url("/fonts/vegandollhouse.svg#vegandollhouse") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[data-icon]:before {
  font-family: "vegandollhouse" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "vegandollhouse" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-iconperiscope:before {
  content: "\61";
}


/******** END - FONTS ******/

/******* GENERAL *******/

body {
  background: var(--sky);
  font-family: "Lato", sans-serif;
  font-display: swap;
  color: var(--black);
}

h2 {
  color: var(--purple);
  font-variant: small-caps;
  font-weight: 400;
}

h4 {
  color: var(--purple);
  font-variant: small-caps;
  font-weight: 300;
}

a {
  color: var(--purple);
}

th, td {
  padding: 10px;
}

a:hover {
  color: var(--sailing);
  text-decoration: none;
}

a:focus {
  text-decoration: none;
}

.hidden {
  display: none;
}

/******* END - GENERAL *******/

/******* HEADER *******/

.nav {
  margin-top: 2rem;
}

.navbar {
  background: #fff;
  padding: 2em 1em;
}

.navbar .nav a.nav-link {
  display: inline-block;
  font-size: 1.5em;
  text-align: center;
}

a.nav-link,
a.nav-link:focus,
.navbar-light .navbar-nav .nav-link {
  color: var(--purple);
}

a.nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--sailing);
}

.navbar .nav a.nav-link.active,
.navbar .nav a.nav-link.active:hover,
.navbar .nav a.nav-link.active:focus {
  color: var(--sailing);
  text-decoration: none;
}

a.logo {
  color: var(--purple);
  font-size: 4rem;
  font-family: "Sacramento", cursive;
  background: url(/images/vd-logo.svg) no-repeat top left;
  background-size: contain;
  padding-left: 7rem;
  font-display: swap;
}

a.logo:focus {
  color: var(--purple);
}

@media (max-width: 480px) {
  a.logo {
    font-size: 2rem;
    padding-left: 3.5rem;
  }

  .navbar .nav a.nav-link {
    font-size: 1.2rem;
  }

  .pull-xs-right {
    float: none!important;
  }
}

.search-bar {
  margin-bottom: 2rem;
}

.search-bar input {
  border: none;
  display: block;
  width: 100%;
  font-size: 1.5em;
  background-color: #fff;
  padding: .8em 1em;
  padding-left: 2.5em;
  border-radius: 11px;
  outline: 0;
  font-weight: 300;
}

.search-bar input:focus {
  outline: none;
}

.published-time {
  color: gray;
  padding-top: .5em;
  font-family: 'Lato';
  font-size: .9em;
}

/******* END - HEADER *******/

/******* MAIN CONTAINER *******/

.card {
  border-radius: .50rem;
  border: 0;
}

.card-img-top {
  border-radius: .50rem .50rem 0 0;
}

.card-title {
  color: var(--sailing);
  font-variant: normal;
  font-weight: normal;
}

.main {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}

.featured {
  background: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: .50rem;
}

.featured-panel {
    width: 62%;
    float: left;
}

.featured img {
    max-width: 100%;
}

.featured-display {
    padding: 1rem;
    width: 38%;
    float: left;
    overflow: hidden;
    height: 459px;
}

.featured-footer {
  bottom: 35px;
  position: absolute;
}

.center-image {
  display: block;
  padding-top: 1em;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.affiliate-header {
  display: block;
  padding-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}

@media (max-width: 480px) {
  .affiliate-header {
    width: 75%;
  }
}

@media (max-width: 990px) {
  .featured-panel {
    width: 100%;
    padding: 0;
    float: none;
  }
  .featured-display {
  	width: auto;
  	height: auto;
  }
  .featured-footer {
  	position: static;
  }
}

@media (max-width: 480px) {
  .featured-display {
    padding-top: 0;
    margin: 0;
    width: 100%;
    height: 350px;
  }

  .featured-footer {
    margin-top: 3rem;
  }
}

.featured .title {
  padding-top: 2rem;
  font-family: "Sacramento";
  font-size: 2.3rem;
  font-display: swap;
}

.card-columns {
  margin-top: 2rem;
}

.card-title {
  font-family: "Sacramento";
  font-size: 2.3rem;
  font-display: swap;
}

.content,
.comments {
  background: #fff;
  border-radius: .50rem;
}

.comments {
  padding: 2rem;
}

.content header {
  text-align: center;
  font-family: "Sacramento";
  padding: 2rem 2rem 0 2rem;
  font-display: swap;
}

.content img {
  display: block;
  margin: 0 auto;
  border-radius: .50rem;
  margin-top: 2rem;
  margin-bottom: .8rem;
  max-width: 75%;
}

@media (max-width: 480px) {
  .content img {
    max-width: 100%;
  }
}

.content div {
  padding: 0 6rem;
}

@media (max-width: 768px) {
  .content div {
    padding: 0 2rem;
  }
}

.about {
  padding: 2rem 6rem;
}

@media (max-width: 480px) {
  .about {
    padding: 2rem 2rem;
  }
}

.song {
  text-align: center;
  color: var(--black);
  letter-spacing: 1.4px;
}

article h4, article h2 {
  padding-top: 1rem;
}

article header h1, article h2 {
  color: var(--purple);
}

article ul li {
  padding-left: 1.2em;
  list-style: none;
}

article ul li:before {
  content: "\f004";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -2em;
  width: 1.8em;
  font-size: .6em;
  vertical-align: middle;
  color: var(--purple);
  font-display: swap;
}

.pager li>a,
.pager li>a:hover,
.pager li>a:focus {
  background-color: var(--sky);
}

/******* SHARE POST *******/

.share-this-post {
  position: relative;
  margin: 3em auto;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: -10px;
}

@media (min-width: 992px) {
  .share-this-post {
    margin: 0;
  }

  .share-page.affix-bottom, .share-page.affix-top {
    position: absolute;
  }

  .share-page.affix-top {
    top: 45px;
  }

  .share-this-post a {
    margin-bottom: 10px;
  }

  .share-page {
    display: block;
    position: absolute;
    left: -60px;
    width: 48px;
    z-index: 5;
    padding-top: 1rem;
  }

  .share-page.affix {
    position: fixed;
    top: 45px;
  }
}

.share-this-post a {
  margin: 0 10px;
}

.share-page a {
  background: rgba(236,236,236,.45);
  border-radius: 100px;
  color: rgba(42,42,42,.1);
}

.icon-twitter:hover {
  color: #04aceb;
}

.icon-facebook:hover {
  color: rgb(59, 89, 152);
}

.icon-email:hover {
  color: #02182B;
}

/******* END - SHARE POST *******/

/******* SHORTCUTS ************/

.content div.recipe-callout {
  border: 1px dashed var(--purple);
  border-radius: 6px;
  float: right;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
  width: 50%;
  margin: 1rem;
}
.recipe-callout > h5 {
  color: var(--purple);
  font-variant: small-caps;
  font-weight: 300;
}
.recipe-callout:before {
  color: var(--purple);
  content: "\f004";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 1.33333333em;
  left: -11px;
  line-height: .75em;
  position: absolute;
  text-rendering: auto;
  top: -6px;
  vertical-align: -15%;
  -webkit-font-smoothing: antialiased;
  font-display: swap;
}
/*
Use the media query if you want the div to be responsive on a phone.
It will expand the div to the full width of it's parent div and remove the float.
*/
@media (max-width: 767px) {
  .content div.recipe-callout {
    float: none;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0.75rem;
    top: -7px;
    left: -11px;
    font-size: 1.1em;
    /* uncomment this if you don't want the heart on phones */
    /* display: none; */
  }
}

/******* END - SHORTCUTS ************/

/******* VIDEOS ************/

/* This is for the youtube embeds to be responsive */

.content div.video-embed {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; // add !important if this doesn't work
    padding-top: 25px; // add !important if this doesn't work
    height: 0;
}
.content div.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******* END - VIDEOS ************/


/****** RELATED CONTENT ******/

.related-content .title {
  font-size: 2.3em;
  font-family: "Sacramento";
  text-align: center;
  color: var(--sailing);
  margin-bottom: 1em;
  font-display: swap;
}

/****** END - RELATED CONTENT ******/


/******* END - MAIN CONTAINER *******/

/****** FOOTER ******/

footer {
  background-color: #02182B;
  padding: 8em 2em 8em 2em;
}

footer span {
  margin-right: 1em;
}

.footer a,
.footer a:focus {
  color: var(--purple);
}

.footer a:hover {
  color: #63D3FF;
}

/****** END - FOOTER ******/

/****** NEWSLETTER ******/

.sticky-cta {
  z-index: 9;
}

.sticky-cta .newsletter input {
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgba(14,30,37,.08);
  border-radius: 4px;
  background: #fff;
  color: #0e1e25;
  outline-color: #ffc60a;
  box-shadow: none;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.618em;
  transition: box-shadow ease-in-out .15s;
  padding: .382em 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.sticky-cta .newsletter .form-field,.sticky-cta .newsletter .form-footer {
  display:block;
  margin:0
}

.sticky-cta .newsletter .form-footer {
  margin-top:1em
}

@media (min-width:85em) {
  .sticky-cta:not([hidden]) {
    position: fixed;
    bottom: 0;
    width: 100%;
    animation: fadein 2s ease forwards;
  }

  .sticky-cta .card {
    border-radius: 0;
    margin-bottom: 0;
  }

  .sticky-cta .card .card-block p {
    display: inline;
  }

  .sticky-cta .button-cta {
    width: auto;
    position: inherit;
    display: inherit;
    vertical-align: middle;
  }

  .sticky-cta .card-block {
    text-align: center;
  }

  .sticky-cta label {
    margin-left: .2em;
  }
}

@media (max-width:85em) {
  .sticky-cta:not([hidden]) {
    padding-right: .9375rem;
    padding-left: .9375rem;
    margin-right: auto;
    margin-left: auto;
  }

  .sticky-cta .newsletter input {
    display: block;
    width: 100%;
  }
}

.button {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.618em;
  padding: .382em 1em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--purple);
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
  cursor: pointer;
  background: var(--purple);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all .15s ease;
}

a.button:hover {
  color: #fff;
}

/****** END - NEWSLETTER ******/

/***** AFFILIATES GRID ****/

.affiliate-grid {
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: auto;
  display: grid;
}

.affiliate-grid-item-1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.affiliate-grid-item-2 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.affiliate-grid-item-3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

@media (max-width: 480px) {
.affiliate-grid {
  grid-template-rows: 33% 33% 33%;
  grid-template-columns: auto;
  display: grid;
}

.affiliate-grid-item-1 {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 1;
  grid-row-end: 2;
}

.affiliate-grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 2;
  grid-row-end: 3;
}

.affiliate-grid-item-3 {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 3;
  grid-row-end: 4;
}
}

.content div.affiliate-grid-item {
  border: 1px dashed var(--purple);
  border-radius: 6px;
  padding: .5rem;
  position: relative;
  margin: .5rem;
}

.affiliate-grid-item > h5 {
  color: var(--purple);
  font-variant: small-caps;
  font-weight: 300;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.affiliate-grid-item > h5:hover {
  overflow: visible;
  white-space: normal;
}

.affiliate-grid-item:before {
  color: var(--purple);
  content: "\f004";
  display: inline-block;
  font-family: FontAwesome;
  font-size: 1.33333333em;
  left: -11px;
  line-height: .75em;
  position: absolute;
  text-rendering: auto;
  top: -6px;
  vertical-align: -15%;
  -webkit-font-smoothing: antialiased;
  font-display: swap;
}

/***** END - AFFILIATES GRID ****/

.category-list {
  text-align: center;
  margin: 3rem 2rem 3rem 2rem;
}

.category-list-item {
  display: inline-block;
  color: var(--purple);
  font-size: 2.5em;
  margin-bottom: .75em;
  text-align: center;
  line-height: 1.2;
  text-transform: capitalize;
  font-family: "Sacramento";
}

.category-list-item:before {
  content: "\f004";
  color: var(--sailing);
  font-family: FontAwesome;
  display: inline-block;
  margin: 0 7px;
  width: 1.8em;
  font-size: .3em;
  position: relative;
  top: -4px;
}

/***** REVIEWS ****/

.rating-comment {
  margin-top: .5em;
}

blockquote {
	font-weight: 100;
	max-width: 600px;
	line-height: 1.4;
	position: relative;
	margin-left: 3em;
	padding: .5rem .5rem 0 .5rem;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -3rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -4rem;
	bottom: 0rem;
}

cite {
	line-height: 2;
	text-align: left;
  margin-left: 3em;
}

/***** END - REVIEWS ****/