@charset "UTF-8";
/* Lightweight CSS 0.7.4 */
*, *:before, *:after{
    background-repeat:no-repeat;
    box-sizing:border-box
}

*{
    text-shadow:none;
    background:transparent;
    border:0;
    font:inherit;
    margin:0;
    outline:none;
    padding:0;
    text-align:left;
    text-decoration:none;
    vertical-align:baseline;
    z-index:1;
    transform:none
}

p, div, article, aside, audio, details, dialog, embed, figure, footer, header, hgroup, menu, nav, section, summary, video, wbr, main{
    display:block
}

bdi, figcaption, keygen, mark, meter, progress, rp, rt, ruby, time{
    display:inline
}

acronym, applet, big, center, dir, font, frame, frameset, noframes, s, strike, tt, u, template{
    display:none
}

summary{
    display:list-item
}

canvas{
    display:inline-block
}

audio, canvas, iframe, img, svg, video{
    vertical-align:middle
}

audio:not([controls]){
    display:none;
    height:0
}

ol, ul{
    list-style:none
}

blockquote, q{
    quotes:none
}

blockquote:before, blockquote:after, q:before, q:after{
    content:''
}

table{
    border-collapse:collapse;
    border-spacing:0
}

button, input{
    overflow:visible
}

button, select{
    text-transform:none
}

::-webkit-input-placeholder{
    color:inherit;
    opacity:0.5
}

::-webkit-search-decoration{
    -webkit-appearance:none
}

::-webkit-file-upload-button{
    -webkit-appearance:button
}

a, area, button, input, label, select, summary, textarea, [tabindex]{
    -ms-touch-action:manipulation;
    touch-action:manipulation
}

[aria-busy="true"]{
    cursor:progress
}

[aria-controls]{
    cursor:pointer
}

[aria-disabled], [disabled]{
    cursor:not-allowed
}

[aria-hidden="false"][hidden]:not(:focus){
    clip:rect(0, 0, 0, 0);
    display:inherit;
    position:absolute
}
/* Start */
@font-face {
    font-family:system;
    font-style: normal;
    font-weight: 400;
    src:local(system-ui),
    local(-apple-system),
    local(BlinkMacSystemFont),
    local('Segoe UI'),
    local(Roboto),
    local(Oxygen),
    local(Ubuntu),
    local(Cantarell),
    local('Open Sans'),
    local('Noto Sans'),
    local('Fira Sans'),
    local('Droid Sans'),
    local('Apple Color Emoji'),
    local('Segoe UI Emoji'),
    local('Segoe UI Symbol'),
    local('Noto Color Emoji'),
    url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff") format("woff");
}

html{
    height:100%;
    font-size: 100%;
    line-height: 1.5;
    font-family: 'system', 'Helvetica Neue',Helvetica, Arial, sans-serif;
    -moz-tab-size:4;
    tab-size:4;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    letter-spacing:.00625rem;
    word-spacing:.125rem;
    word-break:normal;
    -webkit-font-smoothing:subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling:touch;
    text-rendering:optimizeLegibility;
    text-overflow:ellipsis
}

@media screen and (max-width:1024px){
    html{
        font-size:93.75%
    }
}

@media screen and (max-width:768px){
    html{
        font-size:87.5%
    }
}

@media screen and (max-width:480px){
    html{
        font-size:81.25%
    }
}

body{
    min-width:320px;
    min-height:480px;
    background:#eee;
    color:#555;
}

.page{
    display:flex;
    flex-flow:column nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    min-height:100vh
}

.container{
    width:100%;
    max-width:1346px;
    margin:0 auto;
    padding:0 1rem
}

.page > nav,
.page > header,
.page > footer{
    flex:0 0 auto;
    width:100%
}

.page > main{
    flex:1 1 100%;
    width:100%
}

.row{
    display:flex;
    flex-flow:row wrap;
    align-items:flex-start;
    justify-content:flex-start;
}

.col-12{
    flex:1 0 100%
}

.col-11{
    flex:1 0 91.66%
}

.col-10{
    flex:1 0 83.33%
}

.col-9{
    flex:1 0 75%
}

.col-8{
    flex:1 0 66.66%
}

.col-7{
    flex:1 0 58.33%
}

.col-6{
    flex:1 0 50%
}

.col-5{
    flex:1 0 41.66%
}

.col-4{
    flex:1 0 33.33%
}

.col-3{
    flex:1 0 25%
}

.col-2{
    flex:1 0 16.66%
}

.col-1{
    flex:1 0 8.33%
}

@media screen and (max-width:768px){
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
        flex:1 0 100%
    }
}

