@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 * 
 * ----------------------
 * TABLE OF CONTENTS    
 * ----------------------
 * 
 * Note: Group MQ/IE selectors near their respective selectors
 * ------------------------------------------------------------
 * 
 * 1.00 Resets & Overwrites
 * 2.00 Interactive Post
 * ---------------------
 * 2.01 Desktop + Mobile
 * 2.02 Desktop
 * 2.03 Mobile
 * 
 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


/* ------------------------------------------------------------
 * 1.00 Resets & Overwrites
 * ------------------------------------------------------------
 * These are styles that reset or overwrite the current site.
 * Use this area to modify the exisiting styles of the site to
 * suite the purposes of this interactive post.
 * --------------------------------------------------------- */

/* fix no admin bar */
body.logged-in.theme-ausar { margin-top: -28px; }
body.logged-in.theme-ausar > footer { position: relative; top: 28px; }

/* responsive styles */
html.theme-ausar .hide-on-large,
html.theme-auset .hide-on-small { display: none; }

img.responsive { width: 100%; height: auto; }

/* force quote margins */
html.theme-ausar blockquote { padding: 0; }



/* ------------------------------------------------------------
 * 2.00 Interactive Post
 * ------------------------------------------------------------
 * Styles for the actual interactive post. To avoid conflicts
 * with existing styles, your interactive post elements should
 * always be wrapped in a warpper div with an id of the slug
 * of the post. All css selectors needs to be prefixed with
 * this id. 
 * --------------------------------------------------------- */

article {
  max-width: 960px;
  margin: 0 auto;
}


/* 2.01 Desktop + Mobile  */
/* ---------------------  */

@font-face {

  font-family: 'quicksand-book';
  src: url('font-quicksand-book.eot');
  src: url('font-quicksand-book.eot?#iefix') format('embedded-opentype'),
       url('font-quicksand-book.woff') format('woff'),
       url('font-quicksand-book.ttf') format('truetype'),
       url('font-quicksand-book.svg#architects_daughterregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

article #family-vacation { 

  color: #968b88;
  font-size: 16px;
  line-height: 1.5;
  background-color: #e5e4d1; 
  /* original color: b3a9a7*/

}
article #family-vacation p { font-size: 16px; } 

article #family-vacation * { font-family: 'quicksand-book'; }

article #family-vacation a { color: #638132; }

article #family-vacation .pink { color: #d47198; }
article #family-vacation .blue { color: #005596; }
article #family-vacation .orange { color: #e4801c; }

article #family-vacation .block { display: block; margin-bottom: 2em; }
article #family-vacation em.block {

  font-size: 14px;
  padding-left: 0.5em; 
  padding-right: 0.5em;

}

html.theme-ausar article #family-vacation .gfx,
html.theme-auset article #family-vacation .slide.one h1 {

  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
  height: 1px;

}





/* 2.02 Desktop */
/* ------------ */


/* structure */ 

html.theme-ausar article #family-vacation { max-width: 960px; }

html.theme-ausar article #family-vacation p,
html.theme-ausar article #family-vacation .block { 

  position: relative;
  z-index: 2;
  margin: 0 330px 1.2em 158px; 

}

html.theme-ausar article #family-vacation .slide { 

  position: relative;
  top: -80px; /* this is the position offest */

  /* 
   * the position offset is to adjust the slides so they seem less "box like"
   * some css positon properites are derived from math of this offset
   * ajdust these offsets accordingly, math used is commented next to the property
   *
   */

}

html.theme-ausar article #family-vacation > section { position: relative; }

html.theme-ausar article #family-vacation .cta {

  font-size: 1.5em;
  text-align: center;
  letter-spacing: -1px;

  margin: 1.5em 3.6em 0em 3.6em;

}

html.theme-ausar article #family-vacation .parallax-canvas {

  width: 100%;
  max-width: 960px;

  position: relative;
  overflow: hidden;
  
  margin: 0;
  padding: 0;

}

html.theme-ausar article #family-vacation [data-xrange] { 

  position: absolute; 
  display: block;
  z-index: 9999;

  background-position: 0 0;
  background-repeat: no-repeat; 

}

