/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/


/* Global reset
   http://meyerweb.com/eric/tools/css/reset/
*****************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

::selection {
    background: #fff; /* Safari */
    color: #777;
}
::-moz-selection {
    background: #fff; /* Firefox */
    color: #777;
}

/* Extended base styles (site specific)
*****************************************************************/

html {
    overflow-y: scroll; /* always force a scrollbar in non-IE */
	min-width: 960px;
}

body {
    background: #f9f5f0 url('http://cdn2.hubspot.net/hub/428371/file-2515264381-jpg/girl/img/bg-full.jpg') center 0;
    background-repeat: repeat-x;
    overflow-x: visible;
    color: #000;

    font-size: 14px;
    line-height: 16px;
    font-family: "museo-slab-1","museo-slab-2",'Georgia',serif;
}

h1 {
    font-family: futura-pt-1,futura,arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;

}

a, a:link,
a:active,
a:visited {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    color:#fff;
    outline: none;
    text-decoration:none;
}
a:hover {
    color:#777;
    background: #fff;
}
img {
    display:block;
}


/* Page structure
*****************************************************************/

#wrapper {
    position: relative;
}


/* Nav
*****************************************************************/
nav#primary {
    z-index: 5000;
    position: fixed;
    top: 30%;
    right: 16px;
    margin-top: -40px;
}
nav#primary li {
    position: relative;
    height: 50px;
}
nav#primary a {
    display: block;
    width: 40px;
    height: 40px;
    text-indent: 12px;
    background: #fff;
    border-radius: 20px;
    margin: 10px 0 10px 5px;
    color: #c25169;
    font-size: 1.6rem;
    font-family: Arial;
    line-height: 2.6rem;
    -webkit-transition: all 0s ease-out;
    -moz-transition: all 0s ease-out;
    -o-transition: all 0s ease-out;
    transition: all 0s ease-out;
}
nav#primary a:hover, nav#primary a.active {
    background: #c25169;color: #fff !important;
}
nav#primary h1 {
    position: absolute;
    right: 50px;
    top: 0px;
    display: none;
    padding: 3px 10px;
    color: #777;
    white-space: nowrap;
    background: #fff;

    box-shadow: 0 0 10px rgba(128, 78, 34, 0.5);

    font-size: 12px;
    font-family: futura-pt-1, Futura, Arial, sans-serif;
    line-height: 28px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
}
@media screen and (min-width: 0px) and (max-width: 779px) {

    nav#primary {
        top: 20%;
        right: 16px;
        margin-top: -40px;
    }
    nav#primary li {
        position: relative;
        height: 160px;
    }
    nav#primary a {
        display: block;
        width: 120px;
		height: 120px;
        text-indent: 40px;
        border-radius: 80px;
        font-size: 4rem;
        font-family: Arial;
        line-height: 7.5rem;
    }
	nav#primary h1 {
    right: 130px;
    top: 20px;
    padding: 6px 20px;
    font-size: 2rem;
    line-height: 4rem;
}
    }

nav.next-prev {
    margin: -5px auto;
    width: 44px;
    z-index:10000;
}
a.prev,
a.next {
    display: block;
    width: 22px;
    height: 16px;
    text-indent: -9999px;
    float: left;

    -webkit-transition: all 0s ease-out;
    -moz-transition: all 0s ease-out;
    -o-transition: all 0s ease-out;
    transition: all 0s ease-out;

}
a.prev {
    margin: 410px auto 5px auto;
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2526817104-png/girl/img/scroll-arrow-up.png') 0 0 no-repeat;
    z-index:9999;
}
a.prev:hover {
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2526817104-png/girl/img/scroll-arrow-up.png') 0 -16px no-repeat;
}
a.next {
    margin: 412px auto 0 auto;
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515264441-png/girl/img/scroll-arrow-down.png') -1px -16px no-repeat;
    z-index:9999;
}
a.next:hover {
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515264441-png/girl/img/scroll-arrow-down.png') -1px 0 no-repeat;
}