.content{
    flex:1 1 100%;
    background:#fff;
    padding:1.25rem;
    margin-top:1.25rem;
    border:.0625rem solid #ccc;
    box-shadow:0 .125rem .375rem #bbb;
    border-radius:.375rem;
}

p{
    flex:1 0 100%;
    margin:0 auto 1rem;
    line-height:2
}

p:last-child{
    margin:0 auto
}

code, kbd, pre, samp, .code{
    font-family:Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Liberation Mono, monospace;
    font-size:91%;
}

.code{
    font-size:100%
}

pre{
    max-width:100%;
    overflow-x:auto
}

code{
    padding:.0625rem .5rem;
    margin:0 .25rem;
    background:#eee;
    color:#555;
    border:.0625rem solid #ccc;
    border-radius:.25rem
}

pre > code{
    display:block;
    padding:1rem;
    margin:0;
    border-left: .75rem solid #089;
    overflow-x:auto
}

a, a:link{
    color:#07f;
    text-decoration:none
}

a:visited{
    color:#54e
}

a:hover{
    color:#49f;
    text-decoration:underline
}

h1, h2, h3, h4, h5, h6{
    color:#333;
    line-height:1.2;
    margin:0 0 1rem;
    font-weight:600
}

h1{
    font-size:2.25rem
}

h2{
    font-size:1.875rem
}

h3{
    font-size:1.5rem
}

h4{
    font-size:1.25rem
}

h5{
    font-size:1rem
}

h6{
    font-size:0.75rem
}

.big{
    font-size:115%;
    line-height:1.75
}

.small, small{
    font-size:84%
}

b, strong, .strong{
    color: #333;
    font-weight:600
}

em, dfn, .italic{
    font-style:italic
}

mark{
    background:#fc0;
    color:#333
}

abbr[title]{
    text-decoration:underline dotted
}

sub, sup{
    font-size:80%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}

sub{
    bottom:-0.25em
}

sup{
    top:-0.75em
}

img{
    border:0
}

svg{
    fill:currentColor
}

svg:not(:root){
    overflow:hidden
}

hr{
    border:0;
    margin:.625rem auto;
    height:.0625rem;
    border-bottom:.0625rem solid #ccc
}

nav{
    display:flex;
    background:#333;
    color:#fff;
    height:4rem;
    line-height:4rem
}

nav > .container{
    display:flex;
    flex-flow:row wrap
}

.nav-fixed{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10001
}

.nav-brand{
    min-width:5rem;
    max-width:25rem;
    flex:0 0 auto
}

.nav-brand a{
    color:#fff;
    padding:.75rem
}

.nav-search{
    display:flex;
    flex-flow:row nowrap;
    position:relative;
    padding:.75rem 1.25rem;
    flex:1 1 auto;
}

@media screen and (max-width:640px){
    .nav-search{
        display:none
    }
}
.nav-search-box{
    background:#fff;
    box-shadow:none;
    border:.0625rem solid #07f;
    height:2.5rem;
    margin:0
}

.nav-search-box:focus{
    border-color:#999;
    box-shadow:0 0 .25rem .0625rem #fff
}

.nav-search-btn{
    position:absolute;
    height:2.5rem;
    width:3rem;
    right:1.5rem;
    background:none;
    transition:none
}

.nav-search-btn:focus, .nav-search-btn:hover{
    box-shadow:none;
    transform:none
}

.nav-link{
    min-width:5rem;
    flex:0 0 auto;
    margin-left:auto
}

.nav-link > a{
    display:inline-block;
    color:#fff;
    padding:0 .5rem;
    transition:background .15s ease-out;
}

.nav-link > a:hover{
    background:rgba(255, 255, 255, .25);
    transition:background .15s ease-in;
    text-decoration:none
}

footer{
    border-top:.5rem solid #07f;
    background:#fff;
    padding:1rem 0;
    margin-top:1.25rem
}

/* Breadcrumb */
ul.breadcrumb{
    margin:0
}

ul.breadcrumb > li{
    display:inline-block;
    margin:0
}

ul.breadcrumb > li > a{
    color:#333;
    text-decoration:none;
    display:inline-block
}

ul.breadcrumb > li:last-child{
    color:#bbb
}

ul.breadcrumb > li:not(:last-child)::after{
    color:#ccc;
    content:" >";
    padding:0 .3125rem
}

img.responsive{
    display:block;
    height:auto;
    max-width:100%;
    margin:.3125rem 0
}

.video-responsive{
    height:0;
    overflow:hidden;
    padding-bottom:56.25%;
    padding-top:1.875rem;
    position:relative;
    margin-bottom:1.875rem;
}