html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(1) { z-index: 19; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(2) { z-index: 18; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(3) { z-index: 17; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(4) { z-index: 16; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(5) { z-index: 15; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(6) { z-index: 14; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(7) { z-index: 13; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(8) { z-index: 12; }
html.theme-ausar article #family-vacation .parallax-canvas [data-xrange]:nth-child(9) { z-index: 11; }


/* slide specific */
html.theme-ausar article .slide.one {

  top: -40px; /* position offset / 2 */

  padding-top: 460px; 
  min-height: 490px;

  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-summer-adventure.png') no-repeat 50px 0px;

}

html.theme-ausar article .slide.two {
  padding-top: 650px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-last-summer.png') no-repeat 22px 0px;
}

html.theme-ausar article .slide.three {
  padding-top: 270px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-vacation-again.png') no-repeat 0px 10px;
}


/* parallax canvas blowing art */

html.theme-ausar article #blowing-art {
  height: 640px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-blowing-art-bg.png') no-repeat 0px 0px;
}

html.theme-ausar article #blowing-art #bubbles  { 

  width: 914px;
  height: 550px;

  top: 0px;
  left: 0px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-blowing-art-bubbles.png');

}

html.theme-ausar article #blowing-art #butterflies { 

  width: 456px;
  height: 396px;

  top: 200px; 
  left: 200px;
  
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-blowing-art-butterflies.png');

}

html.theme-ausar article #blowing-art #child { 

  width: 960px;
  height: 640px;

  top: 0px;
  left: 0px;
  
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-blowing-art-child.png');

}

html.theme-ausar article #blowing-art #burst { 

  width: 796px;
  height: 306px;

  top: 40px;
  left: 40px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-blowing-art-burst.png');

}




/* parallax canvas mother daughter */

html.theme-ausar article #mother-daughter { height: 640px; }

html.theme-ausar article #mother-daughter #bubbles { 

  width: 811px;
  height: 555px;

  top: 0px;
  left: 60px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-mother-daughter-bubbles.png');

}

html.theme-ausar article #mother-daughter #butterflies { 

  width: 511px;
  height: 237px;

  top: 300px;
  left: 200px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-mother-daughter-butterflies.png');

}

html.theme-ausar article #mother-daughter #family { 

  width: 960px;
  height: 640px;

  top: 0px;
  left: 0px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-layer-mother-daughter-family.png');

}






/* parallax items */

html.theme-ausar article #bigcone { 

  width: 146px;
  height: 342px;

  top: 200px;
  left: 0px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-item-bigcone.png');

}


html.theme-ausar article #butterfly-lastsummer { 

  width: 207px;
  height: 180px;

  top: 50px;
  left: 30px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-item-butterfly-lastsummer.png');

}

html.theme-ausar article #burst { 

  width: 370px;
  height: 197px;

  bottom: -160px; /* position offset x 2 */
  left: 650px;

  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-item-burst.png');

}


html.theme-ausar article #bubbles { 

  width: 150px;
  height: 160px;

  top: -40px; /* position offset / 2 */
  left: 0px;
  
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/75879/fv-item-bubbles.png');

}



/* 2.03 Mobile */
/* ----------- */

html.theme-auset article #family-vacation { }

html.theme-auset article #family-vacation p,
html.theme-auset article #family-vacation .block { margin-left: 4%; margin-right: 4%; }

html.theme-auset article #family-vacation blockquote > strong { font-size: 1.8em; vertical-align: middle; font-weight: normal; }

html.theme-auset article #family-vacation .gfx,
html.theme-auset article #family-vacation .cta { 

  font-size: 1.3em; 
  line-height: 1.2em;

  margin: auto 6% 1em 6%; 

}

html.theme-auset article #family-vacation .cta { 

  padding-bottom: 1em;
  margin-top: 1em; 
  text-align: center 

}

html.theme-auset article #family-vacation .cta br { display: none; }

html.theme-auset article #family-vacation .slide.three { margin-top: 1.2em }

html.theme-auset article #family-vacation .slide.one h1 { 

  visibility: hidden;

  /*

  max-width: 909px;
  max-height: 282px;

  width: 100%;
  height: 9999px;
  margin: auto;
  padding: 2em;

  background-image: url('gfx-summer-adventure-auset.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;

  */ 

}

html.theme-auset article #family-vacation [src*="fv-summer-adventure-auset"] { 

  width: 90%; 
  display: block;
  margin: 1em auto 0 auto;

}

html.theme-auset.single .body.main article .the-tags,
html.theme-auset.single .body.main article .social-media { margin: 1em; float: none; }