a.next2 {
    margin: 410px auto 0 auto;
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2531976470-gif/girl/img/scroll-arrow-down.gif') 0 0 no-repeat;
    display: block;
    width: 22px;
    height: 32px;
    text-indent: -9999px;
}
a.next2:hover {
    background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2531976470-gif/girl/img/scroll-arrow-down.gif') 0 0 no-repeat;
}


/* Parallax
*****************************************************************/

/* content */
#content {
    position: relative;
    max-width: 940px;
    height: 3750px;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.7;
    text-align: center;
}
#content article {
    width: 600px;
}

#content article h1 {
    margin: 0;
    font-size: 12px;
    font-family: futura-pt-1, Futura, Arial, sans-serif;
    line-height: 28px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
}

#content article h1 a {
    color: #000;
    padding: 5px 10px;
    cursor: pointer;
}

#content article h1 a:hover {
    color: #777;
}

article a, article a:link, article a:visited {
    color: #000;
    font-weight: bold;
    cursor: pointer
}

article a:hover {
    color: #fff;
}

#content article p {
    font-family: "museo-slab-1","museo-slab-2",'Georgia',serif;
    margin:0 0 20px 0;
    font-size: 1.0rem;
    line-height: 1.6rem;
    font-style: normal;
}

#scene01-about ,
#scene02-shop,
#scene03-studio,
#scene04-blog,
#scene05-about,
#scene06-contact {
    padding-top: 100px;
    z-index: 50;
    left: 39%;
    margin-left: -185px;
}
#scene01-about {
    position: absolute;
    top: 0px;
}
#scene02-shop {
    position: absolute;
    top: 640px;
}
#scene03-studio {
    position: absolute;
    top: 1280px;
}

#scene04-blog {
    position: absolute;
    top: 1920px;
}

#scene05-about {
    position: absolute;
    top: 2560px;
}

#scene06-contact {
    position: absolute;
    top: 3200px;
}



/* foreground  */
#parallax-bg3 {
    z-index: 100;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 940px;
    margin-left: -470px; /* move left by half element's width */
}



/* midground */
#parallax-bg2 {
    z-index: 2;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 1200px;
    margin-left: -600px; /* move left by half element's width */
}


/* background */
#parallax-bg1 {
    z-index: 1;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 1200px;
    margin-left: -600px; /* move left by half element's width */
}



/*wall art*/
#bg1-3 {
    left: 119px;
    position: absolute;
    top: 1377px;
}

/*pile*/
#bg1-4 {
    left: 105px;
    position: absolute;
    top: 1983px;
}
/*desk*/
#bg1-5 {
    position: absolute;
    top: 305px;
    left: 0;
}
/*books*/
#bg1-6 {
    position: absolute;
    top: 412px;
    left: -88px;
}
/*beso*/
#bg3-32 {
    position: absolute;
    top: 1562px;
    left: 220px;
}
/*polaroidbg*/
#bg1-41 {
    left: 435px;
    position: absolute;
    top: 2170px;
}
/*plane*/
#bg1-9 {
    left: 785px;
    position: absolute;
    top: 207px;
}
#bg1-9:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*glasses*/
#bg1-8 {
    left: 145px;
    position: absolute;
    top: 297px;
}
/* yoga */
#bg1-12 {
    left: 160px;
    position: absolute;
    top: 503px;
}
/*globe*/
#bg2-2 {
    left: 123px;
    position: absolute;
    top: 1311px;
}

/*pile*/
#bg2-4 {
    left: 105px;
    position: absolute;
    top: 3908px;
}

/*map elements*/
#bg2-5 {
    left: 123px;
    position: absolute;
    top: 5418px;
}
/*jeans*/
#bg2-8 {
    left: 342px;
    position: absolute;
    top: 2132px;
}
/*gift*/
#bg2-33 {
    left: 632px;
    position: absolute;
    top: 2292px;
}
#bg2-33:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*gift*/
#bg3-33 {
    left: -190px;
    position: absolute;
    top: 4100px;
}
#bg3-33:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*headset*/
#bg2-9 {
    left: 378px;
    position: absolute;
    top: 2058px;
}
/*chair*/
#bg2-1 {
    position: absolute;
    top: 378px;
    left: 0;
}