.video-responsive iframe, .video-responsive object, .video-responsive embed, .video-responsive video{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    max-width:100%;
    width:100%
}

.video-responsive-4-3{
    padding-bottom:75%
}

/* Tables */
table{
    table-layout:fixed;
    text-align:left;
    width:100%;
    margin-bottom:1.25rem
}

table thead{
    font-weight:600;
    border-bottom:.25rem solid #ccc
}

th, td{
    word-wrap:break-word
}

table th, table td{
    border-bottom:.0625rem solid #ccc;
    padding:1rem
}

.table-striped tbody tr:nth-of-type(odd){
    background:#eee
}

/* Blockquote */
blockquote{
    border-left:.6rem solid #ccc;
    margin:.75rem 0;
    padding:.625rem
}

blockquote cite{
    margin-top:.5rem;
    display:block;
    color:#aaa;
    font-style:italic
}

blockquote cite:before{
    content:' — '
}

/* Pagination */
ul.pagination{
    display:flex;
    flex-flow:row wrap;
    list-style-type:none;
    margin:0 0 .625rem;
    line-height:3
}

ul.pagination li:first-child a{
    border-radius:.25rem 0 0 .25rem
}

ul.pagination li:last-child a{
    border-radius:0 .25rem .25rem 0;
    border-right:.0625rem solid #ccc
}

ul.pagination li a{
    color:#333;
    border:.0625rem solid #ccc;
    border-right:0;
    margin-right:-.0625rem;
    padding:.75rem 1rem
}

ul.pagination li a.active, ul.pagination li a:hover:not(.active){
    background-color:#07f;
    color:#fff;
    text-decoration:none
}

ul.pagination li a.active:hover, ul.pagination li a.active:focus{
    cursor:not-allowed;
}

/* Lists */
ul, ol{
    margin:.625rem;
    padding:0
}

ul ul, ol ul, ul ol, ol ol{
    margin:0 0 0 1.5rem
}

ul{
    list-style:disc inside
}

ul ul{
    list-style-type:circle
}

ol{
    list-style:decimal inside
}

ol ol{
    list-style-type:lower-alpha
}

ul li, ol li{
    margin:.125rem 0
}

dl dt{
    font-weight:600
}

dl dd{
    margin:0 0 1.25rem 1.5rem
}

.h-list, .v-list{
    list-style:none;
    padding:0;
    margin:0
}

.v-list .v-list{
    padding:.125rem .75rem
}

.v-list li{
    display:block;
    padding:.25rem
}

.h-list li{
    display:inline;
    padding:0 1rem 0 0
}

.h-list li:last-child{
    padding:0
}

/* Forms */
fieldset{
    position:relative;
    margin:.625rem 0;
    border:.0625rem solid #ccc;
    border-radius:.3125rem
}

legend{
    padding:.625rem;
    margin-left:.625rem
}

label{
    cursor:pointer
}

.input-group{
    padding:0 1rem 1rem
}

textarea{
    overflow:auto;
    resize:vertical
}

optgroup{
    padding:1rem 0 0
}

input, button, option, textarea, select{
    padding:.8rem;
}

input, textarea, select{
    border:.0625rem solid #ccc;
    box-shadow:0 0 .25rem #ddd;
    border-radius:.375rem;
    margin:.25rem 0;
    line-height:1;
    outline:0;
    width:100%;
    transition:box-shadow .25s ease-out;
}

input:focus, textarea:focus, select:focus{
    border:.0625rem solid #07f;
    box-shadow:0 0 .5rem #07f;
    transition:box-shadow .25s ease-in;
}

input:disabled, textarea:disabled, select:disabled{
    background:#eee;
    cursor:not-allowed
}

input[type=radio], input[type=checkbox]{
    width:auto;
    box-shadow:none;
    margin-left:.5rem
}

input[type=file], input[type=color], input[type=range], input[type=color]:focus, input[type=range]:focus{
    background:transparent;
    border:0;
    box-shadow:none
}

.progress, .progress-bar{
    height:1.25rem;
    background:#eee;
    border:.0625rem solid #ccc;
    border-radius:.25rem;
    text-align:center
}

.progress-bar{
    height:1.125rem;
    border:none;
    border-radius:.175rem 0 0 .175rem;
    background:#7c4
}

input.error{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border:.0625rem solid #f31;
    margin-bottom:0
}

input.error:focus{
    box-shadow:0 0 .125rem 0.0625rem #f75;
}

