/* TRANSITIONS */
.popout-button { -webkit-transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border 0.2s ease;-moz-transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border 0.2s ease;-ms-transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border 0.2s ease;-o-transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border 0.2s ease;transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border 0.2s ease; }
#popout-trigger .popout-trigger-button { -webkit-transition: border-color 0.2s ease;-moz-transition: border-color 0.2s ease;-ms-transition: border-color 0.2s ease;-o-transition: border-color 0.2s ease;transition: border-color 0.2s ease; }
.popout-switch .popout-options:after { -webkit-transition: transform 0.2s ease;-moz-transition: transform 0.2s ease;-ms-transition: transform 0.2s ease;-o-transition: transform 0.2s ease;transition: transform 0.2s ease; }
#popout .popout-outer { -webkit-transition: transform 0.4s ease;-moz-transition: transform 0.4s ease;-ms-transition: transform 0.4s ease;-o-transition: transform 0.4s ease;transition: transform 0.4s ease; }

/* POPOUT TRIGGER */
#popout-trigger { position: fixed; left: 0; bottom: 0; z-index: 2000; pointer-events: none; }
#popout-trigger .popout-trigger-button { position: absolute; bottom: 0; left: 0; width: 0; height: 0; border: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #cccccc; background: transparent; padding: 0; pointer-events: auto; }
#popout-trigger .popout-trigger-button:hover { border-color: transparent transparent transparent #666666; }
#popout-trigger .popout-trigger-button svg { position: absolute; bottom: 15px; left: -85px; }
@media only screen and (max-width: 750px) {
    #popout-trigger .popout-trigger-button { border-width: 80px 0 0 80px; }
    #popout-trigger .popout-trigger-button svg { position: absolute; bottom: 7px; left: -73px; }
}

/* POPOUT */
#popout { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; display: none; }
#popout .popout-blocker { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #000000; opacity: 0.8; }
#popout .popout-outer { position: absolute; top: 0; left: 0; bottom: 0; width: 500px; max-width: calc(100% - 30px); max-height: 100%; overflow: auto; background: #ffffff; -webkit-transform: translate3d(-100%,0,0);-moz-transform: translate3d(-100%,0,0);-ms-transform: translate3d(-100%,0,0);-o-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0); }
#popout.open .popout-outer { -webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0); }
#popout .popout-inner { padding: 60px 30px; }
#popout .popout-section:nth-of-type(n+2) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #cccccc; }
@media only screen and (max-width: 750px) {
    #popout .popout-inner { padding: 40px 15px 60px; }
}

/* POPOUT BUTTON */
.popout-buttons { margin-top: 32px; }
.popout-button { display: inline-block; box-sizing: border-box; cursor: pointer; min-width: 180px; font-size: 20px; line-height: 28px; font-family: inherit; font-weight: 700; padding: 8px 15px; text-align: center; background: #666666; color: #ffffff; border-radius: 5px; }
.popout-button + .popout-button { margin-left: 4px; }
.popout-button:hover { background: #999999; }
@media only screen and (max-width: 750px) {
    .popout-buttons { margin-right: -10px; }
    .popout-button { min-width: 1px; font-size: 14px; line-height: 24px; padding: 8px 10px; }
}

/* POPOUT SWITCH */
.popout-switch { margin-top: 32px; width: 180px;  background: #666666; border-radius: 5px; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }
.popout-switch .popout-options { font-size: 20px; line-height: 28px; font-family: inherit; font-weight: 700; padding: 8px 0; color: #ffffff; display: flex; width: 100%; position: relative; cursor: pointer; }
.popout-switch .popout-options:after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: #cccccc; border-radius: 5px; pointer-events: none; -webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0); }
[data-popup-state="1"] .popout-switch .popout-options:after { -webkit-transform: translate3d(100%,0,0);-moz-transform: translate3d(100%,0,0);-ms-transform: translate3d(100%,0,0);-o-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0); }
.popout-switch .popout-options span { width: 50%; text-align: center; }
@media only screen and (max-width: 750px) {
    .popout-switch { width: 150px; }
    .popout-switch .popout-options { min-width: 1px; font-size: 14px; line-height: 24px; }
}