/* purse */
#bg3-1 {
    left: 350px;
    position: absolute;
    top: 455px;
}
/* desk 2 */
#bg3-2 {
    left: 180px;
    position: absolute;
    top: 2108px;
}
/* sticker */
#bg4-82 {
    left: 740px;
    position: absolute;
    top: 5395px;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
#bg4-82:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*jeans*/
#bg3-15 {
    left: 342px;
    position: absolute;
    top: 3892px;
}
/*earrings*/
#bg3-16 {
    left: 407px;
    position: absolute;
    top: 3842px;
}
/*chair*/
#bg3-3 {
    left: -40px;
    position: absolute;
    top: 3565px;
}
/*desk*/
#bg3-40 {
    left: 208px;
    position: absolute;
    top: 3865px;
}
/*desk*/
#bg4-12 {
    left: 326px;
    position: absolute;
    top: 4172px;
}
/*bag*/
#bg4-15 {
    left: 106px;
    position: absolute;
    top: 4212px;
}
#bg4-15:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*jeans*/
#bg5-15 {
    left: 342px;
    position: absolute;
    top: 7413px;
}
/*jeans*/
#bg6-15 {
    left: 342px;
    position: absolute;
    top: 9023px;
}
/*sticker*/
#bg6-82 {
    left: 785px;
    position: absolute;
    top: 9187px;
}
#bg6-82:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*doggy*/
#bg6-25 {
    left: 280px;
    position: absolute;
    top: 9173px;
}
/*bag*/
#bg5-51 {
    left: 736px;
    position: absolute;
    top: 7115px;
}
#bg5-51:hover {
    -ms-transform: scale(1.3,1.3); /* IE 9 */
    -webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
    transform: scale(1.3,1.3);
}
/*glasses 5*/
#bg5-55 {
    left: 400px;
    position: absolute;
    top: 7328px;
}
/*diary*/
#bg3-4 {
    left: 230px;
    position: absolute;
    top: 5355px;
}

/*travel elements*/
#bg3-51 {
    left: -32px;
    position: absolute;
    top: 7445px;
}

/*desk 5*/
#bg3-5 {
    left: 665px;
    margin-left: -485px;
    position: absolute;
    top: 7367px;
}

/*night sky*/
#bg3-7 {
    left: 50%;
    margin-left: -485px;
    position: absolute;
    top: 3182px;
}

/*stars*/
#bg3-8 {
    left: 50%;
    margin-left: -1455px;
    position: absolute;
    top: 3182px;
}

/*stars2*/
#bg3-9 {
    left: 50%;
    margin-left: 485px;
    position: absolute;
    top: 3182px;
}
/*suit*/
#bg4-32 {
    left: 404px;
    position: absolute;
    top: 5567px;
}
/*chair 5*/
#bg5-41 {
    left: 120px;
    position: absolute;
    top: 2800px;
}
/*Fixed Top bar */

#topbar {
    background: url("http://cdn2.hubspot.net/hub/428371/file-2515426533-png/girl/img/topbar.png") repeat scroll left top transparent;
    height: 75px;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#topbar img {
    float: left;margin-top: 5px;
}

#topbar p {
    color: #FFFFFF;
    float: right;
    font-size: 16px;
    font-style: italic;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 45px;

}

#topbar p a {
    color: #fff;

}

#topbar p a:hover {
    text-shadow: 0 0 5px #fff;
}


/*Girl Sprite Fixed middle*/

#girl {
    min-width: 960px;
    position: absolute;
    top: 580px;
    width: 100%;
    z-index: 70;
}


.girl_container {
    margin: 0 auto;
    overflow-y: hidden;
    width: 100%;
}

#girl_sprite {
    background: url("http://cdn2.hubspot.net/hub/428371/file-2515259371-png/girl/img/girl.png") no-repeat scroll center top transparent;
    display: block;
    height: 350px;
    position: fixed;
    top: 225px;
    z-index: 70;
}


/*footer */