.error-text{
    position:relative;
    background:#f75;
    color:#fff;
    border:.0625rem solid #f31;
    border-top:0;
    border-bottom-left-radius:.8rem;
    border-bottom-right-radius:.8rem;
    padding:1rem;
    margin-top:-.1rem
}

.btn, button{
    display:inline-block;
    line-height:1;
    font-size:1rem;
    cursor:pointer;
    white-space:nowrap;
    border:0;
    border-radius:.25rem;
    background:#ccc;
    color:#fff;
    padding:.75rem 1rem;
    width:auto;
    text-align:center;
    transition:all 150ms ease-in
}

.btn:disabled, button:disabled{
    opacity:.85;
    cursor:not-allowed
}

.btn:focus, button:focus, .btn:hover, button:hover{
    box-shadow:0 .125rem .25rem 0.025rem #999;
    outline:0;
    border:none;
    transition:all 150ms ease-out;
    transform:translateY(-.0625rem);
}

.btn-full{
    width:100%;
    padding:1.125rem;
    margin-bottom:1rem;
}

a.btn{
    color:#fff
}

a.btn:hover{
    text-decoration:none
}

/* Extras */
.badge{
    display:inline;
    background:#f31;
    color:#fff;
    border-radius:1rem;
    font-size:.75rem;
    min-width:1.5rem;
    padding:.25rem .5rem;
    text-align:center;
    white-space:nowrap;
    margin-left:.5rem
}

.label{
    display:inline;
    line-height:2.5;
    padding:.5rem 1rem;
    font-size:93%;
    background:#ccc;
    color:#fff;
    white-space:nowrap;
    border-radius:.25rem
}

.alert{
    position:relative;
    background:#ccc;
    color:#fff;
    border-radius:.375rem;
    padding:1rem 1.5rem;
    margin-bottom:1rem
}

.close{
    position:absolute;
    top:.5rem;
    right:1rem;
    font-size:1.5rem;
    font-weight:700;
    cursor:pointer;
    transition:color .15s ease-in
}
.close:hover{
    color:#333;
    transition:color .15s ease-out
}

.text-left{
    text-align:left
}

.text-right{
    text-align:right
}

.text-center{
    text-align:center
}

.text-justify{
    text-align:justify
}

.text-invisible{
    font:0/0 a
}

.text-light{
    color:#666
}

.text-lighter{
    color:#999
}

.text-lightest{
    color:#ccc
}

.fullscreen{
    width:100%;
    min-height:100vh
}

.hide{
    display:none !important
}

.show{
    display:block !important
}

.invisible{
    visibility:hidden !important
}

.visible{
    visibility:visible !important
}

.no-margin{
    margin:0
}

.no-padding{
    padding:0
}

/* colors */
.btn:focus, .btn:hover{
    background:#ddd
}

.clear{
    background:transparent;
    color:inherit
}

.clear.btn{
    color:inherit
}

.clear.btn:focus, .clear.btn:hover{
    background:transparent;
    box-shadow:none;
    border:none;
    transform: none
}

.danger{
    background:#f31
}

.danger.btn:focus, .danger.btn:hover{
    background:#f75
}

.success{
    background:#7c4
}

.success.btn:focus, .success.btn:hover{
    background:#9d7
}

.primary{
    background:#07f
}

.primary.btn:focus, .primary.btn:hover{
    background:#49f
}

.info{
    background:#089
}

.info.btn:focus, .info.btn:hover{
    background:#4ab
}

.warning{
    background:#f60
}

.warning.btn:focus, .warning.btn:hover{
    background:#f94
}

.note, .highlight{
    background:#fc0
}

.note.btn:focus, .note.btn:hover{
    background:#fd5
}

.highlight{
    padding:.25rem;
    margin:0 .25rem;
    border-radius:.25rem;
}

.branding{
    background:#87e
}

.branding.btn:focus, .branding.btn:hover{
    background:#aaf
}

.delight{
    background:#f35
}

.delight.btn:focus, .delight.btn:hover{
    background:#f78
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    main{
        flex-basis: auto !important;
    }
    .row{
        display:block;
    }
    .row::after{
        display: block;
        content: "";
        clear: both;
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
        float:left;
    }
    .col-12{
        width:100%
    }

    .col-11{
        width:91.66%
    }

    .col-10{
        width:83.33%
    }

    .col-9{
        width:75%
    }

    .col-8{
        width:66.66%
    }

    .col-7{
        width:58.33%
    }

    .col-6{
        width:50%
    }

    .col-5{
        width:41.66%
    }

    .col-4{
        width:33.33%
    }

    .col-3{
        width:25%
    }

    .col-2{
        width:16.66%
    }

    .col-1{
        width:8.33%
    }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
        width:100%
    }
}