/*
    BASE
*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    color: #222;
    padding-top: 40px;
}

html, body {
    height: 100%;
}

a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color:#333331;
}





/*

COLOURS

SCHEMA: Theme-gold: #9633ff;
--------------------------------------------------- */

.bg-gold         { background-color: #9633ff; }
.bg-lightgrey    { background-color: #f8f8f8; }
.bg-mediumgrey   { background-color: #A29A8C; }

.border-grey      { border: 1px solid #e7e8e9; }
.border-nearblack { border: 1px solid #2f2f2f; }

.boxed { border: solid 1px #eee; background: white; }

/*
    INDIVIDUAL SVG ICONS
*/

.svg-heart { position: relative; top: -1px; }
.svg-heart:hover       .svg-heart-path { stroke: #AF9358; }
.svg-heart--fill       .svg-heart-path { stroke: #AF9358; fill: #AF9358; }

.svg-icon-s   { width: 10px; height: 10px; vertical-align: middle; }
.svg-icon-m   { width: 15px; height: 15px; vertical-align: middle; }
.svg-icon-l   { width: 20px; height: 20px; vertical-align: middle; }
.svg-icon-xl  { width: 25px; height: 25px; vertical-align: middle; }
.svg-icon-xxl { width: 50px; height: 50px; vertical-align: middle; }

.svg-fill-white     { fill: white; }
.svg-fill-red       { fill: red; }
.svg-fill-gold      { fill: #9633ff; }
.svg-fill-grey      { fill: #ddd; }
.svg-fill-lightgrey { fill: #b9b9b9; }
.svg-fill-lightgrey:hover { fill: black; }
.svg-fill-black     { fill: black; }
.svg-fill-nearblack { fill: #404040; }
.svg-fill-current   { fill: currentColor; }

.svg-stroke-white   { stroke: white; }
.svg-stroke-gold    { stroke: #9633ff; }

.svg-bookmark-marked > g { fill: #9633ff; }
.svg-bookmark-marked > g > g { stroke: #9633ff; }

.menuItem--create .svg-chevron { position: relative; top: 0px; left: 2px;  }
.menuItem--create .svg-chevron polygon { transition: fill 0.5s ease; }
.menuItem--create:hover .svg-chevron { top: 1px; }
.menuItem--create:hover .svg-chevron polygon { fill: #9633ff; }

/* User Interface: Buttons --------------------------------------------------------------- */


.btn {
    padding: 10px 30px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    position: relative;

    font-size: 1.5rem;
    font-weight: 400;

    padding: 5px 15px;
    border: 1px solid transparent;

    -webkit-transition: 100ms background-color, 100ms border-color, 100ms color;
            transition: 100ms background-color, 100ms border-color, 100ms color;
}

.btn--squared { border-radius: 0px; background: #9633ff; color: #FFF; line-height: 1rem; padding: 10px; }
.btn--greysq { background: #f1f1f1; padding: 7px 20px; color: black; font-size: 1.1rem; font-weight: 500; }

.btn--round,
*[type="submit"],
*[type="reset"],
*[type="button"] { color: #9633ff; border: solid 1px #9633ff; border-radius: 5px; }

.btn--round--s  { font-size: 1.2rem; padding: 5px 18px; }
.btn--round--m  { font-size: 1.1rem; padding: 9px 18px;  }
.btn--round--l  { font-size: 1.4rem; padding-top: 12px; padding-bottom: 12px; line-height: 1.4rem; }
.btn--round--xl { font-size: 1.7rem; border: solid 1px #E2CCA5; color: #9633ff; font-weight: 100; letter-spacing: 1px; padding: 17px 32px; line-height: 1.7rem; }

.btn--add { font-size: 2.3rem; width: 23px; height: 23px; position: relative; text-indent: -7px; font-weight: 800; line-height: 0rem; }
.btn--add:hover { color: white; background-color: #9A7D4A; -webkit-transition: background-color 150ms; transition: background-color 150ms; }
.btn--add:after { color: #484848; content: "ADD"; position: absolute; bottom: -7px; font-size: 6px; left: 11px; font-family: 'Helvetica Neue 55 Roman', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', sans-serif; letter-spacing: 0.1rem; }

.btn.disabled { border-color: lightgrey; color:lightgrey; background-color: transparent; }
.btn.disabled:hover { border-color: lightgrey; color:lightgrey; background-color: transparent; }

/* Primary | Secondary */

.btn--primary,
.btn--secondary {
    -webkit-transition: background-color 450ms, color 450ms;
            transition: background-color 450ms, color 450ms;
}

.btn--primary          { background-color: #9633ff; border-color: #9633ff; color: white; }
.btn--secondary        { background-color: #ffffff; border-color: #9633ff; color: #9633ff; }

.btn--primary:hover    { background-color: white;   color: #9633ff; }
.btn--secondary:hover  { background-color: #9633ff; color: white;   }

.btn--isDisabled       { border-color: #ddd; background-color: white; color: #ddd; }
.btn--isDisabled:hover { border-color: #ccc; background-color: white; color: #ccc; }

.btn--transparent      { background-color: transparent; border-color: white; color: white; }

.color-primary { color: #9633ff; }

/* Height */

.btn--shrink    { padding-top: 2px; padding-bottom: 2px; margin-top: -1px; }
.btn--short     { padding-left: 20px; letter-spacing: 0px; padding-right: 20px; line-height: 2.6rem; }
.btn--midheight { height: 46px; }

.btn--skip { padding: 10px 15px; }
.btn--fullwidth { width: 100%; }
.btn--outlined { padding: 12px; border: 1px solid #D6D6D6; border-radius: 4px; }
.btn--normalised { letter-spacing: 0; text-transform: initial; }

.btn--card { border: 1px solid #B7B7B7; border-radius: 8px; color: #9633ff; font-size: 1.7rem; padding: 8px; margin-top: 10px; }

.btn--p5  { padding: 5px  10px; }
.btn--p10 { padding: 10px 20px; }

.btn--enlarge { padding: 10px 30px; }

/*
    FORM ELEMENTS

    I've used .force here to increase the specificity to 2. Otherwise
    it would have been overwritten by framework.css

    ----------------------------------------------------

*/

.tagInput,
.tagInput.force { color: #666; background-color: #F3F3F3; border: 0px; border-radius: 25px; height: 23px; width: 70px; line-height: 1.3rem; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; font-size: 1.1rem; color: #ADABAB; margin-bottom: 0px; float: left;}
.tagInput.force:focus { border: 1px solid #EFEEEE; width: 120px;
    -webkit-transition: width 400ms;
            transition: width 400ms;
}


          :-moz-placeholder { color: #bbb; }
         ::-moz-placeholder { color: #bbb; }
     :-ms-input-placeholder { color: #bbb; }
::-webkit-input-placeholder { color: #bbb; }

.placeholder-black:-moz-placeholder { color: black; }
.placeholder-black::-moz-placeholder { color: black; }
.placeholder-black:-ms-input-placeholder { color: black; }
.placeholder-black::-webkit-input-placeholder { color: black; }



/* FORM VALIDATON using Parsley */

form.small-errors .parsley-errors-list { display: none; list-style: none; }
form.small-errors .parsley-errors-list.filled { display: block; position: absolute; top: -17px; font-size: 0.9rem; color: #F10000; width: 100%; }
form .row { position: relative; margin: 0;}

input[data-parsley-id] {
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    border: 1px solid #EED3D7;
}







/*
    MODULES

    ----------------------------------------------------
*/

/* Spinner for Ajax */

.spinner { background: url('../images/gif/ajax-loader3.gif') no-repeat center center transparent; width: 32px; height: 32px; margin: 0 auto; }

.tab { display: none; opacity: 1; filter: alpha(opacity=100); }
.tab--default { display: block; }



/* Generic User Avatar
------------------------------------------------ */

.user-avatar {
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.user-avatar > * {
    display: block;
    height: inherit;
    width: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100%;
}

.user-avatar a img {
    width: inherit;
    height: inherit;
    border-radius: 100%;
}


.user-avatar--small    { width: 25px; height: 25px; }
.user-avatar--smallish { width: 30px; height: 30px; }
.user-avatar--medium   { width: 35px; height: 35px; }
.user-avatar--ml       { width: 36px; height: 36px; }
.user-avatar--xl       { width: 40px; height: 40px; }
.user-avatar--xxl      { width: 77px; height: 77px; }
.user-avatar--auto     { width: 80px; height: 80px; }

.user-avatar--left { margin-right: 8px; }
.user-avatar--hard-left { float: left; margin-right: 10px; position: absolute; left: 0px; }


/* DISCOVER PAGE FORM

   MUSIC | ALL | SUGGESTED     // tndr.ly/discover/
------------------------------------------------ */

#discoverForm #Discover_creatorType { }
#discoverForm #Discover_creatorType.default { width: 61px; margin-right: 9px; }
#discoverForm #Discover_subType { }
#discoverForm #Discover_subType.default { width: 42px; margin-right: 23px; }
#discoverForm #Discover_creatorType { }

#discoverForm select {
    width: auto; margin-right: auto;
    -webkit-transition: all 250ms;
            transition: all 250ms;
}

.tndr-select {
    background-image: url('../svg/compiled/ui-elements.svg');
    background-position: right -223px;
    background-repeat: no-repeat;

    color: #9633ff;

    width: auto;
    padding: 0 20px 0 0;
    border: 0px;
    margin: 0px;

    font-size: 1.2rem;
    font-family: 'Helvetica Neue 45 Light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03rem;

    overflow: hidden;

    -webkit-appearance: none;
       -moz-appearance: none;
}

.tndr-select:focus { outline: none; border: none; }


/* EDIT PAGE - ASIDE INFO
------------------------------------------------ */


.main-column { width: 100%; padding-left: 60px; padding-right: 14px; }

.open-info-button {
    position: fixed;
    height: 63px;
    width: 60px;
    overflow: hidden;
    z-index: 10;
    border: 1px solid #ccc;
    border-right: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: center;
    padding: 19px;
    box-shadow: 0px 0px 11px #ccc;
    background: white;

    -webkit-transform: rotate(-90deg);

        -ms-transform: rotate(-90deg);

            transform: rotate(-90deg);
    top: 44px;
    right: 10px;

    -webkit-transition: right 250ms, top 250ms;
            transition: right 250ms, top 250ms;
}
.open-info-button q { opacity: 0.8; filter: alpha(opacity=80); }
.open-info-button:hover q { opacity: 1; filter: alpha(opacity=100); }
.open-info-button.selected { top: -65px; }

@media (min-width:1100px) {
    .open-info-button { top: 78px; right: 0px;-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
    .open-info-button.selected { top: 78px; right: -65px; ; }
}

.post-info { }
.post-info-main-hl { margin-bottom: 1px; margin-top: -3px; }
.post-info-status { padding: 10px 0 15px 0; font-size: 1.2rem; }
.post-info-sub-hl { font-size: 1.35rem; font-weight: 600; }
.post-info-section { border-bottom: 1px solid #F7F7F7; padding: 11px 0; text-align: left; margin-right: 8px; }
.post-info-section-intro { text-align: center; border: none; padding-top: 0px; }
.post-info-section--center { text-align: center; }
.post-info-section--publish { border-top: 1px solid black; border-bottom: 1px solid black; margin-bottom: 40px; }
@media (max-width:1099px) {
    .post-info-section:last-of-type {margin-right: 80px; padding-right:50px;}
}
@media (min-width:1100px) {
	.post-info-section--publish	{ clear: both; }
}
.post-info-section:nth-last-child(1) { border-bottom: none; }
.post-info-subline { font-size: 0.85rem; margin-top: 21px; margin-bottom: 6px; display: inline-block;}
.post-info-embed-code { overflow: hidden; border: 1px solid #F3F0F0; border-radius: 5px; font-size: 7px; line-height: 22px; color: #999; padding: 0px 5px; letter-spacing: -0.05em; margin: 0; }
.post-info-direct-link { color: #D4D4D4; border-bottom: 1px solid #5D5D5D; clear: both; width: 100%; overflow: hidden; display: inline; -webkit-font-smoothing: antialiased; padding-bottom: 0px; font-size: 1.3rem; }
.post-info-direct-link:hover { color: #B3B3B3; opacity: .8; filter: alpha(opacity=80); }
.post-info-direct-link span { color: #333; }
.post-info-direct-link span:hover { color: #484848; }
.post-info-direct-link-edit { display: none; }

.post-info-opinion input { height: 18px; padding: 0px; margin-bottom: 0; width:100%; }

/* needs 'input' due to css specificity precidence rules. */
input.post-info-community-name { height: auto; }

.post-info-tags { height: 30px; }
.post-info-tag { overflow: hidden; position: relative; background: #D5D5D5; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; font-size: 1.1rem; color: #8A8A8A; margin-right: 5px; float: left; margin-bottom: 5px; }
.post-info-tag-add { background: #EEE; color: #ADABAB; }
.post-info-tag span { position: absolute; right: -23px; background-color: #FFF; z-index: 10; display: block; height: 100%; width: 22px; top: 0; border-radius: 50%; color: #9633ff; -webkit-transition: all 250ms; transition: all 250ms; }
.post-info-tag:hover span { right: 0; text-indent: 0px; }
.post-info-tag span:after { content: ""; background: url('../svg/la/close_rounded.svg') no-repeat center center; padding: 5px; display: block; text-align: center; font-size: 0.8rem; width: 10px; height: 100%; margin-left: 4px; }
.postsTags {}
.postsTags .post-info-tag { display: inline-block; float: none; }

.post-info-validation-errors { padding-bottom: 17px; color: #EF0909; float: left; }


/* Bottom Bar (position fixed and loose)
------------------------------------------------ */

.bottom-fixed {
    -webkit-transition: bottom 250ms;
            transition: bottom 250ms;
}

.bottom-fixed { max-width: initial; position: fixed; bottom: 0px; z-index: 100; width: 100%; background-color: #FFF; left: 0; border-top: 1px solid #D3D3D3; display: table; font-size: 1.3em; padding-top: 12px; padding-bottom: 2px; }
.bottom-fixed .bottom-info { height: 31px; max-width: 690px; }


@media (max-width: 300px) {
    .bottom-fixed .bottom-info {
        width: 100%; padding: 0;
    }
}

@media (min-width: 300px) {
    .bottom-fixed .bottom-info {
        padding-left: 20px;
        padding-right: 20px;
    }
}




.showing-overlay .bottom-fixed,
.hide-bottom-bar .bottom-fixed { bottom: -105px; }


/* FORM ELEMENTS: AGE SLIDER
------------------------------------------------ */

.rangeSliderWrap { position: relative; height: 60px; float: right; }
.rangeSlider     { margin-top: 17px; margin-right: 5px; float: right; width: 213px; }

.rangeSlider.ui-slider {
/*    background: #ccc;
*/
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
            height: 3px;
            position: relative;
}

.rangeSliderWrap .ui-slider .ui-slider-range {
    background-color: #C38F31;
    background-image: none;
    height: 100%;
}

.rangeSliderWrap .ui-slider-horizontal .ui-slider-handle {
/*    background: #C38F31;

    width: 10px;
    height: 10px;
    margin-top: -5px;

    -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);

/*    border: 8px solid #9633ff;*/
    border-radius: 15px;

    background-color: #9633ff;
    background-image: none;

    height: 1em;
    border: none;
    width: 1em;
    margin-top: -6px;
    cursor: pointer;

    z-index: 10;
    position: absolute;
    height: 11px;
    width: 11px;

}

.rangeSliderWrap .ui-slider-horizontal .ui-slider-handle:focus {
    outline: none;
}

.rangeSliderWrap .slider-legend {
    position: relative;
    top: 10px;
    left: 7px;
}

.rangeSliderWrap .slider-legend span {
    display: inline-block;
    color: #eee;
    -webkit-transition: color 100ms;
            transition: color 100ms;
}

.rangeSliderWrap .slider-legend span.current {
    color: black;
}

.rangeSliderWrap .slider-legend span:last-of-type {
    width: auto !important;
}

/*
    Campaigns Nav
*/

.campaigns-nav { position: relative; height: auto; width: auto; margin-top: 44px; margin-bottom: -21px; overflow: hidden; }
.campaigns-nav ul { display: block; margin-left: 0px; }
.campaigns-nav ul li { padding: 0px; }
.campaigns-nav ul li a { font-family: 'Helvetica Neue 55 Roman'; text-transform: uppercase; font-weight: 600; color: #CCC; }
.campaigns-nav ul li a.selected { color: #666; }


/*
    A Carousel

    This was used as a horizontal caroussel with left/right click options but has
    been replaced with a scrollbar now...

*/

@media (max-width: 1100px) {

    .aside-create-tab .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-bottom: 0px; }

    .tndr-container-carousel-wrap { height: 100px !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; display: inline-block; width: auto; }
    .tndr-container-carousel { width: 1000px; position: relative; }

    .tndr-container-carousel-nav-wrap { /*display: block;*/width: 50px; height: 140px; position: absolute; right: 0px; padding: 4px; top: 0; }
    .tndr-container-carousel-nav-wrap a { height: 63px; background-color: #FFF; display: inline-block; width: 40px; border-radius: 2px; padding-top: 20px; margin-bottom: 4px; font-weight: 100; color: #BBB; font-size: 1.3rem; border: 1px solid #E0E0E0; }
    .tndr-container-carousel-nav-wrap a:last-of-type { margin-bottom: 0px; }

}


/* MEDIUM STYLE FULL SCREEN OVERLAY
------------------------------------------------ */

*[data-overlay] { position: fixed; overflow: auto; text-align: center; top: 0; left: 0; bottom: 0; right: 0; z-index: 3000; background-color: #fff; background-color: rgba(255,255,255,0.97); display: none; }
*[data-overlay].isVisible { display: block; }
*[data-overlay]:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
*[data-close-overlay] { /* just a trigger */ }
*[data-overlay-dark] { background-color: rgba(0, 0, 0, 0.78); }

.close-overlay { margin: 16px 24px; position: absolute; right: 0px; top: 0px; z-index: 100; color: #252424; font-weight: bold; }
.close-overlay_icon { display: inline-block; position: relative; margin-left: 6px; top: 4px; }

.overlay-dialog {
    display: inline-block;
    vertical-align: middle;
    outline: none;
    overflow: hidden;
    max-width: 600px;
    padding: 70px 20px 20px 20px;
    width: 80%;
}
.overlay-dialog--wider      { max-width: 800px; }
.overlay-dialog--max-width  { max-width: none; width: 99%; }
.overlay-dialog--with-pages { padding: 0px;}

/*
    Sorry about this, low on time, this should be handled
    by the parameters in tndr.overlay.js, but I'm low on
    time so yeah apt get moo.
*/

.overlay-nav { display: none; }

.overlay-nav { position: absolute; width: 100%; text-align: center;bottom: 10px; z-index: 4; }
.overlay-nav a { color: black; text-decoration: none; }
.overlay-nav ul { list-style-type: none; padding: 0px; display: inline-block; }
.overlay-nav ul li { display: inline; vertical-align: bottom; position: relative; margin-right: 5px; }
.overlay-nav ul li *[data-page] { vertical-align: middle; border: 1px solid #9633ff; text-indent: -77777px; width: 30px; height: 12px; background: whitesmoke; display: inline-block; border-radius: 25px; margin-top: -4px; border-width: 1px; }
.overlay-nav ul li *[data-page].disabled { cursor: default; opacity: .5; filter: alpha(opacity=50); }
.overlay-nav ul li *[data-page].current { border-width: 6px; }

.overlay-pages { white-space: nowrap; position: relative; font-size: 0px; }
.overlay-page  { white-space: normal; display: inline-block; font-size: 1.2rem; vertical-align: middle; width: 100%; }
.overlay-page > div { max-width: 600px; margin: 0 auto; }


/* OVERLAY: Animations
---------------------------------------------*/

.overlay-dialog {
    -webkit-animation: scale-fade 300ms forwards cubic-bezier(.8, .02, .45, .91);
            animation: scale-fade 300ms forwards cubic-bezier(.8, .02, .45, .91);
    -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
            transform-origin: bottom center;
}

.overlay-nav ul li *[data-page] {
    -webkit-transition: border-width 350ms cubic-bezier(.8, .02, .45, .91) ;
            transition: border-width 350ms cubic-bezier(.8, .02, .45, .91);
}


/* OVERLAY: GENERIC NODES */
.overlay-title { color: rgba(0,0,0,0.8); font-size: 32px; line-height: 1.1; margin-bottom: 6px; }
.overlay-content { color: rgba(0,0,0,0.6); line-height: 1.4; margin-bottom: 30px; }


/* OVERLAY: SPECIFICS PER OVERLAY  */

*[data-overlay="follow-times"] { }
*[data-overlay="follow-times"] .narrower { padding-left: 0px; padding-right: 0px; }
*[data-overlay="follow-times"] .timePeriod > .control-group,
*[data-overlay="follow-times"] .dayPeriod > .control-group { width: auto; margin-right: 10px; }

*[data-overlay="signup"] { }
*[data-overlay="signup"] .overlay-page > div { max-width: 250px; }


/* SWEETOVERLAY.js TWEAKS
---------------------------------------------*/

body .sweet-overlay { background-color: transparent; }
body .sweet-alert { box-shadow: 0px 0px 40px #D2D2D2; border-radius: 15px; }
body .sweet-alert button { line-height: 1rem; font-size: 1rem; background: rgb(179, 144, 82); border: 1px solid #ddd; color: #9633ff; border-radius: 20px; }
body .sweet-alert button.cancel { background: transparent; }
body .sweet-alert button:hover { color: white; background: rgb(179, 144, 82) !important; }
body .sweet-alert fieldset { display: none; }
body .sweet-alert p { color: #797979; font-size: inherit; text-align: center; font-weight: 400; margin: 0; padding: 0; line-height: normal; }



/*
    DOWNLOAD LATER -> EMAIL SIGNUP POPUP-CARD
*/

.email-signup { max-width: 370px; margin: 0 auto; }
.email-signup p { margin-bottom: 0 !important; }
.email-signup_col { float: left; width: 100%; display: inline-block; height: 100%; background: white; padding: 0px; height: 130px; }
.email-signup_col--image { }
.email-signup_col--image_img { background-color: #EFEFEF; background-size: cover; min-height: inherit; background-position: 50%; height: 130px; }
.email-signup_col--form { height: auto; color: rgb(34, 34, 34); background: #FFFFFF; padding: 10px 25px; min-height: 220px;}
.email-signup_col--form input[type="text"] { border: 1px solid #ddd; }
.email-signup_col--form input[type="email"] { border: 1px solid #ddd; }
.email-signup_col--form_top { text-align: center;  }
.email-signup_col--form_top_h3 { font-size: 1.9rem; line-height: 1.8rem; margin-top:10px; margin-bottom:10px; display: none; }
.email-signup_col--form_top_p { font-size: 1.2rem; margin-bottom: 10px; margin-top: 0px; display: inline-block; line-height: 1.8rem; max-height: 60px; }
.email-signup_col--form_top_p p { margin: 0; }
.email-signup_col--form_bottom { font-size: 0.6rem; color: #B7B7B7; line-height: 20px;margin-left: -10px;margin-right: -10px;}
.email-signup_col--form_sig { max-width: 100%; max-height: 35px; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.email-signup_col--form_form { margin-bottom: 0rem; margin-top: 1rem; }
.email-signup_col--form_button { border-radius: 2px; margin-bottom: 10px; display: block; width: 100%; padding: 10px; }

@media (max-width: 759px) {
    .email-signup { display: inline-block; width: 100%; position: relative; }
}

@media (min-width: 760px) {
    .email-signup { margin: 0px auto; padding: 0; max-width: 685px; display: table; width: 100%; border: 1px solid #ddd; overflow: hidden; /*min-height: 280px;*/ position: relative; }
    .email-signup_col { width: 50%; display: table-cell; float: none; }
    .email-signup_col--form { height: 100%; border: none; border-left: none; vertical-align: middle; }
    .email-signup_col--image { border: none; border-right: none; min-height: 326px; }
}

.showing-download-options { width: 100%; margin: 0 auto; display: inline-block; }
.showing-download-options .progress { display: none; }
.showing-download-options .card.large.card-player { padding-bottom: 1px; }
.showing-download-options .signature-wrap { }
.showing-download-options .navigateBack--outset { display: none; }

@media (min-width: 759px){
    /*.showing-download-options .downloaded { min-width: 680px; }*/
}

@media (max-width: 759px){
    .showing-download-options .card.large.card-player .signature { font-size: 2rem; margin-top: 30px; margin-left: 15px; }
}

.downloadContent .thanks {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding-top: 17px;
    font-size: 2.5rem;
}



/*
    A notice message
*/

.approval-notice { color: #6D6D6D; letter-spacing: 0.025rem; margin-bottom: 6rem; margin-top: 3rem; }
.approval-notice_msg h6 { margin: 0; color: #9633ff; margin-bottom: 5px; font-size: 1.7rem; }
.approval-notice_msg p { color: #929292; font-size: 1.1rem; }



/*
    Date picker
*/

.date-range-selector--stats { }
.date-range-selector--stats input { border: 0px; cursor: pointer; margin: 0; width: 80px; text-align: left; margin-bottom: 1px; padding-right: 0px; }
.date-range-selector--stats input:first-of-type { /*text-align: left;*/ }

@media (max-width: 450px) {
    .date-range-selector--stats input { width: 95px; }
}

body .date-picker-wrapper { z-index: 200; }
.date-picker-wrapper.date-picker-wrapper--stats { position: absolute; border: 1px solid #D0D0D0; background-color: #F5F5F5; padding: 1px 10px; font-size: 12px; line-height: 20px; color: #aaa; box-shadow: 1px 1px 26px rgba(0,0,0,0.2); box-sizing: initial; border-radius: 3px; }
.date-picker-wrapper.date-picker-wrapper--stats input[type="button"].apply-btn { height: 25px; top: 3px; }
.date-picker-wrapper.date-picker-wrapper--stats .normal-top { }
.date-picker-wrapper.date-picker-wrapper--stats .month-wrapper table { margin: 0; }
.date-picker-wrapper.date-picker-wrapper--stats .month-wrapper table .day.checked { background-color: rgb(226, 221, 213); }
.date-picker-wrapper.date-picker-wrapper--stats .first-date-selected { background-color: #B49154 !important; }
.date-picker-wrapper.date-picker-wrapper--stats .last-date-selected { background-color: #B49154 !important; }
.date-picker-wrapper.date-picker-wrapper--stats .month-wrapper table .day.toMonth.hovering { background-color: #E2D6C1; }



/*
    MEDIA QUERIES
    ------------------------------------------------------------------------------------------------------------------------------------------------
*/




























.downloadLater-form {
    width: 150px;
    margin: 0 auto;
    -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
}

.downloadLater-form.focussed {
    width: 100%;
}

.downloadLater-form.focussed.single-line > input[type='text'] {
    padding-left: 18px;
}

.downloadLater-form.focussed.single-line > input[type='submit'] {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.downloadLater-form.single-line {
    border: solid 1px #9633ff;
    border-radius: 20px;
    padding: 0 !important;
    position: relative;
}
.downloadLater-form.single-line > input[type='text'] {
    margin: 0px;
    width: 100% !important;
    margin: 4px;
    height: 25px;
    background: transparent;
    border-bottom: 0px;
    border-bottom: 0px;
    padding-top: 1px;
    padding-left: 10px;
}

.downloadLater-form.single-line > input[type='text']:focus {
    outline: none;
    border: none;
}
.downloadLater-form.single-line > input[type='submit'] {
    position: absolute;
    right: 6px;
    top: 5px;
    background: #9633ff;
    padding: 5px;
    height: 25px;
    width: 40px;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
}








.card-skip {}
.card-skip:hover { /* background: red !important; */}


.login-form-wrap { height: 0; overflow:hidden; }

.bank-account-details-update-info {
    color: green;
}

.preview-surround {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: padding-top 500ms, padding-bottom 500ms;
            transition: padding-top 500ms, padding-bottom 500ms;
}
.preview-surround.phone {
    background-image: url(/images/ui/iPhone-6-wireframe.jpg);
    padding-top: 104px;
    background-size: 370px;
    padding-bottom: 90px;
}
.preview-surround.tablet {
    background-image: url(/images/ui/iPad-wireframe.png);
    padding-top: 130px;
    padding-bottom: 120px;
}





/*
    Skip button update
*/

.video_count { margin: 0; font-size: 1.7rem; border: 0px; text-align: center; width: 35px; background: transparent; display: inline-block; }
.video_count:focus { outline: none; }
.skip_count { padding-left: 3px; }

.card-skip { position: relative; top: -1px; border-left: 1px solid #9633ff; padding-left: 10px; padding-right: 10px; }












/*
    Overview scroll bar
*/

.progress-bar { width: 100%; height: 4px; background: white; margin: 0px auto; border: 1px solid white; border-radius: 25px; position: relative; }
.progress-bar-line { content: ""; position: absolute; top: 0px; left: 0px; width: 10px; background: #9633ff; height: 100%; border-radius: 20px;
    -webkit-transition: width 500ms ease;
            transition: width 500ms ease;
}

.progress-bar-line:after {
    content: "";
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    right: -12px;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    border-width: 3px;
    top: -5px;
    background: #9633ff;
}


.progress-bar--brandcreator { width: 486px; position: relative; left: 0px; }
.progress-bar--brandcreator:before { }















/*
    TINY ORDER-BY DROPDOWN
*/

.nav--order-by { position: relative; height: 25px; margin-bottom: 3rem; display: block; margin-top: -3rem; }
.nav--order-by span { vertical-align: top; }
.nav--order-by div { display: inline-block; }
.nav--order-by a { display: none; }
.nav--order-by a.selected { display: inline; color: #D0D0D0; }
.nav--order-by.open a { display: block; z-index: 1000; position: relative; }
.nav--order-by.open q { display: none; }


/*
    BRAND CREATE GUIDE OVERLAY
*/
.moments-wrap {  }
.moments-wrap .control-group { font-size: 1.25rem; padding: 15px 0px 25px 0px; }
.moments-wrap .control-group p { margin-bottom: 0; color: #A2A2A2; }
.moments-wrap .stageNumber { font-size: 1.5rem; display: block; margin: 0 auto; color: #9633ff; }
.moments-wrap .navigation { padding-top: 25px; }


.roadmap { margin-bottom: 2rem; overflow: hidden; }
.roadmap-stage { cursor: pointer; position: relative; text-transform: uppercase; float: left; width: 20%; }
.roadmap-stage-icon { display: block; text-align: center; }
.roadmap-stage-text { display: block; text-align: center; color: #C7C7C7; font-size: 1.4rem }
.roadmap-stage.current .roadmap-stage-text { color: #9633ff; }
.roadmap-stage-text:hover { color: #9633ff; }
.roadmap-stage-icon:after { position: absolute; height: 1px; content: ""; width: 75%; top: 9px; right: -37%; background: #DEDEDE; }
.roadmap-stage-icon.last:after { content: none; }

               .roadmap-stage-icon { background: url('/images/ui/svg/la/close_rounded.svg'); display: inline-block; background-repeat: no-repeat; height: 8px; background-position: center; width: 100%; }
      .visited .roadmap-stage-icon,
.roadmap--edit .roadmap-stage-icon { background-image: url('/images/ui/svg/tick.svg');}



.roadmap-wrap { padding-top: 15px; overflow: hidden; background: rgb(252, 252, 252); border-bottom: 1px solid #F1F1F1; }
.roadmap-wrap.inline-stick { margin-top: 46px; }

/* stops the brand edit page 'flickering' if the content height is too small for the page */
.brand-edit-content { min-height: 100vh; }

























/*
    Card flip feature
*/



.flip-trigger {
    position: absolute;
    bottom: 4px;
    color: #9633ff;
    left: 0;
    display: none;
}

.flip-trigger--on i {
    color: #ddd;
}

.card.large .flip-trigger {
    display: block;
    color: #2b2b2b;
    font-style: italic;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    position: relative;
    margin-top: 14px;
    margin-bottom: -8px;
    font-weight: normal;
    -webkit-transition: color 250ms;
    transition: color 250ms;
    font-weight: 400;
    -webkit-transition: color 250ms;
            transition: color 250ms;
}

.card.large .flip-trigger:hover {
    color: black;
}



/*
    LOCKER CONTENT
*/

.locker-content-files { list-style-type: none; overflow: hidden;
    -webkit-transition: max-height 500ms ease-in-out;
            transition: max-height 500ms ease-in-out;
}
.locker-content-files ul { margin-right: 20px; color: #8E8E8E; list-style: none; }
.locker-content-files ul li { margin: 0; position: relative; border-bottom: 1px solid #F3F3F3; display: inline-block; width: 100%; float: left; padding: 3px 0; }
.locker-content-files ul li:last-of-type { border: none; }
.locker-content-files ul li a { float: left; }
.locker-content-files ul li a.dl { float: right; color: #9633ff; }
.locker-content-files ul li a.dl.dl-disabled { color: black; }
.locker-content-files ul li a.player { position: absolute; left: -20px; }
.locker-content-files ul li a.player span { margin-left: 8px; }
.locker-content-files ul li a.player .player-icon { color: #B7B7B7;
    -webkit-transition: color 250ms;
            transition: color 250ms;
}
.locker-content-files ul li a.player:hover .player-icon { color: #666; }
.locker-content-item + .locker-content-files { max-height: 0px; }
.locker-content-item.selected + .locker-content-files { max-height: 500px; }

@media (max-width: 550px) {
    .locker-content-files ul li a span { margin-left: -3px; }
}

/* Animation */

.card .locker-content-files ul li { position: relative; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px);
    -webkit-transition: opacity 500ms, -webkit-transform 500ms;
            transition: opacity 500ms, transform 500ms;
}

.collection--show-content .locker-content-files ul li { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.collection--show-content .locker-content-files ul li:nth-of-type(01) { -webkit-transition-delay: 0.025s; transition-delay: 0.025s; }
.collection--show-content .locker-content-files ul li:nth-of-type(02) { -webkit-transition-delay: 0.050s; transition-delay: 0.050s; }
.collection--show-content .locker-content-files ul li:nth-of-type(03) { -webkit-transition-delay: 0.075s; transition-delay: 0.075s; }
.collection--show-content .locker-content-files ul li:nth-of-type(04) { -webkit-transition-delay: 0.100s; transition-delay: 0.100s; }
.collection--show-content .locker-content-files ul li:nth-of-type(05) { -webkit-transition-delay: 0.125s; transition-delay: 0.125s; }
.collection--show-content .locker-content-files ul li:nth-of-type(06) { -webkit-transition-delay: 0.150s; transition-delay: 0.150s; }
.collection--show-content .locker-content-files ul li:nth-of-type(07) { -webkit-transition-delay: 0.175s; transition-delay: 0.175s; }
.collection--show-content .locker-content-files ul li:nth-of-type(08) { -webkit-transition-delay: 0.200s; transition-delay: 0.200s; }
.collection--show-content .locker-content-files ul li:nth-of-type(09) { -webkit-transition-delay: 0.225s; transition-delay: 0.225s; }
.collection--show-content .locker-content-files ul li:nth-of-type(10) { -webkit-transition-delay: 0.250s; transition-delay: 0.250s; }
.collection--show-content .locker-content-files ul li:nth-of-type(11) { -webkit-transition-delay: 0.225s; transition-delay: 0.225s; }
.collection--show-content .locker-content-files ul li:nth-of-type(12) { -webkit-transition-delay: 0.250s; transition-delay: 0.250s; }
.collection--show-content .locker-content-files ul li:nth-of-type(13) { -webkit-transition-delay: 0.275s; transition-delay: 0.275s; }
.collection--show-content .locker-content-files ul li:nth-of-type(14) { -webkit-transition-delay: 0.300s; transition-delay: 0.300s; }
.collection--show-content .locker-content-files ul li:nth-of-type(15) { -webkit-transition-delay: 0.325s; transition-delay: 0.325s; }
.collection--show-content .locker-content-files ul li:nth-of-type(16) { -webkit-transition-delay: 0.350s; transition-delay: 0.350s; }
.collection--show-content .locker-content-files ul li:nth-of-type(17) { -webkit-transition-delay: 0.375s; transition-delay: 0.375s; }
.collection--show-content .locker-content-files ul li:nth-of-type(18) { -webkit-transition-delay: 0.400s; transition-delay: 0.400s; }
.collection--show-content .locker-content-files ul li:nth-of-type(19) { -webkit-transition-delay: 0.425s; transition-delay: 0.425s; }
.collection--show-content .locker-content-files ul li:nth-of-type(20) { -webkit-transition-delay: 0.550s; transition-delay: 0.550s; }


/*
    LOCKER STYLE LIST OF FILES ON A CARD
*/

.collection--show-content { }
.collection--show-content .card-files {opacity: 0.98;filter: alpha(opacity=98); visibility: visible;}














/*
    VIDEO Dropdown Container
*/


.dropdown-container { overflow: hidden; background: white; position: fixed; top: -400px; z-index: 10; width: 100%; background: white; border-bottom: 1px solid #ddd; }
.dropdown-container--video { }

.dropdown-video_col_video { width: 100%; float: left; }
.dropdown-video_col_nav { width: 100%; display: block; }
.dropdown-video_caption { padding: 5px 15px; }
.dropdown-video_hl { margin-bottom: 1rem; }
.dropdown-video_p { margin: 0; font-size: 1.1rem; width: 90%; line-height: 1.6rem; color: #828282; }
.dropdown-video_embed { width: 100%; }
.dropdown-video_nav_list { list-style-type: none; margin: 5px 0; }
.dropdown-video_nav_listitem { background: white; float: left; width: 33.3%; text-align: center; }
.dropdown-video_nav_listitem--first { border-right: 1px solid #ddd; }
.dropdown-video_nav_listitem--last { border-left: 1px solid #ddd; }
.dropdown-video_nav_link { color: #B7B7B7; font-family: 'Helvetica'; font-size: 1.1rem; text-transform: uppercase; }
.dropdown-video--selected a { color: #9633ff; }

@media (min-width: 600px) {
    .dropdown-container { border-bottom: none; }
    .dropdown-video_col1 { width: 83%;  }
    .dropdown-video_caption { padding-top: 10px; }
    .dropdown-video_embed { width: 40%; margin-right: 18px; float: left; }
    .dropdown-video_nav_list { position: absolute; height: 100%; right: 0; top: 0; width: 210px; margin: 0; }
    .dropdown-video_nav_listitem { height: 33.3%; margin: 0; display: table; width: 100%; text-align: center; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; }
    .dropdown-video_nav_link { display: table-cell; vertical-align: middle; }
    .dropdown-video--selected { border-left: 3px solid #9633ff; }
}










/*
    ENGAGEMENT AREA

    Tabs:
      - Opinions
      - Questions and Answers
      - Comments
*/

.engagement-tab { }
.engagement-tab .message {
    color: #CCCACA;
    margin-bottom: 30px;
}

.engagement-wrap { display: block; margin-bottom: 35px; font-size: 1.3rem; }
.engagement-wrap .message { font-size: 1.5rem; }

.engagement-tabs { border-bottom: 1px solid #ddd; display: inline-block; width: 100%; }
.engagement-tabs a { padding: 0 2.1em; font-size: 1.35rem; color: #CCCACA; float: left; width: 33.3%; text-align: center; margin-bottom: -1px; padding-bottom: 1.3rem; }
.engagement-tabs a.engagement-tabs--selected { color: #525252; border-bottom: 1px solid black; }
.engagement-tabs--selected { background: #f3f3f3; }

.engagement-areaBtn { margin-bottom: 20px; }
.engagement-areaIcon { position: relative; top: -1px; left: -5px; }

@media (min-width: 490px) {
    .engagement-areaBtn { width: 200px; }
}

.engagement-tabs a { padding-top: 11px; padding-bottom: 9px; font-weight: 500; }
.engagement-tabs a.engagement-tabs--selected { color: #525252; border-bottom: 1px solid #E0DEDE; background: #EFEFEF; }

@media (min-width: 600px) {
    .engagement-tabs a { width: auto; }
}

.engagement-h2 {
    font-size: inherit;
    margin: 0;
    display: initial;
    font-weight: inherit;
}


.engagement-tab { width: 100%; }

.engagement-opinions { padding: 45px 0 90px 0; }
.engagement-opinions-headline { margin-bottom: 20px; display: inline-block; width: 100%; }
.engagement-opinions-writeBtn { margin-top: -6px; }
.engagement-opinions-subline { margin-bottom: 10px; }


@media (max-width: 420px) {
    .engagement-opinions-headline *,
    .engagement-opinions-subline * {
        width: 100%;
    }
}


/*
    TAGS PAGE
*/

.taglist_li { display: inline-block; margin: 0 1.5rem 0 0; padding: 0 1.5rem 0 0; text-transform: uppercase; color: #1F1F1F; border-right: 1px solid #ddd; }
.taglist_li h3 { margin-bottom: 0; }
.taglist_li a { color: #1F1F1F; }


.resultlist-wrap { }
.resultlist { margin: 2rem 0; font-size: 1rem; border-bottom: 1px solid #F0F0F0; padding-bottom: 2rem; }
.resultlist--hero { }
.resultlist--three-col {}
.resultlist--three-col article:nth-of-type(4n) { margin-left: 0; }
.resultlist--four-col { font-size: 0.85rem; }
.resultlist--four-col article:nth-of-type(5n) { margin-left: 0; }
.resultlist--five-col { }
.resultlist--five-col article:nth-of-type(6n) { margin-left: 0; }
.resultlist--twelve-col {}

/* HORSING */

.resultlist article { border-bottom: 1px solid #f0f0f0; padding: 2rem 0; overflow: hidden; }
.resultlist article.sideimg .product-figure { margin: 0; float: right; }
.resultlist article.sideimg .product-figure.video { /*background-image: url('/images/ui/svg/play43.svg'); background-size: 50px; background-repeat: no-repeat; background-position: center;*/}
.resultlist article .product-excerpt--inlist { color: #444; margin: 0;}
.resultlist article .product-footer { margin-top: 0.7em; font-size: 1rem; }
.resultlist article .intro { margin: 0; font-size: inherit; margin-bottom: 0.3em; padding: 5px 0; float: left; border-bottom: 1px solid #f0f0f0; letter-spacing: 0.075em; }
.resultlist article .intro a { color: #9633ff; }

.resultlist article .product-question { border-top: 1px solid #EAEAEA; border-bottom: 1px solid #eaeaea; margin-top: 1em; background: #FBFBFB; padding: 3px 11px 9px 11px; display: block; }
.resultlist article .product-question ul { list-style-type: none; margin: 0; padding: 0; }
.resultlist article .product-question ul li { margin: 0; padding: 0; line-height: 1.5em; }
.resultlist article .product-question ul li span { color: #BEA16C; margin-right: 10px; }
.resultlist article .product-question h8 { display: block; line-height: 20px; }
.resultlist article .product-question .product-question-seemore { padding-left: 18px; color: #50A2BB; }

.resultlist article .product-answer { border-top: 1px solid #EAEAEA; border-bottom: 1px solid #eaeaea; margin-top: 1em; background: #FBFBFB; padding: 3px 11px 9px 11px; display: block; }
.resultlist article .product-answer i { font-size: 1.8em; vertical-align: sub; }
.resultlist article .product-answer ul { list-style-type: none; margin: 0; padding: 0; }
.resultlist article .product-answer ul li { margin: 0 0 0.2em 0; padding: 0; line-height: 1.2em; }
.resultlist article .product-answer ul li.indent { float: right; }
.resultlist article .product-answer ul li.indent i { padding-left: 5px; }
.resultlist article .product-answer ul li span { color: #BEA16C; margin-right: 2px; }
.resultlist article .product-answer h8 { display: block; line-height: 20px; }
.resultlist article .product-answer .product-question-seemore { padding-left: 19px; color: #50A2BB; clear: both; border-top: 1px solid #ddd; padding-top: 6px; margin-top: 40px; display: block; line-height: 8px; }
.resultlist article .product-answer .product-question-seemore span { color: #ADADAD; padding: 5px; }
.resultlist article .product-answer .asked-by { padding-left: 19px; color: #666; }
.resultlist article .product-answer .answered-by { color: #666; position: relative; left: 286px; }

.resultlist article.square.borderless { overflow: visible;; position: relative; }
/*.resultlist article.square.borderless.first:after {
    content: "";
    position: absolute;
    border-right: 1px solid #F0F0F0;
    top: 2em;
    right: -10px;
    overflow: visible;
    bottom: 2em;
}*/
.resultlist div.bordered { position: relative; overflow: hidden; }
.resultlist div.bordered:after {
    content: "";
    position: absolute;
    border-right: 1px solid #F0F0F0;
    top: 2em;
    overflow: visible;
    left: 50%;
    height: calc(100% - 4em);
    display: block;
}

#Capa_1 {
    overflow: hidden;
    width: inherit;
    height: inherit;
    display: inline-block;
    margin: 0 auto;
    width: 25%;
    fill: #616161;
    left: 50%;
    position: relative;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}


.product { overflow: hidden; margin-bottom: 2rem; font-family: 'TiemposHeadline-Medium'; }
.product-excerpt { font-family: 'georgia'; color: #535353; font-size: 1.2em; line-height: 1.7em; margin-bottom: 0.5em; }
.product-excerpt--inlist { font-size: 1.2em; line-height: 1.4em; letter-spacing: 0.025em; }
.product-headline { font-size: 1.85em; position: relative; margin-bottom: 0.2em; letter-spacing: 0.025em; line-height: 1.2em; }
.product-headline--inlist { font-size: 1.8em; margin-bottom: 0.2em; letter-spacing: 0; clear: both; } /* i quite like 2em */
.product-headline_a { color: #1F1F1F; clear: both; }
.product-figure { height: 0; padding-bottom: 62.5%; background: #F7F6F2; margin-bottom: 1em;}
.product-figure--normal { padding: 0; height: 122px; }
.product-footer { font-size: 0.9em; }
.product-footer a { color: #9633ff; }

.resultlist article.borderless { border: none; }
.resultlist .bordered { border-bottom: 1px solid #f0f0f0; }
.resultlist .product-footer.fakie { margin-top: 0;}







/*
    Tooltip
*/
.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    box-shadow: 0 0 5px #aaa;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background-color: #ffffff;
    color: #222222;
}








.opinion-bar { max-width: none !important; overflow: hidden; border-bottom: 1px solid #F5F2F2; padding-left: 7%; z-index: 10; position: relative; }
.opinion-bar-label { display: inline-block; margin: 0; font-size: 1.1rem; margin-right: 11px; position: relative; top: 1px; }

@media (min-width: 500px ) {
    .opinion-bar-label { display: inline-block; margin: 0; font-size: 1.3rem; vertical-align: text-top; padding-left: 7px; font-size: 1.2rem; position: relative; top: -2px; line-height: 1.5rem; letter-spacing: 0.03rem; width: 100px; text-align: right; margin-right: 10px; }
}

.signature.sponsor .user-avatar {
    display: inline-block;
    vertical-align: middle;
}





















/*

HOMEPAGE
------------------------------- */





/* GRID

   Grid width:    1024px
   Column Count:  10
   Column Gutter: 50px
----------------------------------------------------------------- */

.container--feed { line-height: 18px; width: 100%; margin-bottom: 35px; }






.container--feed .more-link { margin: 9px 0; display: block; color: #9633ff; text-align: right; font-size: 12px; }


/* GRID SEPARATORS
----------------------------------------------------------------- */

.column--separator { position: relative; }
.column--separator:after { content: ""; position: absolute;  top: 0; height: 100%; border-right: 1px solid transparent; }

@media (min-width: 768px) {
    .column--feed { padding-left: 50px; padding-right: 50px; }
    .column--feed:after { border-color: #ececec; right: -4.5%; }
}

/* SINGLE COLUMN LAYOUT
----------------------------------------------------------------- */
.column--generic { max-width: 630px; margin-left: auto; margin-right: auto; }
.column--borderlr { border-left: 1px solid #f3f3f3; border-right: 1px solid #f3f3f3; }

.column--generic--outdent {}
.column--generic--outdent > div { margin-left: -20px; margin-right: -20px; }

/*
    TABS
*/

.trending-tabs { border-bottom: 1px solid #ddd; display: inline-block; width: 100%; }
.trending-tabs a { padding: 1em; float: left; margin-bottom: -1px; }
.trending-tabs a:first-of-type { padding-left: 0; }
.trending-tabs a:hover,
.trending-tabs a.trending-tabs--selected,
.trending-tabs a.trending-qa-tabs--selected { color: #3E3D3D; border-bottom: 1px solid #3E3D3D; }

.trending-tabs a {
    -webkit-transition: color 150ms ease-out, border-color 200ms ease-out;
            transition: color 150ms ease-out, border-color 200ms ease-out;
}


/*
    MEDIA QUERY BREAKPOINTS

      Mobile first
    - 320px ( base css )
    - 768px
    - 1000px

*/

.column--feed { margin: 0 auto; }

.column--feed.isLoading { }

.column--communities { display: none; }

@media (min-width: 320px) {

}

@media (min-width: 760px) {

    .container--feed { padding-left: 25px; padding-right: 25px; }

    .container--wide { max-width: 1024px; width: 100%; margin-left: auto; margin-right: auto; }

    .column--feed        { display: block; max-width: 640px;  }
    .column--communities { display: block; width: 30%; margin-left: 5%; }

}

@media (min-width: 1000px) {
    .column--feed        { }
    .column--communities {}
}

.column--center {
    margin-left:auto;
    margin-right:auto;
    float:none;
}

.component .choose {
    background-color: white;
}


.list-selector label,
.statusSelect label {
    display: inline-block;
    font-weight: normal;
}
.list-selector_label { color: #CECECE; }


/*
    Community Column
*/


.column--communities { font-size: 1.2rem; display: none; }

.column--communities-follow {}
.column--communities-follow:before { content: "Follow"; }
.column--communities-follow[data-imfollowingcommunity="1"]:before { content: "Following"; }
.column--communities-follow:not([data-imfollowingcommunity="1"]):before { }

.postlist { }

.postlist--simple_header { display: block; overflow: hidden; height: 31px; border-bottom: 1px solid #ececec; }
.postlist--simple_hl { color: black; font-size: inherit; }
.postlist--simple_pullup { margin-top: -31px; }
.postlist--simple_ul { list-style: none; overflow: hidden; display: block; width: 100%; }
.postlist--simple_li { padding: 10px 0 10px 0; overflow: hidden; border-bottom: 1px solid #ececec; }
.postlist--simple_li .user-avatar { }
.postlist--simple_lhs { float: left; width: 40px; margin-top: 3px; }
.postlist--simple_rhs { float: right; width: 80%; }
.postlist--simple_title { margin-bottom: 5px; color: black; font-size: inherit; font-weight: 400; max-height: 70px; overflow: hidden; }
.postlist--simple_author { font-size: 1.1rem; color: #444444; }

@media (min-width: 900px) {
    .column--communities {
        display: block;
    }
}

/*
    Notice

    - on the top of the page ( like a cookie notice )
    - closeable
*/


.notice {
    padding: 7px 0;
    line-height: 32px;
    position: relative;
    background: #F5F5F5;
    z-index: 150;

    -webkit-transition: margin .5s cubic-bezier(.8, .02, .45, .91);
            transition: margin .5s cubic-bezier(.8, .02, .45, .91);

    display: none;
}

.notice.isHidden {
    margin-top:-47px;
}

@media (max-width: 449px) {
    .notice.isHidden {
        margin-top:-88px;
    }
}

.notice-intro      { margin-right: 5px; display: block; }
.notice-btn        { letter-spacing: 1px; font-size: 1rem; line-height: 2.1rem; top: -1px; }
.notice-close      { text-transform: uppercase; color: #9633ff; font-weight: 500; padding-top: 7px; font-size: 1.2rem; }
.notice-close-icon { vertical-align: sub; display: inline-block; }
.notice-close:hover .notice-close-icon { fill: #333; }

@media (max-width: 449px) {
    .notice-close  { position: absolute; top: 0; right: 19px; padding: 0; }
    .notice-btn  { top: 0px; margin-bottom: 7px; }
}

@media (min-width: 450px) {
    .notice { line-height: initial; }
    .notice-intro { display: initial; }
}





/*
    Introduction

    - inline
    - closeable
*/


.introduction {
    background: #c386c5;
    color: white;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: #c586ad;
    text-align: center;
    /*padding: 100px 0 60px 0;*/

    -webkit-transition: all .5s cubic-bezier(.8, .02, .45, .91);
            transition: all .5s cubic-bezier(.8, .02, .45, .91);
}

.introduction p { color: #444; }

.introduction.isHidden {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            max-height: 0px;
            padding-top: 0px;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
}

.introduction-headline { font-weight: 400; }
.introduction-p { font-size: 1.3rem; }
.introduction-close { position: absolute; right: 15px; top: 15px; height: 20px; width: 20px; }
.introduction-buttons { }
.introduction-button { }

@media (min-width: 500px) {
    .introduction { width: 100%; }
    .introduction-headline { font-size: 2.7rem; text-align: center; }
    .introduction-p { text-align: center; width: 340px; margin: 1.4rem auto 2rem auto; font-size: 1.4rem; line-height: 1.9rem; }
    .introduction-buttons { text-align: center; margin: 0 auto; }
    .introduction-button { margin: 0px 3px;}
    .site--beta .introduction-p { width: 100%; max-width: 720px; }


}

@media (min-width: 1250px) {
    /*.introduction { padding: 200px 20px; }*/
    .introduction-headline { font-size: 3.2rem; }
    .introduction-p { width: 470px; margin: 2rem auto 2.5rem auto; font-size: 1.5rem; line-height: 2.2rem; }
    .site--beta .introduction-p { width: 100%; max-width: 720px; }
}

.introduction--fullwidth {

}

.user--introduction { padding: 20px; }
.user--introduction-mainheadline { width: 100%; text-align: center; margin: 20px 0 0px 0; font-size: 2rem; font-weight: 600; }
.user--introduction-headline { font-size: 1.9rem; font-weight: 700; margin-bottom: 10px; }
.user--introduction p { font-size: 1.3rem; margin-bottom: 15px; }



.information {
    background: #c386c5;
    color: white;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: #c386c5;
    text-align: center;
    padding: 60px 0 30px 0;

    -webkit-transition: all .5s cubic-bezier(.8, .02, .45, .91);
            transition: all .5s cubic-bezier(.8, .02, .45, .91);
}

/*.information p { color: #444; }*/

.information.isHidden {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            max-height: 0px;
            padding-top: 0px;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
}

.information-headline { font-weight: 400; }
.information-p { font-size: 1.3rem; }
.information-p a { color: #00f5c8; }
.information-close { position: absolute; right: 15px; top: 15px; height: 20px; width: 20px; }
.information-buttons { }
.information-button { }

@media (min-width: 500px) {
    .information { width: 100%; }
    .information-headline { font-size: 2.7rem; text-align: center; }
    .information-p { text-align: center; width: 340px; margin: 1.4rem auto 2rem auto; font-size: 1.4rem; line-height: 1.9rem; }
    .information-buttons { text-align: center; margin: 0 auto; }
    .information-button { margin: 0px 3px;}
    .site--beta .information-p { width: 100%; max-width: 720px; }


}

@media (min-width: 1250px) {
    /*.information { padding: 200px 20px; }*/
    .information-headline { font-size: 3.2rem; }
    .information-p { width: 470px; margin: 2rem auto 2.5rem auto; font-size: 1.5rem; line-height: 2.2rem; }
    .site--beta .information-p { width: 100%; max-width: 720px; }
}


/*
    3col
*/

.three-col { display: flex; justify-content: space-between; flex-wrap: wrap; }
.three-col_column { text-align: center; flex-basis: 90%; margin: 0 auto; padding: 25px 10px 25px 10px; border-bottom: 1px solid #ddd; }

@media (min-width: 768px) {
    .three-col_column { flex-basis: 33%; border-bottom: none; }
}





/*
    EDITOR: isValidating
*/

.btn--isValidating,
.btn--isValidating:hover {
    color: white;
    background: url('../images/gif/ajax-loader2.gif') no-repeat center center #9633ff;
    padding-right: 54px;
}

.btn--isLoading,
.btn--isLoading:hover {
    background: white;
    background-image: url('../images/gif/ajax-loader2.gif');
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
    -webkit-animation: radiate 0.5s infinite alternate;
            animation: radiate 0.5s infinite alternate;
}

.section--generic { padding: 20px 20px 80px 20px; }

.p4 { padding: 4rem 0; }
.whatever-margin { margin-right: 10px; }



/*
    OrderBy
*/

.orderby { }
.orderby_li { float: left; margin: 0 23px 0 0; }
.orderby_link { font-weight: 500; color: #aaa; }
.orderby .isSelected { color: black; }

.orderby--basic { font-size: 1.2rem; list-style-type: none; }
.orderby--standalone { padding: 10px 0 14px 20px; }
.orderby--bordered { border-top: 1px solid #f3f3f3; border-bottom: 1px solid #e2e2e2; }



@media (min-width: 768px) {
    .orderby--standalone {
        max-width: 570px;
    }
}










 /*
     NEW ARTICLE TEMPLATE

    this is actually more like a "generic page", maybe i can find a better name than article here

 */



.generic { margin-bottom: 40px; }
.generic_header { padding-top: 25px; padding-bottom: 5px; margin-bottom: 40px; }
.generic_header--floorless { margin-bottom: 0; }
.generic_title { margin-right: 25px; }
.generic_subtitle { }
.generic_subtitle .isActive { color: #9633ff; }

.generic_subtitlelink { margin-right: 10px; }
.generic_titleaddition { }

.generic--topborder { border-top: 1px solid #f3f3f3; }
.generic--bottomborder { border-bottom: 1px solid #e2e2e2; }

/*
    Flex
*/

.generic_header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
}

.generic_titlewrap { flex: 1 0 0; }
.generic_subtitle { flex: 1 0 0; }
.generic_titleaddition { text-align: right; flex: 1 0 0; }

/* Order */

/*@media (max-width: 550px) {
    .generic_title { order: 0; }
    .generic_subtitle { order: 2; }
    .generic_button { margin-left: auto; order: 1; }
}*/

/*
    Responsive
*/
@media (max-width: 550px) {
    .generic_subtitle { width: 100%; flex: inherit; margin-top: -10px; margin-bottom: 15px; }
    .generic_titleaddition { display:none; }
}

/*
    Additionals
*/

/* Search */
.generic_search { border-bottom: 0; font-size: 3rem; margin-bottom: 0; padding-bottom: 5px; width: 100%; }
.generic_header--searchform { margin-bottom: 0px; }
.generic_searchbox { position: relative; top: -4px; }

@media(min-width:600px) {
    .generic_search { font-size: 4rem; width: 420px; margin-right: -20px; }
}

/* Stats */
.inline-stick { position: fixed; top: 0px; border-bottom: 1px solid #ddd; background: white; z-index: 11; }
.generic_header--stats { }
.generic_header--stats.inline-stick { padding-top: 43px; }
.generic_header--stats.inline-stick h1 { width: 0; overflow: hidden; margin: 0; }

@media (max-width: 599px ) {
    .generic_header--stats.inline-stick { padding-top: 53px; }
}
@media (min-width: 551px ) {
    .generic_header--stats.inline-stick h1 { transition: margin 0.2s, width 0.2s; }
}











 /*
     A article-item with a list, like the posts list
 */


.article--post-list {
    display: flex;
    align-items: center;
    margin: 0px 0;

}
.article--post-list .article-headline { font-size: 1.35rem; line-height: 1.3; text-align: inherit; margin-bottom: 5px;  font-weight: 500; }
.article--post-list .article-contentwrap { padding-left: 3.5%; width: 100%; vertical-align: top; }
.article--post-list .article-actions { min-width: 80px; }
.article--post-list .article-figure { width: 74px; height: 74px; background-position: center center; background-size: cover; }
.article--post-list .article-p { font-size: 1.2rem; max-height: 50px; display: none; }
.article--post-list .article-headline a { color: black }

@media (max-width: 599px) {
    .article--post-list { margin: 20px 0; }
    .article--post-list .article-headline { max-height: 80px; }
    .article--post-list .article-actions { display: inline-block; float: left; }
}

@media (min-width: 600px) {
    .article--post-list { padding: 20px 30px; }
    .article--post-list .article-contentwrap { padding-right: 3.5%; vertical-align: middle; }
    .article--post-list .article-p { display: block; }
}


.overlay { width: 1080px; height: 390px; background: #0A0A0A; float: left; opacity: 0.5; filter: alpha(opacity=50); margin-right: 30px; left: 0; }






/*
    Discover Page
*/

#discover { width: 100%; }
#discoverList { margin:40px 0px; }
#discoverForm { display: inline-block; margin-left: 3px; width: 430px; /* height: 73px; */ font-size: 1rem; position: absolute; top: 0px; left: 45%; }
#discover-search { position: relative; top: 16px; left: 9px; margin-bottom: 0px; }
#discover-search > div { display: inline-block; overflow: hidden; }
@media (max-width: 768px) {
    #discover { display: block; text-align: center; margin-left: 0px; }
    #discover-search { left: initial; top: initial; }
    #discoverForm { width: 100%; height: auto; }
}












/*

    Section handling

    example:

    <main>

        <section>
            Normal centered section
        </section>

        <section class="fullwidth">
            <div class="fullwidth-inner">
                Fullwidth section
            </div>
        </section>

    </main>


*/

.fullwidth-inner {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 630px) {
    main > section,
    .fullwidth-inner { padding-left: 20px; padding-right: 20px; }
}

section.fullwidth { padding-left: 0; padding-right: 0; max-width: none; }
section.fullwidth { padding-left: 0; padding-right: 0; max-width: none; }














/*
    Feed - LoadMore Animation
*/

.loadmore {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100px;

    font-weight: 600;
    color: #adadad;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;

    margin-bottom: 25px;

     -webkit-animation: scale-fade 500ms backwards 0s ;
             animation: scale-fade 500ms backwards 0s ;
}
.flex--2col_col + .loadmore,
.flex--3col_col + .loadmore {
    position: relative;
}


.loadmore circle {

    -webkit-animation: radiate 0.5s infinite alternate;
            animation: radiate 0.5s infinite alternate;

    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
}

.loadmore *:nth-of-type(1) { -webkit-animation-delay: 0.0s; animation-delay: 0.0s; }
.loadmore *:nth-of-type(2) { -webkit-animation-delay: 0.07s; animation-delay: 0.07s; }
.loadmore *:nth-of-type(3) { -webkit-animation-delay: 0.14s; animation-delay: 0.14s; }
.loadmore *:nth-of-type(4) { -webkit-animation-delay: 0.21s; animation-delay: 0.21s; }
.loadmore *:nth-of-type(5) { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; }
.loadmore *:nth-of-type(6) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }







/*
    Flex Layout
*/

.flex { display: flex; }

.flex--vcenter { align-items: center; }

.flex--2col { flex-flow: row wrap; }
.flex--2col_col { flex-basis: 100%; }

.flex--3col { flex-flow: row wrap; }
.flex--3col_col { flex-basis: 100%; }

@media (min-width: 320px) {
    .flex--2col_col { flex-basis: 100%; }
    .flex--3col_col { flex-basis: 50%; }
}

@media (min-width: 780px) {
    .flex--2col_col { flex-basis: 50%; }
    .flex--3col_col { flex-basis: 25%; }
}

/*
    Search
*/

.searchresult-communities { }
.searchresult-communities_col { padding-right: 3px; padding-bottom: 6px; }
.searchresult-communities_box { }

.searchresult-users { }
.searchresult-users_col { padding-right: 3px; padding-bottom: 6px; }
.searchresult-users_col a { word-break: break-word; }
.searchresult-users_box { height: 100%; }

.searchresult-posts { margin-top: 90px; }
.searchresult-posts_hl { position: absolute; top: -70px; left: 0px; }







.spinning-animation-svg {
    position: absolute;
    right: 18px;
    top: 11px;
}



.popUpBlocked {
    margin-top: 13px;
    color: red;
}





/*
    SHARED STYLES FOR THE SOCIAL APP
*/

.bordered_with_teal {
    padding: 3px;
    background: #9633ff;
}





/* Preferences
   - list social networks
   - add Social Network Dropdown
------------------------------------------------ */

.columnContainer-sn { }
.columnContainer-sn_accounts { overflow: hidden; margin-bottom: 2rem; }
.columnContainer-sn_account { display: flex; align-items: center; justify-content: flex-end; }
.columnContainer-sn_accountDetails { margin-right: 15px; padding: 0; text-align: right; line-height: 1.2; }

.add-sn { position: relative; display: flex; flex-direction: column; float: right; margin-bottom: 2rem; width: 200px; }
.add-sn a.btn { color: white; }
.add-sn a.btn:hover { color: #9633ff; }
.add-sn.pull-left { float:left; }
.add-dropdown { position: absolute; top: 40px; visibility: hidden; flex-direction: column; margin-top: 10px; width: 100%; border: 1px solid #9633ff; border-radius: 5px; background: white; text-align: left; align-self: flex-end; z-index: 20; }
.add-dropdown:before { position: absolute; top: -6px; right: 13%; display: block; width: 10px; height: 10px; border-top: 1px solid #9633ff; border-left: 1px solid #9633ff; background-color: #fff; content: ''; transform: rotate( 45deg ); }
.add-dropdown.isActive { visibility: visible; }
.add-dropdown li { display: flex; overflow: hidden; margin: 0; padding: 10px 15px; border-bottom: 1px solid #ececec; align-items: center; }
.add-dropdown li:hover { background: #f8f8f8; }
.add-dropdown a { display: block; width: 100%; color: #9633ff; opacity: 0; transition: transform .5s, opacity .3s; transform: translateX( -25px ); }

.isActive.add-dropdown li a { transform: translateX(0px); opacity: 1; }
.add-dropdown li:nth-of-type(1) a { transition-delay: 0s; }
.add-dropdown li:nth-of-type(2) a { transition-delay: 0.05s; }
.add-dropdown li:nth-of-type(3) a { transition-delay: 0.1s; }
.add-dropdown li:nth-of-type(4) a { transition-delay: 0.15s; }
.add-dropdown li:nth-of-type(5) a { transition-delay: 0.2s; }
.add-dropdown li:nth-of-type(6) a { transition-delay: 0.25s; }
.add-dropdown li:nth-of-type(7) a { transition-delay: 0.3s; }
.add-dropdown a img { margin-right: 10px; }



/*
    YII FIXES
*/
.list-view .summary { display: none; }







/*
    Publication Form
*/

#publication-form {
    margin-top: 8px;
    width: 100%;
}

.publication-editor_row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    margin-bottom: 30px;
}

.publication-editor_row label { display: initial; margin: 0; font-weight: 500; align-self: flex-start; padding-top: 6px; flex-basis: 24%; flex-grow: 1;}
.publication-editor_row input,
.publication-editor_row textarea { margin-bottom: 0; font-size: 14px; color: #999; line-height: 2.5; height: initial; flex: 50%; }
.publication-editor_row textarea { padding-top: 6px; line-height: 1.4; }

.publication-editor_row label.error { color: red; }
.publication-editor_row input.error,
.publication-editor_row textarea.error { border-bottom-color: red; }

.publication-editor_signatureimage { flex: 50%; }
.publication-editor_signatureimage.empty { background: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; min-height: 76px; display: flex; align-items: center; justify-content: center;}
.publication-editor_signatureimage.empty figure { background: transparent; }
.publication-editor_signatureimage.empty:hover figure svg { fill: #333; }
.publication-editor_headerimage.empty { background: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; min-height: 76px; display: flex; align-items: center; justify-content: center;}
.publication-editor_headerimage.empty figure { background: transparent; }
.publication-editor_headerimage.empty:hover figure svg { fill: #333; }
.publication-editor_headerimage { flex: 50%; }
.publication-editor_signature_uploadBtn { margin-top: 20px; }
.publication-editor_header_uploadBtn { margin-top: 20px; }
.publication-editor_submit { margin-top: -10px; }
.publication-editor_rowinfo { text-align: right; width: 100%; margin: 10px 0 -10px 0; color: #adadad; }

.frost {
    background:#fff;

	filter:         url(#blur); /* Firefox needs SVG */
    filter:         blur(20px); /* Someday, sigh ... */
	-webkit-filter: blur(20px); /* Prefixed CSS3 blur filters */
	-moz-filter:    blur(20px);
	-o-filter:      blur(20px);
	-ms-filter:     blur(20px);

    pointer-events: none;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                    not supported by any browser */
}



/*
    Video Embed fix
    based off code from: http://labs.jonsuh.com/responsive-video-embed/
*/
.js-video {
    height: 0;
    position: relative;
    padding-bottom: calc((100% - 40px) * 0.5625);
    max-height: 480px;
}
.js-video embed,
.js-video iframe,
.js-video object,
.js-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 830px) {
    .js-video {
        padding-bottom: calc((830px - 40px)  * 0.5625);
    }
}


/*
    width fix for player in overlay popup
*/

.container.playingTndrlyPlayer { padding: 0; }
.ad-container-main .card.large.card-player .signature-wrap,
.ad-container-main .card.large.card-player .bottom-right,
.ad-container-main .card.large.card-player .call-to-action { display:none; }
.ad-container-main .card.large.card-player .image { top: 0; }
.ad-container-main .video .videoSurround {  }
.ad-container-main .container.playingTndrlyPlayer { display: flex; align-items: center; }


.hide-mobile { display: none; }
@media(min-width:600px) {
    .hide-mobile { display: inline; }
}


/*
    Learn more page
*/

.bg-yellow {
    background-color: #FBFF00;
}
.bg-green {
    background: #00ECB4;
    background: -webkit-linear-gradient(to right, #00ECB4 , #00F4BC);
    background: linear-gradient(to right, #00ECB4 , #00F4BC);
}
.bg-blue {
    background: #0092D4;
    background: -webkit-linear-gradient(to right, #0092D4 , #00C8FB);
    background: linear-gradient(to right, #0092D4 , #00C8FB);
 }
.bg-purple {
    background: #A85AFF;
    background: -webkit-linear-gradient(to right, #A85AFF , #7345DD);
    background: linear-gradient(to right, #A85AFF , #7345DD);
 }
.bg-wine {
    background: #DE034A;
    background: -webkit-linear-gradient(to right, #DE034A , #FF1462);
    background: linear-gradient(to right, #DE034A , #FF1462);
}

.underline_purple { border-color: #B354FF; }
.underline_turquoise { border-color: #00F6BF; }
.underline_wine { border-color: #F51D71; }
.underline_cyan { border-color: #00D0FF; }

.learnmore_section { font-size: 1rem; padding: 120px 0 0 0; }
.learnmore_section--fullpad { padding-bottom: 120px; }
.learnmore_headline { font-size: 4.2em; display: inline-block; border-bottom-width: 3px; border-bottom-style: solid; }
.learnmore_p { font-size: 2.1em; line-height: 1.35; font-weight: 500; }
.learnmore_figure { margin: 0 60px; align-self: flex-end; }
.learnmore_btn { font-size: 1.35rem; letter-spacing: 0.02em; padding: 4px 18px; line-height: 28px; color: white; font-weight: 500; border: none; }
.learnmore_btn--signup { background-color: #FBFF00; color: #3C3C2A; font-weight: 400; }
.slightshadow {box-shadow: 0 0 80px 10px rgba(0,0,0,0.035);background-color: rgba(0,0,0,0.02);}


.learnmore_container { display: flex; }
.learnmore_container--reverse { flex-direction: row-reverse; }
.learnmore_figure { flex: 1 1 70%; background: transparent; }

@media (max-width: 1024px) {
    .learnmore_figure { margin-right: 0; flex: 1 1 100%; }
}

@media (min-width: 768px) {
    .learnmore_container--reverse > div:nth-of-type(1) { margin-left: 5%; }
}

@media (max-width: 767px) {
    .learnmore_section { font-size: 0.8rem; text-align: center; }
    .learnmore_container { flex-direction: column; }
    .learnmore_figure { margin: 0; margin-top: 43px; }
    .learnmore_section { padding-top: 60px; }
    .learnmore_section--fullpad { padding-bottom: 60px; }
    .learnmore_p { display: flex; flex-direction: column; align-items: center; }
}

/*
    AD CONTAINER INLINE
*/

.ad-container_header--inline {
    padding: 22px 30px 19px 30px;
}




/*
    IMAGE CROP ATTEMPT
*/


.image_crop_btn { }
.image_crop_btn.isEnabled { background: red; }

/*.signaturePreviewWrap { width: 40%; height: 30px; margin: 50px auto; }*/



.img-preview {
    width: 255px;
    height: 143px;
    overflow: hidden;
    margin: 40px auto;
}


.cropit-preview {
  background-color: #f8f8f8;
  background-size: cover;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 300px;
  height: 38px;
}

.cropit-preview-image-container {
  cursor: move;
}

.image-size-label {
  margin-top: 10px;
}

input, .export {
  display: block;
}

button {
  margin-top: 10px;
}




/*
    Tipsy Popups
*/

.tipsy {
    position: absolute;
    top: -54px;
    left: -30px;
    padding: 5px 10px;
    border-radius: 5px;
    background: #9633ff;
    color: white;
    font-size: 1.1rem;
    line-height: 1.5;
    display: none;
}

.tipsy:before {
    content: "";
    transform: rotate(45deg);
    background: #9633ff;
    width: 7px;
    height: 7px;
    position: absolute;
    bottom: -3px;
    left: 7px;
}

.tipsy.isVisible {
    display: block;
}





.spinning {
    animation: spinning 1s infinite linear;
}

@keyframes spinning {
    from   { transform: rotateZ(0deg); }
    to  { transform: rotateZ(360deg); }
}


@-webkit-keyframes scale-fade {
    0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(.8) rotateX(-40deg); transform: scale(.8) rotateX(-40deg); }
    50% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" }
    70% { -webkit-transform: scale(1.05) rotateX(0); transform: scale(1.05) rotateX(0); }
    100% { -webkit-transform: scale(1) rotateX(0); transform: scale(1) rotateX(0); }
}
@keyframes scale-fade {
    0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(.8) rotateX(-40deg); transform: scale(.8) rotateX(-40deg); }
    50% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" }
    70% { -webkit-transform: scale(1.05) rotateX(0); transform: scale(1.05) rotateX(0); }
    100% { -webkit-transform: scale(1) rotateX(0); transform: scale(1) rotateX(0); }
}


.flash-saved {
    background-color: #ccffcc;
    padding: 10px;
    height:45px;
    overflow: hidden;
    text-align: center;

    -webkit-animation-delay: 2s;

            animation-delay: 2s;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: green-fade;
            animation-name: green-fade;
}

@-webkit-keyframes green-fade {
  from { height: 45px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  50% { height: 45px; padding: 10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  to { height: 0px; padding: 0px 10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
 }
@keyframes green-fade {
  from { height: 45px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  50% { height: 45px; padding: 10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  to { height: 0px; padding: 0px 10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
 }

 .post-footer-socialbar [data-liked="0"],
 .post-footer-socialbar [data-liked] { fill: none; stroke: #888; stroke-width: 1px; }
 .post-footer-socialbar [data-liked="1"] { fill: currentColor; color: #9633ff; stroke: currentColor; }
 .post-footer-socialbar .iconWrap { display: flex; align-items: center; }
 /* .socialbar .iconWrap .count { color: black } */


 .dropdown [data-liked="0"],
 .dropdown [data-liked] { fill: inherit; stroke: currentColor; }
 .dropdown [data-liked="1"] { fill: currentColor; color: #9633ff; }
 .dropdown .iconWrap { display: flex; align-items: center; }



.instagram-media { max-width: initial !important; }















.spinner2018:before {
    content: "";
    background: url(https://hinterland.xyz/assets/svg/la/spinner.svg) no-repeat center center transparent;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;

    animation-name: rotate;
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}



@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


/* Engagement update */

.socialbar-wrap { max-width: 610px; margin: 0 auto; position: relative; }
.socialbar-wrap hr { margin-bottom: 1rem; margin-top: 1rem; }
.socialbar-wrap .thanksLink { padding-left: 20px; }
.socialbar-wrap .thanks { height: 22px; width: 22px; margin-left: -1px; }


.thanks-list { display: flex; flex-direction: row-reverse; }
.thanks-list .thanks { display: inline-block; margin-right: -9px; }
.thanks-list .thanks:first-of-type { margin: 0; }
.thanks-list .thanks img { object-fit: cover; border-radius: 100px; border: 2px solid #FFFFFF; width: 22px; height: 22px; background: #ddd; object-fit: cover; }
.thanks-list .thanks-more { height: 21px; margin-top: 0px; margin-top: 0px; text-indent: 9px; font-weight: 700; display: flex; align-items: center; line-height: 1; background-color: #f1f1f1; border-radius: 100px; border: 1px solid #ffffff; color: #797979; font-size: 0.75rem; letter-spacing: -0.08em; padding-right: 6px; }

.thanks-list.mediumSize .thanks img { width: 24px; height: 24px; margin-top: -1px; }
.thanks-list.mediumSize .thanks-more { height: 23px;   }








/* Homepage: Fix overflowing-x on mobiles */

body.homepage .container--main { width: 100%; overflow: hidden; }