#footer {
    background: url('http://cdn2.hubspot.net/hub/428371/file-2515259366-png/girl/img/footer-bg.png') left top repeat-x, #c25169;
    height: 1200px;
    display: block;
    padding: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0px -5px 15px rgba(128,78,34,.25);
    color: #fff;
    position: absolute;min-width: 960px;
}

#footernav {
    padding-top: 25px;
    width: 475px;
    float: left;
}

#footernav p {
    font-size: 12px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

#footernav p a {
    color: #fff;
}

#footernav p a:hover {
    color: #fff;
    background: #fff;
}


#footermailinglist {
    padding-top: 30px;
    width: 475px;
    float: left;

    text-align: right;
}

#footermailinglist p {
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 500;
}

.mc-field-group {
    margin-left: 188px
}

.mc-field-group, .mc-button {
    float: left;
    margin-top:5px;
}

.mc-field-group input {
    background: none repeat scroll 0 0 #F9F5F0;
    border: 1px solid #FFFFFF;
    font-family: futura-pt-1,futura,arial,sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px;
    text-transform: uppercase;
    width: 250px;
}

.mc-button input {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-transition: all 0.25s ease-in-out 0s;
    background: none repeat scroll 0 0 #4F4E39;
    border-color: #FFFFFF #FFFFFF #FFFFFF -moz-use-text-color;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #FFFFFF;
    font-size: 15px;
    height: 25px;
    padding-bottom: 2px;
    padding-right: 3px;
    width: 25px;
}

.mc-button input:hover {
    color: #999;
    background: #fff;

    cursor: pointer;
}

.fb-like {
    top: -4px;
}

#bottombanner {line-height: 100px;
    clear: both;
    display: block;
    font-family: futura-pt-1,futura,arial,sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 50px;
    letter-spacing: 2px;
    margin: 0px auto;
    text-align: center;
    text-transform: uppercase;
    width: 500px;
}
.footer-content {z-index: 9999;
    color: #333;
    text-align: center;
    width: 960px;
    margin: 0 auto;
}
.footer-headline1 {
    color: #c25169;
    font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serifHelvetica, Helvetica Neue, Arial;
    font-size: 1.4rem;line-height: 1.8rem;
    margin-top: 40px;
}
.footer-headline2 {font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serifHelvetica, Helvetica Neue, Arial;
    font-size: 2rem;color:#555;
    line-height: 4.2rem;
}
a.webinar-link {font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serifHelvetica, Helvetica Neue, Arial;
    font-size: 1.3rem;color:#888 !important;font-weight:400 !important;
    line-height: 1.7rem;
}
a.webinar-link:hover {color:#c25169 !important; }
ul.avatars {margin-top:20px;font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serifHelvetica, Helvetica Neue, Arial;
    list-style-type: none;
}
li.avatar-item {font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serifHelvetica, Helvetica Neue, Arial;
    float: left;
    width: 14%;
}
.avatar-pic {
    width: 100px;
    height: 117px;
    display: inline-block;
}
.avatar-pic.erin {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515259256-png/girl/img/Avatar1.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.lindsey {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515259356-png/girl/img/Avatar2.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.puja {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515259351-png/girl/img/Avatar3.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.tanja {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515426468-png/girl/img/Avatar4.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.kunjal {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515259361-png/girl/img/Avatar5.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.melissa {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515259261-png/girl/img/Avatar6.png') no-repeat; background-size: 100px 117px;  }
.avatar-pic.kawaii {background: transparent url('http://cdn2.hubspot.net/hub/428371/file-2515426473-png/girl/img/Avatar7.png') no-repeat; background-size: 100px 117px;  }
.avatar-name, .avatar-job {
    color: #fff;
}
.avatar-job {
font-size: 0.8rem;
}

#bg3-6:hover {
    background-position: 0 0;

}

#panel {
    background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    height: 475px;
    left: 50%;
    margin-left: -245px;
    position: absolute;
    top: 3275px;
    width: 490px;
    z-index: 100;

    box-shadow: 0 0 15px rgba(128, 78, 35, 0.3);
}